> ## Documentation Index
> Fetch the complete documentation index at: https://docs.asquareportal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Tools

> Every tool on the canvas, from selection to SVG generation.

# Design Tools

Most tools draw one thing and hand control straight back to **Selection** — draw a shape, click away, and the selection tool is already armed for your next move. A tool stays active only when it needs more than one gesture.

## Selection `selection`

The resting state. Click an element to select it, drag to move, drag a corner handle to resize, and drag on empty canvas to marquee-select many at once. Holding Space anywhere turns the cursor into a hand so you can pan the canvas — the same gesture works in the timeline.

## Rectangle `rectangle`

Click and drag on the canvas to draw. Hold Shift while dragging to keep it a perfect square. The moment you release, the shape is selected with its handles ready.

## Ellipse `ellipse`

Same gesture as the rectangle — click and drag. Hold Shift for a perfect circle.

## Line `line`

Click where the line starts, drag to where it ends, release. Hold Shift to lock it to 45° steps.

## Container `container`

The auto-layout box — the beating heart of responsive design here. Draw a container, drop elements inside it, and they lay out themselves: Flow (row/column), Wrap, Align, Justify, Gap and Padding all live in the Properties panel. Resize the container and its children reflow — that's what makes generated designs survive being edited. The layers panel uses the same Columns2 icon, so the object has one identity everywhere.

## Pen `pen`

Click-click-click to place anchor points, drag on a point to pull out bezier handles, double-click to close the path, Enter to commit, Escape to cancel. Every click lands a point you can move later with the direct-selection handles.

## Brush `brush`

Freehand drawing — click and drag a stroke. The stroke is a real editable path, not a flattened image.

## Eraser `eraser`

Scrub across elements to remove them — the stroke deletes whatever it touches.

## Text `text`

Click once and start typing — the box grows with your words. Click and drag instead to draw a fixed-width text box that wraps. Font, size, weight, color, spacing and alignment are all in the Properties panel, and the box stays live as you edit them.

## Generate SVG `svggen`

The AI vector tool. Click and drag a region on the canvas, then describe what you want — a rocket to the moon, a bicycle, a logo mark. The model draws it as grouped, editable vector shapes inside that box, with a pen cursor tracing the linework as it lands. The region stays empty until the SVG streams in.

## Eyedropper `eyedropper`

Pick a color from anywhere on the canvas to reuse it — the fill or stroke adopts the sampled value.