# Glass Board

Quadro em vidro fosco sobre foto, com busca e cartões que arrastam entre colunas. A roupa de vidro do kanban.

- Nome no registry: `glass-board`
- Tipo: componente
- Dependências npm: @air/react-drag-to-select, @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, framer-motion, lucide-react, motion
- Demo: https://ui.visantlabs.com/c/glass-board
- Categorias: conteudo, vidro, fosco, kanban, board, dnd

## Quando usar

- Use quando: Pipeline ou board de tarefas com a foto da marca atrás, em produto com visual próprio
- Evite quando: Ferramenta interna densa, com seleção múltipla: kanban; lista pra ordenar e editar, data-table

## Instalar

```bash
npx shadcn@latest add @visant/glass-board
```

## Usar

```tsx
<GlassBoard />
```

## API

### GlassBoard

Quadro em vidro fosco sobre foto. O arraste é o bloco `kanban`, sem uma linha alterada: aqui só a roupa (`renderCard`, cabeçalho e os `--kanban-*`).

- `initial: GlassBoardRow[]` — Estado inicial. O quadro cuida da lista dali em diante; `onChange` entrega cada mudança.
- `kanban: ComponentType<GlassBoardKanbanProps>` — O `Kanban` do bloco `@visant/kanban`, importado do lugar onde ele foi instalado. Vem por prop porque o bloco cai em `~/components/kanban`, e o alias `@/` muda de projeto para projeto: um import fixo aqui não compilaria em quem usa `src/`.
- `stages: GlassBoardStage[]`
- `actions?: any` — Slots do topo e da barra lateral: o quadro não sabe navegar nem importar nada.
- `addLabel?: string = "Adicionar"`
- `className?: string`
- `clearable?: boolean = false` — Mostra a lixeira que esvazia a coluna; aparece só ao passar por ela.
- `corner?: any` — Canto inferior direito, para o botão de assistente ou equivalente.
- `liftedId?: string` — Cartão que nasce no ar, pra tela dizer "isto arrasta" antes de alguém tocar.
- `newCard?: (stage: string) => GlassBoardCard` — Cria o rascunho de "Adicionar". Sem isto, o botão não aparece.
- `onChange?: (rows: GlassBoardRow[]) => void`
- `rail?: any`
- `searchLabel?: string` — Com rótulo, o quadro ganha o campo de busca.
- `title?: string`