@vgai/editor 0.4.0-canary.20260715.0 → 0.4.0

package/src/components/AssetEditorShell.tsx

@@ -1,141 +1,71 @@
 import type { ReactNode } from 'react';
-import { useEffect, useState } from 'react';
-import { Button, border, TextInput, text } from '../design-system';
-import { getCurrentProject } from '../project-manager';
-
-export interface AssetEditorLayout {
-  structureCollapsed: boolean;
-  detailsCollapsed: boolean;
-  structureWidth: number;
-  detailsWidth: number;
-}
-
-const defaults: AssetEditorLayout = {
-  structureCollapsed: false,
-  detailsCollapsed: false,
-  structureWidth: 240,
-  detailsWidth: 300,
-};
-
-export function assetEditorLayoutKey(
-  type: string,
-  projectId = getCurrentProject()?.rootPath ?? '__unscoped__',
-): string {
-  return `vgai:asset-editor-layout:${projectId}:${type}`;
-}
-
-export function readAssetEditorLayout(type: string): AssetEditorLayout {
-  if (typeof localStorage === 'undefined') return defaults;
-  try {
-    return { ...defaults, ...JSON.parse(localStorage.getItem(assetEditorLayoutKey(type)) ?? '{}') };
-  } catch {
-    return defaults;
-  }
-}
+import { useEffect } from 'react';
+import {
+  ASSET_EDITOR_CONTROLS_UTILITY_ID,
+  activateAssetEditorContext,
+} from '../asset-editor-context';
+import { Button } from '../design-system';
+import { showWorkspaceUtility } from '../workspace-dock-controller';
 
 export function AssetEditorShell({
+  documentId,
+  active = true,
   type,
   title,
   toolbar,
   structure,
   details,
   status,
+  controls,
   children,
 }: {
+  documentId: string;
+  active?: boolean;
   type: string;
   title: string;
   toolbar?: ReactNode;
   structure?: ReactNode;
   details?: ReactNode;
-  status?: ReactNode;
+  status?: string;
+  controls?: ReactNode;
   children: ReactNode;
 }) {
-  const [layout, setLayout] = useState(() => readAssetEditorLayout(type));
   useEffect(() => {
-    localStorage.setItem(assetEditorLayoutKey(type), JSON.stringify(layout));
-  }, [layout, type]);
+    if (!active) return;
+    return activateAssetEditorContext({
+      documentId,
+      title,
+      type,
+      ...(structure ? { structure } : {}),
+      ...(details ? { details } : {}),
+      ...(status ? { status } : {}),
+      ...(controls ? { controls } : {}),
+    });
+  }, [active, controls, details, documentId, status, structure, title, type]);
+
+  const hasToolbar = toolbar != null || controls != null;
   return (
     <section
       className="vgai-asset-editor"
       data-testid={`asset-editor:${type}`}
-      data-structure-collapsed={layout.structureCollapsed}
-      data-details-collapsed={layout.detailsCollapsed}
-      style={
-        {
-          '--asset-editor-structure-width': `${layout.structureWidth}px`,
-          '--asset-editor-details-width': `${layout.detailsWidth}px`,
-        } as React.CSSProperties
-      }
+      aria-label={`${title} Asset Editor`}
     >
-      <header className="vgai-asset-editor__toolbar">
-        <strong title={title}>{title}</strong>
-        <div className="vgai-asset-editor__commands">{toolbar}</div>
-        {structure && (
-          <Button
-            type="button"
-            aria-pressed={!layout.structureCollapsed}
-            onClick={() =>
-              setLayout((value) => ({ ...value, structureCollapsed: !value.structureCollapsed }))
-            }
-          >
-            Structure
-          </Button>
-        )}
-        {details && (
-          <Button
-            type="button"
-            aria-pressed={!layout.detailsCollapsed}
-            onClick={() =>
-              setLayout((value) => ({ ...value, detailsCollapsed: !value.detailsCollapsed }))
-            }
-          >
-            Details
-          </Button>
-        )}
-      </header>
-      {structure && (
-        <aside className="vgai-asset-editor__structure" aria-label="Asset structure">
-          {structure}
-          <label className="vgai-asset-editor__resize">
-            Structure width
-            <TextInput
-              aria-label="Asset structure pane width"
-              type="range"
-              min={180}
-              max={420}
-              value={layout.structureWidth}
-              onChange={(event) =>
-                setLayout((value) => ({ ...value, structureWidth: Number(event.target.value) }))
-              }
-            />
-          </label>
-        </aside>
+      {hasToolbar && (
+        <header className="vgai-asset-editor__toolbar">
+          <div className="vgai-asset-editor__commands">{toolbar}</div>
+          {controls != null && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="compact"
+              onClick={() => showWorkspaceUtility(ASSET_EDITOR_CONTROLS_UTILITY_ID)}
+            >
+              Controls
+            </Button>
+          )}
+        </header>
       )}
       <main className="vgai-asset-editor__viewport">{children}</main>
-      {details && (
-        <aside className="vgai-asset-editor__details" aria-label="Asset details">
-          {details}
-          <label className="vgai-asset-editor__resize">
-            Details width
-            <TextInput
-              aria-label="Asset details pane width"
-              type="range"
-              min={220}
-              max={480}
-              value={layout.detailsWidth}
-              onChange={(event) =>
-                setLayout((value) => ({ ...value, detailsWidth: Number(event.target.value) }))
-              }
-            />
-          </label>
-        </aside>
-      )}
-      <footer
-        className="vgai-asset-editor__status"
-        style={{ borderColor: border[1], color: text[2] }}
-      >
-        {status}
-      </footer>
     </section>
   );
 }

package/src/components/AssetImportDetails.tsx

@@ -15,20 +15,37 @@ export function AssetImportDetails({ assetPath }: { assetPath: string }) {
   useEffect(() => {
     let cancelled = false;
     const path = importRecipePath(assetPath);
-    getStorageBackend()
-      .read(path)
+    const backend = getStorageBackend();
+    backend
+      .exists(path)
+      .then((exists) => (exists ? backend.read(path) : null))
       .then(
         (content) => {
           if (cancelled) return;
-          const plan = assetImportPlanSchema.parse(JSON.parse(content));
-          setSaved(plan);
-          setDraft(plan);
-          setError(null);
+          if (content === null) {
+            setSaved(null);
+            setDraft(null);
+            setError(null);
+            return;
+          }
+          try {
+            const plan = assetImportPlanSchema.parse(JSON.parse(content));
+            setSaved(plan);
+            setDraft(plan);
+            setError(null);
+          } catch (cause) {
+            setSaved(null);
+            setDraft(null);
+            setError(
+              `Invalid import recipe: ${cause instanceof Error ? cause.message : String(cause)}`,
+            );
+          }
         },
         () => {
           if (!cancelled) {
             setSaved(null);
             setDraft(null);
+            setError(null);
           }
         },
       );
@@ -50,6 +67,7 @@ export function AssetImportDetails({ assetPath }: { assetPath: string }) {
     return (
       <SectionHeader label="Import">
         <div>No saved import recipe. Native project asset.</div>
+        {error && <div style={{ color: danger }}>{error}</div>}
       </SectionHeader>
     );
   const setSetting = <K extends keyof AssetImportPlan['settings']>(

package/src/components/GameHierarchy.tsx

@@ -83,6 +83,11 @@ import {
   faTriangleExclamation,
 } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useEffect, useReducer, useRef, useState, useSyncExternalStore } from 'react';
+import {
+  assetEditorContextVersion,
+  getActiveAssetEditorContext,
+  subscribeAssetEditorContext,
+} from '../asset-editor-context';
 import { getActiveAuthoring, hasAuthoringOverride } from '../authoring/active-adapter';
 import { CompositeAuthoringAdapter } from '../authoring/composite-authoring-adapter';
 import { requestWorldFocus, worldFocusScenePath } from '../authoring/edit-mode-authoring';
@@ -1342,7 +1347,7 @@ function Row({
 
 // --- Main panel ---
 
-export function GameHierarchy() {
+function SceneHierarchyContent() {
   const store = useEditorStore();
   useSyncExternalStore(store.subscribe, store.getSnapshot);
   const adapter = getActiveAuthoring(store);
@@ -1930,3 +1935,23 @@ export function GameHierarchy() {
     </Panel>
   );
 }
+
+/** The navigator slot follows the active center document. Scene/world
+ * documents use the normal authoring hierarchy; a structured Asset Editor
+ * contributes its model/bone/material outline into this same outer panel. */
+export function GameHierarchy() {
+  useSyncExternalStore(subscribeAssetEditorContext, assetEditorContextVersion);
+  const context = getActiveAssetEditorContext();
+  if (!context?.structure) return <SceneHierarchyContent />;
+  return (
+    <Panel
+      name={`${context.title} Structure`}
+      hideHeader
+      data-testid="asset-editor-structure"
+      onPointerDown={() => setActiveScope('hierarchy')}
+      style={{ flex: 1, minWidth: 0, minHeight: 0, overflow: 'auto' }}
+    >
+      {context.structure}
+    </Panel>
+  );
+}

package/src/components/Inspector.tsx

@@ -27,7 +27,16 @@ import type { AuthoringAdapter, EditorNode, PropertyDescriptor, Transform } from
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useSyncExternalStore } from 'react';
 import * as THREE from 'three';
-import { assetSelectionVersion, subscribeAssetSelection } from '../asset-selection';
+import {
+  assetEditorContextVersion,
+  getActiveAssetEditorContext,
+  subscribeAssetEditorContext,
+} from '../asset-editor-context';
+import {
+  assetSelectionVersion,
+  getSelectedAsset,
+  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';
@@ -57,6 +66,7 @@ import {
   workspaceDocumentRegistryVersion,
 } from '../workspace-document-registry';
 import { openEntityAssetDocument } from './asset-documents';
+import { AssetSelectionSection } from './asset-selection-section';
 import { groupProperties } from './inspector-property-grouping';
 import { groupLabelStyle, LABEL_COL_WIDTH } from './inspector-widgets/shared';
 
@@ -179,7 +189,7 @@ function AxisRow({
   );
 }
 
-export function Inspector() {
+function SceneInspector() {
   const store = useEditorStore();
   useSyncExternalStore(store.subscribe, store.getSnapshot);
   // Re-render when section registrations change (W3): project inspector
@@ -723,3 +733,29 @@ export function Inspector() {
     </Panel>
   );
 }
+
+/** Asset documents reuse the ONE outer Inspector rather than rendering a
+ * second details rail inside the center document. */
+export function Inspector() {
+  useSyncExternalStore(subscribeAssetEditorContext, assetEditorContextVersion);
+  useSyncExternalStore(subscribeAssetSelection, assetSelectionVersion);
+  const context = getActiveAssetEditorContext();
+  const selectedAsset = getSelectedAsset();
+  if (!context?.details && !selectedAsset) return <SceneInspector />;
+  return (
+    <Panel
+      name="Inspector"
+      hideHeader
+      data-testid="inspector-panel"
+      onPointerDown={() => setActiveScope('inspector')}
+      style={{ overflowY: 'auto' }}
+    >
+      <div
+        data-testid={context ? 'asset-editor-details' : 'asset-selection-details'}
+        style={{ pointerEvents: 'auto', padding: context ? 8 : 0 }}
+      >
+        {context?.details ?? <AssetSelectionSection />}
+      </div>
+    </Panel>
+  );
+}