@ffid-br/tailor-ui 0.3.0 → 0.4.0

package/dist/style.css

@@ -71,9 +71,42 @@
   to   { opacity: 1; transform: none; }
 }
 
+/* AgenteMascote — personagem 8x8 (QD-0426). Movimento em degraus, como pixel. */
+.tailor-mascote { --tailor-mascote-tinta: var(--tailor-black); }
+.tailor-mascote__corpo { grid-auto-rows: var(--tailor-celula, 4px); }
+.tailor-mascote__pixel { width: var(--tailor-celula, 4px); height: var(--tailor-celula, 4px); }
+.tailor-mascote__tinta { background: var(--tailor-mascote-tinta); }
+.tailor-mascote__verde { background: var(--tailor-green); }
+.tailor-mascote__selo {
+  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--tailor-black); color: var(--tailor-white); font-size: 10px; line-height: 1;
+}
+.tailor-mascote--desligado { --tailor-mascote-tinta: #999999; }
+.tailor-mascote--desligado .tailor-mascote__verde { background: #999999; }
+.tailor-mascote__corpo { animation: tailor-mascote-bob 1.6s steps(2, end) infinite; }
+.tailor-mascote--analisando .tailor-mascote__corpo,
+.tailor-mascote--subiu .tailor-mascote__corpo { animation-duration: 0.6s; }
+.tailor-mascote--desligado .tailor-mascote__corpo { animation: none; }
+.tailor-mascote__olho { animation: tailor-mascote-piscar 4s infinite; }
+.tailor-mascote__verde { animation: tailor-mascote-pulso 2.4s steps(1, end) infinite; }
+.tailor-mascote--analisando .tailor-mascote__verde { animation-duration: 1s; }
+@keyframes tailor-mascote-bob { 0%, 100% { transform: none; } 50% { transform: translateY(calc(var(--tailor-celula, 4px) * -0.5)); } }
+@keyframes tailor-mascote-piscar { 0%, 90%, 100% { transform: none; } 94% { transform: scaleY(0.15); } }
+@keyframes tailor-mascote-pulso { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
+
+/* Ponto do estado: quadrado, sempre ao lado do texto. */
+.tailor-estado__ponto { display: inline-block; width: 8px; height: 8px; }
+.tailor-estado__ponto--analisando { background: var(--tailor-green); }
+.tailor-estado__ponto--esperando  { background: #FF9033; }
+.tailor-estado__ponto--feito      { background: #008548; }
+.tailor-estado__ponto--subiu      { background: #0040FF; }
+.tailor-estado__ponto--desligado  { background: #999999; }
+
 /* Menos movimento: a informação continua, o movimento sai. */
 @media (prefers-reduced-motion: reduce) {
   .tailor-malha__linha { animation: none; stroke-dashoffset: 0; }
   .tailor-loader__reticencias::after { animation: none; content: '...'; }
   .tailor-ponto-pisca { animation: none; }
+  .tailor-mascote__corpo, .tailor-mascote__olho, .tailor-mascote__verde { animation: none; }
 }

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

@@ -0,0 +1,34 @@
+/**
+ * Mapas 8x8 dos agentes (QD-0426, estilo Dots). `k` tinta, `e` olho (pisca),
+ * `g` o único verde do personagem (pulsa), `.` vazio. Desenho aprovado em
+ * https://claude.ai/artifact/HoWCZX7aFiKPEqwhXyzm5k
+ */
+declare const MAPAS: {
+    readonly desk: readonly ["...gg...", "...kk...", ".kkkkkk.", ".ke..ek.", "kk....kk", ".k.kk.k.", ".kkkkkk.", "........"];
+    readonly pergunte: readonly [".......g", "kkkkkkk.", "k.....k.", "k.e.e.k.", "k.....k.", "kkkkkkk.", ".kk.....", ".k......"];
+    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..."];
+};
+export type ChaveDoMascote = keyof typeof MAPAS;
+export type EstadoDoMascote = 'analisando' | 'esperando' | 'feito' | 'subiu' | 'desligado';
+/** Texto do estado: a cor nunca fala sozinha. */
+export declare const ROTULO_DO_ESTADO: Record<EstadoDoMascote, string>;
+export type AgenteMascoteProps = {
+    agente: ChaveDoMascote;
+    /** 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). */
+    celula?: number;
+    /** Mostra o ponto e o texto do estado ao lado. */
+    mostrarEstado?: boolean;
+    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.
+ */
+export declare function AgenteMascote({ agente, nome, estado, selo, celula, mostrarEstado, className, }: AgenteMascoteProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { ChaveDoMascote, EstadoDoMascote } from './AgenteMascote';
+export type AgenteDaEquipe = {
+    chave: ChaveDoMascote;
+    nome: string;
+    estado?: EstadoDoMascote;
+    selo?: number;
+    /** O que a aba mostra (feed, pergunta...). Sem conteúdo, a aba diz "Em breve". */
+    conteudo?: React.ReactNode;
+};
+export type EquipeDockProps = {
+    /** O primeiro é o que aparece no botão flutuante. */
+    agentes: AgenteDaEquipe[];
+    abertoInicial?: boolean;
+    /** Título do painel. Padrão: "Equipe". */
+    titulo?: string;
+    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;

package/dist/types/index.d.ts

@@ -11,3 +11,7 @@ export type { EntrarOverlayProps } from './components/entrada';
 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 { EquipeDock } from './components/EquipeDock';
+export type { EquipeDockProps, AgenteDaEquipe } from './components/EquipeDock';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ffid-br/tailor-ui",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.4.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",