@anymux/ui-kit 0.1.0

package/src/list/utils/__tests__/VirtualizedMasonryView.test.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { VirtualizedMasonryView } from '../../components/VirtualizedMasonryView';
+import { ListItemsModel } from '../../models/ListItemsModel';
+import type { ListItemData } from '../../types/ListTypes';
+
+// Mock lucide-react icons
+jest.mock('lucide-react', () => ({
+  FileText: () => <div data-testid="file-text-icon">FileText</div>,
+  Image: () => <div data-testid="image-icon">Image</div>,
+  Video: () => <div data-testid="video-icon">Video</div>,
+  Music: () => <div data-testid="music-icon">Music</div>,
+  Folder: () => <div data-testid="folder-icon">Folder</div>,
+  Archive: () => <div data-testid="archive-icon">Archive</div>,
+  File: () => <div data-testid="file-icon">File</div>,
+  Settings: () => <div data-testid="settings-icon">Settings</div>,
+  Code: () => <div data-testid="code-icon">Code</div>,
+  Database: () => <div data-testid="database-icon">Database</div>,
+  Globe: () => <div data-testid="globe-icon">Globe</div>,
+  Palette: () => <div data-testid="palette-icon">Palette</div>,
+  Package: () => <div data-testid="package-icon">Package</div>,
+  BookOpen: () => <div data-testid="book-open-icon">BookOpen</div>,
+  TestTube: () => <div data-testid="test-tube-icon">TestTube</div>,
+  GitBranch: () => <div data-testid="git-branch-icon">GitBranch</div>,
+  Key: () => <div data-testid="key-icon">Key</div>,
+}));
+
+// Create a minimal test provider without lucide-react dependencies
+class MinimalTestProvider {
+  id = 'test';
+  name = 'Test Provider';
+  supportedViewTypes = ['grid', 'masonry-vertical', 'masonry-horizontal'];
+  isVirtualizationEnabled = true;
+  
+  async loadItems() {
+    return { items: [], totalCount: 0 };
+  }
+  
+  getItemIcon() {
+    return null;
+  }
+  
+  getItemContextMenu() {
+    return [];
+  }
+  
+  onSelectionChange() {}
+  onItemAction() {}
+  onContextMenuAction() {}
+}
+
+// Mock the masonry layout engine
+jest.mock('../MasonryLayoutEngine', () => ({
+  createVerticalMasonry: jest.fn(() => ({
+    calculateLayout: jest.fn(() => ({
+      items: [
+        { id: '1', x: 0, y: 0, width: 200, height: 300 },
+        { id: '2', x: 220, y: 0, width: 200, height: 150 },
+        { id: '3', x: 0, y: 320, width: 200, height: 200 },
+        { id: '4', x: 220, y: 170, width: 200, height: 400 },
+        { id: '5', x: 0, y: 540, width: 200, height: 100 }
+      ],
+      totalHeight: 640,
+      totalWidth: 440,
+      columns: 2
+    }))
+  })),
+  createHorizontalMasonry: jest.fn(() => ({
+    calculateLayout: jest.fn(() => ({
+      items: [
+        { id: '1', x: 0, y: 0, width: 200, height: 300 },
+        { id: '2', x: 220, y: 0, width: 200, height: 150 },
+        { id: '3', x: 0, y: 320, width: 200, height: 200 },
+        { id: '4', x: 220, y: 170, width: 200, height: 400 },
+        { id: '5', x: 0, y: 540, width: 200, height: 100 }
+      ],
+      totalHeight: 640,
+      totalWidth: 440,
+      columns: 2
+    }))
+  }))
+}));
+
+describe.skip('VirtualizedMasonryView', () => {
+  let model: ListItemsModel;
+  let provider: MinimalTestProvider;
+  let testItems: ListItemData[];
+
+  beforeEach(() => {
+    provider = new MinimalTestProvider();
+    model = new ListItemsModel(provider as any);
+    
+    testItems = [
+      {
+        id: '1',
+        name: 'Item 1',
+        type: 'image',
+        size: 1024,
+        modified: new Date(),
+        aspectRatio: 2/3,
+        thumbnailUrl: 'https://example.com/thumb1.jpg'
+      },
+      {
+        id: '2',
+        name: 'Item 2',
+        type: 'image',
+        size: 2048,
+        modified: new Date(),
+        aspectRatio: 4/3,
+        thumbnailUrl: 'https://example.com/thumb2.jpg'
+      },
+      {
+        id: '3',
+        name: 'Item 3',
+        type: 'image',
+        size: 1536,
+        modified: new Date(),
+        aspectRatio: 1,
+        thumbnailUrl: 'https://example.com/thumb3.jpg'
+      },
+      {
+        id: '4',
+        name: 'Item 4',
+        type: 'image',
+        size: 3072,
+        modified: new Date(),
+        aspectRatio: 1/2,
+        thumbnailUrl: 'https://example.com/thumb4.jpg'
+      },
+      {
+        id: '5',
+        name: 'Item 5',
+        type: 'image',
+        size: 512,
+        modified: new Date(),
+        aspectRatio: 2,
+        thumbnailUrl: 'https://example.com/thumb5.jpg'
+      }
+    ];
+
+    // Set up model with test items
+    model.items = testItems;
+    model.totalItemCount = testItems.length;
+  });
+
+  it('should render virtualized masonry view', () => {
+    render(
+      <VirtualizedMasonryView
+        model={model}
+        items={testItems}
+        containerWidth={800}
+        containerHeight={600}
+        isHorizontal={false}
+      />
+    );
+
+    // Should render the scroll container
+    const container = screen.getByRole('generic');
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should render items with correct positioning', () => {
+    const { container } = render(
+      <VirtualizedMasonryView
+        model={model}
+        items={testItems}
+        containerWidth={800}
+        containerHeight={600}
+        isHorizontal={false}
+      />
+    );
+
+    // Should render items with absolute positioning
+    const items = container.querySelectorAll('[data-item-id]');
+    expect(items.length).toBeGreaterThan(0);
+
+    // Check that items have absolute positioning
+    items.forEach(item => {
+      const style = window.getComputedStyle(item);
+      expect(style.position).toBe('absolute');
+    });
+  });
+
+  it('should handle empty items array', () => {
+    render(
+      <VirtualizedMasonryView
+        model={model}
+        items={[]}
+        containerWidth={800}
+        containerHeight={600}
+        isHorizontal={false}
+      />
+    );
+
+    expect(screen.getByText('No items to display')).toBeInTheDocument();
+  });
+
+  it('should show debug info when debug visualization is enabled', () => {
+    model.setDebugVisualization(true);
+
+    render(
+      <VirtualizedMasonryView
+        model={model}
+        items={testItems}
+        containerWidth={800}
+        containerHeight={600}
+        isHorizontal={false}
+      />
+    );
+
+    // Should show debug overlay
+    expect(screen.getByText(/Total:/)).toBeInTheDocument();
+    expect(screen.getByText(/Visible:/)).toBeInTheDocument();
+    expect(screen.getByText(/Scroll:/)).toBeInTheDocument();
+    expect(screen.getByText(/Height:/)).toBeInTheDocument();
+  });
+
+  it('should handle horizontal masonry layout', () => {
+    render(
+      <VirtualizedMasonryView
+        model={model}
+        items={testItems}
+        containerWidth={800}
+        containerHeight={600}
+        isHorizontal={true}
+      />
+    );
+
+    // Should render without errors
+    const container = screen.getByRole('generic');
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should apply custom overscan count', () => {
+    render(
+      <VirtualizedMasonryView
+        model={model}
+        items={testItems}
+        containerWidth={800}
+        containerHeight={600}
+        isHorizontal={false}
+        overscanCount={20}
+      />
+    );
+
+    // Should render without errors
+    const container = screen.getByRole('generic');
+    expect(container).toBeInTheDocument();
+  });
+}); 

package/src/media/AlbumSidebar.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { FolderOpen, Image } from 'lucide-react';
+import type { MediaBrowserModel } from './MediaBrowserModel';
+import type { IMediaProvider } from './types';
+
+export interface AlbumSidebarProps {
+  model: MediaBrowserModel;
+  provider: IMediaProvider;
+  className?: string;
+}
+
+export const AlbumSidebar = observer<AlbumSidebarProps>(({ model, provider, className = '' }) => {
+  const [albums, setAlbums] = useState<string[]>([]);
+
+  useEffect(() => {
+    provider.getAlbums().then(setAlbums);
+  }, [provider]);
+
+  return (
+    <div className={`w-56 border-r border-gray-200 bg-gray-50 overflow-y-auto ${className}`}>
+      <div className="p-3">
+        <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Albums</h3>
+        <button
+          onClick={() => model.setAlbum(null)}
+          className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${
+            model.currentAlbum === null ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'
+          }`}
+        >
+          <Image size={16} />
+          <span>All Media</span>
+        </button>
+        {albums.map(album => (
+          <button
+            key={album}
+            onClick={() => model.setAlbum(album)}
+            className={`flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm transition-colors ${
+              model.currentAlbum === album ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <FolderOpen size={16} />
+            <span className="truncate" title={album}>{album}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/media/MediaBrowser.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Grid3X3, List, Clock, Search, Loader2 } from 'lucide-react';
+import { BrowserError } from '@anymux/ui/components/browser-error';
+import type { MediaBrowserModel } from './MediaBrowserModel';
+import type { IMediaProvider } from './types';
+import { MediaGrid } from './MediaGrid';
+import { MediaList } from './MediaList';
+import { MediaTimeline } from './MediaTimeline';
+import { MediaPreview } from './MediaPreview';
+import { AlbumSidebar } from './AlbumSidebar';
+
+export interface MediaBrowserProps {
+  model: MediaBrowserModel;
+  provider: IMediaProvider;
+  className?: string;
+  showSidebar?: boolean;
+}
+
+export const MediaBrowser = observer<MediaBrowserProps>(({ model, provider, className = '', showSidebar = true }) => {
+  useEffect(() => { model.loadItems(); }, [model]);
+
+  return (
+    <div className={`flex h-full bg-white rounded-xl border border-gray-200 overflow-hidden ${className}`}>
+      {showSidebar && <AlbumSidebar model={model} provider={provider} />}
+
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Toolbar */}
+        <div className="flex items-center gap-2 px-4 py-2 border-b border-gray-200">
+          <div className="relative flex-1 max-w-xs">
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search media..."
+              value={model.searchQuery}
+              onChange={e => model.search(e.target.value)}
+              className="w-full pl-9 pr-3 py-1.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div className="flex items-center border border-gray-200 rounded-lg overflow-hidden">
+            {([['grid', Grid3X3], ['list', List], ['timeline', Clock]] as const).map(([mode, Icon]) => (
+              <button
+                key={mode}
+                onClick={() => model.setViewMode(mode)}
+                className={`p-1.5 ${model.viewMode === mode ? 'bg-blue-50 text-blue-600' : 'text-gray-500 hover:bg-gray-50'}`}
+              >
+                <Icon size={16} />
+              </button>
+            ))}
+          </div>
+
+          <select
+            value={model.filterByType ?? ''}
+            onChange={e => model.setFilter(e.target.value as 'photo' | 'video' | 'audio' || null)}
+            className="text-sm border border-gray-200 rounded-lg px-2 py-1.5"
+          >
+            <option value="">All types</option>
+            <option value="photo">Photos</option>
+            <option value="video">Videos</option>
+            <option value="audio">Audio</option>
+          </select>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto">
+          {model.loading ? (
+            <div className="flex items-center justify-center h-64">
+              <Loader2 size={24} className="animate-spin text-gray-400" />
+            </div>
+          ) : model.error ? (
+            <BrowserError
+              error={model.error}
+              context="Media"
+              onRetry={() => model.loadItems()}
+            />
+          ) : model.filteredItems.length === 0 ? (
+            <div className="flex items-center justify-center h-64 text-gray-400 text-sm">No media found</div>
+          ) : (
+            <>
+              {model.viewMode === 'grid' && <MediaGrid model={model} />}
+              {model.viewMode === 'list' && <MediaList model={model} />}
+              {model.viewMode === 'timeline' && <MediaTimeline model={model} />}
+            </>
+          )}
+        </div>
+      </div>
+
+      <MediaPreview model={model} />
+    </div>
+  );
+});

package/src/media/MediaBrowserModel.ts

@@ -0,0 +1,138 @@
+import { makeAutoObservable, runInAction } from 'mobx';
+import type { IMediaProvider, MediaItem, MediaType } from './types';
+
+export type MediaViewMode = 'grid' | 'list' | 'timeline';
+export type MediaSortBy = 'date' | 'name' | 'size';
+
+export class MediaBrowserModel {
+  items: MediaItem[] = [];
+  selectedItems = new Set<string>();
+  viewMode: MediaViewMode = 'grid';
+  currentAlbum: string | null = null;
+  loading = false;
+  error: string | null = null;
+  searchQuery = '';
+  sortBy: MediaSortBy = 'date';
+  filterByType: MediaType | null = null;
+  previewItem: MediaItem | null = null;
+
+  constructor(private provider: IMediaProvider) {
+    makeAutoObservable(this);
+  }
+
+  get filteredItems(): MediaItem[] {
+    let result = this.items;
+    if (this.searchQuery) {
+      const q = this.searchQuery.toLowerCase();
+      result = result.filter(i => i.title.toLowerCase().includes(q));
+    }
+    if (this.filterByType) {
+      result = result.filter(i => i.mediaType === this.filterByType);
+    }
+    return this.sortItems(result);
+  }
+
+  get groupedByDate(): Map<string, MediaItem[]> {
+    const groups = new Map<string, MediaItem[]>();
+    for (const item of this.filteredItems) {
+      const key = item.createdAt.toLocaleDateString();
+      const group = groups.get(key) ?? [];
+      group.push(item);
+      groups.set(key, group);
+    }
+    return groups;
+  }
+
+  get groupedByAlbum(): Map<string, MediaItem[]> {
+    const groups = new Map<string, MediaItem[]>();
+    for (const item of this.filteredItems) {
+      const key = item.album ?? 'Uncategorized';
+      const group = groups.get(key) ?? [];
+      group.push(item);
+      groups.set(key, group);
+    }
+    return groups;
+  }
+
+  async loadItems() {
+    this.loading = true;
+    this.error = null;
+    try {
+      const items = this.currentAlbum
+        ? await this.provider.getByAlbum(this.currentAlbum)
+        : await this.provider.listItems();
+      runInAction(() => { this.items = items; });
+    } catch (err: any) {
+      runInAction(() => { this.error = err?.message || 'Failed to load media'; });
+    } finally {
+      runInAction(() => { this.loading = false; });
+    }
+  }
+
+  selectItem(id: string) {
+    this.selectedItems.clear();
+    this.selectedItems.add(id);
+  }
+
+  toggleSelect(id: string) {
+    if (this.selectedItems.has(id)) {
+      this.selectedItems.delete(id);
+    } else {
+      this.selectedItems.add(id);
+    }
+  }
+
+  setViewMode(mode: MediaViewMode) {
+    this.viewMode = mode;
+  }
+
+  setAlbum(album: string | null) {
+    this.currentAlbum = album;
+    this.loadItems();
+  }
+
+  async search(query: string) {
+    this.searchQuery = query;
+    if (query) {
+      this.loading = true;
+      this.error = null;
+      try {
+        const items = await this.provider.search(query);
+        runInAction(() => { this.items = items; });
+      } catch (err: any) {
+        runInAction(() => { this.error = err?.message || 'Search failed'; });
+      } finally {
+        runInAction(() => { this.loading = false; });
+      }
+    } else {
+      this.loadItems();
+    }
+  }
+
+  setSort(sortBy: MediaSortBy) {
+    this.sortBy = sortBy;
+  }
+
+  setFilter(type: MediaType | null) {
+    this.filterByType = type;
+  }
+
+  openPreview(item: MediaItem) {
+    this.previewItem = item;
+  }
+
+  closePreview() {
+    this.previewItem = null;
+  }
+
+  private sortItems(items: MediaItem[]): MediaItem[] {
+    return [...items].sort((a, b) => {
+      switch (this.sortBy) {
+        case 'date': return b.createdAt.getTime() - a.createdAt.getTime();
+        case 'name': return a.title.localeCompare(b.title);
+        case 'size': return (b.width ?? 0) * (b.height ?? 0) - (a.width ?? 0) * (a.height ?? 0);
+        default: return 0;
+      }
+    });
+  }
+}

package/src/media/MediaGrid.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Play, Music } from 'lucide-react';
+import type { MediaBrowserModel } from './MediaBrowserModel';
+import type { MediaItem } from './types';
+
+export interface MediaGridProps {
+  model: MediaBrowserModel;
+  className?: string;
+}
+
+const MediaThumbnail = ({ item, onClick, selected }: { item: MediaItem; onClick: () => void; selected: boolean }) => (
+  <button
+    onClick={onClick}
+    className={`relative aspect-square rounded-lg overflow-hidden cursor-pointer group border-2 transition-all ${
+      selected ? 'border-blue-500 ring-2 ring-blue-200' : 'border-transparent hover:border-gray-300'
+    }`}
+  >
+    {item.thumbnail || item.mediaType === 'photo' ? (
+      <img
+        src={item.thumbnail ?? item.url}
+        alt={item.title}
+        className="w-full h-full object-cover"
+      />
+    ) : (
+      <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+        {item.mediaType === 'video' ? <Play size={32} className="text-gray-400" /> : <Music size={32} className="text-gray-400" />}
+      </div>
+    )}
+    {item.mediaType === 'video' && (
+      <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1.5 py-0.5 rounded">
+        {item.duration ? `${Math.floor(item.duration / 60)}:${String(item.duration % 60).padStart(2, '0')}` : 'Video'}
+      </div>
+    )}
+    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
+  </button>
+);
+
+export const MediaGrid = observer<MediaGridProps>(({ model, className = '' }) => (
+  <div className={`grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-1 p-2 ${className}`}>
+    {model.filteredItems.map(item => (
+      <MediaThumbnail
+        key={item.id}
+        item={item}
+        selected={model.selectedItems.has(item.id)}
+        onClick={() => model.openPreview(item)}
+      />
+    ))}
+  </div>
+));

package/src/media/MediaList.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Image, Play, Music } from 'lucide-react';
+import type { MediaBrowserModel } from './MediaBrowserModel';
+import type { MediaItem } from './types';
+
+export interface MediaListProps {
+  model: MediaBrowserModel;
+  className?: string;
+}
+
+const mediaIcon = (item: MediaItem) => {
+  switch (item.mediaType) {
+    case 'photo': return <Image size={16} className="text-green-500" />;
+    case 'video': return <Play size={16} className="text-blue-500" />;
+    case 'audio': return <Music size={16} className="text-purple-500" />;
+  }
+};
+
+export const MediaList = observer<MediaListProps>(({ model, className = '' }) => (
+  <div className={`divide-y divide-gray-100 ${className}`}>
+    {model.filteredItems.map(item => (
+      <button
+        key={item.id}
+        onClick={() => model.openPreview(item)}
+        className={`flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-gray-50 transition-colors ${
+          model.selectedItems.has(item.id) ? 'bg-blue-50' : ''
+        }`}
+      >
+        <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100 flex items-center justify-center">
+          {item.thumbnail ? (
+            <img src={item.thumbnail} alt={item.title} className="w-full h-full object-cover" />
+          ) : (
+            mediaIcon(item)
+          )}
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-gray-900 truncate" title={item.title}>{item.title}</p>
+          <p className="text-xs text-gray-500">
+            {item.mediaType} {item.album && `· ${item.album}`} · {item.createdAt.toLocaleDateString()}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {mediaIcon(item)}
+        </div>
+      </button>
+    ))}
+  </div>
+));

package/src/media/MediaPreview.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
+import type { MediaBrowserModel } from './MediaBrowserModel';
+
+export interface MediaPreviewProps {
+  model: MediaBrowserModel;
+  className?: string;
+}
+
+export const MediaPreview = observer<MediaPreviewProps>(({ model, className = '' }) => {
+  const item = model.previewItem;
+  if (!item) return null;
+
+  const items = model.filteredItems;
+  const idx = items.findIndex(i => i.id === item.id);
+
+  const goPrev = () => {
+    if (idx > 0) model.openPreview(items[idx - 1]);
+  };
+  const goNext = () => {
+    if (idx < items.length - 1) model.openPreview(items[idx + 1]);
+  };
+
+  return (
+    <div className={`fixed inset-0 z-50 bg-black/90 flex items-center justify-center ${className}`}>
+      <button onClick={() => model.closePreview()} className="absolute top-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10">
+        <X size={24} />
+      </button>
+
+      <button onClick={goPrev} disabled={idx <= 0} className="absolute left-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 disabled:opacity-30">
+        <ChevronLeft size={32} />
+      </button>
+
+      <div className="max-w-[90vw] max-h-[90vh] flex flex-col items-center">
+        {item.mediaType === 'photo' && (
+          <img src={item.url} alt={item.title} className="max-w-full max-h-[80vh] object-contain rounded-lg" />
+        )}
+        {item.mediaType === 'video' && (
+          <video src={item.url} controls className="max-w-full max-h-[80vh] rounded-lg" />
+        )}
+        {item.mediaType === 'audio' && (
+          <div className="bg-gray-900 rounded-xl p-8 flex flex-col items-center gap-4">
+            <div className="w-48 h-48 bg-gray-800 rounded-xl flex items-center justify-center text-6xl">🎵</div>
+            <audio src={item.url} controls className="w-80" />
+          </div>
+        )}
+        <div className="mt-4 text-center">
+          <p className="text-white font-medium">{item.title}</p>
+          <p className="text-white/60 text-sm">{item.createdAt.toLocaleDateString()}</p>
+        </div>
+      </div>
+
+      <button onClick={goNext} disabled={idx >= items.length - 1} className="absolute right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 disabled:opacity-30">
+        <ChevronRight size={32} />
+      </button>
+
+      <a href={item.url} download className="absolute bottom-4 right-4 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10">
+        <Download size={20} />
+      </a>
+    </div>
+  );
+});