@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/inspectors/CameraSection.tsx

@@ -1,8 +1,7 @@
 import type { SceneCamera } from '@engine/scene/scene-types';
+import { NumberInput, SectionHeader, Select, Tooltip } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
-import { Tooltip } from '../primitives/Tooltip';
+import { fieldLabelStyle, mixedStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { commonNum, commonStr } from './multi-edit-utils';
 
@@ -28,24 +27,16 @@ export function CameraSection({ entities, ids }: SectionProps) {
     <SectionHeader label="Camera">
       <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={camType ?? ''}
             onChange={(e) => update({ type: e.target.value as SceneCamera['type'] })}
-            style={{
-              width: '100%',
-              background: '#1e1e1e',
-              color: camType === null ? '#666' : '#c5c8ce',
-              fontStyle: camType === null ? 'italic' : 'normal',
-              border: '1px solid #333',
-              borderRadius: 2,
-              padding: '3px 4px',
-              fontSize: 12,
-            }}
+            style={{ width: '100%', ...mixedStyle(camType === null) }}
           >
             {camType === null && (
               <option value="" disabled>
-                (mixed)
+                —
               </option>
             )}
             {cameraTypes.map((t) => (
@@ -53,12 +44,12 @@ export function CameraSection({ entities, ids }: SectionProps) {
                 {t}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
         {camType === 'perspective' && (
           <div>
             <Tooltip text="Vertical field of view in degrees" position="right">
-              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>FOV (deg)</div>
+              <div style={fieldLabelStyle}>FOV (deg)</div>
             </Tooltip>
             <NumberInput
               value={commonNum(entities, (e) => e.camera?.fov ?? 60)}
@@ -69,7 +60,7 @@ export function CameraSection({ entities, ids }: SectionProps) {
         )}
         {camType === 'orthographic' && (
           <div>
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Ortho Size</div>
+            <div style={fieldLabelStyle}>Ortho Size</div>
             <NumberInput
               value={commonNum(entities, (e) => e.camera?.orthoSize ?? 5)}
               onChange={(v) => update({ orthoSize: v })}
@@ -79,23 +70,23 @@ export function CameraSection({ entities, ids }: SectionProps) {
         )}
         <div>
           <Tooltip text="Nearest visible distance" position="right">
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Near</div>
+            <div style={fieldLabelStyle}>Near</div>
           </Tooltip>
           <NumberInput value={near} onChange={(v) => update({ near: v })} step={0.1} />
         </div>
         <div>
           <Tooltip text="Farthest visible distance" position="right">
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Far</div>
+            <div style={fieldLabelStyle}>Far</div>
           </Tooltip>
           <NumberInput value={far} onChange={(v) => update({ far: v })} step={10} />
         </div>
         <div style={{ display: 'flex', gap: 6 }}>
           <div style={{ flex: 1 }}>
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Width</div>
+            <div style={fieldLabelStyle}>Width</div>
             <NumberInput value={width} onChange={(v) => update({ width: v })} step={1} />
           </div>
           <div style={{ flex: 1 }}>
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Height</div>
+            <div style={fieldLabelStyle}>Height</div>
             <NumberInput value={height} onChange={(v) => update({ height: v })} step={1} />
           </div>
         </div>

package/src/components/inspectors/ComponentsSection.tsx

@@ -1,32 +1,30 @@
 import type { SceneEntity } from '@engine/scene/scene-types';
+import {
+  Button,
+  Checkbox,
+  ColorInput,
+  JsonInput,
+  NumberInput,
+  SectionHeader,
+  Select,
+  TextInput,
+  Tooltip,
+  themeVars,
+  Vec3Input,
+} from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
 import { getLoadedComponents } from '../../script-loader';
-import { ColorInput } from '../primitives/ColorInput';
-import { JsonInput } from '../primitives/JsonInput';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
-import { Tooltip } from '../primitives/Tooltip';
-import { Vec3Input } from '../primitives/Vec3Input';
+import { LABEL_COL_WIDTH } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { type FieldDescriptor, introspectSchema } from './zod-fields';
 
 type ComponentMap = NonNullable<SceneEntity['components']>;
 type ComponentData = Record<string, unknown>;
 
-const inputStyle: React.CSSProperties = {
-  flex: 1,
-  background: '#1e1e1e',
-  color: '#c5c8ce',
-  border: '1px solid #333',
-  borderRadius: 2,
-  padding: '2px 4px',
-  fontSize: 12,
-};
-
 const labelStyle: React.CSSProperties = {
   fontSize: 11,
-  color: '#8c8c8c',
-  width: 70,
+  color: themeVars.content.muted,
+  width: LABEL_COL_WIDTH,
   flexShrink: 0,
 };
 
@@ -93,24 +91,19 @@ export function ComponentsSection({ entities }: SectionProps) {
                   marginBottom: 4,
                 }}
               >
-                <span style={{ fontSize: 11, fontWeight: 600, color: '#b0b0b0' }}>{compName}</span>
-                <button
+                <span style={{ fontSize: 11, fontWeight: 600, color: themeVars.content.primary }}>
+                  {compName}
+                </span>
+                <Button
                   type="button"
                   title="Remove component"
                   data-testid={`component-remove-${compName}`}
                   onClick={() => removeComponent(compName)}
-                  style={{
-                    background: 'transparent',
-                    border: 'none',
-                    color: '#777',
-                    cursor: 'pointer',
-                    fontSize: 12,
-                    lineHeight: 1,
-                    padding: 0,
-                  }}
+                  variant="ghost"
+                  size="compact"
                 >
                   ×
-                </button>
+                </Button>
               </div>
 
               {fields
@@ -121,13 +114,14 @@ export function ComponentsSection({ entities }: SectionProps) {
         })}
 
         {addable.length > 0 && (
-          <select
+          <Select
+            className="vgai-select"
             data-testid="component-add"
             value=""
             onChange={(e) => {
               if (e.target.value) addComponent(e.target.value);
             }}
-            style={{ ...inputStyle, cursor: 'pointer' }}
+            style={{ width: '100%' }}
           >
             <option value="">+ Add component…</option>
             {addable.map((name) => (
@@ -135,7 +129,7 @@ export function ComponentsSection({ entities }: SectionProps) {
                 {name}
               </option>
             ))}
-          </select>
+          </Select>
         )}
       </div>
     </SectionHeader>
@@ -241,8 +235,8 @@ function renderWidget(
       );
     case 'boolean':
       return (
-        <input
-          type="checkbox"
+        <Checkbox
+          className="vgai-checkbox"
           data-testid={testId}
           checked={Boolean(value)}
           onChange={(e) => setField(compName, f.name, e.target.checked)}
@@ -270,18 +264,19 @@ function renderWidget(
     case 'enum':
     case 'select':
       return (
-        <select
+        <Select
+          className="vgai-select"
           data-testid={testId}
           value={value == null ? '' : String(value)}
           onChange={(e) => setField(compName, f.name, e.target.value)}
-          style={{ ...inputStyle, cursor: 'pointer' }}
+          style={{ width: '100%' }}
         >
           {(f.options ?? []).map((opt) => (
             <option key={opt} value={opt}>
               {opt}
             </option>
           ))}
-        </select>
+        </Select>
       );
     default:
       return (
@@ -313,8 +308,8 @@ function RawInput({
   const id = testId ?? fieldTestId(compName, fieldKey);
   if (typeof value === 'boolean') {
     return (
-      <input
-        type="checkbox"
+      <Checkbox
+        className="vgai-checkbox"
         data-testid={id}
         checked={value}
         onChange={(e) => setField(compName, fieldKey, e.target.checked)}
@@ -333,14 +328,15 @@ function RawInput({
         <JsonInput
           value={value}
           onCommit={(v) => setField(compName, fieldKey, v)}
-          style={inputStyle}
+          style={{ width: '100%' }}
         />
       </div>
     );
   }
   const display = value === null || value === undefined ? '' : String(value);
   return (
-    <input
+    <TextInput
+      className="vgai-input"
       data-testid={id}
       value={display}
       onChange={(e) => {
@@ -352,7 +348,7 @@ function RawInput({
           setField(compName, fieldKey, raw);
         }
       }}
-      style={inputStyle}
+      style={{ width: '100%' }}
     />
   );
 }

package/src/components/inspectors/JointsSection.tsx

@@ -1,31 +1,20 @@
 import type { SceneEntity, SceneJoint } from '@engine/scene/scene-types';
+import {
+  Button,
+  NumberInput,
+  SectionHeader,
+  Select,
+  themeVars,
+  Vec3Input,
+} from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
-import { Vec3Input } from '../primitives/Vec3Input';
+import { fieldLabelStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 
 const jointTypes: SceneJoint['type'][] = ['fixed', 'revolute', 'prismatic', 'spherical', 'spring'];
 
-const labelStyle: React.CSSProperties = { fontSize: 10, color: '#8c8c8c', marginBottom: 2 };
-const selectStyle: React.CSSProperties = {
-  width: '100%',
-  background: '#1e1e1e',
-  color: '#c5c8ce',
-  border: '1px solid #333',
-  borderRadius: 2,
-  padding: '3px 4px',
-  fontSize: 12,
-};
-const btnStyle: React.CSSProperties = {
-  background: '#333',
-  color: '#c5c8ce',
-  border: '1px solid #444',
-  borderRadius: 3,
-  padding: '2px 6px',
-  cursor: 'pointer',
-  fontSize: 10,
-};
+const labelStyle: React.CSSProperties = fieldLabelStyle;
+// Shared compact chrome button (I-8/I-10) — the old per-file literal.
 
 export function JointsSection({ entities }: SectionProps) {
   const store = useEditorStore();
@@ -75,12 +64,12 @@ export function JointsSection({ entities }: SectionProps) {
           />
         ))}
         {physicsEntities.length > 0 && (
-          <button type="button" style={btnStyle} onClick={addJoint}>
+          <Button type="button" size="compact" onClick={addJoint}>
             + Add Joint
-          </button>
+          </Button>
         )}
         {physicsEntities.length === 0 && joints.length === 0 && (
-          <div style={{ fontSize: 10, color: '#666', fontStyle: 'italic' }}>
+          <div style={{ fontSize: 10, color: themeVars.content.dim, fontStyle: 'italic' }}>
             No other physics entities to connect to.
           </div>
         )}
@@ -111,9 +100,9 @@ function JointEntry({
   return (
     <div
       style={{
-        background: '#1a1a1a',
-        border: '1px solid #333',
-        borderRadius: 3,
+        background: themeVars.surface.shell,
+        border: `1px solid ${themeVars.boundary.default}`,
+        borderRadius: themeVars.shape.small,
         padding: 6,
         display: 'flex',
         flexDirection: 'column',
@@ -122,38 +111,40 @@ function JointEntry({
     >
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-        <span style={{ fontSize: 10, color: '#8c8c8c', fontWeight: 600 }}>#{index}</span>
-        <select
+        <span style={{ fontSize: 10, color: themeVars.content.muted, fontWeight: 600 }}>
+          #{index}
+        </span>
+        <Select
+          className="vgai-select"
           value={joint.type}
           onChange={(e) => onUpdate({ type: e.target.value as SceneJoint['type'] })}
-          style={{ ...selectStyle, flex: 1 }}
+          style={{ flex: 1 }}
         >
           {jointTypes.map((t) => (
             <option key={t} value={t}>
               {t}
             </option>
           ))}
-        </select>
-        <button
+        </Select>
+        <Button
           type="button"
+          variant="danger"
+          size="compact"
+          aria-label="Remove joint"
           onClick={onRemove}
-          style={{
-            ...btnStyle,
-            color: '#F53352',
-            padding: '1px 4px',
-          }}
         >
-          x
-        </button>
+          ×
+        </Button>
       </div>
 
       {/* Target */}
       <div>
         <div style={labelStyle}>Target ({targetName})</div>
-        <select
+        <Select
+          className="vgai-select"
           value={joint.target}
           onChange={(e) => onUpdate({ target: e.target.value })}
-          style={selectStyle}
+          style={{ width: '100%' }}
         >
           {physicsEntities.map((e) => (
             <option key={e.id} value={e.id!}>
@@ -163,7 +154,7 @@ function JointEntry({
           {!physicsEntities.find((e) => e.id === joint.target) && (
             <option value={joint.target}>(missing: {joint.target.slice(0, 8)}...)</option>
           )}
-        </select>
+        </Select>
       </div>
 
       {/* Anchors */}

package/src/components/inspectors/LightSection.tsx

@@ -1,13 +1,37 @@
 import type { SceneLight } from '@engine/scene/scene-types';
+import { ColorInput, NumberInput, SectionHeader, Select, Tooltip } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { ColorInput } from '../primitives/ColorInput';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
-import { Tooltip } from '../primitives/Tooltip';
+import { fieldLabelStyle, mixedStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { commonNum, commonStr } from './multi-edit-utils';
 
-const lightTypes: SceneLight['type'][] = ['directional', 'point', 'spot', 'hemisphere'];
+const lightTypes: SceneLight['type'][] = ['directional', 'point', 'spot', 'hemisphere', 'area'];
+
+function intensityPresentation(type: SceneLight['type'] | null): {
+  label: string;
+  step: number;
+  help: string;
+} {
+  if (type === 'point' || type === 'spot') {
+    return {
+      label: 'Intensity (cd)',
+      step: 10,
+      help: 'Native Three.js candela with distance decay. Values near 1 are candle-scale; emissive materials do not illuminate nearby objects.',
+    };
+  }
+  if (type === 'area') {
+    return {
+      label: 'Intensity (nit)',
+      step: 1,
+      help: 'Native Three.js RectAreaLight luminance in nit.',
+    };
+  }
+  return {
+    label: 'Intensity',
+    step: 0.1,
+    help: 'Native Three.js scene-light intensity.',
+  };
+}
 
 export function LightSection({ entities, ids }: SectionProps) {
   const store = useEditorStore();
@@ -16,6 +40,7 @@ export function LightSection({ entities, ids }: SectionProps) {
   const lightType = commonStr(entities, (e) => e.light?.type);
   const color = commonStr(entities, (e) => e.light?.color ?? '#ffffff');
   const intensity = commonNum(entities, (e) => e.light?.intensity ?? 1);
+  const intensityUi = intensityPresentation(lightType as SceneLight['type'] | null);
 
   const update = (partial: Partial<SceneLight>) => {
     store.batchMutate(ids, (entity) => {
@@ -27,24 +52,16 @@ export function LightSection({ entities, ids }: SectionProps) {
     <SectionHeader label="Light">
       <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={lightType ?? ''}
             onChange={(e) => update({ type: e.target.value as SceneLight['type'] })}
-            style={{
-              width: '100%',
-              background: '#1e1e1e',
-              color: lightType === null ? '#666' : '#c5c8ce',
-              fontStyle: lightType === null ? 'italic' : 'normal',
-              border: '1px solid #333',
-              borderRadius: 2,
-              padding: '3px 4px',
-              fontSize: 12,
-            }}
+            style={{ width: '100%', ...mixedStyle(lightType === null) }}
           >
             {lightType === null && (
               <option value="" disabled>
-                (mixed)
+                —
               </option>
             )}
             {lightTypes.map((t) => (
@@ -52,19 +69,25 @@ export function LightSection({ entities, ids }: SectionProps) {
                 {t}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
         <div>
-          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Color</div>
+          <div style={fieldLabelStyle}>Color</div>
           <ColorInput value={color} onChange={(v) => update({ color: v })} />
         </div>
         <div>
-          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Intensity</div>
-          <NumberInput value={intensity} onChange={(v) => update({ intensity: v })} step={0.1} />
+          <Tooltip text={intensityUi.help} position="right">
+            <div style={fieldLabelStyle}>{intensityUi.label}</div>
+          </Tooltip>
+          <NumberInput
+            value={intensity}
+            onChange={(v) => update({ intensity: v })}
+            step={intensityUi.step}
+          />
         </div>
         {lightType === 'hemisphere' && (
           <div>
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Ground Color</div>
+            <div style={fieldLabelStyle}>Ground Color</div>
             <ColorInput
               value={commonStr(entities, (e) => e.light?.groundColor ?? '#000000')}
               onChange={(v) => update({ groundColor: v })}
@@ -72,22 +95,54 @@ export function LightSection({ entities, ids }: SectionProps) {
           </div>
         )}
         {(lightType === 'point' || lightType === 'spot') && (
-          <div>
-            <Tooltip text="Falloff distance (0 = infinite)" position="right">
-              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Distance</div>
-            </Tooltip>
-            <NumberInput
-              value={commonNum(entities, (e) => e.light?.distance ?? 0)}
-              onChange={(v) => update({ distance: v })}
-              step={1}
-            />
-          </div>
+          <>
+            <div>
+              <Tooltip text="Falloff distance (0 = infinite)" position="right">
+                <div style={fieldLabelStyle}>Distance</div>
+              </Tooltip>
+              <NumberInput
+                value={commonNum(entities, (e) => e.light?.distance ?? 0)}
+                onChange={(v) => update({ distance: v })}
+                step={1}
+              />
+            </div>
+            <div>
+              <Tooltip text="Distance-decay exponent; 2 is inverse-square" position="right">
+                <div style={fieldLabelStyle}>Decay</div>
+              </Tooltip>
+              <NumberInput
+                value={commonNum(entities, (e) => e.light?.decay ?? 2)}
+                onChange={(v) => update({ decay: v })}
+                step={0.1}
+              />
+            </div>
+          </>
+        )}
+        {lightType === 'area' && (
+          <>
+            <div>
+              <div style={fieldLabelStyle}>Width</div>
+              <NumberInput
+                value={commonNum(entities, (e) => e.light?.width ?? 10)}
+                onChange={(v) => update({ width: v })}
+                step={0.1}
+              />
+            </div>
+            <div>
+              <div style={fieldLabelStyle}>Height</div>
+              <NumberInput
+                value={commonNum(entities, (e) => e.light?.height ?? 10)}
+                onChange={(v) => update({ height: v })}
+                step={0.1}
+              />
+            </div>
+          </>
         )}
         {lightType === 'spot' && (
           <>
             <div>
               <Tooltip text="Spotlight cone angle" position="right">
-                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Angle (deg)</div>
+                <div style={fieldLabelStyle}>Angle (deg)</div>
               </Tooltip>
               <NumberInput
                 value={commonNum(
@@ -100,7 +155,7 @@ export function LightSection({ entities, ids }: SectionProps) {
             </div>
             <div>
               <Tooltip text="Soft edge falloff (0–1)" position="right">
-                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Penumbra</div>
+                <div style={fieldLabelStyle}>Penumbra</div>
               </Tooltip>
               <NumberInput
                 value={commonNum(entities, (e) => e.light?.penumbra ?? 0)}