@softize/opus 10.0.0 → 11.0.0

package/CHANGELOG.md

@@ -11,6 +11,33 @@ Depois de qualquer bump, rode os gates (`typecheck` · `test` · `opus check` ·
 > tinha ficado sem registro nenhum, o que é exatamente o caso que este arquivo existe
 > pra cobrir.
 
+## 11.0.0 — 2026-08-21
+
+**Breaking — deprecateds removidos na fronteira pública.** O major anterior manteve por
+engano APIs cuja própria documentação prometia remoção na próxima versão; esta versão
+fecha a migração em vez de carregar duas taxonomias indefinidamente.
+
+- `AppShell`, `AppShellBar`, `AppShellTrigger`, `useAppShell`, `useSidebarSlot` e
+  `SectionShell` (incluindo seus tipos `Section*`) saem. Componha chrome e seções com
+  `Split`, `Pane`, `Sidebar`, `PaneHeader`, `PaneContent`, `PaneFooter` e `SidebarNav`.
+- `ResizablePanelGroup`, `ResizablePanel` e `ResizableHandle` deixam de ser exports
+  públicos. Use `<Split resizable>` e declare tamanho/limites nos `<Pane>`.
+- `SidebarHeader`, `SidebarContent` e `SidebarFooter` saem; eram aliases de
+  `PaneHeader`, `PaneContent` e `PaneFooter`.
+- `DomainConfig.models` sai. Declare entidades em `DomainConfig.entities`; os comandos
+  `opus db` e o gerador agora leem somente esse campo. O manifest deixa de emitir o array
+  redundante `models`; os nomes continuam disponíveis em `entities[].name`.
+
+`SidebarNav` passa a aceitar `subgroups`, cobrindo navegação contextual e a árvore de três
+níveis da documentação sem um shell especializado. `ShellNav` agora deriva o estado
+recolhido diretamente da `Sidebar`. O próprio `DocBrowser` foi migrado para a composição
+canônica e serve como consumidor de referência.
+
+**Migração:** substitua shells prontos pela composição `Split > Pane > Sidebar`; troque os
+aliases `Sidebar*` pelos slots `Pane*`; envolva painéis ajustáveis em `<Split resizable>`;
+renomeie `domain.models` para `domain.entities` e, ao consumir manifest, derive nomes de
+`domain.entities.map(entity => entity.name)`.
+
 ## 10.0.0 — 2026-08-20
 
 **Breaking — forma usa a escala do Tailwind e superfícies sempre carregam seu foreground.**

package/bin/lib/db-check-runner.mjs

@@ -8,7 +8,7 @@
  *
  * Contrato do `opus.config.ts` pros comandos `db`:
  *   - `entities?: EntityConfig[]`        — entidades explícitas (opcional)
- *   - `domains?: DomainConfig[]`         — entidades coletadas de `domain.models`
+ *   - `domains?: DomainConfig[]`         — entidades coletadas de `domain.entities`
  *   - `database: () => Kysely | Promise<Kysely>`  — factory LAZY do banco.
  *     É factory (não instância) de propósito: o `gen` importa o mesmo config
  *     sem nunca chamar `database()`, então não abre conexão.
@@ -29,9 +29,9 @@ function emit(obj) {
 
 function collectEntities(domain, out) {
   if (domain === null || typeof domain !== 'object') return
-  const models = domain.models
-  if (models !== undefined && models !== null && typeof models === 'object') {
-    for (const value of Object.values(models)) {
+  const entities = domain.entities
+  if (entities !== undefined && entities !== null && typeof entities === 'object') {
+    for (const value of Object.values(entities)) {
       if (isEntityConfig(value)) out.push(value)
     }
   }
@@ -59,7 +59,7 @@ async function main() {
   }
 
   if (entities.length === 0) {
-    emit({ ok: false, error: 'nenhuma entidade encontrada (config.entities ou domain.models)' })
+    emit({ ok: false, error: 'nenhuma entidade encontrada (config.entities ou domain.entities)' })
     return
   }
 

package/bin/lib/db-migrate-runner.mjs

@@ -28,9 +28,9 @@ function emit(obj) {
 
 function collectEntities(domain, out) {
   if (domain === null || typeof domain !== 'object') return
-  const models = domain.models
-  if (models !== undefined && models !== null && typeof models === 'object') {
-    for (const value of Object.values(models)) if (isEntityConfig(value)) out.push(value)
+  const entities = domain.entities
+  if (entities !== undefined && entities !== null && typeof entities === 'object') {
+    for (const value of Object.values(entities)) if (isEntityConfig(value)) out.push(value)
   }
   if (Array.isArray(domain.subdomains)) for (const sub of domain.subdomains) collectEntities(sub, out)
 }

package/bin/lib/db-scaffold-runner.mjs

@@ -23,9 +23,9 @@ function emit(obj) {
 
 function collectEntities(domain, out) {
   if (domain === null || typeof domain !== 'object') return
-  const models = domain.models
-  if (models !== undefined && models !== null && typeof models === 'object') {
-    for (const value of Object.values(models)) if (isEntityConfig(value)) out.push(value)
+  const entities = domain.entities
+  if (entities !== undefined && entities !== null && typeof entities === 'object') {
+    for (const value of Object.values(entities)) if (isEntityConfig(value)) out.push(value)
   }
   if (Array.isArray(domain.subdomains)) for (const sub of domain.subdomains) collectEntities(sub, out)
 }
@@ -48,7 +48,7 @@ async function main() {
   if (Array.isArray(config.entities)) for (const e of config.entities) if (isEntityConfig(e)) entities.push(e)
   if (Array.isArray(config.domains)) for (const d of config.domains) collectEntities(d, entities)
   if (entities.length === 0) {
-    emit({ ok: false, error: 'nenhuma entidade encontrada (config.entities ou domain.models)' })
+    emit({ ok: false, error: 'nenhuma entidade encontrada (config.entities ou domain.entities)' })
     return
   }
   if (typeof config.database !== 'function') {

package/bin/lib/db.mjs

@@ -249,7 +249,7 @@ Flags:
 
 O opus.config.ts precisa expor, pros comandos db:
   database: () => Kysely          factory LAZY do banco (gen não a chama)
-  entities | domains              entidades (explícitas ou via domain.models)
+  entities | domains              entidades (explícitas ou via domain.entities)
   schema?: string                 script SQL idempotente (default: ./db/schema.sql)
   migrations?: string             pasta dos rascunhos do scaffold (default: ./migrations)
 

package/bin/lib/gen-manifest.mjs

@@ -25,10 +25,7 @@ function shapeDomain(d) {
     dicts: d.dicts,
     repository: d.hasRepository,
     service: d.hasService,
-    // `entities` = a fonte estrutural+negócio (campos + docs). `models` = nomes
-    // (legado, removido no PR de rename). Ambos por ora pra não quebrar a lente.
     entities: d.entities ?? [],
-    models: d.modelNames,
     actions: d.actions.map(shapeAction),
     reactions: d.reactions,
     schedules: d.schedules,

package/bin/lib/gen-runner.mjs

@@ -30,7 +30,7 @@
  *     SerializedDomain:
  *     {
  *       name, dicts, actions, reactions, schedules, subdomains,
- *       hasRepository, hasService, hasModels
+ *       hasRepository, hasService
  *     }
  *
  *     SerializedAction (todos os ActionDef preservam suas strings):
@@ -143,17 +143,12 @@ async function main() {
 // =============================================================================
 
 function serializeDomain(domain, ctx) {
-  // `entities` é o nome preferido; `models` é o legado (alias). Lê os dois.
-  const entitySrc = domain.entities ?? domain.models
-  const entityList = serializeEntities(entitySrc)
+  const entityList = serializeEntities(domain.entities)
   return {
     name: domain.name,
     description: nullable(domain.description),
     hasRepository: domain.repository !== undefined,
     hasService: domain.service !== undefined,
-    // Compat: nomes ainda expostos; `entities` traz a estrutura+doc completa.
-    hasModels: entityList.length > 0,
-    modelNames: entityList.map((e) => e.name),
     entities: entityList,
     dicts: serializeDicts(domain.dicts),
     actions: Array.from(iterateActions(domain.actions), (a) =>

package/docs/data-layer.md

@@ -90,7 +90,7 @@ infra do `gen`, não a do `check`). Contrato do config **pros comandos `db`**:
 
 ```ts
 export default {
-  domains: [...],                       // entidades coletadas de domain.models
+  domains: [...],                       // entidades coletadas de domain.entities
   entities: [Deal, Company],            // ou explícitas (opcional)
   schema: './src/db/schema.sql',        // o script idempotente (default: ./db/schema.sql)
   database: () => new Kysely({ ... }),  // factory LAZY do banco
@@ -139,7 +139,7 @@ import { Kysely, PostgresDialect, CamelCasePlugin } from 'kysely'
 import { Deal } from './src/domains/deals/deal.entity.ts'
 
 export default {
-  entities: [Deal],          // ou domains: [...] (entidades via domain.models)
+  entities: [Deal],          // ou domains: [...] (entidades via domain.entities)
   naming: 'snake',           // colunas snake no banco
   migrations: './migrations',
   database: () => new Kysely({

package/docs/protocol.md

@@ -2053,14 +2053,14 @@ defineAction({
 
 ### Entidades dentro de um domínio
 
-`DomainConfig.models` recebe as entidades do recorte (substitui o `unknown` placeholder atual). O domínio agrupa; a entidade declara.
+`DomainConfig.entities` recebe as entidades do recorte. O domínio agrupa; a entidade declara.
 
 ```ts
 import { defineDomain } from '@softize/opus'
 
 export const crm = defineDomain({
   name: 'crm',
-  models: { Deal, Company, Contact },
+  entities: { Deal, Company, Contact },
   actions: { /* deal.create, deal.search, ... */ },
 })
 ```

package/package.json

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

package/src/core/domain.ts

@@ -2,7 +2,7 @@
  * tbdlib — `defineDomain` factory + flatten helper.
  *
  * Domain agrupa as peças que pertencem a um mesmo recorte funcional
- * (dicts, models, repository, service, actions, reactions, schedules,
+ * (dicts, entities, repository, service, actions, reactions, schedules,
  * subdomains). É puramente declarativo: nenhum efeito colateral acontece
  * em `defineDomain`. O runtime consome o objeto via `flattenDomain` quando
  * recebe um `DomainConfig` em `register(...)`.
@@ -55,12 +55,9 @@ export interface DomainConfig {
   dicts?: Record<string, unknown>
 
   /** Entidades do domínio (`defineEntity`). Map de nome → EntityConfig. É a fonte
-   *  estrutural+negócio que vai pro manifest. `models` é o nome legado (alias). */
+   *  estrutural+negócio que vai pro manifest. */
   entities?: Record<string, unknown>
 
-  /** @deprecated Use `entities`. Mantido por compat — o runtime/gen lê os dois. */
-  models?: Record<string, unknown>
-
   /** Repository class do domínio. */
   repository?: unknown
 
@@ -152,7 +149,7 @@ export function isDomainConfig(value: unknown): value is DomainConfig {
     'schedules' in v ||
     'subdomains' in v ||
     'dicts' in v ||
-    'models' in v ||
+    'entities' in v ||
     'repository' in v ||
     'service' in v
   )

package/src/schema/entity.ts

@@ -310,7 +310,7 @@ export function entityTable(config: EntityConfig): string {
 
 /**
  * `true` se `value` parece um `EntityConfig`. Usado pra coletar entidades de
- * `domain.models` (que é `unknown`) sem confundir com action/reaction/model.
+ * `domain.entities` (que é `unknown`) sem confundir com action/reaction/model.
  * Heurística: tem `name` string + `fields` objeto e **não** tem `kind`
  * (descarta `ActionDef`).
  */

package/src/ui/components/patterns/shell-nav.tsx

@@ -2,11 +2,8 @@
  * <ShellNav /> — o menu como primitivo PIVOTÁVEL. Um nav (grupos → itens, com heading e
  * âncora inferior) que serve os DOIS lares do chrome sem flag:
  *
- *   - na sidebar do <AppShell>  → recolhe pra ícone-só (com tooltip) quando a sidebar
- *     recolhe, sozinho. Sabe que está NA sidebar (e se ela recolheu) pelo contexto de
- *     slot do AppShell (`useSidebarSlot`) — o app não passa isso em duas mãos.
- *   - dentro do conteúdo (o que o <SectionShell> faz) → sempre expandido (fora da sidebar,
- *     `useSidebarSlot` é null).
+ *   - dentro de <Sidebar> → recolhe pra ícone-só (com tooltip) junto com a coluna;
+ *   - fora de <Sidebar> → permanece expandido.
  *
  * "Tanto faz onde": o componente se adapta ao lugar, sem "modo" configurado.
  *
@@ -17,7 +14,7 @@
 
 import type { ReactNode } from 'react'
 import { cn } from '../../lib/cn.ts'
-import { useSidebarSlot } from './app-shell.tsx'
+import { useSidebarCollapsed } from './sidebar.tsx'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../primitives/tooltip.tsx'
 
 export interface ShellNavItem {
@@ -49,7 +46,7 @@ export interface ShellNavProps {
   footer?: ShellNavGroup[]
   /** Rótulo da landmark `<nav>`. */
   navLabel?: string
-  /** Classes da raiz (a coluna). A LARGURA vem do lar (sidebar do AppShell / SectionShell). */
+  /** Classes da raiz (a coluna). A largura vem do pane/sidebar que a contém. */
   className?: string
 }
 
@@ -109,8 +106,7 @@ function renderGroup(group: ShellNavGroup, gi: number, activeId: string | undefi
 }
 
 export function ShellNav({ groups, activeId, onSelect, heading, footer, navLabel = 'Navegação', className }: ShellNavProps): React.ReactElement {
-  // Recolhe SÓ na sidebar recolhida (o contexto de slot é null no conteúdo → sempre expandido).
-  const railed = useSidebarSlot()?.collapsed ?? false
+  const railed = useSidebarCollapsed()
 
   const body = (
     <div data-slot="shell-nav" className={cn('flex h-full min-h-0 flex-col', className)}>

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

@@ -5,6 +5,11 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../pri
 interface SidebarContextValue { collapsed: boolean }
 const SidebarContext = createContext<SidebarContextValue | null>(null)
 
+/** Estado da Sidebar mais próxima. Uso interno por navegações que se adaptam ao colapso. */
+export function useSidebarCollapsed(): boolean {
+  return useContext(SidebarContext)?.collapsed ?? false
+}
+
 export interface SidebarProps {
   collapsed?: boolean
   /** Desliga a borda quando o Split já desenha a divisória. */
@@ -39,27 +44,21 @@ export function PaneFooter({ className, children }: { className?: string; childr
   return <div data-slot="pane-footer" className={cn('shrink-0 border-t border-border p-2', className)}>{children}</div>
 }
 
-/** @deprecated Use PaneHeader. */
-export const SidebarHeader = PaneHeader
-/** @deprecated Use PaneContent. */
-export const SidebarContent = PaneContent
-/** @deprecated Use PaneFooter. */
-export const SidebarFooter = PaneFooter
-
 export interface SidebarItemProps {
   label: string
   icon?: ReactNode
   badge?: ReactNode
   active?: boolean
   disabled?: boolean
+  className?: string
   onClick: () => void
 }
 
 /** Item de navegação que se adapta ao colapso da Sidebar em que está. */
-export function SidebarItem({ label, icon, badge, active = false, disabled = false, onClick }: SidebarItemProps): React.ReactElement {
-  const collapsed = useContext(SidebarContext)?.collapsed ?? false
+export function SidebarItem({ label, icon, badge, active = false, disabled = false, className, onClick }: SidebarItemProps): React.ReactElement {
+  const collapsed = useSidebarCollapsed()
   const button = (
-    <button type="button" disabled={disabled} aria-current={active ? 'page' : undefined} onClick={onClick} className={cn('flex items-center gap-2.5 rounded-md transition-colors', 'disabled:pointer-events-none disabled:opacity-40', collapsed ? 'mx-auto size-9 justify-center p-0' : 'w-full px-2.5 py-1.5 text-left text-sm', active ? 'bg-muted font-medium text-foreground' : 'text-foreground/80 hover:bg-muted/60')}>
+    <button type="button" disabled={disabled} aria-current={active ? 'page' : undefined} onClick={onClick} className={cn('flex items-center gap-2.5 rounded-md transition-colors', 'disabled:pointer-events-none disabled:opacity-40', collapsed ? 'mx-auto size-9 justify-center p-0' : 'w-full px-2.5 py-1.5 text-left text-sm', active ? 'bg-muted font-medium text-foreground' : 'text-foreground/80 hover:bg-muted/60', className)}>
       {icon !== undefined && <span className="flex shrink-0">{icon}</span>}
       {!collapsed && <span className="min-w-0 flex-1 truncate">{label}</span>}
       {!collapsed && badge !== undefined && <span className="shrink-0">{badge}</span>}
@@ -71,17 +70,43 @@ export function SidebarItem({ label, icon, badge, active = false, disabled = fal
 
 export interface SidebarNavGroup {
   label?: string
-  items: Array<Omit<SidebarItemProps, 'active' | 'onClick'> & { id: string }>
+  items?: SidebarNavItem[]
+  subgroups?: SidebarNavSubgroup[]
+}
+
+export type SidebarNavItem = Omit<SidebarItemProps, 'active' | 'onClick'> & { id: string }
+
+export interface SidebarNavSubgroup {
+  label?: string
+  items: SidebarNavItem[]
 }
 
+const titled = (label?: string): boolean => (label ?? '').trim() !== ''
+const subFilled = (subgroup: SidebarNavSubgroup): boolean => subgroup.items.length > 0
+const groupFilled = (group: SidebarNavGroup): boolean =>
+  (group.items?.length ?? 0) > 0 || (group.subgroups?.some(subFilled) ?? false)
+
 /** Navegação controlada para Sidebar. Header/footer continuam slots explícitos do pai. */
 export function SidebarNav({ groups, activeId, onSelect, navLabel = 'Navegação', className }: { groups: SidebarNavGroup[]; activeId?: string; onSelect: (id: string) => void; navLabel?: string; className?: string }): React.ReactElement {
-  const collapsed = useContext(SidebarContext)?.collapsed ?? false
+  const collapsed = useSidebarCollapsed()
+  const renderItem = (item: SidebarNavItem, nested = false): React.ReactElement => (
+    <SidebarItem
+      key={item.id}
+      {...item}
+      className={cn(nested && !collapsed && 'pl-6', item.className)}
+      active={item.id === activeId}
+      onClick={() => onSelect(item.id)}
+    />
+  )
   const body = (
     <nav aria-label={navLabel} data-slot="sidebar-nav" className={cn('space-y-4 p-2', className)}>
-      {groups.map((group, gi) => <div key={gi} className="space-y-0.5">
-        {!collapsed && group.label?.trim() && <div className="px-2.5 pb-1 text-xs font-medium text-muted-foreground/70">{group.label}</div>}
-        {group.items.map(({ id, ...item }) => <SidebarItem key={id} {...item} active={id === activeId} onClick={() => onSelect(id)} />)}
+      {groups.map((group, gi) => !groupFilled(group) ? null : <div key={gi} className="space-y-0.5">
+        {!collapsed && titled(group.label) && <div className="px-2.5 pb-1 text-xs font-medium text-muted-foreground/70">{group.label}</div>}
+        {group.items?.map((item) => renderItem(item))}
+        {group.subgroups?.map((subgroup, si) => !subFilled(subgroup) ? null : <div key={si} className="space-y-0.5">
+          {!collapsed && titled(subgroup.label) && <div className="pb-0.5 pl-4 pr-2.5 pt-1.5 text-[11px] font-medium text-muted-foreground/50">{subgroup.label}</div>}
+          {subgroup.items.map((item) => renderItem(item, titled(subgroup.label)))}
+        </div>)}
       </div>)}
     </nav>
   )

package/src/ui/docs/DocBrowser.tsx

@@ -14,7 +14,8 @@
  */
 import { useEffect } from 'react'
 import { DOC_SECTIONS, type DocSection, type DocEntry } from './registry'
-import { SectionShell, type SectionNavGroup } from '../components/patterns/section-shell.tsx'
+import { Pane, Split } from '../components/patterns/split.tsx'
+import { PaneContent, Sidebar, SidebarNav, type SidebarNavGroup } from '../components/patterns/sidebar.tsx'
 import { navigate, usePathname } from '../router.ts'
 
 function findPage(sections: DocSection[], slug: string): DocEntry | undefined {
@@ -70,21 +71,35 @@ export function DocBrowser({
   // Seção → grupo, e os grupos da seção → subgrupos. O tier do meio NÃO pode ser
   // achatado: `docSectionsFromFolder` o preenche a partir de sub-pasta (ou do
   // frontmatter `group:`), que é o caminho do `opusDocs({ source })`.
-  const navGroups: SectionNavGroup[] = sections.map((section) => ({
+  const navGroups: SidebarNavGroup[] = sections.map((section) => ({
     label: section.label,
     subgroups: section.groups.map((g) => ({
       label: g.label,
-      items: g.pages.map((p) => ({ id: p.slug, label: p.title, badge: p.badge })),
+      items: g.pages.map((p) => ({
+        id: p.slug,
+        label: p.title,
+        badge: p.badge === undefined ? undefined : <span className="rounded border border-border/60 px-1 font-mono text-[10px] leading-tight text-muted-foreground/60">{p.badge}</span>,
+      })),
     })),
   }))
 
   return (
-    <SectionShell
-      groups={navGroups}
-      activeId={page?.slug}
-      onSelect={(slug) => go(`${basePath}/${slug}`)}
-    >
-      <div className="mx-auto max-w-3xl px-8 py-8">{page?.render()}</div>
-    </SectionShell>
+    <Split className="h-full">
+      <Pane inset="none" className="w-56">
+        <Sidebar className="w-full">
+          <PaneContent>
+            <SidebarNav
+              groups={navGroups}
+              activeId={page?.slug}
+              navLabel="Navegação da documentação"
+              onSelect={(slug) => go(`${basePath}/${slug}`)}
+            />
+          </PaneContent>
+        </Sidebar>
+      </Pane>
+      <Pane key={page?.slug} grow inset="none" className="overflow-y-auto">
+        <div className="mx-auto max-w-3xl px-8 py-8">{page?.render()}</div>
+      </Pane>
+    </Split>
   )
 }

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

@@ -75,11 +75,11 @@ render(<Demo />)
 Monte **um** `<DialogHost />` no shell do app, ao lado do `<Toaster />`:
 
 ```tsx
-<AppShell sidebar={…}>
+<>
   {rotas}
   <Toaster />
   <DialogHost />
-</AppShell>
+</>
 ```
 
 Sem ele, os três **lançam** — em vez de devolver uma promise que nunca resolve. Promise pendurada viraria clique sem efeito, o pior desfecho pra uma interrupção que exige resposta: a pessoa acha que respondeu, ou clica de novo. (`<ConfirmHost />` segue valendo como alias de `<DialogHost />`.)

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

@@ -27,7 +27,7 @@ render(
 
 ## Colapso
 
-`collapsed` pertence à própria `Sidebar`; `SidebarItem` e `SidebarNav` adaptam-se automaticamente para botões `size-9` centralizados, ícones e tooltips. `PaneHeader`, `PaneContent` e `PaneFooter` são slots do pane: a aplicação mantém a identidade e ações que lhe pertencem sem atribuí-las artificialmente à sidebar. `SidebarHeader`, `SidebarContent` e `SidebarFooter` seguem como aliases deprecated durante a migração.
+`collapsed` pertence à própria `Sidebar`; `SidebarItem`, `SidebarNav` e `ShellNav` adaptam-se automaticamente para botões `size-9` centralizados, ícones e tooltips. `PaneHeader`, `PaneContent` e `PaneFooter` são os slots do pane: a aplicação mantém a identidade e ações que lhe pertencem sem atribuí-las artificialmente à sidebar.
 
 ```tsx
 <Sidebar collapsed={collapsed}>
@@ -36,3 +36,23 @@ render(
   <PaneFooter><UserMenu /></PaneFooter>
 </Sidebar>
 ```
+
+## Navegação contextual
+
+`SidebarNav` aceita grupos e subgrupos. Isso cobre tanto a navegação global quanto seções internas, como Configurações ou documentação, sem outro shell especializado.
+
+```tsx
+<SidebarNav
+  groups={[
+    {
+      label: 'Configurações',
+      subgroups: [
+        { label: 'Acesso', items: [{ id: 'users', label: 'Usuários' }] },
+        { label: 'Dados', items: [{ id: 'imports', label: 'Importações' }] },
+      ],
+    },
+  ]}
+  activeId={active}
+  onSelect={go}
+/>
+```

package/src/ui/docs/registry.tsx

@@ -80,7 +80,6 @@ import paginationMd from './content/pagination.md?raw'
 import popoverMd from './content/popover.md?raw'
 import progressMd from './content/progress.md?raw'
 import radioGroupMd from './content/radio-group.md?raw'
-import resizableMd from './content/resizable.md?raw'
 import scrollAreaMd from './content/scroll-area.md?raw'
 import selectMd from './content/select.md?raw'
 import separatorMd from './content/separator.md?raw'
@@ -114,8 +113,6 @@ import actionViewMd from './content/action-view.md?raw'
 import actionTriggerMd from './content/action-trigger.md?raw'
 import actionSearchDialogMd from './content/action-list-dialog.md?raw'
 import pageMd from './content/page.md?raw'
-import appShellMd from './content/app-shell.md?raw'
-import sectionShellMd from './content/section-shell.md?raw'
 import sidebarMd from './content/sidebar.md?raw'
 import splitMd from './content/split.md?raw'
 import routerMd from './content/router.md?raw'
@@ -295,11 +292,8 @@ export const UI_SECTIONS: DocSection[] = [
           { slug: 'aspect-ratio', title: 'Aspect Ratio', render: comp('Aspect Ratio', 'aspect-ratio', aspectRatioMd) },
           { slug: 'card', title: 'Card', render: comp('Card', 'card', cardMd) },
           { slug: 'collapsible', title: 'Collapsible', render: comp('Collapsible', 'collapsible', collapsibleMd) },
-          { slug: 'resizable', title: 'Resizable', badge: componentMeta.resizable.deprecated ? 'deprecated' : undefined, render: comp('Resizable', 'resizable', resizableMd) },
           { slug: 'scroll-area', title: 'Scroll Area', render: comp('Scroll Area', 'scroll-area', scrollAreaMd) },
           { slug: 'separator', title: 'Separator', render: comp('Separator', 'separator', separatorMd) },
-          { slug: 'app-shell', title: 'App Shell', badge: componentMeta['app-shell'].deprecated ? 'deprecated' : undefined, render: pattern('App Shell', 'app-shell', appShellMd) },
-          { slug: 'section-shell', title: 'Section Shell', badge: componentMeta['section-shell'].deprecated ? 'deprecated' : undefined, render: pattern('Section Shell', 'section-shell', sectionShellMd) },
         ],
       },
       {

package/src/ui/meta.ts

@@ -283,24 +283,17 @@ export const componentMeta = {
     whenToUse:
       'Escolha única entre opções mutuamente exclusivas, todas visíveis ao mesmo tempo (Radix). Cada RadioGroupItem tem um `value`; o item escolhido vira o `value` do RadioGroup, controlado por `value`/`onValueChange` (ou `defaultValue` no modo não controlado). Pareie cada item com um Label. Pra poucas opções que cabem na tela; com muitas, prefira Select; pra ligar/desligar um único item, Checkbox ou Switch.',
   },
-  'resizable': {
-    name: 'resizable',
-    ancestry: 'shadcn',
-    whenToUse:
-      'Painéis redimensionáveis por arraste (react-resizable-panels). Compõe ResizablePanelGroup > ResizablePanel + ResizableHandle entre eles; `orientation` (horizontal/vertical) define a direção do arraste, `defaultSize`/`minSize`/`maxSize` (em %) limitam cada painel e `withHandle` desenha a pega na divisória. O grupo ocupa a altura do pai (h-full), então dê tamanho ao container. Pra alternar entre painéis sem dividir a vista, use Tabs.',
-    deprecated: { alternative: '`Split resizable` + `Pane`', since: 'próxima versão' },
-  },
   'split': {
     name: 'split',
     ancestry: 'opus',
     whenToUse:
-      'Divide uma área em panes em sequência horizontal ou vertical. Use `resizable` quando a pessoa deve ajustar a fronteira; o mesmo `<Split>` vira flex simples sem ele. Cada `<Pane>` declara tamanho inicial/mínimo e inset. É o mecanismo espacial para sidebar, conteúdo e rail — não use AppShell/SectionShell novos.',
+      'Divide uma área em panes em sequência horizontal ou vertical. Use `resizable` quando a pessoa deve ajustar a fronteira; o mesmo `<Split>` vira flex simples sem ele. Cada `<Pane>` declara tamanho inicial/mínimo e inset. É o mecanismo espacial para sidebar, conteúdo e rail.',
   },
   'sidebar': {
     name: 'sidebar',
     ancestry: 'opus',
     whenToUse:
-      'Chrome e navegação de uma coluna lateral, encaixada onde um Split decidir. `Sidebar` possui o colapso; `PaneHeader`, `PaneContent` e `PaneFooter` estruturam qualquer pane, e `SidebarNav`/`SidebarItem` apresentam a navegação. Serve tanto a barra global quanto uma nav contextual; em Split redimensionável passe `divider={false}` para não duplicar a divisória. `SidebarHeader`, `SidebarContent` e `SidebarFooter` são aliases deprecated.',
+      'Chrome e navegação de uma coluna lateral, encaixada onde um Split decidir. `Sidebar` possui o colapso; `PaneHeader`, `PaneContent` e `PaneFooter` estruturam qualquer pane, e `SidebarNav`/`SidebarItem` apresentam navegação com grupos e subgrupos. Serve tanto a barra global quanto uma nav contextual; em Split redimensionável passe `divider={false}` para não duplicar a divisória.',
   },
   'scroll-area': {
     name: 'scroll-area',
@@ -381,20 +374,6 @@ export const componentMeta = {
     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.',
   },
-  'app-shell': {
-    name: 'app-shell',
-    ancestry: 'opus',
-    whenToUse:
-      'O chrome da aplicação: sidebar de navegação (header + nav rolável + rodapé ancorado) + conteúdo, com rail opcional à direita (chat de agente, inspetor) em painéis redimensionáveis. É o quadro — o que vai em cada slot é do app. Pro esqueleto de UMA página (título, descrição, ação), Page. Chrome `flush` opcional (full-bleed, filete à esquerda) com <AppShellBar> — a faixa h-12 border-b usada na sidebar (marca) e no topo do conteúdo pra linha do header atravessar a tela. Sidebar recolhível com `collapsible` (opt-in): o shell controla a largura e publica `data-collapsed` no aside; o rótulo some por CSS (`group-data-[collapsed=true]/sidebar:hidden`) porque o nav é do app. O botão é o <AppShellTrigger />, posicionado pelo consumidor; `useAppShell()` dá o estado em JS.',
-    deprecated: { alternative: '`Split` + `Pane` + `Sidebar`', since: 'próxima versão' },
-  },
-  'section-shell': {
-    name: 'section-shell',
-    ancestry: 'opus',
-    whenToUse:
-      'Uma SEÇÃO com navegação própria — o nível entre AppShell (o app) e Page (uma tela): nav w-56 com filete + painel, pras telas irmãs de Configurações, Relatórios ou doc. Use quando a seção é visitada raro e navegada por dentro quando visitada (não vale queimar item na sidebar do app), ou quando a lista é dinâmica demais pra um nav estático. Pra facetas do MESMO objeto, Tabs. Controlado (activeId + onSelect): o roteamento é do app. Grupos aceitam `items` e/ou `subgroups` (o 3º nível, ex.: sub-pasta na doc). O painel remonta quando o `activeId` muda — é o que zera o scroll; `scrollResetKey` sobrescreve a chave nos dois sentidos: constante = nunca remonta (preserva o scroll), mais fina que o activeId = remonta também dentro da mesma tela.',
-    deprecated: { alternative: '`Split` + `Pane` + `Sidebar`', since: 'próxima versão' },
-  },
   'router': {
     name: 'router',
     ancestry: 'opus',

package/src/ui/react.tsx

@@ -164,7 +164,6 @@ export { Kbd, KbdGroup } from './components/primitives/kbd.tsx'
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './components/primitives/pagination.tsx'
 export { Progress } from './components/primitives/progress.tsx'
 export { RadioGroup, RadioGroupItem } from './components/primitives/radio-group.tsx'
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './components/primitives/resizable.tsx'
 export { ScrollArea, ScrollBar } from './components/primitives/scroll-area.tsx'
 export { Slider } from './components/primitives/slider.tsx'
 export { Switch } from './components/primitives/switch.tsx'
@@ -206,29 +205,15 @@ export type { DataStateProps } from './components/patterns/data-state.tsx'
 export { Page } from './components/patterns/page.tsx'
 export type { PageProps } from './components/patterns/page.tsx'
 
-// Chrome da aplicação (sidebar + conteúdo + rail opcional redimensionável).
-export { AppShell, AppShellBar, AppShellTrigger, useAppShell, useSidebarSlot } from './components/patterns/app-shell.tsx'
-export type { AppShellProps } from './components/patterns/app-shell.tsx'
-
 // Layout composicional: Split decide a relação espacial; Pane carrega conteúdo com inset.
 export { Split, Pane } from './components/patterns/split.tsx'
 export type { SplitProps, PaneProps } from './components/patterns/split.tsx'
 
 // Barra lateral composicional: header/conteúdo/footer e navegação, sem possuir o layout.
-export { PaneHeader, PaneContent, PaneFooter, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarItem, SidebarNav } from './components/patterns/sidebar.tsx'
-export type { SidebarProps, SidebarItemProps, SidebarNavGroup } from './components/patterns/sidebar.tsx'
-
-// Seção com navegação própria (nav w-56 + painel) — o nível entre o AppShell e a Page.
-export { SectionShell } from './components/patterns/section-shell.tsx'
-export type {
-  SectionShellProps,
-  SectionNavGroup,
-  SectionNavSubgroup,
-  SectionNavItem,
-} from './components/patterns/section-shell.tsx'
-
-// O menu como primitivo PIVOTÁVEL: mesmo nav na sidebar do AppShell ou dentro do conteúdo
-// (colapso por CSS via o grupo `sidebar`). Ver docs/shellnav.md.
+export { PaneHeader, PaneContent, PaneFooter, Sidebar, SidebarItem, SidebarNav } from './components/patterns/sidebar.tsx'
+export type { SidebarProps, SidebarItemProps, SidebarNavGroup, SidebarNavSubgroup, SidebarNavItem } from './components/patterns/sidebar.tsx'
+
+// O menu como primitivo pivotável: recolhe quando composto dentro de Sidebar.
 export { ShellNav, ShellNavHeading } from './components/patterns/shell-nav.tsx'
 export type { ShellNavProps, ShellNavGroup, ShellNavItem, ShellNavHeadingProps } from './components/patterns/shell-nav.tsx'