@vgai/editor 0.2.0 → 0.4.0-canary.20260715.1

package/src/components/AssetBrowser.tsx

@@ -1,37 +1,66 @@
 import {
-  faArrowsRotate,
+  faArrowLeft,
+  faBoxArchive,
   faCubes,
+  faEllipsis,
   faFile,
   faFileCode,
   faFileImage,
   faFolder,
+  faList,
   faMusic,
   faPaintbrush,
   faPuzzlePiece,
   faImage as faSceneIcon,
+  faTableCellsLarge,
 } 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 } 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 { openAssetDocument } from './asset-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 +70,18 @@ type AssetKind =
   | 'audio'
   | 'json'
   | 'folder'
+  | 'source'
   | 'unknown';
 
+type BrowserKind = AssetKind;
+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',
@@ -66,9 +91,10 @@ const assetIconColors: Record<AssetKind, string> = {
   image: '#f472b6',
   json: '#fbbf24',
   unknown: '#6b7280',
+  source: '#fb923c',
 };
 
-const assetIconMap: Record<AssetKind, typeof faFolder> = {
+const assetIconMap: Record<BrowserKind, typeof faFolder> = {
   folder: faFolder,
   model: faCubes,
   scene: faSceneIcon,
@@ -78,38 +104,81 @@ const assetIconMap: Record<AssetKind, typeof faFolder> = {
   image: faFileImage,
   json: faFileCode,
   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 +196,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 +209,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 +230,721 @@ 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 {
+  currentPath: string;
+  viewMode: AssetViewMode;
+  sort: AssetSort;
+  filter: AssetFilter;
+  density: number;
+}
+
+const DEFAULT_BROWSER_STATE: PersistedAssetBrowserState = {
+  currentPath: '',
+  viewMode: 'grid',
+  sort: 'name',
+  filter: 'all',
+  density: 96,
+};
+
+function readAssetBrowserState(): PersistedAssetBrowserState {
+  try {
+    const projectId = getCurrentProject()?.rootPath ?? '__unscoped__';
+    const parsed = JSON.parse(
+      localStorage.getItem(projectAssetBrowserStateKey(projectId)) ?? '{}',
+    ) as Partial<PersistedAssetBrowserState>;
+    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;
+  }
+}
+
 // --- Main Component ---
 
 interface AssetBrowserProps {
   onOpenScene?: (assetPath: string) => void;
 }
 
+type AssetRoot = 'public';
+type AssetViewMode = 'grid' | 'list';
+type AssetSort = 'name' | 'type' | 'size' | 'health';
+type AssetFilter =
+  | 'all'
+  | 'runtime-ready'
+  | 'source-only'
+  | 'unsupported'
+  | 'imported'
+  | 'generated';
+
+type BrowserEntry = { source: 'asset'; key: string; name: string; entry: AssetEntry };
+
+function browserEntryKind(item: BrowserEntry): BrowserKind {
+  return getAssetKind(item.entry);
+}
+
+function parentAssetPath(path: string): string {
+  const separator = path.lastIndexOf('/');
+  return separator < 0 ? '' : path.slice(0, separator);
+}
+
+function openProjectAssetEntry(
+  entry: AssetEntry,
+  options: {
+    currentRoot: AssetRoot;
+    currentPath: string;
+    navigate: (root: AssetRoot, 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 {
+  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;
+}
+
+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,
+  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' || modelThumbnailFormat(assetUrl)) {
+    return <ModelThumbnail url={assetUrl} />;
+  }
+  if (['audio', 'material', 'scene', 'prefab', 'json'].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;
+  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.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
+      ? capability?.placeable
+        ? 'grab'
+        : 'pointer'
+      : 'default'
+    : 'pointer';
+  const detail = browserEntryDetail(item);
+  const grid = viewMode === 'grid';
+
+  return (
+    <div
+      className="vgai-selectable"
+      data-selected={selected || 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 {
+  currentPath: string;
+  searchOpen: boolean;
+  searchQuery: string;
+  viewMode: AssetViewMode;
+  sort: AssetSort;
+  filter: AssetFilter;
+  density: number;
+  onNavigate: (root: AssetRoot, 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({
+  currentPath,
+  searchOpen,
+  searchQuery,
+  viewMode,
+  sort,
+  filter,
+  density,
+  onNavigate,
+  onSearchOpenChange,
+  onSearchQueryChange,
+  onViewModeChange,
+  onSortChange,
+  onFilterChange,
+  onDensityChange,
+  onCreateFolder,
+  onImport,
+  onDelete,
+  deleteDisabled,
+  onRefresh,
+}: AssetBrowserToolbarProps) {
+  const actionsRef = useRef<HTMLDivElement>(null);
+  const [actionsOpen, setActionsOpen] = useState(false);
+  const breadcrumbSegments = currentPath ? currentPath.split('/') : [];
+  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 (
+    <div className="vgai-project-assets-toolbar">
+      <EditorToolbar label="Asset navigation" compact className="vgai-project-assets-toolbar__row">
+        <Tooltip text="Back" position="top">
+          <IconButton
+            data-testid="asset-back"
+            aria-label="Back"
+            disabled={!currentPath}
+            onClick={() => onNavigate('public', 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 }}
+          />
+        ) : (
+          <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('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
+            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>
+      </EditorToolbar>
+      <EditorToolbar
+        label="Asset browser controls"
+        compact
+        className="vgai-project-assets-toolbar__row"
+      >
+        <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)}
+        >
+          <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={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>
+      </EditorToolbar>
+    </div>
+  );
+}
+
 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 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 [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({
+        currentPath,
+        viewMode,
+        sort,
+        filter,
+        density,
+      } satisfies PersistedAssetBrowserState),
+    );
+  }, [currentPath, density, filter, sort, viewMode]);
+
+  const fetchEntries = useCallback(async (root: AssetRoot, dir: string) => {
     const key = `${root}:${dir}`;
     const cached = cacheRef.current.get(key);
     if (cached) {
@@ -196,26 +964,47 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     fetchEntries(currentRoot, currentPath);
   }, [currentRoot, currentPath, fetchEntries]);
 
-  const navigate = useCallback((root: string, path: string) => {
-    setCurrentRoot(root);
+  const navigate = useCallback((_root: AssetRoot, path: string) => {
     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;
+  // 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[]>(() => {
+    return entries.map((entry) => ({
+      source: 'asset' as const,
+      key: `asset:${currentPath}:${entry.name}`,
+      name: entry.name,
+      entry,
+    }));
+  }, [currentPath, entries]);
+  const filtered = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    const visible = browserEntries.filter((item) => {
+      if (query && !item.name.toLowerCase().includes(query)) return false;
+      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, entry: AssetEntry) => {
-      const kind = getAssetKind(entry);
-      if (kind === 'folder') return;
+    (e: React.DragEvent, item: BrowserEntry) => {
+      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,25 +1015,89 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     [currentRoot, currentPath],
   );
 
-  // --- Double-click handler ---
-  const onDoubleClick = useCallback(
-    (entry: AssetEntry) => {
-      if (entry.type === 'directory') {
-        navigate(currentRoot, currentPath ? `${currentPath}/${entry.name}` : entry.name);
-        return;
+  // --- 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);
       }
-      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);
+      setSelectedFiles(next);
+      const { entry } = item;
+      if (entry.type === 'directory') {
+        clearSelectedAsset();
         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);
-      }
+      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) => {
+      openProjectAssetEntry(item.entry, {
+        currentRoot,
+        currentPath,
+        navigate,
+        ...(onOpenScene ? { onOpenScene } : {}),
+        openAsset: (url, kind) => openAssetDocument(store, url, kind),
+      });
     },
     [currentRoot, currentPath, navigate, onOpenScene, store],
   );
@@ -262,241 +1115,328 @@ 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.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.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.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],
+  );
+
+  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',
+        flexDirection: 'column',
+        flex: 1,
+        minHeight: 0,
+        position: 'relative',
+      }}
     >
-      <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
-        {/* Folder tree */}
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0 }}>
+        <TextInput
+          ref={importInputRef}
+          type="file"
+          multiple
+          aria-label="Import project assets"
+          hidden
+          onChange={(event) => {
+            void importFiles(event.target.files);
+            event.currentTarget.value = '';
+          }}
+        />
+        <AssetBrowserToolbar
+          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>
   );
 }