feat(phase-13): implement crop tool with visual guides and handles

Add comprehensive crop tool with visual guides, resize handles, and Apply/Cancel UI.

Features:
- Interactive crop area selection with drag-to-create
- 8 resize handles (corners and edges) for precise cropping
- Visual overlay with dimmed areas outside crop region
- Rule of thirds grid overlay for composition guidance
- Drag crop area to reposition
- Apply/Cancel buttons in tool options
- White border and handles for clear visibility

Changes:
- Created tools/crop-tool.ts with CropTool class
- Added crop tool to lib/tool-loader.ts
- Added Crop icon and button to tool palette with 'C' shortcut
- Added crop tool options UI in components/editor/tool-options.tsx
- Exported CropTool from tools/index.ts

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

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

components/editor/tool-options.tsx

@@ -52,6 +52,9 @@ export function ToolOptions() {
   // Gradient tool
   const isGradientTool = activeTool === 'gradient';
 
+  // Crop tool
+  const isCropTool = activeTool === 'crop';
+
   // Shape tool
   const isShapeTool = activeTool === 'shape';
 
@@ -62,7 +65,7 @@ export function ToolOptions() {
   const isTextTool = activeTool === 'text';
 
   // Don't show options bar if no options available
-  if (!isDrawingTool && !isFillTool && !isGradientTool && !isShapeTool && !isSelectionTool && !isTextTool) {
+  if (!isDrawingTool && !isFillTool && !isGradientTool && !isCropTool && !isShapeTool && !isSelectionTool && !isTextTool) {
     return null;
   }
 
@@ -205,6 +208,29 @@ export function ToolOptions() {
         </>
       )}
 
+      {/* Crop Tool Options */}
+      {isCropTool && (
+        <>
+          <div className="flex items-center gap-4">
+            <div className="text-sm text-muted-foreground">
+              Drag to define crop area. Click and drag handles to resize.
+            </div>
+            <button
+              className="px-4 py-1.5 text-sm bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors"
+              title="Apply crop (Enter)"
+            >
+              Apply
+            </button>
+            <button
+              className="px-4 py-1.5 text-sm bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors"
+              title="Cancel crop (Esc)"
+            >
+              Cancel
+            </button>
+          </div>
+        </>
+      )}
+
       {/* Gradient Tool Options */}
       {isGradientTool && (
         <>

components/tools/tool-palette.tsx

@@ -14,6 +14,7 @@ import {
   Stamp,
   Droplet,
   Sun,
+  Crop,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -26,6 +27,7 @@ const tools: { type: ToolType; icon: React.ReactNode; label: string; shortcut: s
   { type: 'eyedropper', icon: <Pipette className="h-5 w-5" />, label: 'Eyedropper', shortcut: '5' },
   { type: 'text', icon: <Type className="h-5 w-5" />, label: 'Text', shortcut: '6' },
   { type: 'select', icon: <MousePointer className="h-5 w-5" />, label: 'Select', shortcut: '7' },
+  { type: 'crop', icon: <Crop className="h-5 w-5" />, label: 'Crop', shortcut: 'C' },
   { type: 'clone', icon: <Stamp className="h-5 w-5" />, label: 'Clone Stamp (Alt+Click source)', shortcut: '8' },
   { type: 'smudge', icon: <Droplet className="h-5 w-5" />, label: 'Smudge', shortcut: '9' },
   { type: 'dodge', icon: <Sun className="h-5 w-5" />, label: 'Dodge/Burn (Alt for burn)', shortcut: '0' },