@od-oneapp/uni-ui 2026.1.1301

package/dist/components-ai-elements/web-preview/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ai-elements/web-preview/web-preview.tsx"],"sourcesContent":["/**\n * @fileoverview WebPreview Component - Premium Harmony V2\n *\n * A comprehensive web preview component for displaying and navigating web content\n * with browser-like controls, viewport switching, and console integration.\n *\n * Features:\n * - Premium Harmony V2 spring physics (SPRING_TACTILE, SPRING_FLUID, SPRING_GENTLE)\n * - Touch vs desktop detection with useMediaQuery\n * - Reduced motion support with useReducedMotion\n * - ES2023 syntax with useCallback, useMemo optimization\n * - Tailwind v4 CSS-first theming\n * - CVA variants for console log level styling\n * - Context-based state management for all preview controls\n * - Mantine hooks (useDebouncedValue, useDisclosure, useFullscreen, useInputState, useMergedRef, useNetwork, useMediaQuery, useReducedMotion)\n * - URL navigation with history (back/forward)\n * - Viewport switching (desktop, tablet, mobile)\n * - Native Fullscreen API with CSS fallback\n * - Console panel for debugging logs\n * - Network status indicator (offline/slow connection)\n * - Sandboxed iframe for security\n * - Debounced URL input for auto-navigation\n * - Device toggle controls\n * - Example URL selector\n * - AI design system constants integration\n * - 44px minimum touch targets for accessibility\n * - Data attributes for state management\n * - Semantic color tokens (no hardcoded colors)\n * - AnimatePresence for smooth conditional rendering\n * - Focus-visible ring styles\n *\n * @module @od-oneapp/uni-ui/components/ai-elements/web-preview\n * @component WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewBackButton, WebPreviewForwardButton, WebPreviewFullscreenToggle, WebPreviewUrl, WebPreviewBody, WebPreviewConsole, WebPreviewDeviceToggle, WebPreviewExampleSelect, WebPreviewNetworkStatus\n *\n * @useCases\n * - Web content preview in development tools\n * - Responsive design testing with viewport switching\n * - Browser simulation for documentation\n * - Embedded web viewer with navigation controls\n * - Debug console integration for web content\n * - Network status monitoring for preview loading\n * - Fullscreen presentation mode for demos\n * - Example URL quick selection for testing\n * - Sandboxed iframe security for untrusted content\n * - History-based navigation (back/forward)\n *\n * @subcomponents\n * - WebPreview - Root container with context provider\n * - WebPreviewNavigation - Navigation toolbar container\n * - WebPreviewNavigationButton - Generic nav button with tooltip\n * - WebPreviewBackButton - History back button\n * - WebPreviewForwardButton - History forward button\n * - WebPreviewFullscreenToggle - Fullscreen toggle button\n * - WebPreviewUrl - URL input with debounced navigation\n * - WebPreviewBody - Sandboxed iframe with viewport sizing\n * - WebPreviewConsole - Collapsible console log panel\n * - WebPreviewDeviceToggle - Desktop/tablet/mobile switcher\n * - WebPreviewExampleSelect - Example URL dropdown\n * - WebPreviewNetworkStatus - Offline/slow connection indicator\n *\n * @variants\n * - level: log, warn, error (console logs)\n *\n * @example\n * <WebPreview defaultUrl=\"https://example.com\">\n *   <WebPreviewNavigation>\n *     <WebPreviewBackButton />\n *     <WebPreviewForwardButton />\n *     <WebPreviewUrl />\n *     <WebPreviewDeviceToggle />\n *     <WebPreviewFullscreenToggle />\n *     <WebPreviewNetworkStatus />\n *   </WebPreviewNavigation>\n *   <WebPreviewBody />\n *   <WebPreviewConsole logs={consoleLogs} />\n * </WebPreview>\n */\n\n'use client';\n\nimport type { ComponentProps, ReactNode, RefObject } from 'react';\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  useDebouncedValue,\n  useDisclosure,\n  useFullscreen,\n  useInputState,\n  useMediaQuery,\n  useMergedRef,\n  useNetwork,\n  useReducedMotion,\n} from '@mantine/hooks';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ChevronDownIcon,\n  GlobeIcon,\n  LockIcon,\n  MaximizeIcon,\n  MinimizeIcon,\n  MonitorIcon,\n  SmartphoneIcon,\n  TabletIcon,\n  WifiOffIcon,\n} from 'lucide-react';\nimport { AnimatePresence, motion } 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 {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../../elements/organisms/tooltip';\nimport { Input } from '../../forms/input';\nimport {\n  AI_COLLAPSIBLE,\n  AI_CONTAINER_RADIUS,\n  AI_FOCUS,\n  AI_ICON,\n  AI_SPACING,\n  AI_TRANSITION,\n  SPRING_FLUID,\n  SPRING_GENTLE,\n  SPRING_TACTILE,\n  SPRING_WEIGHTED,\n} from '../ai-elements.constants';\n\n/**\n * CVA variants for console log level styling with DevTools aesthetic\n */\nexport const consoleLogVariants = cva(\n  'flex items-start gap-2 rounded-sm border-l-2 px-2 py-1.5 font-mono text-xs',\n  {\n    variants: {\n      level: {\n        log: 'border-l-muted-foreground/30 bg-transparent text-foreground',\n        warn: 'border-l-warning bg-warning/5 text-warning-foreground dark:text-warning',\n        error: 'border-l-destructive bg-destructive/5 text-destructive',\n      },\n    },\n    defaultVariants: {\n      level: 'log',\n    },\n  },\n);\n\nexport type ConsoleLogVariants = VariantProps<typeof consoleLogVariants>;\n\nexport type WebPreviewContextValue = {\n  url: string;\n  setUrl: (url: string) => void;\n  consoleOpen: boolean;\n  setConsoleOpen: (open: boolean) => void;\n  goBack: () => void;\n  goForward: () => void;\n  canGoBack: boolean;\n  canGoForward: boolean;\n  viewport: 'desktop' | 'tablet' | 'mobile';\n  setViewport: (viewport: 'desktop' | 'tablet' | 'mobile') => void;\n  isFullscreen: boolean;\n  setIsFullscreen: (fullscreen: boolean) => void;\n  toggle: () => void;\n  /** Ref for the fullscreen container element */\n  containerRef: RefObject<HTMLDivElement | null>;\n  /** Network status information */\n  network: {\n    online: boolean;\n    effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';\n    downlink?: number;\n    rtt?: number;\n  };\n  /** Touch device detection */\n  isTouchDevice: boolean;\n  /** Reduced motion preference */\n  prefersReducedMotion: boolean;\n  /** Loading state for URL navigation */\n  isLoading: boolean;\n  /** Set loading state */\n  setIsLoading: (loading: boolean) => void;\n};\n\nconst WebPreviewContext = createContext<WebPreviewContextValue | null>(null);\n\nconst useWebPreview = () => {\n  const context = useContext(WebPreviewContext);\n  if (!context) {\n    throw new Error('WebPreview components must be used within a WebPreview');\n  }\n  return context;\n};\n\nexport type WebPreviewProps = ComponentProps<'div'> & {\n  defaultUrl?: string;\n  onUrlChange?: (url: string) => void;\n};\n\nexport const WebPreview = ({\n  className,\n  children,\n  defaultUrl = '',\n  onUrlChange,\n  ...props\n}: WebPreviewProps) => {\n  const [history, setHistory] = useState<string[]>(defaultUrl ? [defaultUrl] : []);\n  const [historyIndex, setHistoryIndex] = useState<number>(defaultUrl ? 0 : -1);\n  const url: string = historyIndex >= 0 ? (history[historyIndex] ?? '') : '';\n  // Use Mantine's useDisclosure for boolean console open/close state\n  const [consoleOpen, { open: openConsole, close: closeConsole }] = useDisclosure(false);\n  const [viewport, setViewport] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');\n  // Global loading state for URL navigation progress bar\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Use Mantine's useFullscreen for native Fullscreen API support\n  // Falls back to CSS positioning when Fullscreen API is unavailable\n  const {\n    ref: fullscreenRef,\n    toggle: toggleFullscreen,\n    fullscreen: isFullscreen,\n  } = useFullscreen();\n\n  // Local ref for when fullscreen API is not available\n  const localRef = useRef<HTMLDivElement>(null);\n  // Merge refs for fullscreen and local access\n  const containerRef = useMergedRef(fullscreenRef, localRef);\n\n  // Use Mantine's useNetwork to track network status\n  const networkStatus = useNetwork();\n\n  // Premium Harmony V2: Touch device detection\n  const isTouchDevice = useMediaQuery('(pointer: coarse)') ?? false;\n\n  // Premium Harmony V2: Reduced motion support\n  const prefersReducedMotion = useReducedMotion();\n\n  // Wrapper functions to match expected API signature\n  const setConsoleOpen = useCallback(\n    (open: boolean) => {\n      if (open) {\n        openConsole();\n      } else {\n        closeConsole();\n      }\n    },\n    [openConsole, closeConsole],\n  );\n\n  // setIsFullscreen uses toggle since useFullscreen doesn't provide open/close separately\n  const setIsFullscreen = useCallback(\n    (fullscreen: boolean) => {\n      if (fullscreen !== isFullscreen) {\n        void toggleFullscreen();\n      }\n    },\n    [isFullscreen, toggleFullscreen],\n  );\n\n  const handleUrlChange = useCallback(\n    (newUrl: string) => {\n      setHistory(prev => {\n        const next = prev.slice(0, historyIndex + 1);\n        next.push(newUrl);\n        return next;\n      });\n      setHistoryIndex(idx => idx + 1);\n      onUrlChange?.(newUrl);\n    },\n    [historyIndex, onUrlChange],\n  );\n\n  const goBack = useCallback(() => {\n    setHistoryIndex(idx => (idx > 0 ? idx - 1 : idx));\n  }, []);\n\n  const goForward = useCallback(() => {\n    setHistoryIndex(idx => (idx < history.length - 1 ? idx + 1 : idx));\n  }, [history.length]);\n\n  const contextValue = useMemo<WebPreviewContextValue>(\n    () => ({\n      url,\n      setUrl: handleUrlChange,\n      consoleOpen,\n      setConsoleOpen,\n      goBack,\n      goForward,\n      canGoBack: historyIndex > 0,\n      canGoForward: historyIndex < history.length - 1 && historyIndex >= 0,\n      viewport,\n      setViewport,\n      isFullscreen,\n      setIsFullscreen,\n      toggle: () => {\n        void toggleFullscreen();\n      },\n      containerRef: localRef,\n      network: {\n        online: networkStatus.online,\n        effectiveType: networkStatus.effectiveType,\n        downlink: networkStatus.downlink,\n        rtt: networkStatus.rtt,\n      },\n      isTouchDevice,\n      prefersReducedMotion,\n      isLoading,\n      setIsLoading,\n    }),\n    [\n      url,\n      handleUrlChange,\n      consoleOpen,\n      setConsoleOpen,\n      goBack,\n      goForward,\n      historyIndex,\n      history.length,\n      viewport,\n      isFullscreen,\n      setIsFullscreen,\n      toggleFullscreen,\n      networkStatus.online,\n      networkStatus.effectiveType,\n      networkStatus.downlink,\n      networkStatus.rtt,\n      isTouchDevice,\n      prefersReducedMotion,\n      isLoading,\n    ],\n  );\n\n  return (\n    <WebPreviewContext.Provider value={contextValue}>\n      <div\n        ref={containerRef}\n        data-state={isFullscreen ? 'fullscreen' : 'normal'}\n        data-viewport={viewport}\n        className={cn(\n          'bg-card flex size-full flex-col border',\n          AI_CONTAINER_RADIUS,\n          AI_TRANSITION.all,\n          // CSS fallback for fullscreen mode (useFullscreen handles native API)\n          isFullscreen && 'fixed inset-0 z-50 rounded-none border-0 shadow-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </WebPreviewContext.Provider>\n  );\n};\n\nexport type WebPreviewNavigationProps = ComponentProps<'div'>;\n\nexport const WebPreviewNavigation = ({\n  className,\n  children,\n  ...props\n}: WebPreviewNavigationProps) => {\n  const { isLoading, prefersReducedMotion, isTouchDevice } = useWebPreview();\n\n  // Premium Harmony V2: Progress bar transition\n  const progressTransition = useMemo(\n    () =>\n      prefersReducedMotion\n        ? { duration: 0.001 }\n        : { duration: 0.8, ease: [0.23, 1, 0.32, 1] as const },\n    [prefersReducedMotion],\n  );\n\n  return (\n    <div\n      className={cn(\n        // Glassmorphism effect with backdrop blur\n        'bg-background/80 supports-[backdrop-filter]:bg-background/60',\n        'relative flex items-center border-b backdrop-blur-md',\n        'sticky top-0 z-10',\n        // Responsive padding\n        isTouchDevice ? 'gap-1 p-2' : 'gap-1.5 p-2',\n        AI_SPACING.xs,\n        AI_TRANSITION.all,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {/* Animated progress bar at bottom of navigation */}\n      <AnimatePresence>\n        {isLoading ? (\n          <motion.div\n            key=\"progress-bar\"\n            className=\"bg-primary absolute bottom-0 left-0 h-0.5 w-full origin-left\"\n            initial={{ scaleX: 0, opacity: 1 }}\n            animate={{ scaleX: 1, opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={progressTransition}\n          />\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n};\n\nexport type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {\n  tooltip?: string;\n};\n\nexport const WebPreviewNavigationButton = ({\n  onClick,\n  disabled,\n  tooltip,\n  children,\n  className,\n  ...props\n}: WebPreviewNavigationButtonProps) => {\n  const { prefersReducedMotion, isTouchDevice } = useWebPreview();\n\n  // Premium Harmony V2: Physical feedback on tap\n  const tapAnimation = useMemo(\n    () => (prefersReducedMotion ? {} : { scale: 0.95 }),\n    [prefersReducedMotion],\n  );\n\n  const tapTransition = useMemo(\n    () => (prefersReducedMotion ? { duration: 0 } : (isTouchDevice ? SPRING_TACTILE : SPRING_FLUID)),\n    [prefersReducedMotion, isTouchDevice],\n  );\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <motion.div whileTap={disabled ? undefined : tapAnimation} transition={tapTransition}>\n            <Button\n              className={cn(\n                'hover:text-foreground hover:bg-accent/50 min-h-[44px] min-w-[44px] p-0',\n                'active:bg-accent/70',\n                AI_TRANSITION.colors,\n                className,\n              )}\n              data-disabled={disabled}\n              disabled={disabled}\n              onClick={onClick}\n              size=\"sm\"\n              variant=\"ghost\"\n              {...props}\n            >\n              {children}\n            </Button>\n          </motion.div>\n        </TooltipTrigger>\n        {tooltip ? (\n          <TooltipContent>\n            <p>{tooltip}</p>\n          </TooltipContent>\n        ) : null}\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nexport const WebPreviewBackButton = ({\n  tooltip = 'Back',\n  ...props\n}: Omit<WebPreviewNavigationButtonProps, 'onClick'>) => {\n  const { goBack, canGoBack } = useWebPreview();\n  return (\n    <WebPreviewNavigationButton\n      disabled={!canGoBack}\n      onClick={goBack}\n      tooltip={tooltip}\n      {...props}\n    />\n  );\n};\n\nexport const WebPreviewForwardButton = ({\n  tooltip = 'Forward',\n  ...props\n}: Omit<WebPreviewNavigationButtonProps, 'onClick'>) => {\n  const { goForward, canGoForward } = useWebPreview();\n  return (\n    <WebPreviewNavigationButton\n      disabled={!canGoForward}\n      onClick={goForward}\n      tooltip={tooltip}\n      {...props}\n    />\n  );\n};\n\nexport const WebPreviewFullscreenToggle = ({\n  tooltip,\n  ...props\n}: Omit<WebPreviewNavigationButtonProps, 'onClick'>) => {\n  const { isFullscreen, toggle: toggleFullscreen } = useWebPreview();\n  const dynamicTooltip = tooltip ?? (isFullscreen ? 'Exit fullscreen' : 'Fullscreen');\n\n  return (\n    <div data-state={isFullscreen ? 'fullscreen' : 'normal'}>\n      <WebPreviewNavigationButton\n        aria-pressed={isFullscreen}\n        onClick={() => void toggleFullscreen()}\n        tooltip={dynamicTooltip}\n        {...props}\n      >\n        {isFullscreen ? (\n          <MinimizeIcon aria-hidden=\"true\" className={AI_ICON.md} />\n        ) : (\n          <MaximizeIcon aria-hidden=\"true\" className={AI_ICON.md} />\n        )}\n        <span className=\"sr-only\">{dynamicTooltip}</span>\n      </WebPreviewNavigationButton>\n    </div>\n  );\n};\n\nexport type WebPreviewUrlProps = ComponentProps<typeof Input>;\n\nexport const WebPreviewUrl = ({\n  value,\n  onChange,\n  onKeyDown,\n  className,\n  ...props\n}: WebPreviewUrlProps) => {\n  const { url, setUrl, isLoading, setIsLoading, prefersReducedMotion } = useWebPreview();\n  // Use Mantine's useInputState for simplified input state management\n  const [inputValue, setInputValue] = useInputState(url);\n  // Debounce URL input for auto-navigation after user stops typing\n  const [debouncedUrl] = useDebouncedValue(inputValue, 500);\n\n  // Determine protocol for icon display\n  const isSecure = useMemo(() => {\n    const currentValue = (value as string) ?? inputValue;\n    try {\n      const urlObj = new URL(currentValue);\n      return urlObj.protocol === 'https:';\n    } catch {\n      return currentValue.startsWith('https://');\n    }\n  }, [value, inputValue]);\n\n  // Premium Harmony V2: Icon animation variants\n  const iconVariants = useMemo(\n    () => ({\n      initial: { opacity: 0, scale: 0.8, rotate: -10 },\n      animate: { opacity: 1, scale: 1, rotate: 0 },\n      exit: { opacity: 0, scale: 0.8, rotate: 10 },\n    }),\n    [],\n  );\n\n  const iconTransition = useMemo(\n    () => (prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE),\n    [prefersReducedMotion],\n  );\n\n  // Sync input value with context URL when it changes externally\n  useEffect(() => {\n    setInputValue(url);\n  }, [url, setInputValue]);\n\n  // Auto-navigate when debounced URL changes (user stopped typing)\n  useEffect(() => {\n    if (debouncedUrl && debouncedUrl !== url) {\n      setIsLoading(true);\n      setUrl(debouncedUrl);\n      // Reset loading state after a delay\n      const timer = setTimeout(() => setIsLoading(false), 800);\n      return () => clearTimeout(timer);\n    }\n    return;\n  }, [debouncedUrl, url, setUrl, setIsLoading]);\n\n  // Memoize change handler to prevent unnecessary re-renders\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setInputValue(event);\n      onChange?.(event);\n    },\n    [setInputValue, onChange],\n  );\n\n  // Memoize keydown handler to prevent unnecessary re-renders\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        const target = event.target as HTMLInputElement;\n        setIsLoading(true);\n        setUrl(target.value);\n        // Reset loading state after a delay\n        setTimeout(() => setIsLoading(false), 800);\n      }\n      onKeyDown?.(event);\n    },\n    [setUrl, onKeyDown, setIsLoading],\n  );\n\n  const currentValue = (value as string) ?? inputValue;\n  const hasUrl = currentValue.length > 0;\n\n  return (\n    <div className=\"relative flex flex-1 items-center\">\n      {/* Protocol icon indicator */}\n      <AnimatePresence mode=\"wait\">\n        {hasUrl ? (\n          <motion.div\n            key={isSecure ? 'secure' : 'insecure'}\n            className={cn(\n              'pointer-events-none absolute left-2.5 z-10',\n              isSecure ? 'text-success' : 'text-muted-foreground',\n            )}\n            variants={iconVariants}\n            initial=\"initial\"\n            animate=\"animate\"\n            exit=\"exit\"\n            transition={iconTransition}\n          >\n            {isSecure ? (\n              <LockIcon aria-hidden=\"true\" className=\"size-3.5\" />\n            ) : (\n              <GlobeIcon aria-hidden=\"true\" className=\"size-3.5\" />\n            )}\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n      <Input\n        aria-label=\"URL\"\n        className={cn('h-9 flex-1 text-sm', hasUrl && 'pl-8', AI_TRANSITION.all, className)}\n        data-loading={isLoading}\n        data-secure={isSecure}\n        onChange={onChange ?? handleChange}\n        onKeyDown={handleKeyDown}\n        placeholder=\"Enter URL…\"\n        spellCheck={false}\n        autoComplete=\"url\"\n        type=\"url\"\n        value={currentValue}\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport type WebPreviewBodyProps = ComponentProps<'iframe'> & {\n  loading?: ReactNode;\n};\n\n// Memoize viewport widths outside component to prevent recreation on each render\nconst VIEWPORT_WIDTHS: Record<'desktop' | 'tablet' | 'mobile', string> = {\n  desktop: '100%',\n  tablet: '768px',\n  mobile: '390px',\n};\n\nexport const WebPreviewBody = ({ className, loading, src, ...props }: WebPreviewBodyProps) => {\n  const { url, viewport, prefersReducedMotion, isLoading, isTouchDevice } = useWebPreview();\n  const [iframeLoaded, setIframeLoaded] = useState(false);\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  // Track iframe load state for skeleton overlay\n  const currentSrc = src ?? url;\n\n  // Reset loaded state when URL changes\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Safe: resetting load state is necessary when URL changes to show skeleton\n    setIframeLoaded(false);\n  }, [currentSrc]);\n\n  // Handle iframe load event\n  const handleIframeLoad = useCallback(() => {\n    setIframeLoaded(true);\n  }, []);\n\n  // Premium Harmony V2: Memoized animation variants with weighted physics\n  const containerVariants = useMemo(\n    () => ({\n      initial: { opacity: 0, scale: 0.96, y: 8 },\n      animate: { opacity: 1, scale: 1, y: 0 },\n      exit: { opacity: 0, scale: 0.96, y: -8 },\n    }),\n    [],\n  );\n\n  // Skeleton overlay variants\n  const skeletonVariants = useMemo(\n    () => ({\n      visible: { opacity: 1 },\n      hidden: { opacity: 0 },\n    }),\n    [],\n  );\n\n  // Generate descriptive iframe title based on URL\n  const iframeTitle = useMemo(() => {\n    if (!currentSrc) return 'Web preview';\n    try {\n      const urlObj = new URL(currentSrc);\n      return `Preview of ${urlObj.hostname}`;\n    } catch {\n      return 'Web preview';\n    }\n  }, [currentSrc]);\n\n  // Determine transition based on preferences\n  const viewportTransition = useMemo(\n    () =>\n      prefersReducedMotion ? { duration: 0 } : (isTouchDevice ? SPRING_TACTILE : SPRING_WEIGHTED),\n    [prefersReducedMotion, isTouchDevice],\n  );\n\n  return (\n    <div\n      className={cn(\n        'relative flex h-full flex-1 items-start justify-center overflow-hidden',\n        // Prevent scroll chaining in nested contexts\n        'overscroll-contain',\n      )}\n      id={`viewport-${viewport}`}\n      role=\"tabpanel\"\n      aria-label={`${viewport} viewport preview`}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={viewport}\n          animate=\"animate\"\n          className=\"relative h-full w-full\"\n          exit=\"exit\"\n          initial=\"initial\"\n          style={{ maxWidth: VIEWPORT_WIDTHS[viewport] }}\n          transition={viewportTransition}\n          variants={containerVariants}\n        >\n          {/* Skeleton loading overlay */}\n          <AnimatePresence>\n            {(isLoading || !iframeLoaded) && currentSrc ? (\n              <motion.div\n                key=\"skeleton-overlay\"\n                className={cn(\n                  'bg-muted/80 absolute inset-0 z-10 flex items-center justify-center rounded-md backdrop-blur-sm',\n                  AI_TRANSITION.opacity,\n                )}\n                variants={skeletonVariants}\n                initial=\"visible\"\n                animate=\"visible\"\n                exit=\"hidden\"\n                transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.3 }}\n              >\n                <div className=\"flex flex-col items-center gap-3\">\n                  {/* Animated loading dots */}\n                  <div className=\"flex gap-1\">\n                    {[0, 1, 2].map(i => (\n                      <motion.div\n                        key={i}\n                        className=\"bg-primary/60 size-2 rounded-full\"\n                        animate={\n                          prefersReducedMotion\n                            ? {}\n                            : {\n                                scale: [1, 1.2, 1],\n                                opacity: [0.5, 1, 0.5],\n                              }\n                        }\n                        transition={{\n                          duration: 0.8,\n                          repeat: Infinity,\n                          delay: i * 0.15,\n                        }}\n                      />\n                    ))}\n                  </div>\n                  <span className=\"text-muted-foreground text-sm\">Loading preview…</span>\n                </div>\n              </motion.div>\n            ) : null}\n          </AnimatePresence>\n\n          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n          <iframe\n            ref={iframeRef}\n            className={cn(\n              'h-full w-full rounded-md border',\n              'bg-background',\n              AI_TRANSITION.opacity,\n              className,\n            )}\n            data-viewport={viewport}\n            data-loaded={iframeLoaded}\n            sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-presentation\"\n            src={currentSrc ?? undefined}\n            title={iframeTitle}\n            onLoad={handleIframeLoad}\n            tabIndex={-1}\n            {...props}\n          />\n        </motion.div>\n      </AnimatePresence>\n      {loading}\n    </div>\n  );\n};\n\nexport type WebPreviewConsoleProps = ComponentProps<'div'> & {\n  logs?: Array<{\n    level: 'log' | 'warn' | 'error';\n    message: string;\n    timestamp: Date;\n  }>;\n};\n\nexport const WebPreviewConsole = ({\n  className,\n  logs = [],\n  children,\n  ...props\n}: WebPreviewConsoleProps) => {\n  const { consoleOpen, setConsoleOpen, prefersReducedMotion } = useWebPreview();\n\n  // Count logs by level for badge display\n  const logCounts = useMemo(() => {\n    const counts = { log: 0, warn: 0, error: 0 };\n    for (const log of logs) {\n      counts[log.level]++;\n    }\n    return counts;\n  }, [logs]);\n\n  // Premium Harmony V2: Memoized animation variants for console logs\n  const logItemVariants = useMemo(\n    () => ({\n      hidden: { opacity: 0, x: -10, height: 0 },\n      visible: (i: number) => ({\n        opacity: 1,\n        x: 0,\n        height: 'auto',\n        transition: prefersReducedMotion\n          ? { duration: 0 }\n          : {\n              ...SPRING_GENTLE,\n              delay: i * 0.03,\n            },\n      }),\n      exit: { opacity: 0, x: -10, height: 0 },\n    }),\n    [prefersReducedMotion],\n  );\n\n  // Chevron animation variants\n  const chevronVariants = useMemo(\n    () => ({\n      closed: { rotate: 0 },\n      open: { rotate: 180 },\n    }),\n    [],\n  );\n\n  return (\n    <Collapsible\n      className={cn(\n        'bg-muted/30 border-t font-mono text-sm',\n        'backdrop-blur-sm',\n        AI_TRANSITION.all,\n        className,\n      )}\n      data-state={consoleOpen ? 'open' : 'closed'}\n      onOpenChange={setConsoleOpen}\n      open={consoleOpen}\n      {...props}\n    >\n      <CollapsibleTrigger asChild>\n        <Button\n          className={cn(\n            'hover:bg-muted/50 flex w-full items-center justify-between',\n            'min-h-[44px] rounded-none px-3 py-2 text-left font-medium',\n            AI_TRANSITION.colors,\n          )}\n          variant=\"ghost\"\n        >\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-foreground font-sans text-sm font-medium\">Console</span>\n            {/* Log level badges */}\n            {logs.length > 0 && (\n              <div className=\"flex items-center gap-1\">\n                {logCounts.error > 0 && (\n                  <span className=\"bg-destructive/15 text-destructive rounded px-1.5 py-0.5 text-xs font-medium tabular-nums\">\n                    {logCounts.error}\n                  </span>\n                )}\n                {logCounts.warn > 0 && (\n                  <span className=\"bg-warning/15 text-warning rounded px-1.5 py-0.5 text-xs font-medium tabular-nums\">\n                    {logCounts.warn}\n                  </span>\n                )}\n                {logCounts.log > 0 && (\n                  <span className=\"bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-xs font-medium tabular-nums\">\n                    {logCounts.log}\n                  </span>\n                )}\n              </div>\n            )}\n          </div>\n          <motion.div\n            variants={chevronVariants}\n            animate={consoleOpen ? 'open' : 'closed'}\n            transition={prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE}\n          >\n            <ChevronDownIcon aria-hidden=\"true\" className={AI_ICON.md} />\n          </motion.div>\n        </Button>\n      </CollapsibleTrigger>\n      <CollapsibleContent className={cn('outline-none', AI_COLLAPSIBLE.content)}>\n        <div\n          className={cn(\n            'bg-background/50 max-h-48 space-y-0.5 overflow-y-auto p-2',\n            // Prevent scroll chaining\n            'overscroll-contain',\n          )}\n        >\n          {logs.length === 0 ? (\n            <div className=\"text-muted-foreground flex items-center justify-center py-4 font-sans text-sm\">\n              No console output\n            </div>\n          ) : (\n            <AnimatePresence mode=\"popLayout\">\n              {logs.map((log, index) => (\n                <motion.div\n                  key={`${log.timestamp.getTime()}-${log.message.slice(0, 20)}`}\n                  layout\n                  animate=\"visible\"\n                  className={consoleLogVariants({ level: log.level })}\n                  custom={index}\n                  data-level={log.level}\n                  exit=\"exit\"\n                  initial=\"hidden\"\n                  variants={logItemVariants}\n                >\n                  <span className=\"text-muted-foreground text-2xs shrink-0 font-mono tabular-nums\">\n                    {log.timestamp.toLocaleTimeString('en-US', {\n                      hour12: false,\n                      hour: '2-digit',\n                      minute: '2-digit',\n                      second: '2-digit',\n                    })}\n                  </span>\n                  <span className=\"break-all\">{log.message}</span>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          )}\n          {children}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nexport type WebPreviewDeviceToggleProps = ComponentProps<'div'>;\n\n// Memoize devices array outside component to prevent recreation on each render\nconst DEVICES: Array<{\n  id: 'desktop' | 'tablet' | 'mobile';\n  label: string;\n  icon: typeof MonitorIcon;\n}> = [\n  { id: 'desktop', label: 'Desktop', icon: MonitorIcon },\n  { id: 'tablet', label: 'Tablet', icon: TabletIcon },\n  { id: 'mobile', label: 'Mobile', icon: SmartphoneIcon },\n];\n\nexport const WebPreviewDeviceToggle = ({ className, ...props }: WebPreviewDeviceToggleProps) => {\n  const { viewport, setViewport, prefersReducedMotion, isTouchDevice } = useWebPreview();\n\n  // Premium Harmony V2: Spring transition for the indicator pill\n  const pillTransition = useMemo(\n    () => (prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE),\n    [prefersReducedMotion],\n  );\n\n  return (\n    <div\n      className={cn(\n        'bg-muted/50 relative flex items-center rounded-lg p-1',\n        AI_TRANSITION.colors,\n        className,\n      )}\n      role=\"tablist\"\n      aria-label=\"Device viewport\"\n      {...props}\n    >\n      {DEVICES.map(({ id, label, icon: Icon }) => {\n        const isActive = viewport === id;\n        return (\n          <button\n            key={id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={isActive}\n            aria-controls={`viewport-${id}`}\n            data-active={isActive}\n            data-viewport={id}\n            className={cn(\n              'relative z-10 flex min-h-[36px] min-w-[44px] items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium',\n              'transition-colors outline-none',\n              isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground/80',\n              AI_FOCUS.ring,\n            )}\n            onClick={() => setViewport(id)}\n          >\n            {/* Animated background pill indicator */}\n            {isActive ? (\n              <motion.div\n                layoutId=\"viewport-indicator\"\n                className=\"bg-background absolute inset-0 rounded-md shadow-sm\"\n                transition={pillTransition}\n                style={{ zIndex: -1 }}\n              />\n            ) : null}\n            <Icon aria-hidden=\"true\" className=\"size-4\" />\n            {/* Show label on larger screens or if not touch device */}\n            <span className={cn(isTouchDevice ? 'sr-only' : 'hidden sm:inline')}>{label}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport type WebPreviewExampleSelectProps = {\n  examples: Array<{ label: string; url: string }>;\n  placeholder?: string;\n};\n\nexport const WebPreviewExampleSelect = ({\n  examples,\n  placeholder = 'Examples',\n}: WebPreviewExampleSelectProps) => {\n  const { setUrl } = useWebPreview();\n  const [selectedValue, setSelectedValue] = useState('');\n\n  // Memoize change handler to prevent unnecessary re-renders\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      if (e.target.value) {\n        setSelectedValue(e.target.value);\n        setUrl(e.target.value);\n      }\n    },\n    [setUrl],\n  );\n\n  return (\n    <div className={cn('flex items-center', AI_SPACING.xs)}>\n      <select\n        aria-label=\"Example URLs\"\n        className={cn(\n          'bg-background min-h-[44px] rounded-md border px-2 text-sm',\n          AI_TRANSITION.colors,\n          AI_FOCUS.ring,\n        )}\n        data-selected={Boolean(selectedValue)}\n        defaultValue=\"\"\n        onChange={handleChange}\n      >\n        <option disabled value=\"\">\n          {placeholder}\n        </option>\n        {examples.map(ex => (\n          <option key={ex.url} value={ex.url}>\n            {ex.label}\n          </option>\n        ))}\n      </select>\n    </div>\n  );\n};\n\nexport type WebPreviewNetworkStatusProps = ComponentProps<'div'>;\n\n/**\n * WebPreviewNetworkStatus - Shows offline indicator and slow connection warnings\n *\n * Displays when:\n * - User is offline (red indicator)\n * - Connection is slow-2g or 2g (yellow warning)\n */\nexport const WebPreviewNetworkStatus = ({ className, ...props }: WebPreviewNetworkStatusProps) => {\n  const { network, prefersReducedMotion } = useWebPreview();\n\n  // Don't show anything if online with good connection\n  const shouldShow =\n    !network.online || network.effectiveType === 'slow-2g' || network.effectiveType === '2g';\n\n  const isOffline = !network.online;\n  const isSlowConnection = network.effectiveType === 'slow-2g' || network.effectiveType === '2g';\n\n  // Premium Harmony V2: Memoized animation variants\n  const statusVariants = useMemo(\n    () => ({\n      hidden: { opacity: 0, scale: 0.9, y: -10 },\n      visible: { opacity: 1, scale: 1, y: 0 },\n      exit: { opacity: 0, scale: 0.9, y: -10 },\n    }),\n    [],\n  );\n\n  return (\n    <AnimatePresence>\n      {shouldShow ? (\n        <motion.div\n          key=\"network-status\"\n          animate=\"visible\"\n          exit=\"exit\"\n          initial=\"hidden\"\n          transition={prefersReducedMotion ? { duration: 0 } : SPRING_FLUID}\n          variants={statusVariants}\n        >\n          <TooltipProvider>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <div\n                  className={cn(\n                    'flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium',\n                    AI_TRANSITION.colors,\n                    isOffline && 'bg-destructive/10 text-destructive',\n                    !isOffline && isSlowConnection && 'bg-warning/10 text-warning',\n                    className,\n                  )}\n                  data-state={isOffline ? 'offline' : 'slow'}\n                  data-connection-type={network.effectiveType}\n                  role=\"status\"\n                  aria-live=\"polite\"\n                  {...props}\n                >\n                  <WifiOffIcon aria-hidden=\"true\" className=\"size-3.5\" />\n                  <span>{isOffline ? 'Offline' : 'Slow connection'}</span>\n                </div>\n              </TooltipTrigger>\n              <TooltipContent>\n                {isOffline ? (\n                  <p>No internet connection. Preview may not load.</p>\n                ) : (\n                  <p>Slow connection ({network.effectiveType}). Preview may load slowly.</p>\n                )}\n              </TooltipContent>\n            </Tooltip>\n          </TooltipProvider>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n"],"mappings":"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"}

package/dist/components-ai-elements-constants.d.mts

@@ -0,0 +1,207 @@
+
+import { a as SPRING_TACTILE, i as SPRING_GENTLE, o as SPRING_WEIGHTED, r as SPRING_FLUID } from "./motion-DLlwbMJ0.mjs";
+
+//#region src/components/ai-elements/ai-elements.constants.d.ts
+declare const AI_SPACING: {
+  readonly xs: "gap-2";
+  readonly sm: "gap-3";
+  readonly md: "gap-4";
+  readonly lg: "gap-6";
+};
+declare const AI_PADDING: {
+  readonly compact: "p-2";
+  readonly standard: "p-3";
+  readonly comfortable: "p-4";
+};
+declare const AI_STACK: {
+  readonly tight: "space-y-2";
+  readonly standard: "space-y-3";
+  readonly loose: "space-y-4";
+};
+declare const AI_RADIUS: {
+  readonly sm: "rounded-sm";
+  readonly md: "rounded-md";
+  readonly lg: "rounded-lg";
+  readonly xl: "rounded-xl";
+  readonly full: "rounded-full";
+};
+declare const AI_CONTAINER_RADIUS: "rounded-lg";
+declare const AI_NESTED_RADIUS: "rounded-md";
+declare const AI_TEXT: {
+  readonly '2xs': "text-2xs";
+  readonly xs: "text-xs";
+  readonly sm: "text-sm";
+  readonly base: "text-base";
+  readonly lg: "text-lg";
+};
+declare const AI_WEIGHT: {
+  readonly normal: "font-normal";
+  readonly medium: "font-medium";
+  readonly semibold: "font-semibold";
+};
+declare const AI_TITLE: {
+  readonly primary: "text-sm font-semibold text-foreground";
+  readonly secondary: "text-sm font-medium text-foreground";
+  readonly label: "text-xs font-medium text-muted-foreground uppercase tracking-wide";
+};
+declare const AI_BODY: {
+  readonly primary: "text-sm text-foreground";
+  readonly secondary: "text-sm text-muted-foreground";
+  readonly small: "text-xs text-muted-foreground";
+};
+declare const AI_COLORS: {
+  readonly default: {
+    readonly bg: "bg-card";
+    readonly text: "text-foreground";
+    readonly border: "border-border";
+  };
+  readonly muted: {
+    readonly bg: "bg-muted";
+    readonly text: "text-muted-foreground";
+    readonly border: "border-border/50";
+  };
+  readonly success: {
+    readonly bg: "bg-success/10";
+    readonly text: "text-success";
+    readonly border: "border-success/30";
+  };
+  readonly warning: {
+    readonly bg: "bg-warning/10";
+    readonly text: "text-warning";
+    readonly border: "border-warning/30";
+  };
+  readonly error: {
+    readonly bg: "bg-destructive/10";
+    readonly text: "text-destructive";
+    readonly border: "border-destructive/30";
+  };
+  readonly info: {
+    readonly bg: "bg-info/10";
+    readonly text: "text-info";
+    readonly border: "border-info/30";
+  };
+};
+declare const AI_CONTAINER: {
+  readonly card: "bg-card border border-border rounded-lg p-3";
+  readonly cardCompact: "bg-card border border-border rounded-lg p-2";
+  readonly subtle: "bg-muted/50 rounded-md p-3";
+  readonly ghost: "rounded-md";
+  readonly elevated: "bg-popover border border-border rounded-lg p-3 shadow-md";
+  readonly interactive: "bg-card border border-border rounded-lg p-3 transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring";
+};
+declare const AI_HEADER: {
+  readonly base: "flex w-full items-center gap-2 text-sm";
+  readonly muted: "text-muted-foreground hover:text-foreground transition-colors";
+  readonly active: "text-foreground";
+};
+declare const AI_ICON: {
+  readonly sm: "size-3.5";
+  readonly md: "size-4";
+  readonly lg: "size-5";
+};
+declare const AI_ICON_STYLE: {
+  readonly muted: "text-muted-foreground";
+  readonly default: "text-foreground";
+  readonly inherit: "";
+};
+declare const AI_ANIMATE: {
+  readonly entry: "animate-message-entry";
+  readonly stagger: "animate-stagger-fade-in";
+  readonly thinking: "animate-brain-pulse";
+  readonly stateChange: "animate-tool-state-enter";
+  readonly slideLeft: "animate-branch-slide-left";
+  readonly slideRight: "animate-branch-slide-right";
+  readonly copyBounce: "animate-code-copy-bounce";
+  readonly focusPulse: "animate-focus-pulse";
+  readonly lineDraw: "animate-line-draw";
+  readonly popoverBounce: "animate-sources-bounce";
+};
+declare const AI_STAGGER_DELAY: {
+  readonly fast: 30;
+  readonly standard: 50;
+  readonly slow: 75;
+  readonly dramatic: 100;
+};
+declare const AI_DURATION: {
+  readonly fast: 150;
+  readonly standard: 200;
+  readonly entry: 300;
+  readonly complex: 400;
+};
+declare const AI_INTERACTION: {
+  readonly hoverScale: 1.01;
+  readonly tapScale: 0.98;
+};
+declare const AI_HOVER: {
+  readonly bg: "hover:bg-accent/50";
+  readonly text: "hover:text-foreground";
+  readonly both: "hover:bg-accent/50 hover:text-foreground";
+};
+declare const AI_FOCUS: {
+  readonly ring: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+  readonly subtle: "focus-visible:outline-none focus-visible:text-foreground";
+};
+declare const AI_DISABLED: {
+  readonly opacity: "disabled:opacity-50";
+  readonly cursor: "disabled:cursor-not-allowed";
+  readonly full: "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none";
+};
+declare const AI_TRANSITION: {
+  readonly colors: "transition-colors";
+  readonly transform: "transition-transform";
+  readonly all: "transition-all";
+  readonly opacity: "transition-opacity";
+};
+declare const AI_COLLAPSIBLE: {
+  readonly content: string;
+  readonly chevron: "transition-transform data-[state=open]:rotate-180";
+  readonly chevronGroup: "transition-transform group-data-[state=open]:rotate-180";
+};
+declare const AI_STATUS: {
+  readonly pending: {
+    readonly icon: "text-muted-foreground";
+    readonly text: "text-muted-foreground";
+    readonly bg: "";
+  };
+  readonly active: {
+    readonly icon: "text-info animate-pulse";
+    readonly text: "text-foreground";
+    readonly bg: "";
+  };
+  readonly complete: {
+    readonly icon: "text-success";
+    readonly text: "text-muted-foreground";
+    readonly bg: "";
+  };
+  readonly error: {
+    readonly icon: "text-destructive";
+    readonly text: "text-destructive";
+    readonly bg: "bg-destructive/10";
+  };
+  readonly warning: {
+    readonly icon: "text-warning";
+    readonly text: "text-warning";
+    readonly bg: "bg-warning/10";
+  };
+};
+declare const AI_STYLES: {
+  readonly card: "bg-card border border-border rounded-lg p-3";
+  readonly trigger: "flex w-full items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors transition-colors";
+  readonly contentArea: "bg-muted/50 rounded-md p-3";
+  readonly listItem: "flex items-start gap-2 p-2 rounded-md hover:bg-accent/50 transition-colors";
+  readonly badge: "inline-flex items-center gap-2 px-2 py-0.5 rounded-full text-xs";
+  readonly actions: "flex items-center gap-2";
+};
+type AISpacing = keyof typeof AI_SPACING;
+type AIPadding = keyof typeof AI_PADDING;
+type AIRadius = keyof typeof AI_RADIUS;
+type AIText = keyof typeof AI_TEXT;
+type AIWeight = keyof typeof AI_WEIGHT;
+type AIColorScheme = keyof typeof AI_COLORS;
+type AIContainer = keyof typeof AI_CONTAINER;
+type AIIcon = keyof typeof AI_ICON;
+type AIAnimate = keyof typeof AI_ANIMATE;
+type AIStatus = keyof typeof AI_STATUS;
+//#endregion
+export { AIAnimate, AIColorScheme, AIContainer, AIIcon, AIPadding, AIRadius, AISpacing, AIStatus, AIText, AIWeight, AI_ANIMATE, AI_BODY, AI_COLLAPSIBLE, AI_COLORS, AI_CONTAINER, AI_CONTAINER_RADIUS, AI_DISABLED, AI_DURATION, AI_FOCUS, AI_HEADER, AI_HOVER, AI_ICON, AI_ICON_STYLE, AI_INTERACTION, AI_NESTED_RADIUS, AI_PADDING, AI_RADIUS, AI_SPACING, AI_STACK, AI_STAGGER_DELAY, AI_STATUS, AI_STYLES, AI_TEXT, AI_TITLE, AI_TRANSITION, AI_WEIGHT, SPRING_FLUID, SPRING_GENTLE, SPRING_TACTILE, SPRING_WEIGHTED };
+//# sourceMappingURL=components-ai-elements-constants.d.mts.map

package/dist/components-ai-elements-constants.mjs

@@ -0,0 +1,301 @@
+'use client';
+import { a as SPRING_TACTILE, i as SPRING_GENTLE, o as SPRING_WEIGHTED, r as SPRING_FLUID } from "./motion-zelaDelJ.mjs";
+
+//#region src/components/ai-elements/ai-elements.constants.ts
+/**
+* @fileoverview AI Elements Design System Constants
+* AI Elements Design System Constants
+*
+* Unified visual language for all AI chat components.
+* All values reference the design token system.
+*
+* @module @od-oneapp/uni-ui/components/ai-elements/ai-elements.constants
+*/
+/**
+* Standard spacing values for AI elements
+* Using consistent scale: 2 (8px), 3 (12px), 4 (16px)
+*/
+const AI_SPACING = {
+	xs: "gap-2",
+	sm: "gap-3",
+	md: "gap-4",
+	lg: "gap-6"
+};
+/**
+* Standard padding for AI element containers
+*/
+const AI_PADDING = {
+	compact: "p-2",
+	standard: "p-3",
+	comfortable: "p-4"
+};
+/**
+* Standard internal spacing (space-y for vertical stacking)
+*/
+const AI_STACK = {
+	tight: "space-y-2",
+	standard: "space-y-3",
+	loose: "space-y-4"
+};
+/**
+* Standard border radius for AI elements
+* Primary: rounded-lg (12px) for cards/containers
+* Secondary: rounded-md (8px) for nested elements
+*/
+const AI_RADIUS = {
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	xl: "rounded-xl",
+	full: "rounded-full"
+};
+/**
+* Standard container radius - use this for all AI element cards
+*/
+const AI_CONTAINER_RADIUS = AI_RADIUS.lg;
+/**
+* Standard nested element radius - use this for elements inside containers
+*/
+const AI_NESTED_RADIUS = AI_RADIUS.md;
+/**
+* Typography scale for AI elements
+* Follows existing token system
+*/
+const AI_TEXT = {
+	"2xs": "text-2xs",
+	xs: "text-xs",
+	sm: "text-sm",
+	base: "text-base",
+	lg: "text-lg"
+};
+/**
+* Font weights for AI elements
+*/
+const AI_WEIGHT = {
+	normal: "font-normal",
+	medium: "font-medium",
+	semibold: "font-semibold"
+};
+/**
+* Standard title styles for AI element headers
+*/
+const AI_TITLE = {
+	primary: "text-sm font-semibold text-foreground",
+	secondary: "text-sm font-medium text-foreground",
+	label: "text-xs font-medium text-muted-foreground uppercase tracking-wide"
+};
+/**
+* Standard body text styles
+*/
+const AI_BODY = {
+	primary: "text-sm text-foreground",
+	secondary: "text-sm text-muted-foreground",
+	small: "text-xs text-muted-foreground"
+};
+/**
+* Semantic color classes for AI element states
+*/
+const AI_COLORS = {
+	default: {
+		bg: "bg-card",
+		text: "text-foreground",
+		border: "border-border"
+	},
+	muted: {
+		bg: "bg-muted",
+		text: "text-muted-foreground",
+		border: "border-border/50"
+	},
+	success: {
+		bg: "bg-success/10",
+		text: "text-success",
+		border: "border-success/30"
+	},
+	warning: {
+		bg: "bg-warning/10",
+		text: "text-warning",
+		border: "border-warning/30"
+	},
+	error: {
+		bg: "bg-destructive/10",
+		text: "text-destructive",
+		border: "border-destructive/30"
+	},
+	info: {
+		bg: "bg-info/10",
+		text: "text-info",
+		border: "border-info/30"
+	}
+};
+/**
+* Standard AI element container styles
+* Use these for visual consistency across all AI components
+*/
+const AI_CONTAINER = {
+	card: "bg-card border border-border rounded-lg p-3",
+	cardCompact: "bg-card border border-border rounded-lg p-2",
+	subtle: "bg-muted/50 rounded-md p-3",
+	ghost: "rounded-md",
+	elevated: "bg-popover border border-border rounded-lg p-3 shadow-md",
+	interactive: "bg-card border border-border rounded-lg p-3 transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring"
+};
+/**
+* Standard header styles for collapsible AI elements
+* Provides consistent trigger appearance
+*/
+const AI_HEADER = {
+	base: "flex w-full items-center gap-2 text-sm",
+	muted: "text-muted-foreground hover:text-foreground transition-colors",
+	active: "text-foreground"
+};
+/**
+* Standard icon sizes for AI elements
+* Use consistent sizes across all components
+*/
+const AI_ICON = {
+	sm: "size-3.5",
+	md: "size-4",
+	lg: "size-5"
+};
+/**
+* Standard icon styling
+*/
+const AI_ICON_STYLE = {
+	muted: "text-muted-foreground",
+	default: "text-foreground",
+	inherit: ""
+};
+/**
+* Animation class names for AI elements
+* All respect prefers-reduced-motion via conditional application
+*/
+const AI_ANIMATE = {
+	entry: "animate-message-entry",
+	stagger: "animate-stagger-fade-in",
+	thinking: "animate-brain-pulse",
+	stateChange: "animate-tool-state-enter",
+	slideLeft: "animate-branch-slide-left",
+	slideRight: "animate-branch-slide-right",
+	copyBounce: "animate-code-copy-bounce",
+	focusPulse: "animate-focus-pulse",
+	lineDraw: "animate-line-draw",
+	popoverBounce: "animate-sources-bounce"
+};
+/**
+* Stagger delay scale for list animations (in ms)
+*/
+const AI_STAGGER_DELAY = {
+	fast: 30,
+	standard: 50,
+	slow: 75,
+	dramatic: 100
+};
+/**
+* Animation duration tokens (matching globals.css)
+*/
+const AI_DURATION = {
+	fast: 150,
+	standard: 200,
+	entry: 300,
+	complex: 400
+};
+/**
+* Standard interaction tokens for animations
+*/
+const AI_INTERACTION = {
+	hoverScale: 1.01,
+	tapScale: .98
+};
+/**
+* Standard hover state classes
+*/
+const AI_HOVER = {
+	bg: "hover:bg-accent/50",
+	text: "hover:text-foreground",
+	both: "hover:bg-accent/50 hover:text-foreground"
+};
+/**
+* Standard focus state classes
+*/
+const AI_FOCUS = {
+	ring: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+	subtle: "focus-visible:outline-none focus-visible:text-foreground"
+};
+/**
+* Standard disabled state classes
+*/
+const AI_DISABLED = {
+	opacity: "disabled:opacity-50",
+	cursor: "disabled:cursor-not-allowed",
+	full: "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+};
+/**
+* Standard transition classes
+*/
+const AI_TRANSITION = {
+	colors: "transition-colors",
+	transform: "transition-transform",
+	all: "transition-all",
+	opacity: "transition-opacity"
+};
+/**
+* Standard collapsible content animations
+* Used for Tool, Task, Reasoning, ChainOfThought, etc.
+*/
+const AI_COLLAPSIBLE = {
+	content: [
+		"data-[state=closed]:animate-out",
+		"data-[state=open]:animate-in",
+		"data-[state=closed]:fade-out-0",
+		"data-[state=open]:fade-in-0",
+		"data-[state=closed]:slide-out-to-top-2",
+		"data-[state=open]:slide-in-from-top-2"
+	].join(" "),
+	chevron: "transition-transform data-[state=open]:rotate-180",
+	chevronGroup: "transition-transform group-data-[state=open]:rotate-180"
+};
+/**
+* Status indicator styles for progress/state display
+*/
+const AI_STATUS = {
+	pending: {
+		icon: "text-muted-foreground",
+		text: "text-muted-foreground",
+		bg: ""
+	},
+	active: {
+		icon: "text-info animate-pulse",
+		text: "text-foreground",
+		bg: ""
+	},
+	complete: {
+		icon: "text-success",
+		text: "text-muted-foreground",
+		bg: ""
+	},
+	error: {
+		icon: "text-destructive",
+		text: "text-destructive",
+		bg: "bg-destructive/10"
+	},
+	warning: {
+		icon: "text-warning",
+		text: "text-warning",
+		bg: "bg-warning/10"
+	}
+};
+/**
+* Ready-to-use composite class strings for common patterns
+*/
+const AI_STYLES = {
+	card: `${AI_CONTAINER.card}`,
+	trigger: `${AI_HEADER.base} ${AI_HEADER.muted} ${AI_TRANSITION.colors}`,
+	contentArea: `${AI_CONTAINER.subtle}`,
+	listItem: `flex items-start ${AI_SPACING.xs} ${AI_PADDING.compact} ${AI_RADIUS.md} ${AI_HOVER.bg} ${AI_TRANSITION.colors}`,
+	badge: `inline-flex items-center ${AI_SPACING.xs} px-2 py-0.5 ${AI_RADIUS.full} ${AI_TEXT.xs}`,
+	actions: `flex items-center ${AI_SPACING.xs}`
+};
+
+//#endregion
+export { AI_ANIMATE, AI_BODY, AI_COLLAPSIBLE, AI_COLORS, AI_CONTAINER, AI_CONTAINER_RADIUS, AI_DISABLED, AI_DURATION, AI_FOCUS, AI_HEADER, AI_HOVER, AI_ICON, AI_ICON_STYLE, AI_INTERACTION, AI_NESTED_RADIUS, AI_PADDING, AI_RADIUS, AI_SPACING, AI_STACK, AI_STAGGER_DELAY, AI_STATUS, AI_STYLES, AI_TEXT, AI_TITLE, AI_TRANSITION, AI_WEIGHT, SPRING_FLUID, SPRING_GENTLE, SPRING_TACTILE, SPRING_WEIGHTED };
+//# sourceMappingURL=components-ai-elements-constants.mjs.map