@rendra-ui/web 2.8.0 → 2.9.0

package/README.md

@@ -180,7 +180,7 @@ Todos em `src/components/ui`, um por finalidade, com o ícone de feedback da mar
 | **Atendimento**  | Chat omnichannel: ConversationList (foto com o logotipo do canal: WhatsApp, WhatsApp Web, Instagram, Facebook, TikTok, Google Meu Negócio e Reclame Aqui), ChatThread (cliente, atendente, robô e avisos; botão direito ou "…" para responder, reagir, editar e excluir; citação que leva à mensagem original; áudio em 1x, 1,5x e 2x; baixar anexos) e ChatComposer (textarea que cresce, anexos, emoji, mensagens rápidas, gravação de áudio, arrastar e soltar ou colar prints; no celular, campo, enviar e um botão de ações)                                                                                                                                                    |
 | **Conteúdo**     | RichTextEditor (Tiptap): formatação completa, listas, alinhamento, links, tabela, imagem com 4 alças para redimensionar, colar print, arrastar imagens e modo HTML                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | **Painel**       | WidgetGrid: widgets que se arrastam e redimensionam no modo "Ajustar dashboard", com a arrumação salva; Chart com velocímetro de meta, funil com conversão, barras com linha, barras coloridas e empilhadas                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| **Fluxo**        | FlowEditor (monta o fluxo de automação com gatilho, ação, condição, espera e fim: paleta, arrastar, ligar, apagar, validar com mensagens e testar o caminho passo a passo; o JSON do fluxo vai e volta por `serializeFlow` e `parseFlow`; no celular só vê e navega, e a gaveta do bloco edita, liga ao próximo e exclui) e FlowViewer (só leitura), em `@rendra-ui/web/flow` com o React Flow                                                                                                                                                                                                                                                                                       |
+| **Fluxo**        | FlowEditor (editor de automações no estilo N8N: quadro horizontal com cards e ligações animadas, barra lateral com busca e blocos agrupados, configuração por bloco, condição com várias regras, webhooks simulados com mapeamento de campos, ligar soltando no bloco, exclusão com confirmação, validar e testar o caminho passo a passo; o JSON v2 vai e volta por `serializeFlow` e `parseFlow`, e o da 2.7.0 também abre; no celular só vê e navega, e a barra abre num Drawer) e FlowViewer (só leitura), em `@rendra-ui/web/flow` com o React Flow                                                                                                                             |
 | **Planejamento** | Calendar (mês, semana, dia e agenda em lista, no mesmo componente; no celular vira mês compacto com a lista do dia), Kanban (altura da tela, 5 etapas visíveis e rolagem lateral também pelo touchpad, rolagem infinita por etapa, (+) no título da etapa, totais em R$ de P&S e MRR por etapa, com percentual, e por cartão, status por cor com cadência por etapa e calendário da próxima atividade, barra do quadro com busca, filtros e Customizar, arrastar no computador até o rodapé flutuante com confirmação, menu "Mover para" no toque e no teclado, uma coluna por vez no celular, limite por coluna) e ImageViewer (imagens em popup, com setas, Esc, arrastar e pinça) |
 | **Layout**       | Container (respiro igual em todos os lados), Stack, Inline, Grid (por tela ou por container query), Section e PageHeader (título no corpo do celular por `bodyTitle`, sem reservar o bloco do título por `titleSpace`)                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
@@ -199,7 +199,7 @@ Tudo configurável por props, com o padrão em `src/config/layout.ts`:
 
 ### Telas base
 
-Login, esqueci a senha, verificação em duas etapas (2FA), nova senha, cadastro, painel com indicadores e gráficos, listagem com barra de ferramentas e filtros, detalhe com abas, formulário longo em seções, cadastro em wizard, configurações com navegação interna, criação e edição de registro em drawer (com busca de CNPJ e CEP), tarefas, atendimento omnichannel, agenda, funil de vendas em kanban, painel em widgets, galeria e página 404.
+Login, esqueci a senha, verificação em duas etapas (2FA), nova senha, cadastro, painel com indicadores e gráficos, listagem com barra de ferramentas e filtros, detalhe com abas, formulário longo em seções, cadastro em wizard, configurações com navegação interna, criação e edição de registro em drawer (com busca de CNPJ e CEP), tarefas, atendimento omnichannel, agenda, funil de vendas em kanban, automações (listagem e a tela cheia de automação, com abas e histórico de execuções), painel em widgets, galeria e página 404.
 
 ### Movimento (opcional, desligado por padrão)
 
@@ -232,7 +232,7 @@ Com React Router, ponha a prop na ponte, que já entrega ao provider o link, o c
 - **Storybook 10** com mais de 100 stories: viewport de celular por padrão, com tablet e desktop, e alternância de template, paleta e modo claro/escuro na barra.
 - **Testes de layout com Playwright** (`npm run test:layout`): 16 rotas × 5 larguras (360, 390, 768, 1280 e 1920) × 3 templates no modo claro, mais 360 e 1280 no escuro, somando 336 testes. Falham se houver rolagem horizontal, elemento maior que a tela, toque menor que 44px no celular ou erro de JavaScript, e geram capturas de todas as telas.
 - **Testes de acessibilidade com axe-core** (`npm run test:a11y`): 144 testes, todas as rotas nos três templates, claro e escuro, mais a paleta Ardósia e o celular. Falham em qualquer violação WCAG 2.1 A ou AA, inclusive contraste.
-- **Regressão visual** (`npm run test:visual`): 152 capturas comparadas com a referência aprovada. Pegam cor que mudou, espaçamento que quebrou e ícone que sumiu. As referências são geradas no Linux do CI; depois de uma mudança visual intencional, aplique o rótulo `atualizar-visual` no Pull Request.
+- **Regressão visual** (`npm run test:visual`): 168 capturas comparadas (21 rotas, as duas das automações entram com o rótulo `atualizar-visual`) com a referência aprovada. Pegam cor que mudou, espaçamento que quebrou e ícone que sumiu. As referências são geradas no Linux do CI; depois de uma mudança visual intencional, aplique o rótulo `atualizar-visual` no Pull Request.
 - **Testes unitários e de componente com Vitest e Testing Library** (`npm test`; `npm run test:coverage` com o piso por arquivo): comportamento de Table (ordenação, busca, paginação, seleção, ações em massa, modo remoto e cartões no celular), Select, Input (máscaras, centavos e busca de CEP e CNPJ), Modal, Drawer, campos de formulário e navegação, além de validadores, máscaras, buscas e o gerador de paletas (AA garantido em todas). Cada componente tem o teste ao lado, e ele vai junto quando você copia o componente para outro projeto.
 - **CI no GitHub Actions**: todo Pull Request passa por tipos, lint, formatação, regras, unitários, build, Storybook e os três testes no navegador. A `main` só aceita merge com tudo verde. Os alertas de segurança do GitHub avisam de dependência vulnerável; as atualizações de versão são feitas à mão (veja o `CONTRIBUTING.md`).
 - **Verificador de regras** (`npm run check:rules`): barra cor fixa, valor arbitrário, degrau fora da escala, estilo inline, fonte fixa, `100vh` e arquivos duplicados ou mobile. A mesma varredura, com as 17 regras, roda em qualquer projeto por `npx @rendra-ui/web auditar --all`.

package/dist/base.css

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 
 @layer base {
   *,

package/dist/{button-CrSlVIsY.js → button-BcCBrlnt.js}

@@ -1,8 +1,8 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as cn } from "./cn-BlJHpkDs.js";
-import { a as useMotionMode, o as useMotionOn, u as usePrefersReducedMotion } from "./motion-context-PJPj6X4g.js";
-import { t as useMotionPresets } from "./use-motion-presets-I4StrsCi.js";
-import { p as resolveCatalogCode } from "./components-6RpoJ2Od.js";
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-CpdCvlkP.js";
+import { a as useMotionMode, o as useMotionOn, u as usePrefersReducedMotion } from "./motion-context-DWFl2xRr.js";
+import { t as useMotionPresets } from "./use-motion-presets-CmMLBQLI.js";
+import { p as resolveCatalogCode } from "./components-Bus_Jh2R.js";
 import { Loader2 } from "lucide-react";
 import { Slot } from "radix-ui";
 import { forwardRef } from "react";
@@ -205,4 +205,4 @@ var Button = forwardRef(function Button({ className, variant, size, icon, iconRi
 //#endregion
 export { buttonVariants as n, Spinner as r, Button as t };
 
-//# sourceMappingURL=button-CrSlVIsY.js.map
+//# sourceMappingURL=button-BcCBrlnt.js.map

package/dist/{button-CrSlVIsY.js.map → button-BcCBrlnt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-CrSlVIsY.js","names":[],"sources":["../src/components/ui/spinner.tsx","../src/lib/motion/native-events.ts","../src/components/ui/button.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react'\nimport { usePrefersReducedMotion } from '@/hooks/use-reduced-motion'\nimport { cn } from '@/lib/cn'\n\n/*\n * Indicador de carregamento único do sistema (A17 do plano da v2). Substitui qualquer\n * `Loader2 animate-spin` solto em Button, Input e Select. Sem label é decorativo\n * (aria-hidden); com label, anuncia o carregamento a quem usa leitor de tela. Para de girar\n * quando o sistema pede menos movimento.\n */\n\nexport interface SpinnerProps {\n  size?: 'sm' | 'md' | 'lg'\n  /** Nome do que está carregando. Vazio (padrão): decorativo, sem anúncio de leitor de tela. */\n  label?: string\n  className?: string\n}\n\nconst sizeClass: Record<NonNullable<SpinnerProps['size']>, string> = {\n  sm: 'size-icon-sm',\n  md: 'size-icon-md',\n  lg: 'size-icon-lg',\n}\n\nexport function Spinner({ size = 'md', label, className }: SpinnerProps) {\n  const reduced = usePrefersReducedMotion()\n  const icon = (\n    <Loader2 aria-hidden className={cn(sizeClass[size], reduced ? '' : 'animate-spin')} />\n  )\n\n  if (!label) {\n    return (\n      <span data-rendra=\"SPIN-001\" aria-hidden className={cn('inline-flex', className)}>\n        {icon}\n      </span>\n    )\n  }\n\n  return (\n    <span\n      data-rendra=\"SPIN-001\"\n      role=\"status\"\n      className={cn('inline-flex items-center gap-2', className)}\n    >\n      {icon}\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  )\n}\n","/*\n * O Motion toma `onDrag`, `onDragStart`, `onDragEnd` e `onAnimationStart` para os gestos e\n * animações dele: tira essas props do DOM e as tipa com outra assinatura. Em `m.button` e\n * `m.li`, o consumidor que passa o evento nativo (HTML5 drag, animationstart do CSS) o perderia.\n * Estes ajudantes separam essas chaves das props e as ligam como ouvintes nativos no elemento.\n */\n\nconst NATIVE_EVENTS = {\n  onDrag: 'drag',\n  onDragStart: 'dragstart',\n  onDragEnd: 'dragend',\n  onAnimationStart: 'animationstart',\n} as const\n\ntype NativeKey = keyof typeof NATIVE_EVENTS\ntype Handler = ((event: never) => void) | undefined\n\n/** Separa as quatro chaves em conflito; o resto segue para o elemento do Motion. */\nexport function splitNativeEvents<P extends object>(props: P) {\n  const native: Partial<Record<NativeKey, Handler>> = {}\n  const rest: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(props)) {\n    if (key in NATIVE_EVENTS) native[key as NativeKey] = value as Handler\n    else rest[key] = value\n  }\n  return { native, rest: rest as Omit<P, NativeKey> }\n}\n\n/** Liga os manipuladores como ouvintes nativos. Devolve a função que os remove. */\nexport function bindNativeEvents(el: HTMLElement, native: Partial<Record<NativeKey, Handler>>) {\n  const bound: [string, EventListener][] = []\n  for (const [key, type] of Object.entries(NATIVE_EVENTS)) {\n    const handler = native[key as NativeKey]\n    if (!handler) continue\n    const listener = ((event: Event) => handler(event as never)) as EventListener\n    el.addEventListener(type, listener)\n    bound.push([type, listener])\n  }\n  return () => bound.forEach(([type, listener]) => el.removeEventListener(type, listener))\n}\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react'\nimport { resolveCatalogCode } from '@/catalog/components'\nimport { Spinner } from '@/components/ui/spinner'\nimport { cn } from '@/lib/cn'\nimport { useMotionMode, useMotionOn, useMotionPresets } from '@/lib/motion'\nimport { bindNativeEvents, splitNativeEvents } from '@/lib/motion/native-events'\n\n/**\n * Botão único do sistema. Variantes, tamanho, ícone, só ícone, carregamento e\n * largura total são props: nunca crie outro arquivo de botão.\n * Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.\n */\nexport const buttonVariants = cva(\n  'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-(--rendra-duration-press) ease-out select-none active:scale-97 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        // Hover troca para a cor de hover da marca e eleva um nível; pressionar comprime.\n        primary:\n          'bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover hover:text-primary-hover-foreground hover:shadow-md active:bg-primary-hover active:text-primary-hover-foreground active:shadow-sm',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover hover:text-secondary-hover-foreground hover:shadow-md active:bg-secondary-hover active:text-secondary-hover-foreground active:shadow-sm',\n        outline:\n          'border border-input bg-card text-foreground hover:border-primary hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n        // Transparentes: no hover, assumem a cor primária do template.\n        ghost:\n          'text-foreground hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover hover:shadow-md active:bg-destructive-hover active:shadow-sm',\n        link: 'min-h-touch min-w-touch text-primary-text underline-offset-4 hover:text-primary-hover hover:underline md:min-h-0 md:min-w-0',\n      },\n      size: {\n        sm: 'h-control-sm px-3 text-sm [&_svg]:size-icon-sm',\n        md: 'h-control-md px-4 text-sm [&_svg]:size-icon-sm',\n        lg: 'h-control-lg px-6 text-base [&_svg]:size-icon-md',\n      },\n      iconOnly: { true: 'px-0', false: '' },\n      fullWidth: { true: 'w-full', false: '' },\n    },\n    compoundVariants: [\n      { iconOnly: true, size: 'sm', className: 'w-control-sm' },\n      { iconOnly: true, size: 'md', className: 'w-control-md' },\n      { iconOnly: true, size: 'lg', className: 'w-control-lg' },\n      { variant: 'link', className: 'h-auto px-0' },\n    ],\n    defaultVariants: { variant: 'primary', size: 'md', iconOnly: false, fullWidth: false },\n  },\n)\n\ntype Variants = VariantProps<typeof buttonVariants>\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<Variants, 'iconOnly' | 'fullWidth'> {\n  /** Ícone à esquerda do texto (ou o próprio conteúdo, com iconOnly). */\n  icon?: ReactNode\n  /** Ícone à direita do texto. */\n  iconRight?: ReactNode\n  /** Botão só com ícone: quadrado, e aria-label passa a ser obrigatório. */\n  iconOnly?: boolean\n  /** Mostra indicador, bloqueia cliques e marca aria-busy. */\n  loading?: boolean\n  /** Ocupa toda a largura do contêiner. */\n  fullWidth?: boolean\n  /** Renderiza o filho (ex.: <Link>) com a aparência de botão. */\n  asChild?: boolean\n}\n\ntype MotionButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {\n  children: ReactNode\n}\n\n/**\n * O botão de `on`: `m.button` com toque discreto (whileTap). Os eventos que o Motion toma\n * (`onDrag*` e `onAnimationStart`) saem das props dele e viram ouvintes nativos no elemento,\n * então o consumidor continua recebendo o evento. Só existe em `on`; por isso os hooks de motion\n * moram aqui e o `off` não paga nada.\n */\nconst MotionButton = forwardRef<HTMLButtonElement, MotionButtonProps>(\n  function MotionButton(props, ref) {\n    const { m } = useMotionOn()\n    const presets = useMotionPresets()\n    const { native, rest } = splitNativeEvents(props)\n    const attach = (el: HTMLButtonElement | null) => {\n      assignRef(ref, el)\n      if (!el) return\n      const unbind = bindNativeEvents(el, native)\n      return () => {\n        unbind()\n        assignRef(ref, null)\n      }\n    }\n    return (\n      <m.button\n        ref={attach}\n        whileTap={presets.press.whileTap}\n        transition={presets.press.transition}\n        {...rest}\n      />\n    )\n  },\n)\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n  if (typeof ref === 'function') ref(value)\n  else if (ref) ref.current = value\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    icon,\n    iconRight,\n    iconOnly = false,\n    loading = false,\n    fullWidth = false,\n    asChild = false,\n    disabled,\n    type = 'button',\n    children,\n    ...props\n  },\n  ref,\n) {\n  if (import.meta.env.DEV && iconOnly && !props['aria-label']) {\n    console.warn('Button com iconOnly precisa de aria-label.')\n  }\n  const on = useMotionMode() === 'on'\n  // Em `on` o toque é do whileTap: a classe `active:scale-97` sairia somando com ele, e o\n  // `transform` sai da lista de transition (senão o CSS transiciona cada quadro que o Motion grava\n  // e o toque chega atrasado). Com asChild nada disso: é só CSS, como em `off`.\n  const classes = cn(\n    buttonVariants({ variant, size, iconOnly, fullWidth }),\n    on &&\n      !asChild &&\n      'transition-[color,background-color,border-color,box-shadow] active:scale-100',\n    className,\n  )\n  const code = resolveCatalogCode('Button', { variant: variant ?? 'primary' })\n\n  if (asChild) {\n    return (\n      <Slot.Root ref={ref} data-rendra={code} className={classes} {...props}>\n        {children}\n      </Slot.Root>\n    )\n  }\n\n  // Ícone dentro do botão segue o tamanho do próprio botão (sm/md -> sm, lg -> md, como o\n  // [&_svg]:size-icon-* de buttonVariants já fazia com o Loader2 solto).\n  const leading = loading ? <Spinner size={size === 'lg' ? 'md' : 'sm'} /> : icon\n  if (on) {\n    return (\n      <MotionButton\n        ref={ref}\n        type={type}\n        data-rendra={code}\n        className={classes}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {leading}\n        {iconOnly ? (loading ? null : children) : children}\n        {!iconOnly && iconRight}\n      </MotionButton>\n    )\n  }\n  return (\n    <button\n      ref={ref}\n      type={type}\n      data-rendra={code}\n      className={classes}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      {leading}\n      {iconOnly ? (loading ? null : children) : children}\n      {!iconOnly && iconRight}\n    </button>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"button-BcCBrlnt.js","names":[],"sources":["../src/components/ui/spinner.tsx","../src/lib/motion/native-events.ts","../src/components/ui/button.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react'\nimport { usePrefersReducedMotion } from '@/hooks/use-reduced-motion'\nimport { cn } from '@/lib/cn'\n\n/*\n * Indicador de carregamento único do sistema (A17 do plano da v2). Substitui qualquer\n * `Loader2 animate-spin` solto em Button, Input e Select. Sem label é decorativo\n * (aria-hidden); com label, anuncia o carregamento a quem usa leitor de tela. Para de girar\n * quando o sistema pede menos movimento.\n */\n\nexport interface SpinnerProps {\n  size?: 'sm' | 'md' | 'lg'\n  /** Nome do que está carregando. Vazio (padrão): decorativo, sem anúncio de leitor de tela. */\n  label?: string\n  className?: string\n}\n\nconst sizeClass: Record<NonNullable<SpinnerProps['size']>, string> = {\n  sm: 'size-icon-sm',\n  md: 'size-icon-md',\n  lg: 'size-icon-lg',\n}\n\nexport function Spinner({ size = 'md', label, className }: SpinnerProps) {\n  const reduced = usePrefersReducedMotion()\n  const icon = (\n    <Loader2 aria-hidden className={cn(sizeClass[size], reduced ? '' : 'animate-spin')} />\n  )\n\n  if (!label) {\n    return (\n      <span data-rendra=\"SPIN-001\" aria-hidden className={cn('inline-flex', className)}>\n        {icon}\n      </span>\n    )\n  }\n\n  return (\n    <span\n      data-rendra=\"SPIN-001\"\n      role=\"status\"\n      className={cn('inline-flex items-center gap-2', className)}\n    >\n      {icon}\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  )\n}\n","/*\n * O Motion toma `onDrag`, `onDragStart`, `onDragEnd` e `onAnimationStart` para os gestos e\n * animações dele: tira essas props do DOM e as tipa com outra assinatura. Em `m.button` e\n * `m.li`, o consumidor que passa o evento nativo (HTML5 drag, animationstart do CSS) o perderia.\n * Estes ajudantes separam essas chaves das props e as ligam como ouvintes nativos no elemento.\n */\n\nconst NATIVE_EVENTS = {\n  onDrag: 'drag',\n  onDragStart: 'dragstart',\n  onDragEnd: 'dragend',\n  onAnimationStart: 'animationstart',\n} as const\n\ntype NativeKey = keyof typeof NATIVE_EVENTS\ntype Handler = ((event: never) => void) | undefined\n\n/** Separa as quatro chaves em conflito; o resto segue para o elemento do Motion. */\nexport function splitNativeEvents<P extends object>(props: P) {\n  const native: Partial<Record<NativeKey, Handler>> = {}\n  const rest: Record<string, unknown> = {}\n  for (const [key, value] of Object.entries(props)) {\n    if (key in NATIVE_EVENTS) native[key as NativeKey] = value as Handler\n    else rest[key] = value\n  }\n  return { native, rest: rest as Omit<P, NativeKey> }\n}\n\n/** Liga os manipuladores como ouvintes nativos. Devolve a função que os remove. */\nexport function bindNativeEvents(el: HTMLElement, native: Partial<Record<NativeKey, Handler>>) {\n  const bound: [string, EventListener][] = []\n  for (const [key, type] of Object.entries(NATIVE_EVENTS)) {\n    const handler = native[key as NativeKey]\n    if (!handler) continue\n    const listener = ((event: Event) => handler(event as never)) as EventListener\n    el.addEventListener(type, listener)\n    bound.push([type, listener])\n  }\n  return () => bound.forEach(([type, listener]) => el.removeEventListener(type, listener))\n}\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react'\nimport { resolveCatalogCode } from '@/catalog/components'\nimport { Spinner } from '@/components/ui/spinner'\nimport { cn } from '@/lib/cn'\nimport { useMotionMode, useMotionOn, useMotionPresets } from '@/lib/motion'\nimport { bindNativeEvents, splitNativeEvents } from '@/lib/motion/native-events'\n\n/**\n * Botão único do sistema. Variantes, tamanho, ícone, só ícone, carregamento e\n * largura total são props: nunca crie outro arquivo de botão.\n * Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.\n */\nexport const buttonVariants = cva(\n  'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-(--rendra-duration-press) ease-out select-none active:scale-97 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        // Hover troca para a cor de hover da marca e eleva um nível; pressionar comprime.\n        primary:\n          'bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover hover:text-primary-hover-foreground hover:shadow-md active:bg-primary-hover active:text-primary-hover-foreground active:shadow-sm',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary-hover hover:text-secondary-hover-foreground hover:shadow-md active:bg-secondary-hover active:text-secondary-hover-foreground active:shadow-sm',\n        outline:\n          'border border-input bg-card text-foreground hover:border-primary hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n        // Transparentes: no hover, assumem a cor primária do template.\n        ghost:\n          'text-foreground hover:bg-primary-soft hover:text-primary-soft-foreground active:bg-primary-soft',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover hover:shadow-md active:bg-destructive-hover active:shadow-sm',\n        link: 'min-h-touch min-w-touch text-primary-text underline-offset-4 hover:text-primary-hover hover:underline md:min-h-0 md:min-w-0',\n      },\n      size: {\n        sm: 'h-control-sm px-3 text-sm [&_svg]:size-icon-sm',\n        md: 'h-control-md px-4 text-sm [&_svg]:size-icon-sm',\n        lg: 'h-control-lg px-6 text-base [&_svg]:size-icon-md',\n      },\n      iconOnly: { true: 'px-0', false: '' },\n      fullWidth: { true: 'w-full', false: '' },\n    },\n    compoundVariants: [\n      { iconOnly: true, size: 'sm', className: 'w-control-sm' },\n      { iconOnly: true, size: 'md', className: 'w-control-md' },\n      { iconOnly: true, size: 'lg', className: 'w-control-lg' },\n      { variant: 'link', className: 'h-auto px-0' },\n    ],\n    defaultVariants: { variant: 'primary', size: 'md', iconOnly: false, fullWidth: false },\n  },\n)\n\ntype Variants = VariantProps<typeof buttonVariants>\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<Variants, 'iconOnly' | 'fullWidth'> {\n  /** Ícone à esquerda do texto (ou o próprio conteúdo, com iconOnly). */\n  icon?: ReactNode\n  /** Ícone à direita do texto. */\n  iconRight?: ReactNode\n  /** Botão só com ícone: quadrado, e aria-label passa a ser obrigatório. */\n  iconOnly?: boolean\n  /** Mostra indicador, bloqueia cliques e marca aria-busy. */\n  loading?: boolean\n  /** Ocupa toda a largura do contêiner. */\n  fullWidth?: boolean\n  /** Renderiza o filho (ex.: <Link>) com a aparência de botão. */\n  asChild?: boolean\n}\n\ntype MotionButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {\n  children: ReactNode\n}\n\n/**\n * O botão de `on`: `m.button` com toque discreto (whileTap). Os eventos que o Motion toma\n * (`onDrag*` e `onAnimationStart`) saem das props dele e viram ouvintes nativos no elemento,\n * então o consumidor continua recebendo o evento. Só existe em `on`; por isso os hooks de motion\n * moram aqui e o `off` não paga nada.\n */\nconst MotionButton = forwardRef<HTMLButtonElement, MotionButtonProps>(\n  function MotionButton(props, ref) {\n    const { m } = useMotionOn()\n    const presets = useMotionPresets()\n    const { native, rest } = splitNativeEvents(props)\n    const attach = (el: HTMLButtonElement | null) => {\n      assignRef(ref, el)\n      if (!el) return\n      const unbind = bindNativeEvents(el, native)\n      return () => {\n        unbind()\n        assignRef(ref, null)\n      }\n    }\n    return (\n      <m.button\n        ref={attach}\n        whileTap={presets.press.whileTap}\n        transition={presets.press.transition}\n        {...rest}\n      />\n    )\n  },\n)\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n  if (typeof ref === 'function') ref(value)\n  else if (ref) ref.current = value\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    icon,\n    iconRight,\n    iconOnly = false,\n    loading = false,\n    fullWidth = false,\n    asChild = false,\n    disabled,\n    type = 'button',\n    children,\n    ...props\n  },\n  ref,\n) {\n  if (import.meta.env.DEV && iconOnly && !props['aria-label']) {\n    console.warn('Button com iconOnly precisa de aria-label.')\n  }\n  const on = useMotionMode() === 'on'\n  // Em `on` o toque é do whileTap: a classe `active:scale-97` sairia somando com ele, e o\n  // `transform` sai da lista de transition (senão o CSS transiciona cada quadro que o Motion grava\n  // e o toque chega atrasado). Com asChild nada disso: é só CSS, como em `off`.\n  const classes = cn(\n    buttonVariants({ variant, size, iconOnly, fullWidth }),\n    on &&\n      !asChild &&\n      'transition-[color,background-color,border-color,box-shadow] active:scale-100',\n    className,\n  )\n  const code = resolveCatalogCode('Button', { variant: variant ?? 'primary' })\n\n  if (asChild) {\n    return (\n      <Slot.Root ref={ref} data-rendra={code} className={classes} {...props}>\n        {children}\n      </Slot.Root>\n    )\n  }\n\n  // Ícone dentro do botão segue o tamanho do próprio botão (sm/md -> sm, lg -> md, como o\n  // [&_svg]:size-icon-* de buttonVariants já fazia com o Loader2 solto).\n  const leading = loading ? <Spinner size={size === 'lg' ? 'md' : 'sm'} /> : icon\n  if (on) {\n    return (\n      <MotionButton\n        ref={ref}\n        type={type}\n        data-rendra={code}\n        className={classes}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {leading}\n        {iconOnly ? (loading ? null : children) : children}\n        {!iconOnly && iconRight}\n      </MotionButton>\n    )\n  }\n  return (\n    <button\n      ref={ref}\n      type={type}\n      data-rendra={code}\n      className={classes}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      {leading}\n      {iconOnly ? (loading ? null : children) : children}\n      {!iconOnly && iconRight}\n    </button>\n  )\n})\n"],"mappings":"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"}

package/dist/chart.js

@@ -1,10 +1,10 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as cn } from "./cn-BlJHpkDs.js";
-import { a as useMotionMode, i as useMotionLib, s as useRevealScope } from "./motion-context-PJPj6X4g.js";
-import { n as toCubicBezier, t as useMotionPresets } from "./use-motion-presets-I4StrsCi.js";
-import { p as resolveCatalogCode } from "./components-6RpoJ2Od.js";
-import { t as Button } from "./button-CrSlVIsY.js";
-import { n as useBreakpoint } from "./use-breakpoint-CM-yeDHJ.js";
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-CpdCvlkP.js";
+import { a as useMotionMode, i as useMotionLib, s as useRevealScope } from "./motion-context-DWFl2xRr.js";
+import { n as toCubicBezier, t as useMotionPresets } from "./use-motion-presets-CmMLBQLI.js";
+import { p as resolveCatalogCode } from "./components-Bus_Jh2R.js";
+import { t as Button } from "./button-BcCBrlnt.js";
+import { n as useBreakpoint } from "./use-breakpoint-BGmY3ir-.js";
 import { ArrowDown, BarChart3, List } from "lucide-react";
 import { useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/cli/auditar.js

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
 import { join, relative, sep } from "node:path";
 //#region src/cli/auditar.ts

package/dist/cli/codigos.js

@@ -1,5 +1,5 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as CATALOG } from "../components-6RpoJ2Od.js";
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as CATALOG } from "../components-Bus_Jh2R.js";
 //#region src/cli/codigos.ts
 /** Todo o catálogo, na ordem cadastrada. Sem duplicata: garantido por assertCatalogIntegrity. */
 function codigos() {

package/dist/cli/executar-auditar.js

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 import { EXTENSAO_VARRIDA, IDS_REGRAS_GENERICAS, auditLines, auditar, casaPrefixo, coletarArquivos, percorrer, relativoA } from "./auditar.js";
 import { formatHelp } from "./help.js";
 import { existsSync, readFileSync } from "node:fs";

package/dist/cli/help.js

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 //#region src/cli/help.ts
 /** Linha final de autoria, igual em toda saída publicável (CLI, banner do pacote). */
 var AUTHOR_LINE = "Rendra Design System, por Bruno Magalhaes: brunomagalhaes.me · instagram.com/brunomagalhaes.me";

package/dist/cli/trocar.js

@@ -1,5 +1,5 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { f as getCatalogEntry } from "../components-6RpoJ2Od.js";
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { f as getCatalogEntry } from "../components-Bus_Jh2R.js";
 import { existsSync, readFileSync, readdirSync, statSync, writeFileSync } from "node:fs";
 import { join, relative, sep } from "node:path";
 //#region src/cli/trocar.ts

package/dist/cli/typescript-loader.js

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 import { join } from "node:path";
 import { createRequire } from "node:module";
 import { pathToFileURL } from "node:url";

package/dist/{cn-BlJHpkDs.js → cn-CpdCvlkP.js}

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 //#region src/lib/cn.ts
@@ -19,4 +19,4 @@ function cn(...inputs) {
 //#endregion
 export { cn as t };
 
-//# sourceMappingURL=cn-BlJHpkDs.js.map
+//# sourceMappingURL=cn-CpdCvlkP.js.map

package/dist/{cn-BlJHpkDs.js.map → cn-CpdCvlkP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"cn-BlJHpkDs.js","names":[],"sources":["../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n// Ensina o tailwind-merge sobre os tokens próprios, para que text-xs e text-primary-text\n// não sejam tratados como conflito, e h-control-md substitua h-12 corretamente. text-label e\n// text-help são tamanho (rótulo e orientação do campo); text-label-foreground é cor.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', 'label', 'help'] }],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;AAMA,IAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,aAAa,EACX,aAAa,CAAC,EAAE,MAAM;CAAC;CAAM;CAAM;CAAQ;CAAM;CAAM;CAAO;CAAO;CAAS;AAAM,EAAE,CAAC,EACzF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}
+{"version":3,"file":"cn-CpdCvlkP.js","names":[],"sources":["../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\n// Ensina o tailwind-merge sobre os tokens próprios, para que text-xs e text-primary-text\n// não sejam tratados como conflito, e h-control-md substitua h-12 corretamente. text-label e\n// text-help são tamanho (rótulo e orientação do campo); text-label-foreground é cor.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', 'label', 'help'] }],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;AAMA,IAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,aAAa,EACX,aAAa,CAAC,EAAE,MAAM;CAAC;CAAM;CAAM;CAAQ;CAAM;CAAM;CAAO;CAAO;CAAS;AAAM,EAAE,CAAC,EACzF,EACF,EACF,CAAC;AAED,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}

package/dist/{components-6RpoJ2Od.js → components-Bus_Jh2R.js}

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 //#region src/catalog/components.ts
 /** Formato do código: de 3 a 4 letras maiúsculas, hífen, três dígitos. */
 var COMPONENT_CODE_PATTERN = /^[A-Z]{3,4}-\d{3}$/;
@@ -9,7 +9,10 @@ var COMPONENT_CODE_PATTERN = /^[A-Z]{3,4}-\d{3}$/;
 var CATALOG_EXCLUDED_FILES = [
 	"components/ui/overlay-shell.tsx",
 	"components/ui/picker-panel.tsx",
-	"components/ui/sortable-handle.tsx"
+	"components/ui/sortable-handle.tsx",
+	"components/ui/flow-sidebar.tsx",
+	"components/ui/flow-config-panels.tsx",
+	"components/ui/flow-simulation-panel.tsx"
 ];
 var CATALOG = [
 	{
@@ -709,7 +712,7 @@ var CATALOG = [
 		component: "FlowEditor",
 		file: "components/ui/flow-editor.tsx",
 		variantProps: {},
-		whenToUse: "Para montar, ligar, validar e testar um fluxo de automação (gatilho, ação, condição, espera e fim)."
+		whenToUse: "Para montar, ligar, validar e testar um fluxo de automação (gatilhos, mensagens, condição com várias regras, espera, webhooks e tarefa)."
 	},
 	{
 		code: "FLX-002",
@@ -830,4 +833,4 @@ function assertCatalogIntegrity() {
 //#endregion
 export { catalogByComponent as a, findComponentsWithoutDefault as c, findPresetCollisions as d, getCatalogEntry as f, assertCatalogIntegrity as i, findDuplicateCodes as l, CATALOG_EXCLUDED_FILES as n, filesMissingCatalogEntry as o, resolveCatalogCode as p, COMPONENT_CODE_PATTERN as r, findComponentsWithMultipleDefaults as s, CATALOG as t, findInvalidFormatCodes as u };
 
-//# sourceMappingURL=components-6RpoJ2Od.js.map
+//# sourceMappingURL=components-Bus_Jh2R.js.map

package/dist/components-Bus_Jh2R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-Bus_Jh2R.js","names":[],"sources":["../src/catalog/components.ts"],"sourcesContent":["/**\n * Catálogo de códigos de componente (etapa 1.2.0-alpha.1 do plano da v2).\n *\n * Cada componente de `src/components/ui` (menos os internos `overlay-shell` e\n * `picker-panel`, e menos os arquivos de teste) tem ao menos um código aqui. Uma variante\n * visual relevante (a prop que muda o formato do componente, não tom nem tamanho) ganha o\n * seu próprio código, numerado 001, 002... na ordem em que aparece neste arquivo.\n *\n * O código é o que o cliente escolhe no `docs/BRIEFING_MODELO.md` (\"Componentes e\n * variantes\") e o que aparece na vitrine (`/componentes`), no `data-rendra` do elemento\n * raiz de cada componente e no `registry.json` (`meta.codes`).\n *\n * Formato: `^[A-Z]{3,4}-\\d{3}$` (ex.: \"ABA-001\", \"BTN-006\"). Nunca editar um código depois\n * de publicado: ele é o identificador estável de uma variante.\n */\n\nexport interface ComponentCatalogEntry {\n  /** Formato ^[A-Z]{3,4}-\\d{3}$, ex.: \"ABA-001\". Único no catálogo inteiro. */\n  code: string\n  /** Nome em português do Brasil, ex.: \"Abas em linha\". */\n  name: string\n  /** Nome do componente React, ex.: \"Tabs\". */\n  component: string\n  /** Caminho relativo a partir de src/, ex.: \"components/ui/tabs.tsx\". */\n  file: string\n  /** Props (nome: valor) que definem esta variante especificamente. */\n  variantProps: Record<string, string | number | boolean>\n  /** Frase curta de quando usar esta variante, para o BRIEFING_MODELO. */\n  whenToUse: string\n  /**\n   * Esta é a variante que o componente usa quando a prop não é passada (o valor padrão de\n   * `variantProps` no próprio componente React, ex.: `variant = 'line'` em `tabs.tsx`)? No\n   * máximo uma por componente (nenhuma, para o componente sem variante ou sem um padrão real,\n   * como `Chart`, cuja prop `type` é obrigatória); um componente com mais de uma variante tem\n   * exatamente uma marcada `true` (teste de integridade, `assertCatalogIntegrity`). Usada por\n   * `rendra trocar`: um elemento sem a prop conta como esta variante, e trocar para uma\n   * variante `isDefault` remove a prop em vez de escrever o valor por extenso.\n   */\n  isDefault?: true\n}\n\n/** Formato do código: de 3 a 4 letras maiúsculas, hífen, três dígitos. */\nexport const COMPONENT_CODE_PATTERN = /^[A-Z]{3,4}-\\d{3}$/\n\n/**\n * Arquivos de `src/components/ui` que não entram no catálogo: são peças internas, sem uso\n * direto em tela (nunca aparecem sozinhos numa tela, só dentro de outro componente).\n */\nexport const CATALOG_EXCLUDED_FILES = [\n  'components/ui/overlay-shell.tsx',\n  'components/ui/picker-panel.tsx',\n  'components/ui/sortable-handle.tsx',\n  // peças internas do FlowEditor (barra lateral, configuração, teste e validação)\n  'components/ui/flow-sidebar.tsx',\n  'components/ui/flow-config-panels.tsx',\n  'components/ui/flow-simulation-panel.tsx',\n]\n\nexport const CATALOG: ComponentCatalogEntry[] = [\n  // ---------------------------------------------------------------- accordion\n  {\n    code: 'ACRN-001',\n    name: 'Acordeão',\n    component: 'Accordion',\n    file: 'components/ui/accordion.tsx',\n    variantProps: {},\n    whenToUse: 'Para agrupar conteúdo que a pessoa abre um de cada vez, como perguntas frequentes.',\n  },\n  // ---------------------------------------------------------------- action-bar\n  {\n    code: 'ACB-001',\n    name: 'Barra de ação',\n    component: 'ActionBar',\n    file: 'components/ui/action-bar.tsx',\n    variantProps: {},\n    whenToUse:\n      'Para os botões de salvar, cancelar e ações extras de um formulário, drawer ou modal.',\n  },\n  // ---------------------------------------------------------------- alert\n  {\n    code: 'ALRT-001',\n    name: 'Alerta',\n    component: 'Alert',\n    file: 'components/ui/alert.tsx',\n    variantProps: {},\n    whenToUse: 'Para um aviso de sucesso, erro, atenção ou informação dentro do corpo da tela.',\n  },\n  // ---------------------------------------------------------------- avatar\n  {\n    code: 'AVT-001',\n    name: 'Avatar',\n    component: 'Avatar',\n    file: 'components/ui/avatar.tsx',\n    variantProps: {},\n    whenToUse: 'Para a foto ou as iniciais de uma pessoa.',\n  },\n  {\n    code: 'AVT-002',\n    name: 'Avatar em grupo',\n    component: 'AvatarGroup',\n    file: 'components/ui/avatar.tsx',\n    variantProps: {},\n    whenToUse: 'Para mostrar várias pessoas sobrepostas, com contador do excedente.',\n  },\n  // ---------------------------------------------------------------- badge\n  {\n    code: 'BDG-001',\n    name: 'Selo',\n    component: 'Badge',\n    file: 'components/ui/badge.tsx',\n    variantProps: {},\n    whenToUse: 'Para marcar situação, categoria ou contagem curta ao lado de um texto.',\n  },\n  // ---------------------------------------------------------------- brand-feedback-icon\n  {\n    code: 'BFI-001',\n    name: 'Ícone de feedback da marca',\n    component: 'BrandFeedbackIcon',\n    file: 'components/ui/brand-feedback-icon.tsx',\n    variantProps: {},\n    whenToUse:\n      'Para o símbolo da marca tingido pela cor semântica em toast, alerta e telas de status.',\n  },\n  // ---------------------------------------------------------------- brand-logo\n  {\n    code: 'LOGO-001',\n    name: 'Logotipo',\n    component: 'BrandLogo',\n    file: 'components/ui/brand-logo.tsx',\n    variantProps: {},\n    whenToUse: 'Para o logotipo da marca na sidebar, no header ou no painel do login.',\n  },\n  // ---------------------------------------------------------------- breadcrumb\n  {\n    code: 'BRD-001',\n    name: 'Trilha responsiva',\n    component: 'Breadcrumb',\n    file: 'components/ui/breadcrumb.tsx',\n    variantProps: { variant: 'responsive' },\n    whenToUse: 'Dentro do corpo da página: trilha no desktop e botão voltar no celular.',\n    isDefault: true,\n  },\n  {\n    code: 'BRD-002',\n    name: 'Trilha em texto',\n    component: 'Breadcrumb',\n    file: 'components/ui/breadcrumb.tsx',\n    variantProps: { variant: 'trail' },\n    whenToUse: 'No header do AppShell, abaixo do título, sempre em texto pequeno.',\n  },\n  // ---------------------------------------------------------------- button\n  {\n    code: 'BTN-001',\n    name: 'Botão primário',\n    component: 'Button',\n    file: 'components/ui/button.tsx',\n    variantProps: { variant: 'primary' },\n    whenToUse: 'Para a ação principal da tela, do formulário ou da barra de ações.',\n    isDefault: true,\n  },\n  {\n    code: 'BTN-002',\n    name: 'Botão secundário',\n    component: 'Button',\n    file: 'components/ui/button.tsx',\n    variantProps: { variant: 'secondary' },\n    whenToUse:\n      'Para uma segunda cor de destaque da marca, quando a primária já está em uso na tela.',\n  },\n  {\n    code: 'BTN-003',\n    name: 'Botão contornado',\n    component: 'Button',\n    file: 'components/ui/button.tsx',\n    variantProps: { variant: 'outline' },\n    whenToUse: 'Para a ação de cancelar ou para ações secundárias ao lado de um botão primário.',\n  },\n  {\n    code: 'BTN-004',\n    name: 'Botão fantasma',\n    component: 'Button',\n    file: 'components/ui/button.tsx',\n    variantProps: { variant: 'ghost' },\n    whenToUse: 'Para ações discretas dentro de cards, linhas de tabela e barras de ferramenta.',\n  },\n  {\n    code: 'BTN-005',\n    name: 'Botão destrutivo',\n    component: 'Button',\n    file: 'components/ui/button.tsx',\n    variantProps: { variant: 'destructive' },\n    whenToUse: 'Para uma ação irreversível, como excluir ou encerrar.',\n  },\n  {\n    code: 'BTN-006',\n    name: 'Botão link',\n    component: 'Button',\n    file: 'components/ui/button.tsx',\n    variantProps: { variant: 'link' },\n    whenToUse: 'Para uma ação com aparência de link de texto, dentro de uma frase ou de um rodapé.',\n  },\n  // ---------------------------------------------------------------- button-group\n  {\n    code: 'BTNG-001',\n    name: 'Grupo de botões',\n    component: 'ButtonGroup',\n    file: 'components/ui/button-group.tsx',\n    variantProps: { orientation: 'horizontal' },\n    whenToUse: 'Para botões encostados ou um controle segmentado de escolha única.',\n    isDefault: true,\n  },\n  {\n    code: 'BTNG-002',\n    name: 'Grupo de botões vertical',\n    component: 'ButtonGroup',\n    file: 'components/ui/button-group.tsx',\n    variantProps: { orientation: 'vertical' },\n    whenToUse: 'Para botões de ação empilhados, na largura do grupo, com as bordas unidas.',\n  },\n  {\n    code: 'BTNG-003',\n    name: 'Grupo de botões responsivo',\n    component: 'ButtonGroup',\n    file: 'components/ui/button-group.tsx',\n    variantProps: { orientation: 'responsive' },\n    whenToUse: 'Para botões que empilham no celular e ficam lado a lado a partir do tablet.',\n  },\n  // ---------------------------------------------------------------- calendar\n  {\n    code: 'CAL-001',\n    name: 'Calendário',\n    component: 'Calendar',\n    file: 'components/ui/calendar.tsx',\n    variantProps: {},\n    whenToUse: 'Para agenda com visão de mês, semana, dia ou lista de eventos.',\n  },\n  // ---------------------------------------------------------------- card\n  {\n    code: 'CARD-001',\n    name: 'Card',\n    component: 'Card',\n    file: 'components/ui/card.tsx',\n    variantProps: {},\n    whenToUse: 'Para agrupar conteúdo de página com borda e sem sombra pesada.',\n  },\n  // ---------------------------------------------------------------- chart\n  {\n    code: 'CHT-001',\n    name: 'Gráfico de linha',\n    component: 'Chart',\n    file: 'components/ui/chart.tsx',\n    variantProps: { type: 'line' },\n    whenToUse: 'Para mostrar a evolução de um valor ao longo do tempo.',\n    // A prop `type` do Chart é obrigatória (sem valor padrão no componente): marcado aqui só\n    // para satisfazer o teste de integridade (um padrão por componente com mais de uma\n    // variante); \"rendra trocar\" nunca encontra um <Chart> sem `type`, porque não compila.\n    isDefault: true,\n  },\n  {\n    code: 'CHT-002',\n    name: 'Gráfico de barras',\n    component: 'Chart',\n    file: 'components/ui/chart.tsx',\n    variantProps: { type: 'bar' },\n    whenToUse: 'Para comparar valores entre categorias.',\n  },\n  {\n    code: 'CHT-003',\n    name: 'Gráfico de área',\n    component: 'Chart',\n    file: 'components/ui/chart.tsx',\n    variantProps: { type: 'area' },\n    whenToUse: 'Para mostrar volume acumulado ao longo do tempo.',\n  },\n  {\n    code: 'CHT-004',\n    name: 'Gráfico de pizza',\n    component: 'Chart',\n    file: 'components/ui/chart.tsx',\n    variantProps: { type: 'pie' },\n    whenToUse: 'Para mostrar a proporção de poucas categorias dentro de um total.',\n  },\n  {\n    code: 'CHT-005',\n    name: 'Gráfico combinado',\n    component: 'Chart',\n    file: 'components/ui/chart.tsx',\n    variantProps: { type: 'combo' },\n    whenToUse: 'Para juntar barras e linha no mesmo gráfico, como receita e meta.',\n  },\n  {\n    code: 'CHT-006',\n    name: 'Velocímetro de meta',\n    component: 'Chart',\n    file: 'components/ui/chart.tsx',\n    variantProps: { type: 'gauge' },\n    whenToUse: 'Para o percentual de uma meta batida, com faixas de cor.',\n  },\n  {\n    code: 'CHT-007',\n    name: 'Funil',\n    component: 'Chart',\n    file: 'components/ui/chart.tsx',\n    variantProps: { type: 'funnel' },\n    whenToUse: 'Para etapas que afunilam, com a conversão entre elas.',\n  },\n  // ---------------------------------------------------------------- chat\n  {\n    code: 'CHAT-001',\n    name: 'Lista de conversas',\n    component: 'ConversationList',\n    file: 'components/ui/chat.tsx',\n    variantProps: {},\n    whenToUse: 'Para a coluna de conversas do atendimento.',\n  },\n  {\n    code: 'CHAT-002',\n    name: 'Linha do tempo da conversa',\n    component: 'ChatThread',\n    file: 'components/ui/chat.tsx',\n    variantProps: {},\n    whenToUse: 'Para o histórico de mensagens de uma conversa aberta.',\n  },\n  {\n    code: 'CHAT-003',\n    name: 'Campo de mensagem',\n    component: 'ChatComposer',\n    file: 'components/ui/chat.tsx',\n    variantProps: {},\n    whenToUse: 'Para escrever, anexar e enviar uma mensagem no atendimento.',\n  },\n  // ---------------------------------------------------------------- checkbox\n  {\n    code: 'CHK-001',\n    name: 'Caixa de seleção',\n    component: 'Checkbox',\n    file: 'components/ui/checkbox.tsx',\n    variantProps: {},\n    whenToUse: 'Para uma escolha independente, ligada ou desligada (inclusive indeterminada).',\n  },\n  {\n    code: 'CHK-002',\n    name: 'Grupo de caixas de seleção',\n    component: 'CheckboxGroup',\n    file: 'components/ui/checkbox.tsx',\n    variantProps: {},\n    whenToUse: 'Para uma lista de opções fixas com \"selecionar todos\".',\n  },\n  // ---------------------------------------------------------------- checklist\n  {\n    code: 'CKLT-001',\n    name: 'Lista de verificação',\n    component: 'Checklist',\n    file: 'components/ui/checklist.tsx',\n    variantProps: {},\n    whenToUse:\n      'Para uma lista de itens que a pessoa cria, renomeia, marca e remove, tudo por teclado.',\n  },\n  // ---------------------------------------------------------------- color-picker\n  {\n    code: 'COR-001',\n    name: 'Seletor de cor',\n    component: 'ColorPicker',\n    file: 'components/ui/color-picker.tsx',\n    variantProps: {},\n    whenToUse: 'Para escolher uma cor entre amostras da marca ou uma cor livre por hexadecimal.',\n  },\n  // ---------------------------------------------------------------- data-toolbar\n  {\n    code: 'DTB-001',\n    name: 'Barra de ferramentas da listagem',\n    component: 'DataToolbar',\n    file: 'components/ui/data-toolbar.tsx',\n    variantProps: {},\n    whenToUse: 'Para busca, filtros, colunas e a ação Novo, sempre dentro do card da tabela.',\n  },\n  // ---------------------------------------------------------------- date-picker\n  {\n    code: 'DTP-001',\n    name: 'Seletor de data',\n    component: 'DatePicker',\n    file: 'components/ui/date-picker.tsx',\n    variantProps: {},\n    whenToUse: 'Para escolher uma data, um período ou um horário.',\n  },\n  // ---------------------------------------------------------------- document-viewer\n  {\n    code: 'DOC-001',\n    name: 'Visualizador de documentos',\n    component: 'DocumentViewer',\n    file: 'components/ui/document-viewer.tsx',\n    variantProps: {},\n    whenToUse: 'Para abrir um PDF (contrato, nota fiscal, comprovante) sem sair da tela.',\n  },\n  // ---------------------------------------------------------------- drawer\n  {\n    code: 'GAV-001',\n    name: 'Gaveta',\n    component: 'Drawer',\n    file: 'components/ui/drawer.tsx',\n    variantProps: {},\n    whenToUse: 'Para formulário ou detalhe de volume médio, até cerca de 12 campos.',\n  },\n  // ---------------------------------------------------------------- dropdown-menu\n  {\n    code: 'DDM-001',\n    name: 'Menu suspenso',\n    component: 'DropdownMenuContent',\n    file: 'components/ui/dropdown-menu.tsx',\n    variantProps: {},\n    whenToUse: 'Para uma lista de ações ou opções que abre a partir de um botão ou de um item.',\n  },\n  // ---------------------------------------------------------------- empty-state\n  {\n    code: 'VAZ-001',\n    name: 'Estado vazio',\n    component: 'EmptyState',\n    file: 'components/ui/empty-state.tsx',\n    variantProps: {},\n    whenToUse: 'Para quando uma lista, busca ou seção não tem nenhum dado ainda.',\n  },\n  // ---------------------------------------------------------------- error-page\n  {\n    code: 'ERRO-001',\n    name: 'Tela de erro',\n    component: 'ErrorPage',\n    file: 'components/ui/error-page.tsx',\n    variantProps: {},\n    whenToUse: 'Para página não encontrada (404) ou falha do lado do servidor (500).',\n  },\n  // ---------------------------------------------------------------- field\n  {\n    code: 'FLD-001',\n    name: 'Campo com rótulo e ajuda',\n    component: 'Field',\n    file: 'components/ui/field.tsx',\n    variantProps: {},\n    whenToUse: 'Para envolver qualquer controle de formulário com rótulo, ajuda e erro.',\n  },\n  {\n    code: 'FLD-002',\n    name: 'Rótulo',\n    component: 'Label',\n    file: 'components/ui/field.tsx',\n    variantProps: {},\n    whenToUse: 'Para um rótulo avulso, quando o Field completo não se aplica.',\n  },\n  // ---------------------------------------------------------------- form\n  {\n    code: 'FORM-001',\n    name: 'Formulário',\n    component: 'Form',\n    file: 'components/ui/form.tsx',\n    variantProps: {},\n    whenToUse: 'Para envolver um formulário inteiro, ligado ao React Hook Form.',\n  },\n  {\n    code: 'FORM-002',\n    name: 'Seção de formulário',\n    component: 'FormSection',\n    file: 'components/ui/form.tsx',\n    variantProps: {},\n    whenToUse: 'Para agrupar campos relacionados dentro de um card com título.',\n  },\n  // ---------------------------------------------------------------- image-cropper\n  {\n    code: 'CROP-001',\n    name: 'Recorte de imagem',\n    component: 'ImageCropper',\n    file: 'components/ui/image-cropper.tsx',\n    variantProps: {},\n    whenToUse:\n      'Para recortar uma imagem numa proporção fixa antes de enviar (foto de perfil, capa).',\n  },\n  // ---------------------------------------------------------------- image-viewer\n  {\n    code: 'IMG-001',\n    name: 'Visualizador de imagens',\n    component: 'ImageViewer',\n    file: 'components/ui/image-viewer.tsx',\n    variantProps: {},\n    whenToUse: 'Para abrir uma ou mais imagens em tela cheia, com legenda e navegação.',\n  },\n  // ---------------------------------------------------------------- info-hint\n  {\n    code: 'INFO-001',\n    name: 'Dica de informação',\n    component: 'InfoHint',\n    file: 'components/ui/info-hint.tsx',\n    variantProps: {},\n    whenToUse: 'Para texto orientativo que não tem um título de tela, card ou seção ao lado.',\n  },\n  // ---------------------------------------------------------------- input\n  {\n    code: 'CAMP-001',\n    name: 'Campo de texto',\n    component: 'Input',\n    file: 'components/ui/input.tsx',\n    variantProps: {},\n    whenToUse: 'Para texto, número, senha, telefone, moeda ou qualquer valor de uma linha.',\n  },\n  // ---------------------------------------------------------------- kanban\n  {\n    code: 'KANB-001',\n    name: 'Quadro kanban',\n    component: 'Kanban',\n    file: 'components/ui/kanban.tsx',\n    // variantProps fica vazio de propósito: a diferença para KANB-002 é a prop `dropTargets`\n    // (um array de destinos de arraste, cada um com `confirm` também não literal), não um\n    // literal de string/número/booleano, e o `rendra trocar` não tem como inventar um array,\n    // então ele recusa a troca com uma mensagem clara (\"sem prop que os distinga\"), e a\n    // variante certa fica documentada aqui.\n    variantProps: {},\n    whenToUse:\n      'Para um funil de etapas com cartões que se movem entre colunas, com status por cor ' +\n      '(cadência da etapa e próxima atividade), valores empilhados no card e, com `toolbar`, ' +\n      'barra do quadro com busca, filtros, totais e Customizar.',\n    isDefault: true,\n  },\n  {\n    code: 'KANB-002',\n    name: 'Quadro kanban com destinos de arraste',\n    component: 'Kanban',\n    file: 'components/ui/kanban.tsx',\n    variantProps: { hasDropTargets: true },\n    whenToUse:\n      'Quando o card pode ir para uma ação além de outra coluna (ex.: Lixeira, Congelar, Perder, ' +\n      'Ganhar), mostrada num rodapé flutuante durante o arraste e no menu \"Mover para\", com ' +\n      'confirmação opcional por destino (e motivo, ao perder).',\n  },\n  // ---------------------------------------------------------------- list\n  {\n    code: 'LIST-001',\n    name: 'Lista',\n    component: 'List',\n    file: 'components/ui/list.tsx',\n    // variantProps fica vazio de propósito: a diferença para LIST-002 é a prop `onReorder`\n    // (uma função de callback), não um literal de string/número/booleano, e o `rendra trocar`\n    // não tem como inventar uma função, então ele recusa a troca com uma mensagem clara (\"sem\n    // prop que os distinga\"), e a variante certa fica documentada aqui.\n    variantProps: {},\n    whenToUse: 'Para linhas simples com início, título, descrição e fim, navegáveis ou não.',\n    isDefault: true,\n  },\n  {\n    code: 'LIST-002',\n    name: 'Lista reordenável',\n    component: 'List',\n    file: 'components/ui/list.tsx',\n    variantProps: { sortable: true },\n    whenToUse: 'Quando a pessoa pode mudar a ordem das linhas, por arraste ou pelas setas da alça.',\n  },\n  // ---------------------------------------------------------------- modal\n  {\n    code: 'MOD-001',\n    name: 'Modal de confirmação',\n    component: 'Modal',\n    file: 'components/ui/modal.tsx',\n    variantProps: { type: 'confirm' },\n    whenToUse:\n      'Para confirmar uma ação com uma principal e uma de cancelar; type=\"destructive\" usa o ' +\n      'mesmo código, porque só muda a cor.',\n    isDefault: true,\n  },\n  {\n    code: 'MOD-002',\n    name: 'Modal de formulário',\n    component: 'Modal',\n    file: 'components/ui/modal.tsx',\n    variantProps: { type: 'form' },\n    whenToUse: 'Para um formulário de até 3 campos simples, sem sair da tela atual.',\n  },\n  {\n    code: 'MOD-003',\n    name: 'Modal informativo',\n    component: 'Modal',\n    file: 'components/ui/modal.tsx',\n    variantProps: { type: 'info' },\n    whenToUse:\n      'Para só informar algo, sem decisão a tomar: um botão só, de largura total, que fecha o modal.',\n  },\n  // ---------------------------------------------------------------- otp-input\n  {\n    code: 'OTP-001',\n    name: 'Código de verificação',\n    component: 'OtpInput',\n    file: 'components/ui/otp-input.tsx',\n    variantProps: {},\n    whenToUse: 'Para confirmar um código enviado por SMS ou e-mail (2FA).',\n  },\n  // ---------------------------------------------------------------- pagination\n  {\n    code: 'PAG-001',\n    name: 'Paginação',\n    component: 'Pagination',\n    file: 'components/ui/pagination.tsx',\n    variantProps: {},\n    whenToUse: 'Para navegar entre páginas de uma listagem.',\n  },\n  // ---------------------------------------------------------------- popover\n  {\n    code: 'POP-001',\n    name: 'Popover',\n    component: 'PopoverContent',\n    file: 'components/ui/popover.tsx',\n    variantProps: {},\n    whenToUse: 'Para um painel curto que abre perto de um botão, como um filtro.',\n  },\n  // ---------------------------------------------------------------- progress\n  {\n    code: 'PROG-001',\n    name: 'Barra de progresso',\n    component: 'Progress',\n    file: 'components/ui/progress.tsx',\n    variantProps: {},\n    whenToUse: 'Para o andamento de uma tarefa ou de um envio.',\n  },\n  // ---------------------------------------------------------------- qr-code\n  {\n    code: 'QRC-001',\n    name: 'Código QR',\n    component: 'QrCode',\n    file: 'components/ui/qr-code.tsx',\n    variantProps: {},\n    whenToUse: 'Para gerar um código QR (link, código de acesso) sem depender de serviço externo.',\n  },\n  // ---------------------------------------------------------------- radio-group\n  {\n    code: 'RDO-001',\n    name: 'Opções em lista',\n    component: 'RadioGroup',\n    file: 'components/ui/radio-group.tsx',\n    variantProps: { variant: 'list' },\n    whenToUse: 'Para poucas opções simples, uma escolha só, em lista com bolinha e texto.',\n    isDefault: true,\n  },\n  {\n    code: 'RDO-002',\n    name: 'Opções em cartões',\n    component: 'RadioGroup',\n    file: 'components/ui/radio-group.tsx',\n    variantProps: { variant: 'cards' },\n    whenToUse: 'Para opções com ícone e descrição, quando cada uma merece mais destaque.',\n  },\n  // ---------------------------------------------------------------- rating\n  {\n    code: 'RTG-001',\n    name: 'Avaliação em estrelas',\n    component: 'Rating',\n    file: 'components/ui/rating.tsx',\n    variantProps: { variant: 'stars' },\n    whenToUse: 'Para uma nota rápida de satisfação, em estrelas.',\n    isDefault: true,\n  },\n  {\n    code: 'RTG-002',\n    name: 'Avaliação em escala',\n    component: 'Rating',\n    file: 'components/ui/rating.tsx',\n    variantProps: { variant: 'scale' },\n    whenToUse: 'Para uma nota de 0 a 10 (NPS e pesquisas parecidas), com rótulo nas pontas.',\n  },\n  // ---------------------------------------------------------------- rendra-credit\n  {\n    code: 'CRED-001',\n    name: 'Crédito Feito com Rendra',\n    component: 'RendraCredit',\n    file: 'components/ui/rendra-credit.tsx',\n    variantProps: {},\n    whenToUse:\n      'No rodapé da tela de login, discreto; pode ser removido (credit={false}) ou levado para ' +\n      'outro lugar visível, como uma tela Sobre.',\n  },\n  // ---------------------------------------------------------------- repeatable-field\n  {\n    code: 'REP-001',\n    name: 'Campo repetível',\n    component: 'RepeatableField',\n    file: 'components/ui/repeatable-field.tsx',\n    variantProps: {},\n    whenToUse:\n      'Para uma lista de campos do mesmo tipo (telefones, e-mails, endereços), com um principal.',\n  },\n  // ---------------------------------------------------------------- rich-text-editor\n  {\n    code: 'RTE-001',\n    name: 'Editor de texto rico',\n    component: 'RichTextEditor',\n    file: 'components/ui/rich-text-editor.tsx',\n    variantProps: {},\n    whenToUse: 'Para conteúdo com formatação, listas e imagens, como a descrição de um artigo.',\n  },\n  // ---------------------------------------------------------------- select\n  {\n    code: 'SEL-001',\n    name: 'Select',\n    component: 'Select',\n    file: 'components/ui/select.tsx',\n    variantProps: {},\n    whenToUse: 'Para escolher uma ou mais opções de uma lista, com ou sem busca.',\n  },\n  // ---------------------------------------------------------------- separator\n  {\n    code: 'SEP-001',\n    name: 'Separador',\n    component: 'Separator',\n    file: 'components/ui/separator.tsx',\n    variantProps: {},\n    whenToUse: 'Para dividir conteúdo dentro de um card, no lugar de um card dentro de card.',\n  },\n  // ---------------------------------------------------------------- skeleton\n  {\n    code: 'SKEL-001',\n    name: 'Esqueleto de carregamento',\n    component: 'Skeleton',\n    file: 'components/ui/skeleton.tsx',\n    variantProps: {},\n    whenToUse: 'Para o estado de carregamento, com a mesma estrutura do conteúdo final.',\n  },\n  // ---------------------------------------------------------------- slider\n  {\n    code: 'SLD-001',\n    name: 'Slider',\n    component: 'Slider',\n    file: 'components/ui/slider.tsx',\n    variantProps: {},\n    whenToUse: 'Para escolher um número ou uma faixa dentro de um intervalo, arrastando.',\n  },\n  // ---------------------------------------------------------------- spinner\n  {\n    code: 'SPIN-001',\n    name: 'Indicador de carregamento',\n    component: 'Spinner',\n    file: 'components/ui/spinner.tsx',\n    variantProps: {},\n    whenToUse:\n      'Para um carregamento breve dentro de um botão, campo ou lista, sem barra de progresso.',\n  },\n  // ---------------------------------------------------------------- stat-card\n  {\n    code: 'STAT-001',\n    name: 'Card de indicador',\n    component: 'StatCard',\n    file: 'components/ui/stat-card.tsx',\n    variantProps: {},\n    whenToUse: 'Para um número de destaque com variação, num painel ou dashboard.',\n  },\n  // ---------------------------------------------------------------- switch\n  {\n    code: 'SWT-001',\n    name: 'Switch',\n    component: 'Switch',\n    file: 'components/ui/switch.tsx',\n    variantProps: {},\n    whenToUse: 'Para ligar ou desligar uma opção com efeito imediato.',\n  },\n  // ---------------------------------------------------------------- table\n  {\n    code: 'TAB-001',\n    name: 'Tabela',\n    component: 'Table',\n    file: 'components/ui/table.tsx',\n    variantProps: {},\n    whenToUse: 'Para qualquer listagem de registros, com busca, filtros e paginação.',\n  },\n  // ---------------------------------------------------------------- tabs\n  {\n    code: 'ABA-001',\n    name: 'Abas em linha',\n    component: 'Tabs',\n    file: 'components/ui/tabs.tsx',\n    variantProps: { variant: 'line' },\n    whenToUse: 'Padrão para dividir o conteúdo de uma tela em seções, com sublinhado na aba ativa.',\n    isDefault: true,\n  },\n  {\n    code: 'ABA-002',\n    name: 'Abas em pílula',\n    component: 'Tabs',\n    file: 'components/ui/tabs.tsx',\n    variantProps: { variant: 'pill' },\n    whenToUse: 'Quando as abas precisam de mais destaque visual, como pílulas sobre fundo suave.',\n  },\n  // ---------------------------------------------------------------- textarea\n  {\n    code: 'TXT-001',\n    name: 'Área de texto',\n    component: 'Textarea',\n    file: 'components/ui/textarea.tsx',\n    variantProps: {},\n    whenToUse: 'Para texto longo, com contador de caracteres opcional.',\n  },\n  // ---------------------------------------------------------------- timeline\n  {\n    code: 'TLN-001',\n    name: 'Linha do tempo',\n    component: 'Timeline',\n    file: 'components/ui/timeline.tsx',\n    variantProps: {},\n    whenToUse: 'Para uma sequência de eventos em ordem, cada um com um tom semântico.',\n  },\n  // ---------------------------------------------------------------- toast\n  {\n    code: 'TST-001',\n    name: 'Toast',\n    component: 'toast',\n    file: 'components/ui/toast.tsx',\n    variantProps: {},\n    whenToUse: 'Para uma confirmação rápida depois de uma ação, sem interromper a tela.',\n  },\n  // ---------------------------------------------------------------- tooltip\n  {\n    code: 'TIP-001',\n    name: 'Tooltip',\n    component: 'Tooltip',\n    file: 'components/ui/tooltip.tsx',\n    variantProps: {},\n    whenToUse: 'Para informação complementar, nunca essencial, que aparece ao passar o mouse.',\n  },\n  // ---------------------------------------------------------------- upload\n  {\n    code: 'UPL-001',\n    name: 'Upload',\n    component: 'Upload',\n    file: 'components/ui/upload.tsx',\n    // A prop que distingue de UPL-002 é `layout` ('list' | 'gallery', padrão 'list'): declarar\n    // o valor padrão aqui (em vez de {}) é o que permite ao `rendra trocar` inserir\n    // layout=\"gallery\" num elemento sem a prop, ao trocar para UPL-002.\n    variantProps: { layout: 'list' },\n    whenToUse: 'Para arrastar e soltar ou escolher arquivos, com lista e progresso por arquivo.',\n    isDefault: true,\n  },\n  {\n    code: 'UPL-002',\n    name: 'Upload em galeria',\n    component: 'Upload',\n    file: 'components/ui/upload.tsx',\n    variantProps: { layout: 'gallery' },\n    whenToUse: 'Para upload de fotos e vídeos, com miniatura em vez de linha de lista.',\n  },\n  // ---------------------------------------------------------------- flow\n  {\n    code: 'FLX-001',\n    name: 'Editor de fluxo',\n    component: 'FlowEditor',\n    file: 'components/ui/flow-editor.tsx',\n    variantProps: {},\n    whenToUse:\n      'Para montar, ligar, validar e testar um fluxo de automação (gatilhos, mensagens, condição com várias regras, espera, webhooks e tarefa).',\n  },\n  {\n    code: 'FLX-002',\n    name: 'Visualizador de fluxo',\n    component: 'FlowViewer',\n    file: 'components/ui/flow-viewer.tsx',\n    variantProps: {},\n    whenToUse: 'Para mostrar um fluxo de automação só para ler, sem editar.',\n  },\n  // ---------------------------------------------------------------- widget-grid\n  {\n    code: 'WDG-001',\n    name: 'Grade de widgets',\n    component: 'WidgetGrid',\n    file: 'components/ui/widget-grid.tsx',\n    variantProps: {},\n    whenToUse: 'Para um painel com blocos que a pessoa pode arrastar e redimensionar.',\n  },\n  // ---------------------------------------------------------------- wizard\n  {\n    code: 'WIZ-001',\n    name: 'Wizard',\n    component: 'Wizard',\n    file: 'components/ui/wizard.tsx',\n    variantProps: {},\n    whenToUse: 'Para um cadastro longo dividido em etapas, com validação por etapa.',\n  },\n  {\n    code: 'WIZ-002',\n    name: 'Indicador de etapas',\n    component: 'Stepper',\n    file: 'components/ui/wizard.tsx',\n    variantProps: {},\n    whenToUse: 'Para mostrar o progresso em etapas por conta própria, sem o Wizard inteiro.',\n  },\n]\n\n/** Um código específico do catálogo (ex.: para montar a vitrine ou o registry). */\nexport function getCatalogEntry(code: string): ComponentCatalogEntry | undefined {\n  return CATALOG.find((entry) => entry.code === code)\n}\n\n/** Todos os códigos de um componente (ex.: as duas variantes do Tabs), na ordem cadastrada. */\nexport function catalogByComponent(component: string): ComponentCatalogEntry[] {\n  return CATALOG.filter((entry) => entry.component === component)\n}\n\n/**\n * Resolve o código de catálogo de um componente a partir das props que definem a variante.\n * Sem variante (um código só, ou nenhuma prop bate), devolve o primeiro código cadastrado\n * para o componente. Usado pelos próprios componentes para calcular o `data-rendra`, sem\n * duplicar a tabela de variantes.\n */\nexport function resolveCatalogCode(component: string, props: Record<string, unknown> = {}): string {\n  const entries = catalogByComponent(component)\n  if (entries.length === 0) {\n    throw new Error(`Catálogo: nenhum código cadastrado para o componente \"${component}\".`)\n  }\n  const match = entries.find(\n    (entry) =>\n      Object.keys(entry.variantProps).length > 0 &&\n      Object.entries(entry.variantProps).every(([key, value]) => props[key] === value),\n  )\n  // entries.length > 0 já foi conferido acima: entries[0] sempre existe aqui.\n  return (match ?? entries[0]!).code\n}\n\n/*\n * Regras de integridade (usadas pelo teste em components.test.ts e por assertCatalogIntegrity).\n * São funções puras, sem acesso a arquivo: recebem a lista de entradas e devolvem o que\n * está errado, para o teste poder provar a regra com uma lista fabricada, não só com o\n * catálogo real.\n */\n\n/** Código que aparece mais de uma vez na lista. */\nexport function findDuplicateCodes(entries: ComponentCatalogEntry[]): string[] {\n  const seen = new Set<string>()\n  const duplicates = new Set<string>()\n  for (const entry of entries) {\n    if (seen.has(entry.code)) duplicates.add(entry.code)\n    seen.add(entry.code)\n  }\n  return [...duplicates]\n}\n\n/** Código fora do formato ^[A-Z]{3,4}-\\d{3}$. */\nexport function findInvalidFormatCodes(entries: ComponentCatalogEntry[]): string[] {\n  return entries\n    .filter((entry) => !COMPONENT_CODE_PATTERN.test(entry.code))\n    .map((entry) => entry.code)\n}\n\n/**\n * Código que colidiria com um código de modelo (T1, C4, M5...) de src/config/presets.ts,\n * cujo padrão é /[TCM]\\d+/ (uma letra T, C ou M seguida direto de dígitos, sem hífen).\n */\nexport function findPresetCollisions(entries: ComponentCatalogEntry[]): string[] {\n  return entries.filter((entry) => /[TCM]\\d+/.test(entry.code)).map((entry) => entry.code)\n}\n\n/** Arquivo (caminho relativo a src/) que não tem nenhuma entrada no catálogo. */\nexport function filesMissingCatalogEntry(\n  files: string[],\n  entries: ComponentCatalogEntry[],\n): string[] {\n  const covered = new Set(entries.map((entry) => entry.file))\n  return files.filter((file) => !covered.has(file))\n}\n\n/** Componente (nome) com mais de uma variante no catálogo, agrupadas na ordem cadastrada. */\nfunction groupByComponentWithMultipleVariants(\n  entries: ComponentCatalogEntry[],\n): Map<string, ComponentCatalogEntry[]> {\n  const byComponent = new Map<string, ComponentCatalogEntry[]>()\n  for (const entry of entries) {\n    const list = byComponent.get(entry.component) ?? []\n    list.push(entry)\n    byComponent.set(entry.component, list)\n  }\n  for (const [component, list] of byComponent) if (list.length <= 1) byComponent.delete(component)\n  return byComponent\n}\n\n/**\n * Componente com mais de uma variante que não tem nenhuma marcada `isDefault` (fase 3, Lote\n * B: `rendra trocar` precisa saber qual variante um elemento sem a prop representa).\n */\nexport function findComponentsWithoutDefault(entries: ComponentCatalogEntry[]): string[] {\n  const groups = groupByComponentWithMultipleVariants(entries)\n  return [...groups]\n    .filter(([, list]) => !list.some((entry) => entry.isDefault))\n    .map(([component]) => component)\n}\n\n/** Componente com mais de uma variante marcada `isDefault` ao mesmo tempo (só pode uma). */\nexport function findComponentsWithMultipleDefaults(entries: ComponentCatalogEntry[]): string[] {\n  const groups = groupByComponentWithMultipleVariants(entries)\n  return [...groups]\n    .filter(([, list]) => list.filter((entry) => entry.isDefault).length > 1)\n    .map(([component]) => component)\n}\n\n/**\n * Lança se houver código duplicado, fora do formato, colidindo com um código de modelo, ou\n * componente com mais de uma variante sem exatamente uma marcada `isDefault`.\n */\nexport function assertCatalogIntegrity(): void {\n  const duplicates = findDuplicateCodes(CATALOG)\n  if (duplicates.length > 0) {\n    throw new Error(`Catálogo: código duplicado: ${duplicates.join(', ')}.`)\n  }\n  const invalid = findInvalidFormatCodes(CATALOG)\n  if (invalid.length > 0) {\n    throw new Error(`Catálogo: código fora do formato ^[A-Z]{3,4}-\\\\d{3}$: ${invalid.join(', ')}.`)\n  }\n  const collisions = findPresetCollisions(CATALOG)\n  if (collisions.length > 0) {\n    throw new Error(\n      `Catálogo: código colide com um código de modelo (T/C/M): ${collisions.join(', ')}.`,\n    )\n  }\n  const semPadrao = findComponentsWithoutDefault(CATALOG)\n  if (semPadrao.length > 0) {\n    throw new Error(\n      `Catálogo: componente com mais de uma variante sem nenhuma marcada isDefault: ${semPadrao.join(', ')}.`,\n    )\n  }\n  const padraoDuplicado = findComponentsWithMultipleDefaults(CATALOG)\n  if (padraoDuplicado.length > 0) {\n    throw new Error(\n      `Catálogo: componente com mais de uma variante marcada isDefault: ${padraoDuplicado.join(', ')}.`,\n    )\n  }\n}\n"],"mappings":"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Ac,EAAE,MAAM,SAAS;EAC/B,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CACA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CACA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CACA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WACE;CACJ;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CAEA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,MAAM;EACN,cAAc,CAAC;EACf,WAAW;CACb;CACA;EACE,MAAM;EACN,MAAM;EACN,WAAW;EACX,M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"}

package/dist/components.css

@@ -1,4 +1,4 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
 
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
@@ -209,6 +209,9 @@
   .top-8 {
     top: 2rem;
   }
+  .top-16 {
+    top: 4rem;
+  }
   .top-full {
     top: 100%;
   }
@@ -224,9 +227,6 @@
   .right-2 {
     right: 0.5rem;
   }
-  .right-4 {
-    right: 1rem;
-  }
   .right-8 {
     right: 2rem;
   }
@@ -236,9 +236,6 @@
   .bottom-0 {
     bottom: 0px;
   }
-  .bottom-3 {
-    bottom: 0.75rem;
-  }
   .bottom-4 {
     bottom: 1rem;
   }
@@ -314,6 +311,9 @@
   .m-0 {
     margin: 0px;
   }
+  .m-3 {
+    margin: 0.75rem;
+  }
   .m-auto {
     margin: auto;
   }
@@ -347,9 +347,15 @@
   .-mt-2 {
     margin-top: calc(0.5rem * -1);
   }
+  .-mt-3 {
+    margin-top: calc(0.75rem * -1);
+  }
   .-mt-6 {
     margin-top: calc(1.5rem * -1);
   }
+  .mt-0 {
+    margin-top: 0px;
+  }
   .mt-1 {
     margin-top: 0.25rem;
   }
@@ -369,6 +375,9 @@
   .-mr-2 {
     margin-right: calc(0.5rem * -1);
   }
+  .-mr-3 {
+    margin-right: calc(0.75rem * -1);
+  }
   .mr-0 {
     margin-right: 0px;
   }
@@ -388,6 +397,9 @@
   .mb-1 {
     margin-bottom: 0.25rem;
   }
+  .mb-3 {
+    margin-bottom: 0.75rem;
+  }
   .-ml-1 {
     margin-left: calc(0.25rem * -1);
   }
@@ -686,7 +698,10 @@
     width: fit-content;
   }
   .w-flow-node {
-    width: 16rem;
+    width: 21rem;
+  }
+  .w-flow-panel {
+    width: 21rem;
   }
   .w-full {
     width: 100%;
@@ -949,9 +964,6 @@
       scrollbar-color: var(--rendra-input) transparent;
     }
   }
-  .list-disc {
-    list-style-type: disc;
-  }
   .grid-chat-3 {
     grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
     @media (width >= 80rem) {
@@ -1399,6 +1411,9 @@
       background-color: color-mix(in oklab, var(--rendra-primary-soft) 60%, transparent);
     }
   }
+  .bg-primary-text {
+    background-color: var(--rendra-primary-text);
+  }
   .bg-secondary {
     background-color: var(--rendra-secondary);
   }
@@ -1547,9 +1562,6 @@
   .pr-8 {
     padding-right: 2rem;
   }
-  .pr-12 {
-    padding-right: 3rem;
-  }
   .pb-1 {
     padding-bottom: 0.25rem;
   }
@@ -1565,9 +1577,6 @@
   .pb-6 {
     padding-bottom: 1.5rem;
   }
-  .pb-8 {
-    padding-bottom: 2rem;
-  }
   .pb-safe {
     padding-bottom: max(1rem, env(safe-area-inset-bottom));
   }
@@ -2075,6 +2084,9 @@
       calc((1 - var(--bottom, 1)) * 50%) 100%
     );
   }
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
   .running {
     animation-play-state: running;
   }
@@ -2934,6 +2946,9 @@
     .md\:h-control-sm {
       height: var(--rendra-spacing-control-sm);
     }
+    .md\:h-viewer {
+      height: 28rem;
+    }
     .md\:max-h-command {
       max-height: min(24rem, 60dvh);
     }
@@ -3167,9 +3182,6 @@
     .lg\:w-3xs {
       width: 16rem;
     }
-    .lg\:w-popover {
-      width: min(22rem, calc(100vw - 2rem));
-    }
     .lg\:w-sm {
       width: 24rem;
     }
@@ -3188,12 +3200,6 @@
     .lg\:grid-cols-6 {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
-    .lg\:flex-row {
-      flex-direction: row;
-    }
-    .lg\:items-start {
-      align-items: flex-start;
-    }
     .lg\:justify-center {
       justify-content: center;
     }
@@ -3349,6 +3355,37 @@
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
   }
+  @container (width >= 64rem) {
+    .\@5xl\:h-board {
+      height: var(--board-h, 32rem);
+    }
+    .\@5xl\:h-full {
+      height: 100%;
+    }
+    .\@5xl\:min-h-viewer {
+      min-height: 28rem;
+    }
+    .\@5xl\:w-flow-panel {
+      width: 21rem;
+    }
+    .\@5xl\:flex-1 {
+      flex: 1;
+    }
+    .\@5xl\:flex-row {
+      flex-direction: row;
+    }
+    .\@5xl\:overflow-y-auto {
+      overflow-y: auto;
+    }
+    .\@5xl\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0px;
+    }
+    .\@5xl\:border-l {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  }
   @container (width >= 72rem) {
     .\@6xl\:grid-cols-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -3685,6 +3722,10 @@
   .flow-surface .react-flow__node {
     touch-action: none;
   }
+  .flow-surface .react-flow__handle {
+    background-color: transparent !important;
+    border: 0;
+  }
   .flow-surface .react-flow__node:focus-visible {
     border-radius: var(--rendra-shape-block);
     outline: 2px solid var(--rendra-ring);

package/dist/document-viewer.js

@@ -1,7 +1,7 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as cn } from "./cn-BlJHpkDs.js";
-import { t as Button } from "./button-CrSlVIsY.js";
-import { t as EmptyState } from "./empty-state-i4e-LacG.js";
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-CpdCvlkP.js";
+import { t as Button } from "./button-BcCBrlnt.js";
+import { t as EmptyState } from "./empty-state-Bcx4M0Me.js";
 import { ChevronLeft, ChevronRight, ExternalLink, ZoomIn, ZoomOut } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";