feat(phase-12): add professional UI polish with status bar, navigator, and shortcuts help

Implements comprehensive quality-of-life improvements for professional editing experience:

**1. Status Bar Component** (`components/editor/status-bar.tsx`):
- Real-time canvas dimensions display (width × height)
- Live zoom percentage indicator
- Dynamic cursor position tracking in canvas coordinates
- FPS counter for performance monitoring
- Memory usage display (when browser supports performance.memory)
- Icons for each metric (Maximize2, ZoomIn, MousePointer, Activity, HardDrive)
- Fixed bottom position with clean UI
- Updates at 60 FPS for smooth cursor tracking
- Memory updates every 2 seconds to reduce overhead

**2. Mini-Map / Navigator** (`components/canvas/mini-map.tsx`):
- Live thumbnail preview of entire canvas
- Renders all visible layers with proper stacking order
- Checkerboard background for transparency visualization
- Interactive viewport indicator (blue rectangle with semi-transparent fill)
- Click or drag to pan viewport to different canvas areas
- Collapsible with expand/minimize toggle button
- Maintains canvas aspect ratio (max 200px)
- Positioned in bottom-right corner as floating overlay
- Zoom percentage display at bottom
- Smart scaling for optimal thumbnail size
- Cursor changes to pointer/grabbing during interaction

**3. Keyboard Shortcuts Help Panel** (`components/editor/shortcuts-help-panel.tsx`):
- Comprehensive list of 40+ keyboard shortcuts
- 7 categories: File, Edit, View, Tools, Layers, Transform, Adjustments, Help
- Real-time search filtering (searches action, category, keys, description)
- Beautiful kbd element styling for shortcut keys
- Modal overlay with backdrop blur
- Opens with `?` or `F1` keys
- Closes with `Esc` key or backdrop click
- Fully responsive with scrollable content
- Organized sections with category headers
- Shows key combinations with proper separators (+)
- Optional descriptions for special shortcuts (e.g., "Hold to pan")
- Footer with helpful hints

**Integration Changes:**

**Canvas Component** (`canvas-with-tools.tsx`):
- Added `onCursorMove` prop callback for cursor position reporting
- Modified `handlePointerMove` to report canvas coordinates
- Created `handlePointerLeave` to clear cursor when leaving canvas
- Integrated MiniMap component as overlay

**Editor Layout** (`editor-layout.tsx`):
- Added cursor position state management
- Integrated StatusBar at bottom of layout
- Added ShortcutsHelpPanel with state management
- Keyboard event handlers for `?` and `F1` to open shortcuts
- Cursor position passed down to CanvasWithTools and up to StatusBar

**Features:**
- Non-intrusive overlays that don't block canvas interaction
- All components optimized for performance
- Responsive design adapts to different screen sizes
- Professional appearance matching app theme
- Smooth animations and transitions
- Real-time updates without lag

**User Experience Improvements:**
- Quick access to all shortcuts via `?` or `F1`
- Always-visible status information in bottom bar
- Easy canvas navigation with mini-map
- Performance monitoring at a glance
- Professional editor feel with polished UI

All features tested and working smoothly with no performance impact.

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

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

components/editor/editor-layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useCanvasStore, useLayerStore } from '@/store';
 import { useHistoryStore } from '@/store/history-store';
 import { CanvasWithTools } from '@/components/canvas/canvas-with-tools';
@@ -8,6 +8,8 @@ import { FileMenu } from './file-menu';
 import { ToolOptions } from './tool-options';
 import { PanelDock } from './panel-dock';
 import { ThemeToggle } from './theme-toggle';
+import { StatusBar } from './status-bar';
+import { ShortcutsHelpPanel } from './shortcuts-help-panel';
 import { ToolPalette } from '@/components/tools';
 import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
 import { useFileOperations } from '@/hooks/use-file-operations';
@@ -22,6 +24,21 @@ export function EditorLayout() {
   const { layers } = useLayerStore();
   const { undo, redo, canUndo, canRedo } = useHistoryStore();
   const { handleDataTransfer } = useFileOperations();
+  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | undefined>();
+  const [showShortcuts, setShowShortcuts] = useState(false);
+
+  // Handle ? and F1 keys for shortcuts panel
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === '?' || e.key === 'F1') {
+        e.preventDefault();
+        setShowShortcuts(true);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
 
   // Enable keyboard shortcuts
   useKeyboardShortcuts();
@@ -184,12 +201,18 @@ export function EditorLayout() {
 
         {/* Center: Canvas */}
         <div className="flex-1">
-          <CanvasWithTools />
+          <CanvasWithTools onCursorMove={setCursorPos} />
         </div>
 
         {/* Right: Panel Dock */}
         <PanelDock />
       </div>
+
+      {/* Status Bar */}
+      <StatusBar cursorX={cursorPos?.x} cursorY={cursorPos?.y} />
+
+      {/* Shortcuts Help Panel */}
+      <ShortcutsHelpPanel isOpen={showShortcuts} onClose={() => setShowShortcuts(false)} />
     </div>
   );
 }