Pixel Art

Build a tiny pixel-art editor: a color palette and a grid canvas you paint by clicking — or dragging — cells. The canvas is just an array of colors (one per pixel), painting writes the selected color into a cell, and drag-to-paint is the same write driven by mouse-enter while the button is held.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A row of color swatches and a grid of pixels.

Examples

pick red, click pixel 12 → cells[12] = red
pick blue, drag across a row → every pixel the pointer enters turns blue

the active swatch is outlined; clicking a pixel with no color selected
still paints the current (default first) color.

Notes

• Canvas is an array of colors. cells[i] is the color of pixel i; render each pixel's background from it.
• One selected color. Clicking a swatch sets current; painting writes current into a cell.
• Drag = paint on enter. Track a painting flag set on mousedown, cleared on mouseup; paint on mouseenter while it's true.
• Out of scope. Undo, eraser as a separate tool (use the background swatch), saving — paint only.