feat(ui/perf): implement loading states, keyboard navigation, and lazy-loaded tools

Add comprehensive UX and performance improvements:

**Loading States & Feedback:**
- Add loading overlay with spinner and custom messages
- Integrate loading states into all file operations (open, save, export)
- Create loading-store.ts for centralized loading state management

**Keyboard Navigation:**
- Expand keyboard shortcuts to include tool selection (1-7)
- Add layer navigation with Arrow Up/Down
- Add layer operations (Ctrl+D duplicate, Delete/Backspace remove)
- Display keyboard shortcuts in tool tooltips
- Enhanced keyboard shortcut system with proper key conflict handling

**Performance - Code Splitting:**
- Implement dynamic tool loader with lazy loading
- Tools load on-demand when first selected
- Preload common tools (pencil, brush, eraser) for instant access
- Add tool caching to prevent redundant loads
- Reduces initial bundle size and improves startup time

**Integration:**
- Add LoadingOverlay to app layout
- Update canvas-with-tools to use lazy-loaded tool instances
- Add keyboard shortcut hints to tool palette UI

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

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

components/tools/tool-palette.tsx

@@ -13,14 +13,14 @@ import {
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
-const tools: { type: ToolType; icon: React.ReactNode; label: string }[] = [
-  { type: 'pencil', icon: <Pencil className="h-5 w-5" />, label: 'Pencil' },
-  { type: 'brush', icon: <Paintbrush className="h-5 w-5" />, label: 'Brush' },
-  { type: 'eraser', icon: <Eraser className="h-5 w-5" />, label: 'Eraser' },
-  { type: 'fill', icon: <PaintBucket className="h-5 w-5" />, label: 'Fill' },
-  { type: 'eyedropper', icon: <Pipette className="h-5 w-5" />, label: 'Eyedropper' },
-  { type: 'text', icon: <Type className="h-5 w-5" />, label: 'Text' },
-  { type: 'select', icon: <MousePointer className="h-5 w-5" />, label: 'Select' },
+const tools: { type: ToolType; icon: React.ReactNode; label: string; shortcut: string }[] = [
+  { type: 'pencil', icon: <Pencil className="h-5 w-5" />, label: 'Pencil', shortcut: '1' },
+  { type: 'brush', icon: <Paintbrush className="h-5 w-5" />, label: 'Brush', shortcut: '2' },
+  { type: 'eraser', icon: <Eraser className="h-5 w-5" />, label: 'Eraser', shortcut: '3' },
+  { type: 'fill', icon: <PaintBucket className="h-5 w-5" />, label: 'Fill', shortcut: '4' },
+  { type: 'eyedropper', icon: <Pipette className="h-5 w-5" />, label: 'Eyedropper', shortcut: '5' },
+  { type: 'text', icon: <Type className="h-5 w-5" />, label: 'Text', shortcut: '6' },
+  { type: 'select', icon: <MousePointer className="h-5 w-5" />, label: 'Select', shortcut: '7' },
 ];
 
 export function ToolPalette() {
@@ -49,9 +49,9 @@ export function ToolPalette() {
                 ? 'bg-primary text-primary-foreground'
                 : 'hover:bg-accent text-muted-foreground hover:text-foreground'
             )}
-            aria-label={tool.label}
+            aria-label={`${tool.label} (${tool.shortcut})`}
             aria-pressed={activeTool === tool.type}
-            title={tool.label}
+            title={`${tool.label} (${tool.shortcut})`}
           >
             {tool.icon}
           </button>