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

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-300 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-200 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

@@ -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/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,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { AgentStatus } from '../AgentStatus/AgentStatus.js';
+
+// Reasoning is AgentStatus in its reasoning mode, with a discoverable name.
+const ReasoningRoot = React__default.forwardRef((props, ref) => jsx(AgentStatus, { ref: ref, mode: "reasoning", ...props }));
+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.types.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { AgentStatusProps, AgentStatusState, AgentStatusStepData, AgentStatusThemeOverrides } from "../AgentStatus";
+/**
+ * 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 type ReasoningProps = Omit<AgentStatusProps, "mode">;
+/** A structured reasoning step (an AgentStatus row). */
+export type ReasoningStepData = AgentStatusStepData;
+export type ReasoningThemeOverrides = AgentStatusThemeOverrides;
+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/index.d.ts

@@ -0,0 +1,2 @@
+export { Reasoning } from "./Reasoning";
+export type { ReasoningProps, ReasoningStepProps, ReasoningStepData, 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/ErrorDisplay.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+import { WarningCircle } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { streamingResponseTheme } from './StreamingResponse.theme.js';
 
@@ -29,7 +29,7 @@ const getErrorTitle = (type) => {
  */
 const ErrorDisplay = ({ error, onRetry, retryAttempt, maxAttempts, className, }) => {
     const canRetry = error.retryable && retryAttempt < maxAttempts;
-    return (jsxs("div", { className: cn(streamingResponseTheme.errorContainerStyle, className), role: "alert", "aria-live": "assertive", children: [jsx(ExclamationCircleIcon, { className: "size-5 text-[var(--color-danger)] flex-shrink-0" }), jsxs("div", { className: "flex-1", children: [jsx("p", { className: cn(streamingResponseTheme.errorTitleStyle), children: getErrorTitle(error.type) }), jsx("p", { className: cn(streamingResponseTheme.errorMessageStyle), children: error.message }), canRetry && (jsxs("button", { onClick: onRetry, className: cn(streamingResponseTheme.errorRetryButtonStyle), type: "button", children: ["Retry (", retryAttempt + 1, "/", maxAttempts, ")"] }))] })] }));
+    return (jsxs("div", { className: cn(streamingResponseTheme.errorContainerStyle, className), role: "alert", "aria-live": "assertive", children: [jsx(WarningCircle, { className: "size-5 text-[var(--color-danger)] flex-shrink-0" }), jsxs("div", { className: "flex-1", children: [jsx("p", { className: cn(streamingResponseTheme.errorTitleStyle), children: getErrorTitle(error.type) }), jsx("p", { className: cn(streamingResponseTheme.errorMessageStyle), children: error.message }), canRetry && (jsxs("button", { onClick: onRetry, className: cn(streamingResponseTheme.errorRetryButtonStyle), type: "button", children: ["Retry (", retryAttempt + 1, "/", maxAttempts, ")"] }))] })] }));
 };
 ErrorDisplay.displayName = 'ErrorDisplay';
 

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

@@ -7,9 +7,7 @@ import { TypeWriter } from '../../core/Message/TypeWriter.js';
 import '../../core/Message/MessageBody.js';
 import '../../../utils/cn.js';
 import '../../core/Link/Link.js';
-import '@heroicons/react/16/solid';
-import '@heroicons/react/24/outline';
-import '@heroicons/react/24/solid';
+import '@phosphor-icons/react';
 import { ErrorDisplay } from './ErrorDisplay.js';
 import { MarkdownRenderer } from './MarkdownRenderer.js';
 import { AnimatedText } from './AnimatedText.js';

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

@@ -1,5 +1,7 @@
 const streamingResponseTheme = {
-    errorContainerStyle: "flex items-start gap-3 rounded-[var(--radius-base)] border border-[var(--color-danger-200)] bg-[var(--color-danger-50)] px-4 py-3",
+    // Danger banner — same role as Alert, so it reuses --alert-radius rather
+    // than the bare --radius-base (which would be uncapped at extreme themes).
+    errorContainerStyle: "flex items-start gap-3 rounded-[var(--alert-radius)] border border-[var(--color-danger-200)] bg-[var(--color-danger-50)] px-4 py-3",
     errorTitleStyle: "text-sm font-medium text-[var(--color-danger)]",
     errorMessageStyle: "text-sm text-[var(--color-text-secondary)] mt-1",
     errorRetryButtonStyle: "mt-2 text-sm font-medium text-[var(--color-danger)] hover:text-[var(--color-danger-700)] transition-colors",

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

@@ -4,7 +4,7 @@ import React__default, { useMemo } from 'react';
 import { tokenCounterTheme } from './TokenCounter.theme.js';
 import { MODEL_CONFIGS, estimateTokens, calculateCost, formatTokenCount, formatCost } from './tokenUtils.js';
 import { cn } from '../../../utils/cn.js';
-import { CircleStackIcon } from '@heroicons/react/16/solid';
+import { Database } from '@phosphor-icons/react';
 
 /**
  * TokenCounter - Real-time token usage display with cost estimation
@@ -55,7 +55,7 @@ const TokenCounter = React__default.forwardRef(({ text = "", tokens: providedTok
     const costStyle = customTheme.costStyle || tokenCounterTheme.costStyle;
     const progressStyle = customTheme.progressStyle || tokenCounterTheme.progressStyle;
     const progressBarStyle = customTheme.progressBarStyle || tokenCounterTheme.progressBarStyle;
-    return (jsxs("div", { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...props, children: [icon || jsx(CircleStackIcon, { className: cn(iconStyle, sizeConfig.icon) }), jsx("span", { className: cn(countStyle, sizeConfig.text, isOverLimit && "text-[var(--color-danger)]"), children: formatTokenCount(tokenCount) }), maxTokens && format === "detailed" && (jsxs("span", { className: cn(labelStyle, sizeConfig.text), children: ["/ ", formatTokenCount(effectiveMaxTokens)] })), jsx("span", { className: cn(labelStyle, sizeConfig.text), children: "tokens" }), showCost && (jsxs("span", { className: cn(costStyle, sizeConfig.text), children: ["(", formatCost(cost), ")"] })), format === "detailed" && maxTokens && (jsx("div", { className: cn(progressStyle, "w-16 ml-2"), children: jsx("div", { className: cn(progressBarStyle, isOverLimit && "bg-[var(--color-danger)]"), style: { width: `${progressPercent}%` } }) }))] }));
+    return (jsxs("div", { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...props, children: [icon || jsx(Database, { className: cn(iconStyle, sizeConfig.icon) }), jsx("span", { className: cn(countStyle, sizeConfig.text, isOverLimit && "text-[var(--color-danger)]"), children: formatTokenCount(tokenCount) }), maxTokens && format === "detailed" && (jsxs("span", { className: cn(labelStyle, sizeConfig.text), children: ["/ ", formatTokenCount(effectiveMaxTokens)] })), jsx("span", { className: cn(labelStyle, sizeConfig.text), children: "tokens" }), showCost && (jsxs("span", { className: cn(costStyle, sizeConfig.text), children: ["(", formatCost(cost), ")"] })), format === "detailed" && maxTokens && (jsx("div", { className: cn(progressStyle, "w-16 ml-2"), children: jsx("div", { className: cn(progressBarStyle, isOverLimit && "bg-[var(--color-danger)]"), style: { width: `${progressPercent}%` } }) }))] }));
 });
 TokenCounter.displayName = "TokenCounter";
 

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

@@ -10,3 +10,6 @@ export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, Stream
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
 export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
+export * from "./AgentStatus";
+export * from "./Reasoning";
+export * from "./SourceCitation";

package/dist/components/ai/index.js

@@ -6,9 +6,7 @@ import 'react/jsx-runtime';
 import '../../utils/cn.js';
 import 'react';
 import '../core/Link/Link.js';
-import '@heroicons/react/16/solid';
-import '@heroicons/react/24/outline';
-import '@heroicons/react/24/solid';
+import '@phosphor-icons/react';
 export { PromptInput } from './PromptInput/PromptInput.js';
 export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
 export { TokenCounter } from './TokenCounter/TokenCounter.js';
@@ -26,3 +24,8 @@ export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.th
 export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition } from './StreamingResponse/StreamingResponse.animations.js';
 export { CodeBlock } from './CodeBlock/CodeBlock.js';
 export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
+export { AgentStatus } from './AgentStatus/AgentStatus.js';
+export { agentStatusTheme } from './AgentStatus/AgentStatus.theme.js';
+export { Reasoning } from './Reasoning/Reasoning.js';
+export { SourceCitation, SourceCitationGroup } from './SourceCitation/SourceCitation.js';
+export { sourceCitationTheme } from './SourceCitation/SourceCitation.theme.js';

package/dist/components/ai/shared/StatusIndicator.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type AIStatusIndicatorState = "idle" | "active" | "complete" | "pending" | "error";
+export interface AIStatusIndicatorProps extends Omit<React.SVGAttributes<SVGSVGElement>, "children"> {
+    state: AIStatusIndicatorState;
+    className?: string;
+}
+/** A rotating open arc that settles into a drawn semantic status glyph. */
+export declare const AIStatusIndicator: React.ForwardRefExoticComponent<AIStatusIndicatorProps & React.RefAttributes<SVGSVGElement>>;

package/dist/components/ai/shared/StatusIndicator.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/** A rotating open arc that settles into a drawn semantic status glyph. */
+const AIStatusIndicator = React__default.forwardRef(({ state, className, ...props }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const instant = shouldReduceMotion ? { duration: 0 } : undefined;
+    // Unique per instance: SVG gradient ids are document-global, so a shared id
+    // would let the first-mounted indicator's def win for every spinner on the page.
+    const gradientId = `${React__default.useId()}-arc`;
+    return (jsx("svg", { ref: ref, viewBox: "0 0 16 16", fill: "none", className: cn("size-4 overflow-visible", className), "data-ai-status-indicator": state, "aria-hidden": "true", ...props, children: jsxs(AnimatePresence, { initial: false, mode: "sync", children: [state === "active" && (jsx(motion.g, { initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.7 }, animate: { opacity: 1, scale: 1 }, exit: shouldReduceMotion
+                        ? { opacity: 0, transition: { duration: 0 } }
+                        : {
+                            opacity: 0,
+                            scale: 0.55,
+                            transition: { duration: 0.18, ease: "easeOut" },
+                        }, transition: {
+                        opacity: { duration: 0.16 },
+                        scale: { duration: 0.2, ease: "easeOut" },
+                    }, style: { transformBox: "view-box", transformOrigin: "8px 8px" }, children: jsxs("g", { className: "animate-spin motion-reduce:animate-none [transform-box:view-box] [transform-origin:center]", children: [jsx("defs", { children: jsxs("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: "2.5", y1: "8", x2: "13.5", y2: "8", children: [jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }), jsx("stop", { offset: "55%", stopColor: "currentColor", stopOpacity: "1" }), jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })] }) }), jsx("circle", { cx: "8", cy: "8", r: "5.5", stroke: `url(#${gradientId})`, strokeWidth: "1.75", strokeLinecap: "round", strokeDasharray: "17.3 34.6" })] }) }, "active")), state === "complete" && (jsx(motion.path, { d: "M3.5 8.25 6.65 11.2 12.6 4.9", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", initial: shouldReduceMotion
+                        ? false
+                        : { opacity: 0, pathLength: 0, scale: 0.7, rotate: -18 }, animate: { opacity: 1, pathLength: 1, scale: 1, rotate: 0 }, exit: { opacity: 0, scale: 0.7 }, transition: instant !== null && instant !== void 0 ? instant : {
+                        opacity: { duration: 0.12 },
+                        pathLength: { duration: 0.32, delay: 0.08, ease: "easeOut" },
+                        scale: { type: "spring", stiffness: 420, damping: 24 },
+                        rotate: { type: "spring", stiffness: 360, damping: 22 },
+                    }, style: { transformOrigin: "8px 8px" } }, "complete")), state === "pending" && (jsx(motion.circle, { cx: "8", cy: "8", r: "4.5", stroke: "currentColor", strokeWidth: "1.4", initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.7 }, animate: { opacity: 0.55, scale: 1 }, exit: { opacity: 0, scale: 0.7 }, transition: instant !== null && instant !== void 0 ? instant : { duration: 0.2 }, style: { transformOrigin: "8px 8px" } }, "pending")), state === "error" && (jsx(motion.path, { d: "M4.5 4.5 11.5 11.5 M11.5 4.5 4.5 11.5", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", initial: shouldReduceMotion ? false : { opacity: 0, pathLength: 0 }, animate: { opacity: 1, pathLength: 1 }, exit: { opacity: 0, scale: 0.7 }, transition: instant !== null && instant !== void 0 ? instant : { duration: 0.24 } }, "error")), state === "idle" && (jsx(motion.circle, { cx: "8", cy: "8", r: "2.25", fill: "currentColor", initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.6 }, animate: { opacity: 0.7, scale: 1 }, exit: { opacity: 0, scale: 0.6 }, transition: instant !== null && instant !== void 0 ? instant : { duration: 0.18 }, style: { transformOrigin: "8px 8px" } }, "idle"))] }) }));
+});
+AIStatusIndicator.displayName = "AIStatusIndicator";
+
+export { AIStatusIndicator };

package/dist/components/canvas/CanvasToolbar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { CursorArrowRaysIcon, HandRaisedIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { CursorClick, Hand, Plus } from '@phosphor-icons/react';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../core/Button/Button.js';
 import 'react';
@@ -28,7 +28,7 @@ const Divider = () => (jsx("span", { className: "mx-0.5 h-6 w-px bg-[var(--color
 function CanvasToolbar({ nodeOptions, onAddNode, showTools = true, position = "bottom", className, children, }) {
     const { tool, setTool } = useCanvasApi();
     const hasNodes = !!(nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.length);
-    return (jsxs("div", { "data-flikkui-nopan": "", className: cn("absolute z-30 flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg p-1 shadow-real-lg", POSITIONS[position], className), children: [showTools && (jsxs(Fragment, { children: [jsx(Button, { variant: tool === "select" ? "soft" : "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: () => setTool("select"), "aria-label": "Select tool", "aria-pressed": tool === "select", className: cn("rounded-full", tool === "select" && "shadow-inner"), children: jsx(CursorArrowRaysIcon, { className: "size-4" }) }), jsx(Button, { variant: tool === "pan" ? "soft" : "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: () => setTool("pan"), "aria-label": "Hand (pan) tool", "aria-pressed": tool === "pan", className: cn("rounded-full", tool === "pan" && "shadow-inner"), children: jsx(HandRaisedIcon, { className: "size-4" }) })] })), showTools && hasNodes && jsx(Divider, {}), hasNodes && (jsxs(Dropdown, { placement: "top", offset: 10, onAction: (type) => onAddNode === null || onAddNode === void 0 ? void 0 : onAddNode(type), children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "ghost", color: "neutral", size: "sm", className: "rounded-full gap-1.5", children: [jsx(PlusIcon, { className: "size-4" }), "Add node"] }) }), jsx(Dropdown.Menu, { "aria-label": "Add node", children: nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.map((opt) => (jsx(Dropdown.Item, { itemKey: opt.type, startContent: opt.icon && (jsx("span", { className: "size-4 grid place-items-center text-[var(--color-text-muted)]", children: opt.icon })), children: opt.label }, opt.type))) })] })), children && (jsxs(Fragment, { children: [(showTools || hasNodes) && jsx(Divider, {}), children] }))] }));
+    return (jsxs("div", { "data-flikkui-nopan": "", className: cn("absolute z-30 flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg p-1 shadow-real-lg", POSITIONS[position], className), children: [showTools && (jsxs(Fragment, { children: [jsx(Button, { variant: tool === "select" ? "soft" : "ghost", color: "mono", size: "sm", iconOnly: true, onClick: () => setTool("select"), "aria-label": "Select tool", "aria-pressed": tool === "select", className: cn("rounded-full", tool === "select" && "shadow-inner"), children: jsx(CursorClick, { className: "size-4" }) }), jsx(Button, { variant: tool === "pan" ? "soft" : "ghost", color: "mono", size: "sm", iconOnly: true, onClick: () => setTool("pan"), "aria-label": "Hand (pan) tool", "aria-pressed": tool === "pan", className: cn("rounded-full", tool === "pan" && "shadow-inner"), children: jsx(Hand, { className: "size-4" }) })] })), showTools && hasNodes && jsx(Divider, {}), hasNodes && (jsxs(Dropdown, { placement: "top", offset: 10, onAction: (type) => onAddNode === null || onAddNode === void 0 ? void 0 : onAddNode(type), children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "ghost", color: "mono", size: "sm", className: "rounded-full gap-1.5", children: [jsx(Plus, { className: "size-4" }), "Add node"] }) }), jsx(Dropdown.Menu, { "aria-label": "Add node", children: nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.map((opt) => (jsx(Dropdown.Item, { itemKey: opt.type, startContent: opt.icon && (jsx("span", { className: "size-4 grid place-items-center text-[var(--color-text-muted)]", children: opt.icon })), children: opt.label }, opt.type))) })] })), children && (jsxs(Fragment, { children: [(showTools || hasNodes) && jsx(Divider, {}), children] }))] }));
 }
 CanvasToolbar.displayName = "CanvasToolbar";
 

package/dist/components/canvas/NodeControls.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { PlusIcon, MinusIcon, ArrowsPointingOutIcon, LockClosedIcon, LockOpenIcon } from '@heroicons/react/24/outline';
+import { Plus, Minus, ArrowsOutSimple, Lock, LockOpen } from '@phosphor-icons/react';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../core/Button/Button.js';
 import 'react';
@@ -34,7 +34,7 @@ function NodeControls({ position = "bottom-right", showZoom = true, showFitView
         });
     };
     const ctrlBtn = "size-8 rounded-none";
-    return (jsxs("div", { "data-flikkui-controls": "", className: cn("absolute z-20 flex flex-col overflow-hidden rounded-lg border border-[var(--color-border)] divide-y divide-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg shadow-real-lg", POSITIONS[position], className), children: [showZoom && (jsxs(Fragment, { children: [jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => zoomBy(zoomStep), "aria-label": "Zoom in", children: jsx(PlusIcon, { className: "size-4" }) }), jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => zoomBy(1 / zoomStep), "aria-label": "Zoom out", children: jsx(MinusIcon, { className: "size-4" }) })] })), showFitView && (jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => fitView(), "aria-label": "Fit view", children: jsx(ArrowsPointingOutIcon, { className: "size-4" }) })), showLock && (jsx(Button, { variant: locked ? "soft" : "ghost", color: locked ? "primary" : "neutral", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => setLocked(!locked), "aria-label": locked ? "Unlock canvas" : "Lock canvas", "aria-pressed": locked, children: locked ? jsx(LockClosedIcon, { className: "size-4" }) : jsx(LockOpenIcon, { className: "size-4" }) }))] }));
+    return (jsxs("div", { "data-flikkui-controls": "", className: cn("absolute z-20 flex flex-col overflow-hidden rounded-lg border border-[var(--color-border)] divide-y divide-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg shadow-real-lg", POSITIONS[position], className), children: [showZoom && (jsxs(Fragment, { children: [jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => zoomBy(zoomStep), "aria-label": "Zoom in", children: jsx(Plus, { className: "size-4" }) }), jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => zoomBy(1 / zoomStep), "aria-label": "Zoom out", children: jsx(Minus, { className: "size-4" }) })] })), showFitView && (jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => fitView(), "aria-label": "Fit view", children: jsx(ArrowsOutSimple, { className: "size-4" }) })), showLock && (jsx(Button, { variant: locked ? "soft" : "ghost", color: locked ? "primary" : "mono", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => setLocked(!locked), "aria-label": locked ? "Unlock canvas" : "Lock canvas", "aria-pressed": locked, children: locked ? jsx(Lock, { className: "size-4" }) : jsx(LockOpen, { className: "size-4" }) }))] }));
 }
 NodeControls.displayName = "NodeControls";
 

package/dist/components/canvas/NodeRenderer.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React__default, { useCallback, useRef, useEffect } from 'react';
-import { PlusIcon } from '@heroicons/react/16/solid';
+import { Plus } from '@phosphor-icons/react';
 import { cn } from '../../utils/cn.js';
 import { NodeIdProvider } from './context/NodeIdContext.js';
 import { useCanvasApi } from './context/CanvasContext.js';
@@ -79,7 +79,7 @@ function AutoHandle({ nodeId, position }) {
         };
     }, [nodeId, handleId, position, register, unregister, viewportRef]);
     return (jsx("button", { ref: ref, type: "button", "data-flikkui-handle": "", "data-node-id": nodeId, "data-handle-type": "source", "data-handle-id": handleId, "data-handle-kind": "auto", "aria-label": `Connect from ${position}`, className: cn("nodrag absolute z-20 grid place-items-center size-4 rounded-full", "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] shadow-md ring-2 ring-[var(--color-surface)] cursor-crosshair", "opacity-0 scale-75 pointer-events-none transition-[opacity,transform,box-shadow] duration-150 ease-out", "hover:scale-110 hover:shadow-lg hover:ring-4 active:scale-95", !disabled &&
-            "group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:scale-100 group-focus-within:pointer-events-auto", AUTO_SIDE_CLASSES[position]), onPointerDown: disabled ? undefined : onPointerDown, children: jsx(PlusIcon, { className: "size-2.5" }) }));
+            "group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:scale-100 group-focus-within:pointer-events-auto", AUTO_SIDE_CLASSES[position]), onPointerDown: disabled ? undefined : onPointerDown, children: jsx(Plus, { className: "size-2.5" }) }));
 }
 // Memoized so unrelated graph updates (another node's data/position, selection
 // elsewhere) skip this node: `node` identity is preserved by applyNodeChanges,

package/dist/components/charts/ActivityRings/ActivityRings.js

@@ -5,7 +5,7 @@ import { motion, useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { activityRingsTheme } from './ActivityRings.theme.js';
 import { ACTIVITY_RINGS_DEFAULTS } from './ActivityRings.types.js';
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { Warning } from '@phosphor-icons/react';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
 import { getSpringAnimation, CIRCULAR_CHART_ANIMATIONS, getStaggerDelay } from '../utils/animation-utils.js';
@@ -127,7 +127,7 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
     // BarChart.tsx.
     // Early return for invalid configuration
     if (!Array.isArray(rings) || rings.length === 0) {
-        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-base text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
+        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(Warning, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-base text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
     }
     // Get color for a ring by index
     // Priority: ring.color > colors prop > theme colors > fallback