@softize/opus 9.1.1 → 11.0.0

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>
-  )
-}

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

@@ -1,155 +0,0 @@
-## Chrome da aplicação
-
-O esqueleto que todo app da casa repete: sidebar de navegação à esquerda (header, nav rolável, rodapé ancorado) e o conteúdo. É o quadro — o que vai em cada slot (a marca, o seletor de contexto, o nav do app) é do consumidor. Pro esqueleto de *uma página* (título, descrição, ação), use o `Page` dentro do conteúdo.
-
-```tsx preview col
-render(
-  <div className="w-full overflow-hidden rounded-lg border border-border">
-    <AppShell
-      className="h-96"
-      sidebarHeader={<div className="px-2.5 py-2 text-sm font-semibold">◆ Acme</div>}
-      sidebarNav={
-        <nav className="space-y-1 pt-2">
-          {['Clientes', 'Workspaces', 'Agentes'].map((item, index) => (
-            <button
-              key={item}
-              type="button"
-              className={
-                'flex w-full items-center rounded-md px-2.5 py-1.5 text-left text-sm transition-colors hover:bg-muted/60 ' +
-                (index === 0 ? 'bg-muted' : 'text-foreground/80')
-              }
-            >
-              {item}
-            </button>
-          ))}
-        </nav>
-      }
-      sidebarFooter={<div className="px-2.5 py-2 text-xs text-muted-foreground">ana@acme.com</div>}
-    >
-      <div className="m-4 flex-1 rounded-lg border border-dashed border-border p-10 text-center text-sm text-muted-foreground">
-        O conteúdo (em geral um Page).
-      </div>
-    </AppShell>
-  </div>,
-)
-```
-
-## Recolher a sidebar
-
-`collapsible` é **opt-in** — sem ele o shell é o de sempre. O shell controla a **largura** e publica o estado; **o que some é decisão do conteúdo**, porque o `sidebarNav` é seu. Em vez de te obrigar a gerenciar estado, o aside expõe `data-collapsed` e o grupo `sidebar`: o rótulo some por CSS.
-
-```
-<span className="group-data-[collapsed=true]/sidebar:hidden">Clientes</span>
-```
-
-O botão é o `<AppShellTrigger />`, que **você** posiciona (numa `AppShellBar`, no header do conteúdo…) — ele some sozinho quando o shell não é `collapsible`, então não precisa de condicional. Pra ler o estado em JS, `useAppShell()`. Pra persistir a preferência, controle de fora com `collapsed` + `onCollapsedChange`; `sidebarCollapsedClassName` ajusta a largura recolhida (default `w-14`).
-
-Se você passa a própria largura em `sidebarClassName`, ela vale no **expandido**: no recolhido quem vence é a largura do recolhido — recolher é estado, não estilo default, e o contrário deixaria o aside meio-recolhido (rótulo some, largura fica).
-
-```tsx preview col
-render(
-  <div className="w-full overflow-hidden rounded-lg border border-border">
-    <AppShell
-      collapsible
-      className="h-96"
-      sidebarHeader={
-        <div className="flex h-12 items-center gap-2 border-b border-border px-2.5">
-          <AppShellTrigger />
-          <span className="text-sm font-semibold group-data-[collapsed=true]/sidebar:hidden">◆ Acme</span>
-        </div>
-      }
-      sidebarNav={
-        <nav className="space-y-1 pt-2">
-          {[
-            { label: 'Clientes', icon: '👤' },
-            { label: 'Workspaces', icon: '▦' },
-            { label: 'Agentes', icon: '✦' },
-          ].map((item, index) => (
-            <button
-              key={item.label}
-              type="button"
-              title={item.label}
-              className={
-                'flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors hover:bg-muted/60 ' +
-                (index === 0 ? 'bg-muted' : 'text-foreground/80')
-              }
-            >
-              <span className="shrink-0">{item.icon}</span>
-              <span className="truncate group-data-[collapsed=true]/sidebar:hidden">{item.label}</span>
-            </button>
-          ))}
-        </nav>
-      }
-    >
-      <div className="m-4 flex-1 rounded-lg border border-dashed border-border p-10 text-center text-sm text-muted-foreground">
-        Clique no botão da sidebar pra recolher.
-      </div>
-    </AppShell>
-  </div>,
-)
-```
-
-## Com rail à direita
-
-`rail` liga o terceiro painel — o lugar do chat de agente ou de um inspetor. Conteúdo e rail viram painéis redimensionáveis (arraste a divisória); `mainDefaultSize`/`mainMinSize`/`railMinSize` (em %) calibram a partilha.
-
-```tsx preview col
-render(
-  <div className="w-full overflow-hidden rounded-lg border border-border">
-    <AppShell
-      className="h-96"
-      sidebarHeader={<div className="px-2.5 py-2 text-sm font-semibold">◆ Acme</div>}
-      sidebarNav={
-        <nav className="space-y-1 pt-2">
-          <button type="button" className="flex w-full items-center rounded-md bg-muted px-2.5 py-1.5 text-left text-sm">
-            Painel comercial
-          </button>
-        </nav>
-      }
-      rail={
-        <div className="flex h-full flex-col border-l bg-background">
-          <div className="border-b px-3 py-2 text-xs text-muted-foreground">Conversa</div>
-          <div className="flex-1 p-3 text-sm text-muted-foreground">O chat do agente vive aqui.</div>
-        </div>
-      }
-    >
-      <div className="m-4 flex-1 rounded-lg border border-dashed border-border p-10 text-center text-sm text-muted-foreground">
-        O conteúdo (preview, tabela, página).
-      </div>
-    </AppShell>
-  </div>,
-)
-```
-
-O shell não impõe fundo nem borda aos slots — ele é TRANSPARENTE: o canvas (cinza clarinho) vem do `body` (theme.css) e a sidebar o herda; um rail tipicamente traz `border-l bg-background`, como acima.
-
-## Chrome flush (linha de header contínua)
-
-`flush` tira o inset: a sidebar perde o padding do shell e o conteúdo vira full-bleed
-apartado por um filete à esquerda — o shell NÃO pinta fundo (o canvas do body aparece);
-superfície branca é decisão do conteúdo (`bg-background` no seu contêiner). Combine com `AppShellBar` — a faixa h-12 com `border-b` —
-uma na sidebar (a marca) e outra no topo do conteúdo (breadcrumb/ações): as alturas
-casam e a linha do header atravessa a tela inteira.
-
-```tsx preview col lg
-render(
-  <AppShell
-    className="h-96 rounded-lg border"
-    flush
-    sidebarHeader={
-      <AppShellBar>
-        <span className="grid h-6 w-6 place-items-center rounded-md bg-primary/10 text-sm text-primary">◆</span>
-        <span className="text-sm font-semibold tracking-tight">Grupo Vetra</span>
-      </AppShellBar>
-    }
-    sidebarNav={<nav className="p-2 text-sm text-muted-foreground">Relatórios…</nav>}
-  >
-    <AppShellBar>
-      <span className="text-muted-foreground">Vetra BI</span>
-      <span className="text-muted-foreground/40">›</span>
-      <span className="text-sm font-medium">Painel comercial</span>
-    </AppShellBar>
-    <div className="p-4 text-sm text-muted-foreground">Conteúdo full-bleed.</div>
-  </AppShell>,
-)
-```