xertica-ui 2.1.2 → 2.1.3

package/dist/cli.js

@@ -342,8 +342,8 @@ var generateTokensCss = (theme) => {
   --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);
+  --warning: rgba(234, 179, 8, 1);
+  --warning-foreground: rgba(28, 25, 23, 1);
   
   --border: rgba(228, 228, 231, 1);
   --input: rgba(244, 244, 245, 0.5);
@@ -366,12 +366,15 @@ var generateTokensCss = (theme) => {
   --sidebar-border: rgba(255, 255, 255, 0.1); 
   --sidebar-ring: ${rgba(colors.primary, 0.5)};
 
-  /* Charts */
+  /* Charts \u2014 vibrant, accessible, harmonious palette */
   --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)};
+  --chart-6: rgba(168, 85, 247, 1);  /* purple \u2014 extended palette */
+  --chart-7: rgba(20, 184, 166, 1);  /* teal \u2014 extended palette */
+  --chart-8: rgba(251, 113, 133, 1); /* rose \u2014 extended palette */
   
   /* Gradients */
   --gradient-diagonal: linear-gradient(135deg, ${colors.gradientStart} 0%, ${colors.gradientEnd} 100%);
@@ -424,9 +427,9 @@ var generateTokensCss = (theme) => {
   --toast-success-border: rgba(5, 150, 105, 1);
   --toast-success-icon: rgba(5, 150, 105, 1);
   /* Toast - Warning */
-  --toast-warning-bg: rgba(254, 243, 199, 1);
-  --toast-warning-border: rgba(245, 158, 11, 1);
-  --toast-warning-icon: rgba(245, 158, 11, 1);
+  --toast-warning-bg: rgba(254, 249, 195, 1);
+  --toast-warning-border: rgba(161, 98, 7, 1);
+  --toast-warning-icon: rgba(161, 98, 7, 1);
   /* Toast - Info */
   --toast-info-bg: rgba(219, 234, 254, 1);
   --toast-info-border: rgba(37, 99, 235, 1);
@@ -484,12 +487,15 @@ var generateTokensCss = (theme) => {
   
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
 
-  /* Charts */
+  /* Charts \u2014 dark mode: slightly lighter/more saturated for contrast on dark bg */
   --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)};
+  --chart-6: rgba(196, 132, 252, 1);   /* purple lighter */
+  --chart-7: rgba(45, 212, 191, 1);    /* teal lighter */
+  --chart-8: rgba(253, 164, 175, 1);   /* rose lighter */
   
   /* Sidebar */
   --sidebar: ${rgba(colors.sidebarDark)};
@@ -528,7 +534,7 @@ var generateTokensCss = (theme) => {
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
 var program = new Command();
-program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("2.1.2");
+program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("2.1.3");
 program.command("init").description("Initialize a new Xertica UI project").argument("[directory]", "Directory to initialize in", ".").action(async (directory) => {
   const targetDir = path.resolve(process.cwd(), directory);
   const templatesDir = path.resolve(__dirname, "../templates");

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

@@ -1 +1,3 @@
 export * from './xertica-assistant';
+export { useAssistant } from './use-assistant';
+export type { UseAssistantProps, UseAssistantReturn } from './use-assistant';

package/dist/components/assistant/xertica-assistant/use-assistant.d.ts

@@ -0,0 +1,126 @@
+import { type MockResponse } from '../../shared/assistant-utils';
+import type { Message, Conversation, Suggestion, AssistantTab, AssistantMode, SearchResult } from './xertica-assistant';
+export interface UseAssistantProps {
+    /** Layout mode for the assistant panel */
+    mode?: AssistantMode;
+    /** Controlled expansion state */
+    isExpanded?: boolean;
+    /** Toggle callback for controlled expansion */
+    onToggle?: () => void;
+    /** Initially selected tab */
+    defaultTab?: AssistantTab;
+    /** Enables demo mode with mock AI responses */
+    demoMode?: boolean;
+    /** Custom mock responses for demo mode */
+    customResponses?: MockResponse[];
+    /** Pre-loaded messages to hydrate an existing conversation */
+    initialMessages?: Message[];
+    /** Previously saved conversations */
+    savedConversations?: Conversation[];
+    /** Suggested prompts shown in the empty state */
+    suggestions?: Suggestion[];
+    /** Callback fired when the user sends a message */
+    onSendMessage?: (message: string) => void;
+    /** Whether the assistant is currently processing a response */
+    isProcessing?: boolean;
+    /** Custom response generator — overrides demo mode defaults */
+    responseGenerator?: (message: string) => Promise<string | Partial<Message>> | string | Partial<Message>;
+    /** Extended suggestions shown when the user clicks "More suggestions" */
+    richSuggestions?: Suggestion[];
+    /** Callback fired when the user clicks a rich suggestion */
+    onRichAction?: (actionId: string, actionText: string) => void;
+    /** Callback fired when the user rates a message */
+    onEvaluation?: (messageId: string, type: 'like' | 'dislike', reason?: string) => void;
+    /** Negative feedback categories shown in the dislike dropdown */
+    feedbackOptions?: string[];
+}
+export interface UseAssistantReturn {
+    isFullPage: boolean;
+    isExpanded: boolean;
+    isMobile: boolean;
+    abaSelecionada: AssistantTab;
+    setAbaSelecionada: (tab: AssistantTab) => void;
+    mensagens: Message[];
+    setMensagens: React.Dispatch<React.SetStateAction<Message[]>>;
+    mensagem: string;
+    setMensagem: (value: string) => void;
+    conversas: Conversation[];
+    conversaAtual: string | null;
+    conversasFiltradas: Conversation[];
+    copiedId: string | null;
+    generatingPodcastId: string | null;
+    executingCommand: string | null;
+    savedSearches: string[];
+    editingDocument: {
+        content: string;
+        title: string;
+    } | null;
+    setEditingDocument: (doc: {
+        content: string;
+        title: string;
+    } | null) => void;
+    showMoreSuggestions: boolean;
+    setShowMoreSuggestions: (show: boolean) => void;
+    evaluationState: {
+        isOpen: boolean;
+        messageId: string | null;
+        type: 'dislike' | null;
+        category?: string | null;
+        reason: string;
+    };
+    setEvaluationState: React.Dispatch<React.SetStateAction<UseAssistantReturn['evaluationState']>>;
+    sugestoes: Suggestion[];
+    messagesEndRef: React.RefObject<HTMLDivElement>;
+    fileInputRef: React.RefObject<HTMLInputElement>;
+    audioInputRef: React.RefObject<HTMLInputElement>;
+    handleToggle: () => void;
+    handleExpandWithTab: (tab: AssistantTab) => void;
+    handleEnviarMensagem: (arg?: string | any) => Promise<void>;
+    handleToggleFavorite: (messageId: string) => void;
+    handleCopyMessage: (content: string, messageId: string) => Promise<void>;
+    handleGeneratePodcast: (messageId: string, content: string) => Promise<void>;
+    handleDownloadDocument: (content: string, fileName: string) => void;
+    handleDownloadPodcast: (audioUrl: string, fileName: string) => void;
+    handleEditDocument: (content: string, title: string) => void;
+    handleNovaConversa: () => void;
+    handleSelecionarConversa: (conversaId: string) => void;
+    handleToggleFavoritaConversa: (conversaId: string) => void;
+    handleOpenSearchResult: (result: SearchResult) => void;
+    handleExecuteSearchCommand: (commandId: string, searchTerm: string, results: SearchResult[], messageId: string) => Promise<void>;
+    handleRichSuggestionClick: (suggestion: Suggestion) => void;
+    handleEvaluationClick: (messageId: string, type: 'like' | 'dislike') => void;
+    openFeedbackDialog: (messageId: string, category: string | null) => void;
+    handleSubmitDislike: () => void;
+}
+/**
+ * `useAssistant` — Headless hook for the XerticaAssistant component.
+ *
+ * Encapsulates all state management and business logic for the AI assistant panel.
+ * Use this hook when you need to build a fully custom assistant UI while reusing
+ * the same state logic as the default `XerticaAssistant` component.
+ *
+ * @example
+ * ```tsx
+ * import { useAssistant } from 'xertica-ui/assistant';
+ *
+ * function MyCustomAssistant() {
+ *   const {
+ *     mensagens,
+ *     mensagem,
+ *     setMensagem,
+ *     handleEnviarMensagem,
+ *     isExpanded,
+ *     handleToggle,
+ *   } = useAssistant({ demoMode: true });
+ *
+ *   return (
+ *     <div>
+ *       {mensagens.map(msg => <p key={msg.id}>{msg.content}</p>)}
+ *       <input value={mensagem} onChange={e => setMensagem(e.target.value)} />
+ *       <button onClick={() => handleEnviarMensagem()}>Send</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useAssistant({ mode, isExpanded: controlledIsExpanded, onToggle, defaultTab, demoMode, customResponses, initialMessages, savedConversations, suggestions: propSuggestions, onSendMessage, isProcessing, responseGenerator, richSuggestions, onRichAction, onEvaluation, }?: UseAssistantProps): UseAssistantReturn;

package/dist/components/assistant/xertica-assistant/xertica-assistant.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type MockResponse } from '../../shared/assistant-utils';
 /**
  * Supported message sender types in the assistant
  */
@@ -93,7 +94,6 @@ export type AssistantMode = 'collapsed' | 'expanded' | 'fullPage';
  * Available tabs in the assistant panel
  */
 export type AssistantTab = 'chat' | 'historico' | 'favoritos';
-import { type MockResponse } from '../../shared/assistant-utils';
 export interface XerticaAssistantProps {
     /**
      * Layout mode for the assistant panel
@@ -147,6 +147,11 @@ export interface XerticaAssistantProps {
      * Suggested prompts shown to the user in the empty state
      */
     suggestions?: Suggestion[];
+    /**
+     * Subtitle shown below the user's name in the empty state.
+     * @default 'Como posso ajudar?'
+     */
+    welcomeMessage?: string;
     /**
      * Callback fired when the user sends a message
      */
@@ -274,4 +279,4 @@ export interface XerticaAssistantProps {
  * 2. Use `onSendMessage` to capture user input and `responseGenerator` to provide AI responses in demo mode.
  * 3. Supports automatic Markdown rendering and syntax-highlighted code blocks.
  */
-export declare function XerticaAssistant({ mode, isExpanded: controlledIsExpanded, onToggle, defaultTab, demoMode, onNavigateSettings, onNavigateFullPage, userName, initialMessages, savedConversations, suggestions: propSuggestions, onSendMessage, onFileAttach, isProcessing, width, height, className, mobileFloating, customResponses, responseGenerator, richSuggestions, onRichAction, onEvaluation, feedbackOptions, showHistory, showFavorites, enableAudioInput, enableFileAttachment, enableDocumentCreation, enablePodcastGeneration, enableSearch, }: XerticaAssistantProps): import("react/jsx-runtime").JSX.Element;
+export declare function XerticaAssistant({ mode, isExpanded: controlledIsExpanded, onToggle, defaultTab, demoMode, onNavigateSettings, onNavigateFullPage, userName, initialMessages, savedConversations, suggestions: propSuggestions, onSendMessage, onFileAttach, isProcessing, width, height, className, mobileFloating, customResponses, responseGenerator, richSuggestions, welcomeMessage, onRichAction, onEvaluation, feedbackOptions, showHistory, showFavorites, enableAudioInput, enableFileAttachment, enableDocumentCreation, enablePodcastGeneration, enableSearch, }: XerticaAssistantProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/blocks/audio-player/AudioPlayer.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Props for the AudioPlayer component.
+ */
+interface AudioPlayerProps {
+    /** Whether the player is currently visible and open */
+    isOpen: boolean;
+    /** Callback to close the player bar */
+    onClose: () => void;
+    /** Pass sidebar expansion state to adjust layout positioning (optional, now uses LayoutContext) */
+    sidebarExpanded?: boolean;
+    /** Title of the audio track/podcast */
+    title?: string;
+    /** Subtitle or source information */
+    subtitle?: string;
+    /** Total duration in seconds */
+    duration?: number;
+    /** Initial or current playback time in seconds */
+    currentTime?: number;
+}
+/**
+ * Global floating Audio Player bar.
+ *
+ * @description
+ * A fixed-position playback bar that handles audio progress, volume,
+ * and specific podcast actions (reset, speed, info, refresh).
+ * It transitions smoothly from the bottom of the screen.
+ *
+ * @ai-rules
+ * 1. Placement: This component should typically be rendered once at the top level (e.g., in a Layout) and controlled via global state.
+ * 2. Positional logic: It automatically offsets itself based on `sidebarExpanded` to avoid overlapping navigation.
+ * 3. Use `duration` and `currentTime` to synchronize with external audio state if needed.
+ */
+export declare function AudioPlayer({ isOpen, onClose, title, subtitle, duration, // 20:00
+currentTime }: AudioPlayerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/blocks/audio-player/index.d.ts

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

package/dist/components/blocks/document-editor/DocumentEditor.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Props for the DocumentEditor component.
+ */
+interface DocumentEditorProps {
+    /** Initial markdown or plain text content */
+    initialContent: string;
+    /** Title for the document (default: 'New Document') */
+    initialTitle?: string;
+    /** Callback to close the editor */
+    onClose: () => void;
+}
+/**
+ * Rich-text document editor with markdown compatibility.
+ *
+ * @description
+ * Provides a content-editable environment for document editing. It supports
+ * basic formatting (bold, italic, headers, lists) and maintains an edit history
+ * for Undo/Redo. It also handles simple markdown-to-HTML conversion for initial loading.
+ *
+ * @ai-rules
+ * 1. Use this component for full-screen editing experiences or side-panel document refinement.
+ * 2. It tracks unsaved changes internally; ensure you handle persistence via future prop extensions or external state.
+ * 3. The `convertMarkdownToHtml` helper is basic — it does not support complex nested markdown structures.
+ */
+export declare function DocumentEditor({ initialContent, initialTitle, onClose }: DocumentEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/blocks/document-editor/index.d.ts

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

package/dist/components/blocks/podcast-player/PodcastPlayer.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Props for the PodcastPlayer component.
+ */
+interface PodcastPlayerProps {
+    /** Whether the player is currently visible and open */
+    isOpen: boolean;
+    /** Callback to close the player bar */
+    onClose: () => void;
+    /** Pass sidebar expansion state to adjust layout positioning (optional, now uses LayoutContext) */
+    sidebarExpanded?: boolean;
+    /** Title of the podcast/process track */
+    title?: string;
+    /** Subtitle or source information */
+    subtitle?: string;
+    /** Total duration in seconds */
+    duration?: number;
+    /** Initial or current playback time in seconds */
+    currentTime?: number;
+    /** Display mode of the player */
+    variant?: 'fixed' | 'inline';
+    /** How the fixed player occupies space */
+    layoutMode?: 'viewport' | 'container';
+    /** Optional state of the right-side panel for layout adjustments */
+    rightSidebarState?: 'none' | 'collapsed' | 'expanded';
+}
+/**
+ * Advanced Podcast Player component.
+ *
+ * @description
+ * An enhanced version of the Audio Player that supports multiple layout modes
+ * (fixed or inline), viewport portals, and responsive mobile rendering. It uses
+ * a theme-aware primary background when fixed.
+ *
+ * @ai-rules
+ * 1. Portals: When `variant="fixed"` and `layoutMode="viewport"`, it uses `createPortal` to render at the document root.
+ * 2. Variant: Use `variant="fixed"` for global playback; use `variant="inline"` for embedding directly in content cards.
+ * 3. Mobile: This component has a dedicated vertical layout for mobile screens (< 768px).
+ */
+export declare function PodcastPlayer({ isOpen, onClose, title, subtitle, duration, // 20:00
+currentTime, variant, layoutMode, rightSidebarState }: PodcastPlayerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/blocks/podcast-player/index.d.ts

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

package/dist/components/layout/sidebar/index.d.ts

@@ -1 +1,3 @@
 export * from './sidebar';
+export { useSidebar } from './use-sidebar';
+export type { UseSidebarProps } from './use-sidebar';

package/dist/components/layout/sidebar/sidebar.d.ts

@@ -33,6 +33,14 @@ export interface RouteConfig {
     /** Child routes exposed via contextual menu button at the end of the item */
     children?: RouteConfig[];
 }
+export interface NavigationItem {
+    path: string;
+    label: string;
+    icon?: any;
+    active: boolean;
+    children?: RouteConfig[];
+    actions?: ActionMenuItem[];
+}
 export interface SidebarFilterConfig {
     show: boolean;
     content?: React.ReactNode;
@@ -116,6 +124,66 @@ export interface SidebarProps {
     /** Pixel width when expanded (desktop) */
     width?: number;
 }
+/**
+ * Root container for the Sidebar. Provides context to all sub-components.
+ * Use this when building a fully custom sidebar layout.
+ *
+ * @example
+ * <Sidebar.Root expanded={expanded} onToggle={toggle} width={280}>
+ *   <Sidebar.Header logo={<MyLogo />} />
+ *   <Sidebar.Nav navigationGroups={groups} />
+ *   <Sidebar.Footer user={user} onLogout={logout} />
+ * </Sidebar.Root>
+ */
+declare function SidebarRoot({ expanded: expandedProp, onToggle: onToggleProp, navigate: navigateProp, location: locationProp, width: widthProp, children, className, }: {
+    expanded?: boolean;
+    onToggle?: () => void;
+    navigate?: (path: string) => void;
+    location?: {
+        pathname: string;
+    };
+    width?: number;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Toggle button + logo header area for the Sidebar.
+ */
+declare function SidebarHeader({ logo, logoCollapsed, }: {
+    logo?: React.ReactNode;
+    logoCollapsed?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Navigation area for the Sidebar (default variant).
+ * Renders grouped or flat navigation items with overflow handling.
+ */
+declare function SidebarNav({ navigationGroups, routes, variant, }: {
+    navigationGroups?: RouteGroup[];
+    routes?: RouteConfig[];
+    variant?: "default" | "assistant";
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Assistant-specific search + fixed area header for the Sidebar.
+ */
+declare function SidebarSearch({ fixedArea, search, }: {
+    fixedArea?: SidebarFixedAreaConfig;
+    search?: SidebarSearchConfig;
+}): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Footer area for the Sidebar with user info, settings, and logout.
+ */
+declare function SidebarFooter({ user, onLogout, onSettingsClick, showUser, showSettings, showLogout, }: {
+    user?: {
+        name?: string;
+        email?: string;
+        avatar?: string;
+    } | null;
+    onLogout?: () => void;
+    onSettingsClick?: () => void;
+    showUser?: boolean;
+    showSettings?: boolean;
+    showLogout?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 /**
  * Primary navigation sidebar component.
  *
@@ -127,9 +195,21 @@ export interface SidebarProps {
  * This component is autonomous: it works out-of-the-box using local state or
  * integrates automatically with `LayoutContext` if wrapped in `LayoutProvider`.
  *
+ * For advanced customization, use the Compound Component API:
+ * `<Sidebar.Root>`, `<Sidebar.Header>`, `<Sidebar.Search>`, `<Sidebar.Nav>`, `<Sidebar.Footer>`
+ *
  * @ai-rules
  * 1. NEVER recreate the sidebar with raw Tailwind classes — always use this component.
  * 2. Use `variant="assistant"` for AI/tool sidebars; use `variant="default"` for standard navigation.
  * 3. Supports `Ctrl+B` keyboard shortcut automatically via `LayoutProvider`.
  */
 export declare function Sidebar({ expanded: expandedProp, onToggle: onToggleProp, user, onLogout, onSettingsClick, location: locationProp, navigate: navigateProp, routes, logo, logoCollapsed, variant, fixedArea, search, navigationGroups, footer, showFooter, width: widthProp, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Sidebar {
+    var Root: typeof SidebarRoot;
+    var Header: typeof SidebarHeader;
+    var Search: typeof SidebarSearch;
+    var Nav: typeof SidebarNav;
+    var Footer: typeof SidebarFooter;
+}
+export { useSidebar } from "./use-sidebar";
+export type { UseSidebarProps } from "./use-sidebar";

package/dist/components/layout/sidebar/use-sidebar.d.ts

@@ -0,0 +1,22 @@
+import { RouteGroup } from "./sidebar";
+export interface UseSidebarProps {
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    navigationGroups?: RouteGroup[];
+}
+export declare function useSidebar({ defaultExpanded, expanded: controlledExpanded, onExpandedChange, navigationGroups, }?: UseSidebarProps): {
+    expanded: boolean;
+    setExpanded: (value: boolean | ((prev: boolean) => boolean)) => void;
+    toggleExpanded: () => void;
+    isMobileViewport: boolean;
+    hasOverflow: boolean;
+    visibleItems: RouteGroup[];
+    overflowItems: RouteGroup[];
+    openSubmenu: string | null;
+    setOpenSubmenu: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    isFilterOpen: boolean;
+    setIsFilterOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    navRef: import("react").RefObject<HTMLElement>;
+    navigationGroups: RouteGroup[];
+};

package/dist/components/shared/layout-constants.d.ts

@@ -1,5 +1,5 @@
 /** Width of the sidebar when expanded (Desktop) */
-export declare const SIDEBAR_EXPANDED_WIDTH = 256;
+export declare const SIDEBAR_EXPANDED_WIDTH = 280;
 /** Width of the sidebar when collapsed (Desktop) */
 export declare const SIDEBAR_COLLAPSED_WIDTH = 80;
 /** Width of the assistant panel when expanded (Desktop) */

package/dist/components/ui/button/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "success" | "info" | "warning" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "success" | "info" | "warning" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**