@softize/opus 9.1.0 → 10.0.0

package/CHANGELOG.md

@@ -11,6 +11,37 @@ Depois de qualquer bump, rode os gates (`typecheck` · `test` · `opus check` ·
 > tinha ficado sem registro nenhum, o que é exatamente o caso que este arquivo existe
 > pra cobrir.
 
+## 10.0.0 — 2026-08-20
+
+**Breaking — forma usa a escala do Tailwind e superfícies sempre carregam seu foreground.**
+
+- `Card` volta a ser flat por padrão, alinhando a implementação ao contrato já documentado
+  no componente e no catálogo. Consumidores que precisam de elevação devem declarar a
+  intensidade explicitamente (`shadow-sm`, `shadow-md`, etc.).
+- Forma deixa de criar uma taxonomia paralela por componente: `rounded-card` e
+  `rounded-dialog` migram para `rounded-xl`; `rounded-popover`, para `rounded-md`. Os tokens
+  `--radius-card/popover/dialog` saem, e `opus check` acusa classes e overrides antigos.
+- Superfícies `card` e `popover` passam a exigir seu foreground no mesmo fragmento de
+  classes. Dialog, Composer, Chat e o fundo nativo do Calendar foram corrigidos; `opus check`
+  agora reprova `bg-card` sem `text-card-foreground` e `bg-popover` sem
+  `text-popover-foreground`, evitando que a igualdade acidental com o foreground global
+  esconda temas quebrados.
+
+**Migração:** troque `rounded-card` e `rounded-dialog` por `rounded-xl`, e
+`rounded-popover` por `rounded-md`. Remova overrides de `--radius-card`,
+`--radius-dialog` e `--radius-popover`; ajuste `--radius` ou a escala `--radius-*` quando
+necessário. Sempre declare `bg-card text-card-foreground` e
+`bg-popover text-popover-foreground` juntos. `opus check` aponta todos esses casos.
+
+## 9.1.1 — 2026-08-20
+
+**`Ask` leva elicitação estruturada para `@softize/opus/ui/react`.** O componente
+controlado apresenta de uma a quatro `AskQuestion`, deriva `AskAnswer[]` sem tipos
+paralelos e suporta seleção única por radiogroup, seleção múltipla por pills e texto livre
+sempre disponível. Descrições usam Tooltip; teclado, validação, estados `disabled`/`busy`
+e submit acessível ficam no componente. Transporte, SSE, persistência e integração com
+`ChatEvent` continuam sob responsabilidade do consumidor.
+
 ## 9.1.0 — 2026-08-19
 
 **Observabilidade ganha uma porta vendor-neutral no runtime.** `ObservabilityAdapter`
@@ -80,7 +111,6 @@ todas as mensagens que apenas têm comportamento `sticky` disponível.
 fronteira memoizada separada do estado do composer, e cada bloco Markdown reaproveita o
 resultado enquanto seu conteúdo não muda. Conversas longas mantêm o custo de digitação
 constante; durante streaming, somente a mensagem alterada volta a passar pelo parser.
-
 ## 9.0.3 — 2026-08-12
 
 **O pre-push ignora worktrees internos do Maestro.** Projetos sob `.maestro/` pertencem
@@ -123,8 +153,9 @@ depender de coincidências do call site:
   removidos, deixando `ring-*` para foco e estados transitórios.
 - a elevação volta ao vocabulário de intensidade do Tailwind (`shadow-sm`, `shadow-md`,
   `shadow-lg` etc.), com a composição clara e difusa controlada pelo tema do Opus.
-  `Card`/`Composer`, menus/popovers e modais usam respectivamente `sm`, `md` e `lg` como
-  defaults; os aliases por papel e as variáveis intermediárias `--elevation-*` saem.
+  Na 9.0.0, `Card`/`Composer`, menus/popovers e modais passaram a usar respectivamente
+  `sm`, `md` e `lg` como defaults; os aliases por papel e as variáveis intermediárias
+  `--elevation-*` saíram. O default do `Card` foi posteriormente removido na 10.0.0.
 - `shadow-lg` ganha spread negativo e menos opacidade: mantém alcance, mas deixa de
   engrossar visualmente a borda no ponto de contato com a superfície.
 - toda a escala passa a declarar a receita diretamente em `--shadow-*`, preservando a

package/bin/lib/check.mjs

@@ -53,11 +53,25 @@ const REMOVED_UI_TOKENS = new Map([
   ['shadow-card', 'use `shadow-sm`'],
   ['shadow-popover', 'use `shadow-md`'],
   ['shadow-dialog', 'use `shadow-lg`'],
+  ['rounded-card', 'use `rounded-xl`'],
+  ['rounded-popover', 'use `rounded-md`'],
+  ['rounded-dialog', 'use `rounded-xl`'],
   ['--edge-value', 'remova o override; a aresta agora usa `--border`'],
   ['--color-edge', 'remova o token; a aresta agora usa `--border`'],
   ['--elevation-card', 'use/ajuste `--shadow-sm`'],
   ['--elevation-popover', 'use/ajuste `--shadow-md`'],
   ['--elevation-dialog', 'use/ajuste `--shadow-lg`'],
+  ['--radius-card', 'use/ajuste `--radius-xl`'],
+  ['--radius-popover', 'use/ajuste `--radius-md`'],
+  ['--radius-dialog', 'use/ajuste `--radius-xl`'],
+])
+
+// Superfícies com foreground próprio formam um par indivisível. Exigir as duas
+// utilities no mesmo fragmento de classes torna a regra local, revisável e evita que a
+// igualdade acidental com `--foreground` esconda um tema quebrado.
+const UI_SURFACE_PAIRS = new Map([
+  ['bg-card', 'text-card-foreground'],
+  ['bg-popover', 'text-popover-foreground'],
 ])
 
 /** Os três nomes que denotam action/contrato — o arquivo sem nenhum deles é pulado. */
@@ -399,7 +413,7 @@ export function checkUiMigrations(file, text) {
       action: token,
       line,
       file,
-      message: `token removido na 9.0.0 — ${replacement}.`,
+      message: `token removido — ${replacement}.`,
     })
   }
   for (const [index, raw] of source.split(/\r?\n/).entries()) {
@@ -422,6 +436,28 @@ export function checkUiMigrations(file, text) {
     const objectProperty = /\b(?!aria(?:Label|Description)\b|label\b|title\b|description\b|text\b|message\b|note\b|content\b)[A-Za-z_$][\w$-]*\s*:\s*$/.test(beforeValue)
     const classListCall = /\bclassList\.(?:add|remove|toggle|replace|contains)\s*\([^)]*$/.test(beforeValue)
     const stylePropertyCall = /\b(?:style\.)?setProperty\s*\([^)]*$/.test(beforeValue)
+    const utilityContext = classAttribute || classExpression || utilityHelper || classBinding || objectProperty || classListCall
+    const utilities = value.trim().split(/\s+/).filter(Boolean)
+    for (const [background, foreground] of UI_SURFACE_PAIRS) {
+      const pairKey = `surface:${background}`
+      const hasUtility = (expected) => utilities.some((utility) => {
+        const normalized = utility.replace(/^!/, '').replace(/!$/, '')
+        return normalized === expected || normalized.startsWith(`${expected}/`)
+      })
+      const hasBackground = hasUtility(background)
+      const hasForeground = hasUtility(foreground)
+      if (!seen.has(pairKey) && utilityContext && hasBackground && !hasForeground) {
+        seen.add(pairKey)
+        findings.push({
+          rule: 'unpaired-ui-surface',
+          level: 'error',
+          action: background,
+          line: startLine,
+          file,
+          message: `superfície sem o foreground correspondente — use \`${background} ${foreground}\` no mesmo fragmento de classes.`,
+        })
+      }
+    }
     for (const [token, replacement] of REMOVED_UI_TOKENS) {
       const usedAsUtility = matchesToken(value, token) && (
         classAttribute || classExpression || utilityHelper || classBinding || objectProperty ||

package/docs/elevation-scale.md

@@ -32,8 +32,8 @@ uma superfície que precisava apenas de mais presença acabava recebendo um nome
 - Qualquer componente pode subir ou descer um degrau sem adotar o nome de outro papel.
 - A escala global afeta todo uso legítimo de `shadow-*`, inclusive consumidores externos;
   isso é intencional e fica declarado no tema.
-- Forma e cor podem continuar semânticas (`rounded-card`, `bg-popover`), pois não
-  representam uma intensidade intercambiável.
+- Cor pode continuar semântica (`bg-popover`); forma usa diretamente a escala
+  (`rounded-md`, `rounded-xl`). Nenhuma delas representa intensidade intercambiável.
 
 ## Alternativas descartadas
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "9.1.0",
+  "version": "10.0.0",
   "description": "End-to-end action protocol for TypeScript. Single package with subpath exports (core + adapters).",
   "license": "MIT",
   "type": "module",

package/registry/skills/build-opus-ui/SKILL.md

@@ -20,12 +20,17 @@ existentes, mantendo navegação observável e componentes reutilizáveis sem la
 4. Manter margem e posicionamento no consumidor; componente reutilizável controla apenas
    seu interior.
 5. Evoluir um pattern compartilhado apenas quando a recorrência e o contrato estiverem claros.
-6. Testar estados de loading, vazio, erro, sucesso, permissão e interação relevante.
+6. Tratar tokens de superfície como pares indivisíveis no mesmo fragmento de classes:
+   `bg-card text-card-foreground` e `bg-popover text-popover-foreground`. Não depender da
+   igualdade atual com `--foreground`, porque o app pode sobrescrever cada par.
+7. Usar diretamente a escala `rounded-*`; não criar radius por nome de componente quando
+   `rounded-sm` a `rounded-xl` já expressam a forma.
+8. Testar estados de loading, vazio, erro, sucesso, permissão e interação relevante.
 
 ## Verificação
 
-Rodar testes focados, typecheck e build da superfície. Inspecionar visualmente a rota real
-e validar navegação por URL quando aplicável.
+Rodar `opus check`, testes focados, typecheck e build da superfície. Inspecionar visualmente
+a rota real e validar navegação por URL quando aplicável.
 
 ## Limites
 

package/registry/skills/build-opus-ui/references/evaluations.md

@@ -3,3 +3,5 @@
 - Dispara: “Monte a tela de edição usando a form action do Opus.”
 - Não dispara: “Ajuste o CSS de um e-mail estático.”
 - Execução: implementar uma lista com modal roteável e provar loading, erro, vazio e back.
+- Reprova: criar uma casca `bg-card` que herda o texto global ou introduzir `rounded-widget`
+  quando a escala `rounded-*` atende ao papel.

package/registry/skills/build-opus-ui/references/ui-patterns.md

@@ -5,4 +5,7 @@
   operação, não a uma tela isolada.
 - URL representa estado que precisa sobreviver a refresh, deep link ou histórico.
 - Componentes compartilhados não impõem margem externa; páginas e shells compõem layout.
+- Superfície semântica e foreground são um par local (`bg-card text-card-foreground`,
+  `bg-popover text-popover-foreground`); herança do foreground global não substitui o par.
+- Forma usa a escala `rounded-*`; nome de componente não cria uma segunda escala de radius.
 - Catálogo e API efetivos vêm dos exports da versão instalada, não de memória ou exemplo antigo.

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

@@ -52,7 +52,7 @@ function AlertDialogContent({
       <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-dialog 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",
+          "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}

package/src/ui/components/primitives/ask.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react'
+import type { AskAnswer, AskQuestion } from '../../../core/index.ts'
+import { cn } from '../../lib/cn.ts'
+import { Button } from './button.tsx'
+import { Card } from './card.tsx'
+import { Input } from './input.tsx'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.tsx'
+
+export interface AskProps {
+  /** Uma a quatro perguntas do contrato de elicitação. */
+  questions: AskQuestion[]
+  /** Respostas controladas, na mesma ordem de `questions`. Entradas ausentes são vazias. */
+  answers: AskAnswer[]
+  onChange: (answers: AskAnswer[]) => void
+  /** Dispara somente quando toda pergunta tem uma opção ou texto livre. */
+  onSubmit: (answers: AskAnswer[]) => void
+  disabled?: boolean
+  busy?: boolean
+  className?: string
+}
+
+function answerFor(question: AskQuestion, answer?: AskAnswer): AskAnswer {
+  const optionLabels = new Set(question.options.map((option) => option.label))
+  const selected = (answer?.selected ?? []).filter((label) => optionLabels.has(label))
+  return {
+    header: question.header?.trim() || question.question,
+    selected: question.multiSelect ? selected : selected.slice(0, 1),
+    ...(answer?.text === undefined ? {} : { text: answer.text }),
+  }
+}
+
+function isAnswered(answer: AskAnswer): boolean {
+  return answer.selected.length > 0 || (answer.text?.trim() ?? '') !== ''
+}
+
+/** Elicitação estruturada controlada. Não executa transporte nem mantém estado de domínio. */
+export function Ask({
+  questions,
+  answers,
+  onChange,
+  onSubmit,
+  disabled = false,
+  busy = false,
+  className,
+}: AskProps): React.ReactElement {
+  const id = React.useId()
+  const questionSignature = JSON.stringify(questions)
+  const [submittedSignature, setSubmittedSignature] = React.useState<string>()
+  const submitted = submittedSignature === questionSignature
+  const normalized = questions.map((question, index) => answerFor(question, answers[index]))
+  const validCount = questions.length >= 1 && questions.length <= 4
+  const allAnswered = validCount && normalized.every(isAnswered)
+  const locked = disabled || busy
+
+  const changeAt = (index: number, next: AskAnswer): void => {
+    const nextAnswers = [...normalized]
+    nextAnswers[index] = next
+    onChange(nextAnswers)
+  }
+
+  return (
+    <Card
+      asChild
+      className={cn('p-4', className)}
+      aria-busy={busy || undefined}
+      aria-disabled={disabled || undefined}
+    >
+      <form
+        data-slot="ask"
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault()
+          setSubmittedSignature(questionSignature)
+          if (allAnswered && !locked) onSubmit(normalized)
+        }}
+      >
+        <TooltipProvider>
+          <div className="space-y-4">
+            {questions.map((question, questionIndex) => {
+              const answer = normalized[questionIndex]
+              const questionId = `${id}-question-${questionIndex}`
+              const errorId = `${id}-error-${questionIndex}`
+              const invalid = submitted && !isAnswered(answer)
+
+              return (
+                <fieldset key={questionId} disabled={locked} className="min-w-0 space-y-2.5">
+                  <legend id={questionId} className="text-sm font-medium text-foreground">
+                    {question.question}
+                  </legend>
+                  <div
+                    role={question.multiSelect ? 'group' : 'radiogroup'}
+                    aria-labelledby={questionId}
+                    aria-describedby={invalid ? errorId : undefined}
+                    className="flex flex-wrap gap-2"
+                    onKeyDown={question.multiSelect ? undefined : (event) => {
+                      if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return
+                      const radios = Array.from(
+                        event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="radio"]:not(:disabled)'),
+                      )
+                      const current = radios.indexOf(document.activeElement as HTMLButtonElement)
+                      if (current < 0 || radios.length === 0) return
+                      event.preventDefault()
+                      const direction = event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1
+                      const next = radios[(current + direction + radios.length) % radios.length]
+                      next.focus()
+                      next.click()
+                    }}
+                  >
+                    {question.options.map((option) => {
+                      const selected = answer.selected.includes(option.label)
+                      const firstSelected = answer.selected[0]
+                      const firstOption = question.options[0]?.label
+                      const optionButton = (
+                        <Button
+                          type="button"
+                          size="sm"
+                          shape="pill"
+                          variant={selected ? 'secondary' : 'outline'}
+                          role={question.multiSelect ? undefined : 'radio'}
+                          aria-checked={question.multiSelect ? undefined : selected}
+                          aria-pressed={question.multiSelect ? selected : undefined}
+                          tabIndex={question.multiSelect
+                            ? undefined
+                            : selected || (firstSelected === undefined && option.label === firstOption)
+                              ? 0
+                              : -1}
+                          disabled={locked}
+                          onClick={() => {
+                            const selectedOptions = question.multiSelect
+                              ? selected
+                                ? answer.selected.filter((label) => label !== option.label)
+                                : [...answer.selected, option.label]
+                              : [option.label]
+                            changeAt(questionIndex, { ...answer, selected: selectedOptions })
+                          }}
+                        >
+                          {option.label}
+                        </Button>
+                      )
+
+                      return option.description ? (
+                        <Tooltip key={option.label}>
+                          <TooltipTrigger asChild>{optionButton}</TooltipTrigger>
+                          <TooltipContent>{option.description}</TooltipContent>
+                        </Tooltip>
+                      ) : (
+                        <React.Fragment key={option.label}>{optionButton}</React.Fragment>
+                      )
+                    })}
+                  </div>
+                  <Input
+                    value={answer.text ?? ''}
+                    onChange={(event) => changeAt(questionIndex, { ...answer, text: event.target.value })}
+                    placeholder="Outro (opcional)…"
+                    aria-label={`Outra resposta para: ${question.question}`}
+                    aria-invalid={invalid || undefined}
+                    aria-describedby={invalid ? errorId : undefined}
+                    disabled={locked}
+                  />
+                  {invalid && (
+                    <p id={errorId} className="text-sm text-destructive">
+                      Escolha uma opção ou escreva uma resposta.
+                    </p>
+                  )}
+                </fieldset>
+              )
+            })}
+          </div>
+        </TooltipProvider>
+        {!validCount && (
+          <p role="alert" className="mt-3 text-sm text-destructive">
+            Ask aceita de 1 a 4 perguntas.
+          </p>
+        )}
+        <div aria-live="polite" className="sr-only">
+          {submitted && !allAnswered ? 'Há perguntas sem resposta.' : ''}
+        </div>
+        <div className="mt-4 flex justify-end">
+          <Button type="submit" size="sm" busy={busy} disabled={disabled || !validCount}>
+            Responder
+          </Button>
+        </div>
+      </form>
+    </Card>
+  )
+}

package/src/ui/components/primitives/calendar.tsx

@@ -76,7 +76,7 @@ function Calendar({
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "absolute inset-0 bg-popover opacity-0",
+          "absolute inset-0 bg-popover text-popover-foreground opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(

package/src/ui/components/primitives/card.tsx

@@ -4,8 +4,8 @@ import { cn } from '../../lib/cn.ts'
 
 /**
  * Card — a superfície da casa: SÓ a casca (borda + raio + bg). Divergência DECLARADA vs
- * shadcn: `rounded-lg` (não `rounded-xl`), FLAT (sem `shadow-sm`) e SEM `flex/gap/py`
- * forçados. O upstream embute `py-6 gap-6` + slots `px-6`, o que briga com card-box
+ * shadcn: FLAT (sem `shadow-sm`) e SEM `flex/gap/py` forçados. O upstream embute
+ * `py-6 gap-6` + slots `px-6`, o que briga com card-box
  * simples (o `gap-6` do Card + o `space-y` do consumidor = espaçamento dobrado) — por isso
  * a casa hand-rollava. Aqui o padding mora no SLOT (Header/Content/Footer) ou no `className`
  * do consumidor (box simples) — mesmo modelo do Dialog.
@@ -24,7 +24,7 @@ export function Card({
 }): React.ReactElement {
   const Comp = asChild ? Slot : 'div'
   return (
-    <Comp data-slot="card" className={cn('rounded-card border border-border bg-card text-card-foreground shadow-sm', className)} {...props} />
+    <Comp data-slot="card" className={cn('rounded-xl border border-border bg-card text-card-foreground', className)} {...props} />
   )
 }
 

package/src/ui/components/primitives/chat.tsx

@@ -163,7 +163,7 @@ const ChatTranscript = React.memo(function ChatTranscript({
                       href={item.artifact.ref}
                       target="_blank"
                       rel="noreferrer"
-                      className="rounded-xl border bg-card px-3.5 py-2 text-sm underline-offset-2 hover:underline"
+                      className="rounded-xl border bg-card px-3.5 py-2 text-sm text-card-foreground underline-offset-2 hover:underline"
                     >
                       {item.artifact.title ?? item.artifact.ref}
                     </a>

package/src/ui/components/primitives/composer.tsx

@@ -34,7 +34,7 @@ export interface ComposerProps {
 
 /**
  * <Composer /> — a caixa de escrever da casa: textarea (Enter envia / Shift+Enter quebra
- * linha) numa pílula elevada (rounded-card + border + shadow-sm), com o enviar dentro.
+ * linha) numa pílula elevada (rounded-xl + border + shadow-sm), com o enviar dentro.
  * É o composer do `<Chat>` extraído pra ser reusável SOZINHO — o Maestro cria sessão com
  * ele (sem chat nenhum), e a GB prende seletores nele. Com `actions`, ganha uma barra
  * embaixo pros seletores; sem, é a linha única de sempre.
@@ -111,7 +111,7 @@ export function Composer({
         fire()
       }}
       className={cn(
-        'rounded-card border border-border bg-card shadow-sm transition focus-within:ring-2 focus-within:ring-primary/15',
+        'rounded-xl border border-border bg-card text-card-foreground shadow-sm transition',
         twoRow ? 'p-2' : 'relative flex items-end gap-2 p-2 pl-3.5',
         className,
       )}

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

@@ -54,7 +54,7 @@ export function DialogContent({
           // Superfície PURA: só a casca (borda/bg/raio/sombra) + coluna flex com teto de
           // altura. O padding mora nos SLOTS (Header/Body/Footer), não aqui — assim ninguém
           // precisa negar margem pra escapar de um p-6 embutido.
-          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-dialog border border-border bg-card shadow-lg duration-200 outline-none 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 sm:max-w-lg",
+          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-lg duration-200 outline-none 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 sm:max-w-lg",
           className,
         )}
         {...props}

package/src/ui/components/primitives/menu.tsx

@@ -45,7 +45,7 @@ function MenuContent({
         data-slot="menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-popover border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] 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",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] 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}
@@ -233,7 +233,7 @@ function MenuSubContent({
     <MenuPrimitive.SubContent
       data-slot="menu-sub-content"
       className={cn(
-        "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-popover border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] 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",
+        "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] 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}

package/src/ui/components/primitives/popover.tsx

@@ -34,7 +34,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-popover border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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}

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

@@ -0,0 +1,31 @@
+Elicitação estruturada controlada baseada diretamente em `AskQuestion` e `AskAnswer`. O componente só apresenta e valida respostas; transporte, persistência e continuação do agente pertencem ao consumidor.
+
+```tsx preview
+const [answers, setAnswers] = React.useState([])
+
+render(
+  <Ask
+      questions={[
+        {
+          question: 'Qual ambiente devemos usar?',
+          header: 'Ambiente',
+          options: [
+            { label: 'Produção', description: 'Usa dados e serviços reais.' },
+            { label: 'Homologação', description: 'Usa o ambiente de validação.' },
+          ],
+        },
+        {
+          question: 'Quais verificações devo executar?',
+          header: 'Verificações',
+          multiSelect: true,
+          options: [{ label: 'Testes' }, { label: 'Typecheck' }, { label: 'Build' }],
+        },
+      ]}
+      answers={answers}
+      onChange={setAnswers}
+      onSubmit={(next) => console.log(next)}
+  />,
+)
+```
+
+Cada pergunta exige pelo menos uma opção válida selecionada **ou** texto livre não vazio. `busy` mostra o progresso no botão e trava os controles; `disabled` apenas trava a interação. A ordem de `answers` acompanha a ordem de `questions`, e o `header` de cada resposta é derivado de `question.header` (ou do próprio enunciado quando o header estiver vazio).

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

@@ -1,6 +1,6 @@
 ## Box simples
 
-O uso mais comum: a superfície de conteúdo em repouso (`rounded-card` + `border` + `shadow-sm` — ver Tokens & Tema → Escala de elevação) 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).
+O uso mais comum: a superfície de conteúdo em repouso (`rounded-xl` + `border`), flat por padrão, 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). Quando a hierarquia realmente pedir elevação, declare a intensidade explicitamente, por exemplo `className="shadow-sm"`.
 
 ```tsx preview col
 <Card className="p-4">

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

@@ -1,6 +1,6 @@
 ## Básico
 
-A caixa de escrever da casa: textarea numa pílula elevada (`rounded-card` + `border` + `shadow-sm`), **Enter** envia / **Shift+Enter** quebra linha, enviar dentro. É o composer do [Chat](/components/chat) extraído — use SOZINHO quando há entrada de texto mas não um chat (ex.: criar uma sessão). Controlado: o dono do texto é você. Os callbacks opcionais `onHistoryPrevious` e `onHistoryNext` permitem que esse dono consuma **↑/↓**; sem eles, as setas mantêm o comportamento nativo da textarea.
+A caixa de escrever da casa: textarea numa pílula elevada (`rounded-xl` + `border` + `shadow-sm`), **Enter** envia / **Shift+Enter** quebra linha, enviar dentro. É o composer do [Chat](/components/chat) extraído — use SOZINHO quando há entrada de texto mas não um chat (ex.: criar uma sessão). Controlado: o dono do texto é você. Os callbacks opcionais `onHistoryPrevious` e `onHistoryNext` permitem que esse dono consuma **↑/↓**; sem eles, as setas mantêm o comportamento nativo da textarea.
 
 ```tsx preview col
 const [text, setText] = React.useState('')

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

@@ -87,7 +87,7 @@ render(
     {LEVELS.map(([level, desc]) => (
       <div key={level} className="flex flex-col items-center gap-3">
         <div
-          className={'flex h-24 w-40 items-center justify-center rounded-card border border-border bg-card text-xs shadow-' + level}
+          className={'flex h-24 w-40 items-center justify-center rounded-xl border border-border bg-card text-xs text-card-foreground shadow-' + level}
         >
           Texto
         </div>
@@ -110,9 +110,9 @@ render(
 ## Radius
 
 > Escala mapeada no `@theme inline` preservando o sentido pré-v4 dos utilitários `rounded-*`
-> (neutraliza o rename do Tailwind v4). E a forma também tem papel: `rounded-card/popover/dialog`
-> são a forma das superfícies elevadas (separada da intensidade de `shadow-*`), derivados de `--radius` — a
-> identidade por app escala tudo junto. Controles (botões, inputs) seguem na escala sm–xl.
+> (neutraliza o rename do Tailwind v4). Componentes e superfícies usam diretamente essa
+> escala: a forma não cria uma segunda taxonomia por componente. A identidade por app
+> sobrescreve `--radius` e escala tudo junto.
 
 ```tsx preview
 render(
@@ -122,9 +122,6 @@ render(
       ['rounded-md', 'radius − 2px'],
       ['rounded-lg', 'radius (0.625rem)'],
       ['rounded-xl', 'radius + 4px'],
-      ['rounded-popover', 'papel popover (radius − 2px)'],
-      ['rounded-dialog', 'papel dialog (radius + 6px)'],
-      ['rounded-card', 'papel card (radius + 6px)'],
     ].map(([cls, calc]) => (
       <div key={cls} className="flex items-center gap-3">
         <div className={'h-12 w-12 border-2 border-foreground/30 bg-muted ' + cls} />

package/src/ui/docs/registry.tsx

@@ -56,6 +56,7 @@ import buttonGroupMd from './content/button-group.md?raw'
 import calendarMd from './content/calendar.md?raw'
 import cardMd from './content/card.md?raw'
 import carouselMd from './content/carousel.md?raw'
+import askMd from './content/ask.md?raw'
 import chatMd from './content/chat.md?raw'
 import checkboxMd from './content/checkbox.md?raw'
 import collapsibleMd from './content/collapsible.md?raw'
@@ -316,6 +317,7 @@ export const UI_SECTIONS: DocSection[] = [
       {
         label: 'IA',
         pages: [
+          { slug: 'ask', title: 'Ask', render: comp('Ask', 'ask', askMd) },
           { slug: 'chat', title: 'Chat', render: comp('Chat', 'chat', chatMd) },
           { slug: 'composer', title: 'Composer', render: comp('Composer', 'composer', composerMd) },
         ],

package/src/ui/meta.ts

@@ -11,6 +11,12 @@ import type { ComponentMeta } from './index.ts'
 
 /** Todos os metas, chaveados pelo nome canônico (kebab). Fonte única — zero duplicação. */
 export const componentMeta = {
+  'ask': {
+    name: 'ask',
+    ancestry: 'opus',
+    whenToUse:
+      'Elicitação estruturada controlada para 1–4 perguntas `AskQuestion`: opções single/multi em pills, texto livre opcional, validação e submit de `AskAnswer[]`. Não faz transporte, persistência nem integração automática com ChatEvent; o consumidor controla `answers`/`onChange` e conecta `onSubmit` ao canal apropriado.',
+  },
   'alert': {
     name: 'alert',
     ancestry: 'opus',
@@ -33,7 +39,7 @@ export const componentMeta = {
     name: 'card',
     ancestry: 'shadcn',
     whenToUse:
-      'Superfície da casa (bg-card + borda + rounded-lg, flat). Box simples: `<Card className="p-4">…</Card>`. Estruturado: Card > CardHeader(CardTitle/CardDescription) + CardContent + CardFooter — o padding mora nos slots (como o Dialog). Divergência declarada vs shadcn: rounded-lg, sem shadow, sem flex/gap forçados (o upstream brigava com card-box simples).',
+      'Superfície da casa (bg-card + text-card-foreground + borda + rounded-xl, flat). Box simples: `<Card className="p-4">…</Card>`. Estruturado: Card > CardHeader(CardTitle/CardDescription) + CardContent + CardFooter — o padding mora nos slots (como o Dialog). Divergência declarada vs shadcn: sem shadow e sem flex/gap forçados (o upstream brigava com card-box simples).',
   },
   'chat': {
     name: 'chat',

package/src/ui/react.tsx

@@ -19,6 +19,8 @@ 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 { Ask } from './components/primitives/ask.tsx'
+export type { AskProps } from './components/primitives/ask.tsx'
 export { Composer } from './components/primitives/composer.tsx'
 export type { ComposerProps } from './components/primitives/composer.tsx'
 export { Copyable } from './components/primitives/copyable.tsx'

package/src/ui/theme.css

@@ -137,13 +137,6 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 
-  /* Forma por papel (rounded-card/popover/dialog), separada da intensidade de elevação.
-     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);
-
   /* Escala Tailwind, com receita direta para o compilador preservar modifiers `/opacity`.
      `light-dark()` mantém o peso adequado em cada tema sem uma variável intermediária. */
   --shadow-2xs: 0 1px 2px -1px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.12));