@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.32

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

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import type { MarkdownOptions } from './StreamingResponse.types';
+import type { StreamingTokenEffect } from './StreamingResponse.types';
 export interface MarkdownRendererProps {
     /** Markdown content to render */
     content: string;
@@ -19,6 +20,10 @@ export interface MarkdownRendererProps {
     showCursor?: boolean;
     /** Number of recent words to animate (default: 6) */
     animateLastN?: number;
+    /** Visual treatment for newly arrived words */
+    tokenEffect?: StreamingTokenEffect;
+    /** New-word transition duration in seconds */
+    tokenDuration?: number;
 }
 /**
  * MarkdownRenderer component for rendering markdown with syntax highlighting

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

@@ -52,7 +52,7 @@ 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 = 12, }) => {
+const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated = true, showCursor = true, animateLastN = 12, tokenEffect = 'fade', tokenDuration = 0.12, }) => {
     const { allowHtml = false, syntaxTheme = 'light', renderCodeBlock } = options;
     const shouldReduceMotion = useReducedMotion();
     const shouldAnimate = animated && isStreaming && !shouldReduceMotion;
@@ -111,7 +111,7 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
         },
         // Blockquotes — word-level animation
         blockquote({ 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 }));
+            return (jsx("blockquote", { className: "border-l-4 border-(--color-primary) pl-4 py-2 my-3 bg-(--color-surface) italic text-(--color-text-secondary)", children: children }));
         },
         // Links
         a({ href, children }) {
@@ -122,7 +122,7 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
             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-(--color-background-secondary)", children: children });
+            return jsx("thead", { className: "bg-(--color-surface)", children: children });
         },
         tbody({ children }) {
             return jsx("tbody", { children: children });
@@ -153,7 +153,7 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
             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 }) }));
+    return (jsx(WordAnimationProvider, { content: displayContent, enabled: shouldAnimate, animateLastN: animateLastN, hasCursor: isStreaming && showCursor, tokenEffect: tokenEffect, tokenDuration: tokenDuration, children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: !allowHtml, components: markdownComponents, children: displayContent }) }));
 };
 MarkdownRenderer.displayName = 'MarkdownRenderer';
 

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

@@ -14,7 +14,7 @@ export interface StreamingCursorProps {
     className?: string;
 }
 /**
- * StreamingCursor renders a premium glowing caret that indicates active streaming.
- * Uses Framer Motion for a smooth breathing scale and opacity animation.
+ * StreamingCursor renders a quiet inline caret that indicates active streaming.
+ * Its held blink avoids the restless pulsing commonly associated with loaders.
  */
 export declare const StreamingCursor: React.FC<StreamingCursorProps>;

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

@@ -1,22 +1,25 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { motion } from 'motion/react';
+import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { cursorPulse } from './StreamingResponse.animations.js';
 
 /**
- * StreamingCursor renders a premium glowing caret that indicates active streaming.
- * Uses Framer Motion for a smooth breathing scale and opacity animation.
+ * StreamingCursor renders a quiet inline caret that indicates active streaming.
+ * Its held blink avoids the restless pulsing commonly associated with loaders.
  */
 const StreamingCursor = ({ visible, enabled = true, cursor = "▏", className, }) => {
+    const shouldReduceMotion = useReducedMotion();
     if (!visible)
         return null;
     const isDefaultCursor = cursor === "▏";
-    if (!enabled) {
-        return isDefaultCursor ? (jsx("span", { className: cn("inline-block ml-1.5 w-2 h-2 rounded-full bg-[var(--color-primary)] align-middle mb-[3px]", className), "aria-hidden": "true" })) : (jsx("span", { className: cn("font-light ml-0.5 text-[var(--color-primary)]", className), "aria-hidden": "true", children: cursor }));
+    const shouldAnimate = enabled && !shouldReduceMotion;
+    if (!shouldAnimate) {
+        return isDefaultCursor ? (jsx("span", { className: cn("ml-0.5 inline-block h-[1.05em] w-px translate-y-[0.14em] rounded-full bg-current text-[var(--color-primary)]", className), "aria-hidden": "true" })) : (jsx("span", { className: cn("font-light ml-0.5 text-[var(--color-primary)]", className), "aria-hidden": "true", children: cursor }));
     }
-    return (jsx(motion.span, { variants: cursorPulse, initial: "initial", animate: "animate", className: cn("inline-block ml-1.5 text-[var(--color-primary)] drop-shadow-[0_0_5px_var(--color-primary-400)]", isDefaultCursor ? "w-2 h-2 rounded-full bg-[var(--color-primary)] align-middle mb-[3px]" : "font-light", className), "aria-hidden": "true", style: {
-            transformOrigin: "center center",
+    return (jsx(motion.span, { variants: cursorPulse, initial: "initial", animate: "animate", className: cn("ml-0.5 inline-block text-[var(--color-primary)]", isDefaultCursor
+            ? "h-[1.05em] w-px translate-y-[0.14em] rounded-full bg-current"
+            : "font-light", className), "aria-hidden": "true", style: {
             display: "inline-block",
         }, children: !isDefaultCursor && cursor }));
 };

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

@@ -3,6 +3,16 @@
  * Motion variants for streaming text animations
  */
 import type { Variants, Transition } from 'motion/react';
+import type { StreamingMotionOptions, StreamingMotionPreset, StreamingTokenEffect } from './StreamingResponse.types';
+export interface ResolvedStreamingMotion {
+    enabled: boolean;
+    smoothLayout: boolean;
+    tokenEffect: StreamingTokenEffect;
+    tokenDuration: number;
+    layoutDuration: number;
+}
+export declare const resolveStreamingMotion: (motion?: StreamingMotionPreset | StreamingMotionOptions, animated?: boolean) => ResolvedStreamingMotion;
+export declare const getTokenFadeIn: (effect: StreamingTokenEffect) => Variants;
 /**
  * Token fade-in animation
  * Each new token fades in with a slight upward movement

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

@@ -1,9 +1,54 @@
-import { springs, easings } from '../../../theme/animations.js';
+import { easings } from '../../../theme/animations.js';
 
 /**
  * StreamingResponse Animation Variants
  * Motion variants for streaming text animations
  */
+const motionPresets = {
+    none: {
+        enabled: false,
+        smoothLayout: false,
+        tokenEffect: 'none',
+        tokenDuration: 0,
+        layoutDuration: 0,
+    },
+    subtle: {
+        enabled: true,
+        smoothLayout: true,
+        tokenEffect: 'fade',
+        tokenDuration: 0.12,
+        layoutDuration: 0.2,
+    },
+    expressive: {
+        enabled: true,
+        smoothLayout: true,
+        tokenEffect: 'fade-blur',
+        tokenDuration: 0.18,
+        layoutDuration: 0.26,
+    },
+};
+const resolveStreamingMotion = (motion = 'subtle', animated = true) => {
+    if (!animated)
+        return motionPresets.none;
+    if (typeof motion === 'string')
+        return motionPresets[motion];
+    const preset = motionPresets[motion.preset || 'subtle'];
+    return {
+        ...preset,
+        ...motion,
+        enabled: preset.enabled,
+    };
+};
+const getTokenFadeIn = (effect) => ({
+    hidden: {
+        opacity: 0,
+        filter: effect === 'fade-blur' ? 'blur(1px)' : 'blur(0px)',
+    },
+    visible: {
+        opacity: 1,
+        filter: 'blur(0px)',
+    },
+});
 /**
  * Token fade-in animation
  * Each new token fades in with a slight upward movement
@@ -11,17 +56,15 @@ import { springs, easings } from '../../../theme/animations.js';
 const tokenFadeIn = {
     hidden: {
         opacity: 0,
-        y: 3,
-        filter: 'blur(3px)',
+        filter: 'blur(0px)',
     },
     visible: {
         opacity: 1,
-        y: 0,
         filter: 'blur(0px)',
     },
 };
 const tokenTransition = {
-    duration: 0.25,
+    duration: 0.18,
     ease: easings.easeOut,
 };
 /**
@@ -31,15 +74,14 @@ const tokenTransition = {
 const blockSlideIn = {
     hidden: {
         opacity: 0,
-        y: 6,
     },
     visible: {
         opacity: 1,
-        y: 0,
     },
 };
 const blockTransition = {
-    ...springs.smooth,
+    duration: 0.28,
+    ease: easings.easeOut,
 };
 /**
  * Streaming cursor (caret/particle) animation
@@ -47,38 +89,22 @@ const blockTransition = {
  */
 const cursorPulse = {
     initial: {
-        opacity: 0.25,
-        scale: 0.85,
+        opacity: 1,
     },
     animate: {
-        opacity: [1, 0.25, 1],
-        scale: [1.1, 0.85, 1.1],
+        opacity: [1, 1, 0.18, 0.18, 1],
         transition: {
-            duration: 0.8,
+            duration: 1.1,
             repeat: Infinity,
-            ease: 'easeInOut',
+            repeatDelay: 0.05,
+            times: [0, 0.48, 0.5, 0.92, 1],
+            ease: 'linear',
         },
     },
 };
-/**
- * Inline token fade-in animation
- * Used for word-by-word animation inside markdown prose elements
- * No y-movement to prevent layout jitter in inline text
- */
-const inlineTokenFadeIn = {
-    hidden: {
-        opacity: 0,
-        filter: 'blur(3px)',
-    },
-    visible: {
-        opacity: 1,
-        filter: 'blur(0px)',
-    },
-};
-const inlineTokenTransition = {
-    duration: 0.25,
+({
     ease: easings.easeOut,
-};
+});
 /**
  * Container animation for staggered children
  */
@@ -90,4 +116,4 @@ const staggerContainer = {
     },
 };
 
-export { blockSlideIn, blockTransition, cursorPulse, inlineTokenFadeIn, inlineTokenTransition, staggerContainer, tokenFadeIn, tokenTransition };
+export { blockSlideIn, blockTransition, cursorPulse, getTokenFadeIn, resolveStreamingMotion, staggerContainer, tokenFadeIn, tokenTransition };

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

@@ -1,6 +1,7 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect, useMemo } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
 import { useStreamingSSE } from '../../../hooks/useStreamingSSE.js';
 import { Message } from '../../core/Message/Message.js';
 import { TypeWriter } from '../../core/Message/TypeWriter.js';
@@ -12,6 +13,8 @@ import { ErrorDisplay } from './ErrorDisplay.js';
 import { MarkdownRenderer } from './MarkdownRenderer.js';
 import { AnimatedText } from './AnimatedText.js';
 import { StreamingCursor } from './StreamingCursor.js';
+import { StreamingSurface } from './StreamingSurface.js';
+import { resolveStreamingMotion } from './StreamingResponse.animations.js';
 
 /**
  * StreamingResponse component for AI/LLM streaming responses
@@ -35,9 +38,9 @@ url, method = 'POST', headers, body, format = 'openai', autoStart = true,
 // Callbacks
 onToken, onComplete, onError, onStart, onAbort, 
 // Display options
-typingSpeed = 100, enableTypewriter = true, enableMarkdown = true, markdownOptions, 
+typingSpeed = 100, enableTypewriter = false, enableMarkdown = true, markdownOptions, 
 // Animation
-animated = true, showCursor = true, animateLastN = 12, 
+animated = true, showCursor = true, animateLastN = 12, motion: motion$1 = 'subtle', streamingIndicator = false, 
 // Message component props
 role = 'assistant', avatar, showTimestamp = true, showActions = true, onCopy, onRegenerate, 
 // Error handling
@@ -62,6 +65,7 @@ className, }) => {
         onStart,
         onAbort,
     });
+    const resolvedMotion = useMemo(() => resolveStreamingMotion(motion$1, animated), [animated, motion$1]);
     // Determine content to display
     let messageContent;
     if (error && showError) {
@@ -70,11 +74,11 @@ className, }) => {
     }
     else if (enableMarkdown) {
         // Render markdown with block-level slide-in animations and streaming cursor
-        messageContent = (jsx(MarkdownRenderer, { content: accumulatedText, options: markdownOptions, isStreaming: isStreaming, animated: animated, showCursor: showCursor, animateLastN: animateLastN }));
+        messageContent = (jsx(MarkdownRenderer, { content: accumulatedText, options: markdownOptions, isStreaming: isStreaming, animated: resolvedMotion.enabled && resolvedMotion.tokenEffect !== 'none', showCursor: showCursor, animateLastN: animateLastN, tokenEffect: resolvedMotion.tokenEffect, tokenDuration: resolvedMotion.tokenDuration }));
     }
     else if (isStreaming) {
         // During streaming without markdown: use per-token fade-in animation
-        messageContent = (jsxs(Fragment, { children: [jsx(AnimatedText, { text: accumulatedText, isStreaming: isStreaming, enabled: animated }), jsx(StreamingCursor, { visible: showCursor, enabled: animated })] }));
+        messageContent = (jsx(AnimatedText, { text: accumulatedText, isStreaming: isStreaming, animateLastN: animateLastN, enabled: resolvedMotion.enabled, tokenEffect: resolvedMotion.tokenEffect, tokenDuration: resolvedMotion.tokenDuration, cursor: jsx(StreamingCursor, { visible: showCursor, enabled: resolvedMotion.enabled }) }));
     }
     else if (enableTypewriter && isComplete && accumulatedText) {
         // Use typewriter animation after streaming completes
@@ -84,8 +88,10 @@ className, }) => {
         // Show raw text (streaming complete, typewriter disabled)
         messageContent = (jsx("p", { className: "whitespace-pre-wrap wrap-break-word", children: accumulatedText }));
     }
+    const contentState = error && showError ? 'error' : 'content';
+    const animatedContent = (jsx(StreamingSurface, { isStreaming: isStreaming, enabled: resolvedMotion.enabled && resolvedMotion.smoothLayout, duration: resolvedMotion.layoutDuration, children: jsx(AnimatePresence, { initial: false, mode: "popLayout", children: jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: resolvedMotion.enabled ? 0.12 : 0 }, children: messageContent }, contentState) }) }));
     // 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 }));
+    return (jsx(Message, { role: role, content: animatedContent, avatar: avatar, timestamp: startTimeRef.current, showTimestamp: showTimestamp, isStreaming: isStreaming, streamingIndicator: streamingIndicator, showActions: showActions && !error, onCopy: onCopy, onRegenerate: onRegenerate, className: className }));
 };
 StreamingResponse.displayName = 'StreamingResponse';
 

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

@@ -25,6 +25,24 @@ export interface MarkdownOptions {
     /** Custom code block renderer */
     renderCodeBlock?: (code: string, language: string) => ReactNode;
 }
+export type StreamingMotionPreset = "none" | "subtle" | "expressive";
+export type StreamingTokenEffect = "none" | "fade" | "fade-blur";
+/**
+ * High-level motion controls for streamed content.
+ * Presets cover the common cases; individual fields are intended for product-level tuning.
+ */
+export interface StreamingMotionOptions {
+    /** Base motion treatment (default: "subtle") */
+    preset?: StreamingMotionPreset;
+    /** Smooth changes in rendered content height as lines wrap (default: true) */
+    smoothLayout?: boolean;
+    /** Treatment applied only to newly arrived words */
+    tokenEffect?: StreamingTokenEffect;
+    /** New-word transition duration in seconds */
+    tokenDuration?: number;
+    /** Content-height transition duration in seconds */
+    layoutDuration?: number;
+}
 /**
  * Props for StreamingResponse component
  */
@@ -53,7 +71,10 @@ export interface StreamingResponseProps {
     onAbort?: () => void;
     /** Typewriter animation speed in ms per word (default: 100) */
     typingSpeed?: number;
-    /** Enable typewriter animation after streaming completes (default: true) */
+    /**
+     * Replay completed plain text with a typewriter animation (default: false).
+     * Usually unnecessary when the user has already watched the response stream.
+     */
     enableTypewriter?: boolean;
     /** Enable markdown rendering (default: true) */
     enableMarkdown?: boolean;
@@ -63,8 +84,18 @@ export interface StreamingResponseProps {
     animated?: boolean;
     /** Show blinking cursor while streaming (default: true) */
     showCursor?: boolean;
-    /** Number of recent words to animate during streaming (default: 6) */
+    /** Number of recent words to animate during streaming (default: 12) */
     animateLastN?: number;
+    /**
+     * Streaming motion preset or focused overrides (default: "subtle").
+     * `animated={false}` continues to disable all motion for backwards compatibility.
+     */
+    motion?: StreamingMotionPreset | StreamingMotionOptions;
+    /**
+     * Optional footer status shown while streaming. Pass `false` to hide it.
+     * The premium default is false because the inline caret already communicates activity.
+     */
+    streamingIndicator?: ReactNode | false;
     /** Message role (default: 'assistant') */
     role?: MessageRole;
     /** Avatar configuration */

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

@@ -0,0 +1,13 @@
+import React from "react";
+export interface StreamingSurfaceProps {
+    children: React.ReactNode;
+    isStreaming: boolean;
+    enabled?: boolean;
+    duration?: number;
+    className?: string;
+}
+/**
+ * Smooths intrinsic height changes without scaling or distorting text.
+ * ResizeObserver tracks the natural content height; only the clipping frame animates.
+ */
+export declare const StreamingSurface: React.FC<StreamingSurfaceProps>;

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { easings } from '../../../theme/animations.js';
+
+/**
+ * Smooths intrinsic height changes without scaling or distorting text.
+ * ResizeObserver tracks the natural content height; only the clipping frame animates.
+ */
+const StreamingSurface = ({ children, isStreaming, enabled = true, duration = 0.22, className, }) => {
+    const contentRef = useRef(null);
+    const hasMeasuredRef = useRef(false);
+    const shouldReduceMotion = useReducedMotion();
+    const [height, setHeight] = useState();
+    const shouldAnimate = enabled && !shouldReduceMotion;
+    useLayoutEffect(() => {
+        const element = contentRef.current;
+        if (!element || typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => {
+            const nextHeight = element.getBoundingClientRect().height;
+            hasMeasuredRef.current = true;
+            setHeight((currentHeight) => currentHeight === nextHeight ? currentHeight : nextHeight);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    return (jsx(motion.div, { initial: false, animate: shouldAnimate && hasMeasuredRef.current && height !== undefined
+            ? { height }
+            : undefined, transition: { duration, ease: easings.easeOut }, className: cn(shouldAnimate && "overflow-hidden", className), style: !shouldAnimate && height !== undefined ? { height: "auto" } : undefined, "aria-busy": isStreaming, "aria-live": isStreaming ? "off" : "polite", children: jsx("div", { ref: contentRef, children: children }) }));
+};
+StreamingSurface.displayName = "StreamingSurface";
+
+export { StreamingSurface };

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

@@ -5,6 +5,7 @@
  * all markdown elements (paragraphs, headings, lists, blockquotes, etc.).
  */
 import React from "react";
+import type { StreamingTokenEffect } from "./StreamingResponse.types";
 interface WordAnimationContextValue {
     /** Process children of a prose element, animating recent words */
     processChildren: (children: React.ReactNode) => React.ReactNode;
@@ -22,6 +23,10 @@ export interface WordAnimationProviderProps {
     animateLastN?: number;
     /** Whether cursor is present in content */
     hasCursor?: boolean;
+    /** Visual treatment for newly arrived words */
+    tokenEffect?: StreamingTokenEffect;
+    /** New-word transition duration in seconds */
+    tokenDuration?: number;
 }
 export declare const WordAnimationProvider: React.FC<WordAnimationProviderProps>;
 export {};

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

@@ -2,7 +2,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { createContext, useRef, useMemo, useContext } from 'react';
 import { motion } from 'motion/react';
-import { inlineTokenTransition, inlineTokenFadeIn } from './StreamingResponse.animations.js';
+import { getTokenFadeIn } from './StreamingResponse.animations.js';
 import { StreamingCursor } from './StreamingCursor.js';
 
 const WordAnimationContext = createContext(null);
@@ -32,7 +32,7 @@ const countWordsInChildren = (children) => {
     });
     return count;
 };
-const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12, hasCursor = false, }) => {
+const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12, hasCursor = false, tokenEffect = "fade", tokenDuration = 0.12, }) => {
     const settledCountRef = useRef(0);
     // Count total prose words in the raw content
     const totalWords = useMemo(() => {
@@ -48,6 +48,7 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12,
     const wordIndexRef = useRef(0);
     wordIndexRef.current = 0;
     const settledCount = settledCountRef.current;
+    const tokenVariants = useMemo(() => getTokenFadeIn(tokenEffect), [tokenEffect]);
     const contextValue = useMemo(() => {
         if (!enabled) {
             return {
@@ -109,7 +110,7 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12,
                         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: tokenVariants, initial: "hidden", animate: "visible", transition: { duration: tokenDuration, ease: [0, 0, 0.2, 1] }, style: { display: "inline" }, children: token }, `word-${currentIndex}-${token.trim()}`));
                 }
             }
             // Flush any remaining static buffer
@@ -128,7 +129,7 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12,
         };
         return { processChildren, skipChildren };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [enabled, settledCount, totalWords]);
+    }, [enabled, settledCount, tokenDuration, tokenVariants, totalWords]);
     return (jsx(WordAnimationContext.Provider, { value: contextValue, children: children }));
 };
 WordAnimationProvider.displayName = "WordAnimationProvider";

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

@@ -7,11 +7,13 @@ export { ErrorDisplay } from './ErrorDisplay';
 export { MarkdownRenderer } from './MarkdownRenderer';
 export { AnimatedText } from './AnimatedText';
 export { StreamingCursor } from './StreamingCursor';
+export { StreamingSurface } from './StreamingSurface';
 export { WordAnimationProvider, useWordAnimation } from './WordAnimationContext';
 export { streamingResponseTheme } from './StreamingResponse.theme';
-export { tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, inlineTokenFadeIn, inlineTokenTransition, cursorPulse, staggerContainer, } from './StreamingResponse.animations';
-export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, MessageAvatarProps, } from './StreamingResponse.types';
+export { tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, inlineTokenFadeIn, inlineTokenTransition, cursorPulse, staggerContainer, resolveStreamingMotion, getTokenFadeIn, type ResolvedStreamingMotion, } from './StreamingResponse.animations';
+export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, MessageAvatarProps, StreamingMotionOptions, StreamingMotionPreset, StreamingTokenEffect, } from './StreamingResponse.types';
 export type { AnimatedTextProps } from './AnimatedText';
 export type { StreamingCursorProps } from './StreamingCursor';
+export type { StreamingSurfaceProps } from './StreamingSurface';
 export type { MarkdownRendererProps } from './MarkdownRenderer';
 export type { WordAnimationProviderProps } from './WordAnimationContext';

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

@@ -5,7 +5,7 @@ const tokenCounterTheme = {
     labelStyle: "text-[var(--color-text-muted)]",
     costStyle: "text-[var(--color-text-muted)] font-mono",
     progressStyle: "h-1 bg-[var(--color-surface-sunken)] rounded-full overflow-hidden shadow-inner-real-sm",
-    progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
+    progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-[var(--motion-duration-base)]",
     sizes: {
         sm: {
             container: "text-xs",

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

@@ -6,10 +6,11 @@ export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatC
 export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
 export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestion";
 export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestion";
-export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, StreamingCursor, streamingResponseTheme, tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from "./StreamingResponse";
-export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
+export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, StreamingCursor, StreamingSurface, streamingResponseTheme, tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from "./StreamingResponse";
+export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, StreamingSurfaceProps, MarkdownRendererProps, StreamingMotionOptions, StreamingMotionPreset, StreamingTokenEffect, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
 export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
 export * from "./AgentStatus";
+export * from "./AgentRequest";
 export * from "./Reasoning";
 export * from "./SourceCitation";

package/dist/components/ai/index.js

@@ -19,6 +19,7 @@ export { ErrorDisplay } from './StreamingResponse/ErrorDisplay.js';
 export { MarkdownRenderer } from './StreamingResponse/MarkdownRenderer.js';
 export { AnimatedText } from './StreamingResponse/AnimatedText.js';
 export { StreamingCursor } from './StreamingResponse/StreamingCursor.js';
+export { StreamingSurface } from './StreamingResponse/StreamingSurface.js';
 import './StreamingResponse/WordAnimationContext.js';
 export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.theme.js';
 export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition } from './StreamingResponse/StreamingResponse.animations.js';
@@ -26,6 +27,9 @@ export { CodeBlock } from './CodeBlock/CodeBlock.js';
 export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
 export { AgentStatus } from './AgentStatus/AgentStatus.js';
 export { agentStatusTheme } from './AgentStatus/AgentStatus.theme.js';
+export { AgentRequest } from './AgentRequest/AgentRequest.js';
+export { agentRequestTheme } from './AgentRequest/AgentRequest.theme.js';
 export { Reasoning } from './Reasoning/Reasoning.js';
+export { reasoningTheme } from './Reasoning/Reasoning.theme.js';
 export { SourceCitation, SourceCitationGroup } from './SourceCitation/SourceCitation.js';
 export { sourceCitationTheme } from './SourceCitation/SourceCitation.theme.js';

package/dist/components/canvas/BaseNode.js

@@ -11,7 +11,7 @@ import { cn } from '../../utils/cn.js';
  * `<button>`/`<input>`) to keep them clickable without starting a drag.
  */
 const BaseNode = React__default.forwardRef(function BaseNode({ selected, className, children, ...rest }, ref) {
-    return (jsx("div", { ref: ref, className: cn("relative min-w-[8rem] rounded-[var(--canvas-node-radius,0.75rem)] border bg-[var(--color-surface)] shadow-sm", "transition-all duration-300", selected
+    return (jsx("div", { ref: ref, className: cn("relative min-w-[8rem] rounded-[var(--canvas-node-radius,0.75rem)] border bg-[var(--color-surface)] shadow-sm", "transition-all duration-[var(--motion-duration-slow)]", selected
             ? "border-[var(--color-surface)] ring-4 ring-[var(--color-primary)]"
             : "border-[var(--color-border)] group-hover:border-[var(--color-border-hover)] group-hover:shadow-real-md", className), ...rest, children: children }));
 });

package/dist/components/canvas/CanvasToolbar.js

@@ -3,7 +3,6 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { CursorClick, Hand, Plus } from '@phosphor-icons/react';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../core/Button/Button.js';
-import 'react';
 import { Dropdown } from '../core/Dropdown/Dropdown.js';
 import '../core/Dropdown/DropdownTrigger.js';
 import '../core/Dropdown/DropdownMenu.js';

package/dist/components/canvas/Edge.js

@@ -88,9 +88,9 @@ const Edge = React__default.memo(function Edge({ id, type = "bezier", source, so
     const d = buildEdgePath(type, source, sourcePosition, target, targetPosition);
     // Inline stroke beats the class strokes below; selection keeps priority.
     const colorStyle = color && !selected ? { stroke: color } : undefined;
-    return (jsxs("g", { className: "group", children: [onPointerDown && (jsx("path", { d: d, fill: "none", stroke: "transparent", strokeWidth: 16, strokeLinecap: "round", "data-flikkui-edge": "", "data-edge-id": id, style: { pointerEvents: "stroke", cursor: "pointer" }, onPointerDown: onPointerDown })), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 8 : 6, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("pointer-events-none opacity-0 transition-opacity duration-150", selected
+    return (jsxs("g", { className: "group", children: [onPointerDown && (jsx("path", { d: d, fill: "none", stroke: "transparent", strokeWidth: 16, strokeLinecap: "round", "data-flikkui-edge": "", "data-edge-id": id, style: { pointerEvents: "stroke", cursor: "pointer" }, onPointerDown: onPointerDown })), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 8 : 6, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("pointer-events-none opacity-0 transition-opacity duration-[var(--motion-duration-fast)]", selected
                     ? "opacity-20 stroke-[var(--color-primary)]"
-                    : "stroke-[var(--color-primary)] group-hover:opacity-10") }), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 2.5 : 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("transition-[stroke,stroke-width] duration-150", selected
+                    : "stroke-[var(--color-primary)] group-hover:opacity-10") }), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 2.5 : 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("transition-[stroke,stroke-width] duration-[var(--motion-duration-fast)]", selected
                     ? "stroke-[var(--color-primary)]"
                     : "stroke-[var(--color-border)] group-hover:stroke-[var(--color-border-hover)]") })] }));
 }, 

package/dist/components/canvas/NodeControls.js

@@ -3,7 +3,6 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Plus, Minus, ArrowsOutSimple, Lock, LockOpen } from '@phosphor-icons/react';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../core/Button/Button.js';
-import 'react';
 import { useCanvasApi } from './context/CanvasContext.js';
 import { clamp } from './utils.js';
 

package/dist/components/canvas/NodeRenderer.js

@@ -78,7 +78,7 @@ function AutoHandle({ nodeId, position }) {
             unregister(nodeId, handleKey("source", handleId));
         };
     }, [nodeId, handleId, position, register, unregister, viewportRef]);
-    return (jsx("button", { ref: ref, type: "button", "data-flikkui-handle": "", "data-node-id": nodeId, "data-handle-type": "source", "data-handle-id": handleId, "data-handle-kind": "auto", "aria-label": `Connect from ${position}`, className: cn("nodrag absolute z-20 grid place-items-center size-4 rounded-full", "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] shadow-md ring-2 ring-[var(--color-surface)] cursor-crosshair", "opacity-0 scale-75 pointer-events-none transition-[opacity,transform,box-shadow] duration-150 ease-out", "hover:scale-110 hover:shadow-lg hover:ring-4 active:scale-95", !disabled &&
+    return (jsx("button", { ref: ref, type: "button", "data-flikkui-handle": "", "data-node-id": nodeId, "data-handle-type": "source", "data-handle-id": handleId, "data-handle-kind": "auto", "aria-label": `Connect from ${position}`, className: cn("nodrag absolute z-20 grid place-items-center size-4 rounded-full", "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] shadow-md ring-2 ring-[var(--color-surface)] cursor-crosshair", "opacity-0 scale-75 pointer-events-none transition-[opacity,transform,box-shadow] duration-[var(--motion-duration-fast)] ease-out", "hover:scale-110 hover:shadow-lg hover:ring-4 active:scale-95", !disabled &&
             "group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:scale-100 group-focus-within:pointer-events-auto", AUTO_SIDE_CLASSES[position]), onPointerDown: disabled ? undefined : onPointerDown, children: jsx(Plus, { className: "size-2.5" }) }));
 }
 // Memoized so unrelated graph updates (another node's data/position, selection
@@ -110,7 +110,7 @@ const NodeWrapper = React__default.memo(function NodeWrapper({ node, NodeCompone
         }
     };
     const selected = !!node.selected;
-    return (jsx("div", { className: cn("group absolute top-0 left-0 rounded-[var(--canvas-node-radius,0.75rem)]", "transition-[box-shadow,filter,opacity] duration-150 ease-out", "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]", tool === "pan"
+    return (jsx("div", { className: cn("group absolute top-0 left-0 rounded-[var(--canvas-node-radius,0.75rem)]", "transition-[box-shadow,filter,opacity] duration-[var(--motion-duration-fast)] ease-out", "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]", tool === "pan"
             ? "cursor-grab"
             : node.draggable !== false && "cursor-grab active:cursor-grabbing", 
         // Selection visuals belong to the node component (BaseNode is the