@vgai/editor 0.4.0-canary.20260715.1 → 0.4.0

package/src/components/OnlineAssetBrowser.tsx

@@ -1,20 +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,
-  StateSurface,
-  TextInput,
-  text,
-} from '../design-system';
+import { Button, Checkbox, EditorIcon, Select, StateSurface, TextInput } from '../design-system';
 import { useEditorStore } from '../EditorContext';
 import {
   getAssetLibraryCategories,
@@ -26,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 {
@@ -74,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 {
@@ -161,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
@@ -333,180 +317,6 @@ function AssetCardThumbnail({ asset }: { asset: OnlineAsset }) {
   );
 }
 
-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);
-
-  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>
-  );
-}
-
-interface OnlineAssetBrowserProps {
-  layout?: 'workspace' | 'navigator';
-}
-
 function VirtualAssetList(props: {
   assets: readonly OnlineAsset[];
   selectedId: string | null;
@@ -777,7 +587,7 @@ function NavigatorAssetLibrary(props: {
   );
 }
 
-export function OnlineAssetBrowser({ layout = 'workspace' }: OnlineAssetBrowserProps = {}) {
+export function OnlineAssetBrowser() {
   const store = useEditorStore();
   const initial = useMemo(readState, []);
   const [source, setSource] = useState<Source>(initial.source);
@@ -785,15 +595,10 @@ export function OnlineAssetBrowser({ layout = 'workspace' }: OnlineAssetBrowserP
   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);
@@ -819,37 +624,30 @@ export function OnlineAssetBrowser({ layout = 'workspace' }: OnlineAssetBrowserP
         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)
@@ -892,6 +690,7 @@ export function OnlineAssetBrowser({ layout = 'workspace' }: OnlineAssetBrowserP
     const timer = window.setTimeout(() => {
       setOffset(0);
       setSelectedId(null);
+      if (getSelectedAsset()?.origin === 'library') clearSelectedAsset();
       void doSearch(0, false);
     }, 250);
     return () => window.clearTimeout(timer);
@@ -951,9 +750,23 @@ export function OnlineAssetBrowser({ layout = 'workspace' }: OnlineAssetBrowserP
       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);
@@ -964,15 +777,6 @@ export function OnlineAssetBrowser({ layout = 'workspace' }: OnlineAssetBrowserP
     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}
@@ -1043,178 +847,5 @@ export function OnlineAssetBrowser({ layout = 'workspace' }: OnlineAssetBrowserP
     />
   );
 
-  const workspaceLayout = (
-    <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}
-      <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>
-  );
-  return { navigator: navigatorLayout, workspace: workspaceLayout }[layout];
+  return navigatorLayout;
 }

package/src/components/WorkspaceDock.tsx

@@ -1,7 +1,6 @@
 import {
   type DockviewApi,
   DockviewDefaultTab,
-  type DockviewPanelApi,
   DockviewReact,
   type DockviewTheme,
   type IDockviewPanelHeaderProps,
@@ -116,16 +115,6 @@ export const vgaiDockviewTheme: DockviewTheme = {
   tabAnimation: 'smooth',
 };
 
-function usePanelActive(api: DockviewPanelApi): boolean {
-  const [active, setActive] = useState(api.isActive);
-  useEffect(() => {
-    setActive(api.isActive);
-    const disposable = api.onDidActiveChange((event) => setActive(event.isActive));
-    return () => disposable.dispose();
-  }, [api]);
-  return active;
-}
-
 function StaticPanelContent({ staticKind }: { staticKind: StaticPanelKind }) {
   const onOpenScene = useContext(OpenSceneContext);
   switch (staticKind) {
@@ -145,7 +134,6 @@ function StaticPanelContent({ staticKind }: { staticKind: StaticPanelKind }) {
 }
 
 function WorkspacePanel({ api, params }: IDockviewPanelProps<WorkspacePanelParams>) {
-  const active = usePanelActive(api);
   useSyncExternalStore(
     subscribeWorkspaceDocuments,
     workspaceDocumentRegistryVersion,
@@ -192,6 +180,12 @@ function WorkspacePanel({ api, params }: IDockviewPanelProps<WorkspacePanelParam
   if (!document) return <div className="vgai-dock-empty">Restoring document…</div>;
   const Content = document.descriptor.Content;
   const Toolbar = document.descriptor.Toolbar;
+  // A bottom utility can own keyboard focus while the center document stays
+  // visibly selected in its own group. Dockview's `api.isActive` is global
+  // focus, not document activation; using it here suspended previews and
+  // cleared their Inspector/Hierarchy context whenever Console or Controls
+  // opened. The document registry is the semantic center-tab authority.
+  const active = activeWorkspaceDocumentId() === params.documentId;
   return (
     <div
       className="vgai-dock-document"