# G4OS-DS (@g4ai/ds 0.14.0) · referência completa para agentes



Fonte: https://gestao-quatro-ponto-zero.github.io/G4OS-DS/ · regenerado a cada build. Detalhes de cada componente em https://gestao-quatro-ponto-zero.github.io/G4OS-DS/ai/components/<módulo>.md e de cada bloco em https://gestao-quatro-ponto-zero.github.io/G4OS-DS/ai/blocks/<slug>.md.



# G4OS-DS · guia essencial para agentes (v0.14.0)

Leia isto inteiro antes de escrever ou mudar UI num projeto com `@g4ai/ds`. Detalhes ao lado (mesma pasta): `components/<módulo>.md` (props + exemplos), `blocks/<bloco>.md`, `tokens.md`, `manifest.json`. Com o MCP `g4os-ds` ligado, use `plan_screen` (pedido → anatomia, bloco e componentes), `get_component`, `get_block` e `audit`.

Requisitos: React 18.2+ ou 19, Tailwind v4, `@base-ui/react`, `lucide-react` (`npx g4os-ds doctor` confere). No React 18: `{...inertProps(flag)}` em vez de `inert={flag}`, e `forwardRef` nos seus componentes usados como gatilho de Tooltip/Menu; não use `use`, `useActionState`, `useOptimistic` nem `<form action={fn}>` se o app estiver no 18.

## Fluxo de trabalho (sempre nesta ordem)
1. **Anatomia**: decida qual das 9 anatomias a tela é (tabela abaixo). Ela define o que fica fixo e onde vai cada coisa.
2. **Bloco**: procure um bloco parecido (`blocks/<slug>.md`, MCP `plan_screen`/`search`). Achou? Copie `src/blocks/<slug>.tsx` inteiro e troque dados e textos. Só comece do zero se nenhum servir.
3. **Componentes**: para cada necessidade, use a tabela "Qual componente". Confira as props em `components/<módulo>.md` antes de usar: não invente props.
4. **Estados**: carregando (`Skeleton`/`loading`), vazio (`Empty` com ação), vazio por filtro (com "Limpar"), erro (com "Tentar de novo"), ideal.
5. **Verifique e corrija até limpar**: `npx g4os-ds audit src --fix` → `npx g4os-ds audit src` (0 erros, 0 avisos) → `npx tsc --noEmit` → se houver ESLint com `@g4ai/ds/eslint`, `npx eslint src`. Depois confira a tela em 1440 e 390 px, claro e escuro.

## Anatomia → esqueleto
| Tela | Esqueleto | Bloco de referência |
| --- | --- | --- |
| A · Lista | `Page` › `PageHeading` (1 primário em `actions`) › `PageToolbar` (`TableToolbar`/`FilterBar`) › `DataTable`/`DataGrid` › `Pagination` · `BulkBar` na seleção | `erp-invoices`, `crm-contacts`, `ats-jobs` |
| B · Painel | `Page` › `PageHeading` (período em `actions`) › `KpiGrid` de `KpiCard` › `ChartCard` + gráfico › filas de ação | `fin-dashboard`, `saas-dashboard` |
| C · Registro | `Page` › `PageHeading crumbs` (ações do estado) › `Tabs` › `SplitLayout main aside={<PropertyList/>}` · editar em `Drawer` | `crm-deal`, `crm-company`, `erp-order` |
| D · Configurações | `SettingsLayout` (subnavegação) › `SettingsSection` por assunto; coluna estreita com `Page width="narrow"` | `settings-*`, `crm-settings` |
| E · Quadro | `KanbanBoard` + `RecordCard` | `crm-pipeline` |
| F · Mestre-detalhe | lista + painel; no celular `Sheet` | `erp-purchase-requests` |
| G · App de altura total | `AppShell` sem `Page` (chat, arquivos) | `ai-chat` |
| H · Fluxo focado | coluna única, sem casca (login, assistente) | `auth-login`, `onboarding-wizard` |
| I · Público | sem `AppShell` (landing, preços) | `marketing-landing` |

```tsx
// A · Lista (o esqueleto mais pedido)
<Page>
  <PageHeading title="Vagas" description="Vagas abertas e em pausa." actions={<Button onClick={criar}><Plus /> Criar vaga</Button>} />
  <PageToolbar>
    <TableToolbar query={q} onQuery={setQ} shown={filtradas.length} total={vagas.length} noun="vaga" dirty={!!q} onClear={limpar} />
  </PageToolbar>
  <DataTable label="Vagas" rows={pag.rows} columns={[selectionColumn(sel, (v) => v.id, (v) => v.titulo), ...colunas]} rowKey={(v) => v.id}
    loading={carregando} error={erro} empty={<Empty title="Nenhuma vaga com esses filtros" action={<Button variant="ghost" onClick={limpar}>Limpar filtros</Button>} />} />
  <Pagination page={pag.page} pageCount={pag.pageCount} onPage={pag.setPage} total={pag.total} pageSize={pag.pageSize} />
  <BulkBar count={sel.count} noun="vaga" gender="f" onClear={sel.clear}>
    <button type="button" onClick={arquivar}><Archive /> Arquivar</button>{/* filhos do BulkBar são <button> simples: a barra estiliza */}
  </BulkBar>
</Page>
```

## Qual componente
| Preciso de | Use | Nunca |
| --- | --- | --- |
| Texto curto / longo | `TextField` / `TextareaField` (`label` = rótulo visível) | `<input>`, `<textarea>` cru |
| Número, dinheiro, CPF/CNPJ | `NumberField`, `CurrencyField`, `MaskedField` | `type="number"` cru, `toFixed` |
| 1 opção de até ~7 | `Select` · `SegmentedControl` (2–4, troca de visão) · `RadioGroup` | `<select>` cru |
| 1 entidade de lista longa (pessoa, cliente) | `Combobox` (busca) · `NativeSelect` (seletor do sistema, celular) | `<select>` cru |
| Várias opções | `MultiSelect` (dropdown com busca) · `CheckboxGroup` (todas visíveis, ≤ 12) · `ToggleGroup multiple` (dias da semana) | lista de `Checkbox` solta |
| Data / data e hora / hora | `DatePicker` / `DateTimePicker` / `TimePicker` | `<input type="date|time">` |
| Liga/desliga com efeito imediato | `Switch` | `Checkbox` + botão salvar |
| Confirmar ação irreversível | `ConfirmDialog` | `window.confirm` |
| Avisar que terminou | `notify("Vaga criada")` (+ desfazer) | `alert`, "com sucesso", "!" |
| Ação assíncrona | `useOperation` + `OperationButton` + `OperationFeedback` | `setLoading` manual sem feedback |
| Criar/editar sem sair da lista | `Drawer` com `footer` | página nova, `Modal` longo |
| Tabela de dados | `DataTable` (`selectionColumn`, `useSort`, `usePagination`) · `DataGrid` (planilha, totais, colunas fixas) | `<table>` cru |
| Tabela estática (fatura, comparativo) | `Table` › `TableHeader`/`TableBody`/`TableRow`/`TableCell numeric` | `<table>` cru |
| Status numa linha | `StatusLabel`/`Badge` (troca por `Menu`) | `Select` por linha |
| Número de destaque | `KpiCard delta={0.12}` (fração; `goodWhen="down"` p/ custo) em `KpiGrid` | card montado à mão |
| Gráfico | `ChartCard title="Pergunta?"` + `AreaChart`/`BarChart`/`LineChart label=…` | Recharts, cores fixas |
| Aviso na tela | `Callout tone=…` | `div` colorido |
| Vazio / erro de tela | `Empty` / `StateView` | texto solto |
| Bloqueado com motivo | `<Button disabled disabledReason="…">` | `span` com `opacity-50`/`pointer-events-none` |

## Erros que agentes mais cometem (errado → certo)
1. Centralizar só o corpo: `<Page><PageHeading/><div className="mx-auto max-w-4xl">` → `<Page width="narrow"><PageHeading/>…` (`wide` 1200 · `medium` 1024 · `narrow` 896 · `reading` 720). [`page-width-wrapper`]
2. `<h1>` solto → `<PageHeading title description actions />`. [`page-heading`]
3. Botão bloqueado apagado com wrapper (`opacity-50`, `pointer-events-none`, `title`) → `disabled disabledReason="Demonstração: nada é gravado"`. [`disabled-wrapper`]
4. `label` dos campos **já é visível**. Não repita: `<FieldBlock label="Valor"><CurrencyField label="Valor"/>` → só o campo. [`field-double-label`] `<Checkbox label={x}>{x}</Checkbox>` → `<Checkbox label={x} />`. [`redundant-children`]
5. Rótulo escondido só onde não cabe texto (célula, toolbar): `<Checkbox label={"Selecionar " + r.nome} hideLabel />` ou `selectionColumn`. [`cell-control-label`]
6. Lista de checkboxes para "vários" → `CheckboxGroup` (visíveis) ou `MultiSelect` (dropdown, "3 selecionados").
7. `<select>`, `<input type="date">`, `<textarea>`, `<table>` crus → componentes da tabela acima. [`native-select`, `native-date`, `raw-input`, `raw-table`]
8. `Select` dentro de `cell:` → selo + `Menu`. [`select-per-row`]
9. Dois primários em `actions` → um primário, o resto `variant="ghost"` ou `ActionMenu`. [`multiple-primary`]
10. `Drawer` dentro de `Drawer` → passos no mesmo `Drawer` ou `Modal`. [`nested-drawer`]
11. `confirm()`/`alert()` → `ConfirmDialog` + `notify`. [`confirm-alert`]
12. `"R$ " + v.toFixed(2)`, `toLocaleString("pt-BR", {style})`, `toLocaleDateString("en-US")` → `formatCurrency`, `formatPercent`, `formatDate`, `formatRelative`. [`number-format`, `manual-format`]
13. "Salvo com sucesso!", "Save", "Criar Nova Vaga" → "Alterações salvas", "Salvar", "Criar nova vaga". [`copy-tone`, `english-copy`, `title-case`]
14. `bg-white`, `text-gray-500`, `#1a7f37`, `bg-muted` → `bg-surface`, `text-muted`, `text-ok`, `bg-soft`. [`white-black`, `tailwind-palette`, `hex-color`, `shadcn-class`]
15. `DataTable` com dados assíncronos sem `loading`/`error`/`empty` → passe os três. [`data-states`]
16. Props inventadas ou trocadas: `<Empty description>` (é `hint`; `description` é do `StateView`), `<Card title>` (use `Section`/`ChartCard`), `<Badge variant>` (é `tone`). Confira `components/<módulo>.md` antes; `npx tsc --noEmit` pega o resto.
17. Importar de caminhos internos (`@g4ai/ds/src/…`) → sempre `from "@g4ai/ds"`. [`deep-import`]
18. `useEffect(async () => …)` ou efeito que devolve Promise → função interna `async` e chame. [`effect-return`]
19. `space-y-*` com filho `m-0` (`<div className="space-y-6"><p className="m-0">`): no Tailwind v4 o `m-0` vence e os irmãos encostam → `flex flex-col gap-6` no pai. Pilha nova sempre com `gap-*`. [`stack-margin-reset`]

## Regras visuais (resumo de AGENTS.md)
- **Só tokens semânticos**: fundos `bg-page` (área) · `bg-surface` (card, campo) · `bg-popover` (menu, modal) · `bg-soft` (hover, faixa); texto `text-ink` · `text-ink-soft` · `text-muted`; borda `border-line` (`-strong` no hover); ação `bg-primary text-on-primary`; sobre preenchimento forte `text-on-ink`; estados `ok · amber · rose · info` (+`-soft`). Isso garante tema escuro e marca do cliente sem código extra.
- **Texto na escala**: `text-caption` 12 · `text-label` 12.5 · `text-control` 13 · `text-body` 13.5 · `text-input` 14 · `text-section` 18 · `text-title` 25.
- Superfície separa por borda de 1 px, não sombra. Cor sempre com palavra (status = ponto + texto). Número bom não grita.
- Controles só quando há o que controlar: busca ≥ 12 itens, filtros ≥ 8, alternador de visão ≥ 8.
- pt-BR: verbo + objeto nos botões ("Criar vaga"), só a primeira maiúscula, sem exclamação. Toast = particípio + objeto ("Vaga arquivada").
- Acessível: teclado, foco visível, `IconButton label`, gráfico com `label`, cor nunca sozinha. Responsivo 320–1440 px sem rolagem horizontal.
- App: `<html lang="pt-BR" className="ds-app" data-theme="system">`, `themeScript` no `<head>`, `setLinkComponent(Link)` uma vez, `<Toaster />` na raiz. CSS: `@import "tailwindcss"; @import "@g4ai/ds/styles.css";`.

## Antes de concluir
- [ ] `npx g4os-ds audit src`: 0 erros e 0 avisos (use `--fix` antes; `--format json` para ler por regra).
- [ ] `npx tsc --noEmit` verde (e `npx eslint src` se o projeto usa o plugin).
- [ ] Título e corpo no mesmo eixo; um primário por área; rótulos visíveis; nenhum controle cru.
- [ ] Cinco estados implementados; textos em pt-BR; datas e dinheiro pelos formatadores.
- [ ] Conferido em 1440 e 390 px, claro e escuro (`data-theme="dark"` no `<html>`).

## Tokens em uma linha
Fundos `page · surface · popover · soft · rail` · texto `ink · ink-soft · muted` · linhas `line · line-strong` · ação `primary / on-primary` · sobre forte `on-ink` · marca `navy · blue · clay · accent (só preenchimento) · accent-deep (texto) · accent-soft` · estados `ok · amber · rose · info` (+`-soft`) · dados `chart-1…6 · chart-grid`. Raios `rounded-lg` controle, `rounded-xl` card/popup, `rounded-2xl` modal. Tabela completa: `tokens.md`.

## Módulos (530 componentes) → `components/<nome>.md`
- **primitives**: Base visual: Button, IconButton, Badge, Dot, Avatar, EntityMark, Card, Metric, StatGrid, Meter, Empty, Page, Section, Kbd, DsLink/setLinkComponent, tons.
- **overlays**: Modal, ConfirmDialog, Drawer, Popover (Base UI).
- **forms**: Formulário padrão: FieldBlock, FieldGrid, Select, Combobox, Checkbox, Switch, SearchInput, fieldClass.
- **navigation**: Navegação: Sidebar, PageHeading, StickyHeader, Breadcrumb, ContextBar, Tabs, SegmentedControl, ActionMenu, ProductMark.
- **collections**: Coleções: TableToolbar, FacetFilter, DataTable (vira cards no celular), DisplayControls, ListPanel/ListRow, Kanban.
- **feedback**: Feedback de operação: notify/Toaster, Callout, useOperation, OperationButton, OperationFeedback, Skeleton.
- **status**: Status de trabalho (5 estados), StatusLabel, StatusBar, HealthDot, Stepper, NextStep, Timeline.
- **date-picker**: DatePicker (Calendar próprio do DS) e utilitários de data ISO.
- **layout**: Casca: AppShell, ShellBanner, EntityHeader, ReadingColumn, SplitLayout.
- **charts**: Gráficos SVG sem dependência: AreaChart, LineChart, BarChart, Sparkline, BarList, DonutChart, FunnelChart, CalendarHeatmap, ProgressRing.
- **dashboard**: Dashboard: KpiCard, KpiGrid, Delta, ChartCard, GoalMeter, ActivityFeed, Leaderboard, CompareStat.
- **data**: Estado de tabela: useSort, SortHeader, useSelection, selectionColumn, BulkBar, usePagination, Pagination, PropertyList.
- **pipeline**: Pipelines por etapa: StagePath, RecordCard.
- **lib-text**: Texto pt-BR: normalize (busca sem acento), plural, initials.
- **lib-format**: Formatação pt-BR: formatCurrency, formatNumber, formatPercent, formatDelta, formatCompact, formatDate, formatRelative.
- **lib-theme**: Tema e marca: useTheme, applyTheme, themeScript, brandPresets.
- **lib-color**: Utilidades de cor para temas de cliente: contraste WCAG e derivação de uma marca completa (claro + escuro) a partir de 1–2 cores.
- **theme**: ThemeToggle (claro/escuro/sistema).
- **inputs**: Entradas especializadas: TextField, PasswordField, NumberField, CurrencyField, MaskedField (CPF/CNPJ/CEP/telefone), OtpInput, TagInput, Slider, RadioGroup, ChoiceCards, ToggleGroup, FileDropzone, Rating, InlineEdit.
- **charts-advanced**: Gráficos avançados: Treemap, WaterfallChart, ScatterChart, RadarChart, GaugeChart, BulletChart, SankeyChart, HeatmapMatrix, ComboChart, ProportionBar, GanttChart.
- **states**: Estados de tela e avisos: StateView e presets (404, erro, sem acesso, offline), Spinner, LoadingState, Banner, InlineMessage, AlertCard, notifyPromise.
- **overlays-extra**: Tooltip, HoverCard, Menu (submenus, checkbox/radio), ContextMenu, Menubar, Sheet, CommandPalette, Lightbox.
- **disclosure**: Revelação progressiva: Accordion, Collapsible, TreeView, DescriptionToggle.
- **media**: Mídia: Carousel, SlideDeck + helpers de slide, ImageGallery, FileCard, AspectFrame.
- **ai**: Padrões de IA: AskAI, mensagens de chat, SystemMessage, AgentTrace, ToolCallsSection, citações, sugestões.
- **interactive**: Interação e marketing: InputModal, AnimatedModal, LimitDialog, ImageSphere, Hero, FeatureGrid, BeforeAfter, NumberTicker.
- **filters**: Filtros estruturados: FilterBar, filtros ativos, construtor campo/operador/valor, visões salvas, período, estado na URL.
- **search**: Busca: SearchPalette (⌘K global com escopos e prévia) e busca local de tabela ("/").
- **charts-extra**: Gráficos de negócio que as bibliotecas comuns não trazem prontos.
- **charts-shapes**: Formas: pizza/rosca e radial.
- **dates**: Datas e horários. Regras (docs/padroes/datas.md · showcase Formulários › Datas): · valor é ISO só-data ("2026-09-30"); horário "HH:MM"; nada de <input type="date"> · digitar é sempre possível (dd/mm/aaaa, "sexta", "em 3
- **lib-dates**: Datas só-dia em pt-BR, sem dependência.
- **data-grid**: DataGrid: a tabela "de trabalho" do DS.
- **ai-workspace**: Workspace de agente (docs: showcase › IA e interação › Workspace de agente).
- **ai-sessions**: Interface agêntica de sessões (app de trabalho com agente: G4 OS desktop, Codex, T3).
- **brand**: Momentos de marca G4.
- **g4os**: Identidade G4 OS (KV G4 OS): a esfera, o logotipo, o gradiente de marca, o orb e os três pontos da IA.
- **connections**: Conexões e apps: marketplace de integrações, detalhe da conexão, permissões por conta e o "cartão do agente" (o que ele acessa, quem ele aciona, o que entrega).
- **email-compose**: Escrever e-mail (com ou sem IA): remetente, destinatários com busca, assunto, corpo, modelo e envio com agendamento.
- **tags**: Etiquetas coloridas (categoria, tipo, status) no estilo "banco de dados": fundo suave + texto AA, 9 matizes em tokens (--ds-tag-*-bg/-fg), claros e escuros.
- **rich-text**: Editor de texto rico LEVE (contentEditable + comandos do navegador).
- **agent-builder**: Construtor de agente: a "ficha" do agente ao lado da conversa com ele.
- **tasks-ai**: Tarefas propostas pela IA (a partir de uma reunião, documento ou análise).
- **catch-up**: Resumo do que aconteceu enquanto a pessoa esteve fora ("catch up").
- **record-panel**: Painel lateral de registro (estilo banco de dados): abre ao clicar numa linha da tabela sem tirar a pessoa da lista.
- **collab**: Colaboração entre pessoas (não com a IA): conversa do time ao lado de um documento.
- **ai-layout**: Layout de app agêntico (docs: IA e interação › Layout de app agêntico).
- **structure**: Estrutura: Separator, ScrollArea, Label, FieldSet/FieldGroup/FieldSeparator, Item (mídia · título · ações), Table estática, Prose (texto longo).
- **controls**: Controles: Toggle, ButtonGroup, InputGroup (complementos dentro do campo), ColorPicker.
- **navigation-extra**: NavigationMenu: navegação de site/portal com painéis de links.
- **sortable**: SortableList: reordenar por arraste e teclado, com anúncios pt-BR.
- **questionnaire**: Questionnaire: perguntas uma por vez (escolha, múltipla, livre, condicionais).
- **data-view**: useDataView: busca + filtros + ordenação + paginação + seleção de uma coleção num hook só, na ordem certa (filtra → ordena → pagina) e com o estado na URL.
- **attachment**: Attachment (equivalente ao Attachment do shadcn/ui): anexo componível para composer de IA, mensagens, formulários e listas de documentos.
- **command**: Command componível (equivalente ao Command do shadcn/ui, sem cmdk): busca + lista com grupos, ↑ ↓ Home End Enter, vazio, carregando e atalhos.
- **conversation**: Conversa (equivalentes a Bubble, Marker e Message Scroller do shadcn/ui).
- **nav-tree**: Navegação com subitens: tipos NavItem/NavGroup/NavSubItem/NavParentItem da Sidebar, WorkspaceMenu, menu da pessoa, SectionNav (docs/ajuda), flyout do trilho recolhido e helpers navMatches/navActiveDeep.
- **history**: Histórico e progresso no tempo.
- **presence**: Presença: quem está por aqui e onde.
- **lib-office**: Modelo de planilha, documento e apresentação do DS.
- **lib-office-files**: Leitura de arquivos reais do Office no navegador, sem dependências: descompacta o .xlsx/.docx/.pptx (DecompressionStream) e lê o XML (DOMParser).
- **office**: Planilhas, documentos e apresentações na linguagem do DS, escritos em código ou lidos de arquivos reais do Office.
- **meeting**: Reuniões (notas com IA): LiveRecordingIndicator (saúde da gravação por faixa), CallDetectedPrompt, TranscriptView, MomentCitation, AiNotes/AiNotesToggle (autoria pessoa × IA), MeetingCard, MeetingHeader, TemplatePicker.
- **lib-motion**: Movimento com contrato: o tempo só corre quando a pessoa vê, e movimento reduzido mostra o fim da cena (não uma cena congelada no meio).
- **stage**: Camada expressiva (palcos).
- **agent-orb**: Rosto gerado de agente: um personagem pequeno e chapado, desenhado em SVG inline e derivado de forma determinística de uma semente estável (id do agente, nome do subagente, id da sessão).
- **code**: ------------------------------------------------------------------
- **lib-scale**: Escalas de cor para dados de intensidade (mapa de calor, coorte, mapa por UF, pivô, horizon).
- **charts-kit**: Peças compartilhadas pelos gráficos analíticos (coorte, mapa por UF, horizon, dispersão conectada, sankey, cascata): · ScaleLegend: legenda de escala em degraus ou contínua, com hover que destaca a faixa no gráfico · Cha
- **charts-analytics**: Gráficos analíticos de série temporal: · ConnectedScatter: duas medidas ao longo do tempo (CAC × LTV, preço × volume).
- **lib-geo-br**: Contornos das 27 unidades da federação, prontos para SVG.
- **geo**: Mapas coropléticos (região pintada pela intensidade de um número): · ChoroplethMap: mapa em SVG com escala em degraus, legenda que destaca a faixa, tooltip, seleção com zoom e navegação por setas · RankedRegionList: a me
- **lib-pivot**: Motor da tabela dinâmica (pivô).
- **pivot**: Tabela dinâmica (pivô) para análise self-service: · PivotTable: desenha o resultado de `buildPivot()` (src/lib/pivot.ts) com cabeçalho e primeira coluna fixos, grupos recolhíveis, subtotais, total geral e sombreamento op
- **agent-run**: ------------------------------------------------------------------
- **agent-evals**: ------------------------------------------------------------------
- **illustration**: Ilustração em traço e cartão de primeira execução (camada expressiva: onboarding, boas-vindas, estado vazio de destaque — regra 22a).
- **capacity**: Capacidade: quanto de uma cota está ocupado e por quê.
- **agent-tasks**: Tarefas delegadas a agentes: a pessoa escolhe o que sai da mão dela, entrega a um ou mais agentes e acompanha o trabalho ao vivo até o resultado.
- **agent-activity**: Atividade do agente, por fases: um card compacto que mostra O QUE o agente está fazendo agora (lendo, buscando, pensando, escrevendo, revisando), o plano com o passo atual, o contexto da fase e quanto já custou.

## Blocos (154) → `blocks/<slug>.md` (código em `src/blocks/<slug>.tsx`)
- **ATS**: `ats-admission`, `ats-candidate`, `ats-candidates`, `ats-careers`, `ats-dashboard`, `ats-interviews`, `ats-job`, `ats-jobs`, `ats-offers`, `ats-pipeline`, `ats-reports`, `ats-requisitions`
- **Aplicação**: `app-collab-doc`, `app-command-palette`, `app-connection`, `app-error-pages`, `app-file-manager`, `app-filtered-list`, `app-global-search`, `app-help-center`, `app-legal`, `app-marketplace`, `app-meeting-notes`, `app-notifications`, `app-presentation`, `app-record-tracker`, `app-sidebar-submenus`
- **Autenticação**: `auth-forgot-password`, `auth-login`, `auth-otp`, `auth-signup`
- **CRM**: `crm-activities`, `crm-company`, `crm-contact`, `crm-contacts`, `crm-deal`, `crm-leads`, `crm-pipeline`, `crm-quotes`, `crm-sales-dashboard`, `crm-settings`, `crm-team`
- **Comunicação**: `comms-analytics`, `comms-announcement`, `comms-channels`, `comms-compose`, `comms-events`, `comms-home`, `comms-people`, `comms-surveys`
- **Configurações**: `settings-appearance`, `settings-audit-log`, `settings-billing`, `settings-data`, `settings-integrations`, `settings-notifications`, `settings-organization`, `settings-profile`, `settings-roles`, `settings-security`, `settings-storage`, `settings-team`, `settings-webhooks`
- **Contratos**: `clm-approvals`, `clm-contract`, `clm-contracts`, `clm-counterparties`, `clm-dashboard`, `clm-obligations`, `clm-request`, `clm-templates`
- **ERP**: `erp-customers`, `erp-dashboard`, `erp-inventory`, `erp-invoice`, `erp-invoices`, `erp-order`, `erp-orders`, `erp-product`, `erp-products`, `erp-purchase-order`, `erp-purchase-orders`, `erp-purchase-requests`, `erp-receiving`, `erp-shipping`, `erp-stock-movements`, `erp-suppliers`
- **Financeiro**: `fin-bank-accounts`, `fin-budget`, `fin-cashflow`, `fin-dashboard`, `fin-dre`, `fin-payables`, `fin-receivables`, `fin-reconciliation`
- **IA**: `ai-agent-builder`, `ai-agent-connections`, `ai-agent-evals`, `ai-agent-governance`, `ai-agent-run`, `ai-agent-templates`, `ai-agent`, `ai-agents-dashboard`, `ai-agents`, `ai-answer`, `ai-approvals`, `ai-assistant`, `ai-catch-up`, `ai-chat`, `ai-codex`, `ai-compose-email`, `ai-conversation`, `ai-delegate`, `ai-projects`, `ai-runs`, `ai-sessions-artifacts`, `ai-sessions-empty`, `ai-sessions`, `ai-task-proposals`, `ai-trace`, `ai-workspace`
- **Marketing**: `marketing-landing`, `marketing-pricing`, `marketing-stage`
- **Onboarding**: `onboarding-checklist`, `onboarding-intro`, `onboarding-wizard`
- **SaaS**: `saas-analytics`, `saas-billing`, `saas-customer`, `saas-customers`, `saas-dashboard`, `saas-explore`, `saas-integrations`, `saas-journey`, `saas-mrr-bridge`, `saas-plans`, `saas-regions`, `saas-reports`, `saas-retention`, `saas-support`, `saas-unit-economics`, `saas-usage-horizon`, `saas-usage`
- **Serviços**: `srv-billing`, `srv-client`, `srv-clients`, `srv-contracts`, `srv-dashboard`, `srv-invoices`, `srv-quotes`, `srv-schedule`, `srv-work-order`, `srv-work-orders`

## Mais
- Regras completas: `AGENTS.md`. Padrões: `docs/padroes/` (anatomia de página, formulários, tabelas, filtros, superfícies, feedback). Receitas por tipo de app: `docs/receitas/`. Auditoria (todas as regras, com exemplos): `docs/guias/auditoria.md`.
- Vindo do shadcn/ui? Traduza por `shadcn-map.json` (Dialog → `Modal`, Alert Dialog → `ConfirmDialog`, Dropdown Menu → `Menu`/`ActionMenu`, Sonner → `notify`, Input → `TextField`, Field → `FieldBlock`). Tabela: `docs/guias/shadcn-equivalencias.md`.


# Tokens

Três camadas: primitivos `--g4-*` (não use) → semânticos `--ds-*` (trocam por tema e marca) → utilitários Tailwind (`bg-surface`, `text-muted`…).
Em classe use o utilitário; em SVG/`style` use `var(--color-<utilitário>)`.

## Semânticos

| Utilitário (sufixo) | Variável | Claro | Escuro | Uso |
| --- | --- | --- | --- | --- |
| `page` | `--ds-page` | `#ffffff` | `#111113` | fundo da área de trabalho |
| `surface` | `--ds-surface` | `#ffffff` | `#18181b` | card, painel, tabela, campo |
| `popover` | `--ds-popover` | `#ffffff` | `#1f1f23` | menu, popover, modal, toast |
| `soft` | `--ds-soft` | `#f8f8f9` | `#202024` | gelo: hover, cabeçalho de tabela, rodapé |
| `rail` | `--ds-rail` | `#fbfbfc` | `#141416` | sidebar |
| `ink` | `--ds-ink` | `#202124` | `#ececef` | texto principal |
| `ink-soft` | `--ds-ink-soft` | `#484a50` | `#c5c6cc` | texto secundário forte |
| `muted` | `--ds-muted` | `#63666e` | `#8f929a` | metadado, rótulo, placeholder (AA) |
| `line` | `--ds-line` | `#e9eaed` | `#2a2a2f` | toda borda e divisória |
| `line-strong` | `--ds-line-strong` | `#d2d4da` | `#3b3c43` | hover de card, borda de checkbox |
| `on-ink` | `--ds-on-ink` | `#ffffff` | `#121214` | texto sobre preenchimento forte (ink, rose, ok…) |
| `primary` | `--ds-primary` | `#202124` | `#ececef` |  |
| `on-primary` | `--ds-on-primary` | `#ffffff` | `#121214` | Enviar do compositor: navy da G4 no claro, prata no escuro. Marca de cliente usa o primary. |
| `send` | `--ds-send` | `#001f35` | `#f5f4f3` |  |
| `on-send` | `--ds-on-send` | `#f5f4f3` | `#001f35` | Momentos de marca: capa, login, onboarding, conquista. Não é cor de tela. |
| `brand` | `--ds-brand` | `#001f35` | `#0a2236` |  |
| `on-brand` | `--ds-on-brand` | `#f5f4f3` | `#f5f4f3` |  |
| `brand-accent` | `--ds-brand-accent` | `#b9915b` | `#c9a46f` | Marcador do item ativo na navegação (gesto de marca discreto). |
| `nav-marker` | `--ds-nav-marker` | `#b9915b` | `#c9a46f` | Marca |
| `navy` | `--ds-navy` | `#031a26` | `#0a2130` | superfícies escuras de marca (fica escura nos dois modos) |
| `blue` | `--ds-blue` | `#184560` | `#8cb8da` | link, ação textual, "em andamento" |
| `magenta` | `--ds-clay` | `#842e20` | `#e59a8a` |  |
| `magenta-soft` | `--ds-clay-soft` | `#f6e7e3` | `#3a211c` |  |
| `founders` | `--ds-founders` | `#441b1b` | `#c98b8b` |  |
| `accent` | `--ds-accent` | `#b9915b` | `#c9a46f` | SÓ preenchimento: progresso, foco, próximo passo |
| `accent-deep` | `--ds-accent-deep` | `#7d5e33` | `#dcbd8e` | texto na cor de destaque |
| `accent-soft` | `--ds-accent-soft` | `#f5eee3` | `#2e2619` | Estados |
| `ok` | `--ds-ok` | `#1b5e20` | `#7fd18b` |  |
| `ok-soft` | `--ds-ok-soft` | `#e8f5e9` | `#15291a` |  |
| `amber` | `--ds-amber` | `#b54500` | `#ffb163` |  |
| `amber-soft` | `--ds-amber-soft` | `#fff3e0` | `#33240f` |  |
| `rose` | `--ds-rose` | `#b71c1c` | `#ff8f86` |  |
| `rose-soft` | `--ds-rose-soft` | `#ffebee` | `#3a1719` |  |
| `info` | `--ds-info` | `#0d47a1` | `#90b8f8` |  |
| `info-soft` | `--ds-info-soft` | `#e3f2fd` | `#14233a` | Canvas escuros (grafo, IA) |
| `ai` | `--ds-ai` | `#18181b` | `#0e0e10` | IA acompanha a marca; G4 OS usa azul-céu no preset. |
| `ai-accent` | `--ds-ai-accent` | `#202124` | `#c5c6cc` |  |
| `ai-accent-soft` | `--ds-ai-accent-soft` | `#f5eee3` | `#202024` | Gradiente de marca: só em título de momento, um por tela. |
| — | `--ds-gradient-brand` | `linear-gradient(90deg, var(--g4-gray-900) 0%, var(--g4-gray-700) 100%)` | `linear-gradient(90deg, #ececef 0%, #c5c6cc 100%)` | Marca G4 OS (símbolo e "OS" do logotipo): dourado → aço → névoa. |
| — | `--ds-mark-gold` | `#caa977` | `#c9a46f` |  |
| — | `--ds-mark-steel` | `#3b5766` | `#8cb8da` |  |
| — | `--ds-mark-mist` | `#768086` | `#6b6e76` |  |
| `orb-core` | `--ds-orb-core` | `#004777` | `#0a3a5e` | Névoa de fundo dos momentos de marca (o cinza quente desfocado do KV). |
| `haze` | `--ds-haze` | `#f2f2f3` | `#1d1d21` |  |
| `graph` | `--ds-graph` | `#121214` | `#0b0b0d` | Dados |
| `chart-1` | `--ds-chart-1` | `#202124` | `#ececef` |  |
| `chart-2` | `--ds-chart-2` | `#184560` | `#6fa8d6` |  |
| `chart-3` | `--ds-chart-3` | `#b9915b` | `#c9a46f` |  |
| `chart-4` | `--ds-chart-4` | `#842e20` | `#e08d7c` |  |
| `chart-5` | `--ds-chart-5` | `#5f7f6f` | `#8fbfa6` |  |
| `chart-6` | `--ds-chart-6` | `#a3a7b0` | `#6b6e76` |  |
| `chart-grid` | `--ds-chart-grid` | `#eef0f2` | `#242428` |  |
| `chart-pos` | `--ds-chart-pos` | `#2f6ea8` | `#74aee6` |  |
| `chart-neg` | `--ds-chart-neg` | `#c2621d` | `#f0a05a` | Etiquetas (categoria, status, tipo): fundo suave + texto AA. 9 matizes. |
| `tag-gray-bg` | `--ds-tag-gray-bg` | `#f0f0ef` | `#2f2f31` |  |
| `tag-gray-fg` | `--ds-tag-gray-fg` | `#4d4c49` | `#c9c8c4` |  |
| `tag-brown-bg` | `--ds-tag-brown-bg` | `#f4eeea` | `#3a2e26` |  |
| `tag-brown-fg` | `--ds-tag-brown-fg` | `#6b4a36` | `#ddb9a0` |  |
| `tag-orange-bg` | `--ds-tag-orange-bg` | `#fbecdd` | `#40291a` |  |
| `tag-orange-fg` | `--ds-tag-orange-fg` | `#8a4512` | `#f2b07a` |  |
| `tag-yellow-bg` | `--ds-tag-yellow-bg` | `#fbf3db` | `#3d331a` |  |
| `tag-yellow-fg` | `--ds-tag-yellow-fg` | `#7a5a00` | `#ecd07c` |  |
| `tag-green-bg` | `--ds-tag-green-bg` | `#e6f3ea` | `#1d3324` |  |
| `tag-green-fg` | `--ds-tag-green-fg` | `#1f6b3a` | `#8fd4a3` |  |
| `tag-blue-bg` | `--ds-tag-blue-bg` | `#e5eff9` | `#1b2c40` |  |
| `tag-blue-fg` | `--ds-tag-blue-fg` | `#1d5a96` | `#93c0ef` |  |
| `tag-purple-bg` | `--ds-tag-purple-bg` | `#f0ebf8` | `#2e2440` |  |
| `tag-purple-fg` | `--ds-tag-purple-fg` | `#6440a3` | `#c6aef0` |  |
| `tag-pink-bg` | `--ds-tag-pink-bg` | `#f9e9f1` | `#3d2130` |  |
| `tag-pink-fg` | `--ds-tag-pink-fg` | `#9b2f68` | `#f0a8cc` |  |
| `tag-red-bg` | `--ds-tag-red-bg` | `#fbe8e6` | `#42201e` |  |
| `tag-red-fg` | `--ds-tag-red-fg` | `#a8302a` | `#f4a29b` | Marca de entidade (iniciais tingidas): quanto da cor da conta entra no texto/fundo |
| — | `--ds-mark-text` | `70%` | `38%` |  |
| — | `--ds-mark-bg` | `8%` | `16%` | Foco e sobreposição |
| — | `--ds-focus` | `#63666e` | `#8f929a` |  |
| — | `--ds-backdrop` | `rgb(0 0 0 / 0.2)` | `rgb(0 0 0 / 0.55)` | Sombras: quase invisíveis no claro |
| — | `--ds-shadow-surface` | `0 1px 2px #20212403` | `0 1px 2px #00000040` |  |
| — | `--ds-shadow-raised` | `0 3px 12px #20212407` | `0 4px 16px #00000059` |  |
| — | `--ds-shadow-pressed` | `0 1px 3px #20212408` | `0 1px 3px #00000059` |  |
| — | `--ds-shadow-primary` | `inset 0 1px 0 #ffffff24, 0 1px 2px #20212418` | `inset 0 1px 0 #ffffff14, 0 1px 2px #00000066` |  |
| — | `--ds-shadow-popup` | `0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a` | `0 20px 25px -5px #00000080, 0 8px 10px -6px #00000066, 0 0 0 1px #ffffff0a` |  |
| — | `--ds-shadow-toast` | `0 8px 32px #20212412, 0 2px 4px #20212404` | `0 8px 32px #00000080, 0 0 0 1px #ffffff0a` |  |
| — | `--ds-shadow-overlay` | `0 25px 50px -12px #00000026` | `0 25px 50px -12px #000000a6, 0 0 0 1px #ffffff0a` | Forma e tipo da marca |
| — | `--ds-radius-scale` | `1` | `=` | 0 = quadrado · 0.75 = sóbrio · 1 = G4 · 1.35 = amigável |
| — | `--ds-font-sans` | `"Figtree", "Figtree Fallback", ui-sans-serif, system-ui, sans-serif` | `=` |  |
| — | `--ds-font-mono` | `ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace` | `=` | Títulos (h1 de página, título de registro, capa, hero). Pode ser serifada. |
| — | `--ds-font-display` | `var(--ds-font-sans)` | `=` |  |
| — | `--ds-display-weight` | `600` | `=` |  |
| — | `--ds-display-tracking` | `-0.035em` | `=` | Leitura longa (documentos, políticas, relatórios): serifa editorial. |
| — | `--ds-font-reading` | `"Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif` | `=` | Assinatura do KV ("Sua empresa no piloto automático"): itálico serifado. |
| — | `--ds-font-tagline` | `"Libre Baskerville", Georgia, serif` | `=` |  |

## Tipografia (px)

| Utilitário | px | Papel |
| --- | --- | --- |
| `text-overline` | 10 | rótulo de grupo em CAIXA ALTA, tracking .1em |
| `text-meta` | 11 | contador, legenda, data em chip, rótulo de célula mobile |
| `text-caption` | 12 | metadado, cabeçalho de tabela, aba, descrição curta |
| `text-label` | 12.5 | rótulo de campo, item de menu lateral, texto de controle |
| `text-control` | 13 | botão sm, chip, toast, breadcrumb, corpo compacto |
| `text-body` | 13.5 | corpo padrão, tabela, botão md, item de menu |
| `text-input` | 14 | valor digitado, título de card, item de combobox |
| `text-value` | 15 | valor de campo de leitura (Field) |
| `text-section` | 18 | título de área (h2), título de modal |
| `text-record` | 20 | título de drawer, nome do cliente no cabeçalho |
| `text-metric` | 22 | número de indicador |
| `text-title` | 25 | h1 de página (23px < 640px). Não se chama "page" para não colidir com a cor page |

Valores arbitrários permitidos (iguais à escala ou meios-passos de componentes densos): 10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 15, 16, 17, 18, 20, 22, 24, 25, 30 px. Display (hero, slides): ≥ 26 px.

## Raios (escalam com `--ds-radius-scale`)

| Utilitário | px | Uso |
| --- | --- | --- |
| `rounded-chip` | 6 | badge, contador, chip de data |
| `rounded-control` | 8 | botão, campo, item de menu, aba |
| `rounded-tile` | 10 | card de kanban, marca de entidade |
| `rounded-card` | 12 | card, painel, tabela, popup, toast |
| `rounded-shell` | 16 | modal, ListPanel, StatGrid, calendário |

`rounded-sm/md/lg/xl/2xl` do Tailwind também escalam (4/6/8/12/16 × escala).

## Marcas prontas (`<html data-brand=…>`)

`cliente`, `oceano`, `floresta`, `vinho`, `grafite`, `violeta`, `pergaminho`, `ledger`, `caderno`, `g4-classico`, `g4-institucional`

Nova marca: sobrescreva só `--ds-*` em `[data-brand="x"]` e `[data-brand="x"][data-theme="dark"]`. Detalhes: `docs/fundamentos/temas-e-dark-mode.md`.


# Anatomia de página

Toda tela do DS segue uma de nove anatomias. A anatomia decide **o que fica fixo, o que rola e onde fica cada coisa** — é o que faz um CRM, um ATS e um ERP parecerem o mesmo produto. Ao criar ou copiar um bloco, escolha a anatomia antes de escolher componentes, e declare-a em `meta.concept.patterns`.

Exemplos vivos e mini-diagramas: showcase › Navegação › Anatomia de página (`#/p/padroes-anatomia-de-pagina`).

## Regras que valem para todas

1. **O cabeçalho da página é fixo.** Em toda página que rola, o `PageHeading` gruda no topo e compacta (some a descrição, o título diminui, aparece uma linha). `sticky={false}` só em app de altura total, onde a página não rola.
2. **O que é da página fica junto.** Elementos que pertencem à página (título, ações, barra de filtros, subnavegação, coluna de propriedades) grudam **juntos**, colados ao cabeçalho. Nunca deixe algo fixo cujo contexto já rolou embora — foi o caso da subnavegação de Configurações "flutuando" sem o título.
3. **Um invólucro não pode limitar o cabeçalho fixo.** `position: sticky` só funciona dentro do pai. Não embrulhe o `PageHeading` num `div` só dele; se precisar de classe (ex.: `no-print`), use `className="… contents"`.
3a. **Cabeçalho e corpo no mesmo eixo.** Para uma coluna mais estreita (configurações, automações, formulário longo), use `<Page width="narrow">` (`wide` 1200 · `medium` 1024 · `narrow` 896 · `reading` 720 px): o `PageHeading`, a `PageToolbar` e o corpo ficam alinhados, e o fundo fixo do cabeçalho continua de ponta a ponta. Nunca centralize só o corpo com `mx-auto max-w-*`: o título fica à esquerda e o conteúdo no meio.
3b. **Respiro abaixo do cabeçalho vem do DS.** O primeiro filho de `Page` depois do `PageHeading` ganha 24 px (20 px no celular) sozinho; não é preciso `mt-*`. Um `mt-*` explícito ainda vence. A `PageToolbar` fica colada ao cabeçalho de propósito.
4. **Uma rolagem por eixo.** Ou a página rola, ou a área rola — nunca as duas na vertical no mesmo lugar. No celular, sempre a página (o `DataGrid` já ignora `maxHeight` abaixo de 640px).
5. **Uma ação primária por área**, à direita do título. Secundárias em `ghost`; o resto no menu ⋯.
6. **Barras de ação flutuam no rodapé da área** (`BulkBar`, "alterações não salvas"): `sticky bottom`, só aparecem quando há o que fazer.
7. **Estados obrigatórios:** vazio com próxima ação, carregando com a forma do conteúdo, erro com saída.

## As nove anatomias

| | Anatomia | Fixo | Rola | Peças | Blocos de referência |
| --- | --- | --- | --- | --- | --- |
| A | **Lista** | Cabeçalho + `PageToolbar` (visões salvas, filtros, busca) colada abaixo | A página (tabela comum) **ou** a grade (DataGrid com `maxHeight` quando a lista é a página inteira e tem totais/colunas fixas) | `PageHeading`, `PageToolbar`, `SavedViews`, `FilterBar`, `TableSearch`, `DataTable`/`DataGrid`, `Pagination`, `BulkBar` | saas-customers, erp-invoices, crm-contacts, erp-orders |
| B | **Painel** (dashboard) | Cabeçalho com filtro de período à direita | A página | `KpiGrid`, `ChartCard`, `ListPanel`, tabelas curtas | saas-dashboard, erp-dashboard, crm-sales-dashboard |
| C | **Registro** (detalhe) | Cabeçalho com trilha, título, estado e ações; coluna de propriedades no desktop (`SplitLayout`, `page-aside`) | Conteúdo principal (abas, feed, itens) | `PageHeading` com `crumbs`, `StagePath`, `Tabs`, `SplitLayout`, `PropertyList`, `ActivityFeed` | crm-deal, saas-customer, ats-candidate, erp-order |
| D | **Configurações** | Título da página + subnavegação colada abaixo (`SettingsLayout`) | Só o conteúdo da seção | `SettingsLayout`, seções rótulo-à-esquerda, barra de alterações | settings-* , crm-settings |
| E | **Quadro** (kanban) | Cabeçalho; no desktop a página **não** rola | Quadro na horizontal; cada coluna na vertical. No celular a página rola e o cabeçalho gruda | `KanbanBoard`, `KanbanColumn`, `RecordCard` | crm-pipeline, ats-pipeline |
| F | **Mestre-detalhe** | Cabeçalho; lista à esquerda | Lista e detalhe rolam cada um (são duas áreas, não aninhadas); no celular o detalhe abre em tela cheia com voltar | Lista + painel, `Drawer`/`Sheet` no celular | erp-purchase-requests, saas-support, fin-reconciliation, ats-offers |
| G | **App de altura total** (conversa, IA, arquivos, apresentação) | Casca, cabeçalho da área, composer | Só a thread/lista/canvas; a página não rola | `AppShell` sem `Page`, `ResizableSplit`, `AgentComposer`, `ArtifactPanel` | ai-chat, ai-agent-builder, app-file-manager, app-presentation |
| H | **Fluxo focado** (auth, assistente) | Nada além do cartão/coluna; rodapé de passos fixo no assistente | O documento | Coluna única ou split com painel de marca; `Stepper` | auth-*, onboarding-wizard |
| I | **Público** (marketing, carreiras) | Cabeçalho do site | O documento (sem casca de app) | `HeroSection`, seções, CTA; em cena: `SiteHeader`, `StageSky`, `Chapter`, `Stage`, `CtaButton` | marketing-landing, marketing-stage, marketing-pricing, ats-careers |

## Detalhes por anatomia

**A · Lista.** A barra de filtros gruda **colada** ao cabeçalho quando a lista passa de uma tela: use `<PageToolbar>` envolvendo `SavedViews` + `FilterBar`. Abaixo de uma tela, não precisa. Escolha a rolagem pela forma da lista: tabela comum rola com a página; `DataGrid` com rolagem interna (`maxHeight="calc(100dvh - …)"`) quando há colunas fixas, totais no rodapé ou virtualização — aí a página praticamente não rola e o cabeçalho da grade fica fixo dentro dela.

Faixa de números (`StatGrid`/`KpiGrid`) numa lista: **acima da `PageToolbar`** por padrão, logo abaixo do cabeçalho. Ali ela descreve a coleção inteira e não muda com o filtro. Ponha a faixa **abaixo** da `PageToolbar` só quando os números descrevem o recorte filtrado (mudam com cada filtro); nesse caso o rótulo ou a legenda diz "no recorte" ("Execuções no recorte", "12 % do recorte"), para ninguém ler o total do recorte como total geral. Referência: `ai-runs` (abaixo, recorte) e `erp-orders` (acima, geral).

**B · Painel.** KPIs no topo (3–5), um gráfico por pergunta, filas de ação ("o que pede atenção") antes de detalhes. Período no cabeçalho, não espalhado pelos cards.

**C · Registro.** A trilha leva de volta à lista. Ações mudam com o estado do registro (ganhar/perder, aprovar, faturar). A coluna de propriedades gruda abaixo do cabeçalho no desktop e vira seção no celular. Edição longa abre em `Drawer`, nunca em outra página.

**D · Configurações.** Título "Configurações" fixo e subnavegação logo abaixo dele; cada seção tem título e descrição próprios. Mudanças com efeito imediato salvam sozinhas; formulários longos usam a barra de "alterações não salvas".

**E · Quadro.** Totais por coluna no cabeçalho da coluna. Arrastar muda o estado; o card só abre o registro. Colunas crescem para ocupar telas largas.

**F · Mestre-detalhe.** A seleção fica no endereço (`?id=`), para compartilhar e voltar. A lista mostra o mínimo para escolher; o detalhe tem o resto.

**G · App de altura total.** Sem `Page`. O cabeçalho da área é fixo por construção; só a área de conteúdo rola. Painéis laterais são redimensionáveis e recolhíveis; no celular viram tela cheia ou `Sheet`.

**H · Fluxo focado.** Uma tarefa por tela, sem navegação do app. Em assistentes, o rodapé com Voltar/Continuar é fixo e o progresso é visível.

**I · Público.** Rolagem do documento, cabeçalho do site fixo e translúcido, seções largas. Sem `AppShell`. Para mostrar o produto em cena: `SiteHeader` (vira pílula ao rolar), `StageSky` no hero, `Chapter` com um `Stage` por ideia e `CtaButton`; ver [palcos](palcos.md) e o bloco marketing-stage.

## Celular

- Cabeçalho fixo vira **uma linha** ao grudar: título + ação primária + último item (em geral o ⋯). Trilha e ações secundárias voltam ao rolar para o topo (automático no `PageHeading`).
- A `PageToolbar` **não** gruda no celular: rola junto com a lista (o espaço vertical é do conteúdo).
- Filtros em `FilterSheet` com "Aplicar (N resultados)".
- Coluna de propriedades vira seção abaixo do conteúdo.
- Sem rolagem aninhada: a página rola (grades com `maxHeight` viram rolagem da página automaticamente).
- A pílula (`BottomNav`) nunca cobre conteúdo: o `AppShell` já reserva o espaço.

## Como declarar no bloco

```ts
export const meta = {
  title: "Lista de clientes",
  description: "…",
  category: "SaaS",
  concept: {
    goal: "Achar e agir sobre contas de clientes em escala: quem está em risco, quem pode expandir.",
    patterns: ["Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (visões, filtros, busca)", "…"],
    adapt: ["CRM (empresas), ERP (clientes B2B): troque colunas e visões salvas"],
    avoid: ["Filtros fora da PageToolbar (somem ao rolar)"],
  },
} as const;
```


# Formulários

## Estrutura

- **Rótulo sempre visível, acima do campo.** Placeholder é exemplo ("Ex.: Diretor comercial"), nunca rótulo.
- **Regra do `label` (igual em todos os campos do DS):** `label` vira o rótulo visível acima do campo e o nome acessível (`TextField`, `Select`, `Combobox`, `MultiSelect`, `NativeSelect`, `CheckboxGroup`, `DatePicker`, `DateInput`, `Checkbox` ao lado da caixa). Dentro de `<FieldBlock label=…>` o rótulo é do FieldBlock e o campo não repete. `hideLabel` deixa só o nome acessível: use em toolbar, célula de tabela e filtro. Controles de barra (`Select size="compact"`, `ToggleGroup`, `SegmentedControl`) já escondem por padrão. Nunca faça um `<p>` de rótulo à mão acima de um campo.
- **Props com o mesmo nome em todos os campos:** `label`, `hideLabel`, `hint`, `error`, `optional`, `disabled`. O retorno de valor segue a família: **seleção em popup** (`Select`, `Combobox`, `MultiSelect`, `CheckboxGroup`, `DatePicker`, `NativeSelect`) usa `value` + `onValueChange(valor)`; **campos de digitação e pickers clássicos** (`TextField`, `TextareaField`, `NumberField`, `CurrencyField`, `MaskedField`, `PasswordField`, `TagInput`, `RadioGroup`, `ToggleGroup`, `DateInput`, `TimePicker`…) usam `value` + `onChange(valor)`, sempre com o valor (nunca o evento); liga/desliga (`Checkbox`, `Switch`) usa `checked` + `onCheckedChange`. O TypeScript acusa a troca.
- `FieldBlock` vale para qualquer campo do DS: dentro dele, o campo não desenha rótulo nem ajuda e herda id, `aria-describedby` e estado de erro.
- Uma coluna por padrão. `FieldGrid` põe pares curtos lado a lado (cidade + UF, início + fim) a partir de 640 px; no celular volta a uma coluna.
- Agrupe em seções com título quando passar de ~8 campos. Formulário longo mora em página ou drawer, em `ReadingColumn` (620 px).
- Ajuda abaixo do campo em uma frase; erro substitui a ajuda, em `text-rose`, específico e com exemplo.
- Obrigatório é o padrão; marque "(opcional)".

## Escolha do controle

| Situação | Controle |
| --- | --- |
| Texto curto | `input` com `fieldClass` / `TextField` |
| Texto longo | `textarea` com `areaClass` / `TextareaField` (cresce com o conteúdo) |
| Lista curta (≤ 7) de opções fixas | `Select` (Base UI). **Nunca `<select>` cru.** No celular abre como folha inferior. |
| Lista longa e simples em que o seletor do sistema é melhor (celular, sem busca, formulário sem JS) | `NativeSelect` (o `<select>` do sistema com a aparência do DS; aceita grupos) |
| 2–4 opções visíveis e mutuamente exclusivas | `SegmentedControl` ou `RadioGroup` |
| Escolha com descrição (plano, tipo de conta) | `ChoiceCards` / cards de escolha |
| Entidade (pessoa, empresa, produto) ou lista longa | `Combobox` com busca |
| Vários valores, 2–8 opções que cabem na tela | `CheckboxGroup` (tudo visível, "Selecionar todos" tri-estado, `disabledReason`) |
| Vários valores, lista longa, com grupos ou busca | `MultiSelect` (resumo "Ana, Bruno" / "5 selecionados", ou `display="chips"`; `max`) |
| Múltiplas entidades, poucas escolhidas | `Combobox` múltiplo (chips abaixo) |
| Etiquetas livres | `TagInput` |
| Liga/desliga com efeito imediato | `Switch` |
| Aceitar / marcar concluído | `Checkbox` |
| Data | `DatePicker` (botão + calendário) ou `DateInput` (digitável). Nunca `<input type="date">`: no iPhone abre em inglês e carrega vazio. Vazio mostra um placeholder que diz o padrão ("Hoje (padrão)"); `clearable` volta para vazio. |
| Número com passo | `NumberField` |
| Dinheiro | `CurrencyField` (R$, centavos) |
| CPF, CNPJ, CEP, telefone | `MaskedField mask={masks.cpf}` (`masks`: cpf, cnpj, cep, phone, date; CPF/CNPJ validam dígito) |
| Senha | `PasswordField` (mostrar/ocultar + força na criação) |
| Código de verificação | `OtpInput` (6 dígitos, colar preenche tudo) |
| Faixa de valores | `Slider` |
| Arquivo | `FileDropzone` |
| Nota / avaliação | `Rating` |

Edição inline de um campo: `InlineEdit`. Grupo de alternância com ícones: `ToggleGroup`. Todos os controles de `inputs.tsx` estão no showcase em **Formulários**.

## Desabilitado

- Desabilitado continua **legível** (texto `muted` sobre fundo suave, borda visível); só os preenchidos (primário, perigo) esmaecem.
- Quando o motivo não é óbvio, diga por quê: `<Button disabled disabledReason="Indisponível na demonstração">`. O botão continua focável (`aria-disabled`), não dispara e mostra o motivo em tooltip e para leitor de tela.
- Opção indisponível numa lista diz o porquê na própria opção (`disabledReason` em `CheckboxGroup` e `MultiSelect`).

## Celular

- `Select` e `DatePicker` abrem como **folha inferior** abaixo de 640 px (largura total, fundo escurecido, por cima da barra inferior, área segura do iPhone). `Combobox` e `MultiSelect` têm busca (o teclado sobe), então ficam ancorados ao campo com a largura da tela. `presentation="popover"` mantém o popover.
- Itens de lista com 44 px de altura mínima no toque.

## Envio

- Um primário no rodapé com o verbo ("Criar contato"), secundário "Cancelar" antes dele. Em drawer/modal, rodapé fixo.
- **Enquanto salva, o botão informa** ("Salvando…") e fica desabilitado; o formulário continua visível. Use `useOperation` + `OperationButton`.
- **Toast só depois que terminou**, nunca no clique.
- Falha vira bloco no topo do formulário (`OperationFeedback`) com saída: "Tentar de novo" (recusa) ou "Verificar alteração" (resposta incerta). Os dados digitados **nunca** se perdem.
- Validação: no blur do campo e no envio. Não valide enquanto a pessoa digita a primeira vez.
- Foco vai para o primeiro campo com erro no envio.

## Edição

| Quanto editar | Onde |
| --- | --- |
| Um campo (título, status, dono) | inline no próprio registro (selo que abre menu, clique para editar) |
| Formulário curto sem sair da lista | `Drawer` (500 px) |
| Decisão curta com 1–3 campos | `Modal` |
| Formulário longo ou com etapas | página própria; com etapas, `FormWizard` (Stepper no topo, validação por etapa) |
| Configurações e registro editados no lugar | campos na página + `SaveBar` (aparece com alteração, ⌘S salva, aviso ao sair) |

- Status é **controle inline** (selo que abre menu: `InlineSelect`), nunca um `Select` por linha de tabela. `disabledReason` explica quando não dá para trocar ("Único administrador").
- Fechar um drawer com alterações não salvas pede confirmação.
- **`SaveBar`**: uma por tela, no fim da área que rola; fica inerte sem alteração; `saveDisabledReason` explica por que não dá para salvar (validação pendente); `error` mantém a barra aberta com o motivo. Toast só depois que salvou.
- **`FormWizard`**: 3–5 etapas com nome de conteúdo; cada etapa valida ao avançar (`validate` pode ser assíncrona) e o erro aparece no topo da etapa; Voltar nunca valida; a última ação tem o verbo do resultado ("Criar vaga"). Os dados ficam no estado do app: ir e voltar não apaga nada.

## Máscaras e formatos brasileiros

- CPF `000.000.000-00`, CNPJ `00.000.000/0000-00`, CEP `00000-000`, telefone `(00) 00000-0000`.
- Moeda: digite só números, o campo formata `R$ 1.234,56`. Guarde em centavos (inteiro).
- Data: `dd/mm/aaaa` na tela, ISO `aaaa-mm-dd` no dado (`toIso`, `formatIsoDate`).
- Aceite colar com ou sem pontuação.

## Acessibilidade

- Todo campo tem `label` associado (os componentes fazem; em `input` cru, use `FieldBlock`).
- Erro ligado por `aria-describedby`, campo com `aria-invalid`.
- Grupo de rádios/checkbox dentro de `fieldset` com `legend`.
- Não desabilite o botão de envio para "forçar" preenchimento: deixe enviar e mostre os erros.


# Instalação

O pacote [`@g4ai/ds`](https://www.npmjs.com/package/@g4ai/ds) publica JavaScript compilado (ESM com `"use client"`) e tipos. Junto vão o CSS e o código-fonte dos componentes, que o Tailwind v4 do seu app lê para gerar as classes. Funciona em Next.js (App Router) e Vite sem configuração extra.

## Requisitos

- React 18.2+ ou 19, Tailwind CSS 4.3+, TypeScript 5, Node 20+ (detalhes do React 18 [abaixo](#react-18)).
- Peer deps: `@base-ui/react`, `lucide-react`, `react`, `react-dom`, `tailwindcss`. Datas não precisam de dependência extra (Calendar próprio).

## 1. Instalar

```bash
pnpm add @g4ai/ds @base-ui/react lucide-react     # ou: npm i … / yarn add …
pnpm add -D tailwindcss @tailwindcss/postcss      # Next.js
# Vite: pnpm add -D tailwindcss @tailwindcss/vite
```

Projeto novo em Next: copie [`templates/next-app`](../../templates/next-app/README.md), que já vem pronto. Vite: [vite.md](vite.md).

## 2. CSS global

```css
/* app/globals.css (Next) ou src/index.css (Vite) */
@import "tailwindcss";
@import "@g4ai/ds/styles.css";   /* tokens, temas de marca, base e componentes */

/* Opcional: componentes do shadcn/ui ou 21st.dev com a cara do DS */
/* @import "@g4ai/ds/shadcn.css"; */
```

`styles.css` já declara os `@source` dos componentes (relativos a ele), então o Tailwind do app compila as classes do DS sem configuração. Os blocos ficam de fora: copie o bloco para o `src` do app, e o Tailwind do app lê a cópia. Não aponte `@source` para `node_modules/@g4ai/ds/src` inteiro: isso traz as classes de todos os blocos de exemplo.

## 3. Fonte e raiz

```tsx
// Next: app/layout.tsx
import { Figtree } from "next/font/google";
const figtree = Figtree({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-figtree" });

import { themeScript } from "@g4ai/ds";

<html lang="pt-BR" className={`ds-app ${figtree.variable}`} data-theme="system" suppressHydrationWarning>
  <head>
    <script dangerouslySetInnerHTML={{ __html: themeScript }} />
  </head>
```

A fonte vem do semântico `--ds-font-sans` (padrão `"Figtree"`); com `next/font`, adicione ao CSS: `:root { --ds-font-sans: var(--font-figtree), ui-sans-serif, system-ui, sans-serif; }` ou carregue a Figtree pelo Google Fonts no `<head>` (como no showcase). Marcas podem trocar a fonte ([temas](../fundamentos/temas-e-dark-mode.md)).

- `ds-app` trava a rolagem do documento: só as áreas de trabalho rolam. Em site de conteúdo, não use.
- `lang="pt-BR"` é obrigatório (leitores de tela e hifenização).
- `data-theme` = `light`, `dark` ou `system`; `themeScript` aplica o tema salvo antes da primeira pintura. Troque com `ThemeToggle` / `useTheme()`. Marca de cliente: `data-brand="…"` ([temas](../fundamentos/temas-e-dark-mode.md)).

## 4. Links do framework

Componentes que navegam (`Button href`, `Card href`, `Sidebar`, `Breadcrumb`, `Tabs` com `href`) renderizam `<a>` por padrão. Registre o `Link` do framework **uma vez**, num módulo cliente importado pelo layout:

```tsx
"use client";
import Link from "next/link";
import { setLinkComponent } from "@g4ai/ds";
setLinkComponent(Link);
```

## 5. TypeScript

Os tipos vêm no pacote (`dist/types`). Nada a configurar.

Testar uma versão do DS ainda não publicada: [contribuir › Testar num app antes de publicar](contribuir.md#testar-num-app-antes-de-publicar).

## 6. Usar

```tsx
import { AppShell, Sidebar, Page, PageHeading, KpiGrid, KpiCard, ChartCard, AreaChart, formatCurrency } from "@g4ai/ds";
```

Imports por módulo também funcionam: `@g4ai/ds/components/charts`, `@g4ai/ds/lib/format`, `@g4ai/ds/tokens`.

## Conferir

- [ ] `npx g4os-ds doctor` sem itens ✗ (React 18.2+/19, Tailwind v4, Base UI, CSS e ordem dos imports, tema, fonte).
- [ ] `npx g4os-ds init`: config da auditoria, scripts `ds:*` e workflow de CI (opcional: `--eslint`, `--hook lefthook`). Ver [auditoria](auditoria.md).
- [ ] Um `Button` aparece em tinta escura com cantos de 8 px → CSS carregou.
- [ ] `data-theme="dark"` no `<html>` deixa tudo escuro sem mexer em componente → tokens OK.
- [ ] Classes como `bg-soft`, `text-muted` funcionam no seu código → tokens carregados.
- [ ] `Select` abre por cima de um `Drawer` → portais OK.
- [ ] Figtree nos títulos → fonte OK.

Starter pronto: [`templates/next-app`](../../templates/next-app/README.md). Detalhes de Next: [next.md](next.md).

Agentes de IA: [usar com IA](usar-com-ia.md) (MCP, `llms.txt`, plugin). Atualizar de versão: [migração › Atualizar de versão](migracao.md#atualizar-de-versão).

## React 18

O DS é desenvolvido em React 19 e testado também em **React 18.2+** a cada mudança (CI: tipos com `@types/react@18`, render no servidor e no cliente de todos os blocos e páginas do showcase). Não há nada a configurar:

- **Next 14 (App Router) ou Vite com React 18**: instale como acima. `react` e `react-dom` 18.2+ satisfazem as peer deps; `npx g4os-ds doctor` aceita 18.2+.
- **`inert`**: o React 18 não conhece o atributo e descartaria `inert={true}`. Os componentes usam `inertProps(flag)`, que escolhe o formato certo para a versão instalada. No seu código, faça o mesmo: `<div {...inertProps(!open)}>` (a auditoria acusa `inert=` direto, regra `raw-inert`).
- **Refs**: `Button`, `IconButton` e os links do DS usam `forwardRef`, então funcionam como gatilho de `Tooltip`, `Menu` e do Base UI (`render={<Button />}`) nas duas versões. Seus próprios componentes usados como gatilho também precisam de `forwardRef` no React 18 (no 19 a `ref` chega como prop).
- **Tipos**: com `@types/react@18`, use TypeScript 5.1+ (componentes que devolvem `ReactNode`).
- **Recursos do React 19** (`use`, `useActionState`, `useOptimistic`, `<form action={fn}>`, metadados no corpo) não são usados pelo DS; no seu app, só se você estiver no 19.

Quando puder, prefira o React 19 (Next 15+): é a versão em que o DS é desenvolvido.


# Catálogo de componentes



## primitives

Base visual: Button, IconButton, Badge, Dot, Avatar, EntityMark, Card, Metric, StatGrid, Meter, Empty, Page, Section, Kbd, DsLink/setLinkComponent, tons.

- `Avatar` (component): Pessoa. Iniciais brancas sobre a tinta da pessoa (#3f3f46 padrão, #202124 para o responsável); com `src`, a foto (as iniciais ficam de reserva se a imagem falhar).
- `AvatarGroup` (component): Até `max` avatares e um "+N" com os nomes restantes no title.
- `AvatarSize` (type)
- `AvatarStatus` (type)
- `Badge` (component): Rótulo curto de estado.
- `Button` (component): Um primário por área.
- `buttonClass` (function)
- `ButtonShape` (type): Forma do botão: `default` (raio de controle) ou `pill` (totalmente arredondado, para páginas públicas e CTAs de palco).
- `ButtonVariant` (type)
- `Card` (component): Superfície branca, borda de 1px, raio 12.
- `CardAction` (component): "Abrir ↗" discreto no pé de um card clicável.
- `ChipRow` (component): Linha de chips de filtro ou de categoria.
- `CriticalFlag` (component): Marcador de prioridade crítica, colado ao título.
- `Dot` (component): Ponto de 6px. Sempre acompanhado de texto ou `label` (vira aria-label).
- `DsLink` (component)
- `Empty` (component): Estado vazio. Diga o que falta e ofereça a próxima ação.
- `EntityMark` (component): Marca de uma entidade (cliente, empresa, produto): quadrado arredondado com a cor da entidade a 6 % de opacidade e as iniciais na cor cheia.
- `FactLine` (component): Linha de fatos de um registro: "Marco M07 · Período 12–26 set · Responsável Ana".
- `Field` (component): Par rótulo/valor para leitura (não edição).
- `FilterChip` (component): Chip de filtro binário.
- `IconButton` (component): Botão quadrado só com ícone.
- `Kbd` (component): Tecla de atalho. `size="sm"` dentro de itens densos; `md` ao lado de texto corrido.
- `KbdGroup` (component): Combinação de teclas.
- `keyLabel` (function): Converte nomes de tecla ("mod", "shift", "enter") no símbolo da plataforma.
- `LinkedCard` (component): Card com um destino principal (o título) e ações secundárias clicáveis.
- `Meter` (component): Progresso fino (1px ou 4px).
- `Metric` (component): Indicador. O valor é o protagonista (22px, tabular).
- `Page` (component): Área rolável de uma tela, com margens responsivas e entrada suave.
- `Section` (component): Seção titulada dentro de uma página de conteúdo (não é card).
- `setLinkComponent` (function)
- `StatCell` (component)
- `StatGrid` (component): Grade de células separadas por 1px de linha (sem gaps brancos).
- `Tone` (type): Os únicos tons semânticos.
- `toneDot` (const)
- `toneText` (const)
- `useIsMac` (hook): true no macOS/iOS (para escolher ⌘ ou Ctrl).


## overlays

Modal, ConfirmDialog, Drawer, Popover (Base UI).

- `ConfirmDialog` (component): Confirmação que exige resposta.
- `Drawer` (component): Painel lateral direito (500px).
- `Modal` (component)
- `Popover` (component): Popover genérico: gatilho + painel com título e conteúdo.
- `popupClass` (const): Classe compartilhada dos popups flutuantes (menu, select, popover).


## forms

Formulário padrão: FieldBlock, FieldGrid, Select, Combobox, Checkbox, Switch, SearchInput, fieldClass.

- `areaClass` (const)
- `Checkbox` (component): Caixa 20px, marcada = primária.
- `CheckboxGroup` (component): Vários valores com TODAS as opções visíveis (2–8 itens, até ~12 em grade): cargos que recebem um aviso, canais de notificação, permissões.
- `CheckboxGroupOption` (type)
- `Combobox` (component): Lista de entidades (pessoas, clientes, documentos) com busca sem acento.
- `ComboboxOption` (type)
- `ControlLabelProps` (type): Props de rótulo comuns a Select, Combobox, MultiSelect, NativeSelect, DatePicker.
- `FieldBlock` (component): Rótulo + controle + ajuda/erro.
- `fieldClass` (const)
- `FieldGrid` (component): Grade de campos: 1 coluna no celular, 2 a partir de 640px.
- `fullWidthPositionerClass` (const)
- `MultiSelect` (component): Vários valores de uma lista (cargos, equipes, etiquetas) num popup com busca, caixas de seleção, grupos, "Selecionar todos" e "Limpar".
- `MultiSelectOption` (type)
- `NativeSelect` (component): `<select>` do sistema com a aparência do DS (equivalente ao native-select do shadcn).
- `NativeSelectOption` (type)
- `PopupPresentation` (type)
- `SearchInput` (component): Campo de busca com lupa.
- `Select` (component): Lista curta e fixa (status, prioridade, tipo).
- `SelectOption` (type)
- `sheetBackdropClass` (const)
- `sheetPositionerClass` (const)
- `Switch` (component): Liga/desliga uma preferência com efeito imediato.
- `useControlLabel` (hook): Liga um controle ao rótulo: dentro de FieldBlock usa o contexto; fora, desenha rótulo/ajuda/erro (a menos que `hideLabel`).
- `useFieldContext` (hook): Dentro de um FieldBlock?


## navigation

Navegação: Sidebar, PageHeading, StickyHeader, Breadcrumb, ContextBar, Tabs, SegmentedControl, ActionMenu, ProductMark.

- `ActionMenu` (component): Menu "⋯" de ações secundárias de linha, card ou cabeçalho.
- `actionMenuTriggerClass` (function)
- `Breadcrumb` (component): Trilha. REGRA: só ancestrais, nunca a página atual (o título é a página atual).
- `ContextBar` (component): Barra de contexto de uma página de REGISTRO (ciclo, tarefa, reunião, membro).
- `Crumb` (type)
- `MenuAction` (type)
- `PageHeading` (component): Título da tela + descrição opcional + ações à direita.
- `PageToolbar` (component): Barra da página (FilterBar, visões salvas, busca) que gruda COLADA abaixo do cabeçalho fixo (PageHeading).
- `ProductMark` (component): Marca-padrão (grafo de três nós, um dourado).
- `SegmentedControl` (component): Alterna visualização ou recorte (Lista | Cards; Plano | Ciclos | Cronograma).
- `Sidebar` (component): Navegação principal do app: marca (ou `header`, ex.
- `StickyHeader` (component): Cabeçalho que gruda no topo do ancestral rolável e marca `data-stuck` quando grudou.
- `SyncStatus` (component): Indicador de sincronização no pé da sidebar.
- `TabItem` (type)
- `Tabs` (component): Abas de seção de uma entidade: sublinhado de 2px ink na ativa, 12px.


## collections

Coleções: TableToolbar, FacetFilter, DataTable (vira cards no celular), DisplayControls, ListPanel/ListRow, Kanban.

- `collectionThresholds` (const)
- `CollectionView` (type)
- `Column` (type)
- `DataTable` (component): Tabela padrão: contorno arredondado, cabeçalho gelo 12px, linhas 13.5px com divisória, vira blocos rotulados abaixo de 1024px (o rótulo vem do header quando é string).
- `Density` (type)
- `DensityControl` (component)
- `DisplayControls` (component): Cards|Lista (ou Quadro|Lista) + Compacto.
- `FacetFilter` (component): Filtro multi-seleção por atributo.
- `FacetOption` (type)
- `KanbanBoard` (component): Contêiner horizontal do quadro, com rolagem própria.
- `KanbanCard` (component): Card de quadro: só título, responsável e prazo.
- `KanbanColumn` (component): Coluna de quadro: cabeçalho com ponto de status + contagem, área de soltar.
- `ListPanel` (component): Prévia titulada dentro de um painel com vários assuntos (dashboard/home).
- `ListRow` (component): Linha de lista: marcador · (contexto / título / descrição) · meta · ações.
- `RowList` (component): Lista de linhas com borda: superfície, borda de 1 px e divisórias.
- `TableSort` (type): O que a tabela precisa de um `useSort` (passe o retorno inteiro).
- `TableToolbar` (component): Busca + filtros + "Limpar" + contagem "X de Y" (aria-live).
- `useCollectionDisplay` (hook): Estado de visualização/densidade persistido por área.


## feedback

Feedback de operação: notify/Toaster, Callout, useOperation, OperationButton, OperationFeedback, Skeleton.

- `Callout` (component): Aviso fixo dentro da página (não some).
- `ListSkeleton` (component): Linhas de uma lista enquanto ela abre: marca, duas linhas de texto e um valor à direita, dentro da mesma moldura da lista final.
- `notify` (function): Dispara um toast de qualquer lugar (não precisa de contexto React).
- `NotifyAction` (type): Ação do toast que leva ao resultado ("Ver título", "Abrir pedido").
- `NotifyOptions` (type)
- `Operation` (type)
- `OperationButton` (component): Botão que conta o progresso ("Salvando…") e se desabilita enquanto confirma ou após falha.
- `OperationFeedback` (component): Bloco de erro com a saída certa.
- `OperationSuccess` (type)
- `PageSkeleton` (component): A página enquanto abre, na forma da anatomia que ela vai ter: cabeçalho, abas e o corpo certo (linhas de lista, cartões de indicador e gráfico, registro com coluna de propriedades, seções de configuração).
- `Skeleton` (component): Esqueleto de carregamento: blocos gelo com pulso suave.
- `Toaster` (component): Monte uma vez perto da raiz (AppShell já monta).
- `UncertainFailure` (class): Falha em que não se sabe se o servidor gravou (rede caiu, timeout).
- `useDelayed` (hook): `true` depois de `ms`: atrasa o que só deve aparecer se a espera for longa (esqueleto, "Carregando…").
- `useOperation` (hook): Um gesto que espera confirmação, com a mesma forma em todo o produto.


## status

Status de trabalho (5 estados), StatusLabel, StatusBar, HealthDot, Stepper, NextStep, Timeline.

- `HealthDot` (component): Saúde de uma entidade: ponto + palavra.
- `NextStep` (component): Moldura de "próximo passo": o único lugar em que o dourado emoldura algo.
- `StatusBar` (component): Barra empilhada de distribuição (quantos em cada estado) + legenda.
- `statusColor` (const)
- `statusLabel` (const)
- `StatusLabel` (component): Ponto de status + rótulo.
- `statusOrder` (const)
- `Step` (type)
- `Stepper` (component): Etapas de um ciclo/processo.
- `Timeline` (component): Linha do tempo vertical: o que aconteceu, em ordem.
- `TimelineItem` (type)
- `WorkStatus` (type)


## date-picker

DatePicker (Calendar próprio do DS) e utilitários de data ISO.

- `DatePicker` (component): Seletor de data (Popover + Calendar, pt-BR).
- `formatIsoDate` (function): "2026-09-30" → "30/09/2026".


## layout

Casca: AppShell, ShellBanner, EntityHeader, ReadingColumn, SplitLayout.

- `AppShell` (component): Casca do app: sidebar à esquerda (ou topo+drawer no celular), conteúdo que rola sozinho, toaster montado.
- `BottomNav` (component): Barra de navegação em pílula, flutuando no rodapé (só no celular por padrão).
- `EntityHeader` (component): Cabeçalho de uma ENTIDADE com seções (cliente, projeto, conta): trilha, marca + nome + descrição + ações, abas.
- `ReadingColumn` (component): Coluna de leitura (620px) centralizada, para páginas de texto e formulários longos.
- `SettingsLayout` (component): Página de configurações: subnavegação à esquerda (vira faixa rolável de abas abaixo de 1024px) e conteúdo com título da seção.
- `SettingsNavItem` (type)
- `SettingsSection` (component): Seção de configuração: rótulo e explicação à esquerda, campos à direita (empilha abaixo de 1024px).
- `ShellBanner` (component): Faixa de alerta global (topo do main).
- `SplitLayout` (component): Registro: conteúdo principal + coluna de propriedades.


## charts

Gráficos SVG sem dependência: AreaChart, LineChart, BarChart, Sparkline, BarList, DonutChart, FunnelChart, CalendarHeatmap, ProgressRing.

- `AreaChart` (component): Evolução no tempo com volume (receita, visitantes, vagas abertas).
- `BarChart` (component): Comparação entre categorias ou períodos discretos.
- `BarList` (component): Ranking horizontal (origem de leads, produtos mais vendidos, motivos de perda).
- `BarListItem` (type)
- `CalendarHeatmap` (component): Intensidade por dia (atividade, vendas, entrevistas).
- `CartesianProps` (type)
- `chartColor` (function): Cor da série i (usa tokens, então acompanha qualquer tema).
- `ChartConfig` (type): Configuração compartilhada das séries: chave → rótulo, cor e ícone.
- `ChartContainer` (component): Moldura opcional: fornece a ChartConfig aos gráficos filhos e expõe cada cor como variável CSS `--chart-<chave>` (útil em legendas e textos próprios).
- `ChartCurve` (type)
- `ChartDatum` (type)
- `ChartLegend` (component): Legenda horizontal. Use quando há 2+ séries e não dá para rotular direto.
- `ChartSeries` (type)
- `ChartTooltip` (component): Tooltip posicionado (absoluto).
- `ChartTooltipContent` (component): Conteúdo do tooltip (sem posicionamento).
- `ChartTooltipIndicator` (type)
- `ChartTooltipItem` (type)
- `ChartTooltipOptions` (type): Opções do tooltip dos gráficos cartesianos.
- `DonutChart` (component): Parte de um todo com 2–6 fatias (mix de receita, status de faturas).
- `DonutItem` (type)
- `FunnelChart` (component): Conversão entre etapas (lead → cliente, candidatura → contratação).
- `FunnelStage` (type)
- `LineChart` (component): Tendência sem volume (taxa, preço, NPS): só a linha.
- `linePath` (function): Curva monotônica (Fritsch–Carlson): suave sem inventar picos entre pontos.
- `MiniBarChart` (component): Barrinhas de atividade num cartão pequeno (7 dias, 12 meses, 24 horas).
- `niceDomain` (function): Escala "bonita": passos 1 · 2 · 2,5 · 5 · 10 × 10ⁿ, sempre incluindo zero.
- `niceRange` (function): Escala "bonita" sem forçar o zero (para linhas de taxa/preço), com folga relativa.
- `ProgressRing` (component): Anel de progresso compacto (meta atingida, score, capacidade).
- `Sparkline` (component): Mini tendência sem eixos, ao lado de um número.
- `SrTable` (component): Tabela escondida para leitores de tela: o valor exato de cada ponto.
- `useChartConfig` (hook): Lê a ChartConfig do ChartContainer mais próximo (ou null).
- `useElementWidth` (hook): Largura observada de um elemento (para gráficos responsivos).


## dashboard

Dashboard: KpiCard, KpiGrid, Delta, ChartCard, GoalMeter, ActivityFeed, Leaderboard, CompareStat.

- `ActivityFeed` (component): Feed de atividade recente (quem fez o quê em quê, quando).
- `ActivityItem` (type)
- `ChartCard` (component): Moldura de gráfico. O título é a pergunta que o gráfico responde ("De onde vêm os leads?"), a descrição dá período e unidade.
- `ChartCardTotals` (component): Totais clicáveis no cabeçalho do ChartCard: cada um troca a série do gráfico (padrão "Bar Chart – Interativo").
- `CompareStat` (component): Dois números lado a lado (este mês × anterior; plano × real).
- `Delta` (component): Variação contra um período.
- `GoalMeter` (component): Progresso até uma meta (quota de vendas, orçamento, vagas preenchidas).
- `KpiCard` (component): Indicador de topo de dashboard: rótulo, número grande, delta com período, e opcionalmente sparkline ou meta.
- `KpiGrid` (component): Grade de KPIs: 1 coluna no celular, 2 no tablet, `cols` no desktop.
- `Leaderboard` (component): Ranking de pessoas/contas (vendedores, recrutadores, clientes).
- `LeaderRow` (type)


## data

Estado de tabela: useSort, SortHeader, useSelection, selectionColumn, BulkBar, usePagination, Pagination, PropertyList.

- `BulkBar` (component): Barra de ações em massa: aparece flutuando no rodapé quando há seleção.
- `Pagination` (component): "1–20 de 312" + anterior/próxima + páginas próximas.
- `PropertyList` (component): Propriedades de um registro (lateral de contato, candidato, pedido).
- `selectionColumn` (function): Coluna de checkbox pronta para DataTable.
- `SortDir` (type)
- `SortHeader` (component): Cabeçalho clicável de coluna ordenável.
- `SortState` (type)
- `usePagination` (hook): Pagina uma lista no cliente.
- `useSelection` (hook): Seleção múltipla por id.
- `useSort` (hook): Ordena `rows` por chaves declaradas em `by`.


## pipeline

Pipelines por etapa: StagePath, RecordCard.

- `PathStage` (type)
- `RecordCard` (component): Card de registro em quadro: título, subtítulo (empresa, vaga, cliente), valor em destaque, etiquetas, dono e data.
- `StagePath` (component): Caminho de etapas de UM registro (topo da página de negócio/candidato).


## lib-text

Texto pt-BR: normalize (busca sem acento), plural, initials.

- `initials` (function): Iniciais de um nome: "Ana Beatriz Lopes" → "AL".
- `normalize` (function): Normaliza para busca sem acento e sem caixa (pt-BR).
- `plural` (function): "1 tarefa" / "3 tarefas".


## lib-format

Formatação pt-BR: formatCurrency, formatNumber, formatPercent, formatDelta, formatCompact, formatDate, formatRelative.

- `formatCompact` (function): 1250000 → "1,3 mi"
- `formatCurrency` (function): 1234.5 → "R$ 1.234,50".
- `formatDate` (function): "30/09/2026"; `short` → "30 set"; `time` acrescenta a hora ("30/09/2026, 14:05").
- `formatDelta` (function): Variação assinada: 0.125 → "+12,5 %", -0.2 → "−20 %" (sinal de menos tipográfico).
- `formatNumber` (function): 1234.5 → "1.234,5"; -20 → "−20"
- `formatPercent` (function): 0.1234 → "12,3 %". Recebe fração (0–1), não porcentagem.
- `formatRelative` (function): Data relativa: "há 5 min", "ontem", "em 3 dias".


## lib-theme

Tema e marca: useTheme, applyTheme, themeScript, brandPresets.

- `applyTheme` (function): Aplica tema/marca no documento (ou em outro elemento raiz).
- `BRAND_KEY` (const)
- `brandPresets` (const): Presets de themes.css.
- `DEFAULT_BRAND` (const): Marca padrão: G4 clássico, aplicada sem atributo data-brand.
- `DEFAULT_TYPE` (const): Tipografia padrão: Figtree, aplicada sem atributo data-type.
- `resolvedTheme` (function): Tema efetivo agora ("system" resolvido pelo SO).
- `THEME_KEY` (const)
- `ThemeMode` (type)
- `themeScript` (const): Script inline para o <head>: aplica o tema salvo antes da primeira pintura.
- `TYPE_KEY` (const)
- `typePresets` (const): Presets de tipografia (eixo independente da cor): <html data-type="…">.
- `useTheme` (hook): Estado de tema + marca com persistência.


## lib-color

Utilidades de cor para temas de cliente: contraste WCAG e derivação de uma marca completa (claro + escuro) a partir de 1–2 cores.

- `bestOn` (function): Melhor cor de texto sobre `bg` entre as candidatas (padrão: branco × quase-preto).
- `brandCss` (function): CSS pronto para colar em themes.css (ou no globals.css do app).
- `BrandTokens` (type)
- `contrast` (function): Razão de contraste (1–21).
- `deriveBrand` (function): Deriva os tokens de marca para claro e escuro a partir da cor de ação (primary) e, opcionalmente, da cor de destaque (accent).
- `ensureContrast` (function): Escurece (ou clareia) `color` até atingir `min` de contraste contra `against`.
- `hexToRgb` (function)
- `luminance` (function): Luminância relativa WCAG 2.x.
- `mix` (function): Mistura `a` com `b` (t = 0 → a, 1 → b).
- `Rgb` (type)
- `rgbToHex` (function)
- `tintFill` (function): Preenchimento de identidade (avatar, agente, app) com iniciais brancas: tints claros escurecem até 4,6:1.


## theme

ThemeToggle (claro/escuro/sistema).

- `ThemeToggle` (component): Alternador Claro · Escuro · Sistema.


## inputs

Entradas especializadas: TextField, PasswordField, NumberField, CurrencyField, MaskedField (CPF/CNPJ/CEP/telefone), OtpInput, TagInput, Slider, RadioGroup, ChoiceCards, ToggleGroup, FileDropzone, Rating, InlineEdit.

- `applyMask` (function): Padrão: 9 = dígito. Ex.: "999.999.999-99".
- `ChoiceCards` (component): Cards selecionáveis (plano, tipo de conta, modelo de contratação).
- `ChoiceOption` (type)
- `CurrencyField` (component): Valor em reais com máscara "caixa registradora": os dígitos entram pela direita (1 → 0,01 → 0,12 → 1,23).
- `FileDropzone` (component): Área de soltar arquivos + lista com progresso.
- `InlineEdit` (component): Texto que vira campo no clique (nome de negócio, título de vaga, célula de planilha).
- `Mask` (type)
- `MaskedField` (component): Campo com máscara. `value` = texto mascarado; `onChange(masked, digits)`.
- `masks` (const): Máscaras brasileiras prontas.
- `NumberField` (component): Número com −/+. Setas ↑↓ mudam `step`; Shift multiplica por 10.
- `OtpInput` (component): Código de verificação.
- `PasswordField` (component): Senha com mostrar/ocultar.
- `passwordStrength` (function): Força 0–4 por comprimento e variedade.
- `RadioGroup` (component): Escolha única entre 2–6 opções sempre visíveis.
- `Rating` (component): Nota 1–N (scorecard de entrevista, avaliação de fornecedor).
- `Slider` (component): Faixa contínua. Passe `number` para um valor ou `[min, max]` para intervalo (filtro de faixa salarial, preço).
- `TagInput` (component): Lista livre de etiquetas (skills, tags de lead, e-mails).
- `TextareaField` (component): Texto longo. `autosize` cresce até `maxRows`; contador com maxLength.
- `TextField` (component): Campo de texto completo.
- `ToggleGroup` (component): Grupo de botões com estado (negrito/itálico, dias da semana, filtros rápidos).
- `UploadItem` (type)


## charts-advanced

Gráficos avançados: Treemap, WaterfallChart, ScatterChart, RadarChart, GaugeChart, BulletChart, SankeyChart, HeatmapMatrix, ComboChart, ProportionBar, GanttChart.

- `BulletChart` (component): Realizado × meta com faixas qualitativas, numa linha.
- `ComboChart` (component): Volume em barras (eixo esquerdo) + taxa em linha (eixo direito): receita e margem, contratações e tempo médio, pedidos e ticket médio.
- `GanttChart` (component): Cronograma: tarefas no tempo com progresso e marco.
- `GanttTask` (type)
- `GaugeChart` (component): Um número contra faixas (NPS, SLA, uso do plano, atingimento de meta).
- `HeatmapMatrix` (component): Intensidade em duas dimensões: coorte × mês (retenção), dia × hora (picos de atendimento), vendedor × etapa.
- `ProportionBar` (component): Uma barra de 100 % dividida em partes, com legenda e percentuais.
- `RadarChart` (component): Perfil em 3–8 critérios na mesma escala (scorecard de entrevista, avaliação de fornecedor, maturidade).
- `RetentionCurves` (component): Curvas de retenção por coorte: uma linha por coorte (as recentes mais escuras), a média em destaque.
- `SankeyChart` (component): Fluxos entre etapas (origem do lead → etapa → ganho/perdido; visita → conta → plano).
- `SankeyLink` (type)
- `SankeyNode` (type)
- `ScatterChart` (component): Correlação entre duas medidas (ticket × ciclo de venda; salário × tempo de casa).
- `ScatterPoint` (type)
- `Treemap` (component): Composição por área (estoque por categoria, receita por produto, gasto por centro de custo).
- `TreemapItem` (type)
- `WaterfallChart` (component): Ponte entre um valor inicial e um final (receita bruta → lucro líquido; caixa inicial → final; MRR de início → fim).
- `WaterfallStep` (type)


## states

Estados de tela e avisos: StateView e presets (404, erro, sem acesso, offline), Spinner, LoadingState, Banner, InlineMessage, AlertCard, notifyPromise.

- `AlertCard` (component): Aviso com lista de problemas e ações (importação com linhas inválidas, formulário com vários erros, checklist de pendências).
- `Banner` (component): Faixa de anúncio no topo de uma página ou do app (período de teste acabando, fatura atrasada, novidade).
- `CountBadge` (component): Contador de atenção (não lidas, pendências).
- `ErrorState` (component): Falha ao carregar. Mostra o código e, recolhidos, os detalhes técnicos (para copiar e mandar ao suporte).
- `ForbiddenState` (component): Sem permissão. Diga quem pode dar acesso.
- `InlineMessage` (component): Status curto em linha: "Salvo há 2 min", "3 campos com erro", "Sincronizando…".
- `LoadingOverlay` (component): Véu sobre um card/tabela enquanto recarrega (filtro trocado, página nova): mantém o conteúdo anterior visível e indica a espera.
- `LoadingState` (component): Spinner + frase do que está acontecendo ("Carregando faturas…").
- `MaintenanceState` (component): Manutenção programada.
- `NotFoundState` (component): Página ou registro que não existe (link quebrado, registro excluído).
- `NotificationDot` (component): Ponto de notificação sobre um ícone (sino, avatar).
- `notifyPromise` (function): Acompanha uma operação demorada em toast: "Exportando…" → "Relatório exportado" (ou erro).
- `OfflineState` (component): Sem conexão. O app tenta de novo sozinho; diga isso.
- `Spinner` (component): Indicador de espera indeterminada.
- `StateView` (component): Estado que ocupa uma área inteira (página, painel, card grande).
- `SuccessState` (component): Conclusão de um fluxo longo (importação, onboarding, pagamento).


## overlays-extra

Tooltip, HoverCard, Menu (submenus, checkbox/radio), ContextMenu, Menubar, Sheet, CommandPalette, Lightbox.

- `Command` (type)
- `CommandPalette` (component): Paleta de comandos (⌘K): busca tolerante a acento e erro de digitação, grupos, ↑↓ Enter, atalhos visíveis.
- `ContextMenu` (component): Clique direito (ou toque longo) sobre uma área.
- `HoverCard` (component): Prévia de uma entidade ao passar o mouse num link (pessoa, empresa, vaga).
- `Lightbox` (component): Imagem em tela cheia sobre fundo escuro, com ←/→, contador e legenda.
- `LightboxImage` (type)
- `Menu` (component)
- `Menubar` (component): Barra de menus de aplicativo de documento (Arquivo · Editar · Ver), como em editores, planilhas e construtores.
- `MenuEntry` (type)
- `Sheet` (component): Painel temporário que entra pela borda: filtros avançados, detalhes de um item, carrinho, ajuda.
- `Tooltip` (component): Rótulo curto em tinta escura.
- `TooltipGroup` (component): Agrupa tooltips: depois do primeiro, os vizinhos abrem na hora.
- `useCommandShortcut` (hook): Abre com ⌘K / Ctrl+K em qualquer lugar.


## disclosure

Revelação progressiva: Accordion, Collapsible, TreeView, DescriptionToggle.

- `Accordion` (component): Seções recolhíveis. `multiple` permite várias abertas.
- `AccordionItem` (type)
- `Collapsible` (component): Uma seção opcional: "Opções avançadas", "Mostrar detalhes".
- `CollapsibleContent` (component): Conteúdo componível com altura animada (respeita "reduzir movimento").
- `CollapsibleRoot` (component): Raiz componível (controlada com `open`/`onOpenChange`).
- `CollapsibleTrigger` (component): Gatilho componível. Sem `className`, vem com o visual de linha (chevron gira ao abrir via `group-data-panel-open:`).
- `DescriptionToggle` (component): Texto longo recortado em `lines` linhas com "Ver mais"/"Ver menos".
- `TreeNode` (type)
- `TreeView` (component): Árvore navegável (pastas, centros de custo, plano de contas, estrutura de times).


## media

Mídia: Carousel, SlideDeck + helpers de slide, ImageGallery, FileCard, AspectFrame.

- `AspectFrame` (component): Moldura com proporção fixa (16/9, 4/3, 1/1) para imagem, vídeo, mapa.
- `Carousel` (component): Carrossel com rolagem nativa (arrasta no toque, trackpad funciona), encaixe por item, setas, pontos ou miniaturas, ←/→ (↑/↓ na vertical) quando focado.
- `CarouselApi` (type): Controle do carrossel por fora (botões próprios, "3 de 8", sincronizar com outra lista).
- `DeckSlide` (type)
- `FileCard` (component): Arquivo anexado: tipo, nome, tamanho, quem/quando.
- `FileIcon` (component): Ícone de tipo de arquivo (pela extensão).
- `formatBytes` (function): 1536000 → "1,5 MB"
- `ImageGallery` (component): Grade de imagens que abre em Lightbox.
- `Slide` (component): Tela base de um slide (1280×720).
- `SLIDE_HEIGHT` (const)
- `SLIDE_WIDTH` (const): Tamanho de desenho de todo slide.
- `SlideBullets` (component): Título + lista de pontos (até 5).
- `SlideCanvas` (component): Renderiza um slide de 1280×720 escalado para a largura disponível.
- `SlideDeck` (component): Visualizador de apresentação: palco 16:9, miniaturas, ←/→ (e PageUp/Down, Home/End), F para tela cheia, barra de progresso, contador e notas do apresentador.
- `SlideQuote` (component): Citação (cliente, pesquisa, entrevista).
- `SlideSplit` (component): Duas colunas: texto à esquerda, gráfico/imagem/tabela à direita.
- `SlideStat` (component): Números grandes (2–4) com rótulo e variação.
- `SlideTitle` (component): Capa ou abertura de seção.


## ai

Padrões de IA: AskAI, mensagens de chat, SystemMessage, AgentTrace, ToolCallsSection, citações, sugestões.

- `AgentTrace` (component): Linha do tempo em cascata de uma execução de agente: cada passo (pensar, ferramenta, busca, subagente) com barra proporcional ao tempo, tokens e status.
- `AiBadge` (component): Marca "gerado por IA".
- `AiMark` (component): Marca do assistente: a esfera G4 OS num disco de gelo.
- `AiSource` (type)
- `AnswerVersions` (component): Pager das versões de uma resposta: "‹ 2 de 3 ›".
- `AskAILauncher` (component): Botão flutuante que abre o assistente (canto inferior direito).
- `AskAIPanel` (component): Painel do assistente: cabeçalho com contexto, conversa (ou sugestões no estado vazio) e composer.
- `ChatComposer` (component): Campo de pergunta. Enter envia, Shift+Enter quebra linha.
- `ChatMessage` (component): Uma fala. Usuário: balão gelo à direita.
- `ChatRole` (type)
- `ChatThread` (component): Coluna de mensagens com rolagem própria que acompanha o fim enquanto o usuário está no fim (não “puxa” se ele subiu para ler).
- `CitationChip` (component): Número de citação dentro do texto: “… 18 % [2]”.
- `citedPlainText` (function): Texto puro (sem marcação nem citações) de uma resposta: para Copiar e leitores.
- `CitedText` (component): Resposta com marcação simples e citações [n].
- `ComposerAttachment` (type)
- `ComposerChip` (component): Chip do rodapé do composer (modelo, fonte, contexto).
- `formatCountdown` (function): 75 → "01:15"
- `formatDuration` (function): Duração legível: 820 ms, 3,4 s, 1 min 12 s.
- `JsonView` (component): JSON legível com realce mínimo (chave, string, número).
- `PromptSuggestion` (type)
- `PromptSuggestions` (component): Sugestões de pergunta para o estado vazio do assistente.
- `RateLimitNotice` (component): Aviso inline de limite atingido (dentro do chat ou acima do composer).
- `RelatedQuestions` (component): Depois da resposta: campo "Pergunte algo relacionado" (com rótulo visível) e até três perguntas sugeridas.
- `SourceCards` (component): Fontes de uma resposta como cartões pequenos (selo, origem, título, número).
- `SourceList` (component): Lista de fontes abaixo de uma resposta.
- `SourceStack` (component): Resumo compacto das fontes para o topo da resposta: selos sobrepostos + "8 fontes ⌄".
- `SystemMessage` (component): Aviso do sistema dentro de uma conversa ou painel de IA (contexto trocado, ferramenta indisponível, resposta interrompida).
- `ThinkingIndicator` (component): "Pensando…" com três pontos.
- `TokenUsageMeter` (component): Consumo de tokens/créditos no período, com aviso a partir de 80 %.
- `ToolCall` (type)
- `ToolCallCard` (component): Uma chamada de ferramenta: nome, status, duração; entrada e saída ao expandir.
- `ToolCallsSection` (component): Seção recolhível "Usou N ferramentas" com ícones empilhados.
- `ToolCallStatus` (type)
- `TraceKind` (type)
- `TraceStep` (type)
- `useStreamingText` (hook): Simula streaming de texto (demos e protótipos).


## interactive

Interação e marketing: InputModal, AnimatedModal, LimitDialog, ImageSphere, Hero, FeatureGrid, BeforeAfter, NumberTicker.

- `AnimatedModal` (component): Modal com entrada coreografada (sobe, desfoca → nítido, conteúdo em cascata).
- `BeforeAfter` (component): Comparação antes/depois com alça arrastável (e setas do teclado).
- `CopyButton` (component): Copia um texto e confirma com ✓ por 1,5 s.
- `Feature` (type)
- `FeatureGrid` (component): Grade de recursos: ícone, título, descrição.
- `HeroSection` (component): Hero de página pública/landing.
- `ImageSphere` (component): Esfera 3D de imagens (distribuição de Fibonacci): arraste para girar, inércia ao soltar, setas do teclado giram.
- `ImageWithFallback` (component): Imagem com esqueleto enquanto carrega e alternativa quando falha (iniciais do nome ou ícone).
- `InputModal` (component): Modal de uma pergunta só: um campo grande e Enter para enviar.
- `KeyCombo` (component): Combinação de teclas: ["⌘", "K"] → ⌘ K.
- `LimitDialog` (component): Alerta de limite (taxa de uso, cota do plano, créditos de IA).
- `Logo` (type)
- `LogoCloud` (component): Logos de clientes/parceiros em tom neutro (sem competir com a marca).
- `Marquee` (component): Faixa que rola sozinha (logos, depoimentos curtos).
- `NumberTicker` (component): Número que conta até o valor ao entrar na tela.
- `ScreenFrame` (component): Moldura de janela de navegador para prints do produto.
- `SphereImage` (type)
- `StatsBand` (component): Faixa de números de impacto (landing, relatório).
- `Testimonial` (component): Depoimento: citação, pessoa, cargo e empresa.


## filters

Filtros estruturados: FilterBar, filtros ativos, construtor campo/operador/valor, visões salvas, período, estado na URL.

- `ActiveFilterChip` (component): Filtro aplicado: clique edita, × remove.
- `AddFilterMenu` (component): "+ Filtro": escolhe o campo (com busca), depois operador e valor, e aplica.
- `applyFilters` (function): Aplica busca + filtros.
- `ConditionEditor` (component): Editor de um filtro: operador + valor, pelo tipo do campo.
- `DateRange` (type)
- `DateRangeFilter` (component): Seletor de período. Em dashboard fica no topo à direita e vale para a tela toda; em lista, vira um filtro de data comum.
- `DateRangePreset` (type)
- `dateRangePresets` (const)
- `describeCondition` (function): "Status é Ativo, Pendente" — texto do chip e do leitor de tela.
- `describeDateRange` (function)
- `EmptyFilterResult` (component): Nenhum resultado com o recorte atual.
- `emptyFilterState` (const)
- `FilterBar` (component): Barra de filtros de uma lista.
- `FilterCondition` (type)
- `FilterContext` (type)
- `FilterField` (type)
- `FilterOperator` (type)
- `filterOperators` (function): Operadores disponíveis por tipo de campo, na ordem de uso mais comum.
- `FilterOption` (type)
- `FiltersApi` (type)
- `FilterSheet` (component): Todos os campos num Sheet (folha inferior no celular).
- `FilterState` (type)
- `FilterType` (type)
- `FilterValue` (type)
- `Highlight` (component): Destaca os trechos buscados, ignorando acento e caixa ("joao" acha "João").
- `matchesQuery` (function): Busca textual: todas as palavras precisam aparecer em algum dos textos (E).
- `MatchToggle` (component): Alterna como os filtros se combinam.
- `parseFilters` (function)
- `QuickFilter` (component): Botão de faceta na barra (Status ▾).
- `resolveDateRange` (function): Converte um preset em datas ISO (inclusivas).
- `SavedView` (type)
- `SavedViews` (component): Abas de visões ("Todos · Meus · Atrasados") acima da FilterBar.
- `SavedViewsApi` (type)
- `serializeFilters` (function): Serializa para querystring: q=texto & f=campo~op~valor (valores múltiplos com "|", faixa com "..").
- `useFilters` (hook): Estado de busca + filtros de uma coleção.
- `useSavedViews` (hook): Visões salvas de uma lista.
- `useUrlFilters` (hook): Espelha o estado na URL (location.search) sem recarregar e sem mexer no hash nem em outros parâmetros.


## search

Busca: SearchPalette (⌘K global com escopos e prévia) e busca local de tabela ("/").

- `SearchPalette` (component): Busca global ⌘K. Escopos em abas (Tab alterna; prefixos ">" "@" "#" entram direto), resultados agrupados por tipo com o trecho destacado, prévia à direita, buscas recentes quando vazio, "Ver todos em X" que leva à tabela
- `SearchResult` (type)
- `SearchScope` (type)
- `SearchSource` (type)
- `TableSearch` (component): Campo de busca da lista.
- `useSlashShortcut` (hook): "/" foca o campo (fora de outro campo).
- `useTableSearch` (hook): Busca livre local, sem filtros estruturados.


## charts-extra

Gráficos de negócio que as bibliotecas comuns não trazem prontos.

- `BoxPlot` (component): Distribuição por grupo: caixa = 50 % central (Q1–Q3), traço = mediana, bigodes até 1,5 × IQR, pontos = outliers.
- `BumpChart` (component): Posição no ranking ao longo do tempo (1 no topo).
- `DivergingBarChart` (component): Pesquisa em escala (Likert 5 pontos, eNPS, satisfação).
- `DumbbellChart` (component): Faixa entre dois valores por linha: meta × real, 2025 × 2026, mínimo × máximo.
- `Histogram` (component): Frequência por faixa.
- `NpsChart` (component): NPS completo: número (−100 a 100), barra de composição e distribuição das notas 0–10 colorida por grupo.
- `ParetoChart` (component)
- `PunchCard` (component): Dia × hora com bolinhas de área proporcional.
- `RadialBars` (component): 2–5 metas em anéis concêntricos (atingimento por time, uso por recurso).
- `SlopeChart` (component): Antes × depois por item.
- `WaffleChart` (component): Proporção em 100 quadrados.


## charts-shapes

Formas: pizza/rosca e radial.

- `PieChart` (component): Pizza ou rosca. `innerRadius` (0–0,9 do raio) vira rosca; o centro mostra total ou a fatia ativa.
- `PieItem` (type)
- `RadialChart` (component): Um valor em arco (uso do plano, meta, score) com o número no centro.


## dates

Datas e horários. Regras (docs/padroes/datas.md · showcase Formulários › Datas): · valor é ISO só-data ("2026-09-30"); horário "HH:MM"; nada de <input type="date"> · digitar é sempre possível (dd/mm/aaaa, "sexta", "em 3

- `AgendaEvent` (type)
- `AvailabilityPicker` (const): Alias: mesmo componente com o nome do padrão de produto.
- `Calendar` (component): Grade de calendário própria (sem dependência), no tema do DS.
- `CalendarEvent` (type)
- `CalendarProps` (type)
- `DateBadge` (component): Data em formato de "folhinha": mês em cima, dia grande.
- `DateInput` (component): Data digitável. Aceita dd/mm/aaaa (com máscara), atalhos ("hoje", "sexta", "em 3 dias", "+5du", "fim do mês") e o calendário no ícone.
- `DateRangePicker` (component): Período com presets, dois meses, comparação e contagem de dias úteis.
- `DateRangeValue` (type)
- `DateTimePicker` (component): Data + horário. Valor "2026-10-03T14:30" (hora local, sem fuso).
- `DueDatePicker` (component): Prazo de tarefa/documento: atalhos que as pessoas realmente usam (hoje, amanhã, 5 dias úteis, próxima segunda, fim do mês) + calendário.
- `MiniAgenda` (component): Agenda em lista, agrupada por dia (celular, painel lateral, “próximos”).
- `MonthCalendar` (component): Mês inteiro com eventos em chips (agenda, entregas, entrevistas).
- `MonthPicker` (component): Mês ("2026-09") ou intervalo de meses.
- `MultiDatePicker` (component): Vários dias soltos (folgas, datas de treinamento, entregas).
- `QuarterPicker` (component): Trimestre ("2026-T3").
- `RelativeTime` (component): Tempo relativo ("há 5 min", "ontem") com a data exata no title e em <time dateTime>.
- `Slot` (type)
- `SlotPicker` (component): Escolha de data + horário disponível (entrevista, reunião, visita), no estilo Calendly: dias com disponibilidade à esquerda, horários à direita.
- `TimePicker` (component): Horário 24h digitável ("9", "930", "9h30", "14:30") com lista de sugestões a cada `step` minutos.
- `WeekPicker` (component): Uma semana (seg–dom).
- `YearPicker` (component): Ano ("2026"). Para exercício fiscal, safra, safra de coorte.


## lib-dates

Datas só-dia em pt-BR, sem dependência.

- `addBusinessDays` (function): Soma (ou subtrai) n dias úteis.
- `addDays` (function)
- `addMonths` (function): Soma meses sem estourar (31/01 + 1 mês = 28/02 ou 29/02).
- `addYears` (function)
- `brHolidays` (function): Feriados nacionais do Brasil + pontos facultativos móveis (Carnaval e Corpus Christi, que quase todo mundo trata como folga).
- `businessDaysBetween` (function): Dias úteis em [from, to], inclusive nas duas pontas.
- `clampIso` (function)
- `CompareMode` (type)
- `comparePeriod` (function): Período de comparação: "previous" = mesmo tamanho imediatamente antes (meses cheios comparam com os meses cheios anteriores); "year" = mesmas datas no ano anterior.
- `daysBetween` (function): Diferença em dias corridos (b − a).
- `describeDue` (function): Prazo relativo para leitura rápida: "vence hoje", "vence amanhã", "vence em 3 dias úteis", "venceu há 2 dias".
- `describeTimeZone` (function): Fuso do navegador legível: "Horário de Brasília (GMT−3)".
- `eachDay` (function): Todos os dias de [from, to] (inclusive).
- `easterSunday` (function): Domingo de Páscoa (algoritmo de Meeus/Jones/Butcher).
- `endOfMonth` (function)
- `endOfQuarter` (function)
- `endOfWeek` (function)
- `endOfYear` (function)
- `formatDateLong` (function): "sexta, 03/10/2026"
- `formatDayMonth` (function): "3 out" · com ano se diferente do ano de referência: "3 out 2027"
- `formatIsoBr` (function): "30/09/2026"
- `formatMonthYear` (function): "setembro de 2026"
- `formatRange` (function): "1–15 out 2026" · "28 set – 4 out 2026" · "15 dez 2026 – 10 jan 2027"
- `hhmmOf` (function)
- `Holiday` (type)
- `holidayName` (function): Nome do feriado nessa data (nacional ou extra), ou undefined.
- `isAfter` (function)
- `isBefore` (function)
- `isBusinessDay` (function)
- `isHoliday` (function)
- `IsoDate` (type)
- `IsoRange` (type)
- `isoWeek` (function): Número da semana ISO-8601.
- `isSameDay` (function)
- `isWeekend` (function)
- `isWithin` (function)
- `maskDateTyping` (function): Máscara progressiva dd/mm/aaaa para o que está sendo digitado (só se for numérico).
- `matchPeriod` (function): Qual preset gera exatamente este intervalo (para marcar a opção ativa).
- `minutesOf` (function)
- `monthNames` (const)
- `monthShort` (const)
- `parseDateInput` (function): Entende o que a pessoa digita e devolve ISO (ou undefined): "30/09/2026" "30/09/26" "30/9" "30092026" "2026-09-30" "hoje" "amanhã" "depois de amanhã" "ontem" "sexta" "próxima segunda" "segunda que vem" "em 3 dias" "em 2
- `parseTimeInput` (function): "9" "930" "9:30" "9h30" "21h" → "09:30" / "21:00".
- `PeriodPreset` (type)
- `periodPresets` (const)
- `quarterOf` (function): 1–4
- `resolvePeriod` (function): Converte um preset em intervalo ISO inclusivo, relativo a `now`.
- `startOfMonth` (function)
- `startOfQuarter` (function)
- `startOfWeek` (function)
- `startOfYear` (function)
- `timeSlots` (function): Lista de horários "HH:MM" entre start e end (inclusive start, exclusivo end) a cada `step` minutos.
- `toDate` (function): "2026-09-30" → Date local ao meio-dia.
- `todayIso` (function): Hoje em ISO (ou a data de referência passada).
- `toIso` (function): Date → "2026-09-30".
- `weekdayInitials` (const): Cabeçalho do calendário, começando na segunda.
- `weekdayMon` (function): Segunda-feira = 0 … domingo = 6.
- `weekdayNames` (const): Domingo = 0 (como Date#getDay).
- `weekdayShort` (const)


## data-grid

DataGrid: a tabela "de trabalho" do DS.

- `DataGrid` (component)
- `DataGridProps` (type)
- `downloadCsv` (function)
- `GridColumn` (type)
- `GridEditor` (type)
- `GridRowAction` (type)
- `gridToCsv` (function): CSV pt-BR (separador ";", decimal ",", BOM para o Excel abrir acentos).
- `GridValue` (type)


## ai-workspace

Workspace de agente (docs: showcase › IA e interação › Workspace de agente).

- `AgentComposer` (component): Campo de tarefa do agente: texto com autoaltura, "/" abre comandos, "+" anexa (arquivo, dados do app, link), microfone grava com forma de onda e cronômetro, seletor de agente/modelo e chips de contexto.
- `AgentMessage` (component): Resposta do agente no workspace: status (RunSummary) no topo, texto, artefatos, sugestões de continuação e ações (copiar, refazer, avaliar).
- `AgentPlan` (component): Plano do agente antes/durante a execução: o que vai fazer, em que ordem, onde está.
- `ApprovalRequest` (component): O agente pede permissão antes de uma ação com efeito externo (enviar e-mail, alterar registros, cobrar).
- `approvalRequestLabels` (const): Textos padrão (pt-BR) do ApprovalRequest; base para traduzir só o que muda.
- `ApprovalRequestLabels` (type): Textos do ApprovalRequest.
- `ApprovalState` (type)
- `ApprovalTone` (type): Aparência do pedido pendente.
- `ArtifactCard` (component): Cartão do que o agente produziu, dentro da resposta.
- `ArtifactIcon` (component): Ícone do tipo de artefato, em moldura.
- `artifactIcons` (const)
- `ArtifactKind` (type)
- `ArtifactPanel` (component): Painel de artefatos com abas (Relatório · Contexto · Saída · planilhas…).
- `ArtifactTab` (type)
- `ContextItem` (type)
- `ContextView` (component): O que o agente usou para responder, agrupado por tipo, com peso relativo.
- `IconRail` (component): Navegação compacta só com ícones (56px), rótulo no tooltip.
- `InsightCard` (component): Achado do agente: rótulo (kicker), manchete e, embaixo, a evidência (lista ranqueada, barra de métrica) com um marcador de tom.
- `KpiPair` (component): Dois números lado a lado num mesmo card (e um gráfico embaixo em `children`).
- `MetricBar` (component): Métrica em barra dividida: parte boa (ok) e parte perdida (rose), com % e variação.
- `PlanStep` (type)
- `RailItem` (type)
- `RankedList` (component): Lista numerada com selo ("Novo") ou variação à direita.
- `ReasoningBlock` (component): Raciocínio do agente, recolhido por padrão ("Pensou por 8 s ›").
- `ReportSection` (component): Seção de relatório: título + corpo com largura de leitura.
- `ResizableSplit` (component): Dois painéis lado a lado com divisor arrastável (mouse, toque ou teclado: ←/→ 2 %, Shift 10 %, Home/End nos limites, duplo clique volta ao padrão).
- `RunStatus` (type)
- `RunSummary` (component): Linha de status de uma execução ("Concluído em 40 s ›").
- `SheetArtifact` (component): Planilha compacta gerada pelo agente: letras de coluna, números de linha, cabeçalho fixo.
- `SheetColumn` (type)
- `SlashCommand` (type)
- `Waveform` (component): Forma de onda de gravação (modo voz, reunião).


## ai-sessions

Interface agêntica de sessões (app de trabalho com agente: G4 OS desktop, Codex, T3).

- `AgentOption` (type)
- `AgentPicker` (component): Avatares dos agentes que vão agir; clique escolhe o principal.
- `AnswerCard` (component): Resposta do agente. Conteúdo rico (negrito, código, links).
- `ConnectedTool` (type)
- `Disclaimer` (component): "G4 OS usa IA e pode cometer erros." Sempre abaixo do campo.
- `MessageActions` (component): Ações de uma resposta: Copiar, Markdown, (refazer, avaliar) e ramificar.
- `MinimapItem` (type)
- `ModelEffort` (type)
- `ModelOption` (type)
- `ModelPicker` (component): Chip de modelo + esforço ("⚡ Sol · Leve ⌄").
- `PermissionMode` (type)
- `PermissionModeChip` (component): Chip de permissão do agente, sempre visível no campo.
- `ProjectGroup` (component): Pasta de projeto na lista de sessões: ícone + nome + contagem, recolhível, sessões aninhadas, "Mostrar mais" depois de `limit` e menu ⋯ do projeto.
- `RegenerateOption` (type): Como refazer uma resposta: de novo, mais curta, mais detalhada ou mais simples.
- `regenerateOptionLabels` (const): Rótulos (pt-BR) do menu de refazer, na ordem em que aparecem.
- `SessionComposer` (component): Campo de sessão no formato do app: anexo (clipe), pasta de contexto, agentes, microfone, enviar, e a linha de ferramentas conectadas.
- `SessionDetails` (component): Conteúdo de detalhes da sessão (modo, criador, nome, etiquetas, notas) e arquivos, sem moldura.
- `SessionFile` (type)
- `SessionGroup` (component): Grupo de sessões por data ("HOJE", "ONTEM").
- `SessionHeader` (component): Título da sessão no centro com menu (renomear, mover, arquivar, exportar) e ações à direita: navegador do agente, gravar reunião, buscar, compartilhar, painel de informações.
- `SessionInfoPanel` (component): Painel lateral da sessão: abas Informações | Navegador.
- `SessionItem` (component): Linha da lista de sessões: título, tempo, status e etiquetas.
- `SessionListMode` (type)
- `SessionMode` (type)
- `SessionProject` (type): Projeto que agrupa sessões (repositório, cliente, iniciativa).
- `SessionSidebar` (component): Coluna de sessões completa: título com filtro e busca, "Nova sessão", abas (recentes, favoritas, pastas, arquivadas), filtro por etiqueta, grupos por data e seletor de workspace no rodapé.
- `SessionStatus` (type)
- `SessionStatusChip` (component): Chip de status de uma sessão.
- `SessionStatusGlyph` (component): Status de sessão em versão mínima (lista "clean"): ponto pulsante dourado = trabalhando, ponto verde = resposta pronta, alerta rose = falhou, relógio = rotina agendada.
- `SessionSummary` (type)
- `SessionTab` (type)
- `StepGroup` (component): Grupo de atividade recolhível ("Reunindo contexto").
- `StepItem` (type)
- `ThreadMinimap` (component): Trilho de marcas à esquerda da conversa: um traço por mensagem (curto = pessoa, longo = agente).
- `ToolsBar` (component): "6 ferramentas conectadas" + logos sobrepostos + "+N" + gerenciar.
- `ToolsButton` (component): Versão compacta do ToolsBar para o rodapé de um campo limpo: botão "6 ferramentas" (ponto rose se alguma falhou) que abre a lista com status e "Gerenciar".
- `UserBubble` (component): Mensagem da pessoa: balão suave alinhado à direita.
- `VoiceModeButton` (component): Botão redondo flutuante do modo voz (canto inferior direito).
- `VoiceOverlay` (component): Sobreposição do modo voz: orbe com forma de onda, estado (ouvindo/falando), transcrição ao vivo, silenciar e encerrar.
- `WorkspaceSwitcher` (component): Rodapé da coluna: workspace atual com troca.


## brand

Momentos de marca G4.

- `AchievementCard` (component): Conquista/marco atingido: ícone dourado em navy + texto.
- `BrandBadge` (component): Selo de marca: Premium, Founders, Conquista.
- `BrandButton` (component): Botão para usar DENTRO de BrandPanel.
- `BrandPanel` (component): Painel de momento de marca.


## g4os

Identidade G4 OS (KV G4 OS): a esfera, o logotipo, o gradiente de marca, o orb e os três pontos da IA.

- `AiDots` (component): Os três pontos da IA (navy, céu, gelo azul).
- `AiGreeting` (component): Saudação da IA no tom do KV: três pontos, o nome no gradiente de marca e a pergunta em navy com a última palavra esmaecendo.
- `AiOrb` (component): Orb: a esfera da IA desfocada atrás do conteúdo (saudação, capa, login).
- `BrandHaze` (component): Névoa quente do KV, atrás de momentos de marca claros.
- `G4OSLogo` (component): Logotipo G4 OS: "G4" na tinta e "OS" fino no gradiente dourado → aço.
- `G4OSSymbol` (component): Esfera G4 OS: o símbolo da IA.
- `GradientText` (component): Texto no gradiente de marca do KV.


## connections

Conexões e apps: marketplace de integrações, detalhe da conexão, permissões por conta e o "cartão do agente" (o que ele acessa, quem ele aciona, o que entrega).

- `AccountRow` (component): Conta conectada (loja, workspace, perfil de anúncios).
- `AgentConnection` (type)
- `AgentConnectionRow` (component): Linha de conexão dentro do cartão do agente.
- `AgentResult` (type)
- `AppGrid` (component): Grade de apps: 1 coluna no celular, 2 no desktop, linhas com respiro.
- `AppIcon` (component): Ícone de app/integração.
- `AppInfo` (type)
- `AppTile` (component): Linha de app no marketplace: ícone, nome, descrição de uma linha e a ação.
- `ConnectionsCard` (component): Cartão do agente: faixa de cabeçalho (avatar, nome, escopo) sobre um cartão interno com o que ele acessa (conexões), quem ele aciona (subagentes) e o que ele entrega (resultados).
- `ConnectionState` (type)
- `ConnectionStatus` (component): Selo de estado de uma conexão.
- `DataSyncTable` (component): Tabela chave/valor do que está sincronizado.
- `HalftoneBand` (component): Faixa decorativa pontilhada (meio-tom) que some para baixo.
- `MarketplaceHero` (component): Faixa de abertura do marketplace: degradê suave (tokens accent + info + série 2, funciona no escuro) com 1–3 pílulas de exemplo do que dá para pedir.
- `PromptPill` (component): Pílula de prompt com o app em destaque: "[Slack] Resumir as atualizações…".
- `QuickActionsField` (component): Campo de "Ações rápidas" que abre a paleta (⌘K).
- `ResultRow` (component): Resultado entregue pelo agente (documento, PDF, planilha).
- `SidebarProgressCard` (component): Cartão "Primeiros passos" no rodapé da sidebar: anel + contagem.
- `Subagent` (type)
- `SubagentRow` (component): Subagente com ponto de estado (âmbar pulsando = executando).
- `ToolPermission` (type)
- `ToolPermissionList` (component): Permissões das ferramentas de UMA conta, separadas em leitura e escrita.
- `TrialBanner` (component): Linha de teste grátis/plano no rodapé da sidebar.


## email-compose

Escrever e-mail (com ou sem IA): remetente, destinatários com busca, assunto, corpo, modelo e envio com agendamento.

- `ComposeEmail` (component): Corpo do compositor (use dentro de Modal/Drawer ou numa página).
- `ComposeEmailDialog` (component): Compositor em modal (sobre a tela atual).
- `ComposeStatus` (type)
- `Person` (type)
- `PersonChip` (component): Pessoa como chip: avatar, nome, selo de verificado, remover opcional.
- `RecipientInput` (component): Campo de destinatários: chips + digitação com sugestões em duas seções ("Selecionar pessoa" = e-mails que batem com o texto; "Sugestões" = pessoas frequentes).
- `SplitButton` (component): Botão com ação principal + menu de alternativas (Enviar | ⌄ Agendar…).


## tags

Etiquetas coloridas (categoria, tipo, status) no estilo "banco de dados": fundo suave + texto AA, 9 matizes em tokens (--ds-tag-*-bg/-fg), claros e escuros.

- `Priority` (type)
- `PriorityIcon` (component): Ícone de prioridade em barras (3 barras crescentes; urgente = quadrado com !).
- `priorityLabel` (const)
- `PriorityPill` (component): Prioridade com ícone + rótulo (chip neutro).
- `StatusPill` (component): Status de tarefa com cor fixa por estado (presets).
- `TagColor` (type)
- `tagColorFor` (function): Cor estável para um texto (mesma categoria = mesma cor em qualquer tela).
- `tagColors` (const)
- `TagPill` (component): Etiqueta. `variant="soft"` (padrão) = fundo colorido; `"dot"` = contorno neutro com bolinha colorida (melhor em listas densas e ao lado de outras etiquetas).
- `TaskStatus` (type)
- `taskStatusLabel` (const)


## rich-text

Editor de texto rico LEVE (contentEditable + comandos do navegador).

- `richTextContentClass` (const): Estilos de leitura do conteúdo (h1–h3, listas, checklist, citação, código, tabela).
- `RichTextEditor` (component): Editor leve. Valor em HTML (controlado).
- `RichTextTool` (type)
- `RichTextToolbar` (component): Barra de ferramentas do editor (também serve para TipTap: passe `onCommand` e `active` do seu editor).
- `RichTextView` (component): Mostra texto rico (HTML do RichTextEditor, comentário, comunicado) só para leitura, com o mesmo estilo do editor.


## agent-builder

Construtor de agente: a "ficha" do agente ao lado da conversa com ele.

- `AddPropertyMenu` (component): Botão "+ Adicionar" com menu (aceita submenus).
- `AgentHeader` (component): Cabeçalho do agente: ícone grande, nome, descrição (ambos editáveis inline se receber os handlers).
- `AgentInstructions` (component): Instruções do agente: editor de texto rico com "Melhorar" (IA) no toolbar.
- `AgentStatus` (type)
- `AppAccessItem` (type): App que o agente pede para acessar: escopo em linguagem simples e estado da conexão.
- `AppAccessList` (component): Conceder acesso app a app: marca, nome, escopo em linguagem simples e, por app, "Conectar" (se a conta ainda não está ligada) ou um `Switch` de acesso.
- `BuilderSection` (component): Seção do construtor: título, selo opcional, descrição, ação à direita, conteúdo.
- `ChipItem` (type)
- `ChipPicker` (component): Chips removíveis + "+" com menu para adicionar (ferramentas, saídas, skills).
- `KnowledgeFile` (type): Arquivo de conhecimento do agente.
- `KnowledgeFiles` (component): Arquivos que o agente consulta: tipo, tamanho, progresso de envio, cancelar, erro com "Tentar de novo" e remover.
- `KnowledgeUpload` (type): Envio de um arquivo: chame `report(0–100)` durante o envio, resolva no fim, rejeite com `Error(mensagem)` se falhar e pare quando `signal` abortar (o usuário cancelou).
- `PropertyRow` (component): Linha de propriedade: rótulo à esquerda (fixo) e valor/chips à direita; empilha no celular.
- `PublishBar` (component): Ações do construtor: status + Compartilhar · Testar · Publicar · ⋯.
- `ToolGlyph` (component): Ícone de app/ferramenta: quadradinho com a inicial na cor da marca do app.
- `ToolToggleItem` (type): Ferramenta do agente: marca do app, nome, o que o agente faz com ela e se está ligada.
- `ToolToggleList` (component): Ferramentas do agente em grade (2 colunas; 1 em contêiner estreito): marca do app, nome, o que o agente faz com ela e um `Switch` por ferramenta, com o contador "5 de 6 ligadas".
- `TriggerItem` (type)
- `TriggerList` (component): Lista de gatilhos (quando o agente roda).
- `TriggerRow` (component)


## tasks-ai

Tarefas propostas pela IA (a partir de uma reunião, documento ou análise).

- `ProposalState` (type)
- `Subtask` (type)
- `SubtaskRow` (component): Sub-tarefa: círculo de concluído, título, tipo (pílula com ponto), responsável.
- `SubtaskType` (type)
- `TaskDestination` (type)
- `TaskProposal` (type)
- `TaskProposalCard` (component): Card de tarefa proposta.
- `TaskProposalList` (component): Painel de propostas: cabeçalho com contagem e "Aceitar todas / Recusar todas", cards em coluna (o primeiro aberto; os seguintes recolhidos e esmaecidos).


## catch-up

Resumo do que aconteceu enquanto a pessoa esteve fora ("catch up").

- `CatchUpDone` (component): "Tudo em dia": o resumo terminou e não sobrou nada para ler.
- `CatchUpItem` (type)
- `CatchUpPerson` (type)
- `CatchUpRow` (component): Uma linha do resumo: marca da fonte, a frase, onde e quando, quem.
- `CatchUpRowSkeleton` (component): Reserva a estrutura da linha enquanto o resumo chega, incluindo oferta e ação quando previstas.
- `CatchUpSection` (component): Uma seção do resumo: ícone, título e contagem, e as linhas.
- `CatchUpSectionId` (type)
- `catchUpSections` (const): As quatro seções, na ordem em que aparecem.
- `CatchUpSource` (type)
- `CatchUpSources` (component): Fontes lidas para o resumo, com a contagem do período.
- `CatchUpSourceState` (type)


## record-panel

Painel lateral de registro (estilo banco de dados): abre ao clicar numa linha da tabela sem tirar a pessoa da lista.

- `ActivitySection` (component): Atividade do registro (usa ActivityFeed).
- `FileRow` (component): Arquivo anexado: selo do tipo (ícone + rótulo), nome, ⋯.
- `FilesList` (component)
- `NotesTable` (component): Tabela pequena embutida (notas, critérios).
- `PropertyPill` (component): Pílula de propriedade (botão com menu).
- `PropertyPills` (component): Linha de pílulas de propriedades (quebra em várias linhas).
- `RecordFile` (type)
- `RecordFileKind` (type)
- `RecordPanel` (component): Painel do registro. Desktop: coluna à direita da lista (coloque-o ao lado do DataGrid).
- `RecordSection` (component): Seção do painel: título, ação à direita ("+ Adicionar", "Ver tudo", "Filtro").
- `SectionAddButton` (component): "+ Adicionar" no padrão das seções do painel.


## collab

Colaboração entre pessoas (não com a IA): conversa do time ao lado de um documento.

- `ActionRequiredBanner` (component): Faixa de ação obrigatória (ex.: "Envie o documento obrigatório") com botão tracejado que também aceita arrastar e soltar.
- `DateSeparator` (component): Separador de data no meio da conversa.
- `ReadingDocument` (component): Documento em tipografia de leitura (serifa editorial --ds-font-reading, medida ~68 caracteres).
- `TeamComposer` (component): Campo de mensagem do time: texto, imagem, anexo, "Enviar" (Enter envia; Shift+Enter quebra linha).
- `TeamMessage` (component): Mensagem de uma pessoa: avatar, nome, hora e texto.
- `TypingIndicator` (component): "• • •" de alguém digitando.


## ai-layout

Layout de app agêntico (docs: IA e interação › Layout de app agêntico).

- `AgentAppLayout` (component): Casca de app de agente (anatomia G): lista, conversa e painel, com navegação móvel.
- `AgentMobileView` (type)
- `CollapsedHistory` (component): Linha "67 mensagens anteriores ›" com fio fino: histórico recolhido no topo de uma conversa longa.
- `ListToggle` (component): Botão de recolher/mostrar a lista do AgentAppLayout (⌘\).
- `QuickSession` (type)
- `SessionQuickSwitcher` (component): Troca rápida de sessão (⌘K-lite) para quando a lista está recolhida: botão que abre um popover com busca, setas e Enter.
- `ThreadAction` (type)
- `ThreadDaySeparator` (component): Separador de dia na conversa ("Hoje", "12 mar").
- `ThreadHeader` (component): Cabeçalho da conversa: voltar (celular), título com menu (renomear, mover, exportar…) e ações compactas em ícone com tooltip.
- `ThreadView` (component): Área rolável da conversa.
- `useAgentLayout` (hook): Estado da lista do AgentAppLayout mais próximo (aberta, alternar, celular).


## structure

Estrutura: Separator, ScrollArea, Label, FieldSet/FieldGroup/FieldSeparator, Item (mídia · título · ações), Table estática, Prose (texto longo).

- `FieldGroup` (component): Empilha campos ou FieldSets com o espaçamento padrão de formulário.
- `FieldSeparator` (component): Divisória entre grupos de um formulário, com rótulo opcional ("ou").
- `FieldSet` (component): Grupo de campos com legenda: endereço, dados de cobrança, permissões.
- `Item` (component): Linha genérica de conteúdo: mídia (ícone/avatar/imagem) · título e descrição · ações.
- `ItemActions` (component): Ações à direita (Button ghost/quiet, IconButton, Switch, Badge).
- `ItemContent` (component)
- `ItemDescription` (component)
- `ItemGroup` (component): Lista de Items com borda única e divisórias.
- `ItemMedia` (component): Mídia à esquerda do Item: "icon" = quadrado gelo com ícone 16 px; "image" = miniatura 40 px.
- `ItemTitle` (component)
- `Label` (component): Rótulo visível de um controle.
- `Prose` (component): Tipografia de texto longo (equivalente ao Typography do shadcn): títulos, listas, links, citações, código e tabelas já no tema.
- `ScrollArea` (component): Área com rolagem própria: barra fina que aparece ao passar o mouse ou rolar, esmaecimento nas bordas quando há mais conteúdo e foco por teclado.
- `Separator` (component): Divisória de 1 px em `line`.
- `Table` (component): Tabela estática simples (comparativo, especificação, resumo de fatura).
- `TableBody` (component)
- `TableCaption` (component)
- `TableCell` (component): Célula. `numeric` = direita + tabular-nums (formate com formatCurrency/formatNumber).
- `TableFooter` (component)
- `TableHead` (component): Cabeçalho de coluna. `numeric` alinha à direita (valores, quantidades).
- `TableHeader` (component)
- `TableRow` (component)


## controls

Controles: Toggle, ButtonGroup, InputGroup (complementos dentro do campo), ColorPicker.

- `ButtonGroup` (component): Botões colados que formam uma ação composta (Anterior | Próximo, Copiar | ⌄, zoom − 100 % +).
- `ButtonGroupText` (component): Segmento de texto não clicável dentro de um ButtonGroup ("100 %", "Página 2").
- `ColorPicker` (component): Escolha de cor para personalização (cor da marca do cliente, etiqueta, calendário, pipeline).
- `colorSwatches` (const): Amostras padrão: neutros + paleta de marca G4 + tons de apoio.
- `InputGroup` (component): Campo com complementos: ícone, prefixo/sufixo de texto, botão, atalho, contador; acima/abaixo do texto (composer com barra de ações).
- `InputGroupAddon` (component): Complemento do InputGroup.
- `InputGroupButton` (component): Botão compacto dentro do InputGroup (copiar, limpar, enviar, mostrar senha).
- `InputGroupInput` (component): Input sem caixa para dentro do InputGroup.
- `InputGroupText` (component): Texto do complemento: "R$", "https://", ".com.br", "12/280".
- `InputGroupTextarea` (component): Textarea sem caixa para dentro do InputGroup (composer, comentário com barra).
- `Toggle` (component): Botão liga/desliga isolado (negrito, fixar, favoritar, mostrar arquivados).


## navigation-extra

NavigationMenu: navegação de site/portal com painéis de links.

- `NavigationMenu` (component)
- `NavigationMenuEntry` (type)
- `NavigationMenuLinkItem` (type)
- `navigationMenuTriggerClass` (const): Visual do gatilho do NavigationMenu, para links soltos ao lado dele (equivale a navigationMenuTriggerStyle).


## sortable

SortableList: reordenar por arraste e teclado, com anúncios pt-BR.

- `SortableList` (component): Lista reordenável (etapas do pipeline, campos do formulário, prioridade de fila, ordem de colunas).


## questionnaire

Questionnaire: perguntas uma por vez (escolha, múltipla, livre, condicionais).

- `Questionnaire` (component): Perguntas uma por vez, com progresso, atalhos numéricos (1–9 marcam opções), Voltar/Pular/Próxima e perguntas condicionais.
- `QuestionnaireAnswer` (type): Resposta de uma pergunta; `null` = pulada.
- `QuestionnaireAnswers` (type)
- `QuestionnaireChoice` (type)
- `QuestionnaireQuestion` (type)


## data-view

useDataView: busca + filtros + ordenação + paginação + seleção de uma coleção num hook só, na ordem certa (filtra → ordena → pagina) e com o estado na URL.

- `DataViewApi` (type)
- `useDataView` (hook)
- `useUrlState` (hook): Um valor espelhado num parâmetro da URL (location.search), sem recarregar e sem mexer no hash nem nos outros parâmetros.


## attachment

Attachment (equivalente ao Attachment do shadcn/ui): anexo componível para composer de IA, mensagens, formulários e listas de documentos.

- `Attachment` (component): Raiz do anexo. `orientation="vertical"` para miniatura em cima (grade de imagens).
- `AttachmentAction` (component): Ação de ícone do anexo (remover, baixar, tentar de novo).
- `AttachmentActions` (component): Grupo de ações à direita (ou embaixo, na vertical).
- `AttachmentContent` (component): Texto do anexo (título + descrição).
- `AttachmentDescription` (component): Linha de apoio: tipo e tamanho.
- `AttachmentGroup` (component): Conjunto de anexos. `layout="row"` rola na horizontal (composer), `grid` em grade (galeria, mensagens), `list` empilhado (formulário).
- `AttachmentMedia` (component): Mídia do anexo: ícone do tipo (pela extensão em `name`), miniatura (`variant="image"` com `src`) ou um ícone próprio em `children` (link, pasta).
- `AttachmentState` (type)
- `AttachmentTitle` (component): Nome do arquivo (truncado).
- `AttachmentTrigger` (component): Torna o anexo inteiro clicável (abrir prévia, baixar) sem aninhar botões: cobre o card e deixa as ações por cima.


## command

Command componível (equivalente ao Command do shadcn/ui, sem cmdk): busca + lista com grupos, ↑ ↓ Home End Enter, vazio, carregando e atalhos.

- `CommandDialog` (component): Command dentro de um diálogo (a paleta montada à mão).
- `CommandEmpty` (component): Aparece quando nenhum item combina com a busca.
- `CommandGroup` (component): Grupo com título. Some sozinho quando a busca esvazia todos os itens dele.
- `CommandInput` (component): Campo de busca. Setas mudam o item ativo; Enter executa.
- `CommandItem` (component): Um item. `value` é o texto usado na busca (padrão: children, se for texto); `keywords` acrescenta sinônimos e siglas.
- `CommandList` (component): Lista que rola (até `maxHeight`).
- `CommandLoading` (component): Enquanto a busca no servidor responde.
- `commandMatch` (function): Combina sem acento e sem caixa: cada palavra da busca aparece no texto; ou, para erro de digitação ("confg"), as letras da busca em ordem dentro de UMA palavra que começa com a mesma letra.
- `CommandMenu` (component): Raiz: guarda a busca e o item ativo.
- `CommandSeparator` (component): Linha entre grupos (escondida durante a busca).
- `CommandShortcut` (component): Atalho à direita do item: ["⌘", "N"] ou ["mod", "N"] (⌘ no Mac, Ctrl nos outros).


## conversation

Conversa (equivalentes a Bubble, Marker e Message Scroller do shadcn/ui).

- `Bubble` (component): Uma fala em balão. Use `align="end"` para quem está usando o app e `start` para as outras pessoas.
- `BubbleContent` (component): O balão em si. Use quando precisar de controle: `render` troca o elemento (um link ou botão que abre a mensagem) mantendo o visual.
- `BubbleGroup` (component): Falas seguidas da mesma pessoa: espaço menor entre balões, cantos encaixados, avatar e nome uma vez só.
- `BubbleReaction` (component): Uma reação: emoji + contagem.
- `BubbleReactions` (component): Linha de reações sobreposta à borda do balão.
- `BubbleStatus` (type)
- `BubbleVariant` (type)
- `Marker` (component): Nota inline numa conversa: "Ana entrou na conversa", "Contexto trocado", "Pensando…" (`shimmer`), separador rotulado ("Hoje", "Novas mensagens") ou linha com borda.
- `MarkerContent` (component): Texto do Marker.
- `MarkerIcon` (component): Ícone decorativo do Marker (escondido do leitor de tela).
- `MarkerTone` (type)
- `MessageScroller` (component): Moldura da conversa: posiciona o botão "Ir para o fim" sobre a rolagem.
- `MessageScrollerButton` (component): Botão flutuante "Ir para o fim": aparece quando a pessoa sobe para ler e mostra quantas mensagens chegaram enquanto isso.
- `MessageScrollerContent` (component): Lista das mensagens. Acompanha o fim, ancora turnos novos e compensa a rolagem quando itens entram no topo.
- `MessageScrollerItem` (component): Uma linha da conversa.
- `MessageScrollerProvider` (component): Estado compartilhado da rolagem de uma conversa.
- `MessageScrollerViewport` (component): Área que rola. `preserveScrollOnPrepend` mantém a mensagem que a pessoa está lendo no lugar quando mensagens antigas entram no topo.
- `useMessageScroller` (hook): Ações de rolagem: `scrollToMessage(id)`, `scrollToEnd()`, `scrollToStart()` e o estado (`atEnd`, `unread`).
- `useMessageScrollerScrollable` (hook): Se ainda dá para rolar para o começo (`start`) ou para o fim (`end`).
- `useMessageScrollerVisibility` (hook): O que está à vista: ids visíveis e o turno atual (último `scrollAnchor` que passou do topo).


## nav-tree

Navegação com subitens: tipos NavItem/NavGroup/NavSubItem/NavParentItem da Sidebar, WorkspaceMenu, menu da pessoa, SectionNav (docs/ajuda), flyout do trilho recolhido e helpers navMatches/navActiveDeep.

- `navActiveDeep` (function): O item ou um descendente está ativo.
- `NavEntry` (type): Entrada de um grupo da Sidebar: item com destino (com ou sem subitens) ou item-pai sem destino.
- `NavFlyout` (component): Item com subitens no trilho recolhido: o ícone abre um menu à direita (hover, clique, Enter/Espaço/↓ ou →) com o nome do item e os subitens.
- `NavGroup` (type)
- `NavGroupAction` (type)
- `navHasActiveChild` (function): Algum descendente (subitem, sub-subitem) está ativo?
- `navHref` (function): Destino de um item: o próprio href ou o do primeiro subitem.
- `NavIcon` (type)
- `NavItem` (type)
- `navMatches` (function): O caminho atual corresponde a este destino (exato ou prefixo de segmento)?
- `NavParentItem` (type): Item-pai sem página própria ("Cadastros"): a linha inteira só abre e fecha os subitens.
- `NavRailItem` (component): Item do trilho recolhido da Sidebar: link com tooltip, ou flyout se tiver subitens.
- `NavSection` (type)
- `NavSubItem` (type): Subitem de um item da navegação.
- `NavTreeGroup` (component): Peça interna da Sidebar (grupo com recolher, + e “Mais”).
- `NavTreeItem` (component): Peça interna da Sidebar (item aberto com subitens).
- `SectionNav` (component): Navegação de seções para conteúdo longo (documentação, central de ajuda, configurações com muitas páginas): só texto, títulos de seção, subitens na linha-guia, filtro opcional fixo no topo e o item ativo sempre visível.
- `SidebarUser` (type)
- `SidebarUserMenu` (component): Rodapé com a pessoa logada; com `menu`, abre um menu (à direita no desktop, para cima no celular).
- `sumBadges` (function): Soma dos contadores dos subitens (todos os níveis).
- `useNavOpenState` (hook): Estado aberto/fechado da árvore (por id), persistido com `storageKey`.
- `Workspace` (type)
- `WorkspaceMenu` (component): Seletor de workspace/empresa no topo da sidebar (`<Sidebar header={…}>`): logo, nome e plano; o menu lista os workspaces com atalhos ⌘1…⌘9 e "Adicionar workspace".


## history

Histórico e progresso no tempo.

- `Milestone` (type)
- `ProjectProgressCard` (component): Projeto em um cartão: título, responsável, prazo, progresso e marcos numa linha do tempo vertical; um único próximo passo no rodapé.
- `Revision` (type)
- `RevisionTimeline` (component): Histórico de revisões navegável por dia.


## presence

Presença: quem está por aqui e onde.

- `LocationTag` (component): Lugar + hora local. Pílula com o nome do lugar e, ao lado, a hora no fuso dele (atualiza sozinha); o fuso completo aparece no tooltip.
- `StackedList` (component): Lista em destaque com o diretório completo empilhado embaixo.
- `StackedListItem` (type)


## lib-office

Modelo de planilha, documento e apresentação do DS.

- `cellAddress` (function): Endereço A1 a partir de linha/coluna 0-based.
- `CellFormat` (type): Como a coluna é formatada na tela e no Excel.
- `CellStyle` (type): Aparência que vem do arquivo.
- `CellValue` (type): Valor de célula. Datas: `Date` ou "AAAA-MM-DD".
- `columnLetter` (function): 0 → "A", 25 → "Z", 26 → "AA".
- `DocAlign` (type)
- `DocBlock` (type)
- `DocRun` (type): Trecho de texto com ênfase.
- `docRuns` (function)
- `DocTableColumn` (type)
- `DocText` (type)
- `documentOutline` (function): Títulos de nível 1 e 2, na ordem, para sumário e navegação.
- `evaluateArithmetic` (function): Avalia aritmética simples (+ − * / parênteses) sem `eval`.
- `excelNumberFormat` (function): Código de formato numérico do Excel equivalente (o Excel aplica o separador do idioma de quem abre).
- `fileSlug` (function): Nome de arquivo seguro a partir do título: "Revisão Q3 · 2026" → "revisao-q3-2026".
- `FileWorkbook` (type)
- `formatCell` (function): Texto da célula como aparece na tela (pt-BR, mesmas funções de lib/format).
- `GridSheet` (type): Aba já posicionada (o que vem de um .xlsx).
- `isNumericFormat` (function)
- `LaidCell` (type)
- `layoutSheet` (function): Posiciona a aba numa grade com endereços do Excel: título, descrição, cabeçalho, dados e total.
- `OfficeChart` (type): Gráfico do Office reduzido ao que importa para desenhar com os gráficos do DS: tipo, categorias e séries com os valores salvos no arquivo.
- `OfficeDocument` (type)
- `Presentation` (type)
- `PresentationParagraph` (type)
- `PresentationRun` (type)
- `PresentationShape` (type)
- `PresentationSlide` (type)
- `SheetLayout` (type)
- `toCellDate` (function): "2026-10-01" é dia local (mesma regra de lib/format).
- `Workbook` (type)
- `WorkbookAggregate` (type)
- `WorkbookColumn` (type)
- `WorkbookRow` (type)
- `WorkbookSheet` (type)


## lib-office-files

Leitura de arquivos reais do Office no navegador, sem dependências: descompacta o .xlsx/.docx/.pptx (DecompressionStream) e lê o XML (DOMParser).

- `OFFICE_SHEET_LIMITS` (const): Limites de leitura de planilha.
- `OfficeFile` (type)
- `OfficeFileError` (class)
- `OfficeFileErrorCode` (type): Erro de leitura com motivo, para a tela escolher título e saída: legacy (.xls/.doc/.ppt/.xlsb), protected (senha), unsupported (não é Office), corrupt, network.
- `OfficeSource` (type)
- `readCsv` (function)
- `readDocx` (function)
- `readOfficeFile` (function): Lê .xlsx, .docx, .pptx ou .csv, detectando o tipo pelo conteúdo.
- `readPptx` (function)
- `readXlsx` (function)


## office

Planilhas, documentos e apresentações na linguagem do DS, escritos em código ou lidos de arquivos reais do Office.

- `DocumentView` (component): Documento paginado em A4, com a mesma estrutura do .docx exportado: capa, sumário com número de página, cabeçalho e "Página X de Y", tabelas que continuam na página seguinte repetindo o cabeçalho.
- `OfficeChartView` (component): Gráfico do Office (de .xlsx ou .pptx) desenhado com os gráficos do DS: barras, linhas, áreas, rosca, combinado e dispersão.
- `OfficeFileState` (type)
- `OfficeFileView` (component): Mostra um arquivo do Office com o visualizador certo: .xlsx no WorkbookView, .docx no DocumentView, .pptx no SlideDeck.
- `OfficeSlide` (component): Um slide de .pptx no canvas de 1280×720 do DS.
- `presentationSlides` (function): Converte uma apresentação lida de .pptx nos slides do SlideDeck (com as notas do apresentador).
- `useOfficeFile` (hook): Lê um .xlsx, .docx ou .pptx (File, Blob, ArrayBuffer ou URL) e devolve o estado: idle (sem arquivo), loading, error (mensagem pronta) ou ready.
- `WorkbookView` (component): Planilha na linguagem do DS (mesmo visual do DataGrid): abas no topo, título e fonte acima da tabela, cabeçalho e total fixos, colunas fixas.


## meeting

Reuniões (notas com IA): LiveRecordingIndicator (saúde da gravação por faixa), CallDetectedPrompt, TranscriptView, MomentCitation, AiNotes/AiNotesToggle (autoria pessoa × IA), MeetingCard, MeetingHeader, TemplatePicker.

- `AiNotes` (component): Notas da reunião com autoria visível: o que a pessoa escreveu fica em tinta (`text-ink`); o que a IA completou fica em tom suave com marcador dourado, e cada bullet da IA leva o momento citado (MomentCitation).
- `aiNotesLabels` (const): Textos padrão (pt-BR) do AiNotes.
- `AiNotesLabels` (type): Textos do AiNotes e do AiNotesToggle.
- `AiNotesToggle` (component): Alterna "Minhas notas" e "Notas aprimoradas".
- `callDetectedLabels` (const): Textos padrão (pt-BR) do CallDetectedPrompt.
- `CallDetectedLabels` (type): Textos do CallDetectedPrompt.
- `CallDetectedPrompt` (component): Aviso discreto quando outro app (Zoom, Meet, Teams) começa a usar o microfone: oferece gravar notas, sem gravar sozinho.
- `findTurnAt` (function): Trecho em andamento no instante `t` (o último que começou até `t`).
- `formatMoment` (function): Segundos → "12:04" (ou "1:02:04" a partir de uma hora).
- `LiveRecordingIndicator` (component): Gravação de reunião em andamento, com SAÚDE e não só "gravando": nível real (`level`, 0–1, RMS do microfone), faixas Você/Outros com sinal ou silêncio e uma frase de saúde ("ouvindo · 148 palavras no último minuto").
- `liveRecordingLabels` (const): Textos padrão (pt-BR) do LiveRecordingIndicator.
- `LiveRecordingLabels` (type): Textos do LiveRecordingIndicator.
- `MeetingCard` (component): Linha de uma reunião gravada: horário e duração, título, origem (app da call, "Nova reunião"), resumo de uma linha e participantes quando houver.
- `meetingCardLabels` (const): Textos padrão (pt-BR) do MeetingCard.
- `MeetingCardLabels` (type): Textos do MeetingCard.
- `MeetingHeader` (component): Cabeçalho da página de uma reunião: título, data, duração, participantes, modelo de notas (TemplatePicker) e ações (Perguntar, Exportar, Compartilhar).
- `meetingHeaderLabels` (const): Textos padrão (pt-BR) do MeetingHeader.
- `MeetingHeaderLabels` (type): Textos do MeetingHeader.
- `MeetingPerson` (type): Participante de reunião.
- `MeetingStatus` (type)
- `MeetingTemplate` (type): Modelo de notas: as seções que a IA preenche.
- `meetingTemplates` (const): Modelos padrão (pt-BR).
- `MomentCitation` (component): Citação de um momento da reunião ("12:04") ao lado de um bullet da IA.
- `momentCitationLabels` (const): Textos padrão (pt-BR) do MomentCitation.
- `MomentCitationLabels` (type): Textos do MomentCitation.
- `NoteAuthor` (type): Quem escreveu: `me` = a pessoa (durante a call), `ai` = a IA (a partir da transcrição).
- `NoteCitation` (type): Momento citado por um bullet.
- `NoteItem` (type)
- `NoteSection` (type)
- `RecordingState` (type)
- `RecordingTrack` (type): Faixa de captura: `mic` = sua voz, `system` = o que sai do alto-falante (os outros).
- `TemplatePicker` (component): Escolhe o modelo de notas de uma reunião.
- `templatePickerLabels` (const): Textos padrão (pt-BR) do TemplatePicker.
- `TemplatePickerLabels` (type): Textos do TemplatePicker.
- `TranscriptSpeaker` (type): Quem fala num trecho: `me` = microfone (Você), `other` = áudio do sistema (Outros).
- `TranscriptTurn` (type): Um trecho da transcrição.
- `TranscriptView` (component): Transcrição por falante (Você · Outros), com horário clicável.
- `transcriptViewLabels` (const): Textos padrão (pt-BR) do TranscriptView.
- `TranscriptViewLabels` (type): Textos do TranscriptView.


## lib-motion

Movimento com contrato: o tempo só corre quando a pessoa vê, e movimento reduzido mostra o fim da cena (não uma cena congelada no meio).

- `EASE_TRAVEL` (const): Curva de viagem (igual a `--ease-travel`): saída lenta, trajeto claro, chegada suave.
- `everyVisible` (function): Repete `run` a cada `ms` só enquanto a aba está visível.
- `prefersReducedMotion` (function): Se a pessoa pediu menos movimento ao sistema.
- `useBeat` (hook): O compasso de uma cena: 0, 1, … `count - 1`, um a cada `ms` com a aba visível, e de novo do 0.
- `useEasedWidth` (hook): Uma pílula cujas palavras mudam: a largura vai da antiga à nova em vez de saltar.
- `useGlide` (hook): Uma lista ancorada no pé (conversa, feed): quando um item chega ou sai, os que já estavam deslizam até o novo lugar em vez de pular.
- `useInView` (hook): Se o elemento já entrou na tela (uma vez).
- `useOutgoing` (hook): O que estava na tela enquanto sai: quando `key` muda, devolve o valor anterior até a animação de saída terminar (chame `done` no `onAnimationEnd`).
- `useReducedMotion` (hook): `prefersReducedMotion` como estado: muda junto com a preferência do sistema.
- `useScrolled` (hook): Se a área de rolagem já passou de `threshold` px.
- `useVisibleInterval` (hook): `everyVisible` como hook.
- `whenIdle` (function): Roda quando o navegador fica ocioso: dados abaixo da dobra, prévias e pré-carregamentos que não podem atrasar a primeira tela.


## stage

Camada expressiva (palcos).

- `Chapter` (component): Capítulo de página pública: uma ideia por seção.
- `chapterTitleClass` (const): Título de capítulo e de chamada final: 34 px no celular, 48 px a partir de 640 px.
- `CtaButton` (component): Chamada principal de página pública: pílula com a seta num círculo, que anda e gira no hover.
- `FloatingFigure` (component): Figura que flutua sobre o palco (rosto de agente, ícone de app, peça), com a sombra no chão respirando junto.
- `Glass` (component): Vidro: uma peça do produto sobre o palco (cartão de rotina, aprovação, notificação), fosca para a paisagem aparecer atrás.
- `Kicker` (component): Sobretítulo de seção pública: monoespaçado, caixa alta, com o número do capítulo ("01 / Na prática").
- `SiteHeader` (component): Cabeçalho de site público (anatomia I).
- `SiteHeaderLink` (type)
- `SpeechBubble` (component): Balão de fala sobre quem fala (uma figura no palco).
- `Stage` (component): Palco: superfície expressiva com céu, dois morros e grão, todos de tokens (segue tema e marca).
- `StageSky` (component): Céu do hero: a luz do palco de ponta a ponta, sem borda, sumindo na página embaixo.
- `StageTone` (type)


## agent-orb

Rosto gerado de agente: um personagem pequeno e chapado, desenhado em SVG inline e derivado de forma determinística de uma semente estável (id do agente, nome do subagente, id da sessão).

- `AGENT_ORB_BODIES` (const)
- `AGENT_ORB_EXPRESSIONS` (const): O que o rosto mostra.
- `AGENT_ORB_EYES` (const)
- `AGENT_ORB_MOUTHS` (const)
- `AGENT_ORB_PALETTE` (const): Paleta dos rostos: um tom claro, um vizinho mais profundo e o matiz da tinta do rosto.
- `AGENT_ORB_SHAPES` (const): Silhueta do rosto. `circle` é o disco padrão; as outras são para agentes que a pessoa nomeia e molda, para uma frota se distinguir de relance.
- `AgentOrb` (component): Rosto do agente: avatar gerado a partir de uma semente, com expressão do que o agente está fazendo (pensando, lendo, trabalhando, esperando você) e movimento só em CSS.
- `AgentOrbBody` (type)
- `AgentOrbDesign` (type)
- `AgentOrbExpression` (type)
- `AgentOrbEyes` (type)
- `AgentOrbMotion` (type): `hover` (padrão) pisca uma vez ao passar o mouse ou focar o rosto ou o controle que o contém; `live` balança e pisca devagar (agente em execução); `none` deixa parado.
- `AgentOrbMouth` (type)
- `AgentOrbProps` (type)
- `AgentOrbShape` (type)
- `AgentOrbStack` (component): Pilha de rostos sobrepostos: quem participa de uma conversa, de um time ou de uma tarefa.
- `AgentOrbTier` (type): Feature weights per rendered size, so a 14px face still has eyes a pixel or two wide and a 40px face does not turn heavy.
- `getAgentOrbArt` (function): The drawn avatar (disc, body and face, or disc only when a glyph replaces the face), memoized per seed and size tier.
- `getAgentOrbClip` (function)
- `getAgentOrbDesign` (function): Memoized per seed (bounded), so re-renders of long lists never re-hash.
- `getAgentOrbTier` (function)
- `hashAgentSeed` (function): FNV-1a, 32-bit: stable across runs and platforms.


## code

------------------------------------------------------------------

- `CodeBlock` (component): Bloco de código ou de texto para copiar: diz o que é (linguagem ou nome do arquivo), copia o bloco inteiro e tem altura limitada com rolagem própria, para um bloco longo não empurrar o resto da página.
- `DiffView` (component): Diff como quem revisa lê: o arquivo, quantas linhas entraram e saíram, cada linha com o número antigo e o novo, adicionadas em verde, removidas em vermelho (sempre com + e −, nunca só a cor) e as palavras que mudaram mar


## lib-scale

Escalas de cor para dados de intensidade (mapa de calor, coorte, mapa por UF, pivô, horizon).

- `divergingColor` (function): Cor de uma posição `t` (-1 a 1) numa escala divergente: negativo em `chart-neg`, positivo em `chart-pos`, zero quase transparente.
- `onScaleInk` (function): Cor do texto sobre uma célula de intensidade `t`: tinta normal até o meio da escala, tinta invertida acima (legível nos dois temas).
- `QuantizedScale` (type)
- `quantizeScale` (function): Divide um domínio em `steps` degraus de limites "redondos" (escala em degraus: mais fácil de ler e comparar do que contínua).
- `scaleExtent` (function): Mínimo e máximo de uma lista ignorando null/NaN.
- `scaleShade` (function): Curva de opacidade: degraus baixos ficam distinguíveis do fundo e os altos não "estouram" (mesmo critério do HeatmapMatrix).
- `ScaleTone` (type)
- `sequentialColor` (function): Cor de uma intensidade `t` (0–1) numa escala de uma cor só.


## charts-kit

Peças compartilhadas pelos gráficos analíticos (coorte, mapa por UF, horizon, dispersão conectada, sankey, cascata): · ScaleLegend: legenda de escala em degraus ou contínua, com hover que destaca a faixa no gráfico · Cha

- `AxisBreak` (component): Marca de quebra (duas barras inclinadas) para um eixo que não começa em zero.
- `ChartScrubber` (component): Controle de tempo para gráficos: arraste, clique ou use as setas (Home/End vão ao início e ao fim).
- `ChartScrubberProps` (type)
- `LinkedHighlight` (type)
- `ScaleLegend` (component): Legenda de escala de intensidade.
- `ScaleLegendProps` (type)
- `useLinkedHighlight` (hook): Realce ligado entre várias vistas do mesmo dado (mapa + lista, sankey + painel, horizon + tabela).


## charts-analytics

Gráficos analíticos de série temporal: · ConnectedScatter: duas medidas ao longo do tempo (CAC × LTV, preço × volume).

- `ConnectedScatter` (component): Dispersão conectada: como duas medidas andaram juntas no tempo (CAC × LTV, preço × volume, custo × satisfação).
- `ConnectedScatterPoint` (type)
- `ConnectedScatterProps` (type)
- `ConnectedScatterReference` (type)
- `ConnectedScatterSeries` (type)
- `HorizonChart` (component): Horizon: muitas séries diárias (8–20) contra a própria base, cada uma numa linha baixa dobrada em faixas.
- `HorizonChartProps` (type)
- `HorizonLegend` (component): Legenda do horizon: faixas abaixo e acima da base e a frase de leitura.
- `HorizonLegendProps` (type)
- `HorizonSeries` (type)


## lib-geo-br

Contornos das 27 unidades da federação, prontos para SVG.

- `BrRegion` (type): Grande região do IBGE.
- `brRegions` (const): Grandes regiões e suas UFs (IBGE).
- `BrUf` (type): Uma UF desenhável: contorno SVG, centróide (do maior polígono) e caixa.
- `BrUfId` (type): Sigla de uma UF.
- `brUfs` (const): As 27 UFs em ordem alfabética do nome.
- `brViewBox` (const): viewBox do mapa do Brasil (use com `brUfs`).


## geo

Mapas coropléticos (região pintada pela intensidade de um número): · ChoroplethMap: mapa em SVG com escala em degraus, legenda que destaca a faixa, tooltip, seleção com zoom e navegação por setas · RankedRegionList: a me

- `ChoroplethMap` (component): Mapa coroplético (padrão: Brasil por UF).
- `ChoroplethMapProps` (type)
- `choroplethScale` (function): Escala em degraus de um mapa coroplético.
- `ChoroplethScale` (type): Escala pronta: degraus, cor de cada valor e dados para a legenda.
- `ChoroplethScaleOptions` (type)
- `fitGeoViewBox` (function): viewBox que enquadra um conjunto de regiões (recorte por grande região, só os estados com dado).
- `GeoRegion` (type): Uma região desenhável: contorno SVG no sistema do `viewBox`.
- `GeoValues` (type): Valores por id de região; `null` = sem dado (hachura).
- `RankedRegionList` (component): Lista ordenada (posição, nome, barra proporcional, valor) que acompanha um `ChoroplethMap`: passar o mouse ou focar uma linha acende a região no mapa e vice-versa; clique ou Enter seleciona.
- `RankedRegionListProps` (type)


## lib-pivot

Motor da tabela dinâmica (pivô).

- `buildPivot` (function): Calcula o pivô. Campos desconhecidos no layout são ignorados; medidas em Linhas/Colunas também.
- `emptyPivotLayout` (const): Layout vazio.
- `formatPivotValue` (function): Formata um valor do pivô conforme o campo e a agregação.
- `PIVOT_BLANK` (const): Rótulo de registros sem valor na dimensão.
- `PIVOT_TOTAL` (const): Chave do total (linha "Total geral" e coluna "Total").
- `PivotAgg` (type): Agregação de um valor do pivô.
- `pivotAggLabel` (const): Rótulo pt-BR de cada agregação.
- `pivotAggsFor` (function): Agregações oferecidas para um campo (as declaradas ou as padrão do tipo).
- `PivotArea` (type): Áreas do construtor.
- `pivotCanDrop` (function): O campo pode ir para a área?
- `PivotCells` (type)
- `PivotColumn` (type): Combinação de colunas (folha do cabeçalho).
- `PivotField` (type): Campo disponível para o pivô: dimensão (agrupa) ou medida (soma, média…).
- `PivotFilterSpec` (type)
- `PivotHeaderCell` (type): Célula de cabeçalho de coluna num nível, já com a extensão (em combinações).
- `PivotLayout` (type): Configuração do pivô: dimensões em Linhas e Colunas, medidas em Valores, recortes em Filtros.
- `pivotMove` (function): Move um campo entre áreas (ou para fora, `to.area = null`).
- `PivotMoveSource` (type): Origem de uma movimentação: área + posição (ou a lista de campos, `area: null`).
- `PivotRecord` (type)
- `PivotResolvedValue` (type): Valor com campo e rótulo resolvidos ("Receita (Soma)").
- `PivotResult` (type)
- `PivotRowNode` (type): Nó da árvore de linhas: grupo (com filhos e subtotal) ou folha.
- `pivotSwap` (function): Troca Linhas e Colunas.
- `pivotToRows` (function): Achata o resultado numa tabela (CSV, cópia): cabeçalho + uma linha por nó (grupos com subtotal, folhas) + "Total geral".
- `pivotValues` (function): Valores distintos de uma dimensão nos registros, na ordem de exibição (para o filtro).
- `PivotValueSpec` (type)


## pivot

Tabela dinâmica (pivô) para análise self-service: · PivotTable: desenha o resultado de `buildPivot()` (src/lib/pivot.ts) com cabeçalho e primeira coluna fixos, grupos recolhíveis, subtotais, total geral e sombreamento op

- `PivotBuilder` (component): Construtor de tabela dinâmica: escolha o que agrupar (Linhas, Colunas), o que calcular (Valores, com Soma/Média/Contagem/Mín./Máx./Distintos) e o recorte (Filtros).
- `PivotBuilderField` (type): Campo do construtor: o do motor + ícone lucide opcional no chip.
- `PivotBuilderProps` (type)
- `PivotTable` (component): Tabela dinâmica: grupos de linha recolhíveis (chevron, ←/→), subtotais em faixa, total geral em negrito, números à direita.
- `PivotTableProps` (type)


## agent-run

------------------------------------------------------------------

- `AgentRunCard` (component): Um cartão que acompanha uma execução de agente do começo ao fim: tarefa, agente e modelo, status (ponto + palavra) e cronômetro; passos que chegam um a um (o atual brilha); portão de aprovação com o diff quando o agente
- `AgentRunChange` (type): A mudança que o agente quer aplicar e que espera aprovação.
- `AgentRunChangeFile` (type): Um arquivo da mudança proposta, como diff unificado.
- `AgentRunCheck` (type): Uma verificação ao fim da execução (testes, lint, conferência de saldo).
- `AgentRunOutcome` (type): O que a execução entregou.
- `AgentRunResult` (component): Fim de uma execução: arquivos alterados com +/−, verificações que passaram, abrir o resultado e executar de novo.
- `AgentRunScript` (type): Roteiro do modo demonstração: passos, onde o portão de aprovação para a execução e o resultado.
- `AgentRunState` (type): Estado controlado do AgentRunCard.
- `AgentRunStatus` (type): Situação da execução inteira.
- `AgentRunStep` (type): Um passo da execução: texto curto no particípio ("Leu src/api/rotas.ts"), duração e, se for ferramenta, entrada e saída.
- `AgentRunStepKind` (type): O que o agente fez naquele passo.
- `AgentRunSteps` (component): Passos de uma execução de agente, um por linha: ícone do tipo (planejar, ler, buscar, editar, testar, ferramenta), texto, duração e check.
- `AgentRunStepStatus` (type): Situação de um passo.
- `DiffApproval` (component): Portão de aprovação de uma mudança proposta pelo agente: resumo, diff com uma aba por arquivo (com +/−), "Aprovar e aplicar" e "Devolver com comentário" (abre o campo do motivo).


## agent-evals

------------------------------------------------------------------

- `EvalCase` (type): Um caso de teste da suíte.
- `EvalCaseCompare` (component): Um caso da avaliação aberto lado a lado: a entrada, o que a versão-base e a candidata responderam, a rubrica do juiz (✓/× por critério nas duas) e a nota.
- `EvalCaseDetail` (type): Um caso aberto para comparar: entrada, saída da base e da candidata, rubrica do juiz.
- `EvalCaseStatus` (type): Resultado de um caso na versão candidata.
- `EvalCategory` (type): Uma categoria da suíte (Reembolso, Frete, Tom…) com os seus casos e o score da versão-base (fração).
- `EvalDotGrid` (component): Resultado de uma suíte de avaliação caso a caso: por categoria, o score com a marca da versão-base e uma grade de pontos (um por caso) que se preenche conforme os resultados chegam.
- `EvalFilter` (type): Recorte da grade: todos, só falhas (falhou, erro, regressão), só regressões ou só melhorias.
- `EvalRunHeader` (component): Cabeçalho de uma execução de suíte: candidata × base, juiz, score atual contra o da base, as últimas execuções numa linha, custo e tempo estimados e a ação de rodar (passe um `OperationButton`).
- `EvalSide` (type): Saída de uma versão num caso: rótulo ("Base · v11"), texto e nota do juiz (fração).
- `EvalStatusMark` (component): Marca de um estado, para legenda e cabeçalhos (mesma forma do ponto da grade).
- `EvalVersion` (type): Uma versão avaliada: rótulo ("v12") e modelo.


## illustration

Ilustração em traço e cartão de primeira execução (camada expressiva: onboarding, boas-vindas, estado vazio de destaque — regra 22a).

- `IllustrationFrame` (type): Quadro da ilustração: `label` vira o nome acessível (`role="img"`).
- `IllustrationPath` (type): Traço de uma cena. Texto = caminho SVG em traço; objeto para dar um preenchimento suave (`soft`, gelo translúcido) ou destacar o traço na cor de destaque (`accent`).
- `IntroCard` (component): Cartão compacto de primeira execução: ilustração em traço no topo (gelo), "Etapa 1 de 4", título, texto, pontos de etapa, Voltar/Avançar (o último vira "Começar") e "Pular".
- `IntroCardStep` (type): Etapa do `IntroCard`: título, texto e, opcionalmente, o quadro da ilustração.
- `MorphIllustration` (component): Ilustração em traço que transiciona entre quadros quando `index` muda: troca cruzada com leve deslocamento e escala, elemento a elemento; quando todos os quadros têm caminhos de mesma estrutura, os traços se transformam
- `onboardingScenes` (const): Quatro cenas de primeira execução, em traço: pasta (criar espaço), arquivos, equipe e selo de conquista.


## capacity

Capacidade: quanto de uma cota está ocupado e por quê.

- `CapacityBar` (component): Barra de capacidade segmentada: cada categoria ocupa a fração da cota (`total`), o resto é espaço livre em gelo.
- `CapacityBreakdown` (component): Cartão de capacidade completo: total usado (desce animado quando algo é limpo), linha de status (caminho em varredura, categoria em foco ou o resultado da limpeza), barra, legenda e uma recomendação por vez com a ação.
- `CapacityLegend` (component): Legenda da barra em grade (3 → 2 → 1 colunas pela largura do contêiner): ícone ou amostra de cor + categoria + tamanho.
- `CapacitySegment` (type): Uma categoria da cota (Documentos, Gravações, Lixeira…).
- `CapacitySuggestion` (type): Recomendação de limpeza: frase com o tamanho, verbo + objeto no botão.
- `formatStorage` (function): Bytes em unidade legível, base 1000 como o sistema operacional mostra: 357_800_000_000 → "357,8 GB".


## agent-tasks

Tarefas delegadas a agentes: a pessoa escolhe o que sai da mão dela, entrega a um ou mais agentes e acompanha o trabalho ao vivo até o resultado.

- `AgentQueue` (component): Painel "Agentes": uma linha por tarefa delegada ainda em curso, com o rosto do agente, o título e o que ele está fazendo agora (anunciado ao leitor de tela, troca com um fade curto).
- `AgentRef` (type): Um agente que recebe tarefas.
- `DelegableTask` (type): Uma tarefa que pode ser delegada.
- `DelegableTaskList` (component): Lista de tarefas com seleção múltipla para delegar a agentes.
- `DelegableTaskStatus` (type): Situação da tarefa. `aberta` é da pessoa; `delegada` está na fila do agente; `trabalhando` está em execução; `aguardando` travou e pede você (aprovação, dado que falta); `falhou` parou com erro; `concluida` terminou.
- `DelegationDemoStep` (type): Um passo do roteiro de demonstração: texto, ou texto que trava pedindo você ou que falha.
- `DelegationPill` (component): Pílula flutuante do trabalho delegado: rostos dos agentes e uma frase ("2 agentes trabalhando", "1 aguardando você", "Financeiro respondeu ✓").
- `describeTaskDue` (function): Prazo de tarefa em palavras: "Hoje", "Amanhã", "Sexta" (até 6 dias), "21 nov" depois disso e "Atrasada" antes de hoje.
- `TaskResultCard` (component): Resultado de uma tarefa delegada: título, quem fez, "Trabalhou por 2 min 14 s ›" (abre os passos), a frase de resultado, uma tabela-resumo opcional, os arquivos entregues (com "Abrir em") e, se a entrega pede revisão, "A
- `TaskResultFile` (type): Arquivo entregue pelo agente, com destinos de "Abrir em".
- `TaskResultTable` (type): Tabela-resumo do resultado.
- `useDelegationDemo` (hook): Simula o ciclo de delegação para showcase, protótipo e testes de usabilidade: delegada → passos do roteiro (um por compasso, só com a aba visível) → concluída.


## agent-activity

Atividade do agente, por fases: um card compacto que mostra O QUE o agente está fazendo agora (lendo, buscando, pensando, escrevendo, revisando), o plano com o passo atual, o contexto da fase e quanto já custou.

- `AgentActivityCard` (component): Card de atividade do agente, por fases: marca + fase no topo, barra de progresso na cor da fase, plano com o passo atual, o contexto da fase (arquivo, busca, ideias, escrita, revisão, resultado), ferramentas, modelo e co
- `agentActivitySample` (function): Um quadro estático de cada fase da demonstração (para documentação e estados).
- `AgentMark` (component): Marca do agente: quatro barras de equalizador na cor da fase.
- `AgentPhase` (type): Fase do agente. As cinco de trabalho + concluído, pausado, parado e falhou.
- `AgentPhaseBadge` (component): A fase como ponto + palavra, na cor da fase.
- `AgentPhaseContext` (type): O que a fase está mostrando: o arquivo lido, a busca, as ideias, o texto escrito, a revisão ou o resultado.
- `agentPhaseLabel` (function): Rótulo de cada fase ("Buscando na web").
- `AgentPlanStep` (type): Um passo do plano do agente.
- `AgentTool` (type): Ferramenta conectada ao agente; `active` realça a que está em uso.
- `AgentUsage` (type): Consumo da execução: tokens, custo (em reais) e tempo decorrido.
- `useAgentActivityDemo` (hook): Percorre as fases do `AgentActivityCard` em ~15 s (só com a aba visível), com Pausar, Retomar, Parar e Executar de novo funcionando.


# Catálogo de blocos



## ai-agent-builder · Construtor de agentes (IA)

Definir o que um agente faz sem sair da conversa com ele: quem configura automações monta gatilhos, ferramentas e instruções e testa na hora.
- Anatomia G · App de altura total: conversa à esquerda, ficha à direita (ResizableSplit)
- Ficha em seções: Gatilhos → Propriedades → Ferramentas → Conhecimento → Instruções
- Ferramentas em grade com Switch por app (ToolToggleList, '5 de 6 ligadas'); conhecimento com envio, cancelar e tentar de novo (KnowledgeFiles)
- Modelo do agente no ModelPicker; instruções com limite e contador (maxLength)
- Uma ação primária no topo: Publicar (estado rascunho/publicado/alterado)
- Testar roda dentro da conversa com RunSummary, sem trocar de tela
- Instruções em editor rico com 'Melhorar com IA'
Componentes: AddPropertyMenu, AgentComposer, AgentHeader, AgentInstructions, AgentMessage, AgentStatus, Banner, BuilderSection, Button, ChipPicker, KnowledgeFile, KnowledgeFiles, KnowledgeUpload, MenuEntry, Modal, ModelEffort, ModelOption, ModelPicker, PropertyRow, PublishBar, ResizableSplit, RunStatus, RunSummary, SegmentedControl, TextField, ToolGlyph, ToolToggleList, TriggerList, notify


## ai-agent-connections · Agente e conexões (IA)

Mostrar de uma vez o que um agente acessa, quem ele aciona e o que entrega, para o dono do agente confiar e ajustar permissões.
- Anatomia C · Registro: cabeçalho fixo com Testar/Pausar, conteúdo à esquerda e cartão de conexões fixo à direita
- ConnectionsCard em três blocos: conexões (✓/Conectar), subagentes com estado, resultados
- Conectar acontece no lugar, com desfazer
- Gatilhos com switch: liga/desliga sem formulário
Componentes: AgentConnection, AppIcon, Button, ChoiceCards, ConnectionsCard, Modal, Page, PageHeading, Subagent, Switch, TextField, notify


## ai-agent-evals · Avaliações de agentes (IA)

Saber se uma versão nova do agente ficou melhor ou pior antes de ela atender clientes, e achar o caso que quebrou.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar com filtros; gráfico do agente escolhido acima da tabela
- Última execução: EvalRunHeader (candidata × base, juiz, score contra a base, últimas 8 execuções, custo e tempo) + EvalDotGrid (um ponto por caso, forma além da cor, setas percorrem) + EvalCaseCompare (entrada, base × candidata, rubrica com ✓/×)
- Rodar a suíte transmite caso a caso (só com a aba visível); movimento reduzido mostra o resultado de uma vez
- Score por versão em LineChart com linha de referência no mínimo para publicar
- Suíte abaixo do mínimo = palavra + cor na linha (regressão)
- Rodar avaliação com useOperation: o botão diz o que está fazendo
- Caso que falhou leva à execução, onde está o trace
Componentes: Badge, Button, ChartCard, Column, DataTable, Empty, EmptyFilterResult, EvalCase, EvalCaseCompare, EvalCaseDetail, EvalCaseStatus, EvalCategory, EvalDotGrid, EvalRunHeader, FilterBar, FilterField, HealthDot, Highlight, LineChart, Meter, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, Select, StatCell, StatGrid, TableSearch, formatNumber, formatPercent, notify, useFilters, useOperation, useReducedMotion, useVisibleInterval


## ai-agent-governance · Governança de agentes (IA)

Quem responde pela IA na empresa define quanto cada agente pode gastar, o que exige uma pessoa, quais modelos valem e onde os dados ficam.
- Anatomia D · Configurações: título fixo + subnavegação colada (SettingsLayout); seção na URL (?secao=)
- Créditos do mês com GoalMeter e 'Ver uso'; orçamento por área com Meter e por agente editável em Drawer
- Política de aprovação por tipo de ação: Sempre · Acima de um valor · Nunca
- Mudança arriscada (modelo fora do Brasil, revogar chave) pede ConfirmDialog
- Chave nova aparece uma única vez, com copiar
Componentes: Badge, Button, Callout, Column, ConfirmDialog, CopyButton, CurrencyField, DataTable, Drawer, Meter, NumberField, OperationButton, OperationFeedback, Page, SegmentedControl, Select, SettingsLayout, SettingsNavItem, SettingsSection, Slider, Switch, TextField, formatCurrency, formatNumber, formatPercent, notify, useOperation


## ai-agent-run · Execução de agente (IA)

Explicar uma execução do agente passo a passo para quem precisa auditar, aprovar o resultado ou corrigir o agente.
- Anatomia C · Registro: trilha (Execuções › agente) + título fixos, trace em cascata no conteúdo
- Passo selecionado mostra entrada e saída lado a lado; falha com mensagem em linguagem de gente
- Custo, tokens e tempo sempre visíveis
- Executar de novo com useOperation (o botão informa enquanto roda)
- Fim da execução: 'O que você quer fazer agora?' com 3 opções numeradas (↑ ↓ Enter, 1–3, Esc) e campo livre
- Ao vivo (?estado=ao-vivo): AgentRunCard — passos chegam um a um (o atual brilha), o agente para num portão com o diff (Aprovar e aplicar / Devolver com comentário) e, ao concluir, os passos recolhem numa linha e aparece o resultado com as verificações
Componentes: AgentRunCard, AgentRunScript, AgentTrace, AiBadge, Badge, Button, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, IconButton, JsonView, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, StatCell, StatGrid, SystemMessage, Tabs, TokenUsageMeter, ToolCall, ToolCallsSection, TraceStep, formatCurrency, formatDate, formatDuration, formatNumber, notify, useOperation


## ai-agent-templates · Descobrir agentes (IA)

Quem ainda não sabe o que automatizar encontra um ponto de partida testado por outras equipes e sai com um agente instalado (ou um rascunho para personalizar) em minutos.
- Anatomia A · Lista (galeria): cabeçalho fixo + PageToolbar com abas de categoria e busca por agente ou app (só com 12 modelos ou mais)
- Cartão = apps (glifos) e modelo, nome, uma frase, nota e instalações (formatCompact) e autor
- Ver exemplo em Popover: uma execução real em 3 passos antes de decidir
- Instalar em Drawer de 3 etapas (Stepper): espaço de trabalho (Select) → acesso app a app (AppAccessList) → confirmação com 'Abrir agente'
- Instalação com useOperation/OperationButton: erro vira OperationFeedback com 'Tentar novamente'; Cancelar aborta a instalação em andamento
- Instalado vira selo 'Instalado' + 'Abrir'; 'Usar modelo' segue abrindo o construtor (?modelo=) como rascunho
Componentes: AgentComposer, AppAccessItem, AppAccessList, Badge, Button, Drawer, Empty, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, Popover, Select, Stepper, TableSearch, Tabs, ToolGlyph, collectionThresholds, formatCompact, formatNumber, normalize, useOperation


## ai-agent · Página do agente (IA)

Dar ao dono de um agente tudo o que ele precisa para confiar, evoluir e responder pelo agente: o que faz, como está indo, o que mudou e o que pode acessar.
- Anatomia C · Registro: trilha 'Agentes', título, status e ações fixos; propriedades em SplitLayout à direita
- Ações mudam com o estado: Pausar (com ConfirmDialog) × Retomar; Editar abre o construtor
- Fluxo padrão em AgentPlan recolhível; passos que pedem aprovação marcados
- Rollout da próxima versão como ProjectProgressCard com o próximo passo
- Versões: RevisionTimeline (dial por dia) + Timeline com `leading` como changelog; restaurar pede confirmação
- Região de execução com LocationTag (hora local) e aviso de LGPD fora do Brasil
Componentes: ActionMenu, AgentPlan, AppIcon, Badge, Button, Callout, ChartCard, Column, ConfirmDialog, DataTable, HealthDot, IconButton, LineChart, LocationTag, Meter, MiniBarChart, Page, PageHeading, PlanStep, ProjectProgressCard, PropertyList, Revision, RevisionTimeline, SplitLayout, StackedList, StatCell, StatGrid, Tabs, Timeline, TimelineItem, formatCurrency, formatDate, formatDuration, formatNumber, formatPercent, notify


## ai-agents-dashboard · Painel da frota de agentes (IA)

Quem responde pela operação de IA da empresa vê em segundos se a frota está saudável, quanto custa e o que precisa de uma pessoa agora.
- Anatomia B · Painel: cabeçalho fixo com período à direita
- 5 KPIs com delta e base explícita; custo e latência com goodWhen='down'
- Gráfico principal responde uma pergunta (execuções × falhas); MiniBarChart para custo por área
- 'Precisa de você' antes do detalhe: aprovações, agentes com erro, orçamento perto do limite, regressão
- Incidentes recentes abrem a execução que falhou
Componentes: BarChart, BarList, Button, ChartCard, Empty, ErrorState, KpiCard, KpiGrid, ListPanel, ListRow, Meter, MiniBarChart, Page, PageHeading, SegmentedControl, Skeleton, formatCurrency, formatDuration, formatNumber, formatPercent


## ai-agents · Frota de agentes (IA)

Saber de relance quais agentes a empresa tem, quem é dono de cada um e quais pedem atenção (erro, orçamento estourando).
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (visões salvas, filtros, busca)
- Status = ponto + palavra; linha com erro ou orçamento acima de 90 % ganha faixa
- Execuções em Sparkline de 7 dias; custo com a fração do orçamento ao lado
- Linha abre o registro do agente; ⋯ com editar, execuções, pausar e duplicar
- Vazio vira 'O que você quer automatizar?' com campo de pedido e modelos sugeridos
Componentes: ActionMenu, AgentComposer, AppIcon, Avatar, Button, Column, DataTable, EmptyFilterResult, FilterBar, FilterField, HealthDot, Highlight, Page, PageHeading, PageToolbar, Pagination, SavedView, SavedViews, SortHeader, Sparkline, StatCell, StatGrid, TableSearch, ToolGlyph, formatCurrency, formatNumber, formatPercent, notify, useFilters, usePagination, useSavedViews, useSort


## ai-answer · Resposta com fontes (IA)

Responder uma pergunta de trabalho com uma resposta que dá para conferir: toda afirmação aponta para a fonte e a pessoa vê de onde veio cada frase.
- reading
- Pensou por N s recolhido (ReasoningBlock); fontes resumidas (SourceStack) que abrem os cartões (SourceCards)
Componentes: AiSource, Button, CitedText, Empty, ErrorState, MessageActions, Page, PageHeading, ReasoningBlock, RegenerateOption, RelatedQuestions, Skeleton, SourceCards, SourceStack, citedPlainText, notify, useLinkedHighlight, useReducedMotion, useVisibleInterval


## ai-approvals · Aprovações de agentes (IA)

Quem aprova decide rápido e com segurança o que os agentes vão fazer em nome da empresa, sem abrir cinco telas.
- Anatomia F · Mestre-detalhe: fila à esquerda, pedido à direita; a seleção fica no endereço (?id=)
- ApprovalRequest com impacto, risco e prévia exata do que vai sair
- Recusar exige motivo (volta para o agente como instrução)
- Por que pediu aprovação: a política aparece junto, com link para mudar
- Celular: a fila ocupa a tela e o pedido abre em tela cheia com Voltar
Componentes: ApprovalRequest, ApprovalState, Badge, Button, Empty, Modal, Page, PageHeading, PropertyList, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TextareaField, notify


## ai-assistant · Assistente sobre a tela (IA)

Pedir ajuda à IA sobre a tela que já está aberta (aqui, o CRM) sem perder o contexto nem a tela.
- Painel lateral de IA ao lado da tela: a tela continua usável
- Respostas com ferramentas usadas e fontes citadas
- Streaming com Parar; sugestões de pergunta no início
- No celular o painel abre fechado e ocupa a tela quando aberto
Componentes: AiBadge, AiSource, AskAILauncher, AskAIPanel, Badge, ChatComposer, ChatMessage, CitationChip, Column, ComposerChip, DataTable, EntityMark, KpiCard, KpiGrid, Page, PageHeading, PromptSuggestion, PromptSuggestions, SourceList, SystemMessage, ThinkingIndicator, ToolCall, ToolCallsSection, formatCurrency


## ai-catch-up · Resumo do período (IA)

Pôr a pessoa em dia em um minuto depois de um dia fora e resolver ali mesmo o que espera por ela, sem abrir quatro apps.
- Anatomia B · Painel em coluna estreita: período no topo, fontes, depois o resumo
- Quatro seções fixas, nesta ordem; seção vazia não aparece
- Precisa de você: a linha diz o que espera; a oferta da IA diz o que ela faz e leva o primário
- Linhas reservadas enquanto o resumo chega; lido recolhe a linha e passa o foco
Componentes: Button, CatchUpDone, CatchUpItem, CatchUpRow, CatchUpRowSkeleton, CatchUpSection, CatchUpSource, CatchUpSources, Page, PageHeading, SegmentedControl, ToolGlyph, catchUpSections, notify, prefersReducedMotion, useVisibleInterval


## ai-chat · Chat com histórico (IA)

Conversar com o assistente em página inteira, com histórico pesquisável, para quem usa a IA como ferramenta de trabalho diária.
- Anatomia G · App de altura total: histórico à esquerda, thread rola, composer fixo
- Histórico agrupado por data com busca
- Estado vazio com sugestões; avisos do sistema e limite de uso com contagem
- Respostas com ferramentas e fontes
Componentes: AiGreeting, AiSource, Button, ChatComposer, ChatMessage, ChatThread, CitationChip, ComposerAttachment, ComposerChip, LimitDialog, PromptSuggestion, PromptSuggestions, RateLimitNotice, SourceList, SystemMessage, ThinkingIndicator, TokenUsageMeter, ToolCall, ToolCallsSection, normalize


## ai-codex · Agente de código (tarefas longas) (IA)

Acompanhar um agente que trabalha por minutos em um repositório (corrige, testa, publica): ver o que ele fez, o resultado verificável e decidir o próximo passo sem se perder em conversas longas.
- Anatomia Conversa (AgentAppLayout): trilho + lista por projeto recolhível (⌘\) + conversa; troca rápida de sessão quando a lista está fechada
- Lista “Por projeto”: pastas = repositórios, sessões aninhadas, “Mostrar mais”, ⋯ por projeto
- Tarefa em execução como card de atividade (AgentActivityCard): fase com palavra, plano com o passo atual, o que o agente está lendo/buscando/escrevendo, ferramentas, modelo, tokens, custo e tempo, com Pausar e Parar
- Execução terminada como linha discreta (RunSummary divider): “Trabalhou por 1 min 1 s ›” abre os passos
- Histórico longo recolhido no topo (ThreadView collapseBefore): só o final importa
- Resultados verificáveis em lista (commit, deploy, testes) com links, não só texto
- Permissão sempre visível no campo; “Acesso total” em âmbar e com confirmação
Componentes: AgentActivityCard, AgentAppLayout, AgentComposer, AnswerCard, Badge, BottomNav, Button, CommandPalette, ComposerChip, Disclaimer, InputModal, ListToggle, MenuEntry, MessageActions, Modal, ModelEffort, ModelPicker, PermissionMode, PermissionModeChip, PropertyList, RunSummary, SessionQuickSwitcher, SessionSidebar, StepGroup, StepItem, ThreadHeader, ThreadView, UserBubble, VoiceModeButton, VoiceOverlay, WorkspaceSwitcher, notify, useAgentActivityDemo


## ai-compose-email · E-mail com IA (IA)

Revisar e enviar e-mails que o agente rascunhou, com controle humano sobre destinatários, texto e horário.
- Anatomia F · Mestre-detalhe: rascunhos à esquerda, composer à direita (dialog no celular)
- Estado do rascunho sempre visível (Rascunho, Agendado, Enviado)
- Destinatários com busca e sugestões; enviar com desfazer; agendar no botão dividido
Componentes: AiBadge, Button, ComposeEmail, ComposeEmailDialog, ComposeStatus, ComposerChip, DateTimePicker, MenuEntry, Modal, Page, PageHeading, Person, formatDate, notify


## ai-conversation · Conversa com aprovação (IA)

Mostrar uma conversa longa em que o agente pensa, planeja, usa ferramentas e pede aprovação antes de uma ação irreversível.
- Anatomia G · App de altura total: só a thread rola, composer fixo
- Raciocínio e plano recolhíveis: visíveis, mas sem poluir
- Pedido de aprovação humana antes de agir (enviar e-mails)
- Fontes citadas e artefato inline
Componentes: AgentComposer, AgentMessage, AgentPlan, AiSource, ApprovalRequest, ApprovalState, ArtifactCard, Button, CitationChip, Modal, ReasoningBlock, RunSummary, SourceList, SystemMessage, TextField, TextareaField, ToolCall, ToolCallsSection, formatCurrency, notify


## ai-delegate · Tarefas da semana (IA)

Tirar da mão o que um agente resolve sozinho sem perder o controle: ver quem está fazendo o quê, decidir o que mexe em dinheiro e receber a entrega pronta para conferir.
- reading
- Esta semana
- DelegableTaskList: seleção múltipla (clique, arrasto, Shift, teclado) e barra flutuante com Delegar (n) e o agente (Automático ou um nome)
- DelegationPill no topo: rostos empilhados + frase (2 agentes trabalhando · 1 aguardando você · Financeiro respondeu ✓); no celular abre o painel em folha
- AgentQueue: uma linha por tarefa em curso com o passo ao vivo (aria-live); Parar e Ver detalhes no ⋯; falha com Tentar de novo
- O que mexe em dinheiro trava em Aguardando você e vira ApprovalRequest com o valor (R$ 842,30) antes de pagar
- Concluída: check, riscado e sai da lista; a entrega abre como TaskResultCard (Trabalhou por ›, tabela-resumo, planilha com Abrir em, Aprovar/Pedir ajuste)
- Estados: carregando (forma da lista), vazio (Criar tarefa), erro de um agente (linha com falha e Tentar de novo). Sem estado de filtro: a tela não filtra
Componentes: AgentQueue, AgentRef, ApprovalRequest, Button, DelegableTask, DelegableTaskList, DelegationDemoStep, DelegationPill, Empty, Page, PageHeading, Sheet, Skeleton, TaskResultCard, formatCurrency, formatNumber, notify, useDelegationDemo, useReducedMotion


## ai-projects · Projetos do agente (IA)

Achar e reabrir análises feitas pelo agente, com status, dono e custo, para o time acompanhar o que a IA produziu.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (filtros e busca local)
- KPIs curtos no topo (em andamento, concluídas, custo)
- Uma ação primária: Nova análise (InputModal) que abre o workspace
- Linha abre o projeto (?id=)
Componentes: Avatar, Badge, Button, Column, DataTable, EmptyFilterResult, FilterBar, FilterField, Highlight, InputModal, KpiCard, KpiGrid, Page, PageHeading, PageToolbar, TableSearch, formatCurrency, formatDuration, formatNumber, notify, useFilters


## ai-runs · Execuções de agentes (IA)

Achar a execução certa (a que falhou, a que custou caro, a que está esperando alguém) e abrir o passo a passo dela.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (visões salvas, filtros, busca)
- Resumo do recorte acima da tabela: total, falhas, p95 e custo mudam com o filtro
- Status = ponto + palavra; falha pinta a linha; número à direita com tabular-nums
- Vindo de outra tela, o filtro chega pela URL (?agente=, ?status=)
Componentes: Button, Column, DataTable, Empty, EmptyFilterResult, FilterBar, FilterField, GridColumn, Highlight, Page, PageHeading, PageToolbar, Pagination, SavedView, SavedViews, SortHeader, StatCell, StatGrid, TableSearch, downloadCsv, formatCurrency, formatDuration, formatNumber, formatPercent, gridToCsv, notify, useFilters, usePagination, useSavedViews, useSort


## ai-sessions-artifacts · Sessões com artefatos (IA)

Versão calma das sessões do G4 OS: mantém a lista de sessões, mas a leitura é em fluxo e as entregas viram artefatos no painel lateral.
- AgentAppLayout: trilho + lista recolhível (botão no cabeçalho da conversa, ⌘\) + conversa + painel (⌘.); lista recolhida = troca rápida de sessão
- Lista clean: uma linha por sessão (título + glifo de status + horário), agrupada por data ou por projeto pelo ícone do cabeçalho
- Respostas em fluxo com “Trabalhou por …” (RunSummary divider): os passos abrem sob demanda
- Histórico longo recolhido no topo (ThreadView collapseBefore)
- Campo enxuto: + (anexos e ferramentas) · permissão … agente/modelo · ditar · enviar; voz no botão redondo fora do campo
- Permissão sempre visível; “Acesso total” em âmbar e com confirmação
- Painel com abas que viram ícones quando falta espaço; a aba ativa fica sempre inteira
- Celular: lista → conversa em tela cheia → painel como folha
Componentes: AgentAppLayout, AgentComposer, AnswerCard, ArtifactCard, ArtifactPanel, ArtifactTab, BarChart, BarList, BottomNav, ComposerChip, ContextItem, ContextView, Disclaimer, InputModal, InsightCard, ListToggle, MenuEntry, MessageActions, MinimapItem, ModelEffort, ModelPicker, PermissionMode, PermissionModeChip, PromptSuggestions, ReportSection, RunStatus, RunSummary, SessionDetails, SessionQuickSwitcher, SessionSidebar, SheetArtifact, SlashCommand, StepGroup, StepItem, ThreadHeader, ThreadView, UserBubble, VoiceModeButton, VoiceOverlay, WorkspaceSwitcher, formatCurrency, formatNumber, notify


## ai-sessions-empty · Nova sessão do G4 OS (IA)

Primeira tela de uma sessão: ajudar a pessoa a começar rápido, com sugestões do que o agente sabe fazer e o que já está em andamento.
- Estado vazio produtivo: saudação + composer + tarefas sugeridas (nunca uma tela em branco)
- Momento de marca possível: a saudação pode usar BrandPanel
- Atalhos para retomar: sessões em andamento e arquivos recentes
- Ferramentas conectadas com aviso de reconexão quando algo falha
Componentes: AiGreeting, AiOrb, ComposerChip, Disclaimer, FileCard, Page, SessionComposer, SessionStatusChip, SlashCommand, ToolsBar, VoiceModeButton, notify


## ai-sessions · Sessões do G4 OS (app agêntico) (IA)

Central de trabalho com o agente para quem delega várias tarefas por dia: ver o que está rodando, retomar conversas e auditar o que o agente fez.
- Anatomia Conversa: app em altura total, sem rolagem de página; só o histórico rola e o composer fica fixo
- Lista rica: status ao vivo (Trabalhando, Resposta pronta, Falhou) e etiquetas sempre visíveis
- Respostas em cartão com Copiar · Markdown · ramificar: toda saída é reaproveitável
- Passos recolhíveis (StepGroup): o agente mostra o que fez sem poluir a leitura
- Painel de informações separado (modo da sessão, nome, etiquetas, notas)
- Lista recolhível (ListToggle no cabeçalho da conversa, ⌘\, lembrada entre visitas); recolhida, a troca rápida de sessão fica no cabeçalho
- Agrupar por data ou por projeto (ícone no cabeçalho da lista): pastas recolhíveis, “Mostrar mais” e ⋯ por projeto
Componentes: AnswerCard, ComposerChip, Disclaimer, InputModal, ListToggle, MenuEntry, MessageActions, MinimapItem, ResizableSplit, SessionComposer, SessionHeader, SessionInfoPanel, SessionQuickSwitcher, SessionSidebar, SlashCommand, StepGroup, ThreadMinimap, UserBubble, VoiceModeButton, VoiceOverlay, WorkspaceSwitcher, notify


## ai-task-proposals · Tarefas propostas pela IA (IA)

Transformar o resumo de uma reunião em tarefas reais com revisão humana: aceitar, editar ou recusar cada uma.
- Anatomia G · App de altura total: documento à esquerda, propostas à direita
- Aceitar todas / Recusar todas no topo, com desfazer
- Card editável: destino (Linear, Jira…), sub-tarefas com progresso, propriedades em chips
- Card aceito vira uma linha com 'Desfazer'
Componentes: AvatarGroup, ProposalState, SegmentedControl, TaskDestination, TaskProposal, TaskProposalCard, TaskProposalList, ToolGlyph, notify


## ai-trace · Inspetor de execução (IA)

Investigar uma execução que falhou ou demorou: onde, por quê e quanto custou, para quem mantém agentes.
- Anatomia C · Registro: cabeçalho fixo com trilha; trace + detalhe lado a lado (ResizableSplit)
- Cascata com latência por passo; passo com erro em destaque
- Entrada/saída em JSON, tokens e custo do passo
- Tentar de novo só o passo que falhou
Componentes: AgentPlan, AgentTrace, Badge, Button, JsonView, Page, PageHeading, PropertyList, ReportSection, ResizableSplit, StatCell, StatGrid, SystemMessage, TraceStep, formatCurrency, formatDuration, formatNumber, notify


## ai-workspace · Workspace de agente (IA)

Análise feita pelo agente que gera entregáveis: a conversa explica, os artefatos (relatório, planilha, contexto) ficam ao lado para revisar e exportar.
- Anatomia Conversa + painel: ResizableSplit com conversa à esquerda e ArtifactPanel à direita
- Resposta em fluxo com RunSummary (tempo, passos, ferramentas, custo) que abre o trace
- Artefatos são cidadãos de primeira classe: cartões na conversa abrem abas no painel
- Contexto explícito: o que o agente usou, com relevância e citações
- Composer com comandos (/relatório) e voz
Componentes: AgentComposer, AgentMessage, AgentTrace, ArtifactCard, ArtifactKind, ArtifactPanel, ArtifactTab, CommandPalette, ComposerChip, ContextItem, ContextView, InputModal, InsightCard, JsonView, KpiPair, LineChart, Menu, MetricBar, RankedList, ReportSection, ResizableSplit, RunSummary, SheetArtifact, formatCurrency, formatPercent, notify


## app-collab-doc · Conversa do time + documento (Aplicação)

Discutir um documento com o time ao lado do próprio texto, com pendências claras (ex.: documento obrigatório que falta).
- Anatomia G · App de altura total: conversa à esquerda, documento à direita
- Mensagens com nome e hora, separador de data e 'digitando'
- Faixa de ação obrigatória com envio de arquivo que se resolve sozinha
- Documento em tipografia de leitura com índice que acompanha
Componentes: ActionRequiredBanner, AvatarGroup, DateSeparator, ReadingDocument, SegmentedControl, TeamComposer, TeamMessage, TypingIndicator, notify


## app-command-palette · Paleta de comandos (⌘K) (Aplicação)

Navegar, criar e achar registros pelo teclado sem tirar a mão dele, para quem usa o app o dia inteiro.
- ⌘K abre uma paleta sobre qualquer tela
- Grupos (navegar, criar, registros), busca sem acento, recentes e atalhos visíveis
- Enter executa, Esc fecha; a tela de fundo não muda
Componentes: Card, Command, CommandPalette, Kbd, ListPanel, ListRow, Page, PageHeading, useCommandShortcut, useTheme


## app-connection · Detalhe da conexão (Aplicação)

Ver e controlar o que um app conectado pode ler e escrever, por conta, antes de deixar o agente usar.
- Anatomia C · Registro: trilha Apps › nome, estado e ações no topo
- Exemplo de pedido no app para mostrar o valor
- Permissões separadas em Leitura e Escrita, por conta, com switch e desfazer
- Desconectar só com confirmação
Componentes: AccountRow, AppIcon, Breadcrumb, Button, ConfirmDialog, ConnectionStatus, DataSyncTable, DataTable, Drawer, MarketplaceHero, Modal, OperationButton, OperationFeedback, Page, TextField, ToolPermissionList, formatNumber, notify, useOperation


## app-error-pages · Páginas de erro (Aplicação)

Dar saída clara quando algo dá errado (404, 500, 403, offline, manutenção) sem tirar a pessoa do app.
- Estados de tela dentro da casca: a navegação continua disponível
- Cada estado com causa em linguagem simples e uma ação de saída
- Estado linkável (?estado=) para testar
Componentes: Banner, Button, ErrorState, ForbiddenState, MaintenanceState, NotFoundState, OfflineState, SegmentedControl, notify


## app-file-manager · Gerenciador de arquivos (Aplicação)

Organizar, achar e prever arquivos do time em pastas, com envio e detalhes sem trocar de tela.
- Anatomia G · App de altura total: árvore de pastas à esquerda, conteúdo rola
- Grade ou lista (SegmentedControl), busca, envio com progresso
- Prévia em Sheet com detalhes e ações
Componentes: ActionMenu, Avatar, Button, Column, DataTable, Empty, FileCard, FileIcon, Meter, PropertyList, SearchInput, SegmentedControl, Sheet, Skeleton, TreeNode, TreeView, formatBytes, normalize, notify


## app-filtered-list · Lista com filtros (desktop e celular) (Aplicação)

Atender a fila de chamados com o recorte certo: período, visões salvas e filtros por SLA, canal e data.
- Anatomia A · Lista: cabeçalho fixo com período à direita + PageToolbar colada
- Visões salvas por pergunta ('Meus', 'SLA estourando')
- No celular os filtros vão para FilterSheet com 'Aplicar (N)'
- Detalhe em gaveta (?id=) sem perder a lista
Componentes: Avatar, Badge, Button, Column, DataTable, DateRange, DateRangeFilter, Drawer, EmptyFilterResult, FieldBlock, FieldGrid, FilterBar, FilterField, Highlight, Modal, Page, PageHeading, PageToolbar, Pagination, PropertyList, SavedView, SavedViews, Select, SortHeader, TableSearch, TextField, TextareaField, Timeline, Tone, notify, resolveDateRange, useFilters, usePagination, useSavedViews, useSort


## app-global-search · Busca global (⌘K) (Aplicação)

Achar qualquer coisa no app (registros, pessoas, ações) e ir direto para a tabela filtrada quando há muitos resultados.
- ⌘K com escopos (Tab, prefixos > @ #) e resultados por tipo com destaque
- Prévia à direita sem abrir o registro
- 'Ver todos' abre a lista já filtrada (?q=)
- Fonte remota com carregamento e erro
Componentes: Badge, Button, Card, Kbd, Page, PageHeading, SearchPalette, SearchResult, SearchScope, formatCurrency, notify, useCommandShortcut, useTheme


## app-help-center · Central de ajuda (navegação de seções) (Aplicação)

Achar e ler um artigo entre dezenas sem perder o lugar na árvore de seções.
- Anatomia Público/leitura: Page width="reading" com artigo; navegação longa na Sidebar via `nav={<SectionNav/>}`
- SectionNav: só texto, títulos de seção, subitens na linha-guia, até 2 níveis abaixo da seção
- Filtro no topo (sem acento, sem caixa) que mantém o caminho até o item encontrado
- Item ativo rola para dentro da coluna (só a coluna, não a página)
- Anterior/próximo no pé do artigo seguindo a ordem da árvore
Componentes: AppShell, Callout, Command, CommandPalette, IconButton, NavSection, NavSubItem, Page, PageHeading, SectionNav, Sidebar, useCommandShortcut


## app-legal · Termos e privacidade (Aplicação)

Deixar termos e privacidade legíveis e fáceis de citar, para quem vai criar conta ou precisa responder a uma dúvida jurídica.
- Anatomia I · Público: cabeçalho do site fixo, o documento rola, sem casca de app
- Dois documentos irmãos em abas; cada seção tem endereço próprio (?p=termos/pagamento) para citar e compartilhar
- SectionNav fixo na lateral no desktop; no celular vem antes do texto
- Data de vigência no topo e resumo em linguagem simples antes do texto formal
Componentes: Callout, NavSection, NavSubItem, SectionNav, Tabs, formatDate


## app-marketplace · Marketplace de apps (Aplicação)

Descobrir e conectar as ferramentas que o time já usa, entendendo o que cada uma permite pedir à IA.
- Catálogo: título central, busca e categorias em abas
- Faixa com exemplos de pedido por app (mostra o valor antes de conectar)
- Grade de apps com '+' ou ✓; conectar no lugar com desfazer
- Estado vazio quando a busca não acha
Componentes: AppGrid, AppTile, Button, Empty, HalftoneBand, MarketplaceHero, Page, normalize, notify


## app-meeting-notes · Notas de reunião com IA (Aplicação)

Deixar a pessoa prestar atenção na conversa: ela anota pouco, o app grava com o áudio sob controle e, ao final, a IA completa as notas com a transcrição, sempre mostrando o que foi a pessoa e o que foi a IA, e de onde veio cada frase.
- Anatomia G · App de altura total: documento à esquerda, transcrição e áudio à direita (ResizableSplit; no celular a transcrição abre por cima)
- Notas primeiro: durante a call só o editor e a pílula de gravação; nada de transcrição rolando por padrão
- Gravação mostra saúde, não só 'gravando': nível real por faixa e aviso com a ação ('verifique a saída de som')
- Autoria visível: texto da pessoa em tinta, texto da IA em tom suave com marcador dourado e citação '12:04' que leva ao momento
- Sem agenda: gravar começa pela call detectada, por 'Nova reunião' ou dentro de uma página existente
Componentes: AiMark, AiNotes, AiNotesToggle, ArtifactCard, Button, CallDetectedPrompt, ChatComposer, FilterChip, IconButton, LiveRecordingIndicator, MeetingCard, MeetingHeader, MeetingPerson, MeetingStatus, MomentCitation, NoteSection, Page, PageHeading, RecordingState, ResizableSplit, SegmentedControl, TemplatePicker, TranscriptSpeaker, TranscriptTurn, TranscriptView, findTurnAt, notify


## app-notifications · Central de notificações (Aplicação)

Ver o que pede atenção agora e limpar a caixa rápido, para quem recebe avisos de vários módulos.
- Anatomia A · Lista: cabeçalho fixo com 'Marcar tudo como lido'
- Abas Todas / Não lidas / Menções; grupos por dia
- Cada aviso abre o registro e marca como lido; arquivar com desfazer
Componentes: ActionMenu, Avatar, Button, CountBadge, Empty, Page, PageHeading, Skeleton, Tabs, Tooltip, notify


## app-presentation · Apresentação (QBR) (Aplicação)

Apresentar uma revisão de negócio (QBR) direto do app, com slides montados nos layouts do DS.
- Anatomia G · App de altura total: palco 16:9, miniaturas, notas
- Teclado (← →, F para tela cheia) e progresso
- Layouts de slide do DS: capa, números, tendência, citação
Componentes: Button, DeckSlide, PageHeading, SlideBullets, SlideDeck, SlideQuote, SlideSplit, SlideStat, SlideTitle, notify


## app-record-tracker · Rastreador de registros (Aplicação)

Gerenciar registros estilo Notion (aqui, casos de QA) com propriedades editáveis e um painel de detalhes ao lado.
- Anatomia A · Lista com DataGrid de altura total (rolagem interna, cabeçalho da grade fixo)
- Etiquetas coloridas, status e prioridade editáveis; desfazer/refazer
- Tabela ou Quadro (mesmos dados)
- RecordPanel lateral com ‹ › entre registros (?id=)
Componentes: ActivitySection, Avatar, Button, Checkbox, DataGrid, DueDatePicker, Empty, FileDropzone, FilesList, GridColumn, KanbanBoard, KanbanColumn, Modal, NotesTable, Priority, PriorityIcon, PriorityPill, PropertyPill, PropertyPills, RecordCard, RecordFile, RecordFileKind, RecordPanel, RecordSection, SectionAddButton, SegmentedControl, Skeleton, StatusPill, TableSearch, TagPill, TaskStatus, notify, priorityLabel, taskStatusLabel, useTableSearch


## app-sidebar-submenus · Sidebar com subitens (Aplicação)

Navegar num app com muitas áreas sem passar de 10 itens visíveis: agrupar páginas irmãs sob um item-pai que abre e fecha.
- Casca de app (AppShell + Sidebar) com grupos rotulados; anatomia de cada página: Painel ou Lista
- Item-pai com página própria (Vendas, Relatórios): o rótulo navega, a seta abre os subitens
- Item-pai sem página (Cadastros, Configurações): a linha inteira abre e fecha
- Subitem ativo abre o pai sozinho; o pai mostra que há um filho ativo
- Grupo Projetos recolhível, com “+” (novo projeto), ⋯ por item e “Mais” depois de 3
- Recolhido (botão ⇤): ícones; item com subitens abre um menu à direita (hover, clique ou →)
- Topo: WorkspaceMenu (⌘1…⌘9); rodapé: menu da conta
Componentes: AppShell, Button, Card, Command, CommandPalette, IconButton, MenuEntry, Modal, NavGroup, NavSubItem, Page, PageHeading, Sidebar, TextField, Workspace, WorkspaceMenu, navActiveDeep, notify, useCommandShortcut


## ats-admission · Admissões (ATS)

Garantir que cada contratado chegue no primeiro dia com documentos, contrato e acessos prontos.
- Anatomia F · Mestre-detalhe: contratados à esquerda, checklist à direita; seleção no endereço (?id=)
- Progresso por pessoa e alerta quando faltam itens perto da data de início
- Checklist agrupado com responsável por item; concluir só com tudo marcado (motivo no botão)
- Vem da proposta aceita (Iniciar admissão) já com a pessoa selecionada
- Cinco estados: ?estado=carregando|vazio|erro simula
Componentes: Avatar, Badge, Button, Callout, Checkbox, ConfirmDialog, Empty, Meter, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, Tabs, formatDate, notify, plural, useOperation


## ats-candidate · Perfil do candidato (ATS)

Decidir sobre um candidato com tudo à mão: em que etapa está, como foi avaliado por critério e o que vem a seguir.
- Anatomia C · Registro: trilha + nome + ações fixos; propriedades fixas à direita (SplitLayout)
- StagePath clicável mostra o caminho e o próximo passo
- Avaliações por critério e por entrevistador; radar contra o perfil da vaga
- Reprovar pede confirmação; proposta em modal
Componentes: Avatar, Badge, Button, ConfirmDialog, DatePicker, Empty, FieldBlock, Modal, Page, PageHeading, PropertyList, RadarChart, Select, SplitLayout, StagePath, Tabs, Timeline, formatCurrency, notify


## ats-candidates · Banco de talentos (ATS)

Trabalhar o banco de talentos em escala: filtrar, selecionar muitos e mover de etapa de uma vez.
- Anatomia A · Lista com DataGrid: rolagem interna, cabeçalho e colunas fixos
- Visões salvas, filtros e busca local (/) na barra da grade
- Seleção em massa com BulkBar (mover etapa, e-mail)
- Ações rápidas na linha; colunas configuráveis; CSV
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
Componentes: Avatar, Badge, Button, DataGrid, Empty, EmptyFilterResult, FilterBar, FilterField, GridColumn, Highlight, Menu, Modal, Page, PageHeading, SavedView, SavedViews, Select, TableSearch, TextField, formatCurrency, notify, plural, useFilters, useSavedViews


## ats-careers · Página de carreiras (ATS)

Atrair candidatos com uma página pública de vagas pensada primeiro para o celular.
- Anatomia I · Público: rolagem do documento, cabeçalho do site fixo, sem casca de app
- Busca e filtros por área e modelo
- Candidatura em folha com currículo; botão fixo no celular
Componentes: Badge, Button, Checkbox, FileDropzone, Highlight, ProductMark, Sheet, TextField, UploadItem, formatCurrency, matchesQuery, notify


## ats-dashboard · Painel de recrutamento (ATS)

Mostrar ao time de recrutamento se as contratações estão no ritmo e o que pede ação hoje.
- Anatomia B · Painel: cabeçalho fixo com período, KPIs no topo
- Um gráfico por pergunta: meta, tempo × SLA, funil, aceite, origem
- “Precisa de você” antes dos detalhes: avaliações pendentes, propostas e requisições para aprovar, cada linha abre o registro
- KPIs abrem o detalhe (relatórios, propostas)
Componentes: AreaChart, Avatar, Button, ChartCard, Column, DataTable, DonutChart, DumbbellChart, Empty, ErrorState, FunnelChart, KpiCard, KpiGrid, ListPanel, ListRow, Page, PageHeading, SegmentedControl, Skeleton, formatCurrency, formatNumber, formatPercent


## ats-interviews · Entrevistas (ATS)

Organizar a agenda de entrevistas e não deixar avaliações pendentes.
- Anatomia A · Lista agrupada por dia, cabeçalho fixo
- Pendências de avaliação em destaque no topo
- Scorecard em folha lateral com os critérios da vaga
- Agendar em Drawer sem sair da agenda: ?candidato=c4 (vindo do banco de talentos) abre já preenchido
- Entrar na sala e Como chegar são links (abrem o Meet ou o mapa)
- Cinco estados: ?estado=carregando|vazio|erro simula
Componentes: Avatar, AvatarGroup, Badge, Button, ChoiceCards, Combobox, Drawer, Empty, ListPanel, MultiSelect, OperationButton, OperationFeedback, Page, PageHeading, Rating, SegmentedControl, Select, Sheet, Skeleton, Slot, SlotPicker, TextField, TextareaField, buttonClass, formatDate, notify, plural, useOperation


## ats-job · Vaga (ATS)

Ver a saúde de uma vaga (funil, melhores candidatos) e definir como ela será avaliada.
- Anatomia C · Registro com abas; propriedades fixas à direita
- Modelo de avaliação: critérios com peso e nota esperada
- ?id=nova transforma o registro no formulário de abertura
Componentes: Avatar, Badge, Button, Callout, ChoiceCards, CurrencyField, FunnelChart, IconButton, ListPanel, ListRow, NumberField, Page, PageHeading, PropertyList, Rating, Select, SplitLayout, Tabs, TextField, TextareaField, formatCurrency, notify


## ats-jobs · Vagas (ATS)

Acompanhar todas as vagas abertas e achar rápido as que estão fora do SLA.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada; abas por situação
- Funil por etapa na linha (barra de proporção)
- Tempo em aberto contra o SLA com tom de alerta
- Estado na URL; linha abre a vaga
Componentes: ActionMenu, Avatar, Badge, Button, Column, DataTable, EmptyFilterResult, FilterBar, FilterField, Highlight, Page, PageHeading, PageToolbar, SortHeader, StatCell, StatGrid, TableSearch, Tabs, chartColor, notify, useFilters, useSort


## ats-offers · Propostas (ATS)

Conduzir propostas de contratação pela aprovação até o aceite, com o risco de salário visível.
- Anatomia F · Mestre-detalhe: lista de propostas + detalhe com cadeia de aprovação
- Alerta quando o salário sai da faixa
- Ações mudam com a situação (aprovar, enviar, registrar resposta); aceite leva à admissão
- Cinco estados: ?estado=carregando|vazio|erro simula; aba sem propostas tem vazio próprio
Componentes: Avatar, Badge, Button, Callout, ConfirmDialog, CurrencyField, Empty, Page, PageHeading, PropertyList, Stepper, Tabs, formatCurrency, notify


## ats-pipeline · Candidatos da vaga (ATS)

Mover candidatos de uma vaga entre etapas e ver onde o funil trava.
- Anatomia E · Quadro: colunas por etapa; no desktop a página não rola
- Card com nota média, origem e tempo na etapa; arrastar para avançar
- Alternar Quadro/Lista sem perder filtros
- Card abre o perfil
- Vaga sem candidatos: vazio com Adicionar candidato e Copiar link da vaga
- Cinco estados: ?estado=carregando|vazio|erro simula
Componentes: Avatar, Badge, Button, Column, DataTable, Empty, KanbanBoard, KanbanColumn, Modal, Page, PageHeading, RecordCard, SegmentedControl, Select, Skeleton, TextField, chartColor, notify


## ats-reports · Relatórios de recrutamento (ATS)

Explicar onde o processo seletivo perde tempo e candidatos, e quais origens valem o investimento.
- Anatomia B · Painel: cabeçalho fixo com período à direita; exportar como ação secundária
- Um gráfico por pergunta: funil, tempo × SLA, tempo por etapa, recusas (Pareto), origem
- Tabela de origens com conversão, retenção e custo (o detalhe acionável no fim)
- Drill-down a partir dos KPIs do painel de recrutamento
Componentes: BarChart, Button, ChartCard, Column, DataTable, DumbbellChart, Empty, ErrorState, FunnelChart, KpiCard, KpiGrid, Page, PageHeading, ParetoChart, SegmentedControl, Skeleton, downloadCsv, formatCurrency, formatNumber, formatPercent, notify


## ats-requisitions · Requisições de vaga (ATS)

Decidir rápido quais vagas podem ser abertas, com orçamento e justificativa à vista.
- Anatomia F · Mestre-detalhe: fila à esquerda, requisição à direita; seleção no endereço (?id=)
- Aba “Aguardando você” primeiro; contador na navegação só com o que pede ação
- Cadeia de aprovação em Stepper; recusar pede motivo obrigatório
- Abrir vaga (ats-job ?id=nova) envia para cá: ?nova=<título> entra no topo da fila
- Cinco estados: ?estado=carregando|vazio|erro simula
Componentes: Avatar, Badge, Button, Callout, Empty, Modal, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, Stepper, Tabs, TextareaField, formatCurrency, formatDate, notify, useOperation


## auth-forgot-password · Redefinir senha (Autenticação)

Recuperar o acesso sem fricção e sem revelar se um e-mail existe.
- Anatomia H · Fluxo focado: uma coluna, quatro estados na mesma tela
- Mensagem neutra após pedir o link (segurança)
- Nova senha com confirmação e força visível
Componentes: Button, PasswordField, TextField


## auth-login · Entrar (Autenticação)

Entrar rápido pelo caminho que a pessoa já usa: senha, SSO ou link mágico.
- Anatomia H · Fluxo focado: formulário à esquerda, painel de marca navy à direita (some no celular)
- SSO Google/Microsoft e link mágico além da senha
- Erro no lugar do campo, sem limpar o que foi digitado
Componentes: Button, Callout, Checkbox, PasswordField, TextField


## auth-otp · Verificar código (Autenticação)

Confirmar a identidade com um código de 6 dígitos sem atrito.
- Anatomia H · Fluxo focado: cartão central
- Colar o código inteiro; verificação automática no último dígito
- Erro com tentativas restantes; reenviar com contagem
Componentes: Button, OtpInput, Spinner


## auth-signup · Criar conta (Autenticação)

Criar a conta com o mínimo de campos e sem dúvida sobre a senha.
- Anatomia H · Fluxo focado: coluna única centrada em duas etapas (você → empresa)
- Stepper discreto; senha com força visível
- Plano vindo da página de preços (?plan=) aparece como selo
Componentes: Badge, Button, Checkbox, PasswordField, Select, Stepper, TextField


## clm-approvals · Fila de aprovação (Contratos)

Aprovar ou recusar um contrato olhando só o que foge do modelo padrão, sem reler a minuta inteira.
- Anatomia F · Mestre-detalhe: fila à esquerda, aprovação à direita; seleção no endereço (?id=); no celular o detalhe abre em tela cheia com Voltar
- Diferenças contra o modelo: padrão × proposto lado a lado, risco em palavra e “alternativa já aprovada” quando existe na biblioteca
- Cadeia de aprovação (Stepper) com o comentário de quem já aprovou
- Recusar exige comentário; aprovar passa para o próximo da cadeia
- Cinco estados na fila: ?estado=carregando|vazio|erro
Componentes: Avatar, Badge, Button, Callout, Empty, EntityMark, FactLine, OperationButton, OperationFeedback, Page, PageHeading, Stepper, Tabs, TextareaField, formatCurrency, formatDate, plural, useOperation


## clm-contract · Contrato (Contratos)

Dar ao Jurídico tudo sobre um contrato numa tela: o que foi combinado, o que foge do padrão, quem falta assinar e o que precisa ser cumprido até quando.
- Anatomia C · Registro: trilha, título e ações fixos; propriedades e contraparte fixas à direita (SplitLayout)
- StagePath mostra o caminho rascunho → vigente; vencido/encerrado como desfecho
- Ações por situação: Enviar para aprovação, Enviar para assinatura (com motivo quando bloqueado), Lembrar signatários, Renovar (Drawer), Encerrar (ConfirmDialog)
- Cláusulas-chave extraídas da minuta: fora do padrão com risco em palavra e comparação com o modelo
- Versões: RevisionTimeline para navegar por dia + Timeline com versão e data à esquerda (changelog)
- Assinaturas em ordem, com método (ICP-Brasil, gov.br) e lembrete individual
- ?aba= abre a aba certa; ?acao=renovar abre a renovação vinda da lista
Componentes: ActionMenu, ActivityFeed, ActivityItem, AiBadge, Avatar, Badge, Button, Callout, Checkbox, ConfirmDialog, CurrencyField, DateBadge, DatePicker, Drawer, Empty, EntityMark, FileDropzone, FilesList, LocationTag, Meter, NextStep, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, RevisionTimeline, Select, SplitLayout, StagePath, StatCell, StatGrid, Tabs, TextField, TextareaField, Timeline, UploadItem, formatCurrency, formatDate, formatPercent, notify, plural, useOperation


## clm-contracts · Contratos (Contratos)

Achar qualquer contrato da empresa em segundos e enxergar o que vence, o que renova sozinho e o que está parado em alguma etapa.
- Anatomia A · Lista com DataGrid: visões salvas acima, filtros e busca na barra da grade, rolagem interna com total no rodapé
- Visões salvas do sistema: Vigentes, Vencendo em 90 dias, Renovação automática, Aguardando assinatura, Meus
- Vigência com palavra (“Vence em 12 dias”); só ≤ 30 dias e vencidos pintam
- Seleção em massa: atribuir responsável e lembrar responsáveis
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
- Linha abre o contrato (?id=); ?visao= abre a visão certa a partir do painel
Componentes: Avatar, Button, DataGrid, Empty, EmptyFilterResult, EntityMark, FileDropzone, FilterBar, FilterField, GridColumn, Highlight, Menu, Modal, Page, PageHeading, SavedView, SavedViews, StatCell, StatGrid, TableSearch, formatCurrency, formatDate, notify, plural, useFilters, useSavedViews


## clm-counterparties · Contrapartes (Contratos)

Saber com quem a empresa tem contrato, quanto está em jogo com cada um e se a contraparte está regular antes de assinar ou renovar.
- Anatomia A · Lista com DataGrid; detalhe em Drawer (?id=) para não perder a lista
- Due diligence resumida em palavra (Em dia, Certidão vencida, Pendências) e aberta por verificação na gaveta
- LocationTag com a hora local da sede (contraparte em Manaus, Recife ou Lisboa)
- Atualizar certidões e cadastrar contraparte com operação e aviso ao terminar
- Cinco estados: ?estado=carregando|vazio|erro; vazio por filtro com Limpar
Componentes: Badge, Button, DataGrid, Drawer, Empty, EmptyFilterResult, EntityMark, FilterBar, FilterField, GridColumn, Highlight, LocationTag, MaskedField, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, TableSearch, TextField, formatCurrency, formatDate, masks, plural, useFilters, useOperation


## clm-dashboard · Painel de contratos (Contratos)

Mostrar ao Jurídico e a Suprimentos o que vence, o que renova sozinho e o que está parado esperando alguém, antes que o prazo de aviso prévio passe.
- Anatomia B · Painel: cabeçalho fixo com horizonte à direita; KPIs, um gráfico por pergunta e filas de ação
- KPI com base explícita; obrigações atrasadas com goodWhen="down"
- Vencimentos por mês com alternância Valor/Quantidade (ChartCardTotals) e renovação automática separada da por aditivo
- “Precisa de você” antes dos detalhes: aprovações, assinaturas paradas e prazos de aviso prévio
- Cada linha abre o registro certo (contrato, fila de aprovação, obrigações)
Componentes: Badge, BarChart, BarList, Button, ChartCard, ChartCardTotals, Empty, EntityMark, ErrorState, KpiCard, KpiGrid, ListPanel, ListRow, MiniBarChart, Page, PageHeading, SegmentedControl, Skeleton, formatCompact, formatCurrency, formatDate, formatNumber, plural


## clm-obligations · Obrigações e prazos (Contratos)

Não perder prazo de contrato: cobrar a contraparte, pagar em dia e decidir renovações antes do aviso prévio.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (situação, filtros, busca); lista agrupada por urgência ou calendário do mês
- Atrasadas primeiro, com dias de atraso em palavra; prazo em DateBadge
- Checkbox marca como cumprida com Desfazer
- Renovações em andamento como ProjectProgressCard (marcos, responsável, prazo)
- Nova obrigação em Drawer, com operação e aviso ao terminar
- Cinco estados: ?estado=carregando|vazio|erro; ?filtro=atrasadas vem do painel
Componentes: AgendaEvent, Avatar, Badge, Button, Checkbox, Combobox, CurrencyField, DateBadge, DatePicker, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, Highlight, MonthCalendar, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, ProjectProgressCard, SegmentedControl, Select, StatCell, StatGrid, TableSearch, TextField, formatCurrency, notify, plural, useFilters, useOperation


## clm-request · Nova solicitação de contrato (Contratos)

Deixar Suprimentos, TI ou Comercial pedirem um contrato ao Jurídico com tudo o que ele precisa na primeira vez, partindo de um modelo aprovado.
- Anatomia H · Fluxo focado: sem navegação do app, só o assistente e um resumo ao lado
- FormWizard: cada etapa valida ao avançar; Voltar nunca valida; anexos são opcionais
- Contraparte por Combobox com a situação da due diligence (certidões) logo abaixo; contraparte nova por CNPJ
- Cadeia de aprovação calculada pelo valor e pelo tratamento de dados (DPO)
- Ao concluir, gera o rascunho e leva ao registro do contrato
- ?objeto= vem preenchido pela busca ⌘K (“Solicitar contrato “…””); ?modelo= e ?contraparte= vêm de Modelos e de Contrapartes
Componentes: Badge, Button, Callout, Checkbox, ChoiceCards, Combobox, CurrencyField, DatePicker, EntityMark, FileDropzone, LocationTag, MaskedField, NumberField, ProductMark, PropertyList, Select, Stepper, TextField, TextareaField, UploadItem, formatCurrency, formatDate, masks, plural


## clm-templates · Modelos e cláusulas (Contratos)

Manter os modelos e as cláusulas que o Jurídico aceita num só lugar, para que as áreas peçam contratos sem reinventar texto e a aprovação só olhe o que foge disso.
- Anatomia A · Lista (modelos) com Drawer de detalhe por ?modelo=; Anatomia F · Mestre-detalhe (cláusulas) com ?clausula=
- Revisão vencida (mais de 1 ano) aparece com palavra, não só cor
- Quem pode usar: áreas com autoatendimento e limite de valor
- Alternativas aprovadas com risco, alçada e quantas vezes foram usadas
- Propor alternativa e criar modelo em Drawer, com operação e aviso ao terminar
- Cinco estados: ?estado=carregando|vazio|erro
Componentes: Avatar, Badge, Button, Callout, Drawer, Empty, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, Select, Tabs, TextField, TextareaField, formatCurrency, formatDate, formatNumber, plural, useOperation


## comms-analytics · Mural · alcance da comunicação (Comunicação)

Saber se a comunicação está chegando, em quem não chega e o que reforçar hoje.
- Anatomia B · Painel: período e exportar no cabeçalho; 4 KPIs com base explícita
- “Precisa de você” antes dos gráficos: comunicados com leitura baixa ou confirmação atrasada, com ação de reforço
- Um gráfico por pergunta: leitura × meta, canal, área × cidade (matriz), tempo até ler, horário
- Tabela de comunicados ordenável no fim, linha abre o comunicado
Componentes: Badge, BarChart, BarList, Button, ChartCard, Column, DataTable, Empty, ErrorState, HeatmapMatrix, KpiCard, KpiGrid, LineChart, ListPanel, ListRow, MiniBarChart, OperationButton, Page, PageHeading, SegmentedControl, Skeleton, downloadCsv, formatDate, formatNumber, formatPercent, plural, useOperation, useSort


## comms-announcement · Mural · comunicado (Comunicação)

Ler um comunicado oficial com calma, confirmar que entendeu quando é obrigatório e, para quem publicou, saber quem ainda não leu.
- Anatomia C · Registro de leitura: trilha + título + Confirmar leitura fixos; coluna de propriedades e alcance à direita
- ReadingDocument: serifa de leitura e medida curta para texto longo
- Confirmação obrigatória com aceite explícito (caixa + botão), com operação assíncrona e erro em bloco
- Alcance por área só para quem publica: lidos/total, mediana até a leitura e lembrete a quem não leu
- Comentários com respostas oficiais; reações não substituem a confirmação
Componentes: ActionMenu, Avatar, Badge, Button, Callout, Checkbox, ConfirmDialog, Empty, LocationTag, Meter, OperationButton, OperationFeedback, Page, PageHeading, ProgressRing, PropertyList, ReadingDocument, SplitLayout, TextareaField, formatDate, formatNumber, formatPercent, formatRelative, notify, plural, useOperation


## comms-channels · Mural · conversas (Comunicação)

Conversar com o time no mesmo lugar dos comunicados, sem confundir conversa com aviso oficial.
- Anatomia G · App de altura total: lista de canais, conversa e fio/detalhes; só a conversa rola
- Canal e DM pela URL (?canal=); fio pela URL (?fio=); no celular cada um abre em tela cheia com voltar
- Menção a você destacada; contador na lista só para menções (não para total de mensagens)
- Comunicado oficial aparece como cartão que leva ao Mural, não como texto solto
- Pedido com prazo vira faixa de ação obrigatória com envio de arquivo
Componentes: ActionRequiredBanner, Avatar, AvatarGroup, Badge, Button, Combobox, DateSeparator, Empty, FileCard, IconButton, Marker, Modal, SearchInput, Skeleton, TeamComposer, TeamMessage, TypingIndicator, formatNumber, normalize, notify, plural


## comms-compose · Mural · publicar comunicado (Comunicação)

Escrever um comunicado oficial que chega a quem precisa, pelo canal certo, e só sai depois de aprovado.
- Anatomia C · Registro em edição: trilha + título + Salvar rascunho / Enviar para aprovação fixos; pré-visualização fixa à direita
- Stepper do ciclo (rascunho → aprovação → agendado → publicado) logo abaixo do cabeçalho
- Público por MultiSelect (áreas, cidades, cargos) com estimativa de alcance ao vivo
- Leitura obrigatória com prazo; agendamento com DateTimePicker (fuso visível)
- Pré-visualização computador/celular com notificação e o que chega em cada canal
- Envio com useOperation: botão informa, erro em bloco, rascunho nunca se perde
Componentes: Avatar, Badge, Button, Callout, CheckboxGroup, Combobox, DatePicker, DateTimePicker, MultiSelect, OperationButton, OperationFeedback, Page, PageHeading, RadioGroup, RichTextEditor, RichTextView, SegmentedControl, Select, SplitLayout, Step, Stepper, Switch, TextField, TextareaField, formatDate, formatNumber, useOperation


## comms-events · Mural · eventos (Comunicação)

Ver o que vai acontecer, onde e quando (no meu fuso), e se inscrever em um clique.
- Anatomia A · Lista agrupada por dia: cabeçalho fixo + PageToolbar com formato, cidade e categoria
- LocationTag no local do evento: hora local de Manaus, Cuiabá ou Lisboa ao lado do horário
- Vagas como medidor com palavra; esgotado vira lista de espera (botão diz o que faz)
- Detalhe (?id=) e criação (?novo=1) em Drawer, sem perder a agenda
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
Componentes: ActionMenu, Avatar, AvatarGroup, Badge, Button, ChoiceCards, DateTimePicker, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, LocationTag, Meter, MultiSelect, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, PropertyList, Select, Switch, Tabs, TextField, TextareaField, TimePicker, formatNumber, notify, plural, useFilters, useOperation


## comms-home · Mural · início (Comunicação)

Em um minuto, saber o que a empresa precisa que eu leia, o que mudou e o que está acontecendo com as pessoas.
- Anatomia B · Painel de leitura: cabeçalho fixo; “Precisa de você” (leitura obrigatória) antes do feed
- Fixados no topo; feed de comunicados com autor, público, reações e quantas pessoas leram
- Coluna lateral com o que é da semana: eventos, enquete aberta, aniversários e novos colegas
- Cinco estados: ?estado=carregando (forma final da página), erro (com saída) e vazio (feed sem comunicados); aba Não lidos vazia oferece Ver todos
Componentes: Avatar, AvatarGroup, Badge, Button, Empty, ErrorState, ListPanel, ListRow, Meter, Page, PageHeading, Skeleton, Tabs, formatDate, formatNumber, formatPercent, formatRelative, notify, plural


## comms-people · Mural · pessoas (Comunicação)

Achar quem pode ajudar, saber onde a pessoa está e se é uma boa hora para chamar.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (filtros e busca); cards, lista ou organograma
- LocationTag com hora local: time em 4 fusos (Manaus, Cuiabá, Recife/São Paulo, Lisboa)
- StackedList “Online agora” com o diretório completo no mesmo cartão
- Perfil em Drawer pela URL (?pessoa=): não perde a lista; gestão e equipe navegam dentro da gaveta
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
Componentes: Avatar, Badge, Button, Column, DataTable, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, Highlight, LocationTag, Page, PageHeading, PageToolbar, PropertyList, SegmentedControl, StackedList, TableSearch, TreeNode, TreeView, formatDate, formatNumber, notify, plural, useFilters


## comms-surveys · Mural · pesquisas e clima (Comunicação)

Ouvir o time com frequência e mostrar o resultado de forma honesta: quanto recomendam, quem respondeu e o que pedem.
- Anatomia A · Lista com resultado no topo: KPIs + NpsChart antes da lista de pesquisas
- Participação por área (BarList) e eNPS por área: onde a amostra é fraca, o número vale menos
- Resultado e ações da pesquisa em Drawer (?id=); criar em Drawer (?novo=1) com pré-visualização em Questionnaire
- Anonimato visível em todo lugar onde aparece um resultado
- Cinco estados na lista: ?estado=carregando|vazio|erro simula; aba sem itens oferece Ver todas
Componentes: Badge, BarList, Button, ChartCard, ChoiceCards, Column, ConfirmDialog, DataTable, DatePicker, Drawer, Empty, IconButton, KpiCard, KpiGrid, Meter, MiniBarChart, MultiSelect, NpsChart, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, Questionnaire, QuestionnaireQuestion, Switch, Tabs, TextField, formatDate, formatNumber, formatPercent, notify, plural, useOperation


## crm-activities · Atividades e agenda (CRM)

Não deixar follow-up cair: ver o que está atrasado, o que é hoje e fechar rápido.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada
- Agrupado por prazo (atrasadas primeiro) ou por semana
- Conclusão rápida na linha; nova atividade em modal
- Cinco estados: ?estado=carregando|vazio|erro simula; recorte vazio limpa filtros
Componentes: Avatar, Badge, Button, Checkbox, Combobox, DatePicker, Empty, EmptyFilterResult, ErrorState, FieldBlock, FieldGrid, FilterBar, FilterField, Highlight, Modal, Page, PageHeading, PageToolbar, SegmentedControl, Select, Skeleton, TableSearch, TextField, formatDate, notify, useFilters


## crm-company · Página da empresa (CRM)

Ver uma conta inteira (negócios, contatos, atividades) para preparar uma reunião ou decidir o próximo passo.
- Anatomia C · Registro: cabeçalho fixo; propriedades fixas à direita (SplitLayout)
- KPIs da conta no topo; abas para negócios, contatos e atividades
- Novo negócio já vinculado à empresa
- Editar em gaveta; mesclar duplicada = escolher a outra empresa + confirmação irreversível
Componentes: ActionMenu, Avatar, Badge, Button, Column, Combobox, ConfirmDialog, DataTable, Drawer, Empty, EntityMark, FieldBlock, FieldGrid, KpiCard, KpiGrid, Modal, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, Select, SplitLayout, Tabs, TextField, formatCurrency, formatDate, notify, useOperation


## crm-contact · Página do contato (CRM)

Entender o papel de uma pessoa na decisão e o histórico com ela antes de entrar em contato.
- Anatomia C · Registro: propriedades fixas à direita
- Papel na decisão (decisora, influenciadora) em destaque
- Histórico em feed; e-mail com modelo em modal
- Editar em gaveta (Drawer); mover de empresa com busca (Combobox) em modal curto
Componentes: ActionMenu, ActivityFeed, ActivityItem, Avatar, Badge, Button, Combobox, Drawer, Empty, EntityMark, FieldBlock, FieldGrid, Modal, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, Select, SplitLayout, TextField, TextareaField, formatCurrency, formatDate, notify, useOperation


## crm-contacts · Empresas e contatos (CRM)

Trabalhar a base de contas em escala: filtrar, editar na célula e agir em massa sem abrir cada registro.
- Anatomia A · Lista com DataGrid: rolagem interna, cabeçalho e total fixos, empresa fixa à esquerda
- Estágio e responsável editáveis na célula com desfazer
- Ações rápidas na linha (ligar, e-mail, ⋯ e clique direito)
- Seleção em massa; colunas configuráveis; CSV; cards no celular
- Importar planilha em gaveta: arquivo → mapear colunas → revisar (linhas com erro antes de gravar)
- E-mail pela linha abre o compositor com o contato principal
- Cinco estados: ?estado=carregando|vazio|erro simula; recorte vazio limpa filtros
Componentes: AlertCard, Avatar, AvatarGroup, Badge, Button, Checkbox, ComposeEmailDialog, DataGrid, Drawer, Empty, EmptyFilterResult, EntityMark, ErrorState, FieldBlock, FieldGrid, FileDropzone, FilterBar, FilterField, GridColumn, Highlight, Modal, OperationButton, OperationFeedback, Page, PageHeading, Person, SavedView, SavedViews, Select, Skeleton, Stepper, TableSearch, Tabs, TextField, UploadItem, downloadCsv, formatCurrency, formatNumber, gridToCsv, matchesQuery, notify, useFilters, useOperation, useSavedViews


## crm-deal · Página do negócio (CRM)

Avançar um negócio: ver em que etapa está, registrar o que aconteceu e decidir ganho ou perda.
- Anatomia C · Registro: trilha + título + Perdido/Ganho fixos; propriedades fixas à direita
- StagePath clicável; perda pede motivo
- Nota rápida alimenta o feed de atividade
- Edição longa em gaveta (Drawer)
- Duplicar cria a cópia em Qualificação e abre o novo registro; vincular contato com busca
Componentes: ActionMenu, ActivityFeed, ActivityItem, Avatar, Badge, Button, Checkbox, Combobox, ConfirmDialog, CurrencyField, DatePicker, Drawer, Empty, EntityMark, FieldBlock, FileCard, IconButton, Lightbox, Modal, Page, PageHeading, PropertyList, Select, SplitLayout, StagePath, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TextField, areaClass, formatBytes, formatCurrency, formatDate, formatNumber, formatPercent, notify


## crm-leads · Caixa de leads (CRM)

Decidir rápido quais leads viram negócio e quais saem da fila, sem perder o motivo.
- Anatomia F · Mestre-detalhe: fila à esquerda, lead à direita; seleção no endereço (?id=); no celular o detalhe ocupa a tela com voltar
- Pontuação explicada pelos sinais (cor sempre com palavra: Quente, Morno, Frio)
- Qualificar abre gaveta com o negócio pré-preenchido e leva ao registro criado
- Desqualificar exige motivo (alimenta o relatório de origem)
- Cinco estados: ?estado=carregando|vazio|erro simula; aba vazia com próxima ação
Componentes: Avatar, Badge, Button, CurrencyField, Drawer, Empty, EntityMark, ErrorState, FieldBlock, FieldGrid, Modal, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, Select, Skeleton, Tabs, TextField, formatCurrency, formatDate, notify, useOperation


## crm-pipeline · Pipeline de vendas (CRM)

Ver o funil comercial inteiro e mover negócios entre etapas sabendo quanto vale cada coluna.
- Anatomia E · Quadro: cabeçalho fixo; colunas crescem em telas largas
- Soma de valor e previsão ponderada no topo e por coluna
- Arrastar muda a etapa (com desfazer); card abre o negócio
- Filtros e busca na barra acima do quadro
- Cinco estados: sem negócios (criar), recorte vazio (limpar filtros), carregando, erro; ?estado=carregando|vazio|erro simula
Componentes: Badge, Button, Empty, EmptyFilterResult, EntityMark, ErrorState, FilterBar, FilterField, KanbanBoard, KanbanColumn, PageHeading, RecordCard, SegmentedControl, Skeleton, TableSearch, formatCurrency, formatPercent, notify, useFilters


## crm-quotes · Propostas comerciais (CRM)

Acompanhar as propostas enviadas e agir nas que vencem ou esperam resposta, sem sair da lista.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (visões, filtros, busca)
- Situação = ponto + texto (Badge); validade em âmbar perto do vencimento e em rose quando venceu
- Detalhe em Drawer pelo endereço (?id=): itens, total, ações que mudam com a situação
- Nova proposta em Drawer com itens, desconto e validade (useOperation + OperationButton)
- Cinco estados: ?estado=carregando|vazio|erro simula; recorte vazio limpa filtros
Componentes: Avatar, Badge, Button, Column, Combobox, DataTable, DatePicker, Drawer, Empty, EmptyFilterResult, EntityMark, ErrorState, FieldBlock, FieldGrid, FilterBar, FilterField, IconButton, Modal, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, PropertyList, SavedView, SavedViews, Select, Skeleton, TableSearch, TextField, formatCurrency, formatDate, formatNumber, formatPercent, notify, useFilters, useOperation, useSavedViews


## crm-sales-dashboard · Painel comercial (CRM)

Responder se o time vai bater a meta do trimestre e onde está perdendo negócios.
- Anatomia B · Painel: cabeçalho fixo com seletor de time
- KPIs levam à lista já filtrada (drill-down)
- “Precisa de você” num só painel logo abaixo dos KPIs: atividades atrasadas, negócios parados, propostas vencendo e leads novos
- Meta com ritmo esperado (GoalMeter)
- Receita × meta, funil, ranking e motivos de perda (Pareto)
Componentes: BarChart, Button, ChartCard, CompareStat, Empty, ErrorState, FunnelChart, GaugeChart, GoalMeter, KpiCard, KpiGrid, Leaderboard, ListPanel, ListRow, Page, PageHeading, ParetoChart, SegmentedControl, Skeleton, formatCurrency, formatNumber, formatPercent


## crm-settings · Configurações do CRM (CRM)

Ajustar o funil e as regras do CRM sem quebrar o que o time usa.
- Anatomia D · Configurações: título fixo
- Etapas com probabilidade e ordem; motivos de perda; regras de automação
- Barra de alterações não salvas no rodapé
Componentes: Button, IconButton, NumberField, Page, PageHeading, Switch, TagInput, TextField, notify


## crm-team · Time e metas (CRM)

Mostrar ao gestor quem está acima ou abaixo da meta e como o ranking mudou.
- Anatomia B · Painel: cabeçalho fixo
- Bullet por vendedor (realizado × meta), bump do ranking, slope do trimestre
- Editar meta em modal
Componentes: Avatar, Badge, BulletChart, BumpChart, Button, ChartCard, Column, CurrencyField, DataTable, IconButton, KpiCard, KpiGrid, Modal, Page, PageHeading, SegmentedControl, SlopeChart, formatCurrency, formatPercent, notify


## erp-customers · Clientes (ERP)

Ver a carteira de clientes B2B com risco de crédito e agir sem perder a lista.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada
- Uso do limite de crédito e títulos vencidos na linha
- Detalhe em gaveta pela URL (?id=): trocar de cliente no ⌘K troca a gaveta
- Novo cliente em gaveta: CNPJ com máscara e consulta na Receita, endereço e condições
- Cinco estados: ?estado=carregando|vazio|erro
Componentes: Badge, Button, Column, CurrencyField, DataTable, Drawer, Empty, EmptyFilterResult, EntityMark, FilterBar, FilterField, Highlight, ListRow, MaskedField, Meter, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, PropertyList, Select, SortHeader, TableSearch, TextField, formatCurrency, masks, notify, useFilters, useOperation, useSort


## erp-dashboard · Painel de operações (ERP)

Mostrar à operação se as vendas estão no ritmo e quais filas pedem ação agora (faturar, repor, aprovar).
- Anatomia B · Painel: cabeçalho fixo com período
- Vendas × meta diária, OTIF, causas de atraso (Pareto)
- “Precisa de você” num só painel (compras na sua etapa, estoque crítico, compras e entregas atrasadas); a faturar em painel neutro ao lado
Componentes: AreaChart, Badge, BarList, Button, ChartCard, Empty, ErrorState, KpiCard, KpiGrid, LineChart, ListPanel, ListRow, Page, PageHeading, ParetoChart, SegmentedControl, Skeleton, formatCompact, formatCurrency, formatNumber, formatPercent


## erp-inventory · Estoque (ERP)

Evitar ruptura: ver o saldo por depósito contra o mínimo e repor a tempo.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada
- Régua de saldo contra o mínimo e cobertura em dias
- Ruptura vira requisição de compra em um clique
- Linha abre o produto
Componentes: Badge, Button, Callout, ChartCard, Column, DataTable, Empty, EmptyFilterResult, FieldBlock, FilterBar, FilterField, Highlight, KpiCard, Meter, Modal, NumberField, Page, PageHeading, PageToolbar, Select, SortHeader, TableSearch, TextField, Treemap, formatCurrency, formatNumber, notify, useFilters, useSort


## erp-invoice · Nota fiscal (NF-e) (ERP)

Conferir, imprimir e corrigir uma NF-e com a mesma leitura do documento fiscal.
- Anatomia C · Registro como documento: cabeçalho fixo (fora da impressão)
- Layout fiel ao documento: chave, emitente, destinatário, itens, tributos
- CSS de impressão só com o documento
- Carta de correção e cancelamento com confirmação
Componentes: ActionMenu, Badge, Button, Callout, ConfirmDialog, Modal, Page, PageHeading, TextareaField, formatCurrency, formatNumber, notify


## erp-invoices · Notas fiscais (ERP)

Achar notas com problema na SEFAZ e resolver rápido.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada
- Rejeições em destaque com o motivo e reenvio
- Busca por número, chave ou cliente (/); XML em massa
Componentes: Badge, BulkBar, Button, Callout, ChoiceCards, Column, DataTable, DatePicker, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, Highlight, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, PropertyList, Select, SortHeader, StatCell, StatGrid, TableSearch, TextField, formatCurrency, notify, selectionColumn, useFilters, useOperation, useSelection, useSort


## erp-order · Pedido de venda (ERP)

Levar um pedido de venda do cadastro à entrega com as ações certas em cada etapa.
- Anatomia C · Registro: etapas no topo; resumo fixo à direita
- Ações mudam com a situação (aprovar, liberar crédito, faturar…)
- Itens com saldo em estoque
- ?id=novo abre o cadastro na mesma tela
Componentes: Badge, Button, Callout, Combobox, ConfirmDialog, EntityMark, FieldBlock, IconButton, NumberField, Page, PageHeading, PropertyList, Select, SplitLayout, Stepper, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, formatCurrency, notify


## erp-orders · Pedidos de venda (ERP)

Operar pedidos em volume: agrupar por situação, ver itens sem abrir e faturar em massa.
- Anatomia A · Lista com DataGrid: rolagem interna, total fixo no rodapé
- Abas por situação + agrupamento com subtotal
- Itens expansíveis na linha; faturamento em massa
- Ações rápidas e CSV
Componentes: Badge, Button, DataGrid, Empty, EmptyFilterResult, FilterBar, FilterField, GridColumn, Highlight, Page, PageHeading, SegmentedControl, StatCell, StatGrid, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableSearch, Tabs, formatCurrency, notify, useFilters


## erp-product · Produto (ERP)

Entender um SKU: onde está o estoque, quando acaba, margem e quem fornece.
- Anatomia C · Registro: propriedades fixas à direita
- Saldo por depósito contra o mínimo; projeção de 30 dias
- Ajuste de preço e pedido de compra em modal
Componentes: AreaChart, Badge, Button, ChartCard, Column, CurrencyField, DataTable, Empty, KpiCard, KpiGrid, Meter, Modal, Page, PageHeading, PropertyList, SplitLayout, formatCurrency, formatNumber, formatPercent, notify


## erp-products · Produtos (ERP)

Manter o catálogo saudável: preço com margem, estoque contra o mínimo e cadastro rápido de SKU novo.
- Anatomia A · Lista com DataGrid: abas Ativos/Inativos, filtros e busca na barra da grade
- Margem em cor só quando abaixo da meta (número bom não grita)
- Novo produto em Drawer com margem calculada enquanto digita
- Cinco estados: ?estado=carregando|vazio|erro
Componentes: Badge, Button, Combobox, CurrencyField, DataGrid, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, GridColumn, Highlight, Meter, NumberField, OperationButton, OperationFeedback, Page, PageHeading, Select, StatCell, StatGrid, TableSearch, Tabs, TextField, formatCurrency, formatNumber, formatPercent, notify, useFilters, useOperation


## erp-purchase-order · Pedido de compra (ERP)

Acompanhar um pedido de compra do envio ao recebimento sabendo sempre qual é o próximo passo.
- Anatomia C · Registro: trilha, StagePath do ciclo, itens no corpo e condições fixas à direita
- Ações mudam com a situação (enviar ao fornecedor, registrar confirmação, registrar recebimento)
- ProjectProgressCard com o próximo passo + Timeline do histórico
- Atraso vira Callout com a ação de cobrar o fornecedor
Componentes: Button, Callout, ConfirmDialog, DatePicker, EntityMark, Meter, Modal, OperationButton, OperationFeedback, Page, PageHeading, ProjectProgressCard, PropertyList, SplitLayout, StagePath, StateView, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, TextField, Timeline, TimelineItem, formatCurrency, formatNumber, formatPercent, notify, useOperation


## erp-purchase-orders · Pedidos de compra (ERP)

Garantir que o que foi comprado chegue no prazo: ver o que está atrasado, o que falta enviar e o que chega esta semana.
- Anatomia A · Lista com DataGrid: abas por situação, total no rodapé, itens expansíveis
- Previsão de entrega com atraso em palavra e cor (nunca só cor)
- Novo pedido em Drawer a partir de requisição aprovada (itens e fornecedor já vêm preenchidos)
- Cinco estados: ?estado=carregando|vazio|erro
Componentes: Badge, Button, ChoiceCards, Combobox, ConfirmDialog, CurrencyField, DataGrid, DatePicker, Drawer, Empty, EmptyFilterResult, EntityMark, FilterBar, FilterField, GridColumn, Highlight, IconButton, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, SegmentedControl, Select, StatCell, StatGrid, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableSearch, Tabs, TextareaField, formatCurrency, formatNumber, notify, useFilters, useOperation


## erp-purchase-requests · Requisições de compra (ERP)

Aprovar ou recusar requisições de compra com a cotação certa e justificativa.
- Anatomia F · Mestre-detalhe: fila à esquerda, requisição à direita
- Cadeia de aprovadores com etapa atual
- Comparação de cotações com o menor preço destacado
- Recusar exige justificativa
Componentes: Avatar, Badge, Button, Callout, Empty, Modal, NumberField, Page, PageHeading, PropertyList, Stepper, Tabs, TextField, areaClass, formatCurrency, notify


## erp-receiving · Recebimento de mercadoria (ERP)

Dar entrada só no que chegou de fato: conferir quantidade, nota e lote antes de atualizar o estoque.
- Anatomia F · Mestre-detalhe: pedidos a receber à esquerda, conferência à direita; seleção em ?pedido=
- Divergência por item em palavra (Falta 20 · Sobra 5 · Confere), nunca só cor
- Chave da NF-e validada contra o CNPJ do fornecedor
- Confirmação com useOperation: estoque e kardex atualizados só no fim
Componentes: Badge, Button, Callout, ChoiceCards, CurrencyField, DatePicker, Empty, EntityMark, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, Select, StateView, Tabs, TextField, formatCurrency, formatNumber, notify, useOperation


## erp-shipping · Expedição (ERP)

Fazer o pedido faturado sair do CD e chegar no prazo, vendo onde cada carga está.
- Anatomia E · Quadro: A separar → Separados → Em trânsito → Entregues; arrastar muda a etapa
- Detalhe em Drawer com LocationTag (CD de origem e destino com fuso) e Timeline do rastreio
- Despachar pede transportadora e código de rastreio; atraso em palavra no cartão
- Alternador Quadro/Lista (≥ 8 cargas) e cinco estados (?estado=)
Componentes: Badge, Button, Column, DataTable, Drawer, Empty, EntityMark, KanbanBoard, KanbanColumn, LocationTag, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, PropertyList, RecordCard, SegmentedControl, Select, Skeleton, StatCell, StatGrid, TextField, Timeline, chartColor, formatCurrency, formatNumber, notify, useOperation


## erp-stock-movements · Movimentações de estoque (ERP)

Explicar o saldo: de onde veio e para onde foi cada unidade, e corrigir o estoque com motivo registrado.
- Anatomia A · Lista com DataGrid: abas por tipo, filtros, total no rodapé, rolagem interna
- Saldo corrente por produto (kardex) ao filtrar um SKU (?sku=)
- Ajuste de inventário em Drawer: saldo do sistema × contado, diferença e motivo obrigatórios
- Cinco estados: ?estado=carregando|vazio|erro
Componentes: Badge, Button, Callout, Combobox, DataGrid, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, GridColumn, Highlight, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, SegmentedControl, Select, StatCell, StatGrid, TableSearch, Tabs, TextareaField, formatCurrency, formatNumber, useFilters, useOperation


## erp-suppliers · Fornecedores (ERP)

Escolher e acompanhar fornecedores por pontualidade, prazo e gasto.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada
- Classificação A/B/C e OTIF contra a meta
- Dispersão prazo × pontualidade para achar os problemáticos
- Detalhe em gaveta pela URL; pedir cotação troca o conteúdo da mesma gaveta (gaveta nunca abre gaveta)
- Cinco estados: ?estado=carregando|vazio|erro
Componentes: Badge, BarList, BulletChart, Button, ChartCard, Column, Combobox, DataTable, DatePicker, Drawer, Empty, EmptyFilterResult, EntityMark, FilterBar, FilterField, Highlight, IconButton, ListRow, MaskedField, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, PropertyList, ScatterChart, Select, SortHeader, TableSearch, TextField, TextareaField, formatCurrency, formatPercent, masks, useFilters, useOperation, useSort


## fin-bank-accounts · Contas bancárias (Financeiro)

Saber quanto há em cada banco agora, o que entrou e saiu e se a conta está conciliada.
- Anatomia B · Painel: KPIs consolidados no topo e um cartão por conta
- MiniBarChart de entradas e saídas por conta (toque mostra o dia)
- Última conciliação com palavra e atalho para conciliar as pendências
- Extrato recente da conta escolhida (?id=) com situação de conciliação
Componentes: Badge, Button, Column, CurrencyField, DataTable, Empty, KpiCard, KpiGrid, MiniBarChart, Modal, OperationButton, OperationFeedback, Page, PageHeading, Select, Skeleton, TextField, formatCurrency, formatRelative, notify, useOperation


## fin-budget · Orçamento (Financeiro)

Mostrar onde o realizado está fugindo do orçado e quem responde por isso.
- Anatomia B · Painel: cabeçalho fixo com mês/acumulado
- Halteres orçado × realizado; desvio favorável/desfavorável por cor e palavra
- Pedido de remanejamento em modal
Componentes: Badge, Button, ChartCard, Column, CurrencyField, DataTable, DumbbellChart, FieldBlock, KpiCard, KpiGrid, Meter, Modal, Page, PageHeading, SegmentedControl, Select, TextareaField, formatCurrency, formatPercent, notify


## fin-cashflow · Fluxo de caixa (Financeiro)

Responder se vai faltar caixa nas próximas semanas e o que vence antes.
- Anatomia B · Painel: cabeçalho fixo
- Entradas/saídas por semana (saídas negativas) e saldo projetado × mínimo
- Ponte do mês em cascata; próximos pagamentos
Componentes: Badge, BarChart, Button, ChartCard, Column, CurrencyField, DataTable, DatePicker, FieldBlock, KpiCard, KpiGrid, LineChart, Modal, Page, PageHeading, ProportionBar, SegmentedControl, TextField, WaterfallChart, formatCurrency, notify


## fin-dashboard · Visão financeira (Financeiro)

O dia da controladoria em uma tela: caixa, recebíveis, aprovações e pendências.
- Anatomia B · Painel: cabeçalho fixo com período
- KPIs de liquidez, aging e caixa contra o mínimo
- “Precisa de você” (aprovar pagamentos, cobrar vencidos sem promessa) ao lado da conciliação, antes dos detalhes
Componentes: BarList, Button, ChartCard, Empty, ErrorState, GaugeChart, KpiCard, KpiGrid, LineChart, ListPanel, ListRow, Meter, Page, PageHeading, ProportionBar, Skeleton, formatCurrency, formatDelta, formatNumber


## fin-dre · DRE gerencial (Financeiro)

Explicar o resultado do mês: da receita ao lucro, contra o orçado.
- Anatomia B · Painel com tabela hierárquica: grupos expansíveis
- Realizado × orçado com variação favorável/desfavorável
- Cascata da receita ao lucro; margens contra a meta
Componentes: BulletChart, Button, ChartCard, ComboChart, Delta, Page, PageHeading, SegmentedControl, WaterfallChart, formatCurrency, formatPercent, notify


## fin-payables · Contas a pagar (Financeiro)

Pagar em dia e só o que foi aprovado, com o comprovante à mão.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada; abas por situação
- Aprovação e agendamento em massa (BulkBar)
- Recusa com motivo; boleto anexo na gaveta
Componentes: Badge, BulkBar, Button, Callout, Column, Combobox, CurrencyField, DataTable, DatePicker, Drawer, Empty, EmptyFilterResult, FileCard, FileDropzone, FilterBar, FilterField, Highlight, Modal, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, PropertyList, Select, SortHeader, StatCell, StatGrid, TableSearch, Tabs, TextField, TextareaField, UploadItem, formatCurrency, notify, plural, selectionColumn, useFilters, useOperation, useSelection, useSort


## fin-receivables · Contas a receber (Financeiro)

Cobrar quem está atrasado, começando pelo maior risco.
- Anatomia A · Lista com resumo de aging no topo e DataGrid abaixo
- Tom da linha por atraso; total fixo no rodapé da grade
- Cobrança em massa e ações rápidas (receber, cobrar)
- Registrar pagamento ou promessa em gaveta
Componentes: Badge, BarChart, Button, ChartCard, DataGrid, DatePicker, Drawer, Empty, EmptyFilterResult, EntityMark, FieldBlock, FilterBar, FilterField, GridColumn, Highlight, KpiCard, KpiGrid, Page, PageHeading, PropertyList, TableSearch, Tabs, formatCurrency, formatPercent, notify, useFilters


## fin-reconciliation · Conciliação bancária (Financeiro)

Bater o extrato com o ERP rápido, aceitando o óbvio e resolvendo só as exceções.
- Anatomia F · Mestre-detalhe: extrato × lançamentos lado a lado
- Sugestões com grau de confiança; aceite em massa
- Vínculo manual e lançamento para tarifas sem documento
Componentes: Badge, Button, Callout, Empty, FieldBlock, FileDropzone, Meter, Modal, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, Select, UploadItem, formatCurrency, formatPercent, notify, useOperation


## marketing-landing · Landing de produto (Marketing)

Apresentar o produto e levar a pessoa ao cadastro com prova real (o produto na moldura).
- Anatomia I · Público: rolagem do documento, cabeçalho do site fixo
- Hero com o produto real; logos; recursos; números; depoimentos
- CTAs levam a cadastro, preços ou vendas
Componentes: AiOrb, AreaChart, BrandHaze, Button, FeatureGrid, HeroSection, ImageSphere, KpiCard, KpiGrid, LogoCloud, ScreenFrame, StatsBand, Testimonial, formatCompact, formatCurrency


## marketing-pricing · Página de preços (Marketing)

Ajudar a escolher o plano certo e ir para o cadastro com ele selecionado.
- Anatomia I · Público: cabeçalho do site fixo
- Ciclo mensal/anual e calculadora por usuários
- Comparativo com cabeçalho fixo ao rolar; FAQ em acordeão
- CTA leva ao cadastro com ?plan=
Componentes: Accordion, Badge, Button, NumberField, SegmentedControl, formatCurrency


## marketing-stage · Landing com palcos (Marketing)

Mostrar o produto trabalhando, em cena, e levar a pessoa a entrar: cada capítulo é uma ideia com uma peça real para tocar.
- Anatomia I · Público: a página rola, o SiteHeader fica e vira pílula de vidro ao rolar (useScrolled)
- StageSky no hero; Chapter com Kicker numerado e um Stage por capítulo, alternando o lado (flip)
- Peças reais do produto em Glass sobre o palco; a aprovação responde ao toque
- Cenas com useBeat (só com a aba visível), começam quando vistas (useInView); movimento reduzido mostra o fim da cena
- Uma CtaButton por dobra; a secundária é Button quiet em pílula
Componentes: Button, Chapter, CtaButton, FloatingFigure, Glass, Kicker, ProductMark, SiteHeader, SpeechBubble, Stage, StageSky, chapterTitleClass, formatCurrency, useBeat, useGlide, useInView, useOutgoing, useScrolled


## onboarding-checklist · Primeiros passos (Onboarding)

Levar uma conta nova ao primeiro valor com poucos passos, cada um com a ação direta.
- Anatomia B · Painel (home): cabeçalho fixo com saudação
- Checklist com progresso; um passo aberto por vez
- Cada passo leva à tela real onde a ação acontece
- Pode ser dispensado; progresso salvo
Componentes: Button, Callout, Page, PageHeading, ProgressRing


## onboarding-intro · Boas-vindas ilustradas (Onboarding)

Apresentar a ideia do produto em quatro frases antes do primeiro uso, sem pedir nenhum dado: quem acabou de entrar entende o que vem e pode pular.
- Anatomia H · Fluxo focado: só o cartão, centrado sobre bg-page, como diálogo (camada expressiva permitida no onboarding, regra 22a)
- IntroCard: ilustração em traço (MorphIllustration + onboardingScenes) no topo em gelo, 'Etapa 1 de 4', título, texto
- Pontos de etapa + Voltar/Avançar; a última vira 'Começar'; 'Pular' sempre à vista até a última
- ←/→ trocam de etapa; o texto da etapa é anunciado (aria-live); movimento reduzido troca a cena direto
- Sem os cinco estados: o conteúdo é fixo e local (nada carrega, nada fica vazio, nada falha); o que pede dado vem depois, no assistente
Componentes: IntroCard, IntroCardStep, ProductMark, onboardingScenes


## onboarding-wizard · Assistente de configuração (Onboarding)

Configurar o espaço de trabalho em poucos passos guiados, com a opção de pular.
- Anatomia H · Fluxo focado: trilha lateral de passos + rodapé fixo Voltar/Continuar
- Um assunto por passo (espaço, módulos, equipe, dados)
- Pular etapa sempre disponível; tela de conclusão leva ao checklist
Componentes: Button, ChoiceCards, FileDropzone, ProductMark, Select, TagInput, TextField, UploadItem


## saas-analytics · Análise de aquisição (SaaS)

Entender de onde vêm os clientes e onde a aquisição perde gente.
- Anatomia B · Painel: cabeçalho fixo com período
- Funil em colunas com a maior perda destacada
- Origem, dispositivos, conversão no tempo e atividade diária
Componentes: BarList, Button, CalendarHeatmap, ChartCard, DataTable, DonutChart, Empty, ErrorState, FunnelChart, KpiCard, KpiGrid, LineChart, Page, PageHeading, SankeyChart, SegmentedControl, Skeleton, formatCurrency, formatDelta, formatNumber, formatPercent


## saas-billing · Cobrança e faturas (SaaS)

Proteger o MRR: ver de onde ele vem e recuperar cobranças que falharam.
- Anatomia B · Painel + lista: ponte de MRR no topo, faturas abaixo
- Régua de cobrança com retentativa
- Ações em massa; detalhe da fatura em gaveta (?id=)
Componentes: Badge, BulkBar, Button, ChartCard, Column, DataTable, Drawer, Empty, EmptyFilterResult, EntityMark, FilterBar, FilterField, GridColumn, Highlight, KpiCard, KpiGrid, Page, PageHeading, PageToolbar, Pagination, PropertyList, ProportionBar, SortHeader, TableSearch, WaterfallChart, downloadCsv, formatCurrency, formatDate, formatNumber, gridToCsv, notify, selectionColumn, useFilters, usePagination, useSelection, useSort


## saas-customer · Página da conta (SaaS)

Decidir o que fazer com uma conta: saúde, uso, cobrança e suporte em um lugar.
- Anatomia C · Registro: KPIs da conta no topo; propriedades fixas à direita
- Saúde e adoção por recurso
- Ajuste de plano com prévia de MRR; cancelamento com confirmação
Componentes: ActionMenu, AreaChart, Badge, Banner, Button, ChartCard, Column, ConfirmDialog, DataTable, Drawer, EntityMark, FieldBlock, KpiCard, KpiGrid, Modal, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, RadialBars, Select, SplitLayout, Tabs, TextareaField, formatCurrency, formatDate, formatNumber, formatPercent, notify, useOperation


## saas-customers · Lista de clientes (SaaS)

Achar e agir sobre contas em escala: quem está em risco, quem pode expandir.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (visões, filtros, busca)
- Visões salvas por pergunta de negócio ('Em risco', 'Potencial de expansão')
- Estado na URL; seleção em massa com BulkBar; paginação
- Linha abre a conta
Componentes: ActionMenu, Badge, BulkBar, Button, Column, DataTable, Empty, EmptyFilterResult, EntityMark, FieldBlock, FieldGrid, FilterBar, FilterField, GridColumn, Highlight, Modal, NumberField, Page, PageHeading, PageToolbar, Pagination, Popover, SavedView, SavedViews, Select, SortHeader, Sparkline, TableSearch, TextField, downloadCsv, formatCurrency, formatNumber, gridToCsv, notify, selectionColumn, useFilters, usePagination, useSavedViews, useSelection, useSort


## saas-dashboard · Dashboard de produto SaaS (SaaS)

Mostrar a saúde do produto SaaS em uma olhada: receita, aquisição, retenção e satisfação.
- Anatomia B · Painel: cabeçalho fixo com Exportar e Nova conta
- KPIs com variação e sparkline
- Visitantes com seletor de período; movimento de MRR; NPS
- Contas recentes abrem a página da conta
Componentes: AreaChart, Badge, BarChart, Button, ChartCard, Column, DataTable, Empty, EntityMark, ErrorState, GridColumn, KpiCard, KpiGrid, NpsChart, Page, PageHeading, SegmentedControl, Skeleton, Tabs, downloadCsv, formatCurrency, formatNumber, formatPercent, gridToCsv, notify


## saas-explore · Explorar dados (SaaS)

Responder perguntas que o painel não previu (receita do Pro no Nordeste por canal, desconto médio por segmento) sem pedir relatório ao time de dados.
- Anatomia B · Painel: cabeçalho fixo + um card de trabalho que ocupa a página
- PivotBuilder: campos como chips, quatro áreas (Filtros, Colunas, Linhas, Valores), arrastar ou menu do campo
- Subtotais por grupo recolhível, total geral fixo no rodapé, sombreamento por intensidade
- Visões salvas como ponto de partida; Exportar CSV do recorte
Componentes: Menu, Page, PageHeading, PivotBuilder, PivotBuilderField, PivotLayout, PivotRecord, Skeleton


## saas-integrations · Integrações (SaaS)

Manter as integrações funcionando e conectar novas sem sair do produto.
- Catálogo por categoria com busca
- Estado de sincronização e erro com reconexão em destaque
- Autorização em modal; configuração em gaveta
Componentes: Badge, Banner, Button, ConfirmDialog, Drawer, Empty, EmptyFilterResult, FieldBlock, FilterField, Modal, Page, PageHeading, SegmentedControl, Select, Skeleton, Switch, TableSearch, TextField, notify, useFilters


## saas-journey · Jornada até o plano pago (SaaS)

Ver onde as pessoas saem do caminho até o plano pago e comparar os canais de aquisição.
- Anatomia B · Painel: cabeçalho com canal, gráfico principal e painel lateral (empilha no celular)
- Sankey com rótulos acima do nó (valor · % das visitas) e etapas embaixo
- Selecionar um nó traça o que chega e o que sai dele; o painel mostra a conversão
- No celular o gráfico rola dentro do próprio contêiner
Componentes: Button, ChartCard, Empty, ErrorState, Page, PageHeading, SankeyChart, SankeyLink, SankeyNode, SegmentedControl, Skeleton, formatNumber, formatPercent


## saas-mrr-bridge · Movimento de MRR (SaaS)

Explicar por que o MRR mudou no período e chegar às contas que causaram cada movimento.
- Anatomia B · Painel: cabeçalho com período, KPIs, um gráfico principal
- Cascata com eixo truncado (exceção documentada), conectores e valores nas barras
- Barra selecionável abre a lista de contas daquele movimento (padrão: Novos)
- Unidade alternável: R$ ou % do MRR de início
Componentes: Button, ChartCard, Empty, ErrorState, KpiCard, KpiGrid, Page, PageHeading, SegmentedControl, Skeleton, WaterfallChart, WaterfallStep, formatCurrency, formatNumber, formatPercent


## saas-plans · Planos e preços (SaaS)

Manter o catálogo de planos coerente: quanto custa cada um, o que inclui e quantas contas dependem dele antes de mudar um preço.
- Anatomia A · Lista: cabeçalho fixo; catálogo em cards e tabela de limites abaixo
- Alternador mensal/anual muda todos os preços de uma vez
- Cada plano mostra assinantes e MRR: o impacto aparece antes de editar
- Editar em Drawer com useOperation; preço novo vale para novas assinaturas
Componentes: Badge, Button, Column, CurrencyField, DataTable, Drawer, Empty, FieldGrid, KpiCard, KpiGrid, NumberField, OperationButton, OperationFeedback, Page, PageHeading, SegmentedControl, Skeleton, Switch, TextareaField, formatCompact, formatCurrency, formatNumber, formatPercent, useOperation


## saas-regions · Receita por estado (SaaS)

Ver onde a receita está concentrada e onde cresce, para decidir em que estados investir em vendas, parceiros e suporte local.
- Anatomia B · Painel: cabeçalho fixo com filtro de região, um cartão principal
- Métrica no SegmentedControl do cartão; crescimento usa escala divergente (abaixo × acima de zero), não verde × vermelho
- Mapa nunca sozinho: lista ordenada ao lado, ligada pelo mesmo realce (hover numa acende na outra)
- Escolher um estado aproxima o mapa e abre o detalhe (cidades, clientes); Voltar ao Brasil devolve a visão inteira
- Sem dado em hachura com travessão, diferente de zero
Componentes: Badge, BarList, BrRegion, BrUfId, Button, ChartCard, ChoroplethMap, ChoroplethScaleOptions, Empty, ErrorState, Page, PageHeading, RankedRegionList, SegmentedControl, Select, Skeleton, brRegions, brUfs, fitGeoViewBox, formatCompact, formatCurrency, formatDelta, formatNumber, formatPercent, useLinkedHighlight


## saas-reports · Relatórios (SaaS)

Gerar e agendar relatórios recorrentes para quem precisa receber números sem entrar no app.
- Anatomia A · Lista: modelos prontos + relatórios salvos
- Agendamento e execução manual
- Criação com destinatários em modal
Componentes: ActionMenu, Avatar, Badge, Button, Card, Column, DataTable, Empty, FieldBlock, FieldGrid, Modal, Page, PageHeading, Select, Sparkline, TagInput, TextField, formatDate, notify


## saas-retention · Retenção por coorte (SaaS)

Saber se as coortes novas retêm melhor que as antigas e em que mês a perda se estabiliza.
- Anatomia B · Painel: cabeçalho com segmento, KPIs, um gráfico principal
- Mapa de calor em triângulo (null = mês ainda não alcançado) com tamanho da coorte e linha de média
- Escala em degraus com legenda que destaca as células da faixa
- Mesma pergunta em curvas: coortes recentes mais escuras, média em destaque
Componentes: Button, ChartCard, Delta, Empty, ErrorState, HeatmapMatrix, KpiCard, KpiGrid, Page, PageHeading, RetentionCurves, SegmentedControl, Skeleton, formatNumber, formatPercent


## saas-support · Central de suporte (SaaS)

Atender a fila de chamados priorizando SLA, sem perder a conversa.
- Anatomia F · Mestre-detalhe: fila à esquerda, conversa à direita
- PageToolbar com filtros e busca colada ao cabeçalho
- SLA, prioridade e responsável no detalhe; no celular a conversa abre em tela cheia (?id=)
Componentes: Avatar, Badge, Button, Empty, EmptyFilterResult, EntityMark, FieldBlock, FilterBar, FilterField, Highlight, KpiCard, KpiGrid, Page, PageHeading, PageToolbar, Select, Skeleton, TableSearch, TextareaField, notify, useFilters


## saas-unit-economics · CAC e LTV por canal (SaaS)

Ver se cada canal de aquisição continua pagando o próprio custo: onde o LTV/CAC caiu abaixo da meta de 3×, quando e por quê.
- Anatomia B · Painel: cabeçalho fixo; um cartão-pergunta com o seletor de canal no action
- Células de número do mês em foco (mês, CAC, LTV, LTV/CAC com ponto + texto) acima do gráfico
- Dispersão conectada: um ponto por mês, setas de direção, cabeça no mês em foco, outros canais esmaecidos
- Linha y = 3·x tracejada e zona saudável em verde bem leve, com rótulo
- Controle de tempo embaixo (tocar/pausar); setas do teclado no gráfico também movem a cabeça
- Anotações nos meses em que algo mudou (campanha, plano anual)
Componentes: Button, ChartCard, ConnectedScatter, ConnectedScatterSeries, DataTable, Dot, Empty, ErrorState, GridColumn, Page, PageHeading, SegmentedControl, Skeleton, StatCell, StatGrid, downloadCsv, formatCurrency, formatNumber, gridToCsv, notify


## saas-usage-horizon · Uso por cidade contra a base (SaaS)

Achar, entre muitas cidades, onde o uso se afastou da base (para cima ou para baixo), quando começou e se ainda dura.
- Anatomia B · Painel: cabeçalho fixo, faixa de KPIs do último dia e um cartão-pergunta
- Horizon: uma linha baixa por cidade dobrada em faixas; acima da base em chart-pos, abaixo em chart-neg
- Cruz sincronizada em todas as linhas (ponteiro, toque ou setas) e valor do dia à direita de cada linha
- Ordenar (Nome, Pico, Último) e Faixas (1–4) como SegmentedControl; região como filtro
- Legenda que explica a leitura: tamanho da faixa e 'cor mais forte = mais longe da base'
Componentes: Button, ChartCard, Empty, ErrorState, HorizonChart, HorizonSeries, KpiCard, KpiGrid, Page, PageHeading, SegmentedControl, Select, Skeleton, formatDelta, formatNumber


## saas-usage · Uso e limites (SaaS)

Achar as contas que vão bater (ou já bateram) no limite do plano, para avisar antes do bloqueio e oferecer upgrade.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (faixa, recurso, plano, busca)
- Ordenada por % do limite: acima e perto primeiro
- Barra de uso + número + palavra; só acima/perto ganham cor
- Linha abre a conta; ?id= filtra uma conta vinda da página dela
Componentes: ActionMenu, Badge, Button, Column, DataTable, Empty, EmptyFilterResult, EntityMark, FilterBar, FilterField, GridColumn, Highlight, KpiCard, KpiGrid, Meter, Page, PageHeading, PageToolbar, Pagination, SortHeader, TableSearch, downloadCsv, formatCompact, formatCurrency, formatNumber, formatPercent, gridToCsv, notify, useFilters, usePagination, useSort


## settings-appearance · Aparência e marca (Configurações)

Aplicar a marca do cliente (white-label), o modo e a tipografia no app inteiro, ao vivo.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Prévia ao vivo antes de salvar; restaurar padrão
- Usa os tokens semânticos: só --ds-* mudam
Componentes: Badge, Button, DEFAULT_BRAND, Delta, SettingsSection, Switch, ThemeToggle, brandPresets, notify, typePresets, useTheme


## settings-audit-log · Log de auditoria (Configurações)

Responder quem fez o quê e quando, para segurança e compliance.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- PageToolbar com busca e filtros por pessoa, área e risco
- Detalhe do evento (antes/depois, IP) em gaveta por ?id=
- Exportação do recorte
Componentes: Avatar, Badge, Button, Column, DataTable, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, FilterState, Highlight, PageToolbar, Pagination, PropertyList, TableSearch, downloadCsv, notify, useFilters, usePagination


## settings-billing · Plano e cobrança (Configurações)

Mostrar o plano, o uso contra os limites e as faturas, e permitir trocar de plano.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Uso contra limites com aviso perto do teto
- Planos lado a lado com o atual marcado; mensal/anual
- Histórico de faturas com PDF
Componentes: Badge, Button, ChoiceCards, Column, ConfirmDialog, DataTable, Drawer, Meter, OperationButton, OperationFeedback, RadioGroup, SegmentedControl, TextField, TextareaField, formatCurrency, notify, useOperation


## settings-data · Dados e privacidade (Configurações)

Atender pedidos de portabilidade e exclusão da LGPD sem abrir chamado: o administrador exporta, define retenção e encerra a conta sozinho.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Pedido assíncrono: o botão informa (useOperation) e o histórico mostra o andamento por ponto + texto
- Zona de perigo no fim, separada; nome digitado libera o botão e ConfirmDialog confirma
- Exclusão com prazo de 30 dias e saída para desistir
Componentes: Button, Callout, CheckboxGroup, Column, ConfirmDialog, DataTable, Empty, HealthDot, OperationButton, OperationFeedback, RadioGroup, Select, SettingsSection, Switch, TextField, downloadCsv, formatBytes, formatDate, formatRelative, notify, useOperation


## settings-integrations · Integrações (Configurações)

Conectar e controlar integrações do workspace com permissões claras.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Catálogo com filtros por categoria
- Detalhe em gaveta (permissões, sincronização, histórico) por ?id=
Componentes: Badge, Button, Drawer, Empty, PropertyList, SearchInput, Switch, Tabs, Timeline, normalize, notify


## settings-notifications · Notificações (Configurações)

Deixar cada pessoa escolher onde quer ser avisada de quê, sem ruído.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Matriz evento × canal por módulo
- Resumo diário, horário de silêncio e pausa geral
- Salva sozinho (efeito imediato, sem botão)
Componentes: Button, Checkbox, RadioGroup, Select, SettingsSection, Switch, notify


## settings-organization · Organização (Configurações)

Manter num só lugar a identidade da empresa que aparece em documentos, e-mails e relatórios do workspace.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Seções rótulo-à-esquerda; barra de alterações não salvas no rodapé
- Domínio com status por ponto + texto e verificação sob demanda
- Logo por FileDropzone com prévia
Componentes: ActionMenu, Badge, Button, Combobox, ConfirmDialog, CopyButton, EntityMark, FileDropzone, HealthDot, MaskedField, Modal, Select, SettingsSection, TextField, UploadItem, formatRelative, masks, notify


## settings-profile · Perfil (Configurações)

Manter os dados da pessoa e da conta com segurança e sem perder alterações.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Seções rótulo-à-esquerda
- Barra de alterações não salvas no rodapé
- Zona de perigo separada no fim
Componentes: Avatar, Button, Callout, ConfirmDialog, MaskedField, Modal, Select, SettingsSection, TextField, TextareaField, masks, notify


## settings-roles · Papéis e permissões (Configurações)

Decidir o que cada papel pode fazer, vendo todos os papéis lado a lado, sem abrir um por um.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Matriz com Checkbox por célula, agrupada por módulo
- Papéis de sistema visíveis mas bloqueados, com o motivo
- Criar e editar papel em Drawer (useOperation + OperationButton); barra de alterações não salvas para a matriz
Componentes: ActionMenu, Badge, Button, Checkbox, CheckboxGroup, Column, ConfirmDialog, DataTable, Drawer, OperationButton, OperationFeedback, Select, SettingsSection, TextField, TextareaField, Tooltip, notify, useOperation


## settings-security · Segurança (Configurações)

Proteger a conta: senha, 2FA, sessões e chaves de API.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- 2FA com código em modal (OtpInput)
- Sessões ativas com encerramento
- Chave de API mostrada uma única vez
Componentes: Badge, Button, Callout, Column, ConfirmDialog, CopyButton, DataTable, Modal, OtpInput, PasswordField, SettingsSection, TextField, notify


## settings-storage · Armazenamento (Configurações)

Mostrar o que ocupa a cota e liberar espaço com segurança, sem o administrador ter de caçar arquivo por arquivo.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- CapacityBreakdown: total, linha de status, barra segmentada e legenda ligadas pelo mesmo realce
- Uma recomendação por vez, com o tamanho na frase e verbo + objeto no botão; a próxima aparece quando a anterior termina
- Irreversível (versões antigas, lixeira) passa por ConfirmDialog; reversível (arquivo frio) vai direto e o toast oferece Desfazer
- Maiores arquivos com filtro por equipe e uso por equipe em BarList, para achar quem cuidar
Componentes: ActionMenu, BarList, Button, CapacityBreakdown, CapacitySegment, CapacitySuggestion, Empty, ErrorState, FileCard, Select, Skeleton, formatStorage, notify


## settings-team · Equipe e permissões (Configurações)

Gerenciar quem tem acesso e com qual papel, dentro do limite de licenças.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Papel editável na linha
- Convites pendentes e uso de licenças visíveis
- Convite em massa em modal; remoção com confirmação
Componentes: ActionMenu, Avatar, Badge, Button, ChoiceCards, Column, ConfirmDialog, DataTable, Empty, Meter, Modal, Select, TableToolbar, TagInput, normalize, notify


## settings-webhooks · Webhooks (Configurações)

Ligar o workspace a outros sistemas por eventos e descobrir rápido quando uma entrega falha.
- Anatomia D · Configurações: título 'Configurações' fixo e subnavegação colada abaixo (SettingsLayout)
- Status por ponto + texto; endpoint falhando pinta a linha
- Criar/editar em Drawer com useOperation + OperationButton
- Entregas recentes com reenvio; excluir com ConfirmDialog
- Cinco estados: carregando, vazio, vazio por busca (Limpar), erro, com dados
Componentes: ActionMenu, Button, CheckboxGroup, Column, ConfirmDialog, CopyButton, DataTable, Drawer, Empty, ErrorState, HealthDot, OperationButton, OperationFeedback, Skeleton, TableToolbar, TextField, formatNumber, formatPercent, formatRelative, normalize, notify, useOperation


## srv-billing · Cobranças (boleto e Pix) (Serviços)

Receber no prazo sem cobrar na mão: a régua faz os lembretes, a pessoa só age nas exceções (vencidas, acordo, extrato sem dono).
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (abas, filtros, busca)
- Vencida em palavra com dias de atraso; seleção em massa com BulkBar para “Enviar 2ª via”
- Cobrança em Drawer (?id=): Pix copia e cola, linha digitável e a régua em Timeline (enviado, próximo, pendente)
- Régua de cobrança configurável por passo (Switch); D+15 vira tarefa, nunca suspensão automática
- Conciliação simples: crédito do extrato com a cobrança provável; confirmar baixa o título
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
Componentes: Badge, BulkBar, Button, Callout, Column, CurrencyField, DataTable, DatePicker, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, Highlight, Modal, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, PropertyList, Select, StatCell, StatGrid, Switch, TableSearch, Tabs, Timeline, TimelineItem, formatCurrency, formatDate, notify, selectionColumn, useFilters, useOperation, useSelection


## srv-client · Cliente do ERP de serviços (Serviços)

Antes de ligar para o cliente, saber tudo em um lugar: o que ele paga, o que está aberto, o que deve e o que a equipe combinou.
- Anatomia C · Registro: trilha para Clientes, ação primária Abrir OS, resto no menu ⋯; dados cadastrais fixos na coluna
- Faixa de números (StatGrid) com recorrente, em aberto, vencido e OS abertas
- Abas: Ordens de serviço, Contratos e orçamentos, Financeiro (notas + cobranças), Anotações (Timeline)
- Inadimplente vira Callout com a saída (enviar 2ª via, ver cobranças)
- Editar cadastro em Drawer; ISS retido como Switch com explicação
Componentes: ActionMenu, Badge, Button, Callout, Column, DataTable, Drawer, Empty, EntityMark, LocationTag, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, SplitLayout, StatCell, StatGrid, Switch, Tabs, TextField, TextareaField, Timeline, TimelineItem, formatCurrency, formatDate, notify, useOperation


## srv-clients · Clientes do ERP de serviços (Serviços)

Achar o cliente em segundos e ver, na mesma linha, quanto ele vale por mês, o que está aberto e se está devendo.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (filtros rápidos por segmento e situação, busca por CNPJ sem pontuação)
- Colunas numéricas à direita com tabular-nums; vencido pinta só o valor
- Ordenação por receita recorrente e saldo (useSort)
- Cadastrar em Drawer; “Buscar na Receita” preenche razão social e endereço pelo CNPJ
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
Componentes: Badge, Button, Column, DataTable, Drawer, Empty, EmptyFilterResult, EntityMark, FilterBar, FilterField, Highlight, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, Select, StatCell, StatGrid, Switch, TableSearch, TextField, formatCurrency, useFilters, useOperation, useSort


## srv-contracts · Contratos recorrentes (Serviços)

Proteger a receita recorrente: renovar e reajustar no prazo, ver quem consome acima do pacote e acompanhar a implantação de quem acabou de fechar.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (abas por situação, filtros, busca)
- Abas com contador só onde pede ação (Renovação próxima)
- Horas do pacote com barra; consumo acima pinta só o número
- Detalhe em Drawer (?id=): reajuste simulado pelo índice acumulado, últimas notas e cobranças
- Contrato novo mostra ProjectProgressCard da implantação com um único próximo passo
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
Componentes: Badge, Button, Callout, Column, ConfirmDialog, DataTable, Drawer, Empty, EmptyFilterResult, EntityMark, FilterBar, FilterField, Highlight, Meter, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, ProjectProgressCard, PropertyList, StatCell, StatGrid, TableSearch, Tabs, formatCurrency, formatDate, formatNumber, formatPercent, notify, useFilters, useOperation


## srv-dashboard · Início do ERP de serviços (Serviços)

Mostrar ao dono da empresa de serviços, em um minuto, se o caixa aguenta o mês e o que está travando a operação.
- Anatomia B · Painel: cabeçalho fixo, 5 KPIs com base explícita, um gráfico por pergunta
- Fluxo de caixa previsto em barras com entradas e saídas (negativas) por semana; insight do menor saldo
- “Precisa de você” logo abaixo dos KPIs, num só painel: cobranças vencidas, OS sem técnico, NFS-e rejeitadas e contratos a renovar, cada linha com o tipo no topo
- MiniBarChart de OS concluídas por dia; técnicos em campo em StackedList
- Cada linha abre o registro certo (OS, cobrança, nota, contrato)
Componentes: Badge, BarChart, Button, ChartCard, Empty, ErrorState, KpiCard, KpiGrid, LineChart, ListPanel, ListRow, MiniBarChart, Page, PageHeading, Skeleton, StackedList, formatCompact, formatCurrency, formatNumber


## srv-invoices · Notas fiscais de serviço (NFS-e) (Serviços)

Emitir todas as notas do mês sem deixar nenhuma para trás e resolver as rejeitadas antes do vencimento da cobrança.
- Anatomia A · Lista com DataGrid: abas por situação, total e ISS no rodapé
- Emitir em lote pela seleção (só “A emitir” entram); ação primária do cabeçalho emite todas as pendentes
- Rejeitada abre em Drawer com o código da prefeitura, o campo exato a corrigir e a dica de onde achar o dado
- ISS retido pelo tomador em palavra, nunca só em cor
- Cancelar nota emitida pede confirmação (irreversível na prefeitura)
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
Componentes: Badge, Button, Callout, ConfirmDialog, DataGrid, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, GridColumn, Highlight, Modal, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, StatCell, StatGrid, TableSearch, Tabs, TextField, formatCurrency, formatDate, formatPercent, notify, useFilters, useOperation


## srv-quotes · Orçamentos de serviço (Serviços)

Transformar pedido do cliente em orçamento rápido e, aprovado, em trabalho agendado ou receita recorrente sem redigitar nada.
- Anatomia A · Lista: cabeçalho fixo + PageToolbar colada (abas por situação, filtros, busca)
- Criar e ver orçamento em Drawer, sem perder a lista; ?id= e ?novo=1 no endereço
- Itens de serviço (horas × valor/hora) e materiais separados; desconto e ISS destacado
- Aprovar pergunta o destino: avulso → OS, recorrente → contrato; o orçamento guarda o vínculo
- Validade vencendo em até 3 dias pinta só a data; expirado oferece renovar
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
Componentes: Badge, Button, Callout, Column, Combobox, DataTable, DatePicker, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, Highlight, IconButton, Modal, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PageToolbar, PropertyList, Select, StatCell, StatGrid, Table, TableSearch, Tabs, TextField, formatCurrency, formatDate, formatPercent, notify, useFilters, useOperation


## srv-schedule · Agenda dos técnicos (Serviços)

Encaixar cada OS no técnico certo sem estourar a carga de ninguém e sem deixar chamado sem dono.
- Anatomia B · Painel de agenda: cabeçalho fixo com a semana (WeekPicker) e o modo Semana/Mês à direita
- Grade técnico × dia feita com tokens: OS em chip com hora, cliente e prioridade em palavra; visita preventiva em chip neutro
- Carga semanal por técnico com barra (horas alocadas de 44 h); folga em palavra
- Fila “Sem técnico” ao lado: Alocar abre o mesmo Modal de agendamento do quadro e do registro
- Celular: escolhe o técnico e vê a MiniAgenda dele; mês em MonthCalendar
- Cinco estados: ?estado=carregando|vazio|erro simula
Componentes: AgendaEvent, Avatar, Badge, Button, Empty, ListPanel, ListRow, Meter, MiniAgenda, MonthCalendar, Page, PageHeading, SegmentedControl, Select, Skeleton, Table, WeekPicker, addDays, formatNumber, startOfWeek, weekdayShort


## srv-work-order · Ordem de serviço (Serviços)

Levar um atendimento do chamado à nota fiscal com prova do que foi feito: checklist, horas, materiais, fotos e assinatura.
- Anatomia C · Registro: trilha, título, ação do estado à direita; propriedades fixas na coluna
- Uma ação primária por estado: Agendar → Iniciar → Concluir → Faturar; Concluir exige checklist e assinatura (disabledReason diz o que falta)
- Abas: Execução (checklist + assinatura), Horas e materiais, Fotos e anexos, Histórico (Timeline)
- LocationTag mostra o local e a hora local do atendimento; SLA em palavra
- Valor a faturar separa mão de obra coberta pelo contrato de materiais
- Orçamento aprovado abre aqui como OS nova (?id=orc-<orçamento>)
Componentes: ActionMenu, Attachment, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, Avatar, Badge, Button, Callout, Checkbox, Combobox, ConfirmDialog, EntityMark, FileDropzone, IconButton, LocationTag, Meter, Modal, NumberField, OperationButton, OperationFeedback, Page, PageHeading, PropertyList, SegmentedControl, Select, SplitLayout, StagePath, Table, Tabs, TextField, Timeline, TimelineItem, formatCurrency, formatDate, formatNumber, notify, useOperation


## srv-work-orders · Ordens de serviço (Serviços)

Ver toda a operação de campo num olhar: o que está sem técnico, o que vai estourar o SLA e o que já pode ser faturado.
- Anatomia E · Quadro: colunas por etapa; no desktop a página não rola
- Card com SLA em palavra (Atrasada 1 d, Vence hoje 16:00); borda vermelha só no estourado
- Arrastar muda a etapa; Agendada pede técnico e horário em Modal; Faturada confirma a NFS-e
- Totais por coluna no cabeçalho (atrasadas, valor a faturar)
- Alternar Quadro/Lista sem perder filtros; etapa inline na lista
- Abrir OS em Drawer (?nova=1); card abre o registro
- Cinco estados: ?estado=carregando|vazio|erro simula; vazio por filtro com Limpar
Componentes: Avatar, Badge, Button, Column, Combobox, DataTable, DatePicker, Drawer, Empty, EmptyFilterResult, FilterBar, FilterField, Highlight, KanbanBoard, KanbanColumn, Modal, OperationButton, OperationFeedback, Page, PageHeading, RecordCard, SegmentedControl, Select, Skeleton, TableSearch, TextField, TextareaField, chartColor, formatCurrency, notify, useFilters, useOperation