@softize/opus 12.5.5 → 12.6.1

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

@@ -58,10 +58,10 @@ import { Separator } from '../primitives/separator.tsx'
 import { Label } from '../primitives/label.tsx'
 import { Search } from 'lucide-react'
 import { Select, type SelectOption } from '../primitives/select.tsx'
-import { Skeleton } from '../primitives/skeleton.tsx'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../primitives/table.tsx'
 import { ToggleGroup, ToggleGroupItem } from '../primitives/toggle-group.tsx'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../primitives/tooltip.tsx'
+import { DataState } from './data-state.tsx'
 
 // =============================================================================
 // Helpers
@@ -165,6 +165,26 @@ export interface ListActionLike {
   periods?: PeriodSpec[] | undefined
 }
 
+/** Estado compartilhado pelos filtros declarativos, independente da listagem. */
+export interface ActionFilterState {
+  q: string
+  filters: Record<string, unknown>
+  period: string | null
+  from: string | null
+  to: string | null
+}
+
+export interface ActionFilterBarProps {
+  action: Pick<ListActionLike, 'filters' | 'text' | 'periods'>
+  state: ActionFilterState
+  onStateChange: (next: ActionFilterState) => void
+  filterOptions?: Record<string, SelectOption[]>
+  onRefresh?: () => Promise<void> | void
+  refreshing?: boolean
+  /** Ações de apresentação do consumidor, renderizadas depois do refresh. */
+  actions?: ReactNode
+}
+
 /** Uma view alternativa da MESMA listagem (board, galeria, lista, calendário…). A
  *  apresentação é de quem chama; o pattern dá o segment, o estado e os dados. */
 export interface ActionListView<TItem> {
@@ -684,6 +704,193 @@ function AdvancedFiltersDialog({
   )
 }
 
+/** Barra declarativa compartilhada por ActionList, relatórios e outras superfícies. */
+export function ActionFilterBar({
+  action,
+  state,
+  onStateChange,
+  filterOptions,
+  onRefresh,
+  refreshing = false,
+  actions,
+}: ActionFilterBarProps): React.ReactElement {
+  const dicts = useDicts()
+  const filterSpecs = Object.entries(action.filters ?? {})
+  const inlineSpecs = filterSpecs.filter(([, spec]) => spec.advanced !== true)
+  const hasSearch = (action.text?.fields.length ?? 0) > 0
+  const periods = action.periods ?? []
+  const defaultPeriod = periods.find((period) => period.default === true)?.value ?? periods[0]?.value ?? null
+  const activePeriod = state.period ?? defaultPeriod
+  const [advancedOpen, setAdvancedOpen] = useState(false)
+  const toolbarRowRef = useRef<HTMLDivElement | null>(null)
+  const [inlineFit, setInlineFit] = useState(Number.POSITIVE_INFINITY)
+
+  const cascadeClear = (changed: string, next: Record<string, unknown>): Record<string, unknown> => {
+    for (const [name, spec] of filterSpecs) {
+      if (spec.depends?.includes(changed) === true && !isEmptyValue(next[name])) {
+        delete next[name]
+        cascadeClear(name, next)
+      }
+    }
+    return next
+  }
+
+  useLayoutEffect(() => {
+    const row = toolbarRowRef.current
+    if (row === null) return
+    const overflowing = (): boolean =>
+      row.scrollWidth > row.clientWidth + 1 ||
+      Array.from(row.children).some((child) => child.scrollWidth > child.clientWidth + 1)
+    const compute = (): void => {
+      row.classList.remove('flex-wrap')
+      const nodes = Array.from(row.querySelectorAll<HTMLElement>('[data-slot="action-filter-inline"]'))
+      for (const node of nodes) node.style.removeProperty('display')
+      let count = nodes.length
+      while (count > 0 && overflowing()) {
+        count -= 1
+        nodes[count]?.style.setProperty('display', 'none')
+      }
+      if (count === 0 && overflowing()) row.classList.add('flex-wrap')
+      setInlineFit(count >= nodes.length ? Number.POSITIVE_INFINITY : count)
+    }
+    compute()
+    const observer = new ResizeObserver(compute)
+    observer.observe(row)
+    return () => observer.disconnect()
+  }, [inlineSpecs.length, state.filters, inlineFit])
+
+  const overflowSpecs = Number.isFinite(inlineFit) ? inlineSpecs.slice(inlineFit) : []
+  const modalSpecs = filterSpecs.filter(
+    ([name, spec]) => spec.advanced === true || overflowSpecs.some(([overflowName]) => overflowName === name),
+  )
+  const modalActive = modalSpecs.filter(([name]) => !isEmptyValue(state.filters[name])).length
+  const setFilter = (name: string, value: unknown): void => {
+    onStateChange({
+      ...state,
+      filters: cascadeClear(name, { ...state.filters, [name]: value }),
+    })
+  }
+  const chips = modalSpecs
+    .filter(([name]) => !isEmptyValue(state.filters[name]))
+    .map(([name, spec]) => {
+      const raw = state.filters[name]
+      const fromProps = optionsFor(name, spec, filterOptions)
+      const opts = fromProps.length > 0 ? fromProps : dictOptionsFor(spec, dicts)
+      const display = (value: unknown): string => opts.find((option) => option.value === value)?.label ?? String(value)
+      return {
+        name,
+        label: text(spec.label, name),
+        value: Array.isArray(raw) ? raw.map(display).join(', ') : display(raw),
+      }
+    })
+  const searchFirst = hasSearch && periods.length === 0 && filterSpecs.length === 0
+  const searchBox = hasSearch ? (
+    <ClearableInput
+      className="w-64 min-w-36"
+      leading={<Search />}
+      applied={state.q}
+      placeholder={text(action.text?.placeholder, 'Buscar…')}
+      onApply={(q) => q !== state.q && onStateChange({ ...state, q })}
+    />
+  ) : null
+
+  return (
+    <TooltipProvider>
+    <div data-slot="action-filter-bar" className="space-y-2">
+      <div ref={toolbarRowRef} className="flex items-end gap-3">
+        {searchFirst && searchBox}
+        {periods.length > 0 && (
+          <Labeled label="Período">
+            <PeriodControl
+              periods={periods}
+              period={activePeriod}
+              from={state.from}
+              to={state.to}
+              onChange={(next) => onStateChange({
+                ...state,
+                ...next,
+                period: next.period === defaultPeriod ? null : next.period,
+              })}
+            />
+          </Labeled>
+        )}
+        {inlineSpecs.map(([name, spec]) => (
+          <Labeled key={name} label={text(spec.label, name)} slot="action-filter-inline">
+            <FilterField
+              name={name}
+              spec={spec}
+              value={state.filters[name]}
+              allValues={state.filters}
+              onChange={(value) => setFilter(name, value)}
+              options={optionsFor(name, spec, filterOptions)}
+            />
+          </Labeled>
+        ))}
+        {modalSpecs.length > 0 && (
+          <Button variant="outline" className="shrink-0" onClick={() => setAdvancedOpen(true)}>
+            <SlidersHorizontal className="h-3.5 w-3.5" />
+            Filtros
+            {modalActive > 0 && <Badge variant="secondary" className="ml-1 h-5 min-w-5 px-1">{modalActive}</Badge>}
+          </Button>
+        )}
+        <div className="ml-auto flex min-w-0 items-center gap-2">
+          {!searchFirst && searchBox}
+          {onRefresh !== undefined && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="shrink-0"
+                  aria-label="Recarregar"
+                  onClick={() => void onRefresh()}
+                  disabled={refreshing}
+                >
+                  <RefreshCw className={cn('h-3.5 w-3.5', refreshing && 'animate-spin')} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Recarregar</TooltipContent>
+            </Tooltip>
+          )}
+          {actions}
+        </div>
+      </div>
+      {chips.length > 0 && (
+        <div data-slot="action-filter-chips" className="flex flex-wrap items-center gap-1.5">
+          {chips.map((chip) => (
+            <Badge key={chip.name} variant="secondary" className="gap-1 pr-1">
+              <span className="text-muted-foreground">{chip.label}:</span> {chip.value}
+              <button
+                type="button"
+                aria-label={`Remover filtro ${chip.label}`}
+                onClick={() => {
+                  const next = { ...state.filters }
+                  delete next[chip.name]
+                  onStateChange({ ...state, filters: next })
+                }}
+                className="rounded-sm text-muted-foreground hover:text-foreground"
+              >
+                <X className="size-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+      {modalSpecs.length > 0 && (
+        <AdvancedFiltersDialog
+          open={advancedOpen}
+          onOpenChange={setAdvancedOpen}
+          specs={modalSpecs}
+          values={state.filters}
+          cascade={cascadeClear}
+          onApply={(filters) => onStateChange({ ...state, filters })}
+          filterOptions={filterOptions}
+        />
+      )}
+    </div>
+    </TooltipProvider>
+  )
+}
+
 // =============================================================================
 // ActionList
 // =============================================================================
@@ -719,8 +926,6 @@ export function ActionList<TInput, TItem>({
   // — Estado da toolbar (interno ou controlado) —
   const defaultSort = action.sort?.default?.[0] ?? null
   const [internal, setInternal] = useState<ActionListState>({ ...emptyListState(), sort: defaultSort })
-  // Dicts do provider — labels de filtro dictionary nos CHIPS (o FilterField resolve os seus).
-  const dicts = useDicts()
   // Normaliza estado externo montado à mão (chaves novas ausentes = null/default).
   const raw = controlledState ?? internal
   const state: ActionListState = {
@@ -741,64 +946,7 @@ export function ActionList<TInput, TItem>({
   const setStateResetPage = (next: ActionListState): void => setState({ ...next, page: 1 })
 
   const filterSpecs = Object.entries(action.filters ?? {})
-  // Mudou um filtro → limpa (em cascata) todo filtro que declara `depends` nele:
-  // o recorte dependente perde o sentido quando o pai muda.
-  const cascadeClear = (changed: string, next: Record<string, unknown>): Record<string, unknown> => {
-    for (const [n, sp] of filterSpecs) {
-      if (sp.depends?.includes(changed) === true && !isEmptyValue(next[n])) {
-        delete next[n]
-        cascadeClear(n, next)
-      }
-    }
-    return next
-  }
-  const inlineSpecs = filterSpecs.filter(([, s]) => s.advanced !== true)
   const hasSearch = (action.text?.fields.length ?? 0) > 0
-  const [advancedOpen, setAdvancedOpen] = useState(false)
-
-  // — Overflow responsivo: filtro inline que NÃO CABE na linha vai pro modal (com os
-  //   advanced). Medição real: esconde do fim pro começo até a linha parar de
-  //   transbordar (useLayoutEffect = antes do paint, sem piscar) e re-mede no resize.
-  const toolbarRowRef = useRef<HTMLDivElement | null>(null)
-  const [inlineFit, setInlineFit] = useState(Number.POSITIVE_INFINITY)
-  useLayoutEffect(() => {
-    const row = toolbarRowRef.current
-    if (row === null) return
-    // Transborda de dois jeitos: a linha estoura (scrollWidth) OU um filho flexível
-    // (o grupo da direita, min-w-0) encolhe abaixo do conteúdo e vaza por cima dos
-    // vizinhos — esse segundo caso não mexe no scrollWidth da linha.
-    const overflowing = (): boolean =>
-      row.scrollWidth > row.clientWidth + 1 ||
-      Array.from(row.children).some((c) => c.scrollWidth > c.clientWidth + 1)
-    const compute = (): void => {
-      // Medição sempre em linha única; o wrap é o último recurso (re-avaliado abaixo).
-      row.classList.remove('flex-wrap')
-      const nodes = Array.from(row.querySelectorAll<HTMLElement>('[data-slot="action-list-inline-filter"]'))
-      for (const n of nodes) n.style.removeProperty('display')
-      let count = nodes.length
-      while (count > 0 && overflowing()) {
-        count -= 1
-        const node = nodes[count]
-        if (node !== undefined) node.style.display = 'none'
-      }
-      // Esgotou (zero filtros na linha) e AINDA não cabe → quebra a linha em vez de
-      // recortar controle (busca no mínimo + segment + botões > largura disponível).
-      if (count === 0 && overflowing()) row.classList.add('flex-wrap')
-      setInlineFit(count >= nodes.length ? Number.POSITIVE_INFINITY : count)
-    }
-    compute()
-    const ro = new ResizeObserver(compute)
-    ro.observe(row)
-    return () => ro.disconnect()
-    // inlineFit na dep: o setInlineFit pode fazer o botão "Filtros" aparecer e
-    // mudar a medida — o compute é idempotente, então re-rodar converge (sem loop).
-  }, [inlineSpecs.length, state.filters, inlineFit])
-  const overflowSpecs = Number.isFinite(inlineFit) ? inlineSpecs.slice(inlineFit) : []
-  // O modal recebe os advanced + os inline que transbordaram (ordem do contrato).
-  const modalSpecs = filterSpecs.filter(
-    ([name, s]) => s.advanced === true || overflowSpecs.some(([n]) => n === name),
-  )
-  const modalActive = modalSpecs.filter(([name]) => !isEmptyValue(state.filters[name])).length
 
   // — Views: 'table' (quando há colunas) + as nomeadas. O segment só existe com 2+. —
   const viewEntries: Array<[string, string, ReactNode?]> = [
@@ -808,9 +956,6 @@ export function ActionList<TInput, TItem>({
   const activeView = state.view ?? viewEntries[0]?.[0] ?? 'table'
   const hasSegment = children === undefined && viewEntries.length > 1
   const periods = action.periods ?? []
-  // Período é recorte obrigatório: o default é o preset marcado (ou o primeiro).
-  const defaultPeriod = periods.find((p) => p.default === true)?.value ?? periods[0]?.value ?? null
-  const activePeriod = state.period ?? defaultPeriod
   const hasToolbar = hasSearch || filterSpecs.length > 0 || periods.length > 0 || hasSegment || hasTable
 
   // — Input efetivo: escopo base + filtros preenchidos + período (→ from/to) + q + sort —
@@ -857,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 => {
@@ -925,95 +1067,17 @@ export function ActionList<TInput, TItem>({
     }
   }
 
-  // — Chips: só dos filtros DO MODAL (advanced + inline transbordado): os inline
-  //   visíveis mostram o próprio estado; os do modal ficariam invisíveis sem isto —
-  const chips = modalSpecs
-    .filter(([name]) => !isEmptyValue(state.filters[name]))
-    .map(([name, spec]) => {
-      const raw = state.filters[name]
-      // Mesma precedência do FilterField: runtime/estáticas > dictionary do provider.
-      const fromProps = optionsFor(name, spec, filterOptions)
-      const opts = fromProps.length > 0 ? fromProps : dictOptionsFor(spec, dicts)
-      const display = (v: unknown): string => opts.find((o) => o.value === v)?.label ?? String(v)
-      const value = Array.isArray(raw) ? raw.map(display).join(', ') : display(raw)
-      return { name, label: text(spec.label, name), value }
-    })
-  const clearFilter = (name: string): void => {
-    const next = { ...state.filters }
-    delete next[name]
-    setStateResetPage({ ...state, filters: next })
-  }
-
-  // A busca abre a linha SÓ quando é a única forma de recorte; com período ou
-  // filtros no contrato, o período abre e a busca fica no grupo da direita.
-  const searchFirst = hasSearch && periods.length === 0 && filterSpecs.length === 0
-  // Largura AUTO (todos os controles em default h-9, alinham nativamente):
-  // 64 com folga, encolhe até 36 no aperto — é o item flexível da linha.
-  const searchBox = hasSearch ? (
-    <ClearableInput
-      className="w-64 min-w-36"
-      leading={<Search />}
-      applied={state.q}
-      placeholder={text(action.text?.placeholder, 'Buscar…')}
-      onApply={(v) => {
-        if (v !== state.q) setStateResetPage({ ...state, q: v })
-      }}
-    />
-  ) : null
-
   const toolbar = hasToolbar ? (
-    <div data-slot="action-list-toolbar" className="space-y-2">
-      {/* Linha única (sem wrap): a busca encolhe primeiro; depois os filtros inline
-          transbordam pro modal (medição no useLayoutEffect acima). */}
-      <div ref={toolbarRowRef} className="flex items-end gap-3">
-        {searchFirst && searchBox}
-        {periods.length > 0 && (
-          <Labeled label="Período">
-            <PeriodControl
-              periods={periods}
-              period={activePeriod}
-              from={state.from}
-              to={state.to}
-              onChange={(next) =>
-                setStateResetPage({
-                  ...state,
-                  ...next,
-                  period: next.period === defaultPeriod ? null : next.period,
-                })
-              }
-            />
-          </Labeled>
-        )}
-        {inlineSpecs.map(([name, spec]) => (
-          <Labeled key={name} label={text(spec.label, name)} slot="action-list-inline-filter">
-            <FilterField
-              name={name}
-              spec={spec}
-              value={state.filters[name]}
-              allValues={state.filters}
-              onChange={(v) =>
-                setStateResetPage({ ...state, filters: cascadeClear(name, { ...state.filters, [name]: v }) })
-              }
-              options={optionsFor(name, spec, filterOptions)}
-            />
-          </Labeled>
-        ))}
-        {modalSpecs.length > 0 && (
-          <Button variant="outline" className="shrink-0" onClick={() => setAdvancedOpen(true)}>
-            <SlidersHorizontal className="h-3.5 w-3.5" />
-            Filtros
-            {modalActive > 0 && (
-              <Badge variant="secondary" className="ml-1 h-5 min-w-5 px-1">
-                {modalActive}
-              </Badge>
-            )}
-          </Button>
-        )}
-        {/* O grupo da direita cede por min-w-0 (sem justify-end: o vazamento no
-            aperto cai pra DIREITA, onde o scrollWidth da detecção enxerga); a busca
-            aqui dentro é o item flexível — encolhe antes de filtro migrar pro modal. */}
-        <div className="ml-auto flex min-w-0 items-center gap-2">
-          {!searchFirst && searchBox}
+    <div data-slot="action-list-toolbar">
+      <ActionFilterBar
+        action={action}
+        state={state}
+        onStateChange={(next) => setStateResetPage({ ...state, ...next })}
+        filterOptions={filterOptions}
+        onRefresh={() => refetch()}
+        refreshing={isLoading}
+        actions={
+          <>
           {hasSegment && (
             <ToggleGroup
               type="single"
@@ -1039,20 +1103,6 @@ export function ActionList<TInput, TItem>({
               ))}
             </ToggleGroup>
           )}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                className="shrink-0"
-                aria-label="Recarregar"
-                onClick={() => void refetch()}
-                disabled={isLoading}
-              >
-                <RefreshCw className={cn('h-3.5 w-3.5', isLoading && 'animate-spin')} />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Recarregar</TooltipContent>
-          </Tooltip>
           {/* Configuração de EXIBIÇÃO — sempre presente (em qualquer view): colunas quando a
               tabela está ativa, itens por página sempre, e o que vier depois. */}
           <Popover>
@@ -1119,81 +1169,25 @@ export function ActionList<TInput, TItem>({
               </div>
             </PopoverContent>
           </Popover>
-        </div>
-      </div>
-      {chips.length > 0 && (
-        <div data-slot="action-list-chips" className="flex flex-wrap items-center gap-1.5">
-          {chips.map((chip) => (
-            <Badge key={chip.name} variant="secondary" className="gap-1 pr-1">
-              <span className="text-muted-foreground">{chip.label}:</span> {chip.value}
-              <button
-                type="button"
-                aria-label={`Remover filtro ${chip.label}`}
-                onClick={() => clearFilter(chip.name)}
-                className="rounded-sm text-muted-foreground hover:text-foreground"
-              >
-                <X className="size-3" />
-              </button>
-            </Badge>
-          ))}
-        </div>
-      )}
-      {modalSpecs.length > 0 && (
-        <AdvancedFiltersDialog
-          open={advancedOpen}
-          onOpenChange={setAdvancedOpen}
-          specs={modalSpecs}
-          values={state.filters}
-          cascade={cascadeClear}
-          onApply={(next) => setStateResetPage({ ...state, filters: next })}
-          filterOptions={filterOptions}
-        />
-      )}
+          </>
+        }
+      />
     </div>
   ) : null
 
   // — Estados de carga —
   const busy = isFetching || extraLoading === true
   const isEmpty = empty !== undefined ? empty(items) : items.length === 0
-  let body: ReactNode
-  if (busy && items.length === 0 && !(empty !== undefined && !isEmpty)) {
-    body = (
-      <div className="space-y-2">
-        <Skeleton className="h-10 w-full" />
-        <Skeleton className="h-10 w-full" />
-        <Skeleton className="h-10 w-full" />
-      </div>
-    )
-  } else if (isError && error !== undefined) {
-    body = (
-      <div className="rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm space-y-3">
-        <div>
-          <strong className="text-destructive">{error.code}</strong>
-          <p className="text-destructive">{error.message}</p>
-        </div>
-        <Button variant="outline" size="sm" onClick={() => void refetch()}>
-          Tentar de novo
-        </Button>
-      </div>
-    )
-  } else if (isEmpty) {
-    body = (
-      <div className="rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground">
-        {emptyMessage}
-      </div>
-    )
-  } else if (children !== undefined) {
+  let content: ReactNode
+  if (children !== undefined) {
     // Modo COMPOSIÇÃO: o layout é de quem compõe; a toolbar e os estados seguem daqui.
-    body = children(items, () => refetch())
+    content = children(items, () => refetch())
   } else if (activeView !== 'table' && views?.[activeView] !== undefined) {
     // View alternativa (board/galeria/…): mesma fonte e toolbar, outro renderer.
-    body = views[activeView].render(items, () => refetch())
+    content = views[activeView].render(items, () => refetch())
   } else {
-    body = (
-      // Moldura da casa (igual à listagem de workspaces): quadro arredondado com o
-      // scroll horizontal contido; a última linha fica sem borda pelo TableBody.
-      <div className="overflow-hidden rounded-lg border border-border">
-        <Table>
+    content = (
+        <Table variant="framed">
           <TableHeader>
             <TableRow>
               {hasSelection && (
@@ -1271,9 +1265,19 @@ export function ActionList<TInput, TItem>({
             ))}
           </TableBody>
         </Table>
-      </div>
     )
   }
+  const body = (
+    <DataState
+      loading={busy && items.length === 0 && !(empty !== undefined && !isEmpty)}
+      error={isError ? error : null}
+      empty={isEmpty}
+      emptyText={emptyMessage}
+      onRetry={() => refetch()}
+    >
+      {content}
+    </DataState>
+  )
 
   // — Barra de seleção (batch): aparece só com itens marcados —
   const selectionBar =
@@ -1402,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
@@ -11,6 +11,7 @@
 
 import type { ReactNode } from 'react'
 import { cn } from '../../lib/cn.ts'
+import { ContentHeaderFrame } from './content-header.tsx'
 
 export interface PageProps {
   title: string
@@ -20,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
 }
@@ -28,23 +29,21 @@ 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)}>
-        {/* As ações acompanham o fim do contexto, mesmo quando há uma descrição sob o título. */}
+      <div className={cn('mx-auto max-w-6xl px-8 py-8', className)}>
         <div data-slot="page-header" className="mb-6">
-          <div className={cn(actions !== undefined && 'flex items-end justify-between gap-4')}>
-            <div data-slot="page-heading" className="min-w-0">
-              <h1 className="flex items-baseline gap-2 text-2xl font-semibold tracking-tight">
-                {title}
-                {count !== undefined && <span className="font-mono text-base text-muted-foreground/60">{count}</span>}
-              </h1>
-              {description !== undefined && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
-            </div>
-            {actions !== undefined && (
-              <div data-slot="page-actions" className="flex shrink-0 items-center gap-4">
-                {actions}
-              </div>
-            )}
-          </div>
+          <ContentHeaderFrame
+            title={title}
+            meta={
+              count === undefined ? undefined : (
+                <span className="font-mono text-base text-muted-foreground/60">{count}</span>
+              )
+            }
+            description={description}
+            actions={actions}
+            level={1}
+            variant="page"
+            slots={{ heading: 'page-heading', actions: 'page-actions' }}
+          />
         </div>
         {children}
       </div>

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

@@ -123,7 +123,8 @@ export function ActionTrigger<TInput, TData>({
   const destructive = spec?.destructive === true
   // Com ícone o botão é chrome do item: fica ghost, e o vermelho aparece no hover — uma
   // lixeira sólida vermelha em cada linha seria um campo minado visual.
-  const effectiveVariant = variant ?? (icon !== undefined ? 'ghost' : destructive ? 'destructive' : 'default')
+  const triggerVariant = variant ?? (icon !== undefined ? 'ghost' : destructive ? 'destructive' : 'default')
+  const confirmVariant = destructive ? 'destructive' : (variant ?? 'default')
 
   const fire = () => {
     void trigger(input)
@@ -135,7 +136,7 @@ export function ActionTrigger<TInput, TData>({
   const renderButton = (onClick: () => void): React.ReactElement => {
     const button = (
       <Button
-        variant={effectiveVariant}
+        variant={triggerVariant}
         size={icon !== undefined ? 'icon' : size}
         busy={isLoading}
         disabled={disabled}
@@ -182,10 +183,10 @@ 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={effectiveVariant} busy={isLoading} onClick={fire}>
+            <Button variant={confirmVariant} busy={isLoading} onClick={fire}>
               {confirm.actionLabel ?? buttonLabel}
             </Button>
           </AlertDialogFooter>

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> &