@softize/opus 17.2.0 → 18.0.0

package/src/ui/components/patterns/trigger.tsx

@@ -12,15 +12,19 @@
  * Emite `data-action="<action.name>"` na raiz (selector E2E).
  */
 
-import type { ReactNode } from 'react'
-import { useEffect, useId, useState } from 'react'
-import type { SimpleContract } from '../../../core/index.ts'
-import { useTriggerAction } from '../../drivers/react.tsx'
-import { toast } from '../primitives/sonner.tsx'
-import { cn } from '../../lib/cn.ts'
-import { humanizeActionError } from '../../lib/action-errors.ts'
-import { Button, type ButtonProps } from '../primitives/button.tsx'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip.tsx'
+import type { ReactNode } from "react";
+import { useEffect, useId, useState } from "react";
+import type { SimpleContract } from "../../../core/index.ts";
+import { useTriggerAction } from "../../drivers/react.tsx";
+import { toast } from "../primitives/sonner.tsx";
+import { cn } from "../../lib/cn.ts";
+import { humanizeActionError } from "../../lib/action-errors.ts";
+import { Button, type ButtonProps } from "../primitives/button.tsx";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../primitives/tooltip.tsx";
 import {
   Dialog,
   DialogBody,
@@ -29,52 +33,53 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '../primitives/dialog.tsx'
+} from "../primitives/dialog.tsx";
+import { ButtonGroup } from "../primitives/button-group.tsx";
 
 /** action.messages.* pode ser string ou I18nRef ({ key, default }). Resolve pra texto. */
 function msgText(m: unknown, fallback: string): string {
-  if (typeof m === 'string') return m
-  if (m !== null && typeof m === 'object' && 'default' in m) {
-    const d = (m as { default: unknown }).default
-    if (typeof d === 'string') return d
+  if (typeof m === "string") return m;
+  if (m !== null && typeof m === "object" && "default" in m) {
+    const d = (m as { default: unknown }).default;
+    if (typeof d === "string") return d;
   }
-  return fallback
+  return fallback;
 }
 
 export interface ActionTriggerProps<TInput, TData> {
-  action: SimpleContract<TInput, TData>
+  action: SimpleContract<TInput, TData>;
   /** Input enviado pra action. Geralmente { id } ou similar. */
-  input: TInput
+  input: TInput;
   /** Texto do botão. Default usa action.label. */
-  label?: string
+  label?: string;
   /** Contexto visual. Por padrão, ações destrutivas usam `danger`. */
-  context?: ButtonProps['context']
+  context?: ButtonProps["context"];
   /** Tratamento visual do Button. */
-  variant?: ButtonProps['variant']
+  variant?: ButtonProps["variant"];
   /** Tamanho do botão (escala de control.ts). Com `icon`, o default é `icon-xs`. */
-  size?: ButtonProps['size']
+  size?: ButtonProps["size"];
   /** Desabilita o botão independente de loading. */
-  disabled?: boolean
+  disabled?: boolean;
   /** Texto do confirm dialog. Default vem do `action.confirm` (ConfirmSpec do
    *  contrato — declarativo). Sem nenhum dos dois, dispara direto. */
   confirm?: {
-    title: string
+    title: string;
     /** Conteúdo relevante apresentado antes das ações. */
-    body?: ReactNode
-    actionLabel?: string
-    cancelLabel?: string
-  }
+    body?: ReactNode;
+    actionLabel?: string;
+    cancelLabel?: string;
+  };
   /** Callback adicional pós-sucesso (cache já foi invalidado). */
-  onSuccess?: (data: TData) => void
+  onSuccess?: (data: TData) => void;
   /** Notifica o renderer que coordena bloqueio entre várias actions. */
-  onLoadingChange?: (loading: boolean) => void
+  onLoadingChange?: (loading: boolean) => void;
   /** Ícone: o botão vira icon-only, com o `label` no tooltip e no aria-label. É a forma
    *  da ação que mora DENTRO de um item (linha, card) — o clique não vaza pro item. */
-  icon?: ReactNode
+  icon?: ReactNode;
   /** Nome do item na pergunta (ex.: o slug, o nome da unidade) — sai entre aspas, em
    *  destaque, antes da mensagem do contrato. */
-  itemLabel?: string
-  className?: string
+  itemLabel?: string;
+  className?: string;
 }
 
 export function ActionTrigger<TInput, TData>({
@@ -92,46 +97,52 @@ export function ActionTrigger<TInput, TData>({
   itemLabel,
   className,
 }: ActionTriggerProps<TInput, TData>) {
-  const confirmBodyId = useId()
-  const [open, setOpen] = useState(false)
+  const confirmBodyId = useId();
+  const [open, setOpen] = useState(false);
   const { trigger, isLoading } = useTriggerAction(action, {
     onSuccess: (data) => {
-      toast.success(msgText(action.messages?.success, 'Concluído'))
-      onSuccess?.(data)
-      setOpen(false)
+      toast.success(msgText(action.messages?.success, "Concluído"));
+      onSuccess?.(data);
+      setOpen(false);
     },
     onError: (err) => {
       // A frase de negócio do servidor vence o rótulo do contrato (ver lib/action-errors.ts);
       // fora da allowlist, vale o rótulo — nunca o texto técnico cru.
       toast.error(
-        humanizeActionError(err, msgText(action.messages?.error, 'Não foi possível concluir.')),
-      )
+        humanizeActionError(
+          err,
+          msgText(action.messages?.error, "Não foi possível concluir."),
+        ),
+      );
     },
-  })
+  });
   useEffect(() => {
-    onLoadingChange?.(isLoading)
-    return () => onLoadingChange?.(false)
-  }, [isLoading, onLoadingChange])
+    onLoadingChange?.(isLoading);
+    return () => onLoadingChange?.(false);
+  }, [isLoading, onLoadingChange]);
 
-  const buttonLabel = label ?? (typeof action.label === 'string' ? action.label : action.name)
+  const buttonLabel =
+    label ?? (typeof action.label === "string" ? action.label : action.name);
 
   // Prop sobrepõe; sem prop, o ConfirmSpec DECLARADO no contrato (action.confirm) vale.
-  const spec = action.confirm
+  const spec = action.confirm;
   const confirm =
     confirmProp ??
     (spec !== undefined
       ? {
-          title: msgText(spec.title, 'Confirmar?'),
-          ...(spec.message !== undefined ? { body: msgText(spec.message, '') } : {}),
+          title: msgText(spec.title, "Confirmar?"),
+          ...(spec.message !== undefined
+            ? { body: msgText(spec.message, "") }
+            : {}),
           ...(spec.confirmLabel !== undefined
             ? { actionLabel: msgText(spec.confirmLabel, buttonLabel) }
             : {}),
           ...(spec.cancelLabel !== undefined
-            ? { cancelLabel: msgText(spec.cancelLabel, 'Cancelar') }
+            ? { cancelLabel: msgText(spec.cancelLabel, "Cancelar") }
             : {}),
         }
-      : undefined)
-  const destructive = spec?.destructive === true
+      : undefined);
+  const destructive = spec?.destructive === true;
   /**
    * Precedência de aparência:
    * - Gatilho: `context` explícito vence `destructive`; sem ele, destrutivo é `danger`. Com
@@ -142,14 +153,15 @@ export function ActionTrigger<TInput, TData>({
    *   decisão.
    */
   const triggerContext =
-    context ?? (destructive ? 'danger' : icon !== undefined ? 'neutral' : 'primary')
-  const triggerVariant = variant ?? (icon !== undefined ? 'ghost' : 'solid')
-  const confirmContext = destructive ? 'danger' : (context ?? 'primary')
-  const confirmVariant = 'solid'
+    context ??
+    (destructive ? "danger" : icon !== undefined ? "neutral" : "primary");
+  const triggerVariant = variant ?? (icon !== undefined ? "ghost" : "solid");
+  const confirmContext = destructive ? "danger" : (context ?? "primary");
+  const confirmVariant = "solid";
 
   const fire = () => {
-    void trigger(input)
-  }
+    void trigger(input);
+  };
 
   /** O gatilho. Com `icon`: icon-only, rótulo no tooltip e no aria-label. O
    *  stopPropagation é o que permite viver DENTRO de uma linha clicável — sem ele,
@@ -159,30 +171,33 @@ export function ActionTrigger<TInput, TData>({
       <Button
         context={triggerContext}
         variant={triggerVariant}
-        size={size ?? (icon !== undefined ? 'icon-xs' : 'default')}
+        size={size ?? (icon !== undefined ? "icon-xs" : "default")}
         busy={isLoading}
         disabled={disabled}
         aria-label={icon !== undefined ? buttonLabel : undefined}
         onClick={(e) => {
-          e.stopPropagation()
-          onClick()
+          e.stopPropagation();
+          onClick();
         }}
-        className={cn(icon !== undefined && 'shrink-0 text-muted-foreground/60', className)}
+        className={cn(
+          icon !== undefined && "shrink-0 text-muted-foreground/60",
+          className,
+        )}
         data-action={action.name}
       >
         {icon ?? buttonLabel}
       </Button>
-    )
-    if (icon === undefined) return button
+    );
+    if (icon === undefined) return button;
     return (
       <Tooltip>
         <TooltipTrigger asChild>{button}</TooltipTrigger>
         <TooltipContent>{buttonLabel}</TooltipContent>
       </Tooltip>
-    )
-  }
+    );
+  };
 
-  if (confirm === undefined) return renderButton(fire)
+  if (confirm === undefined) return renderButton(fire);
 
   return (
     <>
@@ -192,38 +207,53 @@ export function ActionTrigger<TInput, TData>({
         <DialogContent
           data-action={action.name}
           aria-describedby={
-            itemLabel !== undefined || confirm.body !== undefined ? confirmBodyId : undefined
+            itemLabel !== undefined || confirm.body !== undefined
+              ? confirmBodyId
+              : undefined
           }
         >
           <DialogHeader>
             <DialogTitle>{confirm.title}</DialogTitle>
           </DialogHeader>
           {(itemLabel !== undefined || confirm.body !== undefined) && (
-            <DialogBody id={confirmBodyId} className="text-sm text-muted-foreground">
+            <DialogBody
+              id={confirmBodyId}
+              className="text-sm text-muted-foreground"
+            >
               {itemLabel !== undefined && (
-                <span className="font-medium text-foreground">“{itemLabel}”</span>
+                <span className="font-medium text-foreground">
+                  “{itemLabel}”
+                </span>
               )}
-              {itemLabel !== undefined && confirm.body !== undefined ? ' — ' : ''}
+              {itemLabel !== undefined && confirm.body !== undefined
+                ? " — "
+                : ""}
               {confirm.body}
             </DialogBody>
           )}
           <DialogFooter>
-            <DialogClose initialFocus asChild>
-              <Button context="neutral" variant="ghost" disabled={isLoading}>
-                {confirm.cancelLabel ?? 'Cancelar'}
+            <ButtonGroup mode="spaced" distribution="equal">
+              <DialogClose initialFocus asChild>
+                <Button
+                  context="neutral"
+                  variant="outline"
+                  disabled={isLoading}
+                >
+                  {confirm.cancelLabel ?? "Cancelar"}
+                </Button>
+              </DialogClose>
+              <Button
+                context={confirmContext}
+                variant={confirmVariant}
+                busy={isLoading}
+                onClick={fire}
+              >
+                {confirm.actionLabel ?? buttonLabel}
               </Button>
-            </DialogClose>
-            <Button
-              context={confirmContext}
-              variant={confirmVariant}
-              busy={isLoading}
-              onClick={fire}
-            >
-              {confirm.actionLabel ?? buttonLabel}
-            </Button>
+            </ButtonGroup>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </>
-  )
+  );
 }

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

@@ -4,8 +4,8 @@ import { Slot } from '@radix-ui/react-slot'
 import type { UiContext } from '../../../core/ui-context.ts'
 import { cn } from '../../lib/cn.ts'
 import {
-  controlBase,
   controlGlyphClass,
+  controlGlyphSize,
   controlHeight,
   controlSquare,
   focusRing,
@@ -149,7 +149,7 @@ export function Button({
         children
       ) : (
         <>
-          {busy ? <Spinner size={controlBase(size)} /> : icon}
+          {busy ? <Spinner size={controlGlyphSize(size)} /> : icon}
           {children}
         </>
       )}

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

@@ -151,6 +151,7 @@ const ChatTranscript = React.memo(function ChatTranscript({
   const scrollRef = React.useRef<HTMLDivElement>(null)
   const turns = React.useMemo(() => groupTurns(items), [items])
   const indicatorVisible = indicator !== undefined
+  const compactIndicator = indicator === ''
   // `null`/`false` em `empty` significam "sem nó" (o dado ainda não chegou): o greeting
   // continua como fallback em vez de um wrapper composto vazio.
   const composedEmpty = empty !== undefined && empty !== null && empty !== false
@@ -162,7 +163,7 @@ const ChatTranscript = React.memo(function ChatTranscript({
     <div
       ref={scrollRef}
       data-slot="chat-scroll"
-      className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4"
+      className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-4"
     >
       {items.length === 0 && !indicatorVisible && composedEmpty ? (
         <div data-slot="chat-empty" data-variant="composed" className="m-auto flex justify-center text-center">
@@ -189,9 +190,17 @@ const ChatTranscript = React.memo(function ChatTranscript({
               data-slot="chat-turn-user"
               data-message-id={turn.user.id}
               data-message-created-at={turn.user.createdAt}
-              className="flex justify-end py-1.5"
+              className="group/chat-message mb-1 flex flex-col items-end justify-end py-1"
             >
               <UserTurn content={turn.user.content} />
+              {renderMessageActions !== undefined && (
+                <div
+                  data-slot="chat-message-actions"
+                  className="mt-0.5 flex min-h-5 items-center opacity-0 transition-opacity group-hover/chat-message:opacity-100 focus-within:opacity-100"
+                >
+                  {renderMessageActions(turn.user)}
+                </div>
+              )}
             </div>
           )}
           {turn.rest.map((item, i) => {
@@ -238,7 +247,7 @@ const ChatTranscript = React.memo(function ChatTranscript({
                 {renderMessageActions !== undefined && (
                   <div
                     data-slot="chat-message-actions"
-                    className="mt-1 flex min-h-5 items-center opacity-0 transition-opacity group-hover/chat-message:opacity-100 focus-within:opacity-100"
+                    className="mt-0.5 flex min-h-5 items-center opacity-0 transition-opacity group-hover/chat-message:opacity-100 focus-within:opacity-100"
                   >
                     {renderMessageActions(item)}
                   </div>
@@ -251,7 +260,12 @@ const ChatTranscript = React.memo(function ChatTranscript({
       {indicatorVisible && (
         <div
           data-slot="chat-activity"
-          className="flex items-center gap-2 py-1 text-xs text-muted-foreground"
+          role="status"
+          aria-label={compactIndicator ? 'Pensando…' : undefined}
+          className={cn(
+            'flex items-center gap-2 py-1 text-xs text-muted-foreground',
+            compactIndicator && 'justify-center',
+          )}
         >
           <span className="flex gap-1">
             {[0, 1, 2].map((i) => (
@@ -262,7 +276,7 @@ const ChatTranscript = React.memo(function ChatTranscript({
               />
             ))}
           </span>
-          <span>{indicator ?? 'Pensando…'}</span>
+          {!compactIndicator && <span>{indicator ?? 'Pensando…'}</span>}
         </div>
       )}
     </div>

package/src/ui/components/primitives/control.ts

@@ -10,8 +10,9 @@ export type ControlShape = 'default' | 'pill'
  * - Quadrado só-ícone (`icon-xs` · `icon-sm` · `icon` · `icon-lg`): 1.5 · 1.75 · 2.25 · 2.5rem.
  *   `icon-xs` é o degrau da ação que mora dentro de uma linha densa. `icon-sm` atende
  *   composições compactas que ainda precisam de mais presença.
- * - Glifo (o svg dentro do controle daquele tamanho): 0.875 · 0.875 · 1 · 1.25rem. O Spinner
- *   usa esta medida, por isso `busy` substitui o ícone sem mexer na largura do botão.
+ * - Glifo (o svg dentro do controle daquele tamanho): 0.875 · 0.875 · 1 · 1.25rem. O quadrado
+ *   `icon` usa o glifo mais discreto de 0.875rem sem reduzir sua área clicável de 2.25rem. O
+ *   Spinner usa a mesma medida, por isso `busy` substitui o ícone sem mexer na largura do botão.
  */
 export type ControlSize = 'xs' | 'sm' | 'default' | 'lg'
 export type ControlIconSize = 'icon-xs' | 'icon-sm' | 'icon' | 'icon-lg'
@@ -65,9 +66,14 @@ export function controlBase(size: ControlScale | null | undefined): ControlSize
   }
 }
 
+/** O degrau visual do glifo; `icon` preserva a caixa default com um desenho mais discreto. */
+export function controlGlyphSize(size: ControlScale | null | undefined): ControlSize {
+  return size === 'icon' ? 'sm' : controlBase(size)
+}
+
 /** Fallback de tamanho do svg descendente, respeitando um `size-*` explícito no próprio ícone. */
 export function controlGlyphClass(size: ControlScale | null | undefined): string {
-  return controlGlyphSelector[controlBase(size)]
+  return controlGlyphSelector[controlGlyphSize(size)]
 }
 
 /**

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

@@ -156,7 +156,7 @@ function DialogCloseButton({ disabled = false }: { disabled?: boolean }) {
     <DialogPrimitive.Close data-slot="dialog-close" asChild>
       <Button
         type="button"
-        size="icon-sm"
+        size="icon"
         variant="ghost"
         disabled={disabled}
         aria-label="Fechar"
@@ -196,7 +196,9 @@ export function DialogContent({
           aria-describedby={ariaDescribedBy}
           {...props}
         >
-          <DialogContentContext.Provider value={{ showCloseButton: false, closeDisabled: true }}>
+          <DialogContentContext.Provider
+            value={{ showCloseButton: false, closeDisabled: true }}
+          >
             {children}
           </DialogContentContext.Provider>
         </AlertDialogPrimitive.Content>
@@ -218,7 +220,9 @@ export function DialogContent({
         aria-describedby={ariaDescribedBy}
         {...props}
       >
-        <DialogContentContext.Provider value={{ showCloseButton: showClose, closeDisabled }}>
+        <DialogContentContext.Provider
+          value={{ showCloseButton: showClose, closeDisabled }}
+        >
           {children}
         </DialogContentContext.Provider>
       </DialogPrimitive.Content>
@@ -232,20 +236,23 @@ export function DialogHeader({
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
-  const { showCloseButton, closeDisabled } = React.useContext(DialogContentContext);
+  const { showCloseButton, closeDisabled } =
+    React.useContext(DialogContentContext);
   return (
     <div
       data-slot="dialog-header"
       className={cn(
         mode === "alert"
           ? "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=dialog-media]:grid-rows-[auto_auto_1fr]"
-          : "flex shrink-0 items-center gap-4 border-b p-5 text-left [&:has(+[data-slot=dialog-footer])]:border-b-0",
+          : "flex shrink-0 items-center gap-4 border-b p-4 text-left [&:has(+[data-slot=dialog-footer])]:border-b-0",
         className,
       )}
       {...props}
     >
       {children}
-      {mode !== "alert" && showCloseButton && <DialogCloseButton disabled={closeDisabled} />}
+      {mode !== "alert" && showCloseButton && (
+        <DialogCloseButton disabled={closeDisabled} />
+      )}
     </div>
   );
 }
@@ -275,7 +282,7 @@ export function DialogBody({
     <div
       data-slot="dialog-body"
       className={cn(
-        mode === "alert" ? "min-w-0" : "min-h-0 flex-1 overflow-y-auto p-5",
+        mode === "alert" ? "min-w-0" : "min-h-0 flex-1 overflow-y-auto p-4",
         className,
       )}
       {...props}
@@ -293,8 +300,8 @@ export function DialogFooter({
       data-slot="dialog-footer"
       className={cn(
         mode === "alert"
-          ? "grid grid-cols-2 gap-2 [&>*:only-child]:col-span-full"
-          : "flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end",
+          ? "w-full"
+          : "flex shrink-0 flex-col-reverse gap-2 border-t p-4 sm:flex-row sm:justify-end",
         className,
       )}
       {...props}

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

@@ -58,7 +58,7 @@ function DrawerCloseButton({ disabled = false }: { disabled?: boolean }) {
     <DrawerPrimitive.Close data-slot="drawer-close" asChild>
       <Button
         type="button"
-        size="icon-sm"
+        size="icon"
         variant="ghost"
         disabled={disabled}
         aria-label="Fechar"
@@ -102,7 +102,9 @@ function DrawerContent({
         aria-describedby={ariaDescribedBy}
         {...props}
       >
-        <DrawerContentContext.Provider value={{ showCloseButton, closeDisabled }}>
+        <DrawerContentContext.Provider
+          value={{ showCloseButton, closeDisabled }}
+        >
           {children}
         </DrawerContentContext.Provider>
       </DrawerPrimitive.Content>
@@ -115,11 +117,12 @@ function DrawerHeader({
   children,
   ...props
 }: React.ComponentProps<"div">) {
-  const { showCloseButton, closeDisabled } = React.useContext(DrawerContentContext);
+  const { showCloseButton, closeDisabled } =
+    React.useContext(DrawerContentContext);
   return (
     <div
       data-slot="drawer-header"
-      className={cn("flex shrink-0 items-center gap-4 border-b p-5", className)}
+      className={cn("flex shrink-0 items-center gap-4 border-b p-4", className)}
       {...props}
     >
       {children}
@@ -132,7 +135,7 @@ function DrawerBody({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-body"
-      className={cn("min-h-0 flex-1 overflow-y-auto p-5", className)}
+      className={cn("min-h-0 flex-1 overflow-y-auto p-4", className)}
       {...props}
     />
   );
@@ -143,7 +146,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="drawer-footer"
       className={cn(
-        "mt-auto flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end",
+        "mt-auto flex shrink-0 flex-col-reverse gap-2 border-t p-4 sm:flex-row sm:justify-end",
         className,
       )}
       {...props}

package/src/ui/docs/content/action-form-card.md

@@ -2,23 +2,24 @@
 
 Use `ActionFormCard` para apresentar um `ActionForm` como seção delimitada da página. O componente
 aplica a estrutura e o espaçamento de `Card`, sem a faixa de ações de um modal. O título é opcional.
+Quando `onCancel` acrescenta uma segunda ação, o componente organiza os botões em um
+`ButtonGroup` espaçado sem forçar a divisão 50/50 do modal.
 
 ```tsx preview col md
 <DocBrowserActionProvider>
   <ActionFormCard
     title="Editar workspace"
     action={docWorkspaceCreate}
-    defaultValues={{ name: 'Empresa X', status: 'active' }}
-    submitLabel="Salvar alterações"
+    defaultValues={{ name: "Empresa X", status: "active" }}
   />
 </DocBrowserActionProvider>
 ```
 
 ## Propriedades de ActionFormCard
 
-| Propriedade | Tipo | Padrão | Descrição |
-|---|---|---|---|
-| `title` | `string` | | Título do cabeçalho. Sem ele, o card começa diretamente pelo corpo. |
-| `description` | `string` | | Subtítulo opcional, abaixo do título. |
-| `action / defaultValues / fieldOptions / submitLabel / onSuccess / onCancel` | Propriedades de `ActionForm` | | Mantêm o mesmo comportamento do formulário interno. |
-| `cardClassName` | `string` | | Classes aplicadas à superfície do card. `className` continua sendo aplicado ao `<form>`. |
+| Propriedade                                                                  | Tipo                         | Padrão | Descrição                                                                                |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------ | ---------------------------------------------------------------------------------------- |
+| `title`                                                                      | `string`                     |        | Título do cabeçalho. Sem ele, o card começa diretamente pelo corpo.                      |
+| `description`                                                                | `string`                     |        | Subtítulo opcional, abaixo do título.                                                    |
+| `action / defaultValues / fieldOptions / submitLabel / onSuccess / onCancel` | Propriedades de `ActionForm` |        | Mantêm o mesmo comportamento do formulário interno.                                      |
+| `cardClassName`                                                              | `string`                     |        | Classes aplicadas à superfície do card. `className` continua sendo aplicado ao `<form>`. |

package/src/ui/docs/content/action-form-dialog.md

@@ -3,21 +3,20 @@
 Use `ActionFormDialog` quando o formulário precisar interromper o fluxo atual sem levar a pessoa
 para outra página. O consumidor controla `open`; depois de uma execução bem-sucedida, o componente
 fecha o modal. O cabeçalho e o rodapé permanecem visíveis enquanto os campos podem rolar.
+Quando há cancelamento, o rodapé usa um `ButtonGroup` dividido: `Cancelar` aparece em `outline` e
+a ação principal permanece `solid`, ambas no tamanho normal de uma decisão modal.
 
 ```tsx preview
 const [open, setOpen] = useState(false);
 
 render(
   <DocBrowserActionProvider>
-    <Button onClick={() => setOpen(true)}>
-      <Plus /> Novo workspace
-    </Button>
+    <Button onClick={() => setOpen(true)}>Criar workspace</Button>
     <ActionFormDialog
       open={open}
       onOpenChange={setOpen}
-      title="Novo workspace"
+      title="Criar workspace"
       action={docWorkspaceCreate}
-      submitLabel="Criar workspace"
     />
   </DocBrowserActionProvider>,
 );
@@ -25,10 +24,10 @@ render(
 
 ## Propriedades de ActionFormDialog
 
-| Propriedade           | Tipo                                              | Padrão     | Descrição                                                                                           |
-| --------------------- | ------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------- |
-| `open / onOpenChange` | `boolean / (open: boolean) => void`               |            | Estado controlado do modal. `onOpenChange(false)` é chamado no sucesso e ao cancelar.               |
-| `title`               | `string`                                          |            | Nome da tarefa exibido no cabeçalho.                                                                |
-| `intro`               | `ReactNode`                                       |            | Contexto relevante no início do corpo, como texto ou `Alert`.                                       |
-| `submitLabel`         | `string`                                          | `'Salvar'` | Resultado da ação principal. Em criação, informe `Criar {recurso}`; em edição, `Salvar alterações`. |
-| `…ActionFormProps`    | `action, defaultValues, onSuccess, fieldOptions…` |            | Demais propriedades repassadas ao `ActionForm` interno.                                             |
+| Propriedade           | Tipo                                              | Padrão     | Descrição                                                                                                                                                                   |
+| --------------------- | ------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `open / onOpenChange` | `boolean / (open: boolean) => void`               |            | Estado controlado do modal. `onOpenChange(false)` é chamado no sucesso e ao cancelar.                                                                                       |
+| `title`               | `string`                                          |            | Nome da tarefa exibido no cabeçalho.                                                                                                                                        |
+| `intro`               | `ReactNode`                                       |            | Contexto relevante no início do corpo, como texto ou `Alert`.                                                                                                               |
+| `submitLabel`         | `string`                                          | `'Salvar'` | Resultado da ação principal. Preserve o padrão em criação e edição comuns; sobrescreva apenas quando a operação tiver outro efeito, como `Renomear` ou `Criar nova versão`. |
+| `…ActionFormProps`    | `action, defaultValues, onSuccess, fieldOptions…` |            | Demais propriedades repassadas ao `ActionForm` interno.                                                                                                                     |