xertica-ui 1.6.2 → 1.7.3

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')
@@ -243,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/Introduction.mdx

@@ -0,0 +1,90 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { XerticaLogo } from './brand/xertica-logo/XerticaLogo';
+
+<Meta title="Introduction" />
+
+<div className="flex flex-col gap-8 py-12 max-w-4xl mx-auto">
+  <div className="flex flex-col items-center text-center space-y-4">
+    <div className="p-3">
+      <XerticaLogo className="h-16 w-auto" />
+    </div>
+    <h1 className="text-5xl font-extrabold tracking-tight text-foreground">Design System</h1>
+    <p className="text-xl text-muted-foreground max-w-2xl">
+      Official Design System for Xertica projects. Built with Tailwind CSS v4, Radix UI, and AI-first engineering.
+    </p>
+    <div className="flex gap-4 pt-4">
+      <a href="https://www.npmjs.com/package/xertica-ui" target="_blank" className="h-11 px-8 rounded-full border border-border bg-background text-foreground font-medium flex items-center hover:bg-accent transition-colors no-underline">
+        NPM
+      </a>
+    </div>
+  </div>
+
+  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8">
+    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-10 h-10 bg-info/10 rounded-lg flex items-center justify-center mb-4 text-info">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v8"/><path d="m16 6-4 4-4-4"/><rect width="20" height="8" x="2" y="14" rx="2"/></svg>
+      </div>
+      <h3 className="text-lg font-semibold mb-2">Instant Installation</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">
+        Add to your project with a single command. Integrated CLI for layout and theme scaffolding.
+      </p>
+    </div>
+
+    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-10 h-10 bg-success/10 rounded-lg flex items-center justify-center mb-4 text-success">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+      </div>
+      <h3 className="text-lg font-semibold mb-2">Tailwind v4 Native</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">
+        Leverage the power of Tailwind CSS v4 with its new faster and more flexible engine.
+      </p>
+    </div>
+
+    <div className="p-6 rounded-[var(--radius-card)] border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-10 h-10 bg-warning/10 rounded-lg flex items-center justify-center mb-4 text-warning">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
+      </div>
+      <h3 className="text-lg font-semibold mb-2">AI-Ready</h3>
+      <p className="text-sm text-muted-foreground leading-relaxed">
+        Documentation optimized for LLM prompt systems (Antigravity, Cursor, etc).
+      </p>
+    </div>
+  </div>
+
+  <div className="space-y-6 pt-12">
+    <h2 className="text-3xl font-bold border-b pb-2 border-border">Design Philosophy</h2>
+    <p className="text-lg leading-relaxed text-muted-foreground">
+      Xertica UI focuses on modularity and high performance for Xertica's ecosystem of products. 
+      Our goal is to ensure functional consistency, accessibility (via Radix UI), and rapid development at scale.
+    </p>
+
+    <div className="bg-muted p-8 rounded-2xl space-y-4">
+      <h4 className="font-bold flex items-center gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
+        Ecosystem Highlights
+      </h4>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Radix UI</b> for accessible, unstyled primitives.</span>
+        </div>
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Tailwind v4</b> ultra-fast engine.</span>
+        </div>
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Dark Mode</b> native via CSS Tokens.</span>
+        </div>
+        <div className="flex items-center gap-2 bg-background p-3 rounded-lg border border-border shadow-sm">
+          <span className="w-2 h-2 rounded-full bg-primary" />
+          <span><b>Full Customization</b> via <code>tokens.css</code>.</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div className="pt-12 text-center text-sm text-muted-foreground border-t border-border">
+    &copy; 2026 Xertica. All rights reserved.
+  </div>
+</div>

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

@@ -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

@@ -1,38 +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.
+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

@@ -1,57 +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>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { CodeBlock } from './CodeBlock';
+import React from 'react';
+
+const meta: Meta<typeof CodeBlock> = {
+  title: 'Assistant/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/formatted-document/FormattedDocument.tsx

@@ -46,13 +46,14 @@ export function FormattedDocument({ content, maxPreviewLength = 500, className =
     // Italic
     html = html.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>');
     
-    // Lists
-    html = html.replace(/^\- (.*$)/gim, '<li class="ml-4 my-0.5">• $1</li>');
-    html = html.replace(/^\d+\. (.*$)/gim, '<li class="ml-4 my-0.5">$1</li>');
+    // Checkboxes (Process before lists to avoid collisions)
+    html = html.replace(/^[-*+] \[ \] (.*$)/gim, '<div class="flex items-center gap-2 ml-4 my-1"><input type="checkbox" disabled class="rounded w-3.5 h-3.5 accent-primary" 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.5 h-3.5 accent-primary" aria-label="$1" /> <span class="text-sm">$1</span></div>');
     
-    // 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>');
+    // Lists (Bullet and Numbered)
+    // Using <li> with Tailwind list classes to avoid double-bullets while maintaining native flow
+    html = html.replace(/^[-*+] (.*$)/gim, '<li class="ml-6 my-1 list-disc">$1</li>');
+    html = html.replace(/^(\d+)\. (.*$)/gim, '<li class="ml-6 my-1 list-decimal">$2</li>');
     
     // Horizontal rule
     html = html.replace(/^---$/gim, '<hr class="my-3 border-border" />');

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

@@ -1,31 +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.
+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

@@ -1,51 +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>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormattedDocument } from './FormattedDocument';
+import React from 'react';
+
+const meta: Meta<typeof FormattedDocument> = {
+  title: 'Assistant/FormattedDocument',
+  component: FormattedDocument,
+  argTypes: {
+    maxPreviewLength: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormattedDocument>;
+
+const longContent = `# Strategic Project Proposal
+## Overview
+This proposal describes the implementation of a generative artificial intelligence layer across the entire customer journey.
+
+### Key Objectives
+- Reduce service latency by up to 40%
+- Increase qualified lead conversion rate
+- Automate weekly management reports
+
+### Roadmap
+1. **Week 1-2:** Discovery and Data Mapping
+2. **Week 3-4:** Infrastructure and Agent Setup
+3. **Week 5-8:** Pilot Implementation and Feedback Loop
+
+## Technical Details
+The architecture is based on RAG (Retrieval Augmented Generation) using high-performance vector databases. Agents are orchestrated in real-time to ensure accurate and contextual responses.
+
+- [x] Persona definition
+- [x] Guardrails configuration
+- [ ] CRM integration
+- [ ] Global deployment
+
+---
+**Note:** This is a preliminary version for board review.`;
+
+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>
+  ),
+};