@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/ViewportOverlay.tsx

@@ -6,31 +6,21 @@ import {
   faEye,
   faEyeSlash,
 } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect, useRef, useState } from 'react';
+import {
+  Button,
+  EditorIcon,
+  FloatingToolbar,
+  IconButton,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+  SplitButtonGroup,
+  Text,
+  Tooltip,
+} from '../design-system';
 import { useEditorStore } from '../EditorContext';
 import type { EditorStore, ShadingMode } from '../editor-store';
-import { Tooltip } from './primitives/Tooltip';
-
-const iconBtn: React.CSSProperties = {
-  background: '#333',
-  color: '#c5c8ce',
-  border: '1px solid #444',
-  borderRadius: 3,
-  padding: '4px 7px',
-  cursor: 'pointer',
-  fontSize: 12,
-  lineHeight: '18px',
-  display: 'flex',
-  alignItems: 'center',
-};
-
-const activeIconBtn: React.CSSProperties = {
-  ...iconBtn,
-  background: '#579EFF',
-  border: '1px solid #6AADFF',
-  color: '#fff',
-};
 
 const shadingLabels: Record<ShadingMode, string> = {
   solid: 'Solid',
@@ -40,66 +30,54 @@ const shadingLabels: Record<ShadingMode, string> = {
 
 const shadingOrder: ShadingMode[] = ['solid', 'wireframe', 'unlit'];
 
-export function ViewportOverlay() {
+/** Viewport-level rendering controls. Three-specific controls hide when no 3D world is active. */
+export function ViewportOverlay({ statsOnly = false }: { statsOnly?: boolean }) {
   const store = useEditorStore();
   return (
-    <div
-      style={{
-        position: 'absolute',
-        top: 8,
-        right: 8,
-        display: 'flex',
-        alignItems: 'center',
-        gap: 4,
-        padding: '4px 6px',
-        background: 'rgba(36, 36, 36, 0.9)',
-        border: '1px solid #444',
-        borderRadius: 6,
-        pointerEvents: 'auto',
-        backdropFilter: 'blur(8px)',
-      }}
+    <FloatingToolbar
+      label="Viewport display"
+      className="vgai-viewport-toolbar vgai-viewport-toolbar-right"
     >
-      {/* Grid toggle */}
-      <Tooltip text={`Grid: ${store.showGrid ? 'On' : 'Off'}`}>
-        <button
-          type="button"
-          style={store.showGrid ? activeIconBtn : iconBtn}
-          onClick={() => store.toggleGrid()}
-        >
-          <FontAwesomeIcon icon={faBorderAll} style={{ fontSize: 12 }} />
-        </button>
-      </Tooltip>
-
-      {/* Helpers toggle with dropdown */}
-      <HelpersButton store={store} />
-
-      {/* Shading mode cycle */}
-      <Tooltip text={`Shading: ${shadingLabels[store.shadingMode]}`}>
-        <button
-          type="button"
-          style={store.shadingMode !== 'solid' ? activeIconBtn : iconBtn}
-          onClick={() => {
-            const idx = shadingOrder.indexOf(store.shadingMode);
-            store.setShadingMode(shadingOrder[(idx + 1) % shadingOrder.length]!);
-          }}
-        >
-          <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: -0.5 }}>
-            {shadingLabels[store.shadingMode]}
-          </span>
-        </button>
-      </Tooltip>
-
-      {/* Stats toggle */}
-      <Tooltip text={`Stats: ${store.showStats ? 'On' : 'Off'}`}>
-        <button
-          type="button"
-          style={store.showStats ? activeIconBtn : iconBtn}
+      {!statsOnly && (
+        <>
+          <Tooltip text={`Grid: ${store.showGrid ? 'On' : 'Off'}`}>
+            <IconButton
+              aria-label="Toggle grid"
+              aria-pressed={store.showGrid}
+              size="comfortable"
+              onClick={() => store.toggleGrid()}
+            >
+              <EditorIcon icon={faBorderAll} size="md" />
+            </IconButton>
+          </Tooltip>
+          <HelpersButton store={store} />
+          <Tooltip text={`Shading: ${shadingLabels[store.shadingMode]}`}>
+            <Button
+              variant="ghost"
+              aria-label={`Shading: ${shadingLabels[store.shadingMode]}`}
+              aria-pressed={store.shadingMode !== 'solid'}
+              size="comfortable"
+              onClick={() => {
+                const index = shadingOrder.indexOf(store.shadingMode);
+                store.setShadingMode(shadingOrder[(index + 1) % shadingOrder.length]!);
+              }}
+            >
+              <Text variant="label">{shadingLabels[store.shadingMode]}</Text>
+            </Button>
+          </Tooltip>
+        </>
+      )}
+      <Tooltip text={`Viewport stats: ${store.showStats ? 'On' : 'Off'}`}>
+        <IconButton
+          aria-label="Toggle viewport stats"
+          aria-pressed={store.showStats}
+          size="comfortable"
           onClick={() => store.toggleStats()}
         >
-          <FontAwesomeIcon icon={faChartSimple} style={{ fontSize: 12 }} />
-        </button>
+          <EditorIcon icon={faChartSimple} size="md" />
+        </IconButton>
       </Tooltip>
-    </div>
+    </FloatingToolbar>
   );
 }
 
@@ -109,8 +87,8 @@ function HelpersButton({ store }: { store: EditorStore }) {
 
   useEffect(() => {
     if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    const handler = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false);
     };
     document.addEventListener('mousedown', handler);
     return () => document.removeEventListener('mousedown', handler);
@@ -123,111 +101,58 @@ function HelpersButton({ store }: { store: EditorStore }) {
     { key: 'audio' as const, label: 'Audio' },
     { key: 'splines' as const, label: 'Splines' },
     { key: 'navmesh' as const, label: 'NavMesh' },
+    { key: 'skeletons' as const, label: 'Skeletons' },
   ];
 
   return (
-    <div ref={ref} style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
-      <Tooltip text={`Helpers: ${store.showHelpers ? 'On' : 'Off'}`}>
-        <button
-          type="button"
-          style={store.showHelpers ? activeIconBtn : iconBtn}
-          onClick={() => store.toggleHelpers()}
+    <div ref={ref} className="vgai-viewport-popover-anchor">
+      <SplitButtonGroup>
+        <Tooltip text={`Helpers: ${store.showHelpers ? 'On' : 'Off'}`}>
+          <IconButton
+            aria-label="Toggle helpers"
+            aria-pressed={store.showHelpers}
+            size="comfortable"
+            onClick={() => store.toggleHelpers()}
+          >
+            <EditorIcon icon={store.showHelpers ? faEye : faEyeSlash} size="md" />
+          </IconButton>
+        </Tooltip>
+        <IconButton
+          aria-label="Choose helpers"
+          aria-expanded={open}
+          size="comfortable"
+          onClick={() => setOpen(!open)}
         >
-          <FontAwesomeIcon icon={store.showHelpers ? faEye : faEyeSlash} style={{ fontSize: 12 }} />
-        </button>
-      </Tooltip>
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        style={{
-          ...iconBtn,
-          padding: '4px 3px',
-          fontSize: 8,
-          borderLeft: 'none',
-          borderTopLeftRadius: 0,
-          borderBottomLeftRadius: 0,
-          marginLeft: -1,
-        }}
-      >
-        <FontAwesomeIcon icon={faCaretDown} />
-      </button>
+          <EditorIcon icon={faCaretDown} size="xs" />
+        </IconButton>
+      </SplitButtonGroup>
       {open && (
-        <div
-          style={{
-            position: 'absolute',
-            top: '100%',
-            right: 0,
-            marginTop: 4,
-            background: '#2c2c2c',
-            border: '1px solid #444',
-            borderRadius: 4,
-            padding: '4px 0',
-            zIndex: 1000,
-            minWidth: 130,
-            boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
-          }}
-        >
-          <div
-            role="menuitem"
-            tabIndex={0}
-            onClick={() => store.toggleHelpers()}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') store.toggleHelpers();
-            }}
-            style={{
-              padding: '5px 12px',
-              cursor: 'pointer',
-              fontSize: 12,
-              color: '#c5c8ce',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6,
-            }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLDivElement).style.background = '#3a3a3a';
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLDivElement).style.background = 'transparent';
-            }}
+        <Menu className="vgai-helpers-menu" onDismiss={() => setOpen(false)}>
+          <MenuItem
+            role="menuitemcheckbox"
+            aria-checked={store.showHelpers}
+            onSelect={() => store.toggleHelpers()}
           >
-            <span style={{ opacity: store.showHelpers ? 1 : 0 }}>
-              <FontAwesomeIcon icon={faCheck} style={{ fontSize: 10 }} />
+            <span className="vgai-menu-check">
+              {store.showHelpers && <EditorIcon icon={faCheck} size="xs" />}
             </span>
             All
-          </div>
-          <div style={{ height: 1, background: '#444', margin: '4px 0' }} />
-          {helperTypes.map((h) => (
-            <div
-              role="menuitem"
-              tabIndex={0}
-              key={h.key}
-              onClick={() => store.toggleHelperType(h.key)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') store.toggleHelperType(h.key);
-              }}
-              style={{
-                padding: '5px 12px',
-                cursor: 'pointer',
-                fontSize: 12,
-                color: '#c5c8ce',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 6,
-              }}
-              onMouseEnter={(e) => {
-                (e.currentTarget as HTMLDivElement).style.background = '#3a3a3a';
-              }}
-              onMouseLeave={(e) => {
-                (e.currentTarget as HTMLDivElement).style.background = 'transparent';
-              }}
+          </MenuItem>
+          <MenuSeparator />
+          {helperTypes.map((helper) => (
+            <MenuItem
+              key={helper.key}
+              role="menuitemcheckbox"
+              aria-checked={store.helperVisibility[helper.key]}
+              onSelect={() => store.toggleHelperType(helper.key)}
             >
-              <span style={{ opacity: store.helperVisibility[h.key] ? 1 : 0 }}>
-                <FontAwesomeIcon icon={faCheck} style={{ fontSize: 10 }} />
+              <span className="vgai-menu-check">
+                {store.helperVisibility[helper.key] && <EditorIcon icon={faCheck} size="xs" />}
               </span>
-              {h.label}
-            </div>
+              {helper.label}
+            </MenuItem>
           ))}
-        </div>
+        </Menu>
       )}
     </div>
   );

package/src/components/ViewportPanel.tsx

@@ -3,30 +3,43 @@ import { applyRendererSettings, applyScenePostProcessing } from '@engine/setup/s
 import { EffectComposer } from 'postprocessing';
 import { useEffect, useRef, useSyncExternalStore } from 'react';
 import * as THREE from 'three';
+import { getActiveAuthoring } from '../authoring/active-adapter';
 import type { CompositeAuthoringAdapter } from '../authoring/composite-authoring-adapter';
-import { mountDesignTimeLayers } from '../authoring/design-time-layers';
 import {
   EDIT_MODE_REBUILD_EVENT,
   exitEditModeAuthoring,
   installEditModeAuthoringForProject,
 } from '../authoring/edit-mode-authoring';
+import {
+  isViewportToolContextVisible,
+  resolveViewportToolContext,
+} from '../authoring/viewport-tool-context';
+import {
+  isThreejsSurfaceVisible,
+  resolveFocusedViewportWorldId,
+} from '../authoring/world-hidden-viewport';
+import { isWorldHidden } from '../authoring/world-session-state';
 import { collectState } from '../command-listener';
-import { useEditorStats, useEditorStore } from '../EditorContext';
+import { themeVars } from '../design-system';
+import {
+  useEditorStats,
+  useEditorStore,
+  useHistoryCommands,
+  useHistoryService,
+} from '../EditorContext';
 import { reportEditorState } from '../editor-api';
 import { connectServerLogs, editorConsole } from '../editor-console';
 import { registerEditorHotkeys } from '../editor-hotkeys';
 import { getEditorMode } from '../editor-mode';
 import type { EditorStore } from '../editor-store';
 import { EditorViewport } from '../editor-viewport';
+import { getProjectFileHistory } from '../history/project-file-history';
 import { autoLaunchIngestFromURL, bindIngestMode } from '../ingest-mode';
 import { loadInitialScene } from '../initial-scene';
 import { setupNavMeshHandlers } from '../navmesh-handler';
 import { bindPlayMode } from '../play-mode';
 import { resolvePreviewBoneAttachments } from '../scene-sync';
 import { CameraInfo } from './CameraInfo';
-import { CommandPalette } from './CommandPalette';
-import { NetworkSection } from './NetworkSection';
-import { PlayBar } from './PlayBar';
 import { StatsOverlay } from './StatsOverlay';
 import { ToolStrip } from './Toolbar';
 import { ViewportOverlay } from './ViewportOverlay';
@@ -51,9 +64,22 @@ function buildEntityTagMap(store: EditorStore): Map<string, string[]> {
 export function ViewportPanel() {
   const store = useEditorStore();
   const stats = useEditorStats();
+  const history = useHistoryCommands();
+  const historyService = useHistoryService();
   const containerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
+  // Referenced materials are part of the rendered scene even though their
+  // bytes live in a separate project resource. Observe the authoritative
+  // history stream so writes, undo, and redo all refresh the WYSIWYG preview.
+  useEffect(
+    () =>
+      getProjectFileHistory(historyService).subscribeAll((path) => {
+        if (path.split(/[?#]/, 1)[0]!.endsWith('.mat.json')) store.refreshMaterialAssets();
+      }),
+    [historyService, store],
+  );
+
   useEffect(() => {
     const canvas = canvasRef.current!;
     const container = containerRef.current!;
@@ -82,7 +108,9 @@ export function ViewportPanel() {
     store.bindScene(scene, renderer);
 
     // --- Viewport ---
-    const viewport = new EditorViewport(canvas, scene, store);
+    // Bind navigation to the whole authoring surface. A DOM selection layer
+    // above the WebGL canvas must not disable right-drag orbit/fly controls.
+    const viewport = new EditorViewport(canvas, scene, store, container);
     // Bind the REAL viewport camera + orbit target so store.cameraPose (the
     // `editor.viewport.camera.get` facet, see command-listener.ts's
     // collectState) and the thumbnail-capture path read live data instead of
@@ -106,12 +134,19 @@ export function ViewportPanel() {
         store.environment?.rendering as RenderScope | undefined,
         window.devicePixelRatio,
       );
+      // World-hidden eye: while the focused threejs world is hidden, its
+      // authored post chain (bloom/vignette/…) must not render either — pass
+      // no environment so the composer builds bare. `editor-viewport.ts`
+      // bumps `composerVersion` (via `store.reapplyEnvironment()`) on both
+      // hide/show edges, which is what re-runs this rebuild.
+      const hiddenWorldId = resolveFocusedViewportWorldId(store);
+      const worldHidden = hiddenWorldId !== null && isWorldHidden(hiddenWorldId);
       applyScenePostProcessing(
         composer,
         renderer,
         store.scene ?? scene,
         viewport.camera,
-        store.environment,
+        worldHidden ? undefined : store.environment,
         store.objectMap,
         buildEntityTagMap(store),
       );
@@ -163,7 +198,7 @@ export function ViewportPanel() {
     });
 
     // --- Hotkeys ---
-    const unregisterHotkeys = registerEditorHotkeys(store, viewport, canvas);
+    const unregisterHotkeys = registerEditorHotkeys(store, viewport, canvas, history);
 
     // --- NavMesh ---
     const disposeNavMesh = setupNavMeshHandlers(store, viewport, scene);
@@ -246,13 +281,13 @@ export function ViewportPanel() {
     // override behind).
     let disposed = false;
     let editModeComposite: CompositeAuthoringAdapter | undefined;
-    let disposeDesignTimeLayers: (() => void) | undefined;
+    let disposeWorldDocuments: (() => void) | undefined;
 
     /**
      * (A1) fetch `vgai.game.json` and install the edit-mode composite over
-     * every declared world, then (B1) composite every OTHER declared world's
-     * design-time layer into THIS SAME container (the threejs canvas above
-     * keeps its existing slot, untouched). Callable more than once: the
+     * every declared world, then register a distinct center document for
+     * every non-Three authoring surface. This component keeps the native
+     * Three renderer; only Game composes roots. Callable more than once: the
      * initial mount (below) AND (C3) the `'editor:edit-mode-rebuild'`
      * listener — e.g. after the "Add UI Canvas" hierarchy-menu action seeds
      * the scene's first `ui` root, the composite needs rebuilding so its new
@@ -260,8 +295,8 @@ export function ViewportPanel() {
      * first, so a rebuild never leaks the old composite/layers.
      */
     async function installAll(): Promise<void> {
-      disposeDesignTimeLayers?.();
-      disposeDesignTimeLayers = undefined;
+      disposeWorldDocuments?.();
+      disposeWorldDocuments = undefined;
       if (editModeComposite) {
         exitEditModeAuthoring(editModeComposite);
         editModeComposite = undefined;
@@ -273,7 +308,15 @@ export function ViewportPanel() {
         editModeComposite = undefined;
         return;
       }
-      disposeDesignTimeLayers = mountDesignTimeLayers(container, composite, store);
+      const { installWorldDocuments } = await import('./world-documents');
+      if (disposed || editModeComposite !== composite) {
+        if (editModeComposite === composite) {
+          exitEditModeAuthoring(composite);
+          editModeComposite = undefined;
+        }
+        return;
+      }
+      disposeWorldDocuments = installWorldDocuments(store, composite);
     }
 
     function onEditModeRebuild(): void {
@@ -313,7 +356,7 @@ export function ViewportPanel() {
       unregisterHotkeys();
       disposeNavMesh();
       window.removeEventListener(EDIT_MODE_REBUILD_EVENT, onEditModeRebuild);
-      disposeDesignTimeLayers?.();
+      disposeWorldDocuments?.();
       exitEditModeAuthoring(editModeComposite);
       window.removeEventListener('error', onError);
       window.removeEventListener('unhandledrejection', onUnhandledRejection);
@@ -323,15 +366,36 @@ export function ViewportPanel() {
       // render targets on unmount (incl. React StrictMode's mount/unmount/remount).
       composer.dispose();
       renderer.dispose();
+      // `dispose()` clears Three's GPU resources but intentionally keeps the
+      // browser WebGL context alive. Fast Refresh can remount this panel many
+      // times in one tab; explicitly release the old context so a later mount
+      // cannot fail with "Error creating WebGL context" after the browser's
+      // per-process context budget is exhausted.
+      renderer.forceContextLoss();
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps -- runs once on mount
 
   // Subscribe to store for overlay visibility
   useSyncExternalStore(store.subscribe, store.getSnapshot);
 
+  // Spec 28 — figma mode's backdrop is the STANDARD transparency
+  // checkerboard, not a flat color: with no threejs surface showing, the
+  // area behind the DOM roots isn't "a gray scene", it's NOTHING, and the
+  // checkerboard is the universal signal for that. Achieved by fading the
+  // WebGL canvas to opacity 0 (keeps layout AND pointer flow identical —
+  // the layered-pick path still runs) so the container's own checkerboard
+  // shows through behind the DOM world layers appended above it.
+  const threejsSurface = isThreejsSurfaceVisible(store);
+  const toolContext = resolveViewportToolContext(
+    getActiveAuthoring(store),
+    store.selectedEntityIds,
+  );
+  const toolContextVisible = isViewportToolContextVisible(store, toolContext);
+  const showThreejsTools = threejsSurface && toolContextVisible && toolContext?.kind === 'threejs';
   return (
     <div
       ref={containerRef}
+      data-testid="viewport-panel"
       style={{
         position: 'absolute',
         top: 0,
@@ -340,6 +404,23 @@ export function ViewportPanel() {
         height: '100%',
         overflow: 'hidden',
         pointerEvents: 'auto',
+        ...(threejsSurface
+          ? {}
+          : {
+              // Dark-UI transparency checkerboard (VS Code image-preview
+              // style — the light Figma checker glares in a dark editor and
+              // washes out light-on-transparent HUD content). V-20 — the
+              // PATTERN itself is a deliberate, documented design choice
+              // (left alone); `themeVars.surface.raised` is an exact-value token match for the
+              // base tone, so swapped in. The gradient's `#444649` has no
+              // exact token in the current set, so it stays a literal per
+              // the audit's own "only swap exact matches" guidance.
+              backgroundColor: themeVars.surface.raised,
+              backgroundImage:
+                'linear-gradient(45deg, #444649 25%, transparent 25%, transparent 75%, #444649 75%), linear-gradient(45deg, #444649 25%, transparent 25%, transparent 75%, #444649 75%)',
+              backgroundPosition: '0 0, 8px 8px',
+              backgroundSize: '16px 16px',
+            }),
       }}
     >
       <canvas
@@ -347,23 +428,41 @@ export function ViewportPanel() {
         data-testid="editor-canvas"
         aria-hidden="true"
         tabIndex={-1}
-        style={{ width: '100%', height: '100%', display: 'block', pointerEvents: 'auto' }}
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'block',
+          pointerEvents: 'auto',
+          opacity: threejsSurface ? 1 : 0,
+        }}
       />
-      {/* Spec 27 §3 A3 — mounted as a CHILD of THIS SAME containerRef div, the exact
-          DOM parent `mountDesignTimeLayers(container, …)` above appends each react/pixi
-          world's own `position:absolute; inset:0` layer into, so `RectProvider.rect(id)`'s
-          host-relative geometry lines up with this overlay's own coordinate space with no
-          correction (see WorldSelectionOverlay.tsx's own doc comment). Self-gates to a
-          no-op when the active composite has no rect-capable (DOM) child, so a 3D-only
-          project renders nothing extra here. */}
+      {/* Three-scene selection overlay. React/Pixi documents mount their own
+          co-located overlay beside the isolated world host. */}
       <WorldSelectionOverlay />
-      <PlayBar />
-      <ToolStrip />
-      <ViewportOverlay />
-      {store.showStats && <StatsOverlay />}
-      {store.playState !== 'stopped' && <NetworkSection />}
-      <CameraInfo />
-      {store.commandPaletteOpen && <CommandPalette onClose={() => store.closeCommandPalette()} />}
+      {/* W4 (inventory row V4): the PlayBar copy that floated here moved to
+          the global command header (`ProjectHeader.tsx`) — transport is now
+          document-independent. */}
+      {/* Spec 28 — the 3D cockpit (transform toolstrip, grid/helpers/shading
+          controls, camera Pos/Target readout) gates on a threejs surface
+          actually SHOWING, exactly as WorldSelectionOverlay above self-gates
+          on a DOM child existing. With every 3D world hidden the viewport is
+          a DOM authoring surface and presents as one. Re-evaluated on every
+          notify via this component's useSyncExternalStore subscription. */}
+      {showThreejsTools ? (
+        <>
+          <ToolStrip />
+          <ViewportOverlay />
+          <CameraInfo />
+        </>
+      ) : threejsSurface ? (
+        <ViewportOverlay statsOnly />
+      ) : null}
+      {threejsSurface && store.showStats && <StatsOverlay />}
+      {/* W4 (inventory row V9): the duplicated play-time NetworkSection
+          overlay is gone from the scene document — compact connection state
+          lives in the status bar (`status-contributions.tsx`); the detailed
+          overlay stays contextual in the Game document (`CenterDocuments`'s
+          GamePanel), where play actually renders. */}
     </div>
   );
 }