@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/DefaultEditorLayout.tsx

@@ -1,10 +1,20 @@
 import { resolveUrl } from '@engine/loader';
 import { parsePrefabFile, parseSceneFile } from '@engine/scene/parse';
 import type { PrefabFile, SceneFile } from '@engine/scene/scene-types';
-import { use, useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { use, useCallback, useEffect, useState, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
-import { connectAssetEvents, connectSceneEvents } from '../asset-events';
+import {
+  connectAssetEvents,
+  connectSceneEvents,
+  decideExternalSceneChangeAction,
+} from '../asset-events';
+import { installAssetSelectionAutoClear } from '../asset-selection';
 import { getActiveAuthoring, hasAuthoringOverride } from '../authoring/active-adapter';
+import {
+  switchFocusedWorld,
+  WORLD_FOCUS_REQUEST_EVENT,
+  type WorldFocusRequest,
+} from '../authoring/edit-mode-authoring';
 import {
   findOwningRootGroupId,
   ROOT_ACTIVATION_REQUEST_EVENT,
@@ -12,24 +22,30 @@ import {
   requestRootActivation,
 } from '../authoring/root-activation';
 import { watchExternalSceneChanges } from '../browser-external-watch';
-import { useEditorInit, useEditorStore } from '../EditorContext';
+import { themeVars } from '../design-system';
+import { useEditorInit, useEditorStore, useHistoryService } from '../EditorContext';
 import { readProjectTextFile, saveFile } from '../editor-api';
 import { editorConsole } from '../editor-console';
 import { getEditorMode } from '../editor-mode';
-import { resizeGame, setGameContainer } from '../play-mode';
-import { SceneUIPalettePanel } from '../scene-ui-mode/scene-ui-palette-panel';
-import { UIPrefabDialogHost } from '../scene-ui-mode/ui-prefab-dialog-host';
+import type { HistoryService } from '../history/history-service';
+import { getProjectFileHistory } from '../history/project-file-history';
 import { getStorageBackend } from '../storage';
-import { BottomPanel } from './BottomPanel';
-import { GameHierarchy } from './GameHierarchy';
+import { installAuxiliaryEvents } from '../workspace-aux-commands';
+import { installUtilityAutoOpen, installUtilityEvents } from '../workspace-utility-commands';
+import { ensureBuildContributionsRegistered } from './build-documents';
+import { useCenterDocuments } from './CenterDocuments';
+import { CommandPalette } from './CommandPalette';
+import { ensureCoreUtilitiesRegistered } from './core-utilities';
+import { configureDataDocumentStore, startDataAssetDiscovery } from './data-documents';
 import { MountFailureBanner } from './MountFailureBanner';
-import { NetworkSection } from './NetworkSection';
-import { PlayBar, type Resolution } from './PlayBar';
 import { PrefabSaveDialog } from './PrefabSaveDialog';
 import { ProjectHeader } from './ProjectHeader';
-import { RightPanel } from './RightPanel';
 import { RootActivateDialog } from './RootActivateDialog';
-import { ViewportPanel } from './ViewportPanel';
+import { StatusBar } from './StatusBar';
+import { ensureCoreStatusContributionsRegistered } from './status-contributions';
+import { WorkspaceDock } from './WorkspaceDock';
+import { setWorkspaceHistoryService } from './workspace-history';
+import { configureXStateInspector } from './xstate-documents';
 
 /** Load a scene from a URL into the store. */
 export async function openSceneFromAsset(
@@ -52,14 +68,33 @@ export async function openSceneFromAsset(
 export async function saveMaterialToServer(
   material: import('@engine/scene/scene-types').MaterialFile,
   path: string,
+  history?: HistoryService,
 ): Promise<boolean> {
   const content = JSON.stringify(material, null, 2);
+  if (history) {
+    return getProjectFileHistory(history).write(path, content, {
+      label: `Edit ${path.split('/').pop() ?? 'Material'}`,
+      kind: 'material',
+      contentType: 'application/json',
+    });
+  }
   return saveFile(path, content);
 }
 
 /** Save a PrefabFile to disk via the editor server API. */
-export async function savePrefabToServer(prefab: PrefabFile, path: string): Promise<boolean> {
+export async function savePrefabToServer(
+  prefab: PrefabFile,
+  path: string,
+  history?: HistoryService,
+): Promise<boolean> {
   const content = JSON.stringify(prefab, null, 2);
+  if (history) {
+    return getProjectFileHistory(history).write(path, content, {
+      label: `Save ${path.split('/').pop() ?? 'Prefab'}`,
+      kind: 'prefab',
+      contentType: 'application/json',
+    });
+  }
   return saveFile(path, content);
 }
 
@@ -91,165 +126,48 @@ export async function fetchPrefabFile(url: string): Promise<PrefabFile | null> {
   }
 }
 
-/** Game panel — a container div that play-mode.ts fills with a canvas. */
-function GamePanel({ style }: { style?: React.CSSProperties }) {
-  const store = useEditorStore();
-  const outerRef = useRef<HTMLDivElement>(null);
-  const [resolution, setResolution] = useState<Resolution>({
-    label: 'Fill',
-    width: null,
-    height: null,
-  });
-  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-
-  // Callback ref so setGameContainer is called even when the element swaps (fill ↔ device)
-  const prevRef = useRef<HTMLDivElement | null>(null);
-  const canvasRef = useCallback((el: HTMLDivElement | null) => {
-    if (el === prevRef.current) return;
-    // Move game canvas to new container
-    if (prevRef.current && el) {
-      while (prevRef.current.firstChild) el.appendChild(prevRef.current.firstChild);
-    }
-    prevRef.current = el;
-    setGameContainer(el);
-  }, []);
-
-  // Track outer container size for scale calculation
-  useEffect(() => {
-    const el = outerRef.current;
-    if (!el) return;
-    const observer = new ResizeObserver(([entry]) => {
-      if (!entry) return;
-      setContainerSize({ width: entry.contentRect.width, height: entry.contentRect.height });
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  // Resize the game renderer when resolution or container size changes
-  const isFill = resolution.width === null;
-  useEffect(() => {
-    if (isFill) {
-      // Fill mode: resize to match available container space
-      if (containerSize.width > 0 && containerSize.height > 0) {
-        resizeGame(containerSize.width, containerSize.height);
-      }
-    } else {
-      resizeGame(resolution.width!, resolution.height!);
-    }
-  }, [isFill, resolution.width, resolution.height, containerSize.width, containerSize.height]);
-
-  // Scale: fit the device resolution into the available space, never upscale
-  let scale = 1;
-  if (!isFill && containerSize.width > 0 && containerSize.height > 0) {
-    const scaleX = containerSize.width / resolution.width!;
-    const scaleY = containerSize.height / resolution.height!;
-    scale = Math.min(scaleX, scaleY, 1);
-  }
-
-  return (
-    <div style={{ overflow: 'hidden', position: 'relative', flexDirection: 'column', ...style }}>
-      <div
-        ref={outerRef}
-        style={{
-          flex: 1,
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          position: 'relative',
-        }}
-      >
-        {isFill ? (
-          <div ref={canvasRef} aria-hidden="true" style={{ position: 'absolute', inset: 0 }} />
-        ) : (
-          /* Wrapper sized to the scaled dimensions so flexbox centering works.
-             The inner canvasRef is full device resolution, CSS-scaled down. */
-          <div
-            style={{
-              width: resolution.width! * scale,
-              height: resolution.height! * scale,
-              overflow: 'hidden',
-            }}
-          >
-            <div
-              ref={canvasRef}
-              aria-hidden="true"
-              style={{
-                width: resolution.width!,
-                height: resolution.height!,
-                transformOrigin: 'top left',
-                transform: `scale(${scale})`,
-              }}
-            />
-          </div>
-        )}
-        {/* Same overlay ViewportPanel renders on the Scene tab (T-R1a #6) — the
-            Game tab is where play auto-switches to, so it must render here too,
-            not only on the Scene-tab viewport it would otherwise be hidden behind. */}
-        {store.playState !== 'stopped' && <NetworkSection />}
-      </div>
-      <PlayBar resolution={resolution} onResolutionChange={setResolution} scale={scale} />
-    </div>
-  );
-}
-
-function ViewportTabBar({
-  active,
-  onChange,
-  showGame,
-}: {
-  active: 'scene' | 'game';
-  onChange: (tab: 'scene' | 'game') => void;
-  showGame: boolean;
-}) {
-  const tabStyle = (isActive: boolean): React.CSSProperties => ({
-    background: 'none',
-    border: 'none',
-    padding: '4px 8px',
-    cursor: 'pointer',
-    fontSize: 11,
-    fontWeight: 600,
-    textTransform: 'uppercase',
-    color: isActive ? '#c5c8ce' : '#666',
-    borderBottom: isActive ? '2px solid #579eff' : '2px solid transparent',
-    marginBottom: -1,
-    pointerEvents: 'auto',
-  });
-  return (
-    <div
-      style={{
-        display: 'flex',
-        gap: 2,
-        background: '#2c2c2c',
-        borderBottom: '1px solid #333',
-        flexShrink: 0,
-        pointerEvents: 'auto',
-      }}
-    >
-      <button type="button" style={tabStyle(active === 'scene')} onClick={() => onChange('scene')}>
-        Viewport
-      </button>
-      {showGame && (
-        <button type="button" style={tabStyle(active === 'game')} onClick={() => onChange('game')}>
-          Game
-        </button>
-      )}
-    </div>
-  );
-}
-
 export function DefaultEditorLayout({
   onReturnToProjectScreen,
 }: {
   onReturnToProjectScreen?: (() => void) | undefined;
 }) {
   const store = useEditorStore();
+  const history = useHistoryService();
   use(useEditorInit()); // suspends until project is detected
 
   // Subscribe to store changes
   useSyncExternalStore(store.subscribe, store.getSnapshot);
-  const isPlaying = store.playState !== 'stopped';
+  // W1 — install the center workspace documents (scene + Game) and keep the
+  // document registry synced with the store's activeViewportTab (T6.3 gate).
+  useCenterDocuments(store);
+  // W3 (workspace-shell §9/W3) — the shell contributions the new center
+  // documents ride on:
+  //  - data-asset discovery (folder-scan store behind the per-file data
+  //    documents + the palette's Open Data Asset actions), plus the store
+  //    bridge the Data Assets navigation document opens siblings through;
+  //  - the XState selected-live-entity Inspector section (§4.3 — matches
+  //    ONLY a real live `bindXStateAnimation` binding; no demo anywhere);
+  //  - the Build Output utility + build-progress status contribution
+  //    (server mode only — builds spawn npm scripts server-side).
+  // W4 (workspace-shell §9/W4) — status-bar contributions register BEFORE the
+  // build ensure below so the order-0 items sequence save-status first; the
+  // utility auto-open watcher (save/build failure → the correct Dockview
+  // panel) is per-store. Core utilities register before the host reconciles.
+  useEffect(() => ensureCoreStatusContributionsRegistered(), []);
+  useEffect(() => ensureCoreUtilitiesRegistered(), []);
+  useEffect(() => installUtilityAutoOpen(store), [store]);
+  useEffect(() => installUtilityEvents(), []);
+  useEffect(() => installAuxiliaryEvents(), []);
+  useEffect(() => startDataAssetDiscovery(), []);
+  useEffect(() => configureDataDocumentStore(store), [store]);
+  useEffect(() => setWorkspaceHistoryService(history), [history]);
+  useEffect(() => configureXStateInspector(store), [store]);
+  useEffect(() => {
+    if (getEditorMode() === 'server') ensureBuildContributionsRegistered();
+  }, []);
+  // W2 (§5.1) — an ENTITY selection change drops the asset selection, so the
+  // Inspector goes back to being purely entity-contextual (asset-selection.ts).
+  useEffect(() => installAssetSelectionAutoClear(store), [store]);
   const [prefabSaveState, setPrefabSaveState] = useState<{ entityId: string; name: string } | null>(
     null,
   );
@@ -270,6 +188,20 @@ export function DefaultEditorLayout({
     return () => window.removeEventListener(ROOT_ACTIVATION_REQUEST_EVENT, handler);
   }, []);
 
+  // A4 (focus-switch) — the world-focus twin of the root-activation dialog
+  // above: `requestWorldFocus` dispatches this when the store is dirty; the
+  // same RootActivateDialog renders with world copy, and confirm runs the
+  // actual switch.
+  const [pendingWorldFocus, setPendingWorldFocus] = useState<WorldFocusRequest | null>(null);
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      setPendingWorldFocus((e as CustomEvent<WorldFocusRequest>).detail);
+    };
+    window.addEventListener(WORLD_FOCUS_REQUEST_EVENT, handler);
+    return () => window.removeEventListener(WORLD_FOCUS_REQUEST_EVENT, handler);
+  }, []);
+
   // Listen for "save as prefab" events from the hierarchy context menu
   useEffect(() => {
     const handler = (e: Event) => {
@@ -288,15 +220,24 @@ export function DefaultEditorLayout({
         setPrefabSaveState(null);
         return;
       }
-      savePrefabToServer(prefab, path).then((ok) => {
+      const save = history
+        ? store.savePrefabAndConvertInstance(
+            prefabSaveState.entityId,
+            path,
+            JSON.stringify(prefab, null, 2),
+          )
+        : savePrefabToServer(prefab, path);
+      save.then((ok) => {
         if (ok) {
-          const servingPath = `/${path}`;
-          store.convertToPrefabInstance(prefabSaveState.entityId, servingPath);
+          if (!history) {
+            const servingPath = `/${path}`;
+            store.convertToPrefabInstance(prefabSaveState.entityId, servingPath);
+          }
         }
         setPrefabSaveState(null);
       });
     },
-    [store, prefabSaveState],
+    [store, prefabSaveState, history],
   );
 
   // A4 (D8) — the SINGLE choke point for the asset-browser's scene/prefab
@@ -339,10 +280,13 @@ export function DefaultEditorLayout({
 
   // Subscribe to server-sent asset move events (file watcher)
   useEffect(() => {
-    return connectAssetEvents((event) => {
-      store.applyAssetMove(event.oldPath, event.newPath);
-      window.dispatchEvent(new CustomEvent('editor:assets-changed'));
-    });
+    return connectAssetEvents(
+      (event) => {
+        store.applyAssetMove(event.oldPath, event.newPath);
+        window.dispatchEvent(new CustomEvent('editor:assets-changed'));
+      },
+      () => window.dispatchEvent(new CustomEvent('editor:assets-changed')),
+    );
   }, [store]);
 
   // Subscribe to server-sent scene file changes (live sync from disk). This channel
@@ -358,15 +302,41 @@ export function DefaultEditorLayout({
   // ITS `applyExternal` would feed a foreign `SceneFile` into e.g. an ingest
   // overlay's apply, so fall back to `store.applyExternalUpdate` directly there,
   // preserving its existing play-state-guarded queueing behavior unchanged.
+  //
+  // run-3 friction #1: a hand edit landing while the editor holds UNSAVED
+  // first-party changes used to be silently diff-merged into the live scene —
+  // a real external edit and the user's own in-flight edits would interleave
+  // with no warning. Own-echo (this editor's own autosave reflected back
+  // through the watcher) is checked FIRST via `isOwnEchoContent` so a plain
+  // echo never triggers the notice; only a GENUINE external change while
+  // dirty is held back, with a loud (never blocking — no window.prompt)
+  // console notice telling the user how to pick it up. Clean documents keep
+  // applying automatically, same as before. Scoped to the non-override path
+  // only — ingest/world2d/UI overrides have their own dirty/reload contracts.
   const onSceneChanged = useCallback(
     (event: { path: string; content: string }) => {
       const currentPath = store.savePath;
-      if (!currentPath) return;
-      const eventPath = event.path.startsWith('/') ? event.path.slice(1) : event.path;
-      if (eventPath !== currentPath) return;
+      const hasOverride = hasAuthoringOverride();
+      const action = decideExternalSceneChangeAction({
+        currentPath,
+        eventPath: event.path,
+        isDirty: store.isDirty,
+        isOwnEcho: store.isOwnEchoContent(event.content),
+        hasOverride,
+      });
+      if (action === 'skip') return;
+      if (action === 'notice') {
+        editorConsole.warn(
+          `${currentPath} changed on disk while you have unsaved changes — ` +
+            'it will NOT auto-reload over unsaved work. Save (Ctrl/Cmd+S) or ' +
+            'discard your edits to pick up the external change.',
+          'scene',
+        );
+        return;
+      }
       try {
         const doc = parseSceneFile(JSON.parse(event.content));
-        if (hasAuthoringOverride()) {
+        if (hasOverride) {
           store.applyExternalUpdate(doc, event.content);
         } else {
           getActiveAuthoring(store).persistence?.applyExternal?.(doc, event.content);
@@ -399,6 +369,9 @@ export function DefaultEditorLayout({
   return (
     <>
       <div
+        className="vgai-editor-shell"
+        data-editor-hotkey-scope="workspace"
+        data-editor-hotkey-fallback
         style={{
           position: 'absolute',
           top: 0,
@@ -408,9 +381,9 @@ export function DefaultEditorLayout({
           display: 'flex',
           flexDirection: 'column',
           pointerEvents: 'none',
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          fontFamily: themeVars.typography.sans,
           fontSize: '13px',
-          color: '#c5c8ce',
+          color: themeVars.content.primary,
         }}
       >
         <ProjectHeader onReturnToProjectScreen={onReturnToProjectScreen} />
@@ -429,56 +402,7 @@ export function DefaultEditorLayout({
             minHeight: 0,
           }}
         >
-          {/* A2 — ONE contract-only hierarchy panel drives every session shape
-              (bare single-scene edit, ingested game, multi-world composite):
-              `hasAuthoringOverride()` no longer selects between two panels. */}
-          <GameHierarchy />
-          {/* E1.a (spec-27 §7 E1) — the scene-UI palette (+ prefab
-              instantiate list), visible only while a scene-UI child is
-              installed (renders null otherwise — the component's own gate). */}
-          <SceneUIPalettePanel />
-          {/* Viewport + Game area — two independent panels, tab-switched */}
-          <div
-            style={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              position: 'relative',
-              pointerEvents: 'none',
-            }}
-          >
-            <ViewportTabBar
-              active={store.activeViewportTab}
-              onChange={(tab) => store.setActiveViewportTab(tab)}
-              showGame={isPlaying}
-            />
-            {/* Viewport panel (editor) — all overlays are inside ViewportPanel */}
-            <div
-              style={{
-                flex: 1,
-                position: 'relative',
-                display: store.activeViewportTab === 'scene' ? 'block' : 'none',
-              }}
-            >
-              <ViewportPanel />
-            </div>
-            {/* Game panel — always mounted, hidden when not playing/active */}
-            <GamePanel
-              style={{
-                flex: 1,
-                position: 'relative',
-                display: isPlaying && store.activeViewportTab === 'game' ? 'flex' : 'none',
-                flexDirection: 'column',
-                pointerEvents: 'auto',
-                ...(isPlaying && store.playState === 'playing'
-                  ? { outline: '2px solid #4ec9b0', outlineOffset: -2 }
-                  : isPlaying
-                    ? { outline: '2px solid #dcdcaa', outlineOffset: -2 }
-                    : {}),
-              }}
-            />
-          </div>
-          <RightPanel />
+          <WorkspaceDock onOpenScene={handleOpenScene} />
         </div>
         {prefabSaveState && (
           <PrefabSaveDialog
@@ -487,10 +411,6 @@ export function DefaultEditorLayout({
             onCancel={() => setPrefabSaveState(null)}
           />
         )}
-        {/* E1.c (spec-27 §7 E1) — the scene-UI "Save as Prefab" dialog
-            (hierarchy context-menu, `ui-prefab-hierarchy-menu.ts`); a
-            self-contained host, renders nothing until that menu item fires. */}
-        <UIPrefabDialogHost />
         {pendingRootActivation && (
           <RootActivateDialog
             label={pendingRootActivation.label}
@@ -502,8 +422,24 @@ export function DefaultEditorLayout({
             onCancel={() => setPendingRootActivation(null)}
           />
         )}
+        {pendingWorldFocus && (
+          <RootActivateDialog
+            label={pendingWorldFocus.worldId}
+            title="Switch focused world?"
+            onConfirm={() => {
+              const { worldId, scenePath } = pendingWorldFocus;
+              setPendingWorldFocus(null);
+              void switchFocusedWorld(store, worldId, scenePath);
+            }}
+            onCancel={() => setPendingWorldFocus(null)}
+          />
+        )}
+        {/* Global command surface: this must live at the shell root. Mounting
+            it inside the Scene document made Cmd/Ctrl+K invisible whenever
+            Game, Story, asset, data, or tool documents were active. */}
+        {store.commandPaletteOpen && <CommandPalette onClose={() => store.closeCommandPalette()} />}
       </div>
-      {bottomEl && createPortal(<BottomPanel onOpenScene={handleOpenScene} />, bottomEl)}
+      {bottomEl && createPortal(<StatusBar />, bottomEl)}
     </>
   );
 }