@softize/opus 12.6.0 → 12.6.1

package/CHANGELOG.md

@@ -7,6 +7,17 @@ Depois de qualquer bump, rode os gates (`typecheck` · `test` · `opus check` ·
 `opus copy --check` · `base copy check` · `manifest:check`) — eles apontam o que a
 mudança cobra do seu código.
 
+## 12.6.1 — 2026-08-26
+
+Os padrões de UI passam a distinguir melhor estrutura e ação. `Page` centraliza o conteúdo com
+teto padrão de `72rem`; estados vazios em bloco preservam uma moldura sólida, enquanto `Empty`
+mantém a moldura tracejada para regiões disponíveis para criação ou vínculo. Colunas numéricas de
+`ActionList` deixam de impor alinhamento e tipografia próprios.
+
+Modais removem a borda redundante e usam recorte que impede overlays internos de provocar rolagem
+ao fechar. Ações de cancelamento em formulários e confirmações usam a variante `ghost`, preservando
+o destaque para a ação principal.
+
 ## 12.6.0 — 2026-08-25
 
 `ContentHeader` oferece a composição compartilhada de título, descrição, metadados e ações para

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "12.6.0",
+  "version": "12.6.1",
   "description": "End-to-end action protocol for TypeScript. Single package with subpath exports (core + adapters).",
   "license": "MIT",
   "type": "module",
@@ -218,7 +218,7 @@
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
-    "@softize/base": "^2.1.0",
+    "@softize/base": "^2.2.1",
     "@tailwindcss/typography": "^0.5.20",
     "@types/markdown-it": "^14.1.2",
     "class-variance-authority": "^0.7.1",

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

@@ -95,5 +95,9 @@ export function DataState({
       </div>
     )
   }
-  return <p className="py-10 text-center text-sm text-muted-foreground/60">{emptyText}</p>
+  return (
+    <p className="rounded-lg border border-border py-10 text-center text-sm text-muted-foreground/60">
+      {emptyText}
+    </p>
+  )
 }

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

@@ -589,7 +589,7 @@ export function ActionForm<TInput extends Record<string, unknown>, TData>({
         {wrapFooter(
           <>
             {onCancel !== undefined && (
-              <Button type="button" variant="outline" onClick={onCancel}>
+              <Button type="button" variant="ghost" onClick={onCancel}>
                 {cancelLabel}
               </Button>
             )}

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

@@ -1002,10 +1002,7 @@ export function ActionList<TInput, TItem>({
         header: text(c.label, c.key),
         sortable: c.sortable === true,
         spec: c,
-        className: cn(
-          c.fit === true && 'w-px whitespace-nowrap',
-          c.type === 'number' && 'text-right tabular-nums',
-        ),
+        className: cn(c.fit === true && 'w-px whitespace-nowrap'),
         cell:
           cells?.[c.key] ??
           ((item: TItem): ReactNode => {
@@ -1409,7 +1406,7 @@ export function ActionList<TInput, TItem>({
               )}
             </AlertDialogHeader>
             <AlertDialogFooter>
-              <Button variant="outline" size="sm" onClick={() => setConfirming(null)}>
+              <Button variant="ghost" size="sm" onClick={() => setConfirming(null)}>
                 Cancelar
               </Button>
               <Button

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

@@ -1,8 +1,8 @@
 /**
  * <Page /> — o esqueleto de página do back-office.
  *
- * Padroniza o que toda página repete: <main> + container de largura CHEIA (o caso
- * comum do back-office; quem quiser estreito passa `className="max-w-5xl"`) + header
+ * Padroniza o que toda página repete: <main> + container centralizado com teto de 72rem
+ * (`max-w-6xl`; quem precisar de outra largura sobrescreve por `className`) + header
  * (título, descrição e ações à direita, alinhadas ao fim desse bloco — em geral o botão
  * de criar). O conteúdo é
  * children, sem nada imposto. Presentacional (sem contrato) de propósito: uma página
@@ -21,7 +21,7 @@ export interface PageProps {
   description?: ReactNode
   /** Ações à direita do header, alinhadas ao fim do bloco de contexto. */
   actions?: ReactNode
-  /** Classes do container. Default: largura cheia; `max-w-5xl` estreita e centra. */
+  /** Classes do container. Default: centralizado com `max-w-6xl` (72rem). */
   className?: string
   children: ReactNode
 }
@@ -29,7 +29,7 @@ export interface PageProps {
 export function Page({ title, count, description, actions, className, children }: PageProps): React.ReactElement {
   return (
     <main data-slot="page" className="min-w-0 flex-1">
-      <div className={cn('mx-auto px-8 py-8', className)}>
+      <div className={cn('mx-auto max-w-6xl px-8 py-8', className)}>
         <div data-slot="page-header" className="mb-6">
           <ContentHeaderFrame
             title={title}

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

@@ -183,7 +183,7 @@ export function ActionTrigger<TInput, TData>({
             )}
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <Button variant="outline" onClick={() => setOpen(false)} disabled={isLoading}>
+            <Button variant="ghost" onClick={() => setOpen(false)} disabled={isLoading}>
               {confirm.cancelLabel ?? 'Cancelar'}
             </Button>
             <Button variant={confirmVariant} busy={isLoading} onClick={fire}>

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

@@ -158,7 +158,7 @@ function AlertDialogAction({
 
 function AlertDialogCancel({
   className,
-  variant = "outline",
+  variant = "ghost",
   size = "default",
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &

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

@@ -51,10 +51,10 @@ export function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          // Superfície PURA: só a casca (borda/bg/raio/sombra) + coluna flex com teto de
+          // Superfície PURA: só a casca (bg/raio/sombra) + coluna flex com teto de
           // altura. O padding mora nos SLOTS (Header/Body/Footer), não aqui — assim ninguém
           // precisa negar margem pra escapar de um p-6 embutido.
-          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-clip rounded-xl bg-card text-card-foreground shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className,
         )}
         {...props}
@@ -110,7 +110,7 @@ export function DialogFooter({ className, ...props }: React.ComponentProps<'div'
       data-slot="dialog-footer"
       // Faixa destacada (divergência da casa, ao estilo do site do shadcn): borda em cima
       // + fundo muted. Sangra até as bordas sozinha — o content não tem padding, então não
-      // há -mx pra compensar; o overflow-hidden do content arredonda o canto de baixo.
+      // há -mx pra compensar; o recorte do content arredonda o canto de baixo.
       className={cn(
         'flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end',
         className,

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

@@ -7,7 +7,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="empty"
       className={cn(
-        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border border-dashed border-border p-6 text-center text-balance md:p-12",
         className
       )}
       {...props}

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

@@ -9,7 +9,7 @@ faixa de modal). Pra estruturar uma seção da página como painel. O título é
     title="Editar workspace"
     action={docWorkspaceCreate}
     defaultValues={{ name: 'Empresa X', status: 'active' }}
-    submitLabel="Salvar"
+    submitLabel="Salvar alterações"
   />
 </DocBrowserActionProvider>
 ```

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

@@ -16,6 +16,7 @@ render(
       title="Novo workspace"
       description="O workspace agrupa os repositórios e agentes do cliente."
       action={docWorkspaceCreate}
+      submitLabel="Criar workspace"
     />
   </DocBrowserActionProvider>,
 )
@@ -27,4 +28,5 @@ render(
 |---|---|---|---|
 | `open / onOpenChange` | `boolean / (open: boolean) => void` | | Controle do modal — o pattern chama onOpenChange(false) no sucesso e no Cancelar. |
 | `title / description` | `string` | | O DialogHeader fixo — description é opcional. |
+| `submitLabel` | `string` | `'Salvar'` | Resultado da ação principal. Em criação, informe `Criar {recurso}`; em edição, `Salvar alterações`. |
 | `…ActionFormProps` | `action, defaultValues, onSuccess, fieldOptions…` | | Todo o resto desce pro ActionForm interno — mesma API da página dele. |

package/src/ui/docs/content/alert-dialog.md

@@ -70,4 +70,4 @@ composição e onde o `variant` entra:
 | `open` (AlertDialog) | `boolean` | | Estado de aberto no modo controlado — pareie com onOpenChange. No padrão, o Trigger cuida disso. |
 | `onOpenChange` (AlertDialog) | `(open: boolean) => void` | | Chamado quando o diálogo abre ou fecha (Trigger, Cancel, Action ou Esc). |
 | `variant` (AlertDialogAction) | `'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'` | `'default'` | Intenção do botão de confirmar (herdada do Button) — destructive pra ação perigosa. |
-| `variant` (AlertDialogCancel) | `'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'` | `'outline'` | Intenção do botão de cancelar (herdada do Button). |
+| `variant` (AlertDialogCancel) | `'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'` | `'ghost'` | Intenção do botão de cancelar (herdada do Button). |

package/src/ui/docs/content/button.md

@@ -4,10 +4,10 @@ variant é intenção, não decoração: default pra ação principal (uma por t
 quando destrói de verdade.
 
 ```tsx preview
-<Button>Salvar</Button>
+<Button>Criar workspace</Button>
 <Button variant="secondary">Duplicar</Button>
-<Button variant="outline">Cancelar</Button>
-<Button variant="ghost">Detalhes</Button>
+<Button variant="outline">Ver prévia</Button>
+<Button variant="ghost">Cancelar</Button>
 <Button variant="destructive">Excluir</Button>
 <Button variant="link">Ver documentação</Button>
 ```
@@ -33,7 +33,7 @@ centralizado/Skeleton num nível de página.
 
 ```tsx preview
 <Button disabled>Desabilitado</Button>
-<Button busy>Salvar</Button>
+<Button busy>Salvando…</Button>
 <Button icon={Plus}>Novo</Button>
 <Button icon={Plus} busy>Novo</Button>
 ```

package/src/ui/docs/content/customization.md

@@ -39,7 +39,7 @@ de 16, sem transformar esse valor em uma regra da biblioteca.
 > vence o conflito. Pra layout local (largura, margem, grid) — não pra repintar o visual da casa.
 
 ```tsx
-<Button className="w-full">Salvar</Button>
+<Button className="w-full">Continuar</Button>
 <Card className="max-w-sm" />
 <DialogContent className="sm:max-w-2xl" />
 ```

package/src/ui/docs/content/data-state.md

@@ -1,7 +1,8 @@
 ## Estados
 
 Um lugar só pro erro/carregando/vazio/conteúdo de uma carga. Carregando = Spinner centralizado;
-vazio = texto; erro = aviso calmo (a mensagem técnica não vai pra tela). É o "antes" do conteúdo —
+vazio = texto em uma moldura sólida no modo bloco; erro = aviso calmo (a mensagem técnica não vai
+pra tela). É o "antes" do conteúdo —
 pro "depois" (ação em andamento), use o busy do Button.
 
 ```tsx preview col
@@ -20,8 +21,10 @@ pro "depois" (ação em andamento), use o busy do Button.
 
 ## Em tabela (colSpan)
 
-Em lista de tabela, passe colSpan: o estado vira UMA linha de largura cheia (`<tr><td colSpan>`)
-que cabe direto no `<tbody>`; o conteúdo são as `<tr>` dos itens.
+Em lista ou tabela já emoldurada, passe colSpan: o estado vira UMA linha de largura cheia
+(`<tr><td colSpan>`) que cabe direto no `<tbody>`; o conteúdo são as `<tr>` dos itens. A tabela
+continua dona da borda, sem uma segunda moldura no vazio. Para uma região disponível para criação
+ou vínculo, com título, descrição ou ação, use `Empty`, cuja moldura é tracejada.
 
 ```tsx preview col
 <table className="w-full overflow-hidden rounded-lg border border-border text-sm">

package/src/ui/docs/content/dialog.md

@@ -18,7 +18,7 @@ Content é superfície pura; o espaço mora nos slots (body p-5; header/footer p
     </DialogBody>
     <DialogFooter>
       <DialogClose asChild>
-        <Button variant="outline" size="sm">Cancelar</Button>
+        <Button variant="ghost" size="sm">Cancelar</Button>
       </DialogClose>
       <Button size="sm">Criar</Button>
     </DialogFooter>
@@ -42,7 +42,7 @@ showCloseButton={false} esconde o X: o usuário decide pelos botões — pra con
     </DialogHeader>
     <DialogFooter>
       <DialogClose asChild>
-        <Button variant="outline" size="sm">Cancelar</Button>
+        <Button variant="ghost" size="sm">Cancelar</Button>
       </DialogClose>
       <DialogClose asChild>
         <Button variant="destructive" size="sm">Excluir</Button>

package/src/ui/docs/content/drawer.md

@@ -38,9 +38,9 @@ side aceita top|right|bottom|left. DrawerFooter ancora as ações no rodapé; Dr
     </div>
     <DrawerFooter>
       <DrawerClose asChild>
-        <Button variant="outline" size="sm">Cancelar</Button>
+        <Button variant="ghost" size="sm">Cancelar</Button>
       </DrawerClose>
-      <Button size="sm">Salvar</Button>
+      <Button size="sm">Salvar alterações</Button>
     </DrawerFooter>
   </DrawerContent>
 </Drawer>

package/src/ui/docs/content/empty.md

@@ -1,3 +1,13 @@
+## Quando usar
+
+Use `Empty` quando a própria região está disponível para receber ou criar conteúdo. A moldura
+tracejada diferencia esse espaço de uma estrutura de dados já estabelecida e pode combinar título,
+descrição, mídia e ação.
+
+Para uma lista ou tabela carregada, mas sem registros, use `DataState` ou `ActionList`: a moldura
+sólida preserva a estrutura. Se a região já estiver emoldurada pelo pai, mantenha a borda somente
+no pai para evitar uma moldura dupla.
+
 ## Com ícone
 
 EmptyMedia variant=icon desenha o quadrado de fundo muted atrás do ícone; o EmptyHeader agrupa mídia, título e descrição no centro.

package/src/ui/docs/content/page.md

@@ -2,9 +2,9 @@
 
 Use `Page` para manter título, contexto, ações e conteúdo no mesmo ritmo visual nas telas do
 back-office. As ações ficam à direita e acompanham a base do conjunto formado pelo título e pela
-descrição. O componente ocupa a largura disponível; passe `className="max-w-5xl"` quando a tela
-pedir conteúdo mais estreito e centralizado. A área abaixo do cabeçalho permanece livre para
-tabelas, cards ou outras composições.
+descrição. O container é centralizado e ocupa a largura disponível até `72rem` (`max-w-6xl`). Use
+`className` somente quando a composição pedir explicitamente outro teto ou largura total. A área
+abaixo do cabeçalho permanece livre para tabelas, cards ou outras composições.
 
 ```tsx preview col
 render(
@@ -35,5 +35,5 @@ render(
 | `count` | `number` | | Total de itens ao lado do título (mono, esmaecido). |
 | `description` | `ReactNode` | | Linha de contexto sob o título (ex.: "N no total · X ativos"). |
 | `actions` | `ReactNode` | | Ações à direita do cabeçalho, alinhadas à base do título e da descrição. |
-| `className` | `string` | largura cheia | Classes do container (`max-w-5xl` estreita e centra). |
+| `className` | `string` | `max-w-6xl` | Classes do container para substituir o teto padrão de `72rem`. |
 | `children` | `ReactNode` | | O conteúdo — espaçamento e diagramação são seus. |

package/src/ui/docs/content/popover.md

@@ -15,7 +15,7 @@ PopoverHeader agrupa título e descrição; o corpo é livre (form curto, detalh
     <div className="mt-3 space-y-2">
       <Label htmlFor="pop-titulo">Título</Label>
       <Input id="pop-titulo" defaultValue="Onboarding do faturamento" />
-      <Button size="sm" className="w-full">Salvar</Button>
+      <Button size="sm" className="w-full">Renomear</Button>
     </div>
   </PopoverContent>
 </Popover>

package/src/ui/meta.ts

@@ -251,7 +251,7 @@ export const componentMeta = {
     name: 'empty',
     ancestry: 'shadcn',
     whenToUse:
-      'Estado vazio dentro de uma região: moldura tracejada centrada com `EmptyHeader` (mídia + `EmptyTitle` + `EmptyDescription`) e `EmptyContent` pras ações. `EmptyMedia variant` icon (quadrado muted) ou default (sem fundo). Pra erro inline use Alert; pra carregamento, Skeleton.',
+      'Região disponível para receber ou criar conteúdo: moldura tracejada centrada com `EmptyHeader` (mídia + `EmptyTitle` + `EmptyDescription`) e `EmptyContent` pras ações. Para lista ou tabela carregada sem registros, use DataState ou ActionList, que preservam a moldura sólida da estrutura. `EmptyMedia variant` icon (quadrado muted) ou default (sem fundo). Pra erro inline use Alert; pra carregamento, Skeleton.',
   },
   'field': {
     name: 'field',
@@ -390,7 +390,7 @@ export const componentMeta = {
     name: 'page',
     ancestry: 'opus',
     whenToUse:
-      'O esqueleto de página do back-office: <main> + container de largura cheia (className="max-w-5xl" estreita e centra) + header com título, descrição e ação à direita (em geral o criar). Presentacional (a página agrega N fontes); o action-driven mora dentro. Pra listagem em modal, ActionListDialog.',
+      'O esqueleto de página do back-office: <main> + container centralizado com teto padrão de 72rem (`max-w-6xl`) + header com título, descrição e ação à direita (em geral o criar). `className` substitui o teto quando a composição pede outra largura. Presentacional (a página agrega N fontes); o action-driven mora dentro. Pra listagem em modal, ActionListDialog.',
   },
   'router': {
     name: 'router',
@@ -402,7 +402,7 @@ export const componentMeta = {
     name: 'data-state',
     ancestry: 'opus',
     whenToUse:
-      'O estado "carregando" (ANTES do conteúdo): orquestra erro/carregando/vazio/conteúdo de uma carga assíncrona num só lugar — Spinner centralizado no loading, texto no vazio, aviso calmo no erro. Pra "processando" (ação em andamento DEPOIS do clique), use o `busy` do Button. Pra placeholder com forma, Skeleton.',
+      'O estado "carregando" (ANTES do conteúdo): orquestra erro/carregando/vazio/conteúdo de uma carga assíncrona num só lugar — Spinner centralizado no loading, texto em moldura sólida no vazio em bloco e aviso calmo no erro. Em tabela emoldurada, `colSpan` mantém a borda somente no pai. Pra uma região disponível para criação ou vínculo, use Empty, cuja moldura é tracejada. Pra "processando" (ação em andamento DEPOIS do clique), use o `busy` do Button. Pra placeholder com forma, Skeleton.',
   },
   'action-list-dialog': {
     name: 'action-list-dialog',