@humain/ui 2.1.62 → 2.1.65

package/dist/index183.js

@@ -1,179 +1,143 @@
 import { cn } from "./index2.js";
-import { useControllableState } from "./index12.js";
-import { AICodeBlock } from "./index146.js";
-import { cva } from "class-variance-authority";
-import { AlertCircle, Check, ChevronDown, ChevronRight, Clock, Code, Wrench } from "lucide-react";
+/* empty css         */
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "motion/react";
-//#region src/components/organisms/ai/AIToolCall/AIToolCall.tsx
-var toolCallVariants = cva("overflow-hidden rounded-xl border transition-colors", {
-	variants: { status: {
-		pending: "border-border bg-muted",
-		running: "border-primary bg-primary/10",
-		success: "border-success/50 bg-success/10",
-		error: "border-destructive/50 bg-destructive/10"
-	} },
-	defaultVariants: { status: "pending" }
-});
-var statusIconVariants = cva("size-4", {
-	variants: { status: {
-		pending: "text-muted-foreground",
-		running: "text-primary animate-spin motion-reduce:animate-none",
-		success: "text-success",
-		error: "text-destructive"
-	} },
-	defaultVariants: { status: "pending" }
-});
-function StatusIcon({ status, className }) {
-	const iconClass = cn(statusIconVariants({ status }), className);
-	switch (status) {
-		case "running": return /* @__PURE__ */ jsx(Clock, { className: iconClass });
-		case "success": return /* @__PURE__ */ jsx(Check, { className: cn(iconClass, "delight-check-bounce motion-reduce:!animate-none") });
-		case "error": return /* @__PURE__ */ jsx(AlertCircle, { className: cn(iconClass, "delight-shake motion-reduce:!animate-none") });
-		default: return /* @__PURE__ */ jsx(Wrench, { className: iconClass });
-	}
-}
-StatusIcon.displayName = "StatusIcon";
-function AIToolCallHeader({ toolName, status, isOpen, onToggle, className }) {
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		onClick: onToggle,
-		"aria-expanded": isOpen,
-		className: cn("flex items-center justify-between w-full px-4 py-3 transition-colors hover:bg-foreground/5 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ jsx(StatusIcon, {
-				status,
-				"aria-hidden": "true"
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col items-start",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-sm font-medium text-foreground",
-					children: toolName
-				}), /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-text-quaternary",
-					children: {
-						pending: "Pending",
-						running: "Running...",
-						success: "Completed",
-						error: "Failed"
-					}[status]
-				})]
-			})]
-		}), isOpen ? /* @__PURE__ */ jsx(ChevronDown, {
-			className: "size-4 text-muted-foreground",
-			"aria-hidden": "true"
-		}) : /* @__PURE__ */ jsx(ChevronRight, {
-			className: "size-4 text-muted-foreground rtl:rotate-180",
-			"aria-hidden": "true"
-		})]
-	});
-}
-AIToolCallHeader.displayName = "AIToolCallHeader";
-function ToolCallSection({ title, icon, children, className }) {
+import { useAnimate, useReducedMotion } from "motion/react";
+//#region src/components/organisms/ai/AIThinkingLoader/AIThinkingLoader.tsx
+function AnimatedProgressOvals({ className, animationDuration = 3e3, easing = "ease-in-out" }) {
+	const prefersReducedMotion = useReducedMotion();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("space-y-2", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 text-xs font-medium text-text-quaternary uppercase tracking-wide",
-			children: [icon, title]
-		}), children]
+		"data-slot": "thinking-oval",
+		"aria-hidden": "true",
+		className: cn("absolute top-0 bottom-0 pointer-events-none", className),
+		style: prefersReducedMotion ? void 0 : {
+			left: 0,
+			right: "100%",
+			animationName: "thinking-grow-empty",
+			animationDuration: `${animationDuration}ms`,
+			animationTimingFunction: easing,
+			animationIterationCount: "infinite",
+			willChange: "left, right, transform"
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute rounded-full bg-air-200 opacity-20",
+				style: { inset: -40 }
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute rounded-full bg-air-200 opacity-50",
+				style: { inset: -20 }
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute rounded-full bg-air-200 opacity-70",
+				style: { inset: 0 }
+			})
+		]
 	});
 }
-ToolCallSection.displayName = "ToolCallSection";
-function formatValue(value) {
-	if (typeof value === "string") return value;
-	return JSON.stringify(value, null, 2);
-}
-function AIToolCall({ toolPart, defaultOpen = false, open: controlledOpen, onOpenChange, className }) {
-	const [isOpen, setIsOpen] = useControllableState({
-		value: controlledOpen,
-		defaultValue: defaultOpen,
-		onChange: onOpenChange
+AnimatedProgressOvals.displayName = "AnimatedProgressOvals";
+function CountdownTimer({ initialTime = 5, isActive = true, onComplete, className }) {
+	const [timeLeft, setTimeLeft] = React.useState(initialTime);
+	const [scope, animate] = useAnimate();
+	const prefersReducedMotion = useReducedMotion();
+	const isFirstTick = React.useRef(true);
+	React.useEffect(() => {
+		setTimeLeft(initialTime);
+	}, [initialTime]);
+	React.useEffect(() => {
+		if (!isActive) return;
+		const timer = setInterval(() => {
+			setTimeLeft((prev) => {
+				if (prev <= 1) {
+					onComplete?.();
+					return initialTime;
+				}
+				return prev - 1;
+			});
+		}, 1e3);
+		return () => clearInterval(timer);
+	}, [
+		isActive,
+		initialTime,
+		onComplete
+	]);
+	React.useEffect(() => {
+		if (isFirstTick.current) {
+			isFirstTick.current = false;
+			return;
+		}
+		if (!prefersReducedMotion && scope.current) animate(scope.current, {
+			scale: [1.12, 1],
+			y: [-2, 0]
+		}, {
+			duration: .3,
+			ease: [
+				.25,
+				1,
+				.5,
+				1
+			]
+		});
+	}, [
+		timeLeft,
+		animate,
+		prefersReducedMotion,
+		scope
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: scope,
+		role: "timer",
+		"aria-label": `${timeLeft} seconds remaining`,
+		className: cn("flex items-center justify-center px-3 py-2 rounded-full bg-card/20 shrink-0", !prefersReducedMotion && "animate-[thinking-pop-in_0.3s_ease-out_0.3s_both]", className),
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "text-sm text-foreground tabular-nums",
+			children: [timeLeft, "s"]
+		})
 	});
-	const status = toolPart.status || "pending";
-	const handleToggle = () => {
-		setIsOpen(!isOpen);
-	};
+}
+CountdownTimer.displayName = "CountdownTimer";
+function AIThinkingLoader({ loadingText = "Transferring to AI Agent: Meeting Manager", easing = "ease-in-out", showCountdown = true, countdownTime = 5, animationDuration = 3e3, onAnimationComplete, className }) {
+	const clipRef = React.useRef(null);
+	const prefersReducedMotion = useReducedMotion();
+	React.useEffect(() => {
+		if (!onAnimationComplete) return;
+		const oval = clipRef.current?.querySelector("[data-slot=\"thinking-oval\"]");
+		if (!oval) return;
+		const handler = () => onAnimationComplete();
+		oval.addEventListener("animationiteration", handler);
+		return () => oval.removeEventListener("animationiteration", handler);
+	}, [onAnimationComplete]);
 	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "ai-tool-call",
-		className: cn(toolCallVariants({ status }), className),
-		children: [/* @__PURE__ */ jsx(AIToolCallHeader, {
-			toolName: toolPart.toolName,
-			status,
-			isOpen,
-			onToggle: handleToggle
-		}), /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(motion.div, {
-			initial: {
-				height: 0,
-				opacity: 0
-			},
-			animate: {
-				height: "auto",
-				opacity: 1
-			},
-			exit: {
-				height: 0,
-				opacity: 0
-			},
-			transition: { duration: .2 },
-			className: "overflow-hidden",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "px-4 pb-4 space-y-4",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "text-xs text-muted-foreground font-mono",
-						children: ["ID: ", toolPart.toolCallId]
-					}),
-					toolPart.args && Object.keys(toolPart.args).length > 0 && /* @__PURE__ */ jsx(ToolCallSection, {
-						title: "Input",
-						icon: /* @__PURE__ */ jsx(Code, { className: "size-3" }),
-						children: /* @__PURE__ */ jsx(AICodeBlock, {
-							code: formatValue(toolPart.args),
-							language: "json",
-							showHeader: false,
-							showCopyButton: true,
-							size: "sm"
-						})
-					}),
-					toolPart.result !== void 0 && /* @__PURE__ */ jsx(ToolCallSection, {
-						title: "Output",
-						icon: /* @__PURE__ */ jsx(Code, { className: "size-3" }),
-						children: /* @__PURE__ */ jsx(AICodeBlock, {
-							code: formatValue(toolPart.result),
-							language: "json",
-							showHeader: false,
-							showCopyButton: true,
-							size: "sm"
-						})
-					}),
-					toolPart.error && /* @__PURE__ */ jsx("div", {
-						className: "p-3 rounded-lg bg-destructive/20 border border-destructive/50",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "flex items-start gap-2",
-							children: [/* @__PURE__ */ jsx(AlertCircle, { className: "size-4 text-destructive mt-0.5 shrink-0" }), /* @__PURE__ */ jsx("p", {
-								className: "text-sm text-destructive",
-								children: toolPart.error
-							})]
-						})
-					})
-				]
+		"data-slot": "ai-thinking-loader",
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": "true",
+		"aria-label": loadingText,
+		className: cn("relative flex items-center justify-center gap-2 min-h-[3.25rem] px-4 py-2 rounded-full border border-border bg-card/60", className),
+		style: prefersReducedMotion ? void 0 : { animation: "thinking-fade-in 0.5s ease-out forwards, thinking-glow 4s ease-in-out 0.5s infinite" },
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: clipRef,
+				className: "absolute inset-0 overflow-clip rounded-full",
+				children: /* @__PURE__ */ jsx(AnimatedProgressOvals, {
+					easing,
+					animationDuration
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("relative z-10 text-sm text-foreground whitespace-nowrap truncate font-medium", !prefersReducedMotion && "animate-[thinking-slide-in_0.35s_ease-out_0.15s_both]"),
+				children: loadingText
+			}),
+			showCountdown && /* @__PURE__ */ jsx(CountdownTimer, {
+				initialTime: countdownTime,
+				isActive: true,
+				className: "relative z-10"
 			})
-		}) })]
-	});
-}
-AIToolCall.displayName = "AIToolCall";
-function AIToolCallList({ toolCalls, defaultAllOpen = false, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "ai-tool-call-list",
-		className: cn("space-y-2", className),
-		children: toolCalls.map((toolCall) => /* @__PURE__ */ jsx(AIToolCall, {
-			toolPart: toolCall,
-			defaultOpen: defaultAllOpen
-		}, toolCall.toolCallId))
+		]
 	});
 }
-AIToolCallList.displayName = "AIToolCallList";
+AIThinkingLoader.displayName = "AIThinkingLoader";
 //#endregion
-export { AIToolCall, AIToolCallHeader, AIToolCallList, StatusIcon, ToolCallSection, statusIconVariants, toolCallVariants };
+export { AIThinkingLoader, CountdownTimer };
 
 //# sourceMappingURL=index183.js.map

package/dist/index183.js.map

@@ -1 +1 @@
-{"version":3,"file":"index183.js","names":[],"sources":["../src/components/organisms/ai/AIToolCall/AIToolCall.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  AlertCircle,\n  Check,\n  ChevronDown,\n  ChevronRight,\n  Clock,\n  Code,\n  Wrench,\n} from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport type * as React from 'react';\nimport { AICodeBlock } from '@/components/organisms/ai/AICodeBlock';\nimport { useControllableState } from '@/hooks/use-controllable-state';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst toolCallVariants = cva(\n  'overflow-hidden rounded-xl border transition-colors',\n  {\n    variants: {\n      status: {\n        pending: 'border-border bg-muted',\n        running: 'border-primary bg-primary/10',\n        success: 'border-success/50 bg-success/10',\n        error: 'border-destructive/50 bg-destructive/10',\n      },\n    },\n    defaultVariants: {\n      status: 'pending',\n    },\n  },\n);\n\nconst statusIconVariants = cva('size-4', {\n  variants: {\n    status: {\n      pending: 'text-muted-foreground',\n      running: 'text-primary animate-spin motion-reduce:animate-none',\n      success: 'text-success',\n      error: 'text-destructive',\n    },\n  },\n  defaultVariants: {\n    status: 'pending',\n  },\n});\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type ToolCallStatus = 'pending' | 'running' | 'success' | 'error';\n\nexport interface ToolCallPart {\n  /** Unique tool call ID */\n  toolCallId: string;\n  /** Tool name */\n  toolName: string;\n  /** Tool input/arguments */\n  args?: Record<string, unknown>;\n  /** Tool output/result */\n  result?: unknown;\n  /** Tool status */\n  status?: ToolCallStatus;\n  /** Error message if status is error */\n  error?: string;\n}\n\n// =============================================================================\n// Status Icon Component\n// =============================================================================\n\ninterface StatusIconProps {\n  status: ToolCallStatus;\n  className?: string;\n}\n\nfunction StatusIcon({ status, className }: StatusIconProps) {\n  const iconClass = cn(statusIconVariants({ status }), className);\n\n  switch (status) {\n    case 'running':\n      return <Clock className={iconClass} />;\n    case 'success':\n      return (\n        <Check\n          className={cn(\n            iconClass,\n            'delight-check-bounce motion-reduce:!animate-none',\n          )}\n        />\n      );\n    case 'error':\n      return (\n        <AlertCircle\n          className={cn(iconClass, 'delight-shake motion-reduce:!animate-none')}\n        />\n      );\n    default:\n      return <Wrench className={iconClass} />;\n  }\n}\n\nStatusIcon.displayName = 'StatusIcon';\n\n// =============================================================================\n// Tool Call Header\n// =============================================================================\n\ninterface AIToolCallHeaderProps {\n  toolName: string;\n  status: ToolCallStatus;\n  isOpen: boolean;\n  onToggle: () => void;\n  className?: string;\n}\n\nfunction AIToolCallHeader({\n  toolName,\n  status,\n  isOpen,\n  onToggle,\n  className,\n}: AIToolCallHeaderProps) {\n  const statusLabel = {\n    pending: 'Pending',\n    running: 'Running...',\n    success: 'Completed',\n    error: 'Failed',\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onToggle}\n      aria-expanded={isOpen}\n      className={cn(\n        'flex items-center justify-between w-full px-4 py-3 transition-colors hover:bg-foreground/5 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n        className,\n      )}\n    >\n      <div className=\"flex items-center gap-3\">\n        <StatusIcon status={status} aria-hidden=\"true\" />\n        <div className=\"flex flex-col items-start\">\n          <span className=\"text-sm font-medium text-foreground\">\n            {toolName}\n          </span>\n          <span className=\"text-xs text-text-quaternary\">\n            {statusLabel[status]}\n          </span>\n        </div>\n      </div>\n      {isOpen ? (\n        <ChevronDown\n          className=\"size-4 text-muted-foreground\"\n          aria-hidden=\"true\"\n        />\n      ) : (\n        <ChevronRight\n          className=\"size-4 text-muted-foreground rtl:rotate-180\"\n          aria-hidden=\"true\"\n        />\n      )}\n    </button>\n  );\n}\n\nAIToolCallHeader.displayName = 'AIToolCallHeader';\n\n// =============================================================================\n// Tool Call Section\n// =============================================================================\n\ninterface ToolCallSectionProps {\n  title: string;\n  icon: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction ToolCallSection({\n  title,\n  icon,\n  children,\n  className,\n}: ToolCallSectionProps) {\n  return (\n    <div className={cn('space-y-2', className)}>\n      <div className=\"flex items-center gap-2 text-xs font-medium text-text-quaternary uppercase tracking-wide\">\n        {icon}\n        {title}\n      </div>\n      {children}\n    </div>\n  );\n}\n\nToolCallSection.displayName = 'ToolCallSection';\n\n// =============================================================================\n// Main AIToolCall Component\n// =============================================================================\n\nexport interface AIToolCallProps extends VariantProps<typeof toolCallVariants> {\n  /** Tool call data */\n  toolPart: ToolCallPart;\n  /** Whether to expand by default */\n  defaultOpen?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction formatValue(value: unknown): string {\n  if (typeof value === 'string') return value;\n  return JSON.stringify(value, null, 2);\n}\n\nfunction AIToolCall({\n  toolPart,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  className,\n}: AIToolCallProps) {\n  const [isOpen, setIsOpen] = useControllableState({\n    value: controlledOpen,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const status = toolPart.status || 'pending';\n\n  const handleToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <div\n      data-slot=\"ai-tool-call\"\n      className={cn(toolCallVariants({ status }), className)}\n    >\n      <AIToolCallHeader\n        toolName={toolPart.toolName}\n        status={status}\n        isOpen={isOpen}\n        onToggle={handleToggle}\n      />\n\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{ duration: 0.2 }}\n            className=\"overflow-hidden\"\n          >\n            <div className=\"px-4 pb-4 space-y-4\">\n              {/* Tool Call ID */}\n              <div className=\"text-xs text-muted-foreground font-mono\">\n                ID: {toolPart.toolCallId}\n              </div>\n\n              {/* Input Section */}\n              {toolPart.args && Object.keys(toolPart.args).length > 0 && (\n                <ToolCallSection\n                  title=\"Input\"\n                  icon={<Code className=\"size-3\" />}\n                >\n                  <AICodeBlock\n                    code={formatValue(toolPart.args)}\n                    language=\"json\"\n                    showHeader={false}\n                    showCopyButton={true}\n                    size=\"sm\"\n                  />\n                </ToolCallSection>\n              )}\n\n              {/* Output Section */}\n              {toolPart.result !== undefined && (\n                <ToolCallSection\n                  title=\"Output\"\n                  icon={<Code className=\"size-3\" />}\n                >\n                  <AICodeBlock\n                    code={formatValue(toolPart.result)}\n                    language=\"json\"\n                    showHeader={false}\n                    showCopyButton={true}\n                    size=\"sm\"\n                  />\n                </ToolCallSection>\n              )}\n\n              {/* Error Section */}\n              {toolPart.error && (\n                <div className=\"p-3 rounded-lg bg-destructive/20 border border-destructive/50\">\n                  <div className=\"flex items-start gap-2\">\n                    <AlertCircle className=\"size-4 text-destructive mt-0.5 shrink-0\" />\n                    <p className=\"text-sm text-destructive\">{toolPart.error}</p>\n                  </div>\n                </div>\n              )}\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nAIToolCall.displayName = 'AIToolCall';\n\n// =============================================================================\n// Tool Call List Component\n// =============================================================================\n\nexport interface AIToolCallListProps {\n  /** Array of tool calls */\n  toolCalls: ToolCallPart[];\n  /** Whether to expand all by default */\n  defaultAllOpen?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction AIToolCallList({\n  toolCalls,\n  defaultAllOpen = false,\n  className,\n}: AIToolCallListProps) {\n  return (\n    <div data-slot=\"ai-tool-call-list\" className={cn('space-y-2', className)}>\n      {toolCalls.map((toolCall) => (\n        <AIToolCall\n          key={toolCall.toolCallId}\n          toolPart={toolCall}\n          defaultOpen={defaultAllOpen}\n        />\n      ))}\n    </div>\n  );\n}\n\nAIToolCallList.displayName = 'AIToolCallList';\n\nexport {\n  AIToolCall,\n  AIToolCallHeader,\n  AIToolCallList,\n  StatusIcon,\n  statusIconVariants,\n  ToolCallSection,\n  toolCallVariants,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index183.js","names":[],"sources":["../src/components/organisms/ai/AIThinkingLoader/AIThinkingLoader.tsx"],"sourcesContent":["import './AIThinkingLoader.css';\n\nimport { useAnimate, useReducedMotion } from 'motion/react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\n// Animated Progress Ovals\n\ninterface AnimatedProgressOvalsProps {\n  className?: string;\n  animationDuration?: number;\n  easing?: string;\n}\n\nfunction AnimatedProgressOvals({\n  className,\n  animationDuration = 3000,\n  easing = 'ease-in-out',\n}: AnimatedProgressOvalsProps) {\n  const prefersReducedMotion = useReducedMotion();\n\n  return (\n    <div\n      data-slot=\"thinking-oval\"\n      aria-hidden=\"true\"\n      className={cn('absolute top-0 bottom-0 pointer-events-none', className)}\n      style={\n        prefersReducedMotion\n          ? undefined\n          : {\n              left: 0,\n              right: '100%',\n              animationName: 'thinking-grow-empty',\n              animationDuration: `${animationDuration}ms`,\n              animationTimingFunction: easing,\n              animationIterationCount: 'infinite',\n              willChange: 'left, right, transform',\n            }\n      }\n    >\n      <div\n        className=\"absolute rounded-full bg-air-200 opacity-20\"\n        style={{ inset: -40 }}\n      />\n      <div\n        className=\"absolute rounded-full bg-air-200 opacity-50\"\n        style={{ inset: -20 }}\n      />\n      <div\n        className=\"absolute rounded-full bg-air-200 opacity-70\"\n        style={{ inset: 0 }}\n      />\n    </div>\n  );\n}\n\nAnimatedProgressOvals.displayName = 'AnimatedProgressOvals';\n\n// Countdown Timer\n\nexport interface CountdownTimerProps {\n  initialTime?: number;\n  isActive?: boolean;\n  onComplete?: () => void;\n  className?: string;\n}\n\nfunction CountdownTimer({\n  initialTime = 5,\n  isActive = true,\n  onComplete,\n  className,\n}: CountdownTimerProps) {\n  const [timeLeft, setTimeLeft] = React.useState(initialTime);\n  const [scope, animate] = useAnimate();\n  const prefersReducedMotion = useReducedMotion();\n  const isFirstTick = React.useRef(true);\n\n  React.useEffect(() => {\n    setTimeLeft(initialTime);\n  }, [initialTime]);\n\n  React.useEffect(() => {\n    if (!isActive) return;\n\n    const timer = setInterval(() => {\n      setTimeLeft((prev) => {\n        if (prev <= 1) {\n          onComplete?.();\n          return initialTime;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [isActive, initialTime, onComplete]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: timeLeft is an intentional trigger — re-run pulse animation on each tick\n  React.useEffect(() => {\n    if (isFirstTick.current) {\n      isFirstTick.current = false;\n      return;\n    }\n    if (!prefersReducedMotion && scope.current) {\n      animate(\n        scope.current,\n        { scale: [1.12, 1], y: [-2, 0] },\n        { duration: 0.3, ease: [0.25, 1, 0.5, 1] },\n      );\n    }\n  }, [timeLeft, animate, prefersReducedMotion, scope]);\n\n  return (\n    <div\n      ref={scope}\n      role=\"timer\"\n      aria-label={`${timeLeft} seconds remaining`}\n      className={cn(\n        'flex items-center justify-center px-3 py-2 rounded-full bg-card/20 shrink-0',\n        !prefersReducedMotion &&\n          'animate-[thinking-pop-in_0.3s_ease-out_0.3s_both]',\n        className,\n      )}\n    >\n      <span className=\"text-sm text-foreground tabular-nums\">{timeLeft}s</span>\n    </div>\n  );\n}\n\nCountdownTimer.displayName = 'CountdownTimer';\n\n// Main AIThinkingLoader Component\n\nexport interface AIThinkingLoaderProps {\n  loadingText?: string;\n  easing?: string;\n  showCountdown?: boolean;\n  countdownTime?: number;\n  animationDuration?: number;\n  onAnimationComplete?: () => void;\n  className?: string;\n}\n\nfunction AIThinkingLoader({\n  loadingText = 'Transferring to AI Agent: Meeting Manager',\n  easing = 'ease-in-out',\n  showCountdown = true,\n  countdownTime = 5,\n  animationDuration = 3000,\n  onAnimationComplete,\n  className,\n}: AIThinkingLoaderProps) {\n  const clipRef = React.useRef<HTMLDivElement>(null);\n  const prefersReducedMotion = useReducedMotion();\n\n  React.useEffect(() => {\n    if (!onAnimationComplete) return;\n\n    const oval = clipRef.current?.querySelector('[data-slot=\"thinking-oval\"]');\n    if (!oval) return;\n\n    const handler = () => onAnimationComplete();\n    oval.addEventListener('animationiteration', handler);\n    return () => oval.removeEventListener('animationiteration', handler);\n  }, [onAnimationComplete]);\n\n  return (\n    <div\n      data-slot=\"ai-thinking-loader\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-busy=\"true\"\n      aria-label={loadingText}\n      className={cn(\n        'relative flex items-center justify-center gap-2 min-h-[3.25rem] px-4 py-2 rounded-full border border-border bg-card/60',\n        className,\n      )}\n      style={\n        prefersReducedMotion\n          ? undefined\n          : {\n              animation:\n                'thinking-fade-in 0.5s ease-out forwards, thinking-glow 4s ease-in-out 0.5s infinite',\n            }\n      }\n    >\n      <div\n        ref={clipRef}\n        className=\"absolute inset-0 overflow-clip rounded-full\"\n      >\n        <AnimatedProgressOvals\n          easing={easing}\n          animationDuration={animationDuration}\n        />\n      </div>\n\n      <span\n        className={cn(\n          'relative z-10 text-sm text-foreground whitespace-nowrap truncate font-medium',\n          !prefersReducedMotion &&\n            'animate-[thinking-slide-in_0.35s_ease-out_0.15s_both]',\n        )}\n      >\n        {loadingText}\n      </span>\n\n      {showCountdown && (\n        <CountdownTimer\n          initialTime={countdownTime}\n          isActive={true}\n          className=\"relative z-10\"\n        />\n      )}\n    </div>\n  );\n}\n\nAIThinkingLoader.displayName = 'AIThinkingLoader';\n\nexport { AIThinkingLoader, CountdownTimer };\n"],"mappings":"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"}