# Floating tool palette > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A floating, draggable tool palette for a fictional vector sketch app ("Plotter") on a landscape tablet. The palette is a 56px-wide dark column with a grip handle, five 44px tool buttons, a colour swatch button that opens a popover with six swatches and a stroke-width slider, and undo/clear actions. The active tool is marked by a sky-blue rounded square that slides between buttons rather than each button lighting up separately. Behind it is a full-bleed canvas with a 24px dot grid that you can draw on with pen, marker (translucent, 3× width), eraser (destination-out, 4× width) and a straight-line tool; a small file chip sits top-left and a mono status line bottom-right reports tool, size and zoom. The palette can be dragged anywhere by its grip and nudged with arrow keys. ## Reference behaviour 1. Initial state: canvas shows a blue bezier stroke and a translucent dark marker line (seeded so the first frame is not empty). Palette at `left: 28px; top: 150px` with Pen active (indicator behind the second button). Status reads "tool Pen · size 3 · zoom 100%". 2. Draw on the canvas with the pointer: a round-capped stroke follows the pointer in the current colour and width. Pen: `w` px, opaque. Marker: `3w` px at 40% alpha. Eraser: `4w` px, `destination-out`. Line: a rubber-band straight line from the down point that commits on release (the canvas is restored from a snapshot on every move). 3. Click a tool (or press V / P / M / E / L): its `aria-pressed` becomes true, the indicator slides to it (`translateY(index × 46px)`) over 260ms, the icon turns white, the status updates, and the cursor becomes crosshair (default for Select). Select does not draw. 4. Click the swatch button: a 200px popover appears 12px to the right of the palette, sliding in 6px and scaling from .98 over 260ms with a 10px notch pointing at the button; focus moves to the current swatch. Choose a swatch: the swatch button's dot changes colour and the pressed ring moves. Drag the range: the label reads "n px" and the status "size n" update live. 5. Click outside, press Escape, or click the swatch button again: the popover closes; `aria-expanded` returns to false. 6. Press Z or click Undo: the last stroke is removed (up to 20 steps). Clear empties the canvas (undoable). 7. Drag the grip: the palette follows the pointer (offset preserved), its shadow deepens, and it is clamped 8px inside the viewport. Release: shadow returns. With the grip focused, arrow keys move the palette 16px per press. 8. Hover any tool: icon brightens to `--ink` on a `--panel-2` background; the pressed tool keeps the indicator instead. ## Structure ``` 1180 × 820 ┌──────────────────────────────────────────────────────────────────────────────┐ │ (■ Plotter untitled-03.plot) │ chip 36px, 20/20 │ │ │ ┌────┐ │ palette 56px wide │ │ ⋮⋮ │ grip 22px │ left 28, top 150 │ │[ ▲]│ select V ╭────────╮ │ │ │[ ▮]│ pen P ← indicator ╱ ╲ seeded strokes │ │ │[ ▮]│ marker M ╱ ╲ │ │ │[ ▮]│ eraser E ───────────────────────── │ │ │[ ╱]│ line L │ │ │ ── │ │ │ │( ●)│ swatch ──▶ ┌ popover 200px ─────────────┐ │ │ │ ── │ │ COLOUR │ │ │ │[ ↶]│ undo │ ● ● ● ● ● ● (24px) │ │ │ │[ ⌫]│ clear │ Stroke 3 px │ │ │ └────┘ │ ────────●─────────── range │ │ │ └────────────────────────────┘ │ │ tool Pen size 3 zoom 100% │ status, 20/20 └──────────────────────────────────────────────────────────────────────────────┘ dot grid 24px · buttons 44px, gap 2 · indicator 44×44 r10 · palette r14 ``` - `` — absolute, full-bleed, dot grid as a CSS `radial-gradient` background (the grid is not drawn into the bitmap, so erasing never removes it). - `.chip` (file name) and `.status[aria-live=polite]` — absolutely positioned HUD. - `