- Merge client and server dependencies into root package.json
- Remove separate client/package.json and server/package.json
- Update server/index.js to serve built client static files
- Simplify Dockerfile to single build + production stage
- Update dev scripts for unified development workflow
- SPA routing serves index.html for non-API routes
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Phase 6 - Template System:
- Add TemplateLayer component for background/overlay rendering
- Add SlotPlaceholder component with visual indicators for empty slots
- Add useTemplate hook with auto-crop and drag constraint functions
- Update templates.js with slot definitions for team-sport template
- Integrate template system into DesignCanvas and App
- Add slot upload UI in TemplatesTab sidebar
Phase 9 - PWA Improvements:
- Add Workbox caching rules for HuggingFace LFS, templates, and API
- Change registerType to 'prompt' for update notifications
- Add service worker update handler in main.jsx
- Add refresh prompt UI in PWAInstall component
Phase 10 - Responsive and Accessibility:
- Add responsive CSS media queries for tablet/mobile layouts
- Add OfflineIndicator component with online/offline detection
- Add focus trap and keyboard navigation to PhotoPreEditor
- Add aria labels and screen reader support to modal
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Implemented full editor UI with three-column layout:
- Sidebar with 4 tabs (Upload, Stickers, Text, Templates)
- UploadTab with drag-and-drop file upload, wires to POST /api/upload
- StickersTab with 96 emoji stickers across 6 categories
- TextTab with font picker (20 Google Fonts), size slider, color picker
- TemplatesTab placeholder for future template system
- LayersPanel showing all elements with select/delete
- PropertiesPanel with position, size, rotation controls
Also added:
- Constants for fonts and stickers
- Enhanced CSS with editor-layout, sidebar, properties-panel classes
- Updated App.jsx to integrate all components
- History tracking with 50-state limit in useDesignEditor hook
- Undo: Ctrl/Cmd + Z keyboard shortcut
- Redo: Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y
- Undo/Redo buttons in canvas header
- History saves state after add, update, delete, reorder operations
- Disabled button states when history is exhausted
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Added react-filerobot-image-editor dependency
- PhotoPreEditor component with full editing capabilities
- Crop, filters, adjustments, annotations, watermark tabs
- Opens after image upload, before adding to canvas
- Exports edited image as PNG for canvas use
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Added @xenova/transformers dependency
- useBackgroundRemoval hook with RMBG-1.4 model
- Client-side background removal with progress indicator
- Background removal button in properties panel (image elements only)
- ~170MB model cached after first download
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Three-column layout (sidebar/canvas/properties)
- Sidebar with tabs: Upload, Stickers, Text
- Upload tab with drag-and-drop and click-to-upload
- Stickers tab with 6 categories (40+ emojis)
- Text tab with font selector, size slider, color picker
- Properties panel with position, size, rotation controls
- Delete button for selected element
- Responsive layout for mobile
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Root package.json with concurrently for dev server
- Client: Vite + React 18 with design tokens and proxy config
- Server: Express with CORS, multer (20MB), Sharp resize
- Upload endpoint with preview generation
- Dockerfile (multi-stage) and docker-compose.yml
- Canvas deferred to Phase 8 (export functionality)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
