@softize/opus 12.11.0 → 13.1.0

package/src/ui/react.tsx

@@ -125,11 +125,17 @@ export {
   DialogOverlay,
   DialogContent,
   DialogHeader,
+  DialogMedia,
   DialogBody,
   DialogFooter,
   DialogTitle,
   DialogDescription,
 } from "./components/primitives/dialog.tsx";
+export type {
+  DialogProps,
+  DialogCloseProps,
+  DialogMode,
+} from "./components/primitives/dialog.tsx";
 
 export {
   Menu,
@@ -203,6 +209,10 @@ export type {
 } from "./components/primitives/select.tsx";
 
 export { Toaster, toast } from "./components/primitives/sonner.tsx";
+export type {
+  ToastAction,
+  ToastOptions,
+} 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)
@@ -212,20 +222,6 @@ export {
   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,
@@ -279,7 +275,7 @@ export {
 } from "./components/primitives/drawer.tsx";
 export {
   Empty,
-  EmptyContent,
+  EmptyActions,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
@@ -407,7 +403,9 @@ export {
 } from "./components/patterns/confirm.tsx";
 export type {
   AlertOptions,
+  ChooseOptions,
   ConfirmOptions,
+  DialogChoice,
   PromptOptions,
 } from "./components/patterns/confirm.tsx";
 export type { ActionTriggerProps } from "./components/patterns/trigger.tsx";
@@ -428,6 +426,7 @@ export {
   PageDescription,
   PageMeta,
   PageActions,
+  PageActionsTarget,
   PageBody,
 } from "./components/patterns/page.tsx";
 export type { PageProps } from "./components/patterns/page.tsx";
@@ -477,6 +476,7 @@ export type {
   DockProps,
   DockActionProps,
   SurfaceStatusProps,
+  SurfaceStatusContext,
 } from "./components/patterns/dock.tsx";
 
 // Barra lateral composicional: header/conteúdo/footer e navegação, sem possuir o layout.
@@ -488,13 +488,14 @@ export {
   Sidebar,
   SidebarItem,
   SidebarGroupLabel,
+  SidebarTreeGroup,
   SidebarNav,
 } from "./components/patterns/sidebar.tsx";
 export type {
   SidebarProps,
   SidebarItemProps,
+  SidebarTreeGroupProps,
   SidebarNavGroup,
-  SidebarNavSubgroup,
   SidebarNavItem,
 } from "./components/patterns/sidebar.tsx";
 

package/src/ui/theme.css

@@ -59,6 +59,9 @@
   --context-primary-subtle: color-mix(in oklab, var(--primary) 8%, transparent);
   --context-primary-emphasis: var(--foreground);
   --context-primary-border: color-mix(in oklab, var(--primary) 25%, transparent);
+  /* info/success/warning: base, foreground, subtle e border (12 tokens) valem nos dois temas
+     de propósito — são cores saturadas com alpha, que já se assentam sobre qualquer canvas;
+     só `*-emphasis` (texto sobre o popover) precisa clarear no escuro, e é redefinido em .dark. */
   --context-info: hsl(217 91% 60%);
   --context-info-foreground: hsl(0 0% 100%);
   --context-info-subtle: hsl(217 91% 60% / 0.1);
@@ -82,7 +85,7 @@
   --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-[0.1875rem] + /50,
-     ~86% encosta na borda (89.8%) — um sussurro de foco. */
+     ~86% encosta na borda (92.5%) — um sussurro de foco. */
   --ring: hsl(0 0% 86%);
   --radius: 0.75rem;
 }
@@ -107,10 +110,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. */
+     escuro dava ~1,7:1 sobre o popover — ilegível. ~58% passa o AA como texto, o mesmo
+     salto que os `*-emphasis` abaixo dão para o tom claro. Fundo sólido (Button/Badge/toast
+     danger) 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%);
   --context-info-emphasis: hsl(213 94% 68%);
@@ -272,8 +274,8 @@
   }
   :root::-webkit-scrollbar-thumb,
   :root *::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    border-radius: 9999px;
+    border: 2px solid transparent; /* px: hairline dupla do thumb — não deve escalar com a fonte. */
+    border-radius: 9999px; /* px: raio efetivamente infinito do scrollbar nativo. */
     background-color: transparent;
     background-clip: content-box;
   }
@@ -322,5 +324,55 @@
 
 /* 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);
+  border: 1px solid var(--border); /* px: hairline do bloco de código — 1 pixel físico, não escala. */
+}
+
+/* O Sonner reserva por padrão apenas 1rem para a mídia. A moldura semântica do
+ * Opus ocupa 2.25rem; a coluna precisa ter a mesma medida para não avançar sob
+ * título e descrição. Estas classes são a fronteira estável com o CSS interno
+ * do Sonner, independentemente da ordem em que a biblioteca injeta seus estilos. */
+.opus-toast {
+  gap: 0.75rem;
+}
+
+.opus-toast .opus-toast-icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  margin: 0;
+  align-self: flex-start;
+  align-items: center;
+  justify-content: center;
+}
+
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button]:focus-visible {
+  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--ring) 50%, transparent);
+}
+
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Fechar continua sendo um controle circular de ícone, mas deixa de herdar a
+ * paleta cinza, a medida e o foco particulares do Sonner. */
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button] {
+  box-sizing: border-box;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0;
+  border-radius: 9999rem;
+  background: var(--popover);
+  color: var(--muted-foreground);
+  outline: none;
+  transition: color 150ms, background-color 150ms, box-shadow 150ms;
+}
+
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button]:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.toaster .opus-toast[data-sonner-toast] .opus-toast-close[data-close-button] svg {
+  width: 1rem;
+  height: 1rem;
 }

package/src/vite/design.ts

@@ -21,7 +21,7 @@
  *   // vite --mode design
  */
 
-import { readdirSync, readFileSync } from 'node:fs'
+import { readdirSync } from 'node:fs'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import path from 'node:path'
 import type { Plugin, ViteDevServer } from 'vite'
@@ -40,6 +40,7 @@ import {
   type RuntimeSetup,
   type User,
 } from '../core/index.ts'
+import { readPackageVersion } from '../core/package-version.ts'
 import { mittEvents } from '../events/drivers/mitt.ts'
 import { nodeServer, type NodeServerHandle } from '../server/drivers/node.ts'
 import { serializeResult } from '../server/index.ts'
@@ -148,7 +149,7 @@ export function opusDesign(options: OpusDesignOptions = {}): Plugin {
   const stubEntries = Object.entries(options.stubs ?? {}).sort(
     (a, b) => b[0].length - a[0].length,
   )
-  const opusVersion = readOpusVersion()
+  const opusVersion = readPackageVersion()
 
   let exProxyPrefixes: string[] = []
   let current: Promise<DesignState> | undefined
@@ -373,7 +374,7 @@ export function opusDesign(options: OpusDesignOptions = {}): Plugin {
               sendEnvelope(res, 503, {
                 code: 'design.boot_failed',
                 category: 'dependency',
-                message: `Design runtime failed to boot: ${String(err)}`,
+                message: `O runtime de design não conseguiu iniciar: ${String(err)}`,
               })
               return
             }
@@ -421,7 +422,7 @@ export function opusDesign(options: OpusDesignOptions = {}): Plugin {
             sendEnvelope(res, 503, {
               code: 'design.no_backend',
               category: 'dependency',
-              message: `No backend for "${orphan}" in design mode — add a stub or serve it from the opus runtime`,
+              message: `Sem backend para "${orphan}" em modo design — adicione um stub ou sirva a action pelo runtime do Opus`,
             })
             return
           }
@@ -464,7 +465,7 @@ async function loadEntry(server: ViteDevServer, entry: string): Promise<unknown[
   throw error({
     code: 'design.invalid_entry',
     category: 'internal',
-    message: `Entry "${entry}" must default-export { domains: [...] } or an array of registrables`,
+    message: `O entry "${entry}" precisa exportar por default { domains: [...] } ou uma lista de registráveis`,
   })
 }
 
@@ -637,16 +638,3 @@ function sendEnvelope(res: ServerResponse, status: number, input: ErrorInput): v
   )
 }
 
-function readOpusVersion(): string {
-  // `import.meta.url` sobrevive ao bundling do vite.config (o vite injeta a
-  // URL original do arquivo), então o package.json resolve do source real.
-  try {
-    const pkg = JSON.parse(
-      readFileSync(new URL('../../package.json', import.meta.url), 'utf8'),
-    ) as { version?: string }
-    return pkg.version ?? '0.0.0'
-    /* v8 ignore next 3 — defensivo; o package.json viaja junto do source */
-  } catch {
-    return '0.0.0'
-  }
-}

package/src/ui/components/primitives/alert-dialog.tsx

@@ -1,192 +0,0 @@
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
-
-import { cn } from '../../lib/cn.ts'
-import { Button } from './button.tsx'
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-xs translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border border-border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn(
-        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "grid grid-cols-2 gap-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn(
-        "text-lg font-semibold",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted *:[svg:not([class*='size-'])]:size-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  context = "primary",
-  variant = "solid",
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
-  Pick<React.ComponentProps<typeof Button>, "context" | "variant" | "size">) {
-  return (
-    <Button context={context} variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Action
-        data-slot="alert-dialog-action"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  context = "neutral",
-  variant = "ghost",
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Pick<React.ComponentProps<typeof Button>, "context" | "variant" | "size">) {
-  return (
-    <Button context={context} variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel
-        data-slot="alert-dialog-cancel"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-}

package/src/ui/docs/content/alert-dialog.md

@@ -1,73 +0,0 @@
-## Quase sempre é o `dialog`
-
-Pergunta de sim/não, um aviso a reconhecer, uma string — **não monte isto à mão**: o trio
-`dialog.confirm/alert/prompt` faz em uma linha, e o `body` cobre até corpo com conteúdo
-próprio (lista, detalhe). A demo viva mora na [página do dialog](/ui/confirm). Este
-componente é o **primitivo por baixo deles**.
-
-Então **componha o AlertDialog à mão só quando o trio não alcança**: mais de duas ações, ou
-um layout totalmente custom. É o que as seções abaixo mostram.
-
-## Mais de duas ações
-
-O caso que o `confirm` (binário) não expressa: três saídas. `AlertDialogTrigger` (asChild
-com Button) abre; cada `AlertDialogAction`/`AlertDialogCancel` é uma saída. Diferente do
-Dialog, **não fecha clicando fora** — exige uma escolha.
-
-```tsx preview
-<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button variant="outline">Fechar editor</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Alterações não salvas</AlertDialogTitle>
-      <AlertDialogDescription>
-        Você editou o contrato e ainda não salvou. O que fazer antes de fechar?
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Continuar editando</AlertDialogCancel>
-      <AlertDialogAction variant="outline">Descartar</AlertDialogAction>
-      <AlertDialogAction>Salvar e fechar</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-```
-
-## A estrutura e o botão destrutivo
-
-`AlertDialogHeader` (media/título/descrição) + `AlertDialogFooter` (as ações).
-`context="danger"` no `AlertDialogAction` (ele herda contexto, variante e tamanho do Button)
-comunica que a confirmação é perigosa. Uma confirmação destrutiva **binária** é só
-`dialog.confirm({ context: 'danger' })` — o exemplo abaixo é só para mostrar a composição e
-onde o `context` entra:
-
-```tsx preview
-<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button context="danger">Excluir repositório</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Excluir empresa-x-api?</AlertDialogTitle>
-      <AlertDialogDescription>
-        O repositório sai do workspace e os agentes vinculados perdem o acesso ao código. Não dá pra desfazer.
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancelar</AlertDialogCancel>
-      <AlertDialogAction context="danger">Excluir</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descrição |
-|---|---|---|---|
-| `open` (AlertDialog) | `boolean` | | Estado de aberto no modo controlado — pareie com onOpenChange. No padrão, o Trigger cuida disso. |
-| `onOpenChange` (AlertDialog) | `(open: boolean) => void` | | Chamado quando o diálogo abre ou fecha (Trigger, Cancel, Action ou Esc). |
-| `context` (Action/Cancel) | `'neutral' \| 'primary' \| 'danger'` | `primary` / `neutral` | Significado semântico herdado do Button. |
-| `variant` (Action/Cancel) | `'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'link'` | `solid` / `ghost` | Tratamento visual herdado do Button. |

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

@@ -1,71 +0,0 @@
-## 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. |