@softize/opus 9.1.1 → 11.0.0

package/src/ui/components/primitives/menu.tsx

@@ -45,7 +45,7 @@ function MenuContent({
         data-slot="menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-popover border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className
         )}
         {...props}
@@ -233,7 +233,7 @@ function MenuSubContent({
     <MenuPrimitive.SubContent
       data-slot="menu-sub-content"
       className={cn(
-        "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-popover border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[10rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md will-change-[transform,opacity] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}

package/src/ui/components/primitives/popover.tsx

@@ -34,7 +34,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-popover border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className
         )}
         {...props}

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/card.md

@@ -1,6 +1,6 @@
 ## Box simples
 
-O uso mais comum: a superfície de conteúdo em repouso (`rounded-card` + `border` + `shadow-sm` — ver Tokens & Tema → Escala de elevação) com o padding pelo `className`. O Card não força flex/gap/padding — você compõe o miolo (sem brigar com `space-y`/`flex` seu).
+O uso mais comum: a superfície de conteúdo em repouso (`rounded-xl` + `border`), flat por padrão, com o padding pelo `className`. O Card não força flex/gap/padding — você compõe o miolo (sem brigar com `space-y`/`flex` seu). Quando a hierarquia realmente pedir elevação, declare a intensidade explicitamente, por exemplo `className="shadow-sm"`.
 
 ```tsx preview col
 <Card className="p-4">

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

@@ -1,6 +1,6 @@
 ## Básico
 
-A caixa de escrever da casa: textarea numa pílula elevada (`rounded-card` + `border` + `shadow-sm`), **Enter** envia / **Shift+Enter** quebra linha, enviar dentro. É o composer do [Chat](/components/chat) extraído — use SOZINHO quando há entrada de texto mas não um chat (ex.: criar uma sessão). Controlado: o dono do texto é você. Os callbacks opcionais `onHistoryPrevious` e `onHistoryNext` permitem que esse dono consuma **↑/↓**; sem eles, as setas mantêm o comportamento nativo da textarea.
+A caixa de escrever da casa: textarea numa pílula elevada (`rounded-xl` + `border` + `shadow-sm`), **Enter** envia / **Shift+Enter** quebra linha, enviar dentro. É o composer do [Chat](/components/chat) extraído — use SOZINHO quando há entrada de texto mas não um chat (ex.: criar uma sessão). Controlado: o dono do texto é você. Os callbacks opcionais `onHistoryPrevious` e `onHistoryNext` permitem que esse dono consuma **↑/↓**; sem eles, as setas mantêm o comportamento nativo da textarea.
 
 ```tsx preview col
 const [text, setText] = React.useState('')

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/content/tokens.md

@@ -87,7 +87,7 @@ render(
     {LEVELS.map(([level, desc]) => (
       <div key={level} className="flex flex-col items-center gap-3">
         <div
-          className={'flex h-24 w-40 items-center justify-center rounded-card border border-border bg-card text-xs shadow-' + level}
+          className={'flex h-24 w-40 items-center justify-center rounded-xl border border-border bg-card text-xs text-card-foreground shadow-' + level}
         >
           Texto
         </div>
@@ -110,9 +110,9 @@ render(
 ## Radius
 
 > Escala mapeada no `@theme inline` preservando o sentido pré-v4 dos utilitários `rounded-*`
-> (neutraliza o rename do Tailwind v4). E a forma também tem papel: `rounded-card/popover/dialog`
-> são a forma das superfícies elevadas (separada da intensidade de `shadow-*`), derivados de `--radius` — a
-> identidade por app escala tudo junto. Controles (botões, inputs) seguem na escala sm–xl.
+> (neutraliza o rename do Tailwind v4). Componentes e superfícies usam diretamente essa
+> escala: a forma não cria uma segunda taxonomia por componente. A identidade por app
+> sobrescreve `--radius` e escala tudo junto.
 
 ```tsx preview
 render(
@@ -122,9 +122,6 @@ render(
       ['rounded-md', 'radius − 2px'],
       ['rounded-lg', 'radius (0.625rem)'],
       ['rounded-xl', 'radius + 4px'],
-      ['rounded-popover', 'papel popover (radius − 2px)'],
-      ['rounded-dialog', 'papel dialog (radius + 6px)'],
-      ['rounded-card', 'papel card (radius + 6px)'],
     ].map(([cls, calc]) => (
       <div key={cls} className="flex items-center gap-3">
         <div className={'h-12 w-12 border-2 border-foreground/30 bg-muted ' + cls} />

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

@@ -39,7 +39,7 @@ export const componentMeta = {
     name: 'card',
     ancestry: 'shadcn',
     whenToUse:
-      'Superfície da casa (bg-card + borda + rounded-lg, flat). Box simples: `<Card className="p-4">…</Card>`. Estruturado: Card > CardHeader(CardTitle/CardDescription) + CardContent + CardFooter — o padding mora nos slots (como o Dialog). Divergência declarada vs shadcn: rounded-lg, sem shadow, sem flex/gap forçados (o upstream brigava com card-box simples).',
+      'Superfície da casa (bg-card + text-card-foreground + borda + rounded-xl, flat). Box simples: `<Card className="p-4">…</Card>`. Estruturado: Card > CardHeader(CardTitle/CardDescription) + CardContent + CardFooter — o padding mora nos slots (como o Dialog). Divergência declarada vs shadcn: sem shadow e sem flex/gap forçados (o upstream brigava com card-box simples).',
   },
   'chat': {
     name: 'chat',
@@ -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'
 

package/src/ui/theme.css

@@ -137,13 +137,6 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 
-  /* Forma por papel (rounded-card/popover/dialog), separada da intensidade de elevação.
-     Derivados de --radius: a identidade por app (sobrescrever --radius) escala os papéis
-     junto. Controles ficam na escala sm–xl. */
-  --radius-card: calc(var(--radius) + 6px);
-  --radius-popover: calc(var(--radius) - 2px);
-  --radius-dialog: calc(var(--radius) + 6px);
-
   /* Escala Tailwind, com receita direta para o compilador preservar modifiers `/opacity`.
      `light-dark()` mantém o peso adequado em cada tema sem uma variável intermediária. */
   --shadow-2xs: 0 1px 2px -1px light-dark(rgb(15 15 15 / 0.03), rgb(0 0 0 / 0.12));

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.