@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/inspectors/PhysicsSection.tsx

@@ -1,9 +1,15 @@
 import type { SceneCollider, SceneEnvironment, ScenePhysics } from '@engine/scene/scene-types';
+import {
+  Checkbox,
+  NumberInput,
+  SectionHeader,
+  Select,
+  Tooltip,
+  themeVars,
+  Vec3Input,
+} from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
-import { Tooltip } from '../primitives/Tooltip';
-import { Vec3Input } from '../primitives/Vec3Input';
+import { fieldLabelStyle, groupLabelStyle, mixedStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { commonBool, commonNum, commonStr, commonVec3 } from './multi-edit-utils';
 
@@ -25,20 +31,9 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
   const sensor = commonBool(entities, (e) => e.physics?.collider.isSensor ?? false);
   const offset = commonVec3(entities, (e) => e.physics?.collider.offset ?? [0, 0, 0]);
 
-  const selectStyle: React.CSSProperties = {
-    width: '100%',
-    background: '#1e1e1e',
-    color: '#c5c8ce',
-    border: '1px solid #333',
-    borderRadius: 2,
-    padding: '3px 4px',
-    fontSize: 12,
-  };
-
   const mixedSelectStyle = (isMixed: boolean): React.CSSProperties => ({
-    ...selectStyle,
-    color: isMixed ? '#666' : '#c5c8ce',
-    fontStyle: isMixed ? 'italic' : 'normal',
+    width: '100%',
+    ...mixedStyle(isMixed),
   });
 
   const update = (partial: Partial<ScenePhysics>) => {
@@ -61,16 +56,17 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
             text="Dynamic: simulated, Fixed: immovable, Kinematic: scripted"
             position="right"
           >
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Body Type</div>
+            <div style={fieldLabelStyle}>Body Type</div>
           </Tooltip>
-          <select
+          <Select
+            className="vgai-select"
             value={bodyType ?? ''}
             onChange={(e) => update({ bodyType: e.target.value as ScenePhysics['bodyType'] })}
             style={mixedSelectStyle(bodyType === null)}
           >
             {bodyType === null && (
               <option value="" disabled>
-                (mixed)
+                —
               </option>
             )}
             {bodyTypes.map((t) => (
@@ -78,24 +74,25 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
                 {t}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
         <div>
           <Tooltip text="Weight for physics simulation" position="right">
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Mass</div>
+            <div style={fieldLabelStyle}>Mass</div>
           </Tooltip>
           <NumberInput value={mass} onChange={(v) => update({ mass: v })} step={0.1} />
         </div>
         <div>
-          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Collider Type</div>
-          <select
+          <div style={fieldLabelStyle}>Collider Type</div>
+          <Select
+            className="vgai-select"
             value={colliderType ?? ''}
             onChange={(e) => updateCollider({ type: e.target.value as SceneCollider['type'] })}
             style={mixedSelectStyle(colliderType === null)}
           >
             {colliderType === null && (
               <option value="" disabled>
-                (mixed)
+                —
               </option>
             )}
             {colliderTypes.map((t) => (
@@ -103,12 +100,12 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
                 {t}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
         {colliderType === 'cuboid' && (
           <div>
             <Tooltip text="Half-size from center to edge" position="right">
-              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Half Extents</div>
+              <div style={fieldLabelStyle}>Half Extents</div>
             </Tooltip>
             <Vec3Input
               value={commonVec3(
@@ -134,7 +131,7 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
         )}
         {colliderType === 'ball' && (
           <div>
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Radius</div>
+            <div style={fieldLabelStyle}>Radius</div>
             <NumberInput
               value={commonNum(entities, (e) => e.physics?.collider.radius ?? 0.5)}
               onChange={(v) => updateCollider({ radius: v })}
@@ -145,7 +142,7 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
         {colliderType === 'capsule' && (
           <>
             <div>
-              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Radius</div>
+              <div style={fieldLabelStyle}>Radius</div>
               <NumberInput
                 value={commonNum(entities, (e) => e.physics?.collider.radius ?? 0.25)}
                 onChange={(v) => updateCollider({ radius: v })}
@@ -153,7 +150,7 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
               />
             </div>
             <div>
-              <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Half Height</div>
+              <div style={fieldLabelStyle}>Half Height</div>
               <NumberInput
                 value={commonNum(entities, (e) => e.physics?.collider.halfHeight ?? 0.5)}
                 onChange={(v) => updateCollider({ halfHeight: v })}
@@ -166,7 +163,7 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
         {/* Physics material */}
         <div>
           <Tooltip text="Surface friction — 0 = ice, 1+ = sticky" position="right">
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Friction</div>
+            <div style={fieldLabelStyle}>Friction</div>
           </Tooltip>
           <NumberInput
             value={friction}
@@ -176,7 +173,7 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
         </div>
         <div>
           <Tooltip text="Bounciness — 0 = no bounce, 1 = full bounce" position="right">
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Restitution</div>
+            <div style={fieldLabelStyle}>Restitution</div>
           </Tooltip>
           <NumberInput
             value={restitution}
@@ -186,7 +183,7 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
         </div>
         <div>
           <Tooltip text="Mass per volume — overrides mass when set" position="right">
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Density</div>
+            <div style={fieldLabelStyle}>Density</div>
           </Tooltip>
           <NumberInput
             value={density}
@@ -196,7 +193,7 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
         </div>
         <div>
           <Tooltip text="Local offset from body origin" position="right">
-            <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Collider Offset</div>
+            <div style={fieldLabelStyle}>Collider Offset</div>
           </Tooltip>
           <Vec3Input
             value={offset}
@@ -221,15 +218,17 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
         <div>
           <Tooltip text="Detect overlaps without physical blocking" position="right">
             <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <input
-                type="checkbox"
+              <Checkbox
+                className="vgai-checkbox"
                 checked={sensor ?? false}
                 ref={(el) => {
                   if (el) el.indeterminate = sensor === null;
                 }}
                 onChange={(e) => updateCollider({ isSensor: e.target.checked })}
               />
-              <span style={{ fontSize: 11, color: '#c5c8ce' }}>Is Sensor (Trigger)</span>
+              <span style={{ fontSize: 11, color: themeVars.content.primary }}>
+                Is Sensor (Trigger)
+              </span>
             </div>
           </Tooltip>
         </div>
@@ -257,11 +256,8 @@ export function PhysicsSection({ entities, ids }: SectionProps) {
 // --- Collision Layers ---
 
 const layerLabelStyle: React.CSSProperties = {
-  fontSize: 10,
-  color: '#8c8c8c',
+  ...groupLabelStyle,
   marginBottom: 2,
-  fontWeight: 700,
-  textTransform: 'uppercase',
   marginTop: 4,
 };
 
@@ -270,7 +266,7 @@ const layerCheckStyle: React.CSSProperties = {
   alignItems: 'center',
   gap: 4,
   fontSize: 10,
-  color: '#c5c8ce',
+  color: themeVars.content.primary,
 };
 
 function CollisionLayersUI({
@@ -299,8 +295,8 @@ function CollisionLayersUI({
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
         {layerNames.map((name, i) => (
           <label key={`g-${name}`} style={layerCheckStyle}>
-            <input
-              type="checkbox"
+            <Checkbox
+              className="vgai-checkbox"
               checked={(groups & (1 << i)) !== 0}
               onChange={() => toggleBit('collisionGroups', i)}
             />
@@ -312,8 +308,8 @@ function CollisionLayersUI({
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
         {layerNames.map((name, i) => (
           <label key={`f-${name}`} style={layerCheckStyle}>
-            <input
-              type="checkbox"
+            <Checkbox
+              className="vgai-checkbox"
               checked={(filter & (1 << i)) !== 0}
               onChange={() => toggleBit('collisionFilter', i)}
             />

package/src/components/inspectors/PostProcessingSection.tsx

@@ -1,31 +1,20 @@
 import { DEFAULTS } from '@engine/scene/defaults';
 import type { SceneEnvironment, ScenePostProcessing } from '@engine/scene/scene-types';
+import {
+  Checkbox,
+  ColorInput,
+  NumberInput,
+  SectionHeader,
+  Select,
+  TextInput,
+  themeVars,
+} from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
 import type { EditorStore } from '../../editor-store';
-import { ColorInput } from '../primitives/ColorInput';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { fieldLabelStyle, groupLabelStyle } from '../inspector-widgets/shared';
 
-const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
-const effectLabel: React.CSSProperties = {
-  fontSize: 10,
-  color: '#8c8c8c',
-  fontWeight: 700,
-  marginTop: 6,
-};
-const selectStyle: React.CSSProperties = {
-  width: '100%',
-  background: '#2a2d35',
-  color: '#c5c8ce',
-  border: '1px solid #3a3d45',
-  borderRadius: 3,
-  padding: '2px 4px',
-  fontSize: 11,
-};
-const textInputStyle: React.CSSProperties = {
-  ...selectStyle,
-  boxSizing: 'border-box' as const,
-};
+const labelStyle: React.CSSProperties = fieldLabelStyle;
+const effectLabel: React.CSSProperties = { ...groupLabelStyle, marginTop: 6 };
 
 const d = DEFAULTS.postProcessing;
 
@@ -56,12 +45,12 @@ function EnabledCheckbox({
 }) {
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-      <input
-        type="checkbox"
+      <Checkbox
+        className="vgai-checkbox"
         checked={checked}
         onChange={(e) => updatePP(store, env, effectKey, { enabled: e.target.checked })}
       />
-      <span style={{ fontSize: 11, color: '#c5c8ce' }}>Enabled</span>
+      <span style={{ fontSize: 11, color: themeVars.content.primary }}>Enabled</span>
     </div>
   );
 }
@@ -112,12 +101,12 @@ function Check({
 }) {
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-      <input
-        type="checkbox"
+      <Checkbox
+        className="vgai-checkbox"
         checked={checked}
         onChange={(e) => updatePP(store, env, effectKey, { [field]: e.target.checked })}
       />
-      <span style={{ fontSize: 11, color: '#c5c8ce' }}>{label}</span>
+      <span style={{ fontSize: 11, color: themeVars.content.primary }}>{label}</span>
     </div>
   );
 }
@@ -415,14 +404,15 @@ export function PostProcessingSection() {
               <>
                 <div>
                   <div style={labelStyle}>Source Entity ID</div>
-                  <input
+                  <TextInput
                     type="text"
                     value={pp.godRays.sourceEntity ?? ''}
                     onChange={(e) =>
                       updatePP(store, env, 'godRays', { sourceEntity: e.target.value })
                     }
                     placeholder="Entity ID of light source mesh"
-                    style={textInputStyle}
+                    className="vgai-input"
+                    style={{ width: '100%' }}
                   />
                 </div>
                 <Num
@@ -1123,7 +1113,7 @@ export function PostProcessingSection() {
               <>
                 <div>
                   <div style={labelStyle}>Tags (comma-separated)</div>
-                  <input
+                  <TextInput
                     type="text"
                     value={(pp.outline.tags ?? []).join(', ')}
                     onChange={(e) => {
@@ -1134,7 +1124,8 @@ export function PostProcessingSection() {
                       updatePP(store, env, 'outline', { tags });
                     }}
                     placeholder="e.g. highlighted, selected"
-                    style={textInputStyle}
+                    className="vgai-input"
+                    style={{ width: '100%' }}
                   />
                 </div>
                 <Num
@@ -1270,16 +1261,17 @@ export function PostProcessingSection() {
             {pp?.smaa?.enabled && (
               <div>
                 <div style={labelStyle}>Preset</div>
-                <select
+                <Select
+                  className="vgai-select"
                   value={pp.smaa.preset ?? d.smaa.preset}
                   onChange={(e) => updatePP(store, env, 'smaa', { preset: e.target.value })}
-                  style={selectStyle}
+                  style={{ width: '100%' }}
                 >
                   <option value="low">Low</option>
                   <option value="medium">Medium</option>
                   <option value="high">High</option>
                   <option value="ultra">Ultra</option>
-                </select>
+                </Select>
               </div>
             )}
           </div>

package/src/components/inspectors/RenderingSection.tsx

@@ -1,22 +1,13 @@
 import { RENDER_FEATURES, type RenderFeature } from '@engine/render/render-features';
 import type { SceneEnvironment } from '@engine/scene/scene-types';
+import { Checkbox, NumberInput, SectionHeader, Select, themeVars } from '../../design-system';
 import type { EditorStore } from '../../editor-store';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { fieldLabelStyle } from '../inspector-widgets/shared';
 
-const labelStyle: React.CSSProperties = { fontSize: 11, color: '#c5c8ce' };
-const selectStyle: React.CSSProperties = {
-  width: '100%',
-  background: '#2a2d35',
-  color: '#c5c8ce',
-  border: '1px solid #3a3d45',
-  borderRadius: 3,
-  padding: '2px 4px',
-  fontSize: 11,
-};
+const labelStyle: React.CSSProperties = { fontSize: 11, color: themeVars.content.primary };
 const noteStyle: React.CSSProperties = {
   fontSize: 10,
-  color: '#8c8c8c',
+  color: themeVars.content.muted,
   lineHeight: 1.4,
   marginBottom: 4,
 };
@@ -44,8 +35,8 @@ export function RenderingSection({ store }: { store: EditorStore }) {
           style={{ display: 'flex', alignItems: 'center', gap: 6 }}
           title={feature.description}
         >
-          <input
-            type="checkbox"
+          <Checkbox
+            className="vgai-checkbox"
             checked={current as boolean}
             onChange={(e) => setFeature(feature.key, e.target.checked)}
           />
@@ -57,7 +48,7 @@ export function RenderingSection({ store }: { store: EditorStore }) {
     if (feature.kind === 'number') {
       return (
         <div key={feature.key} title={feature.description}>
-          <div style={{ ...labelStyle, color: '#8c8c8c', marginBottom: 2 }}>{feature.label}</div>
+          <div style={fieldLabelStyle}>{feature.label}</div>
           <NumberInput
             value={current as number}
             onChange={(v) => {
@@ -77,18 +68,19 @@ export function RenderingSection({ store }: { store: EditorStore }) {
     // enum
     return (
       <div key={feature.key} title={feature.description}>
-        <div style={{ ...labelStyle, color: '#8c8c8c', marginBottom: 2 }}>{feature.label}</div>
-        <select
+        <div style={fieldLabelStyle}>{feature.label}</div>
+        <Select
+          className="vgai-select"
           value={current as string}
           onChange={(e) => setFeature(feature.key, e.target.value)}
-          style={selectStyle}
+          style={{ width: '100%' }}
         >
           {(feature.options ?? []).map((opt) => (
             <option key={opt} value={opt}>
               {opt}
             </option>
           ))}
-        </select>
+        </Select>
       </div>
     );
   };

package/src/components/inspectors/ShadowSection.tsx

@@ -1,7 +1,6 @@
+import { Checkbox, NumberInput, SectionHeader, 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 } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { commonBool, commonNum } from './multi-edit-utils';
 
@@ -18,8 +17,8 @@ export function ShadowSection({ entities, ids }: SectionProps) {
     <SectionHeader label="Shadow">
       <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
         <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
-          <input
-            type="checkbox"
+          <Checkbox
+            className="vgai-checkbox"
             checked={enabled ?? false}
             ref={(el) => {
               if (el) el.indeterminate = enabled === null;
@@ -36,7 +35,7 @@ export function ShadowSection({ entities, ids }: SectionProps) {
           <>
             <div>
               <Tooltip text="Shadow resolution (higher = sharper)" position="right">
-                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Map Size</div>
+                <div style={fieldLabelStyle}>Map Size</div>
               </Tooltip>
               <NumberInput
                 value={mapSize}
@@ -50,7 +49,7 @@ export function ShadowSection({ entities, ids }: SectionProps) {
             </div>
             <div>
               <Tooltip text="Reduce shadow acne artifacts" position="right">
-                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Bias</div>
+                <div style={fieldLabelStyle}>Bias</div>
               </Tooltip>
               <NumberInput
                 value={bias}
@@ -64,7 +63,7 @@ export function ShadowSection({ entities, ids }: SectionProps) {
             </div>
             <div>
               <Tooltip text="Soft shadow blur radius" position="right">
-                <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Radius</div>
+                <div style={fieldLabelStyle}>Radius</div>
               </Tooltip>
               <NumberInput
                 value={radius}

package/src/components/inspectors/SplineSection.tsx

@@ -1,22 +1,21 @@
 import type { SceneSpline } from '@engine/scene/scene-types';
+import {
+  Button,
+  Checkbox,
+  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';
 import { commonBool, commonNum, commonStr } from './multi-edit-utils';
 
-const labelStyle: React.CSSProperties = { fontSize: 10, color: '#8c8c8c', marginBottom: 2 };
+const labelStyle: React.CSSProperties = fieldLabelStyle;
 
-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.
 
 export function SplineSection({ entities, ids }: SectionProps) {
   const store = useEditorStore();
@@ -69,41 +68,34 @@ export function SplineSection({ entities, ids }: SectionProps) {
         {/* Curve Type */}
         <div>
           <div style={labelStyle}>Curve Type</div>
-          <select
+          <Select
             value={curveType ?? ''}
             onChange={(e) =>
               update({
                 curveType: e.target.value as SceneSpline['curveType'],
               })
             }
-            style={{
-              width: '100%',
-              background: '#1e1e1e',
-              border: '1px solid #333',
-              borderRadius: 2,
-              color: '#c5c8ce',
-              fontSize: 11,
-              padding: '2px 4px',
-            }}
+            className="vgai-select"
+            style={{ width: '100%' }}
           >
             <option value="centripetal">Centripetal</option>
             <option value="chordal">Chordal</option>
             <option value="catmullrom">Catmull-Rom</option>
-          </select>
+          </Select>
         </div>
 
         {/* Closed */}
         <div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-            <input
-              type="checkbox"
+            <Checkbox
+              className="vgai-checkbox"
               checked={closed ?? false}
               ref={(el) => {
                 if (el) el.indeterminate = closed === null;
               }}
               onChange={(e) => update({ closed: e.target.checked })}
             />
-            <span style={{ fontSize: 11, color: '#c5c8ce' }}>Closed Loop</span>
+            <span style={{ fontSize: 11, color: themeVars.content.primary }}>Closed Loop</span>
           </div>
         </div>
 
@@ -133,7 +125,6 @@ export function SplineSection({ entities, ids }: SectionProps) {
               style={{
                 maxHeight: 200,
                 overflowY: 'auto',
-                scrollbarWidth: 'thin',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: 4,
@@ -144,7 +135,7 @@ export function SplineSection({ entities, ids }: SectionProps) {
                   <span
                     style={{
                       fontSize: 9,
-                      color: '#666',
+                      color: themeVars.content.dim,
                       width: 14,
                       textAlign: 'right',
                       flexShrink: 0,
@@ -159,30 +150,28 @@ export function SplineSection({ entities, ids }: SectionProps) {
                       step={0.1}
                     />
                   </div>
-                  <button
+                  <Button
                     type="button"
+                    variant="danger"
+                    size="compact"
+                    aria-label={`Remove spline point ${i + 1}`}
                     onClick={() => removePoint(i)}
                     disabled={splineData.points.length <= 2}
-                    style={{
-                      ...btnStyle,
-                      padding: '1px 5px',
-                      fontSize: 9,
-                      opacity: splineData.points.length <= 2 ? 0.3 : 1,
-                      cursor: splineData.points.length <= 2 ? 'default' : 'pointer',
-                    }}
                   >
-                    x
-                  </button>
+                    ×
+                  </Button>
                 </div>
               ))}
             </div>
-            <button
+            <Button
               type="button"
+              variant="secondary"
+              size="compact"
               onClick={addPoint}
-              style={{ ...btnStyle, marginTop: 4, alignSelf: 'flex-start' }}
+              style={{ marginTop: 4, alignSelf: 'flex-start' }}
             >
               + Add Point
-            </button>
+            </Button>
           </div>
         )}
       </div>