@flikk/ui 1.0.0-beta.14 → 1.0.0-beta.16

package/README.md

@@ -1 +1,53 @@
 # Flikkui
+
+A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. 150+ components following the shadcn philosophy with complete `className` override support.
+
+## MCP Server
+
+Flikkui ships with an MCP (Model Context Protocol) server that gives AI coding tools full knowledge of the component library — component APIs, props, theme tokens, and code generation.
+
+### What It Does
+
+| Tool | Description |
+|------|-------------|
+| `get_component` | Look up any component's full API — props, types, sub-components, theme tokens, and code examples |
+| `search_components` | Find components by name, category (`core`, `forms`, `charts`, etc.), or pattern type (`compound`, `simple`, etc.) |
+| `get_theme_tokens` | Get all CSS variables with correct Tailwind syntax (`bg-[var(--color-primary)]`) |
+| `generate_code` | Generate production-ready Flikkui code from a description |
+
+### Setup for Claude Code
+
+Add the following to your project's `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "flikkui": {
+      "command": "npx",
+      "args": ["@flikk/mcp"]
+    }
+  }
+}
+```
+
+Or if you're working from a local clone of this repo:
+
+```json
+{
+  "mcpServers": {
+    "flikkui": {
+      "command": "node",
+      "args": ["./packages/mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+### Building from Source
+
+```bash
+cd packages/mcp
+npm install
+npm run extract   # Parse component source files into registry.json
+npm run build     # Compile TypeScript
+```

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

@@ -7,7 +7,7 @@ const codeBlockTheme = {
     languageLabel: "text-sm 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: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-neutral-400/5 dark:border-l-neutral-200",
+    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-neutral-400)]/5 dark:border-l-[var(--color-neutral-200)]",
     diffAddition: "-mx-4 px-4 bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] dark:bg-[var(--color-success-600)]/20 dark:border-l-[var(--color-success-700)]",
     diffDeletion: "-mx-4 px-4 bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] dark:bg-[var(--color-danger-600)]/20 dark:border-l-[var(--color-danger-700)]",
     copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] 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)]",

package/dist/components/ai/PromptInput/PromptInput.js

@@ -518,7 +518,9 @@ className, textareaClassName, footerClassName, theme = {},
                     e.target.value = "";
                 }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { variants: dropzoneContainerVariants, initial: "initial", animate: "animate", exit: "exit", className: mergedTheme.dropzoneStyle, children: [jsx(motion.div, { variants: dropzoneChildVariants, children: jsx(CloudArrowUpIcon, { className: "size-8 text-[var(--color-primary)] mx-auto" }) }), jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneTitleStyle, children: dropzoneTitle ? (
                                     // Parse **browse** as clickable button
-                                    jsx(Fragment, { children: resolvedDropzoneTitle.split(/\*\*(.*?)\*\*/).map((part, i) => i % 2 === 1 ? (jsx("button", { type: "button", onClick: handleDropzoneBrowse, className: "font-bold underline underline-offset-2 cursor-pointer hover:opacity-80", children: part }, i)) : (jsx("span", { children: part }, i))) })) : (resolvedDropzoneTitle) }), dropzoneSubtitle && (jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneSubtitleStyle, children: dropzoneSubtitle })), dropzoneTitle && (jsx(motion.div, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneActionsStyle, children: [
+                                    jsx(Fragment, { children: resolvedDropzoneTitle
+                                            .split(/\*\*(.*?)\*\*/)
+                                            .map((part, i) => i % 2 === 1 ? (jsx("button", { type: "button", onClick: handleDropzoneBrowse, className: "font-bold underline underline-offset-2 cursor-pointer hover:opacity-80", children: part }, i)) : (jsx("span", { children: part }, i))) })) : (resolvedDropzoneTitle) }), dropzoneSubtitle && (jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneSubtitleStyle, children: dropzoneSubtitle })), dropzoneTitle && (jsx(motion.div, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneActionsStyle, children: [
                                         CloudArrowUpIcon,
                                         MicrophoneIcon,
                                         PaperClipIcon,

package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js

@@ -1,10 +1,10 @@
 const promptSuggestionTheme = {
-    baseStyle: "inline-flex items-center gap-2 py-1 px-3 rounded-full " +
-        "bg-white dark:bg-[var(--color-background)] " +
+    baseStyle: "inline-flex items-center gap-2 py-1 px-3 rounded-[var(--card-radius)] " +
+        "bg-[var(--color-surface)] " +
         "border border-[var(--color-border)] " +
-        "text-base font-medium text-[var(--color-text-primary)] " +
+        "text-base text-[var(--color-text-primary)] " +
         "cursor-pointer transition-all duration-300 " +
-        "hover:bg-[var(--color-background-secondary)] dark:hover:bg-[var(--color-background-secondary)] " +
+        "hover:bg-[var(--color-background-secondary)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     iconStyle: "size-4 flex-shrink-0",
 };

package/dist/components/ai/StreamingResponse/AnimatedText.js

@@ -17,7 +17,7 @@ const tokenize = (text) => {
  * For performance, only the last N tokens are animated with motion.span,
  * while older tokens are rendered as static text.
  */
-const AnimatedText = ({ text, isStreaming, animateLastN = 6, enabled = true, className, }) => {
+const AnimatedText = ({ text, isStreaming, animateLastN = 12, enabled = true, className, }) => {
     const shouldReduceMotion = useReducedMotion();
     const animate = enabled && !shouldReduceMotion;
     // Track which tokens have already been seen/animated
@@ -37,9 +37,9 @@ const AnimatedText = ({ text, isStreaming, animateLastN = 6, enabled = true, cla
     const animatedTokens = tokens.slice(settledCount);
     if (!animate || !isStreaming) {
         // No animation: render plain text
-        return (jsx("p", { className: className || 'whitespace-pre-wrap break-words', children: text }));
+        return (jsx("p", { className: className || 'whitespace-pre-wrap wrap-break-word', children: text }));
     }
-    return (jsxs("p", { className: className || 'whitespace-pre-wrap break-words', children: [settledText, animatedTokens.map((token, i) => (jsx(motion.span, { variants: tokenFadeIn, initial: "hidden", animate: "visible", transition: tokenTransition, style: { display: 'inline' }, children: token }, `${settledCount + i}-${token}`)))] }));
+    return (jsxs("p", { className: className || 'whitespace-pre-wrap wrap-break-word', children: [settledText, animatedTokens.map((token, i) => (jsx(motion.span, { variants: tokenFadeIn, initial: "hidden", animate: "visible", transition: tokenTransition, style: { display: 'inline' }, children: token }, `${settledCount + i}-${token}`)))] }));
 };
 AnimatedText.displayName = 'AnimatedText';
 

package/dist/components/ai/StreamingResponse/MarkdownRenderer.js

@@ -51,13 +51,13 @@ const SkipWords = ({ children }) => {
  * Supports GitHub Flavored Markdown (tables, task lists, strikethrough, etc.)
  * Animates individual words during streaming with a fade-in + blur effect
  */
-const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated = true, showCursor = true, animateLastN = 6, }) => {
+const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated = true, showCursor = true, animateLastN = 12, }) => {
     const { allowHtml = false, syntaxTheme = 'light', renderCodeBlock } = options;
     const shouldReduceMotion = useReducedMotion();
     const shouldAnimate = animated && isStreaming && !shouldReduceMotion;
     // Append cursor character to content so it renders inline within the last element
     const displayContent = isStreaming && showCursor
-        ? content + ' ▍'
+        ? content + ' ▏'
         : content;
     const markdownComponents = useMemo(() => ({
         // Code blocks with syntax highlighting
@@ -73,75 +73,75 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
                 return (jsxs(AnimatedBlock, { animate: shouldAnimate, children: [jsx(SkipWords, { children: children }), jsx(Prism, { style: syntaxTheme === 'dark' ? oneDark : oneLight, language: language, PreTag: "div", className: "rounded-lg my-3", ...props, children: String(children).replace(/\n$/, '') })] }));
             }
             // Inline code — skip word animation for code tokens
-            return (jsxs(Fragment, { children: [jsx(SkipWords, { children: children }), jsx("code", { className: "bg-[var(--color-background-tertiary)] text-[var(--color-primary)] px-1.5 py-0.5 rounded text-base font-mono", ...props, children: children })] }));
+            return (jsxs(Fragment, { children: [jsx(SkipWords, { children: children }), jsx("code", { className: "bg-(--color-background-tertiary) text-(--color-primary) px-1.5 py-0.5 rounded text-base font-mono", ...props, children: children })] }));
         },
         // Paragraphs — word-level animation
         p({ children }) {
-            return (jsx(AnimatedProse, { as: "p", className: "mb-3 last:mb-0 text-[var(--color-text-primary)] leading-relaxed", children: children }));
+            return (jsx(AnimatedProse, { as: "p", className: "mb-3 last:mb-0 text-(--color-text-primary) leading-relaxed", children: children }));
         },
         // Headings — word-level animation
         h1({ children }) {
-            return (jsx(AnimatedProse, { as: "h1", className: "text-2xl font-bold mb-4 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2", children: children }));
+            return (jsx(AnimatedProse, { as: "h1", className: "text-2xl font-bold mb-4 text-(--color-text-primary) border-b border-(--color-border) pb-2", children: children }));
         },
         h2({ children }) {
-            return (jsx(AnimatedProse, { as: "h2", className: "text-2xl font-bold mb-3 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2", children: children }));
+            return (jsx(AnimatedProse, { as: "h2", className: "text-2xl font-bold mb-3 text-(--color-text-primary) border-b border-(--color-border) pb-2", children: children }));
         },
         h3({ children }) {
-            return (jsx(AnimatedProse, { as: "h3", className: "text-xl font-semibold mb-2 text-[var(--color-text-primary)]", children: children }));
+            return (jsx(AnimatedProse, { as: "h3", className: "text-xl font-semibold mb-2 text-(--color-text-primary)", children: children }));
         },
         h4({ children }) {
-            return (jsx(AnimatedProse, { as: "h4", className: "text-lg font-semibold mb-2 text-[var(--color-text-primary)]", children: children }));
+            return (jsx(AnimatedProse, { as: "h4", className: "text-lg font-semibold mb-2 text-(--color-text-primary)", children: children }));
         },
         h5({ children }) {
-            return (jsx(AnimatedProse, { as: "h5", className: "text-base font-semibold mb-2 text-[var(--color-text-primary)]", children: children }));
+            return (jsx(AnimatedProse, { as: "h5", className: "text-base font-semibold mb-2 text-(--color-text-primary)", children: children }));
         },
         h6({ children }) {
-            return (jsx(AnimatedProse, { as: "h6", className: "text-base font-semibold mb-2 text-[var(--color-text-secondary)]", children: children }));
+            return (jsx(AnimatedProse, { as: "h6", className: "text-base font-semibold mb-2 text-(--color-text-secondary)", children: children }));
         },
         // Lists — word-level animation on li
         ul({ children }) {
-            return (jsx("ul", { className: "list-disc list-inside mb-3 space-y-1 text-[var(--color-text-primary)]", children: children }));
+            return (jsx("ul", { className: "list-disc list-inside mb-3 space-y-1 text-(--color-text-primary)", children: children }));
         },
         ol({ children }) {
-            return (jsx("ol", { className: "list-decimal list-inside mb-3 space-y-1 text-[var(--color-text-primary)]", children: children }));
+            return (jsx("ol", { className: "list-decimal list-inside mb-3 space-y-1 text-(--color-text-primary)", children: children }));
         },
         li({ children }) {
             return (jsx(AnimatedProse, { as: "li", className: "ml-4", children: children }));
         },
         // Blockquotes — word-level animation
         blockquote({ children }) {
-            return (jsx("blockquote", { className: "border-l-4 border-[var(--color-primary)] pl-4 py-2 my-3 bg-[var(--color-background-secondary)] italic text-[var(--color-text-secondary)]", children: children }));
+            return (jsx("blockquote", { className: "border-l-4 border-(--color-primary) pl-4 py-2 my-3 bg-(--color-background-secondary) italic text-(--color-text-secondary)", children: children }));
         },
         // Links
         a({ href, children }) {
-            return (jsx("a", { href: href, className: "text-[var(--color-primary)] hover:text-[var(--color-primary-700)] underline transition-colors", target: "_blank", rel: "noopener noreferrer", children: children }));
+            return (jsx("a", { href: href, className: "text-(--color-primary) hover:text-(--color-primary-700) underline transition-colors", target: "_blank", rel: "noopener noreferrer", children: children }));
         },
         // Tables — block-level slide-in, skip word animation
         table({ children }) {
-            return (jsxs(AnimatedBlock, { animate: shouldAnimate, children: [jsx(SkipWords, { children: children }), jsx("div", { className: "overflow-x-auto my-3", children: jsx("table", { className: "min-w-full border-collapse border border-[var(--color-border)]", children: children }) })] }));
+            return (jsxs(AnimatedBlock, { animate: shouldAnimate, children: [jsx(SkipWords, { children: children }), jsx("div", { className: "overflow-x-auto my-3", children: jsx("table", { className: "min-w-full border-collapse border border-(--color-border)", children: children }) })] }));
         },
         thead({ children }) {
-            return jsx("thead", { className: "bg-[var(--color-background-secondary)]", children: children });
+            return jsx("thead", { className: "bg-(--color-background-secondary)", children: children });
         },
         tbody({ children }) {
             return jsx("tbody", { children: children });
         },
         tr({ children }) {
-            return jsx("tr", { className: "border-b border-[var(--color-border)]", children: children });
+            return jsx("tr", { className: "border-b border-(--color-border)", children: children });
         },
         th({ children }) {
-            return (jsx("th", { className: "px-4 py-2 text-left font-semibold text-[var(--color-text-primary)] border border-[var(--color-border)]", children: children }));
+            return (jsx("th", { className: "px-4 py-2 text-left font-semibold text-(--color-text-primary) border border-(--color-border)", children: children }));
         },
         td({ children }) {
-            return (jsx("td", { className: "px-4 py-2 text-[var(--color-text-primary)] border border-[var(--color-border)]", children: children }));
+            return (jsx("td", { className: "px-4 py-2 text-(--color-text-primary) border border-(--color-border)", children: children }));
         },
         // Horizontal rule
         hr() {
-            return jsx("hr", { className: "my-4 border-t border-[var(--color-border)]" });
+            return jsx("hr", { className: "my-4 border-t border-(--color-border)" });
         },
         // Strong/Bold — pass through (word animation handles inline elements)
         strong({ children }) {
-            return jsx("strong", { className: "font-semibold text-[var(--color-text-primary)]", children: children });
+            return jsx("strong", { className: "font-semibold text-(--color-text-primary)", children: children });
         },
         // Emphasis/Italic
         em({ children }) {
@@ -149,7 +149,7 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
         },
         // Strikethrough (from remarkGfm)
         del({ children }) {
-            return jsx("del", { className: "line-through text-[var(--color-text-secondary)]", children: children });
+            return jsx("del", { className: "line-through text-(--color-text-secondary)", children: children });
         },
     }), [shouldAnimate, syntaxTheme, renderCodeBlock]);
     return (jsx(WordAnimationProvider, { content: displayContent, enabled: shouldAnimate, animateLastN: animateLastN, hasCursor: isStreaming && showCursor, children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: !allowHtml, components: markdownComponents, children: displayContent }) }));

package/dist/components/ai/StreamingResponse/StreamingCursor.js

@@ -4,7 +4,7 @@ import { jsx } from 'react/jsx-runtime';
  * StreamingCursor renders a blinking caret that indicates active streaming.
  * Uses a simple CSS pulse animation — no framer motion, no layout shifts.
  */
-const StreamingCursor = ({ visible, enabled = true, cursor = "▍", className, }) => {
+const StreamingCursor = ({ visible, enabled = true, cursor = "▏", className, }) => {
     if (!visible)
         return null;
     return (jsx("span", { className: className || `font-extralight ml-0.5 ${enabled ? "animate-pulse" : ""}`, "aria-hidden": "true", children: cursor }));

package/dist/components/ai/StreamingResponse/StreamingResponse.animations.js

@@ -9,8 +9,8 @@
 const tokenFadeIn = {
     hidden: {
         opacity: 0,
-        y: 6,
-        filter: 'blur(4px)',
+        y: 4,
+        filter: 'blur(1.5px)',
     },
     visible: {
         opacity: 1,
@@ -19,8 +19,8 @@ const tokenFadeIn = {
     },
 };
 const tokenTransition = {
-    duration: 0.35,
-    ease: [0.25, 0.4, 0.55, 1],
+    duration: 0.25,
+    ease: [0.2, 0.8, 0.2, 1], // snappy easing
 };
 /**
  * Block slide-in animation
@@ -29,7 +29,7 @@ const tokenTransition = {
 const blockSlideIn = {
     hidden: {
         opacity: 0,
-        y: 8,
+        y: 6,
     },
     visible: {
         opacity: 1,
@@ -37,8 +37,8 @@ const blockSlideIn = {
     },
 };
 const blockTransition = {
-    duration: 0.4,
-    ease: [0.25, 0.4, 0.55, 1],
+    duration: 0.35,
+    ease: [0.2, 0.8, 0.2, 1],
 };
 /**
  * Streaming cursor (caret) animation
@@ -62,7 +62,7 @@ const cursorPulse = {
 const inlineTokenFadeIn = {
     hidden: {
         opacity: 0,
-        filter: 'blur(3px)',
+        filter: 'blur(1.5px)',
     },
     visible: {
         opacity: 1,
@@ -70,8 +70,8 @@ const inlineTokenFadeIn = {
     },
 };
 const inlineTokenTransition = {
-    duration: 0.3,
-    ease: [0.25, 0.4, 0.55, 1],
+    duration: 0.25,
+    ease: [0.2, 0.8, 0.2, 1],
 };
 /**
  * Container animation for staggered children

package/dist/components/ai/StreamingResponse/StreamingResponse.js

@@ -4,6 +4,12 @@ import { useStreamingSSE } from '../../../hooks/useStreamingSSE.js';
 import { Message } from '../../core/Message/Message.js';
 import { TypeWriter } from '../../core/Message/TypeWriter.js';
 import '../../core/Message/MessageBody.js';
+import 'clsx';
+import 'tailwind-merge';
+import '../../core/Button/Button.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+import '@heroicons/react/24/solid';
 import { ErrorDisplay } from './ErrorDisplay.js';
 import { MarkdownRenderer } from './MarkdownRenderer.js';
 import { AnimatedText } from './AnimatedText.js';
@@ -33,7 +39,7 @@ onToken, onComplete, onError, onStart, onAbort,
 // Display options
 typingSpeed = 100, enableTypewriter = true, enableMarkdown = true, markdownOptions, 
 // Animation
-animated = true, showCursor = true, animateLastN = 6, 
+animated = true, showCursor = true, animateLastN = 12, 
 // Message component props
 role = 'assistant', avatar, showTimestamp = true, showActions = true, onCopy, onRegenerate, 
 // Error handling
@@ -74,11 +80,11 @@ className, }) => {
     }
     else if (enableTypewriter && isComplete && accumulatedText) {
         // Use typewriter animation after streaming completes
-        messageContent = (jsx(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap break-words" }));
+        messageContent = (jsx(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap wrap-break-word" }));
     }
     else {
         // Show raw text (streaming complete, typewriter disabled)
-        messageContent = (jsx("p", { className: "whitespace-pre-wrap break-words", children: accumulatedText }));
+        messageContent = (jsx("p", { className: "whitespace-pre-wrap wrap-break-word", children: accumulatedText }));
     }
     // Render with Message component
     return (jsx(Message, { role: role, content: messageContent, avatar: avatar, timestamp: startTimeRef.current, showTimestamp: showTimestamp, isStreaming: isStreaming, showActions: showActions && !error, onCopy: onCopy, onRegenerate: onRegenerate, className: className }));

package/dist/components/ai/StreamingResponse/WordAnimationContext.d.ts

@@ -4,7 +4,7 @@
  * inside markdown-rendered content. Works like AnimatedText but across
  * all markdown elements (paragraphs, headings, lists, blockquotes, etc.).
  */
-import React from 'react';
+import React from "react";
 interface WordAnimationContextValue {
     /** Process children of a prose element, animating recent words */
     processChildren: (children: React.ReactNode) => React.ReactNode;

package/dist/components/ai/StreamingResponse/WordAnimationContext.js

@@ -18,7 +18,7 @@ const tokenize = (text) => {
 const countWordsInChildren = (children) => {
     let count = 0;
     React__default.Children.forEach(children, (child) => {
-        if (typeof child === 'string') {
+        if (typeof child === "string") {
             count += tokenize(child).length;
         }
         else if (React__default.isValidElement(child)) {
@@ -30,12 +30,12 @@ const countWordsInChildren = (children) => {
     });
     return count;
 };
-const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, hasCursor = false, }) => {
+const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12, hasCursor = false, }) => {
     const settledCountRef = useRef(0);
     // Count total prose words in the raw content
     const totalWords = useMemo(() => {
         // Strip the cursor character before counting
-        const cleanContent = hasCursor ? content.replace(/\s*▍\s*$/, '') : content;
+        const cleanContent = hasCursor ? content.replace(/\s*▏\s*$/, "") : content;
         return tokenize(cleanContent).length;
     }, [content, hasCursor]);
     // Update settled count — words that have aged out of the animation window
@@ -59,7 +59,7 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, h
          */
         const processChildren = (children) => {
             return React__default.Children.map(children, (child) => {
-                if (typeof child === 'string') {
+                if (typeof child === "string") {
                     return processTextNode(child);
                 }
                 if (React__default.isValidElement(child)) {
@@ -82,18 +82,18 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, h
             if (tokens.length === 0)
                 return text;
             const result = [];
-            let staticBuffer = '';
+            let staticBuffer = "";
             for (const token of tokens) {
                 const currentIndex = wordIndexRef.current;
                 wordIndexRef.current++;
                 // Check if this is the cursor character
-                if (token.trim() === '▍') {
+                if (token.trim() === "▏") {
                     // Flush static buffer
                     if (staticBuffer) {
                         result.push(staticBuffer);
-                        staticBuffer = '';
+                        staticBuffer = "";
                     }
-                    result.push(jsx("span", { className: "animate-pulse font-light", "aria-hidden": "true", children: "\u258D" }, "streaming-cursor"));
+                    result.push(jsx("span", { className: "animate-pulse font-light", "aria-hidden": "true", children: "\u258F" }, "streaming-cursor"));
                     continue;
                 }
                 if (currentIndex < settledCount) {
@@ -104,10 +104,10 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, h
                     // Flush static buffer before animated tokens
                     if (staticBuffer) {
                         result.push(staticBuffer);
-                        staticBuffer = '';
+                        staticBuffer = "";
                     }
                     // Animated word
-                    result.push(jsx(motion.span, { variants: inlineTokenFadeIn, initial: "hidden", animate: "visible", transition: inlineTokenTransition, style: { display: 'inline' }, children: token }, `word-${currentIndex}-${token.trim()}`));
+                    result.push(jsx(motion.span, { variants: inlineTokenFadeIn, initial: "hidden", animate: "visible", transition: inlineTokenTransition, style: { display: "inline" }, children: token }, `word-${currentIndex}-${token.trim()}`));
                 }
             }
             // Flush any remaining static buffer
@@ -129,6 +129,6 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, h
     }, [enabled, settledCount, totalWords]);
     return (jsx(WordAnimationContext.Provider, { value: contextValue, children: children }));
 };
-WordAnimationProvider.displayName = 'WordAnimationProvider';
+WordAnimationProvider.displayName = "WordAnimationProvider";
 
 export { WordAnimationProvider, useWordAnimation };

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

@@ -1,11 +1,7 @@
 export { Message, messageTheme } from "../core/Message";
 export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from "../core/Message";
-export { MessageHistory, messageHistoryTheme } from "./MessageHistory";
-export type { MessageHistoryProps, ChatMessageData, MessageHistoryTheme, MessageHistoryThemeOverrides, } from "./MessageHistory";
 export { PromptInput, promptInputTheme } from "./PromptInput";
 export type { PromptInputProps, PromptInputState, ModelOption, PromptInputTheme, PromptInputThemeOverrides, } from "./PromptInput";
-export { ThinkingIndicator, thinkingIndicatorTheme } from "./ThinkingIndicator";
-export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, } from "./ThinkingIndicator";
 export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatCost, formatTokenCount, MODEL_CONFIGS, } from "./TokenCounter";
 export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
 export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestions";
@@ -14,6 +10,3 @@ export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, Stream
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
 export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
-export { ApprovalCard } from "./ApprovalCard";
-export type { ApprovalCardProps, ApprovalRiskLevel, } from "./ApprovalCard";
-export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";

package/dist/components/ai/index.js

@@ -2,12 +2,16 @@ export { Message } from '../core/Message/Message.js';
 export { messageTheme } from '../core/Message/Message.theme.js';
 import '../core/Message/TypeWriter.js';
 import '../core/Message/MessageBody.js';
-export { MessageHistory } from './MessageHistory/MessageHistory.js';
-export { messageHistoryTheme } from './MessageHistory/MessageHistory.theme.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'tailwind-merge';
+import 'react';
+import '../core/Button/Button.js';
+import '@heroicons/react/16/solid';
+import '@heroicons/react/24/outline';
+import '@heroicons/react/24/solid';
 export { PromptInput } from './PromptInput/PromptInput.js';
 export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
-export { ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.js';
-export { thinkingIndicatorTheme } from './ThinkingIndicator/ThinkingIndicator.theme.js';
 export { TokenCounter } from './TokenCounter/TokenCounter.js';
 export { tokenCounterTheme } from './TokenCounter/TokenCounter.theme.js';
 export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount } from './TokenCounter/tokenUtils.js';
@@ -23,5 +27,3 @@ export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.th
 export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition } from './StreamingResponse/StreamingResponse.animations.js';
 export { CodeBlock } from './CodeBlock/CodeBlock.js';
 export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
-export { ApprovalCard } from './ApprovalCard/ApprovalCard.js';
-export { approvalCardTheme } from './ApprovalCard/ApprovalCard.theme.js';

package/dist/components/charts/DonutChart/DonutChart.js

@@ -10,7 +10,7 @@ import { resolveCssVariable, describeRingSegmentPath, interpolateHexColor, clamp
  * DonutChart component for displaying a percentage value with a circular progress indicator
  * Supports customization of size, thickness, animations, and theming
  */
-const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, ...props }) => {
+const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200, thickness = 2, segmentCount = 32, segmentGap = 0.35, showAnimation = true, className, children, theme: themeOverrides, colors, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }) => {
     var _a, _b;
     const [isHovered, setIsHovered] = useState(false);
     const [hasAnimated, setHasAnimated] = useState(false);

package/dist/components/charts/DonutChart/MultiSegmentDonutChart.js

@@ -93,7 +93,7 @@ const AnimatedStrokeSegment = React__default.memo(AnimatedStrokeSegmentInner);
  * MultiSegmentDonutChart component for displaying multiple data values in a circular chart
  * Each segment represents a different data point with its own value and optional color
  */
-const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap = 0.05, showAnimation = true, showLegend = false, legendPosition = "right", centerContent, className, theme: themeOverrides, onSegmentHover, onSegmentClick, roundedCaps = true, ...restProps }) => {
+const MultiSegmentDonutChart = ({ data, size = 200, thickness = 4, segmentGap = 0.05, showAnimation = true, showLegend = false, legendPosition = "right", centerContent, className, theme: themeOverrides, onSegmentHover, onSegmentClick, roundedCaps = true, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...restProps }) => {
     const [hoveredSegment, setHoveredSegment] = useState(null);
     const [hasAnimated, setHasAnimated] = useState(false);
     const shouldReduceMotion = useReducedMotion();

package/dist/components/charts/shared/ChartLegend/ChartLegend.types.d.ts

@@ -1,4 +1,16 @@
 import { ReactNode } from 'react';
+/**
+ * Individual payload item for chart legend entries
+ */
+export interface ChartLegendPayloadItem {
+    value?: string;
+    type?: string;
+    id?: string;
+    color?: string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+    [key: string]: unknown;
+}
 export interface ChartLegendProps {
     content?: ReactNode;
     wrapperStyle?: React.CSSProperties;
@@ -9,7 +21,7 @@ export interface ChartLegendProps {
     className?: string;
 }
 export interface ChartLegendContentProps {
-    payload?: any[];
+    payload?: ChartLegendPayloadItem[];
     nameKey?: string;
     className?: string;
 }

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.js

@@ -11,7 +11,7 @@ const ChartLegendContent = ({ payload = [], nameKey = 'name', className, ...prop
     return (jsx("div", { className: `flex flex-wrap gap-4 ${className || ''}`, ...props, children: payload.map((entry, index) => {
             const name = entry[nameKey] || entry.dataKey || `Series ${index + 1}`;
             const color = entry.color || '#8884d8';
-            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-base text-gray-600", children: name })] }, index));
+            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-base text-gray-600", children: String(name) })] }, index));
         }) }));
 };
 

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.types.d.ts

@@ -1,4 +1,15 @@
 import { ReactNode } from 'react';
+/**
+ * Individual payload item from chart data
+ */
+export interface ChartTooltipPayloadItem {
+    name?: string;
+    value?: number | string;
+    color?: string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+    [key: string]: unknown;
+}
 /**
  * ChartTooltip theme configuration
  */
@@ -30,7 +41,7 @@ export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElem
     contentStyle?: React.CSSProperties;
     itemStyle?: React.CSSProperties;
     active?: boolean;
-    payload?: any[];
+    payload?: ChartTooltipPayloadItem[];
     label?: string | number;
     className?: string;
     position?: {
@@ -42,7 +53,7 @@ export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElem
 }
 export interface ChartTooltipContentProps {
     active?: boolean;
-    payload?: any[];
+    payload?: ChartTooltipPayloadItem[];
     label?: string | number;
     labelKey?: string;
     nameKey?: string;

package/dist/components/core/Accordion/AccordionItem.js

@@ -52,6 +52,6 @@ const AccordionItem = React__default.forwardRef(({ children, className, value, .
     const itemStyleClass = variant === "stacked" ? theme === null || theme === void 0 ? void 0 : theme.itemStyleStacked : theme === null || theme === void 0 ? void 0 : theme.itemStyle;
     return (jsx(AccordionItemContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(itemStyleClass, className), "data-state": isOpen ? "open" : "closed", "data-variant": variant, "data-value": value, ...props, children: children }) }));
 });
-AccordionItem.displayName = "AccordionItem";
+AccordionItem.displayName = "Accordion.Item";
 
 export { AccordionItem, useAccordionItemContext };

package/dist/components/core/Accordion/AccordionTrigger.js

@@ -26,6 +26,6 @@ const AccordionTrigger = React__default.forwardRef(({ children, className, chevr
     const animatedChevron = (rotation, extraClass) => (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(rotation), className: cn("flex items-center justify-center shrink-0", extraClass), children: defaultChevronIcon }));
     return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props, children: [useDefaultOnLeft && animatedChevron(resolvedChevronRotation), children, resolvedChevron && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedChevronRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: resolvedChevron }))] }));
 });
-AccordionTrigger.displayName = "AccordionTrigger";
+AccordionTrigger.displayName = "Accordion.Trigger";
 
 export { AccordionTrigger };

package/dist/components/core/Alert/Alert.animations.d.ts

@@ -0,0 +1,11 @@
+import { Variants } from "motion/react";
+/**
+ * Alert entrance/exit animation variants
+ * Entrance: slide down from -8px + fade in
+ * Exit: fade out + collapse height
+ */
+export declare const alertVariants: Variants;
+/**
+ * Reduced motion variants — instant opacity toggle, no slide or collapse
+ */
+export declare const reducedMotionAlertVariants: Variants;