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 { ToolOptions } from './tool-options';
-import { ColorPanel } from '@/components/colors';
+import { PanelDock } from './panel-dock';
-import { FilterPanel } from '@/components/filters';
+import { ToolPalette } from '@/components/tools';
-import { SelectionPanel } from '@/components/selection';
-import { TransformPanel } from '@/components/transform';
-import { ShapePanel } from '@/components/shapes';
 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 viewportWidth = window.innerWidth - 344; // Subtract sidebar width (64px tools + 280px panels)
-    const viewportHeight = window.innerHeight - 60; // Subtract toolbar height
+    const viewportHeight = window.innerHeight - 48; // Subtract toolbar height
     zoomToFit(viewportWidth, viewportHeight);
   };
 
@@ -86,17 +81,24 @@ export function EditorLayout() {
         </div>
       )}
 
-      {/* Toolbar */}
+      {/* Top Bar */}
-      <div className="flex h-14 items-center justify-between border-b border-border bg-card px-4">
+      <div className="flex h-12 items-center border-b border-border bg-card">
-        <div className="flex items-center gap-4">
+        {/* 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 */}
+        {/* Center: Tool Options (context-sensitive) */}
-        <div className="flex items-center gap-1 border-r border-border pr-2">
+        <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="w-px h-6 bg-border mx-1" />
-        <div className="flex items-center gap-2">
+
+          {/* 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 */}
+        {/* Center: Canvas */}
-        <ToolSettings />
-
-        {/* Color Panel */}
-        <ColorPanel />
-
-        {/* Filter Panel */}
-        <FilterPanel />
-
-        {/* Selection Panel */}
-        <SelectionPanel />
-
-        {/* Transform Panel */}
-        <TransformPanel />
-
-        {/* Shape Panel */}
-        <ShapePanel />
-
-        {/* Canvas area */}
         <div className="flex-1">
           <CanvasWithTools />
         </div>
 
-        {/* Right sidebar */}
+        {/* Right: Panel Dock */}
-        <div className="w-80 border-l border-border flex flex-col">
+        <PanelDock />
-          <div className="flex-1 overflow-hidden">
-            <LayersPanel />
-          </div>
-          <div className="h-64 border-t border-border">
-            <HistoryPanel />
-          </div>
-        </div>
       </div>
     </div>
   );

components/editor/panel-dock.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { LayersPanel } from '@/components/layers/layers-panel';
+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 { HistoryPanel } from './history-panel';
+
+interface CollapsibleSectionProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+function CollapsibleSection({ title, children, defaultOpen = true }: CollapsibleSectionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border-b border-border">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between p-3 hover:bg-accent/50 transition-colors"
+      >
+        <h3 className="text-sm font-semibold text-card-foreground">{title}</h3>
+        {isOpen ? (
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="h-4 w-4 text-muted-foreground" />
+        )}
+      </button>
+      {isOpen && <div className="pb-2">{children}</div>}
+    </div>
+  );
+}
+
+export function PanelDock() {
+  const [activeTab, setActiveTab] = useState<'adjustments' | 'tools' | 'history'>('adjustments');
+
+  return (
+    <div className="w-[280px] border-l border-border bg-card flex flex-col overflow-hidden">
+      {/* Always visible panels */}
+      <div className="border-b border-border" style={{ height: '400px' }}>
+        <LayersPanel />
+      </div>
+
+      <div className="border-b border-border" style={{ height: '200px' }}>
+        <ColorPanel />
+      </div>
+
+      {/* Tabbed section */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Tab buttons */}
+        <div className="flex border-b border-border">
+          <button
+            onClick={() => setActiveTab('adjustments')}
+            className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === 'adjustments'
+                ? 'bg-background text-foreground border-b-2 border-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+            }`}
+          >
+            Adjustments
+          </button>
+          <button
+            onClick={() => setActiveTab('tools')}
+            className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === 'tools'
+                ? 'bg-background text-foreground border-b-2 border-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+            }`}
+          >
+            Tools
+          </button>
+          <button
+            onClick={() => setActiveTab('history')}
+            className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === 'history'
+                ? 'bg-background text-foreground border-b-2 border-primary'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+            }`}
+          >
+            History
+          </button>
+        </div>
+
+        {/* Tab content */}
+        <div className="flex-1 overflow-y-auto">
+          {activeTab === 'adjustments' && (
+            <div>
+              <CollapsibleSection title="Filters">
+                <FilterPanel />
+              </CollapsibleSection>
+              <CollapsibleSection title="Selection">
+                <SelectionPanel />
+              </CollapsibleSection>
+              <CollapsibleSection title="Transform">
+                <TransformPanel />
+              </CollapsibleSection>
+            </div>
+          )}
+
+          {activeTab === 'tools' && (
+            <div>
+              <CollapsibleSection title="Shape Settings">
+                <ShapePanel />
+              </CollapsibleSection>
+            </div>
+          )}
+
+          {activeTab === 'history' && (
+            <div className="h-full">
+              <HistoryPanel />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

components/editor/tool-options.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useToolStore } from '@/store';
+import { useShapeStore } from '@/store/shape-store';
+import { useSelectionStore } from '@/store/selection-store';
+
+export function ToolOptions() {
+  const { activeTool, settings, setSize, setOpacity, setHardness, setColor, setFlow } = useToolStore();
+  const { settings: shapeSettings, setShapeType } = useShapeStore();
+  const { selectionType, setSelectionType } = useSelectionStore();
+
+  // Drawing tools: brush, pencil, eraser
+  const isDrawingTool = ['brush', 'eraser', 'pencil'].includes(activeTool);
+  const showHardness = ['brush'].includes(activeTool);
+  const showColor = ['brush', 'pencil', 'fill'].includes(activeTool);
+  const showFlow = ['brush'].includes(activeTool);
+
+  // Shape tool
+  const isShapeTool = activeTool === 'shape';
+
+  // Selection tool
+  const isSelectionTool = activeTool === 'select';
+
+  // Don't show options bar if no options available
+  if (!isDrawingTool && !isShapeTool && !isSelectionTool) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-6 px-4 flex-1">
+      {/* Drawing Tools Options */}
+      {isDrawingTool && (
+        <>
+          {showColor && (
+            <div className="flex items-center gap-2">
+              <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
+                Color:
+              </label>
+              <input
+                type="color"
+                value={settings.color}
+                onChange={(e) => setColor(e.target.value)}
+                className="h-8 w-16 rounded border border-border cursor-pointer"
+              />
+              <input
+                type="text"
+                value={settings.color}
+                onChange={(e) => setColor(e.target.value)}
+                className="w-24 px-2 py-1 text-xs rounded border border-border bg-background text-foreground"
+              />
+            </div>
+          )}
+
+          <div className="flex items-center gap-2">
+            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
+              Size:
+            </label>
+            <input
+              type="range"
+              min="1"
+              max="200"
+              value={settings.size}
+              onChange={(e) => setSize(Number(e.target.value))}
+              className="w-32"
+            />
+            <span className="text-sm text-muted-foreground w-12">
+              {settings.size}px
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
+              Opacity:
+            </label>
+            <input
+              type="range"
+              min="0"
+              max="100"
+              value={settings.opacity * 100}
+              onChange={(e) => setOpacity(Number(e.target.value) / 100)}
+              className="w-32"
+            />
+            <span className="text-sm text-muted-foreground w-10">
+              {Math.round(settings.opacity * 100)}%
+            </span>
+          </div>
+
+          {showHardness && (
+            <div className="flex items-center gap-2">
+              <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
+                Hardness:
+              </label>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={settings.hardness * 100}
+                onChange={(e) => setHardness(Number(e.target.value) / 100)}
+                className="w-32"
+              />
+              <span className="text-sm text-muted-foreground w-10">
+                {Math.round(settings.hardness * 100)}%
+              </span>
+            </div>
+          )}
+
+          {showFlow && (
+            <div className="flex items-center gap-2">
+              <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
+                Flow:
+              </label>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                value={settings.flow * 100}
+                onChange={(e) => setFlow(Number(e.target.value) / 100)}
+                className="w-32"
+              />
+              <span className="text-sm text-muted-foreground w-10">
+                {Math.round(settings.flow * 100)}%
+              </span>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Shape Tool Options */}
+      {isShapeTool && (
+        <div className="flex items-center gap-2">
+          <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
+            Shape:
+          </label>
+          <select
+            value={shapeSettings.type}
+            onChange={(e) => setShapeType(e.target.value as any)}
+            className="px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
+          >
+            <option value="rectangle">Rectangle</option>
+            <option value="ellipse">Ellipse</option>
+            <option value="line">Line</option>
+            <option value="arrow">Arrow</option>
+            <option value="polygon">Polygon</option>
+            <option value="star">Star</option>
+            <option value="triangle">Triangle</option>
+          </select>
+        </div>
+      )}
+
+      {/* Selection Tool Options */}
+      {isSelectionTool && (
+        <div className="flex items-center gap-2">
+          <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
+            Mode:
+          </label>
+          <select
+            value={selectionType}
+            onChange={(e) => setSelectionType(e.target.value as any)}
+            className="px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
+          >
+            <option value="rectangular">Rectangular</option>
+            <option value="elliptical">Elliptical</option>
+            <option value="lasso">Lasso</option>
+            <option value="magic-wand">Magic Wand</option>
+          </select>
+        </div>
+      )}
+    </div>
+  );
+}