@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/OnlineAssetBrowser.tsx

@@ -1,6 +1,12 @@
-import { faCheck, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { faCheck, faCloud, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  type AssetLibrarySort,
+  assetLibraryStateKey,
+  onlineAssetKey,
+  queryAssetLibrary,
+} from '../asset-workflow/asset-library-query';
+import { Button, Checkbox, EditorIcon, Select, TextInput, text } from '../design-system';
 import { useEditorStore } from '../EditorContext';
 import {
   getAssetLibraryCategories,
@@ -10,12 +16,14 @@ import {
   onAssetDownloaded,
   searchOnlineAssets,
 } from '../editor-api';
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
+import { getCurrentProject } from '../project-manager';
+import { openOnlineAssetDocument } from './asset-documents';
+import { OnlineAssetDetail } from './asset-viewers/OnlineAssetDetail';
+import './asset-workflow.css';
 
 type Source = 'local' | 'polyhaven' | 'ambientcg';
+type Density = 'compact' | 'standard' | 'large';
+type Sort = AssetLibrarySort;
 
 interface SourceOption {
   value: Source;
@@ -28,10 +36,10 @@ const SOURCES: SourceOption[] = [
     value: 'local',
     label: 'Full Catalog',
     types: [
-      { value: 'all', label: 'All' },
+      { value: 'all', label: 'All assets' },
       { value: 'models', label: 'Models' },
       { value: 'animations', label: 'Animations' },
-      { value: 'sources', label: 'Source Files' },
+      { value: 'sources', label: 'Source files' },
     ],
   },
   {
@@ -53,396 +61,839 @@ const SOURCES: SourceOption[] = [
   },
 ];
 
-const PAGE_SIZE = 48;
-
-// ---------------------------------------------------------------------------
-// Styles
-// ---------------------------------------------------------------------------
+const PAGE_SIZE = 96;
+interface PersistedLibraryState {
+  source: Source;
+  assetType: string;
+  query: string;
+  density: Density;
+  sort: Sort;
+  favorites: string[];
+  savedSearches: string[];
+  recent: string[];
+  sourceWidth: number;
+  detailsWidth: number;
+  sourceCollapsed: boolean;
+  detailsCollapsed: boolean;
+}
 
-const selectStyle: React.CSSProperties = {
-  background: '#1e1e1e',
-  border: '1px solid #333',
-  borderRadius: 3,
-  color: '#c5c8ce',
-  fontSize: 11,
-  padding: '3px 6px',
-  outline: 'none',
-  cursor: 'pointer',
+const DEFAULT_STATE: PersistedLibraryState = {
+  source: 'local',
+  assetType: 'all',
+  query: '',
+  density: 'standard',
+  sort: 'relevance',
+  favorites: [],
+  savedSearches: [],
+  recent: [],
+  sourceWidth: 210,
+  detailsWidth: 360,
+  sourceCollapsed: false,
+  detailsCollapsed: false,
 };
 
-const inputStyle: React.CSSProperties = {
-  background: '#1e1e1e',
-  border: '1px solid #333',
-  borderRadius: 3,
-  color: '#c5c8ce',
-  fontSize: 11,
-  padding: '3px 6px',
-  outline: 'none',
-  flex: 1,
-  minWidth: 80,
-};
+function readState(): PersistedLibraryState {
+  try {
+    const projectId = getCurrentProject()?.rootPath ?? '__unscoped__';
+    const parsed = JSON.parse(
+      localStorage.getItem(assetLibraryStateKey(projectId)) ?? '{}',
+    ) as Partial<PersistedLibraryState>;
+    return { ...DEFAULT_STATE, ...parsed };
+  } catch {
+    return DEFAULT_STATE;
+  }
+}
+
+function toOnlineInfo(asset: OnlineAsset) {
+  return {
+    source: asset.source,
+    id: asset.id,
+    name: asset.name,
+    thumbnailUrl: asset.thumbnailUrl,
+    type: asset.type,
+    tags: asset.tags,
+    ...(asset.license ? { license: asset.license } : {}),
+    ...(asset.author ? { author: asset.author } : {}),
+    ...(asset.sourceUrl ? { sourceUrl: asset.sourceUrl } : {}),
+  };
+}
+
+function SourcePane(props: {
+  source: Source;
+  assetType: string;
+  category: string;
+  categoryQuery: string;
+  categories: readonly string[];
+  savedSearches: readonly string[];
+  favoritesOnly: boolean;
+  animatedOnly: boolean;
+  runtimeReadyOnly: boolean;
+  downloaded: 'all' | 'downloaded' | 'not-downloaded';
+  license: string;
+  delivery: string;
+  health: string;
+  licenseCounts: ReadonlyMap<string, number>;
+  deliveryCounts: ReadonlyMap<string, number>;
+  healthCounts: ReadonlyMap<string, number>;
+  onSource(source: Source): void;
+  onType(type: string): void;
+  onCategory(category: string): void;
+  onCategoryQuery(query: string): void;
+  onSavedSearch(query: string): void;
+  onFavoritesOnly(value: boolean): void;
+  onAnimatedOnly(value: boolean): void;
+  onRuntimeReadyOnly(value: boolean): void;
+  onDownloaded(value: 'all' | 'downloaded' | 'not-downloaded'): void;
+  onLicense(value: string): void;
+  onDelivery(value: string): void;
+  onHealth(value: string): void;
+}) {
+  const sourceConfig = SOURCES.find((entry) => entry.value === props.source)!;
+  const visibleCategories = props.categories
+    .filter((value) => value.toLowerCase().includes(props.categoryQuery.toLowerCase()))
+    .slice(0, 80);
+  return (
+    <aside className="vgai-asset-library__sources" aria-label="Library sources and filters">
+      <div className="vgai-asset-facet-title">Sources</div>
+      {SOURCES.map((entry) => (
+        <Button
+          className="vgai-asset-facet-button"
+          type="button"
+          key={entry.value}
+          aria-pressed={props.source === entry.value}
+          onClick={() => props.onSource(entry.value)}
+        >
+          {entry.label}
+        </Button>
+      ))}
+
+      <div className="vgai-asset-facet-title">Type</div>
+      {sourceConfig.types.map((entry) => (
+        <Button
+          className="vgai-asset-facet-button"
+          type="button"
+          key={entry.value}
+          aria-pressed={props.assetType === entry.value}
+          onClick={() => props.onType(entry.value)}
+        >
+          {entry.label}
+        </Button>
+      ))}
+
+      <div className="vgai-asset-facet-title">Saved views</div>
+      <Button
+        className="vgai-asset-facet-button"
+        type="button"
+        aria-pressed={props.favoritesOnly}
+        onClick={() => props.onFavoritesOnly(!props.favoritesOnly)}
+      >
+        Favorites
+      </Button>
+      {props.savedSearches.map((query) => (
+        <Button
+          className="vgai-asset-facet-button"
+          type="button"
+          key={query}
+          onClick={() => props.onSavedSearch(query)}
+        >
+          {query}
+        </Button>
+      ))}
+
+      <div className="vgai-asset-facet-title">Readiness</div>
+      <label className="vgai-asset-facet-check">
+        <Checkbox
+          checked={props.runtimeReadyOnly}
+          onChange={(event) => props.onRuntimeReadyOnly(event.target.checked)}
+        />
+        Runtime-ready
+      </label>
+      <label className="vgai-asset-facet-check">
+        <Checkbox
+          checked={props.animatedOnly}
+          onChange={(event) => props.onAnimatedOnly(event.target.checked)}
+        />
+        Animated
+      </label>
+      <label className="vgai-asset-facet-check">
+        Project status
+        <Select
+          className="vgai-select"
+          value={props.downloaded}
+          onChange={(event) =>
+            props.onDownloaded(event.target.value as 'all' | 'downloaded' | 'not-downloaded')
+          }
+        >
+          <option value="all">All</option>
+          <option value="downloaded">In project</option>
+          <option value="not-downloaded">Not in project</option>
+        </Select>
+      </label>
+      <label className="vgai-asset-facet-check">
+        License
+        <Select
+          className="vgai-select"
+          value={props.license}
+          onChange={(event) => props.onLicense(event.target.value)}
+        >
+          <option value="">All licenses</option>
+          {[...props.licenseCounts].map(([value, count]) => (
+            <option key={value} value={value}>
+              {value} ({count})
+            </option>
+          ))}
+        </Select>
+      </label>
+      <label className="vgai-asset-facet-check">
+        Delivery
+        <Select
+          className="vgai-select"
+          value={props.delivery}
+          onChange={(event) => props.onDelivery(event.target.value)}
+        >
+          <option value="">All deliveries</option>
+          {[...props.deliveryCounts].map(([value, count]) => (
+            <option key={value} value={value}>
+              {value} ({count})
+            </option>
+          ))}
+        </Select>
+      </label>
+      <label className="vgai-asset-facet-check">
+        Health
+        <Select
+          className="vgai-select"
+          value={props.health}
+          onChange={(event) => props.onHealth(event.target.value)}
+        >
+          <option value="">All health states</option>
+          {[...props.healthCounts].map(([value, count]) => (
+            <option key={value} value={value}>
+              {value} ({count})
+            </option>
+          ))}
+        </Select>
+      </label>
+
+      {props.categories.length > 0 && (
+        <>
+          <div className="vgai-asset-facet-title">Pack / category</div>
+          <TextInput
+            className="vgai-input"
+            aria-label="Filter categories"
+            placeholder="Filter categories"
+            value={props.categoryQuery}
+            onChange={(event) => props.onCategoryQuery(event.target.value)}
+            style={{ width: '100%', boxSizing: 'border-box', marginBottom: 4 }}
+          />
+          <Button
+            className="vgai-asset-facet-button"
+            type="button"
+            aria-pressed={!props.category}
+            onClick={() => props.onCategory('')}
+          >
+            All categories
+          </Button>
+          {visibleCategories.map((value) => (
+            <Button
+              className="vgai-asset-facet-button"
+              type="button"
+              key={value}
+              aria-pressed={props.category === value}
+              onClick={() => props.onCategory(value)}
+            >
+              {value}
+            </Button>
+          ))}
+        </>
+      )}
+    </aside>
+  );
+}
+function AssetCardThumbnail({ asset }: { asset: OnlineAsset }) {
+  const [failed, setFailed] = useState(false);
+  return (
+    <span className="vgai-asset-card__preview">
+      <img
+        src={failed ? '/__editor/asset-library/local-placeholder.svg' : asset.thumbnailUrl}
+        alt={failed ? `${asset.name} preview unavailable` : ''}
+        loading="lazy"
+        onError={() => setFailed(true)}
+      />
+      {failed && <span className="vgai-asset-card__fallback">Preview unavailable</span>}
+    </span>
+  );
+}
+
+function VirtualAssetGrid(props: {
+  assets: readonly OnlineAsset[];
+  selectedId: string | null;
+  density: Density;
+  loading: boolean;
+  hasMore: boolean;
+  isFavorite(asset: OnlineAsset): boolean;
+  onSelect(asset: OnlineAsset): void;
+  onOpen(asset: OnlineAsset): void;
+  onLoadMore(): void;
+}) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const typeahead = useRef({ value: '', timer: 0 });
+  const [metrics, setMetrics] = useState({ width: 800, height: 600, scrollTop: 0 });
+  const cardWidth = props.density === 'compact' ? 136 : props.density === 'large' ? 208 : 168;
+  const rowHeight = props.density === 'compact' ? 178 : props.density === 'large' ? 254 : 214;
+  const gap = 10;
+  const columns = Math.max(1, Math.floor((metrics.width - gap) / (cardWidth + gap)));
+  const rows = Math.ceil(props.assets.length / columns);
+  const firstRow = Math.max(0, Math.floor(metrics.scrollTop / rowHeight) - 2);
+  const lastRow = Math.min(rows, Math.ceil((metrics.scrollTop + metrics.height) / rowHeight) + 3);
+  const firstIndex = firstRow * columns;
+  const lastIndex = Math.min(props.assets.length, lastRow * columns);
+  const visible = props.assets.slice(firstIndex, lastIndex);
 
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
+  useEffect(() => {
+    const element = viewportRef.current;
+    if (!element || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      setMetrics((current) => ({
+        ...current,
+        width: entry.contentRect.width,
+        height: entry.contentRect.height,
+      }));
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => () => window.clearTimeout(typeahead.current.timer), []);
+
+  const { hasMore, loading, onLoadMore } = props;
+  useEffect(() => {
+    if (hasMore && !loading && rows > 0 && lastRow >= rows - 2) onLoadMore();
+  }, [hasMore, lastRow, loading, onLoadMore, rows]);
+
+  const selectedIndex = props.assets.findIndex((asset) => asset.id === props.selectedId);
+  const moveSelection = (nextIndex: number) => {
+    const asset = props.assets[Math.max(0, Math.min(props.assets.length - 1, nextIndex))];
+    if (!asset) return;
+    props.onSelect(asset);
+    const row = Math.floor(Math.max(0, nextIndex) / columns);
+    if (viewportRef.current) viewportRef.current.scrollTop = row * rowHeight;
+  };
+  const onGridKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const pageSize = Math.max(columns, Math.floor(metrics.height / rowHeight) * columns);
+    switch (event.key) {
+      case 'Enter':
+        if (selectedIndex >= 0) props.onOpen(props.assets[selectedIndex]!);
+        else return;
+        break;
+      case 'ArrowRight':
+        moveSelection(selectedIndex + 1);
+        break;
+      case 'ArrowLeft':
+        moveSelection(selectedIndex - 1);
+        break;
+      case 'ArrowDown':
+        moveSelection(selectedIndex + columns);
+        break;
+      case 'ArrowUp':
+        moveSelection(selectedIndex - columns);
+        break;
+      case 'Home':
+        moveSelection(0);
+        break;
+      case 'End':
+        moveSelection(props.assets.length - 1);
+        break;
+      case 'PageDown':
+        moveSelection(selectedIndex + pageSize);
+        break;
+      case 'PageUp':
+        moveSelection(selectedIndex - pageSize);
+        break;
+      default: {
+        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+        window.clearTimeout(typeahead.current.timer);
+        typeahead.current.value += event.key.toLowerCase();
+        typeahead.current.timer = window.setTimeout(() => {
+          typeahead.current.value = '';
+        }, 700);
+        const match = props.assets.findIndex((asset) =>
+          asset.name.toLowerCase().startsWith(typeahead.current.value),
+        );
+        if (match < 0) return;
+        moveSelection(match);
+      }
+    }
+    event.preventDefault();
+  };
+
+  return (
+    <div
+      ref={viewportRef}
+      className="vgai-asset-library__grid"
+      role="listbox"
+      aria-label="Asset results"
+      aria-busy={props.loading}
+      tabIndex={0}
+      onScroll={(event) =>
+        setMetrics((current) => ({ ...current, scrollTop: event.currentTarget.scrollTop }))
+      }
+      onKeyDown={onGridKeyDown}
+    >
+      <div
+        style={{ position: 'relative', height: Math.max(metrics.height, rows * rowHeight + gap) }}
+      >
+        {visible.map((asset, localIndex) => {
+          const index = firstIndex + localIndex;
+          const column = index % columns;
+          const row = Math.floor(index / columns);
+          const downloaded = getDownloadedAssetPath(asset.source, asset.id) != null;
+          return (
+            <Button
+              key={onlineAssetKey(asset)}
+              type="button"
+              role="option"
+              aria-selected={props.selectedId === asset.id}
+              aria-label={`${asset.name}, ${asset.type}, ${asset.source}`}
+              className="vgai-asset-card"
+              style={{ left: gap + column * (cardWidth + gap), top: gap + row * rowHeight }}
+              onClick={() => props.onSelect(asset)}
+              onDoubleClick={() => props.onOpen(asset)}
+            >
+              <AssetCardThumbnail asset={asset} />
+              <span className="vgai-asset-card__name" data-testid="online-asset-name">
+                {asset.name}
+              </span>
+              <span className="vgai-asset-card__meta">
+                <span>{asset.type}</span>
+                <span>·</span>
+                <span>{asset.source === 'local' ? 'Catalog' : asset.source}</span>
+              </span>
+              <span className="vgai-asset-card__badges">
+                {downloaded && <span className="vgai-asset-badge">In project</span>}
+                {!downloaded && asset.cloudHosted && (
+                  <span className="vgai-asset-badge">
+                    <EditorIcon icon={faCloud} /> Cloud
+                  </span>
+                )}
+                {(asset.variantCount ?? 0) > 1 && (
+                  <span className="vgai-asset-badge">{asset.variantCount} variants</span>
+                )}
+                {props.isFavorite(asset) && <span className="vgai-asset-badge">Favorite</span>}
+              </span>
+            </Button>
+          );
+        })}
+        {props.loading && (
+          <div role="status" style={{ position: 'absolute', left: 16, top: rows * rowHeight + 12 }}>
+            <EditorIcon icon={faSpinner} spin /> Loading assets…
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
 
 export function OnlineAssetBrowser() {
   const store = useEditorStore();
-  const [source, setSource] = useState<Source>('local');
-  const [assetType, setAssetType] = useState('all');
+  const initial = useMemo(readState, []);
+  const [source, setSource] = useState<Source>(initial.source);
+  const [assetType, setAssetType] = useState(initial.assetType);
   const [category, setCategory] = useState('');
-  const [searchQuery, setSearchQuery] = useState('');
+  const [categoryQuery, setCategoryQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState(initial.query);
+  const [density, setDensity] = useState<Density>(initial.density);
+  const [sort, setSort] = useState<Sort>(initial.sort);
+  const [favorites, setFavorites] = useState(new Set(initial.favorites));
+  const [savedSearches, setSavedSearches] = useState(initial.savedSearches);
+  const [recent, setRecent] = useState(initial.recent);
+  const [sourceWidth, setSourceWidth] = useState(initial.sourceWidth);
+  const [detailsWidth, setDetailsWidth] = useState(initial.detailsWidth);
+  const [sourceCollapsed, setSourceCollapsed] = useState(initial.sourceCollapsed);
+  const [detailsCollapsed, setDetailsCollapsed] = useState(initial.detailsCollapsed);
+  const [favoritesOnly, setFavoritesOnly] = useState(false);
+  const [runtimeReadyOnly, setRuntimeReadyOnly] = useState(false);
+  const [animatedOnly, setAnimatedOnly] = useState(false);
+  const [downloaded, setDownloaded] = useState<'all' | 'downloaded' | 'not-downloaded'>('all');
+  const [license, setLicense] = useState('');
+  const [delivery, setDelivery] = useState('');
+  const [health, setHealth] = useState('');
   const [assets, setAssets] = useState<OnlineAsset[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const [offset, setOffset] = useState(0);
-
-  // Track which asset is selected (highlighted in grid)
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [categories, setCategories] = useState<string[]>([]);
+  const requestId = useRef(0);
+
+  useEffect(() => {
+    const projectId = getCurrentProject()?.rootPath ?? '__unscoped__';
+    localStorage.setItem(
+      assetLibraryStateKey(projectId),
+      JSON.stringify({
+        source,
+        assetType,
+        query: searchQuery,
+        density,
+        sort,
+        favorites: [...favorites],
+        savedSearches,
+        recent,
+        sourceWidth,
+        detailsWidth,
+        sourceCollapsed,
+        detailsCollapsed,
+      } satisfies PersistedLibraryState),
+    );
+  }, [
+    assetType,
+    density,
+    detailsCollapsed,
+    detailsWidth,
+    favorites,
+    recent,
+    savedSearches,
+    searchQuery,
+    sort,
+    source,
+    sourceCollapsed,
+    sourceWidth,
+  ]);
 
-  // Seed cache from server on mount, re-render when assets get downloaded
-  const [, setDownloadTick] = useState(0);
   useEffect(() => {
     loadDownloadedAssets();
-    return onAssetDownloaded(() => setDownloadTick((t) => t + 1));
+    return onAssetDownloaded(() => setAssets((current) => [...current]));
   }, []);
 
-  // Categories (Poly Haven)
-  const [categories, setCategories] = useState<string[]>([]);
-
-  // Debounce timer
-  const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Current source config
-  const sourceConfig = SOURCES.find((s) => s.value === source)!;
-
-  // Load categories when source/type changes (Poly Haven only)
   useEffect(() => {
     if (source === 'polyhaven' || source === 'local') {
       getAssetLibraryCategories(assetType, source)
         .then(setCategories)
         .catch(() => setCategories([]));
-    } else {
-      setCategories([]);
-    }
+    } else setCategories([]);
   }, [source, assetType]);
 
-  // Search function
   const doSearch = useCallback(
-    async (q: string, off: number, append: boolean) => {
+    async (nextOffset: number, append: boolean) => {
+      const currentRequest = ++requestId.current;
       setLoading(true);
+      setError(null);
+      const params: Parameters<typeof searchOnlineAssets>[0] = {
+        source,
+        type: assetType,
+        offset: nextOffset,
+        limit: PAGE_SIZE,
+        ...(searchQuery ? { q: searchQuery } : {}),
+        ...(category ? { category } : {}),
+      };
       try {
-        const params: Parameters<typeof searchOnlineAssets>[0] = {
-          source,
-          type: assetType,
-          offset: off,
-          limit: PAGE_SIZE,
-        };
-        if (q) params.q = q;
-        if (category) params.category = category;
         const result = await searchOnlineAssets(params);
-        setAssets((prev) => (append ? [...prev, ...result.assets] : result.assets));
+        if (currentRequest !== requestId.current) return;
+        setAssets((current) => (append ? [...current, ...result.assets] : result.assets));
         setTotal(result.total);
       } catch {
         if (!append) setAssets([]);
+        setError(
+          'The Library could not load this page. Check the SSD or network delivery and retry.',
+        );
       } finally {
-        setLoading(false);
+        if (currentRequest === requestId.current) setLoading(false);
       }
     },
-    [source, assetType, category],
+    [assetType, category, searchQuery, source],
   );
 
-  // Trigger search on filter changes
   useEffect(() => {
-    setOffset(0);
-    setSelectedId(null);
-    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
-    searchTimerRef.current = setTimeout(() => {
-      doSearch(searchQuery, 0, false);
-    }, 300);
-    return () => {
-      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
-    };
-  }, [source, assetType, category, searchQuery, doSearch]);
+    const timer = window.setTimeout(() => {
+      setOffset(0);
+      setSelectedId(null);
+      void doSearch(0, false);
+    }, 250);
+    return () => window.clearTimeout(timer);
+  }, [doSearch]);
 
-  // Load more
   const loadMore = useCallback(() => {
-    const newOffset = offset + PAGE_SIZE;
-    setOffset(newOffset);
-    doSearch(searchQuery, newOffset, true);
-  }, [offset, searchQuery, doSearch]);
-
-  // Single-click selects, double-click opens detail in right panel
-  const onClickAsset = useCallback((asset: OnlineAsset) => {
-    setSelectedId(asset.id);
-  }, []);
-
-  const onDoubleClickAsset = useCallback(
-    (asset: OnlineAsset) => {
-      store.openOnlineAssetTab({
-        source: asset.source,
-        id: asset.id,
-        name: asset.name,
-        thumbnailUrl: asset.thumbnailUrl,
-        type: asset.type,
-        tags: asset.tags,
-        ...(asset.license ? { license: asset.license } : {}),
-        ...(asset.author ? { author: asset.author } : {}),
-        ...(asset.sourceUrl ? { sourceUrl: asset.sourceUrl } : {}),
-      });
-    },
-    [store],
+    if (loading || assets.length >= total) return;
+    const next = offset + PAGE_SIZE;
+    setOffset(next);
+    void doSearch(next, true);
+  }, [assets.length, doSearch, loading, offset, total]);
+
+  const downloadedAsset = useCallback(
+    (asset: OnlineAsset) => getDownloadedAssetPath(asset.source, asset.id) != null,
+    [],
   );
-
-  // Drag start — for model assets, set online payload (viewport resolves file options on drop)
-  const onDragStart = useCallback((e: React.DragEvent, asset: OnlineAsset) => {
-    if (asset.type !== 'model') return;
-    const payload = {
-      path: '',
-      kind: 'model',
-      name: asset.name,
-      online: {
-        source: asset.source,
-        id: asset.id,
-        name: asset.name,
-      },
+  const filteredAssets = useMemo(
+    () =>
+      queryAssetLibrary(
+        assets,
+        {
+          licenses: new Set(license ? [license] : []),
+          deliveryKinds: new Set(delivery ? [delivery] : []),
+          health: new Set(health ? [health] : []),
+          animatedOnly,
+          runtimeReadyOnly,
+          downloaded,
+          favoritesOnly,
+        },
+        sort,
+        { favorites, recent, isDownloaded: downloadedAsset },
+      ),
+    [
+      animatedOnly,
+      assets,
+      delivery,
+      downloaded,
+      downloadedAsset,
+      favorites,
+      favoritesOnly,
+      health,
+      license,
+      recent,
+      runtimeReadyOnly,
+      sort,
+    ],
+  );
+  const facetCounts = useMemo(() => {
+    const count = (values: readonly string[]) => {
+      const result = new Map<string, number>();
+      for (const value of values) result.set(value, (result.get(value) ?? 0) + 1);
+      return result;
     };
-    e.dataTransfer.setData('text/plain', asset.name);
-    e.dataTransfer.setData('application/x-editor-asset', JSON.stringify(payload));
-  }, []);
-
-  // Source change resets type
-  const onSourceChange = useCallback((newSource: Source) => {
-    setSource(newSource);
-    const newConfig = SOURCES.find((s) => s.value === newSource)!;
-    setAssetType(newConfig.types[0]!.value);
+    return {
+      licenses: count(assets.map((asset) => asset.license ?? 'Unknown')),
+      deliveries: count(assets.flatMap((asset) => asset.deliveryKinds ?? [])),
+      health: count(assets.map((asset) => asset.capabilities?.health ?? 'unsupported')),
+    };
+  }, [assets]);
+  const selected = assets.find((asset) => asset.id === selectedId) ?? null;
+
+  const onSelect = (asset: OnlineAsset) => setSelectedId(asset.id);
+  const onOpen = (asset: OnlineAsset) => {
+    openOnlineAssetDocument(store, toOnlineInfo(asset));
+    const key = onlineAssetKey(asset);
+    setRecent((current) => [key, ...current.filter((item) => item !== key)].slice(0, 20));
+  };
+  const onSource = (nextSource: Source) => {
+    setSource(nextSource);
+    setAssetType(SOURCES.find((entry) => entry.value === nextSource)!.types[0]!.value);
     setCategory('');
-    setSearchQuery('');
-  }, []);
-
-  const hasMore = assets.length < total;
+  };
+  const toggleFavorite = (asset: OnlineAsset) => {
+    const key = onlineAssetKey(asset);
+    setFavorites((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
-      {/* Filter bar */}
-      <div
-        style={{
-          padding: '6px 8px',
-          borderBottom: '1px solid #333',
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: 6,
-          alignItems: 'center',
-          flexShrink: 0,
+    <div
+      className="vgai-asset-library"
+      data-density={density}
+      data-source-collapsed={sourceCollapsed}
+      data-details-collapsed={detailsCollapsed}
+      style={
+        {
+          '--asset-source-width': `${sourceCollapsed ? 0 : sourceWidth}px`,
+          '--asset-details-width': `${detailsCollapsed ? 0 : detailsWidth}px`,
+        } as React.CSSProperties
+      }
+    >
+      <SourcePane
+        source={source}
+        assetType={assetType}
+        category={category}
+        categoryQuery={categoryQuery}
+        categories={categories}
+        savedSearches={savedSearches}
+        favoritesOnly={favoritesOnly}
+        animatedOnly={animatedOnly}
+        runtimeReadyOnly={runtimeReadyOnly}
+        downloaded={downloaded}
+        license={license}
+        delivery={delivery}
+        health={health}
+        licenseCounts={facetCounts.licenses}
+        deliveryCounts={facetCounts.deliveries}
+        healthCounts={facetCounts.health}
+        onSource={onSource}
+        onType={(value) => {
+          setAssetType(value);
+          setCategory('');
         }}
-      >
-        <select
-          value={source}
-          onChange={(e) => onSourceChange(e.target.value as Source)}
-          style={selectStyle}
-        >
-          {SOURCES.map((s) => (
-            <option key={s.value} value={s.value}>
-              {s.label}
-            </option>
-          ))}
-        </select>
-
-        <select
-          value={assetType}
-          onChange={(e) => {
-            setAssetType(e.target.value);
-            setCategory('');
-          }}
-          style={selectStyle}
-        >
-          {sourceConfig.types.map((t) => (
-            <option key={t.value} value={t.value}>
-              {t.label}
-            </option>
-          ))}
-        </select>
-
-        {categories.length > 0 && (
-          <select
-            value={category}
-            onChange={(e) => setCategory(e.target.value)}
-            style={selectStyle}
+        onCategory={setCategory}
+        onCategoryQuery={setCategoryQuery}
+        onSavedSearch={setSearchQuery}
+        onFavoritesOnly={setFavoritesOnly}
+        onAnimatedOnly={setAnimatedOnly}
+        onRuntimeReadyOnly={setRuntimeReadyOnly}
+        onDownloaded={setDownloaded}
+        onLicense={setLicense}
+        onDelivery={setDelivery}
+        onHealth={setHealth}
+      />
+      <main className="vgai-asset-library__results">
+        <div className="vgai-asset-library__toolbar">
+          <Button
+            className="vgai-asset-library__filters-toggle"
+            variant="ghost"
+            size="comfortable"
+            onClick={() => setSourceCollapsed((value) => !value)}
           >
-            <option value="">All Categories</option>
-            {categories.map((c) => (
-              <option key={c} value={c}>
-                {c}
-              </option>
-            ))}
-          </select>
-        )}
-
-        <input
-          type="text"
-          placeholder="Search..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          style={inputStyle}
-        />
-      </div>
-
-      {/* Thumbnail grid */}
-      <div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'none', minHeight: 0 }}>
-        <div
-          style={{
-            padding: 8,
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, 88px)',
-            gap: 6,
-            alignContent: 'start',
-          }}
-        >
-          {assets.map((asset) => {
-            const isSelected = selectedId === asset.id;
-            const isDownloaded = getDownloadedAssetPath(asset.source, asset.name) != null;
-            return (
-              <div
-                key={`${asset.source}-${asset.id}`}
-                draggable={asset.type === 'model'}
-                onDragStart={(e) => onDragStart(e, asset)}
-                onClick={() => onClickAsset(asset)}
-                onDoubleClick={() => onDoubleClickAsset(asset)}
-                title={asset.name}
-                style={{
-                  width: 88,
-                  padding: 4,
-                  borderRadius: 4,
-                  cursor: asset.type === 'model' ? 'grab' : 'pointer',
-                  background: isSelected ? '#579EFF22' : 'transparent',
-                  border: isSelected ? '1px solid #579EFF' : '1px solid transparent',
-                  textAlign: 'center',
-                  userSelect: 'none',
-                  position: 'relative',
-                }}
-                onMouseEnter={(e) => {
-                  if (!isSelected) e.currentTarget.style.background = '#333';
-                }}
-                onMouseLeave={(e) => {
-                  if (!isSelected) e.currentTarget.style.background = 'transparent';
-                }}
-              >
-                {/* Thumbnail */}
-                <div
-                  style={{
-                    width: 72,
-                    height: 72,
-                    margin: '0 auto 4px',
-                    borderRadius: 3,
-                    overflow: 'hidden',
-                    background: '#111',
-                  }}
-                >
-                  <img
-                    src={asset.thumbnailUrl}
-                    alt={asset.name}
-                    loading="lazy"
-                    style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
-                  />
-                </div>
-                {/* Name */}
-                <div
-                  style={{
-                    fontSize: 10,
-                    lineHeight: '13px',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    color: '#c5c8ce',
-                  }}
-                >
-                  {asset.name}
-                </div>
-                {/* Downloaded badge */}
-                {asset.cloudHosted && !isDownloaded && (
-                  <div
-                    title="Available from VGAI Cloud"
-                    style={{
-                      position: 'absolute',
-                      top: 4,
-                      right: 4,
-                      borderRadius: 3,
-                      background: '#579EFF',
-                      color: '#fff',
-                      fontSize: 8,
-                      lineHeight: '14px',
-                      padding: '0 4px',
-                    }}
-                  >
-                    CLOUD
-                  </div>
-                )}
-                {isDownloaded && (
-                  <div
-                    style={{
-                      position: 'absolute',
-                      top: 4,
-                      right: 4,
-                      width: 16,
-                      height: 16,
-                      borderRadius: '50%',
-                      background: '#22c55e',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    <FontAwesomeIcon icon={faCheck} style={{ fontSize: 9, color: '#fff' }} />
-                  </div>
-                )}
-              </div>
-            );
-          })}
-
-          {assets.length === 0 && !loading && (
-            <div
-              style={{
-                gridColumn: '1 / -1',
-                color: '#666',
-                fontSize: 12,
-                padding: 24,
-                textAlign: 'center',
+            {sourceCollapsed ? 'Show filters' : 'Hide filters'}
+          </Button>
+          <TextInput
+            className="vgai-input"
+            aria-label="Search asset library"
+            placeholder="Search models, packs, authors, clips…"
+            value={searchQuery}
+            onChange={(event) => setSearchQuery(event.target.value)}
+            style={{ flex: '1 1 220px' }}
+          />
+          <Select
+            className="vgai-select vgai-asset-library__sort"
+            aria-label="Sort assets"
+            value={sort}
+            onChange={(event) => setSort(event.target.value as Sort)}
+          >
+            <option value="relevance">Relevance</option>
+            <option value="name">Name</option>
+            <option value="source">Source</option>
+            <option value="size">Size</option>
+            <option value="recently-added">Recently added</option>
+            <option value="recently-used">Recently used</option>
+          </Select>
+          <Select
+            className="vgai-select vgai-asset-library__density"
+            aria-label="Card density"
+            value={density}
+            onChange={(event) => setDensity(event.target.value as Density)}
+          >
+            <option value="compact">Compact</option>
+            <option value="standard">Standard</option>
+            <option value="large">Large</option>
+          </Select>
+          <Button
+            className="vgai-asset-library__save-search"
+            variant="ghost"
+            size="comfortable"
+            disabled={!searchQuery || savedSearches.includes(searchQuery)}
+            onClick={() => setSavedSearches((current) => [...current, searchQuery])}
+          >
+            Save search
+          </Button>
+          <Button
+            className="vgai-asset-library__details-toggle"
+            variant="ghost"
+            size="comfortable"
+            onClick={() => setDetailsCollapsed((value) => !value)}
+          >
+            {detailsCollapsed ? 'Show details' : 'Hide details'}
+          </Button>
+          <span
+            className="vgai-asset-library__status"
+            role="status"
+            aria-live="polite"
+            style={{ fontSize: 11, color: text[3] }}
+          >
+            {filteredAssets.length} loaded · {total.toLocaleString()} total
+          </span>
+        </div>
+        {error ? (
+          <div role="alert" style={{ padding: 32, color: text[2], textAlign: 'center' }}>
+            <div>{error}</div>
+            <Button
+              variant="ghost"
+              size="comfortable"
+              onClick={() => {
+                setOffset(0);
+                void doSearch(0, false);
               }}
             >
-              {searchQuery ? 'No matching assets found.' : 'No assets found.'}
-            </div>
-          )}
-        </div>
-
-        {/* Loading indicator */}
-        {loading && (
-          <div style={{ textAlign: 'center', padding: 16, color: '#888', fontSize: 12 }}>
-            <FontAwesomeIcon icon={faSpinner} spin style={{ marginRight: 6 }} />
-            Loading...
+              Retry
+            </Button>
+          </div>
+        ) : filteredAssets.length === 0 && !loading ? (
+          <div role="status" style={{ padding: 32, color: text[3], textAlign: 'center' }}>
+            No assets match the current search and filters.
           </div>
+        ) : (
+          <VirtualAssetGrid
+            assets={filteredAssets}
+            selectedId={selectedId}
+            density={density}
+            loading={loading}
+            hasMore={assets.length < total}
+            isFavorite={(asset) => favorites.has(onlineAssetKey(asset))}
+            onSelect={onSelect}
+            onOpen={onOpen}
+            onLoadMore={loadMore}
+          />
         )}
-
-        {/* Load more */}
-        {!loading && hasMore && (
-          <div style={{ textAlign: 'center', padding: 12 }}>
-            <button
-              type="button"
-              onClick={loadMore}
+      </main>
+      <aside className="vgai-asset-library__details" aria-label="Selected asset details">
+        <div className="vgai-asset-pane-size">
+          <label>
+            Detail width
+            <TextInput
+              aria-label="Detail pane width"
+              type="range"
+              min="280"
+              max="640"
+              value={detailsWidth}
+              onChange={(event) => setDetailsWidth(Number(event.target.value))}
+            />
+          </label>
+        </div>
+        {selected ? (
+          <>
+            <div
               style={{
-                background: '#333',
-                border: '1px solid #444',
-                borderRadius: 4,
-                color: '#c5c8ce',
-                fontSize: 11,
-                padding: '4px 16px',
-                cursor: 'pointer',
+                display: 'flex',
+                gap: 8,
+                padding: '8px 10px',
+                borderBottom: '1px solid var(--vgai-border-1)',
               }}
             >
-              Load more...
-            </button>
+              <Button variant="solid" size="comfortable" onClick={() => onOpen(selected)}>
+                Open in Asset Editor
+              </Button>
+              <Button variant="ghost" size="comfortable" onClick={() => toggleFavorite(selected)}>
+                {favorites.has(onlineAssetKey(selected)) ? 'Remove favorite' : 'Add favorite'}
+              </Button>
+              {getDownloadedAssetPath(selected.source, selected.id) && (
+                <span className="vgai-asset-badge">
+                  <EditorIcon icon={faCheck} /> In project
+                </span>
+              )}
+            </div>
+            <OnlineAssetDetail
+              online={toOnlineInfo(selected)}
+              onResolved={() => setAssets((current) => [...current])}
+            />
+          </>
+        ) : (
+          <div role="status" style={{ padding: 24, color: text[3] }}>
+            Select an asset to inspect its preview, variants, license, and project status.
           </div>
         )}
-      </div>
+      </aside>
+      {!sourceCollapsed && (
+        <TextInput
+          className="vgai-asset-source-size"
+          aria-label="Source pane width"
+          type="range"
+          min="176"
+          max="360"
+          value={sourceWidth}
+          onChange={(event) => setSourceWidth(Number(event.target.value))}
+        />
+      )}
     </div>
   );
 }