---
estimated_steps: 26
estimated_files: 7
skills_used: []
---

# T03: Object panel, alignment bar, canvas toolbar, and shape properties panel

Build the UI panels that surround the canvas: the right-side ObjectPanel for layer management, the AlignmentBar for spatial arrangement, the CanvasToolbar for tool switching and canvas controls, and the ShapeProperties panel for editing selected objects.

ObjectPanel:
- Lists canvas objects by z-order (top of list = frontmost layer)
- Each row shows: drag handle, object type icon, name (double-click to rename), visibility toggle (eye icon), lock toggle (lock icon)
- Click row to select object on canvas, shift-click for multi-select
- Drag-to-reorder changes z-order in state (which changes render order in KonvaStage)
- Wire to useCanvasState: reorderObject, toggleVisibility, toggleLock, selectObjects

AlignmentBar:
- Appears when 1+ objects selected
- Buttons: align left, align center, align right, align top, align middle, align bottom
- When 2+ selected: distribute horizontally, distribute vertically
- Center on artboard button (works with 1+ selected)
- Consumes alignment utility functions from utils/alignment.ts
- Dispatches batch updateObject calls through useCanvasState

CanvasToolbar:
- Tool buttons: pointer/select (default), rectangle, circle, ellipse, line
- Active tool highlighted with accent color
- Undo/redo buttons (disabled when stack empty) — connected to useCanvasState undo/redo
- Grid toggle button
- Zoom controls (zoom in, zoom out, fit to artboard)

ShapeProperties:
- Shown when exactly 1 shape selected
- Fields: stroke color (color input), stroke weight (number input), fill color (color input with toggle), width/height display
- For line objects: line style dropdown (solid, dashed, dotted)
- Changes dispatch updateObject through useCanvasState

Wire all panels into DesignCanvas.tsx layout slots.

## Inputs

- ``app/src/types/canvas.ts` — CanvasObject types from T01`
- ``app/src/hooks/useCanvasState.ts` — State hook API from T01`
- ``app/src/utils/alignment.ts` — Alignment calculation functions from T01`
- ``app/src/views/DesignCanvas.tsx` — View 2 container with panel layout slots from T02`
- ``app/src/views/DesignCanvas.module.css` — Canvas layout CSS from T02`
- ``app/src/index.css` — CSS variables`
- ``app/src/App.css` — Global shared styles from T02`

## Expected Output

- ``app/src/components/canvas/ObjectPanel.tsx` — Layer list with reorder, visibility, lock, select, rename`
- ``app/src/components/canvas/AlignmentBar.tsx` — Alignment and distribution buttons wired to state`
- ``app/src/components/canvas/CanvasToolbar.tsx` — Tool switcher, undo/redo, grid toggle, zoom controls`
- ``app/src/components/canvas/ShapeProperties.tsx` — Property editor for selected shape (stroke, fill, dimensions, line style)`
- ``app/src/views/DesignCanvas.tsx` — Updated with all panels wired into layout`
- ``app/src/views/DesignCanvas.module.css` — Updated with panel layout refinements`
- ``app/src/App.css` — Updated with panel and toolbar component styles`

## Verification

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