@vgai/editor 0.4.0-canary.20260715.0 → 0.4.0

package/src/components/AssetBrowser.tsx

@@ -1,9 +1,8 @@
 import {
   faArrowLeft,
-  faBookOpen,
   faBoxArchive,
-  faChevronRight,
   faCubes,
+  faEllipsis,
   faFile,
   faFileCode,
   faFileImage,
@@ -13,11 +12,9 @@ import {
   faPaintbrush,
   faPuzzlePiece,
   faImage as faSceneIcon,
-  faTable,
   faTableCellsLarge,
-  faTrash,
 } from '@fortawesome/free-solid-svg-icons';
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { clearSelectedAsset, getSelectedAsset, setSelectedAsset } from '../asset-selection';
 import {
   type AssetCapabilityKind,
@@ -36,7 +33,6 @@ import {
   ThumbnailJobQueue,
 } from '../asset-workflow/thumbnail-system';
 import {
-  accent,
   Button,
   border,
   EditorIcon,
@@ -59,20 +55,7 @@ import { isEditableTarget, setActiveScope } from '../hotkeys';
 import { getModelThumbnailRenderer, modelThumbnailFormat } from '../model-thumbnail';
 import { getCurrentProject } from '../project-manager';
 import { getStorageBackend } from '../storage';
-import {
-  getProjectStoryModules,
-  refreshProjectStories,
-  subscribeProjectStoryModules,
-} from '../stories/story-registry';
 import { openAssetDocument } from './asset-documents';
-import {
-  dataFilesVersion,
-  loadedDataFiles,
-  openDataDocument,
-  refreshDataFiles,
-  subscribeDataFiles,
-} from './data-documents';
-import { openStoryDocument } from './story-documents';
 import './asset-workflow.css';
 
 // --- Helpers ---
@@ -89,7 +72,7 @@ type AssetKind =
   | 'source'
   | 'unknown';
 
-type BrowserKind = AssetKind | 'data' | 'story';
+type BrowserKind = AssetKind;
 type ViewableAssetKind = Exclude<AssetKind, 'folder' | 'unknown'>;
 
 function getAssetKind(entry: AssetEntry): AssetKind {
@@ -106,8 +89,6 @@ const assetIconColors: Record<BrowserKind, string> = {
   audio: '#34d399',
   image: '#f472b6',
   json: '#fbbf24',
-  data: '#22c55e',
-  story: '#a78bfa',
   unknown: '#6b7280',
   source: '#fb923c',
 };
@@ -121,8 +102,6 @@ const assetIconMap: Record<BrowserKind, typeof faFolder> = {
   audio: faMusic,
   image: faFileImage,
   json: faFileCode,
-  data: faTable,
-  story: faBookOpen,
   unknown: faFile,
   source: faBoxArchive,
 };
@@ -139,7 +118,12 @@ function AssetIcon({ kind, size = 24 }: { kind: BrowserKind; size?: number }) {
 const projectThumbnailQueue = new ThumbnailJobQueue<string>((url) => {
   const format = modelThumbnailFormat(url);
   if (!format) return Promise.reject(new Error(`No model preview loader for ${url}.`));
-  return getModelThumbnailRenderer().render({ url, format });
+  return getModelThumbnailRenderer().render({
+    url,
+    format,
+    background: 'neutral',
+    output: 'webp',
+  });
 }, 2);
 
 function ModelThumbnail({ url }: { url: string }) {
@@ -195,7 +179,7 @@ function ModelThumbnail({ url }: { url: string }) {
           setManifestPath(null);
           setManifestRejected(true);
         }}
-        style={{ maxWidth: 48, maxHeight: 48, objectFit: 'contain', borderRadius: radius.sm }}
+        style={{ width: '100%', height: '100%', objectFit: 'contain' }}
       />
     );
   }
@@ -229,7 +213,7 @@ function ModelThumbnail({ url }: { url: string }) {
     <img
       src={src}
       alt="model preview"
-      style={{ maxWidth: 48, maxHeight: 48, objectFit: 'contain', borderRadius: radius.sm }}
+      style={{ width: '100%', height: '100%', objectFit: 'contain' }}
     />
   );
 }
@@ -261,23 +245,19 @@ function projectAssetHealth(name: string, path: string): ProjectAssetHealth {
 }
 
 interface PersistedAssetBrowserState {
-  currentRoot: AssetRoot | null;
   currentPath: string;
   viewMode: AssetViewMode;
   sort: AssetSort;
   filter: AssetFilter;
   density: number;
-  expanded: string[];
 }
 
 const DEFAULT_BROWSER_STATE: PersistedAssetBrowserState = {
-  currentRoot: null,
   currentPath: '',
   viewMode: 'grid',
   sort: 'name',
   filter: 'all',
   density: 96,
-  expanded: ['public'],
 };
 
 function readAssetBrowserState(): PersistedAssetBrowserState {
@@ -286,7 +266,18 @@ function readAssetBrowserState(): PersistedAssetBrowserState {
     const parsed = JSON.parse(
       localStorage.getItem(projectAssetBrowserStateKey(projectId)) ?? '{}',
     ) as Partial<PersistedAssetBrowserState>;
-    return { ...DEFAULT_BROWSER_STATE, ...parsed };
+    const legacyViewMode = (parsed as Record<string, unknown>)['viewMode'];
+    const legacyRoot = (parsed as Record<string, unknown>)['currentRoot'];
+    return {
+      ...DEFAULT_BROWSER_STATE,
+      ...parsed,
+      // v1 briefly persisted synthetic `data` / `stories` roots and a
+      // project-root landing page. Assets now opens directly at the real
+      // public asset root, so those old locations migrate home once.
+      currentPath:
+        legacyRoot === undefined || legacyRoot === 'public' ? (parsed.currentPath ?? '') : '',
+      viewMode: legacyViewMode === 'columns' ? 'list' : legacyViewMode === 'list' ? 'list' : 'grid',
+    };
   } catch {
     return DEFAULT_BROWSER_STATE;
   }
@@ -298,8 +289,8 @@ interface AssetBrowserProps {
   onOpenScene?: (assetPath: string) => void;
 }
 
-type AssetRoot = 'public' | 'data' | 'stories';
-type AssetViewMode = 'grid' | 'list' | 'columns';
+type AssetRoot = 'public';
+type AssetViewMode = 'grid' | 'list';
 type AssetSort = 'name' | 'type' | 'size' | 'health';
 type AssetFilter =
   | 'all'
@@ -309,44 +300,15 @@ type AssetFilter =
   | 'imported'
   | 'generated';
 
-type BrowserEntry =
-  | {
-      source: 'root';
-      key: string;
-      name: string;
-      root: AssetRoot;
-      detail: string;
-    }
-  | { source: 'asset'; key: string; name: string; entry: AssetEntry }
-  | { source: 'data'; key: string; name: string; path: string }
-  | {
-      source: 'story';
-      key: string;
-      name: string;
-      modulePath: string;
-      storyName: string;
-    };
+type BrowserEntry = { source: 'asset'; key: string; name: string; entry: AssetEntry };
 
 function browserEntryKind(item: BrowserEntry): BrowserKind {
-  if (item.source === 'root') return 'folder';
-  if (item.source === 'data') return 'data';
-  if (item.source === 'story') return 'story';
   return getAssetKind(item.entry);
 }
 
-function assetRootLabel(root: AssetRoot): string {
-  if (root === 'data') return 'src/data';
-  return root;
-}
-
-function parentAssetLocation(
-  root: AssetRoot | null,
-  path: string,
-): readonly [AssetRoot | null, string] {
-  if (root === null) return [null, ''];
+function parentAssetPath(path: string): string {
   const separator = path.lastIndexOf('/');
-  if (separator < 0) return path ? [root, ''] : [null, ''];
-  return [root, path.slice(0, separator)];
+  return separator < 0 ? '' : path.slice(0, separator);
 }
 
 function openProjectAssetEntry(
@@ -354,7 +316,7 @@ function openProjectAssetEntry(
   options: {
     currentRoot: AssetRoot;
     currentPath: string;
-    navigate: (root: AssetRoot | null, path: string) => void;
+    navigate: (root: AssetRoot, path: string) => void;
     onOpenScene?: (assetPath: string) => void;
     openAsset: (url: string, kind: ViewableAssetKind) => void;
   },
@@ -374,9 +336,6 @@ function openProjectAssetEntry(
 }
 
 function browserEntryDetail(item: BrowserEntry): string {
-  if (item.source === 'root') return item.detail;
-  if (item.source === 'story') return item.modulePath;
-  if (item.source === 'data') return item.path;
   return item.entry.type === 'file' ? formatSize(item.entry.size) : 'Folder';
 }
 
@@ -385,6 +344,42 @@ function browserEntryTitle(item: BrowserEntry): string {
   return detail ? `${item.name}\n${detail}` : item.name;
 }
 
+function matchesAssetFilter(item: BrowserEntry, filter: AssetFilter, currentPath: string): boolean {
+  if (filter === 'all' || item.entry.type === 'directory') return true;
+  const capability = assetCapabilities(item.name);
+  const path = currentPath ? `${currentPath}/${item.name}` : item.name;
+  const predicates: Record<Exclude<AssetFilter, 'all'>, boolean> = {
+    'runtime-ready': capability.runtimeReady,
+    'source-only': capability.importable && !capability.runtimeReady,
+    unsupported: !capability.importable,
+    imported: path.startsWith('asset-library/local/'),
+    generated: path.startsWith('.generated/'),
+  };
+  return predicates[filter];
+}
+
+function compareAssetEntries(
+  left: BrowserEntry,
+  right: BrowserEntry,
+  sort: AssetSort,
+  currentPath: string,
+): number {
+  if (left.entry.type !== right.entry.type) return left.entry.type === 'directory' ? -1 : 1;
+  if (sort === 'size' && left.entry.size !== right.entry.size)
+    return right.entry.size - left.entry.size;
+  if (sort === 'type') {
+    const order = getAssetKind(left.entry).localeCompare(getAssetKind(right.entry));
+    if (order !== 0) return order;
+  }
+  if (sort === 'health') {
+    const order = projectAssetHealth(left.name, currentPath).localeCompare(
+      projectAssetHealth(right.name, currentPath),
+    );
+    if (order !== 0) return order;
+  }
+  return left.name.localeCompare(right.name);
+}
+
 const GRID_ENTRY_STYLE: React.CSSProperties = {
   width: '100%',
   minWidth: 0,
@@ -429,10 +424,10 @@ function BrowserEntryVisual({
       />
     );
   }
-  if (kind === 'model' || (item.source === 'asset' && modelThumbnailFormat(assetUrl))) {
+  if (kind === 'model' || modelThumbnailFormat(assetUrl)) {
     return <ModelThumbnail url={assetUrl} />;
   }
-  if (['audio', 'material', 'scene', 'prefab', 'json', 'data', 'story'].includes(kind)) {
+  if (['audio', 'material', 'scene', 'prefab', 'json'].includes(kind)) {
     return <TypedAssetThumbnail kind={kind} name={item.name} />;
   }
   return <AssetIcon kind={kind} />;
@@ -505,7 +500,7 @@ function BrowserEntryCard({
 }: {
   item: BrowserEntry;
   selected: boolean;
-  currentRoot: AssetRoot | null;
+  currentRoot: AssetRoot;
   currentPath: string;
   onDragStart: (event: React.DragEvent, item: BrowserEntry) => void;
   onSelect: (item: BrowserEntry, event: React.MouseEvent | React.KeyboardEvent) => void;
@@ -514,9 +509,9 @@ function BrowserEntryCard({
   viewMode: AssetViewMode;
 }) {
   const kind = browserEntryKind(item);
-  const assetEntry = item.source === 'asset' ? item.entry : null;
-  const capability = assetEntry?.type === 'file' ? assetCapabilities(assetEntry.name) : null;
-  const assetUrl = assetServingUrl(currentRoot ?? 'public', currentPath, item.name);
+  const assetEntry = item.entry;
+  const capability = assetEntry.type === 'file' ? assetCapabilities(assetEntry.name) : null;
+  const assetUrl = assetServingUrl(currentRoot, currentPath, item.name);
   const title = browserEntryTitle(item);
   const cursor = assetEntry
     ? assetEntry.type === 'directory' || capability?.placeable
@@ -530,9 +525,9 @@ function BrowserEntryCard({
 
   return (
     <div
-      className="vgai-selectable"
+      className="vgai-selectable vgai-project-asset-entry"
       data-selected={selected || undefined}
-      data-testid={item.source === 'root' ? `asset-root-${item.root}` : undefined}
+      data-view={viewMode}
       role="option"
       aria-selected={selected}
       tabIndex={0}
@@ -553,14 +548,15 @@ function BrowserEntryCard({
         ...(grid ? GRID_ENTRY_STYLE : LIST_ENTRY_STYLE),
         borderRadius: radius.sm,
         cursor,
-        border: selected ? `1px solid ${accent}` : '1px solid transparent',
         userSelect: 'none',
       }}
     >
       <div
+        className="vgai-project-asset-entry__preview"
+        data-testid="asset-entry-preview"
         style={{
           ...(grid
-            ? { width: 48, height: 48, margin: '0 auto 4px' }
+            ? { width: '100%', aspectRatio: '4 / 3', margin: '0 auto' }
             : { width: 18, height: 18, margin: 0 }),
           display: 'flex',
           alignItems: 'center',
@@ -624,7 +620,6 @@ function BrowserEntryCard({
 }
 
 interface AssetBrowserToolbarProps {
-  currentRoot: AssetRoot | null;
   currentPath: string;
   searchOpen: boolean;
   searchQuery: string;
@@ -632,7 +627,7 @@ interface AssetBrowserToolbarProps {
   sort: AssetSort;
   filter: AssetFilter;
   density: number;
-  onNavigate: (root: AssetRoot | null, path: string) => void;
+  onNavigate: (root: AssetRoot, path: string) => void;
   onSearchOpenChange: (open: boolean) => void;
   onSearchQueryChange: (query: string) => void;
   onViewModeChange: (mode: AssetViewMode) => void;
@@ -647,7 +642,6 @@ interface AssetBrowserToolbarProps {
 }
 
 function AssetBrowserToolbar({
-  currentRoot,
   currentPath,
   searchOpen,
   searchQuery,
@@ -668,335 +662,254 @@ function AssetBrowserToolbar({
   deleteDisabled,
   onRefresh,
 }: AssetBrowserToolbarProps) {
+  const actionsRef = useRef<HTMLDivElement>(null);
+  const [actionsOpen, setActionsOpen] = useState(false);
   const breadcrumbSegments = currentPath ? currentPath.split('/') : [];
-  const [parentRoot, parentPath] = parentAssetLocation(currentRoot, currentPath);
+  const parentPath = parentAssetPath(currentPath);
   const closeSearch = () => {
     onSearchQueryChange('');
     onSearchOpenChange(false);
   };
+  useEffect(() => {
+    if (!actionsOpen) return;
+    const close = (event: PointerEvent) => {
+      if (!actionsRef.current?.contains(event.target as Node)) setActionsOpen(false);
+    };
+    document.addEventListener('pointerdown', close);
+    return () => document.removeEventListener('pointerdown', close);
+  }, [actionsOpen]);
 
   return (
-    <EditorToolbar
-      label="Asset browser controls"
-      compact
-      style={{
-        gap: 6,
-        flexWrap: 'wrap',
-        flexShrink: 0,
-      }}
-    >
-      <Tooltip text="Back" position="top">
-        <IconButton
-          data-testid="asset-back"
-          aria-label="Back"
-          disabled={currentRoot === null}
-          onClick={() => onNavigate(parentRoot, parentPath)}
-        >
-          <EditorIcon icon={faArrowLeft} />
-        </IconButton>
-      </Tooltip>
-      {searchOpen ? (
-        <TextInput
-          type="text"
-          data-testid="asset-search-input"
-          aria-label="Search assets"
-          placeholder="Search assets..."
-          value={searchQuery}
-          onChange={(event) => onSearchQueryChange(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') closeSearch();
-          }}
-          className="vgai-input"
-          autoFocus
-          style={{ flex: 1, minWidth: 60 }}
-        />
-      ) : currentRoot !== null ? (
-        <nav
-          data-testid="asset-breadcrumb"
-          aria-label="Asset location"
-          style={{
-            flex: 1,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 2,
-            fontSize: 12,
-            minWidth: 0,
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {currentPath ? (
-            <Button
-              type="button"
-              variant="ghost"
-              size="compact"
-              onClick={() => onNavigate(currentRoot, '')}
-              style={{ flexShrink: 0 }}
-            >
-              {assetRootLabel(currentRoot)}
-            </Button>
-          ) : (
-            <span aria-current="location" style={{ color: text[1] }}>
-              {assetRootLabel(currentRoot)}
-            </span>
-          )}
-          {breadcrumbSegments.map((segment, index) => {
-            const path = breadcrumbSegments.slice(0, index + 1).join('/');
-            const isLast = index === breadcrumbSegments.length - 1;
-            return (
-              <span
-                key={path}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 2,
-                  minWidth: isLast ? 0 : undefined,
-                  flexShrink: isLast ? 1 : 0,
-                }}
-              >
-                <span style={{ color: text[3] }}>/</span>
-                {isLast ? (
-                  <span
-                    aria-current="location"
-                    title={segment}
-                    style={{
-                      color: text[1],
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                    }}
-                  >
-                    {segment}
-                  </span>
-                ) : (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="compact"
-                    onClick={() => onNavigate(currentRoot, path)}
-                  >
-                    {segment}
-                  </Button>
-                )}
-              </span>
-            );
-          })}
-        </nav>
-      ) : (
-        <div style={{ flex: 1 }} />
-      )}
-
-      <Tooltip text={searchOpen ? 'Close search' : 'Search'} position="top">
-        <IconButton
-          data-testid={searchOpen ? 'asset-search-close' : 'asset-search-toggle'}
-          aria-label={searchOpen ? 'Close search' : 'Search assets'}
-          onClick={() => {
-            if (searchOpen) closeSearch();
-            else onSearchOpenChange(true);
-          }}
-        >
-          <EditorIcon icon={searchOpen ? editorIcons.action.close : editorIcons.action.search} />
-        </IconButton>
-      </Tooltip>
-      <ToolbarGroup>
-        <Tooltip text="Grid view" position="top">
+    <div className="vgai-project-assets-toolbar">
+      <EditorToolbar label="Asset navigation" compact className="vgai-project-assets-toolbar__row">
+        <Tooltip text="Back" position="top">
           <IconButton
-            aria-label="Grid view"
-            data-testid="asset-view-grid"
-            aria-pressed={viewMode === 'grid'}
-            onClick={() => onViewModeChange('grid')}
+            data-testid="asset-back"
+            aria-label="Back"
+            disabled={!currentPath}
+            onClick={() => onNavigate('public', parentPath)}
           >
-            <EditorIcon icon={faTableCellsLarge} />
+            <EditorIcon icon={faArrowLeft} />
           </IconButton>
         </Tooltip>
-        <Tooltip text="List view" position="top">
-          <IconButton
-            aria-label="List view"
-            data-testid="asset-view-list"
-            aria-pressed={viewMode === 'list'}
-            onClick={() => onViewModeChange('list')}
+        {searchOpen ? (
+          <TextInput
+            type="text"
+            data-testid="asset-search-input"
+            aria-label="Search assets"
+            placeholder="Search assets..."
+            value={searchQuery}
+            onChange={(event) => onSearchQueryChange(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') closeSearch();
+            }}
+            className="vgai-input"
+            autoFocus
+            style={{ flex: 1, minWidth: 60 }}
+          />
+        ) : (
+          <nav
+            data-testid="asset-breadcrumb"
+            aria-label="Asset location"
+            style={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              fontSize: 12,
+              minWidth: 0,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+            }}
           >
-            <EditorIcon icon={faList} />
-          </IconButton>
-        </Tooltip>
-        <Tooltip text="Column view" position="top">
+            {currentPath ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="compact"
+                onClick={() => onNavigate('public', '')}
+                style={{ flexShrink: 0 }}
+              >
+                Assets
+              </Button>
+            ) : (
+              <span aria-current="location" style={{ color: text[1] }}>
+                Assets
+              </span>
+            )}
+            {breadcrumbSegments.map((segment, index) => {
+              const path = breadcrumbSegments.slice(0, index + 1).join('/');
+              const isLast = index === breadcrumbSegments.length - 1;
+              return (
+                <span
+                  key={path}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    minWidth: isLast ? 0 : undefined,
+                    flexShrink: isLast ? 1 : 0,
+                  }}
+                >
+                  <span style={{ color: text[3] }}>/</span>
+                  {isLast ? (
+                    <span
+                      aria-current="location"
+                      title={segment}
+                      style={{
+                        color: text[1],
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                      }}
+                    >
+                      {segment}
+                    </span>
+                  ) : (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="compact"
+                      onClick={() => onNavigate('public', path)}
+                    >
+                      {segment}
+                    </Button>
+                  )}
+                </span>
+              );
+            })}
+          </nav>
+        )}
+
+        <Tooltip text={searchOpen ? 'Close search' : 'Search'} position="top">
           <IconButton
-            aria-label="Column view"
-            data-testid="asset-view-columns"
-            aria-pressed={viewMode === 'columns'}
-            onClick={() => onViewModeChange('columns')}
+            data-testid={searchOpen ? 'asset-search-close' : 'asset-search-toggle'}
+            aria-label={searchOpen ? 'Close search' : 'Search assets'}
+            onClick={() => {
+              if (searchOpen) closeSearch();
+              else onSearchOpenChange(true);
+            }}
           >
-            <EditorIcon icon={faTable} />
+            <EditorIcon icon={searchOpen ? editorIcons.action.close : editorIcons.action.search} />
           </IconButton>
         </Tooltip>
-      </ToolbarGroup>
-      <Select
-        className="vgai-select"
-        aria-label="Sort project assets"
-        value={sort}
-        onChange={(event) => onSortChange(event.target.value as AssetSort)}
+      </EditorToolbar>
+      <EditorToolbar
+        label="Asset browser controls"
+        compact
+        className="vgai-project-assets-toolbar__row"
       >
-        <option value="name">Name</option>
-        <option value="type">Type</option>
-        <option value="size">Size</option>
-        <option value="health">Health</option>
-      </Select>
-      <Select
-        className="vgai-select"
-        aria-label="Filter project assets"
-        value={filter}
-        onChange={(event) => onFilterChange(event.target.value as AssetFilter)}
-      >
-        <option value="all">All</option>
-        <option value="runtime-ready">Runtime-ready</option>
-        <option value="source-only">Source-only</option>
-        <option value="unsupported">Unsupported</option>
-        <option value="imported">Imported</option>
-        <option value="generated">Generated</option>
-      </Select>
-      {viewMode === 'grid' && (
-        <TextInput
-          type="range"
-          aria-label="Project asset thumbnail size"
-          min="72"
-          max="160"
-          value={density}
-          onChange={(event) => onDensityChange(Number(event.target.value))}
-        />
-      )}
-      <Button
-        data-command-id={PROJECT_ASSET_COMMANDS.import.id}
-        variant="ghost"
-        size="comfortable"
-        onClick={onImport}
-      >
-        Import
-      </Button>
-      <Button
-        data-command-id={PROJECT_ASSET_COMMANDS.createFolder.id}
-        variant="ghost"
-        size="comfortable"
-        onClick={onCreateFolder}
-      >
-        New folder
-      </Button>
-      <IconButton
-        data-command-id={PROJECT_ASSET_COMMANDS.delete.id}
-        aria-label="Delete selected assets"
-        disabled={deleteDisabled}
-        onClick={onDelete}
-      >
-        <EditorIcon icon={faTrash} />
-      </IconButton>
-      <Tooltip text="Refresh" position="top">
-        <IconButton
-          aria-label="Refresh assets"
-          onClick={(event) => {
-            event.stopPropagation();
-            onRefresh();
-          }}
+        <ToolbarGroup>
+          <Tooltip text="Grid view" position="top">
+            <IconButton
+              aria-label="Grid view"
+              data-testid="asset-view-grid"
+              aria-pressed={viewMode === 'grid'}
+              onClick={() => onViewModeChange('grid')}
+            >
+              <EditorIcon icon={faTableCellsLarge} />
+            </IconButton>
+          </Tooltip>
+          <Tooltip text="List view" position="top">
+            <IconButton
+              aria-label="List view"
+              data-testid="asset-view-list"
+              aria-pressed={viewMode === 'list'}
+              onClick={() => onViewModeChange('list')}
+            >
+              <EditorIcon icon={faList} />
+            </IconButton>
+          </Tooltip>
+        </ToolbarGroup>
+        <Select
+          className="vgai-select vgai-project-assets-toolbar__select"
+          aria-label="Sort project assets"
+          value={sort}
+          onChange={(event) => onSortChange(event.target.value as AssetSort)}
         >
-          <EditorIcon icon={editorIcons.action.refresh} />
-        </IconButton>
-      </Tooltip>
-    </EditorToolbar>
-  );
-}
-
-function ProjectAssetTree(props: {
-  currentRoot: AssetRoot | null;
-  currentPath: string;
-  expanded: ReadonlySet<string>;
-  onExpanded(path: string): void;
-  onNavigate(root: AssetRoot | null, path: string): void;
-}) {
-  const [folders, setFolders] = useState(new Map<string, string[]>());
-  useEffect(() => {
-    for (const key of props.expanded) {
-      if (!key.startsWith('public') || folders.has(key)) continue;
-      const path = key === 'public' ? '' : key.slice('public/'.length);
-      void listAssets('public', path).then((entries) => {
-        setFolders((current) => {
-          const next = new Map(current);
-          next.set(
-            key,
-            entries.filter((entry) => entry.type === 'directory').map((entry) => entry.name),
-          );
-          return next;
-        });
-      });
-    }
-  }, [folders, props.expanded]);
-
-  const renderFolder = (path: string, depth: number): React.ReactNode => {
-    const key = path ? `public/${path}` : 'public';
-    const open = props.expanded.has(key);
-    return (
-      <div key={key}>
-        <div className="vgai-asset-tree-row" style={{ paddingLeft: 6 + depth * 14 }}>
-          <Button
-            type="button"
-            className="vgai-asset-tree-toggle"
-            aria-label={`${open ? 'Collapse' : 'Expand'} ${path.split('/').pop() || 'public'}`}
-            aria-expanded={open}
-            onClick={() => props.onExpanded(key)}
-          >
-            <EditorIcon
-              icon={faChevronRight}
-              style={{ transform: open ? 'rotate(90deg)' : undefined }}
-            />
-          </Button>
-          <Button
-            type="button"
-            className="vgai-asset-tree-target"
-            aria-current={
-              props.currentRoot === 'public' && props.currentPath === path ? 'page' : undefined
-            }
-            onClick={() => props.onNavigate('public', path)}
+          <option value="name">Name</option>
+          <option value="type">Type</option>
+          <option value="size">Size</option>
+          <option value="health">Health</option>
+        </Select>
+        <Select
+          className="vgai-select vgai-project-assets-toolbar__select"
+          aria-label="Filter project assets"
+          value={filter}
+          onChange={(event) => onFilterChange(event.target.value as AssetFilter)}
+        >
+          <option value="all">All</option>
+          <option value="runtime-ready">Runtime-ready</option>
+          <option value="source-only">Source-only</option>
+          <option value="unsupported">Unsupported</option>
+          <option value="imported">Imported</option>
+          <option value="generated">Generated</option>
+        </Select>
+        <Tooltip text="Import files" position="top">
+          <IconButton
+            data-command-id={PROJECT_ASSET_COMMANDS.import.id}
+            aria-label="Import files"
+            onClick={onImport}
           >
-            <EditorIcon icon={faFolder} />
-            {path.split('/').pop() || 'public'}
-          </Button>
+            <EditorIcon icon={faBoxArchive} />
+          </IconButton>
+        </Tooltip>
+        <div ref={actionsRef} className="vgai-project-assets-toolbar__more">
+          <Tooltip text="More asset actions" position="top">
+            <IconButton
+              aria-label="More asset actions"
+              aria-expanded={actionsOpen}
+              aria-haspopup="menu"
+              onClick={() => setActionsOpen((value) => !value)}
+            >
+              <EditorIcon icon={faEllipsis} />
+            </IconButton>
+          </Tooltip>
+          {actionsOpen && (
+            <Menu
+              autoFocusFirst
+              className="vgai-project-assets-toolbar__menu"
+              onDismiss={() => setActionsOpen(false)}
+            >
+              <MenuItem
+                data-command-id={PROJECT_ASSET_COMMANDS.createFolder.id}
+                onSelect={() => {
+                  setActionsOpen(false);
+                  onCreateFolder();
+                }}
+              >
+                New folder
+              </MenuItem>
+              <MenuItem
+                onSelect={() => {
+                  setActionsOpen(false);
+                  onDensityChange(density <= 96 ? 132 : 88);
+                }}
+              >
+                {density <= 96 ? 'Larger thumbnails' : 'Smaller thumbnails'}
+              </MenuItem>
+              <MenuItem
+                disabled={deleteDisabled}
+                data-command-id={PROJECT_ASSET_COMMANDS.delete.id}
+                onSelect={() => {
+                  setActionsOpen(false);
+                  onDelete();
+                }}
+              >
+                Delete selected
+              </MenuItem>
+              <MenuItem
+                onSelect={() => {
+                  setActionsOpen(false);
+                  onRefresh();
+                }}
+              >
+                Refresh
+              </MenuItem>
+            </Menu>
+          )}
         </div>
-        {open &&
-          folders.get(key)?.map((name) => renderFolder(path ? `${path}/${name}` : name, depth + 1))}
-      </div>
-    );
-  };
-
-  return (
-    <aside className="vgai-asset-tree" aria-label="Project asset sources">
-      <div className="vgai-asset-facet-title">Project</div>
-      {renderFolder('', 0)}
-      <Button
-        type="button"
-        className="vgai-asset-tree-row"
-        onClick={() => props.onNavigate('data', '')}
-      >
-        <EditorIcon icon={faTable} /> src/data
-      </Button>
-      <Button
-        type="button"
-        className="vgai-asset-tree-row"
-        onClick={() => props.onNavigate('stories', '')}
-      >
-        <EditorIcon icon={faBookOpen} /> stories
-      </Button>
-      <div className="vgai-asset-facet-title">References</div>
-      <Button
-        type="button"
-        className="vgai-asset-tree-row"
-        onClick={() => props.onNavigate('public', 'asset-library/local')}
-      >
-        Imported
-      </Button>
-      <Button
-        type="button"
-        className="vgai-asset-tree-row"
-        onClick={() => props.onNavigate('public', '.generated')}
-      >
-        Generated
-      </Button>
-    </aside>
+      </EditorToolbar>
+    </div>
   );
 }
 
@@ -1004,19 +917,12 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
   const store = useEditorStore();
   const history = useHistoryService();
   const initial = useMemo(readAssetBrowserState, []);
-  const dataVersion = useSyncExternalStore(subscribeDataFiles, dataFilesVersion, dataFilesVersion);
-  const storyModules = useSyncExternalStore(
-    subscribeProjectStoryModules,
-    getProjectStoryModules,
-    getProjectStoryModules,
-  );
-  const [currentRoot, setCurrentRoot] = useState<AssetRoot | null>(initial.currentRoot);
+  const currentRoot: AssetRoot = 'public';
   const [currentPath, setCurrentPath] = useState(initial.currentPath);
   const [viewMode, setViewMode] = useState<AssetViewMode>(initial.viewMode);
   const [sort, setSort] = useState<AssetSort>(initial.sort);
   const [filter, setFilter] = useState<AssetFilter>(initial.filter);
   const [density, setDensity] = useState(initial.density);
-  const [expanded, setExpanded] = useState(new Set(initial.expanded));
   const [searchOpen, setSearchOpen] = useState(false);
   const [entries, setEntries] = useState<AssetEntry[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
@@ -1035,16 +941,14 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     localStorage.setItem(
       projectAssetBrowserStateKey(projectId),
       JSON.stringify({
-        currentRoot,
         currentPath,
         viewMode,
         sort,
         filter,
         density,
-        expanded: [...expanded],
       } satisfies PersistedAssetBrowserState),
     );
-  }, [currentPath, currentRoot, density, expanded, filter, sort, viewMode]);
+  }, [currentPath, density, filter, sort, viewMode]);
 
   const fetchEntries = useCallback(async (root: AssetRoot, dir: string) => {
     const key = `${root}:${dir}`;
@@ -1063,11 +967,10 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
   }, []);
 
   useEffect(() => {
-    if (currentRoot === 'public') fetchEntries(currentRoot, currentPath);
+    fetchEntries(currentRoot, currentPath);
   }, [currentRoot, currentPath, fetchEntries]);
 
-  const navigate = useCallback((root: AssetRoot | null, path: string) => {
-    setCurrentRoot(root);
+  const navigate = useCallback((_root: AssetRoot, path: string) => {
     setCurrentPath(path);
     setSelectedFiles(new Set());
     setSelectionAnchor(null);
@@ -1076,101 +979,30 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     setSearchOpen(false);
   }, []);
 
-  // Project data and CSF stories are typed content inside the Assets browser,
-  // not permanent peer navigation modes. Their existing center documents
-  // remain the editing/preview surfaces.
+  // Assets is a file browser over the project's actual public asset root.
+  // Data and React stories have their own semantic document/hierarchy entry
+  // points; presenting them here as synthetic folders made the browser lie
+  // about the filesystem and duplicated navigation.
   const browserEntries = useMemo<BrowserEntry[]>(() => {
-    if (currentRoot === null) {
-      return [
-        {
-          source: 'root',
-          key: 'root:public',
-          name: 'public',
-          root: 'public',
-          detail: 'Models, images, scenes, audio, and other game assets',
-        },
-        {
-          source: 'root',
-          key: 'root:data',
-          name: 'src/data',
-          root: 'data',
-          detail: 'Typed game data',
-        },
-        {
-          source: 'root',
-          key: 'root:stories',
-          name: 'stories',
-          root: 'stories',
-          detail: 'React component stories',
-        },
-      ];
-    }
-    if (currentRoot === 'data') {
-      return loadedDataFiles().map((file) => ({
-        source: 'data',
-        key: `data:${file.path}`,
-        name: file.path.split('/').pop() ?? file.path,
-        path: file.path,
-      }));
-    }
-    if (currentRoot === 'stories') {
-      return storyModules.flatMap((module_) =>
-        module_.ok
-          ? module_.stories.map((story) => ({
-              source: 'story' as const,
-              key: `story:${module_.modulePath}:${story.name}`,
-              name: story.name,
-              modulePath: module_.modulePath,
-              storyName: story.name,
-            }))
-          : [],
-      );
-    }
     return entries.map((entry) => ({
       source: 'asset' as const,
       key: `asset:${currentPath}:${entry.name}`,
       name: entry.name,
       entry,
     }));
-  }, [currentPath, currentRoot, dataVersion, entries, storyModules]);
+  }, [currentPath, entries]);
   const filtered = useMemo(() => {
     const query = searchQuery.toLowerCase();
     const visible = browserEntries.filter((item) => {
       if (query && !item.name.toLowerCase().includes(query)) return false;
-      if (filter === 'all' || item.source !== 'asset' || item.entry.type === 'directory')
-        return true;
-      const capability = assetCapabilities(item.name);
-      const path = currentPath ? `${currentPath}/${item.name}` : item.name;
-      if (filter === 'runtime-ready') return capability.runtimeReady;
-      if (filter === 'source-only') return capability.importable && !capability.runtimeReady;
-      if (filter === 'unsupported') return !capability.importable;
-      if (filter === 'imported') return path.startsWith('asset-library/local/');
-      return path.startsWith('.generated/');
-    });
-    return [...visible].sort((left, right) => {
-      if (left.source === 'asset' && right.source === 'asset') {
-        if (left.entry.type !== right.entry.type) return left.entry.type === 'directory' ? -1 : 1;
-        if (sort === 'size' && left.entry.size !== right.entry.size)
-          return right.entry.size - left.entry.size;
-        if (sort === 'type') {
-          const order = getAssetKind(left.entry).localeCompare(getAssetKind(right.entry));
-          if (order !== 0) return order;
-        }
-        if (sort === 'health') {
-          const leftHealth = projectAssetHealth(left.name, currentPath);
-          const rightHealth = projectAssetHealth(right.name, currentPath);
-          const order = leftHealth.localeCompare(rightHealth);
-          if (order !== 0) return order;
-        }
-      }
-      return left.name.localeCompare(right.name);
+      return matchesAssetFilter(item, filter, currentPath);
     });
+    return [...visible].sort((left, right) => compareAssetEntries(left, right, sort, currentPath));
   }, [browserEntries, currentPath, filter, searchQuery, sort]);
 
   // --- Drag start ---
   const onDragStart = useCallback(
     (e: React.DragEvent, item: BrowserEntry) => {
-      if (item.source !== 'asset' || currentRoot !== 'public') return;
       const { entry } = item;
       const capability = assetCapabilities(entry.name);
       if (entry.type !== 'file' || !capability.placeable) {
@@ -1212,10 +1044,6 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
         setSelectionAnchor(item.key);
       }
       setSelectedFiles(next);
-      if (item.source !== 'asset' || currentRoot !== 'public') {
-        clearSelectedAsset();
-        return;
-      }
       const { entry } = item;
       if (entry.type === 'directory') {
         clearSelectedAsset();
@@ -1269,20 +1097,8 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
   // workspace document (W2; was a right-rail asset tab pre-W2). ---
   const onDoubleClick = useCallback(
     (item: BrowserEntry) => {
-      if (item.source === 'root') {
-        navigate(item.root, '');
-        return;
-      }
-      if (item.source === 'data') {
-        openDataDocument(store, item.path);
-        return;
-      }
-      if (item.source === 'story') {
-        openStoryDocument(store, item.modulePath, item.storyName);
-        return;
-      }
       openProjectAssetEntry(item.entry, {
-        currentRoot: currentRoot ?? 'public',
+        currentRoot,
         currentPath,
         navigate,
         ...(onOpenScene ? { onOpenScene } : {}),
@@ -1294,20 +1110,6 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
 
   // --- Refresh ---
   const onRefresh = useCallback(() => {
-    if (currentRoot === null) {
-      cacheRef.current.clear();
-      void refreshDataFiles();
-      void refreshProjectStories(getCurrentProject());
-      return;
-    }
-    if (currentRoot === 'data') {
-      void refreshDataFiles();
-      return;
-    }
-    if (currentRoot === 'stories') {
-      void refreshProjectStories(getCurrentProject());
-      return;
-    }
     cacheRef.current.clear();
     fetchEntries(currentRoot, currentPath);
   }, [currentRoot, currentPath, fetchEntries]);
@@ -1340,9 +1142,7 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
   const selectedAssetPaths = useMemo(
     () =>
       selectedItems.flatMap((item) =>
-        item.source === 'asset' && item.entry.type === 'file'
-          ? [currentPath ? `${currentPath}/${item.name}` : item.name]
-          : [],
+        item.entry.type === 'file' ? [currentPath ? `${currentPath}/${item.name}` : item.name] : [],
       ),
     [currentPath, selectedItems],
   );
@@ -1402,7 +1202,7 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
 
   const renameItem = useCallback(
     async (item: BrowserEntry) => {
-      if (item.source !== 'asset' || item.entry.type !== 'file') return;
+      if (item.entry.type !== 'file') return;
       const nextName = window.prompt('Rename asset', item.name);
       if (!nextName || nextName === item.name) return;
       const source = currentPath ? `${currentPath}/${item.name}` : item.name;
@@ -1414,7 +1214,7 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
 
   const duplicateItem = useCallback(
     async (item: BrowserEntry) => {
-      if (item.source !== 'asset' || item.entry.type !== 'file') return;
+      if (item.entry.type !== 'file') return;
       const dot = item.name.lastIndexOf('.');
       const copyName =
         dot > 0 ? `${item.name.slice(0, dot)} copy${item.name.slice(dot)}` : `${item.name} copy`;
@@ -1425,15 +1225,6 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     [currentPath, finishOperation],
   );
 
-  const toggleExpanded = useCallback((path: string) => {
-    setExpanded((current) => {
-      const next = new Set(current);
-      if (next.has(path)) next.delete(path);
-      else next.add(path);
-      return next;
-    });
-  }, []);
-
   useEffect(() => {
     const handler = (event: Event) => {
       const id = (event as CustomEvent<{ id?: string }>).detail?.id;
@@ -1480,16 +1271,15 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
           event.preventDefault();
         }
       }}
-      style={{ display: 'flex', flex: 1, minHeight: 0, position: 'relative' }}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        minHeight: 0,
+        position: 'relative',
+      }}
     >
-      <ProjectAssetTree
-        currentRoot={currentRoot}
-        currentPath={currentPath}
-        expanded={expanded}
-        onExpanded={toggleExpanded}
-        onNavigate={navigate}
-      />
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0 }}>
         <TextInput
           ref={importInputRef}
           type="file"
@@ -1502,7 +1292,6 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
           }}
         />
         <AssetBrowserToolbar
-          currentRoot={currentRoot}
           currentPath={currentPath}
           searchOpen={searchOpen}
           searchQuery={searchQuery}
@@ -1526,6 +1315,8 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
 
         {/* One file-browser surface; grid/list are presentation modes, not navigation. */}
         <div
+          className="vgai-project-assets-results"
+          data-view={viewMode}
           style={{
             flex: 1,
             overflowY: 'auto',