---
estimated_steps: 16
estimated_files: 2
skills_used: []
---

# T04: Keyboard shortcuts, final integration wiring, and verification

Wire keyboard shortcuts for the canvas, perform final integration checks, and ensure all tests pass.

Keyboard shortcuts:
- Ctrl+Z: undo (calls useCanvasState.undo)
- Ctrl+Shift+Z (or Ctrl+Y): redo (calls useCanvasState.redo)
- Delete/Backspace: remove selected objects (calls useCanvasState.removeObject for each selected ID)
- Escape: deselect all (calls useCanvasState.deselectAll)
- Ctrl+A: select all objects

Implement via useEffect with keydown listener on the DesignCanvas container div (or window). Ensure shortcuts only fire when canvas view is active and no text input is focused (check activeElement).

Final integration:
- Verify the full flow: View 1 → Use This → Artboard Setup → Canvas with imported SVG
- Verify undo/redo buttons in toolbar reflect stack state (disabled when empty)
- Verify all panel components render and dispatch correctly
- Run full test suite: all existing 23 tests + all new tests must pass
- Run TypeScript compiler: zero errors
- Ensure no unused imports/variables (strict tsconfig)

This task closes the slice by ensuring everything works together as an integrated whole.

## Inputs

- ``app/src/views/DesignCanvas.tsx` — Canvas view with all panels from T03`
- ``app/src/hooks/useCanvasState.ts` — State hook with undo/redo from T01`
- ``app/src/components/canvas/CanvasToolbar.tsx` — Toolbar with undo/redo buttons from T03`
- ``app/src/types/canvas.ts` — Canvas types from T01`

## Expected Output

- ``app/src/views/DesignCanvas.tsx` — Updated with keyboard shortcut handler (Ctrl+Z, Ctrl+Shift+Z, Delete, Escape, Ctrl+A)`
- ``app/src/App.css` — Final style adjustments if needed`

## Verification

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