Generated by Spark: Implement Redux, Integrate redux into IndexedDB / Flask API system.

PRD.md

@@ -0,0 +1,178 @@
+# Redux Integration with IndexedDB and Flask API - PRD
+
+A comprehensive state management system built with Redux Toolkit, seamlessly integrating local IndexedDB storage with remote Flask API synchronization for a low-code development platform.
+
+**Experience Qualities**:
+1. **Reliable** - Data persists locally and syncs automatically to remote storage, ensuring no data loss
+2. **Transparent** - Clear visibility into sync status, connection health, and data operations
+3. **Performant** - Optimized async operations with minimal UI blocking and efficient state updates
+
+**Complexity Level**: Complex Application (advanced functionality with multiple views)
+- Sophisticated state management across 10+ Redux slices
+- Dual-storage architecture (IndexedDB + Flask API)
+- Real-time synchronization with conflict handling
+- Integration with existing atomic component system
+
+## Essential Features
+
+### State Management with Redux
+- **Functionality**: Centralized state management using Redux Toolkit with 10 specialized slices
+- **Purpose**: Provides predictable state updates, time-travel debugging, and consistent data flow
+- **Trigger**: Application initialization, user actions, API responses
+- **Progression**: User action → Dispatch action → Reducer updates state → Components re-render → UI reflects changes
+- **Success criteria**: All state changes are tracked, debuggable, and cause appropriate UI updates
+
+### IndexedDB Integration
+- **Functionality**: Local browser storage for offline-first data persistence
+- **Purpose**: Enable offline functionality and instant data access without network dependency
+- **Trigger**: Redux thunk actions for CRUD operations
+- **Progression**: Redux action → Async thunk → IndexedDB operation → Success/error handling → State update
+- **Success criteria**: Data persists across sessions, survives page refreshes, and loads instantly
+
+### Flask API Synchronization
+- **Functionality**: Bidirectional sync between local IndexedDB and remote Flask SQLite database
+- **Purpose**: Enable data backup, cross-device sync, and collaborative features
+- **Trigger**: Manual sync buttons, auto-sync timer, or after local changes
+- **Progression**: User triggers sync → Bulk data collection → HTTP request to Flask → Server processes → Response updates state
+- **Success criteria**: Data consistency between local and remote, connection status visible, errors handled gracefully
+
+### Auto-Sync System
+- **Functionality**: Configurable automatic synchronization at set intervals
+- **Purpose**: Reduce manual sync burden and ensure data is regularly backed up
+- **Trigger**: Timer interval (default 30 seconds) when auto-sync enabled
+- **Progression**: Timer fires → Check connection → Collect changed data → Push to Flask → Update sync timestamp
+- **Success criteria**: Syncs occur on schedule, can be toggled on/off, interval is configurable
+
+### Component Tree Management
+- **Functionality**: Redux-managed JSON component trees for atomic component rendering
+- **Purpose**: Integrate with existing atomic component system via Redux state
+- **Trigger**: Load from components.json on app initialization
+- **Progression**: App loads → Fetch components.json → Parse trees → Store in Redux → Available for rendering
+- **Success criteria**: Trees load successfully, can be queried by ID, support dynamic updates
+
+### Real-time Status Monitoring
+- **Functionality**: Live display of sync status, connection health, and storage statistics
+- **Purpose**: Provide transparency into system state for debugging and confidence
+- **Trigger**: Continuous monitoring, updates on state changes
+- **Progression**: State changes → Selectors compute derived data → UI components render current status
+- **Success criteria**: Status is always accurate, updates are immediate, includes timestamps
+
+### Custom React Hooks
+- **Functionality**: Simplified hooks (useReduxFiles, useReduxComponentTrees, useReduxSync)
+- **Purpose**: Abstract Redux complexity, provide ergonomic API for common operations
+- **Trigger**: Component mounting and user interactions
+- **Progression**: Component calls hook → Hook uses Redux selectors/dispatch → Returns simple API → Component uses clean interface
+- **Success criteria**: Hooks reduce boilerplate by 70%, are TypeScript-safe, handle loading/error states
+
+### CRUD Operations
+- **Functionality**: Create, Read, Update, Delete for all entity types (files, models, components, etc.)
+- **Purpose**: Core data manipulation across the platform
+- **Trigger**: User actions in UI (buttons, forms, etc.)
+- **Progression**: User interaction → Validate input → Dispatch Redux action → Update IndexedDB → Trigger sync if enabled → UI updates
+- **Success criteria**: All operations complete within 100ms, provide feedback, handle errors
+
+## Edge Case Handling
+
+- **Network Failures**: Gracefully degrade to local-only mode, queue sync operations, retry with exponential backoff
+- **Sync Conflicts**: Last-write-wins strategy, track timestamps, provide manual conflict resolution UI
+- **Browser Storage Limits**: Monitor IndexedDB quota, warn when approaching limits, provide cleanup utilities
+- **Corrupted Data**: Validate data structures on load, provide reset/repair utilities, log errors for debugging
+- **Concurrent Modifications**: Use Redux's immutable updates to prevent race conditions, timestamp all changes
+- **Flask API Unavailable**: Detect via health check, show connection status, continue with local operations only
+- **Invalid JSON**: Validate and sanitize data before storage, provide error messages, prevent app crashes
+- **Browser Compatibility**: Feature-detect IndexedDB support, provide fallback message for unsupported browsers
+
+## Design Direction
+
+The design should evoke a sense of **technical confidence** and **system transparency** - users should feel in control of their data and trust the synchronization system. The interface should communicate the health of connections, the state of operations, and the flow of data clearly through visual indicators.
+
+## Color Selection
+
+**Primary Color**: Deep Violet (`oklch(0.58 0.24 265)`) - Represents technical sophistication and the core platform identity
+**Secondary Colors**: 
+- Dark Slate (`oklch(0.19 0.02 265)`) - Grounding color for cards and surfaces
+- Muted Gray (`oklch(0.25 0.03 265)`) - De-emphasized backgrounds and borders
+**Accent Color**: Bright Teal (`oklch(0.75 0.20 145)`) - Highlights successful operations, active sync, and CTAs
+**Status Colors**:
+- Success Green (`oklch(0.60 0.20 145)`) - Connected, synced, successful operations
+- Error Red (`oklch(0.60 0.25 25)`) - Disconnected, failed operations, destructive actions
+- Warning Amber (`oklch(0.70 0.15 60)`) - Pending operations, attention needed
+
+**Foreground/Background Pairings**:
+- Primary Violet (`oklch(0.58 0.24 265)`): White text (`oklch(1 0 0)`) - Ratio 5.2:1 ✓
+- Accent Teal (`oklch(0.75 0.20 145)`): Dark Slate (`oklch(0.15 0.02 265)`) - Ratio 8.1:1 ✓
+- Dark Slate (`oklch(0.19 0.02 265)`): White text (`oklch(0.95 0.01 265)`) - Ratio 12.3:1 ✓
+- Success Green (`oklch(0.60 0.20 145)`): White text (`oklch(1 0 0)`) - Ratio 4.9:1 ✓
+
+## Font Selection
+
+The typography should communicate **technical precision** and **code-like structure**, reinforcing the developer-focused nature of the platform.
+
+**Typographic Hierarchy**:
+- H1 (Page Title): JetBrains Mono Bold / 32px / tight letter spacing / 1.1 line height
+- H2 (Section Title): JetBrains Mono Medium / 24px / normal spacing / 1.2 line height
+- H3 (Card Title): JetBrains Mono Medium / 18px / normal spacing / 1.3 line height
+- Body (General Text): IBM Plex Sans Regular / 14px / normal spacing / 1.5 line height
+- Small (Metadata): IBM Plex Sans Regular / 12px / wider spacing / 1.4 line height
+- Code: JetBrains Mono Regular / 13px / monospace / 1.4 line height
+- Buttons: IBM Plex Sans Medium / 14px / normal spacing / 1.0 line height
+
+## Animations
+
+Animations should be **purposeful and system-oriented**, emphasizing data flow and state transitions rather than decorative effects.
+
+- **Sync Indicator**: Pulsing animation on "Syncing..." badge to show active operation (1s ease-in-out)
+- **Connection Status**: Smooth color transition when connection state changes (300ms)
+- **Data Cards**: Subtle slide-in when new items appear in lists (200ms ease-out)
+- **Status Badges**: Scale bounce effect on status changes for attention (150ms elastic)
+- **Loading States**: Skeleton screens with shimmer effect for data loading (2s linear infinite)
+- **Hover States**: Slight lift and shadow increase on interactive cards (150ms ease)
+- **Error Shake**: Gentle horizontal shake on failed operations (400ms)
+
+## Component Selection
+
+**Components**: 
+- **Card** - Primary container for status panels and data displays, using elevated borders and hover states
+- **Badge** - Status indicators (connection, sync, file counts) with variant colors for different states
+- **Button** - Action triggers with variant="outline" for secondary actions, "destructive" for danger zone
+- **Separator** - Visual dividers between sections within cards
+- **Toaster** (Sonner) - Feedback for operations (success, error, info messages)
+- **Icons** (Phosphor) - Database, CloudArrowUp, CloudArrowDown, ArrowsClockwise, CheckCircle, XCircle, Trash
+
+**Customizations**: 
+- Status cards with custom border colors based on connection health
+- Animated sync badges with custom pulse animation
+- File list items with hover states and smooth transitions
+- Danger zone card with destructive border styling
+
+**States**:
+- **Buttons**: Default (outline), hover (bg-muted), active (scale-95), disabled (opacity-50)
+- **Badges**: Idle (outline), syncing (secondary + pulse), success (green bg), error (destructive)
+- **Cards**: Default (border), hover (bg-muted/50), loading (skeleton)
+- **Connection**: Connected (green badge + icon), disconnected (red badge + icon), checking (gray + spinner)
+
+**Icon Selection**:
+- Database - Local storage (IndexedDB)
+- CloudArrowUp - Push to Flask
+- CloudArrowDown - Pull from Flask
+- ArrowsClockwise - Sync operations and refresh
+- CheckCircle - Success states
+- XCircle - Error states and disconnected
+- Clock - Timestamp indicators
+- Trash - Delete operations
+- FilePlus - Create new items
+
+**Spacing**: 
+- Container padding: p-6 (24px)
+- Card gaps: gap-6 (24px)
+- Internal card spacing: space-y-3 (12px)
+- Button gaps: gap-2 (8px)
+- Grid columns: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
+
+**Mobile**:
+- Single column layout on mobile (grid-cols-1)
+- Full-width buttons on small screens
+- Collapsible cards to save vertical space
+- Touch-friendly 44px minimum touch targets
+- Responsive text sizing (text-sm on mobile, text-base on desktop)
+- Stack sync buttons vertically on narrow screens