@fluencypassdevs/cycle 1.10.0 → 1.15.0

package/bin/mcp.mjs

@@ -411,11 +411,11 @@ const COMPONENTS = [
   {
     name: "ChatMessage",
     import: `import { ChatMessage } from "@fluencypassdevs/cycle"`,
-    description: "Mensagem de conversa com IA. Persona ai/user/system, suporta texto + audio inline + like/dislike. Loading state com typing indicator. AI usa icone Ai + bubble transparente. User usa bubble pink coral (theme-brand) + avatar.",
+    description: "Mensagem de conversa com IA. Persona ai/user/system, suporta texto + audio inline + like/dislike. Loading state com typing indicator. AI usa icone Ai + bubble transparente. User usa bubble pink coral (theme-brand) + avatar. CONVENCAO DO PRODUTO: (1) toda msg da IA com `audioSrc` deve ter `text` (roteiro/legenda do TTS); (2) toda msg do user com `audioSrc` deve ter `text` (transcricao gerada por IA). Garante acessibilidade (leitura + escuta), busca no historico e suporte a screen readers.",
     props: [
       { name: "persona", type: '"ai" | "user" | "system"', default: "-" },
-      { name: "text", type: "string", default: "-" },
-      { name: "audioSrc", type: "string", default: "-" },
+      { name: "text", type: "string", default: "-", note: "Em ai com audioSrc, e o roteiro do TTS. Em user com audioSrc, e a transcricao." },
+      { name: "audioSrc", type: "string", default: "-", note: "IA: TTS gerado. User: gravacao do microfone. Em ambos, sempre acompanhe com text." },
       { name: "avatar", type: "string", default: "-" },
       { name: "author", type: "string", default: "-" },
       { name: "showFeedback", type: "boolean", default: "false" },
@@ -423,8 +423,11 @@ const COMPONENTS = [
       { name: "onFeedbackChange", type: "(val) => void", default: "-" },
       { name: "loading", type: "boolean", default: "false" },
     ],
-    example: `<ChatMessage persona="ai" text="Como posso ajudar?" />
-<ChatMessage persona="ai" text="Vou responder..." audioSrc="/audio.mp3" showFeedback />
+    example: `{/* IA: sempre com text + audioSrc (convencao) */}
+<ChatMessage persona="ai" text="Como posso ajudar?" audioSrc="/ai-tts.mp3" showFeedback />
+{/* User com audio: SEMPRE inclua text com a transcricao */}
+<ChatMessage persona="user" text="Can you explain present perfect?" audioSrc="/user-rec.mp3" author="Felipe" />
+{/* User so com texto (digitado): audio nao se aplica */}
 <ChatMessage persona="user" text="Oi" avatar="/me.jpg" author="Felipe" />
 <ChatMessage persona="ai" loading />
 <ChatMessage persona="system" text="Conversa iniciada" />`,
@@ -450,7 +453,7 @@ const COMPONENTS = [
   {
     name: "MessageBar",
     import: `import { MessageBar } from "@fluencypassdevs/cycle"`,
-    description: "Input bar para chat com IA. 6 estados: default, audio-only, active, disabled, recording, paused. UI-only: consumer implementa MediaRecorder + HTMLAudioElement via callbacks. Live waveform real durante recording (Web Audio API, rolling window estilo WhatsApp). RecordedWaveform real durante paused com peaks + barras tocadas/nao-tocadas + dot verde + click/drag-to-seek. Press-to-record no mobile (touch-only): long-press inicia, drag-up trava em hands-free, drag-left cancela, release < 1s cancela, release >= 1s envia. Vibracao haptica em lock/cancel.",
+    description: "Input bar para chat com IA. 6 estados: default, audio-only, active, disabled, recording, paused. UI-only: consumer implementa MediaRecorder + HTMLAudioElement via callbacks. Live waveform real durante recording (Web Audio API, rolling window estilo WhatsApp). RecordedWaveform real durante paused com peaks + barras tocadas/nao-tocadas + dot verde + click/drag-to-seek. Press-to-record no mobile (touch-only): long-press inicia, drag-up trava em hands-free, drag-left cancela, release < 1s cancela, release >= 1s envia. Vibracao haptica em lock/cancel. Suporta limite de duracao via maxRecordingDuration (segundos) com warning visual configuravel nos segundos finais (timer destructive + 'Xs restantes' aria-live) e callback onMaxDurationReached ao atingir o limite.",
     props: [
       { name: "state", type: '"default" | "audio-only" | "active" | "disabled" | "recording" | "paused"', default: '"default"' },
       { name: "value", type: "string", default: '""' },
@@ -468,6 +471,10 @@ const COMPONENTS = [
       { name: "playbackProgress", type: "number (0-1)", default: "0", note: "consumer atualiza via audio.ontimeupdate enquanto toca o preview no estado paused" },
       { name: "onSeekPlayback", type: "(progress) => void", default: "-", note: "consumer seta audio.currentTime = progress * duration" },
       { name: "placeholder", type: "string", default: '"Digite sua mensagem..."' },
+      { name: "maxRecordingDuration", type: "number", default: "-", note: "limite em segundos. Quando atingido, dispara onMaxDurationReached uma vez. Sem isso, sem limite." },
+      { name: "warnAtSecondsLeft", type: "number", default: "10", note: "ativa warning visual nos ultimos N segundos (timer destructive + 'Xs restantes' aria-live polite)" },
+      { name: "onMaxDurationReached", type: "() => void", default: "-", note: "disparado uma vez ao atingir o limite. ChatThread usa pra auto-pausar; consumer puro pode usar pra customizar" },
+      { name: "secondsLeftLabel", type: "(s) => string", default: "(s) => `${s}s restantes`", note: "label do warning (pra i18n)" },
     ],
     example: `// 1) Captura: passa o MESMO stream pro MessageBar (live waveform).
 // 2) Pause: recorder.stop() gera o Blob; crie um <audio> e atualize playbackProgress via ontimeupdate.
@@ -475,13 +482,15 @@ const COMPONENTS = [
 
 <MessageBar value={text} onChange={setText} onSendText={(t) => send(t)} onStartRecording={() => startRec()} />
 <MessageBar state="recording" recordingDuration={4} recordingStream={stream} onPauseRecording={pause} onCancelRecording={cancel} onSendAudio={send} />
-<MessageBar state="paused" recordingDuration={42} isPlaying={isPlaying} playbackProgress={progress} onTogglePlay={togglePlay} onSeekPlayback={seek} onResumeRecording={resume} onCancelRecording={cancel} onSendAudio={send} />`,
+<MessageBar state="paused" recordingDuration={42} isPlaying={isPlaying} playbackProgress={progress} onTogglePlay={togglePlay} onSeekPlayback={seek} onResumeRecording={resume} onCancelRecording={cancel} onSendAudio={send} />
+{/* Com limite de duracao (timer fica vermelho aos ultimos 5s, auto-pausa aos 30s) */}
+<MessageBar state="recording" recordingDuration={duration} recordingStream={stream} maxRecordingDuration={30} warnAtSecondsLeft={5} onMaxDurationReached={() => pause()} onPauseRecording={pause} onSendAudio={send} />`,
     keywords: ["chat", "input", "message", "bar", "audio", "recording", "microphone", "mensagem", "envio", "press-to-record", "waveform", "playback", "whatsapp"],
   },
   {
     name: "ChatThread",
     import: `import { ChatThread, type ChatThreadMessage } from "@fluencypassdevs/cycle"`,
-    description: "Composite 'tela de chat pronta' que junta ChatMessage + MessageBar + MessageRating. Gerencia state machine interno do MessageBar (default↔recording↔paused) baseado nos callbacks. Auto-scroll inteligente (preserva posicao se user subiu + botao '↓ nova mensagem'). Scroll infinito via onLoadMore. Banners configuraveis: offline, rateLimitedUntil (countdown), quotaExhausted (AlertDialog). Retry inline em msgs failed do user (B2) e regenerar resposta da IA (B3). Botao 'Parar resposta' substitui MessageBar durante thinking. requestRating per-message renderiza MessageRating inline embaixo da bubble da IA — escolha some imediato, callback onRate(messageId, value, label) permite consumer enviar como msg do user. initialThinking pra conversas que comecam com IA falando. Input controlled internamente. Animacoes fade+slide-up.",
+    description: "Composite 'tela de chat pronta' que junta ChatMessage + MessageBar + MessageRating. Gerencia state machine interno do MessageBar (default↔recording↔paused) baseado nos callbacks. Auto-scroll inteligente (preserva posicao se user subiu + botao '↓ nova mensagem'). Scroll infinito via onLoadMore. Banners configuraveis: offline, rateLimitedUntil (countdown), quotaExhausted (AlertDialog). Retry inline em msgs failed do user (B2) e regenerar resposta da IA (B3). Botao 'Parar resposta' durante thinking e OPT-IN via presenca de onStopResponse — sem callback, MessageBar some com animacao de saida e volta quando IA termina. requestRating per-message renderiza MessageRating inline embaixo da bubble da IA — escolha some imediato, callback onRate(messageId, value, label) permite consumer enviar como msg do user. initialThinking pra conversas que comecam com IA falando. Input controlled internamente. Animacoes fade+slide (200ms enter / 150ms leave). Suporta limite de duracao de gravacao via maxRecordingDuration (segundos) com warning visual configuravel e auto-pause ao atingir; override via onMaxDurationReached.",
     props: [
       { name: "messages", type: "ChatThreadMessage[]", default: "[]", note: "array de mensagens da conversa" },
       { name: "state", type: '"idle" | "sending" | "thinking" | "error"', default: '"idle"', note: "estado global da conversa (controlled)" },
@@ -501,7 +510,7 @@ const COMPONENTS = [
       { name: "playbackProgress", type: "number (0-1)", default: "0" },
       { name: "onRetryMessage", type: "(messageId) => void", default: "-", note: "retry msg do user com status=failed" },
       { name: "onRegenerateResponse", type: "() => void", default: "-", note: "regerar resposta da IA com erro" },
-      { name: "onStopResponse", type: "() => void", default: "-", note: "cancela thinking mid-resposta (F1)" },
+      { name: "onStopResponse", type: "() => void", default: "-", note: "OPT-IN: passar este callback ativa o botao 'Parar resposta' durante thinking. Sem ele, MessageBar some com animacao e volta quando IA termina." },
       { name: "onLoadMore", type: "() => Promise<void>", default: "-", note: "scroll infinito ao chegar no topo (G1)" },
       { name: "offline", type: "boolean", default: "false", note: "banner topo + MessageBar disabled" },
       { name: "rateLimitedUntil", type: "number | null", default: "null", note: "timestamp epoch ate quando bloquear (banner countdown)" },
@@ -511,6 +520,12 @@ const COMPONENTS = [
       { name: "ratingLabels", type: "Partial<MessageRatingLabels>", default: "PT-BR defaults", note: "labels customizadas do rating" },
       { name: "placeholder", type: "string", default: '"Digite sua mensagem..."' },
       { name: "maxLength", type: "number", default: "-" },
+      { name: "userAvatar", type: "string", default: "-", note: "URL do avatar do user — propagado pra todas as msgs do user automaticamente" },
+      { name: "userName", type: "string", default: "-", note: "Nome do user — usado para iniciais no fallback do avatar e alt da imagem" },
+      { name: "maxRecordingDuration", type: "number", default: "-", note: "limite de duracao da gravacao em segundos. Ao atingir, auto-pausa (vai pro preview) a menos que onMaxDurationReached seja passado" },
+      { name: "warnAtSecondsLeft", type: "number", default: "10", note: "passthrough pro MessageBar — quando ativar o warning visual nos segundos finais" },
+      { name: "onMaxDurationReached", type: "() => void", default: "-", note: "OVERRIDE do auto-pause. Quando passado, consumer assume controle ao atingir o limite" },
+      { name: "secondsLeftLabel", type: "(s) => string", default: "(s) => `${s}s restantes`", note: "passthrough pro MessageBar (pra i18n)" },
     ],
     example: `// ChatThreadMessage extra fields:
 // - status?: "sent" | "pending" | "failed"
@@ -524,6 +539,8 @@ const COMPONENTS = [
   messages={messages}
   state={state}
   initialThinking
+  userAvatar="/me.jpg"
+  userName="Felipe Pereira"
   onSendText={(text) => sendText(text)}
   onSendAudio={() => sendAudio()}
   onStartRecording={() => startRec()}
@@ -926,6 +943,205 @@ import { Home, Search } from "@fluencypassdevs/cycle/icons/lucide"
 <CycleIcon icon={Search} size="md" aria-label="Buscar" />`,
     keywords: ["icone", "icon", "lucide", "svg", "grafico"],
   },
+  // ─── Marketing — Camada 1 (motion utilities) ────────────────────────────────
+  {
+    name: "RevealOnScroll",
+    import: `import { RevealOnScroll } from "@fluencypassdevs/cycle/marketing/motion/reveal-on-scroll"`,
+    description: "MARKETING (landing pages). Wrapper que aplica fade-up suave (translateY 8px + opacity 0->1, 720ms) quando o elemento entra no viewport. Usa IntersectionObserver. Respeita prefers-reduced-motion (entrega visivel sem transicao). Compoe com qualquer conteudo via children.",
+    props: [
+      { name: "as", type: '"div" | "section" | "article" | "header" | "footer" | "main" | "aside"', default: '"div"' },
+      { name: "delay", type: "number", default: "0", note: "delay extra antes da animacao (ms)" },
+      { name: "threshold", type: "number", default: "0.15", note: "fracao do elemento visivel pra disparar (0-1)" },
+      { name: "rootMargin", type: "string", default: '"0px 0px -10% 0px"', note: "margin do viewport (CSS shorthand)" },
+      { name: "repeat", type: "boolean", default: "false", note: "reanima toda vez que reentrar no viewport" },
+    ],
+    example: `<RevealOnScroll>
+  <h2>Aparece com fade-up</h2>
+</RevealOnScroll>
+
+<RevealOnScroll as="section" delay={200}>
+  <Card>Atrasa 200ms a entrada</Card>
+</RevealOnScroll>`,
+    keywords: ["marketing", "landing", "motion", "animation", "scroll", "fade", "reveal", "entrada"],
+  },
+  {
+    name: "StaggerReveal",
+    import: `import { StaggerReveal } from "@fluencypassdevs/cycle/marketing/motion/stagger-reveal"`,
+    description: "MARKETING (landing pages). Container que anima seus filhos em sequencia (fade-up com delay incremental). Clona cada filho via React.Children.map e injeta --stagger-index como CSS var; animacao acontece via .stagger-child no globals.css. Util pra grids de cards, listas de features, secao de pilares. Respeita prefers-reduced-motion.",
+    props: [
+      { name: "step", type: "number", default: "100", note: "delay entre cada filho (ms)" },
+      { name: "threshold", type: "number", default: "0.15", note: "fracao do container visivel pra disparar" },
+      { name: "rootMargin", type: "string", default: '"0px 0px -10% 0px"' },
+    ],
+    example: `<StaggerReveal step={120} className="grid grid-cols-3 gap-3">
+  <Card>1</Card>
+  <Card>2</Card>
+  <Card>3</Card>
+</StaggerReveal>`,
+    keywords: ["marketing", "landing", "motion", "animation", "stagger", "sequencia", "cards", "grid"],
+  },
+  {
+    name: "AnimatedNumber",
+    import: `import { AnimatedNumber } from "@fluencypassdevs/cycle/marketing/motion/animated-number"`,
+    description: "MARKETING (landing pages). Conta de `from` ate `value` com easing easeOutCubic ao entrar no viewport. Suporta prefix/suffix, decimals, locale (pt-BR ou plain). Aplica tabular-nums automaticamente pra largura estavel. Respeita prefers-reduced-motion (pula pro valor final).",
+    props: [
+      { name: "value", type: "number", default: "-", note: "valor final (obrigatorio)" },
+      { name: "from", type: "number", default: "0" },
+      { name: "duration", type: "number", default: "1400", note: "duracao da animacao (ms)" },
+      { name: "prefix", type: "string", default: '""', note: 'ex: "R$ ", "+"' },
+      { name: "suffix", type: "string", default: '""', note: 'ex: "%", "k"' },
+      { name: "decimals", type: "number", default: "0" },
+      { name: "locale", type: '"pt-BR" | "plain"', default: '"pt-BR"' },
+      { name: "threshold", type: "number", default: "0.4" },
+    ],
+    example: `<AnimatedNumber value={1247} suffix="+" />
+<AnimatedNumber prefix="R$ " value={3.5} decimals={1} suffix="M" />
+<AnimatedNumber value={97} suffix="%" />`,
+    keywords: ["marketing", "landing", "motion", "counter", "number", "stats", "kpi", "metric"],
+  },
+  {
+    name: "SmoothAnchor",
+    import: `import { SmoothAnchor } from "@fluencypassdevs/cycle/marketing/motion/smooth-anchor"`,
+    description: "MARKETING (landing pages). Intercepta cliques em links de hash (<a href=#X>) e faz scroll suave com easing easeInOutCubic em vez do scroll-behavior:smooth nativo. Monta UMA VEZ por app (no RootLayout). Renderiza null (so registra listener global). Pulsa destino apos chegar via .anchor-target-pulse. Respeita prefers-reduced-motion (scroll instantaneo).",
+    props: [
+      { name: "headerOffset", type: "number", default: "96", note: "offset em px (compensar header sticky)" },
+      { name: "duration", type: "number", default: "900", note: "duracao do scroll (ms)" },
+    ],
+    example: `// app/layout.tsx
+<body>
+  <SmoothAnchor headerOffset={64} duration={900} />
+  {children}
+</body>
+
+// Qualquer link de hash agora usa scroll suave:
+<a href="#solucao">Ver solucao</a>
+<section id="solucao" data-anchor-pulse>...</section>`,
+    keywords: ["marketing", "landing", "motion", "scroll", "anchor", "hash", "navegacao", "suave"],
+  },
+  // ─── Marketing — Camada 2a (Foundation visual: layout + typography + effects) ─
+  {
+    name: "Section",
+    import: `import { Section } from "@fluencypassdevs/cycle/marketing/layout/section"`,
+    description: "MARKETING (landing pages) — Camada 2a. Wrapper de dobra. Padroniza padding/altura via variant (hero=min-h-screen flex flex-col, default=py-20 md:py-28) e alterna fundo via tone (dark default, light aplica .light-surface). Generaliza o HomeSection do site corporativo. Pareie com SectionHeading/Eyebrow/Subtitle.",
+    props: [
+      { name: "as", type: '"section" | "div"', default: '"section"' },
+      { name: "variant", type: '"hero" | "default"', default: '"default"', note: "hero ocupa min-h-screen; default tem py generoso" },
+      { name: "tone", type: '"dark" | "light"', default: '"dark"', note: "light aplica .light-surface (override de tokens semanticos)" },
+      { name: "id", type: "string", default: "-", note: "ID para ancoragem via SmoothAnchor" },
+    ],
+    example: `<Section variant="hero">
+  <HeroHeading>Acelere o ingles do seu time</HeroHeading>
+</Section>
+
+<Section id="pilares" variant="default" tone="light">
+  <SectionEyebrow align="center">Para empresas</SectionEyebrow>
+  <SectionHeading>3 pilares essenciais</SectionHeading>
+  <div className="grid md:grid-cols-3 gap-6">{cards}</div>
+</Section>`,
+    keywords: ["marketing", "landing", "layout", "section", "dobra", "wrapper", "hero"],
+  },
+  {
+    name: "HeroHeading",
+    import: `import { HeroHeading } from "@fluencypassdevs/cycle/marketing/typography/hero-heading"`,
+    description: "MARKETING — Camada 2a. Titulo dramatico para hero (h1 default). Sizes grandes, font-bold, leading apertado (1.07), text-balance, max-w-2xl. Use no primeiro titulo da landing.",
+    props: [
+      { name: "as", type: '"h1" | "h2" | "div"', default: '"h1"' },
+      { name: "align", type: '"left" | "center"', default: '"left"' },
+    ],
+    example: `<HeroHeading>Acelere o ingles do seu time</HeroHeading>
+<HeroHeading align="center">Aprenda rapido com IA</HeroHeading>`,
+    keywords: ["marketing", "landing", "typography", "heading", "h1", "hero", "titulo"],
+  },
+  {
+    name: "SectionHeading",
+    import: `import { SectionHeading } from "@fluencypassdevs/cycle/marketing/typography/section-heading"`,
+    description: "MARKETING — Camada 2a. Titulo de dobra (h2 default). Dois pesos: light (font-light elegante, default) e bold (font-bold impacto). leading 1.15, text-balance. Pareie com SectionEyebrow acima e SectionSubtitle abaixo.",
+    props: [
+      { name: "as", type: '"h2" | "h3"', default: '"h2"' },
+      { name: "weight", type: '"light" | "bold"', default: '"light"' },
+      { name: "align", type: '"left" | "center"', default: '"center"' },
+      { name: "maxW", type: '"wide" | "prose"', default: '"wide"', note: "wide=max-w-5xl, prose=max-w-3xl" },
+    ],
+    example: `<SectionHeading>
+  Conteudo, professores e tecnologia no mesmo lugar
+</SectionHeading>
+
+<SectionHeading weight="bold" align="left" maxW="prose">
+  Mude o jeito de aprender ingles
+</SectionHeading>`,
+    keywords: ["marketing", "landing", "typography", "heading", "h2", "section", "dobra"],
+  },
+  {
+    name: "SectionEyebrow",
+    import: `import { SectionEyebrow } from "@fluencypassdevs/cycle/marketing/typography/section-eyebrow"`,
+    description: "MARKETING — Camada 2a. Rotulo monospace acima do SectionHeading que categoriza a dobra. text-xs font-mono uppercase tracking-widest text-muted-foreground.",
+    props: [
+      { name: "as", type: '"p" | "span" | "div"', default: '"p"' },
+      { name: "align", type: '"left" | "center"', default: '"left"' },
+    ],
+    example: `<SectionEyebrow align="center">Para empresas</SectionEyebrow>
+<SectionHeading>Acelere o ingles do seu time</SectionHeading>`,
+    keywords: ["marketing", "landing", "typography", "eyebrow", "label", "rotulo", "categoria"],
+  },
+  {
+    name: "SectionSubtitle",
+    import: `import { SectionSubtitle } from "@fluencypassdevs/cycle/marketing/typography/section-subtitle"`,
+    description: "MARKETING — Camada 2a. Body de apoio abaixo do SectionHeading. text-base sm:text-lg md:text-xl muted-foreground leading-relaxed text-balance max-w-3xl. align center (default) adiciona mx-auto.",
+    props: [
+      { name: "align", type: '"left" | "center"', default: '"center"' },
+    ],
+    example: `<SectionHeading>Nossa solucao em 3 passos</SectionHeading>
+<SectionSubtitle>
+  Do diagnostico ao certificado, num caminho desenhado pra resultado.
+</SectionSubtitle>`,
+    keywords: ["marketing", "landing", "typography", "subtitle", "subtitulo", "body", "lead"],
+  },
+  {
+    name: "CircleGlow",
+    import: `import { CircleGlow } from "@fluencypassdevs/cycle/marketing/effects/circle-glow"`,
+    description: "MARKETING — Camada 2a. Decoracao de elipse radial pulsante (4.5s scale + opacity) posicionada absolute. Container precisa ser relative. Sempre aria-hidden + pointer-events none. Respeita prefers-reduced-motion.",
+    props: [
+      { name: "size", type: '"sm" | "md" | "lg"', default: '"lg"', note: "controla transform: scale()" },
+    ],
+    example: `<div className="relative overflow-hidden">
+  <CircleGlow className="-z-10" />
+  <div className="grid grid-cols-3 gap-6">{cards}</div>
+</div>`,
+    keywords: ["marketing", "landing", "effects", "glow", "decoration", "background", "rose"],
+  },
+  {
+    name: "CardDarkGlow",
+    import: `import { CardDarkGlow } from "@fluencypassdevs/cycle/marketing/effects/card-dark-glow"`,
+    description: "MARKETING — Camada 2a. Wrapper de card com inset highlight + glow rose subtil + hover lift opcional (translateY -3px). Prop interactive (default true) habilita o hover. Pareie com CircleGlow no container externo pro efeito 'dark premium'.",
+    props: [
+      { name: "as", type: '"div" | "article" | "section"', default: '"div"' },
+      { name: "interactive", type: "boolean", default: "true", note: "habilita hover lift + glow stronger" },
+    ],
+    example: `<CardDarkGlow className="rounded-2xl bg-card border p-6">
+  <h3>Titulo</h3>
+  <p>Descricao do card</p>
+</CardDarkGlow>
+
+<CardDarkGlow interactive={false}>...sem hover</CardDarkGlow>`,
+    keywords: ["marketing", "landing", "effects", "card", "shadow", "glow", "hover", "lift"],
+  },
+  {
+    name: "Marquee",
+    import: `import { Marquee } from "@fluencypassdevs/cycle/marketing/effects/marquee"`,
+    description: "MARKETING — Camada 2a. Scroll horizontal infinito (logo cloud, partner band). Duplica children pra loop seamless (segundo bloco aria-hidden). Pausa em hover e focus-within (a11y). Respeita prefers-reduced-motion.",
+    props: [
+      { name: "speed", type: "number", default: "40", note: "duracao de um ciclo em segundos" },
+      { name: "direction", type: '"left" | "right"', default: '"left"' },
+      { name: "pauseOnHover", type: "boolean", default: "true" },
+      { name: "gap", type: "number", default: "48", note: "espacamento entre items em px" },
+    ],
+    example: `<Marquee speed={30} gap={64}>
+  <img src="/logos/logo-a.png" alt="Cliente A" />
+  <img src="/logos/logo-b.png" alt="Cliente B" />
+  <img src="/logos/logo-c.png" alt="Cliente C" />
+</Marquee>`,
+    keywords: ["marketing", "landing", "effects", "marquee", "scroll", "horizontal", "logo", "cloud", "partner", "band"],
+  },
 ]
 
 // ─── Design Tokens ─────────────────────────────────────────────────────────────

package/dist/chunk-5HPZCREI.js

@@ -0,0 +1,55 @@
+import { cn } from './chunk-TYCPXAXF.js';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-YINJ5YZ5.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Marquee = React.forwardRef(function Marquee2(_a, ref) {
+  var _b = _a, {
+    speed = 40,
+    direction = "left",
+    pauseOnHover = true,
+    gap = 48,
+    className,
+    children,
+    style
+  } = _b, props = __objRest(_b, [
+    "speed",
+    "direction",
+    "pauseOnHover",
+    "gap",
+    "className",
+    "children",
+    "style"
+  ]);
+  const trackStyle = {
+    ["--cycle-marquee-duration"]: `${speed}s`,
+    ["--cycle-marquee-gap"]: `${gap}px`
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      "data-slot": "marquee",
+      "data-pause-on-hover": pauseOnHover ? "true" : "false",
+      className: cn("cycle-marquee", className),
+      style
+    }, props), {
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "cycle-marquee-track",
+          "data-direction": direction,
+          style: trackStyle,
+          children: [
+            children,
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "contents", children })
+          ]
+        }
+      )
+    })
+  );
+});
+
+export { Marquee };
+//# sourceMappingURL=chunk-5HPZCREI.js.map
+//# sourceMappingURL=chunk-5HPZCREI.js.map

package/dist/chunk-5HPZCREI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/marketing/effects/marquee.tsx"],"names":["Marquee"],"mappings":";;;;;AA8BA,IAAM,OAAA,GAAgB,KAAA,CAAA,UAAA,CAAyC,SAASA,QAAAA,CACtE,IAUA,GAAA,EACA;AAXA,EAAA,IAAA,EAAA,GAAA,EAAA,EACE;AAAA,IAAA,KAAA,GAAQ,EAAA;AAAA,IACR,SAAA,GAAY,MAAA;AAAA,IACZ,YAAA,GAAe,IAAA;AAAA,IACf,GAAA,GAAM,EAAA;AAAA,IACN,SAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GAtCJ,GA+BE,EAAA,EAQK,KAAA,GAAA,SAAA,CARL,EAAA,EAQK;AAAA,IAPH,OAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAMF,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,CAAC,0BAAoC,GAAG,CAAA,EAAG,KAAK,CAAA,CAAA,CAAA;AAAA,IAChD,CAAC,qBAA+B,GAAG,CAAA,EAAG,GAAG,CAAA,EAAA;AAAA,GAC3C;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,SAAA;AAAA,MACV,qBAAA,EAAqB,eAAe,MAAA,GAAS,OAAA;AAAA,MAC7C,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,SAAS,CAAA;AAAA,MACxC;AAAA,KAAA,EACI,KAAA,CAAA,EANL;AAAA,MAQC,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,qBAAA;AAAA,UACV,gBAAA,EAAgB,SAAA;AAAA,UAChB,KAAA,EAAO,UAAA;AAAA,UAEN,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,gCAEA,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,SAAA,EAAU,YAC/B,QAAA,EACH;AAAA;AAAA;AAAA;AACF,KAAA;AAAA,GACF;AAEJ,CAAC","file":"chunk-5HPZCREI.js","sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Duracao de um ciclo completo em segundos. Default `40`. */\n  speed?: number\n  /** Direcao do movimento. Default `\"left\"`. */\n  direction?: \"left\" | \"right\"\n  /** Pausa em `:hover` e `:focus-within`. Default `true` (acessibilidade). */\n  pauseOnHover?: boolean\n  /** Espacamento entre cada item em px. Default `48`. */\n  gap?: number\n}\n\n/**\n * Scroll horizontal infinito (logo cloud, partner band). Duplica os children\n * internamente pra criar loop seamless. Pausa em hover/focus pra dar tempo\n * de leitura. Respeita `prefers-reduced-motion` (anima zerada).\n *\n * Importante: a duplicacao usa `aria-hidden` no segundo bloco pra evitar\n * leitura repetida por screen readers.\n *\n * @example\n * <Marquee speed={30} gap={64}>\n *   <img src=\"/logos/logo-a.png\" alt=\"Cliente A\" />\n *   <img src=\"/logos/logo-b.png\" alt=\"Cliente B\" />\n *   <img src=\"/logos/logo-c.png\" alt=\"Cliente C\" />\n * </Marquee>\n */\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(function Marquee(\n  {\n    speed = 40,\n    direction = \"left\",\n    pauseOnHover = true,\n    gap = 48,\n    className,\n    children,\n    style,\n    ...props\n  },\n  ref\n) {\n  // Style merge: nossas CSS vars + qualquer style passado pelo consumer\n  const trackStyle = {\n    [\"--cycle-marquee-duration\" as string]: `${speed}s`,\n    [\"--cycle-marquee-gap\" as string]: `${gap}px`,\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"marquee\"\n      data-pause-on-hover={pauseOnHover ? \"true\" : \"false\"}\n      className={cn(\"cycle-marquee\", className)}\n      style={style}\n      {...props}\n    >\n      <div\n        className=\"cycle-marquee-track\"\n        data-direction={direction}\n        style={trackStyle}\n      >\n        {children}\n        {/* Duplicacao pro loop seamless — `aria-hidden` pra screen readers ignorarem. */}\n        <div aria-hidden=\"true\" className=\"contents\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport { Marquee }\n"]}

package/dist/chunk-6JH4YWWX.js

@@ -0,0 +1,29 @@
+import { cn } from './chunk-TYCPXAXF.js';
+import { __objRest, __spreadValues } from './chunk-YINJ5YZ5.js';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var SectionHeading = React.forwardRef(
+  function SectionHeading2(_a, ref) {
+    var _b = _a, { as = "h2", weight = "light", align = "center", maxW = "wide", className } = _b, props = __objRest(_b, ["as", "weight", "align", "maxW", "className"]);
+    const Tag = as;
+    return /* @__PURE__ */ jsx(
+      Tag,
+      __spreadValues({
+        ref,
+        "data-slot": "section-heading",
+        className: cn(
+          "text-4xl sm:text-5xl md:text-6xl tracking-tight leading-[1.15] text-balance",
+          weight === "light" ? "font-light" : "font-bold",
+          maxW === "wide" ? "max-w-5xl" : "max-w-3xl",
+          align === "center" ? "text-center mx-auto" : "text-left",
+          className
+        )
+      }, props)
+    );
+  }
+);
+
+export { SectionHeading };
+//# sourceMappingURL=chunk-6JH4YWWX.js.map
+//# sourceMappingURL=chunk-6JH4YWWX.js.map

package/dist/chunk-6JH4YWWX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/marketing/typography/section-heading.tsx"],"names":["SectionHeading"],"mappings":";;;;;AAuCA,IAAM,cAAA,GAAuB,KAAA,CAAA,UAAA;AAAA,EAC3B,SAASA,eAAAA,CACP,EAAA,EACA,GAAA,EACA;AAFA,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,OAAK,IAAA,EAAM,MAAA,GAAS,OAAA,EAAS,KAAA,GAAQ,UAAU,IAAA,GAAO,MAAA,EAAQ,SAAA,EAzCpE,GAyCI,IAA8E,KAAA,GAAA,SAAA,CAA9E,EAAA,EAA8E,CAA5E,IAAA,EAAW,QAAA,EAAkB,SAAkB,MAAA,EAAe,WAAA,CAAA,CAAA;AAGhE,IAAA,MAAM,GAAA,GAAM,EAAA;AACZ,IAAA,uBACE,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA,cAAA,CAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,6EAAA;AAAA,UACA,MAAA,KAAW,UAAU,YAAA,GAAe,WAAA;AAAA,UACpC,IAAA,KAAS,SAAS,WAAA,GAAc,WAAA;AAAA,UAChC,KAAA,KAAU,WAAW,qBAAA,GAAwB,WAAA;AAAA,UAC7C;AAAA;AACF,OAAA,EACI,KAAA;AAAA,KACN;AAAA,EAEJ;AACF","file":"chunk-6JH4YWWX.js","sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype SectionHeadingTag = \"h2\" | \"h3\"\n\nexport interface SectionHeadingProps\n  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, \"color\"> {\n  /** Tag renderizada. Default `\"h2\"`. */\n  as?: SectionHeadingTag\n  /**\n   * Peso/intencao visual:\n   * - `\"light\"` (default): `font-light` — elegante, usual em maioria das dobras.\n   * - `\"bold\"`: `font-bold` — impacto, usado em momentos de virada (quebra).\n   */\n  weight?: \"light\" | \"bold\"\n  /** Alinhamento. Default `\"center\"`. */\n  align?: \"left\" | \"center\"\n  /**\n   * Largura maxima do bloco de texto:\n   * - `\"wide\"` (default): `max-w-5xl` — usual centro/elegante.\n   * - `\"prose\"`: `max-w-3xl` — quando o titulo e mais conciso.\n   */\n  maxW?: \"wide\" | \"prose\"\n}\n\n/**\n * Titulo de dobra de landing. Dois pesos principais (`light` elegante vs `bold`\n * impacto). Pareie com `SectionEyebrow` acima e `SectionSubtitle` abaixo.\n *\n * @example\n * <SectionHeading>\n *   Conteudo, professores e <strong>tecnologia</strong> no mesmo lugar\n * </SectionHeading>\n *\n * <SectionHeading weight=\"bold\" align=\"left\" maxW=\"prose\">\n *   Mude o jeito de aprender ingles\n * </SectionHeading>\n */\nconst SectionHeading = React.forwardRef<HTMLHeadingElement, SectionHeadingProps>(\n  function SectionHeading(\n    { as = \"h2\", weight = \"light\", align = \"center\", maxW = \"wide\", className, ...props },\n    ref\n  ) {\n    const Tag = as as React.ElementType\n    return (\n      <Tag\n        ref={ref}\n        data-slot=\"section-heading\"\n        className={cn(\n          \"text-4xl sm:text-5xl md:text-6xl tracking-tight leading-[1.15] text-balance\",\n          weight === \"light\" ? \"font-light\" : \"font-bold\",\n          maxW === \"wide\" ? \"max-w-5xl\" : \"max-w-3xl\",\n          align === \"center\" ? \"text-center mx-auto\" : \"text-left\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\n\nexport { SectionHeading }\n"]}

package/dist/chunk-7LH7PSQS.js

@@ -0,0 +1,77 @@
+import { useReducedMotion } from './chunk-K2NUBNSA.js';
+import { useIntersection } from './chunk-XQUQDZVA.js';
+import { cn } from './chunk-TYCPXAXF.js';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-YINJ5YZ5.js';
+import * as React from 'react';
+import { jsxs } from 'react/jsx-runtime';
+
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function formatNumber(n, decimals, locale) {
+  if (locale === "pt-BR") {
+    return n.toLocaleString("pt-BR", {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    });
+  }
+  return n.toFixed(decimals);
+}
+function AnimatedNumber(_a) {
+  var _b = _a, {
+    value,
+    from = 0,
+    duration = 1400,
+    prefix = "",
+    suffix = "",
+    decimals = 0,
+    locale = "pt-BR",
+    threshold = 0.4,
+    className
+  } = _b, props = __objRest(_b, [
+    "value",
+    "from",
+    "duration",
+    "prefix",
+    "suffix",
+    "decimals",
+    "locale",
+    "threshold",
+    "className"
+  ]);
+  const reduced = useReducedMotion();
+  const { ref, isVisible } = useIntersection({
+    threshold,
+    startVisible: reduced
+  });
+  const [current, setCurrent] = React.useState(reduced ? value : from);
+  const startedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (reduced) {
+      setCurrent(value);
+      return;
+    }
+    if (!isVisible || startedRef.current) return;
+    startedRef.current = true;
+    const start = performance.now();
+    let frame = 0;
+    const tick = (now) => {
+      const elapsed = now - start;
+      const t = Math.min(elapsed / duration, 1);
+      const next = from + (value - from) * easeOutCubic(t);
+      setCurrent(next);
+      if (t < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [isVisible, value, from, duration, reduced]);
+  return /* @__PURE__ */ jsxs("span", __spreadProps(__spreadValues({ ref, className: cn("tabular-nums", className) }, props), { children: [
+    prefix,
+    formatNumber(current, decimals, locale),
+    suffix
+  ] }));
+}
+
+export { AnimatedNumber };
+//# sourceMappingURL=chunk-7LH7PSQS.js.map
+//# sourceMappingURL=chunk-7LH7PSQS.js.map

package/dist/chunk-7LH7PSQS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/marketing/motion/animated-number.tsx"],"names":[],"mappings":"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","file":"chunk-7LH7PSQS.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useIntersection } from \"@/hooks/use-intersection\"\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\"\n\nexport interface AnimatedNumberProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Valor final do contador. */\n  value: number\n  /** Valor inicial. Default `0`. */\n  from?: number\n  /** Duracao da animacao em ms. Default `1400`. */\n  duration?: number\n  /** Texto antes do numero (ex: `\"R$ \"` ou `\"+\"`). */\n  prefix?: string\n  /** Texto depois do numero (ex: `\"%\"` ou `\"k\"`). */\n  suffix?: string\n  /** Casas decimais. Default `0`. */\n  decimals?: number\n  /**\n   * Formato dos numeros. `\"pt-BR\"` usa separador `.` e decimal `,`;\n   * `\"plain\"` usa `toFixed`. Default `\"pt-BR\"`.\n   */\n  locale?: \"pt-BR\" | \"plain\"\n  /** Threshold do IntersectionObserver. Default `0.4`. */\n  threshold?: number\n}\n\nfunction easeOutCubic(t: number): number {\n  return 1 - Math.pow(1 - t, 3)\n}\n\nfunction formatNumber(n: number, decimals: number, locale: \"pt-BR\" | \"plain\"): string {\n  if (locale === \"pt-BR\") {\n    return n.toLocaleString(\"pt-BR\", {\n      minimumFractionDigits: decimals,\n      maximumFractionDigits: decimals,\n    })\n  }\n  return n.toFixed(decimals)\n}\n\n/**\n * Conta de `from` ate `value` com easing `easeOutCubic` quando o componente\n * entra no viewport. Aplica `tabular-nums` automaticamente pra largura estavel\n * durante a contagem (evita \"saltos\" no layout).\n *\n * Acessibilidade: respeita `prefers-reduced-motion` — pula direto pro valor\n * final, sem animar.\n */\nfunction AnimatedNumber({\n  value,\n  from = 0,\n  duration = 1400,\n  prefix = \"\",\n  suffix = \"\",\n  decimals = 0,\n  locale = \"pt-BR\",\n  threshold = 0.4,\n  className,\n  ...props\n}: AnimatedNumberProps) {\n  const reduced = useReducedMotion()\n  const { ref, isVisible } = useIntersection<HTMLSpanElement>({\n    threshold,\n    startVisible: reduced,\n  })\n  const [current, setCurrent] = React.useState(reduced ? value : from)\n  const startedRef = React.useRef(false)\n\n  React.useEffect(() => {\n    if (reduced) {\n      setCurrent(value)\n      return\n    }\n    if (!isVisible || startedRef.current) return\n    startedRef.current = true\n\n    const start = performance.now()\n    let frame = 0\n    const tick = (now: number) => {\n      const elapsed = now - start\n      const t = Math.min(elapsed / duration, 1)\n      const next = from + (value - from) * easeOutCubic(t)\n      setCurrent(next)\n      if (t < 1) frame = requestAnimationFrame(tick)\n    }\n    frame = requestAnimationFrame(tick)\n    return () => cancelAnimationFrame(frame)\n  }, [isVisible, value, from, duration, reduced])\n\n  return (\n    <span ref={ref} className={cn(\"tabular-nums\", className)} {...props}>\n      {prefix}\n      {formatNumber(current, decimals, locale)}\n      {suffix}\n    </span>\n  )\n}\n\nexport { AnimatedNumber }\n"]}

package/dist/{chunk-YMWRR7ET.js → chunk-CG7NXMBC.js}

@@ -1,11 +1,12 @@
 import { LikeDislike } from './chunk-F2XA2Z75.js';
 import { Ai } from './chunk-JPEDYOV7.js';
+import { CycleIcon } from './chunk-V7M2NHUO.js';
 import { Avatar, AvatarImage, AvatarFallback } from './chunk-MSLQRGSP.js';
 import { cn } from './chunk-TYCPXAXF.js';
 import { __objRest, __spreadProps, __spreadValues } from './chunk-YINJ5YZ5.js';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
-import { Pause, Play } from 'lucide-react';
+import { Pause, Play, User } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var chatMessageVariants = cva("flex w-full text-sm", {
@@ -143,8 +144,6 @@ var STATIC_FALLBACK_PEAKS = [
 ].map((h) => h / 32);
 var MIN_BAR_HEIGHT = 2;
 var MAX_BAR_HEIGHT = 32;
-var BAR_WIDTH = 2;
-var BAR_GAP = 2;
 var SPEED_OPTIONS = [1, 1.25, 1.5, 2, 0.75];
 var peaksCache = /* @__PURE__ */ new Map();
 async function calculatePeaks(audioUrl, barCount) {
@@ -273,13 +272,10 @@ function ChatAudio(_a) {
       if (!audio || !waveform2 || !duration) return;
       const rect = waveform2.getBoundingClientRect();
       const x = clientX - rect.left;
-      const newProgress = Math.max(
-        0,
-        Math.min(x / (peaks.length * (BAR_WIDTH + BAR_GAP) - BAR_GAP), 1)
-      );
+      const newProgress = Math.max(0, Math.min(x / rect.width, 1));
       audio.currentTime = newProgress * duration;
     },
-    [duration, peaks.length]
+    [duration]
   );
   const handlePointerDown = (e) => {
     if (!duration) return;
@@ -298,12 +294,11 @@ function ChatAudio(_a) {
   };
   const progress = duration > 0 ? currentTime / duration : 0;
   const displayTime = formatAudioTime(currentTime);
-  const barsLayoutWidth = peaks.length * (BAR_WIDTH + BAR_GAP) - BAR_GAP;
   const waveform = /* @__PURE__ */ jsxs(
     "div",
     {
       ref: waveformRef,
-      className: "flex-1 relative h-8 min-w-0 overflow-hidden touch-none cursor-pointer select-none",
+      className: "flex-1 relative h-8 min-w-0 touch-none cursor-pointer select-none",
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
@@ -314,7 +309,7 @@ function ChatAudio(_a) {
       "aria-valuemax": Math.round(duration),
       "aria-valuenow": Math.round(currentTime),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 flex items-center gap-[2px]", children: peaks.map((peak, i) => {
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-between", children: peaks.map((peak, i) => {
           const isPlayed = i / peaks.length <= progress;
           const height = Math.max(
             MIN_BAR_HEIGHT,
@@ -336,7 +331,7 @@ function ChatAudio(_a) {
           "div",
           {
             className: "absolute top-1/2 z-10 -translate-y-1/2 -translate-x-1/2 size-3 rounded-full bg-[#098A5E] pointer-events-none shadow-md",
-            style: { left: `${progress * barsLayoutWidth}px` },
+            style: { left: `${progress * 100}%` },
             "aria-hidden": "true"
           }
         )
@@ -453,11 +448,11 @@ function ChatMessage(_a) {
         children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 max-w-[85%] sm:max-w-[75%] w-full", children: [
           /* @__PURE__ */ jsx("div", { className: "hidden sm:flex shrink-0 size-8 rounded-md bg-primary items-center justify-center theme-brand", children: /* @__PURE__ */ jsx("span", { className: "text-primary-foreground", children: /* @__PURE__ */ jsx(Ai, { size: "sm", decorative: true }) }) }),
           /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-w-0 flex-1", children: loading ? (
-            /* Loading: dots dentro de bubble cinza (speech bubble shape — top-left reto) */
-            /* @__PURE__ */ jsx("div", { className: "self-start inline-flex items-center rounded-2xl sm:rounded-tl-none bg-muted p-5 text-muted-foreground", children: /* @__PURE__ */ jsx(TypingDots, {}) })
+            /* Loading: dots dentro de bubble cinza (speech bubble shape — top-left reto em todos os breakpoints) */
+            /* @__PURE__ */ jsx("div", { className: "self-start inline-flex items-center rounded-2xl rounded-tl-none bg-muted p-5 text-muted-foreground", children: /* @__PURE__ */ jsx(TypingDots, {}) })
           ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            text && /* Text bubble: bg-muted sempre, speech bubble shape (tl-none) apenas no desktop */
-            /* @__PURE__ */ jsx("div", { className: "rounded-2xl bg-muted p-5 sm:rounded-tl-none", children: /* @__PURE__ */ jsx("p", { className: "text-base leading-6 text-neutral-foreground break-words", children: text }) }),
+            text && /* Text bubble: bg-muted sempre, speech bubble shape (tl-none) em todos os breakpoints */
+            /* @__PURE__ */ jsx("div", { className: "rounded-2xl rounded-tl-none bg-muted p-5", children: /* @__PURE__ */ jsx("p", { className: "text-base leading-6 text-neutral-foreground break-words", children: text }) }),
             audioSrc && /* @__PURE__ */ jsx(ChatAudio, { src: audioSrc, variant: "neutral" }),
             showFeedback && /* @__PURE__ */ jsx(
               LikeDislike,
@@ -481,17 +476,17 @@ function ChatMessage(_a) {
     }, props), {
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 max-w-[85%] sm:max-w-[75%] w-full justify-end", children: [
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-w-0 items-end theme-brand flex-1", children: loading ? (
-          /* Loading: dots dentro de bubble pink (speech bubble shape — top-right reto) */
-          /* @__PURE__ */ jsx("div", { className: "inline-flex items-center rounded-2xl sm:rounded-tr-none bg-accent p-5 text-neutral-muted-foreground", children: /* @__PURE__ */ jsx(TypingDots, {}) })
+          /* Loading: dots dentro de bubble pink (speech bubble shape — top-right reto em todos os breakpoints) */
+          /* @__PURE__ */ jsx("div", { className: "inline-flex items-center rounded-2xl rounded-tr-none bg-accent p-5 text-neutral-muted-foreground", children: /* @__PURE__ */ jsx(TypingDots, {}) })
         ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          text && /* Text bubble: speech bubble shape (top-right reto) no desktop.
+          text && /* Text bubble: speech bubble shape (top-right reto) em todos os breakpoints.
              text-neutral-foreground = preto neutro fixo, nao muda com theme-brand */
-          /* @__PURE__ */ jsx("div", { className: "rounded-2xl sm:rounded-tr-none bg-accent p-5", children: /* @__PURE__ */ jsx("p", { className: "text-base leading-6 text-neutral-foreground break-words", children: text }) }),
+          /* @__PURE__ */ jsx("div", { className: "rounded-2xl rounded-tr-none bg-accent p-5", children: /* @__PURE__ */ jsx("p", { className: "text-base leading-6 text-neutral-foreground break-words", children: text }) }),
           audioSrc && /* @__PURE__ */ jsx(ChatAudio, { src: audioSrc, variant: "brand" })
         ] }) }),
         /* @__PURE__ */ jsxs(Avatar, { size: "lg", className: "hidden sm:flex shrink-0 rounded-lg", children: [
           avatar && /* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: author != null ? author : "User", className: "rounded-lg" }),
-          /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg bg-muted text-muted-foreground text-sm", children: getInitials(author) })
+          /* @__PURE__ */ jsx(AvatarFallback, { className: "rounded-lg bg-muted text-muted-foreground text-sm", children: author ? getInitials(author) : /* @__PURE__ */ jsx(CycleIcon, { icon: User, size: "sm", decorative: true }) })
         ] })
       ] })
     })
@@ -499,5 +494,5 @@ function ChatMessage(_a) {
 }
 
 export { ChatAudio, ChatMessage, chatMessageVariants };
-//# sourceMappingURL=chunk-YMWRR7ET.js.map
-//# sourceMappingURL=chunk-YMWRR7ET.js.map
+//# sourceMappingURL=chunk-CG7NXMBC.js.map
+//# sourceMappingURL=chunk-CG7NXMBC.js.map