@snksergio/design-system 0.34.0 → 0.35.0

package/README.md

@@ -131,6 +131,45 @@ Cria o projeto já conectado ao registry, com tema/`cn`/`tv` configurados, tela
 > vez de copy-in. Modelo e versionamento em `DISTRIBUICAO.md` e na página
 > **Distribution** do catálogo.
 
+### Consumindo por `npm install` — setup completo
+
+⚠️ **A linha `@source` é obrigatória.** O Tailwind v4 **não escaneia `node_modules`**, então
+sem ela nenhuma classe do DS é gerada e os componentes renderizam **sem estilo nenhum** —
+não parcialmente: medido em 2026-08-07, **9 regras CSS** contra as milhares do showcase, com
+o `<Button>` saindo transparente, 24px de altura e radius 0. Não há erro, e é fácil concluir
+que "o pacote está quebrado".
+
+```css
+/* seu src/index.css */
+@import "tailwindcss";
+@source "../node_modules/@snksergio/design-system/dist-lib/**/*.mjs";
+@import "@snksergio/design-system/theme.css";
+```
+
+O `@source` precisa cobrir `dist-lib/**`, não só o `index.mjs`: as classes dos componentes
+flutuantes (Modal, Panel, dropdown, popover) vivem nos **chunks**.
+
+O `theme.css` já traz tudo que o runtime precisa — `@font-face` do Geist, `--font-sans`,
+`@custom-variant dark` (dark por classe, não por `prefers-color-scheme`), `body` e as
+utilities do DS. Antes da v0.35.0 nada disso viajava e o canal ficava com fundo branco no
+dark, tipografia em system-ui e `dark:` amarrado ao tema do sistema operacional.
+
+**Fontes.** O `@font-face` aponta pra `/fonts/*.woff2` — caminho relativo à **raiz do site**,
+não ao pacote. Copie os dois arquivos pro seu `public/fonts/`:
+
+```bash
+cp node_modules/@snksergio/design-system/dist-lib/fonts/*.woff2 public/fonts/
+```
+
+Sem isso a tipografia cai em `system-ui` e os 27 presets do DS renderizam na fonte errada.
+
+**Animações.** Overlays (dropdown, popover, dialog, sheet) usam `animate-in`/`fade-in`/
+`zoom-in`, que vêm do `tw-animate-css`. Sem ele funcionam, mas sem transição:
+
+```css
+@import "tw-animate-css";   /* opcional — só as animações de entrada/saída */
+```
+
 **O que NÃO vem no copy-in:** o pipeline interno do DS (`.claude/agents|skills|hooks`, `.ai/context`, lições) vive só neste repositório. O **kit do consumidor** (orquestrador `ds-kit` + skills de tela + `DESIGN.md` + proteção por hook) vem via CLI no scaffold.
 
 ### Trocar o tema de marca

package/dist-lib/theme.css

@@ -7,6 +7,50 @@
  * Customize na composição da tela (props/variantes + classes DS), não nos tokens.
  */
 
+/* ── Runtime base (fonte, dark-variant, body) — ver buildRuntimeBase ──────── */
+
+@font-face {
+  font-family: 'Geist';
+  src: url('/fonts/Geist-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@theme inline {
+  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
+  --font-mono: 'Geist Mono', 'Fira Code', monospace;
+}
+
+/* Dark por CLASSE, nunca por prefers-color-scheme: sem isto o tema do SO vaza
+ * pro app nos dois sentidos (app claro com SO escuro dispara `dark:`). */
+@custom-variant dark (&:where(.dark, .dark *));
+
+html {
+  font-family: var(--font-sans);
+}
+
+body {
+  min-height: 100vh;
+  background-color: var(--color-bg-canvas);
+  color: var(--color-fg-default);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+@layer base {
+  button {
+    cursor: pointer;
+  }
+}
+
 @theme {
   --color-bg-canvas: oklch(1 0 0);
   --color-bg-surface: oklch(1 0 0);
@@ -633,4 +677,33 @@
   &::-webkit-scrollbar-thumb:hover {
     background-color: var(--color-fg-muted);
   }
+}
+
+/* ── Superfície flutuante (usadas por 14 componentes distribuídos) ────────── */
+
+@utility outline-float {
+  outline: 6px solid var(--color-overlay-float);
+  outline-offset: 0;
+}
+
+/* Bottom-sheet mobile de DropdownMenu/Popover (L-030/L-031).
+ *
+ * O Radix Popper envolve o Content num wrapper posicionado por `transform`
+ * inline, fora do alcance do className do Content — só dá pra alcançá-lo por
+ * seletor global. Sem este bloco, um menu marcado `mobileSheet` abre flutuando
+ * na posição calculada pelo Popper em vez de colar no rodapé.
+ *
+ * z-60 é load-bearing: acima de qualquer surface z-50 (drawer do sidebar mobile,
+ * dialog, sheet). Sem isso, um sheet aberto DE DENTRO do drawer empata em z-50 e
+ * renderiza atrás de forma intermitente, e o backdrop não captura o clique-fora. */
+@media (width < 768px) {
+  [data-radix-popper-content-wrapper]:has(> [data-mobile-sheet]) {
+    position: fixed !important;
+    inset: auto 0 0 0 !important;
+    transform: none !important;
+    min-width: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    z-index: 60 !important;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snksergio/design-system",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "//distribuicao": "Canal PRIMARIO = registry shadcn (copy-in) + CLI @snksergio/create-design-system; sobe sozinho no merge (Vercel). Canal SECUNDARIO = este pacote npm (@snksergio/design-system), funcional (build:lib gera ESM+CJS+types+theme.css) e publicado por passo MANUAL do mantenedor, entao costuma ficar atras do registry. NAO e depreciado — o texto anterior dizia isso e estava errado. Publish so pelo Passo 7 do .claude/skills/ds-dev/release.md (valida com `npm run lib:verify`, pede o token, publica, revoga). Ver DISTRIBUICAO.md.",
   "description": "iGreen Design System — internal library for SaaS CRM, admin panels and dashboards. React 19 + Tailwind v4 + Shadcn + Radix.",
   "license": "UNLICENSED",
@@ -13,6 +13,7 @@
     "dist-lib/tokens.*",
     "dist-lib/theme.css",
     "dist-lib/theme/**",
+    "dist-lib/fonts/**",
     "dist-lib/preview/**",
     "dist-lib/chunks/**",
     "dist-lib/src/**",