From a9b6ca7578441c5741767e23048058d483f10160 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 21 Nov 2025 16:33:16 +0100
Subject: [PATCH] fix(tools): add modifier key support for advanced brush tools
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TypeScript compilation fixes:
- Added modifier keys (altKey, ctrlKey, shiftKey, metaKey) to PointerState interface
- Updated all PointerState creations in canvas to include modifier keys
- Added 'smudge' and 'dodge' cursor definitions to tool store

Tool integration:
- Added 'clone', 'smudge', 'dodge' to drawing tools array in canvas
- Clone Stamp uses Alt+Click to set source point
- Dodge/Burn uses Alt key to toggle between dodge (lighten) and burn (darken) modes
- Smudge tool benefits from modifier key tracking for future enhancements

All tools now properly receive keyboard modifier state for advanced interactions.
Build verified successful with pnpm build.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/canvas/canvas-with-tools.tsx | 24 ++++++++++++++++++++++--
 store/tool-store.ts                     |  2 ++
 types/canvas.ts                         |  8 ++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/components/canvas/canvas-with-tools.tsx b/components/canvas/canvas-with-tools.tsx
index 2d94db2..a4d4e56 100644
--- a/components/canvas/canvas-with-tools.tsx
+++ b/components/canvas/canvas-with-tools.tsx
@@ -237,6 +237,10 @@ export function CanvasWithTools() {
         prevX: canvasPos.x,
         prevY: canvasPos.y,
         pressure: e.pressure || 1,
+        altKey: e.altKey,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        metaKey: e.metaKey,
       };
 
       setPointer(newPointer);
@@ -259,6 +263,10 @@ export function CanvasWithTools() {
         prevX: canvasPos.x,
         prevY: canvasPos.y,
         pressure: e.pressure || 1,
+        altKey: e.altKey,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        metaKey: e.metaKey,
       };
 
       const textTool = toolsCache.current['text'];
@@ -283,6 +291,10 @@ export function CanvasWithTools() {
         prevX: canvasPos.x,
         prevY: canvasPos.y,
         pressure: e.pressure || 1,
+        altKey: e.altKey,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        metaKey: e.metaKey,
       };
 
       setPointer(newPointer);
@@ -295,7 +307,7 @@ export function CanvasWithTools() {
     }
 
     // Drawing tools
-    if (e.button === 0 && !e.shiftKey && ['pencil', 'brush', 'eraser', 'fill', 'eyedropper', 'shape'].includes(activeTool)) {
+    if (e.button === 0 && !e.shiftKey && ['pencil', 'brush', 'eraser', 'fill', 'eyedropper', 'shape', 'clone', 'smudge', 'dodge'].includes(activeTool)) {
       const activeLayer = getActiveLayer();
       if (!activeLayer || !activeLayer.canvas || activeLayer.locked) return;
 
@@ -306,6 +318,10 @@ export function CanvasWithTools() {
         prevX: canvasPos.x,
         prevY: canvasPos.y,
         pressure: e.pressure || 1,
+        altKey: e.altKey,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        metaKey: e.metaKey,
       };
 
       setPointer(newPointer);
@@ -341,7 +357,7 @@ export function CanvasWithTools() {
     }
 
     // Drawing
-    if (pointer.isDown && ['pencil', 'brush', 'eraser', 'eyedropper', 'shape'].includes(activeTool)) {
+    if (pointer.isDown && ['pencil', 'brush', 'eraser', 'eyedropper', 'shape', 'clone', 'smudge', 'dodge'].includes(activeTool)) {
       const activeLayer = getActiveLayer();
       if (!activeLayer || !activeLayer.canvas) return;
 
@@ -350,6 +366,10 @@ export function CanvasWithTools() {
         x: canvasPos.x,
         y: canvasPos.y,
         pressure: e.pressure || 1,
+        altKey: e.altKey,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        metaKey: e.metaKey,
       };
 
       setPointer(newPointer);
diff --git a/store/tool-store.ts b/store/tool-store.ts
index 5fa7a12..575638c 100644
--- a/store/tool-store.ts
+++ b/store/tool-store.ts
@@ -52,6 +52,8 @@ export const useToolStore = create<ToolStore>()(
           shape: 'crosshair',
           crop: 'crosshair',
           clone: 'crosshair',
+          smudge: 'crosshair',
+          dodge: 'crosshair',
           blur: 'crosshair',
           sharpen: 'crosshair',
         };
diff --git a/types/canvas.ts b/types/canvas.ts
index ec10e8d..10bb679 100644
--- a/types/canvas.ts
+++ b/types/canvas.ts
@@ -55,6 +55,14 @@ export interface PointerState {
   prevY: number;
   /** Pressure (0-1, for stylus) */
   pressure: number;
+  /** Alt key modifier */
+  altKey?: boolean;
+  /** Ctrl key modifier */
+  ctrlKey?: boolean;
+  /** Shift key modifier */
+  shiftKey?: boolean;
+  /** Meta key modifier */
+  metaKey?: boolean;
 }
 
 /**