@softize/opus 8.6.6

package/src/ui/react.tsx

@@ -0,0 +1,235 @@
+/**
+ * @softize/opus/ui/react — a superfície React da UI: Provider + hooks (driver de action)
+ * + componentes + cn. O consumidor importa tudo daqui.
+ *
+ * `meta` de cada componente NÃO é re-exportado aqui de propósito — é metadado de
+ * build-time (lido pelo manifesto/MCP da fonte), fora do bundle de runtime.
+ */
+export * from './drivers/react.tsx'
+
+// Utilitário
+export { cn } from './lib/cn.ts'
+
+// Primitivos
+export { Button, buttonVariants } from './components/primitives/button.tsx'
+export type { ButtonProps } from './components/primitives/button.tsx'
+
+export { Input } from './components/primitives/input.tsx'
+
+export { Chat } from './components/primitives/chat.tsx'
+export type { ChatProps, ChatMessage, ChatArtifact, ChatTranscriptItem } from './components/primitives/chat.tsx'
+export { Composer } from './components/primitives/composer.tsx'
+export type { ComposerProps } from './components/primitives/composer.tsx'
+export { Copyable } from './components/primitives/copyable.tsx'
+export type { CopyableProps } from './components/primitives/copyable.tsx'
+export { IconPicker, iconPickerIcons } from './components/primitives/icon-picker.tsx'
+export type { IconPickerProps } from './components/primitives/icon-picker.tsx'
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+} from './components/primitives/command.tsx'
+
+export { Textarea } from './components/primitives/textarea.tsx'
+
+export { Label } from './components/primitives/label.tsx'
+
+export { Badge, badgeVariants } from './components/primitives/badge.tsx'
+export type { BadgeProps } from './components/primitives/badge.tsx'
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
+} from './components/primitives/card.tsx'
+
+export { Alert, AlertTitle, AlertDescription, alertVariants } from './components/primitives/alert.tsx'
+export type { AlertProps } from './components/primitives/alert.tsx'
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './components/primitives/dialog.tsx'
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuGroup,
+  MenuPortal,
+  MenuSub,
+  MenuRadioGroup,
+  MenuSubTrigger,
+  MenuSubContent,
+  MenuContent,
+  MenuItem,
+  MenuCheckboxItem,
+  MenuRadioItem,
+  MenuLabel,
+  MenuSeparator,
+  MenuShortcut,
+} from './components/primitives/menu.tsx'
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+} from './components/primitives/popover.tsx'
+
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from './components/primitives/tooltip.tsx'
+
+export { Checkbox } from './components/primitives/checkbox.tsx'
+
+export { Separator } from './components/primitives/separator.tsx'
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from './components/primitives/tabs.tsx'
+
+export { Skeleton } from './components/primitives/skeleton.tsx'
+
+export { Spinner } from './components/primitives/spinner.tsx'
+export type { SpinnerProps } from './components/primitives/spinner.tsx'
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from './components/primitives/table.tsx'
+
+// UM seletor: `native` (menu do SO), `searchable` (busca), `multiple` (chips) e
+// `variant="ghost"` (barra de composer) são PROPS, não componentes. Ver select.tsx.
+export { Select } from './components/primitives/select.tsx'
+export type { SelectProps, SelectOption } from './components/primitives/select.tsx'
+
+export { Toaster, toast } from './components/primitives/sonner.tsx'
+export { Markdown } from './components/primitives/markdown.tsx'
+
+// shadcn (lote inicial — byte-fiéis via registry JSON, locked no registry.lock.json)
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './components/primitives/accordion.tsx'
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from './components/primitives/alert-dialog.tsx'
+export { AspectRatio } from './components/primitives/aspect-ratio.tsx'
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from './components/primitives/avatar.tsx'
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/primitives/breadcrumb.tsx'
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './components/primitives/button-group.tsx'
+export { Calendar, CalendarDayButton } from './components/primitives/calendar.tsx'
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from './components/primitives/carousel.tsx'
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './components/primitives/collapsible.tsx'
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from './components/primitives/drawer.tsx'
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './components/primitives/empty.tsx'
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from './components/primitives/field.tsx'
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from './components/primitives/input-group.tsx'
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './components/primitives/input-otp.tsx'
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from './components/primitives/item.tsx'
+export { Kbd, KbdGroup } from './components/primitives/kbd.tsx'
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './components/primitives/pagination.tsx'
+export { Progress } from './components/primitives/progress.tsx'
+export { RadioGroup, RadioGroupItem } from './components/primitives/radio-group.tsx'
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './components/primitives/resizable.tsx'
+export { ScrollArea, ScrollBar } from './components/primitives/scroll-area.tsx'
+export { Slider } from './components/primitives/slider.tsx'
+export { Switch } from './components/primitives/switch.tsx'
+export { Toggle, toggleVariants } from './components/primitives/toggle.tsx'
+export { ToggleGroup, ToggleGroupItem } from './components/primitives/toggle-group.tsx'
+export { Truncate } from './components/primitives/truncate.tsx'
+export type { TruncateProps } from './components/primitives/truncate.tsx'
+
+// Patterns (renderizam actions a partir do spec)
+export { ActionForm, ActionFormField, useActionFormContext } from './components/patterns/form.tsx'
+export type { ActionFormProps, ActionFormFieldProps, ActionFormContextValue } from './components/patterns/form.tsx'
+
+export { ActionFormDialog } from './components/patterns/form-dialog.tsx'
+export type { ActionFormDialogProps } from './components/patterns/form-dialog.tsx'
+
+export { ActionFormCard } from './components/patterns/action-form-card.tsx'
+export type { ActionFormCardProps } from './components/patterns/action-form-card.tsx'
+
+export { ActionList, emptyListState, presetRange, listParamsToState, listStateToParams } from './components/patterns/list.tsx'
+export type { ActionListProps, ActionListColumn, ActionListState, ActionListView, ActionListBatchAction, ListActionLike } from './components/patterns/list.tsx'
+
+export { ActionView } from './components/patterns/view.tsx'
+export type { ActionViewProps } from './components/patterns/view.tsx'
+
+export { ActionTrigger } from './components/patterns/trigger.tsx'
+export { dialog, DialogHost, confirm, ConfirmHost } from './components/patterns/confirm.tsx'
+export type { AlertOptions, ConfirmOptions, PromptOptions } from './components/patterns/confirm.tsx'
+export type { ActionTriggerProps } from './components/patterns/trigger.tsx'
+
+// Listagem em modal: ListAction query-backed + chrome (toolbar/estados derivados).
+export { ActionListDialog } from './components/patterns/action-list-dialog.tsx'
+export type { ActionListDialogProps } from './components/patterns/action-list-dialog.tsx'
+
+// Estado de carga (carregando/vazio/erro → conteúdo) — o "antes" do conteúdo.
+export { DataState } from './components/patterns/data-state.tsx'
+export type { DataStateProps } from './components/patterns/data-state.tsx'
+
+// Esqueleto de página do back-office (main + container + header título/descrição/ação).
+export { Page } from './components/patterns/page.tsx'
+export type { PageProps } from './components/patterns/page.tsx'
+
+// Chrome da aplicação (sidebar + conteúdo + rail opcional redimensionável).
+export { AppShell, AppShellBar, AppShellTrigger, useAppShell, useSidebarSlot } from './components/patterns/app-shell.tsx'
+export type { AppShellProps } from './components/patterns/app-shell.tsx'
+
+// Layout composicional: Split decide a relação espacial; Pane carrega conteúdo com inset.
+export { Split, Pane } from './components/patterns/split.tsx'
+export type { SplitProps, PaneProps } from './components/patterns/split.tsx'
+
+// Barra lateral composicional: header/conteúdo/footer e navegação, sem possuir o layout.
+export { PaneHeader, PaneContent, PaneFooter, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarItem, SidebarNav } from './components/patterns/sidebar.tsx'
+export type { SidebarProps, SidebarItemProps, SidebarNavGroup } from './components/patterns/sidebar.tsx'
+
+// Seção com navegação própria (nav w-56 + painel) — o nível entre o AppShell e a Page.
+export { SectionShell } from './components/patterns/section-shell.tsx'
+export type {
+  SectionShellProps,
+  SectionNavGroup,
+  SectionNavSubgroup,
+  SectionNavItem,
+} from './components/patterns/section-shell.tsx'
+
+// O menu como primitivo PIVOTÁVEL: mesmo nav na sidebar do AppShell ou dentro do conteúdo
+// (colapso por CSS via o grupo `sidebar`). Ver docs/shellnav.md.
+export { ShellNav, ShellNavHeading } from './components/patterns/shell-nav.tsx'
+export type { ShellNavProps, ShellNavGroup, ShellNavItem, ShellNavHeadingProps } from './components/patterns/shell-nav.tsx'
+
+// Roteamento history-based (o pathname É o estado). Escopo pequeno de propósito: leitura
+// reativa da URL + navigate — sem tabela de rotas. Ver src/ui/router.ts.
+export { navigate, usePathname, useSegments, useSearchParams } from './router.ts'
+export type { NavigateOptions } from './router.ts'

package/src/ui/router.ts

@@ -0,0 +1,96 @@
+/**
+ * Roteamento history-based — o pathname É o estado.
+ *
+ * Nasceu por REINCIDÊNCIA: o mesmo mecanismo estava reimplementado à mão em quatro
+ * lugares, três deles dentro da casa (o `DocBrowser` daqui, o site do Opus e o
+ * back-office da Empresa X). As cópias divergiam no que importa — só uma usava
+ * `useSyncExternalStore` (as outras leem `window.location` em `useState`, que sofre
+ * tearing no modo concurrent), e cada uma notificava de um jeito.
+ *
+ * Escopo deliberadamente PEQUENO: não há tabela de rotas, `<Route>`, params tipados nem
+ * carregamento de dados. Isto é a leitura reativa da URL + um `navigate` — quem decide o
+ * que renderizar é o app, com `if`/`switch` sobre os segmentos. Se um dia o caso pedir
+ * casamento de padrão e params, aí é outra conversa (e provavelmente outra biblioteca).
+ *
+ *   import { navigate, useSegments } from '@softize/opus/ui/react'
+ *
+ *   const segments = useSegments()          // '/settings/users' → ['settings','users']
+ *   navigate('/settings/users')             // pushState + notifica
+ *   navigate('/x', { replace: true })       // troca a entrada corrente
+ */
+
+import { useMemo, useSyncExternalStore } from 'react'
+
+/** `popstate` é o ÚNICO canal de notificação, e de propósito: cobre voltar/avançar do
+ *  browser, o `navigate` daqui e quem ainda notifica na unha por evento sintético. Um
+ *  `Set` de assinantes em escopo de módulo pareceria mais direto e seria pior — ele mora
+ *  numa instância do bundle, então código não-migrado (que escuta o evento) e uma segunda
+ *  cópia do pacote no `node_modules` ficariam de fora. O `window` é um só. */
+function subscribe(callback: () => void): () => void {
+  window.addEventListener('popstate', callback)
+  return () => window.removeEventListener('popstate', callback)
+}
+
+/** SSR / build estático: sem `window` não há URL a ler. O snapshot de servidor é
+ *  constante de propósito — o primeiro render no cliente reconcilia com a URL real. */
+const SERVER_PATHNAME = '/'
+const SERVER_SEARCH = ''
+
+export interface NavigateOptions {
+  /** Troca a entrada corrente (`replaceState`) em vez de empilhar. Para estado que não é
+   *  história — um rascunho que ganha id no meio do fluxo, um filtro que não merece uma
+   *  volta do botão "voltar". */
+  replace?: boolean
+}
+
+/**
+ * Navega e notifica. No-op se já estiver exatamente no destino — sem isso, clicar duas
+ * vezes no mesmo item empilha entradas idênticas e o "voltar" não sai do lugar.
+ *
+ * "Exatamente" cobra normalizar: comparar o argumento CRU contra `window.location` erra
+ * em duas frentes. O hash — estando em `/a#secao`, `navigate('/a')` pareceria repetido e a
+ * âncora nunca sairia. E o encoding — `/relatórios` sai do `location` percent-encodado, e
+ * a comparação crua nunca casaria, empilhando uma entrada por clique justamente no caso
+ * pt-BR. Resolver os dois lados com `new URL` e comparar `href` resolve as duas.
+ *
+ * O `path` é da PRÓPRIA origem (ex.: `/settings/users?q=ana`). Passar URL absoluta aqui é
+ * erro de uso — validar destino externo é problema de quem recebe input de terceiro
+ * (redirect pós-login, por exemplo), não desta função. Comparar `href` (e não só o
+ * caminho) preserva isso: destino de outra origem não vira no-op, segue para o
+ * `pushState` e estoura lá, que é onde o erro é legível.
+ */
+export function navigate(path: string, options?: NavigateOptions): void {
+  if (new URL(path, window.location.origin).href === window.location.href) return
+  if (options?.replace === true) window.history.replaceState(null, '', path)
+  else window.history.pushState(null, '', path)
+  // `pushState` não dispara `popstate` — quem muda a URL por código tem que avisar. Um
+  // evento (e não uma lista privada) é o que faz host não-migrado continuar acompanhando.
+  window.dispatchEvent(new PopStateEvent('popstate'))
+}
+
+/** O pathname como estado reativo. */
+export function usePathname(): string {
+  return useSyncExternalStore(
+    subscribe,
+    () => window.location.pathname,
+    () => SERVER_PATHNAME,
+  )
+}
+
+/** Os segmentos do path: `/settings/users` → `['settings', 'users']`. Vazios caem fora,
+ *  então `/` e `//` dão `[]`. */
+export function useSegments(): string[] {
+  const pathname = usePathname()
+  return useMemo(() => pathname.split('/').filter(Boolean), [pathname])
+}
+
+/** A querystring como estado reativo — o lar natural do estado interno de uma seção
+ *  (qual relatório está aberto, o recorte de uma lista). */
+export function useSearchParams(): URLSearchParams {
+  const search = useSyncExternalStore(
+    subscribe,
+    () => window.location.search,
+    () => SERVER_SEARCH,
+  )
+  return useMemo(() => new URLSearchParams(search), [search])
+}

package/src/ui/theme.css

@@ -0,0 +1,234 @@
+/**
+ * Tema canônico do Opus (Tailwind v4, CSS-first). É o ENTRY de CSS da UI:
+ * importa o Tailwind + o tw-animate + define os tokens (cor inteira na var) e mapeia
+ * pro Tailwind via `@theme inline`. O app faz `@import '@softize/opus/ui/theme.css'`
+ * + um `@source` pros componentes do Opus (monorepo), e sobrescreve vars pra identidade.
+ *
+ * ── DIVERGÊNCIAS DECLARADAS vs shadcn upstream (regra: o que não está aqui é DRIFT
+ *    e deve ser sincronizado; ver skill `shadcn-ui`) ─────────────────────────────────
+ * 1. Formato HSL nos tokens (upstream migrou pra oklch) — legibilidade/ferramentas
+ *    nossas; os VALORES acompanham o upstream, só o formato difere.
+ * 2. Elevação dark: --card/--popover ACIMA de --background (10% vs 3.9%) — identidade
+ *    da casa (upstream v4 também elevou; calibramos pelo site deles em 2026-06).
+ * 3. Radius mapeado (sm/md/lg/xl em @theme inline) preservando o sentido pré-v4 dos
+ *    utilitários `rounded-*` — neutraliza o rename do v4.
+ * (A antiga nº 4 — escala shadow-* sobrescrita — foi APOSENTADA: a elevação da casa
+ *  vive em namespace próprio, shadow-card/popover/dialog + ring-edge, sem tocar os
+ *  defaults do Tailwind.)
+ * 5. Bordas mais leves no light: --border/--input em 92.5% (upstream 89.8%) — par do
+ *    canvas quase-branco; a aresta de superfície elevada já é o ring-edge.
+ * Tudo o mais (escala neutra, radius base 0.625rem, semânticas) segue o upstream.
+ */
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@plugin '@tailwindcss/typography';
+
+/* dark por classe (v4 é CSS-first) */
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* Elevação POR PAPEL (par do bg-card/bg-popover): família Notion — camada curta +
+     longa, tinte 25/25/25 — e a ARESTA (--edge-value): o anel hairline que SUBSTITUI a
+     borda em superfície elevada (ring-1 ring-edge). Papel novo = token novo; os
+     defaults shadow-* do Tailwind ficam INTACTOS (sem pegadinha). */
+  --edge-value: rgba(42, 28, 0, 0.07);
+  --elevation-card: 0 1px 2px rgba(25, 25, 25, 0.027), 0 3px 6px rgba(25, 25, 25, 0.05);
+  --elevation-popover: 0 5px 8px rgba(25, 25, 25, 0.027), 0 20px 24px rgba(25, 25, 25, 0.05);
+  --elevation-dialog: 0 4px 8px rgba(25, 25, 25, 0.03), 0 16px 24px rgba(25, 25, 25, 0.06);
+
+  /* Scrollbars e controles NATIVOS (date picker, autofill…) seguem o tema — sem
+     isto o browser assume light e pinta scrollbar branca no dark. */
+  color-scheme: light;
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 3.9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 3.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 3.9%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96.1%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96.1%);
+  --muted-foreground: hsl(0 0% 45.1%);
+  --accent: hsl(0 0% 96.1%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 92.5%);
+  --input: hsl(0 0% 92.5%);
+  /* Ring de foco LEVE (pedido da casa): aro sutil, não um halo. Com ring-[3px] + /50,
+     ~86% encosta na borda (89.8%) — um sussurro de foco. */
+  --ring: hsl(0 0% 86%);
+  --radius: 0.625rem;
+}
+
+.dark {
+  --edge-value: rgba(255, 255, 255, 0.06);
+  --elevation-card: 0 1px 2px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.28);
+  --elevation-popover: 0 5px 8px rgba(0, 0, 0, 0.16), 0 20px 24px rgba(0, 0, 0, 0.3);
+  --elevation-dialog: 0 4px 8px rgba(0, 0, 0, 0.2), 0 16px 24px rgba(0, 0, 0, 0.35);
+  color-scheme: dark;
+  --background: hsl(0 0% 3.9%);
+  --foreground: hsl(0 0% 98%);
+  /* Elevação com contraste de verdade (dialog/card "sobem" da página, como no site
+     do shadcn): superfície ~10% sobre fundo 3.9%, borda um ponto acima pra definir. */
+  --card: hsl(0 0% 10%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 10%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 98%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 14.9%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 14.9%);
+  --muted-foreground: hsl(0 0% 63.9%);
+  --accent: hsl(0 0% 14.9%);
+  --accent-foreground: hsl(0 0% 98%);
+  /* Vermelho CLARO no escuro (era 30.6% — calibrado só pra FUNDO, com texto branco).
+     Como o menu/alert/field/erros usam `text-destructive` como FOREGROUND, o valor
+     escuro dava ~1,7:1 sobre o popover — ilegível. ~58% passa o AA como texto e é o
+     que o success já fazia (dark:text-emerald-400 pula pro tom claro). Fundo sólido
+     (Button/Badge/toast destructive) fica mais vivo — igual ao light, com branco por
+     cima, como o shadcn novo. */
+  --destructive: hsl(0 72% 58%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 16.5%);
+  --input: hsl(0 0% 16.5%);
+  /* No escuro o 83.1% virava um halo quase branco; ~36% marca o foco sem brilhar. */
+  --ring: hsl(0 0% 36%);
+}
+
+/* Syntax highlighting (CodeBlock via prism-react-renderer): paleta calma mapeada por CSS
+   var — o prism theme referencia estes vars, então light/dark troca sozinho pelo cascade. */
+:root {
+  --code-fg: hsl(0 0% 25%);
+  --code-comment: hsl(0 0% 55%);
+  --code-keyword: hsl(265 50% 47%);
+  --code-string: hsl(140 45% 32%);
+  --code-function: hsl(210 65% 45%);
+  --code-number: hsl(25 75% 45%);
+  --code-class: hsl(190 50% 35%);
+  --code-property: hsl(210 55% 42%);
+  --code-punctuation: hsl(0 0% 45%);
+}
+
+.dark {
+  --code-fg: hsl(0 0% 85%);
+  --code-comment: hsl(0 0% 50%);
+  --code-keyword: hsl(265 70% 78%);
+  --code-string: hsl(140 45% 68%);
+  --code-function: hsl(210 70% 72%);
+  --code-number: hsl(30 80% 70%);
+  --code-class: hsl(180 50% 68%);
+  --code-property: hsl(195 60% 72%);
+  --code-punctuation: hsl(0 0% 60%);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Forma por papel (rounded-card/popover/dialog) — o papel de superfície carrega cor
+     (bg-*), elevação (shadow-*) E forma. Derivados de --radius: a identidade por app
+     (sobrescrever --radius) escala os papéis junto. Controles ficam na escala sm–xl. */
+  --radius-card: calc(var(--radius) + 6px);
+  --radius-popover: calc(var(--radius) - 2px);
+  --radius-dialog: calc(var(--radius) + 6px);
+
+  /* Elevação por papel (utilitários shadow-card/popover/dialog + ring-edge/border-edge)
+     — namespace PRÓPRIO: os shadow-* default do Tailwind seguem intactos. Superfície
+     elevada usa `ring-1 ring-edge` NO LUGAR de border (não combine os dois). */
+  --shadow-card: var(--elevation-card);
+  --shadow-popover: var(--elevation-popover);
+  --shadow-dialog: var(--elevation-dialog);
+  --color-edge: var(--edge-value);
+}
+
+/* Base canônica do consumidor — vem DAQUI, não do entry de cada app. Tailwind v4
+ * deixou a borda default em currentColor (preta): o reset aponta pro token (é o
+ * globals.css do shadcn). App que ainda tiver a cópia local: redundante, inofensivo. */
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  /* Base 15px: o rem da casa — TODA a escala rem (texto, spacing, radius) deriva daqui,
+     então a UI densifica ~6% vs o default do browser (16px). Histórico (conferido no git):
+     até a 2.31.4 o pacote NÃO fixava rem (valia o 16px do browser); a 2.31.5 introduziu
+     14px; a 2.35.0 assenta em 15px — valor INÉDITO, não é revert. O 15px veio da prática:
+     a Empresa X escolheu 15px por conta própria em DOIS apps, e a exceção reincidente
+     virou default. Quem quiser mais denso sobrescreve o `html` no próprio entry. */
+  html {
+    font-size: 15px;
+  }
+  /* Canvas da casa: quase-branco vem do BODY — o shell é transparente e as
+     superfícies (cards, miolo flush) pintam bg-background por cima. Tinte de 25%
+     de muted: separa a superfície do canvas sem virar cinza; segue o tema. */
+  body {
+    background-color: color-mix(in oklab, var(--muted) 25%, var(--background));
+  }
+}
+
+/* Markdown (componente `prose`) segue os tokens da casa — light/dark sozinho via as vars
+   (que já viram no `.dark`), então dispensa o `prose-invert`. O corpo é muted (como era na
+   versão à mão); headings/bold no foreground; bordas/regras no --border. */
+.prose {
+  --tw-prose-body: var(--muted-foreground);
+  --tw-prose-headings: var(--foreground);
+  --tw-prose-lead: var(--muted-foreground);
+  --tw-prose-links: var(--foreground);
+  --tw-prose-bold: var(--foreground);
+  --tw-prose-counters: var(--muted-foreground);
+  --tw-prose-bullets: var(--border);
+  --tw-prose-hr: var(--border);
+  --tw-prose-quotes: var(--muted-foreground);
+  --tw-prose-quote-borders: var(--border);
+  --tw-prose-captions: var(--muted-foreground);
+  --tw-prose-code: var(--foreground);
+  --tw-prose-pre-code: var(--code-fg);
+  --tw-prose-pre-bg: var(--muted);
+  --tw-prose-th-borders: var(--border);
+  --tw-prose-td-borders: var(--border);
+}
+
+/* Code inline = chip da casa (bg-muted), sem as aspas que o prose injeta.
+ * O guard [class~='not-prose'] espelha o escopo do plugin typography: sem ele a
+ * regra custom vaza pra dentro do not-prose (o CodeBlock ganhava uma SEGUNDA
+ * borda no <pre>, colada na do contêiner — a "borda duplicada"). */
+.prose :where(code):not(:where(pre code, [class~='not-prose'], [class~='not-prose'] *)) {
+  border-radius: calc(var(--radius) - 4px);
+  background: var(--muted);
+  padding: 0.125rem 0.375rem;
+  font-weight: 400;
+}
+.prose :where(code):not(:where(pre code, [class~='not-prose'], [class~='not-prose'] *))::before,
+.prose :where(code):not(:where(pre code, [class~='not-prose'], [class~='not-prose'] *))::after {
+  content: none;
+}
+
+/* Code block = superfície da casa (borda + bg muted) — só o <pre> CRU do prose. */
+.prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+  border: 1px solid var(--border);
+}