@od-oneapp/uni-ui 2026.1.1301

package/dist/components-ai-elements/queue/index.mjs

@@ -0,0 +1,284 @@
+'use client';
+import { t as cn } from "../../utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE, i as SPRING_GENTLE, r as SPRING_FLUID } from "../../motion-zelaDelJ.mjs";
+import { AI_COLLAPSIBLE, AI_CONTAINER_RADIUS, AI_FOCUS, AI_HOVER, AI_NESTED_RADIUS, AI_PADDING, AI_SPACING, AI_STACK, AI_TEXT, AI_TRANSITION } from "../../components-ai-elements-constants.mjs";
+import { t as Button } from "../../button-DVOrrZLw.mjs";
+import { i as CollapsibleTrigger, n as CollapsibleContent, t as Collapsible } from "../../collapsible-CXy4T04n.mjs";
+import { t as ScrollArea } from "../../scroll-area-Bxi-Edjc.mjs";
+import { createContext, useContext, useMemo } from "react";
+import { useFocusWithin, useHover, useMediaQuery, useMergedRef, useReducedMotion } from "@mantine/hooks";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ai-elements/queue/queue.tsx
+/**
+* @fileoverview Queue Component - Premium Harmony V2
+*
+* A component for displaying queued operations and tasks in AI workflows.
+* Supports collapsible sections, scrollable content areas, and interactive items.
+*
+* Features:
+* - Premium Harmony V2 spring physics animations
+* - Touch vs desktop detection with adaptive targets
+* - Reduced motion support
+* - Semantic color tokens (no hardcoded colors)
+* - 44px minimum touch targets
+* - Data attributes for state management
+* - Focus-visible ring styles
+* - AnimatePresence for smooth enter/exit
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming
+* - CVA variants for item completion indicator
+* - Context-based hover/focus state for keyboard accessibility
+* - Mantine hooks (useHover, useFocusWithin, useMergedRef, useMediaQuery, useReducedMotion)
+* - Collapsible sections with card styling
+* - Scrollable content areas (max-h-80)
+* - Completion indicator status (success/muted)
+* - Action buttons revealed on hover/focus
+* - File/image attachment support
+* - AI design system constants integration
+*
+* @module @od-oneapp/uni-ui/components/ai-elements/queue
+* @component Queue, QueueSection, QueueSectionTrigger, QueueSectionLabel, QueueSectionContent, QueueList, QueueItem, QueueItemIndicator, QueueItemContent, QueueItemDescription, QueueItemActions, QueueItemAction, QueueItemAttachment, QueueItemImage, QueueItemFile
+*
+* @useCases
+* - Display queued AI agent tasks with completion status
+* - Show pending document processing operations
+* - List scheduled automation workflows
+* - Track multi-step AI reasoning chains
+* - Manage batch file upload queues
+* - Display research query backlogs
+* - Organize code generation task lists
+* - Show pending API requests in flight
+* - Track async operation progress
+* - Visualize task dependencies and order
+*
+* @subcomponents
+* - Queue - Root stack container
+* - QueueSection - Collapsible card section
+* - QueueSectionTrigger - Section toggle button
+* - QueueSectionLabel - Label with count badge and icon
+* - QueueSectionContent - Collapsible content area
+* - QueueList - Scrollable list container
+* - QueueItem - Individual item with context
+* - QueueItemIndicator - Completion status dot
+* - QueueItemContent - Item text content
+* - QueueItemDescription - Muted description text
+* - QueueItemActions - Hover-revealed action container
+* - QueueItemAction - Action button
+* - QueueItemAttachment - Attachment container
+* - QueueItemImage - Thumbnail image
+* - QueueItemFile - File name display
+*
+* @variants
+* - completed: true (success), false (muted)
+*
+* @example
+* <Queue>
+*   <QueueSection>
+*     <QueueSectionTrigger>
+*       <QueueSectionLabel label="Tasks" count={3} />
+*     </QueueSectionTrigger>
+*     <QueueSectionContent>
+*       <QueueList>
+*         <QueueItem>
+*           <QueueItemIndicator completed />
+*           <QueueItemContent>Task 1</QueueItemContent>
+*           <QueueItemActions>
+*             <QueueItemAction>Edit</QueueItemAction>
+*           </QueueItemActions>
+*         </QueueItem>
+*       </QueueList>
+*     </QueueSectionContent>
+*   </QueueSection>
+* </Queue>
+*/
+const QueueItemContext = createContext(null);
+const useQueueItemContext = () => {
+	const ctx = useContext(QueueItemContext);
+	if (!ctx) throw new Error("QueueItem subcomponents must be used within QueueItem");
+	return ctx;
+};
+/**
+* CVA variants for QueueItemIndicator completion state
+*/
+const queueItemIndicatorVariants = cva("mt-1 inline-block size-2.5 rounded-full", {
+	variants: { completed: {
+		true: "bg-success",
+		false: "bg-muted-foreground/50"
+	} },
+	defaultVariants: { completed: false }
+});
+const Queue = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn(AI_STACK.standard, className),
+	...props
+});
+const QueueSection = ({ className, ...props }) => /* @__PURE__ */ jsx(Collapsible, {
+	className: cn("bg-card border-border border", AI_CONTAINER_RADIUS, className),
+	defaultOpen: true,
+	...props
+});
+const QueueSectionTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(CollapsibleTrigger, {
+	asChild: true,
+	children: /* @__PURE__ */ jsx("button", {
+		className: cn("flex w-full items-center text-left font-medium", AI_SPACING.xs, AI_PADDING.standard, AI_TEXT.sm, AI_HOVER.bg, AI_TRANSITION.colors, AI_FOCUS.ring, className),
+		type: "button",
+		...props
+	})
+});
+const QueueSectionLabel = ({ label, count, icon, className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	className: cn("flex items-center", AI_SPACING.xs, className),
+	...props,
+	children: [
+		icon,
+		typeof count === "number" && /* @__PURE__ */ jsx("span", {
+			className: cn("bg-muted inline-flex min-w-6 justify-center px-2 py-0.5 font-semibold", AI_NESTED_RADIUS, AI_TEXT.xs),
+			children: count
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cn("truncate font-semibold", AI_TEXT.sm),
+			children: label
+		})
+	]
+});
+const QueueSectionContent = ({ className, ...props }) => /* @__PURE__ */ jsx(CollapsibleContent, {
+	className: cn(AI_COLLAPSIBLE.content, className),
+	...props
+});
+const QueueList = ({ className, ...props }) => /* @__PURE__ */ jsx(ScrollArea, {
+	className: cn("max-h-80", className),
+	...props
+});
+const QueueItem = ({ className, children, loading = false, pending = false, ...props }) => {
+	const { hovered, ref: hoverRef } = useHover();
+	const { ref: focusRef, focused } = useFocusWithin();
+	const ref = useMergedRef(hoverRef, focusRef);
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const reducedMotion = useReducedMotion();
+	const isActive = hovered ?? focused;
+	const itemVariants = useMemo(() => ({
+		initial: {
+			opacity: 0,
+			y: reducedMotion ? 0 : 8
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			transition: reducedMotion ? { duration: 0 } : SPRING_GENTLE
+		},
+		exit: {
+			opacity: 0,
+			y: reducedMotion ? 0 : -4,
+			transition: { duration: .15 }
+		},
+		hover: reducedMotion ? {} : {
+			scale: isTouchDevice ? 1 : 1.005,
+			transition: SPRING_TACTILE
+		}
+	}), [reducedMotion, isTouchDevice]);
+	const contextValue = useMemo(() => ({ isActive }), [isActive]);
+	return /* @__PURE__ */ jsx(QueueItemContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(motion.li, {
+			ref,
+			animate: "animate",
+			className: cn("relative flex items-start gap-2 px-3 py-2", className),
+			"data-loading": loading || void 0,
+			"data-pending": pending || void 0,
+			"data-state": isActive ? "active" : "idle",
+			exit: "exit",
+			initial: "initial",
+			variants: itemVariants,
+			whileHover: "hover",
+			...props,
+			children
+		})
+	});
+};
+const QueueItemIndicator = ({ completed = false, className, ...props }) => {
+	const reducedMotion = useReducedMotion();
+	const indicatorVariants = useMemo(() => ({
+		idle: { scale: 1 },
+		completed: reducedMotion ? { scale: 1 } : {
+			scale: [
+				1,
+				1.2,
+				1
+			],
+			transition: SPRING_TACTILE
+		}
+	}), [reducedMotion]);
+	return /* @__PURE__ */ jsx(motion.span, {
+		animate: completed ? "completed" : "idle",
+		"aria-hidden": "true",
+		className: cn(queueItemIndicatorVariants({ completed }), className),
+		"data-state": completed ? "completed" : "pending",
+		initial: "idle",
+		variants: indicatorVariants,
+		...props
+	});
+};
+const QueueItemContent = ({ completed = false, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn(AI_TEXT.sm, "leading-tight", completed && "text-muted-foreground line-through", className),
+	...props
+});
+const QueueItemDescription = ({ completed = false, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("text-muted-foreground mt-1", AI_TEXT.xs, completed && "line-through opacity-70", className),
+	...props
+});
+const QueueItemActions = ({ className, children, ...props }) => {
+	const { isActive } = useQueueItemContext();
+	const reducedMotion = useReducedMotion();
+	const actionsVariants = useMemo(() => ({
+		hidden: {
+			opacity: 0,
+			x: reducedMotion ? 0 : 8
+		},
+		visible: {
+			opacity: 1,
+			x: 0,
+			transition: reducedMotion ? { duration: 0 } : SPRING_FLUID
+		}
+	}), [reducedMotion]);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: isActive ? /* @__PURE__ */ jsx(motion.div, {
+			animate: "visible",
+			className: cn("absolute top-1/2 right-2 flex -translate-y-1/2 items-center", AI_SPACING.xs, className),
+			"data-state": "visible",
+			exit: "hidden",
+			initial: "hidden",
+			variants: actionsVariants,
+			...props,
+			children
+		}) : null
+	});
+};
+const QueueItemAction = ({ className, ...props }) => {
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const reducedMotion = useReducedMotion();
+	return /* @__PURE__ */ jsx(Button, {
+		className: cn(isTouchDevice ? "h-11 min-h-[44px] min-w-[44px] px-3" : "h-9 px-3", AI_TEXT.xs, AI_FOCUS.ring, AI_TRANSITION.colors, "duration-150", AI_HOVER.both, reducedMotion ? "" : "active:scale-[0.98]", className),
+		size: "sm",
+		variant: "ghost",
+		...props
+	});
+};
+const QueueItemAttachment = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center", AI_SPACING.xs, className),
+	...props
+});
+const QueueItemImage = ({ className, alt = "", ...props }) => /* @__PURE__ */ jsx("img", {
+	alt,
+	className: cn("size-10 object-cover", AI_NESTED_RADIUS, className),
+	...props
+});
+const QueueItemFile = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("text-muted-foreground", AI_TEXT.xs, className),
+	...props
+});
+
+//#endregion
+export { Queue, QueueItem, QueueItemAction, QueueItemActions, QueueItemAttachment, QueueItemContent, QueueItemDescription, QueueItemFile, QueueItemImage, QueueItemIndicator, QueueList, QueueSection, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger, queueItemIndicatorVariants };
+//# sourceMappingURL=index.mjs.map

package/dist/components-ai-elements/queue/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ai-elements/queue/queue.tsx"],"sourcesContent":["/**\n * @fileoverview Queue Component - Premium Harmony V2\n *\n * A component for displaying queued operations and tasks in AI workflows.\n * Supports collapsible sections, scrollable content areas, and interactive items.\n *\n * Features:\n * - Premium Harmony V2 spring physics animations\n * - Touch vs desktop detection with adaptive targets\n * - Reduced motion support\n * - Semantic color tokens (no hardcoded colors)\n * - 44px minimum touch targets\n * - Data attributes for state management\n * - Focus-visible ring styles\n * - AnimatePresence for smooth enter/exit\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming\n * - CVA variants for item completion indicator\n * - Context-based hover/focus state for keyboard accessibility\n * - Mantine hooks (useHover, useFocusWithin, useMergedRef, useMediaQuery, useReducedMotion)\n * - Collapsible sections with card styling\n * - Scrollable content areas (max-h-80)\n * - Completion indicator status (success/muted)\n * - Action buttons revealed on hover/focus\n * - File/image attachment support\n * - AI design system constants integration\n *\n * @module @od-oneapp/uni-ui/components/ai-elements/queue\n * @component Queue, QueueSection, QueueSectionTrigger, QueueSectionLabel, QueueSectionContent, QueueList, QueueItem, QueueItemIndicator, QueueItemContent, QueueItemDescription, QueueItemActions, QueueItemAction, QueueItemAttachment, QueueItemImage, QueueItemFile\n *\n * @useCases\n * - Display queued AI agent tasks with completion status\n * - Show pending document processing operations\n * - List scheduled automation workflows\n * - Track multi-step AI reasoning chains\n * - Manage batch file upload queues\n * - Display research query backlogs\n * - Organize code generation task lists\n * - Show pending API requests in flight\n * - Track async operation progress\n * - Visualize task dependencies and order\n *\n * @subcomponents\n * - Queue - Root stack container\n * - QueueSection - Collapsible card section\n * - QueueSectionTrigger - Section toggle button\n * - QueueSectionLabel - Label with count badge and icon\n * - QueueSectionContent - Collapsible content area\n * - QueueList - Scrollable list container\n * - QueueItem - Individual item with context\n * - QueueItemIndicator - Completion status dot\n * - QueueItemContent - Item text content\n * - QueueItemDescription - Muted description text\n * - QueueItemActions - Hover-revealed action container\n * - QueueItemAction - Action button\n * - QueueItemAttachment - Attachment container\n * - QueueItemImage - Thumbnail image\n * - QueueItemFile - File name display\n *\n * @variants\n * - completed: true (success), false (muted)\n *\n * @example\n * <Queue>\n *   <QueueSection>\n *     <QueueSectionTrigger>\n *       <QueueSectionLabel label=\"Tasks\" count={3} />\n *     </QueueSectionTrigger>\n *     <QueueSectionContent>\n *       <QueueList>\n *         <QueueItem>\n *           <QueueItemIndicator completed />\n *           <QueueItemContent>Task 1</QueueItemContent>\n *           <QueueItemActions>\n *             <QueueItemAction>Edit</QueueItemAction>\n *           </QueueItemActions>\n *         </QueueItem>\n *       </QueueList>\n *     </QueueSectionContent>\n *   </QueueSection>\n * </Queue>\n */\n\n'use client';\n\nimport type { ComponentProps } from 'react';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport {\n  useFocusWithin,\n  useHover,\n  useMediaQuery,\n  useMergedRef,\n  useReducedMotion,\n} from '@mantine/hooks';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button } from '../../elements/atoms/button';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../../elements/molecules/collapsible';\nimport { ScrollArea } from '../../elements/organisms/scroll-area';\nimport {\n  AI_COLLAPSIBLE,\n  AI_CONTAINER_RADIUS,\n  AI_FOCUS,\n  AI_HOVER,\n  AI_NESTED_RADIUS,\n  AI_PADDING,\n  AI_SPACING,\n  AI_STACK,\n  AI_TEXT,\n  AI_TRANSITION,\n  SPRING_FLUID,\n  SPRING_GENTLE,\n  SPRING_TACTILE,\n} from '../ai-elements.constants';\n\n/**\n * Context for QueueItem hover/focus state\n * Enables keyboard-accessible action visibility (not just CSS :hover)\n */\ntype QueueItemContextValue = {\n  isActive: boolean;\n};\n\nconst QueueItemContext = createContext<QueueItemContextValue | null>(null);\n\nconst useQueueItemContext = () => {\n  const ctx = useContext(QueueItemContext);\n  if (!ctx) throw new Error('QueueItem subcomponents must be used within QueueItem');\n  return ctx;\n};\n\n/**\n * CVA variants for QueueItemIndicator completion state\n */\nexport const queueItemIndicatorVariants = cva('mt-1 inline-block size-2.5 rounded-full', {\n  variants: {\n    completed: {\n      true: 'bg-success',\n      false: 'bg-muted-foreground/50',\n    },\n  },\n  defaultVariants: {\n    completed: false,\n  },\n});\n\nexport type QueueItemIndicatorVariants = VariantProps<typeof queueItemIndicatorVariants>;\n\n// Root\nexport type QueueProps = ComponentProps<'div'>;\nexport const Queue = ({ className, ...props }: QueueProps) => (\n  <div className={cn(AI_STACK.standard, className)} {...props} />\n);\n\n// Section\nexport type QueueSectionProps = ComponentProps<typeof Collapsible>;\nexport const QueueSection = ({ className, ...props }: QueueSectionProps) => (\n  <Collapsible\n    className={cn('bg-card border-border border', AI_CONTAINER_RADIUS, className)}\n    defaultOpen\n    {...props}\n  />\n);\n\nexport type QueueSectionTriggerProps = ComponentProps<'button'>;\nexport const QueueSectionTrigger = ({ className, ...props }: QueueSectionTriggerProps) => (\n  <CollapsibleTrigger asChild>\n    <button\n      className={cn(\n        'flex w-full items-center text-left font-medium',\n        AI_SPACING.xs,\n        AI_PADDING.standard,\n        AI_TEXT.sm,\n        AI_HOVER.bg,\n        AI_TRANSITION.colors,\n        AI_FOCUS.ring,\n        className,\n      )}\n      type=\"button\"\n      {...props}\n    />\n  </CollapsibleTrigger>\n);\n\nexport type QueueSectionLabelProps = ComponentProps<'span'> & {\n  label: string;\n  count?: number;\n  icon?: React.ReactNode;\n};\nexport const QueueSectionLabel = ({\n  label,\n  count,\n  icon,\n  className,\n  ...props\n}: QueueSectionLabelProps) => (\n  <span className={cn('flex items-center', AI_SPACING.xs, className)} {...props}>\n    {icon}\n    {typeof count === 'number' && (\n      <span\n        className={cn(\n          'bg-muted inline-flex min-w-6 justify-center px-2 py-0.5 font-semibold',\n          AI_NESTED_RADIUS,\n          AI_TEXT.xs,\n        )}\n      >\n        {count}\n      </span>\n    )}\n    <span className={cn('truncate font-semibold', AI_TEXT.sm)}>{label}</span>\n  </span>\n);\n\nexport type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;\nexport const QueueSectionContent = ({ className, ...props }: QueueSectionContentProps) => (\n  <CollapsibleContent className={cn(AI_COLLAPSIBLE.content, className)} {...props} />\n);\n\n// List\nexport type QueueListProps = ComponentProps<typeof ScrollArea>;\nexport const QueueList = ({ className, ...props }: QueueListProps) => (\n  <ScrollArea className={cn('max-h-80', className)} {...props} />\n);\n\n// Items\nexport type QueueItemProps = HTMLMotionProps<'li'> & {\n  /** Whether the item is in a loading state */\n  loading?: boolean;\n  /** Whether the item is in a pending state */\n  pending?: boolean;\n};\nexport const QueueItem = ({\n  className,\n  children,\n  loading = false,\n  pending = false,\n  ...props\n}: QueueItemProps) => {\n  const { hovered, ref: hoverRef } = useHover();\n  const { ref: focusRef, focused } = useFocusWithin();\n  const ref = useMergedRef(hoverRef, focusRef);\n\n  // Premium Harmony V2: Touch vs desktop detection\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n  const reducedMotion = useReducedMotion();\n\n  const isActive = hovered ?? focused;\n\n  // Premium Harmony V2: Memoized animation variants\n  const itemVariants = useMemo(\n    () => ({\n      initial: { opacity: 0, y: reducedMotion ? 0 : 8 },\n      animate: {\n        opacity: 1,\n        y: 0,\n        transition: reducedMotion ? { duration: 0 } : SPRING_GENTLE,\n      },\n      exit: { opacity: 0, y: reducedMotion ? 0 : -4, transition: { duration: 0.15 } },\n      hover: reducedMotion\n        ? {}\n        : {\n            scale: isTouchDevice ? 1 : 1.005,\n            transition: SPRING_TACTILE,\n          },\n    }),\n    [reducedMotion, isTouchDevice],\n  );\n\n  const contextValue = useMemo<QueueItemContextValue>(() => ({ isActive }), [isActive]);\n\n  return (\n    <QueueItemContext.Provider value={contextValue}>\n      <motion.li\n        ref={ref}\n        animate=\"animate\"\n        className={cn('relative flex items-start gap-2 px-3 py-2', className)}\n        // Premium Harmony V2: Data attributes for state\n        data-loading={loading || undefined}\n        data-pending={pending || undefined}\n        data-state={isActive ? 'active' : 'idle'}\n        exit=\"exit\"\n        initial=\"initial\"\n        variants={itemVariants}\n        whileHover=\"hover\"\n        {...props}\n      >\n        {children}\n      </motion.li>\n    </QueueItemContext.Provider>\n  );\n};\n\nexport type QueueItemIndicatorProps = HTMLMotionProps<'span'> & { completed?: boolean };\nexport const QueueItemIndicator = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemIndicatorProps) => {\n  const reducedMotion = useReducedMotion();\n\n  // Premium Harmony V2: Memoized animation variants\n  const indicatorVariants = useMemo(\n    () => ({\n      idle: { scale: 1 },\n      completed: reducedMotion\n        ? { scale: 1 }\n        : {\n            scale: [1, 1.2, 1],\n            transition: SPRING_TACTILE,\n          },\n    }),\n    [reducedMotion],\n  );\n\n  return (\n    <motion.span\n      animate={completed ? 'completed' : 'idle'}\n      aria-hidden=\"true\"\n      className={cn(queueItemIndicatorVariants({ completed }), className)}\n      // Premium Harmony V2: Data attributes for state\n      data-state={completed ? 'completed' : 'pending'}\n      initial=\"idle\"\n      variants={indicatorVariants}\n      {...(props as any)}\n    />\n  );\n};\n\nexport type QueueItemContentProps = ComponentProps<'span'> & { completed?: boolean };\nexport const QueueItemContent = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemContentProps) => (\n  <span\n    className={cn(\n      AI_TEXT.sm,\n      'leading-tight',\n      completed && 'text-muted-foreground line-through',\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type QueueItemDescriptionProps = ComponentProps<'div'> & { completed?: boolean };\nexport const QueueItemDescription = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemDescriptionProps) => (\n  <div\n    className={cn(\n      'text-muted-foreground mt-1',\n      AI_TEXT.xs,\n      completed && 'line-through opacity-70',\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type QueueItemActionsProps = HTMLMotionProps<'div'>;\nexport const QueueItemActions = ({ className, children, ...props }: QueueItemActionsProps) => {\n  const { isActive } = useQueueItemContext();\n  const reducedMotion = useReducedMotion();\n\n  // Premium Harmony V2: Memoized animation variants\n  const actionsVariants = useMemo(\n    () => ({\n      hidden: { opacity: 0, x: reducedMotion ? 0 : 8 },\n      visible: {\n        opacity: 1,\n        x: 0,\n        transition: reducedMotion ? { duration: 0 } : SPRING_FLUID,\n      },\n    }),\n    [reducedMotion],\n  );\n\n  return (\n    <AnimatePresence initial={false}>\n      {isActive ? (\n        <motion.div\n          animate=\"visible\"\n          className={cn(\n            'absolute top-1/2 right-2 flex -translate-y-1/2 items-center',\n            AI_SPACING.xs,\n            className,\n          )}\n          // Premium Harmony V2: Data attributes for state\n          data-state=\"visible\"\n          exit=\"hidden\"\n          initial=\"hidden\"\n          variants={actionsVariants}\n          {...(props as any)}\n        >\n          {children}\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport type QueueItemActionProps = Omit<ComponentProps<typeof Button>, 'variant' | 'size'>;\nexport const QueueItemAction = ({ className, ...props }: QueueItemActionProps) => {\n  // Premium Harmony V2: Touch vs desktop detection for adaptive sizing\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n  const reducedMotion = useReducedMotion();\n\n  return (\n    <Button\n      className={cn(\n        // Premium Harmony V2: Touch-friendly sizing (44px minimum)\n        isTouchDevice ? 'h-11 min-h-[44px] min-w-[44px] px-3' : 'h-9 px-3',\n        AI_TEXT.xs,\n        // Premium Harmony V2: Focus ring styles\n        AI_FOCUS.ring,\n        // Transition for micromoments\n        AI_TRANSITION.colors,\n        'duration-150',\n        // Hover state\n        AI_HOVER.both,\n        // Premium Harmony V2: Active state feedback (respects reduced motion)\n        reducedMotion ? '' : 'active:scale-[0.98]',\n        className,\n      )}\n      size=\"sm\"\n      variant=\"ghost\"\n      {...props}\n    />\n  );\n};\n\n// Attachments\nexport type QueueItemAttachmentProps = ComponentProps<'div'>;\nexport const QueueItemAttachment = ({ className, ...props }: QueueItemAttachmentProps) => (\n  <div className={cn('flex items-center', AI_SPACING.xs, className)} {...props} />\n);\n\nexport type QueueItemImageProps = ComponentProps<'img'>;\nexport const QueueItemImage = ({ className, alt = '', ...props }: QueueItemImageProps) => (\n  <img alt={alt} className={cn('size-10 object-cover', AI_NESTED_RADIUS, className)} {...props} />\n);\n\nexport type QueueItemFileProps = ComponentProps<'span'>;\nexport const QueueItemFile = ({ className, ...props }: QueueItemFileProps) => (\n  <span className={cn('text-muted-foreground', AI_TEXT.xs, className)} {...props} />\n);\n"],"mappings":"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"}

package/dist/components-ai-elements/reasoning/index.d.mts

@@ -0,0 +1,42 @@
+
+import { n as CollapsibleContent, o as CollapsibleTrigger, t as Collapsible } from "../../collapsible-CRgTpRfr.mjs";
+import "../../components-elements-collapsible.mjs";
+import * as react from "react";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ai-elements/reasoning/reasoning.d.ts
+type ReasoningProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+declare const Reasoning: react.MemoExoticComponent<({
+  className,
+  isStreaming,
+  open,
+  defaultOpen,
+  onOpenChange,
+  duration: durationProp,
+  children,
+  ...props
+}: ReasoningProps) => react_jsx_runtime0.JSX.Element>;
+type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const ReasoningTrigger: react.MemoExoticComponent<({
+  className,
+  children,
+  ...props
+}: ReasoningTriggerProps) => react_jsx_runtime0.JSX.Element>;
+type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
+  children: string;
+};
+declare const ReasoningContent: react.MemoExoticComponent<({
+  className,
+  children,
+  ...props
+}: ReasoningContentProps) => react_jsx_runtime0.JSX.Element>;
+//#endregion
+export { Reasoning, ReasoningContent, ReasoningContentProps, ReasoningProps, ReasoningTrigger, ReasoningTriggerProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/components-ai-elements/reasoning/index.mjs

@@ -0,0 +1,241 @@
+'use client';
+import { t as cn } from "../../utils-D2bGp2p_.mjs";
+import { r as SPRING_FLUID } from "../../motion-zelaDelJ.mjs";
+import { AI_BODY, AI_COLLAPSIBLE, AI_FOCUS, AI_HOVER, AI_ICON, AI_SPACING, AI_TEXT, AI_TRANSITION } from "../../components-ai-elements-constants.mjs";
+import { i as CollapsibleTrigger, n as CollapsibleContent, t as Collapsible } from "../../collapsible-CXy4T04n.mjs";
+import { t as Shimmer } from "../../shimmer-BLRAD4VL.mjs";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useMediaQuery, useReducedMotion, useScrollIntoView, useTimeout, useUncontrolled } from "@mantine/hooks";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Streamdown } from "streamdown";
+
+//#region src/components/ai-elements/reasoning/reasoning.tsx
+/**
+* @fileoverview Reasoning Component - Premium Harmony V2
+*
+* A component for displaying AI reasoning processes and thought chains.
+* Supports streaming content, collapsible sections, and duration tracking.
+*
+* Features:
+* - Premium Harmony V2 motion system (SPRING_TACTILE, SPRING_FLUID, SPRING_GENTLE)
+* - Touch vs desktop detection (44px touch targets)
+* - Reduced motion support with graceful fallbacks
+* - Semantic color tokens (no hardcoded colors)
+* - Data attributes for state management
+* - AnimatePresence for smooth enter/exit
+* - Context-based streaming/open state
+* - Mantine hooks (useReducedMotion, useScrollIntoView, useTimeout, useUncontrolled, useMediaQuery)
+* - Collapsible with auto-close after streaming
+* - Duration tracking for "Thought for X seconds"
+* - Brain icon with pulse animation during thinking
+* - Shimmer text effect for streaming state
+* - Streamdown markdown rendering
+* - AI design system constants integration
+*
+* @module @od-oneapp/uni-ui/components/ai-elements/reasoning
+* @component Reasoning, ReasoningTrigger, ReasoningContent
+*
+* @useCases
+* - Displaying AI thought processes during inference
+* - Showing step-by-step reasoning chains
+* - Streaming live reasoning updates
+* - Tracking and displaying reasoning duration
+* - Collapsible reasoning sections with auto-close
+* - Accessibility-first reasoning visualization
+* - Touch-optimized reasoning controls
+*
+* @subcomponents
+* - Reasoning - Root collapsible with context provider
+* - ReasoningTrigger - Toggle button with brain icon
+* - ReasoningContent - Streamdown markdown content
+*
+* @example
+* <Reasoning isStreaming={isStreaming} duration={duration}>
+*   <ReasoningTrigger />
+*   <ReasoningContent>{reasoningText}</ReasoningContent>
+* </Reasoning>
+*/
+const ReasoningContext = createContext(null);
+const useReasoning = () => {
+	const context = useContext(ReasoningContext);
+	if (!context) throw new Error("Reasoning components must be used within Reasoning");
+	return context;
+};
+const AUTO_CLOSE_DELAY = 1e3;
+const MS_IN_S = 1e3;
+const Reasoning = memo(({ className, isStreaming = false, open, defaultOpen = true, onOpenChange, duration: durationProp, children, ...props }) => {
+	const [isOpen, setIsOpen] = useUncontrolled({
+		value: open,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange,
+		finalValue: false
+	});
+	const [duration, setDuration] = useUncontrolled({
+		value: durationProp,
+		defaultValue: void 0
+	});
+	const reducedMotion = useReducedMotion() ?? false;
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	const { scrollIntoView } = useScrollIntoView({
+		offset: 60,
+		duration: reducedMotion ? 0 : 300
+	});
+	const [hasAutoClosed, setHasAutoClosed] = useState(false);
+	const startTimeRef = useRef(null);
+	useEffect(() => {
+		if (isStreaming && startTimeRef.current === null) startTimeRef.current = Date.now();
+		else if (!isStreaming && startTimeRef.current !== null) {
+			setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+			startTimeRef.current = null;
+		}
+	}, [isStreaming, setDuration]);
+	const { start: startAutoClose, clear: cancelAutoClose } = useTimeout(() => {
+		setIsOpen(false);
+		setHasAutoClosed(true);
+	}, AUTO_CLOSE_DELAY);
+	useEffect(() => {
+		if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+			startAutoClose();
+			return cancelAutoClose;
+		}
+	}, [
+		isStreaming,
+		isOpen,
+		defaultOpen,
+		hasAutoClosed,
+		startAutoClose,
+		cancelAutoClose
+	]);
+	const handleOpenChange = useCallback((newOpen) => {
+		setIsOpen(newOpen);
+	}, [setIsOpen]);
+	const contextValue = useMemo(() => ({
+		isStreaming,
+		isOpen,
+		setIsOpen,
+		duration,
+		reducedMotion,
+		isTouchDevice,
+		scrollIntoView
+	}), [
+		isStreaming,
+		isOpen,
+		setIsOpen,
+		duration,
+		reducedMotion,
+		isTouchDevice,
+		scrollIntoView
+	]);
+	const motionVariants = useMemo(() => ({
+		initial: reducedMotion ? {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		} : {
+			opacity: 0,
+			scale: .98,
+			y: 10
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: reducedMotion ? {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		} : {
+			opacity: 0,
+			scale: .98,
+			y: -10
+		}
+	}), [reducedMotion]);
+	const motionTransition = useMemo(() => reducedMotion ? { duration: 0 } : SPRING_FLUID, [reducedMotion]);
+	return /* @__PURE__ */ jsx(ReasoningContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "wait",
+			children: /* @__PURE__ */ jsx(motion.div, {
+				initial: "initial",
+				animate: "animate",
+				exit: "exit",
+				variants: motionVariants,
+				transition: motionTransition,
+				"data-state": isOpen ? "open" : "closed",
+				"data-streaming": isStreaming ? "true" : "false",
+				children: /* @__PURE__ */ jsx(Collapsible, {
+					className: cn("not-prose mb-4", className),
+					onOpenChange: handleOpenChange,
+					open: isOpen,
+					...props,
+					children
+				})
+			})
+		})
+	});
+});
+const getThinkingMessage = (isStreaming, duration) => {
+	if (isStreaming || duration === 0) return /* @__PURE__ */ jsx(Shimmer, {
+		duration: 1,
+		children: "Thinking..."
+	});
+	if (duration === void 0) return /* @__PURE__ */ jsx("p", { children: "Thought for a few seconds" });
+	return /* @__PURE__ */ jsxs("p", { children: [
+		"Thought for ",
+		duration,
+		" seconds"
+	] });
+};
+const BRAIN_PULSE_CLASSNAME = "animate-brain-pulse";
+const ReasoningTrigger = memo(({ className, children, ...props }) => {
+	const { isStreaming, isOpen, duration, reducedMotion, isTouchDevice } = useReasoning();
+	return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		className: cn(AI_BODY.secondary, AI_HOVER.text, "flex w-full items-center", AI_SPACING.xs, AI_TEXT.sm, isTouchDevice && "min-h-[44px]", !reducedMotion && AI_TRANSITION.colors, "duration-150", AI_FOCUS.ring, className),
+		"data-state": isOpen ? "open" : "closed",
+		"data-streaming": isStreaming ? "true" : "false",
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(BrainIcon, {
+				className: cn(AI_ICON.md, isStreaming && !reducedMotion && BRAIN_PULSE_CLASSNAME),
+				"aria-hidden": "true"
+			}),
+			getThinkingMessage(isStreaming, duration),
+			/* @__PURE__ */ jsx(ChevronDownIcon, {
+				className: cn(AI_ICON.md, !reducedMotion && AI_TRANSITION.transform, isOpen ? "rotate-180" : "rotate-0"),
+				"aria-hidden": "true"
+			})
+		] })
+	});
+});
+const ReasoningContent = memo(({ className, children, ...props }) => {
+	const { reducedMotion, isStreaming, scrollIntoView, isOpen } = useReasoning();
+	const contentRef = useRef(null);
+	useEffect(() => {
+		if (isStreaming && contentRef.current) scrollIntoView();
+	}, [
+		isStreaming,
+		children,
+		scrollIntoView
+	]);
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		ref: contentRef,
+		className: cn(AI_BODY.secondary, "mt-4 outline-none", AI_TEXT.sm, !reducedMotion && AI_COLLAPSIBLE.content, className),
+		"data-state": isOpen ? "open" : "closed",
+		"data-streaming": isStreaming ? "true" : "false",
+		...props,
+		children: /* @__PURE__ */ jsx(Streamdown, {
+			...props,
+			children
+		})
+	});
+});
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
+
+//#endregion
+export { Reasoning, ReasoningContent, ReasoningTrigger };
+//# sourceMappingURL=index.mjs.map

package/dist/components-ai-elements/reasoning/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ai-elements/reasoning/reasoning.tsx"],"sourcesContent":["/**\n * @fileoverview Reasoning Component - Premium Harmony V2\n *\n * A component for displaying AI reasoning processes and thought chains.\n * Supports streaming content, collapsible sections, and duration tracking.\n *\n * Features:\n * - Premium Harmony V2 motion system (SPRING_TACTILE, SPRING_FLUID, SPRING_GENTLE)\n * - Touch vs desktop detection (44px touch targets)\n * - Reduced motion support with graceful fallbacks\n * - Semantic color tokens (no hardcoded colors)\n * - Data attributes for state management\n * - AnimatePresence for smooth enter/exit\n * - Context-based streaming/open state\n * - Mantine hooks (useReducedMotion, useScrollIntoView, useTimeout, useUncontrolled, useMediaQuery)\n * - Collapsible with auto-close after streaming\n * - Duration tracking for \"Thought for X seconds\"\n * - Brain icon with pulse animation during thinking\n * - Shimmer text effect for streaming state\n * - Streamdown markdown rendering\n * - AI design system constants integration\n *\n * @module @od-oneapp/uni-ui/components/ai-elements/reasoning\n * @component Reasoning, ReasoningTrigger, ReasoningContent\n *\n * @useCases\n * - Displaying AI thought processes during inference\n * - Showing step-by-step reasoning chains\n * - Streaming live reasoning updates\n * - Tracking and displaying reasoning duration\n * - Collapsible reasoning sections with auto-close\n * - Accessibility-first reasoning visualization\n * - Touch-optimized reasoning controls\n *\n * @subcomponents\n * - Reasoning - Root collapsible with context provider\n * - ReasoningTrigger - Toggle button with brain icon\n * - ReasoningContent - Streamdown markdown content\n *\n * @example\n * <Reasoning isStreaming={isStreaming} duration={duration}>\n *   <ReasoningTrigger />\n *   <ReasoningContent>{reasoningText}</ReasoningContent>\n * </Reasoning>\n */\n\n'use client';\n\nimport type { ComponentProps } from 'react';\nimport {\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  useMediaQuery,\n  useReducedMotion,\n  useScrollIntoView,\n  useTimeout,\n  useUncontrolled,\n} from '@mantine/hooks';\nimport { BrainIcon, ChevronDownIcon } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { Streamdown } from 'streamdown';\n\nimport { cn } from '../../../lib/utils';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../../elements/molecules/collapsible';\nimport {\n  AI_BODY,\n  AI_COLLAPSIBLE,\n  AI_FOCUS,\n  AI_HOVER,\n  AI_ICON,\n  AI_SPACING,\n  AI_TEXT,\n  AI_TRANSITION,\n  SPRING_FLUID,\n} from '../ai-elements.constants';\nimport { Shimmer } from '../shimmer';\n\ntype ReasoningContextValue = {\n  isStreaming: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  duration: number | undefined;\n  /** Whether user prefers reduced motion */\n  reducedMotion: boolean;\n  /** Whether user is on a touch device (44px touch targets) */\n  isTouchDevice: boolean;\n  /** Scroll the reasoning content into view */\n  scrollIntoView: () => void;\n};\n\nconst ReasoningContext = createContext<ReasoningContextValue | null>(null);\n\nconst useReasoning = () => {\n  const context = useContext(ReasoningContext);\n  if (!context) {\n    throw new Error('Reasoning components must be used within Reasoning');\n  }\n  return context;\n};\n\nexport type ReasoningProps = ComponentProps<typeof Collapsible> & {\n  isStreaming?: boolean;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  duration?: number;\n};\n\nconst AUTO_CLOSE_DELAY = 1000;\nconst MS_IN_S = 1000;\n\nexport const Reasoning = memo(\n  ({\n    className,\n    isStreaming = false,\n    open,\n    defaultOpen = true,\n    onOpenChange,\n    duration: durationProp,\n    children,\n    ...props\n  }: ReasoningProps) => {\n    // Use Mantine's useUncontrolled for controlled/uncontrolled pattern\n    const [isOpen, setIsOpen] = useUncontrolled({\n      value: open,\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n      finalValue: false,\n    });\n    const [duration, setDuration] = useUncontrolled({\n      value: durationProp,\n      defaultValue: undefined,\n    });\n\n    // Use Mantine's useReducedMotion to respect user accessibility preferences\n    const reducedMotion = useReducedMotion() ?? false;\n\n    // Premium Harmony V2: Touch vs desktop detection (44px touch targets)\n    const isTouchDevice = useMediaQuery('(pointer: coarse)') ?? false;\n\n    // Use Mantine's useScrollIntoView for smooth auto-scrolling during streaming\n    const { scrollIntoView } = useScrollIntoView<HTMLDivElement>({\n      offset: 60, // Account for sticky headers\n      duration: reducedMotion ? 0 : 300, // Respect reduced motion preference\n    });\n\n    const [hasAutoClosed, setHasAutoClosed] = useState(false);\n    const startTimeRef = useRef<number | null>(null);\n\n    // Track duration when streaming starts and ends\n    useEffect(() => {\n      if (isStreaming && startTimeRef.current === null) {\n        startTimeRef.current = Date.now();\n      } else if (!isStreaming && startTimeRef.current !== null) {\n        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));\n        startTimeRef.current = null;\n      }\n    }, [isStreaming, setDuration]);\n\n    // Mantine's useTimeout for auto-close after streaming ends\n    const { start: startAutoClose, clear: cancelAutoClose } = useTimeout(() => {\n      setIsOpen(false);\n      setHasAutoClosed(true);\n    }, AUTO_CLOSE_DELAY);\n\n    // Auto-close when streaming ends (once only)\n    useEffect(() => {\n      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {\n        startAutoClose();\n        return cancelAutoClose;\n      }\n      return;\n    }, [isStreaming, isOpen, defaultOpen, hasAutoClosed, startAutoClose, cancelAutoClose]);\n\n    // Memoize handleOpenChange to prevent unnecessary re-renders\n    const handleOpenChange = useCallback(\n      (newOpen: boolean) => {\n        setIsOpen(newOpen);\n      },\n      [setIsOpen],\n    );\n\n    const contextValue = useMemo(\n      () => ({\n        isStreaming,\n        isOpen,\n        setIsOpen,\n        duration,\n        reducedMotion,\n        isTouchDevice,\n        scrollIntoView,\n      }),\n      [isStreaming, isOpen, setIsOpen, duration, reducedMotion, isTouchDevice, scrollIntoView],\n    );\n\n    // Premium Harmony V2: Memoized animation variants with spring physics\n    const motionVariants = useMemo(\n      () => ({\n        initial: reducedMotion\n          ? { opacity: 1, scale: 1, y: 0 }\n          : { opacity: 0, scale: 0.98, y: 10 },\n        animate: { opacity: 1, scale: 1, y: 0 },\n        exit: reducedMotion ? { opacity: 1, scale: 1, y: 0 } : { opacity: 0, scale: 0.98, y: -10 },\n      }),\n      [reducedMotion],\n    );\n\n    const motionTransition = useMemo(\n      () => (reducedMotion ? { duration: 0 } : SPRING_FLUID),\n      [reducedMotion],\n    );\n\n    return (\n      <ReasoningContext.Provider value={contextValue}>\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            initial=\"initial\"\n            animate=\"animate\"\n            exit=\"exit\"\n            variants={motionVariants}\n            transition={motionTransition}\n            data-state={isOpen ? 'open' : 'closed'}\n            data-streaming={isStreaming ? 'true' : 'false'}\n          >\n            <Collapsible\n              className={cn('not-prose mb-4', className)}\n              onOpenChange={handleOpenChange}\n              open={isOpen}\n              {...props}\n            >\n              {children}\n            </Collapsible>\n          </motion.div>\n        </AnimatePresence>\n      </ReasoningContext.Provider>\n    );\n  },\n);\n\nexport type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger>;\n\nconst getThinkingMessage = (isStreaming: boolean, duration?: number) => {\n  if (isStreaming || duration === 0) {\n    return <Shimmer duration={1}>Thinking...</Shimmer>;\n  }\n  if (duration === undefined) {\n    return <p>Thought for a few seconds</p>;\n  }\n  return <p>Thought for {duration} seconds</p>;\n};\n\n// Brain pulse animation when streaming/thinking\nconst BRAIN_PULSE_CLASSNAME = 'animate-brain-pulse';\n\nexport const ReasoningTrigger = memo(({ className, children, ...props }: ReasoningTriggerProps) => {\n  const { isStreaming, isOpen, duration, reducedMotion, isTouchDevice } = useReasoning();\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        // Premium Harmony V2: Semantic color tokens instead of hardcoded colors\n        AI_BODY.secondary,\n        AI_HOVER.text,\n        'flex w-full items-center',\n        AI_SPACING.xs,\n        AI_TEXT.sm,\n        // Premium Harmony V2: 44px minimum touch targets for touch devices\n        isTouchDevice && 'min-h-[44px]',\n        // Only apply transition when user doesn't prefer reduced motion\n        !reducedMotion && AI_TRANSITION.colors,\n        'duration-150',\n        AI_FOCUS.ring,\n        className,\n      )}\n      data-state={isOpen ? 'open' : 'closed'}\n      data-streaming={isStreaming ? 'true' : 'false'}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <BrainIcon\n            className={cn(\n              AI_ICON.md,\n              // Pulse animation while streaming (respects reduced motion)\n              isStreaming && !reducedMotion && BRAIN_PULSE_CLASSNAME,\n            )}\n            aria-hidden=\"true\"\n          />\n          {getThinkingMessage(isStreaming, duration)}\n          <ChevronDownIcon\n            className={cn(\n              AI_ICON.md,\n              // Only apply transition when user doesn't prefer reduced motion\n              !reducedMotion && AI_TRANSITION.transform,\n              isOpen ? 'rotate-180' : 'rotate-0',\n            )}\n            aria-hidden=\"true\"\n          />\n        </>\n      )}\n    </CollapsibleTrigger>\n  );\n});\n\nexport type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {\n  children: string;\n};\n\nexport const ReasoningContent = memo(({ className, children, ...props }: ReasoningContentProps) => {\n  const { reducedMotion, isStreaming, scrollIntoView, isOpen } = useReasoning();\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // Auto-scroll to keep reasoning content visible during streaming\n  useEffect(() => {\n    if (isStreaming && contentRef.current) {\n      scrollIntoView();\n    }\n  }, [isStreaming, children, scrollIntoView]);\n\n  return (\n    <CollapsibleContent\n      ref={contentRef}\n      className={cn(\n        // Premium Harmony V2: Semantic color tokens instead of hardcoded colors\n        AI_BODY.secondary,\n        'mt-4 outline-none',\n        AI_TEXT.sm,\n        // Only apply animations when user doesn't prefer reduced motion\n        !reducedMotion && AI_COLLAPSIBLE.content,\n        className,\n      )}\n      data-state={isOpen ? 'open' : 'closed'}\n      data-streaming={isStreaming ? 'true' : 'false'}\n      {...props}\n    >\n      <Streamdown {...props}>{children}</Streamdown>\n    </CollapsibleContent>\n  );\n});\n\nReasoning.displayName = 'Reasoning';\nReasoningTrigger.displayName = 'ReasoningTrigger';\nReasoningContent.displayName = 'ReasoningContent';\n"],"mappings":"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"}

package/dist/components-ai-elements/shimmer/index.d.mts

@@ -0,0 +1,23 @@
+
+import * as react from "react";
+import { ElementType } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ai-elements/shimmer/shimmer.d.ts
+type TextShimmerProps = {
+  children: string;
+  as?: ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+};
+declare const Shimmer: react.MemoExoticComponent<({
+  children,
+  as: Component,
+  className,
+  duration,
+  spread
+}: TextShimmerProps) => react_jsx_runtime0.JSX.Element>;
+//#endregion
+export { Shimmer, TextShimmerProps };
+//# sourceMappingURL=index.d.mts.map