flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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,79 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useState } from 'react';
+import { ChatInterfaceContext } from './ChatInterface.types.js';
+import { chatInterfaceTheme } from './ChatInterface.theme.js';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+
+var ChatInterfaceHeader = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(chatInterfaceTheme.headerStyle, className) }, props), children));
+});
+ChatInterfaceHeader.displayName = "ChatInterface.Header";
+var ChatInterfaceBody = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(chatInterfaceTheme.bodyStyle, className) }, props), children));
+});
+ChatInterfaceBody.displayName = "ChatInterface.Body";
+var ChatInterfaceFooter = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("div", __assign({ 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>
+ * ```
+ */
+var ChatInterfaceRoot = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.messages, messages = _b === void 0 ? [] : _b, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, className = _a.className, _d = _a.theme, customTheme = _d === void 0 ? {} : _d, props = __rest(_a, ["children", "messages", "isLoading", "className", "theme"]);
+    var _e = useState(""), inputValue = _e[0], setInputValue = _e[1];
+    // Merge theme
+    var containerStyle = customTheme.containerStyle || chatInterfaceTheme.containerStyle;
+    // Context value
+    var contextValue = {
+        messages: messages,
+        isLoading: isLoading,
+        inputValue: inputValue,
+        setInputValue: setInputValue,
+    };
+    return (React__default.createElement(ChatInterfaceContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ ref: ref, className: cn(containerStyle, className) }, props), children)));
+});
+ChatInterfaceRoot.displayName = "ChatInterface";
+// Attach compound components
+var 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 @@
+var 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
+var ChatInterfaceContext = createContext(undefined);
+var useChatInterfaceContext = function () {
+    var context = useContext(ChatInterfaceContext);
+    if (!context) {
+        // Return default values when not in context (allows standalone use)
+        return {
+            messages: [],
+            isLoading: false,
+            inputValue: "",
+            setInputValue: function () { },
+        };
+    }
+    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,207 @@
+import { __rest, __awaiter, __generator, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+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';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.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>
+ * ```
+ */
+var CodeBlock = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.language, language = _b === void 0 ? "text" : _b, _c = _a.showLineNumbers, showLineNumbers = _c === void 0 ? false : _c, _d = _a.highlightLines, highlightLines = _d === void 0 ? [] : _d, _e = _a.diffMode, diffMode = _e === void 0 ? false : _e, _f = _a.copyable, copyable = _f === void 0 ? true : _f, filename = _a.filename, _g = _a.showLanguage, showLanguage = _g === void 0 ? true : _g, _h = _a.syntaxTheme, syntaxTheme = _h === void 0 ? "light" : _h, _j = _a.wrapLines, wrapLines = _j === void 0 ? false : _j, maxHeight = _a.maxHeight, className = _a.className, _k = _a.theme, customTheme = _k === void 0 ? {} : _k, props = __rest(_a, ["children", "language", "showLineNumbers", "highlightLines", "diffMode", "copyable", "filename", "showLanguage", "syntaxTheme", "wrapLines", "maxHeight", "className", "theme"]);
+    var _l = useState(false), copied = _l[0], setCopied = _l[1];
+    // Merge theme
+    var mergedTheme = useMemo(function () { return ({
+        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
+    var code = useMemo(function () {
+        return typeof children === "string"
+            ? children.replace(/\n$/, "")
+            : String(children);
+    }, [children]);
+    // Handle copy to clipboard
+    var handleCopy = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(code)];
+                case 1:
+                    _a.sent();
+                    setCopied(true);
+                    setTimeout(function () { return setCopied(false); }, 2000);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_1 = _a.sent();
+                    if (process.env.NODE_ENV !== "production") {
+                        console.error("[CodeBlock]: Failed to copy to clipboard", err_1);
+                    }
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [code]);
+    // Determine if line should be highlighted
+    var isLineHighlighted = useCallback(function (lineNumber) {
+        return highlightLines.includes(lineNumber);
+    }, [highlightLines]);
+    // Determine diff styling for a line
+    var getDiffStyle = useCallback(function (lineContent, lineNumber) {
+        if (!diffMode)
+            return null;
+        if (diffMode === "additions") {
+            return mergedTheme.diffAddition;
+        }
+        if (diffMode === "deletions") {
+            return mergedTheme.diffDeletion;
+        }
+        if (diffMode === "diff") {
+            var trimmed = lineContent.trimStart();
+            if (trimmed.startsWith("+")) {
+                return mergedTheme.diffAddition;
+            }
+            if (trimmed.startsWith("-")) {
+                return mergedTheme.diffDeletion;
+            }
+        }
+        return null;
+    }, [diffMode, mergedTheme]);
+    // Get display language name
+    var displayLanguage = useMemo(function () {
+        var 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
+    var showHeader = filename || showLanguage;
+    // Custom line props for highlighting
+    var lineProps = useCallback(function (lineNumber) {
+        var lines = code.split("\n");
+        var lineContent = lines[lineNumber - 1] || "";
+        var diffStyle = getDiffStyle(lineContent, lineNumber);
+        var highlighted = isLineHighlighted(lineNumber);
+        var baseStyle = {
+            display: "block",
+        };
+        var 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", __assign({ 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;

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

@@ -0,0 +1,17 @@
+var codeBlockTheme = {
+    baseStyle: "relative rounded-xl border border-[var(--color-border)] overflow-hidden bg-[var(--color-background)]",
+    header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
+    headerLeft: "flex items-center gap-2 min-w-0 flex-1",
+    headerRight: "flex items-center gap-2 flex-shrink-0",
+    filename: "text-sm font-medium text-[var(--color-text-primary)] font-mono truncate",
+    languageLabel: "text-xs uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
+    codeWrapper: "overflow-x-auto",
+    lineNumber: "text-[var(--color-text-muted)] select-none text-right tabular-nums min-w-[2.5rem] pr-4 opacity-50",
+    highlightedLine: "bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] -mx-4 px-4",
+    diffAddition: "bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] -mx-4 px-4",
+    diffDeletion: "bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] -mx-4 px-4",
+    copyButton: "p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    copySuccess: "text-[var(--color-success)]",
+};
+
+export { codeBlockTheme };

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

@@ -0,0 +1,108 @@
+/**
+ * CodeBlock component props
+ */
+export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The code content to display
+     */
+    children: string;
+    /**
+     * Programming language for syntax highlighting
+     * @default "text"
+     */
+    language?: string;
+    /**
+     * Show line numbers
+     * @default false
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Lines to highlight (1-indexed)
+     * @example [5, 6, 7] - highlights lines 5, 6, and 7
+     */
+    highlightLines?: number[];
+    /**
+     * Diff mode for showing code changes
+     * - 'additions' - highlights all lines as additions (green)
+     * - 'deletions' - highlights all lines as deletions (red)
+     * - 'diff' - parses lines starting with +/- as additions/deletions
+     * @default false
+     */
+    diffMode?: "additions" | "deletions" | "diff" | false;
+    /**
+     * Show copy-to-clipboard button
+     * @default true
+     */
+    copyable?: boolean;
+    /**
+     * Optional filename to display in header
+     */
+    filename?: string;
+    /**
+     * Show language label in header
+     * @default true
+     */
+    showLanguage?: boolean;
+    /**
+     * Syntax highlighting theme
+     * @default "light"
+     */
+    syntaxTheme?: "light" | "dark";
+    /**
+     * Wrap long lines instead of horizontal scroll
+     * @default false
+     */
+    wrapLines?: boolean;
+    /**
+     * Maximum height with vertical scroll
+     */
+    maxHeight?: string | number;
+    /**
+     * Additional className (shadcn-style override)
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: CodeBlockThemeOverrides;
+}
+/**
+ * Supported programming languages
+ */
+export type CodeBlockLanguage = "javascript" | "typescript" | "jsx" | "tsx" | "python" | "java" | "c" | "cpp" | "csharp" | "go" | "rust" | "ruby" | "php" | "sql" | "html" | "css" | "scss" | "json" | "yaml" | "markdown" | "bash" | "shell" | "powershell" | "swift" | "kotlin" | "scala" | "graphql" | "dockerfile" | "xml" | "text";
+/**
+ * Theme configuration
+ */
+export interface CodeBlockTheme {
+    baseStyle: string;
+    header: string;
+    headerLeft: string;
+    headerRight: string;
+    filename: string;
+    languageLabel: string;
+    codeWrapper: string;
+    lineNumber: string;
+    highlightedLine: string;
+    diffAddition: string;
+    diffDeletion: string;
+    copyButton: string;
+    copySuccess: string;
+}
+/**
+ * Theme overrides
+ */
+export interface CodeBlockThemeOverrides {
+    baseStyle?: string;
+    header?: string;
+    headerLeft?: string;
+    headerRight?: string;
+    filename?: string;
+    languageLabel?: string;
+    codeWrapper?: string;
+    lineNumber?: string;
+    highlightedLine?: string;
+    diffAddition?: string;
+    diffDeletion?: string;
+    copyButton?: string;
+    copySuccess?: string;
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface LanguageIconProps extends React.SVGProps<SVGSVGElement> {
+    language: string;
+    className?: string;
+}
+/**
+ * Branded language icons for CodeBlock
+ * Maps language names to their respective SVG icons
+ */
+export declare const LanguageIcon: React.FC<LanguageIconProps>;