@softize/opus 12.11.0 → 13.1.0

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,9 +163,24 @@ 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()`. */
+/** @deprecated Alias retrocompatível — use `dialog.confirm()`. */
 export function confirm(options: ConfirmOptions): Promise<boolean> {
   return dialog.confirm(options)
 }
@@ -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,25 +285,65 @@ 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>
   )
 }
 
-/** Alias retrocompatível — `<ConfirmHost />` é `<DialogHost />`. */
+/** @deprecated Alias retrocompatível — monte `<DialogHost />`. */
 export const ConfirmHost = DialogHost

package/src/ui/components/patterns/content-header.tsx

@@ -171,7 +171,13 @@ interface ContentHeaderComposedProps extends Omit<
 export type ContentHeaderProps =
   ContentHeaderShorthandProps | ContentHeaderComposedProps;
 
-/** Header estrutural de Content; não é uma região autônoma. */
+/**
+ * Header estrutural de Content; não é uma região autônoma.
+ *
+ * Compartilha o layout (título, meta, descrição e ações) com `PageHeader` (page.tsx); os dois
+ * serão unificados numa próxima série — até lá, uma correção de layout em um deve ser espelhada
+ * no outro.
+ */
 export function ContentHeader({
   title,
   meta,

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

@@ -56,7 +56,7 @@ export function DataState({
       <tr data-slot="data-state" data-status={status}>
         <td
           colSpan={colSpan}
-          className={cn('px-4 py-10 text-center text-sm', error ? 'text-destructive' : 'text-muted-foreground/60')}
+          className={cn('px-4 py-10 text-center text-sm', error ? 'text-context-danger-emphasis' : 'text-muted-foreground/60')}
         >
           {error ? (
             <div className="flex flex-col items-center gap-3">

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

@@ -13,6 +13,7 @@
  */
 
 import * as React from 'react'
+import type { UiContext } from '../../../core/ui-context.ts'
 import { cn } from '../../lib/cn.ts'
 import { Button } from '../primitives/button.tsx'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip.tsx'
@@ -142,7 +143,8 @@ export function DockAction({ icon, label, pressed, disabled = false, hint, class
         <Button
           data-slot="dock-action"
           size="icon"
-          variant={pressed === true ? 'default' : 'ghost'}
+          context={pressed === true ? 'primary' : 'neutral'}
+          variant={pressed === true ? 'solid' : 'ghost'}
           aria-label={label}
           aria-pressed={pressed}
           disabled={disabled}
@@ -162,9 +164,22 @@ const STATUS_POSITION = {
   'top-left': 'top-3 left-3',
 } as const
 
+export type SurfaceStatusContext = Exclude<UiContext, 'primary'>
+
+/** `neutral` mantém o cinza do chrome; os demais tingem borda e texto pela família semântica. */
+const STATUS_CONTEXT: Record<SurfaceStatusContext, string> = {
+  neutral: 'border-border text-muted-foreground',
+  info: 'border-context-info-border text-context-info-emphasis',
+  success: 'border-context-success-border text-context-success-emphasis',
+  warning: 'border-context-warning-border text-context-warning-emphasis',
+  danger: 'border-context-danger-border text-context-danger-emphasis',
+}
+
 export interface SurfaceStatusProps {
   /** Canto da superfície onde o estado se ancora. */
   position?: keyof typeof STATUS_POSITION
+  /** O que o estado comunica (salvo, falhou, publicando…). Sem contexto, fica neutro. */
+  context?: SurfaceStatusContext
   /** Ações do recurso aberto — em geral o mesmo menu que a linha dele tem na navegação. */
   actions?: React.ReactNode
   className?: string
@@ -180,14 +195,16 @@ export interface SurfaceStatusProps {
  * Mensagem de sucesso é transitória por natureza; falha permanece até o estado mudar. Quem decide
  * isso é a aplicação, que conhece o ciclo — o componente só reserva o lugar.
  */
-export function SurfaceStatus({ position = 'top-right', actions, className, children }: SurfaceStatusProps): React.ReactElement {
+export function SurfaceStatus({ position = 'top-right', context = 'neutral', actions, className, children }: SurfaceStatusProps): React.ReactElement {
   const hasActions = actions !== undefined && actions !== null
   return (
     <div
       data-slot="surface-status"
+      data-context={context}
       className={cn(
         'pointer-events-none absolute z-10 flex max-w-[calc(100%-1.5rem)] flex-row items-center gap-2',
-        'rounded-full border border-border bg-background/95 py-1.5 pl-3 text-xs text-muted-foreground shadow-sm backdrop-blur',
+        'rounded-full border bg-background/95 py-1.5 pl-3 text-xs shadow-sm backdrop-blur',
+        STATUS_CONTEXT[context],
         hasActions ? 'pr-1' : 'pr-3',
         STATUS_POSITION[position],
         className,

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

@@ -28,6 +28,7 @@ import {
 import { useDicts, useFormAction, type DictLike } from '../../drivers/react.tsx'
 import { z, type ZodTypeAny } from 'zod'
 import { cn } from '../../lib/cn.ts'
+import { humanizeActionError } from '../../lib/action-errors.ts'
 import { objectSchemaShape } from '../../lib/object-schema.ts'
 import { toast } from '../primitives/sonner.tsx'
 import { Button } from '../primitives/button.tsx'
@@ -111,8 +112,9 @@ function inferFieldKind(schema: ZodTypeAny): FieldKind {
 interface FieldSpec {
   label?: string
   placeholder?: string
+  /** @deprecated Use `help` (ajuda junto à label) ou `description` do campo composto. */
   hint?: string
-  /** Ajuda na label: ícone ⓘ + tooltip no hover (explicação mais longa que o hint). */
+  /** Ajuda na label: ícone ⓘ + tooltip no hover. */
   help?: string
   /** Override explícito do tipo de campo, quando o auto-detect do Zod não basta.
    *  Honra 'textarea' (string sem max), 'code' (textarea monoespaçada, ex.: SKILL.md),
@@ -126,7 +128,7 @@ interface FieldSpec {
    *  No modo COMPOSIÇÃO o condicional pode (e deve) ser JSX de quem diagrama. */
   showWhen?: (input: Record<string, unknown>) => boolean
   /** Origem declarada das opções (static/dictionary/lookup) — ver a precedência
-   *  em `ActionFormField`. `dictionary` resolve pelos dicts do TbdlibProvider. */
+   *  em `ActionFormField`. `dictionary` resolve pelos dicts do OpusProvider. */
   options?: OptionsSpec
 }
 
@@ -208,7 +210,7 @@ function RequiredMark({ required }: { required: boolean }): React.ReactElement |
   if (!required) return null
   return (
     <>
-      <span aria-hidden className="ml-0.5 text-destructive">
+      <span aria-hidden className="ml-0.5 text-context-danger-emphasis">
         *
       </span>
       <span className="sr-only"> (obrigatório)</span>
@@ -530,7 +532,7 @@ export function ActionFormField({ name, options: optionsProp, className }: Actio
                   <Input
                     id={`${name}-${i}-text`}
                     value={item.text}
-                    placeholder={spec.placeholder ?? 'O quê (com critério)…'}
+                    placeholder={spec.placeholder ?? 'Descreva o critério…'}
                     onChange={(e) => setItems(items.map((it, j) => (j === i ? { ...it, text: e.target.value } : it)))}
                     aria-invalid={errorMessage !== undefined}
                     aria-describedby={describedBy}
@@ -651,7 +653,7 @@ export function ActionForm<TInput extends Record<string, unknown>, TData>({
       onSuccess?.(data)
     },
     onError: (err) => {
-      toast.error(msgText(action.messages?.error, err.message))
+      toast.error(humanizeActionError(err, msgText(action.messages?.error, 'Não foi possível salvar.')))
     },
   })
 
@@ -669,13 +671,15 @@ export function ActionForm<TInput extends Record<string, unknown>, TData>({
     ))
 
   // Banner de erro do servidor (chrome do próprio form, nos dois modos). O FieldGroup
-  // mantém o mesmo ritmo entre campos, blocos compostos e este estado.
+  // mantém o mesmo ritmo entre campos, blocos compostos e este estado. Só a frase de
+  // negócio chega aqui; código e mensagem técnica ficam no log do servidor.
   const errorBanner =
     error !== undefined && !isSuccess ? (
       <div
-        className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
+        role="alert"
+        className="rounded-md border border-context-danger-border bg-context-danger-subtle p-3 text-sm text-context-danger-emphasis"
       >
-        <strong>{error.code}</strong>: {error.message}
+        {humanizeActionError(error, msgText(action.messages?.error, 'Não foi possível salvar.'))}
       </div>
     ) : null
 

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,
@@ -760,7 +754,7 @@ function PeriodControl({
               <Button
                 key={p.value}
                 size="sm"
-                context={period === p.value ? "neutral" : "primary"}
+                context={period === p.value ? "primary" : "neutral"}
                 variant={period === p.value ? "solid" : "ghost"}
                 className="justify-start"
                 onClick={() => {
@@ -1434,6 +1428,7 @@ export function ActionList<TInput, TItem>({
                   <PopoverTrigger asChild>
                     <Button
                       variant="outline"
+                      size="icon"
                       className="shrink-0"
                       aria-label="Exibição"
                     >
@@ -1769,47 +1764,47 @@ 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"
+                    context={confirming.destructive === true ? "danger" : "primary"}
+                    variant="solid"
+                    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/page.tsx

@@ -14,10 +14,26 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
+import { createPortal } from "react-dom";
 import { cn } from "../../lib/cn.ts";
 
 const PageContext = createContext(false);
 const PageHeaderContext = createContext(false);
+const PageActionsTargetContext = createContext<HTMLElement | null>(null);
+
+export function PageActionsTarget({
+  target,
+  children,
+}: {
+  target: HTMLElement | null;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <PageActionsTargetContext.Provider value={target}>
+      {children}
+    </PageActionsTargetContext.Provider>
+  );
+}
 
 function requireParent(
   inside: boolean,
@@ -221,7 +237,8 @@ export function PageActions({
   ...props
 }: HTMLAttributes<HTMLDivElement>): ReactElement {
   requireParent(useContext(PageHeaderContext), "PageActions", "PageHeader");
-  return (
+  const target = useContext(PageActionsTargetContext);
+  const actions = (
     <div
       data-slot="page-actions"
       className={cn(
@@ -231,6 +248,7 @@ export function PageActions({
       {...props}
     />
   );
+  return target === null ? actions : createPortal(actions, target);
 }
 
 export function PageBody({