@ersbeth/picoflow 0.2.3 → 1.0.0

package/docs/examples/examples.md

@@ -0,0 +1,2313 @@
+# Examples
+
+This page contains complete, real-world examples demonstrating PicoFlow's features working together. Each example is runnable and shows best practices.
+
+## Example 1: Todo List Application
+
+A complete todo list with filtering, persistence, and statistics.
+
+```typescript
+import { state, array, derivation, effect } from '@ersbeth/picoflow'
+
+// Types
+interface Todo {
+  id: number
+  text: string
+  completed: boolean
+  createdAt: number
+}
+
+type Filter = 'all' | 'active' | 'completed'
+
+// State
+const $todos = array<Todo>([])
+const $filter = state<Filter>('all')
+const $newTodoText = state('')
+
+// Derived values
+const $filteredTodos = derivation((t) => {
+  const todos = $todos.get(t)
+  const filter = $filter.get(t)
+  
+  switch (filter) {
+    case 'active':
+      return todos.filter(todo => !todo.completed)
+    case 'completed':
+      return todos.filter(todo => todo.completed)
+    default:
+      return todos
+  }
+})
+
+const $activeCount = derivation((t) => {
+  return $todos.get(t).filter(todo => !todo.completed).length
+})
+
+const $completedCount = derivation((t) => {
+  return $todos.get(t).filter(todo => todo.completed).length
+})
+
+const $totalCount = derivation((t) => {
+  return $todos.get(t).length
+})
+
+// Persistence
+effect((t) => {
+  const todos = $todos.get(t)
+  localStorage.setItem('todos', JSON.stringify(todos))
+})
+
+// Load from storage on init
+function loadTodos() {
+  const stored = localStorage.getItem('todos')
+  if (stored) {
+    const todos = JSON.parse(stored)
+    todos.forEach((todo: Todo) => $todos.push(todo))
+  }
+}
+
+// Operations
+function addTodo() {
+  const text = $newTodoText.pick().trim()
+  if (!text) return
+  
+  $todos.push({
+    id: Date.now(),
+    text,
+    completed: false,
+    createdAt: Date.now()
+  })
+  
+  $newTodoText.set('')
+}
+
+function removeTodo(id: number) {
+  const todos = $todos.pick()
+  const index = todos.findIndex(t => t.id === id)
+  if (index !== -1) {
+    $todos.splice(index, 1)
+  }
+}
+
+function toggleTodo(id: number) {
+  const todos = $todos.pick()
+  const index = todos.findIndex(t => t.id === id)
+  if (index !== -1) {
+    const todo = todos[index]
+    $todos.splice(index, 1, {
+      ...todo,
+      completed: !todo.completed
+    })
+  }
+}
+
+function clearCompleted() {
+  const todos = $todos.pick()
+  const activeTodos = todos.filter(t => !t.completed)
+  $todos.clear()
+  activeTodos.forEach(todo => $todos.push(todo))
+}
+
+// UI Updates
+effect((t) => {
+  const filtered = $filteredTodos.get(t)
+  renderTodoList(filtered)
+})
+
+effect((t) => {
+  const active = $activeCount.get(t)
+  const completed = $completedCount.get(t)
+  const total = $totalCount.get(t)
+  
+  renderStats({
+    active,
+    completed,
+    total
+  })
+})
+
+// Initialize
+loadTodos()
+```
+
+### Data Flow Diagram
+
+```mermaid
+flowchart TD
+    A[User Input] --> B[$newTodoText]
+    B --> C[addTodo]
+    C --> D[$todos array]
+    D --> E[$filteredTodos]
+    D --> F[$activeCount]
+    D --> G[$completedCount]
+    E --> H[Render Todo List]
+    F --> I[Render Stats]
+    G --> I
+    D --> J[localStorage Effect]
+    
+    K[$filter state] --> E
+```
+
+---
+
+## Example 2: Form with Validation
+
+A registration form with real-time validation and submission handling.
+
+```typescript
+import { state, derivation, effect } from '@ersbeth/picoflow'
+
+// Form state
+const $email = state('')
+const $password = state('')
+const $confirmPassword = state('')
+const $agreedToTerms = state(false)
+
+// Validation derivations
+const $emailError = derivation((t) => {
+  const email = $email.get(t)
+  if (!email) return 'Email is required'
+  if (!email.includes('@')) return 'Email must contain @'
+  if (email.length < 5) return 'Email is too short'
+  return null
+})
+
+const $passwordError = derivation((t) => {
+  const password = $password.get(t)
+  if (!password) return 'Password is required'
+  if (password.length < 8) return 'Password must be at least 8 characters'
+  if (!/[A-Z]/.test(password)) return 'Password must contain uppercase letter'
+  if (!/[0-9]/.test(password)) return 'Password must contain a number'
+  return null
+})
+
+const $confirmError = derivation((t) => {
+  const password = $password.get(t)
+  const confirm = $confirmPassword.get(t)
+  if (!confirm) return 'Please confirm your password'
+  if (password !== confirm) return 'Passwords must match'
+  return null
+})
+
+const $termsError = derivation((t) => {
+  const agreed = $agreedToTerms.get(t)
+  return agreed ? null : 'You must agree to the terms'
+})
+
+// Form validity
+const $isValid = derivation((t) => {
+  return !$emailError.get(t) &&
+         !$passwordError.get(t) &&
+         !$confirmError.get(t) &&
+         !$termsError.get(t)
+})
+
+// Submission state
+const $submitting = state(false)
+const $submitError = state<string | null>(null)
+const $submitted = state(false)
+
+// Update UI with validation errors
+effect((t) => {
+  const emailError = $emailError.get(t)
+  const passwordError = $passwordError.get(t)
+  const confirmError = $confirmError.get(t)
+  const termsError = $termsError.get(t)
+  
+  updateValidationUI({
+    email: emailError,
+    password: passwordError,
+    confirm: confirmError,
+    terms: termsError
+  })
+})
+
+// Enable/disable submit button
+effect((t) => {
+  const isValid = $isValid.get(t)
+  const submitting = $submitting.get(t)
+  
+  const submitButton = document.getElementById('submit') as HTMLButtonElement
+  submitButton.disabled = !isValid || submitting
+  submitButton.textContent = submitting ? 'Submitting...' : 'Submit'
+})
+
+// Handle submission
+async function handleSubmit() {
+  if (!$isValid.pick()) return
+  
+  $submitting.set(true)
+  $submitError.set(null)
+  
+  try {
+    const response = await fetch('/api/register', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        email: $email.pick(),
+        password: $password.pick()
+      })
+    })
+    
+    if (!response.ok) {
+      throw new Error('Registration failed')
+    }
+    
+    $submitted.set(true)
+  } catch (error) {
+    $submitError.set(error.message)
+  } finally {
+    $submitting.set(false)
+  }
+}
+
+// Show success message
+effect((t) => {
+  const submitted = $submitted.get(t)
+  if (submitted) {
+    showSuccessMessage('Registration successful!')
+  }
+})
+
+// Show submission errors
+effect((t) => {
+  const error = $submitError.get(t)
+  if (error) {
+    showErrorMessage(error)
+  }
+})
+```
+
+### Validation Flow
+
+```mermaid
+flowchart TD
+    A[$email] --> B[$emailError]
+    C[$password] --> D[$passwordError]
+    E[$confirmPassword] --> F[$confirmError]
+    G[$agreedToTerms] --> H[$termsError]
+    
+    B --> I[$isValid]
+    D --> I
+    F --> I
+    H --> I
+    
+    I --> J[Submit Button State]
+    J --> K{Valid?}
+    K -->|Yes| L[Enable Submit]
+    K -->|No| M[Disable Submit]
+```
+
+---
+
+## Example 3: Real-time Data Dashboard
+
+A dashboard displaying live data from a WebSocket connection with statistics.
+
+```typescript
+import { stream, state, derivation, effect } from '@ersbeth/picoflow'
+
+// Types
+interface DataPoint {
+  timestamp: number
+  value: number
+  source: string
+}
+
+interface Stats {
+  min: number
+  max: number
+  avg: number
+  count: number
+}
+
+// WebSocket stream
+const $liveData = stream<DataPoint>((set) => {
+  const ws = new WebSocket('wss://data.example.com')
+  
+  ws.onopen = () => {
+    console.log('Connected to data stream')
+    $connectionStatus.set('connected')
+  }
+  
+  ws.onmessage = (event) => {
+    const data = JSON.parse(event.data)
+    set(data)
+  }
+  
+  ws.onerror = (error) => {
+    console.error('WebSocket error:', error)
+    $connectionStatus.set('error')
+  }
+  
+  ws.onclose = () => {
+    console.log('Disconnected from data stream')
+    $connectionStatus.set('disconnected')
+  }
+  
+  return () => ws.close()
+})
+
+// State
+const $connectionStatus = state<'connected' | 'disconnected' | 'error'>('disconnected')
+const $dataHistory = state<DataPoint[]>([])
+const $maxHistorySize = state(100)
+
+// Add new data to history
+effect((t) => {
+  const newData = $liveData.get(t)
+  if (!newData) return
+  
+  const history = $dataHistory.pick()
+  const maxSize = $maxHistorySize.pick()
+  
+  const updated = [...history, newData]
+  if (updated.length > maxSize) {
+    updated.shift() // Remove oldest
+  }
+  
+  $dataHistory.set(updated)
+})
+
+// Derived statistics
+const $stats = derivation<Stats>((t) => {
+  const history = $dataHistory.get(t)
+  if (history.length === 0) {
+    return { min: 0, max: 0, avg: 0, count: 0 }
+  }
+  
+  const values = history.map(d => d.value)
+  const sum = values.reduce((a, b) => a + b, 0)
+  
+  return {
+    min: Math.min(...values),
+    max: Math.max(...values),
+    avg: sum / values.length,
+    count: history.length
+  }
+})
+
+// Recent data (last 10 points)
+const $recentData = derivation((t) => {
+  const history = $dataHistory.get(t)
+  return history.slice(-10)
+})
+
+// Data by source
+const $dataBySource = derivation((t) => {
+  const history = $dataHistory.get(t)
+  const bySource: Record<string, DataPoint[]> = {}
+  
+  for (const point of history) {
+    if (!bySource[point.source]) {
+      bySource[point.source] = []
+    }
+    bySource[point.source].push(point)
+  }
+  
+  return bySource
+})
+
+// UI Updates
+effect((t) => {
+  const status = $connectionStatus.get(t)
+  updateConnectionIndicator(status)
+})
+
+effect((t) => {
+  const stats = $stats.get(t)
+  renderStatsDisplay(stats)
+})
+
+effect((t) => {
+  const recent = $recentData.get(t)
+  renderRecentDataTable(recent)
+})
+
+effect((t) => {
+  const history = $dataHistory.get(t)
+  renderChart(history)
+})
+
+// Alert on high values
+effect((t) => {
+  const newData = $liveData.get(t)
+  if (newData && newData.value > 100) {
+    showAlert(`High value detected: ${newData.value}`)
+  }
+})
+```
+
+### Dashboard Data Flow
+
+```mermaid
+flowchart TD
+    A[WebSocket] -->|pushes| B[$liveData stream]
+    B --> C[Effect: Add to history]
+    C --> D[$dataHistory]
+    D --> E[$stats derivation]
+    D --> F[$recentData derivation]
+    D --> G[$dataBySource derivation]
+    
+    E --> H[Stats Display]
+    F --> I[Recent Data Table]
+    D --> J[Chart]
+    G --> K[Source Breakdown]
+```
+
+---
+
+## Example 4: Shopping Cart
+
+A shopping cart with items, quantities, prices, and calculated totals.
+
+```typescript
+import { map, derivation, effect, state } from '@ersbeth/picoflow'
+
+// Types
+interface Product {
+  id: string
+  name: string
+  price: number
+  image: string
+}
+
+interface CartItem {
+  product: Product
+  quantity: number
+}
+
+// Cart state
+const $cart = map<string, CartItem>()
+const $taxRate = state(0.08) // 8%
+const $shippingThreshold = state(50) // Free shipping over $50
+
+// Derived values
+const $subtotal = derivation((t) => {
+  const cart = $cart.get(t)
+  return Object.values(cart).reduce(
+    (sum, item) => sum + item.product.price * item.quantity,
+    0
+  )
+})
+
+const $tax = derivation((t) => {
+  const subtotal = $subtotal.get(t)
+  const taxRate = $taxRate.get(t)
+  return subtotal * taxRate
+})
+
+const $shipping = derivation((t) => {
+  const subtotal = $subtotal.get(t)
+  const threshold = $shippingThreshold.get(t)
+  return subtotal >= threshold ? 0 : 5.99
+})
+
+const $total = derivation((t) => {
+  return $subtotal.get(t) + $tax.get(t) + $shipping.get(t)
+})
+
+const $itemCount = derivation((t) => {
+  const cart = $cart.get(t)
+  return Object.values(cart).reduce(
+    (sum, item) => sum + item.quantity,
+    0
+  )
+})
+
+// Operations
+function addToCart(product: Product) {
+  const existing = $cart.pick().get(product.id)
+  
+  if (existing) {
+    $cart.update(product.id, {
+      product,
+      quantity: existing.quantity + 1
+    })
+  } else {
+    $cart.add(product.id, {
+      product,
+      quantity: 1
+    })
+  }
+}
+
+function removeFromCart(productId: string) {
+  $cart.delete(productId)
+}
+
+function updateQuantity(productId: string, quantity: number) {
+  const item = $cart.pick().get(productId)
+  if (!item) return
+  
+  if (quantity <= 0) {
+    $cart.delete(productId)
+  } else {
+    $cart.update(productId, {
+      ...item,
+      quantity
+    })
+  }
+}
+
+function clearCart() {
+  const items = Array.from($cart.pick().keys())
+  items.forEach(id => $cart.delete(id))
+}
+
+// UI Updates - Add items
+effect((t) => {
+  const lastAdded = $cart.$lastAdded.get(t)
+  if (lastAdded) {
+    addCartItemToUI(lastAdded.value)
+  }
+})
+
+// UI Updates - Update items
+effect((t) => {
+  const lastUpdated = $cart.$lastUpdated.get(t)
+  if (lastUpdated) {
+    updateCartItemInUI(lastUpdated.value)
+  }
+})
+
+// UI Updates - Remove items
+effect((t) => {
+  const lastDeleted = $cart.$lastDeleted.get(t)
+  if (lastDeleted) {
+    removeCartItemFromUI(lastDeleted.key)
+  }
+})
+
+// UI Updates - Totals
+effect((t) => {
+  const subtotal = $subtotal.get(t)
+  const tax = $tax.get(t)
+  const shipping = $shipping.get(t)
+  const total = $total.get(t)
+  
+  renderCartTotals({
+    subtotal,
+    tax,
+    shipping,
+    total
+  })
+})
+
+// UI Updates - Item count badge
+effect((t) => {
+  const count = $itemCount.get(t)
+  updateCartBadge(count)
+})
+
+// Persistence
+effect((t) => {
+  const cart = $cart.get(t)
+  const cartObj = Object.fromEntries(cart)
+  localStorage.setItem('cart', JSON.stringify(cartObj))
+})
+
+// Load cart on init
+function loadCart() {
+  const stored = localStorage.getItem('cart')
+  if (stored) {
+    const items = JSON.parse(stored)
+    for (const [key, item] of Object.entries(items)) {
+      const existing = $cart.pick().has(key)
+      if (existing) {
+        $cart.update(key, item as CartItem)
+      } else {
+        $cart.add(key, item as CartItem)
+      }
+    }
+  }
+}
+
+loadCart()
+```
+
+### Shopping Cart Flow
+
+```mermaid
+flowchart TD
+    A[User Actions] --> B[addToCart/updateQuantity]
+    B --> C[$cart map]
+    C --> D[$subtotal]
+    D --> E[$tax]
+    D --> F[$shipping]
+    E --> G[$total]
+    F --> G
+    C --> H[$itemCount]
+    
+    C --> I[$lastAdded effect]
+    C --> J[$lastUpdated effect]
+    C --> K[$lastDeleted effect]
+    I --> L[Add UI Item]
+    J --> M[Update UI Item]
+    K --> N[Remove UI Item]
+    
+    D --> O[Render Totals]
+    E --> O
+    F --> O
+    G --> O
+    H --> P[Update Badge]
+```
+
+---
+
+## Example 5: Auto-save Feature
+
+An auto-save system that debounces changes and handles errors.
+
+```typescript
+import { state, effect, signal } from '@ersbeth/picoflow'
+
+// Types
+interface Document {
+  id: string
+  title: string
+  content: string
+  lastModified: number
+}
+
+type SaveStatus = 'saved' | 'saving' | 'unsaved' | 'error'
+
+// State
+const $document = state<Document>({
+  id: '123',
+  title: 'Untitled',
+  content: '',
+  lastModified: Date.now()
+})
+
+const $saveStatus = state<SaveStatus>('saved')
+const $lastError = state<string | null>(null)
+const $manualSave = signal()
+
+// Debounced auto-save
+let saveTimeout: ReturnType<typeof setTimeout> | null = null
+const SAVE_DELAY = 2000 // 2 seconds
+
+effect((t) => {
+  const doc = $document.get(t)
+  
+  // Clear previous timeout
+  if (saveTimeout) {
+    clearTimeout(saveTimeout)
+  }
+  
+  // Mark as unsaved
+  $saveStatus.set('unsaved')
+  
+  // Debounce save
+  saveTimeout = setTimeout(() => {
+    saveDocument(doc)
+  }, SAVE_DELAY)
+})
+
+// Manual save trigger
+effect((t) => {
+  $manualSave.watch(t)
+  const doc = $document.pick()
+  
+  // Clear debounce timeout
+  if (saveTimeout) {
+    clearTimeout(saveTimeout)
+    saveTimeout = null
+  }
+  
+  saveDocument(doc)
+})
+
+// Save function
+async function saveDocument(doc: Document) {
+  $saveStatus.set('saving')
+  $lastError.set(null)
+  
+  try {
+    const response = await fetch(`/api/documents/${doc.id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(doc)
+    })
+    
+    if (!response.ok) {
+      throw new Error('Save failed')
+    }
+    
+    $saveStatus.set('saved')
+  } catch (error) {
+    $saveStatus.set('error')
+    $lastError.set(error.message)
+    
+    // Retry after 5 seconds
+    setTimeout(() => {
+      if ($saveStatus.pick() === 'error') {
+        saveDocument($document.pick())
+      }
+    }, 5000)
+  }
+}
+
+// UI Updates
+effect((t) => {
+  const status = $saveStatus.get(t)
+  const error = $lastError.get(t)
+  
+  updateSaveIndicator(status, error)
+})
+
+// Document operations
+function updateTitle(title: string) {
+  $document.set(doc => ({
+    ...doc,
+    title,
+    lastModified: Date.now()
+  }))
+}
+
+function updateContent(content: string) {
+  $document.set(doc => ({
+    ...doc,
+    content,
+    lastModified: Date.now()
+  }))
+}
+
+function triggerManualSave() {
+  $manualSave.trigger()
+}
+
+// Warn before leaving with unsaved changes
+window.addEventListener('beforeunload', (e) => {
+  if ($saveStatus.pick() === 'unsaved' || $saveStatus.pick() === 'saving') {
+    e.preventDefault()
+    e.returnValue = ''
+  }
+})
+```
+
+### Auto-save Flow
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Document
+    participant Effect
+    participant API
+    
+    User->>Document: Edit content
+    Document->>Effect: Change detected
+    Effect->>Effect: Start 2s timer
+    Note over Effect: Status: unsaved
+    
+    User->>Document: Edit more
+    Effect->>Effect: Reset timer
+    
+    Note over Effect: 2s pass...
+    Effect->>API: Save document
+    Note over Effect: Status: saving
+    API->>Effect: Success
+    Note over Effect: Status: saved
+    
+    User->>Effect: Manual save
+    Effect->>Effect: Cancel timer
+    Effect->>API: Save immediately
+```
+
+---
+
+## Example 6: Event Bus with Signals
+
+A global event bus using signals to coordinate communication between independent components.
+
+```typescript
+import { signal, effect, state } from '@ersbeth/picoflow'
+
+// Event signals
+const $userLoggedIn = signal()
+const $userLoggedOut = signal()
+const $dataRefreshRequested = signal()
+const $notificationRequested = signal()
+const $themeChanged = signal()
+
+// Shared state
+const $currentUser = state<User | null>(null)
+const $theme = state<'light' | 'dark'>('light')
+const $notifications = state<string[]>([])
+
+// Component 1: Authentication Manager
+effect((t) => {
+  $userLoggedIn.watch(t)
+  const user = $currentUser.pick()
+  
+  if (user) {
+    console.log(`User ${user.name} logged in`)
+    
+    // Initialize user-specific features
+    loadUserPreferences(user.id)
+    startActivityTracking(user.id)
+    
+    // Request data refresh
+    $dataRefreshRequested.trigger()
+  }
+})
+
+effect((t) => {
+  $userLoggedOut.watch(t)
+  
+  console.log('User logged out')
+  
+  // Cleanup user-specific features
+  clearUserPreferences()
+  stopActivityTracking()
+  
+  // Reset state
+  $currentUser.set(null)
+})
+
+// Component 2: Data Manager
+const $userData = state<UserData | null>(null)
+const $dashboardData = state<DashboardData | null>(null)
+
+effect((t) => {
+  $dataRefreshRequested.watch(t)
+  const user = $currentUser.pick()
+  
+  if (!user) return
+  
+  console.log('Refreshing all data...')
+  
+  // Fetch multiple data sources
+  Promise.all([
+    fetchUserData(user.id),
+    fetchDashboardData(user.id)
+  ]).then(([userData, dashboardData]) => {
+    $userData.set(userData)
+    $dashboardData.set(dashboardData)
+    $notificationRequested.trigger()
+  })
+})
+
+// Component 3: Notification Manager
+const $lastNotification = state<string>('')
+
+effect((t) => {
+  $notificationRequested.watch(t)
+  const notification = $lastNotification.pick()
+  
+  if (notification) {
+    showToast(notification)
+  }
+})
+
+effect((t) => {
+  $userLoggedIn.watch(t)
+  const user = $currentUser.pick()
+  
+  if (user) {
+    $lastNotification.set(`Welcome back, ${user.name}!`)
+    $notificationRequested.trigger()
+  }
+})
+
+// Component 4: Theme Manager
+effect((t) => {
+  $themeChanged.watch(t)
+  const theme = $theme.pick()
+  
+  document.body.classList.remove('light', 'dark')
+  document.body.classList.add(theme)
+  
+  localStorage.setItem('theme', theme)
+  
+  $lastNotification.set(`Theme changed to ${theme}`)
+  $notificationRequested.trigger()
+})
+
+// Component 5: Analytics Tracker
+effect((t) => {
+  $userLoggedIn.watch(t)
+  const user = $currentUser.pick()
+  
+  if (user) {
+    analytics.track('user_logged_in', {
+      userId: user.id,
+      timestamp: Date.now()
+    })
+  }
+})
+
+effect((t) => {
+  $dataRefreshRequested.watch(t)
+  
+  analytics.track('data_refresh_requested', {
+    timestamp: Date.now()
+  })
+})
+
+// Public API
+export const auth = {
+  login: (user: User) => {
+    $currentUser.set(user)
+    $userLoggedIn.trigger()
+  },
+  
+  logout: () => {
+    $userLoggedOut.trigger()
+  }
+}
+
+export const data = {
+  refresh: () => {
+    $dataRefreshRequested.trigger()
+  }
+}
+
+export const theme = {
+  set: (newTheme: 'light' | 'dark') => {
+    $theme.set(newTheme)
+    $themeChanged.trigger()
+  },
+  
+  toggle: () => {
+    const current = $theme.pick()
+    const newTheme = current === 'light' ? 'dark' : 'light'
+    $theme.set(newTheme)
+    $themeChanged.trigger()
+  }
+}
+
+export const notifications = {
+  show: (message: string) => {
+    $lastNotification.set(message)
+    $notificationRequested.trigger()
+  }
+}
+```
+
+### Event Bus Flow
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Auth as Auth Manager
+    participant Data as Data Manager
+    participant Notif as Notification Manager
+    participant Analytics
+    
+    User->>Auth: login(user)
+    activate Auth
+    Auth->>Auth: $currentUser.set(user)
+    Auth->>Auth: $userLoggedIn.trigger()
+    
+    Note over Auth,Analytics: Signal broadcasts to all watchers
+    
+    Auth->>Data: Watch $userLoggedIn
+    activate Data
+    Note over Data: Load user preferences<br/>Start tracking
+    Data->>Data: $dataRefreshRequested.trigger()
+    deactivate Data
+    
+    Auth->>Notif: Watch $userLoggedIn
+    activate Notif
+    Note over Notif: Show welcome message
+    Notif->>Notif: $notificationRequested.trigger()
+    deactivate Notif
+    
+    Auth->>Analytics: Watch $userLoggedIn
+    activate Analytics
+    Note over Analytics: Track login event
+    deactivate Analytics
+    
+    deactivate Auth
+    
+    Data->>Data: Watch $dataRefreshRequested
+    activate Data
+    Note over Data: Fetch user data
+    Data->>Notif: $notificationRequested.trigger()
+    deactivate Data
+```
+
+**Key Benefits:**
+
+- **Decoupled**: Components don't know about each other
+- **Scalable**: Easy to add new listeners to any signal
+- **Testable**: Each component can be tested independently
+- **Maintainable**: Clear separation of concerns
+
+---
+
+## Example 7: Manual Refresh with Signals
+
+Use a signal to trigger data refresh on demand:
+
+```typescript
+import { signal, effect, state, resource } from '@ersbeth/picoflow'
+
+const $manualRefresh = signal()
+const $userId = state(1)
+
+// Resource that refetches when signal triggers
+const $userData = resource(
+  (t) => {
+    $manualRefresh.watch(t) // Watch for manual refresh
+    return $userId.get(t)
+  },
+  (id) => fetchUser(id)
+)
+
+// Display the data
+effect((t) => {
+  const data = $userData.get(t)
+  if (data.state === 'ready') {
+    renderUserProfile(data.value)
+  }
+})
+
+// Trigger refresh from a button
+function onRefreshClick() {
+  $manualRefresh.trigger()
+}
+```
+
+### Manual Refresh Flow
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Button
+    participant $manualRefresh as $manualRefresh (Signal)
+    participant Resource as $userData (Resource)
+    participant API
+    participant Effect
+    
+    User->>Button: Click refresh
+    Button->>$manualRefresh: trigger()
+    
+    activate $manualRefresh
+    Note over $manualRefresh: Notify all watchers
+    $manualRefresh->>Resource: Re-execute source function
+    deactivate $manualRefresh
+    
+    activate Resource
+    Resource->>API: fetchUser(1)
+    Note over Resource: State: pending
+    
+    API-->>Resource: User data
+    Note over Resource: State: ready
+    Resource->>Effect: Notify
+    deactivate Resource
+    
+    activate Effect
+    Effect->>Effect: renderUserProfile(data)
+    deactivate Effect
+```
+
+**Use Case:** Perfect for implementing refresh buttons in dashboards, data tables, or any UI that needs manual data updates.
+
+---
+
+## Example 8: Coordinating Multiple Operations with Signals
+
+Use signals to synchronize independent reactive flows:
+
+```typescript
+import { signal, effect, state } from '@ersbeth/picoflow'
+
+const $syncPoint = signal()
+
+const $dataA = state<Data | null>(null)
+const $dataB = state<Data | null>(null)
+
+// First operation: fetch A
+effect((t) => {
+  $syncPoint.watch(t)
+  fetchDataA().then(data => {
+    $dataA.set(data)
+  })
+})
+
+// Second operation: fetch B
+effect((t) => {
+  $syncPoint.watch(t)
+  fetchDataB().then(data => {
+    $dataB.set(data)
+  })
+})
+
+// Combine results when both are ready
+effect((t) => {
+  const a = $dataA.get(t)
+  const b = $dataB.get(t)
+  
+  if (a && b) {
+    renderCombinedView(a, b)
+  }
+})
+
+// Trigger both fetches at once
+function refreshAll() {
+  $syncPoint.trigger()
+}
+```
+
+### Synchronization Flow
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Signal as $syncPoint
+    participant EffectA as Effect A
+    participant EffectB as Effect B
+    participant CombineEffect as Combine Effect
+    
+    User->>Signal: refreshAll()
+    
+    activate Signal
+    Note over Signal: Notify all watchers
+    
+    par Parallel Fetches
+        Signal->>EffectA: Execute
+        activate EffectA
+        EffectA->>EffectA: fetchDataA()
+        Note over EffectA: Async operation...
+        
+        Signal->>EffectB: Execute
+        activate EffectB
+        EffectB->>EffectB: fetchDataB()
+        Note over EffectB: Async operation...
+    end
+    deactivate Signal
+    
+    EffectA->>EffectA: $dataA.set(data)
+    EffectA->>CombineEffect: Notify
+    deactivate EffectA
+    
+    EffectB->>EffectB: $dataB.set(data)
+    EffectB->>CombineEffect: Notify
+    deactivate EffectB
+    
+    activate CombineEffect
+    Note over CombineEffect: Both ready!
+    CombineEffect->>CombineEffect: renderCombinedView(a, b)
+    deactivate CombineEffect
+```
+
+**Use Case:** Ideal for coordinating multiple data fetches, synchronizing app initialization, or triggering multiple related operations from a single action.
+
+---
+
+## Example 9: Save Confirmation with Signals
+
+Use signals to notify when async operations complete:
+
+```typescript
+import { signal, effect, state } from '@ersbeth/picoflow'
+
+const $saveComplete = signal()
+const $saveError = signal()
+const $document = state({ title: '', content: '' })
+
+// Show success message when save completes
+effect((t) => {
+  $saveComplete.watch(t)
+  showNotification('Document saved!', 'success')
+})
+
+// Show error message on failure
+effect((t) => {
+  $saveError.watch(t)
+  showNotification('Save failed', 'error')
+})
+
+// Save function
+async function saveDocument() {
+  try {
+    const doc = $document.pick()
+    await api.saveDocument(doc)
+    $saveComplete.trigger()
+  } catch (error) {
+    $saveError.trigger()
+  }
+}
+```
+
+### Save Confirmation Flow
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant SaveFn as saveDocument()
+    participant API
+    participant $saveComplete as $saveComplete Signal
+    participant $saveError as $saveError Signal
+    participant SuccessEffect
+    participant ErrorEffect
+    
+    User->>SaveFn: Call saveDocument()
+    activate SaveFn
+    
+    SaveFn->>API: POST document
+    
+    alt Save Success
+        API-->>SaveFn: 200 OK
+        SaveFn->>$saveComplete: trigger()
+        activate $saveComplete
+        $saveComplete->>SuccessEffect: Execute
+        activate SuccessEffect
+        Note over SuccessEffect: Show success notification
+        deactivate SuccessEffect
+        deactivate $saveComplete
+    else Save Failure
+        API-->>SaveFn: 500 Error
+        SaveFn->>$saveError: trigger()
+        activate $saveError
+        $saveError->>ErrorEffect: Execute
+        activate ErrorEffect
+        Note over ErrorEffect: Show error notification
+        deactivate ErrorEffect
+        deactivate $saveError
+    end
+    
+    deactivate SaveFn
+```
+
+**Use Case:** Great for handling async operation outcomes, showing notifications, or triggering cleanup after operations complete.
+
+---
+
+## Example 10: Mathematical Calculations with Derivations
+
+Use derivations to compute statistics from reactive data:
+
+```typescript
+import { state, derivation, effect } from '@ersbeth/picoflow'
+
+const $numbers = state([1, 2, 3, 4, 5])
+
+const $sum = derivation((t) => {
+  return $numbers.get(t).reduce((a, b) => a + b, 0)
+})
+
+const $average = derivation((t) => {
+  const sum = $sum.get(t)
+  const count = $numbers.pick().length
+  return sum / count
+})
+
+const $max = derivation((t) => {
+  return Math.max(...$numbers.get(t))
+})
+
+const $min = derivation((t) => {
+  return Math.min(...$numbers.get(t))
+})
+
+// Display statistics
+effect((t) => {
+  console.log('Sum:', $sum.get(t))
+  console.log('Average:', $average.get(t))
+  console.log('Max:', $max.get(t))
+  console.log('Min:', $min.get(t))
+})
+
+// Update numbers
+$numbers.set([10, 20, 30, 40, 50])
+// All statistics update automatically
+```
+
+**Use Case:** Real-time statistics dashboards, data analysis tools, financial calculations.
+
+---
+
+## Example 11: Filtered Lists with Derivations
+
+Implement dynamic filtering with chained derivations:
+
+```typescript
+interface Todo {
+  id: number
+  text: string
+  completed: boolean
+}
+
+const $todos = state<Todo[]>([
+  { id: 1, text: 'Learn PicoFlow', completed: true },
+  { id: 2, text: 'Build app', completed: false },
+  { id: 3, text: 'Deploy', completed: false }
+])
+
+const $filter = state<'all' | 'active' | 'completed'>('all')
+
+const $filteredTodos = derivation((t) => {
+  const todos = $todos.get(t)
+  const filter = $filter.get(t)
+  
+  switch (filter) {
+    case 'active':
+      return todos.filter(todo => !todo.completed)
+    case 'completed':
+      return todos.filter(todo => todo.completed)
+    default:
+      return todos
+  }
+})
+
+const $activeCount = derivation((t) => {
+  return $todos.get(t).filter(todo => !todo.completed).length
+})
+
+const $completedCount = derivation((t) => {
+  return $todos.get(t).filter(todo => todo.completed).length
+})
+
+// Display filtered todos
+effect((t) => {
+  const filtered = $filteredTodos.get(t)
+  const active = $activeCount.get(t)
+  const completed = $completedCount.get(t)
+  
+  console.log(`Showing ${filtered.length} todos`)
+  console.log(`${active} active, ${completed} completed`)
+  renderTodoList(filtered)
+})
+```
+
+**Use Case:** Todo lists, task managers, filtered data grids with multiple view modes.
+
+---
+
+## Example 12: Formatted Values with Derivations
+
+Use derivations for internationalization and formatting:
+
+```typescript
+const $amount = state(1234.56)
+const $currency = state('USD')
+
+const $formatted = derivation((t) => {
+  const amount = $amount.get(t)
+  const currency = $currency.get(t)
+  
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currency
+  }).format(amount)
+})
+
+effect((t) => {
+  console.log($formatted.get(t))
+})
+
+$amount.set(9999.99)    // "$9,999.99"
+$currency.set('EUR')    // "€9,999.99"
+$currency.set('JPY')    // "¥9,999"
+```
+
+**Use Case:** Multi-currency applications, internationalized interfaces, dynamic formatting based on user locale.
+
+---
+
+## Example 13: Derived UI State
+
+Create a unified UI state from multiple sources:
+
+```typescript
+const $user = state<User | null>(null)
+const $loading = state(false)
+const $error = state<string | null>(null)
+
+const $uiState = derivation((t) => {
+  const loading = $loading.get(t)
+  const error = $error.get(t)
+  const user = $user.get(t)
+  
+  if (loading) return { type: 'loading' as const }
+  if (error) return { type: 'error' as const, message: error }
+  if (user) return { type: 'success' as const, user }
+  return { type: 'idle' as const }
+})
+
+effect((t) => {
+  const state = $uiState.get(t)
+  
+  switch (state.type) {
+    case 'loading':
+      showSpinner()
+      break
+    case 'error':
+      showError(state.message)
+      break
+    case 'success':
+      showUser(state.user)
+      break
+    case 'idle':
+      showLogin()
+      break
+  }
+})
+
+// Simulate async operation
+async function loadUser() {
+  $loading.set(true)
+  $error.set(null)
+  
+  try {
+    const user = await fetchUser()
+    $user.set(user)
+  } catch (err) {
+    $error.set(err.message)
+  } finally {
+    $loading.set(false)
+  }
+}
+```
+
+**Use Case:** State machines for async operations, loading screens, error boundaries.
+
+---
+
+## Example 14: Shopping Cart with Derived Totals
+
+Calculate cart totals reactively with multiple derivations:
+
+```typescript
+interface CartItem {
+  id: string
+  name: string
+  price: number
+  quantity: number
+}
+
+const $cartItems = state<CartItem[]>([])
+
+const $subtotal = derivation((t) => {
+  return $cartItems.get(t).reduce((sum, item) => {
+    return sum + (item.price * item.quantity)
+  }, 0)
+})
+
+const $tax = derivation((t) => {
+  return $subtotal.get(t) * 0.08 // 8% tax
+})
+
+const $shipping = derivation((t) => {
+  const subtotal = $subtotal.get(t)
+  return subtotal > 50 ? 0 : 5.99 // Free shipping over $50
+})
+
+const $total = derivation((t) => {
+  return $subtotal.get(t) + $tax.get(t) + $shipping.get(t)
+})
+
+// Display in UI
+effect((t) => {
+  const subtotal = $subtotal.get(t)
+  const tax = $tax.get(t)
+  const shipping = $shipping.get(t)
+  const total = $total.get(t)
+  
+  document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`
+  document.getElementById('tax').textContent = `$${tax.toFixed(2)}`
+  document.getElementById('shipping').textContent = `$${shipping.toFixed(2)}`
+  document.getElementById('total').textContent = `$${total.toFixed(2)}`
+})
+
+// Add items to cart
+function addItem(item: CartItem) {
+  $cartItems.set(items => [...items, item])
+}
+```
+
+**Use Case:** E-commerce carts, order summaries, price calculators with multiple components.
+
+---
+
+## Example 15: Product Search and Filter
+
+Multi-criteria filtering with derivations:
+
+```typescript
+interface Product {
+  id: number
+  name: string
+  category: string
+  price: number
+  inStock: boolean
+}
+
+const $products = state<Product[]>([
+  { id: 1, name: 'Laptop', category: 'Electronics', price: 999, inStock: true },
+  { id: 2, name: 'Mouse', category: 'Electronics', price: 25, inStock: true },
+  { id: 3, name: 'Desk', category: 'Furniture', price: 300, inStock: false },
+  // ... more products
+])
+
+const $searchQuery = state('')
+const $selectedCategory = state<string | null>(null)
+const $showOutOfStock = state(false)
+
+const $filteredProducts = derivation((t) => {
+  let products = $products.get(t)
+  const query = $searchQuery.get(t).toLowerCase()
+  const category = $selectedCategory.get(t)
+  const showOutOfStock = $showOutOfStock.get(t)
+  
+  // Apply filters
+  if (query) {
+    products = products.filter(p => 
+      p.name.toLowerCase().includes(query)
+    )
+  }
+  
+  if (category) {
+    products = products.filter(p => p.category === category)
+  }
+  
+  if (!showOutOfStock) {
+    products = products.filter(p => p.inStock)
+  }
+  
+  return products
+})
+
+const $resultCount = derivation((t) => {
+  return $filteredProducts.get(t).length
+})
+
+// Display results
+effect((t) => {
+  const products = $filteredProducts.get(t)
+  const count = $resultCount.get(t)
+  
+  console.log(`Found ${count} products`)
+  renderProducts(products)
+})
+
+// Update filters
+function updateSearch(query: string) {
+  $searchQuery.set(query)
+}
+
+function selectCategory(category: string | null) {
+  $selectedCategory.set(category)
+}
+
+function toggleOutOfStock() {
+  $showOutOfStock.set(value => !value)
+}
+```
+
+**Use Case:** Product catalogs, data tables with filters, search interfaces with multiple criteria.
+
+---
+
+## Example 16: Form Validation with Derivations
+
+Real-time form validation using derivations:
+
+```typescript
+const $email = state('')
+const $password = state('')
+const $confirmPassword = state('')
+
+const $emailError = derivation((t) => {
+  const email = $email.get(t)
+  if (!email) return null
+  if (!email.includes('@')) return 'Email must contain @'
+  if (email.length < 5) return 'Email too short'
+  return null
+})
+
+const $passwordError = derivation((t) => {
+  const password = $password.get(t)
+  if (!password) return null
+  if (password.length < 8) return 'Password must be at least 8 characters'
+  return null
+})
+
+const $confirmError = derivation((t) => {
+  const password = $password.get(t)
+  const confirm = $confirmPassword.get(t)
+  if (!confirm) return null
+  if (password !== confirm) return 'Passwords must match'
+  return null
+})
+
+const $isValid = derivation((t) => {
+  return !$emailError.get(t) && 
+         !$passwordError.get(t) && 
+         !$confirmError.get(t)
+})
+
+// Update submit button
+effect((t) => {
+  const valid = $isValid.get(t)
+  const submitButton = document.getElementById('submit') as HTMLButtonElement
+  submitButton.disabled = !valid
+})
+
+// Show email error
+effect((t) => {
+  const error = $emailError.get(t)
+  const errorEl = document.getElementById('email-error')
+  errorEl.textContent = error || ''
+  errorEl.style.display = error ? 'block' : 'none'
+})
+
+// Show password error
+effect((t) => {
+  const error = $passwordError.get(t)
+  const errorEl = document.getElementById('password-error')
+  errorEl.textContent = error || ''
+  errorEl.style.display = error ? 'block' : 'none'
+})
+
+// Show confirm error
+effect((t) => {
+  const error = $confirmError.get(t)
+  const errorEl = document.getElementById('confirm-error')
+  errorEl.textContent = error || ''
+  errorEl.style.display = error ? 'block' : 'none'
+})
+
+// Form submission
+async function handleSubmit() {
+  if (!$isValid.pick()) return
+  
+  const email = $email.pick()
+  const password = $password.pick()
+  
+  await registerUser(email, password)
+}
+```
+
+**Use Case:** Registration forms, settings panels, any form requiring real-time validation feedback.
+
+---
+
+## Example 17: Console Logging with Effects
+
+Simple reactive console logging:
+
+```typescript
+import { state, effect } from '@ersbeth/picoflow'
+
+const $temperature = state(20)
+
+effect((t) => {
+  const temp = $temperature.get(t)
+  console.log(`Temperature: ${temp}°C`)
+})
+
+$temperature.set(25) // Logs: "Temperature: 25°C"
+```
+
+**Use Case:** Development debugging, tracking state changes, monitoring application behavior.
+
+---
+
+## Example 18: Document Title Updates
+
+Update the browser document title reactively:
+
+```typescript
+import { state, derivation, effect } from '@ersbeth/picoflow'
+
+const $pageName = state('Home')
+const $unreadCount = state(0)
+
+const $title = derivation((t) => {
+  const page = $pageName.get(t)
+  const unread = $unreadCount.get(t)
+  
+  return unread > 0 
+    ? `(${unread}) ${page}`
+    : page
+})
+
+effect((t) => {
+  document.title = $title.get(t)
+})
+
+$pageName.set('Messages')     // Title: "Messages"
+$unreadCount.set(5)            // Title: "(5) Messages"
+```
+
+**Use Case:** Dynamic page titles, notification badges in browser tabs, user feedback.
+
+---
+
+## Example 19: Form Validation Feedback
+
+Real-time form validation with visual feedback:
+
+```typescript
+import { state, derivation, effect } from '@ersbeth/picoflow'
+
+const $email = state('')
+const $password = state('')
+
+const $errors = derivation((t) => {
+  const email = $email.get(t)
+  const password = $password.get(t)
+  
+  const errors = []
+  if (email && !email.includes('@')) {
+    errors.push('Invalid email')
+  }
+  if (password && password.length < 8) {
+    errors.push('Password too short')
+  }
+  return errors
+})
+
+// Update error display
+effect((t) => {
+  const errors = $errors.get(t)
+  const errorDiv = document.getElementById('errors')
+  errorDiv.innerHTML = errors.map(e => `<div>${e}</div>`).join('')
+})
+```
+
+**Use Case:** Real-time form validation, user input feedback, accessibility improvements.
+
+---
+
+## Example 20: Auto-save with Debouncing
+
+Automatically save document changes with debouncing:
+
+```typescript
+import { state, signal, effect } from '@ersbeth/picoflow'
+
+const $document = state({ title: '', content: '' })
+const $saveStatus = state<'saved' | 'saving' | 'unsaved'>('saved')
+
+// Debounced save effect (simplified)
+let saveTimeout: number | null = null
+
+effect((t) => {
+  const doc = $document.get(t)
+  
+  // Clear previous timeout
+  if (saveTimeout) clearTimeout(saveTimeout)
+  
+  $saveStatus.set('unsaved')
+  
+  // Debounce save
+  saveTimeout = setTimeout(() => {
+    $saveStatus.set('saving')
+    saveToServer(doc).then(() => {
+      $saveStatus.set('saved')
+    })
+  }, 1000)
+})
+
+// Show save status
+effect((t) => {
+  const status = $saveStatus.get(t)
+  document.getElementById('status').textContent = status
+})
+```
+
+**Use Case:** Text editors, draft saving, preventing data loss, user experience improvements.
+
+---
+
+## Example 21: User Profile Display
+
+Complete user profile management with multiple effects:
+
+```typescript
+import { state, derivation, effect } from '@ersbeth/picoflow'
+
+// State
+const $user = state({
+  firstName: 'Alice',
+  lastName: 'Smith',
+  email: 'alice@example.com'
+})
+
+const $editMode = state(false)
+
+// Derived values
+const $fullName = derivation((t) => {
+  const user = $user.get(t)
+  return `${user.firstName} ${user.lastName}`
+})
+
+// Effects
+effect((t) => {
+  const name = $fullName.get(t)
+  document.getElementById('display-name').textContent = name
+})
+
+effect((t) => {
+  const user = $user.get(t)
+  document.getElementById('email').textContent = user.email
+})
+
+effect((t) => {
+  const editMode = $editMode.get(t)
+  document.body.classList.toggle('edit-mode', editMode)
+})
+
+effect((t) => {
+  const user = $user.get(t)
+  localStorage.setItem('user', JSON.stringify(user))
+})
+
+// Update functions
+function updateFirstName(name: string) {
+  $user.set(user => ({ ...user, firstName: name }))
+}
+
+function toggleEditMode() {
+  $editMode.set(mode => !mode)
+}
+```
+
+**Use Case:** User profiles, settings panels, account management interfaces.
+
+---
+
+## Example 22: User List Management with Reactive Maps
+
+A user management system using fine-grained map tracking to efficiently handle additions, updates, and deletions.
+
+```typescript
+import { map, effect, derivation } from '@ersbeth/picoflow'
+
+interface User {
+  id: number
+  name: string
+  status: 'online' | 'offline'
+}
+
+const $users = map<number, User>()
+
+// Add user to UI when added
+effect((t) => {
+  const lastAdded = $users.$lastAdded.get(t)
+  if (lastAdded) {
+    addUserToDOM(lastAdded.value)
+  }
+})
+
+// Update user in UI when updated
+effect((t) => {
+  const lastUpdated = $users.$lastUpdated.get(t)
+  if (lastUpdated) {
+    updateUserInDOM(lastUpdated.value)
+  }
+})
+
+// Remove user from UI when deleted
+effect((t) => {
+  const lastDeleted = $users.$lastDeleted.get(t)
+  if (lastDeleted) {
+    removeUserFromDOM(lastDeleted.key)
+  }
+})
+
+// Update count
+const $userCount = derivation((t) => {
+  const users = $users.get(t)
+  return users.size
+})
+
+// API calls
+function addUser(user: User) {
+  $users.add(user.id, user)
+}
+
+function updateUser(user: User) {
+  $users.update(user.id, user)
+}
+
+function removeUser(userId: number) {
+  $users.delete(userId)
+}
+```
+
+**Use Case:** User management interfaces, contact lists, real-time collaboration tools where individual user changes need to be tracked separately.
+
+---
+
+## Example 23: Shopping Cart with Reactive Maps
+
+A shopping cart implementation using fine-grained map tracking for efficient UI updates.
+
+```typescript
+import { map, derivation, effect } from '@ersbeth/picoflow'
+
+interface CartItem {
+  id: string
+  name: string
+  price: number
+  quantity: number
+}
+
+const $cart = map<string, CartItem>()
+
+// Update UI only for added items
+effect((t) => {
+  const lastAdded = $cart.$lastAdded.get(t)
+  if (lastAdded) {
+    addCartItemToUI(lastAdded.value)
+  }
+})
+
+// Update UI only for updated items
+effect((t) => {
+  const lastUpdated = $cart.$lastUpdated.get(t)
+  if (lastUpdated) {
+    updateCartItemInUI(lastUpdated.value)
+  }
+})
+
+// Remove item from UI
+effect((t) => {
+  const lastDeleted = $cart.$lastDeleted.get(t)
+  if (lastDeleted) {
+    removeCartItemFromUI(lastDeleted.key)
+  }
+})
+
+// Computed totals
+const $subtotal = derivation((t) => {
+  const cart = $cart.get(t)
+  let sum = 0
+  for (const item of cart.values()) {
+    sum += item.price * item.quantity
+  }
+  return sum
+})
+
+const $itemCount = derivation((t) => {
+  const cart = $cart.get(t)
+  let count = 0
+  for (const item of cart.values()) {
+    count += item.quantity
+  }
+  return count
+})
+
+// Cart operations
+function addToCart(item: CartItem) {
+  const existing = $cart.pick().get(item.id)
+  if (existing) {
+    $cart.update(item.id, {
+      ...existing,
+      quantity: existing.quantity + 1
+    })
+  } else {
+    $cart.add(item.id, item)
+  }
+}
+
+function removeFromCart(itemId: string) {
+  $cart.delete(itemId)
+}
+
+function updateQuantity(itemId: string, quantity: number) {
+  const item = $cart.pick().get(itemId)
+  if (item) {
+    if (quantity <= 0) {
+      $cart.delete(itemId)
+    } else {
+      $cart.update(itemId, { ...item, quantity })
+    }
+  }
+}
+```
+
+**Use Case:** E-commerce shopping carts, order management, inventory tracking with granular updates.
+
+---
+
+## Example 24: Entity Cache with LRU
+
+An LRU (Least Recently Used) cache implementation using reactive maps and arrays.
+
+```typescript
+import { map, array, effect } from '@ersbeth/picoflow'
+
+const MAX_CACHE_SIZE = 100
+
+const $entityCache = map<string, any>()
+const $accessOrder = array<string>([])
+
+// Track cache additions
+effect((t) => {
+  const lastAdded = $entityCache.$lastAdded.get(t)
+  if (!lastAdded) return
+  
+  // Update access order
+  const order = $accessOrder.pick()
+  const existingIndex = order.indexOf(lastAdded.key)
+  
+  if (existingIndex !== -1) {
+    $accessOrder.splice(existingIndex, 1)
+  }
+  
+  $accessOrder.push(lastAdded.key)
+  
+  // Evict oldest if over limit
+  if ($accessOrder.pick().length > MAX_CACHE_SIZE) {
+    const oldest = $accessOrder.shift()
+    if (oldest) {
+      $entityCache.delete(oldest)
+    }
+  }
+})
+
+// Track cache updates (move to end of access order)
+effect((t) => {
+  const lastUpdated = $entityCache.$lastUpdated.get(t)
+  if (!lastUpdated) return
+  
+  const order = $accessOrder.pick()
+  const index = order.indexOf(lastUpdated.key)
+  if (index !== -1) {
+    $accessOrder.splice(index, 1)
+    $accessOrder.push(lastUpdated.key)
+  }
+})
+
+function getEntity(id: string) {
+  const cached = $entityCache.pick().get(id)
+  if (cached) {
+    // Update access order
+    const order = $accessOrder.pick()
+    const index = order.indexOf(id)
+    if (index !== -1) {
+      $accessOrder.splice(index, 1)
+      $accessOrder.push(id)
+    }
+    return cached
+  }
+  
+  // Fetch and cache
+  return fetchEntity(id).then(entity => {
+    const existing = $entityCache.pick().has(id)
+    if (existing) {
+      $entityCache.update(id, entity)
+    } else {
+      $entityCache.add(id, entity)
+    }
+    return entity
+  })
+}
+```
+
+**Use Case:** API response caching, resource management, memory-efficient data stores with automatic eviction.
+
+---
+
+## Example 25: Todo List with Granular Array Updates
+
+A todo list implementation using reactive arrays with fine-grained tracking for animations and efficient updates.
+
+```typescript
+import { array, derivation, effect } from '@ersbeth/picoflow'
+
+interface Todo {
+  id: number
+  text: string
+  completed: boolean
+}
+
+const $todos = array<Todo>([])
+
+// Animate additions
+effect((t) => {
+  const action = $todos.$lastAction.get(t)
+  if (action && action.type === 'push') {
+    animateNewTodo(action.item)
+  }
+})
+
+// Animate removals
+effect((t) => {
+  const action = $todos.$lastAction.get(t)
+  if (action && action.type === 'splice') {
+    animateRemovedTodos(action.start, action.deleteCount)
+  }
+})
+
+// Computed counts
+const $totalCount = derivation((t) => {
+  return $todos.get(t).length
+})
+
+const $completedCount = derivation((t) => {
+  return $todos.get(t).filter(t => t.completed).length
+})
+
+const $activeCount = derivation((t) => {
+  return $todos.get(t).filter(t => !t.completed).length
+})
+
+// Todo operations
+function addTodo(text: string) {
+  $todos.push({
+    id: Date.now(),
+    text,
+    completed: false
+  })
+}
+
+function removeTodo(id: number) {
+  const todos = $todos.pick()
+  const index = todos.findIndex(t => t.id === id)
+  if (index !== -1) {
+    $todos.splice(index, 1)
+  }
+}
+
+function toggleTodo(id: number) {
+  const todos = $todos.pick()
+  const index = todos.findIndex(t => t.id === id)
+  if (index !== -1) {
+    const todo = todos[index]
+    $todos.splice(index, 1, {
+      ...todo,
+      completed: !todo.completed
+    })
+  }
+}
+```
+
+**Use Case:** Todo applications, task management systems, lists with animations and granular UI updates.
+
+---
+
+## Example 26: Collaborative Task Board with Arrays
+
+A collaborative task board using multiple reactive arrays for different status columns with fine-grained tracking.
+
+```typescript
+import { array, derivation, effect } from '@ersbeth/picoflow'
+
+interface Task {
+  id: string
+  title: string
+  assignee: string
+  status: 'todo' | 'doing' | 'done'
+}
+
+// Tasks by status column
+const $todoTasks = array<Task>([])
+const $doingTasks = array<Task>([])
+const $doneTasks = array<Task>([])
+
+// Track task additions for animations
+effect((t) => {
+  const action = $todoTasks.$lastAction.get(t)
+  if (action && action.type === 'push') {
+    animateTaskAddition('todo', action.item)
+  }
+})
+
+effect((t) => {
+  const action = $doingTasks.$lastAction.get(t)
+  if (action && action.type === 'push') {
+    animateTaskAddition('doing', action.item)
+  }
+})
+
+effect((t) => {
+  const action = $doneTasks.$lastAction.get(t)
+  if (action && action.type === 'push') {
+    animateTaskAddition('done', action.item)
+  }
+})
+
+// Track removals for cleanup
+effect((t) => {
+  const action = $todoTasks.$lastAction.get(t)
+  if (action && action.type === 'splice') {
+    animateTaskRemoval('todo', action.start)
+  }
+})
+
+// Computed statistics
+const $totalTasks = derivation((t) => {
+  return $todoTasks.get(t).length +
+         $doingTasks.get(t).length +
+         $doneTasks.get(t).length
+})
+
+const $completionRate = derivation((t) => {
+  const total = $totalTasks.get(t)
+  const done = $doneTasks.get(t).length
+  return total > 0 ? (done / total) * 100 : 0
+})
+
+// Operations
+function addTask(task: Task) {
+  switch (task.status) {
+    case 'todo':
+      $todoTasks.push(task)
+      break
+    case 'doing':
+      $doingTasks.push(task)
+      break
+    case 'done':
+      $doneTasks.push(task)
+      break
+  }
+}
+
+function moveTask(taskId: string, from: string, to: string) {
+  const sourceArray = getArrayForStatus(from)
+  const destArray = getArrayForStatus(to)
+  
+  const tasks = sourceArray.pick()
+  const index = tasks.findIndex(t => t.id === taskId)
+  
+  if (index !== -1) {
+    const task = tasks[index]
+    sourceArray.splice(index, 1)
+    destArray.push({ ...task, status: to as Task['status'] })
+  }
+}
+
+function getArrayForStatus(status: string) {
+  switch (status) {
+    case 'todo': return $todoTasks
+    case 'doing': return $doingTasks
+    case 'done': return $doneTasks
+    default: throw new Error('Invalid status')
+  }
+}
+
+// Display stats
+effect((t) => {
+  const total = $totalTasks.get(t)
+  const rate = $completionRate.get(t)
+  
+  updateStatsDisplay(total, rate)
+})
+```
+
+**Use Case:** Kanban boards, project management tools, collaborative task tracking with real-time updates and animations.
+
+---
+
+## Next Steps
+
+These examples demonstrate how PicoFlow primitives work together in real applications. For more information:
+
+- [State](/guide/primitives/state) - Managing reactive values
+- [Signals](/guide/primitives/signal) - Event notifications
+- [Effects](/guide/primitives/effects) - Handling side effects
+- [Derivations](/guide/primitives/derivations) - Computing derived values
+- [Resources](/guide/primitives/resources) - Fetching data
+- [Streams](/guide/primitives/streams) - Handling events
+- [Reactive Maps](/guide/primitives/map) - Fine-grained map tracking
+- [Reactive Arrays](/guide/primitives/array) - Fine-grained array tracking
+- [API Reference](/api/) - Complete API documentation