@ffid-br/tailor-ui 0.4.0 → 0.6.0

package/dist/style.css

@@ -18,6 +18,78 @@
   --tailor-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
+/*
+ * Marca do cliente: componentes que leem estas variáveis vestem a marca de quem
+ * usa. Padrão Tailor aqui, em :where() para qualquer CSS do app sobrescrever
+ * (ou o componente TailorMarca). Tema escuro: `.dark` ou `[data-theme="dark"]`.
+ */
+:where(:root) {
+  /* Seguem os tokens do Tailwind do app: quem já troca --color-tailor-green pela
+     cor do cliente (accounts, brandTheme) leva o cabeçalho junto. */
+  --tailor-marca-primaria: var(--color-tailor-green, var(--tailor-green));
+  --tailor-marca-primaria-texto: var(--color-tailor-ink, var(--tailor-ink));
+  --tailor-marca-texto: var(--tailor-black);
+  --tailor-marca-texto-suave: #666666;
+  --tailor-marca-borda: #E5E5E5;
+  --tailor-marca-fundo: transparent;
+  --tailor-marca-fonte-titulo: var(--tailor-font);
+  --tailor-marca-fonte-texto: var(--tailor-font);
+  --tailor-marca-peso-titulo: 500;
+  --tailor-marca-caixa-titulo: none;
+  --tailor-marca-raio: 0;
+}
+:where(.dark, [data-theme="dark"]) {
+  --tailor-marca-primaria-texto: var(--color-tailor-green, var(--tailor-green));
+  --tailor-marca-texto: var(--tailor-white);
+  --tailor-marca-texto-suave: #A3A3A3;
+  --tailor-marca-borda: rgba(255, 255, 255, 0.1);
+}
+.tailor-marca { display: contents; }
+
+/* TailorPageHeader — cada medida tem a sua variável --tailor-cabecalho-*. */
+.tailor-ph {
+  display: flex; flex-direction: column; gap: 21px;
+  padding: var(--tailor-cabecalho-padding, 0 0 21px);
+  background: var(--tailor-cabecalho-fundo, var(--tailor-marca-fundo));
+  border-bottom: var(--tailor-cabecalho-regua, 1px solid var(--tailor-marca-borda));
+  color: var(--tailor-marca-texto);
+  font-family: var(--tailor-marca-fonte-texto);
+}
+.tailor-ph__linha { display: flex; flex-direction: column; gap: 21px; }
+@media (min-width: 640px) {
+  .tailor-ph__linha { flex-direction: row; align-items: flex-end; justify-content: space-between; }
+}
+.tailor-ph__principal { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+.tailor-ph__voltar {
+  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 13px; color: var(--tailor-marca-texto-suave); text-decoration: none; border-radius: var(--tailor-marca-raio);
+}
+.tailor-ph__voltar:hover, .tailor-ph__trilha-link:hover { color: var(--tailor-marca-texto); }
+.tailor-ph__trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--tailor-marca-texto-suave); }
+.tailor-ph__trilha li { display: flex; align-items: center; gap: 6px; }
+.tailor-ph__trilha-link { color: inherit; text-decoration: none; }
+.tailor-ph__trilha [aria-current="page"] { color: var(--tailor-marca-texto); }
+.tailor-ph__voltar:focus-visible, .tailor-ph__trilha-link:focus-visible { outline: 3px solid var(--tailor-marca-primaria); outline-offset: 2px; }
+.tailor-ph__sobretitulo {
+  display: flex; align-items: center; gap: 8px; margin: 5px 0 0;
+  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
+  color: var(--tailor-marca-primaria-texto);
+}
+.tailor-ph__ponto { width: 8px; height: 8px; background: var(--tailor-marca-primaria); border-radius: var(--tailor-marca-raio); }
+.tailor-ph__titulo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
+.tailor-ph__titulo {
+  margin: 0; line-height: 1.1;
+  font-family: var(--tailor-marca-fonte-titulo); font-weight: var(--tailor-marca-peso-titulo);
+  text-transform: var(--tailor-marca-caixa-titulo);
+  font-size: var(--tailor-cabecalho-tamanho-titulo, clamp(26px, 4vw, 42px));
+}
+.tailor-ph__descricao { margin: 0; max-width: 610px; font-size: 16px; line-height: 1.618; color: var(--tailor-marca-texto-suave); }
+.tailor-ph__lateral { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 13px; }
+.tailor-ph__indicador { text-align: right; }
+.tailor-ph__indicador-valor { display: block; font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--tailor-marca-fonte-titulo); }
+.tailor-ph__indicador-rotulo { display: block; margin-top: 8px; font-size: 13px; color: var(--tailor-marca-texto-suave); }
+.tailor-ph__extra { min-width: 0; }
+
 /* TailorLoader — a malha pequena se desenha a partir do ponto e some, em 2φ (3,236s). */
 .tailor-malha__linha {
   stroke-dasharray: 1;
@@ -102,6 +174,44 @@
 .tailor-estado__ponto--feito      { background: #008548; }
 .tailor-estado__ponto--subiu      { background: #0040FF; }
 .tailor-estado__ponto--desligado  { background: #999999; }
+.tailor-estado__ponto--parado     { background: #666666; }
+.tailor-estado__ponto--cumprimentando { background: var(--tailor-green); }
+.tailor-estado__ponto--falando    { background: #008548; }
+.tailor-estado__ponto--erro       { background: #FF0040; }
+
+/* AgenteMascote estilo vetor: o movimento diz o estado; o olhar segue o cursor. */
+.tailor-mv { line-height: 0; }
+.tailor-mv__corpo { transform-box: fill-box; transform-origin: 50% 100%; animation: tailor-mv-respira 3.2s ease-in-out infinite; }
+.tailor-mv--esperando .tailor-mv__corpo { animation: tailor-mv-espera 1.8s ease-in-out infinite; }
+.tailor-mv--pensando .tailor-mv__corpo { animation: tailor-mv-inclina 2.6s ease-in-out infinite; }
+.tailor-mv--comemorando .tailor-mv__corpo { animation: tailor-mv-pulo 0.9s cubic-bezier(.16,1,.3,1) infinite; }
+.tailor-mv--erro .tailor-mv__corpo { animation: tailor-mv-treme 1.6s ease-in-out infinite; }
+.tailor-mv--dormindo .tailor-mv__corpo { animation-duration: 5s; opacity: 0.55; }
+.tailor-mv__olhos { transform-box: fill-box; transform-origin: center; animation: tailor-mv-piscar 4.2s infinite; }
+.tailor-mv__pupila { transform: translate(var(--tailor-mv-x, 0), var(--tailor-mv-y, 0)); transition: transform 0.12s ease-out; }
+.tailor-mv--pensando .tailor-mv__pupila { transform: translate(-4px, -5px); }
+.tailor-mv__verde { animation: tailor-mv-pulso 2.4s ease-in-out infinite; }
+.tailor-mv__balao {
+  position: absolute; left: 58%; bottom: 88%; z-index: 1; width: max-content; max-width: 180px;
+  background: var(--tailor-black); color: var(--tailor-white); padding: 8px 10px;
+  font: 500 12px/1.35 var(--font-tailor, "Raleway", system-ui, sans-serif); text-align: left;
+}
+.tailor-mv__balao::after { content: ""; position: absolute; left: 10px; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
+.tailor-mv__pontos > span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; background: var(--tailor-green); animation: tailor-mv-ponto 1.4s infinite; }
+.tailor-mv__pontos > span:nth-child(2) { animation-delay: 0.2s; }
+.tailor-mv__pontos > span:nth-child(3) { animation-delay: 0.4s; }
+.tailor-mv__confete rect { animation: tailor-mv-cai 1.8s linear infinite; }
+.tailor-mv__zzz text { animation: tailor-mv-sobe 3s linear infinite; font: 600 18px sans-serif; }
+@keyframes tailor-mv-respira { 0%, 100% { transform: none; } 50% { transform: scale(1.015, 0.985); } }
+@keyframes tailor-mv-espera { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
+@keyframes tailor-mv-inclina { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-2deg); } }
+@keyframes tailor-mv-pulo { 0%, 100% { transform: scale(1.03, 0.97); } 40% { transform: translateY(-18px) scale(0.98, 1.02); } }
+@keyframes tailor-mv-treme { 0%, 60%, 100% { transform: none; } 66% { transform: translateX(-5px); } 72% { transform: translateX(5px); } 78% { transform: translateX(-3px); } 84% { transform: translateX(3px); } }
+@keyframes tailor-mv-piscar { 0%, 94%, 100% { transform: none; } 97% { transform: scaleY(0.1); } }
+@keyframes tailor-mv-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+@keyframes tailor-mv-ponto { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
+@keyframes tailor-mv-cai { 0% { transform: translateY(-20px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
+@keyframes tailor-mv-sobe { 0% { transform: none; opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(14px, -40px); opacity: 0; } }
 
 /* Menos movimento: a informação continua, o movimento sai. */
 @media (prefers-reduced-motion: reduce) {
@@ -109,4 +219,5 @@
   .tailor-loader__reticencias::after { animation: none; content: '...'; }
   .tailor-ponto-pisca { animation: none; }
   .tailor-mascote__corpo, .tailor-mascote__olho, .tailor-mascote__verde { animation: none; }
+  .tailor-mv *, .tailor-mv *::after { animation: none !important; transition: none !important; }
 }

package/dist/types/components/AgenteMascote.d.ts

@@ -1,3 +1,4 @@
+import { AcessorioDoMascote, ChaveDoAgenteVetor, ExpressaoDoMascote, ObjetoDoMascote, TemaDoMascote } from './MascoteVetor';
 /**
  * Mapas 8x8 dos agentes (QD-0426, estilo Dots). `k` tinta, `e` olho (pisca),
  * `g` o único verde do personagem (pulsa), `.` vazio. Desenho aprovado em
@@ -9,26 +10,49 @@ declare const MAPAS: {
     readonly pm: readonly ["..gggg..", "kkkkkkkk", "k......k", "k.e..e.k", "k......k", "k.kkkk.k", "k......k", "kkkkkkkk"];
     readonly diretor: readonly [".kkkkkk.", ".k....k.", "kkkkkkkk", ".kk..kk.", ".k....k.", ".k.kk.k.", ".kkkkkk.", "...gg..."];
 };
+/** Agentes com desenho em pixel. Os demais só existem em vetor. */
 export type ChaveDoMascote = keyof typeof MAPAS;
-export type EstadoDoMascote = 'analisando' | 'esperando' | 'feito' | 'subiu' | 'desligado';
+export type ChaveDoAgente = ChaveDoAgenteVetor;
+export type EstadoDoMascote = 'analisando' | 'esperando' | 'feito' | 'subiu' | 'desligado' | 'parado' | 'cumprimentando' | 'falando' | 'erro';
 /** Texto do estado: a cor nunca fala sozinha. */
 export declare const ROTULO_DO_ESTADO: Record<EstadoDoMascote, string>;
+/** O vetor pinta por variável; `auto` segue o `dark:` do app. */
+declare const SUPERFICIE: {
+    auto: string;
+    clara: string;
+    escura: string;
+};
 export type AgenteMascoteProps = {
-    agente: ChaveDoMascote;
+    agente: ChaveDoAgente;
     /** Nome exibido (a conta pode renomear). Vai no rótulo acessível. */
     nome: string;
     estado?: EstadoDoMascote;
     /** Quantas coisas esperam a pessoa. Só aparece acima de zero. */
     selo?: number;
-    /** Lado de cada quadradinho, em px. Padrão: 4 (32px no total). */
+    /** Lado de cada quadradinho, em px. Padrão: 4 (32px no total). No vetor, a largura padrão é `celula * 8`. */
     celula?: number;
     /** Mostra o ponto e o texto do estado ao lado. */
     mostrarEstado?: boolean;
+    /** `pixel` (padrão) é a grade 8x8; `vetor` é o companheiro animado. Agentes sem mapa 8x8 saem sempre em vetor. */
+    estilo?: 'pixel' | 'vetor';
+    /** Vetor: largura em px. */
+    tamanho?: number;
+    /** Vetor: olhar no lugar do padrão do estado. */
+    expressao?: ExpressaoDoMascote;
+    /** Vetor: acessório + objeto de uma data (`natal`, `pascoa`...). */
+    tema?: TemaDoMascote;
+    acessorio?: AcessorioDoMascote;
+    objeto?: ObjetoDoMascote;
+    /** Vetor: frase no balão. Também entra no rótulo acessível. */
+    fala?: string;
+    /** Vetor: `auto` segue o tema do app; `clara`/`escura` travam (ex.: painel sempre branco). */
+    superficie?: keyof typeof SUPERFICIE;
     className?: string;
 };
 /**
- * O personagem do agente na grade 8x8 da marca, com o estado em ponto + texto.
- * Animação em degraus (bob, piscar, pulso do verde); com menos movimento, para.
+ * O personagem do agente, com o estado em ponto + texto. Em pixel, anima em
+ * degraus; em vetor, olha o cursor e muda de olhar e movimento por estado.
+ * Com menos movimento, para.
  */
-export declare function AgenteMascote({ agente, nome, estado, selo, celula, mostrarEstado, className, }: AgenteMascoteProps): import("react").JSX.Element;
+export declare function AgenteMascote({ agente, nome, estado, selo, celula, mostrarEstado, estilo, tamanho, expressao, tema, acessorio, objeto, fala, superficie, className, }: AgenteMascoteProps): import("react").JSX.Element;
 export {};

package/dist/types/components/EquipeDock.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { ChaveDoMascote, EstadoDoMascote } from './AgenteMascote';
+import { ChaveDoAgente, EstadoDoMascote } from './AgenteMascote';
 export type AgenteDaEquipe = {
-    chave: ChaveDoMascote;
+    chave: ChaveDoAgente;
     nome: string;
     estado?: EstadoDoMascote;
     selo?: number;
@@ -14,10 +14,12 @@ export type EquipeDockProps = {
     abertoInicial?: boolean;
     /** Título do painel. Padrão: "Equipe". */
     titulo?: string;
+    /** `pixel` (padrão) ou `vetor`, para todos os mascotes do dock. */
+    estilo?: 'pixel' | 'vetor';
     className?: string;
 };
 /**
  * A equipe de agentes num canto da tela: botão com o mascote principal e o selo
  * de pendências somado; abre um painel com uma aba por agente.
  */
-export declare function EquipeDock({ agentes, abertoInicial, titulo, className }: EquipeDockProps): React.JSX.Element | null;
+export declare function EquipeDock({ agentes, abertoInicial, titulo, estilo, className }: EquipeDockProps): React.JSX.Element | null;

package/dist/types/components/MascoteVetor.d.ts

@@ -0,0 +1,188 @@
+import { default as React } from 'react';
+declare const AGENTES: {
+    desk: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    pergunte: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    pm: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    diretor: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        lente: true;
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    sdr: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    cred: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    score: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    pilot: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    flow: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    bi: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    rh: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+};
+export type ChaveDoAgenteVetor = keyof typeof AGENTES;
+/** Expressão só nos olhos: formato, pálpebra e pupila, por lado. */
+declare const EXPRESSOES: {
+    neutro: ["aberto", "aberto"];
+    feliz: ["feliz", "feliz"];
+    piscando: ["aberto", "feliz"];
+    surpreso: ["grande", "grande"];
+    bravo: ["bravo", "bravo"];
+    triste: ["triste", "triste"];
+    desconfiado: ["meio", "meio"];
+    sonolento: ["fechado", "fechado"];
+    tonto: ["x", "x"];
+};
+export type ExpressaoDoMascote = keyof typeof EXPRESSOES;
+/** Pose do vetor: o movimento, o olhar padrão e os enfeites de cada estado. */
+export type PoseDoMascote = 'parado' | 'cumprimentando' | 'pensando' | 'falando' | 'esperando' | 'comemorando' | 'erro' | 'dormindo';
+/** Desenhados com o topo da cabeça em (0, 0). Só em tinta (exceto o gorro): o verde é do agente. */
+declare const ACESSORIOS: {
+    gorro: React.JSX.Element;
+    orelhas: React.JSX.Element;
+    festa: React.JSX.Element;
+    bruxa: React.JSX.Element;
+    bone: React.JSX.Element;
+    capacete: React.JSX.Element;
+    coroa: React.JSX.Element;
+};
+export type AcessorioDoMascote = keyof typeof ACESSORIOS;
+/** Desenhados com o canto de apoio em (0, 0), encostados no lado direito do corpo. */
+declare const OBJETOS: {
+    presente: React.JSX.Element;
+    ovo: React.JSX.Element;
+    bolo: React.JSX.Element;
+    abobora: React.JSX.Element;
+    bola: React.JSX.Element;
+    sabre: React.JSX.Element;
+    trofeu: React.JSX.Element;
+};
+export type ObjetoDoMascote = keyof typeof OBJETOS;
+/** Tema = acessório + objeto num nome só. */
+declare const TEMAS: {
+    natal: ["gorro", "presente"];
+    pascoa: ["orelhas", "ovo"];
+    aniversario: ["festa", "bolo"];
+    halloween: ["bruxa", "abobora"];
+    copa: ["bone", "bola"];
+    galaxia: ["capacete", "sabre"];
+    premiacao: ["coroa", "trofeu"];
+};
+export type TemaDoMascote = keyof typeof TEMAS;
+export type MascoteVetorProps = {
+    agente: ChaveDoAgenteVetor;
+    pose: PoseDoMascote;
+    expressao?: ExpressaoDoMascote;
+    tema?: TemaDoMascote;
+    acessorio?: AcessorioDoMascote;
+    objeto?: ObjetoDoMascote;
+    fala?: string;
+    /** Abaixo de 48px o balão some (no dock, por exemplo); a fala segue no rótulo acessível. */
+    tamanho: number;
+};
+/** Só o desenho; rótulo acessível, selo e estado ficam no `AgenteMascote`. */
+export declare function MascoteVetor({ agente, pose, expressao, tema, acessorio, objeto, fala, tamanho }: MascoteVetorProps): React.JSX.Element;
+export {};

package/dist/types/components/TailorMarca.d.ts

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+/**
+ * A marca do cliente em variáveis CSS. Os componentes que leem `--tailor-marca-*`
+ * (por enquanto o `TailorPageHeader`) trocam de cor, fonte e cantos sem mudar uma
+ * linha de componente. Sem tema, valem os padrões Tailor do `style.css`.
+ */
+export type TailorTema = {
+    /** Cor de destaque: o ponto do sobretítulo, a barra de foco. */
+    primaria?: string;
+    /** Destaque como texto sobre o fundo (precisa de contraste; no Tailor é o verde-ink). */
+    primariaTexto?: string;
+    texto?: string;
+    textoSuave?: string;
+    borda?: string;
+    /** Fundo do cabeçalho. Padrão: transparente (o cabeçalho é o começo da página). */
+    fundo?: string;
+    fonteTitulo?: string;
+    fonteTexto?: string;
+    pesoTitulo?: string | number;
+    /** `uppercase` para marcas que pedem título em caixa alta. */
+    caixaTitulo?: 'none' | 'uppercase';
+    /** Cantos dos elementos com caixa (etiqueta, botão voltar). Tailor: 0. */
+    raio?: string;
+};
+/** O tema como objeto de variáveis, para `style` ou para montar um CSS do cliente. */
+export declare function temaParaVariaveis(tema: TailorTema): Record<string, string>;
+export type TailorMarcaProps = {
+    tema: TailorTema;
+    /** Ajustes do tema escuro (`.dark` ou `[data-theme="dark"]` num ancestral). */
+    escuro?: TailorTema;
+    children: React.ReactNode;
+};
+/**
+ * Aplica o tema a tudo que estiver dentro, sem mexer no layout (`display: contents`).
+ * As variáveis vão num `<style>` com seletor próprio, e não em `style`, para o
+ * tema escuro conseguir sobrescrever as do claro.
+ */
+export declare function TailorMarca({ tema, escuro, children }: TailorMarcaProps): React.JSX.Element;
+/**
+ * `account_info.whitelabel` do cliente (Mongo `clients`). Os campos além de
+ * `colors.primary/secondary/background/text` e `logos.*` são a proposta para
+ * completar a marca; enquanto não existirem, ficam os padrões Tailor.
+ */
+export type WhitelabelDoCliente = {
+    colors?: {
+        primary?: string;
+        secondary?: string;
+        background?: string;
+        text?: string;
+        text_muted?: string;
+        border?: string;
+        dark?: {
+            primary?: string;
+            background?: string;
+            text?: string;
+            text_muted?: string;
+            border?: string;
+        };
+    };
+    fonts?: {
+        heading?: string;
+        body?: string;
+        heading_weight?: number | string;
+        heading_case?: 'none' | 'uppercase';
+    };
+    shape?: {
+        radius?: string;
+    };
+    logos?: {
+        rectangular_light?: string;
+        rectangular_dark?: string;
+        square_light?: string;
+        square_dark?: string;
+    };
+};
+/** Razão de contraste WCAG entre duas cores hex. */
+export declare function contraste(a: string, b: string): number;
+/**
+ * Traduz o whitelabel do Mongo para o tema. Ignora o azul padrão do cadastro e
+ * valores que não são hex. A primária só vira cor de texto se tiver contraste
+ * AA sobre o fundo; senão o texto de destaque usa a cor de texto da marca.
+ */
+export declare function temaDoWhitelabel(wl?: WhitelabelDoCliente | null): {
+    tema: TailorTema;
+    escuro?: TailorTema;
+};

package/dist/types/components/TailorPageHeader.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+export type TailorPageHeaderLink = {
+    href: string;
+    className: string;
+    children: React.ReactNode;
+    'aria-current'?: 'page';
+};
+export type TailorPageHeaderProps = {
+    /** ReactNode para permitir um acento dentro do título. */
+    titulo: React.ReactNode;
+    /** Uma frase: o que se faz nesta tela. */
+    descricao?: React.ReactNode;
+    /** Seção ou contexto, com o ponto da marca. Sem ele, não aparece. */
+    sobretitulo?: string;
+    /** Trilha de navegação; o último item é a página atual. */
+    trilha?: Array<{
+        rotulo: string;
+        href?: string;
+    }>;
+    /** Link ou ação de voltar, acima de tudo. */
+    voltar?: {
+        rotulo: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    /** Ao lado do título: status, plano, contagem. */
+    etiqueta?: React.ReactNode;
+    /** Números do topo, quando ajudam a decidir o que fazer aqui. */
+    indicadores?: Array<{
+        rotulo: string;
+        valor: React.ReactNode;
+    }>;
+    /** Botões e busca, à direita. */
+    acoes?: React.ReactNode;
+    /** Abaixo, na largura toda: abas, filtros, barra de busca. */
+    children?: React.ReactNode;
+    /** Link do roteador do app (ex.: `NavLink`). Repasse todas as props. Sem ele, sai um `<a href>`. */
+    renderLink?: (props: TailorPageHeaderLink) => React.ReactNode;
+    className?: string;
+};
+/**
+ * O cabeçalho de página. Visual só por variáveis `--tailor-marca-*` e
+ * `--tailor-cabecalho-*` (ver `TailorMarca`), para vestir a marca do cliente:
+ * cor de destaque, fontes, peso e caixa do título, cantos, fundo.
+ * Padrão Tailor: sem card nem sombra, régua de 1px embaixo, título 26 → 42.
+ */
+export declare function TailorPageHeader({ titulo, descricao, sobretitulo, trilha, voltar, etiqueta, indicadores, acoes, children, renderLink, className, }: TailorPageHeaderProps): React.JSX.Element;

package/dist/types/index.d.ts

@@ -12,6 +12,11 @@ export { logoTailor, logoTailorBranco } from './logos';
 export { TailorSidebar, SidebarGroup, SidebarItem, TailorUserMenu, TailorMobileBar } from './components/TailorSidebar';
 export type { TailorSidebarProps, TailorSidebarItem, TailorSidebarGrupo, TailorSidebarLinkProps, TailorSidebarRenderLink, SuperficieSidebar, BreakpointSidebar, SidebarGroupProps, SidebarItemProps, TailorUserMenuProps, TailorUserMenuAcao, TailorMobileBarProps, } from './components/TailorSidebar';
 export { AgenteMascote, ROTULO_DO_ESTADO } from './components/AgenteMascote';
-export type { AgenteMascoteProps, ChaveDoMascote, EstadoDoMascote } from './components/AgenteMascote';
+export type { AgenteMascoteProps, ChaveDoMascote, ChaveDoAgente, EstadoDoMascote } from './components/AgenteMascote';
+export type { ExpressaoDoMascote, TemaDoMascote, AcessorioDoMascote, ObjetoDoMascote, } from './components/MascoteVetor';
 export { EquipeDock } from './components/EquipeDock';
 export type { EquipeDockProps, AgenteDaEquipe } from './components/EquipeDock';
+export { TailorPageHeader } from './components/TailorPageHeader';
+export type { TailorPageHeaderProps, TailorPageHeaderLink } from './components/TailorPageHeader';
+export { TailorMarca, temaParaVariaveis, temaDoWhitelabel, contraste } from './components/TailorMarca';
+export type { TailorMarcaProps, TailorTema, WhitelabelDoCliente } from './components/TailorMarca';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ffid-br/tailor-ui",
   "private": false,
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Primitivos de marca Tailor.ia em React: loader, intro, transição de login, lockup e barra lateral.",
   "type": "module",
   "main": "dist/index.umd.js",
@@ -32,7 +32,8 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "exemplos": "vite exemplos --config exemplos/vite.config.ts"
   },
   "peerDependencies": {
     "framer-motion": "^10.0.0 || ^11.0.0 || ^12.0.0",
@@ -40,6 +41,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^18.3.5",
@@ -49,6 +51,7 @@
     "jsdom": "^29.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.5.3",
     "vite": "^5.4.2",
     "vite-plugin-dts": "^4.5.3",