@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/AssetBrowser.tsx

@@ -1,37 +1,82 @@
 import {
-  faArrowsRotate,
+  faArrowLeft,
+  faBookOpen,
+  faBoxArchive,
+  faChevronRight,
   faCubes,
   faFile,
   faFileCode,
   faFileImage,
   faFolder,
+  faList,
   faMusic,
   faPaintbrush,
   faPuzzlePiece,
   faImage as faSceneIcon,
+  faTable,
+  faTableCellsLarge,
+  faTrash,
 } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useEditorStore } from '../EditorContext';
-import { type AssetEntry, listAssets } from '../editor-api';
-import { setActiveScope } from '../hotkeys';
-import { getModelThumbnailRenderer } from '../model-thumbnail';
-import { FolderTree } from './FolderTree';
-import { Panel } from './primitives/Panel';
-import { Tooltip } from './primitives/Tooltip';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { clearSelectedAsset, getSelectedAsset, setSelectedAsset } from '../asset-selection';
+import {
+  type AssetCapabilityKind,
+  assetCapabilities,
+  assetDocumentKind,
+} from '../asset-workflow/asset-capabilities';
+import { confirmAssetAction } from '../asset-workflow/asset-workflow-quality';
+import {
+  PROJECT_ASSET_COMMANDS,
+  projectAssetBrowserStateKey,
+} from '../asset-workflow/project-asset-commands';
+import { inspectProjectAssetHealthFromStorage } from '../asset-workflow/project-asset-health';
+import { executeProjectAssetOperation } from '../asset-workflow/project-asset-operations';
+import {
+  loadProjectThumbnailManifest,
+  ThumbnailJobQueue,
+} from '../asset-workflow/thumbnail-system';
+import {
+  accent,
+  Button,
+  border,
+  EditorIcon,
+  EditorToolbar,
+  editorIcons,
+  IconButton,
+  Menu,
+  MenuItem,
+  radius,
+  Select,
+  StateSurface,
+  TextInput,
+  ToolbarGroup,
+  Tooltip,
+  text,
+} from '../design-system';
+import { useEditorStore, useHistoryService } from '../EditorContext';
+import { type AssetEntry, listAssets, revealInFinder } from '../editor-api';
+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 ---
 
-function getExtension(name: string): string {
-  // Handle compound extensions like .vscn.json
-  if (name.endsWith('.vscn.json')) return '.vscn.json';
-  if (name.endsWith('.prefab.json')) return '.prefab.json';
-  if (name.endsWith('.mat.json')) return '.mat.json';
-  if (name.endsWith('.inputmap.json')) return '.inputmap.json';
-  const dot = name.lastIndexOf('.');
-  return dot >= 0 ? name.slice(dot) : '';
-}
-
 type AssetKind =
   | 'model'
   | 'image'
@@ -41,22 +86,18 @@ type AssetKind =
   | 'audio'
   | 'json'
   | 'folder'
+  | 'source'
   | 'unknown';
 
+type BrowserKind = AssetKind | 'data' | 'story';
+type ViewableAssetKind = Exclude<AssetKind, 'folder' | 'unknown'>;
+
 function getAssetKind(entry: AssetEntry): AssetKind {
   if (entry.type === 'directory') return 'folder';
-  const ext = getExtension(entry.name);
-  if (['.glb', '.gltf'].includes(ext)) return 'model';
-  if (['.png', '.jpg', '.jpeg', '.webp', '.svg', '.gif'].includes(ext)) return 'image';
-  if (ext === '.vscn.json') return 'scene';
-  if (ext === '.prefab.json') return 'prefab';
-  if (ext === '.mat.json') return 'material';
-  if (['.mp3', '.ogg', '.wav', '.flac'].includes(ext)) return 'audio';
-  if (ext === '.json' || ext === '.inputmap.json') return 'json';
-  return 'unknown';
+  return assetCapabilities(entry.name).kind as AssetCapabilityKind;
 }
 
-const assetIconColors: Record<AssetKind, string> = {
+const assetIconColors: Record<BrowserKind, string> = {
   folder: '#e8a740',
   model: '#6bc5f7',
   scene: '#8b5cf6',
@@ -65,10 +106,13 @@ const assetIconColors: Record<AssetKind, string> = {
   audio: '#34d399',
   image: '#f472b6',
   json: '#fbbf24',
+  data: '#22c55e',
+  story: '#a78bfa',
   unknown: '#6b7280',
+  source: '#fb923c',
 };
 
-const assetIconMap: Record<AssetKind, typeof faFolder> = {
+const assetIconMap: Record<BrowserKind, typeof faFolder> = {
   folder: faFolder,
   model: faCubes,
   scene: faSceneIcon,
@@ -77,39 +121,84 @@ const assetIconMap: Record<AssetKind, typeof faFolder> = {
   audio: faMusic,
   image: faFileImage,
   json: faFileCode,
+  data: faTable,
+  story: faBookOpen,
   unknown: faFile,
+  source: faBoxArchive,
 };
 
-function AssetIcon({ kind }: { kind: AssetKind }) {
+function AssetIcon({ kind, size = 24 }: { kind: BrowserKind; size?: number }) {
   return (
-    <FontAwesomeIcon
+    <EditorIcon
       icon={assetIconMap[kind]}
-      style={{ fontSize: 24, color: assetIconColors[kind] }}
+      style={{ fontSize: size, color: assetIconColors[kind] }}
     />
   );
 }
-
 /** Renders an offscreen 3D preview thumbnail for .glb/.gltf model assets. */
+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 });
+}, 2);
+
 function ModelThumbnail({ url }: { url: string }) {
   const [src, setSrc] = useState<string | null>(null);
   const [failed, setFailed] = useState(false);
+  const [manifestPath, setManifestPath] = useState<string | null>(null);
+  const [manifestRejected, setManifestRejected] = useState(false);
+
+  useEffect(() => {
+    setSrc(null);
+    setFailed(false);
+    setManifestPath(null);
+    setManifestRejected(false);
+  }, [url]);
 
   useEffect(() => {
     let cancelled = false;
-    getModelThumbnailRenderer()
-      .render(url)
+    let queued: ReturnType<typeof projectThumbnailQueue.request> | null = null;
+    void loadProjectThumbnailManifest()
+      .then((manifest) => {
+        if (cancelled) return;
+        const entry = manifest?.entries[url.replace(/^\/+/, '')];
+        if (
+          !manifestRejected &&
+          entry?.path &&
+          (entry.state === 'generated' || entry.state === 'upstream')
+        ) {
+          setManifestPath(entry.path.startsWith('/') ? entry.path : `/${entry.path}`);
+          return;
+        }
+        queued = projectThumbnailQueue.request(url, 100);
+        return queued.promise;
+      })
       .then((dataUrl) => {
-        if (!cancelled) setSrc(dataUrl);
+        if (!cancelled && dataUrl) setSrc(dataUrl);
       })
       .catch(() => {
         if (!cancelled) setFailed(true);
       });
     return () => {
       cancelled = true;
+      queued?.cancel();
     };
-  }, [url]);
+  }, [manifestRejected, url]);
 
   if (failed) return <AssetIcon kind="model" />;
+  if (manifestPath) {
+    return (
+      <img
+        src={manifestPath}
+        alt="cached model preview"
+        onError={() => {
+          setManifestPath(null);
+          setManifestRejected(true);
+        }}
+        style={{ maxWidth: 48, maxHeight: 48, objectFit: 'contain', borderRadius: radius.sm }}
+      />
+    );
+  }
   if (!src) {
     // Loading spinner
     return (
@@ -127,8 +216,8 @@ function ModelThumbnail({ url }: { url: string }) {
           style={{
             width: 16,
             height: 16,
-            border: '2px solid #444',
-            borderTopColor: '#6bc5f7',
+            border: `2px solid ${border[2]}`,
+            borderTopColor: assetIconColors.model,
             borderRadius: '50%',
             animation: 'editor-spin 0.8s linear infinite',
           }}
@@ -140,7 +229,7 @@ function ModelThumbnail({ url }: { url: string }) {
     <img
       src={src}
       alt="model preview"
-      style={{ maxWidth: 48, maxHeight: 48, objectFit: 'contain', borderRadius: 2 }}
+      style={{ maxWidth: 48, maxHeight: 48, objectFit: 'contain', borderRadius: radius.sm }}
     />
   );
 }
@@ -161,22 +250,803 @@ function formatSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
+type ProjectAssetHealth = 'healthy' | 'source-only' | 'unsupported' | 'stale-import';
+
+function projectAssetHealth(name: string, path: string): ProjectAssetHealth {
+  const capability = assetCapabilities(name);
+  if (!capability.importable) return 'unsupported';
+  if (!capability.runtimeReady) return 'source-only';
+  if (path.includes('/.generated/') || path.startsWith('.generated/')) return 'stale-import';
+  return 'healthy';
+}
+
+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 {
+  try {
+    const projectId = getCurrentProject()?.rootPath ?? '__unscoped__';
+    const parsed = JSON.parse(
+      localStorage.getItem(projectAssetBrowserStateKey(projectId)) ?? '{}',
+    ) as Partial<PersistedAssetBrowserState>;
+    return { ...DEFAULT_BROWSER_STATE, ...parsed };
+  } catch {
+    return DEFAULT_BROWSER_STATE;
+  }
+}
+
 // --- Main Component ---
 
 interface AssetBrowserProps {
   onOpenScene?: (assetPath: string) => void;
 }
 
+type AssetRoot = 'public' | 'data' | 'stories';
+type AssetViewMode = 'grid' | 'list' | 'columns';
+type AssetSort = 'name' | 'type' | 'size' | 'health';
+type AssetFilter =
+  | 'all'
+  | 'runtime-ready'
+  | 'source-only'
+  | 'unsupported'
+  | '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;
+    };
+
+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, ''];
+  const separator = path.lastIndexOf('/');
+  if (separator < 0) return path ? [root, ''] : [null, ''];
+  return [root, path.slice(0, separator)];
+}
+
+function openProjectAssetEntry(
+  entry: AssetEntry,
+  options: {
+    currentRoot: AssetRoot;
+    currentPath: string;
+    navigate: (root: AssetRoot | null, path: string) => void;
+    onOpenScene?: (assetPath: string) => void;
+    openAsset: (url: string, kind: ViewableAssetKind) => void;
+  },
+): void {
+  const { currentRoot, currentPath, navigate, onOpenScene, openAsset } = options;
+  if (entry.type === 'directory') {
+    navigate(currentRoot, currentPath ? `${currentPath}/${entry.name}` : entry.name);
+    return;
+  }
+  const capability = assetCapabilities(entry.name);
+  const documentKind = assetDocumentKind(capability);
+  if ((documentKind === 'scene' || documentKind === 'prefab') && onOpenScene) {
+    onOpenScene(assetServingUrl(currentRoot, currentPath, entry.name));
+    return;
+  }
+  if (documentKind) openAsset(assetServingUrl(currentRoot, currentPath, entry.name), documentKind);
+}
+
+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';
+}
+
+function browserEntryTitle(item: BrowserEntry): string {
+  const detail = browserEntryDetail(item);
+  return detail ? `${item.name}\n${detail}` : item.name;
+}
+
+const GRID_ENTRY_STYLE: React.CSSProperties = {
+  width: '100%',
+  minWidth: 0,
+  padding: 4,
+  textAlign: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 0,
+};
+
+const LIST_ENTRY_STYLE: React.CSSProperties = {
+  width: '100%',
+  minWidth: 0,
+  minHeight: 28,
+  padding: '3px 6px',
+  textAlign: 'left',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 7,
+};
+
+function BrowserEntryVisual({
+  item,
+  kind,
+  assetUrl,
+  grid,
+}: {
+  item: BrowserEntry;
+  kind: BrowserKind;
+  assetUrl: string;
+  grid: boolean;
+}) {
+  if (!grid) return <AssetIcon kind={kind} size={15} />;
+  if (kind === 'image') {
+    return (
+      <img
+        src={assetUrl}
+        alt={item.name}
+        style={{ maxWidth: 48, maxHeight: 48, objectFit: 'contain', borderRadius: radius.sm }}
+      />
+    );
+  }
+  if (kind === 'model' || (item.source === 'asset' && modelThumbnailFormat(assetUrl))) {
+    return <ModelThumbnail url={assetUrl} />;
+  }
+  if (['audio', 'material', 'scene', 'prefab', 'json', 'data', 'story'].includes(kind)) {
+    return <TypedAssetThumbnail kind={kind} name={item.name} />;
+  }
+  return <AssetIcon kind={kind} />;
+}
+
+function TypedAssetThumbnail({ kind, name }: { kind: BrowserKind; name: string }) {
+  const color = assetIconColors[kind];
+  if (kind === 'audio') {
+    return (
+      <svg
+        role="img"
+        aria-label={`${name} waveform preview`}
+        viewBox="0 0 64 48"
+        width="52"
+        height="44"
+      >
+        <rect width="64" height="48" rx="4" fill="var(--vgai-bg-inset)" />
+        {Array.from({ length: 16 }, (_, index) => (
+          <rect
+            key={index}
+            x={index * 4 + 1}
+            y={24 - ((index * 13) % 18) / 2}
+            width="2"
+            height={((index * 13) % 18) + 3}
+            fill={color}
+          />
+        ))}
+      </svg>
+    );
+  }
+  if (kind === 'material') {
+    return (
+      <span
+        role="img"
+        aria-label={`${name} material preview`}
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: '50%',
+          background: `radial-gradient(circle at 32% 28%, white 0, ${color} 18%, var(--vgai-bg-inset) 72%)`,
+          boxShadow: 'inset -5px -7px 10px rgb(0 0 0 / 35%)',
+        }}
+      />
+    );
+  }
+  return (
+    <svg
+      role="img"
+      aria-label={`${name} ${kind} preview`}
+      viewBox="0 0 52 48"
+      width="48"
+      height="44"
+    >
+      <rect x="5" y="3" width="42" height="42" rx="4" fill="var(--vgai-bg-inset)" stroke={color} />
+      <path d="M13 15h26M13 23h18M13 31h22" stroke={color} strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function BrowserEntryCard({
+  item,
+  selected,
+  currentRoot,
+  currentPath,
+  onDragStart,
+  onSelect,
+  onOpen,
+  onContextMenu,
+  viewMode,
+}: {
+  item: BrowserEntry;
+  selected: boolean;
+  currentRoot: AssetRoot | null;
+  currentPath: string;
+  onDragStart: (event: React.DragEvent, item: BrowserEntry) => void;
+  onSelect: (item: BrowserEntry, event: React.MouseEvent | React.KeyboardEvent) => void;
+  onOpen: (item: BrowserEntry) => void;
+  onContextMenu: (event: React.MouseEvent, item: BrowserEntry) => void;
+  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 title = browserEntryTitle(item);
+  const cursor = assetEntry
+    ? assetEntry.type === 'directory' || capability?.placeable
+      ? capability?.placeable
+        ? 'grab'
+        : 'pointer'
+      : 'default'
+    : 'pointer';
+  const detail = browserEntryDetail(item);
+  const grid = viewMode === 'grid';
+
+  return (
+    <div
+      className="vgai-selectable"
+      data-selected={selected || undefined}
+      data-testid={item.source === 'root' ? `asset-root-${item.root}` : undefined}
+      role="option"
+      aria-selected={selected}
+      tabIndex={0}
+      draggable={assetEntry?.type === 'file' && capability?.placeable === true}
+      onDragStart={(event) => onDragStart(event, item)}
+      onClick={(event) => onSelect(item, event)}
+      onDoubleClick={() => onOpen(item)}
+      onContextMenu={(event) => onContextMenu(event, item)}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') onOpen(item);
+        else if (event.key === ' ') {
+          onSelect(item, event);
+          event.preventDefault();
+        }
+      }}
+      title={title}
+      style={{
+        ...(grid ? GRID_ENTRY_STYLE : LIST_ENTRY_STYLE),
+        borderRadius: radius.sm,
+        cursor,
+        border: selected ? `1px solid ${accent}` : '1px solid transparent',
+        userSelect: 'none',
+      }}
+    >
+      <div
+        style={{
+          ...(grid
+            ? { width: 48, height: 48, margin: '0 auto 4px' }
+            : { width: 18, height: 18, margin: 0 }),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+          borderRadius: radius.sm,
+          pointerEvents: 'none',
+        }}
+      >
+        <BrowserEntryVisual item={item} kind={kind} assetUrl={assetUrl} grid={grid} />
+      </div>
+      <div
+        data-testid="asset-entry-name"
+        style={{
+          ...(grid
+            ? {
+                fontSize: 10,
+                lineHeight: '13px',
+                minHeight: 26,
+                display: '-webkit-box',
+                WebkitBoxOrient: 'vertical',
+                WebkitLineClamp: 2,
+              }
+            : { fontSize: 11, lineHeight: '18px', flex: 1 }),
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: grid ? 'normal' : 'nowrap',
+          color: text[1],
+          minWidth: 0,
+        }}
+      >
+        {item.name}
+      </div>
+      {!grid && (
+        <div
+          role="listbox"
+          aria-label="Project assets"
+          aria-multiselectable="true"
+          style={{
+            maxWidth: '45%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            color: text[3],
+            fontSize: 10,
+          }}
+        >
+          {detail}
+        </div>
+      )}
+      {grid && capability && (
+        <div style={{ display: 'flex', gap: 3, flexWrap: 'wrap', justifyContent: 'center' }}>
+          <span className="vgai-asset-badge">
+            {capability.runtimeReady ? 'Ready' : capability.importable ? 'Import' : 'Unsupported'}
+          </span>
+          {capability.animated && <span className="vgai-asset-badge">Animated</span>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface AssetBrowserToolbarProps {
+  currentRoot: AssetRoot | null;
+  currentPath: string;
+  searchOpen: boolean;
+  searchQuery: string;
+  viewMode: AssetViewMode;
+  sort: AssetSort;
+  filter: AssetFilter;
+  density: number;
+  onNavigate: (root: AssetRoot | null, path: string) => void;
+  onSearchOpenChange: (open: boolean) => void;
+  onSearchQueryChange: (query: string) => void;
+  onViewModeChange: (mode: AssetViewMode) => void;
+  onSortChange: (sort: AssetSort) => void;
+  onFilterChange: (filter: AssetFilter) => void;
+  onDensityChange: (density: number) => void;
+  onCreateFolder: () => void;
+  onImport: () => void;
+  onDelete: () => void;
+  deleteDisabled: boolean;
+  onRefresh: () => void;
+}
+
+function AssetBrowserToolbar({
+  currentRoot,
+  currentPath,
+  searchOpen,
+  searchQuery,
+  viewMode,
+  sort,
+  filter,
+  density,
+  onNavigate,
+  onSearchOpenChange,
+  onSearchQueryChange,
+  onViewModeChange,
+  onSortChange,
+  onFilterChange,
+  onDensityChange,
+  onCreateFolder,
+  onImport,
+  onDelete,
+  deleteDisabled,
+  onRefresh,
+}: AssetBrowserToolbarProps) {
+  const breadcrumbSegments = currentPath ? currentPath.split('/') : [];
+  const [parentRoot, parentPath] = parentAssetLocation(currentRoot, currentPath);
+  const closeSearch = () => {
+    onSearchQueryChange('');
+    onSearchOpenChange(false);
+  };
+
+  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">
+          <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>
+        <Tooltip text="Column view" position="top">
+          <IconButton
+            aria-label="Column view"
+            data-testid="asset-view-columns"
+            aria-pressed={viewMode === 'columns'}
+            onClick={() => onViewModeChange('columns')}
+          >
+            <EditorIcon icon={faTable} />
+          </IconButton>
+        </Tooltip>
+      </ToolbarGroup>
+      <Select
+        className="vgai-select"
+        aria-label="Sort project assets"
+        value={sort}
+        onChange={(event) => onSortChange(event.target.value as AssetSort)}
+      >
+        <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();
+          }}
+        >
+          <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)}
+          >
+            <EditorIcon icon={faFolder} />
+            {path.split('/').pop() || 'public'}
+          </Button>
+        </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>
+  );
+}
+
 export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
   const store = useEditorStore();
-  const [currentRoot, setCurrentRoot] = useState('public');
-  const [currentPath, setCurrentPath] = useState('');
+  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 [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('');
-  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [selectedFiles, setSelectedFiles] = useState(new Set<string>());
+  const [selectionAnchor, setSelectionAnchor] = useState<string | null>(null);
+  const [contextMenu, setContextMenu] = useState<{
+    x: number;
+    y: number;
+    item: BrowserEntry;
+  } | null>(null);
+  const importInputRef = useRef<HTMLInputElement>(null);
   const cacheRef = useRef(new Map<string, AssetEntry[]>());
 
-  const fetchEntries = useCallback(async (root: string, dir: string) => {
+  useEffect(() => {
+    const projectId = getCurrentProject()?.rootPath ?? '__unscoped__';
+    localStorage.setItem(
+      projectAssetBrowserStateKey(projectId),
+      JSON.stringify({
+        currentRoot,
+        currentPath,
+        viewMode,
+        sort,
+        filter,
+        density,
+        expanded: [...expanded],
+      } satisfies PersistedAssetBrowserState),
+    );
+  }, [currentPath, currentRoot, density, expanded, filter, sort, viewMode]);
+
+  const fetchEntries = useCallback(async (root: AssetRoot, dir: string) => {
     const key = `${root}:${dir}`;
     const cached = cacheRef.current.get(key);
     if (cached) {
@@ -193,29 +1063,122 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
   }, []);
 
   useEffect(() => {
-    fetchEntries(currentRoot, currentPath);
+    if (currentRoot === 'public') fetchEntries(currentRoot, currentPath);
   }, [currentRoot, currentPath, fetchEntries]);
 
-  const navigate = useCallback((root: string, path: string) => {
+  const navigate = useCallback((root: AssetRoot | null, path: string) => {
     setCurrentRoot(root);
     setCurrentPath(path);
-    setSelectedFile(null);
+    setSelectedFiles(new Set());
+    setSelectionAnchor(null);
+    clearSelectedAsset();
     setSearchQuery('');
+    setSearchOpen(false);
   }, []);
 
-  // --- Breadcrumb ---
-  const breadcrumbSegments = currentPath ? currentPath.split('/') : [];
-
-  // --- Filtered entries ---
-  const filtered = searchQuery
-    ? entries.filter((e) => e.name.toLowerCase().includes(searchQuery.toLowerCase()))
-    : entries;
+  // 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.
+  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]);
+  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);
+    });
+  }, [browserEntries, currentPath, filter, searchQuery, sort]);
 
   // --- Drag start ---
   const onDragStart = useCallback(
-    (e: React.DragEvent, entry: AssetEntry) => {
-      const kind = getAssetKind(entry);
-      if (kind === 'folder') return;
+    (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) {
+        e.preventDefault();
+        return;
+      }
+      const kind = assetDocumentKind(capability);
+      if (!kind) return;
       const path = assetScenePath(currentRoot, currentPath, entry.name);
       const payload = { path, kind, name: entry.name };
       // Set text/plain first — Chromium silently cancels drags that only
@@ -226,31 +1189,125 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     [currentRoot, currentPath],
   );
 
-  // --- Double-click handler ---
-  const onDoubleClick = useCallback(
-    (entry: AssetEntry) => {
+  // --- Single-click: §5.1 SELECTION (W2) — compact preview/metadata in the
+  // Inspector via `asset-selection.ts`; never opens anything. ---
+  const onSelectEntry = useCallback(
+    (item: BrowserEntry, event: React.MouseEvent | React.KeyboardEvent) => {
+      let next = new Set<string>();
+      if (event.shiftKey && selectionAnchor) {
+        const anchorIndex = filtered.findIndex((entry) => entry.key === selectionAnchor);
+        const itemIndex = filtered.findIndex((entry) => entry.key === item.key);
+        if (anchorIndex >= 0 && itemIndex >= 0) {
+          const [start, end] =
+            anchorIndex < itemIndex ? [anchorIndex, itemIndex] : [itemIndex, anchorIndex];
+          next = new Set(filtered.slice(start, end + 1).map((entry) => entry.key));
+        }
+      } else if (event.metaKey || event.ctrlKey) {
+        next = new Set(selectedFiles);
+        if (next.has(item.key)) next.delete(item.key);
+        else next.add(item.key);
+        setSelectionAnchor(item.key);
+      } else {
+        next.add(item.key);
+        setSelectionAnchor(item.key);
+      }
+      setSelectedFiles(next);
+      if (item.source !== 'asset' || currentRoot !== 'public') {
+        clearSelectedAsset();
+        return;
+      }
+      const { entry } = item;
       if (entry.type === 'directory') {
-        navigate(currentRoot, currentPath ? `${currentPath}/${entry.name}` : entry.name);
+        clearSelectedAsset();
         return;
       }
-      const kind = getAssetKind(entry);
-      // Open scene and prefab files in the editor
-      if ((kind === 'scene' || kind === 'prefab') && onOpenScene) {
-        const url = assetServingUrl(currentRoot, currentPath, entry.name);
-        onOpenScene(url);
+      const capability = assetCapabilities(entry.name);
+      const kind = assetDocumentKind(capability) ?? 'unknown';
+      setSelectedAsset({
+        path: assetServingUrl(currentRoot, currentPath, entry.name),
+        name: entry.name,
+        kind,
+        sizeBytes: entry.size,
+        capabilities: capability,
+        health: projectAssetHealth(entry.name, currentPath),
+        selectionCount: next.size,
+        ...(currentPath.startsWith('asset-library/local')
+          ? { sourcePath: 'Asset Library provenance metadata' }
+          : {}),
+      });
+      const path = currentPath ? `${currentPath}/${entry.name}` : entry.name;
+      void inspectProjectAssetHealthFromStorage(getStorageBackend(), path)
+        .then((inspection) => {
+          const servingPath = assetServingUrl(currentRoot, currentPath, entry.name);
+          if (getSelectedAsset()?.path !== servingPath) return;
+          setSelectedAsset({
+            path: servingPath,
+            name: entry.name,
+            kind,
+            sizeBytes: entry.size,
+            capabilities: capability,
+            health:
+              inspection.health.status === 'healthy'
+                ? 'healthy'
+                : inspection.health.codes.includes('stale-import')
+                  ? 'stale-import'
+                  : capability.runtimeReady
+                    ? 'unsupported'
+                    : 'source-only',
+            healthCodes: inspection.health.codes,
+            dependencies: inspection.dependencies,
+            references: inspection.references,
+            selectionCount: next.size,
+          });
+        })
+        .catch(() => {});
+    },
+    [currentPath, currentRoot, filtered, selectedFiles, selectionAnchor],
+  );
+
+  // --- Double-click / Enter: §5.1 OPEN — the full viewer as a CENTER
+  // 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;
       }
-      // Open other viewable asset types in a tab
-      if (kind !== 'folder' && kind !== 'unknown') {
-        const url = assetServingUrl(currentRoot, currentPath, entry.name);
-        store.openAssetTab(url, kind);
+      if (item.source === 'story') {
+        openStoryDocument(store, item.modulePath, item.storyName);
+        return;
       }
+      openProjectAssetEntry(item.entry, {
+        currentRoot: currentRoot ?? 'public',
+        currentPath,
+        navigate,
+        ...(onOpenScene ? { onOpenScene } : {}),
+        openAsset: (url, kind) => openAssetDocument(store, url, kind),
+      });
     },
     [currentRoot, currentPath, navigate, onOpenScene, store],
   );
 
   // --- 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]);
@@ -262,241 +1319,341 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     return () => window.removeEventListener('editor:assets-changed', handler);
   }, [onRefresh]);
 
-  const refreshAction = (
-    <Tooltip text="Refresh" position="top">
-      <button
-        type="button"
-        onClick={(e) => {
-          e.stopPropagation();
-          onRefresh();
-        }}
-        style={{
-          background: 'none',
-          border: 'none',
-          color: '#8c8c8c',
-          cursor: 'pointer',
-          fontSize: 12,
-          padding: '0 4px',
-        }}
-      >
-        <FontAwesomeIcon icon={faArrowsRotate} />
-      </button>
-    </Tooltip>
+  useEffect(() => {
+    const handler = (event: Event) => {
+      const path = (event as CustomEvent<{ path?: string }>).detail?.path;
+      if (!path) return;
+      const capability = assetCapabilities(path);
+      const kind = assetDocumentKind(capability);
+      if (!kind) return;
+      if ((kind === 'scene' || kind === 'prefab') && onOpenScene) onOpenScene(path);
+      else openAssetDocument(store, path, kind);
+    };
+    window.addEventListener('editor:open-project-asset', handler);
+    return () => window.removeEventListener('editor:open-project-asset', handler);
+  }, [onOpenScene, store]);
+
+  const selectedItems = useMemo(
+    () => browserEntries.filter((item) => selectedFiles.has(item.key)),
+    [browserEntries, selectedFiles],
+  );
+  const selectedAssetPaths = useMemo(
+    () =>
+      selectedItems.flatMap((item) =>
+        item.source === 'asset' && item.entry.type === 'file'
+          ? [currentPath ? `${currentPath}/${item.name}` : item.name]
+          : [],
+      ),
+    [currentPath, selectedItems],
+  );
+
+  useEffect(() => {
+    const available = new Set(browserEntries.map((item) => item.key));
+    setSelectedFiles((current) => {
+      const next = new Set([...current].filter((key) => available.has(key)));
+      return next.size === current.size ? current : next;
+    });
+  }, [browserEntries]);
+
+  const finishOperation = useCallback(
+    async (operation: Parameters<typeof executeProjectAssetOperation>[0]) => {
+      await executeProjectAssetOperation(operation, { backend: getStorageBackend(), history });
+      cacheRef.current.clear();
+      if (currentRoot === 'public') await fetchEntries(currentRoot, currentPath);
+    },
+    [currentPath, currentRoot, fetchEntries, history],
+  );
+
+  const deleteSelected = useCallback(async () => {
+    if (selectedAssetPaths.length === 0) return;
+    if (
+      !confirmAssetAction(
+        'delete',
+        `Delete ${selectedAssetPaths.length} selected asset(s)? This is undoable.`,
+      )
+    )
+      return;
+    await finishOperation({ type: 'delete', paths: selectedAssetPaths });
+  }, [finishOperation, selectedAssetPaths]);
+
+  const createFolder = useCallback(async () => {
+    if (currentRoot !== 'public') return;
+    const name = window.prompt('Folder name');
+    if (!name) return;
+    await finishOperation({
+      type: 'create-folder',
+      path: currentPath ? `${currentPath}/${name}` : name,
+    });
+  }, [currentPath, currentRoot, finishOperation]);
+
+  const importFiles = useCallback(
+    async (files: FileList | null) => {
+      if (!files || currentRoot !== 'public') return;
+      const imported = await Promise.all(
+        [...files].map(async (file) => ({
+          path: currentPath ? `${currentPath}/${file.name}` : file.name,
+          bytes: new Uint8Array(await file.arrayBuffer()),
+        })),
+      );
+      await finishOperation({ type: 'import', files: imported });
+    },
+    [currentPath, currentRoot, finishOperation],
+  );
+
+  const renameItem = useCallback(
+    async (item: BrowserEntry) => {
+      if (item.source !== 'asset' || 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;
+      const destination = currentPath ? `${currentPath}/${nextName}` : nextName;
+      await finishOperation({ type: 'move', source, destination });
+    },
+    [currentPath, finishOperation],
+  );
+
+  const duplicateItem = useCallback(
+    async (item: BrowserEntry) => {
+      if (item.source !== 'asset' || 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`;
+      const source = currentPath ? `${currentPath}/${item.name}` : item.name;
+      const destination = currentPath ? `${currentPath}/${copyName}` : copyName;
+      await finishOperation({ type: 'duplicate', source, destination });
+    },
+    [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;
+      const item = selectedItems[0];
+      if (id === PROJECT_ASSET_COMMANDS.refresh.id) onRefresh();
+      else if (id === PROJECT_ASSET_COMMANDS.import.id) importInputRef.current?.click();
+      else if (id === PROJECT_ASSET_COMMANDS.createFolder.id) void createFolder();
+      else if (id === PROJECT_ASSET_COMMANDS.delete.id) void deleteSelected();
+      else if (id === PROJECT_ASSET_COMMANDS.rename.id && item) void renameItem(item);
+      else if (id === PROJECT_ASSET_COMMANDS.duplicate.id && item) void duplicateItem(item);
+      else if (id === PROJECT_ASSET_COMMANDS.copyPath.id && selectedAssetPaths[0])
+        void navigator.clipboard.writeText(selectedAssetPaths[0]);
+      else if (id === PROJECT_ASSET_COMMANDS.reveal.id)
+        void revealInFinder(`public/${currentPath}`);
+    };
+    window.addEventListener('editor:project-asset-command', handler);
+    return () => window.removeEventListener('editor:project-asset-command', handler);
+  }, [
+    createFolder,
+    currentPath,
+    deleteSelected,
+    duplicateItem,
+    onRefresh,
+    renameItem,
+    selectedAssetPaths,
+    selectedItems,
+  ]);
+
   return (
-    <Panel
-      name="Assets"
-      actions={refreshAction}
+    <div
       onPointerDown={() => setActiveScope('asset-browser')}
-      style={{ flex: 1, minHeight: 0 }}
+      onKeyDown={(event) => {
+        if (isEditableTarget(event.target)) return;
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+          void deleteSelected();
+          event.preventDefault();
+        } else if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'd') {
+          const item = selectedItems[0];
+          if (item) void duplicateItem(item);
+          event.preventDefault();
+        } else if (event.key === 'F2') {
+          const item = selectedItems[0];
+          if (item) void renameItem(item);
+          event.preventDefault();
+        }
+      }}
+      style={{ display: 'flex', flex: 1, minHeight: 0, position: 'relative' }}
     >
-      <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
-        {/* Folder tree */}
+      <ProjectAssetTree
+        currentRoot={currentRoot}
+        currentPath={currentPath}
+        expanded={expanded}
+        onExpanded={toggleExpanded}
+        onNavigate={navigate}
+      />
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        <TextInput
+          ref={importInputRef}
+          type="file"
+          multiple
+          aria-label="Import project assets"
+          hidden
+          onChange={(event) => {
+            void importFiles(event.target.files);
+            event.currentTarget.value = '';
+          }}
+        />
+        <AssetBrowserToolbar
+          currentRoot={currentRoot}
+          currentPath={currentPath}
+          searchOpen={searchOpen}
+          searchQuery={searchQuery}
+          viewMode={viewMode}
+          sort={sort}
+          filter={filter}
+          density={density}
+          onNavigate={navigate}
+          onSearchOpenChange={setSearchOpen}
+          onSearchQueryChange={setSearchQuery}
+          onViewModeChange={setViewMode}
+          onSortChange={setSort}
+          onFilterChange={setFilter}
+          onDensityChange={setDensity}
+          onCreateFolder={() => void createFolder()}
+          onImport={() => importInputRef.current?.click()}
+          onDelete={() => void deleteSelected()}
+          deleteDisabled={selectedAssetPaths.length === 0}
+          onRefresh={onRefresh}
+        />
+
+        {/* One file-browser surface; grid/list are presentation modes, not navigation. */}
         <div
           style={{
-            width: 180,
-            borderRight: '1px solid #333',
+            flex: 1,
             overflowY: 'auto',
-            scrollbarWidth: 'none',
-            flexShrink: 0,
+            padding: 8,
+            display: viewMode === 'grid' ? 'grid' : 'flex',
+            gridTemplateColumns:
+              viewMode === 'grid' ? `repeat(auto-fill, minmax(${density}px, 1fr))` : undefined,
+            gridAutoRows: viewMode === 'grid' ? 'min-content' : undefined,
+            flexDirection: viewMode === 'grid' ? undefined : 'column',
+            gap: viewMode === 'grid' ? 6 : 1,
+            alignContent: 'start',
           }}
         >
-          <FolderTree currentPath={currentPath} currentRoot={currentRoot} onNavigate={navigate} />
+          {filtered.map((item) => (
+            <BrowserEntryCard
+              key={item.key}
+              item={item}
+              selected={selectedFiles.has(item.key)}
+              currentRoot={currentRoot}
+              currentPath={currentPath}
+              onDragStart={onDragStart}
+              onSelect={onSelectEntry}
+              onOpen={onDoubleClick}
+              onContextMenu={(event, selectedItem) => {
+                event.preventDefault();
+                if (!selectedFiles.has(selectedItem.key)) {
+                  onSelectEntry(selectedItem, event);
+                }
+                setContextMenu({ x: event.clientX, y: event.clientY, item: selectedItem });
+              }}
+              viewMode={viewMode}
+            />
+          ))}
+          {filtered.length === 0 && (
+            <StateSurface
+              compact
+              style={{ gridColumn: '1 / -1' }}
+              icon={
+                <EditorIcon
+                  icon={searchQuery ? editorIcons.action.search : editorIcons.content.folder}
+                />
+              }
+              title={searchQuery ? 'No matching files' : 'Empty folder'}
+              description={
+                searchQuery
+                  ? 'Try a broader asset search.'
+                  : 'Add files to this folder to see them here.'
+              }
+            />
+          )}
         </div>
-
-        {/* File area */}
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
-          {/* Top bar: breadcrumb + search */}
-          <div
-            style={{
-              padding: '4px 8px',
-              borderBottom: '1px solid #333',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-              flexShrink: 0,
+      </div>
+      {contextMenu && (
+        <Menu
+          autoFocusFirst
+          className="vgai-asset-context-menu"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+          onDismiss={() => setContextMenu(null)}
+        >
+          <MenuItem
+            type="button"
+            role="menuitem"
+            data-command-id={PROJECT_ASSET_COMMANDS.open.id}
+            onClick={() => {
+              onDoubleClick(contextMenu.item);
+              setContextMenu(null);
             }}
           >
-            {/* Breadcrumb */}
-            <div
-              style={{
-                flex: 1,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2,
-                fontSize: 12,
-                minWidth: 0,
-              }}
-            >
-              {breadcrumbSegments.length === 0 ? (
-                <span style={{ color: '#8c8c8c' }}>/</span>
-              ) : (
-                breadcrumbSegments.map((seg, i) => {
-                  const path = breadcrumbSegments.slice(0, i + 1).join('/');
-                  const isLast = i === breadcrumbSegments.length - 1;
-                  return (
-                    <span key={path} style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                      {i === 0 && (
-                        <span
-                          onClick={() => navigate(currentRoot, '')}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter') navigate(currentRoot, '');
-                          }}
-                          role="button"
-                          tabIndex={0}
-                          style={{ cursor: 'pointer', color: '#555' }}
-                        >
-                          /
-                        </span>
-                      )}
-                      {i > 0 && <span style={{ color: '#555' }}>/</span>}
-                      <span
-                        onClick={() => navigate(currentRoot, path)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') navigate(currentRoot, path);
-                        }}
-                        role="button"
-                        tabIndex={0}
-                        style={{
-                          cursor: 'pointer',
-                          color: isLast ? '#c5c8ce' : '#8c8c8c',
-                        }}
-                      >
-                        {seg}
-                      </span>
-                    </span>
-                  );
-                })
-              )}
-            </div>
-
-            {/* Search */}
-            <input
-              type="text"
-              placeholder="Search..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              style={{
-                width: 140,
-                background: '#1e1e1e',
-                border: '1px solid #333',
-                borderRadius: 3,
-                color: '#c5c8ce',
-                fontSize: 11,
-                padding: '2px 6px',
-                outline: 'none',
-              }}
-            />
-          </div>
-
-          {/* Grid */}
-          <div
-            style={{
-              flex: 1,
-              overflowY: 'auto',
-              scrollbarWidth: 'none',
-              padding: 8,
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fill, 80px)',
-              gridAutoRows: 'min-content',
-              gap: 6,
-              alignContent: 'start',
+            Open <kbd>Enter</kbd>
+          </MenuItem>
+          <MenuItem
+            type="button"
+            role="menuitem"
+            data-command-id={PROJECT_ASSET_COMMANDS.rename.id}
+            onClick={() => {
+              void renameItem(contextMenu.item);
+              setContextMenu(null);
             }}
           >
-            {filtered.map((entry) => {
-              const kind = getAssetKind(entry);
-              const isSelected = selectedFile === entry.name;
-              const isImage = kind === 'image';
-              const isModel = kind === 'model';
-              const imgUrl = isImage ? assetServingUrl(currentRoot, currentPath, entry.name) : null;
-              const modelUrl = isModel
-                ? assetServingUrl(currentRoot, currentPath, entry.name)
-                : null;
-
-              return (
-                <div
-                  key={entry.name}
-                  draggable={entry.type === 'file'}
-                  onDragStart={(e) => onDragStart(e, entry)}
-                  onClick={() => setSelectedFile(entry.name)}
-                  onDoubleClick={() => onDoubleClick(entry)}
-                  title={`${entry.name}${entry.type === 'file' ? `\n${formatSize(entry.size)}` : ''}`}
-                  style={{
-                    width: 80,
-                    padding: 4,
-                    borderRadius: 4,
-                    cursor: entry.type === 'directory' ? 'pointer' : 'grab',
-                    background: isSelected ? '#579EFF33' : 'transparent',
-                    border: isSelected ? '1px solid #579EFF' : '1px solid transparent',
-                    textAlign: 'center',
-                    userSelect: 'none',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!isSelected) (e.currentTarget as HTMLDivElement).style.background = '#333';
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!isSelected)
-                      (e.currentTarget as HTMLDivElement).style.background = 'transparent';
-                  }}
-                >
-                  {/* Thumbnail or icon – pointer-events:none so mouse
-                       events hit the parent draggable div directly, which
-                       avoids Chrome failing to initiate drag from SVG children */}
-                  <div
-                    style={{
-                      width: 48,
-                      height: 48,
-                      margin: '0 auto 4px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      overflow: 'hidden',
-                      borderRadius: 3,
-                      pointerEvents: 'none',
-                    }}
-                  >
-                    {imgUrl ? (
-                      <img
-                        src={imgUrl}
-                        alt={entry.name}
-                        style={{
-                          maxWidth: 48,
-                          maxHeight: 48,
-                          objectFit: 'contain',
-                          borderRadius: 2,
-                        }}
-                      />
-                    ) : modelUrl ? (
-                      <ModelThumbnail url={modelUrl} />
-                    ) : (
-                      <AssetIcon kind={kind} />
-                    )}
-                  </div>
-                  {/* Filename */}
-                  <div
-                    style={{
-                      fontSize: 10,
-                      lineHeight: '13px',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                      color: '#c5c8ce',
-                    }}
-                  >
-                    {entry.name}
-                  </div>
-                </div>
-              );
-            })}
-            {filtered.length === 0 && (
-              <div style={{ gridColumn: '1 / -1', color: '#666', fontSize: 12, padding: 16 }}>
-                {searchQuery ? 'No matching files.' : 'Empty folder.'}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </Panel>
+            Rename <kbd>F2</kbd>
+          </MenuItem>
+          <MenuItem
+            type="button"
+            role="menuitem"
+            data-command-id={PROJECT_ASSET_COMMANDS.duplicate.id}
+            onClick={() => {
+              void duplicateItem(contextMenu.item);
+              setContextMenu(null);
+            }}
+          >
+            Duplicate <kbd>⌘D</kbd>
+          </MenuItem>
+          <MenuItem
+            type="button"
+            role="menuitem"
+            data-command-id={PROJECT_ASSET_COMMANDS.copyPath.id}
+            onClick={() => {
+              void navigator.clipboard.writeText(contextMenu.item.name);
+              setContextMenu(null);
+            }}
+          >
+            Copy path
+          </MenuItem>
+          <MenuItem
+            type="button"
+            role="menuitem"
+            data-command-id={PROJECT_ASSET_COMMANDS.reveal.id}
+            onClick={() => {
+              void revealInFinder(`public/${currentPath}`);
+              setContextMenu(null);
+            }}
+          >
+            Reveal in Finder
+          </MenuItem>
+          <MenuItem
+            type="button"
+            role="menuitem"
+            data-command-id={PROJECT_ASSET_COMMANDS.delete.id}
+            disabled={selectedAssetPaths.length === 0}
+            onClick={() => {
+              void deleteSelected();
+              setContextMenu(null);
+            }}
+          >
+            Delete <kbd>⌫</kbd>
+          </MenuItem>
+        </Menu>
+      )}
+    </div>
   );
 }