---
estimated_steps: 12
estimated_files: 5
skills_used: []
---

# T02: Konva stage with artboard rendering, imported SVG, selection handles, and shape tools

Build the core Konva canvas rendering layer and wire it into the app. This task creates the KonvaStage component (Konva Stage + Layer with artboard background, all canvas objects, Transformer for selection handles, rubber-band selection rectangle), the DesignCanvas view container, and shape creation tools.

Key implementation details:
- DesignCanvas is the View 2 container. Layout: top toolbar area, left canvas with KonvaStage, right panel area (wired in T03). Receives svgData and traceMetadata props from App.tsx.
- Wire DesignCanvas into App.tsx replacing the placeholder div. Remove underscore prefixes from _svgResult and _traceMetadata variables.
- KonvaStage renders: (1) artboard background shape using Konva.Rect/Path/Circle based on ArtboardConfig, (2) all canvas objects from useCanvasState mapped to Konva components, (3) Transformer attached to selected nodes, (4) rubber-band selection rectangle for multi-select.
- Imported SVG from View 1: convert SVG string → Blob URL → Image element → Konva.Image. Auto-add to canvas objects on mount if svgData is provided.
- Shape tools: rect, circle, ellipse, line creation. Click canvas in tool mode to place shape at click position with default dimensions. Tool state tracked in DesignCanvas.
- Selection: click shape to select (single), shift-click to add to selection, click empty area to deselect, rubber-band rectangle selects all intersecting shapes.
- Transformer: on onTransformEnd, reset scaleX/scaleY to 1 and multiply into width/height to keep state model clean.
- Line objects support dash arrays for style variants (solid, dashed, dotted).
- Canvas view should fill available width. Override #root width constraint for canvas view or make canvas flex within it.

IMPORTANT tsconfig constraints: noUnusedLocals and noUnusedParameters are strict. All variables must be used or prefixed with underscore.

## Inputs

- ``app/src/types/canvas.ts` — CanvasObject types, ArtboardConfig from T01`
- ``app/src/hooks/useCanvasState.ts` — Central state hook from T01`
- ``app/src/utils/artboardShapes.ts` — Artboard shape paths from T01`
- ``app/src/App.tsx` — ViewState routing with svgResult/traceMetadata state`
- ``app/src/types/engine.ts` — TraceMetadata interface`
- ``app/src/index.css` — CSS variables`
- ``app/src/App.css` — Global shared styles`

## Expected Output

- ``app/src/views/DesignCanvas.tsx` — View 2 container with layout, toolbar area, KonvaStage, panel area, tool state management, imported SVG loading`
- ``app/src/views/DesignCanvas.module.css` — CSS module for canvas view layout (three-column: toolbar top, canvas left, panel right)`
- ``app/src/components/canvas/KonvaStage.tsx` — Konva Stage+Layer rendering artboard, objects, Transformer, rubber-band selection, shape creation, click-to-select`
- ``app/src/App.tsx` — Updated to render DesignCanvas with svgResult/traceMetadata props (underscores removed from variable names)`
- ``app/src/App.css` — Additional styles for canvas toolbar buttons and layout`

## Verification

cd app && npx tsc --noEmit && npx vitest run --reporter=verbose
