@majapisoftwares/ui 5.0.0 → 6.1.0

package/AGENTS.md

@@ -1,8 +1,18 @@
 # Padrão obrigatório do Workbench
 
+- Apps e catálogo usam a versão estável mais recente do Next.js (confira com `npm view next version` antes de mudar dependências). O catálogo (`catalog/`) é um app Next.js como qualquer outro, com a mesma estrutura do starter; não use Vite nem outro framework.
+- Toda mudança na biblioteca que afete apps entra no mesmo commit no starter (`starters/next-app`) e no catálogo. O starter sempre depende da versão atual da biblioteca (o teste `npm run test:starter` falha se divergir) e deve compilar e passar lint/typecheck/build com ela.
+- Todo app é bilíngue: inglês (`en`) e português (`pt-BR`). Textos de UI ficam em catálogos `defineMessages` com as duas línguas; nada de texto fixo em componentes. Use `Preferences`/`PreferenceControls` da biblioteca para idioma e tema.
+- Mantenha o texto mínimo: sem descrições, avisos ou rótulos que não ajudem a tarefa.
+- `patterns/data-table` (TanStack Table, vindo da Numa) é a única tabela de dados: filtros por coluna, ordenação múltipla, colunas reordenáveis/ocultáveis/redimensionáveis, seleção, persistência e estados. Melhorias de tabela são feitas aqui e chegam a todos os apps por versão; apps não mantêm cópias próprias.
+- Ao trazer componentes de outros apps, remova sobrescritas visuais (arredondamento, altura, sombra, padding, cores) e deixe os primitivos da biblioteca definirem o visual; containers usam os raios já adotados aqui (ex.: rounded-2xl em tabelas e listas).
+- Seleção usa sempre o Select (Base UI) da biblioteca; não use select nativo nem NativeSelect (o check:standards bloqueia).
+- Versionamento segue docs/VERSIONING.md (SemVer sobre a API pública). Prefira mudanças aditivas e deprecação a remoções; major só com aprovação explícita do responsável.
+- Teste localmente com portless (`npm run dev` já roda via portless; o catálogo abre em https://majapi-ui.localhost). Não use portas fixas nem localhost:PORT nas instruções.
+
 - Novos apps web devem partir de starters/next-app, criado por npm run create:app -- <diretorio-novo>. O starter usa a versão estável do Next.js fixada e validada no manifesto; atualizações devem manter lockfile, CI e revisão de compatibilidade.
 
-- A base de primitivas é shadcn sobre Base UI (base-nova), não Radix. Use render para composição e nativeButton=false quando Button renderizar Link/a. Preserve as fronteiras use client da biblioteca em consumidores Next.js.
+- A base de primitivas é shadcn sobre Base UI (base-luma), não Radix. Use render para composição e nativeButton=false quando Button renderizar Link/a. Preserve as fronteiras use client da biblioteca em consumidores Next.js.
 
 - Esta biblioteca pública é a base obrigatória de todos os apps atuais e futuros do Workbench, incluindo administrativos, dashboards, login e cadastro. Leia README.md e docs/STANDARDS.md antes de alterar interfaces.
 - Antes de criar UI em um app, procure o componente, variante ou padrão existente aqui. Reutilize-o diretamente como dependência.

package/README.md

@@ -1,6 +1,6 @@
 # Majapi UI
 
-Biblioteca pública `@majapisoftwares/ui`, base obrigatória de código, interface e experiência de **todos os apps atuais e futuros do Workbench**, baseada em shadcn/ui (**Base UI / base-nova**), React e Tailwind CSS v4. Repositório: https://github.com/majapisoftwares/workbench-ui.
+Biblioteca pública `@majapisoftwares/ui`, base obrigatória de código, interface e experiência de **todos os apps atuais e futuros do Workbench**, baseada em shadcn/ui (**Base UI / base-luma**), React e Tailwind CSS v4. Repositório: https://github.com/majapisoftwares/workbench-ui.
 
 ## Regra central
 
@@ -10,7 +10,7 @@ Composição de páginas, lógica de domínio, dados e permissões pertencem ao
 
 ## Criar um app Next.js
 
-O starter completo fica em [starters/next-app](starters/next-app), com **Next.js 16.4.3** (latest estável verificado na criação), React, App Router, TypeScript, Tailwind e esta biblioteca já configurados. A dependência da UI é uma versão npm fixa; não depende de caminhos para este checkout.
+O starter completo fica em [starters/next-app](starters/next-app), com **Next.js 16.4.3** (versão estável mais recente; mantenha atualizada), React, App Router, TypeScript, Tailwind e esta biblioteca já configurados. A dependência da UI é uma versão npm fixa; não depende de caminhos para este checkout.
 
 Dentro deste repositório:
 
@@ -21,22 +21,24 @@ npm ci
 npm run dev
 ```
 
-O comando não sobrescreve diretórios existentes. Copia dashboard, login, cadastro, carregamento/erro/404, regras de agentes, lockfile e CI, sem node_modules, builds ou secrets. Customize por componentes, props e slots. As telas de autenticação são demonstrativas e devem ser conectadas à autenticação real do produto.
+O app gerado é bilíngue (en/pt-BR, textos em `src/messages.ts`) e roda via [portless](https://www.npmjs.com/package/portless) em `https://<nome>.localhost`. O comando não sobrescreve diretórios existentes. Copia dashboard, login, cadastro, carregamento/erro/404, regras de agentes, lockfile e CI, sem node_modules, builds ou secrets. Customize por componentes, props e slots. As telas de autenticação são demonstrativas e devem ser conectadas à autenticação real do produto.
 
 ## Catálogo visual
 
+O catálogo em [catalog/](catalog) é um app Next.js com a mesma estrutura do starter, exportado estaticamente para S3 + CloudFront pelo workflow `deploy-catalog` a cada push na `main`.
+
 ```powershell
 npm ci
 npm run dev
 ```
 
-Abra http://127.0.0.1:4318. O catálogo permite revisar componentes, temas claro/escuro, tabela com busca/ordenação/paginação/filtro, detalhes e estados de vazio/erro/carregamento. Usa dados demonstrativos explícitos, sem AWS ou credenciais.
+Abra https://majapi-ui.localhost (via portless). O catálogo permite revisar componentes, temas claro/escuro, tabela com busca/ordenação/paginação/filtro, detalhes e estados de vazio/erro/carregamento. Usa dados demonstrativos explícitos, sem AWS ou credenciais.
 
 ## Consumir
 
-Pacote público **@majapisoftwares/ui@5.0.0**, publicado na organização npm existente. Instale com `npm install --save-exact @majapisoftwares/ui@5.0.0` e versione o lockfile. O pacote exporta fontes TSX para bundlers React/TypeScript (Vite ou Next.js), não para execução direta em Node sem transformação. O starter e o gerador permanecem neste repositório Git, separados do pacote npm da biblioteca.
+Pacote público **@majapisoftwares/ui@6.0.0**, publicado na organização npm existente. Instale com `npm install --save-exact @majapisoftwares/ui@6.0.0` e versione o lockfile. O pacote exporta fontes TSX para bundlers React/TypeScript (Vite ou Next.js), não para execução direta em Node sem transformação. O starter e o gerador permanecem neste repositório Git, separados do pacote npm da biblioteca.
 
-O catálogo público está em **https://ui.majapi.com**. A versão 5 substitui a base 4.x com uma mudança incompatível de API e a base antes chamada @workbench/ui. Apps existentes em ^4 permanecem nessa linha até migração explícita.
+O catálogo público está em **https://ui.majapi.com**. A versão 6 muda AppShell, AdminDashboard e os templates de autenticação; veja [docs/MIGRATION-6.0.md](docs/MIGRATION-6.0.md). A versão 5 substitui a base 4.x com uma mudança incompatível de API e a base antes chamada @workbench/ui. Apps existentes em ^4 permanecem nessa linha até migração explícita.
 
 ```tsx
 import { Button } from "@majapisoftwares/ui/components/button";
@@ -45,18 +47,23 @@ import { AdminDashboard } from "@majapisoftwares/ui/templates/admin-dashboard";
 import { AuthLayout } from "@majapisoftwares/ui/templates/auth-layout";
 import { LoginForm } from "@majapisoftwares/ui/templates/login-form";
 import { SignupForm } from "@majapisoftwares/ui/templates/signup-form";
+import {
+  Preferences,
+  PreferenceControls,
+} from "@majapisoftwares/ui/patterns/preferences";
+import { defineMessages, useMessages } from "@majapisoftwares/ui/lib/i18n";
 import "@majapisoftwares/ui/styles.css";
 ```
 
-O CSS inclui os tokens, fontes locais e o Tailwind, com `@source` da biblioteca. O app precisa processar esse CSS com Tailwind v4. Faça dedupe de react/react-dom no Vite se estiver desenvolvendo com um checkout local. Dependências de catálogo, como Vite, não entram no código executado pelo consumidor.
+O CSS inclui os tokens, fontes locais e o Tailwind, com `@source` da biblioteca. O app precisa processar esse CSS com Tailwind v4.
 
 ## Contribuir e validar
 
-Templates iniciais: **AdminDashboard**, **AuthLayout**, **LoginForm** e **SignupForm**. Configure marca, navegação, textos, dados, ações e conteúdo por props/slots React. Variações de tema são definidas e documentadas na biblioteca. Formulários recebem callbacks tipados; autenticação real, validação no servidor, sessões e autorização pertencem ao app. O catálogo demonstra os templates sem enviar ou persistir senhas.
+A sidebar do `AppShell` tem três modos (expandida, compacta e escondida), redimensionável pela borda, com troca de modo pela largura, menu de clique direito e Ctrl/⌘+B. Templates iniciais: **AdminDashboard**, **AuthLayout**, **LoginForm** e **SignupForm**. Configure marca, navegação, textos, dados, ações e conteúdo por props/slots React. Variações de tema são definidas e documentadas na biblioteca. Formulários recebem callbacks tipados; autenticação real, validação no servidor, sessões e autorização pertencem ao app. O catálogo demonstra os templates sem enviar ou persistir senhas.
 
 1. Leia o padrão e procure o primitivo/padrão existente.
-2. Adicione uma API reutilizável ou variante oficial, com defaults compatíveis.
-3. Documente motivos, estados e migração; adicione exemplo no catálogo.
+2. Adicione uma API reutilizável ou variante oficial, com defaults compatíveis e textos em en/pt-BR.
+3. Documente motivos, estados e migração; adicione exemplo no catálogo e atualize o starter no mesmo commit.
 4. Valide tipos, lint, padrões, build, teclado e visual desktop/mobile.
 5. Publique o commit e atualize o consumidor para esse commit; registre no plano.
 
@@ -65,7 +72,8 @@ npm run typecheck
 npm run lint
 npm run check:standards
 npm run build
+npm run test:starter
 git diff --check
 ```
 
-Os componentes foram instalados pelo CLI shadcn 4.22.1, preset base-nova e Base UI 1.9.0. A versão 0.2 migra a base anterior Radix; veja [docs/MIGRATION-0.2.md](docs/MIGRATION-0.2.md). Atribuição upstream: [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md). O Cloud Manager é o primeiro consumidor real.
+Os componentes foram instalados pelo CLI shadcn 4.22.1, preset base-luma e Base UI 1.9.0. A versão 0.2 migra a base anterior Radix; veja [docs/MIGRATION-0.2.md](docs/MIGRATION-0.2.md). Atribuição upstream: [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md). O Cloud Manager é o primeiro consumidor real.

package/THIRD_PARTY_NOTICES.md

@@ -1,6 +1,6 @@
 # Third-party notices
 
-The primitives in src/components/ui were generated with shadcn/ui 4.22.1, base-nova preset (Base UI), from https://github.com/shadcn-ui/ui and https://ui.shadcn.com. They are distributed under the MIT License:
+The primitives in src/components/ui were generated with shadcn/ui 4.22.1, base-luma preset (Base UI), from https://github.com/shadcn-ui/ui and https://ui.shadcn.com. They are distributed under the MIT License:
 
 MIT License
 
@@ -12,4 +12,28 @@ The above copyright notice and this permission notice shall be included in all c
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+src/components/ui/orb.tsx and orb.css are adapted from AICSS Orbs (https://github.com/kvnkld/aicss, registry https://www.aicss.dev/r/orbs.json): colors mapped to theme tokens, labels translated, CSS module turned into orb-prefixed global CSS. MIT License:
+
+MIT License
+
+Copyright (c) 2026 AICSS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
 Other dependencies retain their own licenses in their package metadata. This notice does not change ownership or licensing of Workbench-authored code.

package/components.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "base-nova",
+  "style": "base-luma",
   "rsc": false,
   "tsx": true,
   "tailwind": {

package/docs/MIGRATION-6.0.md

@@ -0,0 +1,33 @@
+# Migração para 6.0
+
+Visual padrão do shadcn (tema neutral, Geist), textos em inglês e português e nova sidebar.
+
+## Idiomas
+
+Envolva o app com `Preferences` (idioma + tema) ou `LocaleProvider`. Os textos embutidos da biblioteca seguem o idioma ativo. Textos do app vão em `defineMessages({ en, "pt-BR" })` e são lidos com `useMessages`.
+
+## AppShell / AdminDashboard
+
+- `brand`, `brandMark` → `logo` (marca quadrada, fica fixa em todos os modos) e `name` (texto que some em fade no modo compacto).
+- `navigation` passa a ser uma lista de grupos: `[{ label?, items: [...] }]`.
+- `context` → `header` (ex.: breadcrumb) e `actions` (ex.: `PreferenceControls`).
+- `defaultMode` (`open` | `compact` | `closed`) e `defaultWidth` opcionais; o estado é salvo no cookie `sidebar_state` (`parseSidebarCookie` lê no servidor).
+- `AdminDashboard`: `actions` da página → `pageActions`; `description` opcional.
+
+## Autenticação
+
+- `AuthLayout`: `title`, `description`, `aside`, `brandMark` removidos; `brand` e `footer` opcionais.
+- `LoginForm`/`SignupForm`: títulos e rótulos têm padrão traduzido; props de texto continuam aceitas para sobrescrever.
+
+## Outros
+
+- `PageHeader`: `eyebrow` removido, `description` opcional.
+- `DetailsSheet`: `description` opcional.
+- `DataTable` agora é a tabela completa da Numa, sobre TanStack Table:
+  - `columns` são `ColumnDef` do TanStack (`accessorKey`/`accessorFn`, `cell`, `meta: { label, align, filter }`); `rows` → `data`.
+  - Busca global embutida (`searchPlaceholder`, `initialGlobalFilter`); `searchValue`/`searchLabel`/`defaultQuery` saem.
+  - `onOpen`/`rowLabel` → `onRowClick`/`getRowLabel`; `filters` → `toolbarStart`/`toolbarEnd`/`toolbarBelow` (recebem a instância da tabela).
+  - Filtros por coluna (`text`, `multi` com incluir/excluir, `number-range`, `date-range`, `custom`), ordenação múltipla, colunas reordenáveis/ocultáveis/redimensionáveis, seleção de linhas e persistência em `localStorage` com `storageKey`.
+  - Estados mantidos: `loading`, `error` + `onRetry`, `warning`, `unavailable`, `emptyState`/`emptyMessage`.
+- Classes `wb-*` removidas.
+- `NativeSelect` removido: use `Select` (Base UI) com `items` para o rótulo do valor. O `check:ui` acusa imports de `native-select`. Variante `navigation` do Button removida.

package/docs/STANDARDS.md

@@ -1,6 +1,6 @@
 # Padrão v1 de código e UI/UX
 
-Base atual: shadcn base-nova com @base-ui/react. Os componentes interativos expõem fronteiras use client para uso no Next.js App Router. A migração da API Radix está documentada em MIGRATION-0.2.md.
+Base atual: shadcn base-luma com @base-ui/react. Os componentes interativos expõem fronteiras use client para uso no Next.js App Router. A migração da API Radix está documentada em MIGRATION-0.2.md.
 
 ## Arquitetura e código
 
@@ -8,19 +8,21 @@ TypeScript em modo strict, React com componentes funcionais e composição. APIs
 
 ## Base visual
 
-`src/styles.css` é a fonte dos tokens de cor, tipografia, raio, bordas, foco, estados e estrutura. Paleta neutra com ação primária terracota; body Geist, títulos Georgia; foco visível e espaço consistente. Cores são semânticas: background, foreground, primary, muted, destructive, success e warning. Temas claro/escuro preservam a semântica. Tokens e padrões podem evoluir nesta biblioteca, nunca por overrides locais em um produto.
+`src/styles.css` é a fonte dos tokens de cor, tipografia, raio, bordas, foco, estados e estrutura. Preset base-luma do shadcn (o mesmo da home de ui.shadcn.com: cantos bem arredondados, campos com fundo suave, sombras leves) sobre o tema neutral, fonte Geist, foco visível e espaço consistente. Cores são semânticas: background, foreground, primary, muted, destructive, success e warning. Temas claro/escuro preservam a semântica. Tokens e padrões podem evoluir nesta biblioteca, nunca por overrides locais em um produto.
 
-Os 13 primitivos shadcn são Button, Badge, Input, Table, Sheet, Alert, Empty, NativeSelect, Separator, Skeleton, Tabs, Field e Label. Os sete padrões compostos são AppShell, PageHeader, MetricStrip, StatusBadge, DataTable, DetailsSheet e DetailList. Os quatro templates React são AdminDashboard, AuthLayout, LoginForm e SignupForm. Marca, navegação, textos, dados, ações e slots são configuráveis. Todos os apps atuais e futuros devem consumir esta base pública; ela não conhece AWS ou outro domínio.
+Primitivos shadcn ficam em src/components/ui (Button, Badge, Card, Input, Table, Sheet, Sidebar, Tooltip, DropdownMenu, ContextMenu, Breadcrumb, Avatar, Checkbox, Collapsible, Alert, Empty, Select, Separator, Skeleton, Tabs, Field e Label). Padrões compostos: AppShell (slots `sidebarHeader` e `footer`), WorkspaceSwitcher, UserMenu, PageHeader, MetricStrip, StatusBadge, DataTable, DetailsSheet, DetailList, Preferences, PreferenceControls e MajapiLogo. Templates React: AdminDashboard, AuthLayout, LoginForm e SignupForm. Marca, navegação, textos, dados, ações e slots são configuráveis. Todos os apps atuais e futuros devem consumir esta base pública; ela não conhece AWS ou outro domínio.
 
 ## Comportamentos de UX
 
 - Ação primária destaca o objetivo; secundária usa outline/secondary; destrutiva usa variante própria e depende das autorizações do app.
-- Busca, filtros, ordenação por coluna e paginação seguem DataTable. Filtros de domínio são slots tipados do app. Não reconstruir tabelas por tela. Persistência não é habilitada por padrão para evitar guardar buscas sensíveis; quando necessária, deve evoluir como capacidade compartilhada com controle explícito.
+- Busca, filtros, ordenação por coluna e paginação seguem DataTable (TanStack Table; origem: tabela da Numa). Filtros por coluna usam `meta.filter`; preferências do usuário persistem por `storageKey`. Telas centradas em uma tabela usam `AppShell fillHeight` + `DataTable fillHeight`: a tabela ocupa a altura restante e rola internamente, com cabeçalho, busca e paginação sempre visíveis.
+- Áreas com rolagem interna usam `scroll-fade` do shadcn (só `scroll-fade-b` quando há cabeçalho fixo dentro do contêiner) e as barras de rolagem finas globais, que aparecem com o ponteiro sobre a área e seguem o tema (`color-scheme`).
+- Espaçamento da página em uma escala só: padding, gap entre seções e entre cards de 16px no mobile e 24px a partir de md; o cabeçalho da página e o da sidebar têm a mesma altura (56px). Filtros de domínio são slots tipados do app. Não reconstruir tabelas por tela. Persistência não é habilitada por padrão para evitar guardar buscas sensíveis; quando necessária, deve evoluir como capacidade compartilhada com controle explícito.
 - Estados com texto e cor: sucesso, aviso, erro e desconhecido. Nunca traduzir ausência de informação em zero ou sucesso.
 - Carregamento usa Skeleton, vazio usa Empty, falhas usam Alert e detalhes usam DetailsSheet com título, descrição, foco preso ao overlay, Escape e devolução do foco ao fechar.
 - Em telas pequenas, controles têm texto de pelo menos 16px e alvo de 44px, navegação se reorganiza e tabelas têm rolagem interna, sem rolagem horizontal da página.
 - Preferência por movimento reduzido é respeitada. A ordem de leitura deve acompanhar a ordem visual. Ícones sozinhos exigem nome acessível.
-- Distinguir dados demonstrativos de dados reais; mostrar observação e cobertura em telas de infraestrutura. Comunicação e labels em português no v1.
+- Distinguir dados demonstrativos de dados reais; mostrar observação e cobertura em telas de infraestrutura. Todo texto existe em inglês e português (`defineMessages`); texto mínimo, sem descrições que não ajudem a tarefa.
 
 ## Evolução sem customizações isoladas
 
@@ -30,7 +32,10 @@ AGENTS.md nos apps exige contribuição upstream antes de uso. O verificador est
 
 ## Adaptações do upstream
 
-- Sheet usa import interno relativo para funcionar como pacote e traduz o nome acessível do fechamento para português.
+- Imports internos relativos e `"use client"` são aplicados por `npm run normalize:ui` após o CLI do shadcn.
+- Sheet traduz o nome acessível do fechamento pelo idioma ativo.
+- Sidebar: três modos (open/compact/closed), largura redimensionável (208–448px) com troca de modo por largura, menu de clique direito, tooltip que fecha ao clicar e textos traduzidos.
+- use-mobile usa useSyncExternalStore (compatível com SSR e com a regra de hooks).
 - Field usa imports relativos. Button assume type=button para evitar submissões acidentais; formulários declaram type=submit. Badge inclui variantes success e warning reutilizadas por StatusBadge.
 - Tokens de identidade, estados semânticos e padrões compostos são mantidos aqui.
 - Mudanças posteriores no upstream devem ser avaliadas com o diff do CLI, preservando estas decisões e o contrato público.

package/docs/VERSIONING.md

@@ -0,0 +1,28 @@
+# Versionamento
+
+`@majapisoftwares/ui` segue [SemVer](https://semver.org) sobre a **API pública**: subpaths exportados no `package.json`, nomes de componentes, props e seus tipos, variantes, tokens CSS, classes documentadas (ex.: `orb-*`) e comportamento que um app possa ter usado.
+
+## Qual número subir
+
+| Mudança                                                                                                                                                                                       | Versão    |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| Correção de bug, acessibilidade, tradução, ajuste visual que não muda a API                                                                                                                   | **patch** |
+| Componente, padrão, export, prop opcional ou variante novos; mudança de visual padrão (preset, tokens) que não exige alteração no código do app; deprecação                                   | **minor** |
+| Remover ou renomear export, componente, prop, variante ou token; tornar prop obrigatória; mudar o tipo ou o significado de uma prop; mudança de comportamento que obriga o app a mudar código | **major** |
+
+Na dúvida, a pergunta é: **um app que compilava com a versão anterior continua compilando e funcionando sem alterações?** Se sim, não é major.
+
+## Evitar majors
+
+- Prefira mudanças aditivas: nova prop ao lado da antiga, novo componente em vez de mudar o existente.
+- Para trocar uma API, mantenha a antiga funcionando, marque-a com `@deprecated` (JSDoc, com a alternativa) e só remova no próximo major planejado.
+- Agrupe remoções num único major, com `docs/MIGRATION-<versão>.md` e os consumidores conhecidos atualizados em seguida.
+- Um major precisa de aprovação explícita do responsável antes da publicação; o agente propõe e justifica.
+
+## Publicar
+
+1. Escolha o número pela tabela acima e justifique no commit (`feat:` → minor, `fix:` → patch, `feat!:`/`BREAKING CHANGE:` → major).
+2. Atualize `version` no `package.json`; o starter acompanha a mesma versão no mesmo commit (`npm run test:starter` verifica).
+3. Valide (typecheck, lint, check:standards, build, test:starter, starter contra o pacote empacotado).
+4. `npm publish`, tag `v<versão>` no GitHub e registre no plano.
+5. Apps fixam a versão exata (`--save-exact`) e atualizam por PR.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majapisoftwares/ui",
-  "version": "5.0.0",
+  "version": "6.1.0",
   "description": "Shared Workbench UI and UX standards based on shadcn/ui",
   "publishConfig": {
     "access": "public"
@@ -26,18 +26,21 @@
     "./components/*": "./src/components/ui/*.tsx",
     "./patterns/*": "./src/patterns/*.tsx",
     "./templates/*": "./src/templates/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
     "./styles.css": "./src/styles.css",
-    "./lib/utils": "./src/lib/utils.ts"
+    "./lib/utils": "./src/lib/utils.ts",
+    "./lib/i18n": "./src/lib/i18n.tsx"
   },
   "scripts": {
     "create:app": "node scripts/create-app.mjs",
     "test:starter": "node --test scripts/create-app.test.mjs",
-    "dev": "vite --host 127.0.0.1 --port 4318 --strictPort",
-    "build": "tsc --noEmit && vite build",
+    "dev": "npm run dev -w catalog",
+    "build": "node scripts/write-release.mjs && tsc --noEmit && npm run build -w catalog",
     "typecheck": "tsc --noEmit",
     "lint": "eslint . --max-warnings=0",
     "format:check": "prettier --check src examples scripts *.json *.ts *.md docs/*.md",
-    "check:standards": "node scripts/check-standards.mjs"
+    "check:standards": "node scripts/check-standards.mjs",
+    "normalize:ui": "node scripts/normalize-ui.mjs && prettier --write src/components/ui src/hooks"
   },
   "peerDependencies": {
     "react": "19.3.1",
@@ -48,28 +51,34 @@
   },
   "dependencies": {
     "@base-ui/react": "1.9.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/geist": "^5.3.0",
+    "@tanstack/react-table": "8.21.3",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cn": "^0.5.0",
     "lucide-react": "1.61.0",
     "shadcn": "^4.22.1",
+    "sonner": "^2.0.8",
     "tailwind-merge": "3.7.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
-    "@tailwindcss/vite": "4.3.3",
     "@types/node": "26.6.5",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "@vitejs/plugin-react": "6.1.2",
     "eslint": "10.13.0",
     "eslint-plugin-react-hooks": "7.1.1",
     "prettier": "3.9.10",
     "tailwindcss": "4.3.3",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.72.0",
-    "vite": "8.3.5"
-  }
+    "typescript-eslint": "8.72.0"
+  },
+  "workspaces": [
+    "catalog"
+  ]
 }

package/scripts/check-standards.mjs

@@ -19,6 +19,8 @@ async function visit(path) {
     if (!consumer && name.startsWith("components/ui/")) continue;
     if (consumer && /(?:^|\/)components\/ui\//.test(name))
       violations.push(`${name}: local UI primitive copies are forbidden`);
+    if (/components\/native-select|<NativeSelect\b/.test(text))
+      violations.push(`${name}: use Select (Base UI), not a native select`);
     if (/<(?:button|input|select|table|dialog)(?:\s|>)/.test(text))
       violations.push(`${name}: use the shared UI primitive`);
     if (

package/src/components/ui/accordion.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { cn } from "cn";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b data-open:bg-muted/50", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,187 @@
+"use client";
+
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cn } from "cn";
+
+import { Button } from "./button";
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-popover p-6 text-popover-foreground shadow-xl ring-1 ring-foreground/5 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-full bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "cn";
 
 const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  "group/alert relative grid w-full gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -68,7 +68,7 @@ function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
+      className={cn("absolute top-2.5 right-3", className)}
       {...props}
     />
   );