feat: implement Phase 2 - Core Canvas Engine with layer system

Complete canvas rendering infrastructure and state management:

**Type System (types/)**
- Layer interface with blend modes, opacity, visibility
- Canvas state with zoom, pan, grid, rulers
- Tool types and settings interfaces
- Selection and pointer state types

**State Management (store/)**
- Layer store: CRUD operations, reordering, merging, flattening
- Canvas store: zoom (0.1x-10x), pan, grid, rulers, coordinate conversion
- Tool store: active tool, brush settings (size, opacity, hardness, flow)
- Full Zustand integration with selectors

**Utilities (lib/)**
- Canvas utils: create, clone, resize, load images, draw grid/checkerboard
- General utils: cn, clamp, lerp, distance, snap to grid, debounce, throttle
- Image data handling with error safety

**Components**
- CanvasWrapper: Multi-layer rendering with transformations
  - Checkerboard transparency background
  - Layer compositing with blend modes and opacity
  - Grid overlay support
  - Selection visualization
  - Mouse wheel zoom (Ctrl+scroll)
  - Middle-click or Shift+click panning

- LayersPanel: Interactive layer management
  - Visibility toggle with eye icon
  - Active layer selection
  - Opacity display
  - Delete with confirmation
  - Sorted by z-order

- EditorLayout: Full editor interface
  - Top toolbar with zoom controls (±, fit to screen, percentage)
  - Canvas area with full viewport
  - Right sidebar for layers panel
  - "New Layer" button with auto-naming

**Features Implemented**
✓ Multi-layer canvas with proper z-ordering
✓ Layer visibility, opacity, blend modes
✓ Zoom: 10%-1000% with Ctrl+wheel
✓ Pan: Middle-click or Shift+drag
✓ Grid overlay (toggleable)
✓ Selection rendering
✓ Background color support
✓ Create/delete/duplicate layers
✓ Layer merging and flattening

**Performance**
- Dev server: 451ms startup
- Efficient canvas rendering with transformations
- Debounced/throttled event handlers ready
- Memory-safe image data operations

Ready for Phase 3: History & Undo System

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

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

app/globals.css

@@ -1,14 +1,7 @@
 @import "tailwindcss";
 
 /* Source directives - scan components for Tailwind classes */
-@source "../components/editor/*.{js,ts,jsx,tsx}";
-@source "../components/canvas/*.{js,ts,jsx,tsx}";
-@source "../components/tools/*.{js,ts,jsx,tsx}";
-@source "../components/layers/*.{js,ts,jsx,tsx}";
-@source "../components/effects/*.{js,ts,jsx,tsx}";
-@source "../components/colors/*.{js,ts,jsx,tsx}";
-@source "../components/modals/*.{js,ts,jsx,tsx}";
-@source "../components/ui/*.{js,ts,jsx,tsx}";
+@source "../components/**/*.{js,ts,jsx,tsx}";
 @source "*.{js,ts,jsx,tsx}";
 
 /* Custom dark mode variant */

app/page.tsx

@@ -1,45 +1,5 @@
+import { EditorLayout } from '@/components/editor/editor-layout';
+
 export default function HomePage() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-background p-8">
-      <div className="max-w-2xl space-y-6 text-center">
-        <h1 className="text-6xl font-bold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
-          Paint UI
-        </h1>
-        <p className="text-xl text-muted-foreground">
-          Modern browser-based image editor
-        </p>
-        <div className="grid grid-cols-2 gap-4 pt-8 text-left">
-          <div className="space-y-2 rounded-lg border border-border bg-card p-4">
-            <h3 className="font-semibold text-card-foreground">Phase 1: Foundation</h3>
-            <ul className="space-y-1 text-sm text-muted-foreground">
-              <li className="flex items-center gap-2">
-                <span className="text-success">✓</span> Next.js 16 setup
-              </li>
-              <li className="flex items-center gap-2">
-                <span className="text-success">✓</span> Tailwind CSS 4
-              </li>
-              <li className="flex items-center gap-2">
-                <span className="text-success">✓</span> TypeScript config
-              </li>
-              <li className="flex items-center gap-2">
-                <span className="text-success">✓</span> Theme system
-              </li>
-            </ul>
-          </div>
-          <div className="space-y-2 rounded-lg border border-border bg-card p-4">
-            <h3 className="font-semibold text-card-foreground">Coming Soon</h3>
-            <ul className="space-y-1 text-sm text-muted-foreground">
-              <li>Canvas rendering</li>
-              <li>Layer system</li>
-              <li>Drawing tools</li>
-              <li>Effects & filters</li>
-            </ul>
-          </div>
-        </div>
-        <p className="pt-4 text-sm text-muted-foreground">
-          Built with Next.js 16 • React 19 • Tailwind CSS 4
-        </p>
-      </div>
-    </main>
-  );
+  return <EditorLayout />;
 }