@softize/opus 12.2.0 → 12.2.1

package/CHANGELOG.md

@@ -7,6 +7,12 @@ 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.2.1 — 2026-08-23
+
+O cabeçalho de `Page` passa a alinhar `actions` à base do bloco formado por título e descrição.
+Assim, os botões permanecem junto ao fim do contexto quando a página apresenta uma linha
+explicativa. Múltiplas ações conservam o espaçamento entre si. A API pública não muda.
+
 ## 12.2.0 — 2026-08-23
 
 A escala de arredondamento ganha uma base mais presente sem transformar todo componente em uma

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softize/opus",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "description": "End-to-end action protocol for TypeScript. Single package with subpath exports (core + adapters).",
   "license": "MIT",
   "type": "module",

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

@@ -3,7 +3,8 @@
  *
  * 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
- * (título, descrição e a ação à direita — em geral o botão de criar). O conteúdo é
+ * (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
  * agrega N fontes; o que é action-driven mora dentro (ActionList, listas query-backed).
  */
@@ -17,7 +18,7 @@ export interface PageProps {
   count?: number
   /** Linha de contexto sob o título. */
   description?: ReactNode
-  /** Ação à direita do header — em geral o botão de criar. */
+  /** 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. */
   className?: string
@@ -28,16 +29,22 @@ export function Page({ title, count, description, actions, className, children }
   return (
     <main data-slot="page" className="min-w-0 flex-1">
       <div className={cn('mx-auto px-8 py-8', className)}>
-        {/* As ações alinham com o TÍTULO; a descrição vem abaixo, em linha própria. */}
+        {/* As ações acompanham o fim do contexto, mesmo quando há uma descrição sob o título. */}
         <div data-slot="page-header" className="mb-6">
-          <div className={cn(actions !== undefined && 'flex items-center justify-between gap-4')}>
-            <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>
-            {actions}
+          <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>
-          {description !== undefined && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
         </div>
         {children}
       </div>

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

@@ -1,6 +1,10 @@
 ## Esqueleto de página
 
-O que toda página do back-office repete, num pattern só: `<main>` + container de largura cheia (o caso comum; `className="max-w-5xl"` estreita e centra) + header com título, descrição e a ação à direita. O conteúdo é children, sem nada imposto. Presentacional de propósito — uma página agrega N fontes; o que é action-driven (listas, forms) mora dentro.
+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.
 
 ```tsx preview col
 render(
@@ -8,6 +12,7 @@ render(
     <Page
       title="Workspaces"
       count={3}
+      description="Ambientes compartilhados pela equipe."
       actions={
         <Button>
           <Plus /> Novo workspace
@@ -29,6 +34,6 @@ render(
 | `title` | `string` | | O h1 da página. |
 | `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ção à direita do header — em geral o botão de criar. |
+| `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). |
 | `children` | `ReactNode` | | O conteúdo — espaçamento e diagramação são seus. |