@ffid-br/tailor-ui 0.2.0 → 0.4.0

package/dist/style.css

@@ -18,17 +18,19 @@
   --tailor-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
-/* TailorLoader — a fita métrica. Ciclo de φ (1,618s): o verde mede a fita e recolhe. */
-.tailor-fita__medida {
-  width: 0;
-  animation: tailor-medir 1.618s var(--tailor-ease-in-out) infinite;
+/* TailorLoader — a malha pequena se desenha a partir do ponto e some, em 2φ (3,236s). */
+.tailor-malha__linha {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: tailor-malha 3.236s var(--tailor-ease-in-out) infinite;
 }
-@keyframes tailor-medir {
-  0%    { width: 0;    left: 0; }
-  61.8% { width: 100%; left: 0; }
-  100%  { width: 0;    left: 100%; }
+@keyframes tailor-malha {
+  0%    { stroke-dashoffset: 1; opacity: 1; }
+  38.2% { stroke-dashoffset: 0; opacity: 1; }
+  80%   { stroke-dashoffset: 0; opacity: 1; }
+  100%  { stroke-dashoffset: 0; opacity: 0; }
 }
-.tailor-fita__reticencias::after {
+.tailor-loader__reticencias::after {
   content: '';
   animation: tailor-reticencias 1.618s steps(4, end) infinite;
 }
@@ -69,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-fita__medida { animation: none; width: 61.8%; }
-  .tailor-fita__reticencias::after { animation: none; content: '...'; }
+  .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/components/TailorLoader.d.ts

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
 export type TailorLoaderProps = {
-    /** Rótulo principal. Padrão: "Tirando as medidas". */
+    /** Rótulo principal. Padrão: "Carregando". */
     label?: string;
     /** Linha de apoio abaixo do rótulo (o que está sendo carregado, ou quanto falta). */
     detail?: string;
     /**
      * `inline`: no lugar do conteúdo. `overlay`: tela inteira, bloqueia.
-     * `compact`: uma linha (fio curto + rótulo), para botões e listas.
-     * `caixa`: a régua numa caixa própria de 377px, com fundo e borda — para painéis
+     * `compact`: uma linha (ponto + rótulo), para botões e listas.
+     * `caixa`: numa caixa própria de 377px, com fundo e borda — para painéis
      * estreitos e fundos com estampa (chat), onde o inline ficaria transparente.
      */
     variant?: 'inline' | 'overlay' | 'compact' | 'caixa';
@@ -15,5 +15,5 @@ export type TailorLoaderProps = {
     semRespiro?: boolean;
     className?: string;
 };
-/** Loader da marca (fita métrica). Sempre expõe `role="status"` com o rótulo. */
+/** Loader da marca (ponto verde e malha Fibonacci). Sempre expõe `role="status"` com o rótulo. */
 export declare const TailorLoader: React.FC<TailorLoaderProps>;

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.2.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",