@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/Inspector.tsx

@@ -24,11 +24,25 @@
  */
 
 import type { AuthoringAdapter, EditorNode, PropertyDescriptor, Transform } from '@engine/adapter';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useSyncExternalStore } from 'react';
 import * as THREE from 'three';
+import { assetSelectionVersion, subscribeAssetSelection } from '../asset-selection';
 import { getActiveAuthoring } from '../authoring/active-adapter';
 import { CompositeAuthoringAdapter } from '../authoring/composite-authoring-adapter';
 import { ReactWorldAuthoringAdapter } from '../authoring/react-world-authoring-adapter';
+import {
+  Button,
+  Checkbox,
+  ColorSwatchInput,
+  EditorIcon,
+  FieldRow,
+  IconButton,
+  Panel,
+  Select,
+  TextInput,
+  themeVars,
+} from '../design-system';
 import { useEditorStore } from '../EditorContext';
 import { setActiveScope } from '../hotkeys';
 import { isIngestActiveReact } from '../ingest-mode';
@@ -38,8 +52,13 @@ import {
   matchedInspectorSections,
   subscribeInspectorSectionRegistry,
 } from '../inspector-section-registry';
+import {
+  subscribeWorkspaceDocuments,
+  workspaceDocumentRegistryVersion,
+} from '../workspace-document-registry';
+import { openEntityAssetDocument } from './asset-documents';
 import { groupProperties } from './inspector-property-grouping';
-import { Panel } from './primitives/Panel';
+import { groupLabelStyle, LABEL_COL_WIDTH } from './inspector-widgets/shared';
 
 /**
  * D4 (B2) — the CHILD adapter owning `nodeId`'s synthetic world-group row
@@ -113,14 +132,17 @@ function toggleCatalogIsolation(
   adapter.stories?.isolate?.(nodeId, storyId);
 }
 
-const NUM_STYLE: React.CSSProperties = {
-  width: 64,
-  background: '#1e1e1e',
-  color: '#c5c8ce',
-  border: '1px solid #333',
-  borderRadius: 2,
-  padding: '3px 5px',
-  fontSize: 12,
+/** Layout-only remnant of the old hand-rolled field style — chrome now comes
+ *  from the shared `.vgai-input`/`.vgai-select` classes (theme-css.ts), so
+ *  every field here shares one height/padding/radius/focus treatment. */
+const NUM_STYLE: React.CSSProperties = { width: 64 };
+
+/** Row label (label-left/field-right grammar) — one width via
+ *  `LABEL_COL_WIDTH` (I-13). */
+const ROW_LABEL_STYLE: React.CSSProperties = {
+  width: LABEL_COL_WIDTH,
+  fontSize: 'var(--vgai-font-md)',
+  color: themeVars.content.muted,
 };
 
 function AxisRow({
@@ -140,19 +162,20 @@ function AxisRow({
     { a: 2, n: 'z' },
   ];
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px' }}>
-      <span style={{ width: 56, fontSize: 12, color: '#9aa0a6' }}>{label}</span>
+    <FieldRow label={label} htmlFor={`${testidPrefix}-x`} style={{ padding: '4px 8px' }}>
       {axes.map(({ a, n }) => (
-        <input
+        <TextInput
+          id={`${testidPrefix}-${n}`}
           key={n}
           type="number"
+          aria-label={`${label} ${n.toUpperCase()}`}
           data-testid={`${testidPrefix}-${n}`}
           value={Number.isFinite(values[a]) ? Math.round(values[a] * 1000) / 1000 : 0}
           onChange={(e) => onCommit(a, Number.parseFloat(e.target.value))}
           style={NUM_STYLE}
         />
       ))}
-    </div>
+    </FieldRow>
   );
 }
 
@@ -164,6 +187,12 @@ export function Inspector() {
   // possibly while a matching selection is already showing. First-party
   // registrations are import-time side effects, so this never fired for them.
   useSyncExternalStore(subscribeInspectorSectionRegistry, inspectorSectionRegistryVersion);
+  // W2 — two more contexts registered sections may key on: the §5.1 asset
+  // selection (`asset-selection-section.tsx`) and the active workspace
+  // document (`story-documents.tsx`'s Story Args). Their registrations'
+  // `match` reads those stores, so the shell must re-render when they change.
+  useSyncExternalStore(subscribeAssetSelection, assetSelectionVersion);
+  useSyncExternalStore(subscribeWorkspaceDocuments, workspaceDocumentRegistryVersion);
   const adapter = getActiveAuthoring(store);
   const id = [...store.selectedEntityIds][0] ?? null;
 
@@ -174,12 +203,18 @@ export function Inspector() {
     return (
       <Panel
         name="Inspector (embed-only)"
+        hideHeader
         data-testid="inspector-panel"
         onPointerDown={() => setActiveScope('inspector')}
       >
         <div
           data-testid="ingest-embed-note"
-          style={{ padding: 12, color: '#c9a227', fontSize: 12, lineHeight: 1.5 }}
+          style={{
+            padding: 12,
+            color: themeVars.semantic.warning,
+            fontSize: 'var(--vgai-font-md)',
+            lineHeight: 1.5,
+          }}
         >
           {isIngestActiveReact() ? (
             <>
@@ -226,9 +261,10 @@ export function Inspector() {
       return (
         <Panel
           name={panelNameOverride ?? 'Environment (ingested game)'}
+          hideHeader
           data-testid="inspector-panel"
           onPointerDown={() => setActiveScope('inspector')}
-          style={{ overflowY: 'auto', scrollbarWidth: 'none' }}
+          style={{ overflowY: 'auto' }}
         >
           {matched.map(({ Section }, i) => (
             <Section key={i} adapter={adapter} nodeId={null} />
@@ -243,17 +279,19 @@ export function Inspector() {
     return (
       <Panel
         name="Environment (ingested game)"
+        hideHeader
         data-testid="inspector-panel"
         onPointerDown={() => setActiveScope('inspector')}
       >
         <div style={{ pointerEvents: 'auto', padding: 4 }}>
-          <div style={{ padding: 8, color: '#777', fontSize: 12 }}>
+          <div
+            style={{ padding: 8, color: themeVars.content.dim, fontSize: 'var(--vgai-font-md)' }}
+          >
             Scene settings — nothing selected.
           </div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 8px' }}>
-            <span style={{ width: 80, fontSize: 12, color: '#9aa0a6' }}>Background</span>
-            <input
-              type="color"
+            <span style={ROW_LABEL_STYLE}>Background</span>
+            <ColorSwatchInput
               data-testid="ingest-env-background"
               value={bg}
               onChange={(e) => {
@@ -270,11 +308,10 @@ export function Inspector() {
               gap: 6,
               alignItems: 'center',
               padding: '6px 8px',
-              fontSize: 12,
+              fontSize: 'var(--vgai-font-md)',
             }}
           >
-            <input
-              type="checkbox"
+            <Checkbox
               data-testid="ingest-env-fog"
               checked={hasFog}
               onChange={(e) => {
@@ -369,11 +406,10 @@ export function Inspector() {
             gap: 6,
             alignItems: 'center',
             padding: '6px 8px',
-            fontSize: 12,
+            fontSize: 'var(--vgai-font-md)',
           }}
         >
-          <input
-            type="checkbox"
+          <Checkbox
             data-testid={testidFor(p.path)}
             checked={v !== false}
             onChange={(e) => setProp(p.path, e.target.checked)}
@@ -387,16 +423,15 @@ export function Inspector() {
         key={p.path}
         style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 8px' }}
       >
-        <span style={{ width: 64, fontSize: 12, color: '#9aa0a6' }}>{p.label}</span>
+        <span style={ROW_LABEL_STYLE}>{p.label}</span>
         {p.type === 'color' ? (
-          <input
-            type="color"
+          <ColorSwatchInput
             data-testid={p.path === 'material.color' ? 'ingest-color' : testidFor(p.path)}
             value={(v as string) ?? '#ffffff'}
             onChange={(e) => setProp(p.path, e.target.value)}
           />
         ) : p.type === 'number' ? (
-          <input
+          <TextInput
             type="number"
             data-testid={testidFor(p.path)}
             disabled={p.readonly}
@@ -405,13 +440,13 @@ export function Inspector() {
             style={NUM_STYLE}
           />
         ) : (
-          <input
+          <TextInput
             type="text"
             data-testid={testidFor(p.path)}
             readOnly={p.readonly}
             value={String(v ?? '')}
             onChange={(e) => setProp(p.path, e.target.value)}
-            style={{ ...NUM_STYLE, width: 120 }}
+            style={{ width: 120 }}
           />
         )}
       </div>
@@ -430,19 +465,27 @@ export function Inspector() {
   return (
     <Panel
       name={panelNameOverride ?? 'Inspector (ingested game)'}
+      hideHeader
       data-testid="inspector-panel"
       onPointerDown={() => setActiveScope('inspector')}
     >
       <div style={{ pointerEvents: 'auto' }}>
         {!suppressed.has('header') && (
-          <div style={{ padding: 8, borderBottom: '1px solid #333' }}>
-            <input
+          <div style={{ padding: 8, borderBottom: `1px solid ${themeVars.boundary.default}` }}>
+            <TextInput
+              className="vgai-input"
               data-testid="ingest-name"
               value={node?.label ?? ''}
               onChange={(e) => setProp('name', e.target.value)}
-              style={{ ...NUM_STYLE, width: '100%', fontWeight: 600 }}
+              style={{ width: '100%', fontWeight: 600, fontSize: 'var(--vgai-font-md)' }}
             />
-            <div style={{ marginTop: 6, fontSize: 11, color: '#777' }}>
+            <div
+              style={{
+                marginTop: 6,
+                fontSize: 'var(--vgai-font-base)',
+                color: themeVars.content.dim,
+              }}
+            >
               {node?.kind} · runtime-only (ingested)
             </div>
           </div>
@@ -476,20 +519,9 @@ export function Inspector() {
               <div
                 key={group.name}
                 data-testid={`ingest-group-${group.groupId}`}
-                style={{ borderTop: '1px solid #333', marginTop: 4 }}
+                style={{ borderTop: `1px solid ${themeVars.boundary.default}`, marginTop: 4 }}
               >
-                <div
-                  style={{
-                    fontSize: 11,
-                    fontWeight: 600,
-                    color: '#9aa0a6',
-                    padding: '6px 8px 2px',
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.4,
-                  }}
-                >
-                  {group.name}
-                </div>
+                <div style={{ ...groupLabelStyle, padding: '6px 8px 2px' }}>{group.name}</div>
                 {group.properties.map(renderProperty)}
               </div>
             ))}
@@ -514,12 +546,20 @@ export function Inspector() {
               return (
                 <div
                   data-testid="ingest-components-na"
-                  style={{ padding: '8px', borderTop: '1px solid #333', marginTop: 4 }}
+                  style={{
+                    padding: '8px',
+                    borderTop: `1px solid ${themeVars.boundary.default}`,
+                    marginTop: 4,
+                  }}
                 >
-                  <div style={{ fontSize: 11, fontWeight: 600, color: '#9aa0a6', marginBottom: 4 }}>
-                    Components
-                  </div>
-                  <div style={{ fontSize: 11, color: '#777', fontStyle: 'italic' }}>
+                  <div style={{ ...groupLabelStyle, marginBottom: 4 }}>Components</div>
+                  <div
+                    style={{
+                      fontSize: 'var(--vgai-font-base)',
+                      color: themeVars.content.dim,
+                      fontStyle: 'italic',
+                    }}
+                  >
                     No components — this object is owned by the unmodified game (no engine
                     GameComponents).
                   </div>
@@ -528,10 +568,14 @@ export function Inspector() {
             }
             const componentsProvider = adapter.components;
             return (
-              <div style={{ padding: '8px', borderTop: '1px solid #333', marginTop: 4 }}>
-                <div style={{ fontSize: 11, fontWeight: 600, color: '#9aa0a6', marginBottom: 4 }}>
-                  Components
-                </div>
+              <div
+                style={{
+                  padding: '8px',
+                  borderTop: `1px solid ${themeVars.boundary.default}`,
+                  marginTop: 4,
+                }}
+              >
+                <div style={{ ...groupLabelStyle, marginBottom: 4 }}>Components</div>
                 {compList.map((c) => (
                   <div
                     key={c.type}
@@ -543,31 +587,31 @@ export function Inspector() {
                       padding: '2px 0',
                     }}
                   >
-                    <span style={{ fontSize: 11, color: '#c5c8ce' }}>{c.type}</span>
-                    <button
-                      type="button"
+                    <span
+                      style={{
+                        fontSize: 'var(--vgai-font-base)',
+                        color: themeVars.content.primary,
+                      }}
+                    >
+                      {c.type}
+                    </span>
+                    <IconButton
                       data-testid="ingest-component-remove"
                       title="Remove component"
+                      aria-label={`Remove ${c.type}`}
+                      variant="ghost"
+                      size="compact"
                       onClick={() => {
                         componentsProvider.remove(id, c.type);
                         store.notifyIngestEdit();
                       }}
-                      style={{
-                        background: 'transparent',
-                        border: 'none',
-                        color: '#777',
-                        cursor: 'pointer',
-                        fontSize: 12,
-                        lineHeight: 1,
-                        padding: 0,
-                      }}
                     >
-                      ×
-                    </button>
+                      <EditorIcon icon={faXmark} />
+                    </IconButton>
                   </div>
                 ))}
                 {compAvailable.length > 0 && (
-                  <select
+                  <Select
                     data-testid="ingest-component-add"
                     value=""
                     onChange={(e) => {
@@ -576,7 +620,7 @@ export function Inspector() {
                         store.notifyIngestEdit();
                       }
                     }}
-                    style={{ ...NUM_STYLE, width: '100%', marginTop: 4, cursor: 'pointer' }}
+                    style={{ width: '100%', marginTop: 4 }}
                   >
                     <option value="">+ Add component…</option>
                     {compAvailable.map((name) => (
@@ -584,7 +628,7 @@ export function Inspector() {
                         {name}
                       </option>
                     ))}
-                  </select>
+                  </Select>
                 )}
               </div>
             );
@@ -597,19 +641,23 @@ export function Inspector() {
             other selection (an ordinary entity, or a world kind that never
             sets `stories`) omits this section entirely. */}
         {!suppressed.has('stories') && showStoriesSection && (
-          <div style={{ padding: '8px', borderTop: '1px solid #333', marginTop: 4 }}>
-            <div style={{ fontSize: 11, fontWeight: 600, color: '#9aa0a6', marginBottom: 4 }}>
-              Stories
-            </div>
+          <div
+            style={{
+              padding: '8px',
+              borderTop: `1px solid ${themeVars.boundary.default}`,
+              marginTop: 4,
+            }}
+          >
+            <div style={{ ...groupLabelStyle, marginBottom: 4 }}>Stories</div>
             {storyRefs.length > 0 ? (
-              <select
+              <Select
                 data-testid="ingest-stories-select"
                 value={adapter.stories?.active(id) ?? ''}
                 onChange={(e) => {
                   const v = e.target.value;
                   adapter.stories?.apply(id, v === '' ? null : v);
                 }}
-                style={{ ...NUM_STYLE, width: '100%' }}
+                style={{ width: '100%' }}
               >
                 <option value="">(none)</option>
                 {storyRefs.map((s) => (
@@ -617,42 +665,37 @@ export function Inspector() {
                     {s.label}
                   </option>
                 ))}
-              </select>
+              </Select>
             ) : (
               <div
                 data-testid="ingest-stories-none"
-                style={{ fontSize: 11, color: '#777', fontStyle: 'italic' }}
+                style={{
+                  fontSize: 'var(--vgai-font-base)',
+                  color: themeVars.content.dim,
+                  fontStyle: 'italic',
+                }}
               >
-                No stories — this world defines no `src/ui/registry.ts` states/stories.
+                No stories — this root has no associated portable CSF previews.
               </div>
             )}
             {/* B3 — Isolate toggle: render ONLY this catalog component (alone,
                 against whichever story is currently selected in the dropdown
                 above) on the world's design-time layer; exiting restores the
-                entry (live preview). Session-only — mirrors the story-overlay
-                writes below, never persisted to the registry. */}
+                Live Preview. Session-only — mirrors the story overlay writes
+                below, never persisted to source. */}
             {isCatalogNode && (
-              <button
-                type="button"
+              <Button
                 data-testid="catalog-isolate"
                 onClick={() => {
                   toggleCatalogIsolation(adapter, id, isIsolated);
                   store.notifyIngestEdit();
                 }}
-                style={{
-                  marginTop: 6,
-                  width: '100%',
-                  padding: '6px 8px',
-                  fontSize: 12,
-                  background: isIsolated ? '#3a5' : '#2a2a2a',
-                  color: '#e6e6e6',
-                  border: '1px solid #444',
-                  borderRadius: 3,
-                  cursor: 'pointer',
-                }}
+                variant={isIsolated ? 'primary' : 'secondary'}
+                aria-pressed={isIsolated}
+                style={{ marginTop: 6, width: '100%' }}
               >
                 {isIsolated ? 'Exit isolation' : 'Isolate'}
-              </button>
+              </Button>
             )}
           </div>
         )}
@@ -662,6 +705,17 @@ export function Inspector() {
             Layout/Style/Props/Events, or any future spec-27 contribution) —
             rendered AFTER the generic grid above, as siblings, in
             registration order. */}
+        {store.objectMap.has(id) && (
+          <div style={{ padding: 8, borderTop: `1px solid ${themeVars.boundary.default}` }}>
+            <Button
+              data-testid="open-asset-lab"
+              onClick={() => openEntityAssetDocument(store, id)}
+              style={{ width: '100%' }}
+            >
+              Open in Asset Editor
+            </Button>
+          </div>
+        )}
         {matched.map(({ Section }, i) => (
           <Section key={i} adapter={adapter} nodeId={id} />
         ))}

package/src/components/InspectorToolSection.tsx

@@ -1,3 +1,4 @@
+import { themeVars } from '../design-system';
 /**
  * Inspector-tool section host (W3, docs/DATA-TOOLS-DESIGN.md §3.2/§3.4) —
  * renders one project tool (`placement: 'inspector'`) as a section in the
@@ -18,8 +19,8 @@
  * W3.1 (§3.3): the tool render is wrapped in `EditorSelectionProvider`, INSIDE
  * the error boundary, so `useSelection()` works for any inspector tool
  * without adding to `InspectorToolProps` — richer data arrives through hooks,
- * not more props. Dock tools get no such provider (`ToolHost`/`BottomPanel`
- * have no adapter/selection in scope) — `useSelection` there throws a
+ * not more props. Utility tools get no such provider (`ToolHost` inside a
+ * Dockview utility has no adapter/selection in scope) — `useSelection` throws a
  * teaching error, contained the same way a render crash is.
  */
 
@@ -27,6 +28,7 @@ import type { AuthoringAdapter } from '@engine/adapter';
 import { EditorSelectionProvider } from '@engine/react/use-selection';
 import type { InspectorToolProps } from '@engine/tools/define-tool';
 import type { ComponentType } from 'react';
+import { groupLabelStyle } from './inspector-widgets/shared';
 import { ToolErrorBoundary } from './ToolHost';
 
 export interface InspectorToolSectionProps {
@@ -56,9 +58,9 @@ export function InspectorToolSection({
   return (
     <div
       data-testid={`inspector-tool-${id}`}
-      style={{ padding: '8px', borderTop: '1px solid #333', marginTop: 4 }}
+      style={{ padding: '8px', borderTop: `1px solid ${themeVars.boundary.default}`, marginTop: 4 }}
     >
-      <div style={{ fontSize: 11, fontWeight: 600, color: '#9aa0a6', marginBottom: 4 }}>
+      <div style={{ ...groupLabelStyle, marginBottom: 4 }}>
         <span aria-hidden="true" style={{ marginRight: 4 }}>
           ⚙
         </span>

package/src/components/MountFailureBanner.tsx

@@ -17,7 +17,7 @@
  * D-V5 (docs/WAVE5-MULTIWORLD-INGEST-DESIGN.md, F24 composite): the slot
  * behind this banner is now an ORDERED LIST
  * (`getMountFailureReports`) — a composite manifest's sibling-mount loop can
- * fail several worlds independently in one attempt, and silently showing
+ * fail several roots independently in one attempt, and silently showing
  * only the latest would be the exact F9 anti-pattern this banner exists to
  * close. This renders EVERY entry, each its own worldId-labelled
  * summary/message pair, inside the SAME single banner (one `data-testid`,
@@ -28,6 +28,7 @@
 
 import { useReducer, useSyncExternalStore } from 'react';
 import { getMountFailureReports, setMountFailureReport } from '../authoring/mount-failure-report';
+import { EditorBanner, EditorIcon, editorIcons, IconButton } from '../design-system';
 import { useEditorStore } from '../EditorContext';
 
 export function MountFailureBanner() {
@@ -52,59 +53,41 @@ export function MountFailureBanner() {
   if (reports.length === 0) return null;
 
   return (
-    <div
+    <EditorBanner
       data-testid="mount-failure-banner"
-      style={{
-        background: '#4a1f1f',
-        border: '1px solid #8a2f2f',
-        color: '#f0a0a0',
-        borderRadius: 3,
-        margin: '4px 8px',
-        padding: '6px 8px',
-        fontSize: 11,
-        pointerEvents: 'auto',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 6 }}>
-        <span style={{ flex: 1 }}>
-          {reports.map((report) => (
-            <div key={report.worldId} style={{ marginBottom: 4 }}>
-              <div data-testid="mount-failure-summary">
-                <strong>
-                  "{report.worldId}" ({report.kind} / {report.identity}) failed to mount.
-                </strong>
-              </div>
-              <div
-                data-testid="mount-failure-message"
-                style={{ marginTop: 2, wordBreak: 'break-word' }}
-              >
-                {report.message}
-              </div>
-            </div>
-          ))}
-          <div style={{ marginTop: 2, opacity: 0.8 }}>See the Console tab for the full trace.</div>
-        </span>
-        <button
-          type="button"
+      tone="error"
+      icon={<EditorIcon icon={editorIcons.status.error} />}
+      style={{ margin: '4px 8px', pointerEvents: 'auto' }}
+      actions={
+        <IconButton
+          aria-label="Dismiss mount failure"
           data-testid="mount-failure-dismiss"
           onClick={() => {
             setMountFailureReport(null);
             forceRerender();
           }}
-          style={{
-            background: 'none',
-            border: 'none',
-            color: '#f0a0a0',
-            cursor: 'pointer',
-            fontSize: 13,
-            lineHeight: 1,
-            padding: 0,
-          }}
-          aria-label="Dismiss"
+          size="compact"
         >
-          ×
-        </button>
-      </div>
-    </div>
+          <EditorIcon icon={editorIcons.action.close} />
+        </IconButton>
+      }
+    >
+      {reports.map((report) => (
+        <div key={report.worldId} style={{ marginBottom: 4 }}>
+          <div data-testid="mount-failure-summary">
+            <strong>
+              "{report.worldId}" ({report.kind} / {report.identity}) failed to mount.
+            </strong>
+          </div>
+          <div
+            data-testid="mount-failure-message"
+            style={{ marginTop: 2, wordBreak: 'break-word' }}
+          >
+            {report.message}
+          </div>
+        </div>
+      ))}
+      <div style={{ marginTop: 2, opacity: 0.8 }}>See the Console tab for the full trace.</div>
+    </EditorBanner>
   );
 }