Files

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

public

Initial commit: Phase 1 scaffolding complete

2026-04-21 00:29:50 -05:00

src

Phase 2: Canvas Editor Core

2026-04-21 01:03:33 -05:00

.gitignore

Initial commit: Phase 1 scaffolding complete

2026-04-21 00:29:50 -05:00

eslint.config.js

Initial commit: Phase 1 scaffolding complete

2026-04-21 00:29:50 -05:00

index.html

Initial commit: Phase 1 scaffolding complete

2026-04-21 00:29:50 -05:00

package-lock.json

Initial commit: Phase 1 scaffolding complete

2026-04-21 00:29:50 -05:00

package.json

Phase 2: Canvas Editor Core

2026-04-21 01:03:33 -05:00

README.md

Initial commit: Phase 1 scaffolding complete

2026-04-21 00:29:50 -05:00

vite.config.js

Initial commit: Phase 1 scaffolding complete

2026-04-21 00:29:50 -05:00

README.md

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Oxc
@vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.