@vgai/editor 0.4.0-canary.20260715.0 → 0.4.0

package/src/components/WorkspaceDock.tsx

@@ -1,7 +1,6 @@
 import {
   type DockviewApi,
   DockviewDefaultTab,
-  type DockviewPanelApi,
   DockviewReact,
   type DockviewTheme,
   type IDockviewPanelHeaderProps,
@@ -116,16 +115,6 @@ export const vgaiDockviewTheme: DockviewTheme = {
   tabAnimation: 'smooth',
 };
 
-function usePanelActive(api: DockviewPanelApi): boolean {
-  const [active, setActive] = useState(api.isActive);
-  useEffect(() => {
-    setActive(api.isActive);
-    const disposable = api.onDidActiveChange((event) => setActive(event.isActive));
-    return () => disposable.dispose();
-  }, [api]);
-  return active;
-}
-
 function StaticPanelContent({ staticKind }: { staticKind: StaticPanelKind }) {
   const onOpenScene = useContext(OpenSceneContext);
   switch (staticKind) {
@@ -145,7 +134,6 @@ function StaticPanelContent({ staticKind }: { staticKind: StaticPanelKind }) {
 }
 
 function WorkspacePanel({ api, params }: IDockviewPanelProps<WorkspacePanelParams>) {
-  const active = usePanelActive(api);
   useSyncExternalStore(
     subscribeWorkspaceDocuments,
     workspaceDocumentRegistryVersion,
@@ -192,6 +180,12 @@ function WorkspacePanel({ api, params }: IDockviewPanelProps<WorkspacePanelParam
   if (!document) return <div className="vgai-dock-empty">Restoring document…</div>;
   const Content = document.descriptor.Content;
   const Toolbar = document.descriptor.Toolbar;
+  // A bottom utility can own keyboard focus while the center document stays
+  // visibly selected in its own group. Dockview's `api.isActive` is global
+  // focus, not document activation; using it here suspended previews and
+  // cleared their Inspector/Hierarchy context whenever Console or Controls
+  // opened. The document registry is the semantic center-tab authority.
+  const active = activeWorkspaceDocumentId() === params.documentId;
   return (
     <div
       className="vgai-dock-document"

package/src/components/asset-documents.tsx

@@ -12,14 +12,14 @@
  * open-asset`) keeps its meaning unchanged:
  *
  *   - project asset  → the serving path itself (`/textures/crate.png`)
- *   - Asset Lab      → `asset-lab:entity:<entityId>`
+ *   - legacy entity editor key → `asset-lab:entity:<entityId>`
  *   - online asset   → `online:<source>:<id>`
  *
  * Titles are source-owned file names as authored (§8 — `crate.png`, never a
  * technology bucket); the online document keeps the catalog's own asset name.
  *
  * Per-document RUNTIME state (an online asset resolving to a local path after
- * download) lives in a module-scope spec map in the house
+ * download) lives in an HMR-stable module spec map in the house
  * `useSyncExternalStore` shape — the registry's descriptors stay immutable,
  * and `AssetDocumentContent` re-renders from the spec map. Specs are dropped
  * on document dispose (close / project teardown via
@@ -60,7 +60,7 @@ import './asset-workflow.css';
 export interface AssetDocumentSpec {
   readonly assetPath: string;
   readonly kind: AssetKind;
-  /** Entity source for a session-only Asset Lab document. Never serialized. */
+  /** Entity source for a session-only live-object Asset Editor. Never serialized. */
   readonly entityId?: string;
   /** Present while this document shows an online (not-yet-downloaded) asset. */
   readonly online?: OnlineAssetInfo;
@@ -74,8 +74,20 @@ export interface AssetDocumentMutation {
   paths?: readonly string[];
 }
 
-const _specs = new Map<string, AssetDocumentSpec>();
-const _pathAliases = new Map<string, string>();
+const hotData = import.meta.hot?.data;
+const _specs =
+  (hotData?.['vgai:asset-document-specs'] as Map<string, AssetDocumentSpec> | undefined) ??
+  new Map<string, AssetDocumentSpec>();
+const _pathAliases =
+  (hotData?.['vgai:asset-document-path-aliases'] as Map<string, string> | undefined) ??
+  new Map<string, string>();
+if (hotData) {
+  // Workspace descriptors intentionally survive compatible Fast Refreshes.
+  // Their specs must survive with them or the next persistence snapshot drops
+  // the open document and leaves a titled-but-empty Dockview tab on reload.
+  hotData['vgai:asset-document-specs'] = _specs;
+  hotData['vgai:asset-document-path-aliases'] = _pathAliases;
+}
 let _version = 0;
 const _listeners = new Set<() => void>();
 
@@ -113,7 +125,7 @@ export interface AssetDocumentStore {
   setActiveViewportTab(tab: 'scene' | 'game'): void;
 }
 
-/** The Asset Lab additionally needs the live object map for its §8 title. */
+/** A live-entity Asset Editor additionally needs the object map for its §8 title. */
 export interface EntityAssetDocumentStore extends AssetDocumentStore {
   readonly objectMap: Map<string, THREE.Object3D>;
 }
@@ -159,7 +171,7 @@ export function openAssetDocument(
   return openSpecDocument(store, id, title, { assetPath, kind }, { sourcePath: assetPath });
 }
 
-/** Open the Asset Lab document for a live entity (`Open in Asset Lab`). */
+/** Open the typed Asset Editor for a live entity (legacy id retained for API compatibility). */
 export function openEntityAssetDocument(store: EntityAssetDocumentStore, entityId: string): void {
   const object = store.objectMap.get(entityId);
   if (!object) return;
@@ -277,6 +289,8 @@ function AssetViewerBody({
   if (spec.unavailableReason) {
     return (
       <AssetEditorShell
+        documentId={id}
+        active={active}
         type={spec.kind}
         title={spec.assetPath.split('/').pop() || 'Deleted asset'}
         status="Source unavailable"
@@ -288,16 +302,29 @@ function AssetViewerBody({
   const route = assetDocumentViewerRoute(spec);
   if (route === 'online' && spec.online) {
     return (
-      <OnlineAssetDetail
-        online={spec.online}
-        onResolved={(localPath) => resolveOnlineAssetDocument(id, localPath)}
-      />
+      <AssetEditorShell
+        documentId={id}
+        active={active}
+        type="online"
+        title={spec.online.name}
+        details={
+          <OnlineAssetDetail
+            online={spec.online}
+            mode="inspector"
+            onResolved={(localPath) => resolveOnlineAssetDocument(id, localPath)}
+          />
+        }
+        status={`${spec.online.type} · ${spec.online.source}`}
+      >
+        <OnlineAssetDetail online={spec.online} mode="preview" />
+      </AssetEditorShell>
     );
   }
   const title = spec.assetPath.split('/').pop() || spec.entityId || 'Asset';
   if (route === 'model')
     return (
       <ModelViewer
+        documentId={id}
         assetPath={spec.assetPath || undefined}
         entityId={spec.entityId}
         active={active}
@@ -330,6 +357,8 @@ function AssetViewerBody({
   }
   return (
     <AssetEditorShell
+      documentId={id}
+      active={active}
       type={route}
       title={title}
       details={
@@ -369,7 +398,7 @@ export function AssetDocumentContent({ documentId, active }: WorkspaceDocumentCo
       style={{
         flex: 1,
         minHeight: 0,
-        overflowY: 'auto',
+        overflow: 'hidden',
         pointerEvents: 'auto',
         background: bg[1],
       }}

package/src/components/asset-selection-section.tsx

@@ -22,13 +22,14 @@
 import { resolveUrl } from '@engine/loader';
 import { MaterialFileSchema } from '@engine/scene/schema/material';
 import { useEffect, useState } from 'react';
-import { getSelectedAsset, type SelectedAsset } from '../asset-selection';
+import { getSelectedAsset, type SelectedAsset, setSelectedAsset } from '../asset-selection';
 import { assetDocumentKind } from '../asset-workflow/asset-capabilities';
 import { PROJECT_ASSET_COMMANDS } from '../asset-workflow/project-asset-commands';
 import { Button, bg, border, radius, text } from '../design-system';
 import { registerInspectorSections } from '../inspector-section-registry';
 import { getModelThumbnailRenderer } from '../model-thumbnail';
 import { validateInputMapForViewer } from './asset-viewers/InputMapViewer';
+import { OnlineAssetDetail } from './asset-viewers/OnlineAssetDetail';
 
 const labelStyle: React.CSSProperties = { fontSize: 11, color: text[3], marginBottom: 2 };
 const valueStyle: React.CSSProperties = { fontSize: 11, color: text[1], wordBreak: 'break-all' };
@@ -227,6 +228,38 @@ export function AssetSelectionSection() {
   const asset = getSelectedAsset();
   if (!asset) return null;
   const ext = asset.name.includes('.') ? (asset.name.split('.').pop() ?? '') : '';
+  if (asset.online) {
+    const online = asset.online;
+    return (
+      <div
+        data-testid="inspector-asset-selection"
+        style={{
+          pointerEvents: 'auto',
+          borderBottom: `1px solid ${border[1]}`,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 6,
+        }}
+      >
+        <OnlineAssetDetail
+          online={online}
+          mode="inspector"
+          onResolved={(localPath) => setSelectedAsset({ ...asset, path: localPath })}
+        />
+        <div style={{ padding: '0 8px 8px' }}>
+          <Button
+            type="button"
+            style={{ width: '100%' }}
+            onClick={() =>
+              window.dispatchEvent(new CustomEvent('editor:open-online-asset', { detail: online }))
+            }
+          >
+            Open in Asset Editor
+          </Button>
+        </div>
+      </div>
+    );
+  }
   return (
     <div
       data-testid="inspector-asset-selection"

package/src/components/asset-viewers/ModelViewer.tsx

@@ -50,6 +50,7 @@ import { AssetImportDetails } from '../AssetImportDetails';
 import { writeProjectAsset } from '../asset-editor-persistence';
 
 interface ModelViewerProps {
+  documentId?: string | undefined;
   assetPath: string | undefined;
   entityId: string | undefined;
   materialPath?: string | undefined;
@@ -71,6 +72,7 @@ interface ModelViewerRuntime {
 
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one viewer coordinates embedded/full chrome and both live-entity and file-backed Asset Editor sources.
 export function ModelViewer({
+  documentId,
   assetPath,
   entityId,
   materialPath,
@@ -493,6 +495,8 @@ export function ModelViewer({
 
   return (
     <AssetEditorShell
+      documentId={documentId ?? `asset-editor:${assetPath ?? entityId ?? displayName}`}
+      active={active}
       type="model"
       title={displayName}
       toolbar={
@@ -663,7 +667,8 @@ export function ModelViewer({
           )}
         </div>
       }
-      status={
+      status={`${loading ? `${loadStage}…` : error ? `${issue?.stage ?? 'rendering'} failed · ${issue?.code}` : 'Ready'} · ${inspection?.triangles.toLocaleString() ?? 0} triangles`}
+      controls={
         inspection?.clips ? (
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
             <Select
@@ -712,9 +717,7 @@ export function ModelViewer({
               </Select>
             </label>
           </div>
-        ) : (
-          `${loading ? `${loadStage}…` : error ? `${issue?.stage ?? 'rendering'} failed · ${issue?.code}` : 'Ready'} · ${inspection?.triangles.toLocaleString() ?? 0} triangles`
-        )
+        ) : undefined
       }
     >
       {viewport}