@softize/opus 22.2.0 → 24.0.0

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

@@ -1,36 +1,43 @@
-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'
+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 { Input } from "./input.tsx";
+import { Surface } from "../patterns/surface.tsx";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip.tsx";
 
 export interface AskProps {
   /** Uma a quatro perguntas do contrato de elicitação. */
-  questions: AskQuestion[]
+  questions: AskQuestion[];
   /** Respostas controladas, na mesma ordem de `questions`. Entradas ausentes são vazias. */
-  answers: AskAnswer[]
-  onChange: (answers: AskAnswer[]) => void
+  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
+  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))
+  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() ?? '') !== ''
+  return answer.selected.length > 0 || (answer.text?.trim() ?? "") !== "";
 }
 
 /** Elicitação estruturada controlada. Não executa transporte nem mantém estado de domínio. */
@@ -43,25 +50,29 @@ export function Ask({
   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 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)
-  }
+    const nextAnswers = [...normalized];
+    nextAnswers[index] = next;
+    onChange(nextAnswers);
+  };
 
   return (
-    <Card
+    <Surface
       asChild
-      className={cn('p-4', className)}
+      framed
+      elevation="raised"
+      className={cn("p-4", className)}
       aria-busy={busy || undefined}
       aria-disabled={disabled || undefined}
     >
@@ -69,89 +80,142 @@ export function Ask({
         data-slot="ask"
         noValidate
         onSubmit={(event) => {
-          event.preventDefault()
-          setSubmittedSignature(questionSignature)
-          if (allAnswered && !locked) onSubmit(normalized)
+          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)
+              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">
+                <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'}
+                    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()
-                    }}
+                    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 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"
-                          context={selected ? 'primary' : 'neutral'}
-                          variant={selected ? 'solid' : '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}
+                          context={selected ? "primary" : "neutral"}
+                          variant={selected ? "solid" : "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.filter(
+                                    (label) => label !== option.label,
+                                  )
                                 : [...answer.selected, option.label]
-                              : [option.label]
-                            changeAt(questionIndex, { ...answer, selected: selectedOptions })
+                              : [option.label];
+                            changeAt(questionIndex, {
+                              ...answer,
+                              selected: selectedOptions,
+                            });
                           }}
                         >
                           {option.label}
                         </Button>
-                      )
+                      );
 
                       return option.description ? (
                         <Tooltip key={option.label}>
-                          <TooltipTrigger asChild>{optionButton}</TooltipTrigger>
+                          <TooltipTrigger asChild>
+                            {optionButton}
+                          </TooltipTrigger>
                           <TooltipContent>{option.description}</TooltipContent>
                         </Tooltip>
                       ) : (
-                        <React.Fragment key={option.label}>{optionButton}</React.Fragment>
-                      )
+                        <React.Fragment key={option.label}>
+                          {optionButton}
+                        </React.Fragment>
+                      );
                     })}
                   </div>
                   <Input
-                    value={answer.text ?? ''}
-                    onChange={(event) => changeAt(questionIndex, { ...answer, text: event.target.value })}
+                    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}
@@ -159,12 +223,15 @@ export function Ask({
                     disabled={locked}
                   />
                   {invalid && (
-                    <p id={errorId} className="text-sm text-context-danger-emphasis">
+                    <p
+                      id={errorId}
+                      className="text-sm text-context-danger-emphasis"
+                    >
                       Escolha uma opção ou escreva uma resposta.
                     </p>
                   )}
                 </fieldset>
-              )
+              );
             })}
           </div>
         </TooltipProvider>
@@ -174,14 +241,19 @@ export function Ask({
           </p>
         )}
         <div aria-live="polite" className="sr-only">
-          {submitted && !allAnswered ? 'Há perguntas sem resposta.' : ''}
+          {submitted && !allAnswered ? "Há perguntas sem resposta." : ""}
         </div>
         <div className="mt-4 flex justify-end">
-          <Button type="submit" size="sm" busy={busy} disabled={disabled || !validCount}>
+          <Button
+            type="submit"
+            size="sm"
+            busy={busy}
+            disabled={disabled || !validCount}
+          >
             Responder
           </Button>
         </div>
       </form>
-    </Card>
-  )
+    </Surface>
+  );
 }

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

@@ -32,7 +32,7 @@ export interface ButtonStyleOptions {
 }
 
 const baseClasses =
-  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 active:brightness-90 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 
 /** Padding e ritmo por tamanho; altura e quadrado vêm da escala compartilhada. */
 const sizeClasses: Record<ButtonSize, string> = {
@@ -48,17 +48,18 @@ const sizeClasses: Record<ButtonSize, string> = {
 
 const solidClasses: Record<ButtonContext, string> = {
   neutral:
-    "bg-context-neutral text-context-neutral-foreground hover:brightness-95",
+    "bg-context-neutral text-context-neutral-foreground hover:brightness-95 active:brightness-90",
   primary:
-    "bg-context-primary text-context-primary-foreground hover:brightness-95",
+    "bg-context-primary text-context-primary-foreground hover:brightness-95 active:brightness-90",
   warning:
-    "bg-context-warning text-context-warning-foreground hover:brightness-95",
+    "bg-context-warning text-context-warning-foreground hover:brightness-95 active:brightness-90",
   danger:
-    "bg-context-danger text-context-danger-foreground hover:brightness-95 focus-visible:ring-context-danger/20",
+    "bg-context-danger text-context-danger-foreground hover:brightness-95 active:brightness-90 focus-visible:ring-context-danger/20",
 };
 
 const subtleClasses: Record<ButtonContext, string> = {
-  neutral: "bg-context-neutral-subtle text-foreground hover:bg-context-neutral",
+  neutral:
+    "bg-context-neutral-subtle text-foreground hover:bg-interaction-hover active:bg-interaction-pressed",
   primary:
     "bg-context-primary-subtle text-context-primary-emphasis hover:bg-context-primary/15",
   warning:
@@ -69,9 +70,9 @@ const subtleClasses: Record<ButtonContext, string> = {
 
 const outlineClasses: Record<ButtonContext, string> = {
   neutral:
-    "border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
+    "border border-input bg-transparent text-foreground hover:bg-interaction-hover hover:text-accent-foreground active:bg-interaction-pressed",
   primary:
-    "border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
+    "border border-input bg-transparent text-foreground hover:bg-interaction-hover hover:text-accent-foreground active:bg-interaction-pressed",
   warning:
     "border border-context-warning-border bg-transparent text-context-warning-emphasis hover:bg-context-warning-subtle",
   danger:
@@ -79,7 +80,8 @@ const outlineClasses: Record<ButtonContext, string> = {
 };
 
 const ghostClasses: Record<ButtonContext, string> = {
-  neutral: "text-foreground hover:bg-accent hover:text-accent-foreground",
+  neutral:
+    "text-foreground hover:bg-interaction-hover hover:text-accent-foreground active:bg-interaction-pressed",
   primary: "text-context-primary-emphasis hover:bg-context-primary-subtle",
   warning: "text-context-warning-emphasis hover:bg-context-warning-subtle",
   danger: "text-context-danger-emphasis hover:bg-context-danger-subtle",

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

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { CheckIcon, MinusIcon } from "lucide-react"
-import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import * as React from "react";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
+import { cn } from "../../lib/cn.ts";
 
 function Checkbox({
   className,
@@ -12,8 +12,8 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer group/checkbox size-4 shrink-0 rounded-[0.25rem] border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-context-danger/40 dark:data-[state=checked]:bg-primary dark:data-[state=indeterminate]:bg-primary",
-        className
+        "peer group/checkbox size-4 shrink-0 rounded-[0.25rem] border border-input bg-control transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:aria-invalid:ring-context-danger/40",
+        className,
       )}
       {...props}
     >
@@ -32,7 +32,7 @@ function Checkbox({
         />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };

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

@@ -152,7 +152,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-interaction-selected data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className,
       )}
       {...props}

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

@@ -1,35 +1,35 @@
-import * as React from 'react'
-import { SendHorizontalIcon } from 'lucide-react'
-import { cn } from '../../lib/cn.ts'
-import { Button } from './button.tsx'
-import { Spinner } from './spinner.tsx'
-import { Textarea } from './textarea.tsx'
+import * as React from "react";
+import { SendHorizontalIcon } from "lucide-react";
+import { cn } from "../../lib/cn.ts";
+import { Button } from "./button.tsx";
+import { Spinner } from "./spinner.tsx";
+import { Textarea } from "./textarea.tsx";
 
 export interface ComposerProps {
   /** Texto (controlado): o dono do estado é o consumidor — o `<Chat>` por dentro, ou o app
    *  (ex.: o composer de criação de sessão do Maestro, que nem tem histórico). */
-  value: string
-  onChange: (value: string) => void
+  value: string;
+  onChange: (value: string) => void;
   /** Enter (sem Shift) ou o botão enviar. Só dispara quando dá pra enviar (ver `submitDisabled`). */
-  onSubmit: () => void
+  onSubmit: () => void;
   /** Navegação opcional pelo histórico do dono do composer. Retorne `true` quando a tecla
    *  foi consumida; o `<Chat>` usa isso para ↑/↓ sem interferir no cursor normal. */
-  onHistoryPrevious?: () => boolean
-  onHistoryNext?: () => boolean
+  onHistoryPrevious?: () => boolean;
+  onHistoryNext?: () => boolean;
   /** Trava o composer enquanto o turno/ação corre — o enviar vira spinner. */
-  busy?: boolean
+  busy?: boolean;
   /** Gate EXTRA de envio além de "vazio" e "busy" (ex.: falta escolher o app). Desabilita o
    *  enviar sem esconder a barra. */
-  submitDisabled?: boolean
-  placeholder?: string
-  rows?: number
-  autoFocus?: boolean
+  submitDisabled?: boolean;
+  placeholder?: string;
+  rows?: number;
+  autoFocus?: boolean;
   /** Controles discretos na barra de ações, à ESQUERDA do enviar (seletores de app, agente,
    *  contexto…). Presente → o composer vira DUAS LINHAS (textarea em cima, barra limpa
    *  embaixo); ausente → linha única (textarea + enviar inline), o composer clássico do Chat.
    *  Estilize os controles como discretos (ghost/sem borda) — a barra não é um formulário. */
-  actions?: React.ReactNode
-  className?: string
+  actions?: React.ReactNode;
+  className?: string;
 }
 
 /**
@@ -47,17 +47,17 @@ export function Composer({
   onHistoryNext,
   busy = false,
   submitDisabled = false,
-  placeholder = 'Escreva uma mensagem…',
+  placeholder = "Escreva uma mensagem…",
   rows = 1,
   autoFocus,
   actions,
   className,
 }: ComposerProps): React.ReactElement {
-  const canSubmit = value.trim() !== '' && !busy && !submitDisabled
+  const canSubmit = value.trim() !== "" && !busy && !submitDisabled;
   const fire = (): void => {
-    if (canSubmit) onSubmit()
-  }
-  const twoRow = actions !== undefined
+    if (canSubmit) onSubmit();
+  };
+  const twoRow = actions !== undefined;
 
   const textarea = (
     <Textarea
@@ -65,30 +65,29 @@ export function Composer({
       value={value}
       onChange={(e) => onChange(e.target.value)}
       onKeyDown={(e) => {
-        if (e.key === 'ArrowUp' && onHistoryPrevious?.()) {
-          e.preventDefault()
-          return
+        if (e.key === "ArrowUp" && onHistoryPrevious?.()) {
+          e.preventDefault();
+          return;
         }
-        if (e.key === 'ArrowDown' && onHistoryNext?.()) {
-          e.preventDefault()
-          return
+        if (e.key === "ArrowDown" && onHistoryNext?.()) {
+          e.preventDefault();
+          return;
         }
-        if (e.key === 'Enter' && !e.shiftKey) {
-          e.preventDefault()
-          fire()
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          fire();
         }
       }}
       placeholder={placeholder}
       rows={rows}
       className={cn(
-        // `dark:bg-transparent` sobrescreve o `dark:bg-input/30` do primitivo Textarea —
-        // dentro da pílula do composer a textarea é PLANA (herda o bg-card), sem fundo de
-        // input próprio no escuro (o `bg-transparent` sozinho não pega a variante dark).
-        'max-h-40 min-h-0 resize-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
-        twoRow ? 'w-full px-1.5 py-1.5' : 'flex-1 px-0 py-2',
+        // `bg-transparent` sobrescreve a superfície `control` do primitivo Textarea — dentro da
+        // pílula do composer a textarea é PLANA (herda o bg-card), sem fundo próprio.
+        "max-h-40 min-h-0 resize-none border-0 bg-transparent shadow-none focus-visible:ring-0",
+        twoRow ? "w-full px-1.5 py-1.5" : "flex-1 px-0 py-2",
       )}
     />
-  )
+  );
   const send = (
     <Button
       type="submit"
@@ -101,25 +100,28 @@ export function Composer({
     >
       {busy ? <Spinner size="sm" /> : <SendHorizontalIcon className="size-4" />}
     </Button>
-  )
+  );
 
   return (
     <form
       data-slot="composer"
       onSubmit={(e) => {
-        e.preventDefault()
-        fire()
+        e.preventDefault();
+        fire();
       }}
       className={cn(
-        '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',
+        "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,
       )}
     >
       {twoRow ? (
         <>
           {textarea}
-          <div data-slot="composer-actions" className="mt-1 flex items-center justify-between gap-2">
+          <div
+            data-slot="composer-actions"
+            className="mt-1 flex items-center justify-between gap-2"
+          >
             {/* Seletores à esquerda (discretos), enviar à direita. */}
             <div className="flex min-w-0 items-center gap-1">{actions}</div>
             {send}
@@ -132,5 +134,5 @@ export function Composer({
         </>
       )}
     </form>
-  )
+  );
 }

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

@@ -4,12 +4,15 @@ import { cn } from "../../lib/cn.ts";
 import { EmptyValue, isAbsentValue } from "./empty-value.tsx";
 
 export type DetailGroupVariant = "plain" | "framed";
+export type DetailGroupElevation = "none" | "raised";
 export type DetailGroupOrientation = "vertical" | "horizontal";
 export type DetailGroupColumns = 1 | 2 | 3 | 4 | "auto";
 
 export interface DetailGroupProps extends React.ComponentProps<"dl"> {
   /** `framed` aplica a moldura canônica ao conjunto. */
   variant?: DetailGroupVariant;
+  /** `raised` usa o fundo de superfície elevada; `none` herda o fundo do hospedeiro. */
+  elevation?: DetailGroupElevation;
   /** Exibe hairlines entre os campos; na orientação horizontal, aplica o tratamento tabular aos rótulos. */
   dividers?: boolean;
   /** Número fixo de colunas ou distribuição automática por largura mínima. */
@@ -35,6 +38,7 @@ function DetailGroup({
   children,
   style,
   variant = "plain",
+  elevation = "raised",
   dividers = false,
   columns = 1,
   orientation = "vertical",
@@ -47,6 +51,7 @@ function DetailGroup({
       <dl
         data-slot="detail-group"
         data-variant={variant}
+        data-elevation={elevation}
         data-dividers={dividers}
         data-orientation={orientation}
         className={cn(
@@ -58,7 +63,9 @@ function DetailGroup({
             !dividedHorizontalField &&
             "[&>[data-slot=detail-field]]:p-3",
           variant === "framed" &&
-            "overflow-hidden rounded-lg border border-border bg-transparent text-foreground",
+            "overflow-hidden rounded-lg border border-border",
+          elevation === "raised" &&
+            "bg-card text-card-foreground [--surface-background:var(--card)]",
           // Default da coluna de rótulos como CLASSE, antes do `className`: assim uma classe do
           // consumidor (`[--detail-label-width:9rem]`) a substitui. Em `style` inline, o default
           // vencia qualquer classe e só `style` conseguia ajustar a largura.
@@ -117,7 +124,7 @@ function DetailField({
         dividedHorizontalField && "items-stretch gap-x-0",
         "group-data-[orientation=vertical]/detail-group:gap-y-1",
         "group-data-[dividers=true]/detail-group:outline group-data-[dividers=true]/detail-group:outline-1 group-data-[dividers=true]/detail-group:outline-border",
-        "group-data-[variant=framed]/detail-group:bg-transparent group-data-[variant=framed]/detail-group:text-foreground",
+        "group-data-[variant=framed]/detail-group:bg-transparent",
         className,
       )}
       style={