## Zoom Canvas (S—167)

A pannable, zoomable canvas with wheel / pinch zoom toward the cursor, drag to pan, and a zoom pill with Fit.

- URL: https://sundaeui.dev/components/zoom-canvas
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/zoom-canvas.json`
- Tags: pinch, viewer, zoom, canvas, diagram, pan

Zoom centres on the pointer like design tools: wheel or trackpad pinch, or the − / + buttons. Drag the background to pan. The percentage pill resets to 100% on click, and Fit frames the content.
Use it for diagrams, floor plans, image review or any content bigger than its frame.

### Usage

```tsx
import { ZoomCanvas } from '@/components/sundae/zoom-canvas'

<ZoomCanvas />
```

### Props

- `children` (`ReactNode`, required): Content to zoom.
- `contentSize` (`{ w: number; h: number }`, required): Natural size of the content.
- `min / max` (`number`, default `0.25 / 4`): Zoom bounds.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Diagrams, maps, design review, image detail.

### When not to use

- Small images: a lightbox is enough.

### Accessibility

- The viewport is focusable: + / − zoom, arrow keys pan, 0 fits.
- Zoom level is announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- + / −: Zoom
- Arrows: Pan
- 0: Fit