@vgai/editor 0.4.0 → 0.4.1

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

@@ -21,8 +21,11 @@ import {
   type ModelCameraPreset,
   type ModelDiagnosticMode,
   type ModelInspection,
+  modelSelectionObjects,
+  rootMotionTrailPoints,
   supportedModelDiagnosticModes,
 } from '../../asset-workflow/model-inspection';
+import { registerPreviewResource } from '../../asset-workflow/preview-resource-lifetime';
 import {
   loadProjectThumbnailManifest,
   resetProjectThumbnailManifestCache,
@@ -40,6 +43,7 @@ import {
   text,
 } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
+import { revealInFinder } from '../../editor-api';
 import {
   createModelPreviewSource,
   loadModelThumbnailObject,
@@ -97,8 +101,13 @@ export function ModelViewer({
   const [lighting, setLighting] = useState<'studio' | 'outdoor' | 'flat'>('studio');
   const [inspection, setInspection] = useState<ModelInspection | null>(null);
   const [diagnosticMode, setDiagnosticMode] = useState<ModelDiagnosticMode>('lit');
+  const [selectedStructure, setSelectedStructure] = useState<
+    { kind: 'node' | 'material'; id: string } | undefined
+  >();
   const [playing, setPlaying] = useState(false);
   const [loop, setLoop] = useState(true);
+  const [showSkeleton, setShowSkeleton] = useState(false);
+  const [showRootMotionTrail, setShowRootMotionTrail] = useState(false);
   const [speed, setSpeed] = useState(1);
   const [time, setTime] = useState(0);
   const [selectedClip, setSelectedClip] = useState(0);
@@ -126,6 +135,9 @@ export function ModelViewer({
     const width = container.clientWidth;
     const height = width;
     const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    const releaseContext = registerPreviewResource('webglContext');
+    const releaseAnimationFrame = registerPreviewResource('animationFrame');
+    const releaseResizeObserver = registerPreviewResource('resizeObserver');
     renderer.setSize(width, height);
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     renderer.outputColorSpace = THREE.SRGBColorSpace;
@@ -283,6 +295,9 @@ export function ModelViewer({
       runtimeRef.current = null;
       renderer.dispose();
       renderer.forceContextLoss();
+      releaseResizeObserver();
+      releaseAnimationFrame();
+      releaseContext();
       if (ownedSnapshot) disposeAssetPreviewSnapshot(ownedSnapshot);
       if (ownedModel) disposeModel(ownedModel);
       if (container.contains(renderer.domElement)) container.removeChild(renderer.domElement);
@@ -367,6 +382,21 @@ export function ModelViewer({
     if (runtimeRef.current) applyModelDiagnosticMode(runtimeRef.current, diagnosticMode);
   }, [diagnosticMode]);
 
+  useEffect(() => {
+    const runtime = runtimeRef.current;
+    if (runtime) applyModelSelectionHighlight(runtime, selectedStructure);
+  }, [inspection, selectedStructure]);
+
+  useEffect(() => {
+    const runtime = runtimeRef.current;
+    if (runtime)
+      applyAnimationDiagnosticHelpers(runtime, {
+        selectedClip,
+        showSkeleton,
+        showRootMotionTrail,
+      });
+  }, [inspection, selectedClip, showRootMotionTrail, showSkeleton]);
+
   useEffect(() => {
     const runtime = runtimeRef.current;
     if (!runtime?.mixer || runtime.model.animations.length === 0) return;
@@ -478,7 +508,32 @@ export function ModelViewer({
               Retry
             </Button>
           )}
-          {issue?.recovery.includes('reimport') && <Button type="button">Reimport</Button>}
+          {issue?.recovery.includes('reveal-source') && assetPath && (
+            <Button
+              type="button"
+              onClick={() => {
+                void revealInFinder(assetPath).catch((cause) =>
+                  setError(cause instanceof Error ? cause.message : String(cause)),
+                );
+              }}
+            >
+              Reveal source
+            </Button>
+          )}
+          {issue?.recovery.includes('reimport') && assetPath && (
+            <Button
+              type="button"
+              onClick={() =>
+                window.dispatchEvent(
+                  new CustomEvent('editor:reimport-project-asset', {
+                    detail: { path: assetPath },
+                  }),
+                )
+              }
+            >
+              Reimport
+            </Button>
+          )}
         </div>
       )}
     </div>
@@ -490,7 +545,11 @@ export function ModelViewer({
   const deterministicCaptureSupported = !assetPath || pathFormat === 'glb' || pathFormat === 'gltf';
 
   const modes = runtimeRef.current ? supportedModelDiagnosticModes(runtimeRef.current.model) : [];
-  const selectedDuration = runtimeRef.current?.model.animations[selectedClip]?.duration ?? 0;
+  const selectedAnimation = runtimeRef.current?.model.animations[selectedClip];
+  const selectedDuration = selectedAnimation?.duration ?? 0;
+  const rootMotionAvailable = selectedAnimation
+    ? rootMotionTrailPoints(selectedAnimation).length > 1
+    : false;
   const hierarchy = inspection?.hierarchy ?? [];
 
   return (
@@ -605,9 +664,13 @@ export function ModelViewer({
                   type="button"
                   role="treeitem"
                   key={node.id}
+                  aria-selected={
+                    selectedStructure?.kind === 'node' && selectedStructure.id === node.id
+                  }
                   variant="ghost"
                   size="compact"
                   className="vgai-model-tree-item"
+                  onClick={() => setSelectedStructure({ kind: 'node', id: node.id })}
                   style={{
                     display: 'block',
                     width: '100%',
@@ -620,8 +683,19 @@ export function ModelViewer({
             </div>
           </SectionHeader>
           <SectionHeader label="Materials">
-            {inspection?.materialNames.map((name, index) => (
-              <div key={`${name}:${index}`}>{name}</div>
+            {inspection?.materialSlots.map((material) => (
+              <Button
+                type="button"
+                variant="ghost"
+                size="compact"
+                key={material.id}
+                aria-pressed={
+                  selectedStructure?.kind === 'material' && selectedStructure.id === material.id
+                }
+                onClick={() => setSelectedStructure({ kind: 'material', id: material.id })}
+              >
+                {material.name} · {material.textureSlots.join(', ') || 'no textures'}
+              </Button>
             ))}
           </SectionHeader>
         </div>
@@ -638,6 +712,28 @@ export function ModelViewer({
               </div>
             ))}
           </SectionHeader>
+          <SectionHeader label="Textures">
+            {inspection?.textureBindings.length ? (
+              <dl>
+                {inspection.textureBindings.map((binding) => (
+                  <div key={`${binding.materialId}:${binding.slot}`}>
+                    <dt>
+                      {binding.materialName} · {binding.slot}
+                    </dt>
+                    <dd>
+                      {binding.textureName} ·{' '}
+                      {binding.width && binding.height
+                        ? `${binding.width}×${binding.height}`
+                        : 'unknown size'}{' '}
+                      · format {binding.format} · {binding.colorSpace}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            ) : (
+              <div>No texture dependencies.</div>
+            )}
+          </SectionHeader>
           <SectionHeader label="Source">
             <div style={{ wordBreak: 'break-all' }}>{assetPath ?? `Entity ${entityId}`}</div>
           </SectionHeader>
@@ -702,7 +798,7 @@ export function ModelViewer({
               />
             </label>
             <span>
-              {time.toFixed(2)} / {selectedDuration.toFixed(2)}s
+              {time.toFixed(2)} / {selectedDuration.toFixed(2)}s · frame {Math.round(time * 30)}
             </span>
             <label>
               <Checkbox checked={loop} onChange={(event) => setLoop(event.target.checked)} /> Loop
@@ -716,6 +812,21 @@ export function ModelViewer({
                 <option value={2}>2×</option>
               </Select>
             </label>
+            <label>
+              <Checkbox
+                checked={showSkeleton}
+                onChange={(event) => setShowSkeleton(event.target.checked)}
+              />{' '}
+              Skeleton
+            </label>
+            <label title={rootMotionAvailable ? undefined : 'This clip has no root position track'}>
+              <Checkbox
+                checked={showRootMotionTrail}
+                disabled={!rootMotionAvailable}
+                onChange={(event) => setShowRootMotionTrail(event.target.checked)}
+              />{' '}
+              Root motion trail
+            </label>
           </div>
         ) : undefined
       }
@@ -848,6 +959,58 @@ function applyModelDiagnosticMode(runtime: ModelViewerRuntime, mode: ModelDiagno
   }
 }
 
+function removeNamedHelpers(runtime: ModelViewerRuntime, prefix: string): void {
+  for (const helper of [...runtime.helpers]) {
+    if (!helper.name.startsWith(prefix)) continue;
+    runtime.scene.remove(helper);
+    runtime.helpers.splice(runtime.helpers.indexOf(helper), 1);
+    disposeAssetPreviewSnapshot(helper);
+  }
+}
+
+function addSelectionBox(runtime: ModelViewerRuntime, object: THREE.Object3D): void {
+  const bounds = new THREE.Box3().setFromObject(object);
+  if (bounds.isEmpty()) return;
+  const helper = new THREE.BoxHelper(object, 0x67d8ff);
+  helper.name = '__asset_editor_selection_highlight';
+  runtime.scene.add(helper);
+  runtime.helpers.push(helper);
+}
+
+function applyModelSelectionHighlight(
+  runtime: ModelViewerRuntime,
+  selection: { kind: 'node' | 'material'; id: string } | undefined,
+): void {
+  removeNamedHelpers(runtime, '__asset_editor_selection_highlight');
+  if (!selection) return;
+  for (const object of modelSelectionObjects(runtime.model, selection))
+    addSelectionBox(runtime, object);
+}
+
+function applyAnimationDiagnosticHelpers(
+  runtime: ModelViewerRuntime,
+  options: { selectedClip: number; showSkeleton: boolean; showRootMotionTrail: boolean },
+): void {
+  removeNamedHelpers(runtime, '__asset_editor_animation_helper');
+  if (options.showSkeleton) {
+    const helper = new THREE.SkeletonHelper(runtime.model);
+    helper.name = '__asset_editor_animation_helper_skeleton';
+    runtime.scene.add(helper);
+    runtime.helpers.push(helper);
+  }
+  if (!options.showRootMotionTrail) return;
+  const clip = runtime.model.animations[options.selectedClip];
+  const points = clip ? rootMotionTrailPoints(clip) : [];
+  if (points.length < 2) return;
+  const line = new THREE.Line(
+    new THREE.BufferGeometry().setFromPoints(points),
+    new THREE.LineBasicMaterial({ color: 0xffb454 }),
+  );
+  line.name = '__asset_editor_animation_helper_root_motion';
+  runtime.scene.add(line);
+  runtime.helpers.push(line);
+}
+
 function disposeModel(root: THREE.Object3D): void {
   disposeAssetPreviewSnapshot(root);
   root.traverse((object) => {

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

@@ -1,14 +1,17 @@
 import { faCheck, faDownload, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
+import { beginAssetImportJob, updateAssetImportJob } from '../../asset-workflow/asset-import-jobs';
 import { Button, EditorIcon, SectionHeader, Select, themeVars } from '../../design-system';
 import {
+  AssetDeliveryError,
   type AssetFileOption,
-  downloadOnlineAsset,
+  assetDeliveryIssueMessage,
   getOnlineAssetFiles,
   getOnlineAssetPreview,
   type OnlineAssetPreview,
 } from '../../editor-api';
 import type { OnlineAssetInfo } from '../../editor-store';
+import { downloadOnlineAssetWithHistory } from '../asset-editor-persistence';
 
 const ModelViewer = lazy(() =>
   import('./ModelViewer').then((module) => ({ default: module.ModelViewer })),
@@ -37,6 +40,9 @@ interface Props {
   /** The Library Inspector and center Asset Editor reuse one acquisition
    * implementation while placing preview and properties in the outer shell. */
   mode?: 'full' | 'inspector' | 'preview';
+  /** Selection-only Inspector details show one bounded live preview. Asset
+   * document details leave preview ownership to the center document. */
+  showPreview?: boolean;
   /** W2: called with the local serving path once the download lands — the
    *  owning asset DOCUMENT (`asset-documents.tsx`) swaps to the local viewer
    *  in place (was `store.resolveOnlineAssetTab` in the right-rail era). */
@@ -44,7 +50,12 @@ interface Props {
 }
 
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one catalog document coordinates preview resolution, metadata, format selection, and explicit project import.
-export function OnlineAssetDetail({ online, mode = 'full', onResolved }: Props) {
+export function OnlineAssetDetail({
+  online,
+  mode = 'full',
+  showPreview = false,
+  onResolved,
+}: Props) {
   const [fileOptions, setFileOptions] = useState<AssetFileOption[]>([]);
   const [selectedFile, setSelectedFile] = useState<AssetFileOption | null>(null);
   const [loadingFiles, setLoadingFiles] = useState(true);
@@ -75,9 +86,11 @@ export function OnlineAssetDetail({ online, mode = 'full', onResolved }: Props)
         if (!cancelled) {
           setFileOptions([]);
           setFilesError(
-            error instanceof Error
-              ? error.message
-              : 'Asset delivery metadata is unavailable while offline.',
+            error instanceof AssetDeliveryError
+              ? assetDeliveryIssueMessage(error.code)
+              : error instanceof Error
+                ? error.message
+                : 'Asset delivery metadata is unavailable while offline.',
           );
         }
       })
@@ -94,7 +107,7 @@ export function OnlineAssetDetail({ online, mode = 'full', onResolved }: Props)
     (online.type === 'model' || online.type === 'animation' || online.type === 'source');
 
   useEffect(() => {
-    if (mode === 'inspector') {
+    if (mode === 'inspector' && !showPreview) {
       setLoadingPreview(false);
       return;
     }
@@ -122,29 +135,55 @@ export function OnlineAssetDetail({ online, mode = 'full', onResolved }: Props)
     return () => {
       cancelled = true;
     };
-  }, [mode, online.id, online.source, supportsInteractivePreview]);
+  }, [mode, online.id, online.source, showPreview, supportsInteractivePreview]);
 
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one explicit acquisition transition owns job state, atomic history, document resolution, cancellation, and recovery.
   const onDownload = useCallback(async () => {
     if (!selectedFile) return;
+    const jobId = `single:${online.source}:${online.id}`;
+    const job = beginAssetImportJob(jobId, online.name);
+    updateAssetImportJob(jobId, {
+      stage: 'fetch',
+      loaded: 0,
+      total: selectedFile.sizeBytes ?? 0,
+      status: 'running',
+    });
     setDownloadStatus('downloading');
     try {
-      const params: Parameters<typeof downloadOnlineAsset>[0] = {
+      const params: Parameters<typeof downloadOnlineAssetWithHistory>[0] = {
         source: online.source,
         id: online.id,
         name: online.name,
         url: selectedFile.url,
         format: selectedFile.format,
+        jobId,
+        signal: job.controller.signal,
       };
       if (selectedFile.includes) params.includes = selectedFile.includes;
-      const result = await downloadOnlineAsset(params);
+      const result = await downloadOnlineAssetWithHistory(params);
       if (result.ok && result.path) {
+        updateAssetImportJob(jobId, {
+          stage: 'commit',
+          loaded: selectedFile.sizeBytes ?? 1,
+          total: selectedFile.sizeBytes ?? 1,
+          status: result.alreadyExists ? 'skipped' : 'imported',
+          message: result.path,
+        });
         setDownloadStatus('done');
         // Switch this document to the local asset viewer
         onResolved?.(`/${result.path}`);
       } else {
+        updateAssetImportJob(jobId, {
+          status: 'failed',
+          message: result.error ?? 'The import was rejected.',
+        });
         setDownloadStatus('error');
       }
-    } catch {
+    } catch (error) {
+      updateAssetImportJob(jobId, {
+        status: job.controller.signal.aborted ? 'cancelled' : 'failed',
+        message: error instanceof Error ? error.message : String(error),
+      });
       setDownloadStatus('error');
     }
   }, [online, selectedFile, onResolved]);
@@ -164,13 +203,13 @@ export function OnlineAssetDetail({ online, mode = 'full', onResolved }: Props)
         </div>
       )}
 
-      {mode !== 'inspector' && (
+      {(mode !== 'inspector' || showPreview) && (
         <>
           <div
             style={{
               width: '100%',
               height: '100%',
-              minHeight: 240,
+              minHeight: mode === 'inspector' ? 160 : 240,
               background: themeVars.surface.shell,
               borderRadius: themeVars.shape.small,
               overflow: 'hidden',
@@ -319,6 +358,7 @@ export function OnlineAssetDetail({ online, mode = 'full', onResolved }: Props)
               ) : fileOptions.length > 0 ? (
                 <>
                   <Select
+                    aria-label="Asset delivery"
                     value={selectedFile ? fileOptions.indexOf(selectedFile) : 0}
                     onChange={(e) => setSelectedFile(fileOptions[Number(e.target.value)] ?? null)}
                     style={selectStyle}

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

@@ -1,40 +1,21 @@
 import { resolveUrl } from '@engine/loader';
 import { useEffect, useState } from 'react';
+import { assetCapabilities } from '../../asset-workflow/asset-capabilities';
 import { themeVars } from '../../design-system';
 import { AudioViewer } from './AudioViewer';
 import { GenericJsonViewer } from './GenericJsonViewer';
 import { ImageViewer } from './ImageViewer';
 import { ModelViewer } from './ModelViewer';
 
-const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'webp', 'svg', 'gif']);
-const AUDIO_EXTENSIONS = new Set(['mp3', 'ogg', 'wav', 'flac']);
-const MODEL_EXTENSIONS = new Set(['glb', 'gltf', 'fbx', 'obj', 'dae', 'stl', 'ply', 'bvh', '3ds']);
-const TEXT_EXTENSIONS = new Set([
-  'txt',
-  'md',
-  'ts',
-  'tsx',
-  'js',
-  'jsx',
-  'css',
-  'html',
-  'mtl',
-  'csv',
-  'xml',
-  'yaml',
-  'yml',
-]);
-
 export type SourceAssetRoute = 'model' | 'image' | 'audio' | 'json' | 'text' | 'binary';
 
 export function sourceAssetRoute(assetPath: string): SourceAssetRoute {
-  const file = assetPath.split(/[?#]/, 1)[0]!.toLowerCase();
-  const extension = file.slice(file.lastIndexOf('.') + 1);
-  if (MODEL_EXTENSIONS.has(extension)) return 'model';
-  if (IMAGE_EXTENSIONS.has(extension)) return 'image';
-  if (AUDIO_EXTENSIONS.has(extension)) return 'audio';
-  if (extension === 'json') return 'json';
-  if (TEXT_EXTENSIONS.has(extension)) return 'text';
+  const capability = assetCapabilities(assetPath);
+  if (capability.editor === 'model') return 'model';
+  if (capability.editor === 'image') return 'image';
+  if (capability.editor === 'audio') return 'audio';
+  if (capability.editor === 'data') return 'json';
+  if (capability.editor === 'source' && capability.previewable) return 'text';
   return 'binary';
 }
 

package/src/components/asset-workflow.css

@@ -53,6 +53,32 @@
   font-size: 10px;
 }
 
+.vgai-asset-import-jobs {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  color: var(--vgai-text-2);
+  font-size: 10px;
+}
+
+.vgai-asset-import-jobs > span {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  border: 1px solid var(--vgai-border-1);
+  border-radius: var(--vgai-radius-sm, 3px);
+  background: var(--vgai-bg-1);
+}
+
+.vgai-asset-import-jobs [data-status="failed"],
+.vgai-asset-import-error {
+  color: var(--vgai-danger, var(--vgai-text-1));
+}
+
 .vgai-asset-library-navigator__results {
   flex: 1;
   min-height: 0;
@@ -312,8 +338,9 @@
 .vgai-asset-badge {
   padding: 1px 5px;
   border-radius: 999px;
-  background: var(--vgai-bg-3);
+  background: var(--asset-badge-background);
   color: var(--vgai-text-2);
+  font-size: var(--asset-font-floor);
   white-space: nowrap;
 }
 
@@ -328,7 +355,7 @@
 
 .vgai-asset-facet-button {
   width: 100%;
-  min-height: 28px;
+  min-height: var(--asset-row-height);
   padding: 4px 7px;
   border: 0;
   border-radius: 4px;
@@ -340,7 +367,7 @@
 
 .vgai-asset-facet-button:hover,
 .vgai-asset-facet-button[aria-pressed="true"] {
-  background: var(--vgai-accent-muted);
+  background: var(--asset-selection);
   color: var(--vgai-text-1);
 }
 

package/src/components/primitives/editor-icons.ts

@@ -92,6 +92,7 @@ export const editorIcons = {
     unlocked: faLockOpen,
   },
   tool: {
+    extension: faPuzzlePiece,
     move: faUpDownLeftRight,
     rotate: faRotate,
     snap: faMagnet,