@softize/opus 10.0.0 → 11.1.0

package/docs/shellnav.md

@@ -1,131 +0,0 @@
-# Proposta: `ShellNav` — o menu como primitivo pivotável
-
-> **Status: EM DISCUSSÃO.** Desenhado com o João (2026-07-22), a partir do trabalho na
-> cabine do Maestro (a nav do projeto virou `SectionShell`; a sidebar ganhou Início +
-> Configurações). Pendente de aprovação e de uma versão do Opus. Refina o
-> [`ownership-vs-shadcn-lock`](ownership-vs-shadcn-lock.md): o item de menu é o próximo
-> primitivo a sair do "cada app copia ad-hoc".
-
-## O problema
-
-O `AppShell` entrega a **moldura** da sidebar (o slot `sidebarNav`) e o `SectionShell`
-entrega a **nav de seção** (nav + painel, dentro do conteúdo). Mas o **item de menu** — a
-linha com ícone + label + estado ativo + badge — não é primitivo de ninguém: cada app
-escreve o `<button className="…">` na mão. Resultado, medido (não suposto):
-
-| Menu | Onde | Como é feito hoje |
-|---|---|---|
-| Aplicação (sidebar) | `AppShell.sidebarNav` | `<button>` à mão — sem primitivo |
-| Configurações | dentro do conteúdo | `SectionShell` (primitivo) ✓ |
-| Relatórios | dentro do conteúdo | `<aside>`/`<nav>` à mão — **não usa o SectionShell**, mesmo sendo a mesma forma |
-
-E isso se repete em **três produtos** (`softize/apps/maestro`, `softize/apps/main/web`,
-`empresa-x/apps/main`), cada um com a própria cópia do item — e, dentro de cada um, o
-markup ainda se repete por estado (ativo/inativo/recolhido) e nível (pai/filho).
-
-Dois fatos que calibram a urgência:
-
-- **Não é drift visível — é duplicação + risco.** Diff token a token: mesma versão do Opus
-  (2.37), mesmo `--radius` (0.625rem), classes de forma **byte-a-byte iguais**
-  (`rounded-md px-2.5 py-1.5 gap-2.5`). Só continuam iguais porque um humano copia; nada
-  cobra. A "sensação de divergência" (item mais retangular numa app que noutra) vem de
-  comparar **componentes diferentes** (nav de app × nav de seção × switcher), não de drift
-  do mesmo componente.
-- **Já há uma inconsistência viva:** o menu de Relatórios do GB é uma nav-dentro-do-conteúdo
-  — a MESMA forma do Configurações — e mesmo assim hand-rola em vez de usar o `SectionShell`.
-
-## A proposta
-
-Um primitivo só: **`ShellNav`** — **pivotável e controlado** (presentacional, como o
-`SectionShell` já é). O app passa **dados**, não markup, e o mesmo componente serve os dois
-lares sem flag de "modo app" vs "modo seção":
-
-- Na **sidebar do AppShell** (`sidebarNav={<ShellNav …/>}`): lê o estado de recolhido do
-  contexto `useAppShell` e vira ícone-só sozinho.
-- **Dentro do conteúdo** (o que o `SectionShell` faz): sem esse contexto, renderiza
-  expandido. O `SectionShell` **passa a compor** `ShellNav` (a nav) + o painel — um nav,
-  dois lares.
-
-Isto é o "tanto faz onde, mesmo comportamento": o componente **se adapta ao contexto** via
-`useAppShell`, sem o consumidor configurar nada.
-
-### Heading com espaço pra botão
-
-Slot `heading` — título + ação opcional. É o "+" de novo relatório, o título da seção, a
-marca na sidebar. Trivial e resolve o gesto que hoje mora à mão em cada nav.
-
-### Árvore embutida; DnD composto (a régua)
-
-- **Aninhamento/árvore → dentro do `ShellNav`.** Não é feature nova: o accordion da sidebar
-  (Vendas → Leads/Propostas, no GB) já é uma árvore de um nível. Barato, já necessário.
-- **Drag-drop de reordenar → COMPOSTO por fora**, estilo `dnd-kit`: o `ShellNav` expõe a
-  costura (um wrapper de item + um slot pro indicador de drop); um companheiro
-  (`useNavReorder`) pluga o arrasto só onde se opta. O peso — estado de drag, indicadores,
-  toque e principalmente a **a11y** (nav é *landmark*; reorder é *widget de manipulação* —
-  identidades diferentes) — vive fora do primitivo.
-
-  **O critério (viaja pra próximas decisões de primitivo): embute o que a maioria
-  compartilha; compõe o que um só precisa.** Reordenar é feature de um consumidor (só o
-  Relatórios); embuti-la faria os muitos pagarem a complexidade pelo um.
-
-### GB é a aparência de referência
-
-Das três, a implementação do GB é a mais madura (tem rail/colapso, accordion, estados
-ativos, âncora inferior de Configurações). **O `ShellNav` codifica o look do GB como
-default** — nada regride: o GB migra pro primitivo e renderiza igual; a cabine (já alinhada
-às classes do GB) passa a ser *literalmente* o mesmo componente, e a "sensação de
-retangular" some. A **identidade por app** continua nos **tokens** (`--radius`, cores — o
-Opus já permite sobrescrever no `theme.css` do app), não num fork do componente: a forma é
-compartilhada; a pele é temável.
-
-## API (esboço)
-
-```tsx
-interface ShellNavItem {
-  id: string
-  label: string
-  icon?: ReactNode
-  badge?: ReactNode
-  disabled?: boolean
-  children?: ShellNavItem[]        // accordion (app) / pasta (relatórios)
-}
-interface ShellNavGroup { label?: string; items: ShellNavItem[] }
-
-interface ShellNavProps {
-  groups: ShellNavGroup[]
-  activeId?: string
-  onSelect: (id: string) => void
-  heading?: ReactNode              // título + espaço pra botão (o "+" do Relatórios)
-  footer?: ReactNode               // âncora inferior (Configurações, no app)
-  collapsed?: boolean              // override; default lê do useAppShell quando presente
-  navLabel?: string
-  reorder?: NavReorderSeam         // opt-in; sem isto, ZERO DnD (o dnd-kit/useNavReorder pluga aqui)
-}
-
-// Conveniência do heading (padroniza título + ação):
-<ShellNavHeading title="Relatórios" action={<Button size="icon" icon={Plus} …/>} />
-```
-
-O `SectionShell` reescreve por dentro pra `<ShellNav/>` + painel; sua API pública não muda
-(consumidores existentes seguem).
-
-## Hoje × proposto
-
-| Menu | Hoje | Proposto |
-|---|---|---|
-| App (sidebar) | `<button>` à mão, N cópias por estado | `AppShell sidebarNav={<ShellNav groups footer=Configurações/>}` — colapso via contexto |
-| Configurações | `SectionShell` (nav+painel à mão por dentro) | `SectionShell` compõe `ShellNav` — sem mudança pro consumidor |
-| Relatórios | `<aside>` + tree + DnD, tudo à mão | `<ShellNav heading={título+"+"} …/>` + `useNavReorder` ao lado |
-
-## Consequências / plano
-
-- **Escopo:** sessão dedicada no Opus (não é ajuste de app). Ciclo: desenhar a API →
-  publicar versão do Opus → migrar os consumidores (cada `<button>` à mão vira `groups={…}`).
-- **Custo:** baixo em código, alto em coordenação (bump + migração dos 3 produtos + gates
-  em cada). O `SectionShell` é o precedente vivo — foi o mesmo movimento, um nível abaixo.
-- **Ordem sugerida:** (1) `ShellNav` + `ShellNavHeading` no Opus com o look do GB como
-  default; (2) `SectionShell` passa a compor; (3) migrar a cabine do Maestro (primeiro
-  cliente, já alinhada); (4) migrar o back-office; (5) migrar o Relatórios do GB pra
-  `ShellNav` + `useNavReorder` (fecha a inconsistência viva).
-- **Não-objetivo:** o `ShellNav` não vira dono de DnD, tree-editor ou roteamento — segue
-  presentacional/controlado; o app é dono do roteamento e do estado.

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

@@ -1,227 +0,0 @@
-/**
- * <AppShell /> — o chrome da aplicação: sidebar de navegação + conteúdo, com rail
- * opcional à direita (chat de agente, inspetor).
- *
- * Padroniza o esqueleto que os apps copiavam à mão (mesmas classes, várias vezes):
- * raiz `flex h-screen`, aside `w-64` com header/nav/rodapé (o nav rola; o rodapé
- * ancora), e o conteúdo. Com `rail`, conteúdo e rail viram painéis redimensionáveis
- * (Resizable). Presentacional de propósito: o QUE vai em cada slot (PaneHeader do
- * app, ChatRail, preview…) é do consumidor — o shell é o quadro, não o conteúdo.
- *
- * RECOLHER (`collapsible`): o shell controla a LARGURA e publica o estado; quem decide
- * o que some é o conteúdo, porque o `sidebarNav` é do consumidor. O aside expõe
- * `data-collapsed` e o grupo `sidebar`, então rótulo some por CSS, sem estado no
- * consumidor: `className="group-data-[collapsed=true]/sidebar:hidden"`. Quem precisa do
- * estado em JS usa `useAppShell()`; o botão é o `<AppShellTrigger />`, posicionado pelo
- * consumidor (numa `<AppShellBar>`, por exemplo) — o shell não escolhe por ele.
- */
-
-import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react'
-import { PanelLeft } from 'lucide-react'
-import { cn } from '../../lib/cn.ts'
-import { Button } from '../primitives/button.tsx'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../primitives/resizable.tsx'
-
-interface AppShellContextValue {
-  /** O shell permite recolher? Sem isso o trigger não se renderiza. */
-  collapsible: boolean
-  collapsed: boolean
-  setCollapsed: (collapsed: boolean) => void
-  toggle: () => void
-}
-
-const AppShellContext = createContext<AppShellContextValue | null>(null)
-
-/** Estado do shell (recolhido/expandido) pra quem precisa dele em JS. Em CSS, prefira o
- *  seletor de grupo (`group-data-[collapsed=true]/sidebar:…`) — não precisa de hook. */
-export function useAppShell(): AppShellContextValue {
-  const ctx = useContext(AppShellContext)
-  if (ctx === null) throw new Error('useAppShell precisa de um <AppShell> acima na árvore.')
-  return ctx
-}
-
-interface SidebarSlotValue {
-  collapsed: boolean
-}
-/** Contexto presente SÓ dentro dos slots da sidebar (header/nav/rodapé), AUSENTE no
- *  conteúdo. `useAppShell` não distingue os dois (o colapso vale a árvore toda); este sim.
- *  É como um nav PIVOTÁVEL (o `<ShellNav>`) sabe se está NA sidebar — e se ela está
- *  recolhida — sem o app passar isso em duas mãos (fecha a nota n=2 do gb-nav-rail). */
-const SidebarSlotContext = createContext<SidebarSlotValue | null>(null)
-/** Null quando FORA da sidebar (ex.: um `<ShellNav>` dentro do conteúdo, num SectionShell). */
-export function useSidebarSlot(): SidebarSlotValue | null {
-  return useContext(SidebarSlotContext)
-}
-
-export interface AppShellProps {
-  /** Topo da sidebar (marca, seletor de contexto/usuário). */
-  sidebarHeader?: ReactNode
-  /** Miolo da sidebar — a navegação; rola sozinho quando passa da altura. */
-  sidebarNav: ReactNode
-  /** Rodapé da sidebar, ancorado embaixo (status, ações globais). */
-  sidebarFooter?: ReactNode
-  /** Rail opcional à direita (chat de agente, inspetor). Sem ele, o conteúdo ocupa tudo. */
-  rail?: ReactNode
-  /** Tamanho inicial (%) do painel de conteúdo quando há rail. Default: 62. */
-  mainDefaultSize?: number
-  /** Tamanho mínimo (%) do painel de conteúdo. Default: 35. */
-  mainMinSize?: number
-  /** Tamanho mínimo (%) do rail. Default: 25. */
-  railMinSize?: number
-  /** Classes da raiz. Default: altura da tela (`h-screen`); em embeds, passe ex. `h-96`. */
-  className?: string
-  /** Classes do aside. Default: `w-64 shrink-0 flex-col p-2`. Largura passada aqui manda no
-   *  estado EXPANDIDO; no recolhido quem vence é `sidebarCollapsedClassName` (recolher é
-   *  estado, não estilo — senão o aside ficaria meio-recolhido). */
-  sidebarClassName?: string
-  /** Permite recolher a sidebar — OPT-IN: sem isso o shell é o de sempre. */
-  collapsible?: boolean
-  /** Recolhida? Passe junto com `onCollapsedChange` pra controlar de fora (ex.: persistir
-   *  a preferência); omita e o shell guarda o estado sozinho. */
-  collapsed?: boolean
-  /** Avisa que o estado mudou (obrigatório na forma controlada). */
-  onCollapsedChange?: (collapsed: boolean) => void
-  /** Largura do aside recolhido — só o suficiente pros ícones. Default: `w-14`. */
-  sidebarCollapsedClassName?: string
-  /** Chrome RENTE ao browser (sem inset): sidebar sem padding e conteúdo full-bleed
-   *  apartado pelo filete (`border-l`) — o shell NÃO pinta fundo (o canvas vem do
-   *  body); superfície branca é decisão do conteúdo (pinte `bg-background` no seu
-   *  contêiner). Combine com `<AppShellBar>` na sidebar e no topo do conteúdo pra
-   *  linha do header atravessar a tela inteira. Default: false (chrome clássico). */
-  flush?: boolean
-  children: ReactNode
-}
-
-export function AppShell({
-  sidebarHeader,
-  sidebarNav,
-  sidebarFooter,
-  rail,
-  mainDefaultSize = 62,
-  mainMinSize = 35,
-  railMinSize = 25,
-  className,
-  sidebarClassName,
-  collapsible = false,
-  collapsed: collapsedProp,
-  onCollapsedChange,
-  sidebarCollapsedClassName = 'w-14',
-  flush = false,
-  children,
-}: AppShellProps): React.ReactElement {
-  // Controlado quando `collapsed` vem de fora; senão o shell guarda sozinho.
-  const [internal, setInternal] = useState(false)
-  const isControlled = collapsedProp !== undefined
-  const collapsed = collapsible && (isControlled ? collapsedProp : internal)
-
-  const setCollapsed = useCallback(
-    (next: boolean) => {
-      if (!isControlled) setInternal(next)
-      onCollapsedChange?.(next)
-    },
-    [isControlled, onCollapsedChange],
-  )
-  const ctx = useMemo<AppShellContextValue>(
-    () => ({ collapsible, collapsed, setCollapsed, toggle: () => setCollapsed(!collapsed) }),
-    [collapsible, collapsed, setCollapsed],
-  )
-  const sidebarSlot = useMemo<SidebarSlotValue>(() => ({ collapsed: collapsible && collapsed }), [collapsible, collapsed])
-
-  const main = (
-    <div
-      data-slot="app-shell-main"
-      className={cn('flex h-full min-w-0 flex-1 flex-col', flush && 'border-l border-border')}
-    >
-      {children}
-    </div>
-  )
-  return (
-    <AppShellContext.Provider value={ctx}>
-      <div data-slot="app-shell" className={cn('flex h-screen', className)}>
-        <aside
-          data-slot="app-shell-sidebar"
-          // `data-collapsed` + grupo nomeado: o conteúdo do consumidor reage por CSS.
-          data-collapsed={collapsible ? String(collapsed) : undefined}
-          className={cn(
-            'group/sidebar flex shrink-0 flex-col',
-            collapsible && 'transition-[width] duration-200 ease-out',
-            'w-64',
-            flush ? 'p-0' : 'p-2',
-            sidebarClassName,
-            // DEPOIS do `sidebarClassName` de propósito: recolhido é ESTADO, não estilo
-            // default. Quem passa a própria largura (`sidebarClassName="w-72"`) manda no
-            // expandido, mas não pode impedir o aside de estreitar — senão o shell ficaria
-            // meio-recolhido (rótulo some, largura fica) sem erro nenhum.
-            collapsed && sidebarCollapsedClassName,
-          )}
-        >
-          <SidebarSlotContext.Provider value={sidebarSlot}>
-            {sidebarHeader}
-            <div data-slot="app-shell-nav" className="min-h-0 flex-1 overflow-y-auto">
-              {sidebarNav}
-            </div>
-            {sidebarFooter}
-          </SidebarSlotContext.Provider>
-        </aside>
-        {rail === undefined ? (
-          main
-        ) : (
-          <ResizablePanelGroup orientation="horizontal" className="min-w-0 flex-1">
-            <ResizablePanel defaultSize={mainDefaultSize} minSize={mainMinSize}>
-              {main}
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={100 - mainDefaultSize} minSize={railMinSize}>
-              <div data-slot="app-shell-rail" className="h-full">
-                {rail}
-              </div>
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        )}
-      </div>
-    </AppShellContext.Provider>
-  )
-}
-
-/**
- * <AppShellTrigger /> — recolhe/expande a sidebar. Some sozinho quando o shell não é
- * `collapsible`, então dá pra deixar fixo no layout sem condicional no consumidor.
- */
-export function AppShellTrigger({ className }: { className?: string }): React.ReactElement | null {
-  const { collapsible, collapsed, toggle } = useAppShell()
-  if (!collapsible) return null
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={toggle}
-      aria-label={collapsed ? 'Expandir a barra lateral' : 'Recolher a barra lateral'}
-      aria-expanded={!collapsed}
-      className={className}
-    >
-      <PanelLeft className={cn('transition-transform duration-200', collapsed && 'rotate-180')} />
-    </Button>
-  )
-}
-
-/**
- * <AppShellBar /> — a linha de header do chrome `flush`: faixa h-12 com `border-b`.
- * Use UMA na sidebar (a marca) e OUTRA no topo do conteúdo (breadcrumb/ações): as
- * alturas casam e as bordas emendam — uma régua contínua atravessando a tela.
- */
-export function AppShellBar({
-  className,
-  children,
-}: {
-  className?: string
-  children?: ReactNode
-}): React.ReactElement {
-  return (
-    <div
-      data-slot="app-shell-bar"
-      className={cn('flex h-12 shrink-0 items-center gap-2.5 border-b border-border px-4', className)}
-    >
-      {children}
-    </div>
-  )
-}

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

@@ -1,246 +0,0 @@
-/**
- * <SectionShell /> — o terceiro nível do chrome: uma SEÇÃO com navegação própria.
- *
- * O vocabulário de layout tinha dois níveis (AppShell → Page) e faltava o do meio:
- * seção que agrega N telas irmãs (Configurações, Relatórios, a doc) e quer a lista
- * DENTRO do conteúdo, não pendurada na sidebar do app. Sem isso, cada seção
- * redesenhava o mesmo casco `nav + painel` à mão — o DocBrowser, o site do Opus e o
- * back-office da Empresa X chegaram nas mesmas classes por três caminhos.
- *
- * A nav é `w-56` de propósito: mais estreita que o `w-64` do AppShell, pra hierarquia
- * ficar legível quando as duas aparecem lado a lado.
- *
- * Presentacional e CONTROLADO — mesma regra do AppShell: o shell é o quadro. Quem
- * escolhe o item ativo, o que fazer no clique e o que renderizar no painel é o
- * consumidor; roteamento (path, querystring, estado) fica de fora por decisão.
- */
-
-import type { ReactNode } from 'react'
-import { cn } from '../../lib/cn.ts'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../primitives/resizable.tsx'
-
-export interface SectionNavItem {
-  /** Coordenada estável do item — é o que volta em `onSelect` e casa com `activeId`.
-   *  Único em TODA a nav (não só no grupo): `activeId` casa por id, então id repetido
-   *  marca dois itens como atuais e o painel não remonta ao alternar entre eles. */
-  id: string
-  label: string
-  /** Ícone à esquerda do label. */
-  icon?: ReactNode
-  /** Selo curto à direita (contagem, `beta`, subpath do SDK…). */
-  badge?: ReactNode
-  /** Visível mas inerte — a tela existe no mapa e ainda não abre. */
-  disabled?: boolean
-}
-
-/** Sub-rótulo DENTRO de um grupo (o 3º nível: sub-pasta na doc, família num catálogo).
- *  Sai mais fraco e mais indentado que o rótulo do grupo. */
-export interface SectionNavSubgroup {
-  label?: string
-  items: SectionNavItem[]
-}
-
-export interface SectionNavGroup {
-  /** Cabeçalho do grupo. Ausente (ou vazio) = itens soltos, sem rótulo acima. */
-  label?: string
-  /** Itens direto no grupo. */
-  items?: SectionNavItem[]
-  /** Subgrupos rotulados, DEPOIS dos `items` soltos. A maioria das seções não precisa
-   *  — é o nível que a doc usa quando a pasta tem sub-pasta. */
-  subgroups?: SectionNavSubgroup[]
-}
-
-export interface SectionShellProps {
-  /** A navegação da seção: grupos (rotulados ou não) → itens. */
-  groups: SectionNavGroup[]
-  /** `id` do item ativo. Ausente = nenhum destacado (estado vazio, a cargo do consumidor). */
-  activeId?: string
-  onSelect: (id: string) => void
-  /** Topo da nav — título da seção, busca, botão de criar. */
-  navHeader?: ReactNode
-  /** Rodapé da nav, ancorado embaixo. */
-  navFooter?: ReactNode
-  /** Classes da raiz. Default: ocupa a altura disponível (`h-full`). */
-  className?: string
-  /** Classes da COLUNA da nav (o wrapper que empilha header + lista + rodapé), não da
-   *  `<nav>` de dentro. Default: `w-56 shrink-0 border-r`. */
-  navClassName?: string
-  /** Rótulo da landmark `<nav>` — o que o leitor de tela anuncia. Só importa de verdade
-   *  quando o app já tem outra nav na tela (a da sidebar): sem rótulo, as duas viram
-   *  "navigation" e não se distinguem. */
-  navLabel?: string
-  /** O que remonta o painel — e remontar é o que zera o scroll. Default: `activeId`
-   *  (trocar de tela volta ao topo, o esperado). Dois usos legítimos de sobrescrever:
-   *  uma chave CONSTANTE pra NUNCA remontar (a seção preserva o scroll ao trocar de
-   *  item), ou uma chave MAIS FINA que o `activeId` pra remontar também dentro da mesma
-   *  tela (ex.: `${activeId}/${recordId}` numa sub-rota que troca de registro). */
-  scrollResetKey?: string
-  /** Nav REDIMENSIONÁVEL pelo usuário (arrastar a divisa), como o `rail` do AppShell.
-   *  Opt-in: sem isto a nav é a coluna fixa `w-56` de sempre. Ligado, nav e painel viram
-   *  painéis (Resizable) e a largura passa a ser % — o `navClassName` de largura deixa
-   *  de valer (quem manda é `navDefaultSize`). */
-  resizable?: boolean
-  /** Largura inicial (%) da nav quando `resizable`. Default: 18 (≈ o w-56 num 1280). */
-  navDefaultSize?: number
-  /** Largura mínima (%) da nav quando `resizable`. Default: 12. */
-  navMinSize?: number
-  /** O painel: a tela do item ativo (em geral uma `<Page>`), ou o estado vazio. */
-  children: ReactNode
-}
-
-/** Rótulo só existe se tiver texto: vazio (ou só espaço) não vira cabeçalho fantasma —
- *  a normalização mora AQUI pra não se repetir em cada consumidor. */
-const titled = (label?: string): boolean => (label ?? '').trim() !== ''
-
-/** Idem pro selo: vazio viraria uma pílula com borda e sem texto. `false` é o caso que
- *  mais aparece — `badge={isBeta && 'beta'}` é idioma corrente. `0` CONTA (contagem
- *  legítima), então truthy não serve. */
-const shown = (badge: ReactNode): boolean => {
-  if (badge === undefined || badge === null || badge === false || badge === '') return false
-  if (typeof badge === 'number' && Number.isNaN(badge)) return false
-  return !(Array.isArray(badge) && badge.length === 0)
-}
-
-/** Subgrupo só conta se tiver item: `items: []` (uma busca sem match, p.ex.) sairia
- *  como sub-cabeçalho órfão. */
-const subFilled = (sub: SectionNavSubgroup): boolean => sub.items.length > 0
-
-/** Grupo sem NADA dentro (nem itens, nem subgrupo COM item) não vira `<div>` vazio: ele
- *  consumiria um degrau do `space-y-5` do pai e abriria um buraco na nav — ou pior,
- *  deixaria o rótulo do grupo pairando sobre nada. */
-const filled = (group: SectionNavGroup): boolean =>
-  (group.items?.length ?? 0) > 0 || (group.subgroups?.some(subFilled) ?? false)
-
-export function SectionShell({
-  groups,
-  activeId,
-  onSelect,
-  navHeader,
-  navFooter,
-  className,
-  navClassName,
-  navLabel = 'Navegação da seção',
-  scrollResetKey,
-  resizable = false,
-  navDefaultSize = 18,
-  navMinSize = 12,
-  children,
-}: SectionShellProps): React.ReactElement {
-  // `nested`: item de subgrupo ROTULADO — recua sob o rótulo da categoria, senão os três
-  // níveis (seção → categoria → página) sairiam todos na mesma margem.
-  const renderItem = (item: SectionNavItem, nested = false): React.ReactElement => {
-    const active = item.id === activeId
-    return (
-      <button
-        key={item.id}
-        type="button"
-        disabled={item.disabled}
-        // O destaque do ativo é visual; `aria-current` é o que o leitor de tela ouve —
-        // sem ele a nav é uma lista de botões indistintos.
-        aria-current={active ? 'page' : undefined}
-        onClick={() => onSelect(item.id)}
-        className={cn(
-          'flex w-full items-center gap-2 rounded-md py-1.5 pr-2.5 text-left text-sm transition-colors',
-          nested ? 'pl-6' : 'pl-4',
-          'disabled:pointer-events-none disabled:opacity-40',
-          active ? 'bg-muted font-medium text-foreground' : 'text-foreground/80 hover:bg-muted/60',
-        )}
-      >
-        {item.icon}
-        <span className="min-w-0 flex-1 truncate">{item.label}</span>
-        {shown(item.badge) && (
-          <span className="shrink-0 rounded border border-border/60 px-1 font-mono text-[10px] leading-tight text-muted-foreground/60">
-            {item.badge}
-          </span>
-        )}
-      </button>
-    )
-  }
-
-  // `div`, não `aside`: isto só empilha header/nav/rodapé. `aside` abriria uma landmark
-  // `complementary` anônima ao lado da `navigation` — ruído pro leitor de tela, já que a
-  // nav é quem carrega o sentido. Com `resizable`, a largura vem do painel (%), então a
-  // coluna perde o `w-56 shrink-0` e ocupa o painel inteiro.
-  const nav = (
-    <div
-      data-slot="section-shell-nav"
-      className={cn(
-        'flex flex-col border-r border-border',
-        resizable ? 'h-full min-w-0' : 'w-56 shrink-0',
-        navClassName,
-      )}
-    >
-        {navHeader}
-        <nav aria-label={navLabel} className="min-h-0 flex-1 space-y-5 overflow-y-auto px-3 py-5">
-          {/* Chave = POSIÇÃO. Rótulo não serve: ele é opcional e repetível (o catálogo
-              da doc tem DUAS seções com label vazio), e chave duplicada é reconciliação
-              indefinida. Aqui posição é estável e o conteúdo não guarda estado — os
-              botões têm chave própria (o id do item). */}
-          {groups.map((group, gi) =>
-            !filled(group) ? null : (
-              <div key={gi} className="space-y-0.5">
-                {titled(group.label) && (
-                  <div className="px-2.5 pb-1 text-xs font-semibold tracking-tight text-foreground/80">
-                    {group.label}
-                  </div>
-                )}
-                {group.items?.map((item) => renderItem(item))}
-                {group.subgroups?.map((sub, si) =>
-                  !subFilled(sub) ? null : (
-                    <div key={si} className="space-y-0.5">
-                      {titled(sub.label) && (
-                        <div className="pb-0.5 pl-4 pr-2.5 pt-1.5 text-[11px] font-medium text-muted-foreground/50">
-                          {sub.label}
-                        </div>
-                      )}
-                      {sub.items.map((item) => renderItem(item, titled(sub.label)))}
-                    </div>
-                  ),
-                )}
-              </div>
-            ),
-          )}
-      </nav>
-      {navFooter}
-    </div>
-  )
-
-  // key: trocar de tela remonta o painel — é o que zera o scroll (senão a tela nova abre
-  // na altura em que a anterior estava).
-  const main = (
-    <div
-      key={scrollResetKey ?? activeId}
-      data-slot="section-shell-main"
-      className={cn('min-h-0 overflow-y-auto', resizable ? 'h-full' : 'flex-1')}
-    >
-      {children}
-    </div>
-  )
-
-  // Redimensionável: nav e painel viram painéis com divisa arrastável — o mesmo
-  // mecanismo do `rail` do AppShell, agora no terceiro nível do chrome.
-  if (resizable) {
-    return (
-      <ResizablePanelGroup
-        orientation="horizontal"
-        data-slot="section-shell"
-        className={cn('h-full min-h-0', className)}
-      >
-        <ResizablePanel defaultSize={navDefaultSize} minSize={navMinSize}>
-          {nav}
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize={100 - navDefaultSize} minSize={30}>
-          {main}
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    )
-  }
-
-  return (
-    <div data-slot="section-shell" className={cn('flex h-full min-h-0', className)}>
-      {nav}
-      {main}
-    </div>
-  )
-}