@humain/ui 2.1.62 → 2.1.65

package/dist/index176.js

@@ -1,192 +1,166 @@
 import { cn } from "./index2.js";
-import { Button } from "./index5.js";
+import { WorkflowStepItem, WorkflowStepRenderer, WorkflowStepStatusIcon } from "./index175.js";
 import { cva } from "class-variance-authority";
-import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from "lucide-react";
+import { AlertCircle, Check, ChevronDown, ChevronRight, Clock } from "lucide-react";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "motion/react";
-//#region src/components/organisms/ai/AISystemMessage/AISystemMessage.tsx
-var systemMessageVariants = cva("flex items-start gap-3 px-4 py-3 rounded-xl border", {
-	variants: {
-		variant: {
-			info: "bg-primary/10 border-primary text-primary",
-			success: "bg-success/10 border-success/50 text-success",
-			warning: "bg-warning/10 border-warning/50 text-warning",
-			error: "bg-destructive/10 border-destructive/50 text-destructive",
-			neutral: "bg-muted border-border text-secondary-foreground"
-		},
-		size: {
-			sm: "px-3 py-2 text-xs",
-			md: "px-4 py-3 text-sm",
-			lg: "px-5 py-4 text-base"
-		}
-	},
-	defaultVariants: {
-		variant: "info",
-		size: "md"
-	}
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+//#region src/components/organisms/ai/AISteps/AISteps.tsx
+var stepsContainerVariants = cva("overflow-hidden rounded-xl border", {
+	variants: { variant: {
+		default: "border-border bg-background",
+		subtle: "border-border bg-muted"
+	} },
+	defaultVariants: { variant: "default" }
 });
-var systemMessageIconVariants = cva("shrink-0 mt-0.5", {
-	variants: {
-		variant: {
-			info: "text-primary",
-			success: "text-success",
-			warning: "text-warning",
-			error: "text-destructive",
-			neutral: "text-text-quaternary"
-		},
-		size: {
-			sm: "size-4",
-			md: "size-5",
-			lg: "size-6"
-		}
-	},
-	defaultVariants: {
-		variant: "info",
-		size: "md"
-	}
+var stepItemVariants = cva("flex items-start gap-3 px-4 py-3 transition-colors", {
+	variants: { status: {
+		pending: "text-muted-foreground",
+		running: "text-primary",
+		completed: "text-success",
+		error: "text-destructive"
+	} },
+	defaultVariants: { status: "pending" }
 });
-var iconMap = {
-	info: Info,
-	success: CheckCircle,
-	warning: AlertTriangle,
-	error: AlertCircle,
-	neutral: Info
+var stepIconVariants = cva("size-5 shrink-0 flex items-center justify-center rounded-full", {
+	variants: { status: {
+		pending: "bg-accent text-muted-foreground",
+		running: "bg-primary/20 text-primary",
+		completed: "bg-success/20 text-success",
+		error: "bg-destructive/20 text-destructive"
+	} },
+	defaultVariants: { status: "pending" }
+});
+var WORKFLOW_STATUS_BY_STEP_STATUS = {
+	pending: "pending",
+	running: "running",
+	completed: "completed",
+	error: "error"
 };
-function AISystemMessage({ children, title, variant = "info", size = "md", dismissible = false, onDismiss, icon, hideIcon = false, actions, className }) {
-	const [isVisible, setIsVisible] = React.useState(true);
-	const handleDismiss = () => {
-		setIsVisible(false);
-		onDismiss?.();
+function toWorkflowStepStatus(status) {
+	return WORKFLOW_STATUS_BY_STEP_STATUS[status];
+}
+function toWorkflowStep(step) {
+	const error = step.error?.trim() ? step.error : void 0;
+	return {
+		id: step.id,
+		title: step.title,
+		description: step.description,
+		status: toWorkflowStepStatus(step.status),
+		content: error === void 0 ? step.content : void 0,
+		durationMs: step.status === "completed" ? step.duration : void 0,
+		error
 	};
-	const IconComponent = iconMap[variant || "info"];
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && /* @__PURE__ */ jsxs(motion.div, {
-		"data-slot": "ai-system-message",
-		role: "status",
-		"aria-live": "polite",
-		initial: {
-			opacity: 0,
-			y: -10
-		},
-		animate: {
-			opacity: 1,
-			y: 0
-		},
-		exit: {
-			opacity: 0,
-			y: -10,
-			height: 0,
-			marginBottom: 0
-		},
-		transition: {
-			duration: .2,
-			ease: [
-				.4,
-				0,
-				.2,
-				1
-			]
-		},
-		className: cn(systemMessageVariants({
-			variant,
-			size
-		}), "motion-reduce:transition-none", className),
-		children: [
-			!hideIcon && /* @__PURE__ */ jsx("div", {
-				className: systemMessageIconVariants({
-					variant,
-					size
-				}),
-				"aria-hidden": "true",
-				children: icon || /* @__PURE__ */ jsx(IconComponent, { className: "size-full" })
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex-1 min-w-0",
+}
+function StepIcon({ status, index, className }) {
+	return /* @__PURE__ */ jsx(WorkflowStepStatusIcon, {
+		status: toWorkflowStepStatus(status),
+		index,
+		className
+	});
+}
+StepIcon.displayName = "StepIcon";
+function AIStepItem({ step, index, isLast, expandable = true, defaultExpanded = false }) {
+	const [expanded, setExpanded] = React.useState(defaultExpanded);
+	return /* @__PURE__ */ jsx(WorkflowStepItem, {
+		step: toWorkflowStep(step),
+		index,
+		isLast,
+		appearance: "contained",
+		itemSlot: "ai-step-item",
+		expandable,
+		expanded,
+		onExpandedChange: () => setExpanded((value) => !value)
+	});
+}
+AIStepItem.displayName = "AIStepItem";
+/**
+* AISteps displays a multi-step progress indicator for AI workflows.
+* Shows step status (pending, running, complete, error) with expandable details and timing.
+*
+* @llms Multi-step AI progress with status icons, timing, expandable details
+* @example
+* ```tsx
+* <AISteps
+*   title="Processing"
+*   steps={[
+*     { label: 'Analyzing', status: 'complete', duration: '2s' },
+*     { label: 'Generating', status: 'running' },
+*   ]}
+* />
+* ```
+*/
+function AISteps({ steps, title, variant, collapsible = true, defaultExpanded = true, stepsExpandable = true, className }) {
+	const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
+	const prefersReducedMotion = useReducedMotion();
+	const completedCount = steps.filter((s) => s.status === "completed").length;
+	const totalCount = steps.length;
+	const hasError = steps.some((s) => s.status === "error");
+	const isRunning = steps.some((s) => s.status === "running");
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "ai-steps",
+		"aria-label": title || "Steps",
+		className: cn(stepsContainerVariants({ variant }), className),
+		children: [(title || collapsible) && /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => collapsible && setIsExpanded(!isExpanded),
+			disabled: !collapsible,
+			"aria-expanded": collapsible ? isExpanded : void 0,
+			className: cn("flex items-center justify-between w-full px-4 py-3 border-b border-border", collapsible && "hover:bg-muted cursor-pointer", "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
 				children: [
-					title && /* @__PURE__ */ jsx("p", {
-						className: "font-medium mb-0.5",
-						children: title
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: cn(!title && "leading-snug"),
-						children
+					isRunning && /* @__PURE__ */ jsx(Clock, { className: "size-4 text-primary animate-pulse motion-reduce:animate-none" }),
+					hasError && !isRunning && /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 text-destructive" }),
+					!isRunning && !hasError && completedCount === totalCount && /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium text-foreground",
+						children: title || "Steps"
 					}),
-					actions && /* @__PURE__ */ jsx("div", {
-						className: "flex items-center gap-2 mt-2",
-						children: actions
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-xs text-text-quaternary",
+						children: [
+							"(",
+							completedCount,
+							"/",
+							totalCount,
+							")"
+						]
 					})
 				]
-			}),
-			dismissible && /* @__PURE__ */ jsx(Button, {
-				appearance: "ghost",
-				variant: "secondary",
-				size: "sm",
-				onClick: handleDismiss,
-				"aria-label": "Dismiss message",
-				className: "size-6 p-0 shrink-0 -mt-0.5 -me-1 hover:bg-foreground/5",
-				children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+			}), collapsible && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground rtl:rotate-180" })
+			})]
+		}), /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			children: isExpanded && /* @__PURE__ */ jsx(motion.div, {
+				initial: {
+					height: 0,
+					opacity: 0
+				},
+				animate: {
+					height: "auto",
+					opacity: 1
+				},
+				exit: {
+					height: 0,
+					opacity: 0
+				},
+				transition: { duration: prefersReducedMotion ? 0 : .2 },
+				className: "overflow-hidden",
+				children: /* @__PURE__ */ jsx(WorkflowStepRenderer, {
+					appearance: "contained",
+					steps: steps.map(toWorkflowStep),
+					itemSlot: "ai-step-item",
+					expandable: stepsExpandable
+				})
 			})
-		]
-	}) });
-}
-AISystemMessage.displayName = "AISystemMessage";
-function AISystemMessageBanner({ children, variant = "info", dismissible = false, onDismiss, icon, action, className }) {
-	const [isVisible, setIsVisible] = React.useState(true);
-	const handleDismiss = () => {
-		setIsVisible(false);
-		onDismiss?.();
-	};
-	const IconComponent = iconMap[variant || "info"];
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && /* @__PURE__ */ jsxs(motion.div, {
-		"data-slot": "ai-system-message-banner",
-		role: "status",
-		"aria-live": "polite",
-		initial: {
-			opacity: 0,
-			height: 0
-		},
-		animate: {
-			opacity: 1,
-			height: "auto"
-		},
-		exit: {
-			opacity: 0,
-			height: 0
-		},
-		transition: {
-			duration: .2,
-			ease: [
-				.4,
-				0,
-				.2,
-				1
-			]
-		},
-		className: cn("w-full px-4 py-2 flex items-center justify-center gap-3 motion-reduce:transition-none", variant === "info" && "bg-primary/10 text-primary", variant === "success" && "bg-success/10 text-success", variant === "warning" && "bg-warning/10 text-warning", variant === "error" && "bg-destructive/10 text-destructive", variant === "neutral" && "bg-muted text-secondary-foreground", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 flex-1 justify-center",
-			children: [
-				icon || /* @__PURE__ */ jsx(IconComponent, {
-					"aria-hidden": "true",
-					className: cn("size-4 shrink-0", variant === "info" && "text-primary", variant === "success" && "text-success", variant === "warning" && "text-warning", variant === "error" && "text-destructive", variant === "neutral" && "text-text-quaternary")
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "text-sm",
-					children
-				}),
-				action
-			]
-		}), dismissible && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: handleDismiss,
-			"aria-label": "Dismiss banner",
-			className: "p-1 rounded hover:bg-foreground/5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
-			children: /* @__PURE__ */ jsx(X, { className: "size-4" })
 		})]
-	}) });
+	});
 }
-AISystemMessageBanner.displayName = "AISystemMessageBanner";
+AISteps.displayName = "AISteps";
 //#endregion
-export { AISystemMessage, AISystemMessageBanner, systemMessageIconVariants, systemMessageVariants };
+export { AIStepItem, AISteps, StepIcon, stepIconVariants, stepItemVariants, stepsContainerVariants };
 
 //# sourceMappingURL=index176.js.map

package/dist/index176.js.map

@@ -1 +1 @@
-{"version":3,"file":"index176.js","names":[],"sources":["../src/components/organisms/ai/AISystemMessage/AISystemMessage.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport * as React from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst systemMessageVariants = cva(\n  'flex items-start gap-3 px-4 py-3 rounded-xl border',\n  {\n    variants: {\n      variant: {\n        info: 'bg-primary/10 border-primary text-primary',\n        success: 'bg-success/10 border-success/50 text-success',\n        warning: 'bg-warning/10 border-warning/50 text-warning',\n        error: 'bg-destructive/10 border-destructive/50 text-destructive',\n        neutral: 'bg-muted border-border text-secondary-foreground',\n      },\n      size: {\n        sm: 'px-3 py-2 text-xs',\n        md: 'px-4 py-3 text-sm',\n        lg: 'px-5 py-4 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n      size: 'md',\n    },\n  },\n);\n\nconst systemMessageIconVariants = cva('shrink-0 mt-0.5', {\n  variants: {\n    variant: {\n      info: 'text-primary',\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-destructive',\n      neutral: 'text-text-quaternary',\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n  },\n  defaultVariants: {\n    variant: 'info',\n    size: 'md',\n  },\n});\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type SystemMessageVariant =\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral';\n\n// =============================================================================\n// Icon Map\n// =============================================================================\n\nconst iconMap = {\n  info: Info,\n  success: CheckCircle,\n  warning: AlertTriangle,\n  error: AlertCircle,\n  neutral: Info,\n};\n\n// =============================================================================\n// Main AISystemMessage Component\n// =============================================================================\n\nexport interface AISystemMessageProps\n  extends VariantProps<typeof systemMessageVariants> {\n  /** Message content */\n  children: React.ReactNode;\n  /** Title for the message */\n  title?: string;\n  /** Whether the message can be dismissed */\n  dismissible?: boolean;\n  /** Callback when dismissed */\n  onDismiss?: () => void;\n  /** Custom icon */\n  icon?: React.ReactNode;\n  /** Hide the icon */\n  hideIcon?: boolean;\n  /** Actions to display */\n  actions?: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction AISystemMessage({\n  children,\n  title,\n  variant = 'info',\n  size = 'md',\n  dismissible = false,\n  onDismiss,\n  icon,\n  hideIcon = false,\n  actions,\n  className,\n}: AISystemMessageProps) {\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const handleDismiss = () => {\n    setIsVisible(false);\n    onDismiss?.();\n  };\n\n  const IconComponent = iconMap[variant || 'info'];\n\n  return (\n    <AnimatePresence>\n      {isVisible && (\n        <motion.div\n          data-slot=\"ai-system-message\"\n          role=\"status\"\n          aria-live=\"polite\"\n          initial={{ opacity: 0, y: -10 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -10, height: 0, marginBottom: 0 }}\n          transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}\n          className={cn(\n            systemMessageVariants({ variant, size }),\n            'motion-reduce:transition-none',\n            className,\n          )}\n        >\n          {/* Icon */}\n          {!hideIcon && (\n            <div\n              className={systemMessageIconVariants({ variant, size })}\n              aria-hidden=\"true\"\n            >\n              {icon || <IconComponent className=\"size-full\" />}\n            </div>\n          )}\n\n          {/* Content */}\n          <div className=\"flex-1 min-w-0\">\n            {title && <p className=\"font-medium mb-0.5\">{title}</p>}\n            <div className={cn(!title && 'leading-snug')}>{children}</div>\n\n            {/* Actions */}\n            {actions && (\n              <div className=\"flex items-center gap-2 mt-2\">{actions}</div>\n            )}\n          </div>\n\n          {/* Dismiss button */}\n          {dismissible && (\n            <Button\n              appearance=\"ghost\"\n              variant=\"secondary\"\n              size=\"sm\"\n              onClick={handleDismiss}\n              aria-label=\"Dismiss message\"\n              className=\"size-6 p-0 shrink-0 -mt-0.5 -me-1 hover:bg-foreground/5\"\n            >\n              <X className=\"size-4\" />\n            </Button>\n          )}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nAISystemMessage.displayName = 'AISystemMessage';\n\n// =============================================================================\n// System Message Banner (Full-width variant)\n// =============================================================================\n\nexport interface AISystemMessageBannerProps\n  extends VariantProps<typeof systemMessageVariants> {\n  /** Message content */\n  children: React.ReactNode;\n  /** Whether the banner can be dismissed */\n  dismissible?: boolean;\n  /** Callback when dismissed */\n  onDismiss?: () => void;\n  /** Custom icon */\n  icon?: React.ReactNode;\n  /** Action button */\n  action?: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\nfunction AISystemMessageBanner({\n  children,\n  variant = 'info',\n  dismissible = false,\n  onDismiss,\n  icon,\n  action,\n  className,\n}: AISystemMessageBannerProps) {\n  const [isVisible, setIsVisible] = React.useState(true);\n\n  const handleDismiss = () => {\n    setIsVisible(false);\n    onDismiss?.();\n  };\n\n  const IconComponent = iconMap[variant || 'info'];\n\n  return (\n    <AnimatePresence>\n      {isVisible && (\n        <motion.div\n          data-slot=\"ai-system-message-banner\"\n          role=\"status\"\n          aria-live=\"polite\"\n          initial={{ opacity: 0, height: 0 }}\n          animate={{ opacity: 1, height: 'auto' }}\n          exit={{ opacity: 0, height: 0 }}\n          transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}\n          className={cn(\n            'w-full px-4 py-2 flex items-center justify-center gap-3 motion-reduce:transition-none',\n            variant === 'info' && 'bg-primary/10 text-primary',\n            variant === 'success' && 'bg-success/10 text-success',\n            variant === 'warning' && 'bg-warning/10 text-warning',\n            variant === 'error' && 'bg-destructive/10 text-destructive',\n            variant === 'neutral' && 'bg-muted text-secondary-foreground',\n            className,\n          )}\n        >\n          <div className=\"flex items-center gap-2 flex-1 justify-center\">\n            {icon || (\n              <IconComponent\n                aria-hidden=\"true\"\n                className={cn(\n                  'size-4 shrink-0',\n                  variant === 'info' && 'text-primary',\n                  variant === 'success' && 'text-success',\n                  variant === 'warning' && 'text-warning',\n                  variant === 'error' && 'text-destructive',\n                  variant === 'neutral' && 'text-text-quaternary',\n                )}\n              />\n            )}\n            <span className=\"text-sm\">{children}</span>\n            {action}\n          </div>\n\n          {dismissible && (\n            <button\n              type=\"button\"\n              onClick={handleDismiss}\n              aria-label=\"Dismiss banner\"\n              className=\"p-1 rounded hover:bg-foreground/5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nAISystemMessageBanner.displayName = 'AISystemMessageBanner';\n\nexport {\n  AISystemMessage,\n  AISystemMessageBanner,\n  systemMessageIconVariants,\n  systemMessageVariants,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index176.js","names":[],"sources":["../src/components/organisms/ai/AISteps/AISteps.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  AlertCircle,\n  Check,\n  ChevronDown,\n  ChevronRight,\n  Clock,\n} from 'lucide-react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n  WorkflowStepItem,\n  WorkflowStepRenderer,\n  type WorkflowStepStatus,\n  WorkflowStepStatusIcon,\n  type WorkflowStepViewModel,\n} from '../_shared/workflow-step-renderer';\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst stepsContainerVariants = cva('overflow-hidden rounded-xl border', {\n  variants: {\n    variant: {\n      default: 'border-border bg-background',\n      subtle: 'border-border bg-muted',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst stepItemVariants = cva(\n  'flex items-start gap-3 px-4 py-3 transition-colors',\n  {\n    variants: {\n      status: {\n        pending: 'text-muted-foreground',\n        running: 'text-primary',\n        completed: 'text-success',\n        error: 'text-destructive',\n      },\n    },\n    defaultVariants: {\n      status: 'pending',\n    },\n  },\n);\n\nconst stepIconVariants = cva(\n  'size-5 shrink-0 flex items-center justify-center rounded-full',\n  {\n    variants: {\n      status: {\n        pending: 'bg-accent text-muted-foreground',\n        running: 'bg-primary/20 text-primary',\n        completed: 'bg-success/20 text-success',\n        error: 'bg-destructive/20 text-destructive',\n      },\n    },\n    defaultVariants: {\n      status: 'pending',\n    },\n  },\n);\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type StepStatus = 'pending' | 'running' | 'completed' | 'error';\n\nexport interface StepData {\n  /** Unique step ID */\n  id: string;\n  /** Step title */\n  title: string;\n  /** Step description */\n  description?: string;\n  /** Step status */\n  status: StepStatus;\n  /** Optional content to show when expanded */\n  content?: React.ReactNode;\n  /** Duration in ms (for completed steps) */\n  duration?: number;\n  /** Error message if status is error */\n  error?: string;\n}\n\ntype AIStepsWorkflowStatus = Exclude<WorkflowStepStatus, 'suspended'>;\n\nconst WORKFLOW_STATUS_BY_STEP_STATUS = {\n  pending: 'pending',\n  running: 'running',\n  completed: 'completed',\n  error: 'error',\n} as const satisfies Record<StepStatus, AIStepsWorkflowStatus>;\n\nfunction toWorkflowStepStatus(status: StepStatus): AIStepsWorkflowStatus {\n  return WORKFLOW_STATUS_BY_STEP_STATUS[status];\n}\n\nfunction toWorkflowStep(step: StepData): WorkflowStepViewModel {\n  const error = step.error?.trim() ? step.error : undefined;\n\n  return {\n    id: step.id,\n    title: step.title,\n    description: step.description,\n    status: toWorkflowStepStatus(step.status),\n    content: error === undefined ? step.content : undefined,\n    durationMs: step.status === 'completed' ? step.duration : undefined,\n    error,\n  };\n}\n\n// =============================================================================\n// Step Icon Component\n// =============================================================================\n\ninterface StepIconProps {\n  status: StepStatus;\n  index: number;\n  className?: string;\n}\n\nfunction StepIcon({ status, index, className }: StepIconProps) {\n  return (\n    <WorkflowStepStatusIcon\n      status={toWorkflowStepStatus(status)}\n      index={index}\n      className={className}\n    />\n  );\n}\n\nStepIcon.displayName = 'StepIcon';\n\n// =============================================================================\n// Single Step Item\n// =============================================================================\n\ninterface AIStepItemProps {\n  step: StepData;\n  index: number;\n  isLast: boolean;\n  expandable?: boolean;\n  defaultExpanded?: boolean;\n}\n\nfunction AIStepItem({\n  step,\n  index,\n  isLast,\n  expandable = true,\n  defaultExpanded = false,\n}: AIStepItemProps) {\n  const [expanded, setExpanded] = React.useState(defaultExpanded);\n\n  return (\n    <WorkflowStepItem\n      step={toWorkflowStep(step)}\n      index={index}\n      isLast={isLast}\n      appearance=\"contained\"\n      itemSlot=\"ai-step-item\"\n      expandable={expandable}\n      expanded={expanded}\n      onExpandedChange={() => setExpanded((value) => !value)}\n    />\n  );\n}\n\nAIStepItem.displayName = 'AIStepItem';\n\n// =============================================================================\n// Main AISteps Component\n// =============================================================================\n\nexport interface AIStepsProps\n  extends VariantProps<typeof stepsContainerVariants> {\n  /** Array of steps */\n  steps: StepData[];\n  /** Title for the steps container */\n  title?: string;\n  /** Whether the container is collapsible */\n  collapsible?: boolean;\n  /** Whether the container is expanded by default */\n  defaultExpanded?: boolean;\n  /** Whether individual steps are expandable */\n  stepsExpandable?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * AISteps displays a multi-step progress indicator for AI workflows.\n * Shows step status (pending, running, complete, error) with expandable details and timing.\n *\n * @llms Multi-step AI progress with status icons, timing, expandable details\n * @example\n * ```tsx\n * <AISteps\n *   title=\"Processing\"\n *   steps={[\n *     { label: 'Analyzing', status: 'complete', duration: '2s' },\n *     { label: 'Generating', status: 'running' },\n *   ]}\n * />\n * ```\n */\nexport function AISteps({\n  steps,\n  title,\n  variant,\n  collapsible = true,\n  defaultExpanded = true,\n  stepsExpandable = true,\n  className,\n}: AIStepsProps) {\n  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);\n  const prefersReducedMotion = useReducedMotion();\n\n  // Calculate summary stats\n  const completedCount = steps.filter((s) => s.status === 'completed').length;\n  const totalCount = steps.length;\n  const hasError = steps.some((s) => s.status === 'error');\n  const isRunning = steps.some((s) => s.status === 'running');\n\n  return (\n    <section\n      data-slot=\"ai-steps\"\n      aria-label={title || 'Steps'}\n      className={cn(stepsContainerVariants({ variant }), className)}\n    >\n      {/* Header */}\n      {(title || collapsible) && (\n        <button\n          type=\"button\"\n          onClick={() => collapsible && setIsExpanded(!isExpanded)}\n          disabled={!collapsible}\n          aria-expanded={collapsible ? isExpanded : undefined}\n          className={cn(\n            'flex items-center justify-between w-full px-4 py-3 border-b border-border',\n            collapsible && 'hover:bg-muted cursor-pointer',\n            'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n          )}\n        >\n          <div className=\"flex items-center gap-2\">\n            {isRunning && (\n              <Clock className=\"size-4 text-primary animate-pulse motion-reduce:animate-none\" />\n            )}\n            {hasError && !isRunning && (\n              <AlertCircle className=\"size-4 text-destructive\" />\n            )}\n            {!isRunning && !hasError && completedCount === totalCount && (\n              <Check className=\"size-4 text-success\" />\n            )}\n            <span className=\"text-sm font-medium text-foreground\">\n              {title || 'Steps'}\n            </span>\n            <span className=\"text-xs text-text-quaternary\">\n              ({completedCount}/{totalCount})\n            </span>\n          </div>\n\n          {collapsible && (\n            <div className=\"shrink-0\">\n              {isExpanded ? (\n                <ChevronDown className=\"size-4 text-muted-foreground\" />\n              ) : (\n                <ChevronRight className=\"size-4 text-muted-foreground rtl:rotate-180\" />\n              )}\n            </div>\n          )}\n        </button>\n      )}\n\n      {/* Steps List */}\n      <AnimatePresence initial={false}>\n        {isExpanded && (\n          <motion.div\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: 'auto', opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}\n            className=\"overflow-hidden\"\n          >\n            <WorkflowStepRenderer\n              appearance=\"contained\"\n              steps={steps.map(toWorkflowStep)}\n              itemSlot=\"ai-step-item\"\n              expandable={stepsExpandable}\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </section>\n  );\n}\n\nAISteps.displayName = 'AISteps';\n\nexport {\n  AIStepItem,\n  StepIcon,\n  stepIconVariants,\n  stepItemVariants,\n  stepsContainerVariants,\n};\n"],"mappings":"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"}