# Node

Group: Canvas

One idea on the canvas: an organic blob in a topic color with up to three depth rings.
- Provide `label` (≤ 6 words) and `color` (a topic name or CSS color). `level` picks the outline shape; `rings` = levels beneath (0–3); `size` `root`, `node` or `mini`.
- Interaction: `onOpen` (mouse: click a ringed node to step inside) or `onPress` (replaces it as the click/tap action — touch uses it for "first tap previews, second tap opens", and it makes any node a button with `aria-pressed` = `selected`). Without any of these the node is an image, not a control.
- `selected` lifts the node and thickens its outline; `dimmed` spotlights others (60% on touch, 40% in the Focus palette). Never put paragraphs in a node.


## Props

```ts
export interface NodeProps { label: string; color?: NodeColor; level?: number; shape?: number; rings?: 0 | 1 | 2 | 3; size?: 'root' | 'node' | 'mini'; selected?: boolean; dimmed?: boolean;
```

## Use

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