@ffid-br/tailor-ui 0.4.0 → 0.6.0

package/README.md

@@ -88,6 +88,24 @@ Lockup: wordmark com 21px de arte e o nome do produto em 18px semibold (tailor-i
 
 Personagem 8x8 de cada agente (`desk`, `pergunte`, `pm`, `diretor`), com um único ponto verde. `estado`: `analisando`, `esperando`, `feito` (padrão), `subiu`, `desligado`. O estado vai no rótulo acessível e, com `mostrarEstado`, aparece como ponto quadrado + texto. `celula` é o lado de cada quadradinho em px (padrão 4). Anima em degraus; com menos movimento, para.
 
+#### Estilo vetor
+
+```tsx
+<AgenteMascote agente="desk" nome="Alfred" estilo="vetor" estado="parado" tamanho={96} />
+<AgenteMascote agente="sdr" nome="SDR" estado="falando" fala="Achei 3 leads quentes." tamanho={96} />
+<AgenteMascote agente="pm" nome="PM" estilo="vetor" estado="parado" expressao="bravo" />
+<AgenteMascote agente="pilot" nome="Pilot" estado="analisando" tema="natal" />
+```
+
+O companheiro animado: olha o cursor, pisca e muda de movimento por estado. Expressão só nos olhos, sem boca nem braços.
+
+- Agentes: `desk`, `pergunte`, `pm`, `diretor` (também em pixel) e `sdr`, `cred`, `score`, `pilot`, `flow`, `bi`, `rh` (só vetor: saem em vetor mesmo sem `estilo`).
+- Estados: os cinco do pixel e mais `parado`, `cumprimentando`, `falando`, `erro`. No vetor, `analisando` pensa, `feito` fala, `subiu` comemora, `desligado` dorme.
+- `expressao`: `neutro`, `feliz`, `piscando`, `surpreso`, `bravo`, `triste`, `desconfiado`, `sonolento`, `tonto`. Sem ela, vale o olhar do estado.
+- `tema` veste acessório + objeto: `natal`, `pascoa`, `aniversario`, `halloween`, `copa`, `galaxia`, `premiacao`. Ou solto: `acessorio` (`gorro`, `orelhas`, `festa`, `bruxa`, `bone`, `capacete`, `coroa`) e `objeto` (`presente`, `ovo`, `bolo`, `abobora`, `bola`, `sabre`, `trofeu`).
+- `fala` aparece num balão preto (a partir de 48px) e entra no rótulo acessível.
+- `tamanho` é a largura em px (padrão `celula * 8`). `superficie`: `auto` segue o `dark:` do app; `clara`/`escura` travam.
+
 ### `EquipeDock`
 
 ```tsx
@@ -97,7 +115,9 @@ Personagem 8x8 de cada agente (`desk`, `pergunte`, `pm`, `diretor`), com um úni
 ]} />
 ```
 
-Botão fixo no canto com o mascote do primeiro agente e a soma dos selos. Abre um painel com uma aba por agente.
+Botão fixo no canto com o mascote do primeiro agente e a soma dos selos. Abre um painel com uma aba por agente. `estilo="vetor"` vale para todos os mascotes do dock.
+
+Equipe trabalhando: quem está na ativa (`analisando`, `falando`, `esperando`, `erro`) aparece no botão ao lado do principal, até três e depois `+N`. Ex.: o assistente do CRM como primeiro agente e os especialistas que ele acionou.
 
 ### `TailorSidebar`
 
@@ -186,6 +206,38 @@ Notas para quem migra:
 - Sem `onRecolher`, o botão de recolher não aparece.
 - As classes novas estão no `dist`, então o `@source` da configuração já as cobre.
 
+### `TailorPageHeader` e a marca do cliente
+
+```tsx
+import { TailorMarca, TailorPageHeader, temaDoWhitelabel } from '@ffid-br/tailor-ui';
+
+const { tema, escuro } = temaDoWhitelabel(cliente.account_info?.whitelabel);
+
+<TailorMarca tema={tema} escuro={escuro}>
+  <TailorPageHeader
+    sobretitulo="Comercial"
+    titulo="Leads"
+    descricao="Quem chegou esta semana e o que falta para cada um avançar."
+    trilha={[{ rotulo: 'Início', href: '/' }, { rotulo: 'Leads' }]}
+    voltar={{ rotulo: 'Voltar', onClick: () => navigate(-1) }}
+    etiqueta={<Badge>Beta</Badge>}
+    indicadores={[{ rotulo: 'novos', valor: 128 }]}
+    acoes={<Botao>Novo lead</Botao>}
+    renderLink={({ href, ...p }) => <NavLink to={href} {...p} />}
+  >
+    <Abas />                                {/* abaixo, na largura toda */}
+  </TailorPageHeader>
+</TailorMarca>
+```
+
+O visual vem só de variáveis CSS. Sem tema, vale o padrão Tailor; com tema, o cabeçalho veste a marca do cliente.
+
+- `--tailor-marca-*` (todas as peças que aceitam marca): `primaria`, `primaria-texto`, `texto`, `texto-suave`, `borda`, `fundo`, `fonte-titulo`, `fonte-texto`, `peso-titulo`, `caixa-titulo`, `raio`. Os padrões ficam em `:where()`, então qualquer CSS do app sobrescreve.
+- `--tailor-cabecalho-*` (só o cabeçalho): `fundo`, `padding`, `regua`, `tamanho-titulo`.
+- `TailorMarca` aplica um `TailorTema` (e o `escuro`, sob `.dark` ou `[data-theme="dark"]`) sem mexer no layout.
+- `temaDoWhitelabel` traduz `account_info.whitelabel` do Mongo. Ignora o azul padrão do cadastro (`#007bff`, que 107 clientes têm sem ter escolhido) e o que não for hex. A primária só vira cor de texto com contraste AA sobre o fundo. Lê também os campos propostos `colors.text_muted`, `colors.border`, `colors.dark.*`, `fonts.heading/body/heading_weight/heading_case` e `shape.radius`.
+- A fonte do cliente é carregada pelo app (ex.: link do Google Fonts).
+
 ## Receita: transição login → app
 
 1. **No login**: marque a entrada ao enviar, desmarque se der erro e mostre o preto crescendo do botão.
@@ -247,12 +299,24 @@ Cores só por tokens nomeados (`tailor-green`, `tailor-ink`, `black`, `white`, `
 ```bash
 npm install
 npm test         # vitest + testing-library
+npm run exemplos # página com todos os componentes ao vivo + código (exemplos/)
 npm run build    # dist/: index.es.js, index.umd.js, types/, style.css, theme.css, logos
 ```
 
+Página pública: https://ffid-br.github.io/tailor-ui/ (publicada pelo workflow `exemplos.yml` a cada push na `main`).
+
 
 ## Mudanças
 
+### 0.6.0
+- `TailorPageHeader`, `TailorMarca`, `temaDoWhitelabel`: cabeçalho de página que veste a marca do cliente por variáveis CSS. Segue `--color-tailor-green`/`-ink` do app quando definidos.
+- Simulador de mascotes na página de exemplos (`#simulador`).
+
+### 0.5.0
+- `AgenteMascote` `estilo="vetor"`: 11 agentes, olhar que segue o cursor, 9 expressões nos olhos, temas de datas, acessórios, objetos e balão de fala. Estados novos: `parado`, `cumprimentando`, `falando`, `erro`.
+- `EquipeDock`: prop `estilo` e equipe trabalhando no botão.
+- Página de exemplos publicada em https://ffid-br.github.io/tailor-ui/.
+
 ### 0.4.0
 - `AgenteMascote` e `EquipeDock`: mascotes 8x8 dos agentes e o painel da equipe (QD-0426).