@softize/opus 12.10.0 → 13.0.0

package/src/core/dictionary.ts

@@ -8,14 +8,20 @@
 
 import { getLogicalType } from './logical-type.ts'
 import type { LogicalTypeMeta } from './types.ts'
+import {
+  DICT_CONTEXTS,
+  isDictContext,
+  type DictContext,
+} from './ui-context.ts'
 
 /** Papel de apresentação declarado no nível do dicionário. */
 export const DICT_PRESENTATIONS = ['classification', 'status', 'stage', 'plain'] as const
 export type DictPresentation = (typeof DICT_PRESENTATIONS)[number]
 
-/** Tom explícito de uma entrada — honrado apenas por status e estágios. */
-export const DICT_TONES = ['neutral', 'info', 'success', 'warning', 'danger'] as const
-export type DictTone = (typeof DICT_TONES)[number]
+/** @deprecated Use `DICT_CONTEXTS` (ADR 0006). */
+export const DICT_TONES = DICT_CONTEXTS
+/** @deprecated Use `DictContext` (ADR 0006). */
+export type DictTone = DictContext
 
 /**
  * Meta de cada chave de um dict. `label` obrigatório; resto livre.
@@ -24,7 +30,7 @@ export type DictTone = (typeof DICT_TONES)[number]
  *   entra/sai) — a fonte rica de consulta rápida; flui pro manifest/Lens e NÃO vira tooltip.
  * - `description` é o texto curto voltado à pessoa: aparece no tooltip do `DictionaryValue`
  *   e como apoio de opção. Não repetir o rótulo — descrição igual ao rótulo não renderiza.
- * - `tone` é o tom tonal do badge de status/estágio; classificação ignora.
+ * - `context` é o contexto semântico do status/estágio; classificação ignora.
  * - `icon` é o identificador estável do catálogo de ícones do Opus (`iconPickerIcons`);
  *   nome fora do catálogo não renderiza ícone.
  * - `color` permanece metadata livre (lida pela Lens); o renderer não a interpreta.
@@ -33,7 +39,9 @@ export interface DictEntryMeta {
   label: string
   doc?: string
   description?: string
-  tone?: DictTone
+  context?: DictContext
+  /** @deprecated Use `context`. Compatibilidade temporária da ADR 0006. */
+  tone?: DictContext
   icon?: string
   color?: string
   order?: number
@@ -44,8 +52,16 @@ export function isDictPresentation(value: unknown): value is DictPresentation {
   return typeof value === 'string' && (DICT_PRESENTATIONS as readonly string[]).includes(value)
 }
 
-export function isDictTone(value: unknown): value is DictTone {
-  return typeof value === 'string' && (DICT_TONES as readonly string[]).includes(value)
+/** @deprecated Use `isDictContext` (ADR 0006). */
+export const isDictTone = isDictContext
+
+/** Normaliza a metadata canônica e seu alias temporário. */
+export function dictionaryEntryContext(entry: DictEntryMeta): DictContext | undefined {
+  return isDictContext(entry.context)
+    ? entry.context
+    : isDictContext(entry.tone)
+      ? entry.tone
+      : undefined
 }
 
 /** Forma normalizada de um dicionário, independente de onde a meta foi lida. */
@@ -92,7 +108,11 @@ export interface DictionaryValuePresentation {
   /** False quando o valor não está no dicionário. */
   known: boolean
   presentation: DictPresentation
-  /** `null` = texto; `'outline'` = classificação; tom = badge tonal de status/estágio. */
+  /** Contexto semântico; `null` quando a apresentação é texto. */
+  context: DictContext | null
+  /** Tratamento visual; `null` quando a apresentação é texto. */
+  variant: 'subtle' | 'outline' | null
+  /** @deprecated Use `context` e `variant`. */
   badge: 'outline' | DictTone | null
   /** Identificador do catálogo, só quando declarado na entrada. */
   icon: string | null
@@ -115,8 +135,8 @@ export function dictionaryDescription(label: string, description: unknown): stri
  * Aplica a tabela de decisão da ADR 0003:
  *
  * | papel            | forma | variante                  |
- * | classification   | badge | outline (ignora `tone`)   |
- * | status / stage   | badge | tonal: `tone` ?? neutral  |
+ * | classification   | badge | neutral + outline            |
+ * | status / stage   | badge | `context` + subtle           |
  * | plain / ausente  | texto | —                         |
  *
  * Ícone só quando declarado; tooltip só quando `description` acrescenta. Valor fora do
@@ -132,20 +152,38 @@ export function presentDictionaryValue(
     ? descriptor.entries[value]
     : undefined
   if (entry === undefined || typeof entry.label !== 'string') {
-    return { value, label: value, known: false, presentation, badge: null, icon: null, description: null }
+    return {
+      value,
+      label: value,
+      known: false,
+      presentation,
+      context: null,
+      variant: null,
+      badge: null,
+      icon: null,
+      description: null,
+    }
   }
-  const badge: DictionaryValuePresentation['badge'] =
+  const context: DictionaryValuePresentation['context'] =
+    presentation === 'classification'
+      ? 'neutral'
+      : presentation === 'status' || presentation === 'stage'
+        ? (dictionaryEntryContext(entry) ?? 'neutral')
+        : null
+  const variant: DictionaryValuePresentation['variant'] =
     presentation === 'classification'
       ? 'outline'
       : presentation === 'status' || presentation === 'stage'
-        ? (isDictTone(entry.tone) ? entry.tone : 'neutral')
+        ? 'subtle'
         : null
   return {
     value,
     label: entry.label,
     known: true,
     presentation,
-    badge,
+    context,
+    variant,
+    badge: variant === 'outline' ? 'outline' : context,
     icon: typeof entry.icon === 'string' && entry.icon.length > 0 ? entry.icon : null,
     description: dictionaryDescription(entry.label, entry.description),
   }

package/src/core/index.ts

@@ -138,12 +138,22 @@ export { normalizeTraceContext } from './trace.ts'
 // `@softize/opus/schema` re-exporta os dois pra manter a API de sempre.
 export { attachLogicalType, getLogicalType } from './logical-type.ts'
 
+// — Contextos semânticos de UI (ADR 0006) ————————————————————————————————————
+export {
+  UI_CONTEXTS,
+  DICT_CONTEXTS,
+  isUiContext,
+  isDictContext,
+} from './ui-context.ts'
+export type { UiContext, DictContext } from './ui-context.ts'
+
 // — Dicionários (apresentação declarada — ADR 0003) ————————————————————————————
 export {
   DICT_PRESENTATIONS,
   DICT_TONES,
   isDictPresentation,
   isDictTone,
+  dictionaryEntryContext,
   dictionaryDescriptor,
   dictionaryDescription,
   presentDictionaryValue,

package/src/core/ui-context.ts

@@ -0,0 +1,29 @@
+/**
+ * Famílias semânticas compartilhadas entre contratos e UI (ADR 0006).
+ *
+ * Contexto responde por que um realce existe; cada componente decide como materializá-lo.
+ * Tema (light/dark), geometria e variante visual são eixos independentes.
+ */
+export const UI_CONTEXTS = [
+  'neutral',
+  'primary',
+  'info',
+  'success',
+  'warning',
+  'danger',
+] as const
+
+export type UiContext = (typeof UI_CONTEXTS)[number]
+
+/** Contextos válidos para estados e estágios de domínio. */
+export const DICT_CONTEXTS = ['neutral', 'info', 'success', 'warning', 'danger'] as const
+
+export type DictContext = (typeof DICT_CONTEXTS)[number]
+
+export function isUiContext(value: unknown): value is UiContext {
+  return typeof value === 'string' && (UI_CONTEXTS as readonly string[]).includes(value)
+}
+
+export function isDictContext(value: unknown): value is DictContext {
+  return typeof value === 'string' && (DICT_CONTEXTS as readonly string[]).includes(value)
+}

package/src/schema/drivers/zod.ts

@@ -36,6 +36,7 @@ import {
   type DictEntryMeta,
   type DictPresentation,
 } from '../../core/dictionary.ts'
+import { DICT_CONTEXTS, isDictContext } from '../../core/ui-context.ts'
 import {
   formatDatetime,
   formatDate,
@@ -656,7 +657,8 @@ function isLogicalType(value: unknown): value is LogicalType<unknown> {
 /**
  * Meta de cada chave de um dict — o tipo mora no core (`@softize/opus/core`, ADR 0003) e é
  * reexportado aqui pra manter a API: `label` obrigatório, `doc` (negócio, manifest/Lens),
- * `description` (tooltip), `tone` (badge tonal de status/estágio), `icon` (catálogo).
+ * `description` (tooltip), `context` (contexto semântico de status/estágio), `icon` (catálogo).
+ * `tone` permanece como alias temporário de compatibilidade.
  */
 export type { DictEntryMeta }
 
@@ -716,16 +718,23 @@ const dict = <const M extends Record<string, DictEntryMeta>>(
       `t.dict: presentation "${String(opts.presentation)}" inválida; use ${DICT_PRESENTATIONS.join(' | ')}`,
     )
   }
-  const tonal = opts?.presentation === 'status' || opts?.presentation === 'stage'
+  const contextual = opts?.presentation === 'status' || opts?.presentation === 'stage'
   for (const key of keys) {
-    const tone = (entries[key] as DictEntryMeta).tone
-    if (tone === undefined) continue
-    if (!isDictTone(tone)) {
-      throw new Error(`t.dict: tone "${String(tone)}" inválido em "${key}"; use ${DICT_TONES.join(' | ')}`)
+    const entry = entries[key] as DictEntryMeta
+    if (entry.context !== undefined && entry.tone !== undefined) {
+      throw new Error(`t.dict: use context ou tone em "${key}", nunca os dois`)
     }
-    if (!tonal) {
+    const context = entry.context ?? entry.tone
+    if (context === undefined) continue
+    const legacy = entry.context === undefined
+    if (!(legacy ? isDictTone(context) : isDictContext(context))) {
+      const values = legacy ? DICT_TONES : DICT_CONTEXTS
+      const field = legacy ? 'tone' : 'context'
+      throw new Error(`t.dict: ${field} "${String(context)}" inválido em "${key}"; use ${values.join(' | ')}`)
+    }
+    if (!contextual) {
       throw new Error(
-        `t.dict: tone em "${key}" exige presentation "status" ou "stage" (classificação usa outline; plain é texto)`,
+        `t.dict: ${legacy ? 'tone' : 'context'} em "${key}" exige presentation "status" ou "stage" (classificação usa outline; plain é texto)`,
       )
     }
   }

package/src/ui/components/patterns/action-form-card.tsx

@@ -6,22 +6,24 @@
  */
 import {
   Card,
-  CardContent,
+  CardBody,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from '../primitives/card.tsx'
-import { ActionForm, type ActionFormProps } from './form.tsx'
+} from "../primitives/card.tsx";
+import { ActionForm, type ActionFormProps } from "./form.tsx";
 
-export interface ActionFormCardProps<TInput extends Record<string, unknown>, TData>
-  extends Omit<ActionFormProps<TInput, TData>, 'body' | 'footer'> {
+export interface ActionFormCardProps<
+  TInput extends Record<string, unknown>,
+  TData,
+> extends Omit<ActionFormProps<TInput, TData>, "body" | "footer"> {
   /** Título do header do card. Sem ele, o card começa direto no conteúdo. */
-  title?: string
+  title?: string;
   /** Subtítulo opcional, abaixo do título. */
-  description?: string
+  description?: string;
   /** Classes do Card (a superfície). `className` vai pro <form>. */
-  cardClassName?: string
+  cardClassName?: string;
 }
 
 export function ActionFormCard<TInput extends Record<string, unknown>, TData>({
@@ -35,14 +37,18 @@ export function ActionFormCard<TInput extends Record<string, unknown>, TData>({
       {(title !== undefined || description !== undefined) && (
         <CardHeader>
           {title !== undefined && <CardTitle>{title}</CardTitle>}
-          {description !== undefined && <CardDescription>{description}</CardDescription>}
+          {description !== undefined && (
+            <CardDescription>{description}</CardDescription>
+          )}
         </CardHeader>
       )}
       <ActionForm
         {...rest}
-        body={(fields) => <CardContent>{fields}</CardContent>}
-        footer={(actions) => <CardFooter className="justify-end">{actions}</CardFooter>}
+        body={(fields) => <CardBody>{fields}</CardBody>}
+        footer={(actions) => (
+          <CardFooter className="justify-end">{actions}</CardFooter>
+        )}
       />
     </Card>
-  )
+  );
 }

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

@@ -1,42 +1,49 @@
 /**
- * `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?', variant: 'destructive' })) …
+ *   if (await dialog.confirm({ title: 'Excluir a sessão?', context: 'danger' })) …
  *   const nome = await dialog.prompt({ title: 'Nome do snapshot' })
  *
  * 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`).
  */
 
 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
@@ -50,22 +57,43 @@ export interface AlertOptions extends DialogBase {}
 /** `confirm` — pergunta de sim/não. */
 export interface ConfirmOptions extends DialogBase {
   cancel?: string
-  /** `destructive` pinta o botão de confirmar — o que apaga tem que parecer o que apaga. */
+  /** Contexto do botão de confirmação. */
+  context?: Extract<UiContext, 'primary' | 'danger'>
+  /** @deprecated Use `context="danger"`. */
   variant?: 'default' | 'destructive'
 }
 
 /** `prompt` — uma string livre. Form de verdade (campos, contrato) → ActionFormDialog. */
 export interface PromptOptions extends DialogBase {
   cancel?: string
+  context?: Extract<UiContext, 'primary' | 'danger'>
+  /** @deprecated Use `context="danger"`. */
   variant?: 'default' | 'destructive'
   placeholder?: string
   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
@@ -79,6 +107,33 @@ function requireHost(fn: string): Error | null {
   )
 }
 
+function rejectAmbiguousContext(
+  fn: string,
+  options: ConfirmOptions | PromptOptions,
+): Error | null {
+  if (options.context === undefined || options.variant === undefined) return null
+  return new Error(
+    `${fn} não permite combinar context com uma variante semântica legada.`,
+  )
+}
+
+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> {
@@ -90,6 +145,8 @@ export const dialog = {
   },
   /** Pergunta sim/não. `Promise<boolean>` — fechar/ESC resolve `false`. */
   confirm(options: ConfirmOptions): Promise<boolean> {
+    const ambiguous = rejectAmbiguousContext('dialog.confirm()', options)
+    if (ambiguous !== null) return Promise.reject(ambiguous)
     const err = requireHost('dialog.confirm()')
     if (err !== null) return Promise.reject(err)
     return new Promise<boolean>((resolve) => {
@@ -98,12 +155,29 @@ export const dialog = {
   },
   /** Pede uma string. `Promise<string | null>` — fechar/ESC/Cancelar resolve `null`. */
   prompt(options: PromptOptions): Promise<string | null> {
+    const ambiguous = rejectAmbiguousContext('dialog.prompt()', options)
+    if (ambiguous !== null) return Promise.reject(ambiguous)
     const err = requireHost('dialog.prompt()')
     if (err !== null) return Promise.reject(err)
     return new Promise<string | null>((resolve) => {
       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()`. */
@@ -145,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 => {
@@ -153,21 +228,28 @@ export function DialogHost(): React.ReactElement {
     else p.resolve(value)
   }
 
-  const variant = current !== undefined && current.kind !== 'alert' ? current.variant : undefined
+  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={
@@ -182,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}
@@ -203,22 +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
-              variant={variant === 'destructive' ? 'destructive' : 'default'}
-              onClick={() => drop(current.id, (p) => accept(p, text))}
-            >
-              {current.action ?? defaultAction}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
+          </DialogFooter>
+        </DialogContent>
       )}
-    </AlertDialog>
+    </Dialog>
   )
 }