Update

CLAUDE.md

@@ -167,29 +167,65 @@ ### Admin/Management
 
 ## Frontend Component Structure
 
+### Application Entry & Shell (`/resources/js/`)
+- **app.tsx**: Main Inertia.js application entry with error boundaries, context providers (GA4, Mitt, Axios), and global toaster
+- **app-shell.tsx**: Layout wrapper providing either header or sidebar variants using SidebarProvider
+- **ssr.tsx**: Server-side rendering entry point for enhanced performance
+
 ### Editor System (`/resources/js/modules/editor/`)
-- **Main Editor** (`editor.jsx`): Central responsive component managing canvas, sidebars, and responsive design
-- **Editor Controls** (`editor-controls.jsx`): Video playback controls with play/pause, reset, refresh, and download
-- **Editor Canvas** (`editor-canvas.jsx`): Konva.js-based canvas with drag-and-drop timeline editing
-- **Multiple Sidebars**: EditNavSidebar, EditSidebar, TextSidebar for different editing modes
-- **AI Integration** (`editor-ai-sheet.jsx`): AI-powered meme generation interface
+- **editor.jsx**: Central responsive orchestrator managing canvas, sidebars, viewport detection, and responsive design
+- **editor-controls.jsx**: Video playback controls with play/pause, reset, refresh, download via event emission
+- **editor-canvas.jsx**: Responsive canvas wrapper that scales the video editor to fit different screen sizes
+- **editor-ai-sheet.jsx**: AI-powered meme generation interface with job polling, status tracking, and credit management
+- **editor-header.jsx**: Header component for the editor interface with navigation controls
 
-### State Management Architecture
-- **VideoEditorStore**: Video playback state, text element selection
-- **MediaStore**: Meme/background selection, AI integration, API calls, generation history
-- **UserStore**: User authentication and profile management
-- **PricingStore**: Subscription and credit management
-- **localSettingsStore**: User preferences and UI settings
+### Canvas & Video Processing (`/resources/js/modules/editor/partials/canvas/`)
+- **video-editor.jsx**: Core Konva.js canvas with timeline processing, video/image handling, and FFmpeg export
+- **video-preview.jsx**: Video preview component with element selection and transformation utilities
+- **video-download-modal.jsx**: Download interface for multiple export formats (MOV, WebM, GIF, WebP)
+- **video-export.jsx**: Export functionality with FFmpeg.wasm integration and format conversion
 
-### Component Communication
-- **Mitt.js Event System**: Event-driven architecture for editor interactions
-- **Common Events**: `video-play`, `video-reset`, `video-open-download-modal`, `open-ai-editor-sheet`, `text-element-selected`
-- **Responsive Design**: Mobile-first with progressive enhancement, viewport detection hooks
+### Sidebar Components (`/resources/js/modules/editor/partials/`)
+- **edit-nav-sidebar.jsx**: Navigation sidebar for switching between memes and backgrounds
+- **edit-sidebar.jsx**: Main editing sidebar with content selection interfaces
+- **text-sidebar.jsx**: Text editing sidebar for customizing meme captions and text properties
 
-### UI Component Library
-- **Radix UI Base**: Comprehensive accessible component primitives
-- **Custom Components**: Animated elements, error boundaries, tailwind breakpoint utilities
-- **Styling**: Tailwind CSS with custom design system and responsive utilities
+### Authentication System (`/resources/js/modules/auth/`)
+- **AuthDialog.jsx**: Modal dialog for Google OAuth authentication with login/signup switching
+- **auth-user.jsx**: User authentication component and user state management
+
+### State Management Stores (`/resources/js/stores/`)
+- **MediaStore.js**: Comprehensive store for meme/background selection, AI generation, API calls, generation history, job polling
+- **VideoEditorStore.js**: Video playback state, text element selection for canvas interactions
+- **UserStore.js**: User authentication, billing, credits, premium export functionality
+- **PricingStore.js**: Subscription management, pricing tiers, and upgrade flows
+- **localSettingsStore.js**: User preferences, UI settings, appearance themes
+
+### Page Components (`/resources/js/pages/`)
+- **Home System**: `home.tsx` with Hero, Features, FAQ sections and animated counters
+- **Dashboard**: `dashboard.tsx` with user analytics and generation history
+- **Authentication Pages**: Login, register, password reset, email verification flows
+- **Settings Pages**: Profile, appearance, password management interfaces
+- **Admin Pages**: Dashboard, background generation tools for content management
+
+### UI Component Library (`/resources/js/components/ui/`)
+- **Radix UI Base**: Complete accessible component primitives (buttons, dialogs, sheets, forms, tables)
+- **Form Controls**: Input, textarea, select, checkbox, radio-group with validation
+- **Layout Components**: Card, dialog, sheet, sidebar, tabs, accordion for structured layouts
+- **Feedback Components**: Alert, toast, progress, skeleton, spinner for user feedback
+- **Navigation**: Breadcrumb, navigation-menu, pagination for app navigation
+- **Data Display**: Table, avatar, badge, chart for content presentation
+
+### Enhanced UI Components (`/resources/js/components/magicui/` & `/resources/js/components/reactbits/`)
+- **Animation Components**: Animated beam, gradient text, sparkles text, word rotation
+- **Special Effects**: CountUp, GlitchText, ShinyText, TiltedCard for engaging interactions
+- **Layout Enhancements**: Bento grid, marquee, pulsating button for dynamic layouts
+
+### Utility Systems (`/resources/js/`)
+- **Hooks**: Custom React hooks for appearance, mobile detection, user initials, navigation
+- **Plugins**: Context providers for Axios, Google Analytics, Mitt.js event system
+- **Layouts**: Flexible layout system with auth, app, and settings variants
+- **Types**: TypeScript definitions for global types, API responses, and component props
 
 ## Backend Architecture