@anymux/ui-kit 0.1.0

package/src/media/MediaTimeline.tsx

@@ -0,0 +1,38 @@
+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 MediaTimelineProps {
+  model: MediaBrowserModel;
+  className?: string;
+}
+
+const TimelineThumbnail = ({ item, onClick }: { item: MediaItem; onClick: () => void }) => (
+  <button onClick={onClick} className="relative aspect-square rounded-lg overflow-hidden cursor-pointer group">
+    {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={24} className="text-gray-400" /> : <Music size={24} className="text-gray-400" />}
+      </div>
+    )}
+    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
+  </button>
+);
+
+export const MediaTimeline = observer<MediaTimelineProps>(({ model, className = '' }) => (
+  <div className={`space-y-6 p-4 ${className}`}>
+    {Array.from(model.groupedByDate.entries()).map(([date, items]) => (
+      <div key={date}>
+        <h3 className="text-sm font-semibold text-gray-700 mb-2 sticky top-0 bg-white/90 backdrop-blur-sm py-1">{date}</h3>
+        <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1">
+          {items.map(item => (
+            <TimelineThumbnail key={item.id} item={item} onClick={() => model.openPreview(item)} />
+          ))}
+        </div>
+      </div>
+    ))}
+  </div>
+));

package/src/media/MockMediaProvider.ts

@@ -0,0 +1,70 @@
+import type { IMediaProvider, MediaItem, MediaType } from './types';
+
+const ALBUMS = ['Vacation 2024', 'Family', 'Nature', 'City Lights', 'Concerts'];
+const MEDIA_TYPES: MediaType[] = ['photo', 'video', 'audio'];
+
+function generateMediaItems(count = 60): MediaItem[] {
+  const items: MediaItem[] = [];
+  const now = Date.now();
+  for (let i = 0; i < count; i++) {
+    const mediaType = MEDIA_TYPES[i % 3];
+    const date = new Date(now - i * 86400000 * Math.random() * 30);
+    items.push({
+      id: `media-${i}`,
+      type: 'media',
+      title: `${mediaType === 'photo' ? 'IMG' : mediaType === 'video' ? 'VID' : 'AUD'}_${String(i).padStart(4, '0')}`,
+      mediaType,
+      url: `https://picsum.photos/seed/${i}/800/600`,
+      thumbnail: `https://picsum.photos/seed/${i}/200/200`,
+      mimeType: mediaType === 'photo' ? 'image/jpeg' : mediaType === 'video' ? 'video/mp4' : 'audio/mpeg',
+      width: mediaType !== 'audio' ? 800 + (i % 5) * 100 : undefined,
+      height: mediaType !== 'audio' ? 600 + (i % 3) * 100 : undefined,
+      duration: mediaType !== 'photo' ? 30 + i * 5 : undefined,
+      album: ALBUMS[i % ALBUMS.length],
+      artist: mediaType === 'audio' ? `Artist ${i % 10}` : undefined,
+      createdAt: date,
+      updatedAt: date,
+      tags: [`tag${i % 5}`],
+    });
+  }
+  return items;
+}
+
+export class MockMediaProvider implements IMediaProvider {
+  private items = generateMediaItems();
+
+  async listItems() { return this.items; }
+
+  async getItem(id: string) { return this.items.find(i => i.id === id) ?? null; }
+
+  async createItem(item: Omit<MediaItem, 'id' | 'createdAt' | 'updatedAt'>) {
+    const now = new Date();
+    const created: MediaItem = { ...item, id: `media-${Date.now()}`, createdAt: now, updatedAt: now } as MediaItem;
+    this.items.push(created);
+    return created;
+  }
+
+  async updateItem(id: string, updates: Partial<MediaItem>) {
+    const idx = this.items.findIndex(i => i.id === id);
+    if (idx === -1) throw new Error('Not found');
+    this.items[idx] = { ...this.items[idx], ...updates, updatedAt: new Date() };
+    return this.items[idx];
+  }
+
+  async deleteItem(id: string) {
+    this.items = this.items.filter(i => i.id !== id);
+  }
+
+  async search(query: string) {
+    const q = query.toLowerCase();
+    return this.items.filter(i => i.title.toLowerCase().includes(q));
+  }
+
+  async getAlbums() { return ALBUMS; }
+
+  async getByAlbum(album: string) { return this.items.filter(i => i.album === album); }
+
+  async getByDateRange(start: Date, end: Date) {
+    return this.items.filter(i => i.createdAt >= start && i.createdAt <= end);
+  }
+}

package/src/media/index.ts

@@ -0,0 +1,18 @@
+// Types
+export type { ObjectType, ObjectMetadata, IObjectProvider } from '../types-common';
+export type { MediaType, MediaItem, IMediaProvider } from './types';
+
+// Model
+export { MediaBrowserModel } from './MediaBrowserModel';
+export type { MediaViewMode, MediaSortBy } from './MediaBrowserModel';
+
+// Components
+export { MediaBrowser, type MediaBrowserProps } from './MediaBrowser';
+export { MediaGrid, type MediaGridProps } from './MediaGrid';
+export { MediaList, type MediaListProps } from './MediaList';
+export { MediaTimeline, type MediaTimelineProps } from './MediaTimeline';
+export { MediaPreview, type MediaPreviewProps } from './MediaPreview';
+export { AlbumSidebar, type AlbumSidebarProps } from './AlbumSidebar';
+
+// Mock Provider
+export { MockMediaProvider } from './MockMediaProvider';

package/src/media/types.ts

@@ -0,0 +1,21 @@
+import type { ObjectMetadata, IObjectProvider } from '../types-common';
+
+export type MediaType = 'photo' | 'video' | 'audio';
+
+export interface MediaItem extends ObjectMetadata {
+  type: 'media';
+  mediaType: MediaType;
+  url: string;
+  mimeType: string;
+  width?: number;
+  height?: number;
+  duration?: number;
+  album?: string;
+  artist?: string;
+}
+
+export interface IMediaProvider extends IObjectProvider<MediaItem> {
+  getAlbums(): Promise<string[]>;
+  getByAlbum(album: string): Promise<MediaItem[]>;
+  getByDateRange(start: Date, end: Date): Promise<MediaItem[]>;
+}

package/src/styles/variables.css

@@ -0,0 +1,60 @@
+:root {
+  /* === Spacing Scale === */
+  --fb-space-xxs: 2px;
+  --fb-space-xs: 4px;
+  --fb-space-sm: 8px;
+  --fb-space-md: 12px;
+  --fb-space-lg: 16px;
+  --fb-space-xl: 24px;
+  --fb-space-xxl: 32px;
+
+  /* === Typography === */
+  --fb-font-xs: 0.75rem;   /* 12px */
+  --fb-font-sm: 0.8125rem; /* 13px */
+  --fb-font-md: 0.875rem;  /* 14px */
+  --fb-font-lg: 1rem;      /* 16px */
+
+  /* === Row Heights === */
+  --fb-row-height: 32px;
+  --fb-row-height-compact: 28px;
+  --fb-row-height-comfortable: 36px;
+
+  /* === Icon Sizes === */
+  --fb-icon-sm: 16px;
+  --fb-icon-md: 20px;
+  --fb-icon-lg: 24px;
+  --fb-icon-xl: 48px;
+  --fb-icon-xxl: 64px;
+
+  /* === Layout === */
+  --fb-sidebar-width: 260px;
+  --fb-sidebar-collapsed: 0px;
+  --fb-toolbar-height: 40px;
+  --fb-header-height: 48px;
+
+  /* === Border Radius === */
+  --fb-radius-sm: 4px;
+  --fb-radius-md: 6px;
+  --fb-radius-lg: 8px;
+
+  /* === Transitions === */
+  --fb-transition-fast: 150ms ease-in-out;
+  --fb-transition-normal: 250ms ease-in-out;
+
+  /* === Z-index Layers === */
+  --fb-z-sticky: 20;
+  --fb-z-dropdown: 30;
+  --fb-z-modal: 50;
+  --fb-z-context-menu: 100;
+
+  /* === File Icon Colors === */
+  --fb-icon-folder: #3b82f6;
+  --fb-icon-image: #10b981;
+  --fb-icon-video: #f97316;
+  --fb-icon-audio: #8b5cf6;
+  --fb-icon-code: #3b82f6;
+  --fb-icon-archive: #f59e0b;
+  --fb-icon-text: #6b7280;
+  --fb-icon-pdf: #ef4444;
+  --fb-icon-default: #6b7280;
+}

package/src/tree/DEVELOPMENT_SUMMARY.md

@@ -0,0 +1,170 @@
+# TreeComponent Development Summary
+
+## Project Overview
+This is a monorepo project developing a comprehensive TreeComponent with MobX state management to replace existing FileBrowser components. The project uses **shadcn-like UI** design principles with Tailwind CSS and Lucide React icons.
+
+## Architecture Summary
+
+### Project Structure
+```
+/Users/andrew/gits/static-generator/last-static-generator-monorepo/
+├── packages/fs-ui/src/TreeComponent/           # Main TreeComponent package
+│   ├── components/                             # React components
+│   │   ├── TreeComponent.tsx                   # Main component
+│   │   ├── TreeNodeList.tsx                    # Tree view (ARIA compliant)
+│   │   ├── TreeTable.tsx                       # Table view
+│   │   ├── TreeNode.tsx                        # Individual node
+│   │   └── TreeContextMenu.tsx                 # Context menu
+│   ├── models/                                 # MobX state management
+│   │   ├── TreeModel.ts                        # Main state model
+│   │   ├── TreeNode.ts                         # Node data model
+│   │   └── SelectionManager.ts                 # Selection logic
+│   ├── providers/                              # Data providers
+│   │   ├── TreeProvider.ts                     # Interface
+│   │   ├── TestTreeProvider.ts                 # Testing/simulation
+│   │   └── SimpleTreeProvider.ts               # Production ready
+│   ├── utils/                                  # Utilities
+│   │   ├── SelectionTheme.ts                   # Theme utilities
+│   │   └── keyboard.ts                         # Keyboard handling
+│   └── index.ts                                # Main exports
+└── apps/web/app/(fixed)/tree-samples/page.tsx  # Demo page
+```
+
+### Key Technical Details
+- **State Management**: MobX observables with reactive patterns
+- **UI Framework**: React 18+ with TypeScript
+- **Styling**: Tailwind CSS with shadcn-like components
+- **Icons**: Lucide React
+- **Testing**: Jest + @testing-library/react (infrastructure ready)
+- **Build**: Turbo monorepo setup
+
+### Architecture Components
+
+1. **TreeModel**: Central MobX state management
+   - Observable nodes, selection, expansion state
+   - Provider integration
+   - Event handling
+
+2. **TreeProvider Interface**: Data abstraction layer
+   - Async data loading support
+   - Context menu configuration
+   - Node CRUD operations
+
+3. **Components**: Modular React components
+   - TreeComponent (main container)
+   - TreeNodeList (tree view with ARIA)
+   - TreeTable (table view)
+   - TreeNode (individual items)
+   - TreeContextMenu (right-click menus)
+
+## Task Completion Status
+
+### ✅ Completed Phases (100%)
+- **Phase 1**: Planning & Setup (4/4 tasks)
+- **Phase 2**: Core Models (3/3 tasks)
+- **Phase 3**: Basic Components (4/4 tasks)
+- **Phase 4**: Advanced Features (4/4 tasks)
+- **Phase 5**: UI Polish (3/3 tasks)
+- **Phase 6**: Accessibility & Polish (4/4 tasks)
+- **Phase 9**: Documentation & Export (4/4 tasks)
+
+### 🟡 Phase 7: Testing & Documentation (2/3 tasks)
+- ✅ 7.1: SimpleTreeProvider implementation
+- ✅ 7.2: Complete working example
+- ✅ 7.3: Testing infrastructure setup (Jest ready)
+- ⏳ 7.3: Need actual test implementations
+
+### 📅 Phase 8: Advanced Features (future)
+- Multi-column table support
+- Advanced keyboard shortcuts
+- Performance optimizations
+
+## Current Production-Ready Features
+
+### ✅ Implemented
+- MobX reactive state management
+- Multi-selection with Ctrl+click
+- Complete keyboard navigation (arrows, Home/End, Space/Enter, Ctrl+A, Escape)
+- Context menus (single/multi-node)
+- Lazy loading with async data support
+- ARIA accessibility compliance
+- Professional UI styling
+- Two provider implementations (Test + Simple)
+- Interactive demo page with provider switching
+- Working build system and exports
+
+### 🎯 UI Design Principles
+- **shadcn-like UI**: Clean, modern, accessible components
+- **Tailwind CSS**: Utility-first styling
+- **Lucide React**: Consistent iconography
+- **Professional aesthetics**: Production-ready visual design
+
+## Current Priority Focus: Interactive Demo Features
+
+### 🔴 HIGHEST PRIORITY: Interactive Demos
+1. **3-State Checkbox Demo**: Complete interactive demo showcasing tri-state checkboxes with parent-child selection logic
+2. **Custom Popup Menu Demo**: Showcase flexible context menu system with different menus per node type  
+3. **Custom Icons Demo**: Display rich variety of custom icons for different file types and folders
+
+### 🟡 HIGH PRIORITY: Core Functionality Fixes
+4. **Selection state rendering**: Fix remaining selection visual feedback issues
+5. **Page layout**: Fix 100vh layout without scrollbars
+6. **Custom theme colors**: Ensure custom color themes apply correctly
+
+### 🟢 COMPLETED CRITICAL FIXES
+- ✅ **Children visibility**: Fixed collapse/expand hiding children properly
+- ✅ **Animation system**: Smooth height-based transitions working
+- ✅ **CSS variables**: Removed, using direct color values
+
+### 🔵 MEDIUM PRIORITY: Enhancement Features  
+7. **Table view consistency**: Tree and table views should look similar for single column
+8. **Collapsible demo groups**: Organize demo controls into collapsible sections
+9. **File explorer demo**: Rich file tree with metadata columns
+10. **Performance demos**: Large tree virtualization examples
+
+### 🔵 LOW PRIORITY: Development Tools
+11. **Debug logging**: Enhanced logging for development debugging
+12. **Documentation**: Complete API documentation and examples
+
+## Key Implementation Notes
+
+### Component Integration
+- TreeComponent accepts provider and configuration props
+- Automatic MobX reactivity handles re-renders
+- ARIA attributes for accessibility compliance
+- Keyboard event handling with proper focus management
+
+## Demo Page Location
+- **URL**: `/tree-samples` (fixed layout group)
+- **File**: `apps/web/app/(fixed)/tree-samples/page.tsx`
+- **Features**: Provider switching, theme controls, interaction demos
+
+## Next Session Priorities  
+1. **🔴 Implement 3-State Checkbox Demo** (Task 12.1) - Interactive tri-state checkbox showcase
+2. **🟡 Create Custom Popup Menu Demo** (Task 12.2) - Different context menus per node type
+3. **🟡 Build Custom Icons Demo** (Task 12.3) - Rich file type icons and custom folder icons
+4. **🟠 Fix remaining core issues** (Task 12.4) - Selection rendering, layout, themes
+5. **🔵 Enhance demo organization** - Collapsible sections, better UX
+
+## Build Commands
+```bash
+# Install dependencies
+pnpm install
+
+# Run development server
+pnpm dev
+
+# Run tests (infrastructure ready)
+pnpm test
+
+# Build for production
+pnpm build
+```
+
+## Important Notes for Fresh Sessions
+- TreeComponent is **production-ready** but has critical bugs to fix
+- Test infrastructure is set up but needs actual test implementations
+- UI follows **shadcn design principles** - maintain this consistency
+- All state management uses **MobX observables** - follow established patterns
+- Focus on **accessibility compliance** - ARIA attributes are implemented
+- Demo page showcases all features - use for testing and validation 

package/src/tree/__tests__/TreeModel.test.ts

@@ -0,0 +1,16 @@
+describe("TreeModel Tests", () => {
+  test("should work with Jest", () => {
+    expect(true).toBe(true);
+  });
+
+  test("should handle async", async () => {
+    const result = await Promise.resolve(42);
+    expect(result).toBe(42);
+  });
+
+  test("should use mocks", () => {
+    const mock = jest.fn();
+    mock("hello");
+    expect(mock).toHaveBeenCalledWith("hello");
+  });
+});