@anymux/ui-kit 0.1.0

package/src/list/components/CalculatedGridView.tsx

@@ -0,0 +1,252 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ListItemsModel } from '../models/ListItemsModel';
+import { ListItem } from './ListItem';
+import type { GridItemLayout } from '../utils/GridLayoutCalculator';
+import type { ListItemData } from '../types/ListTypes';
+
+// AICODE-NOTE: Grid view component using precise calculator-based positioning
+export interface CalculatedGridViewProps {
+  model: ListItemsModel;
+  className?: string;
+  height?: number;
+  width?: number;
+  enableVirtualization?: boolean;
+  onItemClick?: (item: ListItemData, event: React.MouseEvent) => void;
+  onItemDoubleClick?: (item: ListItemData, event: React.MouseEvent) => void;
+  onItemContextMenu?: (item: ListItemData, event: React.MouseEvent) => void;
+  onItemDragStart?: (item: ListItemData, event: React.DragEvent) => void;
+  onItemDragOver?: (item: ListItemData, event: React.DragEvent) => void;
+  onItemDragLeave?: (item: ListItemData, event: React.DragEvent) => void;
+  onItemDrop?: (item: ListItemData, event: React.DragEvent) => void;
+}
+
+// AICODE-NOTE: Extract grid item into separate observer component for MobX reactivity
+interface GridItemWrapperProps {
+  item: ListItemData;
+  layout: GridItemLayout;
+  index: number;
+  model: ListItemsModel;
+  onItemClick?: (item: ListItemData, event: React.MouseEvent) => void;
+  onItemDoubleClick?: (item: ListItemData, event: React.MouseEvent) => void;
+  onItemContextMenu?: (item: ListItemData, event: React.MouseEvent) => void;
+  onItemDragStart?: (item: ListItemData, event: React.DragEvent) => void;
+  onItemDragOver?: (item: ListItemData, event: React.DragEvent) => void;
+  onItemDragLeave?: (item: ListItemData, event: React.DragEvent) => void;
+  onItemDrop?: (item: ListItemData, event: React.DragEvent) => void;
+}
+
+const GridItemWrapper = observer<GridItemWrapperProps>(({
+  item,
+  layout,
+  index,
+  model,
+  onItemClick,
+  onItemDoubleClick,
+  onItemContextMenu,
+  onItemDragStart,
+  onItemDragOver,
+  onItemDragLeave,
+  onItemDrop
+}) => (
+  <div
+    data-item-id={item.id}
+    style={{
+      position: 'absolute',
+      left: layout.x,
+      top: layout.y,
+      width: layout.width,
+      height: layout.height
+    }}
+  >
+    <ListItem
+      item={item}
+      index={index}
+      totalItems={model.totalItemCount}
+      viewType={model.currentViewType}
+      provider={model.provider}
+      model={model}
+      itemWidth={layout.width}
+      itemHeight={layout.height}
+      thumbnailSize={layout.thumbnailSize}
+      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={onItemClick}
+      onDoubleClick={onItemDoubleClick}
+      onContextMenu={onItemContextMenu}
+      onDragStart={onItemDragStart}
+      onDragOver={onItemDragOver}
+      onDragLeave={onItemDragLeave}
+      onDrop={onItemDrop}
+    />
+  </div>
+));
+
+GridItemWrapper.displayName = 'CalculatedGridItemWrapper';
+
+const CalculatedGridViewComponent: React.FC<CalculatedGridViewProps> = ({
+  model,
+  className = '',
+  height,
+  width,
+  enableVirtualization = true,
+  onItemClick,
+  onItemDoubleClick,
+  onItemContextMenu,
+  onItemDragStart,
+  onItemDragOver,
+  onItemDragLeave,
+  onItemDrop
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  // AICODE-NOTE: Initialize with provided dimensions so first render doesn't flash at 0x0
+  const [containerSize, setContainerSize] = useState({ width: width || 0, height: height || 0 });
+  const [hasMeasured, setHasMeasured] = useState(!!(width && height));
+
+  // AICODE-NOTE: Update container size when dimensions change
+  useEffect(() => {
+    const updateSize = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        const newSize = {
+          width: width || rect.width,
+          height: height || rect.height
+        };
+        setContainerSize(newSize);
+        setHasMeasured(true);
+        model.updateContainerSize(newSize.width, newSize.height);
+      }
+    };
+
+    updateSize();
+    
+    // Set up resize observer
+    const resizeObserver = new ResizeObserver(updateSize);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [width, height, model]);
+
+  // AICODE-NOTE: Handle scroll for virtualization
+  const handleScroll = useCallback(() => {
+    if (containerRef.current) {
+      setScrollTop(containerRef.current.scrollTop);
+    }
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !enableVirtualization) return;
+
+    let ticking = false;
+    const throttledScroll = () => {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          handleScroll();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    container.addEventListener('scroll', throttledScroll);
+    return () => {
+      container.removeEventListener('scroll', throttledScroll);
+    };
+  }, [handleScroll, enableVirtualization]);
+
+  // Scroll to item when model requests it
+  useEffect(() => {
+    const targetId = model.scrollToItemId;
+    if (!targetId || !containerRef.current) return;
+    const el = containerRef.current.querySelector(`[data-item-id="${CSS.escape(targetId)}"]`);
+    if (el) {
+      el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+    model.clearScrollToItem();
+  }, [model.scrollToItemId, model]);
+
+  // AICODE-NOTE: Don't render items until container has been measured to prevent 0→final size flash
+  const gridLayout = model.getGridLayout();
+  if (!gridLayout || !hasMeasured || containerSize.width === 0) {
+    return (
+      <div
+        ref={containerRef}
+        className={`relative overflow-auto ${className}`}
+        style={{ height, width, overflowX: 'hidden' }}
+      />
+    );
+  }
+
+  const { layout: itemLayouts, totalHeight } = gridLayout;
+
+  // AICODE-NOTE: Determine which items to render
+  let visibleItems: Array<{ item: ListItemData; layout: GridItemLayout; index: number }> = [];
+
+  if (enableVirtualization && containerSize.height > 0) {
+    // Use virtualization - only render visible items
+    const visibleLayouts = model.getVisibleGridItems(scrollTop, containerSize.height);
+    visibleItems = visibleLayouts.map((layout, layoutIndex) => {
+      // Find the actual item index from the layout position
+      const itemIndex = itemLayouts.findIndex(l => l.x === layout.x && l.y === layout.y);
+      const item = model.items[itemIndex];
+      return item ? { item, layout, index: itemIndex } : null;
+    }).filter(Boolean) as Array<{ item: ListItemData; layout: GridItemLayout; index: number }>;
+  } else {
+    // Render all items
+    visibleItems = model.items.map((item, index) => {
+      const layout = itemLayouts[index];
+      return layout ? { item, layout, index } : null;
+    }).filter(Boolean) as Array<{ item: ListItemData; layout: GridItemLayout; index: number }>;
+  }
+
+      // console.log('🎨 [CALCULATED GRID] Rendering', visibleItems.length, 'items out of', model.items.length, 'total');
+      // console.log('📐 [GRID LAYOUT] Container:', containerSize, 'Total height:', totalHeight);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`relative overflow-auto ${className}`}
+      style={{ height, width, overflowX: 'hidden' }}
+    >
+      {/* AICODE-NOTE: Container with calculated total height and no horizontal overflow */}
+      <div 
+        style={{ 
+          position: 'relative',
+          height: totalHeight,
+          width: '100%',
+          maxWidth: containerSize.width || '100%',
+          overflow: 'hidden'
+        }}
+      >
+        {visibleItems.map(({ item, layout, index }) => (
+          <GridItemWrapper
+            key={item.id}
+            item={item}
+            layout={layout}
+            index={index}
+            model={model}
+            onItemClick={onItemClick}
+            onItemDoubleClick={onItemDoubleClick}
+            onItemContextMenu={onItemContextMenu}
+            onItemDragStart={onItemDragStart}
+            onItemDragOver={onItemDragOver}
+            onItemDragLeave={onItemDragLeave}
+            onItemDrop={onItemDrop}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// AICODE-NOTE: Export memoized component for performance
+export const CalculatedGridView = observer(CalculatedGridViewComponent); 

package/src/list/components/DragPreview.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ListItemData } from '../types/ListTypes';
+import { FileText, Image, Video, Music, Folder, Archive, File } from 'lucide-react';
+
+// AICODE-NOTE: Enhanced drag preview component for better visual feedback during drag operations
+
+export interface DragPreviewProps {
+  items: ListItemData[];
+  className?: string;
+}
+
+const getItemIcon = (item: ListItemData) => {
+  const type = item.type?.toLowerCase() || '';
+  
+  if (type.includes('folder') || type.includes('directory')) return Folder;
+  if (type.includes('image') || type.includes('photo')) return Image;
+  if (type.includes('video') || type.includes('movie')) return Video;
+  if (type.includes('audio') || type.includes('music')) return Music;
+  if (type.includes('text') || type.includes('document')) return FileText;
+  if (type.includes('archive') || type.includes('zip')) return Archive;
+  
+  return File;
+};
+
+export const DragPreview = observer<DragPreviewProps>(({ items, className = '' }) => {
+  if (items.length === 0) return null;
+
+  const firstItem = items[0]!; // Safe because we checked length above
+  const Icon = getItemIcon(firstItem);
+  const hasMultiple = items.length > 1;
+
+  return (
+    <div className={`
+      bg-background border border-border rounded-lg shadow-lg p-3 min-w-48 max-w-64
+      ${className}
+    `}>
+      {/* Single item preview */}
+      {!hasMultiple && (
+        <div className="flex items-center gap-3">
+          <div className="flex-shrink-0">
+            <Icon className="w-5 h-5 text-muted-foreground" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-sm font-medium truncate">
+              {firstItem.name}
+            </div>
+            {firstItem.type && (
+              <div className="text-xs text-muted-foreground truncate">
+                {firstItem.type}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Multiple items preview */}
+      {hasMultiple && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-3">
+            <div className="flex-shrink-0 relative">
+              <Icon className="w-5 h-5 text-muted-foreground" />
+              <div className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs rounded-full w-4 h-4 flex items-center justify-center font-medium">
+                {items.length}
+              </div>
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-medium truncate">
+                {firstItem.name}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                +{items.length - 1} more items
+              </div>
+            </div>
+          </div>
+          
+          {/* Show up to 3 additional items */}
+          {items.slice(1, 4).map((item, index) => {
+            const ItemIcon = getItemIcon(item);
+            return (
+              <div key={item.id} className="flex items-center gap-3 pl-2 opacity-75">
+                <ItemIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                <div className="text-xs text-muted-foreground truncate">
+                  {item.name}
+                </div>
+              </div>
+            );
+          })}
+          
+          {/* Show count if more than 4 items */}
+          {items.length > 4 && (
+            <div className="text-xs text-muted-foreground pl-7">
+              ...and {items.length - 4} more
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+DragPreview.displayName = 'DragPreview'; 

package/src/list/components/ListContextMenu.tsx

@@ -0,0 +1,274 @@
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ListItemData, ListContextMenuItem } from '../types/ListTypes';
+import { ListItemsProvider } from '../providers/ListItemsProvider';
+import { contextMenuIconMap } from '../../icons/iconMap';
+
+// AICODE-NOTE: Context menu component for list items — positioned near cursor,
+// closes on click-outside, Escape, or scroll. Styled to match @anymux/ui context-menu.
+
+export interface ListContextMenuProps {
+  isOpen: boolean;
+  position: { x: number; y: number };
+  items: ListItemData[];
+  provider: ListItemsProvider;
+  onClose: () => void;
+  /** Extra menu items to prepend before provider items */
+  extraMenuItems?: ListContextMenuItem[];
+  /** Handler for extra menu item actions (called instead of provider.onContextMenuAction) */
+  onExtraMenuAction?: (actionId: string, items: ListItemData[]) => void;
+}
+
+// AICODE-NOTE: Individual context menu item with icon, label, shortcut, destructive variant
+interface ContextMenuItemRowProps {
+  menuItem: ListContextMenuItem;
+  isFocused: boolean;
+  onMenuItemClick: (menuItem: ListContextMenuItem) => void;
+  onMouseEnter: () => void;
+}
+
+const ContextMenuItemRow: React.FC<ContextMenuItemRowProps> = ({
+  menuItem,
+  isFocused,
+  onMenuItemClick,
+  onMouseEnter,
+}) => {
+  if (menuItem.type === 'separator') {
+    return <div className="bg-border -mx-1 my-1 h-px" />;
+  }
+
+  const isDestructive = menuItem.destructive;
+
+  return (
+    <button
+      role="menuitem"
+      onClick={() => !menuItem.disabled && onMenuItemClick(menuItem)}
+      onMouseEnter={onMouseEnter}
+      disabled={menuItem.disabled}
+      className={[
+        'w-full text-left px-2 py-1.5 text-sm outline-hidden select-none',
+        'flex items-center gap-2 rounded-sm cursor-default',
+        menuItem.disabled
+          ? 'pointer-events-none opacity-50'
+          : '',
+        !menuItem.disabled && !isDestructive
+          ? 'text-foreground'
+          : '',
+        !menuItem.disabled && isDestructive
+          ? 'text-destructive'
+          : '',
+        isFocused && !isDestructive
+          ? 'bg-accent text-accent-foreground'
+          : '',
+        isFocused && isDestructive
+          ? 'bg-destructive/10 text-destructive'
+          : '',
+      ].filter(Boolean).join(' ')}
+      title={menuItem.tooltip}
+    >
+      {/* AICODE-NOTE: Menu item icon */}
+      {menuItem.icon && (
+        <span className={[
+          'w-4 h-4 flex-shrink-0 flex items-center justify-center',
+          !isDestructive ? '[&_svg]:text-muted-foreground' : '',
+        ].filter(Boolean).join(' ')}>
+          {typeof menuItem.icon === 'string' ? (
+            (() => {
+              const Icon = contextMenuIconMap[menuItem.icon as string];
+              return Icon ? <Icon className="size-4" /> : null;
+            })()
+          ) : (
+            React.createElement(menuItem.icon, { className: 'size-4' })
+          )}
+        </span>
+      )}
+
+      {/* AICODE-NOTE: Menu item label */}
+      <span className="flex-1 truncate">{menuItem.label}</span>
+
+      {/* AICODE-NOTE: Keyboard shortcut hint */}
+      {menuItem.shortcut && (
+        <span className="text-xs text-muted-foreground ml-auto tracking-widest">
+          {menuItem.shortcut}
+        </span>
+      )}
+    </button>
+  );
+};
+
+ContextMenuItemRow.displayName = 'ContextMenuItemRow';
+
+export const ListContextMenu = observer<ListContextMenuProps>(({
+  isOpen,
+  position,
+  items,
+  provider,
+  onClose,
+  extraMenuItems,
+  onExtraMenuAction,
+}) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [menuItems, setMenuItems] = useState<ListContextMenuItem[]>([]);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [adjustedPosition, setAdjustedPosition] = useState(position);
+
+  // Get the actionable (non-separator) items for keyboard navigation
+  const actionableIndices = menuItems
+    .map((item, idx) => (item.type !== 'separator' ? idx : -1))
+    .filter(idx => idx !== -1);
+
+  // AICODE-NOTE: Get context menu items from provider when menu opens
+  useEffect(() => {
+    if (isOpen) {
+      let providerItems: ListContextMenuItem[] = [];
+      if (items.length === 0) {
+        providerItems = provider.getEmptySpaceContextMenu?.() || [];
+      } else if (items.length === 1) {
+        const firstItem = items[0];
+        if (firstItem) {
+          providerItems = provider.getItemContextMenu?.(firstItem) || [];
+        }
+      } else {
+        providerItems = provider.getMultiItemContextMenu?.(items) || [];
+      }
+      // Prepend extra menu items if provided
+      if (extraMenuItems && extraMenuItems.length > 0) {
+        setMenuItems([...extraMenuItems, ...providerItems]);
+      } else {
+        setMenuItems(providerItems);
+      }
+      setFocusedIndex(-1);
+      setAdjustedPosition(position);
+    }
+  }, [isOpen, items, provider, position, extraMenuItems]);
+
+  // AICODE-NOTE: Adjust position once the menu has rendered to keep within viewport
+  useEffect(() => {
+    if (!isOpen || !menuRef.current) return;
+
+    const menu = menuRef.current;
+    const rect = menu.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    let left = position.x;
+    let top = position.y;
+
+    if (left + rect.width > vw - 8) {
+      left = Math.max(8, position.x - rect.width);
+    }
+    if (top + rect.height > vh - 8) {
+      top = Math.max(8, position.y - rect.height);
+    }
+
+    left = Math.max(8, Math.min(left, vw - rect.width - 8));
+    top = Math.max(8, Math.min(top, vh - rect.height - 8));
+
+    setAdjustedPosition({ x: left, y: top });
+  }, [isOpen, menuItems, position]);
+
+  // AICODE-NOTE: Close on click-outside, Escape, or scroll
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case 'Escape':
+          event.preventDefault();
+          onClose();
+          break;
+        case 'ArrowDown': {
+          event.preventDefault();
+          const currentActionIdx = actionableIndices.indexOf(focusedIndex);
+          const nextIdx = currentActionIdx < actionableIndices.length - 1
+            ? actionableIndices[currentActionIdx + 1]
+            : actionableIndices[0];
+          if (nextIdx !== undefined) setFocusedIndex(nextIdx);
+          break;
+        }
+        case 'ArrowUp': {
+          event.preventDefault();
+          const currentActionIdx = actionableIndices.indexOf(focusedIndex);
+          const prevIdx = currentActionIdx > 0
+            ? actionableIndices[currentActionIdx - 1]
+            : actionableIndices[actionableIndices.length - 1];
+          if (prevIdx !== undefined) setFocusedIndex(prevIdx);
+          break;
+        }
+        case 'Enter': {
+          event.preventDefault();
+          const focused = menuItems[focusedIndex];
+          if (focused && focused.type !== 'separator' && !focused.disabled) {
+            handleMenuItemClick(focused);
+          }
+          break;
+        }
+      }
+    };
+
+    const handleScroll = () => onClose();
+
+    // Use capture phase for mousedown so we close before other handlers fire
+    document.addEventListener('mousedown', handleClickOutside, true);
+    document.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('scroll', handleScroll, true);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside, true);
+      document.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [isOpen, onClose, focusedIndex, menuItems, actionableIndices]);
+
+  // AICODE-NOTE: Handle menu item click — dispatch to extra handler or provider and close
+  const handleMenuItemClick = useCallback((menuItem: ListContextMenuItem) => {
+    if (extraMenuItems?.some(m => m.type !== 'separator' && m.id === menuItem.id) && onExtraMenuAction) {
+      onExtraMenuAction(menuItem.id, items);
+    } else if (provider.onContextMenuAction) {
+      provider.onContextMenuAction(menuItem.id, items);
+    }
+    onClose();
+  }, [provider, items, onClose, extraMenuItems, onExtraMenuAction]);
+
+  if (!isOpen || menuItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={menuRef}
+      role="menu"
+      style={{
+        position: 'fixed',
+        left: adjustedPosition.x,
+        top: adjustedPosition.y,
+        zIndex: 50,
+      }}
+      className={[
+        'bg-popover text-popover-foreground',
+        'rounded-md border p-1 shadow-md',
+        'min-w-[180px] max-w-[260px]',
+        'animate-in fade-in-0 zoom-in-95',
+        'origin-top-left',
+      ].join(' ')}
+    >
+      {menuItems.map((menuItem, index) => (
+        <ContextMenuItemRow
+          key={menuItem.type === 'separator' ? `sep-${index}` : menuItem.id}
+          menuItem={menuItem}
+          isFocused={focusedIndex === index}
+          onMenuItemClick={handleMenuItemClick}
+          onMouseEnter={() => setFocusedIndex(index)}
+        />
+      ))}
+    </div>
+  );
+});
+
+ListContextMenu.displayName = 'ListContextMenu';