@softize/opus 9.1.1 → 11.0.0

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

@@ -1,86 +0,0 @@
-## Horizontal
-
-ResizablePanelGroup envolve os painéis e o ResizableHandle entre eles. O grupo ocupa a altura do pai (h-full), então dê um tamanho ao container.
-
-```tsx preview col
-<div className="h-48 rounded-md border">
-  <ResizablePanelGroup orientation="horizontal">
-    <ResizablePanel defaultSize={35}>
-      <div className="flex h-full items-center justify-center p-4 text-sm">
-        Árvore do repositório
-      </div>
-    </ResizablePanel>
-    <ResizableHandle />
-    <ResizablePanel defaultSize={65}>
-      <div className="flex h-full items-center justify-center p-4 text-sm">
-        Diff da sessão
-      </div>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-</div>
-```
-
-## Com alça visível
-
-withHandle no ResizableHandle desenha a pega central — facilita acertar o arraste quando a divisória precisa ficar óbvia.
-
-```tsx preview col
-<div className="h-48 rounded-md border">
-  <ResizablePanelGroup orientation="horizontal">
-    <ResizablePanel defaultSize={40} minSize={20}>
-      <div className="flex h-full items-center justify-center p-4 text-sm">
-        Painel do agente developer
-      </div>
-    </ResizablePanel>
-    <ResizableHandle withHandle />
-    <ResizablePanel defaultSize={60} minSize={20}>
-      <div className="flex h-full items-center justify-center p-4 text-sm">
-        Preview do worktree
-      </div>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-</div>
-```
-
-## Aninhado
-
-Um ResizablePanelGroup dentro de um painel cruza as direções: orientation=vertical empilha os painéis e a alça vira horizontal.
-
-```tsx preview col
-<div className="h-64 rounded-md border">
-  <ResizablePanelGroup orientation="horizontal">
-    <ResizablePanel defaultSize={30}>
-      <div className="flex h-full items-center justify-center p-4 text-sm">
-        Workspace Empresa X
-      </div>
-    </ResizablePanel>
-    <ResizableHandle withHandle />
-    <ResizablePanel defaultSize={70}>
-      <ResizablePanelGroup orientation="vertical">
-        <ResizablePanel defaultSize={60}>
-          <div className="flex h-full items-center justify-center p-4 text-sm">
-            Chat do reviewer
-          </div>
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={40}>
-          <div className="flex h-full items-center justify-center p-4 text-sm">
-            Saída do opus check
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </ResizablePanel>
-  </ResizablePanelGroup>
-</div>
-```
-
-## Props
-
-| Prop | Tipo | Default | Descrição |
-|---|---|---|---|
-| `orientation (ResizablePanelGroup)` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direção do arraste — horizontal vira colunas, vertical empilha em linhas. |
-| `defaultSize (ResizablePanel)` | `number \| string` | | Tamanho inicial do painel, em porcentagem do grupo. |
-| `minSize (ResizablePanel)` | `number \| string` | | Tamanho mínimo até onde o painel encolhe no arraste. |
-| `maxSize (ResizablePanel)` | `number \| string` | | Tamanho máximo até onde o painel cresce no arraste. |
-| `collapsible (ResizablePanel)` | `boolean` | `false` | Deixa o painel colapsar ao ser arrastado abaixo do minSize. |
-| `withHandle (ResizableHandle)` | `boolean` | `false` | Desenha a pega central na divisória — torna o ponto de arraste visível. |

package/src/ui/docs/content/section-shell.md

@@ -1,121 +0,0 @@
-## Seção com navegação própria
-
-O nível do meio do chrome. O `AppShell` é o quadro do app e o `Page` é o esqueleto de **uma** tela; entre os dois falta a **seção**: um grupo de telas irmãs (Configurações, Relatórios, a doc) que quer a lista **dentro** do conteúdo, não pendurada na sidebar do app.
-
-A nav é `w-56` — mais estreita que o `w-64` do `AppShell` de propósito, pra hierarquia ficar legível quando as duas aparecem lado a lado.
-
-```tsx preview col
-render(
-  <div className="h-96 w-full overflow-hidden rounded-lg border border-border">
-    <SectionShell
-      groups={[
-        { label: 'Acesso', items: [{ id: 'users', label: 'Usuários' }, { id: 'roles', label: 'Perfis' }] },
-        { label: 'Cadastros', items: [{ id: 'units', label: 'Unidades' }, { id: 'departments', label: 'Departamentos' }] },
-        { items: [{ id: 'audit', label: 'Auditoria' }, { id: 'integrations', label: 'Integrações', disabled: true }] },
-      ]}
-      activeId="users"
-      onSelect={() => {}}
-    >
-      <Page title="Usuários" description="As contas do IdP.">
-        <div className="rounded-lg border border-dashed border-border p-10 text-center text-sm text-muted-foreground">
-          A tela do item ativo (em geral um Page).
-        </div>
-      </Page>
-    </SectionShell>
-  </div>,
-)
-```
-
-## Quando usar — sidebar, tabs ou seção
-
-A regra da casa, pra não virar gosto pessoal:
-
-- **Sidebar do app** (`AppShell`) — os **contextos de negócio**, o mapa que a pessoa carrega na cabeça o dia todo. Custa caro: cada item aqui compete com todos os outros.
-- **`SectionShell`** — as telas de uma seção que a pessoa **visita raro e navega por dentro** quando visita. Configurações é o caso canônico: nenhum admin quer 6 itens de config disputando espaço com Vendas e Estoque. Também é a escolha quando a lista é **dinâmica** (relatórios, documentos) e não cabe num nav estático.
-- **Tabs** — quando são **facetas do mesmo objeto** (a mesma entidade vista de ângulos diferentes), não telas distintas. Se cada aba tem URL própria e faz sentido dar deep-link, provavelmente é seção, não aba.
-
-Sintoma de que uma seção devia sair da sidebar: o item de topo **não tem tela própria** e só existe pra abrir um accordion. Isso é um nó de menu, não um destino — e cobra o preço de um destino.
-
-## Roteamento fica de fora
-
-O componente é **controlado**: `activeId` + `onSelect`. Ele não lê nem escreve URL — quem roteia é o app, com o mecanismo que já usa (path, querystring, estado). Mesma decisão do `AppShell`: o shell é o quadro, não o conteúdo.
-
-O padrão comum é casar `activeId` com um segmento do path e navegar no `onSelect`:
-
-```tsx
-<SectionShell
-  groups={groups}
-  activeId={segments[1]}                          // /settings/users → 'users'
-  onSelect={(id) => navigate(`/settings/${id}`)}
->
-  {screen}
-</SectionShell>
-```
-
-## O painel remonta na troca
-
-Trocar de item **remonta** o painel — é isso que zera o scroll (sem o remount, a tela nova abre na altura em que a anterior estava). É o detalhe que toda cópia à mão esquecia.
-
-A chave do remount é o `activeId`. `scrollResetKey` sobrescreve, e há dois usos legítimos — em direções opostas:
-
-```tsx
-// NUNCA remontar: a seção preserva o scroll ao trocar de item (chave constante).
-<SectionShell activeId={id} scrollResetKey="fixa" …>
-
-// Remontar MAIS: também dentro da mesma tela, quando a sub-rota troca de registro.
-<SectionShell activeId={id} scrollResetKey={`${id}/${recordId}`} …>
-```
-
-Passar `scrollResetKey={id}` com o mesmo valor do `activeId` é o default escrito à mão — não faz nada.
-
-## Nav redimensionável
-
-`resizable` põe uma divisa arrastável entre a nav e o painel — o mesmo mecanismo do `rail` do AppShell, agora no terceiro nível do chrome. Útil quando os rótulos da nav variam de tamanho (nome de sessão, de arquivo) e o `w-56` fixo ora aperta, ora sobra. Ligado, a largura passa a ser % (`navDefaultSize`/`navMinSize`); desligado, segue a coluna fixa de sempre.
-
-```tsx preview
-<div className="h-64 overflow-hidden rounded-md border">
-  <SectionShell
-    resizable
-    navDefaultSize={30}
-    groups={[{ items: [{ id: 'acoes', label: 'Ações' }, { id: 'entidades', label: 'Entidades' }] }]}
-    activeId="acoes"
-    onSelect={() => {}}
-  >
-    <div className="p-4 text-sm text-muted-foreground">Arraste a divisa à esquerda.</div>
-  </SectionShell>
-</div>
-```
-
-## Três níveis, quando precisar
-
-A maioria das seções é lista simples (`items` no grupo). Quando um grupo tem famílias internas — sub-pasta na doc, por exemplo — use `subgroups`: eles saem **depois** dos `items` soltos, com rótulo mais fraco e mais indentado.
-
-```tsx
-groups={[
-  {
-    label: 'Guias',
-    items: [{ id: 'deploy', label: 'Deploy' }],           // solto na seção
-    subgroups: [{ label: 'CI', items: [{ id: 'build', label: 'Build' }] }],
-  },
-]}
-```
-
-Rótulo vazio (`''`) conta como ausente — quem monta a lista a partir de dados não precisa normalizar antes.
-
-## Props
-
-| Prop | Tipo | O que faz |
-|---|---|---|
-| `groups` | `SectionNavGroup[]` | A nav: grupos (`label` opcional) → `items` e/ou `subgroups`. |
-| `activeId` | `string` | O item destacado (ganha `aria-current="page"`). Ausente = nenhum. |
-| `onSelect` | `(id: string) => void` | Clique no item. |
-| `navHeader` / `navFooter` | `ReactNode` | Topo e rodapé da nav (título da seção, busca, botão de criar). |
-| `navLabel` | `string` | Rótulo da landmark `<nav>`. Default: `Navegação da seção`. |
-| `scrollResetKey` | `string` | O que remonta o painel. Default: `activeId`. |
-| `resizable` | `boolean` | Nav arrastável pelo usuário (mesma divisa do `rail` do AppShell). Default: `false` — a nav é a coluna fixa `w-56`. |
-| `navDefaultSize` / `navMinSize` | `number` | Largura inicial e mínima da nav em %, quando `resizable`. Default: `18` e `12`. |
-| `className` / `navClassName` | `string` | Classes da raiz e da COLUNA da nav (o wrapper, não a `<nav>` de dentro). Com `resizable`, largura em `navClassName` não vale — quem manda é `navDefaultSize`. |
-
-Cada `SectionNavItem` tem `id`, `label` e, opcionais, `icon`, `badge` e `disabled` (visível mas inerte — a tela existe no mapa e ainda não abre).
-
-O `id` precisa ser único em **toda** a nav, não só dentro do grupo: o `activeId` casa por id, então id repetido marca dois itens como atuais e o painel não remonta ao alternar entre eles.