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/canvas/canvas-with-tools.tsx

@@ -18,6 +18,7 @@ import type { BaseTool } from '@/tools';
 import type { PointerState } from '@/types';
 import { cn } from '@/lib/utils';
 import { OnCanvasTextEditor } from './on-canvas-text-editor';
+import { MiniMap } from './mini-map';
 import {
   Scissors,
   Copy,
@@ -31,7 +32,11 @@ import {
   FlipVertical,
 } from 'lucide-react';
 
-export function CanvasWithTools() {
+interface CanvasWithToolsProps {
+  onCursorMove?: (pos: { x: number; y: number } | undefined) => void;
+}
+
+export function CanvasWithTools({ onCursorMove }: CanvasWithToolsProps = {}) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const drawCommandRef = useRef<DrawCommand | null>(null);
@@ -379,6 +384,9 @@ export function CanvasWithTools() {
     const screenY = e.clientY - rect.top;
     const canvasPos = screenToCanvas(screenX, screenY, rect.width, rect.height);
 
+    // Report cursor position to parent
+    onCursorMove?.(canvasPos);
+
     // Panning
     if (isPanning) {
       const { setPanOffset } = useCanvasStore.getState();
@@ -444,6 +452,12 @@ export function CanvasWithTools() {
     }
   };
 
+  // Handle pointer leave
+  const handlePointerLeave = (e: React.PointerEvent) => {
+    handlePointerUp(e);
+    onCursorMove?.(undefined);
+  };
+
   // Handle context menu
   const handleContextMenu = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -605,7 +619,7 @@ export function CanvasWithTools() {
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
-      onPointerLeave={handlePointerUp}
+      onPointerLeave={handlePointerLeave}
       onContextMenu={handleContextMenu}
     >
       <canvas
@@ -615,6 +629,9 @@ export function CanvasWithTools() {
 
       {/* On-canvas text editor */}
       <OnCanvasTextEditor />
+
+      {/* Mini-map navigator */}
+      <MiniMap />
     </div>
   );
 }