@softize/opus 30.0.0 → 31.1.0

package/registry/skills/build-opus-ui/SKILL.md

@@ -43,31 +43,33 @@ existentes, mantendo navegação observável e componentes reutilizáveis sem la
 7. Tratar página, filtro, seleção e modal importante como estado navegável por URL quando
    o produto precisa de deep link, back/forward ou refresh. Em `Presentation`, declarar `route`
    no artefato e deixar o adaptador apenas conectar a spec ao router da aplicação.
-8. Compor Page, Dialog e Drawer pela mesma gramática: no formato compacto, título e orientação
-   ficam no Header; com Intro, navegação e ações da superfície ficam no Header e a Intro abre o
-   Body com título, orientação e ações locais em IntroActions. Declarar a escolha pelos slots,
-   sem prop redundante. Usar PageIntro na Page explícita; a forma curta de Page já coloca title e
-   description na intro e actions no header. Não misturar shorthand com regiões explícitas.
-   Manter exatamente um heading principal, inclusive quando Surface level={1} nomeia uma coleção
-   ou PageState substitui a página. PageShell fornece contexto sem criar barra paralela; header
-   sem controles não reserva espaço. Preservar o teto de 80rem e separar composição de ocupação
-   de altura (flow/fill). Surface mantém o cabeçalho do conteúdo; Pane distribui espaço e recebe
-   uma superfície quando precisar de anatomia visual. Não criar Intro nem controles de navegação
-   artificiais para Surface ou Pane.
-   Em `Surface framed`, usar `layout="sectioned"` e `SurfaceBody flush` quando o filho direto já
-   controlar o recuo do body, como `DetailGroup` com divisores, lista ou tabela; não reconstruir
-   divisor, padding ou recorte por classes no consumidor. Em grupos de formulário,
-   `as="fieldset"` transforma o header em `legend` nativa sem variante visual paralela.
+8. Compor Page, Dialog, Drawer e Surface pela mesma anatomia: título, descrição opcional,
+   metadados e ações gerais no Header; conteúdo no Body; decisões no Footer. Não existem
+   `compact`, `sectioned`, `surfaceLayout`, `*Intro` nem a escolha visual `layout` nesses roots.
+   Preservar exatamente um heading principal. Page usa uma coluna aberta, padding de `2.5rem`
+   e título de `1.875rem`, sem divisores entre regiões. `width` limita a coluna; omitido, ocupa a
+   largura disponível. `Page.layout="flow"` rola a página inteira; `fill` mantém o header visível
+   e entrega a altura restante à lista ou à rolagem do body. Não oferecer `composition`.
+   PageBack recebe destino pai explícito e aparece como primeira ação de ícone no Header.
+   Não criar barra de breadcrumb. PageShell fornece ações sem barra paralela.
+   Headers usam botões `default`/`icon` e linha mínima de `2.25rem`. Regiões delimitadas têm recuo
+   de `1rem`, e bodies governam o ritmo vertical de `1rem`. Divisores são automáticos entre
+   regiões existentes. Surface sem moldura se alinha ao hospedeiro, sem recuo lateral ou inferior.
+   Usar `flush` quando o filho já controla o recuo; não reconstruir padding ou divisores na tela.
+   `tabs` integra a navegação ao Header; ações da coleção ficam em `ActionList.toolbarActions`
+   dentro do painel ativo. Pane distribui espaço e recebe Surface quando precisar de anatomia.
+   `Surface as="fieldset"` mantém legend nativa na faixa do cabeçalho, sem variante de moldura.
 9. Manter margem e posicionamento no consumidor; componente reutilizável controla apenas
    seu interior.
 10. Não definir a fonte raiz em uma biblioteca ou componente. O navegador e a aplicação são
     responsáveis por `font-size` em `html`; medidas escaláveis da UI usam `rem` ou a escala
     relativa do Tailwind. Reservar `px` a hairlines e compensações presas à geometria da borda,
     com justificativa e cobertura explícitas.
-11. Em uma página centrada em coleção, compor `Surface + ActionList`: título e criação ficam em
-    extremos opostos do `SurfaceHeader`; a criação usa botão textual `sm`, sem ícone, com
-    `Criar recurso`. Busca, filtros, atualização, estados e paginação permanecem no `ActionList`.
-    Reservar `toolbarActions` a operações ligadas ao recorte atual.
+11. Em uma página centrada em coleção, compor `Page + ActionList`; usar `Surface` para uma coleção
+    subordinada. Manter criação, importação e exportação em `ActionList.toolbarActions`, junto
+    de busca e filtros. Reservar ações do header à página ou superfície como um todo.
+    Usar botão textual normal, sem ícone, com `Criar`; preservar `Criar recurso` no nome acessível
+    e no título do formulário. Manter nomes específicos em menus com vários tipos de criação.
 12. Evoluir um pattern compartilhado apenas quando a recorrência e o contrato estiverem claros.
 13. Tratar tokens de superfície como pares indivisíveis no mesmo fragmento de classes:
     `bg-card text-card-foreground` e `bg-popover text-popover-foreground`. Não depender da

package/registry/skills/build-opus-ui/references/evaluations.md

@@ -4,13 +4,13 @@
 - Não dispara: “Ajuste o CSS de um e-mail estático.”
 - Execução: implementar uma lista com modal roteável e provar loading, erro, vazio e back.
 - Execução estrutural: montar uma página de relatório isolada com `Page > PageHeader + PageBody`,
-  outra em `PageShell` com navegação contextual acima de `Page > PageHeader + PageBody`, garantindo
+  outra em `PageShell` com ações contextuais no `PageHeader`, garantindo
   exatamente um `PageTitle` no header, e uma coleção nomeada com
   `Surface > SurfaceHeader + SurfaceBody > ActionList`. Provar que criação fica em
-  `SurfaceActions`, no extremo oposto ao título, como botão textual `sm` sem ícone e com
-  `Criar recurso`, enquanto uma operação dependente do recorte usa `toolbarActions`; incluir
+  `ActionList.toolbarActions`, junto das operações do recorte, como botão textual normal sem ícone
+  com `Criar`, nome acessível `Criar recurso` e formulário com título específico; incluir
   `ActionFilterBar` separado do renderer, `ItemGroup` para
-  uma coleção secundária e um `ActionFormDialog`; provar teto padrão de `80rem`, hierarquia por
+  uma coleção secundária e um `ActionFormDialog`; provar ocupação de toda a largura e scroll somente no body, hierarquia por
   `level`, vazio estrutural sólido, `Empty` apenas para criação ou vínculo, números sem alinhamento
   inferido e footer modal com largura natural, alinhado à direita e cancelamento `ghost`; incluir
   separadamente um caso deliberadamente equivalente com distribuição 50/50 e cancelamento
@@ -22,7 +22,7 @@
   rejeita a mistura entre props abreviadas e headers explícitos.
 - Execução de forma: compor uma tabela dentro de `Surface` sem moldura duplicada, manter a moldura
   estrutural standalone em `rounded-lg` e os controles internos em `rounded-md`.
-- Execução de Surface seccionada: compor `Surface framed layout="sectioned"` com mídia e
+- Execução de Surface: compor `Surface framed` com mídia e
   `DetailGroup` com divisores; provar header com divisor, `SurfaceBody flush` sem recuo e ausência
   de classes no consumidor que reconstruam essa anatomia. Provar `as="fieldset"` com `legend`
   nativa sem `frameVariant`.
@@ -79,16 +79,18 @@ da label, duplicação entre hint/help e perda de `aria-describedby` quando apar
 
 - Gatilho positivo: “Monte o detalhe de um recurso com menu da página separado do título.”
 - Gatilho negativo: “Explique por que a ADR antiga juntava título e ações”, sem pedido de UI.
-- Execução: montar o mesmo detalhe em Page, Dialog e Drawer com header de navegação/ações e intro
-  abrindo o body; montar também a versão compacta sem intro. Provar título único, ações locais em
-  IntroActions, nenhum header vazio na Page e transição de loading para conteúdo sem título duplicado.
-- Reprovar intro depois de texto, título simultâneo em header e intro, ações da superfície no título
-  ou adaptação de Pane para que ele volte a possuir anatomia visual.
+- Execução: montar o mesmo detalhe em Page, Dialog e Drawer com título e ações gerais no Header;
+  provar um único título, linha mínima de `2.25rem`, botões normais e transição de loading para
+  conteúdo sem duplicação. Page usa coluna aberta com padding de `2.5rem`, título de `1.875rem`,
+  largura independente e rolagem flow/fill; Drawer e Dialog preservam recuo de `1rem` e divisores. Conferir tabs nativas e operações
+  de coleção dentro do painel ativo, junto à listagem.
+- Reprovar `*Intro`, `compact`, `sectioned`, `surfaceLayout`, `tabsActions`, layout visual e
+  PageNavigation. Conferir que o checker orienta a migração. Não recriar anatomia em Pane.
 
 ## Metadados e contadores
 
 - Execução: compor um detalhe com título, descrição e badges em PageMeta, DrawerMeta e DialogMeta;
-  conferir a faixa separada em Header compacto e Intro. Em Surface, conferir que SurfaceCount
+  conferir a faixa separada no Header. Em Surface, conferir que SurfaceCount
   fica na linha do título e SurfaceMeta abaixo dela. Migrar um contador antigo e uma descrição
   antiga sem alterar suas funções; provar a equivalência das formas curtas com `meta`.
 - Reprova: contador em SurfaceMeta, metadados em Description, dois Meta, Meta sem título,

package/registry/skills/build-opus-ui/references/ui-patterns.md

@@ -7,25 +7,21 @@
 - Uma `Presentation` que representa esse estado declara `route.path` e `route.surface`. Rotas com
   parâmetro podem declarar `route.record` para hidratar o item a partir de uma Presentation de
   lista; não reconstruir essa decisão com condicionais no componente da página.
-- `Page` fornece o `<main>` e o container centralizado com teto padrão de `80rem`. Sua forma
-  explícita exige `PageBody`, exatamente um heading principal e aceita `PageHeader` e `PageFooter`.
-  Declare esse heading com PageTitle na PageIntro ou no PageHeader compacto, Surface level={1}
-  ou PageState ativo. A intro abre o body; ações locais usam PageIntroActions, enquanto PageActions
-  pertence ao header. A forma curta coloca title/description na intro e actions no header.
-  Não misturar as duas formas. Para ajustar a largura interna, usar contentClassName; className pertence ao container externo.
-- Na composição com intro, PageHeader reúne navegação contextual e ações da superfície na mesma
-  linha. PageBack recebe o destino pai explícito; para vários ancestrais relevantes, usar Breadcrumb
-  em PageNavigation. Não combinar retorno e breadcrumb, nem criar chrome paralelo. Na composição
-  compacta, título e orientação permanecem no header. PageActionsTarget fica reservado a workspaces
-  imersivos com chrome próprio.
-- Quando shell e rota conhecem partes diferentes da mesma página, use `PageShell` ao redor da rota.
-  O shell entrega navegação e ações ao `PageHeader` descendente sem criar uma barra visual.
-  Ações com texto no cabeçalho usam `sm`, e ações somente com ícone usam `icon-sm`.
-  Ações de footer de Dialog e Drawer conservam `default`. O tamanho `sm` fica para ações operacionais em
-  toolbar, seção ou coleção densa, e `xs`/`icon-xs` para ações internas de linha ou célula. Contexto
-  e variante resolvem a hierarquia visual sem alterar essa medida. Em uma coleção, a ação de
-  criar usa botão textual `sm`, sem ícone, no extremo oposto do `SurfaceHeader`. Não monte
-  cabeçalho paralelo, portal ou seletor global para reconstruir essa composição.
+- `Page` fornece o `<main>` e a coluna com largura `narrow`, `default` ou `wide` (padrão). Sua forma explícita usa
+  `PageHeader` com `PageTitle`, `PageBody` e `PageFooter` opcional. A forma curta produz a mesma
+  anatomia; não misturar props abreviadas com slots explícitos. PageState ativo assume o título.
+- Page, Dialog, Drawer e Surface têm Header com título, descrição opcional, metadados e ações
+  gerais, Body com ritmo de `1rem` e Footer opcional. Não há `*Intro`, `compact`, `sectioned` ou
+  escolha visual de layout. `Page.layout` preserva somente a ocupação `flow`/`fill`.
+- Page tem uma aparência aberta, padding de `2.5rem` e título de `1.875rem`, sem divisores.
+  `flow` rola a página inteira; `fill` entrega a altura restante à lista ou ao body.
+  PageBack usa o destino pai e aparece como
+  primeira ação de ícone. PageShell entrega ações sem criar barra paralela; breadcrumbs
+  não fazem parte da composição. PageActionsTarget atende workspaces com chrome próprio.
+- Headers usam botões `default`/`icon` e linha mínima de `2.25rem`. Regiões delimitadas
+  de Drawer, Dialog e Surface conservam recuo de `1rem` e divisores automáticos. Surface sem moldura permanece
+  alinhada ao hospedeiro. A prop `tabs` integra a navegação ao Header; operações da coleção ficam
+  em `ActionList.toolbarActions` no painel ativo. Não reconstruir isso por portais ou seletores.
 - `PageState` substitui todo o conteúdo principal quando a página carrega, falha ou está vazia. Na
   forma curta ele pode ser escrito como filho direto de `Page`, que cria o `PageBody`; na forma
   explícita, fica sozinho dentro de `PageBody`. Nos três estados ativos, o cabeçalho da Page
@@ -38,24 +34,25 @@
 - `Surface` delimita uma região e segue a anatomia `Surface > SurfaceHeader (SurfaceMedia,
 SurfaceTitle, SurfaceCount, SurfaceDescription, SurfaceMeta, SurfaceActions) + SurfaceBody + SurfaceFooter`.
   Os slots nunca ficam soltos. `title`, `description`, `count`, `meta`, `media` e `actions` são a abreviação
-  para o caso direto e não podem ser misturados ao header explícito. Em `level={1}`, ações da
-  coleção ficam no extremo oposto ao título; a criação usa botão textual `sm`, sem ícone, com
-  `Criar recurso`.
+  para o caso direto e não podem ser misturados ao header explícito. Ações do header pertencem à
+  superfície como um todo; operações da coleção ficam em `ActionList.toolbarActions`.
   O diálogo de criação usa `Criar recurso` e o de edição, `Editar recurso`. `level` preserva a
-  hierarquia semântica do heading. `Surface framed` aceita `layout="sectioned"`; declare
+  hierarquia semântica do heading. Declare
   `SurfaceBody flush` quando o filho direto já possui recuo interno, como `DetailGroup` com
   divisores, lista ou tabela. `as="fieldset"` cria a `legend` nativa sem variante de moldura.
 - `PageMeta`, `DialogMeta` e `DrawerMeta` recebem badges, datas e autoria em faixa própria
-  após título, descrição e ações, dentro de Header compacto ou Intro da mesma família.
+  após título, descrição e ações, dentro do Header da mesma família.
   `SurfaceMeta` ocupa essa faixa em `SurfaceHeader`; `SurfaceCount` mantém o contador na linha
   do título. Ao migrar, conferir manualmente os antigos `SurfaceMeta`: contadores passam a
   `SurfaceCount`, frases de orientação a `SurfaceDescription`, e metadados permanecem em Meta.
   Cada composição aceita um Meta e exige título. Page e Surface aceitam `meta` na forma curta;
   fieldset e Dialog em `mode="alert"` não aceitam Meta. Informações necessárias à decisão
   permanecem no corpo ou junto à ação correspondente.
-- Uma página centrada em coleção compõe `Surface + ActionList`. O `SurfaceHeader` recebe título e
-  criação; o `ActionList` mantém busca, filtros, atualização, resultados, estados e paginação.
-  `toolbarActions` fica reservado a operações que dependem do recorte atual.
+- Uma página centrada em coleção compõe `Page + ActionList`; coleções subordinadas podem usar
+  `Surface`. Criação, importação e exportação ficam em `toolbarActions`, junto de busca e filtros.
+  O botão de criação é textual normal, sem ícone, com `Criar` e nome acessível `Criar recurso`.
+  Menus com vários tipos de criação preservam os nomes específicos. Operações de seleção usam
+  `batchActions`, e operações individuais usam `rowActions`.
 - `Surface` e Drawer nomeiam a região principal como `SurfaceBody` e `DrawerBody`. `Pane` é apenas
   uma unidade dimensionável de `Split` e não possui anatomia interna. `*Content` permanece
   reservado a raízes técnicas ou painéis cujo papel não é o corpo de uma estrutura, como