feat: implement Phase 10 - Shape Tools

Add comprehensive shape drawing system with support for 7 shape types:
rectangle, ellipse, line, arrow, polygon, star, and triangle.

Features:
- Created types/shape.ts with ShapeType and ShapeSettings interfaces
- Implemented lib/shape-utils.ts with drawing algorithms for all shapes:
  * Rectangle with optional corner radius
  * Ellipse with independent x/y radii
  * Line with stroke support
  * Arrow with configurable head size and angle
  * Polygon with adjustable sides (3-20)
  * Star with points and inner radius control
  * Triangle (equilateral style)
- Created store/shape-store.ts for shape state management
- Implemented tools/shape-tool.ts as unified tool handling all shapes
- Built components/shapes/shape-panel.tsx with comprehensive UI:
  * Grid selector for all 7 shape types
  * Fill/stroke toggles with color pickers
  * Dynamic properties panel (corner radius, sides, inner radius, etc.)
  * Real-time stroke width adjustment
- Integrated ShapeTool into canvas-with-tools.tsx
- Added ShapePanel to editor-layout.tsx sidebar
- Removed duplicate ShapeType/ShapeSettings from types/tool.ts

All shapes support:
- Fill with color selection
- Stroke with color and width controls
- Shape-specific properties (corners, sides, arrow heads, etc.)
- Undo/redo via DrawCommand integration

Build Status: ✓ Successful (1290ms)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

types/index.ts

@@ -5,3 +5,4 @@ export * from './history';
 export * from './filter';
 export * from './selection';
 export * from './transform';
+export * from './shape';

types/shape.ts

@@ -0,0 +1,41 @@
+export type ShapeType =
+  | 'rectangle'
+  | 'ellipse'
+  | 'line'
+  | 'arrow'
+  | 'polygon'
+  | 'star'
+  | 'triangle';
+
+export interface ShapeSettings {
+  type: ShapeType;
+  fill: boolean;
+  fillColor: string;
+  stroke: boolean;
+  strokeColor: string;
+  strokeWidth: number;
+  cornerRadius: number; // For rounded rectangles
+  sides: number; // For polygons and stars
+  innerRadius: number; // For stars (0-1, percentage of outer radius)
+  arrowHeadSize: number; // For arrows
+  arrowHeadAngle: number; // For arrows (degrees)
+}
+
+export interface ShapeState {
+  settings: ShapeSettings;
+}
+
+export interface ShapeStore extends ShapeState {
+  setShapeType: (type: ShapeType) => void;
+  setFill: (fill: boolean) => void;
+  setFillColor: (color: string) => void;
+  setStroke: (stroke: boolean) => void;
+  setStrokeColor: (color: string) => void;
+  setStrokeWidth: (width: number) => void;
+  setCornerRadius: (radius: number) => void;
+  setSides: (sides: number) => void;
+  setInnerRadius: (radius: number) => void;
+  setArrowHeadSize: (size: number) => void;
+  setArrowHeadAngle: (angle: number) => void;
+  updateSettings: (settings: Partial<ShapeSettings>) => void;
+}

types/tool.ts

@@ -58,26 +58,3 @@ export interface ToolHandlers {
   onActivate?: () => void;
   onDeactivate?: () => void;
 }
-
-/**
- * Shape types for shape tool
- */
-export type ShapeType =
-  | 'rectangle'
-  | 'ellipse'
-  | 'line'
-  | 'arrow'
-  | 'polygon'
-  | 'star';
-
-/**
- * Shape tool settings
- */
-export interface ShapeSettings {
-  type: ShapeType;
-  fill: boolean;
-  stroke: boolean;
-  strokeWidth: number;
-  fillColor: string;
-  strokeColor: string;
-}