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>
UI Improvements:
- Style scrollbars with primary color accent
- Scrollbar thumb transitions on hover (40% → 60% → 80% opacity)
- Add fill tool options to toolbar (color picker + opacity)
- Support for Firefox with scrollbar-color property
Transparency Support:
- Set default canvas background to transparent
- First layer now transparent instead of white fill
- Enables creating images with transparency
- Checkerboard pattern shows through transparent areas
- Proper PNG export support with alpha channel
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Restructure the UI to match professional image editors (Photoshop, Affinity)
with a clean, predictable layout that maximizes canvas space.
Changes:
- **Top Bar** (48px): Unified horizontal bar with three sections:
* Left: Title + File Menu
* Center: Context-sensitive tool options
* Right: Undo/Redo, Zoom controls, New Layer button
- **Left Side** (64px): Single tool palette (unchanged)
- **Center**: Maximized canvas workspace (flex-1)
- **Right Side** (280px): Unified panel dock with hybrid organization:
* Always visible: Layers Panel (400px) + Color Panel (200px)
* Tabbed sections: Adjustments, Tools, History
* Collapsible panels within tabs for efficient space usage
New Components:
- `components/editor/tool-options.tsx`: Horizontal tool options bar
* Shows context-sensitive options for active tool
* Drawing tools: color, size, opacity, hardness, flow
* Shape tool: shape type selector
* Selection tool: mode selector (rectangular, elliptical, lasso, magic wand)
- `components/editor/panel-dock.tsx`: Unified right panel system
* Fixed 280px width (compact professional standard)
* Tab system for organizing feature panels
* Collapsible sections within tabs
* Hybrid approach: essential panels always visible, others tabbed
Removed from Left Sidebar:
- ToolSettings panel (now in top bar)
- ColorPanel (now in panel dock)
- FilterPanel (now in panel dock)
- SelectionPanel (now in panel dock)
- TransformPanel (now in panel dock)
- ShapePanel (now in panel dock)
Benefits:
- Reclaimed ~400px horizontal space for canvas
- Predictable, stable UI (no panels appearing/disappearing)
- Professional, industry-standard layout
- All features accessible in organized panel dock
- Cleaner, less cluttered interface
Build Status: ✓ Successful (1266ms)
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
