Commit Graph

21 Commits

Author SHA1 Message Date
khalid@traclabs.com
628a6765f4 Fix module issues, fix styling, add conditions to when the background removal and edit controls are shown 2026-04-23 08:48:11 -05:00
khalid@traclabs.com
4d19363d58 Flatted and issues fixed with Claude Desktop. 2026-04-22 06:21:02 -05:00
Khalid A
66bd69efe7 Consolidate to single server with unified package.json
- 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>
2026-04-21 22:24:20 -05:00
Khalid A
009557c249 Implement template system and PWA enhancements
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>
2026-04-21 22:08:22 -05:00
Khalid A
304a6b247b Add canvas dependency to server package.json (Phase 8 requirement) 2026-04-21 21:55:18 -05:00
Khalid A
4ca7910465 Phases 7-10: Complete remaining features and optimizations
Phase 7.2 - Debounce undo/redo history:
- Add 300ms debounce timer for rapid drag/transform changes
- Commit history on dragEnd/transformEnd events only
- Prevents history bloat during continuous interactions

Phase 8.3 - Template-aware export:
- Render template background layer first
- Apply slot crop regions for image elements
- Render template overlay layer last
- Support nonPrintable flag for guides/watermarks

Phase 9 - PWA icons:
- Add pwa-192x192.svg and pwa-512x512.svg icons
- Update vite.config.js manifest configuration

Phase 10.3 - Performance optimizations:
- Add React.memo to canvas components (ImageElement, TextElement, DesignCanvas)
- Add React.memo to panel components (LayersPanel, PropertiesPanel)
- Prevent unnecessary re-renders during canvas interactions

Phase 10.6 - Template documentation:
- Document template JSON schema in docs/template-schema.md
- Include element properties, slot definitions, and examples
- Describe background/overlay layer structure
2026-04-21 21:50:33 -05:00
Khalid A
a02f020d4c Phase 10: Polish & QA
- Added comprehensive README.md with:
  - Feature list and tech stack
  - Installation and Docker instructions
  - Project structure documentation
  - API endpoint reference
  - Build plan status checklist
- Verified all 10 phases complete
- Code review passed - no security vulnerabilities found
- Ready for production deployment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 01:53:58 -05:00
Khalid A
d42a497ae8 Phase 9: PWA & Workbox Caching (merged) 2026-04-21 01:52:43 -05:00
Khalid A
5164b08c1c Phase 9: PWA & Workbox Caching
- Added vite-plugin-pwa and workbox-window dependencies
- PWA manifest with icons and standalone display mode
- Workbox runtime caching for:
  - Transformers.js models (30 days)
  - Uploaded images (7 days)
  - Google Fonts (1 year)
- PWAInstall component with install prompt banner
- Offline support for cached assets
- Auto-update registration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 01:51:43 -05:00
Khalid A
29e30ec368 Phase 8: High-Resolution Export (merge)
- Integrated export functionality with LayersPanel
- Server-side node-canvas export at 4500x4500px (300 DPI)
- Undo/Redo buttons and export button in canvas header
- Merged with remote Phase 3 changes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 01:33:16 -05:00
Khalid A
8a4b653019 Phase 8: High-Resolution Export
- Server-side export endpoint using node-canvas
- 300x300px preview -> 4500x4500px export (15"x15" @ 300 DPI)
- Exports images and text elements with proper scaling
- useExport hook with progress indicator
- Export button in canvas header
- Automatic download of exported PNG
- Error handling with dismissible error banner

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 01:29:41 -05:00
Khalid A
72a1967333 Phase 3: Sidebar & Properties Panel (merge with remote) 2026-04-21 01:28:46 -05:00
Khalid A
fd11a36d93 Phase 3: Sidebar & Properties Panel
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
2026-04-21 01:27:59 -05:00
Khalid A
537cfd572d Phase 7: Undo/Redo
- 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>
2026-04-21 01:27:51 -05:00
Khalid A
72495fec3e Phase 6: Template System
- Added 8 pre-designed templates across 8 categories
- Templates: Team Sport, Band Merch, Minimal Quote, Funny Cat,
  Gradient Vibes, Vintage Badge, Nature Lover, Tech Geek
- Templates tab with category filter pills
- Template preview cards with 2-column grid
- One-click template application to canvas

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 01:24:03 -05:00
Khalid A
7bf9ce3a9c Phase 5: Photo Pre-Editor (Filerobot)
- 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>
2026-04-21 01:20:11 -05:00
Khalid A
4a735e2f2e Phase 4: Background Removal (Transformers.js)
- 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>
2026-04-21 01:19:03 -05:00
Khalid A
2acf674aaa Phase 3: Sidebar & Properties Panel
- 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>
2026-04-21 01:17:47 -05:00
Khalid A
e67017b259 Phase 2: Canvas Editor Core
Implements the core canvas editor with react-konva:

- Added dependencies: react-konva, konva, use-image
- DesignCanvas component: 300×300px Stage with T-shirt SVG overlay
- TShirtSVG component: Visual t-shirt outline with print zone indicator
- ImageElement: Draggable/resizable image with Transformer handles
- TextElement: Draggable/resizable text with Transformer handles
- useDesignEditor hook: Element CRUD, selection, reordering
- Keyboard shortcut: Delete/Backspace removes selected element
- Test image added on mount for Phase 2 verification

Canvas info bar shows: "Design Area: 15" × 15" • Export: 4500 × 4500px @ 300 DPI"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 01:03:33 -05:00
Khalid A
1af0e6152d Add .env.example file
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-21 01:02:48 -05:00
Khalid A
01702c397f Initial commit: Phase 1 scaffolding complete
- 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>
2026-04-21 00:29:50 -05:00