@softize/opus 12.11.0 → 13.0.0

package/registry/skills/maintain-opus-docs/scripts/audit-docs.mjs

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { resolve } from "node:path";
+
+const repoRoot = resolve(process.argv[2] ?? process.cwd());
+const contentDir = resolve(repoRoot, "packages/opus/src/ui/docs/content");
+const registryPath = resolve(repoRoot, "packages/opus/src/ui/docs/registry.tsx");
+
+if (!existsSync(contentDir) || !existsSync(registryPath)) {
+  console.error(
+    "Não encontrei packages/opus/src/ui/docs/content e registry.tsx. Passe a raiz do repositório Opus.",
+  );
+  process.exit(2);
+}
+
+const registry = readFileSync(registryPath, "utf8");
+const importedFiles = new Set(
+  [...registry.matchAll(/\.\/content\/([^"']+\.md)\?raw/g)].map((match) => match[1]),
+);
+const files = readdirSync(contentDir)
+  .filter((file) => file.endsWith(".md"))
+  .sort();
+const findings = [];
+
+for (const file of files) {
+  const source = readFileSync(resolve(contentDir, file), "utf8");
+  const lines = source.split("\n");
+
+  if (!importedFiles.has(file)) {
+    findings.push(`${file}: página órfã; não há import no registry`);
+  }
+
+  let inFence = false;
+  let previousHeading = 0;
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    const lineNumber = index + 1;
+
+    if (/^```/.test(line)) {
+      inFence = !inFence;
+      continue;
+    }
+    if (inFence) continue;
+
+    const heading = /^(#{1,6})\s+/.exec(line);
+    if (heading) {
+      const level = heading[1].length;
+      if (previousHeading > 0 && level > previousHeading + 1) {
+        findings.push(`${file}:${lineNumber}: heading salta de h${previousHeading} para h${level}`);
+      }
+      previousHeading = level;
+    }
+
+    if (/^#{2,6}\s+Props(?:\s|$)/i.test(line)) {
+      findings.push(`${file}:${lineNumber}: nomeie a referência como “Propriedades de Componente”`);
+    }
+    if (/^\|\s*Prop\s*\|/i.test(line) || /\|\s*Default\s*\|/.test(line)) {
+      findings.push(`${file}:${lineNumber}: use “Propriedade” e “Padrão” no cabeçalho da tabela`);
+    }
+    if (/\b(?:pra|pro|pros|numa)\b/i.test(line)) {
+      findings.push(`${file}:${lineNumber}: abreviação coloquial na prosa`);
+    }
+  }
+
+  if (inFence) findings.push(`${file}: fence de código sem fechamento`);
+}
+
+for (const importedFile of importedFiles) {
+  if (!files.includes(importedFile)) {
+    findings.push(`${importedFile}: importado pelo registry, mas o arquivo não existe`);
+  }
+}
+
+if (findings.length > 0) {
+  console.error(findings.join("\n"));
+  console.error(`\n${findings.length} problema(s) estrutural(is) encontrado(s).`);
+  process.exit(1);
+}
+
+console.log(`${files.length} páginas auditadas; nenhuma inconsistência estrutural encontrada.`);

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

@@ -1,5 +1,5 @@
 /**
- * `dialog` — o trio imperativo (alert · confirm · prompt) em UMA linha.
+ * `dialog` — respostas imperativas (alert · confirm · prompt · choose) em UMA linha.
  *
  *   await dialog.alert({ title: 'Sessão expirada', description: 'Você será desconectado.' })
  *   if (await dialog.confirm({ title: 'Excluir a sessão?', context: 'danger' })) …
@@ -7,13 +7,14 @@
  *
  * Mesma forma do `toast` (superfície imperativa + host no shell), com uma diferença: eles
  * RESPONDEM — `alert` devolve `Promise<void>`, `confirm` `Promise<boolean>`, `prompt`
- * `Promise<string | null>`. É o que tira as ~15 linhas de JSX que cada tela montava.
+ * `Promise<string | null>` e `choose` a união dos resultados declarados. É o que tira as
+ * ~15 linhas de JSX que cada tela montava.
  *
  * Namespace `dialog` de propósito: `window.alert/confirm/prompt` são globais do browser, e
  * um import esquecido cairia no nativo (cinza, sem tema) sem erro. `window.dialog` não
  * existe — a família fica imune ao footgun. `confirm()` segue exportado como alias.
  *
- * Por baixo é o <AlertDialog>: `role="alertdialog"`, não fecha no clique fora, foco preso
+ * Por baixo é o <Dialog mode="alert">: `role="alertdialog"`, não fecha no clique fora, foco preso
  * — a semântica que uma interrupção que EXIGE resposta pede. ESC/Cancelar resolve o "não"
  * de cada tipo (void, `false`, `null`).
  */
@@ -21,23 +22,28 @@
 import * as React from 'react'
 import type { UiContext } from '../../../core/ui-context.ts'
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogTitle,
-} from '../primitives/alert-dialog.tsx'
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogMedia,
+  DialogTitle,
+} from '../primitives/dialog.tsx'
+import {
+  Button,
+  type ButtonContext,
+  type ButtonVariant,
+} from '../primitives/button.tsx'
 import { Input } from '../primitives/input.tsx'
 
 /** Campos comuns aos três — o corpo (`body`) é o que o texto da `description` não expressa. */
 interface DialogBase {
   title: React.ReactNode
   description?: React.ReactNode
-  /** Ícone grande acima do título (o quadro do AlertDialogMedia). */
+  /** Ícone grande acima do título (o quadro do DialogMedia). */
   media?: React.ReactNode
   /** Conteúdo próprio entre a descrição e os botões (lista, detalhe destacado). */
   body?: React.ReactNode
@@ -67,10 +73,27 @@ export interface PromptOptions extends DialogBase {
   defaultValue?: string
 }
 
+export interface DialogChoice<TResult extends string = string> {
+  /** Valor devolvido quando esta ação for escolhida. Deve ser único na coleção. */
+  result: TResult
+  label: React.ReactNode
+  context?: ButtonContext
+  variant?: ButtonVariant
+  initialFocus?: boolean
+  disabled?: boolean
+}
+
+/** `choose` — uma escolha simples entre resultados explícitos. */
+export interface ChooseOptions<TResult extends string = string>
+  extends Omit<DialogBase, 'action'> {
+  actions: readonly DialogChoice<TResult>[]
+}
+
 type Pending =
   | ({ kind: 'alert'; id: number; resolve: () => void } & AlertOptions)
   | ({ kind: 'confirm'; id: number; resolve: (ok: boolean) => void } & ConfirmOptions)
   | ({ kind: 'prompt'; id: number; resolve: (value: string | null) => void } & PromptOptions)
+  | ({ kind: 'choose'; id: number; resolve: (result: string | null) => void } & ChooseOptions)
 
 let nextId = 0
 let listener: ((p: Pending) => void) | null = null
@@ -94,6 +117,23 @@ function rejectAmbiguousContext(
   )
 }
 
+function validateChoose<TResult extends string>(options: ChooseOptions<TResult>): Error | null {
+  if (options.actions.length === 0) {
+    return new Error('dialog.choose() exige pelo menos uma ação.')
+  }
+  const focused = options.actions.filter((action) => action.initialFocus === true)
+  if (focused.length !== 1) {
+    return new Error('dialog.choose() exige uma única ação com initialFocus.')
+  }
+  if (focused[0]?.disabled === true) {
+    return new Error('dialog.choose() não permite initialFocus em uma ação desabilitada.')
+  }
+  if (new Set(options.actions.map((action) => action.result)).size !== options.actions.length) {
+    return new Error('dialog.choose() exige resultados únicos.')
+  }
+  return null
+}
+
 export const dialog = {
   /** Avisa e espera o "OK". `Promise<void>` — só reconhecimento, sem decisão. */
   alert(options: AlertOptions): Promise<void> {
@@ -123,6 +163,21 @@ export const dialog = {
       listener?.({ ...options, kind: 'prompt', id: nextId++, resolve })
     })
   },
+  /** Oferece resultados explícitos. Fechar/ESC sem escolher resolve `null`. */
+  choose<const TResult extends string>(options: ChooseOptions<TResult>): Promise<TResult | null> {
+    const invalid = validateChoose(options)
+    if (invalid !== null) return Promise.reject(invalid)
+    const err = requireHost('dialog.choose()')
+    if (err !== null) return Promise.reject(err)
+    return new Promise<TResult | null>((resolve) => {
+      listener?.({
+        ...options,
+        kind: 'choose',
+        id: nextId++,
+        resolve: (result) => resolve(result as TResult | null),
+      })
+    })
+  },
 }
 
 /** Alias retrocompatível — `confirm()` é `dialog.confirm()`. */
@@ -164,6 +219,7 @@ export function DialogHost(): React.ReactElement {
   const cancel = (p: Pending): void => {
     if (p.kind === 'alert') p.resolve()
     else if (p.kind === 'confirm') p.resolve(false)
+    else if (p.kind === 'prompt') p.resolve(null)
     else p.resolve(null)
   }
   const accept = (p: Pending, value: string): void => {
@@ -172,24 +228,28 @@ export function DialogHost(): React.ReactElement {
     else p.resolve(value)
   }
 
-  const variant = current !== undefined && current.kind !== 'alert' ? current.variant : undefined
-  const context = current !== undefined && current.kind !== 'alert'
+  const variant = current !== undefined && (current.kind === 'confirm' || current.kind === 'prompt')
+    ? current.variant
+    : undefined
+  const context = current !== undefined && (current.kind === 'confirm' || current.kind === 'prompt')
     ? current.context ?? (variant === 'destructive' ? 'danger' : 'primary')
     : 'primary'
   const defaultAction = current?.kind === 'alert' ? 'OK' : 'Confirmar'
 
   return (
-    <AlertDialog
+    <Dialog
+      mode="alert"
       open={current !== undefined}
       onOpenChange={(open) => {
         if (!open && current !== undefined) drop(current.id, cancel)
       }}
     >
       {current !== undefined && (
-        <AlertDialogContent
+        <DialogContent
           data-slot="dialog"
           data-kind={current.kind}
-          // Prompt: o foco vai pro input, não pro Cancelar (default do AlertDialog). Via
+          className={current.kind === 'choose' ? 'max-w-lg' : undefined}
+          // Prompt: o foco vai pro input, não pro Cancelar (default do Dialog). Via
           // querySelector (não ref) — o Input é function component sem forwardRef, e isto
           // funciona igual em React 18 e 19.
           onOpenAutoFocus={
@@ -204,14 +264,14 @@ export function DialogHost(): React.ReactElement {
               : undefined
           }
         >
-          <AlertDialogHeader>
-            {current.media !== undefined && <AlertDialogMedia>{current.media}</AlertDialogMedia>}
-            <AlertDialogTitle>{current.title}</AlertDialogTitle>
+          <DialogHeader>
+            {current.media !== undefined && <DialogMedia>{current.media}</DialogMedia>}
+            <DialogTitle>{current.title}</DialogTitle>
             {current.description !== undefined && (
-              <AlertDialogDescription>{current.description}</AlertDialogDescription>
+              <DialogDescription>{current.description}</DialogDescription>
             )}
-          </AlertDialogHeader>
-          {current.body !== undefined && <div data-slot="dialog-body">{current.body}</div>}
+          </DialogHeader>
+          {current.body !== undefined && <DialogBody>{current.body}</DialogBody>}
           {current.kind === 'prompt' && (
             <Input
               value={text}
@@ -225,23 +285,63 @@ export function DialogHost(): React.ReactElement {
               }}
             />
           )}
-          <AlertDialogFooter>
-            {current.kind !== 'alert' && (
-              <AlertDialogCancel onClick={() => drop(current.id, cancel)}>
-                {current.cancel ?? 'Cancelar'}
-              </AlertDialogCancel>
+          <DialogFooter
+            className={
+              current.kind === 'choose'
+                ? 'grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]'
+                : undefined
+            }
+          >
+            {current.kind === 'choose' ? (
+              current.actions.map((action, index) => {
+                const primary = index === current.actions.length - 1
+                return (
+                  <DialogClose
+                    key={action.result}
+                    initialFocus={action.initialFocus}
+                    asChild
+                  >
+                    <Button
+                      context={action.context ?? (primary ? 'primary' : 'neutral')}
+                      variant={action.variant ?? (primary ? 'solid' : 'ghost')}
+                      disabled={action.disabled}
+                      onClick={() => drop(current.id, (p) => {
+                        if (p.kind === 'choose') p.resolve(action.result)
+                      })}
+                    >
+                      {action.label}
+                    </Button>
+                  </DialogClose>
+                )
+              })
+            ) : (
+              <>
+                {current.kind !== 'alert' && (
+                  <DialogClose initialFocus asChild>
+                    <Button
+                      context="neutral"
+                      variant="ghost"
+                      onClick={() => drop(current.id, cancel)}
+                    >
+                      {current.cancel ?? 'Cancelar'}
+                    </Button>
+                  </DialogClose>
+                )}
+                <DialogClose initialFocus={current.kind === 'alert'} asChild>
+                  <Button
+                    context={context}
+                    variant="solid"
+                    onClick={() => drop(current.id, (p) => accept(p, text))}
+                  >
+                    {current.action ?? defaultAction}
+                  </Button>
+                </DialogClose>
+              </>
             )}
-            <AlertDialogAction
-              context={context}
-              variant="solid"
-              onClick={() => drop(current.id, (p) => accept(p, text))}
-            >
-              {current.action ?? defaultAction}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
+          </DialogFooter>
+        </DialogContent>
       )}
-    </AlertDialog>
+    </Dialog>
   )
 }
 

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

@@ -84,19 +84,13 @@ import {
 import {
   Dialog,
   DialogBody,
+  DialogClose,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "../primitives/dialog.tsx";
-import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "../primitives/alert-dialog.tsx";
 import {
   InputGroup,
   InputGroupAddon,
@@ -1769,47 +1763,48 @@ export function ActionList<TInput, TItem>({
         </div>
         {footer}
         {confirming !== null && (
-          <AlertDialog
+          <Dialog
+            mode="alert"
             open
             onOpenChange={(o) => {
               if (!o) setConfirming(null);
             }}
           >
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>
                   {confirming.confirm?.title ?? confirming.label}
-                </AlertDialogTitle>
+                </DialogTitle>
                 {confirming.confirm?.message !== undefined && (
-                  <AlertDialogDescription>
+                  <DialogDescription>
                     {confirming.confirm.message}
-                  </AlertDialogDescription>
+                  </DialogDescription>
                 )}
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setConfirming(null)}
-                >
-                  Cancelar
-                </Button>
-                <Button
-                  size="sm"
-                  variant={
-                    confirming.destructive === true ? "destructive" : "default"
-                  }
-                  onClick={() => {
-                    const a = confirming;
-                    setConfirming(null);
-                    void runBatch(a);
-                  }}
-                >
-                  {confirming.label}
-                </Button>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose initialFocus asChild>
+                  <Button variant="ghost" size="sm">
+                    Cancelar
+                  </Button>
+                </DialogClose>
+                <DialogClose asChild>
+                  <Button
+                    size="sm"
+                    variant={
+                      confirming.destructive === true ? "destructive" : "default"
+                    }
+                    onClick={() => {
+                      const a = confirming;
+                      setConfirming(null);
+                      void runBatch(a);
+                    }}
+                  >
+                    {confirming.label}
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         )}
       </div>
     </TooltipProvider>

package/src/ui/components/patterns/page-state.tsx

@@ -12,7 +12,7 @@ import { cn } from "../../lib/cn.ts";
 import { Alert } from "../primitives/alert.tsx";
 import {
   Empty,
-  EmptyContent,
+  EmptyActions,
   EmptyDescription,
   EmptyHeader,
   EmptyMedia,
@@ -108,7 +108,7 @@ export function PageState({
             <EmptyDescription>{description}</EmptyDescription>
           )}
         </EmptyHeader>
-        {action !== undefined && <EmptyContent>{action}</EmptyContent>}
+        {action !== undefined && <EmptyActions>{action}</EmptyActions>}
       </Empty>
     </div>
   );

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

@@ -327,24 +327,15 @@ export function SidebarItem({
 
 export interface SidebarNavGroup {
   label?: string;
-  items?: SidebarNavItem[];
-  subgroups?: SidebarNavSubgroup[];
+  items: SidebarNavItem[];
 }
 
 export type SidebarNavItem = Omit<SidebarItemProps, "active" | "onClick"> & {
   id: string;
 };
 
-export interface SidebarNavSubgroup {
-  label?: string;
-  items: SidebarNavItem[];
-}
-
 const titled = (label?: string): boolean => (label ?? "").trim() !== "";
-const subFilled = (subgroup: SidebarNavSubgroup): boolean =>
-  subgroup.items.length > 0;
-const groupFilled = (group: SidebarNavGroup): boolean =>
-  (group.items?.length ?? 0) > 0 || (group.subgroups?.some(subFilled) ?? false);
+const groupFilled = (group: SidebarNavGroup): boolean => group.items.length > 0;
 
 /** Rótulo discreto de um grupo de navegação, compartilhado por listas e árvores. */
 export function SidebarGroupLabel({
@@ -367,6 +358,29 @@ export function SidebarGroupLabel({
   );
 }
 
+export interface SidebarTreeGroupProps {
+  className?: string;
+  children: ReactNode;
+}
+
+/** Agrupa descendentes de um nó e desenha a guia visual da hierarquia. */
+export function SidebarTreeGroup({
+  className,
+  children,
+}: SidebarTreeGroupProps): React.ReactElement {
+  return (
+    <div
+      data-slot="sidebar-tree-group"
+      className={cn(
+        "ml-[1.0625rem] space-y-0.5 border-l border-border pl-1.5",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
 /** Navegação controlada para Sidebar. Header/footer continuam slots explícitos do pai. */
 export function SidebarNav({
   groups,
@@ -406,21 +420,7 @@ export function SidebarNav({
             {!collapsed && titled(group.label) && (
               <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
             )}
-            {group.items?.map((item) => renderItem(item))}
-            {group.subgroups?.map((subgroup, si) =>
-              !subFilled(subgroup) ? null : (
-                <div key={si} className="space-y-0.5">
-                  {!collapsed && titled(subgroup.label) && (
-                    <div className="pb-0.5 pl-4 pr-2.5 pt-1.5 text-[0.6875rem] font-medium text-muted-foreground/50">
-                      {subgroup.label}
-                    </div>
-                  )}
-                  {subgroup.items.map((item) =>
-                    renderItem(item, titled(subgroup.label)),
-                  )}
-                </div>
-              ),
-            )}
+            {group.items.map((item) => renderItem(item))}
           </div>
         ),
       )}

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

@@ -4,7 +4,7 @@
  * Use pra mutações sem form: assign, escalate, close, archive, excluir.
  * - Loading state automático (disabled + "..." enquanto roda).
  * - Toast em sucesso/erro; cache invalidation via action.invalidates.
- * - Confirmação opcional via <AlertDialog> (compacto, não fecha no clique fora) antes de disparar.
+ * - Confirmação opcional via <Dialog> (compacto, não fecha no clique fora) antes de disparar.
  * - `icon` faz o botão virar icon-only com tooltip: é a ação que mora NO item (linha,
  *   card). Absorveu o antigo DeleteButton, que era este componente com uma lixeira.
  * Emite `data-action="<action.name>"` na raiz (selector E2E).
@@ -19,13 +19,14 @@ import { cn } from '../../lib/cn.ts'
 import { Button, type ButtonProps } from '../primitives/button.tsx'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip.tsx'
 import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '../primitives/alert-dialog.tsx'
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../primitives/dialog.tsx'
 
 /** action.messages.* pode ser string ou I18nRef ({ key, default }). Resolve pra texto. */
 function msgText(m: unknown, fallback: string): string {
@@ -174,28 +175,30 @@ export function ActionTrigger<TInput, TData>({
     <>
       {renderButton(() => setOpen(true))}
 
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogContent data-action={action.name}>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{confirm.title}</AlertDialogTitle>
+      <Dialog mode="alert" open={open} onOpenChange={setOpen}>
+        <DialogContent data-action={action.name}>
+          <DialogHeader>
+            <DialogTitle>{confirm.title}</DialogTitle>
             {(itemLabel !== undefined || confirm.description !== undefined) && (
-              <AlertDialogDescription>
+              <DialogDescription>
                 {itemLabel !== undefined && <span className="font-medium text-foreground">“{itemLabel}”</span>}
                 {itemLabel !== undefined && confirm.description !== undefined ? ' — ' : ''}
                 {confirm.description}
-              </AlertDialogDescription>
+              </DialogDescription>
             )}
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <Button context="neutral" variant="ghost" onClick={() => setOpen(false)} disabled={isLoading}>
-              {confirm.cancelLabel ?? 'Cancelar'}
-            </Button>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose initialFocus asChild>
+              <Button context="neutral" variant="ghost" disabled={isLoading}>
+                {confirm.cancelLabel ?? 'Cancelar'}
+              </Button>
+            </DialogClose>
             <Button context={confirmContext} variant={confirmVariant} busy={isLoading} onClick={fire}>
               {confirm.actionLabel ?? buttonLabel}
             </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   )
 }

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

@@ -76,7 +76,7 @@ function resolveAlertStyle({ context, variant }: AlertStyleOptions = {}): {
 export function alertVariants(options: AlertStyleOptions = {}): string {
   const resolved = resolveAlertStyle(options);
   return cn(
-    "relative grid w-full grid-cols-[0_minmax(0,1fr)] items-stretch gap-x-0 gap-y-1 rounded-lg border px-4 py-3 text-sm has-[>[data-slot=alert-media]]:grid-cols-[2.25rem_minmax(0,1fr)] has-[>[data-slot=alert-media]]:gap-x-3",
+    "relative grid w-full grid-cols-[0_minmax(0,1fr)_auto] items-stretch gap-x-0 gap-y-1 rounded-lg border p-4 text-sm has-[>[data-slot=alert-media]]:grid-cols-[3rem_minmax(0,1fr)_auto]",
     resolved.variant === "outline"
       ? semanticOutlineClasses[resolved.context]
       : semanticSubtleClasses[resolved.context],
@@ -92,7 +92,7 @@ function alertMediaClasses(context: AlertContext): string {
     danger: "text-context-danger-emphasis",
   };
   return cn(
-    "col-start-1 row-start-1 flex min-h-9 w-9 self-stretch items-center justify-center rounded-md bg-current/10 [&_svg]:size-5",
+    "col-start-1 row-start-1 flex size-9 self-start items-center justify-center rounded-md bg-current/10 [&_svg]:size-5",
     textClasses[context],
   );
 }
@@ -325,7 +325,7 @@ export function AlertActions({
     <div
       data-slot="alert-actions"
       className={cn(
-        "col-start-2 row-start-2 mt-1 flex items-center gap-2",
+        "col-start-3 row-start-1 ms-3 flex self-center items-center gap-2",
         className,
       )}
       {...props}