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

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

@@ -13,8 +13,7 @@ import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import { MicrophoneIcon as MicrophoneIcon$1, StopIcon } from '@heroicons/react/24/solid';
+import { CloudArrowUp, Microphone, Paperclip, Link, File as File$1, X, Plus, SlidersHorizontal, CaretDown, ArrowRight, Stop } from '@phosphor-icons/react';
 import { promptInputTheme } from './PromptInput.theme.js';
 import { VoiceRecorder } from './VoiceRecorder.js';
 import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
@@ -70,7 +69,7 @@ attachments: controlledAttachments, onAttachmentsChange, acceptedFileTypes = ["i
 // Button visibility
 showAttachmentButton = true, showVoiceButton = true, showSettingsButton = true, showModelSelector = true, 
 // Submit button
-submitButtonLabel = "Submit prompt", submitButtonIcon = (jsx(ArrowRightIcon, { className: "size-4", strokeWidth: 2.5 })), submitShortcut, 
+submitButtonLabel = "Submit prompt", submitButtonIcon = (jsx(ArrowRight, { className: "size-4", weight: "bold" })), submitShortcut, 
 // Variant
 variant = "default", 
 // Styling
@@ -508,7 +507,7 @@ className, textareaClassName, footerClassName, theme = {},
      */
     const renderSubmitButton = (buttonSize, buttonVariant, buttonColor, extraClassName) => {
         if (showStopButton) {
-            return (jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle, extraClassName), size: buttonSize, variant: buttonVariant, color: "danger", onClick: onStop, "aria-label": "Stop generation", title: "Stop generation", showReflection: false, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.span, { variants: iconSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex items-center justify-center", children: jsx(StopIcon, { className: "size-4" }) }, "stop") }) }));
+            return (jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle, extraClassName), size: buttonSize, variant: buttonVariant, color: "danger", onClick: onStop, "aria-label": "Stop generation", title: "Stop generation", showReflection: false, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.span, { variants: iconSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex items-center justify-center", children: jsx(Stop, { className: "size-4" }) }, "stop") }) }));
         }
         return (jsx(Button, { iconOnly: true, className: cn(mergedTheme.submitButtonStyle, extraClassName), size: buttonSize, variant: buttonVariant, color: buttonColor, onClick: handleSubmit, disabled: !canSubmit, state: isLoading ? "loading" : "default", "aria-label": submitButtonLabel, title: submitShortcut ? `Submit (${submitShortcut})` : undefined, showReflection: buttonVariant === "filled" ? false : undefined, children: jsx(AnimatePresence, { mode: "wait", initial: false, children: jsx(motion.span, { variants: iconSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex items-center justify-center", children: submitButtonIcon }, "submit") }) }));
     };
@@ -517,24 +516,24 @@ className, textareaClassName, footerClassName, theme = {},
                     if (e.target.files)
                         processFiles(e.target.files);
                     e.target.value = "";
-                }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { variants: dropzoneContainerVariants, initial: "initial", animate: "animate", exit: "exit", className: mergedTheme.dropzoneStyle, children: [jsx(motion.div, { variants: dropzoneChildVariants, children: jsx(CloudArrowUpIcon, { className: "size-8 text-[var(--color-primary)] mx-auto" }) }), jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneTitleStyle, children: dropzoneTitle ? (
+                }, className: "sr-only", "aria-label": "Attach files" }), jsxs("div", { className: cn("relative", mergedTheme.baseStyle, mergedTheme.stateStyle, variant === "simple" ? "p-3 rounded-full pl-5" : ""), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx(AnimatePresence, { children: isDragOver && enableDropzone && (jsxs(motion.div, { variants: dropzoneContainerVariants, initial: "initial", animate: "animate", exit: "exit", className: mergedTheme.dropzoneStyle, children: [jsx(motion.div, { variants: dropzoneChildVariants, children: jsx(CloudArrowUp, { className: "size-8 text-[var(--color-primary)] mx-auto" }) }), jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneTitleStyle, children: dropzoneTitle ? (
                                     // Parse **browse** as clickable button
                                     jsx(Fragment, { children: resolvedDropzoneTitle
                                             .split(/\*\*(.*?)\*\*/)
                                             .map((part, i) => i % 2 === 1 ? (jsx("button", { type: "button", onClick: handleDropzoneBrowse, className: "font-bold underline underline-offset-2 cursor-pointer hover:opacity-80", children: part }, i)) : (jsx("span", { children: part }, i))) })) : (resolvedDropzoneTitle) }), dropzoneSubtitle && (jsx(motion.p, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneSubtitleStyle, children: dropzoneSubtitle })), dropzoneTitle && (jsx(motion.div, { variants: dropzoneChildVariants, className: mergedTheme.dropzoneActionsStyle, children: [
-                                        CloudArrowUpIcon,
-                                        MicrophoneIcon,
-                                        PaperClipIcon,
-                                        LinkIcon,
+                                        CloudArrowUp,
+                                        Microphone,
+                                        Paperclip,
+                                        Link,
                                     ].map((Icon, i) => (jsx(motion.div, { variants: dropzoneActionIconVariants, className: "size-8 rounded-full bg-white/30 dark:bg-white/10 flex items-center justify-center", children: jsx(Icon, { className: "size-4 text-[var(--color-primary)]" }) }, i))) }))] })) }), currentAttachments.length > 0 && (jsx("div", { className: "flex flex-wrap gap-2 py-2 px-1", children: currentAttachments.map((attachment) => {
                             var _a;
-                            return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(DocumentIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(XMarkIcon, { className: "size-3", strokeWidth: 3 }) })] }, attachment.id));
+                            return (jsxs("div", { className: "relative group rounded-lg border border-[var(--color-border)] bg-white", children: [attachment.type === "image" ? (attachment.isCompressing ? (jsx("div", { className: "size-12 flex items-center justify-center bg-gray-100 rounded-lg", children: jsx("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-[var(--color-primary)] rounded-full animate-spin" }) })) : (jsx("img", { src: attachment.previewUrl, alt: attachment.file.name, className: "size-12 object-cover rounded-lg" }))) : (jsxs("div", { className: "size-12 flex flex-col items-center justify-center text-center p-1 rounded-lg", children: [jsx(File$1, { className: "w-5 h-5 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-[10px] text-[var(--color-text-secondary)] truncate w-full", children: (_a = attachment.file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] })), jsx("button", { onClick: () => removeAttachment(attachment.id), className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center opacity-0 translate-y-1 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-[var(--motion-duration-slow)] ease-in-out cursor-pointer shadow-md", "aria-label": `Remove ${attachment.file.name}`, children: jsx(X, { className: "size-3", weight: "bold" }) })] }, attachment.id));
                         }) })), jsxs("div", { className: cn("flex gap-2", variant === "simple" ? "items-end" : "items-start"), children: [jsx(AnimatePresence, { mode: "wait", initial: false, children: isRecording && enableVoiceRecording ? (jsx(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex-1 min-w-0", children: jsx("p", { className: "text-center text-sm text-[var(--color-text-placeholder)]", children: placeholder }) }, "voice-recorder")) : (jsx(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: cn("flex-1 min-w-0", variant === "simple" && "flex items-end"), children: jsx(Textarea, { ref: textareaRef, id: id, unstyled: true, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: isDisabled, maxLength: maxLength, rows: rows, "aria-label": ariaLabel || "Prompt input", "aria-describedby": helperTextId, "aria-invalid": isInvalid, "aria-disabled": isDisabled, className: cn(mergedTheme.textareaStyle, variant === "simple" &&
                                             "!w-auto flex-1 min-w-0 justify-center", textareaClassName), style: {
                                             minHeight,
                                             maxHeight,
                                         } }) }, "textarea")) }), variant === "simple" &&
-                                renderSubmitButton("md", "filled", "neutral", "shrink-0")] }), variant !== "simple" && (jsx("div", { className: cn(mergedTheme.footerStyle, footerClassName), children: jsx(AnimatePresence, { mode: "wait", initial: false, children: isRecording && enableVoiceRecording ? (jsx(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "w-full", children: jsx(VoiceRecorder, { onComplete: handleRecordingComplete, onCancel: handleRecordingCancel, maxDuration: maxRecordingDuration, className: mergedTheme.voiceRecorderStyle }) }, "recorder-controls")) : (jsxs(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex justify-between items-end w-full", children: [jsxs("div", { className: mergedTheme.actionsStyle, children: [showAttachmentButton && (jsxs(Dropdown, { selectionMode: "none", children: [jsx(Dropdown.Trigger, { children: jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", "aria-label": "Add attachment", disabled: isDisabled, children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) }) }), jsxs(Dropdown.Menu, { children: [jsx(Dropdown.Item, { itemKey: "upload-image", onAction: () => {
+                                renderSubmitButton("md", "filled", "mono", "shrink-0")] }), variant !== "simple" && (jsx("div", { className: cn(mergedTheme.footerStyle, footerClassName), children: jsx(AnimatePresence, { mode: "wait", initial: false, children: isRecording && enableVoiceRecording ? (jsx(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "w-full", children: jsx(VoiceRecorder, { onComplete: handleRecordingComplete, onCancel: handleRecordingCancel, maxDuration: maxRecordingDuration, className: mergedTheme.voiceRecorderStyle }) }, "recorder-controls")) : (jsxs(motion.div, { variants: textareaSwapVariants, initial: "initial", animate: "animate", exit: "exit", className: "flex justify-between items-end w-full", children: [jsxs("div", { className: mergedTheme.actionsStyle, children: [showAttachmentButton && (jsxs(Dropdown, { selectionMode: "none", children: [jsx(Dropdown.Trigger, { children: jsx(Button, { iconOnly: true, variant: "outline", color: "mono", size: "sm", className: "rounded-full !border-0.5", "aria-label": "Add attachment", disabled: isDisabled, children: jsx(Plus, { className: "size-4", weight: "bold" }) }) }), jsxs(Dropdown.Menu, { children: [jsx(Dropdown.Item, { itemKey: "upload-image", onAction: () => {
                                                                     // Set accept to images only and trigger file input
                                                                     if (fileInputRef.current) {
                                                                         fileInputRef.current.accept = "image/*";
@@ -553,12 +552,12 @@ className, textareaClassName, footerClassName, theme = {},
                                                                         fileInputRef.current.click();
                                                                     }
                                                                     onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick();
-                                                                }, children: "Upload PDF" }, "upload-pdf")] })] })), showSettingsButton && (jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full !border-0.5", onClick: onSettingsClick, "aria-label": "Open settings", disabled: isDisabled, children: jsx(AdjustmentsHorizontalIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2 }) })), showVoiceButton && (jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "rounded-full border-0 hover:bg-[var(--color-surface-hover)] dark:hover:bg-[var(--color-surface-hover)] text-[var(--color-text-secondary)]", onClick: handleVoiceClick, "aria-label": "Voice input", disabled: isDisabled || isRecording, children: [jsx(MicrophoneIcon$1, { className: "size-4" }), "Voice"] })), showModelSelector && (jsxs(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled
+                                                                }, children: "Upload PDF" }, "upload-pdf")] })] })), showSettingsButton && (jsx(Button, { iconOnly: true, variant: "outline", color: "mono", size: "sm", className: "rounded-full !border-0.5", onClick: onSettingsClick, "aria-label": "Open settings", disabled: isDisabled, children: jsx(SlidersHorizontal, { className: "size-4 text-[var(--color-text-muted)]", weight: "bold" }) })), showVoiceButton && (jsxs(Button, { variant: "outline", color: "mono", size: "sm", className: "rounded-full border-0 hover:bg-[var(--color-surface-hover)] dark:hover:bg-[var(--color-surface-hover)] text-[var(--color-text-secondary)]", onClick: handleVoiceClick, "aria-label": "Voice input", disabled: isDisabled || isRecording, children: [jsx(Microphone, { className: "size-4" }), "Voice"] })), showModelSelector && (jsxs(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled
                                                     ? [controlledModel]
-                                                    : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "neutral", size: "sm", 
+                                                    : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "mono", size: "sm", 
                                                             // Hover + open active state now come from Dropdown.Trigger
                                                             // (unified surface-hover tint). `group` stays for the chevron flip.
-                                                            className: "group bg-transparent rounded-full border-0 font-medium text-[var(--color-text-secondary)]", "aria-label": "Select AI model", disabled: isDisabled, children: [modelMap[currentModel] || "Select Model", jsx(ChevronDownIcon, { className: "size-3 opacity-80 transition-transform duration-200 group-aria-[expanded=true]:rotate-180", strokeWidth: 2 })] }) }), jsx(Dropdown.Menu, { children: models.map((model) => (jsxs(Dropdown.Item, { itemKey: model.key, children: [model.icon && (jsx("span", { className: "mr-2", children: model.icon })), model.label] }, model.key))) })] }))] }), jsx("div", { children: renderSubmitButton("sm", "outline", "neutral") })] }, "footer-controls")) }) }))] }), displayHelperText && (jsx("div", { id: helperTextId, className: cn("mt-1 text-sm", isInvalid
+                                                            className: "group bg-transparent rounded-full border-0 font-medium text-[var(--color-text-secondary)]", "aria-label": "Select AI model", disabled: isDisabled, children: [modelMap[currentModel] || "Select Model", jsx(CaretDown, { className: "size-3 opacity-80 transition-transform duration-[var(--motion-duration-base)] group-aria-[expanded=true]:rotate-180", weight: "bold" })] }) }), jsx(Dropdown.Menu, { children: models.map((model) => (jsx(Dropdown.Item, { itemKey: model.key, startContent: model.icon, children: model.label }, model.key))) })] }))] }), jsx("div", { children: renderSubmitButton("sm", "outline", "mono") })] }, "footer-controls")) }) }))] }), displayHelperText && (jsx("div", { id: helperTextId, className: cn("mt-1 text-sm", isInvalid
                     ? "text-[var(--color-danger)]"
                     : "text-[var(--color-text-muted)]"), role: isInvalid ? "alert" : undefined, "aria-live": isInvalid ? "polite" : undefined, children: displayHelperText }))] }));
 });

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

@@ -4,14 +4,14 @@ const promptInputTheme = {
     // self-contained here rather than importing the shared forms theme. Border is an inset
     // box-shadow (not `border`/`outline`) so it's clip-safe and reflow-free, like the inputs.
     baseStyle: "relative flex flex-col gap-2 p-4 rounded-[var(--card-radius)] " +
-        "bg-white dark:bg-[var(--color-background-secondary)] transition-all " +
+        "bg-white dark:bg-[var(--color-surface)] transition-all " +
         "outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
         "focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
         "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 " +
         "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)] " +
         "dark:focus-within:shadow-[inset_0_0_0_1px_var(--color-primary-500)] " +
         "dark:focus-within:ring-[var(--color-primary-500)]/20",
-    textareaStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none resize-none overflow-y-auto transition-[height] duration-200 ease-in-out",
+    textareaStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] focus:outline-none resize-none overflow-y-auto transition-[height] duration-[var(--motion-duration-base)] ease-in-out",
     footerStyle: "flex justify-between items-end",
     actionsStyle: "flex gap-1",
     submitButtonStyle: "rounded-full",
@@ -26,7 +26,7 @@ const promptInputTheme = {
         // Inset danger edge + fill (mirrors the resting/focus border model above) so invalid
         // composes over baseStyle instead of stacking a second real border on the hairline.
         invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] " +
-            "focus-within:shadow-[inset_0_0_0_1px_var(--color-danger)] focus-within:ring-[var(--color-danger-500)]/10 " +
+            "focus-within:shadow-[inset_0_0_0_1px_var(--color-danger)] focus-within:ring-[var(--color-danger)]/10 " +
             "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
             "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] " +
             "dark:focus-within:ring-[var(--color-danger-500)]/20",

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

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { motion } from 'motion/react';
-import { PlayIcon, PauseIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { Play, Pause, Check } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Button } from '../../core/Button/Button.js';
 
@@ -315,13 +315,13 @@ const VoiceRecorder = ({ onComplete, onCancel, maxDuration, className, }) => {
             }
         }
     }, [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-4", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(motion.div, { className: "size-2 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
+    return (jsxs("div", { className: cn("flex items-center justify-between w-full", className), children: [jsx(Button, { variant: "soft", color: "mono", size: "sm", className: "rounded-full", onClick: handleCancel, "aria-label": "Cancel recording", children: "Cancel" }), jsxs("div", { className: "flex items-center gap-4", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(motion.div, { className: "size-2 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
                                     ? { scale: [1, 1.4, 1] }
                                     : undefined, transition: {
                                     duration: 1.5,
                                     repeat: Infinity,
                                     ease: "easeInOut",
-                                } }), jsx("span", { className: "text-sm font-medium tabular-nums text-[var(--color-text-primary)] min-w-[2.5rem] text-center", children: formatTime(elapsed) })] }), jsx("canvas", { ref: canvasRef, width: 128, height: 32, className: "w-32 h-8 bg-transparent" })] }), 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 }) })] })] }));
+                                } }), jsx("span", { className: "text-sm font-medium tabular-nums text-[var(--color-text-primary)] min-w-[2.5rem] text-center", children: formatTime(elapsed) })] }), jsx("canvas", { ref: canvasRef, width: 128, height: 32, className: "w-32 h-8 bg-transparent" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { iconOnly: true, variant: "outline", color: "mono", size: "sm", className: "rounded-full", onClick: handleTogglePause, "aria-label": recordingState === "paused" ? "Resume recording" : "Pause recording", children: recordingState === "paused" ? (jsx(Play, { className: "size-4", weight: "bold" })) : (jsx(Pause, { className: "size-4", weight: "bold" })) }), jsx(Button, { iconOnly: true, variant: "filled", color: "primary", size: "sm", className: "rounded-full", onClick: handleConfirm, "aria-label": "Confirm recording", children: jsx(Check, { className: "size-4", weight: "bold" }) })] })] }));
 };
 VoiceRecorder.displayName = "VoiceRecorder";
 

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

@@ -3,8 +3,8 @@ const promptSuggestionTheme = {
         "bg-[var(--color-surface)] " +
         "border border-[var(--color-border)] " +
         "text-sm text-[var(--color-text-primary)] " +
-        "cursor-pointer transition-all duration-300 " +
-        "hover:bg-[var(--color-background-secondary)] " +
+        "cursor-pointer transition-all duration-[var(--motion-duration-slow)] " +
+        "hover:bg-[var(--color-surface)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
     iconStyle: "size-4 flex-shrink-0",
 };

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ReasoningProps, ReasoningStepProps } from "./Reasoning.types";
+export declare const Reasoning: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>> & {
+    Step: React.ForwardRefExoticComponent<ReasoningStepProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/ai/Reasoning/Reasoning.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { Sparkle } from '@phosphor-icons/react';
+import { AgentStatus } from '../AgentStatus/AgentStatus.js';
+import { reasoningTheme } from './Reasoning.theme.js';
+import { ReasoningTrace } from './ReasoningTrace.js';
+
+// Reasoning keeps AgentStatus's disclosure, timer, live-region, and reduced-motion
+// behavior, then adds a richer trace body for steps, prose, search, and coding.
+const ReasoningRoot = React__default.forwardRef(({ variant = "steps", steps, query, remainingCount, status = "active", icon, indicator, divider = false, children, theme: themeOverrides, ...rest }, ref) => {
+    const disclosureTheme = useMemo(() => {
+        const overrides = { ...themeOverrides };
+        delete overrides.trace;
+        return {
+            ...reasoningTheme.disclosure,
+            ...overrides,
+            stateStyles: {
+                ...reasoningTheme.disclosure.stateStyles,
+                ...overrides.stateStyles,
+            },
+            indicatorStyles: {
+                ...reasoningTheme.disclosure.indicatorStyles,
+                ...overrides.indicatorStyles,
+            },
+        };
+    }, [themeOverrides]);
+    const traceTheme = useMemo(() => ({ ...reasoningTheme.trace, ...themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.trace }), [themeOverrides]);
+    const body = steps ? (jsx(ReasoningTrace, { variant: variant, steps: steps, query: query, remainingCount: remainingCount, theme: traceTheme })) : (children);
+    return (jsx(AgentStatus, { ref: ref, mode: "reasoning", status: status, icon: icon !== null && icon !== void 0 ? icon : (jsx(Sparkle, { "data-reasoning-summary-icon": "", className: "size-3.5", weight: status === "active" ? "fill" : "regular" })), indicator: indicator !== null && indicator !== void 0 ? indicator : true, divider: divider, theme: disclosureTheme, ...rest, children: body }));
+});
+ReasoningRoot.displayName = "Reasoning";
+// A step is just a status row; children carry its text.
+const ReasoningStep = React__default.forwardRef(({ children, status = "complete", ...rest }, ref) => (jsx(AgentStatus, { ref: ref, mode: "status", status: status, label: children, wrap: true, live: "off", ...rest })));
+ReasoningStep.displayName = "Reasoning.Step";
+const Reasoning = Object.assign(ReasoningRoot, {
+    Step: ReasoningStep,
+});
+
+export { Reasoning };

package/dist/components/ai/Reasoning/Reasoning.theme.d.ts

@@ -0,0 +1,6 @@
+import type { ReasoningTraceTheme, ReasoningThemeOverrides } from "./Reasoning.types";
+export interface ReasoningTheme {
+    disclosure: ReasoningThemeOverrides;
+    trace: ReasoningTraceTheme;
+}
+export declare const reasoningTheme: ReasoningTheme;

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

@@ -0,0 +1,36 @@
+const reasoningTheme = {
+    disclosure: {
+        reasoningRootStyle: "w-full min-w-0",
+        triggerStyle: "-mx-1.5 flex w-fit max-w-full items-center rounded-[var(--form-radius)] px-1.5 py-1 text-left " +
+            "transition-colors duration-[var(--motion-duration-fast)] ease-out hover:bg-[var(--color-surface-hover)] " +
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+        triggerContentStyle: "inline-flex min-w-0 items-center gap-1.5",
+        chevronStyle: "inline-flex size-3.5 shrink-0 items-center justify-center text-[var(--color-text-muted)]",
+        dividerStyle: "hidden",
+        contentStyle: "w-full min-w-0 overflow-hidden",
+        contentInnerStyle: "w-full min-w-0 pt-1",
+        proseStyle: "flex flex-col gap-2 pl-5 text-sm leading-relaxed text-[var(--color-text-secondary)] [&_p]:m-0",
+    },
+    trace: {
+        traceStyle: "relative min-w-0 py-1",
+        guideStyle: "pointer-events-none absolute bottom-3 left-[13px] top-3 w-px bg-[var(--color-border)]",
+        listStyle: "relative flex min-w-0 flex-col gap-0.5",
+        itemStyle: "relative flex min-h-7 min-w-0 items-start gap-2 rounded-[calc(var(--radius-base)*0.75)] px-1.5 py-1 text-left",
+        interactiveItemStyle: "transition-colors duration-[var(--motion-duration-fast)] ease-out hover:bg-[var(--color-surface-hover)] " +
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-primary)]",
+        indicatorStyle: "relative z-10 mt-0.5 flex size-3.5 shrink-0 items-center justify-center",
+        indicatorSurfaceStyle: "rounded-full bg-[var(--color-surface)] ring-2 ring-[var(--color-surface)]",
+        primaryStyle: "min-w-0 flex-1 text-sm font-medium leading-5 text-[var(--color-text-primary)]",
+        reasoningPrimaryStyle: "min-w-0 flex-1 text-sm font-normal leading-relaxed text-[var(--color-text-secondary)]",
+        secondaryStyle: "shrink-0 text-xs leading-5 text-[var(--color-text-muted)]",
+        queryStyle: "mb-0.5 flex min-h-7 min-w-0 items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-1.5 py-1",
+        queryIconStyle: "ml-px flex size-3.5 shrink-0 items-center justify-center text-[var(--color-text-muted)]",
+        queryTextStyle: "min-w-0 truncate text-sm leading-5 text-[var(--color-text-secondary)]",
+        diffStyle: "shrink-0 font-mono text-xs leading-5 tabular-nums",
+        additionsStyle: "text-[var(--color-success)]",
+        deletionsStyle: "text-[var(--color-danger)]",
+        remainingStyle: "ml-5 px-1.5 py-1 text-xs text-[var(--color-text-muted)]",
+    },
+};
+
+export { reasoningTheme };

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

@@ -0,0 +1,73 @@
+import React from "react";
+import type { AgentStatusProps, AgentStatusState, AgentStatusThemeOverrides } from "../AgentStatus";
+export type ReasoningVariant = "steps" | "reasoning" | "search" | "coding";
+export type ReasoningStepKind = "step" | "source" | "read" | "edit" | "command";
+export interface ReasoningTraceTheme {
+    traceStyle: string;
+    guideStyle: string;
+    listStyle: string;
+    itemStyle: string;
+    interactiveItemStyle: string;
+    indicatorStyle: string;
+    indicatorSurfaceStyle: string;
+    primaryStyle: string;
+    reasoningPrimaryStyle: string;
+    secondaryStyle: string;
+    queryStyle: string;
+    queryIconStyle: string;
+    queryTextStyle: string;
+    diffStyle: string;
+    additionsStyle: string;
+    deletionsStyle: string;
+    remainingStyle: string;
+}
+/**
+ * Reasoning is a preset of AgentStatus fixed to `mode="reasoning"` — the
+ * collapsible "show the AI's thinking" disclosure. Every AgentStatus prop
+ * except `mode` applies.
+ */
+export interface ReasoningProps extends Omit<AgentStatusProps, "mode" | "steps" | "theme"> {
+    /** Trace presentation. @default "steps" */
+    variant?: ReasoningVariant;
+    /** Structured trace rows. Existing `{ label, status, duration }` rows remain valid. */
+    steps?: ReasoningStepData[];
+    /** Search query shown before source rows when `variant="search"`. */
+    query?: React.ReactNode;
+    /** Additional undisclosed results, rendered as “+N more”. */
+    remainingCount?: number;
+    theme?: ReasoningThemeOverrides;
+}
+/** A structured reasoning, search-source, or coding-tool trace row. */
+export interface ReasoningStepData {
+    id?: React.Key;
+    label: React.ReactNode;
+    status?: AgentStatusState;
+    /** Elapsed or final step duration in seconds. */
+    duration?: number;
+    /** Secondary metadata such as a domain, file path, result count, or command. */
+    description?: React.ReactNode;
+    /** Optional destination. Rows with an href render as links. */
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+    /** Uses the code font for secondary metadata. */
+    mono?: boolean;
+    /** Optional row glyph; inferred from `variant`/`kind` when omitted. */
+    icon?: React.ReactNode;
+    /** Tool/source semantics used to select a default glyph. */
+    kind?: ReasoningStepKind;
+    additions?: number;
+    deletions?: number;
+}
+export interface ReasoningThemeOverrides extends AgentStatusThemeOverrides {
+    trace?: Partial<ReasoningTraceTheme>;
+}
+export interface ReasoningStepProps {
+    /** Step state — drives the indicator glyph. @default "complete" */
+    status?: AgentStatusState;
+    /** Step text. */
+    children: React.ReactNode;
+    /** Elapsed or final step duration in seconds. */
+    duration?: number;
+    className?: string;
+}

package/dist/components/ai/Reasoning/ReasoningTrace.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { ReasoningStepData, ReasoningTraceTheme, ReasoningVariant } from "./Reasoning.types";
+interface ReasoningTraceProps {
+    variant: ReasoningVariant;
+    steps: ReasoningStepData[];
+    query?: React.ReactNode;
+    remainingCount?: number;
+    theme: ReasoningTraceTheme;
+}
+export declare const ReasoningTrace: React.FC<ReasoningTraceProps>;
+export {};

package/dist/components/ai/Reasoning/ReasoningTrace.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { MagnifyingGlass, GlobeSimple, FileText, TerminalWindow, PencilSimple, WarningCircle, Clock, Check, CircleNotch } from '@phosphor-icons/react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+const formatDuration = (duration) => {
+    const safe = Math.max(0, duration);
+    const rounded = safe < 60 ? Math.round(safe * 10) / 10 : Math.round(safe);
+    if (rounded < 60) {
+        return `${rounded.toFixed(Number.isInteger(rounded) ? 0 : 1)}s`;
+    }
+    return `${Math.floor(rounded / 60)}m ${rounded % 60}s`;
+};
+const statusTone = (status) => {
+    switch (status) {
+        case "active":
+            return "text-[var(--color-primary)]";
+        case "complete":
+            return "text-[var(--color-success)]";
+        case "pending":
+            return "text-[var(--color-text-placeholder)]";
+        case "error":
+            return "text-[var(--color-danger)]";
+        default:
+            return "text-[var(--color-text-muted)]";
+    }
+};
+const stateGlyph = (step) => {
+    var _a;
+    if (step.icon)
+        return step.icon;
+    switch ((_a = step.status) !== null && _a !== void 0 ? _a : "complete") {
+        case "active":
+            return jsx(CircleNotch, { className: "size-3.5 animate-spin" });
+        case "complete":
+            return jsx(Check, { className: "size-3.5", weight: "bold" });
+        case "pending":
+            return jsx(Clock, { className: "size-3.5" });
+        case "error":
+            return jsx(WarningCircle, { className: "size-3.5", weight: "fill" });
+        default:
+            return jsx("span", { className: "size-1.5 rounded-full bg-current" });
+    }
+};
+const traceGlyph = (variant, step) => {
+    if (step.icon)
+        return step.icon;
+    if (variant === "steps")
+        return stateGlyph(step);
+    if (variant === "search" || step.kind === "source") {
+        return jsx(GlobeSimple, { className: "size-3.5" });
+    }
+    if (variant === "coding") {
+        switch (step.kind) {
+            case "edit":
+                return jsx(PencilSimple, { className: "size-3.5" });
+            case "command":
+                return jsx(TerminalWindow, { className: "size-3.5" });
+            default:
+                return jsx(FileText, { className: "size-3.5" });
+        }
+    }
+    return jsx("span", { className: "size-1.5 rounded-full bg-current" });
+};
+const ReasoningTrace = ({ variant, steps, query, remainingCount = 0, theme, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    return (jsxs("div", { className: theme.traceStyle, "data-reasoning-variant": variant, children: [steps.length > 1 && (jsx("span", { className: theme.guideStyle, "data-reasoning-trace-guide": "", "aria-hidden": "true" })), query !== undefined && (jsxs(motion.div, { className: theme.queryStyle, initial: shouldReduceMotion ? false : { opacity: 0, y: -3 }, animate: { opacity: 1, y: 0 }, transition: { duration: shouldReduceMotion ? 0 : 0.18 }, children: [jsx("span", { className: theme.queryIconStyle, "aria-hidden": "true", children: jsx(MagnifyingGlass, { className: "size-full" }) }), jsx("span", { className: theme.queryTextStyle, children: query })] })), jsx("ol", { className: theme.listStyle, children: steps.map((step, index) => {
+                    var _a, _b, _c, _d;
+                    const status = (_a = step.status) !== null && _a !== void 0 ? _a : "complete";
+                    const metadata = (_b = step.description) !== null && _b !== void 0 ? _b : (step.duration !== undefined ? formatDuration(step.duration) : undefined);
+                    const rowClassName = cn(theme.itemStyle, step.href && theme.interactiveItemStyle);
+                    const content = (jsxs(Fragment, { children: [jsx("span", { className: cn(theme.indicatorStyle, theme.indicatorSurfaceStyle, statusTone(variant === "steps" ? status : undefined)), "aria-hidden": "true", children: traceGlyph(variant, step) }), jsx("span", { className: variant === "reasoning"
+                                    ? theme.reasoningPrimaryStyle
+                                    : theme.primaryStyle, children: step.label }), metadata !== undefined && (jsx("span", { className: cn(theme.secondaryStyle, step.mono && "font-mono"), children: metadata })), (step.additions !== undefined || step.deletions !== undefined) && (jsxs("span", { className: theme.diffStyle, "aria-label": "Code changes", children: [step.additions !== undefined && (jsxs("span", { className: theme.additionsStyle, children: ["+", step.additions] })), step.additions !== undefined && step.deletions !== undefined && " ", step.deletions !== undefined && (jsxs("span", { className: theme.deletionsStyle, children: ["\u2212", step.deletions] }))] }))] }));
+                    return (jsx(motion.li, { initial: shouldReduceMotion ? false : { opacity: 0, y: -3 }, animate: { opacity: 1, y: 0 }, transition: {
+                            duration: shouldReduceMotion ? 0 : 0.2,
+                            delay: shouldReduceMotion ? 0 : index * 0.045,
+                            ease: [0.23, 1, 0.32, 1],
+                        }, className: "min-w-0", children: step.href ? (jsx("a", { href: step.href, target: step.target, rel: (_c = step.rel) !== null && _c !== void 0 ? _c : (step.target === "_blank" ? "noreferrer" : undefined), className: rowClassName, children: content })) : (jsx("div", { className: rowClassName, children: content })) }, (_d = step.id) !== null && _d !== void 0 ? _d : index));
+                }) }), remainingCount > 0 && (jsxs(motion.div, { className: theme.remainingStyle, initial: shouldReduceMotion ? false : { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: shouldReduceMotion ? 0 : 0.2 }, children: ["+", remainingCount, " more"] }))] }));
+};
+
+export { ReasoningTrace };

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

@@ -0,0 +1,3 @@
+export { Reasoning } from "./Reasoning";
+export { reasoningTheme } from "./Reasoning.theme";
+export type { ReasoningProps, ReasoningStepProps, ReasoningStepData, ReasoningStepKind, ReasoningTraceTheme, ReasoningVariant, ReasoningThemeOverrides, } from "./Reasoning.types";

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { SourceCitationGroupProps, SourceCitationProps } from "./SourceCitation.types";
+export declare const SourceCitation: React.ForwardRefExoticComponent<SourceCitationProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SourceCitationGroup: React.ForwardRefExoticComponent<SourceCitationGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/SourceCitation/SourceCitation.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { Link, ArrowSquareOut } from '@phosphor-icons/react';
+import { cn } from '../../../utils/cn.js';
+import { Link as Link$1 } from '../../core/Link/Link.js';
+import { Popover } from '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
+import { sourceCitationTheme } from './SourceCitation.theme.js';
+
+const SourceCitation = React__default.forwardRef(({ index, title, domain, excerpt, href, icon, preview, placement = "top-start", open, defaultOpen, onOpenChange, openInNewTab = true, linkLabel = "Open source", className, theme: themeOverrides, disabled, ...props }, ref) => {
+    const theme = useMemo(() => ({ ...sourceCitationTheme, ...themeOverrides }), [themeOverrides]);
+    // `title` and `domain` are both ReactNode, so neither is guaranteed to yield a
+    // usable name. Fall back through the domain (already the visible chip text) before
+    // the generic word, so rich-titled citations stay distinguishable by ear.
+    const label = (typeof title === "string" && title) ||
+        (typeof domain === "string" && domain) ||
+        "source";
+    return (jsxs(Popover, { placement: placement, isOpen: open, defaultIsOpen: defaultOpen, onOpenChange: onOpenChange, children: [jsx(Popover.Trigger, { children: jsxs("button", { ref: ref, type: "button", className: cn(theme.triggerStyle, className), "aria-label": `View source: ${label}`, disabled: disabled, ...props, children: [icon ? (jsx("span", { className: theme.faviconStyle, "aria-hidden": "true", children: icon })) : (index !== undefined && (jsx("span", { className: theme.indexStyle, children: index }))), jsx("span", { className: theme.domainStyle, children: domain !== null && domain !== void 0 ? domain : title })] }) }), jsx(Popover.Body, { className: theme.popoverStyle, children: preview !== null && preview !== void 0 ? preview : (jsxs(Fragment, { children: [jsxs("div", { className: theme.previewHeaderStyle, children: [jsx("span", { className: theme.previewIconStyle, "aria-hidden": "true", children: icon !== null && icon !== void 0 ? icon : jsx(Link, { className: "size-4" }) }), jsxs("div", { className: "min-w-0", children: [jsx("div", { className: theme.previewTitleStyle, children: title }), domain && (jsx("div", { className: theme.previewDomainStyle, children: domain }))] })] }), excerpt && jsx("div", { className: theme.excerptStyle, children: excerpt }), href && (jsxs(Link$1, { href: href, target: openInNewTab ? "_blank" : undefined, rel: openInNewTab ? "noopener noreferrer" : undefined, className: theme.linkStyle, children: [linkLabel, jsx(ArrowSquareOut, { className: "size-3.5", "aria-hidden": "true", weight: "bold" })] }))] })) })] }));
+});
+SourceCitation.displayName = "SourceCitation";
+const SourceCitationGroup = React__default.forwardRef(({ children, className, theme: themeOverrides, ...props }, ref) => {
+    var _a;
+    return (jsx("div", { ref: ref, role: "group", "aria-label": "Sources", className: cn((_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.groupStyle) !== null && _a !== void 0 ? _a : sourceCitationTheme.groupStyle, className), ...props, children: children }));
+});
+SourceCitationGroup.displayName = "SourceCitation.Group";
+
+export { SourceCitation, SourceCitationGroup };

package/dist/components/ai/SourceCitation/SourceCitation.theme.d.ts

@@ -0,0 +1,2 @@
+import type { SourceCitationTheme } from "./SourceCitation.types";
+export declare const sourceCitationTheme: SourceCitationTheme;

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

@@ -0,0 +1,23 @@
+const sourceCitationTheme = {
+    // Asymmetric padding: the round leading token provides its own visual inset,
+    // so the left padding is tighter than the right where the domain text sits.
+    triggerStyle: "inline-flex max-w-52 cursor-pointer items-center gap-1.5 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] py-0.5 pl-0.5 pr-2.5 text-xs font-medium text-[var(--color-text-secondary)] transition-colors hover:border-[var(--color-border-hover)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    // Quiet numbered token — a recessed well with a hairline, not a loud filled disc.
+    indexStyle: "flex size-[1.125rem] shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-sunken)] text-[10px] font-semibold tabular-nums text-[var(--color-text-secondary)] ring-1 ring-inset ring-[var(--color-border)]",
+    // Favicon well (shown instead of the number when an icon is supplied).
+    faviconStyle: "flex size-[1.125rem] shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--color-surface-sunken)] ring-1 ring-inset ring-[var(--color-border)] [&>img]:size-full [&>img]:object-cover [&>svg]:size-3",
+    domainStyle: "truncate",
+    popoverStyle: "w-80 space-y-3",
+    previewHeaderStyle: "flex items-start gap-2.5",
+    previewIconStyle: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-[var(--color-surface-sunken)] text-[var(--color-text-muted)]",
+    previewTitleStyle: "line-clamp-2 text-sm font-semibold text-[var(--color-text-primary)]",
+    previewDomainStyle: "mt-0.5 truncate text-xs text-[var(--color-text-muted)]",
+    excerptStyle: "line-clamp-4 text-sm leading-5 text-[var(--color-text-secondary)]",
+    // Link's own base already provides layout (inline-flex/items-center/gap),
+    // color, hover underline, and focus-visible ring — only the size-specific
+    // bits need overriding here.
+    linkStyle: "text-xs font-medium",
+    groupStyle: "inline-flex flex-wrap items-center gap-1.5",
+};
+
+export { sourceCitationTheme };

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

@@ -0,0 +1,55 @@
+import React from "react";
+import type { PopoverPlacement } from "../../core/Popover";
+export interface SourceCitationTheme {
+    triggerStyle: string;
+    indexStyle: string;
+    faviconStyle: string;
+    domainStyle: string;
+    popoverStyle: string;
+    previewHeaderStyle: string;
+    previewIconStyle: string;
+    previewTitleStyle: string;
+    previewDomainStyle: string;
+    excerptStyle: string;
+    linkStyle: string;
+    groupStyle: string;
+}
+export type SourceCitationThemeOverrides = Partial<SourceCitationTheme>;
+export interface SourceCitationProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "title"> {
+    /** Citation number or compact identifier displayed in the chip. */
+    index?: React.ReactNode;
+    /** Source title displayed in the preview. */
+    title: React.ReactNode;
+    /** Source domain displayed in both the chip and preview. */
+    domain?: React.ReactNode;
+    /** Supporting source excerpt. */
+    excerpt?: React.ReactNode;
+    /** Destination URL. */
+    href?: string;
+    /** Optional source or favicon icon. */
+    icon?: React.ReactNode;
+    /** Fully custom preview content. */
+    preview?: React.ReactNode;
+    /** Popover placement relative to the citation chip. */
+    placement?: PopoverPlacement;
+    /** Controlled popover state. */
+    open?: boolean;
+    /** Initial popover state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Open the source link in a new tab. @default true */
+    openInNewTab?: boolean;
+    /**
+     * Label for the link at the foot of the preview. Overridable so the string is
+     * not trapped in English.
+     * @default "Open source"
+     */
+    linkLabel?: React.ReactNode;
+    className?: string;
+    theme?: SourceCitationThemeOverrides;
+}
+export interface SourceCitationGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    theme?: Pick<SourceCitationThemeOverrides, "groupStyle">;
+}

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

@@ -0,0 +1,3 @@
+export { SourceCitation, SourceCitationGroup } from "./SourceCitation";
+export { sourceCitationTheme } from "./SourceCitation.theme";
+export type { SourceCitationProps, SourceCitationGroupProps, SourceCitationTheme, SourceCitationThemeOverrides, } from "./SourceCitation.types";

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

@@ -4,6 +4,7 @@
  * Only animates the most recent tokens for performance
  */
 import React from 'react';
+import type { StreamingTokenEffect } from './StreamingResponse.types';
 export interface AnimatedTextProps {
     /** The full accumulated text */
     text: string;
@@ -15,6 +16,12 @@ export interface AnimatedTextProps {
     enabled?: boolean;
     /** Additional CSS classes */
     className?: string;
+    /** Optional inline indicator rendered immediately after the text */
+    cursor?: React.ReactNode;
+    /** Visual treatment for newly arrived words */
+    tokenEffect?: StreamingTokenEffect;
+    /** New-word transition duration in seconds */
+    tokenDuration?: number;
 }
 /**
  * AnimatedText renders streaming text with smooth per-token fade-in.