flikkui 0.1.0-beta.9 → 0.2.0-beta.1

package/dist/components/ai/ArtifactContainer/ArtifactContainer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ArtifactContainerProps, ArtifactContainerChatProps, ArtifactContainerCanvasProps } from "./ArtifactContainer.types";
+export declare const ArtifactContainer: React.FC<ArtifactContainerProps> & {
+    Chat: React.FC<ArtifactContainerChatProps>;
+    Canvas: React.FC<ArtifactContainerCanvasProps>;
+};

package/dist/components/ai/ArtifactContainer/ArtifactContainer.js

@@ -0,0 +1,127 @@
+import React__default, { createContext, useRef, useState, useCallback, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { artifactContainerTheme, handleSizes } from './ArtifactContainer.theme.js';
+
+// Context for compound components
+const ArtifactContainerContext = createContext(undefined);
+const useArtifactContainerContext = () => {
+    const ctx = useContext(ArtifactContainerContext);
+    if (!ctx) {
+        throw new Error("ArtifactContainer compound components must be used within <ArtifactContainer>");
+    }
+    return ctx;
+};
+// Chat Pane Component
+const ArtifactContainerChat = ({ className, children, ...props }) => {
+    useArtifactContainerContext();
+    return (React__default.createElement("div", { className: cn(artifactContainerTheme.paneStyle, artifactContainerTheme.chatPaneStyle, className), ...props }, children));
+};
+ArtifactContainerChat.displayName = "ArtifactContainer.Chat";
+// Canvas Pane Component
+const ArtifactContainerCanvas = ({ className, children, ...props }) => {
+    useArtifactContainerContext();
+    return (React__default.createElement("div", { className: cn(artifactContainerTheme.paneStyle, artifactContainerTheme.canvasPaneStyle, className), ...props }, children));
+};
+ArtifactContainerCanvas.displayName = "ArtifactContainer.Canvas";
+const ArtifactContainerRoot = ({ direction = "horizontal", defaultSplit = 50, minPaneSize = 20, onSplitChange, className, children, ...props }) => {
+    const containerRef = useRef(null);
+    const [split, setSplit] = useState(defaultSplit);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    // Calculate split from pointer position
+    const getSplitFromPosition = useCallback((clientX, clientY) => {
+        if (!containerRef.current)
+            return split;
+        const rect = containerRef.current.getBoundingClientRect();
+        let percentage;
+        if (direction === "horizontal") {
+            percentage = ((clientX - rect.left) / rect.width) * 100;
+        }
+        else {
+            percentage = ((clientY - rect.top) / rect.height) * 100;
+        }
+        // Clamp to min/max
+        return Math.max(minPaneSize, Math.min(100 - minPaneSize, percentage));
+    }, [direction, minPaneSize, split]);
+    // Handle drag start
+    const handlePointerDown = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(true);
+        // Capture cursor globally while dragging
+        document.body.style.cursor =
+            direction === "horizontal" ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+        const handleMove = (moveEvent) => {
+            const newSplit = getSplitFromPosition(moveEvent.clientX, moveEvent.clientY);
+            setSplit(newSplit);
+            onSplitChange === null || onSplitChange === void 0 ? void 0 : onSplitChange(newSplit);
+        };
+        const handleEnd = () => {
+            setIsDragging(false);
+            // Restore body styles
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            document.removeEventListener("pointermove", handleMove);
+            document.removeEventListener("pointerup", handleEnd);
+        };
+        document.addEventListener("pointermove", handleMove);
+        document.addEventListener("pointerup", handleEnd);
+    }, [getSplitFromPosition, onSplitChange, direction]);
+    // Double-click to reset to 50%
+    const handleDoubleClick = useCallback(() => {
+        setSplit(50);
+        onSplitChange === null || onSplitChange === void 0 ? void 0 : onSplitChange(50);
+    }, [onSplitChange]);
+    // Context value
+    const contextValue = {
+        direction,
+        split,
+    };
+    // Extract Chat and Canvas children
+    const childArray = React__default.Children.toArray(children);
+    const chatChild = childArray.find((child) => React__default.isValidElement(child) && child.type === ArtifactContainerChat);
+    const canvasChild = childArray.find((child) => React__default.isValidElement(child) && child.type === ArtifactContainerCanvas);
+    // Calculate pane styles
+    // We substract 1px for the border line between panes
+    const firstPaneStyle = direction === "horizontal"
+        ? { width: `${split}%` }
+        : { height: `${split}%` };
+    const secondPaneStyle = direction === "horizontal"
+        ? { width: `${100 - split}%` }
+        : { height: `${100 - split}%` };
+    return (React__default.createElement(ArtifactContainerContext.Provider, { value: contextValue },
+        React__default.createElement("div", { ref: containerRef, className: cn(artifactContainerTheme.containerStyle, direction === "vertical" && "flex-col", className), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), ...props },
+            chatChild && (React__default.createElement("div", { style: firstPaneStyle, className: artifactContainerTheme.paneStyle },
+                chatChild,
+                React__default.createElement("div", { className: cn("absolute bg-[var(--color-border)] transition-opacity duration-300", direction === "horizontal"
+                        ? "top-0 right-0 w-[1px] h-full"
+                        : "bottom-0 left-0 w-full h-[1px]", isHovered || isDragging ? "opacity-100" : "opacity-60") }))),
+            React__default.createElement("div", { className: cn(artifactContainerTheme.handleStyle, handleSizes[direction], isDragging && artifactContainerTheme.handleActiveStyle), style: {
+                    // Negative margin to center the handle over the border
+                    [direction === "horizontal" ? "marginLeft" : "marginTop"]: direction === "horizontal" ? "-8px" : "-8px",
+                }, onPointerDown: handlePointerDown, onDoubleClick: handleDoubleClick, role: "separator", "aria-orientation": direction, "aria-valuenow": Math.round(split), "aria-valuemin": minPaneSize, "aria-valuemax": 100 - minPaneSize, tabIndex: 0, "aria-label": "Resize handle" },
+                React__default.createElement("div", { className: cn("absolute bg-[var(--color-background)] border border-[var(--color-border)] shadow-sm flex items-center justify-center transition-all duration-200", 
+                    // Pill Shape
+                    direction === "horizontal"
+                        ? "w-4 h-8 rounded-full"
+                        : "w-8 h-4 rounded-full", 
+                    // State styles
+                    isHovered || isDragging
+                        ? "opacity-100 scale-100"
+                        : "opacity-0 scale-90", isDragging &&
+                        "ring-2 ring-[var(--color-primary-200)] border-[var(--color-primary)]") },
+                    React__default.createElement("div", { className: cn("flex gap-0.5", direction === "horizontal" ? "flex-col" : "flex-row") },
+                        React__default.createElement("div", { className: "w-0.5 h-0.5 rounded-full bg-[var(--color-text-tertiary)]" }),
+                        React__default.createElement("div", { className: "w-0.5 h-0.5 rounded-full bg-[var(--color-text-tertiary)]" }),
+                        React__default.createElement("div", { className: "w-0.5 h-0.5 rounded-full bg-[var(--color-text-tertiary)]" }))),
+                React__default.createElement("div", { className: cn("absolute bg-[var(--color-primary)] opacity-0 transition-opacity duration-200", direction === "horizontal" ? "w-[2px] h-full" : "h-[2px] w-full", isDragging && "opacity-100") })),
+            canvasChild && (React__default.createElement("div", { style: secondPaneStyle, className: artifactContainerTheme.paneStyle }, canvasChild)))));
+};
+ArtifactContainerRoot.displayName = "ArtifactContainer";
+// Attach compound components
+const ArtifactContainer = Object.assign(ArtifactContainerRoot, {
+    Chat: ArtifactContainerChat,
+    Canvas: ArtifactContainerCanvas,
+});
+
+export { ArtifactContainer };

package/dist/components/ai/ArtifactContainer/ArtifactContainer.theme.d.ts

@@ -0,0 +1,6 @@
+import { ArtifactContainerTheme } from "./ArtifactContainer.types";
+export declare const artifactContainerTheme: ArtifactContainerTheme;
+export declare const handleSizes: {
+    horizontal: string;
+    vertical: string;
+};

package/dist/components/ai/ArtifactContainer/ArtifactContainer.theme.js

@@ -0,0 +1,14 @@
+const artifactContainerTheme = {
+    containerStyle: "flex w-full h-full overflow-hidden bg-[var(--color-background)] rounded-[var(--radius-xl)] border border-[var(--color-border)] shadow-sm isolate",
+    paneStyle: "overflow-auto relative min-w-0 min-h-0",
+    chatPaneStyle: "flex flex-col bg-[var(--color-background)] z-0",
+    canvasPaneStyle: "flex flex-col bg-[var(--color-background-secondary)] z-0",
+    handleStyle: "flex-shrink-0 relative z-20 flex items-center justify-center transition-all duration-300 ease-out hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/5 dark:active:bg-white/10 group outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    handleActiveStyle: "bg-black/5 dark:bg-white/5",
+};
+const handleSizes = {
+    horizontal: "w-4 -ml-2 h-full cursor-col-resize",
+    vertical: "h-4 -mt-2 w-full cursor-row-resize",
+};
+
+export { artifactContainerTheme, handleSizes };

package/dist/components/ai/ArtifactContainer/ArtifactContainer.types.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+export type SplitDirection = "horizontal" | "vertical";
+export interface ArtifactContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Direction of the split layout
+     * @default "horizontal"
+     */
+    direction?: SplitDirection;
+    /**
+     * Default split percentage (0-100)
+     * @default 50
+     */
+    defaultSplit?: number;
+    /**
+     * Minimum size for each pane as percentage
+     * @default 20
+     */
+    minPaneSize?: number;
+    /**
+     * Callback when split percentage changes
+     */
+    onSplitChange?: (split: number) => void;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Children - should contain Chat and Canvas components
+     */
+    children: React.ReactNode;
+}
+export interface ArtifactContainerChatProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Additional className
+     */
+    className?: string;
+    children: React.ReactNode;
+}
+export interface ArtifactContainerCanvasProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Additional className
+     */
+    className?: string;
+    children: React.ReactNode;
+}
+export interface ArtifactContainerContextValue {
+    direction: SplitDirection;
+    split: number;
+}
+export interface ArtifactContainerTheme {
+    containerStyle?: string;
+    paneStyle?: string;
+    chatPaneStyle?: string;
+    canvasPaneStyle?: string;
+    handleStyle?: string;
+    handleActiveStyle?: string;
+}

package/dist/components/ai/ArtifactContainer/index.d.ts

@@ -0,0 +1,3 @@
+export { ArtifactContainer } from "./ArtifactContainer";
+export type { ArtifactContainerProps, ArtifactContainerChatProps, ArtifactContainerCanvasProps, ArtifactContainerContextValue, ArtifactContainerTheme, SplitDirection, } from "./ArtifactContainer.types";
+export { artifactContainerTheme, handleSizes } from "./ArtifactContainer.theme";

package/dist/components/ai/ChatInterface/ChatInterface.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from "react";
+import { ChatInterfaceProps } from "./ChatInterface.types";
+/**
+ * ChatInterface Header component
+ */
+interface ChatInterfaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * ChatInterface Body component
+ */
+interface ChatInterfaceBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * ChatInterface Footer component
+ */
+interface ChatInterfaceFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export declare const ChatInterface: React.ForwardRefExoticComponent<ChatInterfaceProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<ChatInterfaceHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<ChatInterfaceBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<ChatInterfaceFooterProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/ai/ChatInterface/ChatInterface.js

@@ -0,0 +1,65 @@
+import React__default, { useState } from 'react';
+import { ChatInterfaceContext } from './ChatInterface.types.js';
+import { chatInterfaceTheme } from './ChatInterface.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const ChatInterfaceHeader = React__default.forwardRef(({ children, className, ...props }, ref) => (React__default.createElement("div", { ref: ref, className: cn(chatInterfaceTheme.headerStyle, className), ...props }, children)));
+ChatInterfaceHeader.displayName = "ChatInterface.Header";
+const ChatInterfaceBody = React__default.forwardRef(({ children, className, ...props }, ref) => (React__default.createElement("div", { ref: ref, className: cn(chatInterfaceTheme.bodyStyle, className), ...props }, children)));
+ChatInterfaceBody.displayName = "ChatInterface.Body";
+const ChatInterfaceFooter = React__default.forwardRef(({ children, className, ...props }, ref) => (React__default.createElement("div", { ref: ref, className: cn(chatInterfaceTheme.footerStyle, className), ...props }, children)));
+ChatInterfaceFooter.displayName = "ChatInterface.Footer";
+/**
+ * ChatInterface - Main compound container for AI chat UI
+ *
+ * Provides a flexible layout for chat interfaces with optional context
+ * for shared state between child components.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ChatInterface>
+ *   <ChatInterface.Body>
+ *     <MessageHistory messages={messages} />
+ *     <ThinkingIndicator visible={isLoading} />
+ *   </ChatInterface.Body>
+ *   <ChatInterface.Footer>
+ *     <PromptInput onSubmit={handleSubmit} />
+ *   </ChatInterface.Footer>
+ * </ChatInterface>
+ * ```
+ *
+ * @example With context
+ * ```tsx
+ * <ChatInterface messages={messages} isLoading={isLoading}>
+ *   <ChatInterface.Body>
+ *     <MessageHistory messages={messages} />
+ *   </ChatInterface.Body>
+ *   <ChatInterface.Footer>
+ *     <PromptInput />
+ *   </ChatInterface.Footer>
+ * </ChatInterface>
+ * ```
+ */
+const ChatInterfaceRoot = React__default.forwardRef(({ children, messages = [], isLoading = false, className, theme: customTheme = {}, ...props }, ref) => {
+    const [inputValue, setInputValue] = useState("");
+    // Merge theme
+    const containerStyle = customTheme.containerStyle || chatInterfaceTheme.containerStyle;
+    // Context value
+    const contextValue = {
+        messages,
+        isLoading,
+        inputValue,
+        setInputValue,
+    };
+    return (React__default.createElement(ChatInterfaceContext.Provider, { value: contextValue },
+        React__default.createElement("div", { ref: ref, className: cn(containerStyle, className), ...props }, children)));
+});
+ChatInterfaceRoot.displayName = "ChatInterface";
+// Attach compound components
+const ChatInterface = Object.assign(ChatInterfaceRoot, {
+    Header: ChatInterfaceHeader,
+    Body: ChatInterfaceBody,
+    Footer: ChatInterfaceFooter,
+});
+
+export { ChatInterface };

package/dist/components/ai/ChatInterface/ChatInterface.theme.d.ts

@@ -0,0 +1,2 @@
+import { ChatInterfaceTheme } from "./ChatInterface.types";
+export declare const chatInterfaceTheme: ChatInterfaceTheme;

package/dist/components/ai/ChatInterface/ChatInterface.theme.js

@@ -0,0 +1,8 @@
+const chatInterfaceTheme = {
+    containerStyle: "flex flex-col h-full bg-[var(--color-background)]",
+    headerStyle: "flex-shrink-0 border-b border-[var(--color-border)] p-4",
+    bodyStyle: "flex-1 overflow-hidden",
+    footerStyle: "flex-shrink-0 border-t border-[var(--color-border)] p-4",
+};
+
+export { chatInterfaceTheme };

package/dist/components/ai/ChatInterface/ChatInterface.types.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+import { ChatMessageData } from "../MessageHistory/MessageHistory.types";
+/**
+ * ChatInterface context value
+ */
+export interface ChatInterfaceContextValue {
+    /**
+     * Messages in the chat
+     */
+    messages: ChatMessageData[];
+    /**
+     * Whether the AI is currently generating a response
+     */
+    isLoading: boolean;
+    /**
+     * Current input value
+     */
+    inputValue: string;
+    /**
+     * Set input value
+     */
+    setInputValue: (value: string) => void;
+}
+/**
+ * ChatInterface component props
+ */
+export interface ChatInterfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children components (MessageHistory, ThinkingIndicator, PromptInput, etc.)
+     */
+    children: ReactNode;
+    /**
+     * Messages in the chat (for context)
+     */
+    messages?: ChatMessageData[];
+    /**
+     * Whether the AI is currently generating
+     */
+    isLoading?: boolean;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: ChatInterfaceThemeOverrides;
+}
+/**
+ * Theme configuration
+ */
+export interface ChatInterfaceTheme {
+    containerStyle: string;
+    headerStyle: string;
+    bodyStyle: string;
+    footerStyle: string;
+}
+/**
+ * Theme overrides
+ */
+export interface ChatInterfaceThemeOverrides {
+    containerStyle?: string;
+    headerStyle?: string;
+    bodyStyle?: string;
+    footerStyle?: string;
+}
+export declare const ChatInterfaceContext: import("react").Context<ChatInterfaceContextValue | undefined>;
+export declare const useChatInterfaceContext: () => ChatInterfaceContextValue;

package/dist/components/ai/ChatInterface/ChatInterface.types.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+// Context
+const ChatInterfaceContext = createContext(undefined);
+const useChatInterfaceContext = () => {
+    const context = useContext(ChatInterfaceContext);
+    if (!context) {
+        // Return default values when not in context (allows standalone use)
+        return {
+            messages: [],
+            isLoading: false,
+            inputValue: "",
+            setInputValue: () => { },
+        };
+    }
+    return context;
+};
+
+export { ChatInterfaceContext, useChatInterfaceContext };

package/dist/components/ai/ChatInterface/index.d.ts

@@ -0,0 +1,4 @@
+export { ChatInterface } from "./ChatInterface";
+export { chatInterfaceTheme } from "./ChatInterface.theme";
+export { useChatInterfaceContext } from "./ChatInterface.types";
+export type { ChatInterfaceProps, ChatInterfaceContextValue, ChatInterfaceTheme, ChatInterfaceThemeOverrides, } from "./ChatInterface.types";

package/dist/components/ai/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { CodeBlockProps } from "./CodeBlock.types";
+/**
+ * CodeBlock - Syntax highlighted code display with copy-to-clipboard
+ *
+ * Features:
+ * - Syntax highlighting for 20+ languages
+ * - Copy-to-clipboard with visual feedback
+ * - Optional line numbers
+ * - Line highlighting
+ * - Diff view (additions/deletions)
+ * - Light/dark theme support
+ * - Full className override support (shadcn pattern)
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock language="python" showLineNumbers copyable>
+ *   {`def hello_world():
+ *     print("Hello from AI!")`}
+ * </CodeBlock>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock
+ *   language="typescript"
+ *   highlightLines={[2, 3]}
+ *   filename="example.ts"
+ * >
+ *   {code}
+ * </CodeBlock>
+ * ```
+ */
+export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/CodeBlock/CodeBlock.js

@@ -0,0 +1,192 @@
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { Prism } from 'react-syntax-highlighter';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { DocumentTextIcon, DocumentCheckIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import { codeBlockTheme } from './CodeBlock.theme.js';
+import { LanguageIcon } from './LanguageIcon.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * CodeBlock - Syntax highlighted code display with copy-to-clipboard
+ *
+ * Features:
+ * - Syntax highlighting for 20+ languages
+ * - Copy-to-clipboard with visual feedback
+ * - Optional line numbers
+ * - Line highlighting
+ * - Diff view (additions/deletions)
+ * - Light/dark theme support
+ * - Full className override support (shadcn pattern)
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock language="python" showLineNumbers copyable>
+ *   {`def hello_world():
+ *     print("Hello from AI!")`}
+ * </CodeBlock>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock
+ *   language="typescript"
+ *   highlightLines={[2, 3]}
+ *   filename="example.ts"
+ * >
+ *   {code}
+ * </CodeBlock>
+ * ```
+ */
+const CodeBlock = React__default.forwardRef(({ children, language = "text", showLineNumbers = false, highlightLines = [], diffMode = false, copyable = true, filename, showLanguage = true, syntaxTheme = "light", wrapLines = false, maxHeight, className, theme: customTheme = {}, ...props }, ref) => {
+    const [copied, setCopied] = useState(false);
+    // Merge theme
+    const mergedTheme = useMemo(() => ({
+        baseStyle: customTheme.baseStyle || codeBlockTheme.baseStyle,
+        header: customTheme.header || codeBlockTheme.header,
+        headerLeft: customTheme.headerLeft || codeBlockTheme.headerLeft,
+        headerRight: customTheme.headerRight || codeBlockTheme.headerRight,
+        filename: customTheme.filename || codeBlockTheme.filename,
+        languageLabel: customTheme.languageLabel || codeBlockTheme.languageLabel,
+        codeWrapper: customTheme.codeWrapper || codeBlockTheme.codeWrapper,
+        lineNumber: customTheme.lineNumber || codeBlockTheme.lineNumber,
+        highlightedLine: customTheme.highlightedLine || codeBlockTheme.highlightedLine,
+        diffAddition: customTheme.diffAddition || codeBlockTheme.diffAddition,
+        diffDeletion: customTheme.diffDeletion || codeBlockTheme.diffDeletion,
+        copyButton: customTheme.copyButton || codeBlockTheme.copyButton,
+        copySuccess: customTheme.copySuccess || codeBlockTheme.copySuccess,
+    }), [customTheme]);
+    // Normalize code content
+    const code = useMemo(() => {
+        return typeof children === "string"
+            ? children.replace(/\n$/, "")
+            : String(children);
+    }, [children]);
+    // Handle copy to clipboard
+    const handleCopy = useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            if (process.env.NODE_ENV !== "production") {
+                console.error("[CodeBlock]: Failed to copy to clipboard", err);
+            }
+        }
+    }, [code]);
+    // Determine if line should be highlighted
+    const isLineHighlighted = useCallback((lineNumber) => {
+        return highlightLines.includes(lineNumber);
+    }, [highlightLines]);
+    // Determine diff styling for a line
+    const getDiffStyle = useCallback((lineContent, lineNumber) => {
+        if (!diffMode)
+            return null;
+        if (diffMode === "additions") {
+            return mergedTheme.diffAddition;
+        }
+        if (diffMode === "deletions") {
+            return mergedTheme.diffDeletion;
+        }
+        if (diffMode === "diff") {
+            const trimmed = lineContent.trimStart();
+            if (trimmed.startsWith("+")) {
+                return mergedTheme.diffAddition;
+            }
+            if (trimmed.startsWith("-")) {
+                return mergedTheme.diffDeletion;
+            }
+        }
+        return null;
+    }, [diffMode, mergedTheme]);
+    // Get display language name
+    const displayLanguage = useMemo(() => {
+        const languageMap = {
+            javascript: "JavaScript",
+            typescript: "TypeScript",
+            jsx: "JSX",
+            tsx: "TSX",
+            python: "Python",
+            java: "Java",
+            c: "C",
+            cpp: "C++",
+            csharp: "C#",
+            go: "Go",
+            rust: "Rust",
+            ruby: "Ruby",
+            php: "PHP",
+            sql: "SQL",
+            html: "HTML",
+            css: "CSS",
+            scss: "SCSS",
+            json: "JSON",
+            yaml: "YAML",
+            markdown: "Markdown",
+            bash: "Bash",
+            shell: "Shell",
+            powershell: "PowerShell",
+            swift: "Swift",
+            kotlin: "Kotlin",
+            scala: "Scala",
+            graphql: "GraphQL",
+            dockerfile: "Dockerfile",
+            xml: "XML",
+            text: "Plain Text",
+        };
+        return languageMap[language.toLowerCase()] || language.toUpperCase();
+    }, [language]);
+    // Check if header should be shown
+    const showHeader = filename || showLanguage;
+    // Custom line props for highlighting
+    const lineProps = useCallback((lineNumber) => {
+        const lines = code.split("\n");
+        const lineContent = lines[lineNumber - 1] || "";
+        const diffStyle = getDiffStyle(lineContent, lineNumber);
+        const highlighted = isLineHighlighted(lineNumber);
+        const baseStyle = {
+            display: "block",
+        };
+        let lineClassName = "";
+        if (diffStyle) {
+            lineClassName = diffStyle;
+        }
+        else if (highlighted) {
+            lineClassName = mergedTheme.highlightedLine;
+        }
+        return {
+            style: baseStyle,
+            className: lineClassName,
+        };
+    }, [code, getDiffStyle, isLineHighlighted, mergedTheme]);
+    return (React__default.createElement("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props },
+        showHeader && (React__default.createElement("div", { className: mergedTheme.header },
+            React__default.createElement("div", { className: mergedTheme.headerLeft }, filename && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(DocumentTextIcon, { className: "size-4 text-[var(--color-text-muted)]" }),
+                React__default.createElement("span", { className: mergedTheme.filename }, filename)))),
+            React__default.createElement("div", { className: mergedTheme.headerRight },
+                showLanguage && (React__default.createElement("div", { className: "flex items-center gap-2" },
+                    React__default.createElement(LanguageIcon, { language: language, className: "size-4" }),
+                    React__default.createElement("span", { className: mergedTheme.languageLabel }, displayLanguage))),
+                copyable && (React__default.createElement("button", { onClick: handleCopy, className: cn(mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code" }, copied ? (React__default.createElement(DocumentCheckIcon, { className: "size-4" })) : (React__default.createElement(DocumentDuplicateIcon, { className: "size-4" }))))))),
+        React__default.createElement("div", { className: mergedTheme.codeWrapper, style: {
+                maxHeight: maxHeight,
+                overflowY: maxHeight ? "auto" : undefined,
+            } },
+            React__default.createElement(Prism, { language: language, style: syntaxTheme === "dark" ? oneDark : oneLight, showLineNumbers: showLineNumbers, wrapLines: true, wrapLongLines: wrapLines, lineProps: lineProps, lineNumberStyle: {
+                    minWidth: "2.5em",
+                    paddingRight: "1em",
+                    textAlign: "right",
+                    userSelect: "none",
+                    opacity: 0.5,
+                }, customStyle: {
+                    margin: 0,
+                    padding: "1rem",
+                    fontSize: "0.875rem",
+                    lineHeight: "1.5",
+                    background: "transparent",
+                } }, code)),
+        !showHeader && copyable && (React__default.createElement("button", { onClick: handleCopy, className: cn("absolute top-2 right-2", mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code" }, copied ? (React__default.createElement(DocumentCheckIcon, { className: "size-4" })) : (React__default.createElement(DocumentDuplicateIcon, { className: "size-4" }))))));
+});
+CodeBlock.displayName = "CodeBlock";
+
+export { CodeBlock };

package/dist/components/ai/CodeBlock/CodeBlock.theme.d.ts

@@ -0,0 +1,2 @@
+import { CodeBlockTheme } from "./CodeBlock.types";
+export declare const codeBlockTheme: CodeBlockTheme;