feat(phase-13): implement gradient tool with linear, radial, and angular modes

Add comprehensive gradient tool with three gradient types and full UI integration.

Features:
- Gradient tool with drag-to-create interaction
- Three gradient types: Linear, Radial, and Angular (conic)
- Live preview during drag with 70% opacity overlay
- Primary and secondary color selection
- Gradient type selector in tool options
- Undo/redo support through command system
- Fallback to radial gradient for browsers without conic gradient support

Changes:
- Created tools/gradient-tool.ts with GradientTool class
- Added 'gradient' to ToolType in types/tool.ts
- Extended ToolSettings with secondaryColor and gradientType
- Updated store/tool-store.ts with setSecondaryColor and setGradientType methods
- Added gradient tool loading in lib/tool-loader.ts
- Added gradient button to tool palette with 'G' shortcut
- Added gradient tool options UI in components/editor/tool-options.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

store/tool-store.ts

@@ -15,6 +15,10 @@ interface ToolStore extends ToolState {
   setHardness: (hardness: number) => void;
   /** Set color */
   setColor: (color: string) => void;
+  /** Set secondary color */
+  setSecondaryColor: (color: string) => void;
+  /** Set gradient type */
+  setGradientType: (type: 'linear' | 'radial' | 'angular') => void;
   /** Set flow */
   setFlow: (flow: number) => void;
   /** Set spacing */
@@ -28,6 +32,8 @@ const DEFAULT_SETTINGS: ToolSettings = {
   opacity: 1,
   hardness: 1,
   color: '#000000',
+  secondaryColor: '#ffffff',
+  gradientType: 'linear',
   flow: 1,
   spacing: 0.25,
 };
@@ -47,6 +53,7 @@ export const useToolStore = create<ToolStore>()(
           brush: 'crosshair',
           eraser: 'crosshair',
           fill: 'crosshair',
+          gradient: 'crosshair',
           eyedropper: 'crosshair',
           text: 'text',
           shape: 'crosshair',
@@ -94,6 +101,18 @@ export const useToolStore = create<ToolStore>()(
         }));
       },
 
+      setSecondaryColor: (color) => {
+        set((state) => ({
+          settings: { ...state.settings, secondaryColor: color },
+        }));
+      },
+
+      setGradientType: (type) => {
+        set((state) => ({
+          settings: { ...state.settings, gradientType: type },
+        }));
+      },
+
       setFlow: (flow) => {
         set((state) => ({
           settings: { ...state.settings, flow: Math.max(0, Math.min(1, flow)) },