@vgai/editor 0.4.0-canary.20260715.0 → 0.4.0

package/src/components/OnlineAssetBrowser.tsx

@@ -1,12 +1,13 @@
-import { faCheck, faCloud, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { clearSelectedAsset, getSelectedAsset, setSelectedAsset } from '../asset-selection';
 import {
   type AssetLibrarySort,
   assetLibraryStateKey,
   onlineAssetKey,
   queryAssetLibrary,
 } from '../asset-workflow/asset-library-query';
-import { Button, Checkbox, EditorIcon, Select, TextInput, text } from '../design-system';
+import { Button, Checkbox, EditorIcon, Select, StateSurface, TextInput } from '../design-system';
 import { useEditorStore } from '../EditorContext';
 import {
   getAssetLibraryCategories,
@@ -18,11 +19,9 @@ import {
 } from '../editor-api';
 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 {
@@ -66,30 +65,20 @@ 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 DEFAULT_STATE: PersistedLibraryState = {
   source: 'local',
   assetType: 'all',
   query: '',
-  density: 'standard',
   sort: 'relevance',
   favorites: [],
   savedSearches: [],
   recent: [],
-  sourceWidth: 210,
-  detailsWidth: 360,
-  sourceCollapsed: false,
-  detailsCollapsed: false,
 };
 
 function readState(): PersistedLibraryState {
@@ -153,7 +142,10 @@ function SourcePane(props: {
     .filter((value) => value.toLowerCase().includes(props.categoryQuery.toLowerCase()))
     .slice(0, 80);
   return (
-    <aside className="vgai-asset-library__sources" aria-label="Library sources and filters">
+    <aside
+      className="vgai-asset-library-navigator__source-filters"
+      aria-label="Library sources and filters"
+    >
       <div className="vgai-asset-facet-title">Sources</div>
       {SOURCES.map((entry) => (
         <Button
@@ -325,79 +317,55 @@ function AssetCardThumbnail({ asset }: { asset: OnlineAsset }) {
   );
 }
 
-function VirtualAssetGrid(props: {
+function VirtualAssetList(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 [metrics, setMetrics] = useState({ height: 320, scrollTop: 0 });
+  const rowHeight = 52;
+  const firstIndex = Math.max(0, Math.floor(metrics.scrollTop / rowHeight) - 3);
+  const lastIndex = Math.min(
+    props.assets.length,
+    Math.ceil((metrics.scrollTop + metrics.height) / rowHeight) + 4,
+  );
   const visible = props.assets.slice(firstIndex, lastIndex);
+  const selectedIndex = props.assets.findIndex((asset) => asset.id === props.selectedId);
 
   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,
-      }));
+      if (entry) setMetrics((current) => ({ ...current, 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]);
+    if (hasMore && !loading && lastIndex >= props.assets.length - 4) onLoadMore();
+  }, [hasMore, lastIndex, loading, onLoadMore, props.assets.length]);
 
-  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))];
+  const moveSelection = (index: number) => {
+    const nextIndex = Math.max(0, Math.min(props.assets.length - 1, index));
+    const asset = props.assets[nextIndex];
     if (!asset) return;
     props.onSelect(asset);
-    const row = Math.floor(Math.max(0, nextIndex) / columns);
-    if (viewportRef.current) viewportRef.current.scrollTop = row * rowHeight;
+    if (viewportRef.current) viewportRef.current.scrollTop = nextIndex * rowHeight;
   };
-  const onGridKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    const pageSize = Math.max(columns, Math.floor(metrics.height / rowHeight) * columns);
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     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);
+        moveSelection(selectedIndex + 1);
         break;
       case 'ArrowUp':
-        moveSelection(selectedIndex - columns);
+        moveSelection(selectedIndex < 0 ? 0 : selectedIndex - 1);
         break;
       case 'Home':
         moveSelection(0);
@@ -406,24 +374,13 @@ function VirtualAssetGrid(props: {
         moveSelection(props.assets.length - 1);
         break;
       case 'PageDown':
-        moveSelection(selectedIndex + pageSize);
+        moveSelection(selectedIndex + Math.max(1, Math.floor(metrics.height / rowHeight)));
         break;
       case 'PageUp':
-        moveSelection(selectedIndex - pageSize);
+        moveSelection(selectedIndex - Math.max(1, Math.floor(metrics.height / rowHeight)));
         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);
-      }
+      default:
+        return;
     }
     event.preventDefault();
   };
@@ -431,24 +388,22 @@ function VirtualAssetGrid(props: {
   return (
     <div
       ref={viewportRef}
-      className="vgai-asset-library__grid"
+      className="vgai-asset-library-navigator__results"
       role="listbox"
       aria-label="Asset results"
       aria-busy={props.loading}
       tabIndex={0}
+      onKeyDown={onKeyDown}
       onScroll={(event) =>
         setMetrics((current) => ({ ...current, scrollTop: event.currentTarget.scrollTop }))
       }
-      onKeyDown={onGridKeyDown}
     >
       <div
-        style={{ position: 'relative', height: Math.max(metrics.height, rows * rowHeight + gap) }}
+        className="vgai-asset-library-navigator__result-space"
+        style={{ height: Math.max(metrics.height, props.assets.length * rowHeight) }}
       >
         {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)}
@@ -456,45 +411,182 @@ function VirtualAssetGrid(props: {
               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 }}
+              className="vgai-asset-library-row"
+              style={{ top: index * rowHeight }}
               onClick={() => props.onSelect(asset)}
               onDoubleClick={() => props.onOpen(asset)}
+              onKeyDown={(event) => {
+                if (event.key !== 'Enter') return;
+                props.onOpen(asset);
+                event.preventDefault();
+              }}
             >
               <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 className="vgai-asset-library-row__copy">
+                <span className="vgai-asset-library-row__name" data-testid="online-asset-name">
+                  {asset.name}
+                </span>
+                <span className="vgai-asset-library-row__meta">
+                  {asset.type} · {asset.source === 'local' ? 'Catalog' : asset.source}
+                </span>
               </span>
             </Button>
           );
         })}
         {props.loading && (
-          <div role="status" style={{ position: 'absolute', left: 16, top: rows * rowHeight + 12 }}>
+          <span className="vgai-asset-library-navigator__loading" role="status">
             <EditorIcon icon={faSpinner} spin /> Loading assets…
-          </div>
+          </span>
         )}
       </div>
     </div>
   );
 }
 
+function NavigatorAssetLibrary(props: {
+  assets: readonly OnlineAsset[];
+  selectedId: string | null;
+  source: Source;
+  assetType: string;
+  sort: Sort;
+  searchQuery: string;
+  total: number;
+  loading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  filtersOpen: boolean;
+  filters: React.ReactNode;
+  canSaveSearch: boolean;
+  onSource(source: Source): void;
+  onType(type: string): void;
+  onSort(sort: Sort): void;
+  onSearch(query: string): void;
+  onSelect(asset: OnlineAsset): void;
+  onOpen(asset: OnlineAsset): void;
+  onLoadMore(): void;
+  onRetry(): void;
+  onSaveSearch(): void;
+  onToggleFilters(): void;
+}) {
+  const sourceConfig = SOURCES.find((entry) => entry.value === props.source)!;
+  return (
+    <div className="vgai-asset-library-navigator">
+      <div className="vgai-asset-library-navigator__controls">
+        <div className="vgai-asset-library-navigator__search-row">
+          <TextInput
+            className="vgai-input"
+            aria-label="Search asset library"
+            placeholder="Search Library"
+            value={props.searchQuery}
+            onChange={(event) => props.onSearch(event.target.value)}
+          />
+          <Button
+            variant="ghost"
+            size="compact"
+            aria-expanded={props.filtersOpen}
+            onClick={props.onToggleFilters}
+          >
+            Filters
+          </Button>
+        </div>
+        <div className="vgai-asset-library-navigator__filters">
+          <Select
+            className="vgai-select"
+            aria-label="Library source"
+            value={props.source}
+            onChange={(event) => props.onSource(event.target.value as Source)}
+          >
+            {SOURCES.map((entry) => (
+              <option key={entry.value} value={entry.value}>
+                {entry.label}
+              </option>
+            ))}
+          </Select>
+          <Select
+            className="vgai-select"
+            aria-label="Library asset type"
+            value={props.assetType}
+            onChange={(event) => props.onType(event.target.value)}
+          >
+            {sourceConfig.types.map((entry) => (
+              <option key={entry.value} value={entry.value}>
+                {entry.label}
+              </option>
+            ))}
+          </Select>
+          <Select
+            className="vgai-select"
+            aria-label="Sort assets"
+            value={props.sort}
+            onChange={(event) => props.onSort(event.target.value as Sort)}
+          >
+            <option value="relevance">Relevant</option>
+            <option value="name">Name</option>
+            <option value="source">Source</option>
+            <option value="size">Size</option>
+            <option value="recently-added">Newest</option>
+            <option value="recently-used">Recent</option>
+          </Select>
+        </div>
+        <span className="vgai-asset-library-navigator__status" role="status" aria-live="polite">
+          {props.loading && props.assets.length === 0
+            ? 'Loading…'
+            : `${props.assets.length.toLocaleString()} of ${props.total.toLocaleString()}`}
+        </span>
+      </div>
+      {props.filtersOpen && (
+        <div className="vgai-asset-library-navigator__filter-drawer">
+          <div className="vgai-asset-library-navigator__filter-heading">
+            <span>Filters and saved views</span>
+            <Button variant="ghost" size="compact" onClick={props.onToggleFilters}>
+              Done
+            </Button>
+          </div>
+          {props.canSaveSearch && (
+            <Button
+              className="vgai-asset-library-navigator__save-search"
+              variant="ghost"
+              size="compact"
+              onClick={props.onSaveSearch}
+            >
+              Save current search
+            </Button>
+          )}
+          {props.filters}
+        </div>
+      )}
+      {props.error ? (
+        <StateSurface
+          compact
+          title="Library unavailable"
+          description={props.error}
+          action={
+            <Button variant="ghost" size="compact" onClick={props.onRetry}>
+              Retry
+            </Button>
+          }
+        />
+      ) : props.assets.length === 0 && !props.loading ? (
+        <StateSurface
+          compact
+          title="No matching assets"
+          description="Try another search or type."
+        />
+      ) : (
+        <VirtualAssetList
+          assets={props.assets}
+          selectedId={props.selectedId}
+          loading={props.loading}
+          hasMore={props.hasMore}
+          onSelect={props.onSelect}
+          onOpen={props.onOpen}
+          onLoadMore={props.onLoadMore}
+        />
+      )}
+    </div>
+  );
+}
+
 export function OnlineAssetBrowser() {
   const store = useEditorStore();
   const initial = useMemo(readState, []);
@@ -503,15 +595,11 @@ export function OnlineAssetBrowser() {
   const [category, setCategory] = 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 [favorites] = 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 [navigatorFiltersOpen, setNavigatorFiltersOpen] = useState(false);
   const [favoritesOnly, setFavoritesOnly] = useState(false);
   const [runtimeReadyOnly, setRuntimeReadyOnly] = useState(false);
   const [animatedOnly, setAnimatedOnly] = useState(false);
@@ -536,37 +624,30 @@ export function OnlineAssetBrowser() {
         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,
-  ]);
+  }, [assetType, favorites, recent, savedSearches, searchQuery, sort, source]);
 
   useEffect(() => {
     loadDownloadedAssets();
     return onAssetDownloaded(() => setAssets((current) => [...current]));
   }, []);
 
+  useEffect(() => {
+    const openSelected = (event: Event) => {
+      openOnlineAssetDocument(
+        store,
+        (event as CustomEvent<ReturnType<typeof toOnlineInfo>>).detail,
+      );
+    };
+    window.addEventListener('editor:open-online-asset', openSelected);
+    return () => window.removeEventListener('editor:open-online-asset', openSelected);
+  }, [store]);
+
   useEffect(() => {
     if (source === 'polyhaven' || source === 'local') {
       getAssetLibraryCategories(assetType, source)
@@ -609,6 +690,7 @@ export function OnlineAssetBrowser() {
     const timer = window.setTimeout(() => {
       setOffset(0);
       setSelectedId(null);
+      if (getSelectedAsset()?.origin === 'library') clearSelectedAsset();
       void doSearch(0, false);
     }, 250);
     return () => window.clearTimeout(timer);
@@ -668,9 +750,23 @@ export function OnlineAssetBrowser() {
       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 onSelect = (asset: OnlineAsset) => {
+    setSelectedId(asset.id);
+    const localPath = getDownloadedAssetPath(asset.source, asset.id);
+    const online = toOnlineInfo(asset);
+    setSelectedAsset({
+      path: localPath ? `/${localPath.replace(/^\/+/, '')}` : `online:${asset.source}:${asset.id}`,
+      name: asset.name,
+      kind:
+        asset.type === 'model'
+          ? 'model'
+          : asset.type === 'animation' || asset.type === 'source'
+            ? 'source'
+            : 'image',
+      origin: 'library',
+      online,
+    });
+  };
   const onOpen = (asset: OnlineAsset) => {
     openOnlineAssetDocument(store, toOnlineInfo(asset));
     const key = onlineAssetKey(asset);
@@ -681,219 +777,75 @@ export function OnlineAssetBrowser() {
     setAssetType(SOURCES.find((entry) => entry.value === nextSource)!.types[0]!.value);
     setCategory('');
   };
-  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;
-    });
-  };
+  const sourcePane = (
+    <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('');
+      }}
+      onCategory={setCategory}
+      onCategoryQuery={setCategoryQuery}
+      onSavedSearch={setSearchQuery}
+      onFavoritesOnly={setFavoritesOnly}
+      onAnimatedOnly={setAnimatedOnly}
+      onRuntimeReadyOnly={setRuntimeReadyOnly}
+      onDownloaded={setDownloaded}
+      onLicense={setLicense}
+      onDelivery={setDelivery}
+      onHealth={setHealth}
+    />
+  );
 
-  return (
-    <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('');
-        }}
-        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)}
-          >
-            {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);
-              }}
-            >
-              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}
-          />
-        )}
-      </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={{
-                display: 'flex',
-                gap: 8,
-                padding: '8px 10px',
-                borderBottom: '1px solid var(--vgai-border-1)',
-              }}
-            >
-              <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>
-        )}
-      </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>
+  const navigatorLayout = (
+    <NavigatorAssetLibrary
+      assets={filteredAssets}
+      selectedId={selectedId}
+      source={source}
+      assetType={assetType}
+      sort={sort}
+      searchQuery={searchQuery}
+      total={total}
+      loading={loading}
+      error={error}
+      hasMore={assets.length < total}
+      filtersOpen={navigatorFiltersOpen}
+      filters={sourcePane}
+      canSaveSearch={Boolean(searchQuery && !savedSearches.includes(searchQuery))}
+      onSource={onSource}
+      onType={(value) => {
+        setAssetType(value);
+        setCategory('');
+      }}
+      onSort={setSort}
+      onSearch={setSearchQuery}
+      onSelect={onSelect}
+      onOpen={onOpen}
+      onLoadMore={loadMore}
+      onSaveSearch={() => setSavedSearches((current) => [...current, searchQuery])}
+      onToggleFilters={() => setNavigatorFiltersOpen((value) => !value)}
+      onRetry={() => {
+        setOffset(0);
+        void doSearch(0, false);
+      }}
+    />
   );
+
+  return navigatorLayout;
 }