@supernal/interface-nextjs 1.0.21 → 1.0.24

package/dist/index.css

@@ -0,0 +1,110 @@
+@import "katex/dist/katex.min.css";
+
+/* src/styles/markdown.css */
+.markdown-content {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+}
+.markdown-content code {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    "SF Mono",
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace;
+}
+.markdown-content :not(pre) > code {
+  font-size: 0.875em;
+  font-weight: 400;
+}
+.mermaid-diagram {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.mermaid-diagram svg {
+  max-width: 100%;
+  height: auto;
+}
+.mermaid-dark svg {
+  background: transparent;
+}
+.mermaid-light svg {
+  background: transparent;
+}
+.katex {
+  font-size: 1.05em;
+}
+.katex-display {
+  margin: 1rem 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.dark .katex {
+  color: rgb(229, 231, 235);
+}
+.markdown-content table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.markdown-content ul ul,
+.markdown-content ol ul,
+.markdown-content ul ol,
+.markdown-content ol ol {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  margin-left: 1.5rem;
+}
+.admonition {
+  margin: 1rem 0;
+  padding: 1rem;
+  border-left-width: 4px;
+  border-radius: 0.375rem;
+}
+.admonition-tip {
+  border-color: #10b981;
+}
+.admonition-warning {
+  border-color: #f59e0b;
+}
+.admonition-danger {
+  border-color: #ef4444;
+}
+.admonition-info {
+  border-color: #3b82f6;
+}
+.markdown-content input[type=checkbox] {
+  margin-right: 0.5rem;
+  cursor: pointer;
+}
+.markdown-content del {
+  opacity: 0.7;
+}
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  scroll-margin-top: 1rem;
+}
+.markdown-content pre[class*=language-] {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+@media (max-width: 640px) {
+  .markdown-content {
+    font-size: 0.875rem;
+  }
+  .katex {
+    font-size: 1em;
+  }
+  .markdown-content pre {
+    font-size: 0.75rem;
+  }
+}

package/dist/index.d.mts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React$1 from 'react';
 import { NavigationGraph, NavigationPath, NavigationContext, ToolMetadata } from '@supernal/interface/browser';
 import { AIInterface } from '@supernal/interface';
 export { AICommand, AIResponse } from '@supernal/interface';
 
 interface SupernalProviderProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     theme?: 'light' | 'dark' | 'auto';
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     mode?: 'fuzzy' | 'ai';
@@ -13,14 +13,19 @@ interface SupernalProviderProps {
     welcomeMessage?: string;
     routes?: Record<string, string>;
     disabled?: boolean;
+    glassMode?: boolean;
+    logo?: string;
+    variant?: 'full' | 'floating' | 'drawer' | 'subtitle';
+    displayMode?: 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
+    drawerSide?: 'left' | 'right';
     onNavigate?: (context: string) => void;
     onToolExecute?: (tool: string, result: any) => void;
 }
-declare function SupernalProvider({ children, theme, position, mode, apiKey, welcomeMessage, routes, disabled, onNavigate, onToolExecute, }: SupernalProviderProps): react_jsx_runtime.JSX.Element;
+declare function SupernalProvider({ children, theme, position, mode, apiKey, welcomeMessage, routes, disabled, glassMode, logo, variant, displayMode, drawerSide, onNavigate, onToolExecute, }: SupernalProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function NavigationContextProvider({ value, children }: {
     value: string;
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the NavigationGraph singleton
@@ -132,12 +137,15 @@ interface ChatContextType {
 }
 declare function useChatContext(): ChatContextType;
 declare function ChatProvider({ children, mode, apiKey, onToolExecute, }: {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     mode?: 'fuzzy' | 'ai';
     apiKey?: string;
     onToolExecute?: (tool: string, result: any) => void;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Type definitions for ChatBubble component
+ */
 interface Message {
     id: string;
     text: string;
@@ -145,10 +153,13 @@ interface Message {
     timestamp: string;
 }
 type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'left-center' | 'right-center' | 'bottom-center';
-type Variant = 'full' | 'floating';
+type Variant = 'full' | 'floating' | 'drawer' | 'subtitle';
+type DisplayMode = 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
 interface ChatBubbleConfig {
     /** Optional title for the chat header */
     title?: string;
+    /** Optional logo URL or data URI. Defaults to embedded Supernal Interface logo */
+    logo?: string;
     /** Optional avatar/icon (emoji, URL, or React node) */
     avatar?: string | React.ReactNode;
     /** Optional description shown in info popup */
@@ -182,7 +193,7 @@ interface ChatBubbleProps {
     onClearChat?: () => void;
     /** Positioning mode */
     position?: Position;
-    /** Variant: 'full' for expanded panel, 'floating' for mini draggable bubble */
+    /** Variant: 'full' for expanded panel, 'floating' for mini draggable bubble, 'drawer' for mobile swipeable drawer */
     variant?: Variant;
     /** Configuration for branding, text, and theme */
     config?: ChatBubbleConfig;
@@ -190,8 +201,71 @@ interface ChatBubbleProps {
     defaultExpanded?: boolean;
     /** Storage key for persisting state */
     storageKey?: string;
+    /** Display mode: 'auto' switches based on viewport, or manually set 'full'/'floating'/'drawer' */
+    displayMode?: DisplayMode;
+    /** Which side the drawer opens from (for drawer variant) */
+    drawerSide?: 'left' | 'right';
+}
+
+declare const ChatBubble: ({ messages, onSendMessage, onClearChat, position, variant, config: userConfig, defaultExpanded, storageKey, displayMode: propDisplayMode, drawerSide: propDrawerSide, }: ChatBubbleProps) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * SubtitleOverlay Component - Minimalist Voice-First Overlay
+ *
+ * A transparent subtitle-style chat overlay that floats over website content.
+ * Features:
+ * - Mobile-first: 100% opacity on mobile (always visible)
+ * - Desktop: Adaptive 10-90% opacity based on activity
+ * - Voice/text fusion with smart detection
+ * - Supernal @/ brand icon instead of microphone
+ * - Seamless mode switching
+ */
+
+interface SubtitleOverlayProps {
+    messages: Message[];
+    inputValue: string;
+    onInputChange: (value: string) => void;
+    onSendMessage: (text: string) => void;
+    voiceEnabled: boolean;
+    isListening: boolean;
+    onMicClick: () => void;
+    theme: 'light' | 'dark';
+    config: ChatBubbleConfig;
+    sttTranscript?: string;
+    resetTranscript?: () => void;
+    onSwitchToFullMode?: () => void;
 }
-declare const ChatBubble: ({ messages, onSendMessage, onClearChat, position, variant, config: userConfig, defaultExpanded, storageKey, }: ChatBubbleProps) => react_jsx_runtime.JSX.Element;
+declare const SubtitleOverlay: React$1.FC<SubtitleOverlayProps>;
+
+/**
+ * Chat Bubble Settings Modal Component
+ *
+ * Settings modal for ChatBubble configuration:
+ * - Theme (light/dark)
+ * - Glass mode (glassmorphism effect)
+ * - Notifications
+ */
+interface ChatBubbleSettings {
+    theme: 'light' | 'dark';
+    glassMode: boolean;
+    notifications: boolean;
+    displayMode?: 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
+    drawerSide?: 'left' | 'right';
+    subtitleOverlayEnabled?: boolean;
+    voiceEnabled: boolean;
+    usePremiumVoices: boolean;
+    autoReadResponses: boolean;
+    ttsSpeed: number;
+    sttAutoRecordTimeout: number;
+    sttAutoExecute: boolean;
+}
+interface ChatBubbleSettingsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    settings: ChatBubbleSettings;
+    onSettingsChange: (settings: ChatBubbleSettings) => void;
+}
+declare function ChatBubbleSettingsModal({ isOpen, onClose, settings, onSettingsChange, }: ChatBubbleSettingsModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface ChatInputContextType {
     /**
@@ -205,16 +279,114 @@ interface ChatInputContextType {
 }
 declare function useChatInput(): ChatInputContextType;
 declare function ChatInputProvider({ children }: {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
 interface AutoNavigationContextProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     routes?: Record<string, string>;
     onNavigate?: (context: string) => void;
 }
 declare function AutoNavigationContext({ children, routes, onNavigate, }: AutoNavigationContextProps): react_jsx_runtime.JSX.Element;
 
+interface ToolMenuCategory {
+    key: string;
+    displayName: string;
+    tools: ToolMetadata[];
+}
+interface UseToolMenuReturn {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    categories: ToolMenuCategory[];
+    totalTools: number;
+    contextLabel: string;
+}
+declare function useToolMenu(): UseToolMenuReturn;
+
+interface ToolMenuPopupProps {
+    isOpen: boolean;
+    onClose: () => void;
+    categories: ToolMenuCategory[];
+    totalTools: number;
+    contextLabel: string;
+}
+declare const ToolMenuPopup: React$1.FC<ToolMenuPopupProps>;
+
+/**
+ * ToolMenuPopupTrigger
+ *
+ * Manages keyboard shortcut triggers for the ToolMenuPopup.
+ * Renders the popup when open.
+ *
+ * Triggers:
+ * - Keyboard: `/` or `?` from an empty input (subtitle mode), `?` outside inputs, or Cmd/Ctrl+Shift+/
+ */
+declare const ToolMenuPopupTrigger: React$1.FC;
+
+/**
+ * Component Names - Named contracts for UI elements, variants, and layouts
+ *
+ * These provide type-safe references throughout the application.
+ * In production, consumers should generate their own ComponentNames using
+ * `si scan-names` and pass them via config.
+ *
+ * Naming convention:
+ * - Variant(X) → XVariant (e.g., Variant(ChatBubble) → ChatBubbleVariant)
+ * - Layout(X) → XLayout (e.g., Layout(Page) → PageLayout)
+ */
+declare const Components: {
+    readonly ChatToggleButton: "chat-toggle-button";
+    readonly ChatInput: "chat-message-input";
+    readonly ChatSendButton: "chat-send-button";
+    readonly ChatClearButton: "chat-clear-button";
+};
+/**
+ * ChatBubbleVariant - Display modes for the chat interface
+ * Usage: Variant(ChatBubble) → ChatBubbleVariant
+ */
+declare const ChatBubbleVariant: {
+    readonly full: "full";
+    readonly floating: "floating";
+    readonly drawer: "drawer";
+    readonly subtitle: "subtitle";
+};
+type ChatBubbleVariantType = keyof typeof ChatBubbleVariant;
+type ChatBubbleVariantValue = typeof ChatBubbleVariant[ChatBubbleVariantType];
+/**
+ * PageLayout - Page structure variants
+ * Usage: Layout(Page) → PageLayout
+ */
+declare const PageLayout: {
+    readonly default: "default";
+    readonly landing: "landing";
+    readonly docs: "docs";
+    readonly blog: "blog";
+};
+type PageLayoutType = keyof typeof PageLayout;
+type PageLayoutValue = typeof PageLayout[PageLayoutType];
+
+interface MessageRendererProps {
+    content: string;
+    theme?: 'light' | 'dark';
+}
+declare function MessageRenderer({ content, theme }: MessageRendererProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    children: string;
+    className?: string;
+    inline?: boolean;
+    theme?: 'light' | 'dark';
+}
+declare function CodeBlock({ children, className, inline, theme }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface MermaidDiagramProps {
+    chart: string;
+    theme?: 'light' | 'dark';
+}
+declare function MermaidDiagram({ chart, theme }: MermaidDiagramProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Tool Manager - Centralized system for tool execution and feedback
  *
@@ -335,4 +507,4 @@ declare function scoreToolMatch(query: string, tool: ToolMetadata): number;
  */
 declare function findBestMatch(query: string, tools: ToolMetadata[]): FuzzyMatchResult;
 
-export { AutoNavigationContext, ChatBubble, ChatInputProvider, ChatProvider, type CommandResult, DemoAIInterface, type FuzzyMatchResult, FuzzyMatcher, NavigationContextProvider, SupernalProvider, type SupernalProviderProps, type ToolExecutionResult, ToolManager, findBestMatch, scoreToolMatch, useAllContexts, useChatContext, useChatInput, useCurrentContext, useNavigate, useNavigationGraph, useNavigationPath, useRegisterTool };
+export { AutoNavigationContext, ChatBubble, type ChatBubbleSettings, ChatBubbleSettingsModal, ChatBubbleVariant, type ChatBubbleVariantType, type ChatBubbleVariantValue, ChatInputProvider, ChatProvider, CodeBlock, type CommandResult, Components, DemoAIInterface, type FuzzyMatchResult, FuzzyMatcher, MermaidDiagram, MessageRenderer, NavigationContextProvider, PageLayout, type PageLayoutType, type PageLayoutValue, SubtitleOverlay, SupernalProvider, type SupernalProviderProps, type ToolExecutionResult, ToolManager, type ToolMenuCategory, ToolMenuPopup, ToolMenuPopupTrigger, type UseToolMenuReturn, findBestMatch, scoreToolMatch, useAllContexts, useChatContext, useChatInput, useCurrentContext, useNavigate, useNavigationGraph, useNavigationPath, useRegisterTool, useToolMenu };

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React$1 from 'react';
 import { NavigationGraph, NavigationPath, NavigationContext, ToolMetadata } from '@supernal/interface/browser';
 import { AIInterface } from '@supernal/interface';
 export { AICommand, AIResponse } from '@supernal/interface';
 
 interface SupernalProviderProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     theme?: 'light' | 'dark' | 'auto';
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
     mode?: 'fuzzy' | 'ai';
@@ -13,14 +13,19 @@ interface SupernalProviderProps {
     welcomeMessage?: string;
     routes?: Record<string, string>;
     disabled?: boolean;
+    glassMode?: boolean;
+    logo?: string;
+    variant?: 'full' | 'floating' | 'drawer' | 'subtitle';
+    displayMode?: 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
+    drawerSide?: 'left' | 'right';
     onNavigate?: (context: string) => void;
     onToolExecute?: (tool: string, result: any) => void;
 }
-declare function SupernalProvider({ children, theme, position, mode, apiKey, welcomeMessage, routes, disabled, onNavigate, onToolExecute, }: SupernalProviderProps): react_jsx_runtime.JSX.Element;
+declare function SupernalProvider({ children, theme, position, mode, apiKey, welcomeMessage, routes, disabled, glassMode, logo, variant, displayMode, drawerSide, onNavigate, onToolExecute, }: SupernalProviderProps): react_jsx_runtime.JSX.Element;
 
 declare function NavigationContextProvider({ value, children }: {
     value: string;
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the NavigationGraph singleton
@@ -132,12 +137,15 @@ interface ChatContextType {
 }
 declare function useChatContext(): ChatContextType;
 declare function ChatProvider({ children, mode, apiKey, onToolExecute, }: {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     mode?: 'fuzzy' | 'ai';
     apiKey?: string;
     onToolExecute?: (tool: string, result: any) => void;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Type definitions for ChatBubble component
+ */
 interface Message {
     id: string;
     text: string;
@@ -145,10 +153,13 @@ interface Message {
     timestamp: string;
 }
 type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'left-center' | 'right-center' | 'bottom-center';
-type Variant = 'full' | 'floating';
+type Variant = 'full' | 'floating' | 'drawer' | 'subtitle';
+type DisplayMode = 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
 interface ChatBubbleConfig {
     /** Optional title for the chat header */
     title?: string;
+    /** Optional logo URL or data URI. Defaults to embedded Supernal Interface logo */
+    logo?: string;
     /** Optional avatar/icon (emoji, URL, or React node) */
     avatar?: string | React.ReactNode;
     /** Optional description shown in info popup */
@@ -182,7 +193,7 @@ interface ChatBubbleProps {
     onClearChat?: () => void;
     /** Positioning mode */
     position?: Position;
-    /** Variant: 'full' for expanded panel, 'floating' for mini draggable bubble */
+    /** Variant: 'full' for expanded panel, 'floating' for mini draggable bubble, 'drawer' for mobile swipeable drawer */
     variant?: Variant;
     /** Configuration for branding, text, and theme */
     config?: ChatBubbleConfig;
@@ -190,8 +201,71 @@ interface ChatBubbleProps {
     defaultExpanded?: boolean;
     /** Storage key for persisting state */
     storageKey?: string;
+    /** Display mode: 'auto' switches based on viewport, or manually set 'full'/'floating'/'drawer' */
+    displayMode?: DisplayMode;
+    /** Which side the drawer opens from (for drawer variant) */
+    drawerSide?: 'left' | 'right';
+}
+
+declare const ChatBubble: ({ messages, onSendMessage, onClearChat, position, variant, config: userConfig, defaultExpanded, storageKey, displayMode: propDisplayMode, drawerSide: propDrawerSide, }: ChatBubbleProps) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * SubtitleOverlay Component - Minimalist Voice-First Overlay
+ *
+ * A transparent subtitle-style chat overlay that floats over website content.
+ * Features:
+ * - Mobile-first: 100% opacity on mobile (always visible)
+ * - Desktop: Adaptive 10-90% opacity based on activity
+ * - Voice/text fusion with smart detection
+ * - Supernal @/ brand icon instead of microphone
+ * - Seamless mode switching
+ */
+
+interface SubtitleOverlayProps {
+    messages: Message[];
+    inputValue: string;
+    onInputChange: (value: string) => void;
+    onSendMessage: (text: string) => void;
+    voiceEnabled: boolean;
+    isListening: boolean;
+    onMicClick: () => void;
+    theme: 'light' | 'dark';
+    config: ChatBubbleConfig;
+    sttTranscript?: string;
+    resetTranscript?: () => void;
+    onSwitchToFullMode?: () => void;
 }
-declare const ChatBubble: ({ messages, onSendMessage, onClearChat, position, variant, config: userConfig, defaultExpanded, storageKey, }: ChatBubbleProps) => react_jsx_runtime.JSX.Element;
+declare const SubtitleOverlay: React$1.FC<SubtitleOverlayProps>;
+
+/**
+ * Chat Bubble Settings Modal Component
+ *
+ * Settings modal for ChatBubble configuration:
+ * - Theme (light/dark)
+ * - Glass mode (glassmorphism effect)
+ * - Notifications
+ */
+interface ChatBubbleSettings {
+    theme: 'light' | 'dark';
+    glassMode: boolean;
+    notifications: boolean;
+    displayMode?: 'auto' | 'floating' | 'full' | 'drawer' | 'subtitle';
+    drawerSide?: 'left' | 'right';
+    subtitleOverlayEnabled?: boolean;
+    voiceEnabled: boolean;
+    usePremiumVoices: boolean;
+    autoReadResponses: boolean;
+    ttsSpeed: number;
+    sttAutoRecordTimeout: number;
+    sttAutoExecute: boolean;
+}
+interface ChatBubbleSettingsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    settings: ChatBubbleSettings;
+    onSettingsChange: (settings: ChatBubbleSettings) => void;
+}
+declare function ChatBubbleSettingsModal({ isOpen, onClose, settings, onSettingsChange, }: ChatBubbleSettingsModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface ChatInputContextType {
     /**
@@ -205,16 +279,114 @@ interface ChatInputContextType {
 }
 declare function useChatInput(): ChatInputContextType;
 declare function ChatInputProvider({ children }: {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
 interface AutoNavigationContextProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     routes?: Record<string, string>;
     onNavigate?: (context: string) => void;
 }
 declare function AutoNavigationContext({ children, routes, onNavigate, }: AutoNavigationContextProps): react_jsx_runtime.JSX.Element;
 
+interface ToolMenuCategory {
+    key: string;
+    displayName: string;
+    tools: ToolMetadata[];
+}
+interface UseToolMenuReturn {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    categories: ToolMenuCategory[];
+    totalTools: number;
+    contextLabel: string;
+}
+declare function useToolMenu(): UseToolMenuReturn;
+
+interface ToolMenuPopupProps {
+    isOpen: boolean;
+    onClose: () => void;
+    categories: ToolMenuCategory[];
+    totalTools: number;
+    contextLabel: string;
+}
+declare const ToolMenuPopup: React$1.FC<ToolMenuPopupProps>;
+
+/**
+ * ToolMenuPopupTrigger
+ *
+ * Manages keyboard shortcut triggers for the ToolMenuPopup.
+ * Renders the popup when open.
+ *
+ * Triggers:
+ * - Keyboard: `/` or `?` from an empty input (subtitle mode), `?` outside inputs, or Cmd/Ctrl+Shift+/
+ */
+declare const ToolMenuPopupTrigger: React$1.FC;
+
+/**
+ * Component Names - Named contracts for UI elements, variants, and layouts
+ *
+ * These provide type-safe references throughout the application.
+ * In production, consumers should generate their own ComponentNames using
+ * `si scan-names` and pass them via config.
+ *
+ * Naming convention:
+ * - Variant(X) → XVariant (e.g., Variant(ChatBubble) → ChatBubbleVariant)
+ * - Layout(X) → XLayout (e.g., Layout(Page) → PageLayout)
+ */
+declare const Components: {
+    readonly ChatToggleButton: "chat-toggle-button";
+    readonly ChatInput: "chat-message-input";
+    readonly ChatSendButton: "chat-send-button";
+    readonly ChatClearButton: "chat-clear-button";
+};
+/**
+ * ChatBubbleVariant - Display modes for the chat interface
+ * Usage: Variant(ChatBubble) → ChatBubbleVariant
+ */
+declare const ChatBubbleVariant: {
+    readonly full: "full";
+    readonly floating: "floating";
+    readonly drawer: "drawer";
+    readonly subtitle: "subtitle";
+};
+type ChatBubbleVariantType = keyof typeof ChatBubbleVariant;
+type ChatBubbleVariantValue = typeof ChatBubbleVariant[ChatBubbleVariantType];
+/**
+ * PageLayout - Page structure variants
+ * Usage: Layout(Page) → PageLayout
+ */
+declare const PageLayout: {
+    readonly default: "default";
+    readonly landing: "landing";
+    readonly docs: "docs";
+    readonly blog: "blog";
+};
+type PageLayoutType = keyof typeof PageLayout;
+type PageLayoutValue = typeof PageLayout[PageLayoutType];
+
+interface MessageRendererProps {
+    content: string;
+    theme?: 'light' | 'dark';
+}
+declare function MessageRenderer({ content, theme }: MessageRendererProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    children: string;
+    className?: string;
+    inline?: boolean;
+    theme?: 'light' | 'dark';
+}
+declare function CodeBlock({ children, className, inline, theme }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface MermaidDiagramProps {
+    chart: string;
+    theme?: 'light' | 'dark';
+}
+declare function MermaidDiagram({ chart, theme }: MermaidDiagramProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Tool Manager - Centralized system for tool execution and feedback
  *
@@ -335,4 +507,4 @@ declare function scoreToolMatch(query: string, tool: ToolMetadata): number;
  */
 declare function findBestMatch(query: string, tools: ToolMetadata[]): FuzzyMatchResult;
 
-export { AutoNavigationContext, ChatBubble, ChatInputProvider, ChatProvider, type CommandResult, DemoAIInterface, type FuzzyMatchResult, FuzzyMatcher, NavigationContextProvider, SupernalProvider, type SupernalProviderProps, type ToolExecutionResult, ToolManager, findBestMatch, scoreToolMatch, useAllContexts, useChatContext, useChatInput, useCurrentContext, useNavigate, useNavigationGraph, useNavigationPath, useRegisterTool };
+export { AutoNavigationContext, ChatBubble, type ChatBubbleSettings, ChatBubbleSettingsModal, ChatBubbleVariant, type ChatBubbleVariantType, type ChatBubbleVariantValue, ChatInputProvider, ChatProvider, CodeBlock, type CommandResult, Components, DemoAIInterface, type FuzzyMatchResult, FuzzyMatcher, MermaidDiagram, MessageRenderer, NavigationContextProvider, PageLayout, type PageLayoutType, type PageLayoutValue, SubtitleOverlay, SupernalProvider, type SupernalProviderProps, type ToolExecutionResult, ToolManager, type ToolMenuCategory, ToolMenuPopup, ToolMenuPopupTrigger, type UseToolMenuReturn, findBestMatch, scoreToolMatch, useAllContexts, useChatContext, useChatInput, useCurrentContext, useNavigate, useNavigationGraph, useNavigationPath, useRegisterTool, useToolMenu };