TITLE: Pixel Studio — A 32×32 Sprite Editor That Actually Works

PROMPT: Build a single-file pixel-art editor on a deep ink ground #1a1c2c with panel #22263c, hairline #313752, dim label #6f7a9c, and the classic 16-colour pixel palette led by #ef7d57 orange, #38b764 green, #41a6f6 blue, #f4f4f4 paper and #1a1c2c ink. Three-column studio grid (76px tool rail, flexible centre board, 246px right sidebar) with a faint CRT scanline overlay via repeating-linear-gradient at 2.2% white and two soft radial glows. The rail holds six square SVG-icon buttons — pencil, eraser, flood fill, eyedropper, undo, redo — each with a tiny corner keycap letter, an orange active fill and a protruding 3px accent tab; hover lifts by 2px. The centre shows a Pixel Studio headline, a legend readout, and a checkerboard board sized min(100%, 32px × zoom) with aspect-ratio 1; the canvas inside is DPR-scaled (canvas.width = cssW × devicePixelRatio, ctx.setTransform) but drawn from a 32×32 offscreen buffer with imageSmoothingEnabled=false and image-rendering:pixelated so pixels stay razor sharp. Rendering is a dirty-gated rAF loop: art lives in one Uint8ClampedArray of RGBA bytes, copied into an ImageData and blitted up each frame; faint 1px grid lines appear above 8px cells; painted pixels fire a short white expanding square "pop" ring; the hovered cell gets a blue crosshair and outline, and the keyboard cursor gets an orange outline. A status bar underneath carries position, painted-pixel count, undo depth, a zoom stepper (6/8/10/12/14/16 px cells) and a clear button. The sidebar shows a 16-swatch grid plus a native colour input, and live 1× (32px) and 3× (96px) previews of the sprite. Undo is a stack of 60 full-buffer snapshots; undo/redo slide the canvas 7px on the X axis. Tools: pencil paints with Bresenham interpolation across drag, eraser clears alpha, flood fill is a stack-based 4-neighbour BFS comparing packed Uint32 pixel words, eyedropper reads the pixel under the cursor. Right-click or Shift erases, arrow keys move the cursor, Space/Enter paints, P/E/F/G pick tools, U/Y and Ctrl+Z/Ctrl+Shift+Z handle history. Below 940px the rail becomes a horizontal icon strip and the sidebar wraps beneath the board.

DESCRIPTION: A nostalgic but genuinely usable pixel editor that treats 32×32 as a canvas for real work. The mood is a late-80s paint program reimagined by a modern design studio: deep indigo panels, one hot orange accent, monospace micro-labels with generous letter-spacing, and a subtle scanline veil over everything. The board is the hero — a crisp checkerboard grid where every click pops a satisfying white ring — flanked by a calm tool rail and a palette that reads like a hardware keypad. It is the kind of page you bookmark, open, and then accidentally draw a whole sprite in.

TECHNIQUES:
- Uint8ClampedArray RGBA art buffer + createImageData/putImageData blit, with a Uint32Array view for fast flood-fill comparison
- Offscreen 32×32 buffer drawn up to a DPR-scaled display canvas with imageSmoothingEnabled=false for crisp pixels
- Stack-based 4-neighbour BFS flood fill with a visited guard
- 60-deep undo/redo snapshot stack with a translateX slide animation on restore
- Dirty-gated rAF render loop: only schedules frames while pop rings are alive or a change was requested
- Bresenham line interpolation so fast drags never leave gaps
- Canvas-drawn hover crosshair, cursor outline and expanding pop rings
- ResizeObserver + window resize re-fit with DPR clamp
- Inline SVG icon set (no namespace URL, no external assets), checkerboard via layered linear-gradients, scanline overlay via repeating-linear-gradient
- prefers-reduced-motion disables the undo slide

INTERACTION:
- Click or drag on the grid to paint with the pencil; right-click or Shift-drag erases
- Choose eraser, flood fill (BFS on the matching region) or eyedropper from the rail; P / E / F / G select tools by keyboard
- Pick any of the 16 palette swatches or a custom colour from the native colour input
- Undo and redo with the rail buttons, U / Y, or Ctrl+Z / Ctrl+Shift+Z; the canvas slides back on restore
- Arrow keys move the keyboard cursor, Space or Enter paints at it
- Zoom in and out with the status-bar stepper; Clear wipes the canvas (undoable)
- Hover shows a blue crosshair and cell outline; painting fires a white expanding pop ring; both previews update live