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

package/dist/components/ai/CodeBlock/CodeBlock.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useState, useMemo, useCallback } from 'react';
+import React__default, { useState, useMemo, useCallback, useRef } from 'react';
 import { Prism } from 'react-syntax-highlighter';
 import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { DocumentTextIcon, DocumentCheckIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline';
@@ -49,7 +50,6 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
         filename: customTheme.filename || codeBlockTheme.filename,
         languageLabel: customTheme.languageLabel || codeBlockTheme.languageLabel,
         codeWrapper: customTheme.codeWrapper || codeBlockTheme.codeWrapper,
-        lineNumber: customTheme.lineNumber || codeBlockTheme.lineNumber,
         highlightedLine: customTheme.highlightedLine || codeBlockTheme.highlightedLine,
         diffAddition: customTheme.diffAddition || codeBlockTheme.diffAddition,
         diffDeletion: customTheme.diffDeletion || codeBlockTheme.diffDeletion,
@@ -140,8 +140,21 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
     const showHeader = filename || showLanguage;
     // Pre-split code lines for lineProps
     const codeLines = useMemo(() => code.split("\n"), [code]);
-    // Custom line props for highlighting
-    const lineProps = useCallback((lineNumber) => {
+    // Custom line props for highlighting/diff styling.
+    //
+    // react-syntax-highlighter only computes a real (1-indexed) `lineNumber`
+    // argument when `showLineNumbers` is truthy — otherwise every line is
+    // called with `lineNumber={false}` (see its `highlight.js`:
+    // `lineNumber = showLineNumbers && newTree.length + startingLineNumber`).
+    // `highlightLines`/`diffMode` must work regardless of whether line
+    // numbers are shown, so we don't trust that argument — instead we keep
+    // our own sequential counter, reset right before each render pass (see
+    // below), since `lineProps` is invoked once per line, in source order,
+    // synchronously during that render.
+    const lineCounterRef = useRef(0);
+    const lineProps = useCallback(() => {
+        lineCounterRef.current += 1;
+        const lineNumber = lineCounterRef.current;
         const lineContent = codeLines[lineNumber - 1] || "";
         const diffStyle = getDiffStyle(lineContent, lineNumber);
         const highlighted = isLineHighlighted(lineNumber);
@@ -160,6 +173,10 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
             className: lineClassName,
         };
     }, [codeLines, getDiffStyle, isLineHighlighted, mergedTheme]);
+    // Reset the sequential counter immediately before each render pass so
+    // `lineProps` starts counting from line 1 every time, regardless of
+    // `showLineNumbers`.
+    lineCounterRef.current = 0;
     return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [showHeader && (jsxs("div", { className: mergedTheme.header, children: [jsx("div", { className: mergedTheme.headerLeft, children: filename && (jsxs(Fragment, { children: [jsx(DocumentTextIcon, { className: "size-4 text-[var(--color-text-muted)]" }), jsx("span", { className: mergedTheme.filename, children: filename })] })) }), jsxs("div", { className: mergedTheme.headerRight, children: [showLanguage && (jsxs("div", { className: "flex items-center gap-2", children: [jsx(LanguageIcon, { language: language, className: "size-4" }), jsx("span", { className: mergedTheme.languageLabel, children: displayLanguage })] })), copyable && (jsx("button", { onClick: handleCopy, className: cn(mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(DocumentCheckIcon, { className: "size-4" })) : (jsx(DocumentDuplicateIcon, { className: "size-4" })) }))] })] })), jsx("div", { className: mergedTheme.codeWrapper, style: {
                     maxHeight: maxHeight,
                     overflowY: maxHeight ? "auto" : undefined,

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

@@ -6,7 +6,6 @@ const codeBlockTheme = {
     filename: "text-sm font-medium text-[var(--color-text-secondary)] truncate",
     languageLabel: "text-xs uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
     codeWrapper: "overflow-x-auto",
-    lineNumber: "text-[var(--color-text-muted)] select-none text-right tabular-nums min-w-[2.5rem] pr-4 opacity-50",
     highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-neutral-400)]/5 dark:border-l-[var(--color-neutral-200)]",
     diffAddition: "-mx-4 px-4 bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] dark:bg-[var(--color-success-600)]/20 dark:border-l-[var(--color-success-700)]",
     diffDeletion: "-mx-4 px-4 bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] dark:bg-[var(--color-danger-600)]/20 dark:border-l-[var(--color-danger-700)]",

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

@@ -81,7 +81,6 @@ export interface CodeBlockTheme {
     filename: string;
     languageLabel: string;
     codeWrapper: string;
-    lineNumber: string;
     highlightedLine: string;
     diffAddition: string;
     diffDeletion: string;
@@ -99,7 +98,6 @@ export interface CodeBlockThemeOverrides {
     filename?: string;
     languageLabel?: string;
     codeWrapper?: string;
-    lineNumber?: string;
     highlightedLine?: string;
     diffAddition?: string;
     diffDeletion?: string;

package/dist/components/ai/CodeBlock/LanguageIcon.js

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

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

@@ -1,14 +1,10 @@
+"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-import { CloudArrowUpIcon, MicrophoneIcon, PaperClipIcon, LinkIcon, DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import { StopIcon } from '@heroicons/react/24/solid';
-import { promptInputTheme } from './PromptInput.theme.js';
-import { VoiceRecorder } from './VoiceRecorder.js';
-import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
 import { Textarea } from '../../forms/Textarea/Textarea.js';
 import '../../forms/Textarea/Textarea.theme.js';
+import { Button } from '../../core/Button/Button.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
 import '../../core/Dropdown/DropdownTrigger.js';
 import '../../core/Dropdown/DropdownMenu.js';
@@ -16,7 +12,12 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
-import { Button } from '../../core/Button/Button.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 { promptInputTheme } from './PromptInput.theme.js';
+import { VoiceRecorder } from './VoiceRecorder.js';
+import { dropzoneContainerVariants, dropzoneChildVariants, dropzoneActionIconVariants, textareaSwapVariants, iconSwapVariants } from './PromptInput.animations.js';
 
 /**
  * Default model options for the model selector
@@ -552,9 +553,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: "bg-transparent rounded-full border-0 font-medium text-[var(--color-text-secondary)]", onClick: handleVoiceClick, "aria-label": "Voice input", disabled: isDisabled || isRecording, children: [jsx(MicrophoneIcon, { className: "size-4", strokeWidth: 2 }), " ", "Voice"] })), showModelSelector && (jsxs(Dropdown, { selectionMode: "single", selectedKeys: isModelControlled
+                                                                }, 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
                                                     ? [controlledModel]
-                                                    : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "neutral", size: "sm", className: "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", 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
+                                                    : internalModel, onSelectionChange: handleModelChange, children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "outline", color: "neutral", 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
                     ? "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

@@ -1,5 +1,16 @@
 const promptInputTheme = {
-    baseStyle: "rounded-[var(--card-radius)] border-[1px] border-[var(--color-border)] flex flex-col gap-2 shadow-real-md p-4 outline-2 outline-[var(--color-border)]/30 bg-white dark:bg-[var(--color-background-secondary)] ",
+    // Focus state mirrors the form-control treatment (inset 1px hairline border that turns
+    // primary + a ring-4 glow on focus-within — the textarea inside drives it) but is kept
+    // 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 " +
+        "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",
     footerStyle: "flex justify-between items-end",
     actionsStyle: "flex gap-1",
@@ -12,7 +23,13 @@ const promptInputTheme = {
     states: {
         default: "",
         disabled: "opacity-50 cursor-not-allowed",
-        invalid: "border-[var(--color-danger)] border-b border-b-[var(--color-danger)]",
+        // 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 " +
+            "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",
         loading: "opacity-75",
     },
 };

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

@@ -3,6 +3,7 @@ import type { VoiceRecorderProps } from "./VoiceRecorder.types";
 /**
  * Internal voice recorder sub-component.
  * Handles MediaRecorder lifecycle, timer display, and recording controls.
+ * Implements a premium 3D Particle-Wave audio visualizer with glowing additive blend modes.
  *
  * Recording starts immediately on mount.
  * Not exported from the library's public API.

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

@@ -1,5 +1,6 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { motion } from 'motion/react';
 import { PlayIcon, PauseIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
@@ -13,9 +14,43 @@ const formatTime = (seconds) => {
     const secs = seconds % 60;
     return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
 };
+/**
+ * Helper to draw a 3D-like particle ribbon wave on the canvas.
+ * Composes multiple parallel rows of dots with depth offsets for a three-dimensional perspective.
+ */
+function drawParticleRibbon(ctx, width, centerY, basePhase, amplitude, color, frequency, direction, numRows = 8) {
+    for (let r = 0; r < numRows; r++) {
+        // Map row index to a depth value between -1.0 (back) and 1.0 (front)
+        const depth = (r - numRows / 2) / (numRows / 2);
+        // Shift phase and vertical offset based on depth to create a twisting ribbon effect
+        const phaseOffset = depth * 0.45;
+        const yOffset = depth * 0.65; // Thinner row spacing
+        ctx.fillStyle = color;
+        ctx.shadowBlur = 6;
+        ctx.shadowColor = color;
+        // Back rows are more transparent, front rows are more opaque
+        const opacity = 0.12 + (depth + 1.0) * 0.38; // range ~0.12 to ~0.88
+        ctx.globalAlpha = opacity;
+        // Draw dots across the horizontal axis
+        for (let x = 0; x < width; x += 3.5) {
+            // Taper at the left and right boundaries using a sine envelope
+            const envelope = Math.sin((x / width) * Math.PI);
+            // Calculate sine wave coordinate
+            const wave = Math.sin(x * frequency * direction + basePhase + phaseOffset);
+            const y = centerY + wave * amplitude * envelope + yOffset * envelope;
+            // Thinner particle sizes
+            const size = 0.25 + (depth + 1.0) * 0.35; // range ~0.25px to ~0.95px
+            ctx.beginPath();
+            ctx.arc(x, y, size, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    }
+    ctx.shadowBlur = 0; // Reset shadows after drawing
+}
 /**
  * Internal voice recorder sub-component.
  * Handles MediaRecorder lifecycle, timer display, and recording controls.
+ * Implements a premium 3D Particle-Wave audio visualizer with glowing additive blend modes.
  *
  * Recording starts immediately on mount.
  * Not exported from the library's public API.
@@ -27,6 +62,17 @@ const VoiceRecorder = ({ onComplete, onCancel, maxDuration, className, }) => {
     const chunksRef = useRef([]);
     const timerRef = useRef(null);
     const streamRef = useRef(null);
+    // Web Audio API & Canvas refs for visualizer
+    const audioContextRef = useRef(null);
+    const analyserRef = useRef(null);
+    const sourceRef = useRef(null);
+    const animationFrameRef = useRef(null);
+    const canvasRef = useRef(null);
+    // Keep recording state ref to read inside requestAnimationFrame loops without stale closures
+    const recordingStateRef = useRef("idle");
+    useEffect(() => {
+        recordingStateRef.current = recordingState;
+    }, [recordingState]);
     /**
      * Clean up timer
      */
@@ -41,6 +87,22 @@ const VoiceRecorder = ({ onComplete, onCancel, maxDuration, className, }) => {
      */
     const cleanup = useCallback(() => {
         clearTimer();
+        // Clean up Audio API resources
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        if (sourceRef.current) {
+            sourceRef.current.disconnect();
+            sourceRef.current = null;
+        }
+        if (audioContextRef.current) {
+            if (audioContextRef.current.state !== "closed") {
+                audioContextRef.current.close();
+            }
+            audioContextRef.current = null;
+        }
+        analyserRef.current = null;
         if (mediaRecorderRef.current &&
             mediaRecorderRef.current.state !== "inactive") {
             mediaRecorderRef.current.stop();
@@ -92,10 +154,87 @@ const VoiceRecorder = ({ onComplete, onCancel, maxDuration, className, }) => {
                 recorder.start(100); // collect data every 100ms
                 setRecordingState("recording");
                 startTimer();
+                // Web Audio API visualizer setup
+                try {
+                    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                    const analyser = audioContext.createAnalyser();
+                    analyser.fftSize = 64; // Small fftSize is enough for wave lines
+                    const source = audioContext.createMediaStreamSource(stream);
+                    source.connect(analyser);
+                    audioContextRef.current = audioContext;
+                    analyserRef.current = analyser;
+                    sourceRef.current = source;
+                    const bufferLength = analyser.frequencyBinCount;
+                    const dataArray = new Uint8Array(bufferLength);
+                    let phase = 0;
+                    const canvas = canvasRef.current;
+                    if (canvas) {
+                        const ctx = canvas.getContext("2d");
+                        if (ctx) {
+                            const drawFrame = () => {
+                                const currentCanvas = canvasRef.current;
+                                if (!analyserRef.current || !currentCanvas) {
+                                    animationFrameRef.current = requestAnimationFrame(drawFrame);
+                                    return;
+                                }
+                                // Paused/stopped: keep the loop alive so resuming works, but skip the expensive
+                                // per-frame redraw (clearRect + 3 particle ribbons = hundreds of arc/fill ops at
+                                // ~60fps) — nothing is changing, so redrawing only drains the battery.
+                                if (recordingStateRef.current !== "recording") {
+                                    animationFrameRef.current = requestAnimationFrame(drawFrame);
+                                    return;
+                                }
+                                analyserRef.current.getByteFrequencyData(dataArray);
+                                // Average the first 5 bins (0 to ~3400Hz) which contain the human vocal range
+                                let sum = 0;
+                                const activeBins = Math.min(5, bufferLength);
+                                for (let i = 0; i < activeBins; i++) {
+                                    sum += dataArray[i];
+                                }
+                                const average = sum / activeBins;
+                                const volumeFactor = average / 255;
+                                // Handle resolution resize with bounds guard (never set to 0)
+                                const targetWidth = currentCanvas.clientWidth || 128;
+                                const targetHeight = currentCanvas.clientHeight || 32;
+                                if (currentCanvas.width !== targetWidth || currentCanvas.height !== targetHeight) {
+                                    currentCanvas.width = targetWidth;
+                                    currentCanvas.height = targetHeight;
+                                }
+                                // Clear canvas
+                                ctx.clearRect(0, 0, currentCanvas.width, currentCanvas.height);
+                                const width = currentCanvas.width;
+                                const height = currentCanvas.height;
+                                const centerY = height / 2;
+                                // Set screen blending for bright glowing particle intersections
+                                ctx.globalCompositeOperation = "screen";
+                                // Base parameters (additive scaling ensures continuous reaction to all volume levels)
+                                const activeAmp = 2.0 + volumeFactor * 35.0;
+                                phase += 0.035;
+                                // Particle Ribbon 1: Cyan/Blue (flows forward)
+                                drawParticleRibbon(ctx, width, centerY, phase, activeAmp, "#06b6d4", // Cyan
+                                0.045, 1.0, 5);
+                                // Particle Ribbon 2: Pink/Rose (flows backward with offset phase)
+                                drawParticleRibbon(ctx, width, centerY, phase + Math.PI * 0.5, activeAmp * 0.9, "#ec4899", // Pink
+                                0.05, -1.0, 5);
+                                // Core White Ribbon: Bright central energy line
+                                drawParticleRibbon(ctx, width, centerY, phase * 1.5, activeAmp * 0.35, "#ffffff", // White Core
+                                0.065, 0.7, 3);
+                                // Reset composite operation to default
+                                ctx.globalCompositeOperation = "source-over";
+                                animationFrameRef.current = requestAnimationFrame(drawFrame);
+                            };
+                            animationFrameRef.current = requestAnimationFrame(drawFrame);
+                        }
+                    }
+                }
+                catch (e) {
+                    if (process.env.NODE_ENV !== "production") {
+                        console.warn("[VoiceRecorder] Audio context visualization failed:", e);
+                    }
+                }
             }
             catch (_a) {
                 if (process.env.NODE_ENV !== "production") {
-                    // eslint-disable-next-line no-console
                     console.warn("[VoiceRecorder] Microphone access denied or unavailable.");
                 }
                 onCancel();
@@ -163,18 +302,26 @@ const VoiceRecorder = ({ onComplete, onCancel, maxDuration, className, }) => {
             recorder.pause();
             clearTimer();
             setRecordingState("paused");
+            if (audioContextRef.current && audioContextRef.current.state === "running") {
+                audioContextRef.current.suspend();
+            }
         }
         else if (recordingState === "paused") {
             recorder.resume();
             startTimer();
             setRecordingState("recording");
+            if (audioContextRef.current && audioContextRef.current.state === "suspended") {
+                audioContextRef.current.resume();
+            }
         }
     }, [recordingState, clearTimer, startTimer]);
-    return (jsxs("div", { className: cn("flex items-center justify-between w-full", className), children: [jsx(Button, { variant: "soft", color: "neutral", size: "sm", className: "rounded-full", onClick: handleCancel, "aria-label": "Cancel recording", children: "Cancel" }), jsxs("div", { className: "flex items-center gap-2.5", children: [jsx(motion.div, { className: "size-2.5 rounded-full bg-[var(--color-danger)]", animate: recordingState === "recording"
-                            ? { opacity: [1, 0.3, 1] }
-                            : { opacity: 0.5 }, transition: recordingState === "recording"
-                            ? { duration: 1.2, repeat: Infinity, ease: "easeInOut" }
-                            : undefined }), jsx("span", { className: "text-lg font-medium tabular-nums text-[var(--color-text-primary)] min-w-[3.5rem] text-center", children: formatTime(elapsed) })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { iconOnly: true, variant: "outline", color: "neutral", size: "sm", className: "rounded-full", onClick: handleTogglePause, "aria-label": recordingState === "paused" ? "Resume recording" : "Pause recording", children: recordingState === "paused" ? (jsx(PlayIcon, { className: "size-4", strokeWidth: 2 })) : (jsx(PauseIcon, { className: "size-4", strokeWidth: 2 })) }), jsx(Button, { iconOnly: true, variant: "filled", color: "primary", size: "sm", className: "rounded-full", onClick: handleConfirm, "aria-label": "Confirm recording", children: jsx(CheckIcon, { className: "size-4", strokeWidth: 2.5 }) })] })] }));
+    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"
+                                    ? { 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 }) })] })] }));
 };
 VoiceRecorder.displayName = "VoiceRecorder";
 

package/dist/components/ai/{PromptSuggestions → PromptSuggestion}/PromptSuggestion.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useCallback } from 'react';
 import { promptSuggestionTheme } from './PromptSuggestion.theme.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';

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

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

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';

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

@@ -14,7 +14,7 @@ export interface StreamingCursorProps {
     className?: string;
 }
 /**
- * StreamingCursor renders a blinking caret that indicates active streaming.
- * Uses a simple CSS pulse animation — no framer motion, no layout shifts.
+ * StreamingCursor renders a premium glowing caret that indicates active streaming.
+ * Uses Framer Motion for a smooth breathing scale and opacity animation.
  */
 export declare const StreamingCursor: React.FC<StreamingCursorProps>;

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

@@ -1,13 +1,24 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { cursorPulse } from './StreamingResponse.animations.js';
 
 /**
- * StreamingCursor renders a blinking caret that indicates active streaming.
- * Uses a simple CSS pulse animation — no framer motion, no layout shifts.
+ * StreamingCursor renders a premium glowing caret that indicates active streaming.
+ * Uses Framer Motion for a smooth breathing scale and opacity animation.
  */
 const StreamingCursor = ({ visible, enabled = true, cursor = "▏", className, }) => {
     if (!visible)
         return null;
-    return (jsx("span", { className: className || `font-extralight ml-0.5 ${enabled ? "animate-pulse" : ""}`, "aria-hidden": "true", children: cursor }));
+    const isDefaultCursor = cursor === "▏";
+    if (!enabled) {
+        return isDefaultCursor ? (jsx("span", { className: cn("inline-block ml-1.5 w-2 h-2 rounded-full bg-[var(--color-primary)] align-middle mb-[3px]", className), "aria-hidden": "true" })) : (jsx("span", { className: cn("font-light ml-0.5 text-[var(--color-primary)]", className), "aria-hidden": "true", children: cursor }));
+    }
+    return (jsx(motion.span, { variants: cursorPulse, initial: "initial", animate: "animate", className: cn("inline-block ml-1.5 text-[var(--color-primary)] drop-shadow-[0_0_5px_var(--color-primary-400)]", isDefaultCursor ? "w-2 h-2 rounded-full bg-[var(--color-primary)] align-middle mb-[3px]" : "font-light", className), "aria-hidden": "true", style: {
+            transformOrigin: "center center",
+            display: "inline-block",
+        }, children: !isDefaultCursor && cursor }));
 };
 StreamingCursor.displayName = "StreamingCursor";
 

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

@@ -16,8 +16,8 @@ export declare const tokenTransition: Transition;
 export declare const blockSlideIn: Variants;
 export declare const blockTransition: Transition;
 /**
- * Streaming cursor (caret) animation
- * Pulses while streaming is active
+ * Streaming cursor (caret/particle) animation
+ * Pulses smoothly with scale and opacity
  */
 export declare const cursorPulse: Variants;
 /**

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

@@ -1,3 +1,5 @@
+import { springs, easings } from '../../../theme/animations.js';
+
 /**
  * StreamingResponse Animation Variants
  * Motion variants for streaming text animations
@@ -9,8 +11,8 @@
 const tokenFadeIn = {
     hidden: {
         opacity: 0,
-        y: 4,
-        filter: 'blur(1.5px)',
+        y: 3,
+        filter: 'blur(3px)',
     },
     visible: {
         opacity: 1,
@@ -20,7 +22,7 @@ const tokenFadeIn = {
 };
 const tokenTransition = {
     duration: 0.25,
-    ease: [0.2, 0.8, 0.2, 1], // snappy easing
+    ease: easings.easeOut,
 };
 /**
  * Block slide-in animation
@@ -37,16 +39,20 @@ const blockSlideIn = {
     },
 };
 const blockTransition = {
-    duration: 0.35,
-    ease: [0.2, 0.8, 0.2, 1],
+    ...springs.smooth,
 };
 /**
- * Streaming cursor (caret) animation
- * Pulses while streaming is active
+ * Streaming cursor (caret/particle) animation
+ * Pulses smoothly with scale and opacity
  */
 const cursorPulse = {
-    pulse: {
-        opacity: [1, 0.4, 1],
+    initial: {
+        opacity: 0.25,
+        scale: 0.85,
+    },
+    animate: {
+        opacity: [1, 0.25, 1],
+        scale: [1.1, 0.85, 1.1],
         transition: {
             duration: 0.8,
             repeat: Infinity,
@@ -62,7 +68,7 @@ const cursorPulse = {
 const inlineTokenFadeIn = {
     hidden: {
         opacity: 0,
-        filter: 'blur(1.5px)',
+        filter: 'blur(3px)',
     },
     visible: {
         opacity: 1,
@@ -71,7 +77,7 @@ const inlineTokenFadeIn = {
 };
 const inlineTokenTransition = {
     duration: 0.25,
-    ease: [0.2, 0.8, 0.2, 1],
+    ease: easings.easeOut,
 };
 /**
  * Container animation for staggered children

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

@@ -1,12 +1,12 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { useStreamingSSE } from '../../../hooks/useStreamingSSE.js';
 import { Message } from '../../core/Message/Message.js';
 import { TypeWriter } from '../../core/Message/TypeWriter.js';
 import '../../core/Message/MessageBody.js';
-import 'clsx';
-import 'tailwind-merge';
-import '../../core/Button/Button.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';

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

@@ -1,7 +1,9 @@
+"use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { createContext, useRef, useMemo, useContext } from 'react';
 import { motion } from 'motion/react';
 import { inlineTokenTransition, inlineTokenFadeIn } from './StreamingResponse.animations.js';
+import { StreamingCursor } from './StreamingCursor.js';
 
 const WordAnimationContext = createContext(null);
 const useWordAnimation = () => useContext(WordAnimationContext);
@@ -93,7 +95,7 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12,
                         result.push(staticBuffer);
                         staticBuffer = "";
                     }
-                    result.push(jsx("span", { className: "animate-pulse font-light", "aria-hidden": "true", children: "\u258F" }, "streaming-cursor"));
+                    result.push(jsx(StreamingCursor, { visible: true, enabled: enabled }, "streaming-cursor"));
                     continue;
                 }
                 if (currentIndex < settledCount) {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { tokenCounterTheme } from './TokenCounter.theme.js';

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

@@ -4,8 +4,8 @@ export { PromptInput, promptInputTheme } from "./PromptInput";
 export type { PromptInputProps, PromptInputState, ModelOption, PromptInputTheme, PromptInputThemeOverrides, } from "./PromptInput";
 export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatCost, formatTokenCount, MODEL_CONFIGS, } from "./TokenCounter";
 export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
-export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestions";
-export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestions";
+export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestion";
+export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestion";
 export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, StreamingCursor, streamingResponseTheme, tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from "./StreamingResponse";
 export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";

package/dist/components/ai/index.js

@@ -3,10 +3,9 @@ export { messageTheme } from '../core/Message/Message.theme.js';
 import '../core/Message/TypeWriter.js';
 import '../core/Message/MessageBody.js';
 import 'react/jsx-runtime';
-import 'clsx';
-import 'tailwind-merge';
+import '../../utils/cn.js';
 import 'react';
-import '../core/Button/Button.js';
+import '../core/Link/Link.js';
 import '@heroicons/react/16/solid';
 import '@heroicons/react/24/outline';
 import '@heroicons/react/24/solid';
@@ -15,8 +14,8 @@ export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
 export { TokenCounter } from './TokenCounter/TokenCounter.js';
 export { tokenCounterTheme } from './TokenCounter/TokenCounter.theme.js';
 export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount } from './TokenCounter/tokenUtils.js';
-export { PromptSuggestion } from './PromptSuggestions/PromptSuggestion.js';
-export { promptSuggestionTheme } from './PromptSuggestions/PromptSuggestion.theme.js';
+export { PromptSuggestion } from './PromptSuggestion/PromptSuggestion.js';
+export { promptSuggestionTheme } from './PromptSuggestion/PromptSuggestion.theme.js';
 export { StreamingResponse } from './StreamingResponse/StreamingResponse.js';
 export { ErrorDisplay } from './StreamingResponse/ErrorDisplay.js';
 export { MarkdownRenderer } from './StreamingResponse/MarkdownRenderer.js';