@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

package/dist/components/core/Message/Message.types.d.ts

@@ -1,12 +1,56 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 /**
  * Message role types for AI conversations
  */
-export type MessageRole = 'user' | 'assistant' | 'system';
+export type MessageRole = "user" | "assistant" | "system";
 /**
  * Message variant types for chat UI
  */
-export type MessageVariant = 'sender' | 'receiver' | 'system';
+export type MessageVariant = "sender" | "receiver" | "system";
+/**
+ * Message delivery status
+ */
+export type MessageStatus = "sending" | "sent" | "delivered" | "read" | "failed";
+/**
+ * Attachment types
+ */
+export type MessageAttachmentType = "file" | "image" | "audio" | "link";
+/**
+ * Attachment data
+ */
+export interface MessageAttachment {
+    type: MessageAttachmentType;
+    name?: string;
+    url?: string;
+    size?: string;
+    duration?: string;
+    thumbnailUrl?: string;
+    description?: string;
+    domain?: string;
+}
+/**
+ * Reaction data
+ */
+export interface MessageReaction {
+    emoji: string;
+    count: number;
+    reacted?: boolean;
+}
+/**
+ * Reply/quote reference
+ */
+export interface MessageReplyTo {
+    name: string;
+    content: string;
+    avatar?: string;
+}
+/**
+ * Sender display info
+ */
+export interface MessageSenderInfo {
+    name: string;
+    avatar?: string;
+}
 /**
  * Avatar configuration for message sender
  */
@@ -16,9 +60,9 @@ export interface MessageAvatarProps {
      */
     src?: string;
     /**
-     * Alternative text for the avatar image
+     * The name for the avatar (used for initials and alt text)
      */
-    alt: string;
+    name: string;
     /**
      * Fallback content to display when image fails to load
      */
@@ -28,7 +72,7 @@ export interface MessageAvatarProps {
  * Message component props
  * Supports both props-based API and compound component API
  */
-export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * The role of the message sender (AI semantic naming)
      * Takes precedence over variant if both are provided
@@ -47,7 +91,7 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     variant?: MessageVariant;
     /**
      * The message content (supports rich content, markdown, etc.)
-     * Note: Optional when using compound API with Message.Content
+     * Note: Optional when using compound API with Message.Body
      */
     content?: ReactNode;
     /**
@@ -99,6 +143,43 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default true for assistant messages
      */
     showActions?: boolean;
+    /**
+     * Delivery status indicator (sending/sent/delivered/read/failed)
+     * Only renders for sender variant
+     */
+    status?: MessageStatus;
+    /**
+     * Timestamp when the message was read (shown alongside read status)
+     */
+    readAt?: Date | string;
+    /**
+     * Callback when retry button is clicked on failed messages
+     */
+    onRetry?: () => void;
+    /**
+     * File, image, audio, or link attachments
+     */
+    attachments?: MessageAttachment[];
+    /**
+     * Emoji reactions displayed below the message
+     */
+    reactions?: MessageReaction[];
+    /**
+     * Callback when a reaction pill is clicked
+     */
+    onReactionClick?: (emoji: string) => void;
+    /**
+     * Reply/quote reference shown above message content
+     */
+    replyTo?: MessageReplyTo;
+    /**
+     * Sender display info (name shown above receiver bubbles)
+     */
+    sender?: MessageSenderInfo;
+    /**
+     * Whether this is a consecutive message from the same sender (hides avatar & name)
+     */
+    isGrouped?: boolean;
     /**
      * Custom theme overrides
      */
@@ -126,6 +207,23 @@ export interface MessageTheme {
     };
     streamingIndicatorStyle: string;
     actionsContainerStyle: string;
+    statusStyle: string;
+    statusSending: string;
+    statusSent: string;
+    statusDelivered: string;
+    statusRead: string;
+    statusFailed: string;
+    attachmentContainerStyle: string;
+    fileStyle: string;
+    imageStyle: string;
+    audioStyle: string;
+    linkStyle: string;
+    reactionsContainerStyle: string;
+    reactionPillStyle: string;
+    reactionPillActiveStyle: string;
+    replyStyle: string;
+    dateDividerStyle: string;
+    senderNameStyle: string;
 }
 /**
  * Theme overrides for Message component
@@ -141,6 +239,23 @@ export interface MessageThemeOverrides {
     };
     streamingIndicatorStyle?: string;
     actionsContainerStyle?: string;
+    statusStyle?: string;
+    statusSending?: string;
+    statusSent?: string;
+    statusDelivered?: string;
+    statusRead?: string;
+    statusFailed?: string;
+    attachmentContainerStyle?: string;
+    fileStyle?: string;
+    imageStyle?: string;
+    audioStyle?: string;
+    linkStyle?: string;
+    reactionsContainerStyle?: string;
+    reactionPillStyle?: string;
+    reactionPillActiveStyle?: string;
+    replyStyle?: string;
+    dateDividerStyle?: string;
+    senderNameStyle?: string;
     /** @deprecated Use variants.sender.containerModifier instead */
     senderContainerStyle?: string;
     /** @deprecated Use variants.sender.bubbleStyle instead */

package/dist/components/core/Message/MessageActions.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/core/Message/MessageAudio.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface MessageAudioProps {
+    duration?: string;
+    name?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MessageAudio: React.FC<MessageAudioProps>;

package/dist/components/core/Message/MessageAudio.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { PlayIcon } from '@heroicons/react/24/solid';
+
+const MessageAudio = ({ duration, name, onClick, className, }) => {
+    return (jsxs("div", { className: cn(messageTheme.audioStyle, className), children: [jsx("button", { onClick: onClick, className: "flex items-center justify-center size-8 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] flex-shrink-0 cursor-pointer", "aria-label": name ? `Play ${name}` : "Play audio", type: "button", children: jsx(PlayIcon, { className: "size-4 ml-0.5" }) }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [name && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name })), duration && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: duration }))] })] }));
+};
+
+export { MessageAudio };

package/dist/components/core/Message/MessageAvatar.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
 export interface MessageAvatarComponentProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The source URL for the avatar image
      */
     src?: string;
     /**
-     * The name or alt text for the avatar
+     * The name for the avatar
      */
     name: string;
     /**

package/dist/components/core/Message/MessageAvatar.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Avatar } from '../Avatar/Avatar.js';
@@ -6,11 +7,11 @@ import { useMessageContext } from './MessageContext.js';
 const MessageAvatar = React__default.forwardRef(({ src, name, fallback, className, ...props }, ref) => {
     const { variant } = useMessageContext();
     // Don't render avatar for system messages
-    if (variant === 'system') {
+    if (variant === "system") {
         return null;
     }
-    return (jsx("div", { ref: ref, className: className, ...props, children: jsx(Avatar, { src: src, alt: name, fallback: fallback, size: "xs" }) }));
+    return (jsx("div", { ref: ref, className: className, ...props, children: jsx(Avatar, { src: src, name: name, fallback: fallback, size: "xs" }) }));
 });
-MessageAvatar.displayName = 'Message.Avatar';
+MessageAvatar.displayName = "Message.Avatar";
 
 export { MessageAvatar };

package/dist/components/core/Message/MessageBody.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The message content
+     */
+    children: React.ReactNode;
+}
+export declare const MessageBody: React.ForwardRefExoticComponent<MessageBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Message/{MessageContent.js → MessageBody.js}

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
@@ -5,7 +6,7 @@ import { useMessageContext } from './MessageContext.js';
 import { messageTheme } from './Message.theme.js';
 import { TypeWriter } from './TypeWriter.js';
 
-const MessageContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
+const MessageBody = React__default.forwardRef(({ children, className, ...props }, ref) => {
     const { variant, role, isStreaming, typingSpeed } = useMessageContext();
     // Get variant-specific theme
     const variantTheme = messageTheme.variants[variant];
@@ -17,6 +18,6 @@ const MessageContent = React__default.forwardRef(({ children, className, ...prop
         typeof children === 'string';
     return (jsx("div", { ref: ref, className: bubbleStyle, ...props, children: shouldAnimate ? (jsx(TypeWriter, { text: children, speed: typingSpeed, enabled: true, className: "break-words" })) : typeof children === 'string' ? (jsx("p", { className: "break-words", children: children })) : (children) }));
 });
-MessageContent.displayName = 'Message.Content';
+MessageBody.displayName = 'Message.Body';
 
-export { MessageContent };
+export { MessageBody };

package/dist/components/core/Message/MessageContext.d.ts

@@ -1,9 +1,11 @@
-import { MessageRole, MessageVariant } from './Message.types';
+import { MessageRole, MessageVariant, MessageStatus } from './Message.types';
 export interface MessageContextValue {
     role?: MessageRole;
     variant: MessageVariant;
     isStreaming?: boolean;
     typingSpeed?: number;
+    status?: MessageStatus;
+    isGrouped?: boolean;
 }
 export declare const MessageContext: import("react").Context<MessageContextValue | undefined>;
 export declare const useMessageContext: () => MessageContextValue;

package/dist/components/core/Message/MessageContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 const MessageContext = createContext(undefined);

package/dist/components/core/Message/MessageDateDivider.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface MessageDateDividerProps {
+    label: string;
+    className?: string;
+}
+export declare const MessageDateDivider: React.FC<MessageDateDividerProps>;

package/dist/components/core/Message/MessageDateDivider.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageDateDivider = ({ label, className, }) => {
+    return (jsxs("div", { className: cn(messageTheme.dateDividerStyle, className), children: [jsx("hr", { className: "flex-1 border-t border-[var(--color-border)]" }), jsx("span", { children: label }), jsx("hr", { className: "flex-1 border-t border-[var(--color-border)]" })] }));
+};
+
+export { MessageDateDivider };

package/dist/components/core/Message/MessageFile.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface MessageFileProps {
+    name?: string;
+    url?: string;
+    size?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MessageFile: React.FC<MessageFileProps>;

package/dist/components/core/Message/MessageFile.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { DocumentIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+
+const MessageFile = ({ name = "File", url, size, onClick, className, }) => {
+    const content = (jsxs("div", { className: cn(messageTheme.fileStyle, className), onClick: !url ? onClick : undefined, role: !url && onClick ? "button" : undefined, tabIndex: !url && onClick ? 0 : undefined, children: [jsx(DocumentIcon, { className: "size-5 flex-shrink-0 text-[var(--color-text-muted)]" }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name }), size && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: size }))] }), url && (jsx(ArrowDownTrayIcon, { className: "size-4 flex-shrink-0 text-[var(--color-text-muted)]" }))] }));
+    if (url) {
+        return (jsx("a", { href: url, download: true, className: "no-underline", "aria-label": `Download ${name}`, children: content }));
+    }
+    return content;
+};
+
+export { MessageFile };

package/dist/components/core/Message/MessageImage.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface MessageImageProps {
+    src?: string;
+    thumbnailUrl?: string;
+    name?: string;
+    size?: string;
+    alt?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MessageImage: React.FC<MessageImageProps>;

package/dist/components/core/Message/MessageImage.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageImage = ({ src, thumbnailUrl, name, size, alt, onClick, className, }) => {
+    const imgSrc = thumbnailUrl || src;
+    if (!imgSrc)
+        return null;
+    return (jsxs("div", { className: cn(messageTheme.imageStyle, className), children: [jsx("img", { src: imgSrc, alt: alt || name || "Image attachment", className: "w-full h-auto object-cover cursor-pointer", onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined }), (name || size) && (jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 text-xs text-[var(--color-text-muted)]", children: [name && jsx("span", { className: "truncate", children: name }), size && jsx("span", { className: "flex-shrink-0", children: size })] }))] }));
+};
+
+export { MessageImage };

package/dist/components/core/Message/MessageLink.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface MessageLinkProps {
+    url?: string;
+    thumbnailUrl?: string;
+    title?: string;
+    description?: string;
+    domain?: string;
+    className?: string;
+}
+export declare const MessageLink: React.FC<MessageLinkProps>;

package/dist/components/core/Message/MessageLink.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { LinkIcon } from '@heroicons/react/16/solid';
+
+const MessageLink = ({ url, thumbnailUrl, title, description, domain, className, }) => {
+    const content = (jsxs("div", { className: cn(messageTheme.linkStyle, className), children: [thumbnailUrl && (jsx("img", { src: thumbnailUrl, alt: title || "Link preview", className: "w-full h-32 object-cover" })), jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-0.5", children: [title && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] line-clamp-1", children: title })), description && (jsx("span", { className: "text-[var(--color-text-muted)] line-clamp-2", children: description })), domain && (jsxs("span", { className: "flex items-center gap-1 text-xs text-[var(--color-text-placeholder)] mt-0.5", children: [jsx(LinkIcon, { className: "size-3" }), domain] }))] })] }));
+    if (url) {
+        return (jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "no-underline", "aria-label": title ? `Open ${title}` : "Open link", children: content }));
+    }
+    return content;
+};
+
+export { MessageLink };

package/dist/components/core/Message/MessageList.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useCallback, useEffect } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';

package/dist/components/core/Message/MessageReactions.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { MessageReaction } from "./Message.types";
+export interface MessageReactionsProps {
+    reactions?: MessageReaction[];
+    onReactionClick?: (emoji: string) => void;
+    className?: string;
+}
+export declare const MessageReactions: React.FC<MessageReactionsProps>;

package/dist/components/core/Message/MessageReactions.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageReactions = ({ reactions, onReactionClick, className, }) => {
+    if (!(reactions === null || reactions === void 0 ? void 0 : reactions.length))
+        return null;
+    return (jsx("div", { className: cn(messageTheme.reactionsContainerStyle, className), children: reactions.map((reaction) => (jsxs("button", { type: "button", onClick: () => onReactionClick === null || onReactionClick === void 0 ? void 0 : onReactionClick(reaction.emoji), className: cn(messageTheme.reactionPillStyle, reaction.reacted && messageTheme.reactionPillActiveStyle), "aria-label": `${reaction.emoji} ${reaction.count}`, children: [jsx("span", { children: reaction.emoji }), jsx("span", { children: reaction.count })] }, reaction.emoji))) }));
+};
+
+export { MessageReactions };

package/dist/components/core/Message/MessageReply.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface MessageReplyProps {
+    name: string;
+    content: string;
+    avatar?: string;
+    className?: string;
+}
+export declare const MessageReply: React.FC<MessageReplyProps>;

package/dist/components/core/Message/MessageReply.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageReply = ({ name, content, className, }) => {
+    return (jsxs("div", { className: cn(messageTheme.replyStyle, className), children: [jsx("span", { className: "font-semibold text-[var(--color-text-primary)]", children: name }), jsx("p", { className: "line-clamp-2 mt-0.5", children: content })] }));
+};
+
+export { MessageReply };

package/dist/components/core/Message/MessageSenderName.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface MessageSenderNameProps {
+    name: string;
+    className?: string;
+}
+export declare const MessageSenderName: React.FC<MessageSenderNameProps>;

package/dist/components/core/Message/MessageSenderName.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageSenderName = ({ name, className, }) => {
+    return (jsx("span", { className: cn(messageTheme.senderNameStyle, className), children: name }));
+};
+
+export { MessageSenderName };

package/dist/components/core/Message/MessageStatusIndicator.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { MessageStatus } from "./Message.types";
+export interface MessageStatusIndicatorProps {
+    status?: MessageStatus;
+    readAt?: Date | string;
+    onRetry?: () => void;
+    className?: string;
+}
+export declare const MessageStatusIndicator: React.FC<MessageStatusIndicatorProps>;

package/dist/components/core/Message/MessageStatusIndicator.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { Link } from '../Link/Link.js';
+import { ExclamationCircleIcon, CheckIcon, ClockIcon } from '@heroicons/react/16/solid';
+
+const DoubleCheck = ({ className }) => (jsxs("span", { className: cn("inline-flex items-center -space-x-2", className), children: [jsx(CheckIcon, { className: "size-3.5" }), jsx(CheckIcon, { className: "size-3.5" })] }));
+const MessageStatusIndicator = ({ status, readAt, onRetry, className, }) => {
+    if (!status)
+        return null;
+    const statusConfig = {
+        sending: {
+            icon: jsx(ClockIcon, { className: "size-3.5" }),
+            style: messageTheme.statusSending,
+            label: "Sending",
+        },
+        sent: {
+            icon: jsx(CheckIcon, { className: "size-3.5" }),
+            style: messageTheme.statusSent,
+            label: "Sent",
+        },
+        delivered: {
+            icon: jsx(DoubleCheck, {}),
+            style: messageTheme.statusDelivered,
+            label: "Delivered",
+        },
+        read: {
+            icon: jsx(DoubleCheck, {}),
+            style: messageTheme.statusRead,
+            label: readAt
+                ? `Read ${typeof readAt === "string" ? readAt : readAt.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
+                : "Read",
+        },
+        failed: {
+            icon: jsx(ExclamationCircleIcon, { className: "size-3.5" }),
+            style: messageTheme.statusFailed,
+            label: "Failed",
+        },
+    };
+    const config = statusConfig[status];
+    return (jsxs("div", { className: cn(messageTheme.statusStyle, config.style, className), children: [jsx("span", { "aria-hidden": "true", className: "inline-flex items-center", children: config.icon }), jsx("span", { className: "sr-only", children: config.label }), status === "failed" && onRetry && (jsx(Link, { color: "danger", size: "sm", onClick: onRetry, className: "text-xs px-0 h-auto", "aria-label": "Retry sending message", children: "Retry" }))] }));
+};
+
+export { MessageStatusIndicator };

package/dist/components/core/Message/MessageTimestamp.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/core/Message/TypeWriter.d.ts

@@ -24,7 +24,7 @@ export interface TypeWriterProps {
     className?: string;
 }
 /**
- * TypeWriter component that animates text word-by-word
+ * TypeWriter component that animates text word-by-word with a smooth fade-in
  *
  * @example
  * ```tsx

package/dist/components/core/Message/TypeWriter.js

@@ -1,8 +1,17 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useTypewriter } from '../../../hooks/useTypewriter.js';
+import { useMemo, useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
 
+const tokenize = (text) => {
+    if (!text)
+        return [];
+    // Split on word boundaries, preserving whitespace with each token
+    return text.match(/\S+\s*/g) || [];
+};
 /**
- * TypeWriter component that animates text word-by-word
+ * TypeWriter component that animates text word-by-word with a smooth fade-in
  *
  * @example
  * ```tsx
@@ -13,14 +22,70 @@ import { useTypewriter } from '../../../hooks/useTypewriter.js';
  * />
  * ```
  */
-const TypeWriter = ({ text, speed = 100, enabled = true, onComplete, className, }) => {
-    const { displayText } = useTypewriter({
-        text,
-        speed,
-        enabled,
-        onComplete,
+const TypeWriter = ({ text, speed = 80, enabled = true, onComplete, className, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const animate = enabled && !shouldReduceMotion;
+    const tokens = useMemo(() => tokenize(text), [text]);
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+    const fireComplete = useCallback(() => {
+        var _a;
+        (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
+    }, []);
+    // How many tokens have already been committed (and thus already animated). Updated AFTER
+    // commit in the effect below — NEVER mutated during render, so a StrictMode/concurrent
+    // double-render can't mark tokens "already animated" on a throwaway pass and suppress the
+    // entrance animation.
+    const revealedCountRef = useRef(0);
+    // Token count at the first render; only these original tokens get a staggered delay
+    // (tokens appended later — e.g. while streaming — fade in immediately).
+    const initialTokensCountRef = useRef(null);
+    if (initialTokensCountRef.current === null) {
+        initialTokensCountRef.current = tokens.length;
+    }
+    // Detect a non-append text change (shrink or full replace) so reveal tracking resets and the
+    // new text animates from scratch. Reading the ref during render is pure; it's written below.
+    const prevTextRef = useRef(text);
+    const isReplacement = !text.startsWith(prevTextRef.current) || text.length < prevTextRef.current.length;
+    const revealedBefore = isReplacement ? 0 : revealedCountRef.current;
+    // Commit the reveal bookkeeping after paint (pure render, side-effects in the effect).
+    useEffect(() => {
+        if (isReplacement)
+            initialTokensCountRef.current = tokens.length;
+        revealedCountRef.current = tokens.length;
+        prevTextRef.current = text;
     });
-    return jsx("p", { className: className, children: displayText });
+    // Reduced-motion / disabled: nothing animates, so the entrance can't drive completion —
+    // signal it after commit instead, otherwise callers that chain on onComplete hang forever.
+    useEffect(() => {
+        if (!animate && tokens.length > 0)
+            fireComplete();
+    }, [animate, tokens.length, fireComplete]);
+    if (!animate) {
+        return jsx("p", { className: cn("whitespace-pre-wrap wrap-break-word", className), children: text });
+    }
+    // Convert speed (ms per word) to seconds for stagger delay
+    const staggerDelay = speed / 1000;
+    const lastIndex = tokens.length - 1;
+    return (jsx("p", { className: cn("whitespace-pre-wrap wrap-break-word", className), children: tokens.map((token, index) => {
+            var _a;
+            // A token already revealed on a previous commit renders statically (no re-animation).
+            const isNew = index >= revealedBefore;
+            if (!isNew) {
+                return (jsx("span", { style: { display: 'inline' }, children: token }, `${index}-${token}`));
+            }
+            // Apply the stagger delay only to tokens present at the initial render.
+            const delay = index < ((_a = initialTokensCountRef.current) !== null && _a !== void 0 ? _a : 0) ? index * staggerDelay : 0;
+            return (jsx(motion.span, { initial: { opacity: 0, filter: 'blur(3px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, transition: {
+                    duration: 0.25,
+                    delay: delay,
+                    ease: 'easeOut',
+                }, 
+                // The last (highest-index) token settles last — its completion marks the whole
+                // current batch as done. Fires once per newly-revealed batch, never before the
+                // animation has actually run.
+                onAnimationComplete: index === lastIndex ? fireComplete : undefined, style: { display: 'inline' }, children: token }, `${index}-${token}`));
+        }) }));
 };
 TypeWriter.displayName = 'TypeWriter';