@softize/opus 18.5.0 → 20.0.0

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

@@ -2,6 +2,76 @@ import * as React from 'react'
 import { CheckIcon, CopyIcon } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
 
+/**
+ * A região viva que anuncia "Copiado", uma por documento.
+ *
+ * Uma tela com dezenas de Copyable (uma tabela de IDs, por exemplo) montaria dezenas de regiões
+ * `role="status"` vazias no fim do `body`. Todas as instâncias compartilham a mesma: a primeira a
+ * montar cria o nó, a última a desmontar o remove. Quem escreve a confirmação vira dono do texto;
+ * só o dono o apaga, para que a expiração de uma cópia antiga não silencie a mais recente.
+ * Se algo fora do React tirar o nó do documento (um `body.innerHTML` de script legado, por
+ * exemplo), a próxima montagem ou cópia o recoloca, para que o anúncio não suma em silêncio.
+ */
+interface SharedStatus {
+  node: HTMLSpanElement
+  users: number
+  owner: symbol | undefined
+}
+
+const statusByDocument = new WeakMap<Document, SharedStatus>()
+
+function acquireStatus(doc: Document): SharedStatus {
+  let shared = statusByDocument.get(doc)
+  if (shared === undefined) {
+    const node = doc.createElement('span')
+    node.setAttribute('role', 'status')
+    node.setAttribute('aria-live', 'polite')
+    node.setAttribute('data-slot', 'copyable-status')
+    node.className = 'sr-only'
+    doc.body.appendChild(node)
+    shared = { node, users: 0, owner: undefined }
+    statusByDocument.set(doc, shared)
+  }
+  ensureConnected(shared.node, doc)
+  shared.users += 1
+  return shared
+}
+
+// Devolve `true` quando precisou recolocar a região no `body`.
+function ensureConnected(node: HTMLSpanElement, doc: Document): boolean {
+  if (node.isConnected) return false
+  doc.body.appendChild(node)
+  return true
+}
+
+function releaseStatus(doc: Document, shared: SharedStatus, id: symbol): void {
+  if (shared.owner === id) clearStatus(shared, id)
+  shared.users -= 1
+  if (shared.users > 0) return
+  shared.node.remove()
+  if (statusByDocument.get(doc) === shared) statusByDocument.delete(doc)
+}
+
+function announceCopied(shared: SharedStatus, id: symbol): void {
+  shared.owner = id
+  const doc = shared.node.ownerDocument
+  // Um nó de texto novo, em vez de manter o anterior: uma segunda cópia enquanto "Copiado" ainda
+  // está na região (da mesma instância ou de outra) continua sendo uma mudança a anunciar.
+  const write = (): void => {
+    if (shared.owner === id) shared.node.replaceChildren(doc.createTextNode('Copiado'))
+  }
+  // Uma região recém-inserida já com texto costuma não ser lida: depois de recolocá-la, o texto
+  // entra no tick seguinte, quando o leitor de tela já a conhece.
+  if (ensureConnected(shared.node, doc)) setTimeout(write, 0)
+  else write()
+}
+
+function clearStatus(shared: SharedStatus, id: symbol): void {
+  if (shared.owner !== id) return
+  shared.owner = undefined
+  shared.node.replaceChildren()
+}
+
 export interface CopyableProps extends Omit<React.ComponentProps<'button'>, 'value'> {
   /** O texto que vai pro clipboard no clique. */
   value: string
@@ -13,7 +83,16 @@ export interface CopyableProps extends Omit<React.ComponentProps<'button'>, 'val
  * Clicar-pra-copiar com feedback: copia `value` pro clipboard e troca o ícone por um
  * check por ~1.5s. Sem filhos é um botão-ícone (bom pra toolbar/célula); com filhos, o
  * rótulo visível + o ícone à direita. Pra IDs, tokens, slugs, URLs. No-op silencioso se
- * o clipboard não estiver disponível (contexto inseguro/SSR).
+ * o clipboard não estiver disponível (contexto inseguro/SSR) ou recusar a escrita (permissão
+ * negada, documento sem foco): o botão só confirma "copiado" depois que a escrita conclui.
+ *
+ * Nome acessível: com filhos, é o próprio texto visível (quem fala o que vê aciona o botão);
+ * sem filhos, "Copiar" e, na confirmação, "Copiado". Um `aria-label` do consumidor vence os
+ * dois. A confirmação é anunciada por uma região viva no fim de `document.body`, compartilhada
+ * por todas as instâncias do documento: dentro do botão, o texto entraria no nome calculado pelo
+ * conteúdo (e o botão não expõe descendentes como regiões); como irmã, mudaria a estrutura do
+ * contêiner e seletores como `:first-child` de um ButtonGroup. A região só é criada no cliente,
+ * depois da hidratação, e existe antes da primeira cópia para que a mudança seja anunciada.
  */
 export function Copyable({
   value,
@@ -25,26 +104,57 @@ export function Copyable({
 }: CopyableProps): React.ReactElement {
   const [copied, setCopied] = React.useState(false)
   const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-  React.useEffect(() => () => clearTimeout(timer.current), [])
+  const [id] = React.useState(() => Symbol('copyable'))
+  const status = React.useRef<SharedStatus | undefined>(undefined)
+  React.useEffect(() => {
+    const doc = document
+    const shared = acquireStatus(doc)
+    status.current = shared
+    return () => {
+      clearTimeout(timer.current)
+      status.current = undefined
+      releaseStatus(doc, shared, id)
+    }
+  }, [id])
+  const iconOnly = children === undefined || children === null || children === false || children === ''
   return (
     <button
       type="button"
       data-slot="copyable"
       data-copied={copied || undefined}
-      aria-label={copied ? 'Copiado' : 'Copiar'}
-      onClick={(e) => {
+      aria-label={iconOnly ? (copied ? 'Copiado' : 'Copiar') : undefined}
+      onClick={async (e) => {
         onClick?.(e)
-        void navigator.clipboard?.writeText(value).then(() => {
-          setCopied(true)
-          clearTimeout(timer.current)
-          timer.current = setTimeout(() => setCopied(false), feedbackMs)
-        })
+        const clipboard = globalThis.navigator?.clipboard
+        if (clipboard === undefined) return
+        clearTimeout(timer.current)
+        try {
+          await clipboard.writeText(value)
+        } catch {
+          // Recusado: some com um "copiado" anterior para não afirmar o que não aconteceu.
+          setCopied(false)
+          if (status.current !== undefined) clearStatus(status.current, id)
+          return
+        }
+        const shared = status.current
+        // Desmontou enquanto a escrita corria: não há botão nem região a atualizar.
+        if (shared === undefined) return
+        setCopied(true)
+        announceCopied(shared, id)
+        timer.current = setTimeout(() => {
+          setCopied(false)
+          clearStatus(shared, id)
+        }, feedbackMs)
       }}
       className={cn('inline-flex items-center gap-1.5', className)}
       {...props}
     >
       {children}
-      {copied ? <CheckIcon className="size-3.5 text-context-success-emphasis" /> : <CopyIcon className="size-3.5" />}
+      {copied ? (
+        <CheckIcon aria-hidden="true" className="size-3.5 text-context-success-emphasis" />
+      ) : (
+        <CopyIcon aria-hidden="true" className="size-3.5" />
+      )}
     </button>
   )
 }

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

@@ -54,9 +54,7 @@ function DetailGroup({
           columnClasses[columns],
           variant === 'plain' && !dividers && 'gap-x-6 gap-y-4',
           dividers && 'gap-px overflow-hidden',
-          (variant === 'framed' || dividers) &&
-            !splitHorizontalField &&
-            '[&>[data-slot=detail-field]]:p-3',
+          (variant === 'framed' || dividers) && !splitHorizontalField && '[&>[data-slot=detail-field]]:p-3',
           variant === 'framed' &&
             'overflow-hidden rounded-lg border border-border bg-transparent text-foreground',
           // Default da coluna de rótulos como CLASSE, antes do `className`: assim uma classe do
@@ -74,10 +72,7 @@ function DetailGroup({
   )
 }
 
-export interface DetailFieldProps extends Omit<
-  React.ComponentProps<'div'>,
-  'children'
-> {
+export interface DetailFieldProps extends Omit<React.ComponentProps<'div'>, 'children'> {
   label: React.ReactNode
   /** `null`, `undefined`, string vazia ou só com espaços renderizam a ausência
    *  como travessão; “Não informado” ou `empty` preservam o significado para
@@ -99,11 +94,13 @@ function DetailField({
   ...props
 }: DetailFieldProps): React.ReactElement {
   const { splitHorizontalField } = React.useContext(DetailGroupLayoutContext)
-  const content = !isAbsentValue(value)
-    ? value
-    : empty === undefined || typeof empty === 'string'
-      ? <EmptyValue compact {...(empty !== undefined ? { label: empty } : {})} />
-      : empty
+  const content = !isAbsentValue(value) ? (
+    value
+  ) : empty === undefined || typeof empty === 'string' ? (
+    <EmptyValue compact {...(empty !== undefined ? { label: empty } : {})} />
+  ) : (
+    empty
+  )
   return (
     <div
       data-slot="detail-field"
@@ -131,7 +128,7 @@ function DetailField({
       <dt
         data-slot="detail-field-label"
         className={cn(
-          'flex items-center gap-2.5 text-sm leading-snug font-medium text-muted-foreground',
+          'flex items-center gap-1.5 text-sm leading-snug font-medium text-muted-foreground',
           splitHorizontalField && 'bg-muted/30 p-3 dark:bg-input/30',
         )}
       >

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

@@ -2,6 +2,22 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { cn } from "../../lib/cn.ts";
+import {
+  SurfaceLayoutProvider,
+  surfaceActionsClasses,
+  surfaceHeaderRowClasses,
+  surfaceRegionClasses,
+  surfaceTitleClasses,
+  useSurfaceLayout,
+  type SurfaceLayout,
+} from "../patterns/surface-anatomy.ts";
+import { FillBoundary } from "../patterns/fill-region.ts";
+import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
+import { SurfaceHeader } from "../patterns/surface-header.tsx";
+import {
+  SurfaceMedia,
+  type SurfaceMediaProps,
+} from "../patterns/surface-media.tsx";
 import {
   CloseButton,
   type CloseButtonSize,
@@ -30,6 +46,24 @@ const DialogContentContext = React.createContext<DialogContentContextValue>({
   closeSize: "sm",
 });
 
+/**
+ * Compõe o handler de dispensa do consumidor com o bloqueio de `closeDisabled`: o handler dele
+ * roda primeiro e, com a superfície bloqueada, o evento é cancelado para que Esc, clique fora ou
+ * foco fora não a fechem. Sem bloqueio, devolve o handler original.
+ */
+export function preventDismissWhen<
+  E extends { defaultPrevented: boolean; preventDefault(): void },
+>(
+  blocked: boolean,
+  handler: ((event: E) => void) | undefined,
+): ((event: E) => void) | undefined {
+  if (!blocked) return handler;
+  return (event) => {
+    handler?.(event);
+    if (!event.defaultPrevented) event.preventDefault();
+  };
+}
+
 function useDialogContext(): DialogContextValue {
   return React.useContext(DialogContext);
 }
@@ -175,15 +209,23 @@ export function DialogContent({
   showCloseButton,
   closeDisabled = false,
   closeSize = "sm",
+  layout = "sectioned",
   "aria-describedby": ariaDescribedBy,
+  onEscapeKeyDown,
+  onInteractOutside,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   /** Mostra a ação “Fechar” no modo padrão. O modo `alert` exige uma resposta identificável. */
   showCloseButton?: boolean;
-  /** Mantém a ação visível, mas impede fechar enquanto a superfície está bloqueada. */
+  /**
+   * Bloqueia o fechamento enquanto a superfície está ocupada: desabilita a ação “Fechar”, que
+   * continua visível, e cancela Esc e clique ou foco fora depois dos handlers do consumidor.
+   */
   closeDisabled?: boolean;
   /** Tamanho da ação circular de fechar no cabeçalho. */
   closeSize?: CloseButtonSize;
+  /** Anatomia da superfície: `sectioned` (default) ou `continuous` — ADR 0023. */
+  layout?: SurfaceLayout;
 }) {
   const { mode } = useDialogContext();
   const showClose = showCloseButton ?? mode !== "alert";
@@ -199,17 +241,22 @@ export function DialogContent({
           data-mode="alert"
           className={cn(contentClasses, "grid max-w-xs gap-4 p-6", className)}
           aria-describedby={ariaDescribedBy}
+          onEscapeKeyDown={preventDismissWhen(closeDisabled, onEscapeKeyDown)}
           {...props}
         >
-          <DialogContentContext.Provider
-            value={{
-              showCloseButton: false,
-              closeDisabled: true,
-              closeSize,
-            }}
-          >
-            {children}
-          </DialogContentContext.Provider>
+          {/* Sem anatomia seccionada (exceção da ADR 0023), mas a altura continua sendo
+              decisão do diálogo: a cadeia `fill` da página não atravessa o portal. */}
+          <FillBoundary>
+            <DialogContentContext.Provider
+              value={{
+                showCloseButton: false,
+                closeDisabled: true,
+                closeSize,
+              }}
+            >
+              {children}
+            </DialogContentContext.Provider>
+          </FillBoundary>
         </AlertDialogPrimitive.Content>
       </DialogPortal>
     );
@@ -221,19 +268,24 @@ export function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         data-mode="default"
+        data-layout={layout}
         className={cn(
           contentClasses,
           "flex max-h-[85vh] max-w-lg flex-col",
           className,
         )}
         aria-describedby={ariaDescribedBy}
+        onEscapeKeyDown={preventDismissWhen(closeDisabled, onEscapeKeyDown)}
+        onInteractOutside={preventDismissWhen(closeDisabled, onInteractOutside)}
         {...props}
       >
-        <DialogContentContext.Provider
-          value={{ showCloseButton: showClose, closeDisabled, closeSize }}
-        >
-          {children}
-        </DialogContentContext.Provider>
+        <SurfaceLayoutProvider value={layout}>
+          <DialogContentContext.Provider
+            value={{ showCloseButton: showClose, closeDisabled, closeSize }}
+          >
+            {children}
+          </DialogContentContext.Provider>
+        </SurfaceLayoutProvider>
       </DialogPrimitive.Content>
     </DialogPortal>
   );
@@ -245,40 +297,99 @@ export function DialogHeader({
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
+  const layout = useSurfaceLayout("dialog");
   const { showCloseButton, closeDisabled, closeSize } =
     React.useContext(DialogContentContext);
+
+  // O modo de alerta é a exceção declarada da ADR 0023: a resposta obrigatória empilha
+  // mídia, título e corpo centralizados, e o padding mora na raiz do conteúdo.
+  if (mode === "alert") {
+    return (
+      <div
+        data-slot="dialog-header"
+        className={cn(
+          "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=dialog-media]:grid-rows-[auto_auto_1fr]",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
   return (
-    <div
-      data-slot="dialog-header"
+    <SurfaceHeader
+      name="DialogHeader"
+      slot="dialog"
+      slots={{
+        leading: DialogNavigation,
+        media: DialogMedia,
+        title: DialogTitle,
+        actions: DialogActions,
+      }}
+      leadingPlacement="inline"
+      titleRequired={false}
+      rowClassName={surfaceHeaderRowClasses("dialog")}
       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-4 text-left [&:has(+[data-slot=dialog-footer])]:border-b-0",
+        "text-left",
+        surfaceRegionClasses("dialog", layout, "header"),
         className,
       )}
+      trailing={
+        showCloseButton ? (
+          <DialogCloseButton disabled={closeDisabled} size={closeSize} />
+        ) : undefined
+      }
       {...props}
     >
       {children}
-      {mode !== "alert" && showCloseButton && (
-        <DialogCloseButton disabled={closeDisabled} size={closeSize} />
-      )}
-    </div>
+    </SurfaceHeader>
   );
 }
 
-export function DialogMedia({
+/** Região introdutória do header — o voltar de um fluxo modal encadeado. */
+export function DialogNavigation({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-navigation-content"
+      className={cn("flex min-w-0 shrink-0 items-center", className)}
+      {...props}
+    />
+  );
+}
+
+/** Ações da tela no header, antes do botão de fechar. */
+export function DialogActions({
   className,
   ...props
 }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="dialog-media"
+      data-slot="dialog-actions"
+      className={cn(surfaceActionsClasses, className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogMedia({ className, ...props }: SurfaceMediaProps) {
+  const { mode } = useDialogContext();
+  // No alerta a mídia é o elemento de reconhecimento da resposta e ocupa a moldura
+  // maior — exceção declarada da ADR 0023, coberta por teste. Fora dele, a mesma
+  // moldura das demais famílias.
+  return mode === "alert" ? (
+    <SurfaceMedia
+      slot="dialog-media"
+      size="lg"
       className={cn(
-        'mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted *:[svg:not([class*="size-"])]:size-8',
+        'mb-2 size-16 *:[svg:not([class*="size-"])]:size-8',
         className,
       )}
       {...props}
     />
+  ) : (
+    <SurfaceMedia slot="dialog-media" {...props} className={className} />
   );
 }
 
@@ -288,11 +399,17 @@ export function DialogBody({
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
+  const layout = useSurfaceLayout("dialog");
   return (
     <div
       data-slot="dialog-body"
       className={cn(
-        mode === "alert" ? "min-w-0" : "min-h-0 flex-1 overflow-y-auto p-4",
+        mode === "alert"
+          ? "min-w-0"
+          : cn(
+              "min-h-0 flex-1 overflow-y-auto",
+              surfaceRegionClasses("dialog", layout, "body"),
+            ),
         className,
       )}
       style={
@@ -310,13 +427,17 @@ export function DialogFooter({
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
+  const layout = useSurfaceLayout("dialog");
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
         mode === "alert"
           ? "w-full"
-          : "flex shrink-0 flex-row justify-end gap-2 border-t bg-muted/20 p-4 dark:bg-input/20",
+          : cn(
+              "flex shrink-0 flex-row justify-end gap-2",
+              surfaceRegionClasses("dialog", layout, "footer"),
+            ),
         className,
       )}
       {...props}
@@ -326,23 +447,36 @@ export function DialogFooter({
 
 export function DialogTitle({
   className,
+  level,
+  children,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.ComponentProps<typeof DialogPrimitive.Title> & {
+  /** Hierarquia do documento. Sem ele vale o `h2` que a primitiva emite. */
+  level?: HeadingLevel;
+}) {
   const { mode } = useDialogContext();
-  return mode === "alert" ? (
-    <AlertDialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  ) : (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn(
-        "min-w-0 flex-1 text-lg font-semibold leading-none",
-        className,
-      )}
-      {...props}
-    />
+  const layout = useSurfaceLayout("dialog");
+  const Title = mode === "alert" ? AlertDialogPrimitive.Title : DialogPrimitive.Title;
+  const classes = cn(
+    mode === "alert" ? undefined : "min-w-0 truncate",
+    surfaceTitleClasses("dialog", layout),
+    className,
+  );
+  // O nível troca a TAG do mesmo nó, via `asChild` — nunca aninha um heading dentro
+  // de outro, e a escala continua vindo do layout (ADR 0023).
+  if (level === undefined) {
+    return (
+      <Title data-slot="dialog-title" className={classes} {...props}>
+        {children}
+      </Title>
+    );
+  }
+  const Heading = headingTags[level];
+  return (
+    <Title asChild {...props}>
+      <Heading data-slot="dialog-title" className={classes}>
+        {children}
+      </Heading>
+    </Title>
   );
 }