# CanvasControls

Group: Canvas

Floating zoom toolbar: zoom out, percentage, zoom in, **Fit map to view** — plus any extra icon buttons.
- Provide `zoom` (1 = fitted) and the handlers; pass `extra` for host-specific buttons.
- **Fit map to view** (corner-frame icon) resets zoom and pan so the whole current layer is in view. It is not full screen — never use maximize arrows here; those mean *expand* (e.g. the MCP card's Expand). Pass `fitted` while nothing has moved and it disables itself — `VisualMap` does this for you.
- `onResetLayout` adds *Reset layout* (↶). Pass it only while the current layer has moved ideas — `VisualMap` does this for you.
- Keyboard: ⌘+ / ⌘− zoom; ⌘0 fits the map to view.


## Props

```ts
export interface CanvasControlsProps { zoom?: number; onZoomIn?: () => void; onZoomOut?: () => void; /** Fit map to view: reset zoom and pan so the whole layer shows (corner-frame icon — not full screen). */ onFit?: () => void; /** Already fitted: Fit is disabled. */ fitted?: boolean; /** Shown only when passed — e.g. after ideas were moved. */ onResetLayout?: () => void; extra?: ReactNode }
```

## Use

```ts
import { CanvasControls } from '@visualli/design-system/components';
```