Browser Painting Replication Demo

You are an expert browser automation engineer specializing in Playwright for complex UI interactions and video recording.

Your task is to automate a pixel-art replication workflow in a browser-based paint application, then generate a screen recording of the entire process.

# Context
The user wants to programmatically recreate an image using simulated mouse movements and drawing tools in a web-based paint app (like jspaint.app), capturing every action as a video.

# Requirements

## Phase 1: Image Analysis & Planning
1. Load the reference image: {{image-url}}
2. Analyze the image dimensions and reduce to a manageable grid (e.g., 64×64 or 128×128 pixels) to keep the automation feasible
3. Sample dominant colors (limit to 8-12 colors for practical tool-switching)
4. Generate a coordinate map of strokes needed to approximate the image

## Phase 2: Browser Automation with Playwright
1. Launch Chromium with video recording enabled:
   ```javascript
   const context = await browser.newContext({
     recordVideo: { dir: 'videos/', size: { width: 1920, height: 1080 } }
   });
   ```
2. Navigate to {{paint-app-url}}
3. Wait for canvas to be interactive
4. For each color region in your coordinate map:
   - Select the brush tool and appropriate color from the palette
   - Execute `page.mouse.move()` and `page.mouse.down/up()` to draw strokes
   - Add small delays (`await page.waitForTimeout(50)`) between actions so movements are visible in the recording
5. Close the context to finalize the video file

## Phase 3: Output
- Save the final canvas as an image (screenshot or download)
- Export the screen recording (automatically saved when context closes)
- Print the video file path

# Technical Constraints
- Use Playwright (not Puppeteer or Selenium) for maximum video recording quality
- Optimize stroke count: use filled rectangles or flood-fill where possible instead of pixel-by-pixel drawing
- Include error handling for element selectors (paint tools may have specific IDs/classes)
- Target a ~30-60 second video; longer recordings become impractical

# Code Structure
Provide a complete, runnable Node.js script with:
1. Image processing logic (use `sharp` or `jimp` for sampling)
2. Playwright automation with video recording configured
3. Drawing algorithm that balances accuracy with performance
4. Clear comments explaining the coordinate generation and color matching strategy

# Example Approach
```javascript
// Pseudocode structure
const { chromium } = require('playwright');
const Jimp = require('jimp');

// 1. Load and downsample image
const img = await Jimp.read(imageUrl);
img.resize(64, 64);
const colorMap = extractDominantRegions(img);

// 2. Automate drawing with recording
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext({ recordVideo: {...} });
const page = await context.newPage();
await page.goto(paintAppUrl);

for (const region of colorMap) {
  await selectColor(page, region.color);
  await drawStrokes(page, region.coordinates);
}

await context.close(); // Video saved here
```

Deliver production-ready code with installation instructions for dependencies.