@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/authoring/embed-only-adapter.ts

@@ -24,11 +24,13 @@ const EMBED_ID = 'embed:root';
 export function makeEmbedOnlyAdapter(store: EditorStore, label: string): AuthoringAdapter {
   const node: EditorNode = {
     id: EMBED_ID,
-    label: `${label} (embed-only)`,
+    label,
+    secondaryLabel: 'Embed only',
+    role: 'boundary',
     kind: 'object',
     parentId: null,
     childIds: [],
-    flags: { runtimeOnly: true, locked: true },
+    flags: { runtimeOnly: true, locked: true, readOnly: true },
   };
   const hierarchy: HierarchyProvider = {
     roots: () => [node],

package/src/authoring/first-party-hierarchy-menu.ts

@@ -18,6 +18,7 @@
  */
 
 import { resolveUrl } from '@engine/loader';
+import { themeVars } from '../design-system';
 import { registerHierarchyMenuItems } from '../hierarchy-menu-registry';
 
 // Prefab Unpack/Open/Save-as — not yet contract-expressible (StructureProvider
@@ -48,7 +49,9 @@ registerHierarchyMenuItems(
         },
         {
           label: 'Open Prefab',
-          color: '#60a5fa',
+          // L-9 — was `#60a5fa`, a one-off blue that clashed with the app's real
+          // accent (`#579EFF`) rendered right beside it (Rename/Duplicate/Delete).
+          color: themeVars.accent.default,
           action: () => {
             window.dispatchEvent(
               new CustomEvent('editor:open-asset', { detail: { path: prefabPath } }),
@@ -60,7 +63,9 @@ registerHierarchyMenuItems(
     return [
       {
         label: 'Save as Prefab...',
-        color: '#60a5fa',
+        // L-9 — was `#60a5fa`, a one-off blue that clashed with the app's real
+        // accent (`#579EFF`) rendered right beside it (Rename/Duplicate/Delete).
+        color: themeVars.accent.default,
         action: () => {
           window.dispatchEvent(
             new CustomEvent('editor:save-as-prefab', {

package/src/authoring/first-party-inspector/AddSectionMenu.tsx

@@ -1,3 +1,4 @@
+import { Select } from '../../design-system';
 /**
  * First-party "+ Add Section…" menu (C2, docs/unified-world-editor/26-
  * unified-editor-spec.md §4 C2) — verbatim from the deleted
@@ -76,7 +77,7 @@ export function AddSectionMenu({ entities, ids }: SectionProps) {
 
   return (
     <div style={{ padding: '6px 8px' }}>
-      <select
+      <Select
         onChange={(e) => {
           const item = available.find((i) => i.label === e.target.value);
           if (item) {
@@ -93,16 +94,8 @@ export function AddSectionMenu({ entities, ids }: SectionProps) {
           e.target.value = '';
         }}
         value=""
-        style={{
-          width: '100%',
-          background: '#333',
-          color: '#c5c8ce',
-          border: '1px solid #444',
-          borderRadius: 3,
-          fontSize: 11,
-          padding: '3px 4px',
-          cursor: 'pointer',
-        }}
+        className="vgai-select"
+        style={{ width: '100%' }}
       >
         <option value="" disabled>
           + Add Section...
@@ -112,7 +105,7 @@ export function AddSectionMenu({ entities, ids }: SectionProps) {
             {item.label}
           </option>
         ))}
-      </select>
+      </Select>
     </div>
   );
 }

package/src/authoring/first-party-inspector/EnvironmentSection.tsx

@@ -1,3 +1,4 @@
+import { Button, Select, TextInput } from '../../design-system';
 /**
  * First-party scene Environment inspector (C2, docs/unified-world-editor/
  * 26-unified-editor-spec.md §4 C2) — the deselect-state panel: Scene name/
@@ -18,30 +19,17 @@ import type {
   ScenePhysicsSettings,
   SceneToneMapping,
 } from '@engine/scene/scene-types';
+import { fieldLabelStyle } from '../../components/inspector-widgets/shared';
 import { PostProcessingSection } from '../../components/inspectors/PostProcessingSection';
 import { RenderingSection } from '../../components/inspectors/RenderingSection';
-import { ColorInput } from '../../components/primitives/ColorInput';
-import { NumberInput } from '../../components/primitives/NumberInput';
-import { SectionHeader } from '../../components/primitives/SectionHeader';
+import { ColorInput, NumberInput, SectionHeader, themeVars } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
 import type { EditorStore } from '../../editor-store';
 import type { InspectorSectionProps } from '../../inspector-section-registry';
 
-const btnStyle: React.CSSProperties = {
-  background: '#333',
-  color: '#c5c8ce',
-  border: '1px solid #444',
-  borderRadius: 3,
-  padding: '3px 8px',
-  cursor: 'pointer',
-  fontSize: 11,
-};
+// Shared chrome button (I-8/I-10) — the old per-file literal.
 
-const labelStyle: React.CSSProperties = {
-  fontSize: 11,
-  color: '#8c8c8c',
-  marginBottom: 2,
-};
+const labelStyle: React.CSSProperties = fieldLabelStyle;
 
 const fogTypes = ['linear', 'exponential'] as const;
 
@@ -55,20 +43,18 @@ export function EnvironmentSection(_props: InspectorSectionProps) {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
           <div>
             <div style={labelStyle}>Name</div>
-            <input
+            <TextInput
               value={store.sceneName}
+              onFocus={() => store.beginInteractiveEdit('Rename Scene')}
               onChange={(e) => {
                 store.setSceneName(e.target.value);
               }}
-              style={{
-                width: '100%',
-                background: '#1e1e1e',
-                border: '1px solid #333',
-                borderRadius: 2,
-                color: '#c5c8ce',
-                fontSize: 12,
-                padding: '3px 6px',
+              onBlur={() => store.endInteractiveEdit()}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') e.currentTarget.blur();
               }}
+              className="vgai-input"
+              style={{ width: '100%' }}
             />
           </div>
           <div>
@@ -85,7 +71,7 @@ export function EnvironmentSection(_props: InspectorSectionProps) {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
           <div>
             <div style={labelStyle}>HDR / Image Path</div>
-            <input
+            <TextInput
               value={env.skybox ?? ''}
               onChange={(e) => {
                 if (e.target.value) {
@@ -96,15 +82,8 @@ export function EnvironmentSection(_props: InspectorSectionProps) {
                 }
               }}
               placeholder="/assets/env/sky.hdr"
-              style={{
-                width: '100%',
-                background: '#1e1e1e',
-                border: '1px solid #333',
-                borderRadius: 2,
-                color: '#c5c8ce',
-                fontSize: 12,
-                padding: '3px 6px',
-              }}
+              className="vgai-input"
+              style={{ width: '100%' }}
             />
           </div>
           <div>
@@ -116,16 +95,16 @@ export function EnvironmentSection(_props: InspectorSectionProps) {
             />
           </div>
           {env.skybox && (
-            <button
+            <Button
               type="button"
-              style={{ ...btnStyle, fontSize: 10, padding: '2px 6px' }}
+              size="compact"
               onClick={() => {
                 const { skybox: _s, envMapIntensity: _i, ...rest } = env;
                 store.setEnvironment(rest as SceneEnvironment);
               }}
             >
               Remove Skybox
-            </button>
+            </Button>
           )}
         </div>
       </SectionHeader>
@@ -162,7 +141,7 @@ export function EnvironmentSection(_props: InspectorSectionProps) {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
           <div>
             <div style={labelStyle}>Type</div>
-            <select
+            <Select
               value={env.fog?.type ?? 'linear'}
               onChange={(e) =>
                 store.updateEnvironment({
@@ -173,22 +152,15 @@ export function EnvironmentSection(_props: InspectorSectionProps) {
                   },
                 })
               }
-              style={{
-                width: '100%',
-                background: '#1e1e1e',
-                border: '1px solid #333',
-                borderRadius: 2,
-                color: '#c5c8ce',
-                fontSize: 11,
-                padding: '2px 4px',
-              }}
+              className="vgai-select"
+              style={{ width: '100%' }}
             >
               {fogTypes.map((t) => (
                 <option key={t} value={t}>
                   {t}
                 </option>
               ))}
-            </select>
+            </Select>
           </div>
           <div>
             <div style={labelStyle}>Color</div>
@@ -258,16 +230,16 @@ export function EnvironmentSection(_props: InspectorSectionProps) {
             </div>
           )}
           {env.fog && (
-            <button
+            <Button
               type="button"
-              style={{ ...btnStyle, fontSize: 10, padding: '2px 6px' }}
+              size="compact"
               onClick={() => {
                 const { fog: _fog, ...rest } = env;
                 store.setEnvironment(rest as SceneEnvironment);
               }}
             >
               Remove Fog
-            </button>
+            </Button>
           )}
         </div>
       </SectionHeader>
@@ -276,7 +248,7 @@ export function EnvironmentSection(_props: InspectorSectionProps) {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
           <div>
             <div style={labelStyle}>Mode</div>
-            <select
+            <Select
               value={env.toneMapping?.mode ?? DEFAULTS.toneMapping.mode}
               onChange={(e) =>
                 store.updateEnvironment({
@@ -286,22 +258,15 @@ export function EnvironmentSection(_props: InspectorSectionProps) {
                   },
                 })
               }
-              style={{
-                width: '100%',
-                background: '#1e1e1e',
-                border: '1px solid #333',
-                borderRadius: 2,
-                color: '#c5c8ce',
-                fontSize: 11,
-                padding: '2px 4px',
-              }}
+              className="vgai-select"
+              style={{ width: '100%' }}
             >
               {(['none', 'linear', 'reinhard', 'cineon', 'aces', 'agx'] as const).map((m) => (
                 <option key={m} value={m}>
                   {m}
                 </option>
               ))}
-            </select>
+            </Select>
           </div>
           <div>
             <div style={labelStyle}>Exposure</div>
@@ -361,52 +326,29 @@ function CollisionLayerEditor({ store }: { store: EditorStore }) {
     <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
       {layers.map((name, i) => (
         <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-          <span style={{ fontSize: 10, color: '#8c8c8c', width: 16, textAlign: 'right' }}>{i}</span>
-          <input
+          <span
+            style={{ fontSize: 10, color: themeVars.content.muted, width: 16, textAlign: 'right' }}
+          >
+            {i}
+          </span>
+          <TextInput
+            className="vgai-input"
             value={name}
             onChange={(e) => renameLayer(i, e.target.value)}
-            style={{
-              flex: 1,
-              background: '#1e1e1e',
-              border: '1px solid #333',
-              borderRadius: 2,
-              color: '#c5c8ce',
-              fontSize: 11,
-              padding: '2px 4px',
-            }}
+            style={{ flex: 1 }}
           />
-          <button
-            type="button"
-            onClick={() => removeLayer(i)}
-            style={{
-              background: 'none',
-              border: 'none',
-              color: '#666',
-              cursor: 'pointer',
-              fontSize: 11,
-              padding: '0 4px',
-            }}
-          >
-            x
-          </button>
+          <Button type="button" onClick={() => removeLayer(i)} variant="ghost" size="compact">
+            ×
+          </Button>
         </div>
       ))}
       {layers.length < 16 && (
-        <button
-          type="button"
-          onClick={addLayer}
-          style={{
-            ...btnStyle,
-            fontSize: 10,
-            padding: '2px 6px',
-            alignSelf: 'flex-start',
-          }}
-        >
+        <Button type="button" onClick={addLayer} style={{ alignSelf: 'flex-start' }}>
           + Add Layer
-        </button>
+        </Button>
       )}
       {layers.length === 0 && (
-        <div style={{ fontSize: 10, color: '#666', fontStyle: 'italic' }}>
+        <div style={{ fontSize: 10, color: themeVars.content.dim, fontStyle: 'italic' }}>
           No collision layers defined. Add layers to enable per-entity collision filtering.
         </div>
       )}
@@ -507,41 +449,26 @@ function NavigationBakeSection({ store }: { store: EditorStore }) {
         />
       </div>
       <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
-        <button
+        <Button
           type="button"
+          variant={stale ? 'success' : 'primary'}
+          size="compact"
           onClick={() => window.dispatchEvent(new CustomEvent('editor:bake-navmesh'))}
-          style={{
-            flex: 1,
-            background: stale ? '#3a5f1e' : '#333',
-            color: '#c5c8ce',
-            border: `1px solid ${stale ? '#5a8f2e' : '#444'}`,
-            borderRadius: 3,
-            padding: '4px 8px',
-            cursor: 'pointer',
-            fontSize: 11,
-            fontWeight: 600,
-          }}
+          style={{ flex: 1 }}
         >
           {stale ? 'Bake NavMesh *' : 'Bake NavMesh'}
-        </button>
-        <button
+        </Button>
+        <Button
           type="button"
+          variant="secondary"
+          size="compact"
           onClick={() => window.dispatchEvent(new CustomEvent('editor:clear-navmesh'))}
-          style={{
-            background: '#333',
-            color: '#c5c8ce',
-            border: '1px solid #444',
-            borderRadius: 3,
-            padding: '4px 8px',
-            cursor: 'pointer',
-            fontSize: 11,
-          }}
         >
           Clear
-        </button>
+        </Button>
       </div>
       {stale && (
-        <div style={{ fontSize: 10, color: '#e0a030', marginTop: 2 }}>
+        <div style={{ fontSize: 10, color: themeVars.semantic.warning, marginTop: 2 }}>
           Scene changed since last bake
         </div>
       )}

package/src/authoring/first-party-inspector/HeaderSection.tsx

@@ -1,3 +1,4 @@
+import { Button, TextInput } from '../../design-system';
 /**
  * First-party HeaderSection (C2, docs/unified-world-editor/26-unified-
  * editor-spec.md §4 C2) — entity name field, multi-select header, prefab
@@ -13,25 +14,18 @@
 
 import { resolveUrl } from '@engine/loader';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect, useState } from 'react';
 import { getActiveAuthoring } from '../../authoring/active-adapter';
 import { resolveNameCommit } from '../../components/entity-name-commit';
+import { popoverStyle } from '../../components/inspector-widgets/shared';
 import type { SectionProps } from '../../components/inspectors/multi-edit-utils';
+import { EditorIcon, themeVars } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
 import type { EditorStore } from '../../editor-store';
 
 type Entity = SectionProps['entities'][number];
 
-const btnStyle: React.CSSProperties = {
-  background: '#333',
-  color: '#c5c8ce',
-  border: '1px solid #444',
-  borderRadius: 3,
-  padding: '3px 8px',
-  cursor: 'pointer',
-  fontSize: 11,
-};
+// Shared compact chrome button (I-8/I-10) — the old per-file literal.
 
 /**
  * Entity name field — local draft state, commits (and thus pushes an undo
@@ -66,7 +60,7 @@ function EntityNameField({
   };
 
   return (
-    <input
+    <TextInput
       value={draft}
       onChange={(e) => setDraft(e.target.value)}
       onBlur={commit}
@@ -79,16 +73,8 @@ function EntityNameField({
           (e.target as HTMLInputElement).blur();
         }
       }}
-      style={{
-        width: '100%',
-        background: '#1e1e1e',
-        color: '#c5c8ce',
-        border: '1px solid #333',
-        borderRadius: 2,
-        padding: '4px 6px',
-        fontSize: 13,
-        fontWeight: 600,
-      }}
+      className="vgai-input"
+      style={{ width: '100%', padding: '4px 6px', fontSize: 13, fontWeight: 600 }}
     />
   );
 }
@@ -102,15 +88,25 @@ export function HeaderSection({ entities, ids }: SectionProps) {
     <>
       {/* Entity name — single entity only */}
       {!multi && (
-        <div style={{ padding: '8px', borderBottom: '1px solid #333' }}>
+        <div style={{ padding: '8px', borderBottom: `1px solid ${themeVars.boundary.default}` }}>
           <EntityNameField key={entity.id} store={store} entityId={entity.id!} name={entity.name} />
         </div>
       )}
 
       {/* Multi-entity header */}
       {multi && (
-        <div style={{ padding: '8px', borderBottom: '1px solid #333' }}>
-          <div style={{ fontWeight: 600, fontSize: 13 }}>{ids.length} entities selected</div>
+        <div
+          style={{
+            padding: '8px',
+            borderBottom: `1px solid ${themeVars.boundary.default}`,
+            // I-16: same info-banner band the prefab/material-ref banners use,
+            // so a multi-selection reads with real visual weight.
+            background: themeVars.accent.muted,
+          }}
+        >
+          <div style={{ fontWeight: 600, fontSize: 13, color: themeVars.content.primary }}>
+            {ids.length} entities selected
+          </div>
         </div>
       )}
 
@@ -119,18 +115,22 @@ export function HeaderSection({ entities, ids }: SectionProps) {
         <div
           style={{
             padding: '6px 8px',
-            borderBottom: '1px solid #333',
-            background: '#1e3a5f',
+            borderBottom: `1px solid ${themeVars.boundary.default}`,
+            // Info-banner tint band — deliberate literal (no tinted-panel
+            // token slot); text/buttons reconciled onto text-1/themeVars.accent.default (I-5).
+            background: themeVars.accent.muted,
             display: 'flex',
             alignItems: 'center',
             gap: 6,
           }}
         >
-          <span style={{ fontSize: 11, color: '#93c5fd', fontWeight: 600 }}>Prefab</span>
+          <span style={{ fontSize: 11, color: themeVars.content.primary, fontWeight: 600 }}>
+            Prefab
+          </span>
           <span
             style={{
               fontSize: 10,
-              color: '#60a5fa',
+              color: themeVars.accent.default,
               flex: 1,
               overflow: 'hidden',
               textOverflow: 'ellipsis',
@@ -140,9 +140,10 @@ export function HeaderSection({ entities, ids }: SectionProps) {
           >
             {entity.prefab.split('/').pop()?.replace('.prefab.json', '')}
           </span>
-          <button
+          <Button
             type="button"
-            style={{ ...btnStyle, fontSize: 10, padding: '2px 6px', color: '#60a5fa' }}
+            variant="outline"
+            size="compact"
             onClick={() => {
               window.dispatchEvent(
                 new CustomEvent('editor:open-asset', { detail: { path: entity.prefab } }),
@@ -150,10 +151,9 @@ export function HeaderSection({ entities, ids }: SectionProps) {
             }}
           >
             Open
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
-            style={{ ...btnStyle, fontSize: 10, padding: '2px 6px' }}
             onClick={async () => {
               try {
                 const res = await fetch(resolveUrl(entity.prefab!));
@@ -167,7 +167,7 @@ export function HeaderSection({ entities, ids }: SectionProps) {
             }}
           >
             Unpack
-          </button>
+          </Button>
         </div>
       )}
 
@@ -196,9 +196,11 @@ function TagsSection({ entity, store }: { entity: Entity; store: EditorStore })
   };
 
   return (
-    <div style={{ padding: '4px 8px 6px', borderBottom: '1px solid #333' }}>
+    <div
+      style={{ padding: '4px 8px 6px', borderBottom: `1px solid ${themeVars.boundary.default}` }}
+    >
       <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
-        <span style={{ fontSize: 10, color: '#8c8c8c', fontWeight: 600 }}>Tags</span>
+        <span style={{ fontSize: 10, color: themeVars.content.muted, fontWeight: 600 }}>Tags</span>
         {tags.map((tag) => (
           <span
             key={tag}
@@ -206,12 +208,14 @@ function TagsSection({ entity, store }: { entity: Entity; store: EditorStore })
               display: 'inline-flex',
               alignItems: 'center',
               gap: 2,
-              background: '#3a3a3a',
-              border: '1px solid #555',
-              borderRadius: 10,
+              background: themeVars.surface.raised,
+              border: `1px solid ${themeVars.boundary.strong}`,
+              // radius-lg: at chip height this still reads as a pill, without
+              // keeping the one-off radius-10 outlier (I-23; §3 mapping).
+              borderRadius: themeVars.shape.large,
               padding: '1px 6px',
               fontSize: 10,
-              color: '#c5c8ce',
+              color: themeVars.content.primary,
             }}
           >
             {tag}
@@ -224,7 +228,7 @@ function TagsSection({ entity, store }: { entity: Entity; store: EditorStore })
               }}
               style={{ cursor: 'pointer', opacity: 0.6, fontSize: 9, marginLeft: 2 }}
             >
-              <FontAwesomeIcon icon={faXmark} />
+              <EditorIcon icon={faXmark} />
             </span>
           </span>
         ))}
@@ -238,7 +242,7 @@ function TagsSection({ entity, store }: { entity: Entity; store: EditorStore })
             }}
             style={{
               fontSize: 10,
-              color: '#579EFF',
+              color: themeVars.accent.default,
               cursor: 'pointer',
               padding: '1px 4px',
             }}
@@ -249,7 +253,7 @@ function TagsSection({ entity, store }: { entity: Entity; store: EditorStore })
       </div>
       {showInput && (
         <div style={{ marginTop: 4, position: 'relative' }}>
-          <input
+          <TextInput
             autoFocus
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
@@ -269,35 +273,25 @@ function TagsSection({ entity, store }: { entity: Entity; store: EditorStore })
               setShowInput(false);
             }}
             placeholder="Add tag..."
-            style={{
-              width: '100%',
-              background: '#1e1e1e',
-              border: '1px solid #579EFF',
-              borderRadius: 3,
-              color: '#c5c8ce',
-              fontSize: 11,
-              padding: '2px 6px',
-              outline: 'none',
-            }}
+            className="vgai-input"
+            style={{ width: '100%', borderColor: themeVars.accent.default }}
           />
           {inputValue && suggestions.length > 0 && (
             <div
               style={{
+                ...popoverStyle,
                 position: 'absolute',
                 top: '100%',
                 left: 0,
                 right: 0,
-                background: '#2c2c2c',
-                border: '1px solid #444',
-                borderRadius: 3,
-                zIndex: 100,
+                zIndex: 'var(--vgai-z-dropdown)',
                 maxHeight: 100,
                 overflowY: 'auto',
-                scrollbarWidth: 'none',
               }}
             >
               {suggestions.slice(0, 5).map((s) => (
                 <div
+                  className="vgai-selectable"
                   key={s}
                   onMouseDown={(e) => {
                     e.preventDefault();
@@ -307,14 +301,9 @@ function TagsSection({ entity, store }: { entity: Entity; store: EditorStore })
                   style={{
                     padding: '3px 8px',
                     fontSize: 11,
-                    color: '#c5c8ce',
+                    color: themeVars.content.primary,
                     cursor: 'pointer',
-                  }}
-                  onMouseEnter={(e) => {
-                    (e.currentTarget as HTMLDivElement).style.background = '#3a3a3a';
-                  }}
-                  onMouseLeave={(e) => {
-                    (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+                    borderRadius: themeVars.shape.small,
                   }}
                 >
                   {s}