@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -154,6 +154,59 @@ export interface PromptInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     submitButtonIcon?: React.ReactNode;
     /** Visual indicator for keyboard shortcut (not functional) */
     submitShortcut?: string;
+    /**
+     * Callback when stop button is clicked during loading state.
+     * When provided AND state="loading", the submit button becomes a stop button.
+     */
+    onStop?: () => void;
+    /**
+     * Enable inline voice recording mode.
+     * When true, clicking the voice button starts an inline recording UI
+     * instead of calling onVoiceClick.
+     * @default false
+     */
+    enableVoiceRecording?: boolean;
+    /**
+     * Called when the user confirms a voice recording
+     * @param audioBlob - The recorded audio as a Blob
+     */
+    onRecordingComplete?: (audioBlob: Blob) => void;
+    /**
+     * Called when the user cancels a voice recording
+     */
+    onRecordingCancel?: () => void;
+    /**
+     * Maximum recording duration in seconds (auto-stops at limit)
+     * @default 120
+     */
+    maxRecordingDuration?: number;
+    /**
+     * Enable drag-and-drop file attachment
+     * @default true
+     */
+    enableDropzone?: boolean;
+    /**
+     * Text displayed in the dropzone overlay (legacy, used as fallback for dropzoneTitle)
+     * @default "Drop files here to add to chat"
+     */
+    dropzoneText?: string;
+    /**
+     * Title text for the enhanced dropzone overlay.
+     * Supports **bold** markdown for the "browse" action word.
+     * Falls back to dropzoneText if not provided.
+     */
+    dropzoneTitle?: string;
+    /**
+     * Subtitle text for the enhanced dropzone overlay
+     */
+    dropzoneSubtitle?: string;
+    /**
+     * Layout variant
+     * - "default": stacked layout with footer toolbar below textarea
+     * - "simple": inline layout with submit button next to textarea, no footer
+     * @default "default"
+     */
+    variant?: "default" | "simple";
     /** Additional class name for the container (highest priority) */
     className?: string;
     /** Additional class name for the textarea element */
@@ -203,6 +256,16 @@ export interface PromptInputThemeOverrides {
     actionsStyle?: string;
     /** Style for the submit button */
     submitButtonStyle?: string;
+    /** Style for the dropzone overlay */
+    dropzoneStyle?: string;
+    /** Style for the dropzone title text */
+    dropzoneTitleStyle?: string;
+    /** Style for the dropzone subtitle text */
+    dropzoneSubtitleStyle?: string;
+    /** Style for the dropzone action icons row */
+    dropzoneActionsStyle?: string;
+    /** Style for the voice recorder container */
+    voiceRecorderStyle?: string;
     /** State-specific styles */
     states?: Partial<Record<PromptInputState, string>>;
 }
@@ -215,5 +278,10 @@ export interface PromptInputTheme {
     footerStyle: string;
     actionsStyle: string;
     submitButtonStyle: string;
+    dropzoneStyle: string;
+    dropzoneTitleStyle: string;
+    dropzoneSubtitleStyle: string;
+    dropzoneActionsStyle: string;
+    voiceRecorderStyle: string;
     states: Record<PromptInputState, string>;
 }

package/dist/components/ai/PromptInput/VoiceRecorder.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { VoiceRecorderProps } from "./VoiceRecorder.types";
+/**
+ * Internal voice recorder sub-component.
+ * Handles MediaRecorder lifecycle, timer display, and recording controls.
+ *
+ * Recording starts immediately on mount.
+ * Not exported from the library's public API.
+ */
+export declare const VoiceRecorder: React.FC<VoiceRecorderProps>;

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

@@ -0,0 +1,181 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { PlayIcon, PauseIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { Button } from '../../core/Button/Button.js';
+
+/**
+ * Format seconds into MM:SS display
+ */
+const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+};
+/**
+ * Internal voice recorder sub-component.
+ * Handles MediaRecorder lifecycle, timer display, and recording controls.
+ *
+ * Recording starts immediately on mount.
+ * Not exported from the library's public API.
+ */
+const VoiceRecorder = ({ onComplete, onCancel, maxDuration, className, }) => {
+    const [recordingState, setRecordingState] = useState("idle");
+    const [elapsed, setElapsed] = useState(0);
+    const mediaRecorderRef = useRef(null);
+    const chunksRef = useRef([]);
+    const timerRef = useRef(null);
+    const streamRef = useRef(null);
+    /**
+     * Clean up timer
+     */
+    const clearTimer = useCallback(() => {
+        if (timerRef.current) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    /**
+     * Stop all media tracks and clean up
+     */
+    const cleanup = useCallback(() => {
+        clearTimer();
+        if (mediaRecorderRef.current &&
+            mediaRecorderRef.current.state !== "inactive") {
+            mediaRecorderRef.current.stop();
+        }
+        if (streamRef.current) {
+            streamRef.current.getTracks().forEach((track) => track.stop());
+            streamRef.current = null;
+        }
+        mediaRecorderRef.current = null;
+    }, [clearTimer]);
+    /**
+     * Start the recording timer
+     */
+    const startTimer = useCallback(() => {
+        clearTimer();
+        timerRef.current = setInterval(() => {
+            setElapsed((prev) => prev + 1);
+        }, 1000);
+    }, [clearTimer]);
+    /**
+     * Start recording immediately on mount
+     */
+    useEffect(() => {
+        let cancelled = false;
+        const startRecording = async () => {
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    audio: true,
+                });
+                if (cancelled) {
+                    stream.getTracks().forEach((t) => t.stop());
+                    return;
+                }
+                streamRef.current = stream;
+                // Choose supported MIME type
+                const mimeType = MediaRecorder.isTypeSupported("audio/webm;codecs=opus")
+                    ? "audio/webm;codecs=opus"
+                    : MediaRecorder.isTypeSupported("audio/webm")
+                        ? "audio/webm"
+                        : "";
+                const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
+                mediaRecorderRef.current = recorder;
+                chunksRef.current = [];
+                recorder.ondataavailable = (e) => {
+                    if (e.data.size > 0) {
+                        chunksRef.current.push(e.data);
+                    }
+                };
+                recorder.start(100); // collect data every 100ms
+                setRecordingState("recording");
+                startTimer();
+            }
+            catch (_a) {
+                if (process.env.NODE_ENV !== "production") {
+                    // eslint-disable-next-line no-console
+                    console.warn("[VoiceRecorder] Microphone access denied or unavailable.");
+                }
+                onCancel();
+            }
+        };
+        startRecording();
+        return () => {
+            cancelled = true;
+            cleanup();
+        };
+        // Only run on mount/unmount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    /**
+     * Auto-stop at max duration
+     */
+    useEffect(() => {
+        if (elapsed >= maxDuration && recordingState === "recording") {
+            handleConfirm();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [elapsed, maxDuration, recordingState]);
+    /**
+     * Handle cancel — stop recording and discard
+     */
+    const handleCancel = useCallback(() => {
+        cleanup();
+        chunksRef.current = [];
+        setRecordingState("idle");
+        onCancel();
+    }, [cleanup, onCancel]);
+    /**
+     * Handle confirm — stop recording and return blob
+     */
+    const handleConfirm = useCallback(() => {
+        if (!mediaRecorderRef.current) {
+            onCancel();
+            return;
+        }
+        const recorder = mediaRecorderRef.current;
+        recorder.onstop = () => {
+            const mimeType = recorder.mimeType || "audio/webm";
+            const blob = new Blob(chunksRef.current, { type: mimeType });
+            chunksRef.current = [];
+            if (streamRef.current) {
+                streamRef.current.getTracks().forEach((t) => t.stop());
+                streamRef.current = null;
+            }
+            onComplete(blob);
+        };
+        clearTimer();
+        if (recorder.state !== "inactive") {
+            recorder.stop();
+        }
+        setRecordingState("idle");
+    }, [clearTimer, onComplete, onCancel]);
+    /**
+     * Toggle pause/resume
+     */
+    const handleTogglePause = useCallback(() => {
+        const recorder = mediaRecorderRef.current;
+        if (!recorder)
+            return;
+        if (recordingState === "recording") {
+            recorder.pause();
+            clearTimer();
+            setRecordingState("paused");
+        }
+        else if (recordingState === "paused") {
+            recorder.resume();
+            startTimer();
+            setRecordingState("recording");
+        }
+    }, [recordingState, clearTimer, startTimer]);
+    return (jsxs("div", { className: cn("flex items-center justify-between w-full", className), children: [jsx(Button, { variant: "soft", color: "neutral", size: "sm", className: "rounded-full", onClick: handleCancel, "aria-label": "Cancel recording", children: "Cancel" }), jsxs("div", { className: "flex items-center gap-2.5", children: [jsx(motion.div, { className: "size-2.5 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
+                            ? { opacity: [1, 0.3, 1] }
+                            : { opacity: 0.5 }, transition: recordingState === "recording"
+                            ? { duration: 1.2, repeat: Infinity, ease: "easeInOut" }
+                            : undefined }), jsx("span", { className: "text-lg font-medium tabular-nums text-[var(--color-text-primary)] min-w-[3.5rem] text-center", children: formatTime(elapsed) })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full", onClick: handleTogglePause, "aria-label": recordingState === "paused" ? "Resume recording" : "Pause recording", children: recordingState === "paused" ? (jsx(PlayIcon, { className: "size-4", strokeWidth: 2 })) : (jsx(PauseIcon, { className: "size-4", strokeWidth: 2 })) }), jsx(Button, { iconOnly: true, variant: "filled", color: "primary", size: "sm", className: "rounded-full", onClick: handleConfirm, "aria-label": "Confirm recording", children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2.5 }) })] })] }));
+};
+VoiceRecorder.displayName = "VoiceRecorder";
+
+export { VoiceRecorder };

package/dist/components/ai/PromptInput/VoiceRecorder.types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Recording state machine states
+ */
+export type RecordingState = "idle" | "recording" | "paused";
+/**
+ * Props for the internal VoiceRecorder sub-component
+ */
+export interface VoiceRecorderProps {
+    /** Called when user confirms the recording */
+    onComplete: (audioBlob: Blob) => void;
+    /** Called when user cancels the recording */
+    onCancel: () => void;
+    /** Maximum recording duration in seconds (auto-stops at limit) */
+    maxDuration: number;
+    /** Theme class for the recorder container */
+    className?: string;
+}

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

@@ -1,3 +1,4 @@
 export { PromptInput } from "./PromptInput";
 export type { PromptInputProps, PromptInputState, PromptInputTheme, PromptInputThemeOverrides, ModelOption, AttachmentItem, AttachmentError, } from "./PromptInput.types";
+export type { RecordingState } from "./VoiceRecorder.types";
 export { promptInputTheme } from "./PromptInput.theme";

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

@@ -1,10 +1,10 @@
 const promptSuggestionTheme = {
-    baseStyle: "inline-flex items-center gap-2 py-2 px-3.5 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-sm 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.d.ts

@@ -1,7 +1,8 @@
 /**
  * MarkdownRenderer Component
  * Renders markdown content with syntax highlighting for code blocks
- * Supports optional block-level slide-in animations during streaming
+ * Supports word-by-word fade-in animation during streaming
+ * and an inline cursor that appears at the end of the last text element
  */
 import React from 'react';
 import type { MarkdownOptions } from './StreamingResponse.types';
@@ -16,10 +17,12 @@ export interface MarkdownRendererProps {
     animated?: boolean;
     /** Show a blinking cursor at end of content while streaming */
     showCursor?: boolean;
+    /** Number of recent words to animate (default: 6) */
+    animateLastN?: number;
 }
 /**
  * MarkdownRenderer component for rendering markdown with syntax highlighting
  * Supports GitHub Flavored Markdown (tables, task lists, strikethrough, etc.)
- * Optionally animates block-level elements during streaming with slide-in effect
+ * Animates individual words during streaming with a fade-in + blur effect
  */
 export declare const MarkdownRenderer: React.FC<MarkdownRendererProps>;

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

@@ -1,16 +1,17 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useRef } from 'react';
+import React__default, { useMemo, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Prism } from 'react-syntax-highlighter';
 import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import remarkGfm from 'remark-gfm';
 import { useReducedMotion, motion } from 'motion/react';
 import { blockTransition, blockSlideIn } from './StreamingResponse.animations.js';
-import { StreamingCursor } from './StreamingCursor.js';
+import { WordAnimationProvider, useWordAnimation } from './WordAnimationContext.js';
 
 /**
  * Wrapper that optionally animates block-level elements during streaming.
  * Once an element has animated in, it stays static (no re-animation on re-render).
+ * Used for structural elements like code blocks and tables.
  */
 const AnimatedBlock = ({ children, animate, className, as = 'div' }) => {
     const hasAnimatedRef = useRef(false);
@@ -26,15 +27,38 @@ const AnimatedBlock = ({ children, animate, className, as = 'div' }) => {
     const MotionTag = as === 'p' ? motion.p : motion.div;
     return (jsx(MotionTag, { variants: blockSlideIn, initial: "hidden", animate: "visible", transition: blockTransition, className: className, children: children }));
 };
+/**
+ * Prose wrapper — uses word-level animation from context for text elements.
+ * Falls back to plain rendering when animation is disabled.
+ */
+const AnimatedProse = ({ children, className, as: tag = 'p', }) => {
+    const wordAnim = useWordAnimation();
+    const content = wordAnim ? wordAnim.processChildren(children) : children;
+    return React__default.createElement(tag, { className }, content);
+};
+/**
+ * Skip counter — counts words in non-prose children to keep counter in sync.
+ */
+const SkipWords = ({ children }) => {
+    const wordAnim = useWordAnimation();
+    if (wordAnim) {
+        wordAnim.skipChildren(children);
+    }
+    return null;
+};
 /**
  * MarkdownRenderer component for rendering markdown with syntax highlighting
  * Supports GitHub Flavored Markdown (tables, task lists, strikethrough, etc.)
- * Optionally animates block-level elements during streaming with slide-in effect
+ * Animates individual words during streaming with a fade-in + blur effect
  */
-const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated = true, showCursor = true, }) => {
+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;
     const markdownComponents = useMemo(() => ({
         // Code blocks with syntax highlighting
         code({ inline, className, children, ...props }) {
@@ -42,82 +66,82 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
             const language = match ? match[1] : '';
             // Use custom code block renderer if provided
             if (!inline && renderCodeBlock && language) {
-                return (jsx(AnimatedBlock, { animate: shouldAnimate, children: renderCodeBlock(String(children).replace(/\n$/, ''), language) }));
+                return (jsxs(AnimatedBlock, { animate: shouldAnimate, children: [jsx(SkipWords, { children: children }), renderCodeBlock(String(children).replace(/\n$/, ''), language)] }));
             }
             // Render syntax-highlighted code block
             if (!inline && language) {
-                return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx(Prism, { style: syntaxTheme === 'dark' ? oneDark : oneLight, language: language, PreTag: "div", className: "rounded-lg my-3", ...props, children: String(children).replace(/\n$/, '') }) }));
+                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
-            return (jsx("code", { className: "bg-[var(--color-background-tertiary)] text-[var(--color-primary)] px-1.5 py-0.5 rounded text-sm font-mono", ...props, children: children }));
+            // Inline code — skip word animation for code tokens
+            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
+        // Paragraphs — word-level animation
         p({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, 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
+        // Headings — word-level animation
         h1({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: jsx("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(AnimatedBlock, { animate: shouldAnimate, children: jsx("h2", { className: "text-xl 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(AnimatedBlock, { animate: shouldAnimate, children: jsx("h3", { className: "text-lg 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(AnimatedBlock, { animate: shouldAnimate, children: jsx("h4", { className: "text-base 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(AnimatedBlock, { animate: shouldAnimate, children: jsx("h5", { className: "text-sm 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(AnimatedBlock, { animate: shouldAnimate, children: jsx("h6", { className: "text-sm 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
+        // Lists — word-level animation on li
         ul({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: 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(AnimatedBlock, { animate: shouldAnimate, children: 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("li", { className: "ml-4", children: children });
+            return (jsx(AnimatedProse, { as: "li", className: "ml-4", children: children }));
         },
-        // Blockquotes
+        // Blockquotes — word-level animation
         blockquote({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, children: 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 (from remarkGfm)
+        // Tables — block-level slide-in, skip word animation
         table({ children }) {
-            return (jsx(AnimatedBlock, { animate: shouldAnimate, 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
+        // 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 }) {
@@ -125,10 +149,10 @@ 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 (jsxs(Fragment, { children: [jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: !allowHtml, components: markdownComponents, children: content }), jsx(StreamingCursor, { visible: isStreaming && showCursor, enabled: animated })] }));
+    return (jsx(WordAnimationProvider, { content: displayContent, enabled: shouldAnimate, animateLastN: animateLastN, hasCursor: isStreaming && showCursor, children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: !allowHtml, components: markdownComponents, children: displayContent }) }));
 };
 MarkdownRenderer.displayName = 'MarkdownRenderer';
 

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

@@ -1,8 +1,8 @@
 /**
  * StreamingCursor Component
- * Animated blinking cursor shown at the end of streaming text
+ * Simple blinking cursor shown at the end of streaming text
  */
-import React from 'react';
+import React from "react";
 export interface StreamingCursorProps {
     /** Whether the cursor is visible (typically while streaming) */
     visible: boolean;
@@ -14,8 +14,7 @@ export interface StreamingCursorProps {
     className?: string;
 }
 /**
- * StreamingCursor renders an animated blinking caret
- * that indicates active streaming. Automatically respects
- * reduced motion preferences.
+ * StreamingCursor renders a blinking caret that indicates active streaming.
+ * Uses a simple CSS pulse animation — no framer motion, no layout shifts.
  */
 export declare const StreamingCursor: React.FC<StreamingCursorProps>;

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

@@ -1,21 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
-import { useReducedMotion, motion } from 'motion/react';
-import { cursorPulse } from './StreamingResponse.animations.js';
 
 /**
- * StreamingCursor renders an animated blinking caret
- * that indicates active streaming. Automatically respects
- * reduced motion preferences.
+ * 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 shouldReduceMotion = useReducedMotion();
+const StreamingCursor = ({ visible, enabled = true, cursor = "▏", className, }) => {
     if (!visible)
         return null;
-    if (!enabled || shouldReduceMotion) {
-        return (jsx("span", { className: className || 'text-[var(--color-primary)] font-light ml-0.5', "aria-hidden": "true", children: cursor }));
-    }
-    return (jsx(motion.span, { variants: cursorPulse, animate: "pulse", className: className || 'text-[var(--color-primary)] font-light ml-0.5 inline-block', "aria-hidden": "true", children: cursor }));
+    return (jsx("span", { className: className || `font-extralight ml-0.5 ${enabled ? "animate-pulse" : ""}`, "aria-hidden": "true", children: cursor }));
 };
-StreamingCursor.displayName = 'StreamingCursor';
+StreamingCursor.displayName = "StreamingCursor";
 
 export { StreamingCursor };

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

@@ -20,6 +20,13 @@ export declare const blockTransition: Transition;
  * Pulses while streaming is active
  */
 export declare const cursorPulse: Variants;
+/**
+ * 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
+ */
+export declare const inlineTokenFadeIn: Variants;
+export declare const inlineTokenTransition: Transition;
 /**
  * Container animation for staggered children
  */