@anymux/ui-kit 0.1.0

package/src/list/components/VirtualizedMasonryView.tsx

@@ -0,0 +1,344 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { ListItemsModel } from '../models/ListItemsModel';
+import type { ListItemData } from '../types/ListTypes';
+import type { MasonryItemPosition } from '../utils/MasonryLayoutEngine';
+
+// AICODE-NOTE: Virtualized masonry view that only renders visible items for performance with large datasets
+// Uses viewport-based culling to handle thousands of items efficiently
+
+interface VirtualizedMasonryViewProps {
+  model: ListItemsModel;
+  items: ListItemData[];
+  containerWidth: number;
+  containerHeight: number;
+  isHorizontal?: boolean; // true for horizontal masonry, false for vertical
+  overscanCount?: number; // Extra items to render outside viewport
+  className?: string;
+}
+
+interface MasonryItemProps {
+  item: ListItemData;
+  position: MasonryItemPosition;
+  model: ListItemsModel;
+  onClick: (item: ListItemData) => void;
+  onDoubleClick: (item: ListItemData) => void;
+}
+
+const MasonryItem: React.FC<MasonryItemProps> = observer(({ item, position, model, onClick, onDoubleClick }) => {
+  const isSelected = model.isItemSelected(item.id);
+  const isFocused = model.focusedItem === item.id;
+  const thumbnailUrl = item.thumbnailUrl ? model.resolveThumbnailUrl(item) : undefined;
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onClick(item);
+  };
+
+  const handleDoubleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onDoubleClick(item);
+  };
+
+  const debugStyles = model.debugVisualization ? {
+    border: '2px solid lightcyan',
+    boxSizing: 'border-box' as const
+  } : {};
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: position.x,
+        top: position.y,
+        width: position.width,
+        height: position.height,
+        cursor: 'pointer',
+        backgroundColor: isSelected ? 'rgba(0, 123, 255, 0.1)' : 'transparent',
+        borderRadius: model.debugVisualization ? '0px' : '2px',
+        overflow: 'hidden',
+        transition: 'background-color 0.15s ease, box-shadow 0.15s ease',
+        boxShadow: isSelected
+          ? '0 0 0 2px rgba(0, 123, 255, 0.5)'
+          : 'none',
+        ...debugStyles
+      }}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      data-item-id={item.id}
+    >
+      {thumbnailUrl ? (
+        <>
+          <img
+            src={thumbnailUrl}
+            alt={item.name}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              display: 'block',
+              ...(model.debugVisualization ? { border: '1px solid lightblue' } : {})
+            }}
+            loading="lazy"
+          />
+          
+          {/* Overlay label at the bottom */}
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              background: 'linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), transparent)',
+              color: 'white',
+              padding: '12px 8px 8px 8px',
+              fontSize: '12px',
+              fontWeight: '500',
+              textAlign: 'left',
+              lineHeight: '1.3',
+              maxHeight: '40px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              pointerEvents: 'none',
+              ...(model.debugVisualization ? { border: '1px solid yellow' } : {})
+            }}
+          >
+            {item.name}
+          </div>
+        </>
+      ) : (
+        // Fallback for items without thumbnails
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#f0f0f0',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '24px',
+            color: '#888',
+            position: 'relative',
+            ...(model.debugVisualization ? { border: '1px solid orange' } : {})
+          }}
+        >
+          <div>📄</div>
+          {/* Label for non-image items */}
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              background: 'rgba(0, 0, 0, 0.6)',
+              color: 'white',
+              padding: '8px',
+              fontSize: '11px',
+              fontWeight: '500',
+              textAlign: 'center',
+              lineHeight: '1.3',
+              maxHeight: '32px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              pointerEvents: 'none'
+            }}
+          >
+            {item.name}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const VirtualizedMasonryView: React.FC<VirtualizedMasonryViewProps> = observer(({ 
+  model, 
+  items, 
+  containerWidth, 
+  containerHeight,
+  isHorizontal = false,
+  overscanCount = 10,
+  className = ''
+}) => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+
+  // Update container size in model via effect (not during render)
+  useEffect(() => {
+    if (containerWidth > 0 && containerHeight > 0) {
+      model.updateContainerSize(containerWidth, containerHeight);
+    }
+  }, [model, containerWidth, containerHeight]);
+
+  // Calculate layout directly (MobX observer tracks dependencies)
+  let masonryLayout: { layout: MasonryItemPosition[]; totalHeight: number } = { layout: [], totalHeight: 0 };
+
+  if (items.length > 0 && containerWidth > 0 && model.containerSize.width > 0) {
+    const result = isHorizontal
+      ? model.getHorizontalMasonryLayout()
+      : model.getVerticalMasonryLayout();
+
+    if (result) {
+      masonryLayout = result;
+    }
+  }
+
+  // Calculate visible items for viewport culling
+  let visibleItems: MasonryItemPosition[] = [];
+  if (masonryLayout.layout.length > 0) {
+    const overscan = overscanCount * 50;
+    visibleItems = model.getVisibleMasonryItems(scrollTop, containerHeight, isHorizontal, overscan);
+  }
+
+  // AICODE-NOTE: Handle scroll events with throttling
+  const handleScroll = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const newScrollTop = container.scrollTop;
+    setScrollTop(newScrollTop);
+
+    // Update model viewport range for potential dynamic loading
+    const startIndex = Math.floor(newScrollTop / 200); // Rough estimate
+    const endIndex = Math.min(items.length - 1, startIndex + Math.ceil(containerHeight / 200) + overscanCount);
+    model.updateViewportRange(startIndex, endIndex);
+  }, [containerHeight, items.length, overscanCount, model]);
+
+  // AICODE-NOTE: Set up scroll listener with throttling
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    let ticking = false;
+    const throttledScroll = () => {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          handleScroll();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    };
+
+    container.addEventListener('scroll', throttledScroll);
+    
+    // Calculate initial visible items
+    handleScroll();
+
+    return () => {
+      container.removeEventListener('scroll', throttledScroll);
+    };
+  }, [handleScroll]);
+
+  // Scroll to item when model requests it
+  useEffect(() => {
+    const targetId = model.scrollToItemId;
+    if (!targetId || !scrollContainerRef.current) return;
+    const el = scrollContainerRef.current.querySelector(`[data-item-id="${CSS.escape(targetId)}"]`);
+    if (el) {
+      el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    } else {
+      // Item not rendered yet — find position from layout and scroll to it
+      const pos = masonryLayout.layout.find(p => p.id === targetId);
+      if (pos) {
+        scrollContainerRef.current.scrollTop = Math.max(0, pos.y - containerHeight / 2);
+      }
+    }
+    model.clearScrollToItem();
+  }, [model.scrollToItemId, model, masonryLayout.layout, containerHeight]);
+
+  // AICODE-NOTE: Handle item interactions
+  const handleItemClick = useCallback((item: ListItemData) => {
+    model.selectItem(item);
+  }, [model]);
+
+  const handleItemDoubleClick = useCallback((item: ListItemData) => {
+    if (model.provider.onItemDoubleClick) {
+      model.provider.onItemDoubleClick(item);
+    }
+  }, [model]);
+
+  if (items.length === 0) {
+    return (
+      <div style={{ 
+        width: '100%', 
+        height: '100%', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center',
+        color: '#6c757d',
+        fontSize: '16px'
+      }}>
+        No items to display
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      className={`overflow-y-auto overflow-x-hidden ${className}`}
+      style={{
+        width: containerWidth,
+        height: containerHeight
+      }}
+    >
+      {/* AICODE-NOTE: Container with total height for proper scrollbar */}
+      <div
+        style={{
+          position: 'relative',
+          width: containerWidth,
+          height: Math.max(masonryLayout.totalHeight, containerHeight),
+          overflow: 'hidden'
+        }}
+      >
+        {/* AICODE-NOTE: Render only visible items */}
+        {visibleItems.map((position) => {
+          const item = items.find(i => i.id === position.id);
+          if (!item) return null;
+
+          return (
+            <MasonryItem
+              key={item.id}
+              item={item}
+              position={position}
+              model={model}
+              onClick={handleItemClick}
+              onDoubleClick={handleItemDoubleClick}
+            />
+          );
+        })}
+        
+        {/* AICODE-NOTE: Debug info when debug visualization is enabled */}
+        {model.debugVisualization && (
+          <div
+            style={{
+              position: 'fixed',
+              top: 10,
+              right: 10,
+              background: 'rgba(0, 0, 0, 0.8)',
+              color: 'white',
+              padding: '8px 12px',
+              borderRadius: '4px',
+              fontSize: '12px',
+              fontFamily: 'monospace',
+              zIndex: 1000,
+              pointerEvents: 'none'
+            }}
+          >
+            <div>Total: {masonryLayout.layout.length}</div>
+            <div>Visible: {visibleItems.length}</div>
+            <div>Scroll: {Math.round(scrollTop)}px</div>
+            <div>Height: {Math.round(masonryLayout.totalHeight)}px</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+MasonryItem.displayName = 'MasonryItem';
+VirtualizedMasonryView.displayName = 'VirtualizedMasonryView'; 

package/src/list/components/shared/EmptyState.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { EmptyState as UIEmptyState } from '@anymux/ui/components/empty-state';
+
+const SIZE_MAP = { small: 'sm', medium: 'md', large: 'lg' } as const;
+
+export interface EmptyStateProps {
+  title?: string;
+  message?: string;
+  icon?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+  size?: 'small' | 'medium' | 'large';
+}
+
+const EmptyStateComponent: React.FC<EmptyStateProps> = ({
+  title = 'No items found',
+  message = 'There are no items to display.',
+  icon,
+  actions,
+  className = '',
+  size = 'medium',
+}) => {
+  return (
+    <UIEmptyState
+      preset="generic"
+      title={title}
+      description={message}
+      icon={icon}
+      size={SIZE_MAP[size]}
+      className={className}
+    >
+      {actions && <div className="mt-6">{actions}</div>}
+    </UIEmptyState>
+  );
+};
+
+export interface NoItemsProps {
+  onRefresh?: () => void;
+  className?: string;
+}
+
+const NoItemsComponent: React.FC<NoItemsProps> = ({ onRefresh, className = '' }) => {
+  return (
+    <UIEmptyState
+      preset="empty-folder"
+      title="No items found"
+      description="This folder appears to be empty."
+      {...(onRefresh ? { action: { label: 'Refresh', onClick: onRefresh } } : {})}
+      className={className}
+    />
+  );
+};
+
+export interface NoSearchResultsProps {
+  searchQuery?: string;
+  onClearSearch?: () => void;
+  className?: string;
+}
+
+const NoSearchResultsComponent: React.FC<NoSearchResultsProps> = ({
+  searchQuery,
+  onClearSearch,
+  className = '',
+}) => {
+  const message = searchQuery
+    ? `No items match "${searchQuery}". Try adjusting your search terms.`
+    : 'No items match your search criteria.';
+
+  return (
+    <UIEmptyState
+      preset="no-results"
+      title="No search results"
+      description={message}
+      {...(onClearSearch ? { action: { label: 'Clear Search', onClick: onClearSearch } } : {})}
+      className={className}
+    />
+  );
+};
+
+export interface NoSelectionProps {
+  message?: string;
+  className?: string;
+}
+
+const NoSelectionComponent: React.FC<NoSelectionProps> = ({
+  message = 'Select items to see details and available actions.',
+  className = '',
+}) => {
+  return (
+    <UIEmptyState
+      preset="no-selection"
+      description={message}
+      size="sm"
+      className={className}
+    />
+  );
+};
+
+export const EmptyState = observer(EmptyStateComponent);
+export const NoItems = observer(NoItemsComponent);
+export const NoSearchResults = observer(NoSearchResultsComponent);
+export const NoSelection = observer(NoSelectionComponent);

package/src/list/components/shared/ErrorBoundary.tsx

@@ -0,0 +1,123 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+// AICODE-NOTE: Error boundary for catching and displaying React errors
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: (error: Error, errorInfo: ErrorInfo) => ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  className?: string;
+}
+
+export interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+export class ListErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    // AICODE-NOTE: Update state to show error UI
+    return {
+      hasError: true,
+      error
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // AICODE-NOTE: Log error and update state
+    this.setState({
+      error,
+      errorInfo
+    });
+
+    // AICODE-NOTE: Call optional error handler
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+
+    // AICODE-NOTE: Log to console for debugging
+    console.error('ListItemsComponent Error:', error, errorInfo);
+  }
+
+  handleRetry = () => {
+    // AICODE-NOTE: Reset error state to retry rendering
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      // AICODE-NOTE: Use custom fallback if provided
+      if (this.props.fallback && this.state.error && this.state.errorInfo) {
+        return this.props.fallback(this.state.error, this.state.errorInfo);
+      }
+
+      // AICODE-NOTE: Default error UI
+      return (
+        <div className={`flex items-center justify-center p-8 ${this.props.className || ''}`}>
+          <div className="text-center space-y-4 max-w-md">
+            <div className="text-destructive">
+              <svg 
+                className="w-12 h-12 mx-auto mb-4" 
+                fill="none" 
+                stroke="currentColor" 
+                viewBox="0 0 24 24"
+              >
+                <path 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                  strokeWidth={2} 
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" 
+                />
+              </svg>
+            </div>
+            
+            <div>
+              <h3 className="text-lg font-semibold text-foreground mb-2">
+                Something went wrong
+              </h3>
+              <p className="text-sm text-muted-foreground mb-4">
+                An error occurred while displaying the list items.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <button
+                onClick={this.handleRetry}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+              >
+                Try Again
+              </button>
+              
+              {typeof window !== 'undefined' && this.state.error && (
+                <details className="text-left">
+                  <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground">
+                    Show Error Details
+                  </summary>
+                  <pre className="text-xs text-destructive mt-2 p-2 bg-muted rounded overflow-auto max-h-32">
+                    {this.state.error.toString()}
+                    {this.state.errorInfo?.componentStack}
+                  </pre>
+                </details>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+} 

package/src/list/components/shared/ErrorDisplay.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ErrorDisplay as UIErrorDisplay } from '@anymux/ui/components/error-display';
+
+const sizeMap = { small: 'sm', medium: 'md', large: 'lg' } as const;
+
+export interface ErrorDisplayProps {
+  error: Error | string;
+  title?: string;
+  message?: string;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+  className?: string;
+  size?: 'small' | 'medium' | 'large';
+  variant?: 'default' | 'destructive' | 'warning';
+}
+
+const ErrorDisplayComponent: React.FC<ErrorDisplayProps> = ({
+  error,
+  title = 'Error',
+  message,
+  onRetry,
+  onDismiss,
+  className = '',
+  size = 'medium',
+  variant = 'destructive'
+}) => {
+  const mappedSize = sizeMap[size];
+  const mappedVariant = variant === 'default' ? undefined : variant;
+
+  // If message override is provided, create a modified error preserving stack
+  let mappedError: Error | string = error;
+  if (message) {
+    if (typeof error === 'object') {
+      mappedError = Object.assign(new Error(message), { stack: error.stack });
+    } else {
+      mappedError = message;
+    }
+  }
+
+  return (
+    <UIErrorDisplay
+      error={mappedError}
+      title={title}
+      size={mappedSize}
+      variant={mappedVariant}
+      showDetails={typeof error === 'object' && !!error.stack}
+      className={className}
+      {...(onRetry != null ? { onRetry } : {})}
+      {...(onDismiss != null ? { onDismiss } : {})}
+    />
+  );
+};
+
+export interface NetworkErrorProps {
+  onRetry?: () => void;
+  className?: string;
+}
+
+const NetworkErrorComponent: React.FC<NetworkErrorProps> = ({
+  onRetry,
+  className = ''
+}) => {
+  return (
+    <ErrorDisplayComponent
+      error="Network request failed"
+      title="Connection Error"
+      message="Unable to load items. Please check your internet connection and try again."
+      variant="warning"
+      className={className}
+      {...(onRetry != null ? { onRetry } : {})}
+    />
+  );
+};
+
+export interface LoadErrorProps {
+  error: Error | string;
+  onRetry?: () => void;
+  className?: string;
+}
+
+const LoadErrorComponent: React.FC<LoadErrorProps> = ({
+  error,
+  onRetry,
+  className = ''
+}) => {
+  return (
+    <ErrorDisplayComponent
+      error={error}
+      title="Failed to Load Items"
+      variant="destructive"
+      className={className}
+      {...(onRetry != null ? { onRetry } : {})}
+    />
+  );
+};
+
+export const ErrorDisplay = observer(ErrorDisplayComponent);
+export const NetworkError = observer(NetworkErrorComponent);
+export const LoadError = observer(LoadErrorComponent);