@snksergio/design-system 0.65.0 → 0.66.0

package/dist-lib/ai/componentes/AppShell.md

@@ -2,7 +2,7 @@
 
 <!-- ds:regras
 - tem áreas separadas (Comercial, Financeiro…)? → `sidebar="menu"` + `contexts`. Não tem? → `"single"` + `categories`, sem `sidebarModules` nem `sidebarShowSearch`
-- **exceção: o app tem ESCOPO global** (empresa/unidade que recorta TODAS as páginas)? → `sidebarModule` (seletor, não troca menu) + `sidebarShowSearch` + `sidebarSearchCommand` (a paleta vira a seleção das unidades). NÃO é `sidebarModules`: aquele troca as `categories`
+- **exceção: o app tem ESCOPO global** (empresa/unidade que recorta TODAS as páginas)? → `sidebarModule` (seletor, não troca menu) + `sidebarTopSlot` (o multi-select das unidades, montado por você). NÃO é `sidebarModules` (troca as `categories`) nem `sidebarSearchCommand` (aquele é a paleta da BUSCA)
 - NÃO passe `sidebarLogo`: o default é a marca iGreen. Só com marca própria pedida explicitamente
 - `sidebarTitle` = nome do projeto (vai à direita da logo) — pergunte, não invente
 -->
@@ -69,14 +69,19 @@ sem erro nenhum.
 | `sidebarModule` | SingleMenuModule | — | **Seletor de ESCOPO** (empresa, workspace, unidade): ícone + título + subtítulo e, com `options`, dropdown. **Não troca o menu** — é a diferença com o plural acima. Use quando o menu é o mesmo em todas as opções; o plural, quando cada uma tem o seu. Passar os dois é erro: o seletor é um só |
 | `sidebarShowSearch` | boolean | — | Busca no topo da sidebar (é um botão que abre command palette, não um input) |
 | `sidebarSearchPlaceholder` | string | — | Placeholder da busca **da sidebar** — distinto do `searchPlaceholder`, que é do Header |
-| `sidebarSearchCommand` | ReactNode | itens do menu | Conteúdo do `CommandList` da paleta da busca. Com ele o campo deixa de ser busca de menu e vira **seleção de escopo** (locais, filiais, safras). Exige `sidebarShowSearch`; pareie com `sidebarSearchPlaceholder` pra renomear o gatilho |
+| `sidebarSearchCommand` | ReactNode | itens do menu | Conteúdo do `CommandList` da paleta da busca **da sidebar**. Troca a lista de itens do menu por outra lista **de busca**. Exige `sidebarShowSearch`. ⛔ **Não é o lugar de um controle de escopo** — pra isso é `sidebarTopSlot` |
+| `sidebarTopSlot` | ReactNode | — | **Slot livre no topo da sidebar**, entre o seletor de módulo e a busca. É aqui que vai controle de **escopo** que não é seletor único nem busca: multi-select de unidades, filtro de safra, período global. Você monta o controle; o shell reserva o lugar |
 
-> **`sidebarModule` + `sidebarSearchCommand` = escopo global sem componente novo.** É o
-> padrão "empresa no seletor, unidades na paleta" de CMS multi-tenant: o topo da sidebar
-> vira o recorte que todas as páginas obedecem. As duas props existiam no
-> `SingleMenuSidebar` desde sempre e **não eram repassadas** pelo shell até 2026-09-16 —
-> quem precisava era empurrado pro `sidebarModules` com N entradas de categorias
-> idênticas, que funciona por acidente. Gate: `sidebar-single-escopo.test.tsx`.
+> **`sidebarModule` + `sidebarTopSlot` = escopo global sem componente novo.** É o padrão
+> "empresa no seletor, unidades logo abaixo" de CMS multi-tenant: o topo da sidebar vira o
+> recorte que todas as páginas obedecem, encostado na navegação que ele recorta.
+>
+> ⚠️ **A primeira versão disto usou `sidebarSearchCommand` e ficou ruim.** O gatilho da
+> busca é um botão com lupa e badge `⌘K`, sem prop pra esconder nenhum dos dois: o controle
+> de escopo se apresentava como busca, e o rodapé "Selecionar todas / Limpar" rolava junto
+> com a lista (ele vive dentro do `CommandList`, que É a área de scroll). **Busca é busca.**
+> Conteúdo arbitrário pede slot arbitrário — daí o `sidebarTopSlot` (2026-09-16).
+> Gate: `sidebar-single-escopo.test.tsx`.
 | `defaultActiveContextId` | string | primeiro do array | Workspace inicial (uncontrolled) |
 | `activeContextId` | string | — | Workspace ativo (controlled) |
 | `onContextChange` | (id: string) => void | — | Callback de troca de workspace |

package/dist-lib/ai/componentes/SingleMenuSidebar.md

@@ -4,6 +4,7 @@
 - NÃO passe `logo`: o default é a marca iGreen. Só com marca própria pedida explicitamente
 - `title` = nome do projeto (vai à direita da logo) — pergunte, não invente
 - é a escolha quando NÃO há divisão em áreas: `showSearch={false}`, sem `module`/`modules`
+- controle de ESCOPO no topo (multi-select de unidades, filtro de safra, período global)? → `topSlot`. NUNCA `searchCommand`: busca é busca
 -->
 
 **O que é** — Sidebar de navegação de **nível único**: categoria → sub-itens em
@@ -43,6 +44,7 @@ exibido à direita dela.
 | `showSearch`                    | `boolean`                     | `true`  |             |
 | `searchCommand`                 | `ReactNode`                   | —       |             |
 | `searchPlaceholder`             | `string`                      | —       |             |
+| `topSlot`                       | `ReactNode`                   | —       | slot livre entre o módulo e a busca |
 | `activeItemId`                  | `string`                      | —       |             |
 | `onItemClick`                   | `(id: string) => void`        | —       |             |
 | `defaultExpanded`               | `boolean`                     | `true`  |             |
@@ -55,6 +57,31 @@ abre um `CommandDialog`: você passa o **conteúdo** dele em `searchCommand` e,
 texto do placeholder em `searchPlaceholder`. As props `value`/`onChange`/`inputRef` existem
 em `SingleMenuSearchProps`, que é subcomponente interno.
 
+### `topSlot` — escopo no topo, e por que não é a busca
+
+O bloco do topo tem três lugares, nesta ordem: **seletor de módulo → `topSlot` → busca**.
+
+`topSlot` é um slot livre. Ponha ali o controle que responde *"sobre o que estou olhando"*
+e não é um seletor único: multi-select de unidades/filiais, filtro de safra, período global.
+Você monta o controle com os componentes que quiser — o componente só reserva o lugar.
+
+```tsx
+<SingleMenuSidebar
+  title="iGreen MOB"
+  module={{ icon: <Building2 />, title: empresa, subtitle: "Empresa selecionada" }}
+  topSlot={<SeletorDeLocais valor={locais} onChange={setLocais} />}
+  showSearch={false}
+  categories={CATEGORIAS}
+/>
+```
+
+⛔ **Não use `searchCommand` pra isso.** Aquele troca o conteúdo da paleta da **busca**, e o
+gatilho dela é um `<button>` fixo com lupa e badge `⌘K` — sem prop pra esconder nenhum dos
+dois. Um controle de escopo ali **se apresenta como busca**, e um rodapé de ações ("Selecionar
+todas" / "Limpar") rola junto com a lista, porque ele vive dentro do `CommandList`, que É a
+área de scroll. Medido num consumidor real em 2026-09-16: foi esse desvio que originou o
+`topSlot`. Gate: `AppShell/sidebar-single-escopo.test.tsx`.
+
 ### Multi-módulo
 
 `modules` é a API pra sidebar que troca de contexto: cada `SingleMenuModuleConfig` traz suas

package/dist-lib/ai/manifest.json

@@ -1,7 +1,7 @@
 {
   "pacote": "@snksergio/design-system",
-  "versao": "0.65.0",
-  "commit": "956f38c",
+  "versao": "0.66.0",
+  "commit": "e85efd7",
   "gerado": "2026-09-16",
   "conteudo": {
     "roteiros": [

package/dist-lib/ai/regras-por-componente.json

@@ -1,7 +1,7 @@
 {
   "AppShell": [
     "tem áreas separadas (Comercial, Financeiro…)? → `sidebar=\"menu\"` + `contexts`. Não tem? → `\"single\"` + `categories`, sem `sidebarModules` nem `sidebarShowSearch`",
-    "**exceção: o app tem ESCOPO global** (empresa/unidade que recorta TODAS as páginas)? → `sidebarModule` (seletor, não troca menu) + `sidebarShowSearch` + `sidebarSearchCommand` (a paleta vira a seleção das unidades). NÃO é `sidebarModules`: aquele troca as `categories`",
+    "**exceção: o app tem ESCOPO global** (empresa/unidade que recorta TODAS as páginas)? → `sidebarModule` (seletor, não troca menu) + `sidebarTopSlot` (o multi-select das unidades, montado por você). NÃO é `sidebarModules` (troca as `categories`) nem `sidebarSearchCommand` (aquele é a paleta da BUSCA)",
     "NÃO passe `sidebarLogo`: o default é a marca iGreen. Só com marca própria pedida explicitamente",
     "`sidebarTitle` = nome do projeto (vai à direita da logo) — pergunte, não invente"
   ],
@@ -69,7 +69,8 @@
   "SingleMenuSidebar": [
     "NÃO passe `logo`: o default é a marca iGreen. Só com marca própria pedida explicitamente",
     "`title` = nome do projeto (vai à direita da logo) — pergunte, não invente",
-    "é a escolha quando NÃO há divisão em áreas: `showSearch={false}`, sem `module`/`modules`"
+    "é a escolha quando NÃO há divisão em áreas: `showSearch={false}`, sem `module`/`modules`",
+    "controle de ESCOPO no topo (multi-select de unidades, filtro de safra, período global)? → `topSlot`. NUNCA `searchCommand`: busca é busca"
   ],
   "TabsNavigation": [
     "aba de NAVEGADOR (sessão que abre/fecha: conversa, chamado, registro) → `<TabsNavigation>`; filtro de conteúdo dentro da tela → `tabs` do shadcn",

package/dist-lib/ai/roteiros/app-builder/roteiro.md

@@ -70,6 +70,13 @@ existe divisão, o rail da `"menu"` mostra as áreas todas de uma vez, enquanto
 ficam atrás de um botão acima da busca. Quer conhecer as outras variações? Mande a página do
 componente — ampliar o leque na entrevista é o que produz escolha errada.
 
+**Terceira resposta possível: o app tem ESCOPO global** — uma empresa/unidade que recorta
+**todas** as páginas ("os dados são sempre dos locais selecionados no topo"). Aí é `"single"`
++ `sidebarModule` (o seletor de escopo — singular, **não** troca o menu) + `sidebarTopSlot`
+(o multi-select das unidades, que você monta). ⛔ **Não** use `sidebarSearchCommand` pra isso:
+aquele é o conteúdo da paleta da **busca**, cujo gatilho tem lupa e `⌘K` fixos — o controle se
+apresenta como busca e o rodapé de ações rola com a lista. Busca é busca.
+
 ```tsx
 <AppShell
   sidebar="single"

package/dist-lib/chunks/{avatar-CMWPg3A3.cjs → avatar-B7h09dye.cjs}

@@ -1027,7 +1027,7 @@ const CONTAINER_CLASSES = [
   "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
   "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",
-  "origin-[--radix-dropdown-menu-content-transform-origin]"
+  "origin-[var(--radix-dropdown-menu-content-transform-origin)]"
 ].join(" ");
 const MOBILE_SHEET_CLASSES = [
   "max-md:w-full max-md:min-w-0 max-md:max-w-none",
@@ -1212,7 +1212,7 @@ const TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 6,
       "rounded-radius-md px-pad-lg py-pad-xs",
       "text-caption-sm",
       "shadow-sh-md",
-      "origin-[--radix-tooltip-content-transform-origin]",
+      "origin-[var(--radix-tooltip-content-transform-origin)]",
       "data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0",
       "data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95",
@@ -1342,4 +1342,4 @@ exports.inputGroupInputVariants = inputGroupInputVariants;
 exports.inputGroupTextareaVariants = inputGroupTextareaVariants;
 exports.inputGroupVariants = inputGroupVariants;
 exports.tv = tv;
-//# sourceMappingURL=avatar-CMWPg3A3.cjs.map
+//# sourceMappingURL=avatar-B7h09dye.cjs.map