create-fluxstack 1.10.1 → 1.12.1

package/app/client/SIMPLIFICATION.md

@@ -1,140 +0,0 @@
-# 🎨 FluxStack Client - Simplified Version
-
-This is a **simplified, single-page version** of the FluxStack client, inspired by the clean and modern design of Vite's landing page.
-
-## 🚀 What Changed?
-
-### ✅ **Kept (Essential)**
-- ✅ **Eden Treaty** - Core type-safe API client
-- ✅ **React 19** - Modern React with hooks
-- ✅ **Vite 7** - Lightning-fast dev server
-- ✅ **TailwindCSS** - Utility-first styling
-- ✅ **TypeScript** - Full type safety
-- ✅ **react-icons** - Icon library
-
-### ❌ **Removed (Complexity)**
-- ❌ **React Router** - No more multi-page routing
-- ❌ **Zustand** - Removed complex state management (using simple `useState`)
-- ❌ **Multiple Pages** - Consolidated into single page (Overview, Demo, HybridLive, ApiDocs, CryptoAuth)
-- ❌ **Complex Error System** - Simplified error handling
-- ❌ **Navigation System** - No more tabs and complex navigation
-- ❌ **Detailed API Status Section** - Replaced with simple badge
-- ❌ **Complex Live Component UIs** - Simplified to minimal clock display
-
-### ✅ **Kept (Advanced Features)**
-- ✅ **LiveComponents** - Live Clock provido via LiveComponent
-- ✅ **LiveComponentsProvider** - Full real-time capabilities maintained
-- ✅ **Hybrid Live Component** - Clock synced with server in real-time
-
-## 📊 Comparison
-
-| Metric | Before | After | Reduction |
-|--------|--------|-------|-----------|
-| **Files** | 43 | ~10 | **-76%** |
-| **Components** | 11 | 2 | **-82%** |
-| **Pages** | 5 | 1 | **-80%** |
-| **Dependencies** | 27 | 19 | **-30%** |
-| **Lines in App.tsx** | 331 | 213 | **-36%** |
-| **Live Components** | 6 complex | 1 minimal | **-83%** |
-
-## 🎯 What Does It Show?
-
-The simplified client demonstrates:
-
-1. **🎨 Minimalist Design** - Clean, centered design inspired by Next.js, React, and Vite
-2. **⚡ Simple API Status** - Single badge showing API online/offline
-3. **🚀 Core Features** - 4 feature cards highlighting main capabilities
-4. **🕐 Live Clock** - Real LiveComponent synced with server in real-time
-5. **📖 Quick Actions** - Direct links to API Docs, GitHub, and API Demo
-6. **🔥 Clean but Powerful** - Minimalist UI with full real-time capabilities
-
-## 📝 Structure
-
-```
-app/client/src/
-├── App.tsx              # Single-page application (213 lines)
-│                        # - AppContent component (main UI)
-│                        # - MinimalLiveClock component (LiveComponent)
-│                        # - LiveComponentsProvider wrapper
-├── main.tsx             # Entry point (simplified)
-├── index.css            # Minimal global styles
-├── vite-env.d.ts        # Vite type definitions
-├── assets/              # Static assets
-│   └── react.svg        # React logo
-└── lib/                 # Core utilities
-    ├── eden-api.ts      # Eden Treaty API client
-    └── errors.ts        # Error handling utilities
-```
-
-**Total files in src/**: 6 core files (vs 43+ before)
-
-## 🎨 Design Philosophy
-
-Inspired by **Next.js, React, and Vite landing pages**:
-- Everything centered vertically and horizontally
-- Large animated logo (fire icon with pulse animation)
-- Minimal text, maximum impact
-- Simple API status badge (online/offline)
-- 4 feature cards in responsive grid
-- **Live Clock via LiveComponent** - Real-time sync with server
-- Clean action buttons at bottom
-- No background blob animations (clean and fast)
-- Mobile-first responsive design
-- **Full Live Components support** - Maintains advanced real-time features
-
-## 🔧 How to Use
-
-```bash
-# Start development server (backend + frontend)
-bun run dev
-
-# Frontend only
-bun run dev:frontend
-
-# Backend only
-bun run dev:backend
-```
-
-The page will automatically show:
-- ✅ **Green badge** - Backend is running and healthy
-- ⚠️ **Yellow badge** - Checking backend status
-- ❌ **Red badge** - Backend is offline
-
-## 🎯 When to Use This Version?
-
-**Use this ultra-simplified version when:**
-- You want the cleanest possible presentation
-- You're showcasing FluxStack to newcomers or investors
-- You need a professional landing page
-- You want maximum simplicity (like Next.js/React/Vite)
-- You prefer minimalism over features
-- You want fast loading and minimal JavaScript
-
-**Use the full version when:**
-- You need multiple pages/routes
-- You require complex state management
-- You want real-time features (WebSocket)
-- You need complete demos (CRUD, Auth, etc.)
-- You're building a full application with all features
-
-## 💡 Future Enhancements (Optional)
-
-If you want to extend this simplified version, consider adding:
-- [ ] Simple counter demo using Eden Treaty
-- [ ] User CRUD with minimal UI
-- [ ] Dark/Light theme toggle
-- [ ] Smooth scroll to sections
-- [ ] More feature cards
-
-## 📚 References
-
-- [FluxStack Documentation](../../ai-context/)
-- [Eden Treaty Guide](../../ai-context/development/eden-treaty-guide.md)
-- [Vite Documentation](https://vite.dev)
-- [React Documentation](https://react.dev)
-
----
-
-**🎯 Goal**: Provide a clean, simple, and beautiful client that showcases FluxStack's core value proposition without overwhelming complexity.
-
-**Made with ❤️ by FluxStack Team**

package/app/client/frontend-only.ts

@@ -1,12 +0,0 @@
-// Frontend standalone entry point
-import { startFrontendOnly } from "@/core/client/standalone"
-
-// Configuração para frontend standalone
-const frontendConfig = {
-  clientPath: "app/client",
-  vitePort: (globalThis as any).process?.env?.FRONTEND_PORT || 5173,
-  apiUrl: (globalThis as any).process?.env?.API_URL || "http://localhost:3001"
-}
-
-// Iniciar apenas o frontend
-startFrontendOnly(frontendConfig)

package/app/client/src/live/FileUploadExample.tsx

@@ -1,359 +0,0 @@
-// 📤 File Upload Example - Demonstrates chunked file upload with Live Components
-import { useState, useRef } from 'react'
-import { useTypedLiveComponent, useChunkedUpload, useLiveComponents } from '@/core/client'
-
-// Import component type DIRECTLY from backend - full type inference!
-import type { LiveFileUploadComponent } from '@/server/live/LiveFileUploadComponent'
-
-export function FileUploadExample() {
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
-
-  // Get sendMessageAndWait from LiveComponents context
-  const { sendMessageAndWait } = useLiveComponents()
-
-  // Setup Live Component with full type inference
-  const {
-    state,
-    call,
-    componentId,
-    connected
-  } = useTypedLiveComponent<LiveFileUploadComponent>('LiveFileUpload', {
-    uploadedFiles: [],
-    maxFiles: 10
-  })
-
-  // Setup Chunked Upload Hook with Adaptive Chunking
-  const {
-    uploading,
-    progress,
-    error: uploadError,
-    uploadFile,
-    cancelUpload,
-    reset: resetUpload,
-    bytesUploaded,
-    totalBytes
-  } = useChunkedUpload(componentId || '', {
-    chunkSize: 64 * 1024, // 64KB initial chunk size
-    maxFileSize: 500 * 1024 * 1024, // 500MB max (aceita qualquer arquivo)
-    allowedTypes: [], // Aceita todos os tipos de arquivo
-    sendMessageAndWait,
-
-    // Enable Adaptive Chunking for optimal upload speed
-    adaptiveChunking: true,
-    adaptiveConfig: {
-      minChunkSize: 16 * 1024,   // 16KB minimum
-      maxChunkSize: 512 * 1024,  // 512KB maximum (safer for web)
-      initialChunkSize: 64 * 1024, // 64KB start
-      targetLatency: 200,        // Target 200ms per chunk
-      adjustmentFactor: 1.5,     // Moderate adjustment
-      measurementWindow: 3       // Measure last 3 chunks
-    },
-
-    onProgress: (progress, uploaded, total) => {
-      console.log(`📤 Upload progress: ${progress.toFixed(1)}% (${uploaded}/${total} bytes)`)
-    },
-
-    onComplete: async (response) => {
-      console.log('✅ Upload complete:', response)
-
-      // Notify the Live Component about the successful upload
-      if (selectedFile && response.fileUrl) {
-        await call('onFileUploaded', {
-          filename: selectedFile.name,
-          fileUrl: response.fileUrl
-        })
-      }
-
-      // Reset state
-      setSelectedFile(null)
-      resetUpload()
-      if (fileInputRef.current) {
-        fileInputRef.current.value = ''
-      }
-    },
-
-    onError: (error) => {
-      console.error('❌ Upload error:', error)
-    }
-  })
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) {
-      setSelectedFile(file)
-      resetUpload()
-    }
-  }
-
-  const handleUpload = async () => {
-    if (!selectedFile) return
-    await uploadFile(selectedFile)
-  }
-
-  const handleRemoveFile = async (fileId: string) => {
-    await call('removeFile', { fileId })
-  }
-
-  const handleClearAll = async () => {
-    await call('clearAll', {})
-  }
-
-  const formatBytes = (bytes: number): string => {
-    if (bytes === 0) return '0 Bytes'
-    const k = 1024
-    const sizes = ['Bytes', 'KB', 'MB', 'GB']
-    const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
-  }
-
-  const getFileIcon = (filename: string): string => {
-    const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'))
-    const iconMap: Record<string, string> = {
-      '.pdf': '📄',
-      '.doc': '📝',
-      '.docx': '📝',
-      '.xls': '📊',
-      '.xlsx': '📊',
-      '.ppt': '📽️',
-      '.pptx': '📽️',
-      '.zip': '🗜️',
-      '.rar': '🗜️',
-      '.7z': '🗜️',
-      '.jpg': '🖼️',
-      '.jpeg': '🖼️',
-      '.png': '🖼️',
-      '.gif': '🖼️',
-      '.webp': '🖼️',
-      '.mp4': '🎥',
-      '.avi': '🎥',
-      '.mov': '🎥',
-      '.mp3': '🎵',
-      '.wav': '🎵',
-      '.jar': '☕',
-      '.java': '☕',
-      '.js': '📜',
-      '.ts': '📜',
-      '.json': '📋',
-      '.xml': '📋',
-      '.txt': '📃',
-      '.md': '📰'
-    }
-    return iconMap[ext] || '📎'
-  }
-
-  const isImageFile = (filename: string): boolean => {
-    const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'))
-    return ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp'].includes(ext)
-  }
-
-  if (!connected) {
-    return (
-      <div className="p-6 bg-yellow-50 border border-yellow-200 rounded-lg">
-        <p className="text-yellow-800">🔌 Connecting to Live Components...</p>
-      </div>
-    )
-  }
-
-  const remainingSlots = state.maxFiles - state.uploadedFiles.length
-
-  return (
-    <div className="max-w-4xl mx-auto p-6">
-      <div className="bg-white rounded-lg shadow-lg">
-        {/* Header */}
-        <div className="p-6 border-b border-gray-200">
-          <h2 className="text-2xl font-bold text-gray-900">
-            📤 Universal File Upload
-          </h2>
-          <p className="mt-2 text-gray-600">
-            Upload any type of file with real-time progress tracking and adaptive chunking
-          </p>
-        </div>
-
-        {/* Upload Section */}
-        <div className="p-6 border-b border-gray-200">
-          <div className="space-y-4">
-            {/* File Input */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Select Any File
-              </label>
-              <input
-                ref={fileInputRef}
-                type="file"
-                onChange={handleFileSelect}
-                disabled={uploading || remainingSlots === 0}
-                className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 disabled:opacity-50"
-              />
-              <p className="mt-1 text-xs text-gray-500">
-                Maximum file size: 500 MB • All file types supported
-              </p>
-            </div>
-
-            {/* Selected File Info */}
-            {selectedFile && !uploading && (
-              <div className="p-4 bg-gray-50 rounded-lg">
-                <p className="text-sm text-gray-700">
-                  <strong>Selected:</strong> {getFileIcon(selectedFile.name)} {selectedFile.name} ({formatBytes(selectedFile.size)})
-                </p>
-              </div>
-            )}
-
-            {/* Upload Progress */}
-            {uploading && (
-              <div className="space-y-2">
-                <div className="flex justify-between text-sm text-gray-600">
-                  <span>Uploading {selectedFile?.name}...</span>
-                  <span>{progress.toFixed(1)}%</span>
-                </div>
-                <div className="w-full bg-gray-200 rounded-full h-2.5">
-                  <div
-                    className="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
-                    style={{ width: `${progress}%` }}
-                  />
-                </div>
-                <p className="text-xs text-gray-500">
-                  {formatBytes(bytesUploaded)} / {formatBytes(totalBytes)}
-                </p>
-              </div>
-            )}
-
-            {/* Error Display */}
-            {uploadError && (
-              <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
-                <p className="text-sm text-red-800">❌ {uploadError}</p>
-              </div>
-            )}
-
-            {/* Action Buttons */}
-            <div className="flex gap-2">
-              <button
-                onClick={handleUpload}
-                disabled={!selectedFile || uploading || remainingSlots === 0}
-                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
-              >
-                {uploading ? '⏳ Uploading...' : '📤 Upload'}
-              </button>
-
-              {uploading && (
-                <button
-                  onClick={cancelUpload}
-                  className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 font-medium"
-                >
-                  ❌ Cancel
-                </button>
-              )}
-
-              {state.uploadedFiles.length > 0 && (
-                <button
-                  onClick={handleClearAll}
-                  disabled={uploading}
-                  className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 disabled:opacity-50 font-medium ml-auto"
-                >
-                  🗑️ Clear All
-                </button>
-              )}
-            </div>
-
-            {/* Slots Info */}
-            <div className="text-sm text-gray-600">
-              {remainingSlots > 0 ? (
-                <span>✅ {remainingSlots} upload slot(s) remaining</span>
-              ) : (
-                <span className="text-red-600">⚠️ Maximum files reached</span>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Uploaded Files Grid */}
-        <div className="p-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">
-            Uploaded Files ({state.uploadedFiles.length}/{state.maxFiles})
-          </h3>
-
-          {state.uploadedFiles.length === 0 ? (
-            <div className="text-center py-12 bg-gray-50 rounded-lg">
-              <p className="text-gray-500">No files uploaded yet</p>
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {state.uploadedFiles.map((file) => (
-                <div
-                  key={file.id}
-                  className="relative bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
-                >
-                  {/* File Preview */}
-                  <div className="aspect-video bg-gray-100 flex items-center justify-center">
-                    {isImageFile(file.filename) ? (
-                      <img
-                        src={file.url}
-                        alt={file.filename}
-                        className="max-w-full max-h-full object-contain"
-                        onError={(e) => {
-                          const target = e.target as HTMLImageElement
-                          target.style.display = 'none'
-                          target.parentElement!.innerHTML = `<div class="text-6xl">${getFileIcon(file.filename)}</div>`
-                        }}
-                      />
-                    ) : (
-                      <div className="text-6xl">{getFileIcon(file.filename)}</div>
-                    )}
-                  </div>
-
-                  {/* Info */}
-                  <div className="p-3">
-                    <p className="text-sm font-medium text-gray-900 truncate" title={file.filename}>
-                      {file.filename}
-                    </p>
-                    <p className="text-xs text-gray-500">
-                      {new Date(file.uploadedAt).toLocaleString()}
-                    </p>
-                    <a
-                      href={file.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-xs text-blue-600 hover:underline mt-1 inline-block"
-                    >
-                      Download
-                    </a>
-                  </div>
-
-                  {/* Remove Button */}
-                  <button
-                    onClick={() => handleRemoveFile(file.id)}
-                    className="absolute top-2 right-2 p-2 bg-red-600 text-white rounded-full hover:bg-red-700 transition-colors shadow-lg"
-                    title="Remove file"
-                  >
-                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                      <path
-                        fillRule="evenodd"
-                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Technical Info */}
-      <div className="mt-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
-        <h4 className="font-semibold text-gray-900 mb-2">📋 Technical Details</h4>
-        <ul className="text-sm text-gray-600 space-y-1">
-          <li>✅ <strong>Adaptive Chunking:</strong> Enabled (16KB - 512KB)</li>
-          <li>✅ <strong>Initial Chunk Size:</strong> 64KB</li>
-          <li>✅ <strong>Max File Size:</strong> 500MB</li>
-          <li>✅ <strong>Allowed Types:</strong> All file types supported</li>
-          <li>✅ <strong>Real-time Progress:</strong> Shows bytes uploaded and percentage</li>
-          <li>✅ <strong>State Sync:</strong> Uploaded files synced via Live Component</li>
-          <li>✅ <strong>Component ID:</strong> {componentId || 'Not connected'}</li>
-          <li>🚀 <strong>Optimization:</strong> Chunk size adjusts based on connection speed</li>
-        </ul>
-      </div>
-    </div>
-  )
-}

package/app/client/src/live/MinimalLiveClock.tsx

@@ -1,47 +0,0 @@
-// 🔥 MinimalLiveClock - Live Component
-import { useTypedLiveComponent } from '@/core/client';
-
-// Import component type DIRECTLY from backend - full type inference!
-import type { LiveClockComponent } from '@/server/live/LiveClockComponent';
-
-export function MinimalLiveClock() {
-  const { state, setValue } = useTypedLiveComponent<LiveClockComponent>(
-    'LiveClock',
-    {
-      currentTime: "Loading...",
-      timeZone: "America/Sao_Paulo",
-      format: "12h",
-      showSeconds: true,
-      showDate: true,
-      lastSync: new Date(),
-      serverUptime: 0,
-    },
-    {
-      // Called when WebSocket connects (component not mounted yet - can't use setValue)
-      onConnect: () => {
-        console.log('onConnect called - WebSocket connected')
-      },
-      // Called after fresh mount (no prior state)
-      onMount: () => {
-        console.log('onMount called - changing format to 12h')
-        setValue('format', '12h')
-      },
-      // Called after successful rehydration (restoring prior state)
-      onRehydrate: () => {
-        console.log('onRehydrate called - keeping format 24h')
-        setValue('format', '24h')
-      }
-    }
-  )
-
-  return (
-    <div className="bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-xl p-4 border border-blue-400/20">
-      <div className="text-4xl font-mono font-bold text-white text-center tracking-wider">
-        {state.currentTime}
-      </div>
-      <div className="text-center mt-2">
-        <span className="text-xs text-gray-400">{state.timeZone} ({state.format})</span>
-      </div>
-    </div>
-  )
-}