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.jsx**: Central responsive orchestrator managing canvas, sidebars, viewport detection, and responsive design
-- **Editor Controls** (`editor-controls.jsx`): Video playback controls with play/pause, reset, refresh, and download
+- **editor-controls.jsx**: Video playback controls with play/pause, reset, refresh, download via event emission
-- **Editor Canvas** (`editor-canvas.jsx`): Konva.js-based canvas with drag-and-drop timeline editing
+- **editor-canvas.jsx**: Responsive canvas wrapper that scales the video editor to fit different screen sizes
-- **Multiple Sidebars**: EditNavSidebar, EditSidebar, TextSidebar for different editing modes
+- **editor-ai-sheet.jsx**: AI-powered meme generation interface with job polling, status tracking, and credit management
-- **AI Integration** (`editor-ai-sheet.jsx`): AI-powered meme generation interface
+- **editor-header.jsx**: Header component for the editor interface with navigation controls
 
-### State Management Architecture
+### Canvas & Video Processing (`/resources/js/modules/editor/partials/canvas/`)
-- **VideoEditorStore**: Video playback state, text element selection
+- **video-editor.jsx**: Core Konva.js canvas with timeline processing, video/image handling, and FFmpeg export
-- **MediaStore**: Meme/background selection, AI integration, API calls, generation history
+- **video-preview.jsx**: Video preview component with element selection and transformation utilities
-- **UserStore**: User authentication and profile management
+- **video-download-modal.jsx**: Download interface for multiple export formats (MOV, WebM, GIF, WebP)
-- **PricingStore**: Subscription and credit management
+- **video-export.jsx**: Export functionality with FFmpeg.wasm integration and format conversion
-- **localSettingsStore**: User preferences and UI settings
 
-### Component Communication
+### Sidebar Components (`/resources/js/modules/editor/partials/`)
-- **Mitt.js Event System**: Event-driven architecture for editor interactions
+- **edit-nav-sidebar.jsx**: Navigation sidebar for switching between memes and backgrounds
-- **Common Events**: `video-play`, `video-reset`, `video-open-download-modal`, `open-ai-editor-sheet`, `text-element-selected`
+- **edit-sidebar.jsx**: Main editing sidebar with content selection interfaces
-- **Responsive Design**: Mobile-first with progressive enhancement, viewport detection hooks
+- **text-sidebar.jsx**: Text editing sidebar for customizing meme captions and text properties
 
-### UI Component Library
+### Authentication System (`/resources/js/modules/auth/`)
-- **Radix UI Base**: Comprehensive accessible component primitives
+- **AuthDialog.jsx**: Modal dialog for Google OAuth authentication with login/signup switching
-- **Custom Components**: Animated elements, error boundaries, tailwind breakpoint utilities
+- **auth-user.jsx**: User authentication component and user state management
-- **Styling**: Tailwind CSS with custom design system and responsive utilities
+
+### 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
 

resources/js/modules/editor/partials/canvas/video-export.jsx

@@ -224,11 +224,17 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration, watermark
             opacity: WATERMARK_CONFIG.opacity,
             align: 'center',
             verticalAlign: 'middle',
-            offsetX: 90, // Approximate half-width to center the text
-            offsetY: 5, // Approximate half-height to center the text
         });
 
         layer.add(watermarkText);
+        
+        // Force text measurement and update offset for proper centering
+        watermarkText._setTextData();
+        const textWidth = watermarkText.width();
+        const textHeight = watermarkText.height();
+        watermarkText.offsetX(textWidth / 2);
+        watermarkText.offsetY(textHeight / 2);
+        
         layer.draw();
 
         const dataURL = stage.toDataURL({

resources/js/modules/editor/partials/canvas/video-preview.jsx

@@ -331,6 +331,22 @@ const VideoPreview = ({
                     {watermarked && (
                         <Text
                             key={`watermark-${fontsLoaded}`}
+                            ref={(node) => {
+                                if (node && fontsLoaded) {
+                                    // Force text measurement after font loading
+                                    setTimeout(() => {
+                                        node._setTextData();
+                                        // Update offset to properly center the text
+                                        const textWidth = node.width();
+                                        const textHeight = node.height();
+                                        node.offsetX(textWidth / 2);
+                                        node.offsetY(textHeight / 2);
+                                        if (layerRef.current) {
+                                            layerRef.current.batchDraw();
+                                        }
+                                    }, 0);
+                                }
+                            }}
                             text="memefa.st"
                             x={dimensions.width / 2}
                             y={dimensions.height / 2 + dimensions.height * 0.2}
@@ -342,8 +358,6 @@ const VideoPreview = ({
                             opacity={WATERMARK_CONFIG.opacity}
                             align="center"
                             verticalAlign="middle"
-                            offsetX={90} // Approximate half-width to center the text
-                            offsetY={5} // Approximate half-height to center the text
                             draggable={false}
                             listening={false} // Prevents any mouse interactions
                         />