@vgai/editor 0.2.0

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

@@ -0,0 +1,180 @@
+import { gltfLoader } from '@engine/loader';
+import { useEffect, useRef, useState } from 'react';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { SectionHeader } from '../primitives/SectionHeader';
+
+const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
+
+export function ModelViewer({ assetPath }: { assetPath: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const fileName = assetPath.split('/').pop() ?? assetPath;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    setError(false);
+    setLoading(true);
+
+    const width = container.clientWidth;
+    const height = width; // square aspect
+
+    // Renderer
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setSize(width, height);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1.0;
+    renderer.setClearColor(0x1e1e1e, 1);
+    container.appendChild(renderer.domElement);
+
+    // Scene
+    const scene = new THREE.Scene();
+    scene.add(new THREE.AmbientLight(0xffffff, 0.8));
+    const key = new THREE.DirectionalLight(0xffffff, 1.5);
+    key.position.set(3, 5, 4);
+    scene.add(key);
+    const fill = new THREE.DirectionalLight(0xffeedd, 0.4);
+    fill.position.set(-3, -1, 2);
+    scene.add(fill);
+
+    // Camera
+    const camera = new THREE.PerspectiveCamera(35, 1, 0.01, 1000);
+
+    // Controls
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.1;
+
+    // Animation loop
+    let rafId = 0;
+    const animate = () => {
+      rafId = requestAnimationFrame(animate);
+      controls.update();
+      renderer.render(scene, camera);
+    };
+
+    // Load model via the shared, DRACO-wired GLTFLoader (A2 / CB2). This is a
+    // one-off preview: `.load()` parses fresh (no caching/cloning) and the result
+    // is disposed on unmount, independent of the asset-loaders GLTF cache.
+    const loader = gltfLoader;
+    loader.load(
+      assetPath,
+      (gltf) => {
+        const model = gltf.scene;
+        scene.add(model);
+
+        // Frame camera around model
+        const box = new THREE.Box3().setFromObject(model);
+        const center = box.getCenter(new THREE.Vector3());
+        const size = box.getSize(new THREE.Vector3());
+        const maxDim = Math.max(size.x, size.y, size.z) || 1;
+        const fovRad = (camera.fov * Math.PI) / 180;
+        const dist = (maxDim / (2 * Math.tan(fovRad / 2))) * 1.3;
+
+        camera.position.set(center.x + dist * 0.65, center.y + dist * 0.45, center.z + dist * 0.65);
+        camera.near = dist * 0.01;
+        camera.far = dist * 20;
+        camera.updateProjectionMatrix();
+
+        controls.target.copy(center);
+        controls.update();
+
+        setLoading(false);
+        animate();
+      },
+      undefined,
+      () => {
+        setError(true);
+        setLoading(false);
+      },
+    );
+
+    // Handle resize if container width changes
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const w = entry.contentRect.width;
+        const h = w;
+        renderer.setSize(w, h);
+        camera.aspect = 1;
+        camera.updateProjectionMatrix();
+      }
+    });
+    ro.observe(container);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      ro.disconnect();
+      controls.dispose();
+      renderer.dispose();
+      // Clean up model geometry/materials
+      scene.traverse((obj) => {
+        const mesh = obj as THREE.Mesh;
+        if (mesh.geometry) mesh.geometry.dispose();
+        if (mesh.material) {
+          const mats = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+          for (const mat of mats) {
+            for (const val of Object.values(mat)) {
+              if (val instanceof THREE.Texture) val.dispose();
+            }
+            mat.dispose();
+          }
+        }
+      });
+      if (container.contains(renderer.domElement)) {
+        container.removeChild(renderer.domElement);
+      }
+    };
+  }, [assetPath]);
+
+  return (
+    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
+        {fileName}
+      </div>
+      <div
+        ref={containerRef}
+        style={{
+          width: '100%',
+          aspectRatio: '1',
+          background: '#1e1e1e',
+          borderRadius: 4,
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+        }}
+      >
+        {loading && !error && (
+          <span style={{ color: '#8c8c8c', fontSize: 11, position: 'absolute' }}>Loading...</span>
+        )}
+        {error && (
+          <span style={{ color: '#8c8c8c', fontSize: 11, position: 'absolute' }}>
+            Failed to load model
+          </span>
+        )}
+      </div>
+      <SectionHeader label="Info">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+          <div>
+            <div style={labelStyle}>Path</div>
+            <div style={{ fontSize: 11, color: '#c5c8ce', wordBreak: 'break-all' }}>
+              {assetPath}
+            </div>
+          </div>
+          <div>
+            <div style={labelStyle}>Format</div>
+            <div style={{ fontSize: 11, color: '#c5c8ce' }}>
+              {assetPath.endsWith('.glb') ? 'GLB (Binary)' : 'glTF'}
+            </div>
+          </div>
+        </div>
+      </SectionHeader>
+    </div>
+  );
+}

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

@@ -0,0 +1,236 @@
+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 type { OnlineAssetInfo } from '../../editor-store';
+import { SectionHeader } from '../primitives/SectionHeader';
+
+const selectStyle: React.CSSProperties = {
+  background: '#1e1e1e',
+  border: '1px solid #333',
+  borderRadius: 3,
+  color: '#c5c8ce',
+  fontSize: 11,
+  padding: '3px 6px',
+  outline: 'none',
+  cursor: 'pointer',
+  width: '100%',
+};
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+interface Props {
+  tabKey: string;
+  online: OnlineAssetInfo;
+}
+
+export function OnlineAssetDetail({ tabKey, online }: Props) {
+  const store = useEditorStore();
+  const [fileOptions, setFileOptions] = useState<AssetFileOption[]>([]);
+  const [selectedFile, setSelectedFile] = useState<AssetFileOption | null>(null);
+  const [loadingFiles, setLoadingFiles] = useState(true);
+  const [downloadStatus, setDownloadStatus] = useState<'idle' | 'downloading' | 'done' | 'error'>(
+    'idle',
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoadingFiles(true);
+    getOnlineAssetFiles(online.source, online.id)
+      .then((files) => {
+        if (cancelled) return;
+        setFileOptions(files);
+        if (files.length > 0) setSelectedFile(files[0]!);
+      })
+      .catch(() => {
+        if (!cancelled) setFileOptions([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingFiles(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [online.source, online.id]);
+
+  const onDownload = useCallback(async () => {
+    if (!selectedFile) return;
+    setDownloadStatus('downloading');
+    try {
+      const params: Parameters<typeof downloadOnlineAsset>[0] = {
+        source: online.source,
+        id: online.id,
+        name: online.name,
+        url: selectedFile.url,
+        format: selectedFile.format,
+      };
+      if (selectedFile.includes) params.includes = selectedFile.includes;
+      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}`);
+      } else {
+        setDownloadStatus('error');
+      }
+    } catch {
+      setDownloadStatus('error');
+    }
+  }, [online, selectedFile, store, tabKey]);
+
+  const isIdle = downloadStatus === 'idle' || downloadStatus === 'error';
+
+  return (
+    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      {/* Name */}
+      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
+        {online.name}
+      </div>
+
+      {/* Preview image */}
+      <div
+        style={{
+          width: '100%',
+          aspectRatio: '1',
+          background: '#1a1a1a',
+          borderRadius: 4,
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <img
+          src={online.thumbnailUrl}
+          alt={online.name}
+          style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
+        />
+      </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' }}>
+              {online.source === 'polyhaven'
+                ? 'Poly Haven'
+                : online.source === 'ambientcg'
+                  ? 'ambientCG'
+                  : 'Full Catalog'}
+            </div>
+          </div>
+          <div>
+            <div style={{ fontSize: 11, color: '#8c8c8c', marginBottom: 2 }}>Type</div>
+            <div style={{ fontSize: 11, color: '#c5c8ce' }}>{online.type}</div>
+          </div>
+          {online.tags.length > 0 && (
+            <div>
+              <div style={{ fontSize: 11, color: '#8c8c8c', marginBottom: 2 }}>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: '#2a2a2a',
+                      borderRadius: 3,
+                      color: '#999',
+                    }}
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+          {online.author && (
+            <div>
+              <div style={{ fontSize: 11, color: '#8c8c8c', marginBottom: 2 }}>Author</div>
+              <div style={{ fontSize: 11, color: '#c5c8ce' }}>{online.author}</div>
+            </div>
+          )}
+        </div>
+      </SectionHeader>
+
+      {/* Download section */}
+      <SectionHeader label="Download">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {loadingFiles ? (
+            <div style={{ fontSize: 11, color: '#666' }}>
+              <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: 4 }} />
+              Loading options...
+            </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"
+                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
+                  icon={
+                    downloadStatus === 'done'
+                      ? faCheck
+                      : downloadStatus === 'downloading'
+                        ? faSpinner
+                        : faDownload
+                  }
+                  spin={downloadStatus === 'downloading'}
+                  style={{ fontSize: 10 }}
+                />
+                {downloadStatus === 'done'
+                  ? 'Downloaded'
+                  : downloadStatus === 'downloading'
+                    ? 'Downloading...'
+                    : downloadStatus === 'error'
+                      ? 'Retry'
+                      : 'Download to Project'}
+              </button>
+            </>
+          ) : (
+            <div style={{ fontSize: 11, color: '#666' }}>No download options available.</div>
+          )}
+        </div>
+      </SectionHeader>
+
+      <div style={{ fontSize: 10, color: '#555', padding: '4px 0' }}>
+        License: {online.license ?? 'CC0 (Public Domain)'}
+      </div>
+    </div>
+  );
+}