# Treemap

A hierarchy by size that you enter like a place: squarified blocks, a camera that moves inside, nested previews, heat and a path back out.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/treemap
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/Treemap.tsx

## Usage

```tsx
"use client";

import { Treemap } from "mizu-ui";

export function Example() {
  return (
    <Treemap
      label="Storage"
      format={(v) => `${v} GB`}
      data={{
        id: "all",
        label: "All",
        children: [
          {
            id: "media",
            label: "Media",
            children: [
              { id: "video", label: "Video", value: 420 },
              { id: "photos", label: "Photos", value: 180 },
            ],
          },
          { id: "backups", label: "Backups", value: 240 },
          { id: "docs", label: "Documents", value: 96 },
        ],
      }}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/treemap
```

## Props

- `label / data`: `string / TreemapNode`. Accessible name and root. Nodes have id, label, value (leaves), children, tone and detail.
- `format`: `(value: number) => string`. Value formatting for blocks, path and readout.
- `path / defaultPath / onPathChange`: `string[]`. Ids from the root's child to the opened node.
- `onSelect`: `(node, path) => void`. A leaf was chosen.
- `heat`: `(node) => number | undefined`. 0–1 intensity mixed into a block, e.g. growth or error rate.
- `height`: `number` (default `440`). Stage height in pixels.
- `squarify(items, box)`: `function`. The layout itself, for custom renderers.

## Keyboard

- ← → ↑ ↓: Move to the neighbouring block
- Enter: Open a block, or choose a leaf
- Backspace Esc: Return to the level above

## Accessibility

Blocks are buttons named with their value, share of the level and contents. Arrow keys move to the nearest block in that direction; Enter opens a branch or chooses a leaf, Backspace returns. The path is a navigation list with the current level marked; openings are announced and focus lands on the largest block inside.

## Motion

Opening a block is a camera move: it grows to fill the stage while its neighbours fly outward and the next level resolves inside it. Returning plays the same path in reverse. Only geometry animates, so text never distorts. Reduced motion changes level instantly.