# EditBanner

Group: Editing

The editing bar: top-center of the canvas while editing — what you can add, Undo/Redo, and Done.
- `VisualMap` renders it for you when `editing` is on. Standalone: provide `add` (creatable constructs: **Idea**, **Group**, and future ones), `canUndo`/`canRedo` + handlers, `onDone`.
- During a "choose…" step (`pick`: "Choose the idea to connect *Encoding* to") the tools give way to the instruction, **Done** (`onFinishPick`, when the step needs confirming) and **Cancel**. One pattern for every multi-step edit, on mouse, touch and keyboard.
- `nudge` is the view-mode invitation shown once after someone moves an idea: "Layout saved. Want to edit the content too? **Edit**".
- A pill on `surface` with `shadow-pop`; the *Editing* state dot uses `focus`. Never more than one primary (Done).


## Props

```ts
export interface EditBannerProps { add?: { id: string; label: string; icon: IconName; onSelect: () => void }[]; canUndo?: boolean; canRedo?: boolean; onUndo?: () => void; onRedo?: () => void; onDone?: () => void;
```

## Use

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