@anymux/ui-kit 0.1.0

package/src/list/components/ListItems.tsx

@@ -0,0 +1,919 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ListItemsModel } from '../models/ListItemsModel';
+import { ListItem } from './ListItem';
+import { VirtualizedList } from './VirtualizedList';
+import { VirtualizedGrid } from './VirtualizedGrid';
+import { VirtualizedDetailsView } from './VirtualizedDetailsView';
+import { ListContextMenu } from './ListContextMenu';
+import { useListKeyboard } from '../utils/ListKeyboard';
+import { MasonryView } from './MasonryView';
+import { VirtualizedMasonryView } from './VirtualizedMasonryView';
+import { ListLoader } from './shared/ListLoader';
+import { LoadError } from './shared/ErrorDisplay';
+import { NoItems } from './shared/EmptyState';
+import { SearchX } from 'lucide-react';
+import { getListAccessibilityProps, announceToScreenReader, createLiveRegionAnnouncement } from '../utils/ListAccessibility';
+import { benchmark } from '../utils/BenchmarkLogger';
+import { CalculatedGridView } from './CalculatedGridView';
+import { TreemapView } from './TreemapView';
+import type { TileInfo } from './TreemapView';
+import { TreemapModel } from '../models/TreemapModel';
+import { LIST_VIEW_TYPE } from '../providers/ListItemsProvider';
+import type { ListItemData, ListContextMenuItem } from '../types/ListTypes';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from '@anymux/ui/components/pagination';
+
+const ListPagination = observer<{ model: ListItemsModel }>(({ model }) => {
+  if (model.totalPages <= 1) return null;
+
+  const pages: (number | 'ellipsis')[] = [];
+  const total = model.totalPages;
+  const current = model.currentPage;
+
+  pages.push(0);
+  if (current > 2) pages.push('ellipsis');
+  for (let i = Math.max(1, current - 1); i <= Math.min(total - 2, current + 1); i++) {
+    pages.push(i);
+  }
+  if (current < total - 3) pages.push('ellipsis');
+  if (total > 1) pages.push(total - 1);
+
+  return (
+    <Pagination className="py-2 border-t flex-shrink-0">
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            onClick={(e) => { e.preventDefault(); model.prevPage(); }}
+            className={model.hasPreviousPage ? 'cursor-pointer' : 'pointer-events-none opacity-50'}
+          />
+        </PaginationItem>
+        {pages.map((page, i) =>
+          page === 'ellipsis' ? (
+            <PaginationItem key={`e${i}`}>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={page}>
+              <PaginationLink
+                isActive={page === current}
+                onClick={(e) => { e.preventDefault(); model.goToPage(page); }}
+                className="cursor-pointer"
+              >
+                {page + 1}
+              </PaginationLink>
+            </PaginationItem>
+          )
+        )}
+        <PaginationItem>
+          <PaginationNext
+            onClick={(e) => { e.preventDefault(); model.nextPage(); }}
+            className={model.hasNextPage ? 'cursor-pointer' : 'pointer-events-none opacity-50'}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+});
+
+// AICODE-NOTE: Basic list container component that connects model with UI
+
+export interface ListItemsProps {
+  model: ListItemsModel;
+  className?: string;
+  style?: React.CSSProperties;
+  height?: number;
+  width?: number;
+  enableVirtualization?: boolean;
+  enableKeyboardNavigation?: boolean;
+}
+
+export const ListItems = observer<ListItemsProps>(({
+  model,
+  className = '',
+  style,
+  height,
+  width,
+  enableVirtualization = true,
+  enableKeyboardNavigation = true
+}) => {
+  // AICODE-NOTE: Benchmark render performance
+  benchmark.start('ListItems.render', {
+    viewType: model.currentViewType.id,
+    itemCount: model.items.length,
+    enableVirtualization,
+    hasSelection: model.hasSelection
+  });
+  // AICODE-NOTE: Container ref for keyboard navigation
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Auto-measure container size when width/height props are not provided
+  const [measuredSize, setMeasuredSize] = useState({ w: 0, h: 0 });
+  const resizeTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    if (width !== undefined && height !== undefined) return;
+    const el = containerRef.current;
+    if (!el) return;
+    let isFirst = true;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const newW = Math.round(entry.contentRect.width);
+      const newH = Math.round(entry.contentRect.height);
+      if (isFirst) {
+        // First measurement is immediate so layout renders correctly
+        isFirst = false;
+        setMeasuredSize({ w: newW, h: newH });
+        return;
+      }
+      // Subsequent resize events are debounced
+      clearTimeout(resizeTimerRef.current);
+      resizeTimerRef.current = setTimeout(() => {
+        setMeasuredSize({ w: newW, h: newH });
+      }, 150);
+    });
+    ro.observe(el);
+    return () => { ro.disconnect(); clearTimeout(resizeTimerRef.current); };
+  }, [width, height]);
+
+  const effectiveWidth = width ?? measuredSize.w || 800;
+  const effectiveHeight = height ?? measuredSize.h || 600;
+
+  // When no explicit dimensions, use CSS sizing; otherwise inline style
+  const sizeStyle: React.CSSProperties | undefined =
+    height !== undefined || width !== undefined
+      ? { height, width }
+      : undefined;
+  const sizeClass = height === undefined ? 'h-full' : '';
+
+  // AICODE-NOTE: Context menu state
+  const [contextMenu, setContextMenu] = useState<{
+    isOpen: boolean;
+    position: { x: number; y: number };
+    items: ListItemData[];
+  }>({
+    isOpen: false,
+    position: { x: 0, y: 0 },
+    items: []
+  });
+
+  // AICODE-NOTE: Set up keyboard navigation
+  useListKeyboard(
+    model,
+    {
+      enableArrowKeys: true,
+      enableHomeEnd: true,
+      enableSpaceEnter: true,
+      enableSelectAll: true,
+      enableEscape: true,
+      enablePageUpDown: true
+    },
+    enableKeyboardNavigation ? containerRef : undefined
+  );
+
+  // Scroll to item for list/details views (grid/masonry handle it themselves)
+  useEffect(() => {
+    const targetId = model.scrollToItemId;
+    if (!targetId || !containerRef.current) return;
+    const viewType = model.currentViewType.id;
+    if (viewType === 'grid' || viewType.includes('masonry')) return; // handled by grid/masonry views
+    const index = model.items.findIndex(item => item.id === targetId);
+    if (index === -1) return;
+    const divideY = containerRef.current.querySelector('.divide-y');
+    const child = divideY?.children[index] as HTMLElement | undefined;
+    if (child) {
+      child.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+    model.clearScrollToItem();
+  }, [model.scrollToItemId, model]);
+
+  // AICODE-NOTE: Load items when component mounts
+  useEffect(() => {
+    if (model.allItemsCount === 0 && !model.isLoading) {
+      model.loadItems();
+    }
+  }, [model]);
+
+  // AICODE-NOTE: Handle item clicks with proper modifier support
+  const handleItemClick = (item: any, event: React.MouseEvent) => {
+    const modifiers = {
+      ctrl: event.ctrlKey || event.metaKey,
+      shift: event.shiftKey
+    };
+    model.selectItem(item, modifiers);
+  };
+
+  // AICODE-NOTE: Handle item double clicks
+  const handleItemDoubleClick = (item: any, event: React.MouseEvent) => {
+    if (model.provider.onItemDoubleClick) {
+      model.provider.onItemDoubleClick(item);
+    }
+  };
+
+  // AICODE-NOTE: Handle context menu
+  const handleItemContextMenu = (item: any, event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // AICODE-NOTE: If item is not selected, select it first
+    if (!model.isItemSelected(item.id)) {
+      model.selectItem(item);
+    }
+    
+    // AICODE-NOTE: Get items for context menu (selected items or just this item)
+    const contextItems = model.hasSelection ? model.selectedItemsArray : [item];
+    
+    setContextMenu({
+      isOpen: true,
+      position: { x: event.clientX, y: event.clientY },
+      items: contextItems
+    });
+  };
+
+  // AICODE-NOTE: Close context menu
+  const handleCloseContextMenu = () => {
+    setContextMenu(prev => ({ ...prev, isOpen: false }));
+  };
+
+  // AICODE-NOTE: Handle empty-space right-click for "New Folder" / "New File" actions
+  const handleContainerContextMenu = (event: React.MouseEvent) => {
+    // Only fire if the target is the container itself (not an item)
+    // Item context menus call stopPropagation, so this only fires for empty space
+    event.preventDefault();
+    const emptyMenuItems = model.provider.getEmptySpaceContextMenu?.();
+    if (emptyMenuItems && emptyMenuItems.length > 0) {
+      setContextMenu({
+        isOpen: true,
+        position: { x: event.clientX, y: event.clientY },
+        items: [] // empty items array signals empty-space menu
+      });
+    }
+  };
+
+  // AICODE-NOTE: Drag and drop handlers
+  const handleItemDragStart = (item: ListItemData, event: React.DragEvent) => {
+    // AICODE-NOTE: Determine items to drag before any selection changes
+    let itemsToDrag: ListItemData[];
+    
+    if (model.isItemSelected(item.id) && model.hasSelection) {
+      // Item is already selected and we have a selection - drag all selected items
+      itemsToDrag = model.selectedItemsArray;
+    } else {
+      // Item is not selected or no selection - select it first, then drag just this item
+      model.selectItem(item);
+      itemsToDrag = [item];
+    }
+    
+    model.startDrag(itemsToDrag, event.nativeEvent as DragEvent);
+  };
+
+  const handleItemDragOver = (item: ListItemData, event: React.DragEvent) => {
+    if (!model.isDragging) return;
+    
+    // AICODE-NOTE: Calculate drop position based on mouse position
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    const y = event.clientY - rect.top;
+    const height = rect.height;
+    
+    let position: 'before' | 'after' | 'inside' = 'inside';
+    
+    if (y < height * 0.25) {
+      position = 'before';
+    } else if (y > height * 0.75) {
+      position = 'after';
+    } else {
+      position = 'inside';
+    }
+    
+    // AICODE-NOTE: Check if drop is allowed
+    if (model.canDropItems(model.draggedItems, item, position)) {
+      model.setDragOver(item.id, position);
+    }
+  };
+
+  const handleItemDragLeave = (item: ListItemData, event: React.DragEvent) => {
+    // AICODE-NOTE: Only clear drag over if we're actually leaving the item
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = event.clientX;
+    const y = event.clientY;
+    
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      model.setDragOver(null, null);
+    }
+  };
+
+  const handleItemDrop = (item: ListItemData, event: React.DragEvent) => {
+    if (!model.isDragging) return;
+    
+    // AICODE-NOTE: Calculate drop position
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    const y = event.clientY - rect.top;
+    const height = rect.height;
+    
+    let position: 'before' | 'after' | 'inside' = 'inside';
+    
+    if (y < height * 0.25) {
+      position = 'before';
+    } else if (y > height * 0.75) {
+      position = 'after';
+    } else {
+      position = 'inside';
+    }
+    
+    model.handleDrop(item, position, event.nativeEvent as DragEvent);
+  };
+
+  // AICODE-NOTE: Handle drag end
+  const handleDragEnd = () => {
+    if (model.isDragging) {
+      model.endDrag(false);
+    }
+  };
+
+  // AICODE-NOTE: Get item width from provider if available
+  const getItemWidth = () => {
+    // AICODE-NOTE: Use model dimensions first (from size controls), then fallback to provider
+    if (model.currentViewType.id === 'grid' || model.currentViewType.id.includes('masonry')) {
+      return model.itemDimensions.width;
+    }
+    
+    if (model.provider.getItemWidth) {
+      return model.provider.getItemWidth(model.currentViewType);
+    }
+    return undefined;
+  };
+
+  // AICODE-NOTE: Get item height from model dimensions
+  const getItemHeight = () => {
+    if (model.currentViewType.id === 'grid' || model.currentViewType.id.includes('masonry')) {
+      return model.itemDimensions.height;
+    }
+    return undefined;
+  };
+
+  // AICODE-NOTE: Render loading state with skeleton
+  if (model.isLoading && model.allItemsCount === 0) {
+    benchmark.end('ListItems.render', { renderType: 'loading' });
+    return (
+      <div
+        ref={containerRef}
+        className={`${sizeClass} ${className}`}
+        style={sizeStyle}
+        tabIndex={0}
+      >
+        <ListLoader
+          viewType={model.currentViewType}
+          itemCount={12}
+          itemWidth={model.itemDimensions.width}
+          itemHeight={model.itemDimensions.height}
+          className="w-full h-full"
+        />
+      </div>
+    );
+  }
+
+  // AICODE-NOTE: Render error state
+  if (model.hasErrors && model.allItemsCount === 0) {
+    const errors = Array.from(model.errors.values());
+    const firstError = errors[0] || new Error('Unknown error occurred');
+    benchmark.end('ListItems.render', { renderType: 'error' });
+    return (
+      <div
+        ref={containerRef}
+        className={`flex items-center justify-center ${sizeClass} ${className}`}
+        style={sizeStyle}
+        tabIndex={0}
+      >
+        <LoadError
+          error={firstError}
+          onRetry={() => model.refresh()}
+          className="max-w-md"
+        />
+      </div>
+    );
+  }
+
+  // AICODE-NOTE: Render empty state
+  if (!model.isLoading && model.items.length === 0) {
+    benchmark.end('ListItems.render', { renderType: 'empty' });
+
+    // Search returned no results but directory has items
+    if (model.hasSearchQuery) {
+      return (
+        <div
+          ref={containerRef}
+          className={`flex flex-col items-center justify-center gap-2 text-muted-foreground ${sizeClass} ${className}`}
+          style={sizeStyle}
+          tabIndex={0}
+        >
+          <SearchX className="w-10 h-10 opacity-40" />
+          <p className="text-sm">No files match &ldquo;{model.searchQuery}&rdquo;</p>
+          <button
+            onClick={() => model.clearSearch()}
+            className="text-xs text-primary hover:underline"
+          >
+            Clear filter
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <>
+        <div
+          ref={containerRef}
+          className={`${sizeClass} ${className}`}
+          style={sizeStyle}
+          tabIndex={0}
+          onContextMenu={handleContainerContextMenu}
+        >
+          <NoItems
+            onRefresh={() => model.refresh()}
+            className="h-full"
+          />
+        </div>
+        <ListContextMenu
+          isOpen={contextMenu.isOpen}
+          position={contextMenu.position}
+          items={contextMenu.items}
+          provider={model.provider}
+          onClose={handleCloseContextMenu}
+        />
+      </>
+    );
+  }
+
+  // AICODE-NOTE: Base container styles
+  const containerClasses = `
+    h-full w-full overflow-auto 
+    ${className}
+  `;
+
+  // AICODE-NOTE: Generate accessibility props
+  const accessibilityProps = getListAccessibilityProps({
+    viewType: model.currentViewType.id,
+    isMultiSelect: model.provider.isMultiSelectEnabled,
+    totalItems: model.totalItemCount,
+    selectedCount: model.selectedItemsArray.length,
+    label: `${model.currentViewType.name} view`
+  });
+
+  // AICODE-NOTE: Treemap layout for treemap view
+  if (model.currentViewType.id === 'treemap') {
+    benchmark.end('ListItems.render', { renderType: 'treemap' });
+    return (
+      <TreemapSection
+        model={model}
+        containerRef={containerRef}
+        sizeClass={sizeClass}
+        className={className}
+        sizeStyle={sizeStyle}
+        effectiveWidth={effectiveWidth}
+        effectiveHeight={effectiveHeight}
+        contextMenu={contextMenu}
+        setContextMenu={setContextMenu}
+        handleCloseContextMenu={handleCloseContextMenu}
+        handleContainerContextMenu={handleContainerContextMenu}
+      />
+    );
+  }
+
+  // AICODE-NOTE: Grid layout for grid view
+  if (model.currentViewType.id === 'grid') {
+    benchmark.end('ListItems.render', { renderType: 'grid-calculated' });
+    return (
+      <>
+        <CalculatedGridView
+          model={model}
+          className={`${sizeClass} ${className}`}
+          height={effectiveHeight}
+          width={effectiveWidth}
+          enableVirtualization={enableVirtualization}
+          onItemClick={handleItemClick}
+          onItemDoubleClick={handleItemDoubleClick}
+          onItemContextMenu={handleItemContextMenu}
+          onItemDragStart={handleItemDragStart}
+          onItemDragOver={handleItemDragOver}
+          onItemDragLeave={handleItemDragLeave}
+          onItemDrop={handleItemDrop}
+        />
+        <ListPagination model={model} />
+
+        {/* AICODE-NOTE: Context menu */}
+        <ListContextMenu
+          isOpen={contextMenu.isOpen}
+          position={contextMenu.position}
+          items={contextMenu.items}
+          provider={model.provider}
+          onClose={handleCloseContextMenu}
+        />
+      </>
+    );
+  }
+
+  // AICODE-NOTE: Masonry layouts for masonry views
+  if (model.currentViewType.id === 'masonry-horizontal' || model.currentViewType.id === 'masonry-vertical') {
+    // AICODE-NOTE: Always use virtualized masonry when container dimensions are available
+    // Masonry layouts can have thousands of items, so virtualization is essential
+    if (effectiveHeight && effectiveWidth) {
+      benchmark.end('ListItems.render', { renderType: 'masonry-virtualized' });
+      return (
+        <>
+          <div ref={containerRef} tabIndex={0} className={`${sizeClass} ${className}`} style={sizeStyle}>
+            <VirtualizedMasonryView
+              model={model}
+              items={model.items}
+              containerWidth={effectiveWidth}
+              containerHeight={effectiveHeight}
+              isHorizontal={model.currentViewType.id === 'masonry-horizontal'}
+              overscanCount={10}
+              className="w-full h-full"
+            />
+          </div>
+          <ListPagination model={model} />
+
+          {/* AICODE-NOTE: Context menu */}
+          <ListContextMenu
+            isOpen={contextMenu.isOpen}
+            position={contextMenu.position}
+            items={contextMenu.items}
+            provider={model.provider}
+            onClose={handleCloseContextMenu}
+          />
+        </>
+      );
+    }
+
+    // AICODE-NOTE: Fallback to non-virtualized masonry (when container dimensions not yet available)
+    benchmark.end('ListItems.render', { renderType: 'masonry-standard' });
+    return (
+      <>
+        <div
+          ref={containerRef}
+          className={`overflow-y-auto overflow-x-hidden ${sizeClass} ${className}`}
+          style={sizeStyle}
+          tabIndex={0}
+        >
+          <MasonryView
+            model={model}
+            items={model.items}
+            containerWidth={effectiveWidth}
+            containerHeight={effectiveHeight}
+            isHorizontal={model.currentViewType.id === 'masonry-horizontal'}
+          />
+        </div>
+        <ListPagination model={model} />
+
+        {/* AICODE-NOTE: Context menu */}
+        <ListContextMenu
+          isOpen={contextMenu.isOpen}
+          position={contextMenu.position}
+          items={contextMenu.items}
+          provider={model.provider}
+          onClose={handleCloseContextMenu}
+        />
+      </>
+    );
+  }
+
+  // AICODE-NOTE: Details view with headers
+  if (model.currentViewType.id === 'details') {
+    // AICODE-NOTE: Use virtualized details view if enabled and height provided
+    if (enableVirtualization && effectiveHeight && model.provider.isVirtualizationEnabled) {
+      benchmark.end('ListItems.render', { renderType: 'details-virtualized' });
+      return (
+        <>
+          <div ref={containerRef} tabIndex={0} className={`${sizeClass} ${className}`} style={sizeStyle}>
+            <VirtualizedDetailsView
+              model={model}
+              height={effectiveHeight}
+              width={effectiveWidth}
+            />
+          </div>
+          <ListPagination model={model} />
+        </>
+      );
+    }
+
+    // AICODE-NOTE: Fallback to non-virtualized details view
+    benchmark.end('ListItems.render', { renderType: 'details-standard' });
+    return (
+      <>
+        <div
+          ref={containerRef}
+          className={`overflow-auto ${sizeClass} ${className}`}
+          style={sizeStyle}
+          role={accessibilityProps.role}
+          aria-label={accessibilityProps.ariaLabel}
+          aria-multiselectable={accessibilityProps.ariaMultiSelectable}
+          tabIndex={accessibilityProps.tabIndex}
+          onContextMenu={handleContainerContextMenu}
+        >
+          {/* AICODE-NOTE: Column headers — same CSS grid as ListItem details rows */}
+          <div
+            className="sticky top-0 grid items-center bg-background border-b px-4 py-2 text-sm font-medium text-muted-foreground"
+            style={{ gridTemplateColumns: model.detailsGridTemplateColumns, columnGap: 16 }}
+          >
+            {model.showCheckboxes && (
+              <div className="flex items-center justify-center">
+                <input
+                  type="checkbox"
+                  checked={model.items.length > 0 && model.selectedItems.size === model.items.length}
+                  ref={(el) => {
+                    if (el) el.indeterminate = model.selectedItems.size > 0 && model.selectedItems.size < model.items.length;
+                  }}
+                  onChange={() => {
+                    if (model.selectedItems.size === model.items.length) {
+                      model.clearSelection();
+                    } else {
+                      model.selectAll();
+                    }
+                  }}
+                  className="h-3.5 w-3.5 rounded border-muted-foreground/50 accent-primary cursor-pointer"
+                  aria-label="Select all"
+                />
+              </div>
+            )}
+            <div />
+            <div>Name</div>
+            {!model.compactMode && model.columnVisibility.type && <div>Type</div>}
+            {!model.compactMode && model.columnVisibility.modified && <div>Modified</div>}
+            {!model.compactMode && model.columnVisibility.size && <div className="text-right">Size</div>}
+          </div>
+          
+          {/* AICODE-NOTE: Items */}
+          <div className="divide-y">
+            {benchmark.time('details-items-render', () => {
+              return model.items.map((item, index) => (
+                <ListItem
+                  key={item.id}
+                  item={item}
+                  index={index}
+                  totalItems={model.totalItemCount}
+                  viewType={model.currentViewType}
+                  provider={model.provider}
+                  model={model}
+                  isSelected={model.isItemSelected(item.id)}
+                  isFocused={model.focusedItem === item.id}
+                  isDraggedOver={model.dragOverItem === item.id}
+                  dragOverPosition={model.dragOverItem === item.id ? model.dragOverPosition : null}
+                  canDrag={model.canDragItem(item)}
+                  onClick={handleItemClick}
+                  onDoubleClick={handleItemDoubleClick}
+                  onContextMenu={handleItemContextMenu}
+                  onDragStart={handleItemDragStart}
+                  onDragOver={handleItemDragOver}
+                  onDragLeave={handleItemDragLeave}
+                  onDrop={handleItemDrop}
+                />
+              ));
+            })}
+          </div>
+        </div>
+        <ListPagination model={model} />
+
+        {/* AICODE-NOTE: Context menu */}
+        <ListContextMenu
+          isOpen={contextMenu.isOpen}
+          position={contextMenu.position}
+          items={contextMenu.items}
+          provider={model.provider}
+          onClose={handleCloseContextMenu}
+        />
+      </>
+    );
+  }
+
+  // AICODE-NOTE: Default list view — use virtualized list if enabled and height provided
+  if (enableVirtualization && effectiveHeight && model.provider.isVirtualizationEnabled) {
+    benchmark.end('ListItems.render', { renderType: 'list-virtualized' });
+    return (
+      <>
+        <div ref={containerRef} tabIndex={0} className={`${sizeClass} ${className}`} style={sizeStyle}>
+          <VirtualizedList
+            model={model}
+            height={effectiveHeight}
+            width={effectiveWidth}
+          />
+        </div>
+        <ListPagination model={model} />
+      </>
+    );
+  }
+
+  benchmark.end('ListItems.render', { renderType: 'list-standard' });
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className={`overflow-auto ${sizeClass} ${className}`}
+        style={sizeStyle}
+        role={accessibilityProps.role}
+        aria-label={accessibilityProps.ariaLabel}
+        aria-multiselectable={accessibilityProps.ariaMultiSelectable}
+        tabIndex={accessibilityProps.tabIndex}
+        onContextMenu={handleContainerContextMenu}
+      >
+        <div className="divide-y">
+          {benchmark.time('list-items-render', () => {
+            return model.items.map((item, index) => (
+              <ListItem
+                key={item.id}
+                item={item}
+                index={index}
+                totalItems={model.totalItemCount}
+                viewType={model.currentViewType}
+                provider={model.provider}
+                model={model}
+                isSelected={model.isItemSelected(item.id)}
+                isFocused={model.focusedItem === item.id}
+                isDraggedOver={model.dragOverItem === item.id}
+                dragOverPosition={model.dragOverItem === item.id ? model.dragOverPosition : null}
+                canDrag={model.canDragItem(item)}
+                onClick={handleItemClick}
+                onDoubleClick={handleItemDoubleClick}
+                onContextMenu={handleItemContextMenu}
+                onDragStart={handleItemDragStart}
+                onDragOver={handleItemDragOver}
+                onDragLeave={handleItemDragLeave}
+                onDrop={handleItemDrop}
+              />
+            ));
+          })}
+        </div>
+      </div>
+      <ListPagination model={model} />
+
+      {/* AICODE-NOTE: Context menu */}
+      <ListContextMenu
+        isOpen={contextMenu.isOpen}
+        position={contextMenu.position}
+        items={contextMenu.items}
+        provider={model.provider}
+        onClose={handleCloseContextMenu}
+      />
+    </>
+  );
+});
+
+ListItems.displayName = 'ListItems';
+
+/** Treemap section — owns the TreemapModel and wires context menu */
+const TreemapSection = observer<{
+  model: ListItemsModel;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  sizeClass: string;
+  className: string;
+  sizeStyle: React.CSSProperties | undefined;
+  effectiveWidth: number;
+  effectiveHeight: number;
+  contextMenu: { isOpen: boolean; position: { x: number; y: number }; items: ListItemData[] };
+  setContextMenu: React.Dispatch<React.SetStateAction<{ isOpen: boolean; position: { x: number; y: number }; items: ListItemData[] }>>;
+  handleCloseContextMenu: () => void;
+  handleContainerContextMenu: (event: React.MouseEvent) => void;
+}>(({
+  model,
+  containerRef,
+  sizeClass,
+  className,
+  sizeStyle,
+  effectiveWidth,
+  effectiveHeight,
+  contextMenu,
+  setContextMenu,
+  handleCloseContextMenu,
+  handleContainerContextMenu,
+}) => {
+  const treemapModelRef = useRef<TreemapModel | null>(null);
+  if (!treemapModelRef.current) {
+    treemapModelRef.current = new TreemapModel();
+  }
+  const treemapModel = treemapModelRef.current;
+
+  // Track the context-menu'd item for treemap-specific actions
+  const contextItemRef = useRef<ListItemData | null>(null);
+
+  const handleTileContextMenu = (info: TileInfo, event: React.MouseEvent) => {
+    // Build a fake ListItemData from TileInfo
+    const fakeItem: ListItemData = {
+      id: info.path,
+      name: info.name,
+      path: info.path,
+      type: info.isDirectory ? 'directory' : 'file',
+      isDirectory: info.isDirectory,
+      size: info.size,
+    };
+
+    // Select item in model
+    if (!model.isItemSelected(fakeItem.id)) {
+      model.selectItem(fakeItem);
+    }
+
+    contextItemRef.current = fakeItem;
+
+    const contextItems = model.hasSelection ? model.selectedItemsArray : [fakeItem];
+    setContextMenu({
+      isOpen: true,
+      position: { x: event.clientX, y: event.clientY },
+      items: contextItems,
+    });
+  };
+
+  const handleEmptyContextMenu = (event: React.MouseEvent) => {
+    contextItemRef.current = null;
+    handleContainerContextMenu(event);
+  };
+
+  // Build treemap-specific extra menu items
+  const extraMenuItems = useMemo((): ListContextMenuItem[] => {
+    const item = contextItemRef.current;
+    if (!item) return [];
+
+    const items: ListContextMenuItem[] = [];
+
+    if (item.isDirectory) {
+      items.push({
+        id: 'zoom-into',
+        label: 'Zoom Into',
+        icon: 'zoom-in',
+        type: 'item',
+      });
+    }
+
+    items.push({
+      id: 'show-in-list',
+      label: 'Show in File Browser',
+      icon: 'list',
+      type: 'item',
+    });
+
+    items.push({
+      id: 'sep-treemap',
+      label: '',
+      type: 'separator',
+    });
+
+    return items;
+    // Re-derive when context menu opens (items change)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contextMenu.isOpen, contextMenu.items]);
+
+  const handleExtraMenuAction = (actionId: string, items: ListItemData[]) => {
+    const item = items[0];
+    if (!item) return;
+
+    if (actionId === 'zoom-into') {
+      treemapModel.zoomIn(item.path);
+    } else if (actionId === 'show-in-list') {
+      // Switch to list view
+      model.setViewType(LIST_VIEW_TYPE);
+      // Navigate to parent directory
+      if (model.provider.onItemDoubleClick) {
+        const parentPath = item.path.split('/').slice(0, -1).join('/');
+        const parentName = parentPath.split('/').pop() || '';
+        const parentItem: ListItemData = {
+          id: parentPath,
+          name: parentName,
+          path: parentPath,
+          type: 'directory',
+          isDirectory: true,
+        };
+        model.provider.onItemDoubleClick(parentItem);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div ref={containerRef} tabIndex={0} className={`${sizeClass} ${className}`} style={sizeStyle}>
+        <TreemapView
+          model={model}
+          treemapModel={treemapModel}
+          width={effectiveWidth}
+          height={effectiveHeight}
+          onTileContextMenu={handleTileContextMenu}
+          onEmptyContextMenu={handleEmptyContextMenu}
+        />
+      </div>
+      <ListContextMenu
+        isOpen={contextMenu.isOpen}
+        position={contextMenu.position}
+        items={contextMenu.items}
+        provider={model.provider}
+        onClose={handleCloseContextMenu}
+        extraMenuItems={extraMenuItems}
+        onExtraMenuAction={handleExtraMenuAction}
+      />
+    </>
+  );
+});
+
+TreemapSection.displayName = 'TreemapSection';