@softize/opus 8.6.6

package/src/ui/docs/content/audit.md

@@ -0,0 +1,84 @@
+---
+title: Auditoria
+---
+
+# Auditoria
+
+Toda action executada vira um registro imutável: quem, o quê, quando, com que entrada e
+resultado. O runtime emite um `AuditRecord` por execução pro(s) sink(s) configurado(s) — de
+graça, sem o handler pedir. O contrato é o `AuditSink`.
+
+## O contrato
+
+```ts
+interface AuditSink {
+  emit(record: AuditRecord): Promise<void> | void
+}
+
+interface AuditRecord {
+  id: string
+  timestamp: string
+  action: string
+  actionKind?: 'simple' | 'form' | 'list' | 'view'  // sink filtra leitura sem tabela por fora
+  outcome: 'success' | 'error'
+  durationMs: number
+  provenance: Provenance        // origem do trigger (http, schedule, reaction, ai…)
+  // actor.meta chega com name/email do user resolvido (quando presentes) —
+  // sink não re-resolve id→nome.
+  actor: { id: string | null; type?: 'user' | 'system' | 'integration'; meta?: Record<string, unknown> }
+  tenant?: string | null
+  input: unknown
+  output?: unknown
+  error?: ActionError
+  severity: 'info' | 'warning' | 'error'
+  meta?: Record<string, unknown>
+}
+```
+
+## Drivers
+
+```ts
+import { consoleAudit } from '@softize/opus/audit/console'
+import { pgAudit } from '@softize/opus/audit/pg'
+
+// Dev: uma linha por action (pretty num TTY, json senão).
+const dev = consoleAudit()
+
+// Produção: grava na tabela audit_log (Postgres).
+const prod = pgAudit({ pool, table: 'audit_log' })
+```
+
+## Dado sensível: o redator global
+
+Sem redator, os sinks persistem input e output **crus** — `user.create`/`setPassword`
+gravaria senha em claro. Os dois drivers aceitam `redact` (função `unknown → unknown`
+aplicada a input/output antes de persistir/imprimir), e a base traz o redator recursivo:
+
+```ts
+import { redactDeep } from '@softize/opus/audit'
+
+// Qualquer profundidade, arrays inclusos; chave que casa
+// /password|passwd|secret|token|authorization|api[-_]?key|credential/i vira '[REDACTED]'.
+const prod = pgAudit({ pool, redact: redactDeep })
+```
+
+Sink próprio reusa as peças: `redactRecord(record, redator)` e `SENSITIVE_KEY_PATTERN`
+saem do mesmo módulo. O `audit: { redact: [...] }` por action (dot-paths) continua
+valendo — o redator do sink é o cinto de segurança global, não o substituto.
+
+## No runtime
+
+```ts
+const runtime = createRuntime({
+  // …server/data/auth…
+  audit: prod,            // um sink, ou vários: [consoleAudit(), pgAudit({ pool })]
+})
+```
+
+O que cada action captura se ajusta no contrato (`audit: false` desliga; `audit: { redact:
+['senha'], output: false }` refina). O default captura tudo — input, output e provenance.
+
+## Limites (por enquanto)
+
+Sink append-only (sem query/retenção embutida — isso é do seu banco). Drivers hoje:
+`console` e `pg`; outros (arquivo, OpenTelemetry…) entram por reincidência.

package/src/ui/docs/content/auth.md

@@ -0,0 +1,70 @@
+---
+title: Autenticação
+---
+
+# Autenticação
+
+Quem é o usuário, de qual tenant, e o que ele pode. O contrato é um adapter do core
+(`AuthAdapter`): a cada request o runtime chama `resolveContext` e injeta o resultado no
+handler — `ctx.user`, `ctx.tenantId`, `ctx.can`. O Opus **não** implementa RBAC/ABAC; ele
+delega a decisão pro `can` que o driver pluga.
+
+## O contrato
+
+```ts
+interface AuthAdapter {
+  resolveContext(req): Promise<{
+    user: User | null            // { id, ...claims }
+    tenantId?: string | null     // multi-tenant (opcional)
+    can: CanFn                   // (permission, resource?) => boolean | Promise<boolean>
+  }>
+}
+```
+
+`req` é o request cru do `ServerAdapter`. O `user` sai dos claims/sessão; o `can` é a régua
+de autorização — o Opus só chama, não decide.
+
+## Drivers
+
+```ts
+import { jwtAuth } from '@softize/opus/auth/jwt'
+import { betterAuthSession } from '@softize/opus/auth/better-auth'
+
+// JWT: valida o token (HS256 por padrão) e mapeia o payload pro User.
+const jwt = jwtAuth({ secret: process.env.JWT_SECRET! })
+
+// better-auth: valida a sessão contra um IdP better-auth remoto.
+const idp = betterAuthSession({
+  baseURL: 'https://auth.example.com',
+  mapUser: (s) => ({ id: s.user.id, email: s.user.email }),
+  can: (user) => (perm) => (user.roles as string[] | undefined)?.includes(perm) ?? false,
+})
+```
+
+O `jwt` procura o token no `Authorization: Bearer`, em cookie ou custom (via `getToken`); o
+`secret` pode ser string ou um resolver async por `kid`. O `betterAuthSession` faz fetch da
+sessão no IdP (`timeoutMs`, default 5s) e mapeia pro `User`/tenant/can (o `can` default nega
+tudo — plugue o seu).
+
+## No runtime
+
+```ts
+const runtime = createRuntime({
+  // …server/data…
+  auth: idp,
+})
+
+// No handler: o contexto já vem resolvido.
+handler: async (ctx, input) => {
+  if (!(await ctx.can('nota.emitir'))) throw error({ code: 'forbidden' })
+  return repo.create({ ...input, tenantId: ctx.tenantId })
+}
+```
+
+A action declara o gate no contrato (`auth: 'nota.emitir'`) e o runtime cobra antes do
+handler. Sem `auth` configurado, `ctx.user` é null.
+
+## Limites (por enquanto)
+
+O Opus não modela papéis/permissões — isso é do seu `can`. Drivers hoje: `jwt` e
+`better-auth`; outros (Clerk, Auth.js…) entram por reincidência.

package/src/ui/docs/content/avatar.md

@@ -0,0 +1,94 @@
+## Básico
+
+AvatarImage com src/alt e AvatarFallback com as iniciais — o fallback aparece enquanto a imagem
+carrega ou se ela falha.
+
+```tsx preview
+<Avatar>
+  <AvatarImage src="https://github.com/joaocampos.png" alt="João Campos" />
+  <AvatarFallback>JC</AvatarFallback>
+</Avatar>
+```
+
+## Fallback de iniciais
+
+Sem AvatarImage (ou com src quebrado), só o AvatarFallback renderiza — iniciais pra pessoa, ícone
+pra agente.
+
+```tsx preview
+<Avatar>
+  <AvatarFallback>AL</AvatarFallback>
+</Avatar>
+<Avatar>
+  <AvatarFallback>
+    <Bot className="size-4" />
+  </AvatarFallback>
+</Avatar>
+```
+
+## Tamanhos
+
+size sm/default/lg — o fallback acompanha o tamanho. sm pra listas densas, lg pra cabeçalho de
+workspace.
+
+```tsx preview
+<Avatar size="sm">
+  <AvatarFallback>AL</AvatarFallback>
+</Avatar>
+<Avatar size="default">
+  <AvatarFallback>AL</AvatarFallback>
+</Avatar>
+<Avatar size="lg">
+  <AvatarFallback>AL</AvatarFallback>
+</Avatar>
+```
+
+## Com selo de status
+
+AvatarBadge é o ponto no canto inferior — verde pro agente developer rodando uma sessão, cinza
+pro ocioso. Tinja com className.
+
+```tsx preview
+<Avatar>
+  <AvatarFallback>
+    <Bot className="size-4" />
+  </AvatarFallback>
+  <AvatarBadge className="bg-emerald-500" />
+</Avatar>
+<Avatar>
+  <AvatarFallback>RV</AvatarFallback>
+  <AvatarBadge className="bg-muted-foreground" />
+</Avatar>
+```
+
+## Grupo sobreposto
+
+AvatarGroup sobrepõe os avatares (com anel de fundo) e AvatarGroupCount fecha a pilha com o
+excedente — os membros do workspace Empresa X.
+
+```tsx preview
+<AvatarGroup>
+  <Avatar>
+    <AvatarImage src="https://github.com/joaocampos.png" alt="João Campos" />
+    <AvatarFallback>JC</AvatarFallback>
+  </Avatar>
+  <Avatar>
+    <AvatarFallback>DV</AvatarFallback>
+  </Avatar>
+  <Avatar>
+    <AvatarFallback>RV</AvatarFallback>
+  </Avatar>
+  <AvatarGroupCount>+3</AvatarGroupCount>
+</AvatarGroup>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `size` (Avatar) | `'sm' \| 'default' \| 'lg'` | `'default'` | Diâmetro do retrato — o fallback e o selo acompanham. |
+| `src` (AvatarImage) | `string` | | URL da imagem. Enquanto carrega (ou se falha), o AvatarFallback fica no lugar. |
+| `alt` (AvatarImage) | `string` | | Texto alternativo da imagem — o nome da pessoa ou do agente. |
+| `children` (AvatarFallback) | `React.ReactNode` | | O que aparece sem imagem: iniciais (pessoa) ou ícone (agente). |
+| `className` (AvatarBadge) | `string` | | Selo no canto inferior — tinja o fundo (ex.: bg-emerald-500) pra refletir o status. |
+| `children` (AvatarGroupCount) | `React.ReactNode` | | O excedente da pilha (ex.: "+3"), fechando o AvatarGroup. |

package/src/ui/docs/content/badge.md

@@ -0,0 +1,48 @@
+## Intenção
+
+As quatro variantes do shadcn: categoria, papel, alerta. Badge é não-interativo — pra clique, use
+Button.
+
+```tsx preview
+<Badge>Agente</Badge>
+<Badge variant="secondary">Skill</Badge>
+<Badge variant="outline">Monorepo</Badge>
+<Badge variant="destructive">Arquivado</Badge>
+```
+
+## Tons de status da casa
+
+success/warning/info (fill tingido + borda translúcida) — convenção da casa pra estado semântico,
+igual ao KindBadge do Maestro. Não-interativos.
+
+```tsx preview
+<Badge variant="success">Ativa</Badge>
+<Badge variant="warning">Aguardando revisor</Badge>
+<Badge variant="info">Em sessão</Badge>
+```
+
+## Com ícone
+
+Um svg filho ganha size-3 automaticamente — bom pra reforçar o estado sem crescer o rótulo.
+
+```tsx preview
+<Badge variant="success"><CircleCheck /> Regressão verde</Badge>
+```
+
+## Como link (asChild)
+
+asChild renderiza o filho (Radix Slot) — um `<a>` com cara de badge, com hover próprio das
+variantes.
+
+```tsx preview
+<Badge asChild variant="secondary">
+  <a href="#" onClick={(e) => e.preventDefault()}>Empresa X</a>
+</Badge>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning' \| 'info'` | `'default'` | Intenção (default/secondary/destructive/outline) ou tom de status da casa (success/warning/info). |
+| `asChild` | `boolean` | `false` | Renderiza como o filho (Radix Slot) em vez de `<span>` — ex.: um `<a>` com cara de badge. |

package/src/ui/docs/content/breadcrumb.md

@@ -0,0 +1,87 @@
+## Básico
+
+A composição é manual: BreadcrumbLink nos níveis navegáveis, BreadcrumbPage no atual (não
+clicável, aria-current=page) e um BreadcrumbSeparator entre cada item.
+
+```tsx preview col-start
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#">Empresa X</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#">empresa-x-api</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Sessão #142</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+## Com ícone e separador custom
+
+O primeiro nível pode levar um ícone do lucide. BreadcrumbSeparator aceita children pra trocar o
+chevron padrão por outro glifo (aqui, uma barra).
+
+```tsx preview col-start
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#" className="flex items-center gap-1.5">
+        <Home className="size-3.5" />
+        Workspaces
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator>
+      <Slash />
+    </BreadcrumbSeparator>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#">Empresa X</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator>
+      <Slash />
+    </BreadcrumbSeparator>
+    <BreadcrumbItem>
+      <BreadcrumbPage>Agentes</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+## Colapsado
+
+Trilha funda demais pro espaço: BreadcrumbEllipsis substitui os níveis do meio (que viram um
+menu/popover) e mantém só a raiz e o destino.
+
+```tsx preview col-start
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#">Empresa X</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#">empresa-x-web</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Skill clean-code</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `asChild` (BreadcrumbLink) | `boolean` | `false` | Funde as props no filho (via Slot) — use pra integrar o Link do seu roteador no lugar do `<a>` nativo. |
+| `href` (BreadcrumbLink) | `string` | | Destino do nível navegável — o que o consumidor decide por item. |
+| `children` (BreadcrumbSeparator) | `React.ReactNode` | `<ChevronRight />` | Glifo entre os itens. Omita pro chevron padrão ou passe outro ícone. |

package/src/ui/docs/content/button-group.md

@@ -0,0 +1,71 @@
+## Básico
+
+Envolva os botões no ButtonGroup: as bordas internas colapsam e só as pontas ficam arredondadas.
+Use a mesma variant nos filhos pra manter a barra uniforme.
+
+```tsx preview
+<ButtonGroup>
+  <Button variant="outline">Visão geral</Button>
+  <Button variant="outline">Sessões</Button>
+  <Button variant="outline">Skills</Button>
+</ButtonGroup>
+```
+
+## Ação dividida
+
+O padrão da casa pra ação primária + variações: o botão principal, um separador e um gatilho de
+menu (size=icon).
+
+```tsx preview
+<ButtonGroup>
+  <Button icon={Play}>Rodar agente developer</Button>
+  <ButtonGroupSeparator />
+  <Button size="icon" aria-label="Mais opções">
+    <ChevronDown />
+  </Button>
+</ButtonGroup>
+```
+
+## Com rótulo
+
+ButtonGroupText cola um rótulo (fundo muted) ao grupo — bom pra prefixar o contexto. Aceita ícone
+via [&_svg] e asChild pra virar `<label>`.
+
+```tsx preview
+<ButtonGroup>
+  <ButtonGroupText>
+    <GitBranch />
+    empresa-x-api
+  </ButtonGroupText>
+  <Button variant="outline" icon={RotateCw}>
+    Sincronizar
+  </Button>
+</ButtonGroup>
+```
+
+## Vertical
+
+orientation=vertical empilha os filhos em coluna — as bordas que colapsam passam a ser as de
+cima/baixo. Combina com size=icon pra uma mini-toolbar.
+
+```tsx preview col-start
+<ButtonGroup orientation="vertical">
+  <Button variant="outline" size="icon" aria-label="Rodar sessão">
+    <Play />
+  </Button>
+  <Button variant="outline" size="icon" aria-label="Pausar sessão">
+    <Pause />
+  </Button>
+  <Button variant="outline" size="icon" aria-label="Reiniciar sessão">
+    <RotateCw />
+  </Button>
+</ButtonGroup>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `orientation` (ButtonGroup) | `'horizontal' \| 'vertical'` | `'horizontal'` | Direção do bloco — vertical empilha os filhos em coluna. |
+| `orientation` (ButtonGroupSeparator) | `'horizontal' \| 'vertical'` | `'vertical'` | Direção do traço divisor — herde do grupo (vertical no horizontal). |
+| `asChild` (ButtonGroupText) | `boolean` | `false` | Renderiza como o filho (Radix Slot) — ex.: virar `<label>` sem forkar o estilo. |

package/src/ui/docs/content/button.md

@@ -0,0 +1,60 @@
+## Variantes
+
+variant é intenção, não decoração: default pra ação principal (uma por tela), destructive só
+quando destrói de verdade.
+
+```tsx preview
+<Button>Salvar</Button>
+<Button variant="secondary">Duplicar</Button>
+<Button variant="outline">Cancelar</Button>
+<Button variant="ghost">Detalhes</Button>
+<Button variant="destructive">Excluir</Button>
+<Button variant="link">Ver documentação</Button>
+```
+
+## Tamanhos
+
+size icon exige aria-label (não tem texto pra ler). Os só-ícone vêm em três: `icon` (36px), `icon-sm` (32px, pra fileira densa como o header) e `icon-xs` (24px, pra ação DENTRO de um campo — o `trailing` do Input/Select).
+
+```tsx preview
+<Button size="sm">Pequeno</Button>
+<Button>Padrão</Button>
+<Button size="lg">Grande</Button>
+<Button size="icon" aria-label="Novo"><Plus /></Button>
+<Button size="icon-sm" variant="ghost" aria-label="Novo"><Plus /></Button>
+<Button size="icon-xs" variant="ghost" aria-label="Novo"><Plus /></Button>
+```
+
+## Estados
+
+busy = ação em andamento (DEPOIS do clique): o Spinner e o disabled vêm do botão. Com icon, o
+Spinner TROCA o ícone (não soma). Não confunda com carregar conteúdo (ANTES) — isso é Spinner
+centralizado/Skeleton num nível de página.
+
+```tsx preview
+<Button disabled>Desabilitado</Button>
+<Button busy>Salvar</Button>
+<Button icon={Plus}>Novo</Button>
+<Button icon={Plus} busy>Novo</Button>
+```
+
+## Como outro elemento (asChild)
+
+Âncora com cara de botão: asChild renderiza o filho (Radix Slot) — sem forkar estilo.
+buttonVariants serve pro caso sem filho único.
+
+```tsx preview
+<Button asChild variant="outline">
+  <a href="#" onClick={(e) => e.preventDefault()}>Abrir documentação</a>
+</Button>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `variant` | `'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'` | `'default'` | A intenção da ação — define cor e peso visual. |
+| `size` | `'default' \| 'sm' \| 'lg' \| 'icon' \| 'icon-sm' \| 'icon-xs'` | `'default'` | O tamanho. Os icon* são quadrados (36/32/24px), pra botão só de ícone (com aria-label). |
+| `asChild` | `boolean` | `false` | Renderiza como o filho (Radix Slot) em vez de `<button>` — pra âncoras e afins. |
+| `busy` | `boolean` | `false` | Ação em andamento (depois do clique): mostra Spinner + desabilita. Não é "carregando" de conteúdo (que é Spinner/Skeleton num nível de página). |
+| `icon` | `React.ElementType` | | Ícone à esquerda (ex.: icon={Plus}). No busy é trocado pelo Spinner — não soma. |

package/src/ui/docs/content/calendar.md

@@ -0,0 +1,62 @@
+## Dia único
+
+mode=single guarda uma Date — controle por selected/onSelect. defaultMonth abre o calendário no mês certo sem mexer na seleção.
+
+```tsx preview
+const [day, setDay] = useState<Date | undefined>(new Date(2026, 5, 22))
+
+render(
+  <Calendar
+    mode="single"
+    selected={day}
+    onSelect={setDay}
+    defaultMonth={new Date(2026, 5, 1)}
+  />,
+)
+```
+
+## Intervalo
+
+mode=range guarda { from, to } — o padrão pra filtrar sessões por janela de datas. O primeiro clique fixa o início; o segundo, o fim.
+
+```tsx preview
+const [week, setWeek] = useState<DateRange | undefined>({
+  from: new Date(2026, 5, 15),
+  to: new Date(2026, 5, 19),
+})
+
+render(
+  <Calendar
+    mode="range"
+    selected={week}
+    onSelect={setWeek}
+    defaultMonth={new Date(2026, 5, 1)}
+  />,
+)
+```
+
+## Navegação por dropdown
+
+captionLayout=dropdown troca o título do mês por seletores de mês e ano — bom pra pular pra um período distante (ex.: histórico de um repositório) sem clicar mês a mês.
+
+```tsx preview
+<Calendar
+  mode="single"
+  captionLayout="dropdown"
+  defaultMonth={new Date(2026, 5, 1)}
+/>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descrição |
+|---|---|---|---|
+| `mode` | `'single' \| 'multiple' \| 'range'` | | O tipo de seleção — define o formato de selected/onSelect (Date, Date[] ou { from, to }). |
+| `selected` | `Date \| Date[] \| DateRange` | | A seleção atual no modo controlado — o formato segue o mode. Pareie com onSelect. |
+| `onSelect` | `(selected) => void` | | Chamado quando o usuário escolhe uma data. O argumento segue o mode. |
+| `defaultMonth` | `Date` | | O mês exibido ao montar, sem afetar a seleção. |
+| `captionLayout` | `'label' \| 'dropdown' \| 'dropdown-months' \| 'dropdown-years'` | `'label'` | Como o título do mês aparece — label é texto fixo; dropdown vira seletores de mês e ano. |
+| `numberOfMonths` | `number` | `1` | Quantos meses mostrar lado a lado — útil pra escolher um intervalo longo. |
+| `disabled` | `Matcher` | | Datas não selecionáveis — uma Date, um array, um { from, to } ou um predicado (date) => boolean. |
+| `buttonVariant` | `Button['variant']` | `'ghost'` | A variante dos botões de navegação (anterior/próximo). |
+| `showOutsideDays` | `boolean` | `true` | Mostra os dias do mês vizinho que completam a primeira e a última semana. |

package/src/ui/docs/content/card.md

@@ -0,0 +1,49 @@
+## Box simples
+
+O uso mais comum: a superfície de conteúdo em repouso (rounded-card + ring-edge + shadow-card — ver Tokens & Tema → Elevação por papel) com o padding pelo className. O Card não força flex/gap/padding — você compõe o miolo (sem brigar com space-y/flex seu).
+
+```tsx preview col
+<Card className="p-4">
+  <p className="text-sm text-muted-foreground">3 sessões ativas neste momento.</p>
+</Card>
+```
+
+## Estruturado (header / conteúdo / rodapé)
+
+Pra painel com estrutura: cada slot é dono do próprio padding (como o Dialog). CardTitle/CardDescription no header; CardFooter alinha as ações.
+
+```tsx preview col
+<Card>
+  <CardHeader>
+    <CardTitle>Empresa X</CardTitle>
+    <CardDescription>2 repositórios · 3 agentes vinculados.</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm text-muted-foreground">Última sessão concluída há 2 horas.</p>
+  </CardContent>
+  <CardFooter className="gap-2">
+    <Button size="sm">Abrir sessão</Button>
+    <Button size="sm" variant="outline">Ver repositórios</Button>
+  </CardFooter>
+</Card>
+```
+
+## Com divisor
+
+border-b no header / border-t no footer dão o divisor quando a estrutura pede separação visível. A aresta externa é o anel (`ring-edge`), não uma borda — divergência declarada vs shadcn (border + shadow-sm); os divisores internos seguem sendo `border`.
+
+```tsx preview col
+<Card>
+  <CardHeader className="border-b">
+    <CardTitle>Skill code-style</CardTitle>
+    <CardDescription>Padrão softize de código e microcopy.</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm text-muted-foreground">Vinculada a 4 agentes neste workspace.</p>
+  </CardContent>
+  <CardFooter className="justify-between border-t">
+    <Badge variant="success">Publicada</Badge>
+    <Button size="sm" variant="outline">Editar skill</Button>
+  </CardFooter>
+</Card>
+```