xertica-ui 2.9.6 → 2.9.8

package/CHANGELOG.md

@@ -11,12 +11,32 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.9.8] — 2026-07-14
+
+### Fixed
+
+- **Projeto gerado pelo scaffold "Web page" não compilava — erros de tipo de bibliotecas de terceiros** — `tsconfig.node.json` não tinha `skipLibCheck`, então o type-check processava as definições de tipo de dependências transitivas usadas internamente pelo Vite (`d3-array`, `prismjs`, etc.), e qualquer inconsistência nelas quebrava a compilação do projeto gerado, mesmo sem nenhum erro real no código do usuário. Corrigido adicionando `"skipLibCheck": true` a `templates/tsconfig.node.json`, usado tanto pelo scaffold "Web page" quanto pelo "Full system".
+- **Tela em branco no scaffold "Web page" — `Error: No QueryClient set, use QueryClientProvider to set one`** — o `App.tsx` gerado por `generateLandingAppTsx` (`bin/language-config.ts`) renderizava `<LandingPage>` direto dentro de `<XerticaProvider>`, sem `QueryClientProvider`, partindo do pressuposto de que a landing page não dependia de React Query. Só que `XerticaProvider` monta `LanguageProvider` internamente, e este chama `useQueryClient()` para invalidar queries traduzíveis na troca de idioma — sem um `QueryClientProvider` acima na árvore, o app quebra no primeiro render. Corrigido envolvendo o `App.tsx` gerado em `<QueryClientProvider client={queryClient}>` (com `queryClient = new QueryClient()`), o mesmo padrão que o scaffold "Full system" (`generateAppTsx`) já usava.
+- **Scroll não funcionava no scaffold "Web page"** — o CSS da própria lib (`styles/xertica/base.css`) define `html, body { height: 100%; overflow: hidden; }`, delegando o scroll a um container interno com altura própria resolvida. Como o `#root` gerado pelo Vite não tinha altura definida, a `LandingPage` (que usa `h-full overflow-y-auto`) não tinha em relação a que altura calcular seu próprio limite de scroll. Corrigido adicionando `#root { height: 100%; }` a `templates/src/styles/index.css`.
+
+---
+
+## [2.9.7] — 2026-07-14
+
+### Fixed
+
+- **Suíte de testes com exceção não tratada bloqueando `npm publish`** — o pacote de terceiros `input-otp` agenda três `setTimeout` internos (0ms/10ms/50ms) em um `useEffect` sem função de limpeza no unmount. Ao rodar a suíte completa, o cleanup automático do Testing Library desmontava o `InputOTP` entre um teste e outro sem cancelar esses timers, que disparavam mais tarde — já fora do ambiente jsdom daquele arquivo — lançando `ReferenceError: window is not defined` como exceção não tratada. Isso fazia `vitest run` sair com erro mesmo com todos os 358 testes passando, derrubando a etapa `test:unit` do `prepublishOnly` e, com isso, qualquer tentativa de `npm publish`. Corrigido em `components/ui/input-otp/input-otp.test.tsx` usando `vi.useFakeTimers()`/`vi.useRealTimers()` ao redor de cada teste, impedindo que os timers da lib vazem para fora do ciclo de vida do teste.
+- **`npm publish` alertava sobre correção automática do campo `bin`** — `"bin": "./dist/cli.js"` (string, com prefixo `./`) era normalizado pelo próprio npm no momento do publish, gerando o aviso `npm auto-corrected some errors in your package.json`. Corrigido escrevendo `bin` já na forma canônica esperada (`{ "xertica-ui": "dist/cli.js" }`), sem mudança de comportamento — apenas elimina o aviso.
+
+---
+
 ## [2.9.6] — 2026-07-14
 
 ### Added
 
 - **CLI `init` pergunta o tipo de projeto antes de tudo** — novo primeiro prompt `O que você deseja criar?` com duas opções: `Full system` (o fluxo completo existente, inalterado: auth, sidebar, páginas, i18n) e `Web page` (um scaffold mínimo com apenas a landing page de marketing). Escolhendo `Web page`, o fluxo se reduz a 3 prompts — idiomas (multiselect), tema (select) e instalação de dependências (confirm) — e o projeto já sai pronto, sem nenhuma outra configuração.
 - **Novo scaffold mínimo para "Web page"** (`initPageProject` em `bin/cli.ts`) — gera um `App.tsx` que renderiza `LandingPage` (via novo `generateLandingAppTsx` em `bin/language-config.ts`) diretamente dentro de `XerticaProvider`, sem `Router`, `QueryClientProvider` ou `AuthProvider`. Não cria `AuthContext.tsx`, `AuthGuard.tsx`, `AppLayout.tsx`, `src/shared/` nem `src/features/` — apenas `src/app/App.tsx`, `src/pages/LandingPage.tsx`, i18n/locales e tokens de tema. Também omite `CLAUDE.md`/`guidelines/` (documentam a arquitetura FSD de auth, inexistente neste scaffold) e `.env.example` (chaves usadas só pelo assistente/mapa).
+- **`src/pages/LandingPage.tsx` do scaffold "Web page" ganha conteúdo de demonstração real** — em vez de um re-export de `xertica-ui/pages`, o template (`templates/src/pages/LandingPage.tsx`) agora traz a composição completa da landing page (Hero, cards, feature rows, "how it works", compliance/stats, CTA, footer) montada localmente a partir de `xertica-ui/blocks`/`xertica-ui/brand`, igual ao padrão já usado pelos demais templates (`HomeContent.tsx` etc.) — o usuário recebe algo editável como base, não uma caixa-preta importada da lib.
 - **`.xertica.json` ganha o campo `projectType: 'page' | 'system'`** — projetos escaffoldados antes desta versão não têm o campo e são tratados como `'system'` em todos os pontos que o leem, preservando compatibilidade.
 
 ### Changed

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/badge/npm-2.9.6-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.9.8-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---

package/bin/cli.ts

@@ -439,7 +439,7 @@ async function initPageProject(targetDir: string, templatesDir: string): Promise
     }
     console.log(chalk.cyan('  npm run dev'));
     console.log();
-    console.log(chalk.gray('  The page is composed in xertica-ui/pages — edit src/app/App.tsx'));
+    console.log(chalk.gray('  Edit the demo content in src/pages/LandingPage.tsx'));
     console.log(chalk.gray('  Customize the theme in src/styles/xertica/tokens.css'));
     console.log(chalk.gray('  To change the theme or languages later: npx xertica-ui update'));
   } catch (error) {

package/bin/language-config.ts

@@ -362,27 +362,35 @@ export default function App() {
 /**
  * Generate the App.tsx source for a minimal "web page" project — renders the
  * marketing `LandingPage` directly under `XerticaProvider`, with none of the
- * router/query-client/auth machinery the full system scaffold needs (the
- * landing page itself has no dependency on any of it).
+ * router/auth machinery the full system scaffold needs. `QueryClientProvider`
+ * is still required, though: `XerticaProvider` mounts `LanguageProvider`
+ * internally, which calls `useQueryClient()` to invalidate translated queries
+ * on language change — without a provider above it, the app throws "No
+ * QueryClient set" at render time.
  */
 export function generateLandingAppTsx(
   selectedCodes: string[],
   disableDarkMode: boolean = false
 ): string {
-  const disableDarkModeProp = disableDarkMode ? `\n      disableDarkMode={true}` : '';
-  const availableLanguagesProp = buildAvailableLanguagesProp(selectedCodes, '      ');
+  const disableDarkModeProp = disableDarkMode ? `\n        disableDarkMode={true}` : '';
+  const availableLanguagesProp = buildAvailableLanguagesProp(selectedCodes, '        ');
 
   return `import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { XerticaProvider } from 'xertica-ui/brand';
-import { LandingPage } from 'xertica-ui/pages';
+import { LandingPage } from '../pages/LandingPage';
+
+const queryClient = new QueryClient();
 
 export default function App() {
   return (
-    <XerticaProvider
-      useCustomTokens={true}${availableLanguagesProp}${disableDarkModeProp}
-    >
-      <LandingPage />
-    </XerticaProvider>
+    <QueryClientProvider client={queryClient}>
+      <XerticaProvider
+        useCustomTokens={true}${availableLanguagesProp}${disableDarkModeProp}
+      >
+        <LandingPage />
+      </XerticaProvider>
+    </QueryClientProvider>
   );
 }
 `;

package/components/ui/input-otp/input-otp.test.tsx

@@ -1,10 +1,23 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './input-otp';
 import { OTPInputContext } from 'input-otp';
 import React from 'react';
 
 describe('InputOTP', () => {
+  // input-otp schedules internal setTimeout(0/10/50) calls on mount that it
+  // never cancels on unmount. Under real timers those fire after this file's
+  // jsdom environment is torn down, throwing `window is not defined` as an
+  // unhandled error in later test files. Fake timers keep them from ever
+  // firing for real.
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('renders children correctly', () => {
     render(
       <OTPInputContext.Provider value={{ slots: [{ char: 'A' }] } as any}>

package/dist/cli.js

@@ -901,19 +901,24 @@ export default function App() {
 }
 function generateLandingAppTsx(selectedCodes, disableDarkMode = false) {
   const disableDarkModeProp = disableDarkMode ? `
-      disableDarkMode={true}` : "";
-  const availableLanguagesProp = buildAvailableLanguagesProp(selectedCodes, "      ");
+        disableDarkMode={true}` : "";
+  const availableLanguagesProp = buildAvailableLanguagesProp(selectedCodes, "        ");
   return `import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { XerticaProvider } from 'xertica-ui/brand';
-import { LandingPage } from 'xertica-ui/pages';
+import { LandingPage } from '../pages/LandingPage';
+
+const queryClient = new QueryClient();
 
 export default function App() {
   return (
-    <XerticaProvider
-      useCustomTokens={true}${availableLanguagesProp}${disableDarkModeProp}
-    >
-      <LandingPage />
-    </XerticaProvider>
+    <QueryClientProvider client={queryClient}>
+      <XerticaProvider
+        useCustomTokens={true}${availableLanguagesProp}${disableDarkModeProp}
+      >
+        <LandingPage />
+      </XerticaProvider>
+    </QueryClientProvider>
   );
 }
 `;
@@ -1261,7 +1266,7 @@ async function initPageProject(targetDir, templatesDir) {
     }
     console.log(chalk.cyan("  npm run dev"));
     console.log();
-    console.log(chalk.gray("  The page is composed in xertica-ui/pages \u2014 edit src/app/App.tsx"));
+    console.log(chalk.gray("  Edit the demo content in src/pages/LandingPage.tsx"));
     console.log(chalk.gray("  Customize the theme in src/styles/xertica/tokens.css"));
     console.log(chalk.gray("  To change the theme or languages later: npx xertica-ui update"));
   } catch (error) {