@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

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

@@ -1,16 +1,21 @@
 import { faCheck, faDownload, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useCallback, useEffect, useState } from 'react';
-import { useEditorStore } from '../../EditorContext';
-import { type AssetFileOption, downloadOnlineAsset, getOnlineAssetFiles } from '../../editor-api';
+import { Button, EditorIcon, SectionHeader, Select, themeVars } from '../../design-system';
+import {
+  type AssetFileOption,
+  downloadOnlineAsset,
+  getOnlineAssetFiles,
+  getOnlineAssetPreview,
+  type OnlineAssetPreview,
+} from '../../editor-api';
 import type { OnlineAssetInfo } from '../../editor-store';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { ModelViewer } from './ModelViewer';
 
 const selectStyle: React.CSSProperties = {
-  background: '#1e1e1e',
-  border: '1px solid #333',
-  borderRadius: 3,
-  color: '#c5c8ce',
+  background: themeVars.surface.inset,
+  border: `1px solid ${themeVars.boundary.default}`,
+  borderRadius: themeVars.shape.small,
+  color: themeVars.content.primary,
   fontSize: 11,
   padding: '3px 6px',
   outline: 'none',
@@ -25,15 +30,23 @@ function formatBytes(bytes: number): string {
 }
 
 interface Props {
-  tabKey: string;
   online: OnlineAssetInfo;
+  /** 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). */
+  onResolved: (localPath: string) => void;
 }
 
-export function OnlineAssetDetail({ tabKey, online }: Props) {
-  const store = useEditorStore();
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one catalog document coordinates preview resolution, metadata, format selection, and explicit project import.
+export function OnlineAssetDetail({ online, onResolved }: Props) {
   const [fileOptions, setFileOptions] = useState<AssetFileOption[]>([]);
   const [selectedFile, setSelectedFile] = useState<AssetFileOption | null>(null);
   const [loadingFiles, setLoadingFiles] = useState(true);
+  const [filesError, setFilesError] = useState<string | null>(null);
+  const [preview, setPreview] = useState<OnlineAssetPreview | null>(null);
+  const [loadingPreview, setLoadingPreview] = useState(false);
+  const [previewUnavailable, setPreviewUnavailable] = useState(false);
+  const [thumbnailUnavailable, setThumbnailUnavailable] = useState(false);
   const [downloadStatus, setDownloadStatus] = useState<'idle' | 'downloading' | 'done' | 'error'>(
     'idle',
   );
@@ -41,14 +54,22 @@ export function OnlineAssetDetail({ tabKey, online }: Props) {
   useEffect(() => {
     let cancelled = false;
     setLoadingFiles(true);
+    setFilesError(null);
     getOnlineAssetFiles(online.source, online.id)
       .then((files) => {
         if (cancelled) return;
         setFileOptions(files);
         if (files.length > 0) setSelectedFile(files[0]!);
       })
-      .catch(() => {
-        if (!cancelled) setFileOptions([]);
+      .catch((error: unknown) => {
+        if (!cancelled) {
+          setFileOptions([]);
+          setFilesError(
+            error instanceof Error
+              ? error.message
+              : 'Asset delivery metadata is unavailable while offline.',
+          );
+        }
       })
       .finally(() => {
         if (!cancelled) setLoadingFiles(false);
@@ -58,6 +79,37 @@ export function OnlineAssetDetail({ tabKey, online }: Props) {
     };
   }, [online.source, online.id]);
 
+  const supportsAssetLabPreview =
+    online.source === 'local' &&
+    (online.type === 'model' || online.type === 'animation' || online.type === 'source');
+
+  useEffect(() => {
+    let cancelled = false;
+    setPreview(null);
+    setPreviewUnavailable(false);
+    setThumbnailUnavailable(false);
+    if (!supportsAssetLabPreview) {
+      setLoadingPreview(false);
+      return;
+    }
+    setLoadingPreview(true);
+    getOnlineAssetPreview(online.source, online.id)
+      .then((resolved) => {
+        if (cancelled) return;
+        setPreview(resolved);
+        setPreviewUnavailable(!resolved);
+      })
+      .catch(() => {
+        if (!cancelled) setPreviewUnavailable(true);
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingPreview(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [online.id, online.source, supportsAssetLabPreview]);
+
   const onDownload = useCallback(async () => {
     if (!selectedFile) return;
     setDownloadStatus('downloading');
@@ -73,22 +125,27 @@ export function OnlineAssetDetail({ tabKey, online }: Props) {
       const result = await downloadOnlineAsset(params);
       if (result.ok && result.path) {
         setDownloadStatus('done');
-        // Switch this tab to the local asset viewer
-        store.resolveOnlineAssetTab(tabKey, `/${result.path}`);
+        // Switch this document to the local asset viewer
+        onResolved(`/${result.path}`);
       } else {
         setDownloadStatus('error');
       }
     } catch {
       setDownloadStatus('error');
     }
-  }, [online, selectedFile, store, tabKey]);
-
-  const isIdle = downloadStatus === 'idle' || downloadStatus === 'error';
+  }, [online, selectedFile, onResolved]);
 
   return (
     <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
       {/* Name */}
-      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
+      <div
+        style={{
+          fontWeight: 600,
+          fontSize: 12,
+          color: themeVars.content.primary,
+          wordBreak: 'break-all',
+        }}
+      >
         {online.name}
       </div>
 
@@ -97,27 +154,65 @@ export function OnlineAssetDetail({ tabKey, online }: Props) {
         style={{
           width: '100%',
           aspectRatio: '1',
-          background: '#1a1a1a',
-          borderRadius: 4,
+          background: themeVars.surface.shell,
+          borderRadius: themeVars.shape.small,
           overflow: 'hidden',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
         }}
       >
-        <img
-          src={online.thumbnailUrl}
-          alt={online.name}
-          style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
-        />
+        {loadingPreview ? (
+          <div style={{ color: themeVars.content.muted, fontSize: 11 }}>
+            <EditorIcon icon={faSpinner} spin style={{ marginRight: 5 }} />
+            Loading Asset Editor preview…
+          </div>
+        ) : preview ? (
+          <ModelViewer
+            assetPath={preview.path}
+            entityId={undefined}
+            materialPath={preview.materialPath}
+            displayName={online.name}
+            embedded
+          />
+        ) : (
+          <img
+            src={
+              thumbnailUnavailable
+                ? '/__editor/asset-library/local-placeholder.svg'
+                : online.thumbnailUrl
+            }
+            alt={thumbnailUnavailable ? `${online.name} preview unavailable` : online.name}
+            onError={() => setThumbnailUnavailable(true)}
+            style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
+          />
+        )}
       </div>
+      {thumbnailUnavailable && (
+        <div role="status" style={{ color: themeVars.content.dim, fontSize: 10 }}>
+          The catalog preview could not be loaded; showing the typed fallback.
+        </div>
+      )}
+      {previewUnavailable && (
+        <div style={{ color: themeVars.content.dim, fontSize: 10 }}>
+          Interactive preview is unavailable for this variant; showing its catalog thumbnail.
+        </div>
+      )}
 
       {/* Info section */}
       <SectionHeader label="Info">
         <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
           <div>
-            <div style={{ fontSize: 11, color: '#8c8c8c', marginBottom: 2 }}>Source</div>
-            <div style={{ fontSize: 11, color: '#c5c8ce' }}>
+            <div
+              style={{
+                fontSize: 11,
+                color: themeVars.content.dim,
+                marginBottom: 2,
+              }}
+            >
+              Source
+            </div>
+            <div style={{ fontSize: 11, color: themeVars.content.primary }}>
               {online.source === 'polyhaven'
                 ? 'Poly Haven'
                 : online.source === 'ambientcg'
@@ -126,12 +221,28 @@ export function OnlineAssetDetail({ tabKey, online }: Props) {
             </div>
           </div>
           <div>
-            <div style={{ fontSize: 11, color: '#8c8c8c', marginBottom: 2 }}>Type</div>
-            <div style={{ fontSize: 11, color: '#c5c8ce' }}>{online.type}</div>
+            <div
+              style={{
+                fontSize: 11,
+                color: themeVars.content.dim,
+                marginBottom: 2,
+              }}
+            >
+              Type
+            </div>
+            <div style={{ fontSize: 11, color: themeVars.content.primary }}>{online.type}</div>
           </div>
           {online.tags.length > 0 && (
             <div>
-              <div style={{ fontSize: 11, color: '#8c8c8c', marginBottom: 2 }}>Tags</div>
+              <div
+                style={{
+                  fontSize: 11,
+                  color: themeVars.content.dim,
+                  marginBottom: 2,
+                }}
+              >
+                Tags
+              </div>
               <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
                 {online.tags.slice(0, 12).map((tag) => (
                   <span
@@ -139,9 +250,9 @@ export function OnlineAssetDetail({ tabKey, online }: Props) {
                     style={{
                       fontSize: 10,
                       padding: '1px 5px',
-                      background: '#2a2a2a',
-                      borderRadius: 3,
-                      color: '#999',
+                      background: themeVars.surface.raised,
+                      borderRadius: themeVars.shape.small,
+                      color: themeVars.content.muted,
                     }}
                   >
                     {tag}
@@ -152,24 +263,36 @@ export function OnlineAssetDetail({ tabKey, online }: Props) {
           )}
           {online.author && (
             <div>
-              <div style={{ fontSize: 11, color: '#8c8c8c', marginBottom: 2 }}>Author</div>
-              <div style={{ fontSize: 11, color: '#c5c8ce' }}>{online.author}</div>
+              <div
+                style={{
+                  fontSize: 11,
+                  color: themeVars.content.dim,
+                  marginBottom: 2,
+                }}
+              >
+                Author
+              </div>
+              <div style={{ fontSize: 11, color: themeVars.content.primary }}>{online.author}</div>
             </div>
           )}
         </div>
       </SectionHeader>
 
-      {/* Download section */}
-      <SectionHeader label="Download">
+      {/* Explicit project acquisition section */}
+      <SectionHeader label="Add to Project">
         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
           {loadingFiles ? (
-            <div style={{ fontSize: 11, color: '#666' }}>
-              <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: 4 }} />
+            <div style={{ fontSize: 11, color: themeVars.content.dim }}>
+              <EditorIcon icon={faSpinner} spin style={{ marginRight: 4 }} />
               Loading options...
             </div>
+          ) : filesError ? (
+            <div role="alert" style={{ fontSize: 11, color: themeVars.content.muted }}>
+              Delivery unavailable: {filesError}
+            </div>
           ) : fileOptions.length > 0 ? (
             <>
-              <select
+              <Select
                 value={selectedFile ? fileOptions.indexOf(selectedFile) : 0}
                 onChange={(e) => setSelectedFile(fileOptions[Number(e.target.value)] ?? null)}
                 style={selectStyle}
@@ -180,29 +303,19 @@ export function OnlineAssetDetail({ tabKey, online }: Props) {
                     {f.sizeBytes ? ` (${formatBytes(f.sizeBytes)})` : ''}
                   </option>
                 ))}
-              </select>
+              </Select>
 
-              <button
+              <Button
                 type="button"
+                variant={downloadStatus === 'done' ? 'success' : 'primary'}
+                size="comfortable"
                 onClick={onDownload}
                 disabled={downloadStatus === 'downloading'}
                 style={{
-                  background: downloadStatus === 'done' ? '#22c55e' : '#579EFF',
-                  border: 'none',
-                  borderRadius: 4,
-                  color: '#fff',
-                  fontSize: 11,
-                  padding: '6px 12px',
-                  cursor: isIdle ? 'pointer' : 'default',
-                  opacity: downloadStatus === 'downloading' ? 0.7 : 1,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  gap: 5,
                   width: '100%',
                 }}
               >
-                <FontAwesomeIcon
+                <EditorIcon
                   icon={
                     downloadStatus === 'done'
                       ? faCheck
@@ -219,16 +332,20 @@ export function OnlineAssetDetail({ tabKey, online }: Props) {
                     ? 'Downloading...'
                     : downloadStatus === 'error'
                       ? 'Retry'
-                      : 'Download to Project'}
-              </button>
+                      : 'Add to Project'}
+              </Button>
             </>
           ) : (
-            <div style={{ fontSize: 11, color: '#666' }}>No download options available.</div>
+            <div role="status" style={{ fontSize: 11, color: themeVars.content.dim }}>
+              {online.source === 'local'
+                ? 'No healthy SSD or cloud delivery is available for this asset.'
+                : 'This provider has no compatible remote delivery for the selected asset.'}
+            </div>
           )}
         </div>
       </SectionHeader>
 
-      <div style={{ fontSize: 10, color: '#555', padding: '4px 0' }}>
+      <div style={{ fontSize: 10, color: themeVars.content.dim, padding: '4px 0' }}>
         License: {online.license ?? 'CC0 (Public Domain)'}
       </div>
     </div>

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

@@ -0,0 +1,121 @@
+import { resolveUrl } from '@engine/loader';
+import { useEffect, useState } from 'react';
+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';
+  return 'binary';
+}
+
+function TextSourcePreview({ assetPath }: { assetPath: string }) {
+  const [content, setContent] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    setContent(null);
+    setError(null);
+    fetch(resolveUrl(assetPath), { cache: 'no-store' })
+      .then((response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.text();
+      })
+      .then((value) => {
+        if (!cancelled) setContent(value);
+      })
+      .catch((reason) => {
+        if (!cancelled) setError(reason instanceof Error ? reason.message : String(reason));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [assetPath]);
+  return (
+    <div style={{ padding: 12, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <div style={{ color: themeVars.content.primary, fontSize: 12, fontWeight: 600 }}>
+        {assetPath.split('/').pop()}
+      </div>
+      <pre
+        style={{
+          margin: 0,
+          padding: 12,
+          maxHeight: 560,
+          overflow: 'auto',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+          fontFamily: themeVars.typography.mono,
+          fontSize: 11,
+          lineHeight: 1.5,
+          color: error ? themeVars.semantic.danger : themeVars.content.primary,
+          background: themeVars.surface.inset,
+          border: `1px solid ${themeVars.boundary.default}`,
+          borderRadius: themeVars.shape.small,
+        }}
+      >
+        {error ?? content ?? 'Loading…'}
+      </pre>
+    </div>
+  );
+}
+
+/** Viewer for downloaded catalog source/animation files without a magic fallback. */
+export function SourceAssetViewer({
+  assetPath,
+  active = true,
+}: {
+  assetPath: string;
+  active?: boolean;
+}) {
+  switch (sourceAssetRoute(assetPath)) {
+    case 'model':
+      return <ModelViewer assetPath={assetPath} entityId={undefined} active={active} />;
+    case 'image':
+      return <ImageViewer assetPath={assetPath} />;
+    case 'audio':
+      return <AudioViewer assetPath={assetPath} />;
+    case 'json':
+      return <GenericJsonViewer assetPath={assetPath} />;
+    case 'text':
+      return <TextSourcePreview assetPath={assetPath} />;
+    case 'binary':
+      return (
+        <div style={{ padding: 16, color: themeVars.content.muted, fontSize: 12 }}>
+          <div style={{ color: themeVars.content.primary, fontWeight: 600, marginBottom: 6 }}>
+            {assetPath.split('/').pop()}
+          </div>
+          This binary source is available in the project, but it has no safe in-editor renderer. Its
+          file remains selectable and referenceable without being misidentified as another format.
+        </div>
+      );
+  }
+}