feat(phase-8): implement comprehensive selection system with marching ants

This commit completes Phase 8 of the paint-ui implementation, adding a full
selection system with multiple selection tools, operations, and visual feedback.

**New Files:**
- types/selection.ts: Selection types, masks, and state interfaces
- lib/selection-utils.ts: Selection mask generation and manipulation algorithms
- lib/selection-operations.ts: Copy/cut/paste/delete/fill/stroke operations
- store/selection-store.ts: Selection state management with Zustand
- core/commands/selection-command.ts: Undo/redo commands for selections
- tools/rectangular-selection-tool.ts: Rectangular marquee selection
- tools/elliptical-selection-tool.ts: Elliptical marquee selection
- tools/lasso-selection-tool.ts: Free-form polygon selection
- tools/magic-wand-tool.ts: Color-based flood-fill selection
- components/selection/selection-panel.tsx: Complete selection UI panel
- components/selection/index.ts: Selection components barrel export

**Updated Files:**
- components/canvas/canvas-with-tools.tsx: Added selection tools integration and marching ants animation
- components/editor/editor-layout.tsx: Integrated SelectionPanel into layout
- store/index.ts: Added selection-store export
- store/canvas-store.ts: Renamed Selection to CanvasSelection to avoid conflicts
- tools/index.ts: Added selection tool exports
- types/index.ts: Added selection types export
- types/canvas.ts: Renamed Selection interface to CanvasSelection

**Selection Tools:**

**Marquee Tools:**
- ✨ Rectangular Selection: Click-drag rectangular regions
- ✨ Elliptical Selection: Click-drag elliptical regions

**Free-form Tools:**
- ✨ Lasso Selection: Draw free-form polygon selections
- ✨ Magic Wand: Color-based flood-fill selection with tolerance

**Selection Modes:**
- 🔷 New: Replace existing selection
- ➕ Add: Add to existing selection
- ➖ Subtract: Remove from existing selection
- ⚡ Intersect: Keep only overlapping areas

**Selection Operations:**
- 📋 Copy/Cut/Paste: Standard clipboard operations with selection mask
- 🗑️ Delete: Remove selected pixels
- 🎨 Fill Selection: Fill with current color
- 🖌️ Stroke Selection: Outline selection with current color
- 🔄 Invert Selection: Invert selected/unselected pixels
- ❌ Clear Selection: Deselect all

**Technical Features:**
- Marching ants animation (animated dashed outline at 50ms interval)
- Selection masks using Uint8Array (0-255 values for anti-aliasing)
- Feathering support (0-250px gaussian blur on selection edges)
- Tolerance control for magic wand (0-255 color difference threshold)
- Scanline polygon fill algorithm for lasso tool
- Flood-fill with Set-based visited tracking for magic wand
- Selection bounds calculation for optimized operations
- Keyboard shortcuts (Ctrl+C, Ctrl+X, Ctrl+V, Ctrl+D, Ctrl+Shift+I)
- Undo/redo integration via selection commands
- Non-destructive operations with proper history tracking

**Algorithm Implementations:**
- Rectangular mask: Simple bounds-based pixel marking
- Elliptical mask: Distance formula from ellipse center
- Lasso mask: Scanline polygon fill with edge intersection
- Magic wand: BFS flood-fill with color tolerance matching
- Mask combination: Per-pixel operations (max, subtract, AND)
- Feathering: Separable box blur (horizontal + vertical passes)
- Mask inversion: Per-pixel NOT operation with bounds recalculation

**UI/UX Features:**
- 264px wide selection panel with all tools and operations
- Tool selection with visual feedback (highlighted active tool)
- Selection mode toggles (new/add/subtract/intersect)
- Feather and tolerance sliders with live value display
- Disabled state when no selection exists
- Keyboard shortcut hints next to operations
- Visual marching ants animation (animated dashes)

Build verified: ✓ Compiled successfully in 1302ms

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

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

components/canvas/canvas-with-tools.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { useCanvasStore, useLayerStore, useToolStore } from '@/store';
 import { useHistoryStore } from '@/store/history-store';
+import { useSelectionStore } from '@/store/selection-store';
+import { drawMarchingAnts } from '@/lib/selection-utils';
 import { getContext, drawGrid, drawCheckerboard } from '@/lib/canvas-utils';
 import { DrawCommand } from '@/core/commands';
 import {
@@ -11,6 +13,10 @@ import {
   EraserTool,
   FillTool,
   EyedropperTool,
+  RectangularSelectionTool,
+  EllipticalSelectionTool,
+  LassoSelectionTool,
+  MagicWandTool,
   type BaseTool,
 } from '@/tools';
 import type { PointerState } from '@/types';
@@ -23,6 +29,11 @@ const tools: Record<string, BaseTool> = {
   eraser: new EraserTool(),
   fill: new FillTool(),
   eyedropper: new EyedropperTool(),
+  select: new RectangularSelectionTool(),
+  'rectangular-select': new RectangularSelectionTool(),
+  'elliptical-select': new EllipticalSelectionTool(),
+  'lasso-select': new LassoSelectionTool(),
+  'magic-wand': new MagicWandTool(),
 };
 
 export function CanvasWithTools() {
@@ -46,6 +57,8 @@ export function CanvasWithTools() {
   const { layers, getActiveLayer } = useLayerStore();
   const { activeTool, settings } = useToolStore();
   const { executeCommand } = useHistoryStore();
+  const { activeSelection, selectionType, isMarching } = useSelectionStore();
+  const [marchingOffset, setMarchingOffset] = useState(0);
 
   const [isPanning, setIsPanning] = useState(false);
   const [panStart, setPanStart] = useState({ x: 0, y: 0 });
@@ -113,18 +126,25 @@ export function CanvasWithTools() {
       drawGrid(ctx, gridSize, 'rgba(0, 0, 0, 0.15)');
     }
 
-    // Draw selection if active
-    if (selection.active) {
-      ctx.strokeStyle = '#0066ff';
-      ctx.lineWidth = 1 / zoom;
-      ctx.setLineDash([4 / zoom, 4 / zoom]);
-      ctx.strokeRect(selection.x, selection.y, selection.width, selection.height);
-      ctx.setLineDash([]);
+    // Draw selection if active (marching ants)
+    if (activeSelection && isMarching) {
+      drawMarchingAnts(ctx, activeSelection.mask, marchingOffset);
     }
 
     // Restore context state
     ctx.restore();
-  }, [layers, width, height, zoom, offsetX, offsetY, showGrid, gridSize, backgroundColor, selection, pointer]);
+  }, [layers, width, height, zoom, offsetX, offsetY, showGrid, gridSize, backgroundColor, selection, pointer, activeSelection, isMarching, marchingOffset]);
+
+  // Marching ants animation
+  useEffect(() => {
+    if (!activeSelection || !isMarching) return;
+
+    const interval = setInterval(() => {
+      setMarchingOffset((prev) => (prev + 1) % 8);
+    }, 50);
+
+    return () => clearInterval(interval);
+  }, [activeSelection, isMarching]);
 
   // Handle mouse wheel for zooming
   const handleWheel = (e: React.WheelEvent) => {
@@ -156,6 +176,31 @@ export function CanvasWithTools() {
       return;
     }
 
+    // Selection tools
+    const selectionTools = ['select', 'rectangular-select', 'elliptical-select', 'lasso-select', 'magic-wand'];
+    if (e.button === 0 && !e.shiftKey && selectionTools.includes(activeTool)) {
+      const activeLayer = getActiveLayer();
+      if (!activeLayer || !activeLayer.canvas) return;
+
+      const tool = tools[`${selectionType}-select`] || tools['select'];
+      const newPointer: PointerState = {
+        isDown: true,
+        x: canvasPos.x,
+        y: canvasPos.y,
+        prevX: canvasPos.x,
+        prevY: canvasPos.y,
+        pressure: e.pressure || 1,
+      };
+
+      setPointer(newPointer);
+
+      const ctx = activeLayer.canvas.getContext('2d');
+      if (ctx) {
+        tool.onPointerDown(newPointer, ctx, settings);
+      }
+      return;
+    }
+
     // Drawing tools
     if (e.button === 0 && !e.shiftKey && ['pencil', 'brush', 'eraser', 'fill', 'eyedropper'].includes(activeTool)) {
       const activeLayer = getActiveLayer();

components/editor/editor-layout.tsx

@@ -10,6 +10,7 @@ import { FileMenu } from './file-menu';
 import { ToolPalette, ToolSettings } from '@/components/tools';
 import { ColorPanel } from '@/components/colors';
 import { FilterPanel } from '@/components/filters';
+import { SelectionPanel } from '@/components/selection';
 import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
 import { useFileOperations } from '@/hooks/use-file-operations';
 import { useDragDrop } from '@/hooks/use-drag-drop';
@@ -179,6 +180,9 @@ export function EditorLayout() {
         {/* Filter Panel */}
         <FilterPanel />
 
+        {/* Selection Panel */}
+        <SelectionPanel />
+
         {/* Canvas area */}
         <div className="flex-1">
           <CanvasWithTools />

components/selection/index.ts

@@ -0,0 +1 @@
+export * from './selection-panel';

components/selection/selection-panel.tsx

@@ -0,0 +1,369 @@
+'use client';
+
+import { useState } from 'react';
+import { useSelectionStore } from '@/store/selection-store';
+import { useToolStore } from '@/store/tool-store';
+import { useHistoryStore } from '@/store/history-store';
+import {
+  copySelection,
+  cutSelection,
+  deleteSelection,
+  fillSelection,
+  strokeSelection,
+  pasteCanvas,
+} from '@/lib/selection-operations';
+import {
+  ClearSelectionCommand,
+  InvertSelectionCommand,
+} from '@/core/commands/selection-command';
+import type { SelectionType, SelectionMode } from '@/types/selection';
+import {
+  Square,
+  Circle,
+  Lasso,
+  Wand2,
+  Copy,
+  Scissors,
+  Trash2,
+  FlipVertical,
+  X,
+  PlusSquare,
+  MinusSquare,
+  Layers,
+  Paintbrush,
+  Clipboard,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const SELECTION_TOOLS: Array<{
+  type: SelectionType;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}> = [
+  { type: 'rectangular', label: 'Rectangle', icon: Square },
+  { type: 'elliptical', label: 'Ellipse', icon: Circle },
+  { type: 'lasso', label: 'Lasso', icon: Lasso },
+  { type: 'magic-wand', label: 'Magic Wand', icon: Wand2 },
+];
+
+const SELECTION_MODES: Array<{
+  mode: SelectionMode;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}> = [
+  { mode: 'new', label: 'New', icon: Square },
+  { mode: 'add', label: 'Add', icon: PlusSquare },
+  { mode: 'subtract', label: 'Subtract', icon: MinusSquare },
+  { mode: 'intersect', label: 'Intersect', icon: Layers },
+];
+
+export function SelectionPanel() {
+  const {
+    activeSelection,
+    selectionType,
+    selectionMode,
+    feather,
+    tolerance,
+    setSelectionType,
+    setSelectionMode,
+    setFeather,
+    setTolerance,
+    clearSelection,
+    invertSelection,
+  } = useSelectionStore();
+
+  const { setActiveTool, settings } = useToolStore();
+  const { executeCommand } = useHistoryStore();
+  const [copiedCanvas, setCopiedCanvas] = useState<HTMLCanvasElement | null>(
+    null
+  );
+
+  const hasSelection = !!activeSelection;
+
+  const handleToolSelect = (type: SelectionType) => {
+    setSelectionType(type);
+    setActiveTool('select');
+  };
+
+  const handleCopy = () => {
+    const canvas = copySelection();
+    if (canvas) {
+      setCopiedCanvas(canvas);
+    }
+  };
+
+  const handleCut = () => {
+    const canvas = cutSelection();
+    if (canvas) {
+      setCopiedCanvas(canvas);
+    }
+  };
+
+  const handlePaste = () => {
+    if (copiedCanvas) {
+      pasteCanvas(copiedCanvas);
+    }
+  };
+
+  const handleDelete = () => {
+    deleteSelection();
+  };
+
+  const handleClear = () => {
+    const command = new ClearSelectionCommand();
+    executeCommand(command);
+  };
+
+  const handleInvert = () => {
+    const command = new InvertSelectionCommand();
+    executeCommand(command);
+  };
+
+  const handleFill = () => {
+    fillSelection(settings.color);
+  };
+
+  const handleStroke = () => {
+    strokeSelection(settings.color, 2);
+  };
+
+  return (
+    <div className="w-64 border-l border-border bg-card flex flex-col">
+      {/* Header */}
+      <div className="flex items-center gap-2 border-b border-border p-3">
+        <Square className="h-5 w-5 text-primary" />
+        <h2 className="text-sm font-semibold">Selection</h2>
+      </div>
+
+      {/* Selection Tools */}
+      <div className="border-b border-border p-3">
+        <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">
+          Tools
+        </h3>
+        <div className="grid grid-cols-2 gap-1">
+          {SELECTION_TOOLS.map((tool) => (
+            <button
+              key={tool.type}
+              onClick={() => handleToolSelect(tool.type)}
+              className={cn(
+                'flex items-center gap-2 rounded-md p-2 text-xs transition-colors',
+                selectionType === tool.type
+                  ? 'bg-primary text-primary-foreground'
+                  : 'hover:bg-accent text-foreground'
+              )}
+            >
+              <tool.icon className="h-4 w-4" />
+              <span>{tool.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Selection Modes */}
+      <div className="border-b border-border p-3">
+        <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">
+          Mode
+        </h3>
+        <div className="grid grid-cols-2 gap-1">
+          {SELECTION_MODES.map((mode) => (
+            <button
+              key={mode.mode}
+              onClick={() => setSelectionMode(mode.mode)}
+              className={cn(
+                'flex items-center gap-2 rounded-md p-2 text-xs transition-colors',
+                selectionMode === mode.mode
+                  ? 'bg-primary text-primary-foreground'
+                  : 'hover:bg-accent text-foreground'
+              )}
+            >
+              <mode.icon className="h-3 w-3" />
+              <span>{mode.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Selection Parameters */}
+      <div className="border-b border-border p-3 space-y-3">
+        <h3 className="text-xs font-semibold text-muted-foreground uppercase">
+          Parameters
+        </h3>
+
+        {/* Feather */}
+        <div className="space-y-2">
+          <label className="text-xs text-foreground">Feather</label>
+          <input
+            type="range"
+            min="0"
+            max="250"
+            value={feather}
+            onChange={(e) => setFeather(Number(e.target.value))}
+            className="w-full"
+          />
+          <div className="text-xs text-muted-foreground text-center">
+            {feather}px
+          </div>
+        </div>
+
+        {/* Tolerance (for magic wand) */}
+        {selectionType === 'magic-wand' && (
+          <div className="space-y-2">
+            <label className="text-xs text-foreground">Tolerance</label>
+            <input
+              type="range"
+              min="0"
+              max="255"
+              value={tolerance}
+              onChange={(e) => setTolerance(Number(e.target.value))}
+              className="w-full"
+            />
+            <div className="text-xs text-muted-foreground text-center">
+              {tolerance}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Selection Operations */}
+      <div className="flex-1 overflow-y-auto p-3 space-y-2">
+        <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">
+          Operations
+        </h3>
+
+        <button
+          onClick={handleCopy}
+          disabled={!hasSelection}
+          className={cn(
+            'w-full flex items-center gap-2 rounded-md p-2 text-sm transition-colors',
+            hasSelection
+              ? 'hover:bg-accent text-foreground'
+              : 'text-muted-foreground cursor-not-allowed'
+          )}
+        >
+          <Copy className="h-4 w-4" />
+          <span>Copy</span>
+          <span className="ml-auto text-xs text-muted-foreground">Ctrl+C</span>
+        </button>
+
+        <button
+          onClick={handleCut}
+          disabled={!hasSelection}
+          className={cn(
+            'w-full flex items-center gap-2 rounded-md p-2 text-sm transition-colors',
+            hasSelection
+              ? 'hover:bg-accent text-foreground'
+              : 'text-muted-foreground cursor-not-allowed'
+          )}
+        >
+          <Scissors className="h-4 w-4" />
+          <span>Cut</span>
+          <span className="ml-auto text-xs text-muted-foreground">Ctrl+X</span>
+        </button>
+
+        <button
+          onClick={handlePaste}
+          disabled={!copiedCanvas}
+          className={cn(
+            'w-full flex items-center gap-2 rounded-md p-2 text-sm transition-colors',
+            copiedCanvas
+              ? 'hover:bg-accent text-foreground'
+              : 'text-muted-foreground cursor-not-allowed'
+          )}
+        >
+          <Clipboard className="h-4 w-4" />
+          <span>Paste</span>
+          <span className="ml-auto text-xs text-muted-foreground">Ctrl+V</span>
+        </button>
+
+        <button
+          onClick={handleDelete}
+          disabled={!hasSelection}
+          className={cn(
+            'w-full flex items-center gap-2 rounded-md p-2 text-sm transition-colors',
+            hasSelection
+              ? 'hover:bg-accent text-foreground'
+              : 'text-muted-foreground cursor-not-allowed'
+          )}
+        >
+          <Trash2 className="h-4 w-4" />
+          <span>Delete</span>
+          <span className="ml-auto text-xs text-muted-foreground">Del</span>
+        </button>
+
+        <div className="h-px bg-border my-2" />
+
+        <button
+          onClick={handleFill}
+          disabled={!hasSelection}
+          className={cn(
+            'w-full flex items-center gap-2 rounded-md p-2 text-sm transition-colors',
+            hasSelection
+              ? 'hover:bg-accent text-foreground'
+              : 'text-muted-foreground cursor-not-allowed'
+          )}
+        >
+          <Paintbrush className="h-4 w-4" />
+          <span>Fill Selection</span>
+        </button>
+
+        <button
+          onClick={handleStroke}
+          disabled={!hasSelection}
+          className={cn(
+            'w-full flex items-center gap-2 rounded-md p-2 text-sm transition-colors',
+            hasSelection
+              ? 'hover:bg-accent text-foreground'
+              : 'text-muted-foreground cursor-not-allowed'
+          )}
+        >
+          <Paintbrush className="h-4 w-4" />
+          <span>Stroke Selection</span>
+        </button>
+
+        <div className="h-px bg-border my-2" />
+
+        <button
+          onClick={handleInvert}
+          disabled={!hasSelection}
+          className={cn(
+            'w-full flex items-center gap-2 rounded-md p-2 text-sm transition-colors',
+            hasSelection
+              ? 'hover:bg-accent text-foreground'
+              : 'text-muted-foreground cursor-not-allowed'
+          )}
+        >
+          <FlipVertical className="h-4 w-4" />
+          <span>Invert Selection</span>
+          <span className="ml-auto text-xs text-muted-foreground">
+            Ctrl+Shift+I
+          </span>
+        </button>
+
+        <button
+          onClick={handleClear}
+          disabled={!hasSelection}
+          className={cn(
+            'w-full flex items-center gap-2 rounded-md p-2 text-sm transition-colors',
+            hasSelection
+              ? 'hover:bg-accent text-foreground'
+              : 'text-muted-foreground cursor-not-allowed'
+          )}
+        >
+          <X className="h-4 w-4" />
+          <span>Clear Selection</span>
+          <span className="ml-auto text-xs text-muted-foreground">
+            Ctrl+D
+          </span>
+        </button>
+      </div>
+
+      {!hasSelection && (
+        <div className="p-3 border-t border-border">
+          <p className="text-xs text-muted-foreground text-center">
+            Use selection tools to create a selection
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}