xertica-ui 2.9.7 → 2.9.9

package/CHANGELOG.md

@@ -11,6 +11,24 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.9.9] — 2026-07-14
+
+### Fixed
+
+- **Isotipo da marca e a inversão de cores apareciam nas telas de auth em qualquer tema, não só no "Xertica"** — os commits que introduziram o isotipo (`31e3bb51`, `7f047240`) trocaram o `leftPanel` do `AuthPageShell` para `"isotype"` de forma incondicional nas 4 páginas de autenticação (`LoginPage`, `ForgotPasswordPage`, `ResetPasswordPage`, `VerifyEmailPage`), então o painel esquerdo sempre exibia a marca e a inversão de cores (`bg-card`/`bg-muted`) associada a ela, mesmo com qualquer outro tema de cor ativo — inclusive o `xertica-original`, o tema clássico padrão. Corrigido lendo `currentTheme` via `useBrandColors()` em cada página e só usando `leftPanel="isotype"` quando `currentTheme === 'xertica'`; para os demais temas, o painel volta a exibir a imagem de capa e o gradiente originais (recuperados do histórico do git, anteriores ao rebranding). Aplicado tanto nos componentes reais (`components/pages/*-page`) quanto nos templates espelho usados pelo CLI (`templates/src/features/auth/ui/*Content.tsx`).
+
+---
+
+## [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

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.7-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.9.9-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---

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 '../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/pages/forgot-password-page/ForgotPasswordPage.tsx

@@ -7,22 +7,25 @@ import { AuthPageShell, SocialLoginButtons } from '../../blocks/auth';
 import { ArrowLeft } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { useBrandColors } from '../../../contexts/BrandColorsContext';
 
 /**
  * Forgot Password Page component.
  *
  * @description
  * A screen that allows users to request a password reset link via email.
- * Includes the shared brand isotype side-panel (desktop) and alternative
- * social login options similar to the main Login page.
+ * Includes a side-panel (desktop) and alternative social login options
+ * similar to the main Login page.
  *
  * @ai-rules
  * 1. Navigation: Successfully submitting the email triggers a navigation to `/verify-email`.
- * 2. Visuals: Keeps consistency with `LoginPage` in terms of layout and branding.
+ * 2. Visuals: Keeps consistency with `LoginPage` in terms of layout and branding, including
+ *    the theme-conditional isotype/hero-image left panel.
  */
 export function ForgotPasswordPage() {
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const { currentTheme } = useBrandColors();
   const [email, setEmail] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
@@ -43,8 +46,8 @@ export function ForgotPasswordPage() {
     // Wire your SSO/social provider integration here
   };
 
-  return (
-    <AuthPageShell leftPanel="isotype">
+  const content = (
+    <>
       <div className="text-center">
         <div className="flex items-center justify-center mb-4">
           <XerticaLogo className="h-12 w-auto text-primary dark:text-foreground" variant="theme" />
@@ -86,6 +89,17 @@ export function ForgotPasswordPage() {
       </form>
 
       <SocialLoginButtons onSocialLogin={handleSocialLogin} />
+    </>
+  );
+
+  return currentTheme === 'xertica' ? (
+    <AuthPageShell leftPanel="isotype">{content}</AuthPageShell>
+  ) : (
+    <AuthPageShell
+      imageSrc="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=800&fit=crop&auto=format"
+      imageAlt={t('forgotPassword.heroImageAlt')}
+    >
+      {content}
     </AuthPageShell>
   );
 }

package/components/pages/login-page/LoginPage.tsx

@@ -6,6 +6,7 @@ import { XerticaLogo } from '../../brand/xertica-logo';
 import { AuthPageShell, SocialLoginButtons } from '../../blocks/auth';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { useBrandColors } from '../../../contexts/BrandColorsContext';
 
 /**
  * Props for the LoginPage component.
@@ -22,18 +23,20 @@ interface LoginPageProps {
  * Standard Login Page component.
  *
  * @description
- * A complete, responsive login screen featuring a brand isotype side-panel (on desktop)
- * and a focused authentication form. Supports email/password login and placeholders
+ * A complete, responsive login screen featuring a side-panel (on desktop) and a
+ * focused authentication form. Supports email/password login and placeholders
  * for Social/SSO providers (Google, MT Login, gov.br).
  *
  * @ai-rules
  * 1. State Management: You must provide the `onLogin` callback to handle the actual authentication logic.
- * 2. Visuals: Left panel renders `IsotypeTwist` via `AuthPageShell`'s `leftPanel="isotype"` — no hero image on this page.
+ * 2. Visuals: Left panel renders the brand isotype only when the `xertica` theme is active
+ *    (`AuthPageShell`'s `leftPanel="isotype"`); every other theme shows the original hero image.
  * 3. Routing: Uses `react-router` for navigation to the forgot-password flow.
  */
 export function LoginPage({ onLogin }: LoginPageProps) {
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const { currentTheme } = useBrandColors();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -61,8 +64,8 @@ export function LoginPage({ onLogin }: LoginPageProps) {
     onLogin('social@user.com', 'social-auth');
   };
 
-  return (
-    <AuthPageShell leftPanel="isotype">
+  const content = (
+    <>
       <div className="text-center">
         <div className="flex items-center justify-center mb-4">
           <XerticaLogo className="h-12 w-auto text-primary dark:text-foreground" variant="theme" />
@@ -117,6 +120,17 @@ export function LoginPage({ onLogin }: LoginPageProps) {
       </form>
 
       <SocialLoginButtons onSocialLogin={handleSocialLogin} />
+    </>
+  );
+
+  return currentTheme === 'xertica' ? (
+    <AuthPageShell leftPanel="isotype">{content}</AuthPageShell>
+  ) : (
+    <AuthPageShell
+      imageSrc="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=800&fit=crop&auto=format"
+      imageAlt={t('login.heroImageAlt')}
+    >
+      {content}
     </AuthPageShell>
   );
 }

package/components/pages/reset-password-page/ResetPasswordPage.tsx

@@ -7,6 +7,7 @@ import { AuthPageShell, usePasswordStrength, PasswordStrengthMeter } from '../..
 import { ArrowLeft, CheckCircle2, AlertCircle } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { useBrandColors } from '../../../contexts/BrandColorsContext';
 
 /**
  * Reset Password Page component.
@@ -24,6 +25,7 @@ import { useTranslation } from 'react-i18next';
 export function ResetPasswordPage() {
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const { currentTheme } = useBrandColors();
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -61,8 +63,8 @@ export function ResetPasswordPage() {
     setIsLoading(false);
   };
 
-  return (
-    <AuthPageShell leftPanel="isotype">
+  const content = (
+    <>
       <button
         onClick={() => navigate('/login')}
         className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
@@ -145,6 +147,17 @@ export function ResetPasswordPage() {
           {isLoading ? t('resetPassword.submitting') : t('resetPassword.submit')}
         </Button>
       </form>
+    </>
+  );
+
+  return currentTheme === 'xertica' ? (
+    <AuthPageShell leftPanel="isotype">{content}</AuthPageShell>
+  ) : (
+    <AuthPageShell
+      imageSrc="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=1200&h=800&fit=crop&auto=format"
+      imageAlt={t('resetPassword.heroImageAlt')}
+    >
+      {content}
     </AuthPageShell>
   );
 }

package/components/pages/verify-email-page/VerifyEmailPage.tsx

@@ -5,6 +5,7 @@ import { AuthPageShell, SocialLoginButtons } from '../../blocks/auth';
 import { ArrowLeft, Mail, CheckCircle2 } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { useBrandColors } from '../../../contexts/BrandColorsContext';
 
 /**
  * Email Verification Page component.
@@ -12,7 +13,8 @@ import { useTranslation } from 'react-i18next';
  * @description
  * An informative screen shown after a password reset request. It instructs
  * the user to check their email and provides a "Resend email" feature.
- * Includes the same consistent layout with the shared brand isotype side-panel.
+ * Includes the same consistent layout as the other auth pages, including the
+ * theme-conditional isotype/hero-image left panel.
  *
  * @ai-rules
  * 1. Data Source: It retrieves the email from the router's `location.state`.
@@ -23,6 +25,7 @@ export function VerifyEmailPage() {
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation();
+  const { currentTheme } = useBrandColors();
   const email = location.state?.email || 'your@email.com';
   const [isResending, setIsResending] = useState(false);
   const [resendSuccess, setResendSuccess] = useState(false);
@@ -45,8 +48,8 @@ export function VerifyEmailPage() {
     // Wire your SSO/social provider integration here
   };
 
-  return (
-    <AuthPageShell leftPanel="isotype">
+  const content = (
+    <>
       <div className="text-center">
         <div className="flex items-center justify-center mb-4">
           <XerticaLogo className="h-12 w-auto text-primary dark:text-foreground" variant="theme" />
@@ -96,6 +99,17 @@ export function VerifyEmailPage() {
       </div>
 
       <SocialLoginButtons onSocialLogin={handleSocialLogin} />
+    </>
+  );
+
+  return currentTheme === 'xertica' ? (
+    <AuthPageShell leftPanel="isotype">{content}</AuthPageShell>
+  ) : (
+    <AuthPageShell
+      imageSrc="https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1200&h=800&fit=crop&auto=format"
+      imageAlt={t('verifyEmail.heroImageAlt')}
+    >
+      {content}
     </AuthPageShell>
   );
 }

package/dist/AssistenteContext-Bm8_RJTB.js

@@ -0,0 +1,200 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext } from 'react';
+
+const ApiKeyContext = createContext(void 0);
+const readStorage = (key) => typeof window !== "undefined" ? window.localStorage?.getItem(key) : null;
+const writeStorage = (key, value) => {
+  if (typeof window === "undefined") return;
+  window.localStorage?.setItem(key, value);
+};
+const removeStorage = (key) => {
+  if (typeof window === "undefined") return;
+  window.localStorage?.removeItem(key);
+};
+function ApiKeyProvider({
+  children,
+  initialApiKey,
+  initialGeminiApiKey,
+  initialGoogleMapsApiKey
+}) {
+  const LEAKED_KEYS = [
+    "AIzaSyCMsAMytBeOK0Qd7RKFyA5IW9eWt2WTJg",
+    "AIzaSyAiYWEIEmx212Up9zfM8kqyMXB4jLs8gq0"
+  ];
+  const [apiKey, setApiKeyState] = useState(() => {
+    if (initialApiKey) return initialApiKey;
+    const saved = readStorage("xertica-api-key");
+    return saved || "";
+  });
+  const [geminiApiKey, setGeminiApiKeyState] = useState(() => {
+    if (initialGeminiApiKey) return initialGeminiApiKey;
+    const saved = readStorage("xertica-gemini-api-key");
+    if (saved && LEAKED_KEYS.includes(saved)) {
+      removeStorage("xertica-gemini-api-key");
+      return "";
+    }
+    return saved || "";
+  });
+  const [googleMapsApiKey, setGoogleMapsApiKeyState] = useState(() => {
+    if (initialGoogleMapsApiKey) return initialGoogleMapsApiKey;
+    const saved = readStorage("xertica-googlemaps-api-key");
+    return saved || "";
+  });
+  const [isApiKeyValid, setIsApiKeyValid] = useState(false);
+  const [isGoogleMapsKeyValid, setIsGoogleMapsKeyValid] = useState(false);
+  useEffect(() => {
+    if (initialApiKey !== void 0) {
+      setApiKeyState(initialApiKey.trim());
+    }
+  }, [initialApiKey]);
+  useEffect(() => {
+    if (initialGeminiApiKey !== void 0) {
+      setGeminiApiKeyState(initialGeminiApiKey.trim());
+    }
+  }, [initialGeminiApiKey]);
+  useEffect(() => {
+    if (initialGoogleMapsApiKey !== void 0) {
+      setGoogleMapsApiKeyState(initialGoogleMapsApiKey.trim());
+    }
+  }, [initialGoogleMapsApiKey]);
+  useEffect(() => {
+    if (apiKey) {
+      writeStorage("xertica-api-key", apiKey);
+      setIsApiKeyValid(apiKey.length > 0);
+    } else {
+      removeStorage("xertica-api-key");
+      setIsApiKeyValid(false);
+    }
+  }, [apiKey]);
+  useEffect(() => {
+    if (geminiApiKey) {
+      writeStorage("xertica-gemini-api-key", geminiApiKey);
+      setIsApiKeyValid(geminiApiKey.startsWith("AIzaSy") && geminiApiKey.length > 20);
+    } else {
+      removeStorage("xertica-gemini-api-key");
+      setIsApiKeyValid(false);
+    }
+  }, [geminiApiKey]);
+  useEffect(() => {
+    if (googleMapsApiKey) {
+      writeStorage("xertica-googlemaps-api-key", googleMapsApiKey);
+      setIsGoogleMapsKeyValid(
+        googleMapsApiKey.startsWith("AIzaSy") && googleMapsApiKey.length > 20
+      );
+      const reloadMaps = async () => {
+        if (googleMapsApiKey.length < 10) return;
+        try {
+          const { reloadGoogleMaps } = await import('./index-Bei5DzAL.js');
+          await reloadGoogleMaps(googleMapsApiKey);
+          console.log("[ApiKeyContext] Google Maps recarregado com sucesso");
+        } catch (error) {
+          console.error("[ApiKeyContext] Erro ao recarregar Google Maps:", error);
+        }
+      };
+      reloadMaps();
+    } else {
+      removeStorage("xertica-googlemaps-api-key");
+      setIsGoogleMapsKeyValid(false);
+    }
+  }, [googleMapsApiKey]);
+  const setApiKey = (key) => {
+    setApiKeyState(key.trim());
+  };
+  const setGeminiApiKey = (key) => {
+    setGeminiApiKeyState(key.trim());
+  };
+  const setGoogleMapsApiKey = (key) => {
+    setGoogleMapsApiKeyState(key.trim());
+  };
+  const reloadMapsApi = async () => {
+    if (!googleMapsApiKey || googleMapsApiKey.length < 10) {
+      return;
+    }
+    try {
+      const { reloadGoogleMaps } = await import('./index-Bei5DzAL.js');
+      await reloadGoogleMaps(googleMapsApiKey);
+      console.log("[ApiKeyContext] Google Maps recarregado manualmente");
+    } catch (error) {
+      console.error("[ApiKeyContext] Erro ao recarregar Google Maps:", error);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ApiKeyContext.Provider,
+    {
+      value: {
+        apiKey,
+        setApiKey,
+        geminiApiKey,
+        setGeminiApiKey,
+        isApiKeyValid,
+        googleMapsApiKey,
+        setGoogleMapsApiKey,
+        isGoogleMapsKeyValid,
+        reloadMapsApi
+      },
+      children
+    }
+  );
+}
+function useApiKey() {
+  const context = useContext(ApiKeyContext);
+  if (!context) {
+    throw new Error("useApiKey must be used within ApiKeyProvider");
+  }
+  return context;
+}
+
+const AssistenteContext = createContext(void 0);
+function AssistenteProvider({ children }) {
+  const [conversaAtual, setConversaAtual] = useState("1");
+  const [conversas, setConversas] = useState([
+    {
+      id: "1",
+      titulo: "Nova Conversa",
+      mensagens: [],
+      ultimaMensagem: "",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      favorita: false
+    }
+  ]);
+  const [isTyping, setIsTyping] = useState(false);
+  const [abaSelecionada, setAbaSelecionada] = useState("chat");
+  const [editingDocument, setEditingDocument] = useState(
+    null
+  );
+  const [searchFilter, setSearchFilter] = useState("all");
+  const [savedSearches, setSavedSearches] = useState([]);
+  const historico = conversas.find((c) => c.id === conversaAtual)?.mensagens || [];
+  return /* @__PURE__ */ jsx(
+    AssistenteContext.Provider,
+    {
+      value: {
+        historico,
+        conversaAtual,
+        setConversaAtual,
+        conversas,
+        setConversas,
+        isTyping,
+        setIsTyping,
+        abaSelecionada,
+        setAbaSelecionada,
+        editingDocument,
+        setEditingDocument,
+        searchFilter,
+        setSearchFilter,
+        savedSearches,
+        setSavedSearches
+      },
+      children
+    }
+  );
+}
+function useAssistente() {
+  const context = useContext(AssistenteContext);
+  if (!context) {
+    throw new Error("useAssistente must be used within AssistenteProvider");
+  }
+  return context;
+}
+
+export { ApiKeyProvider as A, AssistenteProvider as a, useAssistente as b, useApiKey as u };