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/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>
+  );
+}