feat: restructure layout to professional image editor standard

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>

components/editor/editor-layout.tsx

@@ -4,15 +4,10 @@ import { useEffect } from 'react';
 import { useCanvasStore, useLayerStore } from '@/store';
 import { useHistoryStore } from '@/store/history-store';
 import { CanvasWithTools } from '@/components/canvas/canvas-with-tools';
-import { LayersPanel } from '@/components/layers/layers-panel';
-import { HistoryPanel } from './history-panel';
 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 { TransformPanel } from '@/components/transform';
-import { ShapePanel } from '@/components/shapes';
+import { ToolOptions } from './tool-options';
+import { PanelDock } from './panel-dock';
+import { ToolPalette } from '@/components/tools';
 import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
 import { useFileOperations } from '@/hooks/use-file-operations';
 import { useDragDrop } from '@/hooks/use-drag-drop';
@@ -59,8 +54,8 @@ export function EditorLayout() {
 
   const handleZoomToFit = () => {
     // Approximate viewport size (accounting for panels)
-    const viewportWidth = window.innerWidth - 320; // Subtract sidebar width
-    const viewportHeight = window.innerHeight - 60; // Subtract toolbar height
+    const viewportWidth = window.innerWidth - 344; // Subtract sidebar width (64px tools + 280px panels)
+    const viewportHeight = window.innerHeight - 48; // Subtract toolbar height
     zoomToFit(viewportWidth, viewportHeight);
   };
 
@@ -86,17 +81,24 @@ export function EditorLayout() {
         </div>
       )}
 
-      {/* Toolbar */}
-      <div className="flex h-14 items-center justify-between border-b border-border bg-card px-4">
-        <div className="flex items-center gap-4">
+      {/* Top Bar */}
+      <div className="flex h-12 items-center border-b border-border bg-card">
+        {/* Left: Title and File Menu */}
+        <div className="flex items-center gap-4 px-4 border-r border-border">
           <h1 className="text-lg font-semibold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
             Paint UI
           </h1>
           <FileMenu />
         </div>
 
-        {/* History controls */}
-        <div className="flex items-center gap-1 border-r border-border pr-2">
+        {/* Center: Tool Options (context-sensitive) */}
+        <div className="flex-1 flex items-center justify-center">
+          <ToolOptions />
+        </div>
+
+        {/* Right: Controls */}
+        <div className="flex items-center gap-2 px-4 border-l border-border">
+          {/* History controls */}
           <button
             onClick={undo}
             disabled={!canUndo()}
@@ -124,10 +126,10 @@ export function EditorLayout() {
           >
             <Redo className="h-4 w-4" />
           </button>
-        </div>
 
-        {/* Zoom controls */}
-        <div className="flex items-center gap-2">
+          <div className="w-px h-6 bg-border mx-1" />
+
+          {/* Zoom controls */}
           <button
             onClick={zoomOut}
             className="rounded-md p-2 hover:bg-accent transition-colors"
@@ -155,12 +157,13 @@ export function EditorLayout() {
           >
             <Maximize className="h-4 w-4" />
           </button>
-        </div>
 
-        <div className="flex items-center gap-2">
+          <div className="w-px h-6 bg-border mx-1" />
+
+          {/* New Layer */}
           <button
             onClick={handleNewLayer}
-            className="flex items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            className="flex items-center gap-2 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
           >
             <Plus className="h-4 w-4" />
             New Layer
@@ -170,41 +173,16 @@ export function EditorLayout() {
 
       {/* Main content */}
       <div className="flex flex-1 overflow-hidden">
-        {/* Left sidebar - Tool Palette */}
+        {/* Left: Tool Palette */}
         <ToolPalette />
 
-        {/* Tool Settings */}
-        <ToolSettings />
-
-        {/* Color Panel */}
-        <ColorPanel />
-
-        {/* Filter Panel */}
-        <FilterPanel />
-
-        {/* Selection Panel */}
-        <SelectionPanel />
-
-        {/* Transform Panel */}
-        <TransformPanel />
-
-        {/* Shape Panel */}
-        <ShapePanel />
-
-        {/* Canvas area */}
+        {/* Center: Canvas */}
         <div className="flex-1">
           <CanvasWithTools />
         </div>
 
-        {/* Right sidebar */}
-        <div className="w-80 border-l border-border flex flex-col">
-          <div className="flex-1 overflow-hidden">
-            <LayersPanel />
-          </div>
-          <div className="h-64 border-t border-border">
-            <HistoryPanel />
-          </div>
-        </div>
+        {/* Right: Panel Dock */}
+        <PanelDock />
       </div>
     </div>
   );