fix: enable text tool pointer events and add tool options

Fixed two critical issues preventing text tool usage:

**Pointer Event Integration:**
- Added text tool to canvas pointer event handler
- Text tool now properly responds to canvas clicks
- Opens text dialog on click with correct position

**Tool Options Bar:**
- Added text tool options section to toolbar
- Font family selection (6 common fonts)
- Font size control (8-500px with number input)
- Color picker with hex input
- Helpful hint: "Click on canvas to add text"
- Options bar now appears when text tool is active

**Changes:**
- components/canvas/canvas-with-tools.tsx:
  - Added dedicated text tool handler before selection tools
  - Handles pointer down event to open text dialog

- components/editor/tool-options.tsx:
  - Imported useTextStore
  - Added isTextTool check
  - Created text tool options UI section
  - Shows font, size, and color controls

Text tool is now fully functional - click the Type icon, then
click anywhere on canvas to open the text editor dialog!

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

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

components/canvas/canvas-with-tools.tsx

@@ -202,6 +202,24 @@ export function CanvasWithTools() {
       return;
     }
 
+    // Text tool
+    if (activeTool === 'text') {
+      const activeLayer = getActiveLayer();
+      if (!activeLayer || !activeLayer.canvas || activeLayer.locked) return;
+
+      const newPointer: PointerState = {
+        isDown: true,
+        x: canvasPos.x,
+        y: canvasPos.y,
+        prevX: canvasPos.x,
+        prevY: canvasPos.y,
+        pressure: e.pressure || 1,
+      };
+
+      tools.text.onPointerDown(newPointer, {} as any, settings);
+      return;
+    }
+
     // Selection tools
     const selectionTools = ['select', 'rectangular-select', 'elliptical-select', 'lasso-select', 'magic-wand'];
     if (e.button === 0 && !e.shiftKey && selectionTools.includes(activeTool)) {