@vgai/editor 0.4.0-canary.20260715.1 → 0.4.0

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

@@ -1,5 +1,5 @@
 import { faCheck, faDownload, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { useCallback, useEffect, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { Button, EditorIcon, SectionHeader, Select, themeVars } from '../../design-system';
 import {
   type AssetFileOption,
@@ -9,7 +9,10 @@ import {
   type OnlineAssetPreview,
 } from '../../editor-api';
 import type { OnlineAssetInfo } from '../../editor-store';
-import { ModelViewer } from './ModelViewer';
+
+const ModelViewer = lazy(() =>
+  import('./ModelViewer').then((module) => ({ default: module.ModelViewer })),
+);
 
 const selectStyle: React.CSSProperties = {
   background: themeVars.surface.inset,
@@ -31,14 +34,17 @@ function formatBytes(bytes: number): string {
 
 interface Props {
   online: OnlineAssetInfo;
+  /** The Library Inspector and center Asset Editor reuse one acquisition
+   * implementation while placing preview and properties in the outer shell. */
+  mode?: 'full' | 'inspector' | 'preview';
   /** 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;
+  onResolved?: (localPath: string) => void;
 }
 
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one catalog document coordinates preview resolution, metadata, format selection, and explicit project import.
-export function OnlineAssetDetail({ online, onResolved }: Props) {
+export function OnlineAssetDetail({ online, mode = 'full', onResolved }: Props) {
   const [fileOptions, setFileOptions] = useState<AssetFileOption[]>([]);
   const [selectedFile, setSelectedFile] = useState<AssetFileOption | null>(null);
   const [loadingFiles, setLoadingFiles] = useState(true);
@@ -52,6 +58,10 @@ export function OnlineAssetDetail({ online, onResolved }: Props) {
   );
 
   useEffect(() => {
+    if (mode === 'preview') {
+      setLoadingFiles(false);
+      return;
+    }
     let cancelled = false;
     setLoadingFiles(true);
     setFilesError(null);
@@ -77,18 +87,22 @@ export function OnlineAssetDetail({ online, onResolved }: Props) {
     return () => {
       cancelled = true;
     };
-  }, [online.source, online.id]);
+  }, [mode, online.source, online.id]);
 
-  const supportsAssetLabPreview =
+  const supportsInteractivePreview =
     online.source === 'local' &&
     (online.type === 'model' || online.type === 'animation' || online.type === 'source');
 
   useEffect(() => {
+    if (mode === 'inspector') {
+      setLoadingPreview(false);
+      return;
+    }
     let cancelled = false;
     setPreview(null);
     setPreviewUnavailable(false);
     setThumbnailUnavailable(false);
-    if (!supportsAssetLabPreview) {
+    if (!supportsInteractivePreview) {
       setLoadingPreview(false);
       return;
     }
@@ -108,7 +122,7 @@ export function OnlineAssetDetail({ online, onResolved }: Props) {
     return () => {
       cancelled = true;
     };
-  }, [online.id, online.source, supportsAssetLabPreview]);
+  }, [mode, online.id, online.source, supportsInteractivePreview]);
 
   const onDownload = useCallback(async () => {
     if (!selectedFile) return;
@@ -126,7 +140,7 @@ export function OnlineAssetDetail({ online, onResolved }: Props) {
       if (result.ok && result.path) {
         setDownloadStatus('done');
         // Switch this document to the local asset viewer
-        onResolved(`/${result.path}`);
+        onResolved?.(`/${result.path}`);
       } else {
         setDownloadStatus('error');
       }
@@ -137,217 +151,231 @@ export function OnlineAssetDetail({ online, onResolved }: Props) {
 
   return (
     <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
-      {/* Name */}
-      <div
-        style={{
-          fontWeight: 600,
-          fontSize: 12,
-          color: themeVars.content.primary,
-          wordBreak: 'break-all',
-        }}
-      >
-        {online.name}
-      </div>
-
-      {/* Preview image */}
-      <div
-        style={{
-          width: '100%',
-          aspectRatio: '1',
-          background: themeVars.surface.shell,
-          borderRadius: themeVars.shape.small,
-          overflow: 'hidden',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        {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.
+      {mode !== 'preview' && (
+        <div
+          style={{
+            fontWeight: 600,
+            fontSize: 12,
+            color: themeVars.content.primary,
+            wordBreak: 'break-all',
+          }}
+        >
+          {online.name}
         </div>
       )}
 
-      {/* Info section */}
-      <SectionHeader label="Info">
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-          <div>
-            <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'
-                  ? 'ambientCG'
-                  : 'Full Catalog'}
-            </div>
+      {mode !== 'inspector' && (
+        <>
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              minHeight: 240,
+              background: themeVars.surface.shell,
+              borderRadius: themeVars.shape.small,
+              overflow: 'hidden',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {loadingPreview ? (
+              <div style={{ color: themeVars.content.muted, fontSize: 11 }}>
+                <EditorIcon icon={faSpinner} spin style={{ marginRight: 5 }} />
+                Loading Asset Editor preview…
+              </div>
+            ) : preview ? (
+              <Suspense
+                fallback={<span style={{ color: themeVars.content.muted }}>Loading preview…</span>}
+              >
+                <ModelViewer
+                  assetPath={preview.path}
+                  entityId={undefined}
+                  materialPath={preview.materialPath}
+                  displayName={online.name}
+                  embedded
+                />
+              </Suspense>
+            ) : (
+              <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>
-          <div>
-            <div
-              style={{
-                fontSize: 11,
-                color: themeVars.content.dim,
-                marginBottom: 2,
-              }}
-            >
-              Type
+          {thumbnailUnavailable && (
+            <div role="status" style={{ color: themeVars.content.dim, fontSize: 10 }}>
+              The catalog preview could not be loaded; showing the typed fallback.
             </div>
-            <div style={{ fontSize: 11, color: themeVars.content.primary }}>{online.type}</div>
-          </div>
-          {online.tags.length > 0 && (
-            <div>
-              <div
-                style={{
-                  fontSize: 11,
-                  color: themeVars.content.dim,
-                  marginBottom: 2,
-                }}
-              >
-                Tags
+          )}
+          {previewUnavailable && (
+            <div style={{ color: themeVars.content.dim, fontSize: 10 }}>
+              Interactive preview is unavailable for this variant; showing its catalog thumbnail.
+            </div>
+          )}
+        </>
+      )}
+
+      {mode !== 'preview' && (
+        <>
+          <SectionHeader label="Info">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+              <div>
+                <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'
+                      ? 'ambientCG'
+                      : 'Full Catalog'}
+                </div>
+              </div>
+              <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>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
-                {online.tags.slice(0, 12).map((tag) => (
-                  <span
-                    key={tag}
+              {online.tags.length > 0 && (
+                <div>
+                  <div
                     style={{
-                      fontSize: 10,
-                      padding: '1px 5px',
-                      background: themeVars.surface.raised,
-                      borderRadius: themeVars.shape.small,
-                      color: themeVars.content.muted,
+                      fontSize: 11,
+                      color: themeVars.content.dim,
+                      marginBottom: 2,
                     }}
                   >
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-          {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>
+                    Tags
+                  </div>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
+                    {online.tags.slice(0, 12).map((tag) => (
+                      <span
+                        key={tag}
+                        style={{
+                          fontSize: 10,
+                          padding: '1px 5px',
+                          background: themeVars.surface.raised,
+                          borderRadius: themeVars.shape.small,
+                          color: themeVars.content.muted,
+                        }}
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {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>
-          )}
-        </div>
-      </SectionHeader>
+          </SectionHeader>
 
-      {/* Explicit project acquisition section */}
-      <SectionHeader label="Add to Project">
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-          {loadingFiles ? (
-            <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
-                value={selectedFile ? fileOptions.indexOf(selectedFile) : 0}
-                onChange={(e) => setSelectedFile(fileOptions[Number(e.target.value)] ?? null)}
-                style={selectStyle}
-              >
-                {fileOptions.map((f, i) => (
-                  <option key={i} value={i}>
-                    {f.label}
-                    {f.sizeBytes ? ` (${formatBytes(f.sizeBytes)})` : ''}
-                  </option>
-                ))}
-              </Select>
+          {/* Explicit project acquisition section */}
+          <SectionHeader label="Add to Project">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {loadingFiles ? (
+                <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
+                    value={selectedFile ? fileOptions.indexOf(selectedFile) : 0}
+                    onChange={(e) => setSelectedFile(fileOptions[Number(e.target.value)] ?? null)}
+                    style={selectStyle}
+                  >
+                    {fileOptions.map((f, i) => (
+                      <option key={i} value={i}>
+                        {f.label}
+                        {f.sizeBytes ? ` (${formatBytes(f.sizeBytes)})` : ''}
+                      </option>
+                    ))}
+                  </Select>
 
-              <Button
-                type="button"
-                variant={downloadStatus === 'done' ? 'success' : 'primary'}
-                size="comfortable"
-                onClick={onDownload}
-                disabled={downloadStatus === 'downloading'}
-                style={{
-                  width: '100%',
-                }}
-              >
-                <EditorIcon
-                  icon={
-                    downloadStatus === 'done'
-                      ? faCheck
+                  <Button
+                    type="button"
+                    variant={downloadStatus === 'done' ? 'success' : 'primary'}
+                    size="comfortable"
+                    onClick={onDownload}
+                    disabled={downloadStatus === 'downloading'}
+                    style={{
+                      width: '100%',
+                    }}
+                  >
+                    <EditorIcon
+                      icon={
+                        downloadStatus === 'done'
+                          ? faCheck
+                          : downloadStatus === 'downloading'
+                            ? faSpinner
+                            : faDownload
+                      }
+                      spin={downloadStatus === 'downloading'}
+                      style={{ fontSize: 10 }}
+                    />
+                    {downloadStatus === 'done'
+                      ? 'Downloaded'
                       : downloadStatus === 'downloading'
-                        ? faSpinner
-                        : faDownload
-                  }
-                  spin={downloadStatus === 'downloading'}
-                  style={{ fontSize: 10 }}
-                />
-                {downloadStatus === 'done'
-                  ? 'Downloaded'
-                  : downloadStatus === 'downloading'
-                    ? 'Downloading...'
-                    : downloadStatus === 'error'
-                      ? 'Retry'
-                      : 'Add to Project'}
-              </Button>
-            </>
-          ) : (
-            <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.'}
+                        ? 'Downloading...'
+                        : downloadStatus === 'error'
+                          ? 'Retry'
+                          : 'Add to Project'}
+                  </Button>
+                </>
+              ) : (
+                <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>
-          )}
-        </div>
-      </SectionHeader>
+          </SectionHeader>
 
-      <div style={{ fontSize: 10, color: themeVars.content.dim, padding: '4px 0' }}>
-        License: {online.license ?? 'CC0 (Public Domain)'}
-      </div>
+          <div style={{ fontSize: 10, color: themeVars.content.dim, padding: '4px 0' }}>
+            License: {online.license ?? 'CC0 (Public Domain)'}
+          </div>
+        </>
+      )}
     </div>
   );
 }