xertica-ui 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -7,6 +7,20 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.7.0] — 2026-04-23
+
+### Fixed
+- **CLI CSS Theme Import** — Corrected `@theme` → `@theme inline` in both the library's `index.css` and the generated template `src/styles/index.css`. Plain `@theme {}` was causing Tailwind v4 to resolve color tokens statically at build time using the library's defaults, preventing consumer `tokens.css` overrides from propagating into utility classes (`bg-destructive`, `bg-primary`, alert colors, etc.).
+- **Dark Mode `--primary`** — Added missing `--primary: var(--xertica-primary)` in the dark mode block of `tokens.css` (library, template, and generator). Components using `bg-primary` were not picking up the dark mode brand color.
+- **Dark Mode Chart Tokens** — Generator (`bin/generate-tokens.ts`) now includes `--chart-1` through `--chart-5` in the dark mode section for all generated `tokens.css` files.
+
+### Added
+- **CLI `update` command** — `npx xertica-ui@latest update` prompts the user to select a new color theme and overwrites `src/styles/xertica/tokens.css` with the newly generated tokens, preserving all other project files.
+- **Template `@theme inline` mapping** — Generated `src/styles/index.css` now includes a complete `@theme inline {}` block mapping all tokens (sidebar, charts, gradients, brand, radii) to CSS variable aliases, ensuring full theme coverage for consumer projects.
+- **Documentation** — `docs/getting-started.md` updated with CLI `update` command reference and a new "CSS Setup (Critical)" section explaining the `@theme inline` requirement.
+
+---
+
 ## [1.6.0] — 2026-04-20
 
 ### Added

package/bin/cli.ts

@@ -18,7 +18,7 @@ const program = new Command();
 program
     .name('xertica-ui')
     .description('CLI to initialize Xertica UI projects')
-    .version('1.0.0');
+    .version('1.7.0');
 
 program
     .command('init')
@@ -181,7 +181,7 @@ program
 
                 const minimalApp = `import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
-import { XerticaProvider, Toaster } from 'xertica-ui';
+import { XerticaProvider } from 'xertica-ui';
 ${imports.join('\n')}
 
 export default function App() {
@@ -193,7 +193,6 @@ ${routes.join('\n')}
           <Route path="/" element={<Navigate to="${hasLogin ? '/login' : hasHome ? '/home' : '/template'}" replace />} />
           <Route path="*" element={<Navigate to="${hasLogin ? '/login' : hasHome ? '/home' : '/template'}" replace />} />
         </Routes>
-        <Toaster position="top-right" richColors />
       </Router>
     </XerticaProvider>
   );
@@ -244,6 +243,7 @@ ${routes.join('\n')}
 
 program
     .command('update')
+    .alias('update-theme')
     .description('Update theme tokens in your project')
     .action(async () => {
         const targetDir = process.cwd();

package/bin/generate-tokens.ts

@@ -66,6 +66,14 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --destructive: rgba(239, 68, 68, 1);
   --destructive-foreground: rgba(250, 250, 250, 1);
   
+  /* Semantic Status Colors */
+  --success: rgba(5, 150, 105, 1);
+  --success-foreground: rgba(250, 250, 250, 1);
+  --info: rgba(37, 99, 235, 1);
+  --info-foreground: rgba(250, 250, 250, 1);
+  --warning: rgba(245, 158, 11, 1);
+  --warning-foreground: rgba(24, 24, 27, 1);
+  
   --border: rgba(228, 228, 231, 1);
   --input: rgba(244, 244, 245, 0.5);
   --input-background: rgba(244, 244, 245, 0.5);
@@ -162,6 +170,7 @@ export const generateTokensCss = (theme: ColorTheme): string => {
 .dark {
   /* Brand Tokens */
   --xertica-primary: ${rgba(colors.primaryDarkMode)};
+  --primary: var(--xertica-primary);
   
   /* Semantic Colors */
   --background: rgba(5, 5, 5, 1);
@@ -189,12 +198,27 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --destructive: rgba(239, 68, 68, 1);
   --destructive-foreground: rgba(250, 250, 250, 1);
   
+  /* Semantic Status Colors */
+  --success: rgba(34, 197, 94, 1);
+  --success-foreground: rgba(5, 5, 5, 1);
+  --info: rgba(96, 165, 250, 1);
+  --info-foreground: rgba(5, 5, 5, 1);
+  --warning: rgba(251, 191, 36, 1);
+  --warning-foreground: rgba(5, 5, 5, 1);
+  
   --border: rgba(63, 63, 70, 1);
   --input: rgba(39, 39, 42, 0.5);
   --input-background: rgba(39, 39, 42, 0.5);
   --ring: ${rgba(colors.primaryDarkMode, 0.5)};
   
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
+
+  /* Charts */
+  --chart-1: ${rgba(colors.chart1)};
+  --chart-2: ${rgba(colors.chart2)};
+  --chart-3: ${rgba(colors.chart3)};
+  --chart-4: ${rgba(colors.chart4)};
+  --chart-5: ${rgba(colors.chart5)};
   
   /* Sidebar */
   --sidebar: ${rgba(colors.sidebarDark)};

package/components/{CodeBlock.tsx → assistant/code-block/CodeBlock.tsx}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Check, Copy } from 'lucide-react';
-import { Button } from './ui/button';
+import { Button } from '../../ui/button';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
 // Elegant custom theme inspired by Xertica.ai design system
@@ -229,6 +229,7 @@ export const CodeBlock = ({
           size="icon"
           className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 bg-background/80 hover:bg-background"
           onClick={handleCopy}
+          aria-label={copied ? "Copiado" : "Copiar código"}
         >
           {copied ? (
             <Check className="w-4 h-4 text-[var(--toast-success-icon)]" />

package/components/assistant/code-block/code-block.mdx

@@ -0,0 +1,38 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as CodeBlockStories from './code-block.stories';
+
+<Meta of={CodeBlockStories} />
+
+<Title />
+<Subtitle>An elegant syntax highlighter with built-in copy functionality and Xertica branding.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage Patterns
+
+### Development Snippets
+Ideal for showing code examples with line numbers and filename headers.
+
+<Canvas>
+  <CodeBlockStories.Default />
+</Canvas>
+
+### Terminal Commands
+Compact view for shell commands or configuration highlights.
+
+<Canvas>
+  <CodeBlockStories.Simple />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Language Selection** — Always specify the correct `language` prop to ensure accurate syntax highlighting.
+> - **Theme Consistency** — The underlying `elegantTheme` automatically maps to the system's CSS theme variables; ensure the `XerticaProvider` is wrapping the application for correct colors.
+> - **Clipboard Support** — Copy functionality includes progressive fallbacks for browsers with restricted clipboard permissions.

package/components/assistant/code-block/code-block.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CodeBlock } from './CodeBlock';
+import React from 'react';
+
+const meta: Meta<typeof CodeBlock> = {
+  title: 'High-Level/CodeBlock',
+  component: CodeBlock,
+  argTypes: {
+    language: {
+      control: 'select',
+      options: ['typescript', 'tsx', 'css', 'bash', 'jsx'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+
+const exampleCode = `function HelloWorld() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <h1 className="text-2xl font-bold">Counter</h1>
+      <p>Current count: {count}</p>
+      <Button onClick={() => setCount(count + 1)}>
+        Increment
+      </Button>
+    </div>
+  );
+}`;
+
+export const Default: Story = {
+  args: {
+    code: exampleCode,
+    language: 'tsx',
+    filename: 'Counter.tsx',
+    showLineNumbers: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-3xl">
+      <CodeBlock {...args} />
+    </div>
+  ),
+};
+
+export const Simple: Story = {
+  args: {
+    code: 'npm install xertica-ui',
+    language: 'bash',
+  },
+  render: (args) => (
+    <div className="w-full max-w-xl">
+      <CodeBlock {...args} />
+    </div>
+  ),
+};

package/components/assistant/code-block/index.ts

@@ -0,0 +1 @@
+export * from './CodeBlock';

package/components/{FormattedDocument.tsx → assistant/formatted-document/FormattedDocument.tsx}

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button } from './ui/button';
+import { Button } from '../../ui/button';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 
 /**
@@ -51,8 +51,8 @@ export function FormattedDocument({ content, maxPreviewLength = 500, className =
     html = html.replace(/^\d+\. (.*$)/gim, '<li class="ml-4 my-0.5">$1</li>');
     
     // Checkboxes
-    html = html.replace(/- \[ \] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" disabled class="rounded w-3 h-3" /> <span class="text-sm">$1</span></div>');
-    html = html.replace(/- \[x\] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" checked disabled class="rounded w-3 h-3" /> <span class="text-sm">$1</span></div>');
+    html = html.replace(/- \[ \] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" disabled class="rounded w-3 h-3" aria-label="$1" /> <span class="text-sm">$1</span></div>');
+    html = html.replace(/- \[x\] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" checked disabled class="rounded w-3 h-3" aria-label="$1" /> <span class="text-sm">$1</span></div>');
     
     // Horizontal rule
     html = html.replace(/^---$/gim, '<hr class="my-3 border-border" />');

package/components/assistant/formatted-document/formatted-document.mdx

@@ -0,0 +1,31 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as FormattedDocumentStories from './formatted-document.stories';
+
+<Meta of={FormattedDocumentStories} />
+
+<Title />
+<Subtitle>A lightweight markdown renderer for displaying AI-generated summaries and documentation.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage Patterns
+
+### Collapsible Content
+Ideal for displaying long AI responses where a "See more" toggle is needed to preserve page verticality.
+
+<Canvas>
+  <FormattedDocumentStories.Default />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Markdown Compatibility** — Supports basic markdown: headers (`#`), bold (`**`), lists (`-`), and checkboxes (`- [ ]`). It does not support complex nested tables or markdown-in-html.
+> - **Preview Mode** — Use `maxPreviewLength` to control the initial character count before truncation. Defaults to 500.
+> - **Safe Injection** — Content is rendered via `dangerouslySetInnerHTML`. Ensure the source content (e.g., from an AI API) is trustable and sanitized if necessary.

package/components/assistant/formatted-document/formatted-document.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormattedDocument } from './FormattedDocument';
+import React from 'react';
+
+const meta: Meta<typeof FormattedDocument> = {
+  title: 'High-Level/FormattedDocument',
+  component: FormattedDocument,
+  argTypes: {
+    maxPreviewLength: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormattedDocument>;
+
+const longContent = `# Proposta Estratégica Xertica
+## Visão Geral
+Esta proposta descreve a implementação de uma camada de inteligência artificial generativa em toda a jornada do cliente.
+
+### Objetivos Principais
+- Redução de latência no atendimento em até 40%
+- Aumento na taxa de conversão de leads qualificados
+- Automação de relatórios semanais para gestão
+
+### Cronograma
+1. **Semana 1-2:** Discovery e Mapeamento de Dados
+2. **Semana 3-4:** Setup de Infraestrutura e Agentes
+3. **Semana 5-8:** Implementação Pilot e Feedback Loop
+
+## Detalhamento Técnico
+A arquitetura baseia-se em RAG (Retrieval Augmented Generation) utilizando bases vetoriais de alto desempenho. Os agentes são orquestrados em tempo real para garantir respostas precisas e contextuais.
+
+- [x] Definição de personas
+- [x] Configuração de guardrails
+- [ ] Integração com CRM
+- [ ] Deploy global
+
+---
+**Nota:** Esta é uma versão preliminar para revisão da diretoria.`;
+
+export const Default: Story = {
+  args: {
+    content: longContent,
+    maxPreviewLength: 200,
+  },
+  render: (args) => (
+    <div className="w-full max-w-xl p-6 border rounded-xl bg-card">
+      <FormattedDocument {...args} />
+    </div>
+  ),
+};

package/components/assistant/formatted-document/index.ts

@@ -0,0 +1 @@
+export * from './FormattedDocument';

package/components/assistant/markdown-message/index.ts

@@ -0,0 +1 @@
+export * from './MarkdownMessage';

package/components/assistant/markdown-message/markdown-message.mdx

@@ -0,0 +1,44 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as MarkdownMessageStories from './markdown-message.stories';
+
+<Meta of={MarkdownMessageStories} />
+
+<Title />
+<Subtitle>Renders AI assistant messages as formatted Markdown with syntax-highlighted code blocks.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage
+
+```tsx
+import { MarkdownMessage } from 'xertica-ui';
+
+<MarkdownMessage content="**Hello!** Here is a `code` example." />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `content` | `string` | _(required)_ | The Markdown string to render |
+| `className` | `string` | `''` | Additional CSS classes on the root container |
+
+## Supported Markdown
+
+- **Bold**, _italic_, ~~strikethrough~~
+- `inline code` and fenced code blocks with syntax highlighting
+- Lists (ordered and unordered)
+- Headers (`# H1`, `## H2`, etc.)
+- Tables
+- Blockquotes
+
+## AI Rules
+
+> [!IMPORTANT]
+> - This component is used **exclusively inside** `XerticaAssistant` message bubbles.
+> - Do not use it for general-purpose Markdown rendering outside the assistant context — use a standard Markdown library instead.
+> - Always sanitize content before passing it if coming from untrusted sources.

package/components/assistant/markdown-message/markdown-message.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MarkdownMessage } from './MarkdownMessage';
+
+const meta: Meta<typeof MarkdownMessage> = {
+  title: 'Assistant/MarkdownMessage',
+  component: MarkdownMessage,
+};
+
+export default meta;
+type Story = StoryObj<typeof MarkdownMessage>;
+
+export const Default: Story = {
+  args: {
+    content: `
+# Markdown Message Example
+
+This component renders **Markdown** content sent by the AI assistant.
+
+- It supports **bold** and _italic_ text.
+- It supports [links](https://xertica.com).
+- It supports code blocks:
+
+\`\`\`javascript
+function hello() {
+  console.log("Hello, Xertica!");
+}
+\`\`\`
+
+> "The advance of technology is based on making it fit in so that you don't even notice it, so it's part of everyday life." - Bill Gates
+    `.trim(),
+  },
+};
+
+export const Short: Story = {
+  args: {
+    content: '**Short message** with some `inline code`.',
+  },
+};
+
+export const Table: Story = {
+  args: {
+    content: `
+| Project | Status | Health |
+|---|---|---|
+| Analytics V2 | Active | ✅ Healthy |
+| CRM Refactor | On Hold | ⚠️ Warning |
+| Mobile App | Completed | 🏆 Done |
+    `.trim(),
+  },
+};

package/components/{ModernChatInput.tsx → assistant/modern-chat-input/ModernChatInput.tsx}

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Send, Plus, Paperclip, Mic, FileText, Radio, Search, X } from 'lucide-react';
-import { Button } from './ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+import { Button } from '../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
 import { toast } from 'sonner';
 
 /**
@@ -318,6 +318,7 @@ export function ModernChatInput({
                       <button
                         onClick={handleRemoveAction}
                         className="ml-1 hover:bg-white/20 rounded-full p-0.5 transition-colors"
+                        aria-label="Remover ação"
                       >
                         <X className="w-3 h-3" />
                       </button>
@@ -338,6 +339,7 @@ export function ModernChatInput({
               onFocus={handleFocus}
               onBlur={handleBlur}
               placeholder={placeholder}
+              aria-label={placeholder || "Mensagem para o Xertica"}
               disabled={disabled}
               className="w-full bg-transparent border-0 outline-none resize-none text-foreground placeholder-muted-foreground text-sm leading-5 min-h-[20px] max-h-[100px] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent"
               style={{
@@ -363,6 +365,7 @@ export function ModernChatInput({
                       variant="ghost"
                       size="sm"
                       className="h-8 w-8 p-0 rounded-full text-muted-foreground hover:bg-accent hover:text-foreground transition-all duration-200"
+                      aria-label="Ver ações"
                     >
                       <Plus className="w-4 h-4" />
                     </Button>
@@ -431,6 +434,7 @@ export function ModernChatInput({
                   size="sm"
                   onClick={onFileUpload}
                   className="h-8 w-8 p-0 rounded-full text-muted-foreground hover:bg-accent hover:text-foreground transition-all duration-200"
+                  aria-label="Anexar arquivo"
                 >
                   <Paperclip className="w-4 h-4" />
                 </Button>
@@ -453,6 +457,7 @@ export function ModernChatInput({
                       ? 'bg-destructive hover:bg-destructive/90 text-white animate-pulse' 
                       : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                   }`}
+                  aria-label={isRecording ? "Parar gravação" : "Sugerir com voz"}
                 >
                   <Mic className="w-4 h-4" />
                 </Button>
@@ -480,6 +485,7 @@ export function ModernChatInput({
                         ? 'bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg shadow-primary/30 hover:shadow-primary/40'
                         : 'bg-muted text-muted-foreground cursor-not-allowed'
                     }`}
+                    aria-label="Enviar mensagem"
                   >
                     <motion.div
                       animate={{

package/components/assistant/modern-chat-input/index.ts

@@ -0,0 +1 @@
+export * from './ModernChatInput';

package/components/assistant/modern-chat-input/modern-chat-input.mdx

@@ -0,0 +1,38 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as ModernChatInputStories from './modern-chat-input.stories';
+
+<Meta of={ModernChatInputStories} />
+
+<Title />
+<Subtitle>An advanced, high-performance chat input for the Xertica Assistant.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Usage Patterns
+
+### Standard Floating Input
+Optimized for chat interfaces with multi-line support, voice recording, and action chips.
+
+<Canvas>
+  <ModernChatInputStories.Default />
+</Canvas>
+
+### Full-Page Variant
+Adjusts maximum width and alignment for use in standalone chat pages.
+
+<Canvas>
+  <ModernChatInputStories.FullPage />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Action Workflow** — Handle the `onSubmit` callback's optional `action` parameter to distinguish between standard text messages and intent-driven generations (Documents, Podcasts, Search).
+> - **State Sync** — Always maintain the `value` in a parent state and update it via `onChange` and `onVoiceRecording` to ensure consistent data binding.
+> - **Dynamic Sizing** — The input automatically expands up to 100px based on content; ensure the parent container can accommodate these height changes without layout shift.

package/components/assistant/modern-chat-input/modern-chat-input.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ModernChatInput } from './ModernChatInput';
+import React, { useState } from 'react';
+
+const meta: Meta<typeof ModernChatInput> = {
+  title: 'High-Level/ModernChatInput',
+  component: ModernChatInput,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ModernChatInput>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <div className="w-[600px]">
+        <ModernChatInput
+          value={value}
+          onChange={setValue}
+          onSubmit={(action) => {
+            alert(`Submitted: "${value}" ${action ? `with action: ${action}` : ""}`);
+            setValue("");
+          }}
+          onVoiceRecording={(text) => setValue(text)}
+        />
+      </div>
+    );
+  },
+};
+
+export const FullPage: Story = {
+  args: {
+    isFullPage: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState("Preciso de ajuda com os relatórios");
+    return (
+      <div className="w-full bg-slate-50 p-10 min-h-[300px]">
+        <ModernChatInput
+          {...args}
+          value={value}
+          onChange={setValue}
+          onSubmit={() => setValue("")}
+        />
+      </div>
+    );
+  },
+};

package/components/assistant/xertica-assistant/index.ts

@@ -0,0 +1 @@
+export * from './xertica-assistant';

package/components/assistant/xertica-assistant/xertica-assistant.mdx

@@ -0,0 +1,39 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as AssistantStories from './xertica-assistant.stories';
+
+<Meta of={AssistantStories} />
+
+<Title />
+<Subtitle>An embedded AI-powered assistant panel powered by Gemini.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Layout Integration
+The assistant panel is intensely integrated into the responsive behavior of the primary layout shell.
+
+### Desktop & Mobile
+On desktop, it sits flush against the right side. On mobile, it transitions into a floating action button.
+
+<Canvas>
+  <AssistantStories.Default />
+</Canvas>
+
+### Custom Tabs
+Extend the assistant with specialized tabs for domain-specific insights.
+
+<Canvas>
+  <AssistantStories.CustomTabs />
+</Canvas>
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **API Key** — Ensure `apiKey` is provided in `<XerticaProvider>`.
+> - **State Management** — Use `toggleAssistente()` from `useLayout()` to manage visibility.
+> - **System Prompt** — Always provide a context-specific `systemPrompt` for better AI relevance.