@anymux/ui-kit 0.1.0

package/src/contacts/MockContactProvider.ts

@@ -0,0 +1,77 @@
+import type { IContactProvider, ContactItem, ContactGroup } from './types';
+
+const FIRST_NAMES = ['Alice', 'Bob', 'Charlie', 'Diana', 'Emma', 'Frank', 'Grace', 'Henry', 'Iris', 'Jack', 'Karen', 'Leo', 'Mia', 'Nathan', 'Olivia', 'Paul', 'Quinn', 'Rachel', 'Sam', 'Tina', 'Uma', 'Victor', 'Wendy', 'Xavier', 'Yara', 'Zach'];
+const LAST_NAMES = ['Anderson', 'Baker', 'Chen', 'Davis', 'Evans', 'Fisher', 'Garcia', 'Hall', 'Ibrahim', 'Jones', 'Kim', 'Lee', 'Martinez', 'Nguyen', 'O\'Brien', 'Park', 'Quinn', 'Robinson', 'Smith', 'Taylor', 'Ueda', 'Vega', 'Wilson', 'Xu', 'Yang', 'Zhang'];
+const COMPANIES = ['Acme Corp', 'TechStart Inc', 'Global Systems', 'DataFlow', 'CloudNine', 'PixelPerfect'];
+const GROUPS_DATA: ContactGroup[] = [
+  { id: 'family', name: 'Family', count: 8 },
+  { id: 'work', name: 'Work', count: 12 },
+  { id: 'friends', name: 'Friends', count: 10 },
+  { id: 'vip', name: 'VIP', count: 5 },
+];
+
+function generateContacts(): ContactItem[] {
+  const contacts: ContactItem[] = [];
+  const now = new Date();
+  for (let i = 0; i < FIRST_NAMES.length; i++) {
+    contacts.push({
+      id: `contact-${i}`,
+      type: 'contact',
+      title: `${FIRST_NAMES[i]} ${LAST_NAMES[i]}`,
+      firstName: FIRST_NAMES[i],
+      lastName: LAST_NAMES[i],
+      email: `${FIRST_NAMES[i].toLowerCase()}.${LAST_NAMES[i].toLowerCase()}@example.com`,
+      phone: `+1 (555) ${String(100 + i).padStart(3, '0')}-${String(1000 + i * 37).slice(0, 4)}`,
+      company: COMPANIES[i % COMPANIES.length],
+      address: `${100 + i} Main St, City ${i % 10}, ST ${10000 + i}`,
+      birthday: new Date(1985 + (i % 20), i % 12, 1 + (i % 28)),
+      groups: [GROUPS_DATA[i % GROUPS_DATA.length].id],
+      createdAt: now,
+      updatedAt: now,
+    });
+  }
+  return contacts;
+}
+
+export class MockContactProvider implements IContactProvider {
+  private contacts = generateContacts();
+
+  async listItems() { return this.contacts; }
+
+  async getItem(id: string) { return this.contacts.find(c => c.id === id) ?? null; }
+
+  async createItem(item: Omit<ContactItem, 'id' | 'createdAt' | 'updatedAt'>) {
+    const now = new Date();
+    const created: ContactItem = { ...item, id: `contact-${Date.now()}`, createdAt: now, updatedAt: now } as ContactItem;
+    this.contacts.push(created);
+    return created;
+  }
+
+  async updateItem(id: string, updates: Partial<ContactItem>) {
+    const idx = this.contacts.findIndex(c => c.id === id);
+    if (idx === -1) throw new Error('Not found');
+    this.contacts[idx] = { ...this.contacts[idx], ...updates, updatedAt: new Date() };
+    return this.contacts[idx];
+  }
+
+  async deleteItem(id: string) {
+    this.contacts = this.contacts.filter(c => c.id !== id);
+  }
+
+  async search(query: string) {
+    const q = query.toLowerCase();
+    return this.contacts.filter(c =>
+      c.firstName.toLowerCase().includes(q) || c.lastName.toLowerCase().includes(q)
+    );
+  }
+
+  async getGroups() { return GROUPS_DATA; }
+
+  async getByGroup(groupId: string) {
+    return this.contacts.filter(c => c.groups?.includes(groupId));
+  }
+
+  async searchByName(name: string) {
+    return this.search(name);
+  }
+}

package/src/contacts/index.ts

@@ -0,0 +1,17 @@
+// Types
+export type { ContactItem, ContactGroup, IContactProvider } from './types';
+
+// Model
+export { ContactListModel } from './ContactListModel';
+export type { ContactSortBy } from './ContactListModel';
+
+// Components
+export { ContactBrowser, type ContactBrowserProps } from './ContactBrowser';
+export { ContactList, type ContactListProps } from './ContactList';
+export { ContactCard, type ContactCardProps } from './ContactCard';
+export { ContactDetail, type ContactDetailProps } from './ContactDetail';
+export { ContactGroupSidebar, type ContactGroupSidebarProps } from './ContactGroupSidebar';
+export { ContactAvatar, type ContactAvatarProps } from './ContactAvatar';
+
+// Mock Provider
+export { MockContactProvider } from './MockContactProvider';

package/src/contacts/types.ts

@@ -0,0 +1,26 @@
+import type { ObjectMetadata, IObjectProvider } from '../types-common';
+
+export interface ContactItem extends ObjectMetadata {
+  type: 'contact';
+  firstName: string;
+  lastName: string;
+  email?: string;
+  phone?: string;
+  avatar?: string;
+  company?: string;
+  address?: string;
+  birthday?: Date;
+  groups?: string[];
+}
+
+export interface ContactGroup {
+  id: string;
+  name: string;
+  count: number;
+}
+
+export interface IContactProvider extends IObjectProvider<ContactItem> {
+  getGroups(): Promise<ContactGroup[]>;
+  getByGroup(groupId: string): Promise<ContactItem[]>;
+  searchByName(name: string): Promise<ContactItem[]>;
+}

package/src/demos/CalendarBrowserDemo.tsx

@@ -0,0 +1,15 @@
+import React, { useMemo } from 'react';
+import { CalendarBrowser } from '../calendar/CalendarBrowser';
+import { CalendarModel } from '../calendar/CalendarModel';
+import { MockCalendarProvider } from '../calendar/MockCalendarProvider';
+
+export const CalendarBrowserDemo = () => {
+  const provider = useMemo(() => new MockCalendarProvider(), []);
+  const model = useMemo(() => new CalendarModel(provider), [provider]);
+
+  return (
+    <div className="h-[600px]">
+      <CalendarBrowser model={model} />
+    </div>
+  );
+};

package/src/demos/ContactBrowserDemo.tsx

@@ -0,0 +1,15 @@
+import React, { useMemo } from 'react';
+import { ContactBrowser } from '../contacts/ContactBrowser';
+import { ContactListModel } from '../contacts/ContactListModel';
+import { MockContactProvider } from '../contacts/MockContactProvider';
+
+export const ContactBrowserDemo = () => {
+  const provider = useMemo(() => new MockContactProvider(), []);
+  const model = useMemo(() => new ContactListModel(provider), [provider]);
+
+  return (
+    <div className="h-[600px]">
+      <ContactBrowser model={model} />
+    </div>
+  );
+};

package/src/demos/MediaBrowserDemo.tsx

@@ -0,0 +1,15 @@
+import React, { useMemo } from 'react';
+import { MediaBrowser } from '../media/MediaBrowser';
+import { MediaBrowserModel } from '../media/MediaBrowserModel';
+import { MockMediaProvider } from '../media/MockMediaProvider';
+
+export const MediaBrowserDemo = () => {
+  const provider = useMemo(() => new MockMediaProvider(), []);
+  const model = useMemo(() => new MediaBrowserModel(provider), [provider]);
+
+  return (
+    <div className="h-[600px]">
+      <MediaBrowser model={model} provider={provider} />
+    </div>
+  );
+};

package/src/file-browser/adapters/DocumentViewerAdapter.ts

@@ -0,0 +1,371 @@
+import { makeAutoObservable, reaction } from 'mobx';
+import { FileBrowserModel } from '../models/FileBrowserModel';
+import { FileBrowserItem } from '../types/FileBrowserTypes';
+
+/**
+ * Example adapter demonstrating how to integrate a document viewer
+ * with the dual-panel FileBrowser coordination system.
+ * 
+ * This adapter:
+ * - Listens for file selections in the FileBrowser
+ * - Coordinates document viewer state with selection changes
+ * - Provides document-specific navigation and preview capabilities
+ * - Maintains selection synchronization between browser and viewer
+ */
+export interface DocumentViewerOptions {
+  supportedFileTypes?: string[];
+  previewEnabled?: boolean;
+  autoOpen?: boolean;
+  maxFileSize?: number; // in bytes
+  enableCoordination?: boolean;
+}
+
+export interface DocumentInfo {
+  id: string;
+  filePath: string;
+  fileName: string;
+  fileType: string;
+  fileSize: number;
+  lastModified?: Date;
+  isSupported: boolean;
+  previewUrl?: string;
+  metadata?: Record<string, any>;
+}
+
+export class DocumentViewerAdapter {
+  // Configuration
+  private options: Required<DocumentViewerOptions>;
+  
+  // State
+  currentDocument: DocumentInfo | null = null;
+  isLoading = false;
+  error: string | null = null;
+  previewUrl: string | null = null;
+  
+  // Document cache for performance
+  private documentCache = new Map<string, DocumentInfo>();
+  private previewCache = new Map<string, string>();
+  
+  // Coordination
+  private fileBrowserModel: FileBrowserModel;
+  private disposers: Array<() => void> = [];
+
+  constructor(
+    fileBrowserModel: FileBrowserModel,
+    options: DocumentViewerOptions = {}
+  ) {
+    this.fileBrowserModel = fileBrowserModel;
+    this.options = {
+      supportedFileTypes: ['.pdf', '.doc', '.docx', '.txt', '.md', '.html', '.rtf'],
+      previewEnabled: true,
+      autoOpen: true,
+      maxFileSize: 50 * 1024 * 1024, // 50MB
+      enableCoordination: true,
+      ...options
+    };
+
+    makeAutoObservable(this);
+    
+    if (this.options.enableCoordination) {
+      this.setupCoordination();
+    }
+
+    this.logInfo('DocumentViewerAdapter initialized', {
+      supportedTypes: this.options.supportedFileTypes.length,
+      coordinationEnabled: this.options.enableCoordination
+    });
+  }
+
+  private setupCoordination() {
+    // Listen for selection changes in the FileBrowser
+    const selectionDisposer = reaction(
+      () => ({
+        selectedItems: Array.from(this.fileBrowserModel.selectionManager.selectedItems.keys()),
+        focusedItem: this.fileBrowserModel.selectionManager.focusedItem
+      }),
+      ({ selectedItems, focusedItem }) => {
+        this.handleSelectionChange(focusedItem);
+      },
+      { fireImmediately: true }
+    );
+
+    // Listen for navigation changes to clear document state when appropriate
+    const navigationDisposer = reaction(
+      () => this.fileBrowserModel.navigationManager.currentPath,
+      (currentPath) => {
+        this.handleNavigationChange(currentPath || null);
+      }
+    );
+
+    this.disposers.push(selectionDisposer, navigationDisposer);
+  }
+
+  private async handleSelectionChange(item: FileBrowserItem | null) {
+    if (!item) {
+      this.clearDocument();
+      return;
+    }
+
+    // Only handle file selections (not directories)
+    if (item.type !== 'file') {
+      this.clearDocument();
+      return;
+    }
+
+    // Check if file is supported
+    if (!this.isFileSupported(item.name)) {
+      this.clearDocument();
+      return;
+    }
+
+    // Check file size constraints
+    if (item.size && item.size > this.options.maxFileSize) {
+      this.setError(`File too large: ${this.formatFileSize(item.size)} (max: ${this.formatFileSize(this.options.maxFileSize)})`);
+      return;
+    }
+
+    try {
+      await this.loadDocument(item);
+    } catch (error) {
+      this.setError(`Failed to load document: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+
+  private handleNavigationChange(currentPath: string | null) {
+    // Clear document when navigating to a different directory
+    // This ensures the viewer doesn't show stale content
+    if (this.currentDocument && currentPath) {
+      const documentDir = this.getDirectoryPath(this.currentDocument.filePath);
+      if (documentDir !== currentPath) {
+        this.clearDocument();
+      }
+    }
+  }
+
+  private async loadDocument(item: FileBrowserItem): Promise<void> {
+    this.isLoading = true;
+    this.error = null;
+
+    try {
+      // Check cache first
+      let documentInfo = this.documentCache.get(item.id);
+      
+      if (!documentInfo) {
+        // Create document info
+        documentInfo = await this.createDocumentInfo(item);
+        this.documentCache.set(item.id, documentInfo);
+      }
+
+      this.currentDocument = documentInfo;
+
+      // Load preview if enabled and not cached
+      if (this.options.previewEnabled && !this.previewCache.has(item.id)) {
+        await this.loadPreview(documentInfo);
+      }
+
+      this.logInfo('Document loaded successfully', {
+        fileName: documentInfo.fileName,
+        fileType: documentInfo.fileType,
+        hasPreview: !!this.previewUrl
+      });
+
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  private async createDocumentInfo(item: FileBrowserItem): Promise<DocumentInfo> {
+    const fileExtension = this.getFileExtension(item.name);
+    
+    return {
+      id: item.id,
+      filePath: item.path,
+      fileName: item.name,
+      fileType: fileExtension,
+      fileSize: item.size || 0,
+      lastModified: item.lastModified,
+      isSupported: this.isFileSupported(item.name),
+      metadata: await this.extractMetadata(item)
+    };
+  }
+
+  private async loadPreview(documentInfo: DocumentInfo): Promise<void> {
+    try {
+      // Check preview cache
+      const cachedPreview = this.previewCache.get(documentInfo.id);
+      if (cachedPreview) {
+        this.previewUrl = cachedPreview;
+        return;
+      }
+
+      // Generate preview URL based on file type
+      const previewUrl = await this.generatePreview(documentInfo);
+      
+      if (previewUrl) {
+        this.previewCache.set(documentInfo.id, previewUrl);
+        this.previewUrl = previewUrl;
+      }
+
+    } catch (error) {
+      this.logError('Failed to load preview', error);
+      // Preview failure shouldn't prevent document loading
+    }
+  }
+
+  private async generatePreview(documentInfo: DocumentInfo): Promise<string | null> {
+    // This would integrate with actual preview generation service
+    // For demo purposes, we'll simulate different preview types
+    
+    switch (documentInfo.fileType.toLowerCase()) {
+      case '.pdf':
+        return `/api/preview/pdf/${encodeURIComponent(documentInfo.filePath)}`;
+      
+      case '.txt':
+      case '.md':
+        return `/api/preview/text/${encodeURIComponent(documentInfo.filePath)}`;
+      
+      case '.doc':
+      case '.docx':
+        return `/api/preview/office/${encodeURIComponent(documentInfo.filePath)}`;
+      
+      case '.html':
+        return documentInfo.filePath; // Direct viewing for HTML
+      
+      default:
+        return null;
+    }
+  }
+
+  private async extractMetadata(item: FileBrowserItem): Promise<Record<string, any>> {
+    // This would integrate with actual metadata extraction service
+    const metadata: Record<string, any> = {
+      extractedAt: new Date().toISOString(),
+      fileName: item.name,
+      fileSize: item.size,
+      lastModified: item.lastModified?.toISOString()
+    };
+
+    // Add file-type specific metadata
+    const extension = this.getFileExtension(item.name).toLowerCase();
+    switch (extension) {
+      case '.pdf':
+        metadata.estimatedPages = Math.ceil((item.size || 0) / 1024); // Rough estimate
+        break;
+      case '.txt':
+      case '.md':
+        metadata.estimatedLines = Math.ceil((item.size || 0) / 50); // Rough estimate
+        break;
+    }
+
+    return metadata;
+  }
+
+  // Public API methods
+
+  /**
+   * Open a document by FileBrowser item
+   */
+  async openDocument(item: FileBrowserItem): Promise<void> {
+    // Use selection coordination to open the document
+    this.fileBrowserModel.selectionManager.selectItem(item.id);
+  }
+
+  /**
+   * Close the current document
+   */
+  closeDocument(): void {
+    this.clearDocument();
+    // Optionally clear selection in FileBrowser
+    this.fileBrowserModel.selectionManager.clearSelection();
+  }
+
+  /**
+   * Navigate to the document's location in FileBrowser
+   */
+  navigateToDocument(): void {
+    if (this.currentDocument) {
+      const directoryPath = this.getDirectoryPath(this.currentDocument.filePath);
+      this.fileBrowserModel.navigationManager.navigateToWithCoordination(
+        directoryPath, 
+        'breadcrumb'
+      );
+    }
+  }
+
+  /**
+   * Check if a file type is supported
+   */
+  isFileSupported(fileName: string): boolean {
+    const extension = this.getFileExtension(fileName).toLowerCase();
+    return this.options.supportedFileTypes.includes(extension);
+  }
+
+  /**
+   * Get current document statistics
+   */
+  get documentStats() {
+    return {
+      cacheSize: this.documentCache.size,
+      previewCacheSize: this.previewCache.size,
+      currentDocument: this.currentDocument?.fileName || null,
+      isLoading: this.isLoading,
+      hasError: !!this.error
+    };
+  }
+
+  // Private utility methods
+
+  private clearDocument(): void {
+    this.currentDocument = null;
+    this.previewUrl = null;
+    this.error = null;
+  }
+
+  private setError(message: string): void {
+    this.error = message;
+    this.currentDocument = null;
+    this.previewUrl = null;
+    this.logError('DocumentViewer error', new Error(message));
+  }
+
+  private getFileExtension(fileName: string): string {
+    const lastDotIndex = fileName.lastIndexOf('.');
+    return lastDotIndex !== -1 ? fileName.substring(lastDotIndex) : '';
+  }
+
+  private getDirectoryPath(filePath: string): string {
+    const lastSlashIndex = filePath.lastIndexOf('/');
+    return lastSlashIndex !== -1 ? filePath.substring(0, lastSlashIndex) : '/';
+  }
+
+  private formatFileSize(bytes: number): string {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+    
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+  }
+
+  private logInfo(message: string, data?: any): void {
+    this.fileBrowserModel.logger?.info(`[DocumentViewerAdapter] ${message}`, data);
+  }
+
+  private logError(message: string, error: any): void {
+    this.fileBrowserModel.logger?.error(`[DocumentViewerAdapter] ${message}`, error);
+  }
+
+  // Cleanup
+  dispose(): void {
+    this.disposers.forEach(dispose => dispose());
+    this.disposers = [];
+    this.documentCache.clear();
+    this.previewCache.clear();
+    this.clearDocument();
+    this.logInfo('DocumentViewerAdapter disposed');
+  }
+}