@od-oneapp/uni-ui 2026.1.1301

package/dist/prompt-input-SFJ9_lNw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"prompt-input-SFJ9_lNw.mjs","names":[],"sources":["../src/components/ai-elements/prompt-input/prompt-input.tsx"],"sourcesContent":["/**\n * @fileoverview PromptInput Component - Premium Harmony V2\n *\n * A comprehensive AI chat input component with file attachments, speech-to-text,\n * and extensible action menus. Supports both standalone and provider-controlled modes.\n *\n * Features:\n * - Premium Harmony V2 spring physics animations with reduced motion support\n * - Touch vs desktop detection with adaptive sizing and 44px minimum touch targets\n * - CVA variants for button styles (default, outline, ghost, filled)\n * - react-dropzone integration for drag & drop file uploads\n * - Auto-expanding textarea with useTextareaAutosize hook\n * - Web Speech API integration for voice input\n * - Provider pattern for shared state across multiple inputs\n * - Inline edit mode with glow border effect and focus pulse animation\n * - Draft auto-save on idle with Mantine hooks integration\n * - Keyboard shortcuts (Cmd/Ctrl+Enter submit, Backspace remove attachment, Escape cancel)\n * - Paste and drop file handling with blob URL conversion\n *\n * @module @od-oneapp/uni-ui/components/ai-elements/prompt-input\n *\n * @component PromptInput, PromptInputProvider, PromptInputTextarea, PromptInputHeader, PromptInputFooter, PromptInputTools, PromptInputButton, PromptInputSubmit, PromptInputSpeechButton, PromptInputAttachments, PromptInputAttachment, PromptInputActionMenu, PromptInputSelect, PromptInputCommand\n *\n * @useCases\n * - AI chat interfaces with multi-modal input (text + voice + files)\n * - Inline message editing with cancel/submit actions\n * - Multi-input forms sharing attachments via provider pattern\n * - Voice-to-text dictation for accessibility\n * - Drag-and-drop file uploads with visual feedback\n * - Command palette integration for power users\n * - Mobile-optimized touch targets and gestures\n *\n * @subcomponents\n * - PromptInputProvider - Global state provider (optional)\n * - PromptInput - Form container with drag & drop support\n * - PromptInputTextarea - Auto-expanding text input\n * - PromptInputHeader - Header section for attachments\n * - PromptInputFooter - Footer section with tools and submit\n * - PromptInputTools - Tool buttons container (left side)\n * - PromptInputActions - Action buttons container (right side)\n * - PromptInputButton - Styled button with CVA variants\n * - PromptInputSubmit - Submit button with status indicator\n * - PromptInputCancelButton - Cancel button for inline mode\n * - PromptInputSpeechButton - Voice input toggle\n * - PromptInputAttachments - File attachments list\n * - PromptInputAttachment - Individual attachment display with preview\n * - PromptInputActionMenu - Dropdown for additional actions\n * - PromptInputSelect - Dropdown select for options\n * - PromptInputCommand - Command palette integration\n *\n * @variants\n * - variant: default (active), outline (tools), ghost (mic), filled (submit)\n *\n * @example\n *   <PromptInput onSubmit={handleSubmit} accept=\"image/*\" multiple>\n *     <PromptInputAttachments>\n *       {(file) => <PromptInputAttachment data={file} />}\n *     </PromptInputAttachments>\n *     <PromptInputTextarea placeholder=\"Ask anything...\" />\n *     <PromptInputFooter>\n *       <PromptInputTools>\n *         <PromptInputActionMenu>\n *           <PromptInputActionMenuTrigger />\n *           <PromptInputActionMenuContent>\n *             <PromptInputActionAddAttachments />\n *           </PromptInputActionMenuContent>\n *         </PromptInputActionMenu>\n *       </PromptInputTools>\n *       <PromptInputActions>\n *         <PromptInputSpeechButton />\n *         <PromptInputSubmit status={chatStatus} />\n *       </PromptInputActions>\n *     </PromptInputFooter>\n *   </PromptInput>\n */\n\n'use client';\n\nimport {\n  Children,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEventHandler,\n  type ClipboardEventHandler,\n  type ComponentProps,\n  type FormEvent,\n  type FormEventHandler,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n} from 'react';\n\nimport {\n  useClickOutside,\n  useFocusReturn,\n  useHotkeys,\n  useIdle,\n  useMediaQuery,\n  useMergedRef,\n  useReducedMotion,\n  useResizeObserver,\n  useUncontrolled,\n} from '@mantine/hooks';\nimport { Logger } from '@repo/shared';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ArrowUpIcon,\n  ImageIcon,\n  Loader2Icon,\n  MicIcon,\n  PaperclipIcon,\n  PlusIcon,\n  SlidersHorizontalIcon,\n  SquareIcon,\n  WandSparklesIcon,\n  XIcon,\n} from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { nanoid } from 'nanoid';\nimport { useDropzone, type FileRejection } from 'react-dropzone';\n\nimport { cn } from '../../../lib/utils';\nimport { Button } from '../../elements/atoms/button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '../../elements/organisms/command';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../../elements/organisms/dropdown-menu';\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from '../../elements/organisms/hover-card';\nimport { InputGroup, InputGroupAddon, InputGroupTextarea } from '../../forms/input-group';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../forms/select';\nimport {\n  AI_FOCUS,\n  AI_ICON,\n  AI_NESTED_RADIUS,\n  AI_SPACING,\n  AI_TEXT,\n  AI_TRANSITION,\n  SPRING_FLUID,\n  SPRING_GENTLE,\n  SPRING_TACTILE,\n} from '../ai-elements.constants';\n\nimport type { ChatStatus, FileUIPart } from 'ai';\n\nconst logger = new Logger('uni-ui:prompt-input');\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n/**\n * Converts a blob URL to a data URL by fetching and reading the blob\n */\nasync function convertBlobUrlToDataUrl(url: string): Promise<string> {\n  const response = await fetch(url);\n  const blob = await response.blob();\n  return new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.onloadend = () => resolve(reader.result as string);\n    reader.onerror = reject;\n    reader.readAsDataURL(blob);\n  });\n}\n\n// ============================================================================\n// useTextareaAutosize Hook (Mantine-style)\n// ============================================================================\n\nexport type UseTextareaAutosizeOptions = {\n  /** Minimum number of rows */\n  minRows?: number;\n  /** Maximum number of rows (undefined = unlimited) */\n  maxRows?: number;\n  /** Line height in pixels (default: 20) */\n  lineHeight?: number;\n};\n\n/**\n * Auto-resize textarea based on content using scrollHeight\n * Similar to Mantine's Textarea autosize behavior\n *\n * @param ref - Ref to the textarea element\n * @param value - Current textarea value (triggers resize on change)\n * @param options - Configuration for min/max rows\n */\nexport function useTextareaAutosize(\n  ref: RefObject<HTMLTextAreaElement | null>,\n  value: string,\n  options: UseTextareaAutosizeOptions = {},\n) {\n  const { minRows = 1, maxRows, lineHeight = 20 } = options;\n\n  // Use ResizeObserver to detect container width changes\n  const [containerRef, containerRect] = useResizeObserver();\n\n  const adjustHeight = useCallback(() => {\n    const textarea = ref.current;\n    if (!textarea) return;\n\n    // Store current scroll position\n    const scrollTop = window.scrollY;\n\n    // Reset height to calculate scrollHeight correctly\n    textarea.style.height = 'auto';\n    textarea.style.overflow = 'hidden';\n\n    // Calculate heights based on rows\n    const minHeight = minRows * lineHeight;\n    const maxHeight = maxRows ? maxRows * lineHeight : Infinity;\n\n    // Get the actual content height\n    const { scrollHeight } = textarea;\n\n    // Clamp between min and max\n    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);\n\n    textarea.style.height = `${newHeight}px`;\n\n    // Show scrollbar if content exceeds maxHeight\n    if (maxRows && scrollHeight > maxHeight) {\n      textarea.style.overflow = 'auto';\n    }\n\n    // Restore scroll position to prevent jumping\n    window.scrollTo(0, scrollTop);\n  }, [ref, minRows, maxRows, lineHeight]);\n\n  // Adjust height when value changes\n  useEffect(() => {\n    adjustHeight();\n  }, [value, adjustHeight]);\n\n  // Adjust height when container width changes (text might wrap differently)\n  useEffect(() => {\n    if (containerRect.width > 0) {\n      adjustHeight();\n    }\n  }, [containerRect.width, adjustHeight]);\n\n  // Initial adjustment on mount\n  useEffect(() => {\n    // Small delay to ensure styles are applied\n    const timer = setTimeout(adjustHeight, 0);\n    return () => clearTimeout(timer);\n  }, [adjustHeight]);\n\n  return { containerRef, adjustHeight };\n}\n\n// ============================================================================\n// Provider Context & Types\n// ============================================================================\n\nexport type AttachmentsContext = {\n  files: (FileUIPart & { id: string })[];\n  add: (files: File[] | FileList) => void;\n  remove: (id: string) => void;\n  clear: () => void;\n  openFileDialog: () => void;\n  fileInputRef: RefObject<HTMLInputElement | null>;\n  /** Dropzone state - true when files are being dragged over the drop target */\n  isDragActive: boolean;\n  /** Dropzone state - true when dragged files match the accept criteria */\n  isDragAccept: boolean;\n  /** Dropzone state - true when dragged files don't match the accept criteria */\n  isDragReject: boolean;\n};\n\nexport type TextInputContext = {\n  value: string;\n  setInput: (v: string) => void;\n  clear: () => void;\n};\n\nexport type PromptInputControllerProps = {\n  textInput: TextInputContext;\n  attachments: AttachmentsContext;\n  /** INTERNAL: Allows PromptInput to register its file textInput + \"open\" callback */\n  registerFileInput: (ref: RefObject<HTMLInputElement | null>, open: () => void) => void;\n};\n\nconst PromptInputController = createContext<PromptInputControllerProps | null>(null);\nconst ProviderAttachmentsContext = createContext<AttachmentsContext | null>(null);\n\nexport const usePromptInputController = () => {\n  const ctx = useContext(PromptInputController);\n  if (!ctx) {\n    throw new Error(\n      'Wrap your component inside <PromptInputProvider> to use usePromptInputController().',\n    );\n  }\n  return ctx;\n};\n\n// Optional variants (do NOT throw). Useful for dual-mode components.\nconst useOptionalPromptInputController = () => useContext(PromptInputController);\n\nexport const useProviderAttachments = () => {\n  const ctx = useContext(ProviderAttachmentsContext);\n  if (!ctx) {\n    throw new Error(\n      'Wrap your component inside <PromptInputProvider> to use useProviderAttachments().',\n    );\n  }\n  return ctx;\n};\n\nconst useOptionalProviderAttachments = () => useContext(ProviderAttachmentsContext);\n\nexport type PromptInputProviderProps = PropsWithChildren<{\n  initialInput?: string;\n  /** Callback for auto-saving drafts when user goes idle (5 seconds) */\n  onSaveDraft?: (text: string) => void;\n  /** Idle timeout in milliseconds before saving draft (default: 5000) */\n  idleTimeout?: number;\n}>;\n\n/**\n * Provides a shared PromptInput controller and attachments context so descendant PromptInput components can share text input and file attachments.\n *\n * @param initialInput - Initial text value for the shared input (defaults to an empty string)\n * @param onSaveDraft - Callback invoked when user goes idle to auto-save draft\n * @param idleTimeout - Time in milliseconds before triggering draft save (default: 5000)\n * @param children - React children that will consume the provider\n */\nexport function PromptInputProvider({\n  initialInput: initialTextInput = '',\n  onSaveDraft,\n  idleTimeout = 5000,\n  children,\n}: PromptInputProviderProps) {\n  // ----- textInput state\n  const [textInput, setTextInput] = useState(initialTextInput);\n  const clearInput = useCallback(() => setTextInput(''), []);\n\n  // Auto-save drafts when user goes idle (5 seconds by default)\n  const isIdle = useIdle(idleTimeout);\n  const lastSavedRef = useRef<string>('');\n\n  // Save draft when user goes idle and text has changed\n  useEffect(() => {\n    if (isIdle && textInput && textInput !== lastSavedRef.current && onSaveDraft) {\n      onSaveDraft(textInput);\n      lastSavedRef.current = textInput;\n    }\n  }, [isIdle, textInput, onSaveDraft]);\n\n  // ----- attachments state (global when wrapped)\n  const [attachements, setAttachements] = useState<(FileUIPart & { id: string })[]>([]);\n  const fileInputRef = useRef<HTMLInputElement | null>(null);\n  const openRef = useRef<() => void>(() => {});\n\n  const add = useCallback((files: File[] | FileList) => {\n    const incoming = [...files];\n    if (incoming.length === 0) {\n      return;\n    }\n\n    setAttachements(prev => [\n      ...prev,\n      ...incoming.map(file => ({\n        id: nanoid(),\n        type: 'file' as const,\n        url: URL.createObjectURL(file),\n        mediaType: file.type,\n        filename: file.name,\n      })),\n    ]);\n  }, []);\n\n  const remove = useCallback((id: string) => {\n    setAttachements(prev => {\n      const found = prev.find(f => f.id === id);\n      if (found?.url) {\n        URL.revokeObjectURL(found.url);\n      }\n      return prev.filter(f => f.id !== id);\n    });\n  }, []);\n\n  const clear = useCallback(() => {\n    setAttachements(prev => {\n      for (const f of prev) {\n        if (f.url) {\n          URL.revokeObjectURL(f.url);\n        }\n      }\n      return [];\n    });\n  }, []);\n\n  const openFileDialog = useCallback(() => {\n    openRef.current();\n  }, []);\n\n  // Track dropzone state from the registered PromptInput\n  const [dropzoneState, _setDropzoneState] = useState({\n    isDragActive: false,\n    isDragAccept: false,\n    isDragReject: false,\n  });\n\n  const attachments = useMemo<AttachmentsContext>(\n    () => ({\n      files: attachements,\n      add,\n      remove,\n      clear,\n      openFileDialog,\n      fileInputRef,\n      // Dropzone state (updated by PromptInput when registered)\n      ...dropzoneState,\n    }),\n    [attachements, add, remove, clear, openFileDialog, dropzoneState],\n  );\n\n  const registerFileInput = useCallback(\n    (ref: RefObject<HTMLInputElement | null>, open: () => void) => {\n      fileInputRef.current = ref.current;\n      openRef.current = open;\n    },\n    [],\n  );\n\n  const controller = useMemo<PromptInputControllerProps>(\n    () => ({\n      textInput: {\n        value: textInput,\n        setInput: setTextInput,\n        clear: clearInput,\n      },\n      attachments,\n      registerFileInput,\n    }),\n    [textInput, clearInput, attachments, registerFileInput],\n  );\n\n  return (\n    <PromptInputController.Provider value={controller}>\n      <ProviderAttachmentsContext.Provider value={attachments}>\n        {children}\n      </ProviderAttachmentsContext.Provider>\n    </PromptInputController.Provider>\n  );\n}\n\n// ============================================================================\n// Component Context & Hooks\n// ============================================================================\n\nconst LocalAttachmentsContext = createContext<AttachmentsContext | null>(null);\n\n// ============================================================================\n// Inline Mode Context\n// ============================================================================\n\ntype InlineModeContextValue = {\n  inline: boolean;\n  onCancel?: () => void;\n};\n\nconst InlineModeContext = createContext<InlineModeContextValue>({ inline: false });\n\n/**\n * Hook to access inline mode state from child components\n */\nexport const usePromptInputInlineMode = () => useContext(InlineModeContext);\n\nexport const usePromptInputAttachments = () => {\n  // Dual-mode: prefer provider if present, otherwise use local\n  const provider = useOptionalProviderAttachments();\n  const local = useContext(LocalAttachmentsContext);\n  const context = provider ?? local;\n  if (!context) {\n    throw new Error(\n      'usePromptInputAttachments must be used within a PromptInput or PromptInputProvider',\n    );\n  }\n  return context;\n};\n\n/**\n * Hook to access the dropzone state from within PromptInput.\n * Useful for building custom drag-and-drop UI overlays.\n *\n * @example\n * ```tsx\n * function MyDropzone() {\n *   const { isDragActive, isDragAccept, isDragReject } = usePromptInputDropzone();\n *   return (\n *     <div className={isDragActive ? 'bg-primary/10' : ''}>\n *       {isDragActive ? 'Drop files here...' : 'Drag files to upload'}\n *     </div>\n *   );\n * }\n * ```\n */\nexport const usePromptInputDropzone = () => {\n  const ctx = usePromptInputAttachments();\n  return {\n    /** True when files are being dragged over the drop target */\n    isDragActive: ctx.isDragActive,\n    /** True when dragged files match the accept criteria */\n    isDragAccept: ctx.isDragAccept,\n    /** True when dragged files don't match the accept criteria */\n    isDragReject: ctx.isDragReject,\n  };\n};\n\nexport type PromptInputAttachmentProps = HTMLAttributes<HTMLDivElement> & {\n  data: FileUIPart & { id: string };\n  className?: string;\n};\n\nexport function PromptInputAttachment({ data, className, ...props }: PromptInputAttachmentProps) {\n  const attachments = usePromptInputAttachments();\n  // Premium Harmony V2: Reduced motion support\n  const reducedMotion = useReducedMotion();\n\n  const filename = data.filename ?? '';\n\n  const mediaType = data.mediaType.startsWith('image/') && data.url ? 'image' : 'file';\n  const isImage = mediaType === 'image';\n\n  const attachmentLabel = filename ?? (isImage ? 'Image' : 'Attachment');\n\n  return (\n    <PromptInputHoverCard>\n      <HoverCardTrigger asChild>\n        <div\n          className={cn(\n            'group border-border hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 relative flex h-8 cursor-default items-center gap-1.5 border px-1.5 font-medium select-none',\n            AI_NESTED_RADIUS,\n            AI_TEXT.sm,\n            // Premium Harmony V2: Respect reduced motion\n            reducedMotion ? 'transition-none' : AI_TRANSITION.all,\n            className,\n          )}\n          key={data.id}\n          data-type={mediaType}\n          data-filename={filename}\n          {...props}\n        >\n          <div className=\"relative size-5 shrink-0\">\n            <div className=\"bg-background absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded transition-opacity group-hover:opacity-0\">\n              {isImage ? (\n                <img\n                  alt={filename || 'attachment'}\n                  className=\"size-5 object-cover\"\n                  height={20}\n                  src={data.url}\n                  width={20}\n                />\n              ) : (\n                <div className=\"text-muted-foreground flex size-5 items-center justify-center\">\n                  <PaperclipIcon className=\"size-3\" />\n                </div>\n              )}\n            </div>\n            <Button\n              aria-label=\"Remove attachment\"\n              className=\"absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                e.stopPropagation();\n                attachments.remove(data.id);\n              }}\n              type=\"button\"\n              variant=\"ghost\"\n            >\n              <XIcon />\n              <span className=\"sr-only\">Remove</span>\n            </Button>\n          </div>\n\n          <span className=\"flex-1 truncate\">{attachmentLabel}</span>\n        </div>\n      </HoverCardTrigger>\n      <PromptInputHoverCardContent className=\"w-auto p-2\">\n        <div className=\"w-auto space-y-3\">\n          {isImage ? (\n            <div className=\"flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border\">\n              <img\n                alt={filename || 'attachment preview'}\n                className=\"max-h-full max-w-full object-contain\"\n                height={384}\n                src={data.url}\n                width={448}\n              />\n            </div>\n          ) : null}\n          <div className=\"flex items-center gap-2.5\">\n            <div className=\"min-w-0 flex-1 space-y-1 px-0.5\">\n              <h4 className=\"truncate text-sm leading-none font-semibold\">\n                {filename ?? (isImage ? 'Image' : 'Attachment')}\n              </h4>\n              {data.mediaType ? (\n                <p className=\"text-muted-foreground truncate font-mono text-xs\">{data.mediaType}</p>\n              ) : null}\n            </div>\n          </div>\n        </div>\n      </PromptInputHoverCardContent>\n    </PromptInputHoverCard>\n  );\n}\n\nexport type PromptInputAttachmentsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {\n  children: (attachment: FileUIPart & { id: string }) => ReactNode;\n};\n\nexport function PromptInputAttachments({\n  children,\n  className,\n  ...props\n}: PromptInputAttachmentsProps) {\n  const attachments = usePromptInputAttachments();\n  // Premium Harmony V2: Reduced motion support\n  const reducedMotion = useReducedMotion();\n\n  // Premium Harmony V2: Memoized animation variants with spring physics\n  const itemVariants = useMemo(\n    () => ({\n      initial: { scale: 0.8, opacity: 0 },\n      animate: {\n        scale: 1,\n        opacity: 1,\n        transition: reducedMotion ? { duration: 0 } : SPRING_GENTLE,\n      },\n      exit: {\n        scale: 0.8,\n        opacity: 0,\n        transition: reducedMotion ? { duration: 0 } : SPRING_FLUID,\n      },\n    }),\n    [reducedMotion],\n  );\n\n  if (!attachments.files.length) {\n    return null;\n  }\n\n  return (\n    <div className={cn('flex flex-wrap items-center', AI_SPACING.xs, 'p-3', className)} {...props}>\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        {attachments.files.map(file => (\n          <motion.div\n            key={file.id}\n            variants={itemVariants}\n            initial=\"initial\"\n            animate=\"animate\"\n            exit=\"exit\"\n            layout={!reducedMotion}\n          >\n            {children(file)}\n          </motion.div>\n        ))}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport type PromptInputActionAddAttachmentsProps = ComponentProps<typeof DropdownMenuItem> & {\n  label?: string;\n};\n\nexport const PromptInputActionAddAttachments = ({\n  label = 'Add photos or files',\n  ...props\n}: PromptInputActionAddAttachmentsProps) => {\n  const attachments = usePromptInputAttachments();\n\n  return (\n    <DropdownMenuItem\n      {...props}\n      onSelect={(e: Event) => {\n        e.preventDefault();\n        attachments.openFileDialog();\n      }}\n    >\n      <ImageIcon className={cn('mr-2', AI_ICON.md)} /> {label}\n    </DropdownMenuItem>\n  );\n};\n\nexport type PromptInputMessage = {\n  text?: string;\n  files?: FileUIPart[];\n};\n\nexport type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onError'> & {\n  accept?: string; // e.g., \"image/*\" or leave undefined for any\n  multiple?: boolean;\n  // When true, accepts drops anywhere on document. Default false (opt-in).\n  globalDrop?: boolean;\n  // Render a hidden input with given name and keep it in sync for native form posts. Default false.\n  syncHiddenInput?: boolean;\n  // Minimal constraints\n  maxFiles?: number;\n  maxFileSize?: number; // bytes\n  /** Maximum file size in MB (convenience prop, converted to bytes internally) */\n  maxFileSizeMB?: number;\n  onError?: (err: { code: 'max_files' | 'max_file_size' | 'accept'; message: string }) => void;\n  onSubmit: (\n    message: PromptInputMessage,\n    event: FormEvent<HTMLFormElement>,\n  ) => void | Promise<void>;\n  /**\n   * Enable inline edit mode - minimal UI for editing existing messages\n   * Hides wand icon, changes submit button to dark style, adds glow border\n   */\n  inline?: boolean;\n  /**\n   * Callback when cancel is triggered (Cancel button click or Escape key)\n   * Only relevant when inline={true}\n   */\n  onCancel?: () => void;\n  /** Children elements to render inside the input group */\n  children?: ReactNode;\n};\n\nexport const PromptInput = ({\n  className,\n  accept,\n  multiple,\n  globalDrop,\n  syncHiddenInput,\n  maxFiles,\n  maxFileSize,\n  maxFileSizeMB,\n  onError,\n  onSubmit,\n  inline = false,\n  onCancel,\n  children,\n  ...props\n}: PromptInputProps) => {\n  // Convert MB to bytes if maxFileSizeMB is provided\n  const effectiveMaxFileSize = maxFileSizeMB ? maxFileSizeMB * 1024 * 1024 : maxFileSize;\n  // Try to use a provider controller if present\n  const controller = useOptionalPromptInputController();\n  const usingProvider = Boolean(controller);\n  // Premium Harmony V2: Reduced motion support\n  const reducedMotion = useReducedMotion();\n\n  // Inline mode context value\n  const inlineModeValue = useMemo<InlineModeContextValue>(\n    () => ({ inline, onCancel }),\n    [inline, onCancel],\n  );\n\n  // Refs\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  // Find nearest form to scope drag & drop\n  useEffect(() => {\n    const root = anchorRef.current?.closest('form');\n    if (root instanceof HTMLFormElement) {\n      formRef.current = root;\n    }\n  }, []);\n\n  // ----- Local attachments (only used when no provider)\n  const [items, setItems] = useState<(FileUIPart & { id: string })[]>([]);\n  const files = usingProvider && controller ? controller.attachments.files : items;\n\n  const _openFileDialogLocal = useCallback(() => {\n    inputRef.current?.click();\n  }, []);\n\n  const matchesAccept = useCallback(\n    (f: File) => {\n      if (!accept || accept.trim() === '') {\n        return true;\n      }\n      if (accept.includes('image/*')) {\n        return f.type.startsWith('image/');\n      }\n      // NOTE: keep simple; expand as needed\n      return true;\n    },\n    [accept],\n  );\n\n  const addLocal = useCallback(\n    (fileList: File[] | FileList) => {\n      const incoming = [...fileList];\n      const accepted = incoming.filter(f => matchesAccept(f));\n      if (incoming.length && accepted.length === 0) {\n        onError?.({\n          code: 'accept',\n          message: 'No files match the accepted types.',\n        });\n        return;\n      }\n      const sized = accepted.filter(f =>\n        effectiveMaxFileSize ? f.size <= effectiveMaxFileSize : true,\n      );\n      if (accepted.length > 0 && sized.length === 0) {\n        onError?.({\n          code: 'max_file_size',\n          message: 'All files exceed the maximum size.',\n        });\n        return;\n      }\n\n      setItems(prev => {\n        const capacity =\n          typeof maxFiles === 'number' ? Math.max(0, maxFiles - prev.length) : undefined;\n        const capped = typeof capacity === 'number' ? sized.slice(0, capacity) : sized;\n        if (typeof capacity === 'number' && sized.length > capacity) {\n          onError?.({\n            code: 'max_files',\n            message: 'Too many files. Some were not added.',\n          });\n        }\n        const next: (FileUIPart & { id: string })[] = capped.map(file => ({\n          id: nanoid(),\n          type: 'file',\n          url: URL.createObjectURL(file),\n          mediaType: file.type,\n          filename: file.name,\n        }));\n        return [...prev, ...next];\n      });\n    },\n    [matchesAccept, maxFiles, effectiveMaxFileSize, onError],\n  );\n\n  const removeLocal = useCallback((id: string) => {\n    setItems(prev => {\n      const found = prev.find(file => file.id === id);\n      if (found?.url) {\n        URL.revokeObjectURL(found.url);\n      }\n      return prev.filter(file => file.id !== id);\n    });\n  }, []);\n\n  const clearLocal = useCallback(() => {\n    setItems(prev => {\n      for (const file of prev) {\n        if (file.url) {\n          URL.revokeObjectURL(file.url);\n        }\n      }\n      return [];\n    });\n  }, []);\n\n  const add = useMemo(\n    () => (controller ? (files: File[] | FileList) => controller.attachments.add(files) : addLocal),\n    [controller, addLocal],\n  );\n\n  const remove = useMemo(\n    () => (controller ? (id: string) => controller.attachments.remove(id) : removeLocal),\n    [controller, removeLocal],\n  );\n\n  const clear = useMemo(\n    () => (controller ? () => controller.attachments.clear() : clearLocal),\n    [controller, clearLocal],\n  );\n\n  // Note: File input cannot be programmatically set for security reasons\n  // The syncHiddenInput prop is no longer functional\n  useEffect(() => {\n    if (syncHiddenInput && inputRef.current && files.length === 0) {\n      inputRef.current.value = '';\n    }\n  }, [files, syncHiddenInput]);\n\n  // ---- React Dropzone Integration ----\n  // Handle accepted files from dropzone\n  const onDrop = useCallback(\n    (acceptedFiles: File[], fileRejections: FileRejection[]) => {\n      // Handle rejections\n      if (fileRejections.length > 0) {\n        const firstRejection = fileRejections[0];\n        if (firstRejection) {\n          const errorCode = firstRejection.errors[0]?.code;\n\n          if (errorCode === 'file-invalid-type') {\n            onError?.({\n              code: 'accept',\n              message: 'File type not accepted.',\n            });\n          } else if (errorCode === 'file-too-large') {\n            onError?.({\n              code: 'max_file_size',\n              message: 'File exceeds the maximum size.',\n            });\n          } else if (errorCode === 'too-many-files') {\n            onError?.({\n              code: 'max_files',\n              message: 'Too many files.',\n            });\n          }\n        }\n      }\n\n      // Add accepted files\n      if (acceptedFiles.length > 0) {\n        add(acceptedFiles);\n      }\n    },\n    [add, onError],\n  );\n\n  // Configure react-dropzone\n  const dropzoneOptions: any = useMemo(\n    () => ({\n      onDrop,\n      accept: accept\n        ? accept.split(',').reduce(\n            (acc, type) => {\n              const trimmed = type.trim();\n              // Handle wildcards like \"image/*\"\n              if (trimmed.includes('/*')) {\n                acc[trimmed] = [];\n              } else {\n                // Handle specific extensions or MIME types\n                acc[trimmed] = [];\n              }\n              return acc;\n            },\n            {} as Record<string, string[]>,\n          )\n        : undefined,\n      multiple: multiple ?? true,\n      maxFiles,\n      maxSize: effectiveMaxFileSize,\n      noClick: true, // We handle click via openFileDialog\n      noKeyboard: true, // Don't interfere with textarea keyboard\n      preventDropOnDocument: !globalDrop, // Only prevent if not using global drop\n    }),\n    [onDrop, accept, multiple, maxFiles, effectiveMaxFileSize, globalDrop],\n  );\n\n  const {\n    getRootProps,\n    getInputProps,\n    isDragActive,\n    isDragAccept,\n    isDragReject,\n    open: dropzoneOpen,\n  } = useDropzone(dropzoneOptions);\n\n  // Override openFileDialog to use dropzone's open when available\n  const effectiveOpenFileDialog = useCallback(() => {\n    dropzoneOpen();\n  }, [dropzoneOpen]);\n\n  // Let provider know about our hidden file input so external menus can call openFileDialog()\n  useEffect(() => {\n    if (!usingProvider || !controller) return;\n    controller.registerFileInput(inputRef, effectiveOpenFileDialog);\n  }, [usingProvider, controller, effectiveOpenFileDialog]);\n\n  useEffect(\n    () => () => {\n      if (!usingProvider) {\n        for (const f of files) {\n          if (f.url) URL.revokeObjectURL(f.url);\n        }\n      }\n    },\n    [usingProvider, files],\n  );\n\n  const ctx = useMemo<AttachmentsContext>(\n    () => ({\n      files: files.map(item => ({ ...item, id: item.id })),\n      add,\n      remove,\n      clear,\n      openFileDialog: effectiveOpenFileDialog,\n      fileInputRef: inputRef,\n      // Dropzone state\n      isDragActive,\n      isDragAccept,\n      isDragReject,\n    }),\n    [files, add, remove, clear, effectiveOpenFileDialog, isDragActive, isDragAccept, isDragReject],\n  );\n\n  const handleSubmit: FormEventHandler<HTMLFormElement> = event => {\n    event.preventDefault();\n\n    const form = event.currentTarget;\n    const text =\n      usingProvider && controller\n        ? controller.textInput.value\n        : (() => {\n            const formData = new FormData(form);\n            const message = formData.get('message');\n            return typeof message === 'string' ? message : '';\n          })();\n\n    // Reset form immediately after capturing text to avoid race condition\n    // where user input during async blob conversion would be lost\n    if (!usingProvider) {\n      form.reset();\n    }\n\n    // Convert blob URLs to data URLs and submit asynchronously\n    const processAndSubmit = async () => {\n      const convertedFiles = await Promise.all(\n        files.map(async fileWithId => {\n          // Exclude id from item for submission\n          const item: FileUIPart = {\n            type: fileWithId.type,\n            url: fileWithId.url,\n            mediaType: fileWithId.mediaType,\n            filename: fileWithId.filename,\n          };\n          if (item.url.startsWith('blob:')) {\n            return {\n              ...item,\n              url: await convertBlobUrlToDataUrl(item.url),\n            };\n          }\n          return item;\n        }),\n      );\n\n      try {\n        const result = onSubmit({ text, files: convertedFiles }, event);\n\n        // Handle both sync and async onSubmit\n        if (result instanceof Promise) {\n          try {\n            await result;\n            clear();\n            if (usingProvider && controller) {\n              controller.textInput.clear();\n            }\n          } catch {\n            // Don't clear on error - user may want to retry\n          }\n        } else {\n          // Sync function completed without throwing, clear attachments\n          clear();\n          if (usingProvider && controller) {\n            controller.textInput.clear();\n          }\n        }\n      } catch {\n        // Don't clear on error - user may want to retry\n      }\n    };\n\n    void processAndSubmit();\n  };\n\n  // Get dropzone props, excluding onSubmit to not conflict with form handler\n  const { onSubmit: _dropzoneOnSubmit, ...rootProps } = getRootProps();\n\n  // Render with or without local provider\n  const inner = (\n    <InlineModeContext.Provider value={inlineModeValue}>\n      <span aria-hidden=\"true\" className=\"hidden\" ref={anchorRef} />\n      {/* React Dropzone hidden file input */}\n      {!inline && <input {...getInputProps()} ref={inputRef} />}\n      <form className={cn('w-full', className)} onSubmit={handleSubmit} {...rootProps} {...props}>\n        <InputGroup\n          className={cn(\n            // Figma design: white background, light gray border, 12px radius, 12px padding\n            'bg-surface text-foreground rounded-xl p-3',\n            // Flex column layout - no gap so empty header doesn't add space\n            'flex flex-col items-stretch justify-between',\n            // Premium Harmony V2: Respect reduced motion for transitions\n            reducedMotion ? 'transition-none' : 'transition-all duration-200',\n            // Override default InputGroup focus ring styles\n            'has-[[data-slot=input-group-control]:focus-visible]:ring-0',\n            // Override child component padding to maintain consistent 12px wrapper padding\n            '[&_[data-slot=input-group-control]]:py-0',\n            '[&_[data-slot=input-group-addon]]:p-0',\n            // Conditional styling based on inline mode\n            inline\n              ? [\n                  // Inline mode: always show glow border, no min-height\n                  'border-primary/30 h-auto',\n                  // Premium Harmony V2: Semantic shadow using primary color\n                  'shadow-[0_0_0_4px_color-mix(in_oklab,var(--color-primary),transparent_80%)]',\n                ]\n              : [\n                  // Default mode: gray border, min-height, focus glow\n                  'border-border shadow-none',\n                  'h-auto min-h-[136px]',\n                  'has-[[data-slot=input-group-control]:focus-visible]:border-primary/30',\n                  // Focus glow with subtle pulse animation (respects reduced motion)\n                  'focus-within:border-primary/30',\n                  !reducedMotion && 'focus-within:animate-focus-pulse',\n                  'focus-within:shadow-[0_0_0_4px_color-mix(in_oklab,var(--color-primary),transparent_80%)]',\n                ],\n            // Visual feedback when dragging files over\n            isDragActive &&\n              !inline && [\n                'border-primary/50',\n                'bg-primary/5',\n                'shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-primary),0.1)]',\n              ],\n            isDragReject && !inline && ['border-destructive/50', 'bg-destructive/5'],\n          )}\n          data-inline={inline ?? undefined}\n          data-drag-active={isDragActive || undefined}\n          data-drag-accept={isDragAccept || undefined}\n          data-drag-reject={isDragReject || undefined}\n        >\n          {children}\n        </InputGroup>\n      </form>\n    </InlineModeContext.Provider>\n  );\n\n  return usingProvider ? (\n    inner\n  ) : (\n    <LocalAttachmentsContext.Provider value={ctx}>{inner}</LocalAttachmentsContext.Provider>\n  );\n};\n\nexport type PromptInputBodyProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PromptInputBody = ({ className, ...props }: PromptInputBodyProps) => (\n  <div className={cn('contents', className)} {...props} />\n);\n\nexport type PromptInputTextareaProps = ComponentProps<typeof InputGroupTextarea> & {\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Minimum number of rows (default: 1) */\n  minRows?: number;\n  /** Maximum number of rows before scrolling (default: 12, ~192px) */\n  maxRows?: number;\n};\n\n/**\n * PromptInputTextarea - Auto-expanding textarea with keyboard shortcuts\n *\n * Supports both controlled (value/onChange) and uncontrolled (defaultValue) modes\n * via Mantine's useUncontrolled hook.\n *\n * @keyboard\n * - Cmd/Ctrl+Enter: Submit form\n * - Backspace (when empty): Remove last attachment\n * - Escape: Blur textarea\n */\nexport const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTextareaProps>(\n  (\n    {\n      value: valueProp,\n      defaultValue,\n      onChange,\n      className,\n      placeholder = 'Ask me anything...',\n      minRows = 1,\n      maxRows = 12,\n      ...props\n    },\n    ref,\n  ) => {\n    const controller = useOptionalPromptInputController();\n    const attachments = usePromptInputAttachments();\n    const { inline, onCancel } = usePromptInputInlineMode();\n    const [isComposing, setIsComposing] = useState(false);\n    const internalRef = useRef<HTMLTextAreaElement>(null);\n\n    // Use Mantine's useFocusReturn to restore focus after form submission\n    // This improves UX by letting users continue typing immediately after sending\n    const focusReturnRef = useFocusReturn({ opened: true, shouldReturnFocus: true });\n\n    // Combine forwarded ref with internal ref using Mantine's useMergedRef\n    const mergedRef = useMergedRef(ref, internalRef, focusReturnRef);\n\n    // Use Mantine's useUncontrolled for controlled/uncontrolled mode support\n    // When controller is present, it takes precedence\n    const controllerValue = controller?.textInput.value;\n    const [value, handleValueChange] = useUncontrolled({\n      value: controllerValue ?? (typeof valueProp === 'string' ? valueProp : undefined),\n      defaultValue: defaultValue ?? '',\n      finalValue: '',\n      onChange: (newValue: string) => {\n        if (controller) {\n          controller.textInput.setInput(newValue);\n        }\n      },\n    });\n\n    // Auto-resize textarea based on content using Mantine's useResizeObserver\n    const { containerRef } = useTextareaAutosize(internalRef, value, {\n      minRows,\n      maxRows,\n      lineHeight: 20, // matches leading-5 (1.25rem = 20px)\n    });\n\n    // Global keyboard shortcuts using Mantine's useHotkeys\n    useHotkeys(\n      [\n        // Cmd/Ctrl+Enter to submit\n        [\n          'mod+Enter',\n          () => {\n            if (isComposing) return;\n            const form = internalRef.current?.closest('form');\n            const submitButton = form?.querySelector(\n              'button[type=\"submit\"]',\n            ) as HTMLButtonElement | null;\n            if (submitButton?.disabled) return;\n            form?.requestSubmit();\n          },\n          { preventDefault: true },\n        ],\n        // Escape: trigger onCancel in inline mode, otherwise just blur\n        [\n          'Escape',\n          () => {\n            if (inline && onCancel) {\n              onCancel();\n            } else {\n              internalRef.current?.blur();\n            }\n          },\n        ],\n      ],\n      [], // Empty array = don't ignore any element types (handle in textarea)\n    );\n\n    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = e => {\n      // Cmd/Ctrl+Enter to submit (Enter alone creates new line)\n      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n        if (isComposing || e.nativeEvent.isComposing) {\n          return;\n        }\n        e.preventDefault();\n\n        // Check if the submit button is disabled before submitting\n        const { form } = e.currentTarget;\n        const submitButton = form?.querySelector(\n          'button[type=\"submit\"]',\n        ) as HTMLButtonElement | null;\n        if (submitButton?.disabled) {\n          return;\n        }\n\n        form?.requestSubmit();\n      }\n\n      // Remove last attachment when Backspace is pressed and textarea is empty\n      if (e.key === 'Backspace' && e.currentTarget.value === '' && attachments.files.length > 0) {\n        e.preventDefault();\n        const lastAttachment = attachments.files.at(-1);\n        if (lastAttachment) {\n          attachments.remove(lastAttachment.id);\n        }\n      }\n    };\n\n    const handlePaste: ClipboardEventHandler<HTMLTextAreaElement> = event => {\n      const { items } = event.clipboardData;\n      const files: File[] = [];\n\n      for (const item of items) {\n        if (item.kind === 'file') {\n          const file = item.getAsFile();\n          if (file) {\n            files.push(file);\n          }\n        }\n      }\n\n      if (files.length > 0) {\n        event.preventDefault();\n        attachments.add(files);\n      }\n    };\n\n    const handleChange: ChangeEventHandler<HTMLTextAreaElement> = e => {\n      handleValueChange(e.currentTarget.value);\n      onChange?.(e);\n    };\n\n    return (\n      <div ref={containerRef} className=\"flex w-full flex-1 items-start gap-1 self-start\">\n        {/* Magic wand icon - hidden in inline mode */}\n        {!inline && (\n          <PromptInputButton variant=\"ghost\" className=\"shrink-0 opacity-80\">\n            <WandSparklesIcon className={AI_ICON.md} />\n          </PromptInputButton>\n        )}\n        <InputGroupTextarea\n          ref={mergedRef}\n          className={cn(\n            // Auto-grow handled by useTextareaAutosize hook\n            'min-h-5 resize-none py-0',\n            // Figma typography: 14px when typing, placeholder styled separately\n            'text-foreground text-sm leading-5',\n            'placeholder:text-foreground-subtle placeholder:text-xs placeholder:leading-4 placeholder:opacity-75',\n            // Top margin only when wand icon is visible (aligns with icon)\n            !inline && 'mt-1.5',\n            className,\n          )}\n          name=\"message\"\n          onCompositionEnd={() => setIsComposing(false)}\n          onCompositionStart={() => setIsComposing(true)}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          placeholder={placeholder}\n          value={value}\n          onChange={handleChange}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\n\nPromptInputTextarea.displayName = 'PromptInputTextarea';\n\nexport type PromptInputHeaderProps = Omit<ComponentProps<typeof InputGroupAddon>, 'align'>;\n\nexport const PromptInputHeader = ({ className, ...props }: PromptInputHeaderProps) => (\n  <InputGroupAddon\n    align=\"block-end\"\n    className={cn(\n      'order-first flex-wrap gap-1',\n      // Hide when empty (no attachments), add spacing only when visible\n      'empty:hidden [&:not(:empty)]:mb-3',\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type PromptInputFooterProps = Omit<ComponentProps<typeof InputGroupAddon>, 'align'>;\n\nexport const PromptInputFooter = ({ className, ...props }: PromptInputFooterProps) => (\n  <InputGroupAddon\n    align=\"block-end\"\n    className={cn('mt-3 w-full shrink-0 items-center justify-between gap-4', className)}\n    {...props}\n  />\n);\n\nexport type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * Left-side tools container with 5px gap (per Figma design)\n */\nexport const PromptInputTools = ({ className, ...props }: PromptInputToolsProps) => (\n  <div className={cn('flex items-center gap-[5px]', className)} {...props} />\n);\n\nexport type PromptInputActionsProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * Right-side actions container with 16px gap (per Figma design)\n * Contains mic button and send button\n */\nexport const PromptInputActions = ({ className, ...props }: PromptInputActionsProps) => (\n  <div className={cn('flex items-center gap-4', className)} {...props} />\n);\n\n/**\n * Tools button component matching Figma design.\n * Shows an icon with \"Tools\" text label.\n */\nexport type PromptInputToolsButtonProps = PromptInputButtonProps & {\n  label?: string;\n};\n\nexport const PromptInputToolsButton = ({\n  className,\n  label = 'Tools',\n  children,\n  ...props\n}: PromptInputToolsButtonProps) => (\n  <PromptInputButton\n    className={cn(\n      // Figma: px-[12px] py-[6px] gap-[8px]\n      AI_SPACING.xs,\n      'px-3 py-1.5',\n      'flex items-center justify-center',\n      className,\n    )}\n    {...props}\n  >\n    {children ?? <SlidersHorizontalIcon className={AI_ICON.lg} />}\n    <span\n      className={cn('text-foreground-subtle leading-5 font-medium whitespace-nowrap', AI_TEXT.sm)}\n    >\n      {label}\n    </span>\n  </PromptInputButton>\n);\n\n/**\n * CVA variants for PromptInput buttons matching Figma AXIO.ai design\n * Premium Harmony V2: Uses AI_FOCUS for accessible focus styles\n * @see https://www.figma.com/design/9DTQx1GRsJA4zSScFUSego/AXIO.ai\n */\nexport const promptInputButtonVariants = cva(\n  // Base styles - uses AI_FOCUS for consistent focus-visible behavior\n  [\n    'rounded-lg text-sm font-medium transition-all duration-150',\n    'active:scale-[0.98]',\n    AI_FOCUS.ring,\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Default: Active/selected state - light blue bg\n        default: ['border border-primary/20 bg-primary/10 text-primary', 'hover:bg-primary/15'],\n        // Outline: Plus (+) and Tools buttons - white bg, gray border\n        outline: [\n          'border border-border bg-surface text-foreground',\n          'hover:bg-surface-subtle hover:text-foreground',\n        ],\n        // Ghost: Mic button - transparent, no border\n        ghost: ['border-0 bg-transparent text-foreground-subtle p-0', 'hover:opacity-80'],\n        // Filled: Send button - blue gradient\n        filled: [\n          'relative overflow-clip border border-primary text-primary-foreground',\n          'hover:opacity-90',\n          'disabled:active:scale-100',\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: 'outline',\n    },\n  },\n);\n\nexport type PromptInputButtonVariant = VariantProps<typeof promptInputButtonVariants>['variant'];\n\nexport type PromptInputButtonProps = React.ComponentProps<typeof Button> &\n  VariantProps<typeof promptInputButtonVariants>;\n\nexport const PromptInputButton = ({\n  variant = 'outline',\n  className,\n  size,\n  children,\n  ...props\n}: PromptInputButtonProps) => {\n  // Premium Harmony V2: Touch vs desktop detection for adaptive sizing\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n\n  // Ensure 44px minimum touch target on mobile (11 * 4px = 44px)\n  const buttonSize =\n    size ?? (Children.count(children) > 1 ? 'sm' : (isTouchDevice ? 'icon' : 'icon-sm'));\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size={buttonSize}\n      className={cn(\n        promptInputButtonVariants({ variant }),\n        // Ensure minimum 44px touch target on mobile\n        isTouchDevice && 'min-h-11 min-w-11',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Button>\n  );\n};\n\nexport type PromptInputActionMenuProps = ComponentProps<typeof DropdownMenu> & {\n  /** Custom click outside handler - called when clicking outside menu AND trigger */\n  onClickOutside?: () => void;\n};\n\n/**\n * PromptInputActionMenu - Dropdown menu with optional click-outside detection\n *\n * Uses Mantine's useClickOutside hook for advanced click-outside handling.\n * The default Radix behavior handles basic click-outside; use onClickOutside\n * for custom logic (e.g., closing multiple menus, analytics).\n */\nexport const PromptInputActionMenu = ({ onClickOutside, ...props }: PromptInputActionMenuProps) => {\n  // Only set up click outside handler if provided\n  const clickOutsideRef = useClickOutside<HTMLDivElement>(() => {\n    onClickOutside?.();\n  }, ['mousedown', 'touchstart']);\n\n  // Wrap in a div with ref only if onClickOutside is provided\n  if (onClickOutside) {\n    return (\n      <div ref={clickOutsideRef} className=\"contents\">\n        <DropdownMenu {...props} />\n      </div>\n    );\n  }\n\n  return <DropdownMenu {...props} />;\n};\n\nexport type PromptInputActionMenuTriggerProps = PromptInputButtonProps;\n\nexport const PromptInputActionMenuTrigger = ({\n  className,\n  children,\n  ...props\n}: PromptInputActionMenuTriggerProps) => (\n  <DropdownMenuTrigger asChild>\n    <PromptInputButton className={cn(AI_SPACING.xs, 'p-[7px]', className)} {...props}>\n      {children ?? <PlusIcon className={AI_ICON.lg} />}\n    </PromptInputButton>\n  </DropdownMenuTrigger>\n);\n\nexport type PromptInputActionMenuContentProps = ComponentProps<typeof DropdownMenuContent>;\n\n/**\n * PromptInputActionMenuContent - Styled dropdown menu content\n *\n * Uses Radix's built-in click-outside handling. For advanced click-outside logic,\n * use the `onInteractOutside` prop from Radix DropdownMenuContent.\n */\nexport const PromptInputActionMenuContent = ({\n  className,\n  ...props\n}: PromptInputActionMenuContentProps) => (\n  <DropdownMenuContent align=\"start\" className={cn(className)} {...props} />\n);\n\nexport type PromptInputActionMenuItemProps = ComponentProps<typeof DropdownMenuItem>;\nexport const PromptInputActionMenuItem = ({\n  className,\n  ...props\n}: PromptInputActionMenuItemProps) => <DropdownMenuItem className={cn(className)} {...props} />;\n\n// Note: Actions that perform side-effects (like opening a file dialog)\n// are provided in opt-in modules (e.g., prompt-input-attachments).\n\nexport type PromptInputSubmitProps = React.ComponentProps<typeof Button> & {\n  status?: ChatStatus;\n};\n\nexport const PromptInputSubmit = ({\n  className,\n  status,\n  children,\n  ...props\n}: PromptInputSubmitProps) => {\n  const { inline } = usePromptInputInlineMode();\n  // Premium Harmony V2: Touch vs desktop detection\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n  const reducedMotion = useReducedMotion();\n\n  // Premium Harmony V2: Memoized animation variants with spring physics\n  const iconVariants = useMemo(\n    () => ({\n      initial: { scale: 0.8, opacity: 0 },\n      animate: {\n        scale: 1,\n        opacity: 1,\n        transition: reducedMotion ? { duration: 0 } : SPRING_TACTILE,\n      },\n      exit: {\n        scale: 0.8,\n        opacity: 0,\n        transition: reducedMotion ? { duration: 0 } : SPRING_FLUID,\n      },\n    }),\n    [reducedMotion],\n  );\n\n  let Icon = <ArrowUpIcon className={AI_ICON.lg} />;\n  let iconKey = 'arrow';\n\n  if (status === 'submitted') {\n    Icon = <Loader2Icon className={cn(AI_ICON.lg, !reducedMotion && 'animate-spin')} />;\n    iconKey = 'loader';\n  } else if (status === 'streaming') {\n    Icon = <SquareIcon className={AI_ICON.lg} />;\n    iconKey = 'square';\n  } else if (status === 'error') {\n    Icon = <XIcon className={AI_ICON.lg} />;\n    iconKey = 'error';\n  }\n\n  // Inline mode: dark button style from Figma (node 15225:18614)\n  if (inline) {\n    return (\n      <Button\n        type=\"submit\"\n        variant=\"ghost\"\n        aria-label=\"Submit\"\n        className={cn(\n          // Compact inline CTA\n          'bg-foreground relative gap-1 overflow-clip rounded-lg border-0 py-1.5 pr-3 pl-1.5',\n          'text-background',\n          'hover:bg-foreground/90',\n          'disabled:opacity-50',\n          // Premium Harmony V2: 44px minimum touch target\n          isTouchDevice && 'min-h-11',\n          className,\n        )}\n        data-testid=\"prompt-input-submit\"\n        data-state={status ?? 'idle'}\n        data-loading={status === 'submitted' || status === 'streaming' ? '' : undefined}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <AnimatePresence mode=\"wait\" initial={false}>\n              <motion.div\n                key={iconKey}\n                variants={iconVariants}\n                initial=\"initial\"\n                animate=\"animate\"\n                exit=\"exit\"\n              >\n                {Icon}\n              </motion.div>\n            </AnimatePresence>\n            <span className=\"text-xs font-medium whitespace-nowrap\">Send</span>\n          </>\n        )}\n      </Button>\n    );\n  }\n\n  // Default mode: blue gradient button (semantic bg-primary for gradient base)\n  return (\n    <Button\n      type=\"submit\"\n      variant=\"ghost\"\n      aria-label=\"Submit\"\n      className={cn(\n        promptInputButtonVariants({ variant: 'filled' }),\n        // Figma: pl-[6px] pr-[12px] py-[6px] gap-[4px]\n        'gap-1 py-1.5 pr-3 pl-1.5',\n        // Premium Harmony V2: Semantic gradient using bg-primary\n        'from-primary to-primary bg-gradient-to-r',\n        // Premium Harmony V2: 44px minimum touch target\n        isTouchDevice && 'min-h-11',\n        className,\n      )}\n      data-testid=\"prompt-input-submit\"\n      data-state={status ?? 'idle'}\n      data-loading={status === 'submitted' || status === 'streaming' ? '' : undefined}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <AnimatePresence mode=\"wait\" initial={false}>\n            <motion.div\n              key={iconKey}\n              variants={iconVariants}\n              initial=\"initial\"\n              animate=\"animate\"\n              exit=\"exit\"\n            >\n              {Icon}\n            </motion.div>\n          </AnimatePresence>\n          <span className=\"whitespace-nowrap\">Send</span>\n        </>\n      )}\n      {/* Subtle highlight overlay for depth */}\n      <div\n        className=\"pointer-events-none absolute inset-0 rounded-lg bg-gradient-to-b from-white/10 to-transparent\"\n        aria-hidden=\"true\"\n      />\n    </Button>\n  );\n};\n\nexport type PromptInputCancelButtonProps = React.ComponentProps<typeof Button>;\n\n/**\n * Cancel button for inline edit mode\n * Triggers the onCancel callback from PromptInput\n */\nexport const PromptInputCancelButton = ({\n  className,\n  children,\n  onClick,\n  ...props\n}: PromptInputCancelButtonProps) => {\n  const { onCancel } = usePromptInputInlineMode();\n  // Premium Harmony V2: Touch vs desktop detection\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    onCancel?.();\n  };\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      className={cn(\n        // Figma outline style: white bg, gray border (node 15225:18546)\n        'border-border bg-surface rounded-lg border px-3 py-1.5',\n        'text-foreground text-sm font-medium',\n        'shadow-sm',\n        'hover:bg-surface-subtle active:scale-95',\n        // Premium Harmony V2: Use AI_FOCUS for consistent focus-visible styles\n        AI_FOCUS.ring,\n        // Premium Harmony V2: 44px minimum touch target\n        isTouchDevice && 'min-h-11',\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {children ?? 'Cancel'}\n    </Button>\n  );\n};\n\ninterface SpeechRecognition extends EventTarget {\n  continuous: boolean;\n  interimResults: boolean;\n  lang: string;\n  start(): void;\n  stop(): void;\n  onstart: ((this: SpeechRecognition, ev: Event) => void) | null;\n  onend: ((this: SpeechRecognition, ev: Event) => void) | null;\n  onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void) | null;\n  onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => void) | null;\n}\n\ninterface SpeechRecognitionEvent extends Event {\n  results: SpeechRecognitionResultList;\n}\n\ntype SpeechRecognitionResultList = {\n  readonly length: number;\n  item(index: number): SpeechRecognitionResult;\n  [index: number]: SpeechRecognitionResult;\n};\n\ntype SpeechRecognitionResult = {\n  readonly length: number;\n  item(index: number): SpeechRecognitionAlternative;\n  [index: number]: SpeechRecognitionAlternative;\n  isFinal: boolean;\n};\n\ntype SpeechRecognitionAlternative = {\n  transcript: string;\n  confidence: number;\n};\n\ninterface SpeechRecognitionErrorEvent extends Event {\n  error: string;\n}\n\ndeclare global {\n  interface Window {\n    SpeechRecognition: {\n      new (): SpeechRecognition;\n    };\n    webkitSpeechRecognition: {\n      new (): SpeechRecognition;\n    };\n  }\n}\n\nexport type PromptInputSpeechButtonProps = React.ComponentProps<typeof Button> & {\n  textareaRef?: RefObject<HTMLTextAreaElement | null>;\n  onTranscriptionChange?: (text: string) => void;\n};\n\nexport const PromptInputSpeechButton = ({\n  className,\n  textareaRef,\n  onTranscriptionChange,\n  ...props\n}: PromptInputSpeechButtonProps) => {\n  const [isListening, setIsListening] = useState(false);\n  const [isReady, setIsReady] = useState(false);\n  const recognitionRef = useRef<SpeechRecognition | null>(null);\n  // Premium Harmony V2: Touch vs desktop detection and reduced motion support\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n  const reducedMotion = useReducedMotion();\n  // Store onTranscriptionChange callback in ref to prevent unnecessary effect re-runs\n  const onTranscriptionChangeRef = useRef(onTranscriptionChange);\n\n  // Update ref when callback changes\n  useEffect(() => {\n    onTranscriptionChangeRef.current = onTranscriptionChange;\n  }, [onTranscriptionChange]);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    // SpeechRecognition may not be available in all browsers\n\n    const SpeechRecognitionConstructor = window.SpeechRecognition ?? window.webkitSpeechRecognition;\n\n    if (!SpeechRecognitionConstructor) {\n      return;\n    }\n\n    const speechRecognition = new SpeechRecognitionConstructor();\n\n    speechRecognition.continuous = true;\n    speechRecognition.interimResults = true;\n    speechRecognition.lang = 'en-US';\n\n    speechRecognition.onstart = () => {\n      setIsListening(true);\n    };\n\n    speechRecognition.onend = () => {\n      setIsListening(false);\n    };\n\n    speechRecognition.onresult = event => {\n      let finalTranscript = '';\n\n      for (let i = 0; i < event.results.length; i++) {\n        const result = event.results[i];\n        if (result?.isFinal) {\n          finalTranscript += result[0]?.transcript ?? '';\n        }\n      }\n\n      if (finalTranscript && textareaRef?.current) {\n        const textarea = textareaRef.current;\n        const currentValue = textarea.value;\n        const newValue = currentValue + (currentValue ? ' ' : '') + finalTranscript;\n\n        textarea.value = newValue;\n        textarea.dispatchEvent(new Event('input', { bubbles: true }));\n        onTranscriptionChangeRef.current?.(newValue);\n      }\n    };\n\n    speechRecognition.onerror = event => {\n      logger.error('Speech recognition error', { error: event.error });\n      setIsListening(false);\n    };\n\n    recognitionRef.current = speechRecognition;\n    // Use setTimeout to avoid setState in effect warning\n    const timer = setTimeout(() => setIsReady(true), 0);\n\n    return () => {\n      clearTimeout(timer);\n      if (recognitionRef.current) {\n        recognitionRef.current.stop();\n      }\n    };\n  }, [textareaRef]);\n\n  const toggleListening = useCallback(() => {\n    if (!recognitionRef.current) {\n      return;\n    }\n\n    if (isListening) {\n      recognitionRef.current.stop();\n    } else {\n      recognitionRef.current.start();\n    }\n  }, [isListening]);\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      aria-label={isListening ? 'Stop recording' : 'Start recording'}\n      className={cn(\n        promptInputButtonVariants({ variant: 'ghost' }),\n        // Premium Harmony V2: Respect reduced motion preference\n        isListening && !reducedMotion && 'animate-pulse',\n        // Premium Harmony V2: 44px minimum touch target\n        isTouchDevice && 'min-h-11 min-w-11',\n        className,\n      )}\n      disabled={!isReady}\n      onClick={toggleListening}\n      data-state={isListening ? 'listening' : 'idle'}\n      data-ready={isReady ? '' : undefined}\n      {...props}\n    >\n      <MicIcon className={cn('text-foreground-subtle', 'size-6')} />\n    </Button>\n  );\n};\n\nexport type PromptInputSelectProps = ComponentProps<typeof Select>;\n\nexport const PromptInputSelect = (props: PromptInputSelectProps) => <Select {...props} />;\n\nexport type PromptInputSelectTriggerProps = ComponentProps<typeof SelectTrigger>;\n\nexport const PromptInputSelectTrigger = ({\n  className,\n  ...props\n}: PromptInputSelectTriggerProps) => (\n  <SelectTrigger\n    className={cn(\n      'text-muted-foreground border-none bg-transparent font-medium shadow-none transition-colors',\n      'hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground',\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type PromptInputSelectContentProps = ComponentProps<typeof SelectContent>;\n\nexport const PromptInputSelectContent = ({\n  className,\n  ...props\n}: PromptInputSelectContentProps) => <SelectContent className={cn(className)} {...props} />;\n\nexport type PromptInputSelectItemProps = ComponentProps<typeof SelectItem>;\n\nexport const PromptInputSelectItem = ({ className, ...props }: PromptInputSelectItemProps) => (\n  <SelectItem className={cn(className)} {...props} />\n);\n\nexport type PromptInputSelectValueProps = ComponentProps<typeof SelectValue>;\n\nexport const PromptInputSelectValue = ({ className, ...props }: PromptInputSelectValueProps) => (\n  <SelectValue className={cn(className)} {...props} />\n);\n\nexport type PromptInputHoverCardProps = ComponentProps<typeof HoverCard>;\n\nexport const PromptInputHoverCard = ({\n  openDelay = 0,\n  closeDelay = 0,\n  ...props\n}: PromptInputHoverCardProps) => (\n  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />\n);\n\nexport type PromptInputHoverCardTriggerProps = ComponentProps<typeof HoverCardTrigger>;\n\nexport const PromptInputHoverCardTrigger = (props: PromptInputHoverCardTriggerProps) => (\n  <HoverCardTrigger {...props} />\n);\n\nexport type PromptInputHoverCardContentProps = ComponentProps<typeof HoverCardContent>;\n\nexport const PromptInputHoverCardContent = ({\n  align = 'start',\n  ...props\n}: PromptInputHoverCardContentProps) => <HoverCardContent align={align} {...props} />;\n\nexport type PromptInputTabsListProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PromptInputTabsList = ({ className, ...props }: PromptInputTabsListProps) => (\n  <div className={cn(className)} {...props} />\n);\n\nexport type PromptInputTabProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PromptInputTab = ({ className, ...props }: PromptInputTabProps) => (\n  <div className={cn(className)} {...props} />\n);\n\nexport type PromptInputTabLabelProps = HTMLAttributes<HTMLHeadingElement>;\n\nexport const PromptInputTabLabel = ({\n  className,\n  children,\n  ...props\n}: PromptInputTabLabelProps) => (\n  <h3\n    className={cn('text-muted-foreground mb-2 px-3 font-medium', AI_TEXT.xs, className)}\n    {...props}\n  >\n    {children}\n  </h3>\n);\n\nexport type PromptInputTabBodyProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PromptInputTabBody = ({ className, ...props }: PromptInputTabBodyProps) => (\n  <div className={cn('space-y-1', className)} {...props} />\n);\n\nexport type PromptInputTabItemProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PromptInputTabItem = ({ className, ...props }: PromptInputTabItemProps) => (\n  <div\n    className={cn(\n      'hover:bg-accent flex items-center px-3 py-2',\n      AI_SPACING.xs,\n      AI_TEXT.xs,\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type PromptInputCommandProps = ComponentProps<typeof Command>;\n\nexport const PromptInputCommand = ({ className, ...props }: PromptInputCommandProps) => (\n  <Command className={cn(className)} {...props} />\n);\n\nexport type PromptInputCommandInputProps = ComponentProps<typeof CommandInput>;\n\nexport const PromptInputCommandInput = ({ className, ...props }: PromptInputCommandInputProps) => (\n  <CommandInput className={cn(className)} {...props} />\n);\n\nexport type PromptInputCommandListProps = ComponentProps<typeof CommandList>;\n\nexport const PromptInputCommandList = ({ className, ...props }: PromptInputCommandListProps) => (\n  <CommandList className={cn(className)} {...props} />\n);\n\nexport type PromptInputCommandEmptyProps = ComponentProps<typeof CommandEmpty>;\n\nexport const PromptInputCommandEmpty = ({ className, ...props }: PromptInputCommandEmptyProps) => (\n  <CommandEmpty className={cn(className)} {...props} />\n);\n\nexport type PromptInputCommandGroupProps = ComponentProps<typeof CommandGroup>;\n\nexport const PromptInputCommandGroup = ({ className, ...props }: PromptInputCommandGroupProps) => (\n  <CommandGroup className={cn(className)} {...props} />\n);\n\nexport type PromptInputCommandItemProps = ComponentProps<typeof CommandItem>;\n\nexport const PromptInputCommandItem = ({ className, ...props }: PromptInputCommandItemProps) => (\n  <CommandItem className={cn(className)} {...props} />\n);\n\nexport type PromptInputCommandSeparatorProps = ComponentProps<typeof CommandSeparator>;\n\nexport const PromptInputCommandSeparator = ({\n  className,\n  ...props\n}: PromptInputCommandSeparatorProps) => <CommandSeparator className={cn(className)} {...props} />;\n\n// ============================================================================\n// Re-exports: Mantine Hooks for Consumer Use\n// ============================================================================\n\n/**\n * Re-export Mantine hooks for consumers who want to build custom prompt input variants\n * or integrate with the PromptInput ecosystem.\n *\n * Premium Harmony V2 Additions:\n * - usePromptInputMediaQuery: Touch vs desktop detection\n * - usePromptInputReducedMotion: Accessibility motion preferences\n *\n * @example\n * ```tsx\n * import { usePromptInputHotkeys, usePromptInputClickOutside, usePromptInputMediaQuery, usePromptInputReducedMotion } from '@od-oneapp/uni-ui/components/ai-elements/prompt-input';\n *\n * // Custom component with keyboard shortcuts and responsive behavior\n * function CustomInput() {\n *   const isTouchDevice = usePromptInputMediaQuery('(pointer: coarse)');\n *   const reducedMotion = usePromptInputReducedMotion();\n *\n *   usePromptInputHotkeys([\n *     ['mod+K', () => openCommandPalette()],\n *     ['Escape', () => closeInput()],\n *   ]);\n *\n *   return (\n *     <button className={cn(isTouchDevice && 'min-h-11')}>\n *       {/* ... * /}\n *     </button>\n *   );\n * }\n * ```\n */\nexport {\n  useClickOutside as usePromptInputClickOutside,\n  useFocusReturn as usePromptInputFocusReturn,\n  useHotkeys as usePromptInputHotkeys,\n  useIdle as usePromptInputIdle,\n  useMediaQuery as usePromptInputMediaQuery,\n  useMergedRef as usePromptInputMergedRef,\n  useReducedMotion as usePromptInputReducedMotion,\n  useUncontrolled as usePromptInputUncontrolled,\n} from '@mantine/hooks';\n"],"mappings":"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"}

package/dist/resizable--DaTse0W.mjs

@@ -0,0 +1,124 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { memo, useMemo } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { cva } from "class-variance-authority";
+import { GripVerticalIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+//#region src/components/elements/organisms/resizable/resizable.tsx
+/**
+* @fileoverview Resizable Component - Premium Harmony V2
+*
+* A flexible panel layout component that allows users to resize sections via handles.
+* Built on react-resizable-panels with Premium Harmony V2 design and motion standards.
+* Supports horizontal and vertical orientations with touch-optimized handles.
+*
+* Features:
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Premium Harmony V2 design standards for layout and spacing
+* - Touch detection with automatic sizing for mobile devices (WCAG 2.5.5)
+* - Reduced motion support for accessibility
+* - Orientation support (horizontal and vertical)
+* - Draggable handles with visual feedback
+* - Standardized focus ring using ring-primary token
+* - Complete pseudo-state coverage (:hover, :focus-visible, :active)
+* - Data attributes for state tracking (data-touch, data-reduced-motion)
+* - Keyboard navigation for resizing via handles
+* - Persistent layout support
+* - Group and Panel compound component structure
+*
+* @module @od-oneapp/uni-ui/components/elements/organisms/resizable
+* @component ResizablePanelGroup, ResizablePanel, ResizableHandle
+*
+* @useCases
+* - Multi-pane application layouts: Sidebars, main content, and detail panels
+* - Code editors: File tree, editor, and terminal sections
+* - Dashboard builders: Resizable widgets and report sections
+* - Admin panels: Collapsible and resizable navigation menus
+* - Media players: Playlist and video player resizing
+* - Split-screen views: Comparing two sets of data or content
+*
+* @subcomponents
+* - ResizablePanelGroup - Container for resizable panels
+* - ResizablePanel - Individual resizable section
+* - ResizableHandle - Interaction point for resizing
+*
+* @variants
+* - handle.size: sm, default, lg, touch
+*
+* @example <ResizablePanelGroup direction="horizontal"><ResizablePanel defaultSize={20}><Sidebar /></ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize={80}><MainContent /></ResizablePanel></ResizablePanelGroup>
+*/
+/**
+* ResizablePanelGroup component.
+*
+* Root container for a set of resizable panels.
+* Accepts both `direction` (v3 compat) and `orientation` (v4) props.
+*/
+const ResizablePanelGroup = ({ className, direction, orientation, ...props }) => {
+	const resolvedOrientation = orientation ?? direction ?? "horizontal";
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Group, {
+		"data-slot": "resizable-panel-group",
+		"data-orientation": resolvedOrientation,
+		orientation: resolvedOrientation,
+		className: cn("flex size-full data-[orientation=vertical]:flex-col", className),
+		...props
+	});
+};
+/**
+* ResizablePanel component.
+*
+* An individual panel within a ResizablePanelGroup.
+*/
+const ResizablePanel = ResizablePrimitive.Panel;
+/**
+* ResizableHandle variant definitions using CVA
+*/
+const resizableHandleVariants = cva([
+	"bg-border relative flex items-center justify-center after:absolute transition-all duration-200 outline-none",
+	"focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-offset-2",
+	"aria-[orientation=vertical]:w-full aria-[orientation=vertical]:after:left-0 aria-[orientation=vertical]:after:w-full aria-[orientation=vertical]:after:translate-x-0 aria-[orientation=vertical]:after:-translate-y-1/2 [&[aria-orientation=vertical]>div]:rotate-90"
+], {
+	variants: { size: {
+		sm: "w-[0.5px] after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2 aria-[orientation=vertical]:after:inset-x-0 aria-[orientation=vertical]:after:top-1/2 aria-[orientation=vertical]:h-[0.5px] aria-[orientation=vertical]:after:h-2 aria-[orientation=vertical]:after:-translate-y-1/2",
+		default: "w-px after:inset-y-0 after:left-1/2 after:w-4 after:-translate-x-1/2 aria-[orientation=vertical]:after:inset-x-0 aria-[orientation=vertical]:after:top-1/2 aria-[orientation=vertical]:h-px aria-[orientation=vertical]:after:h-4 aria-[orientation=vertical]:after:-translate-y-1/2",
+		lg: "w-0.5 after:inset-y-0 after:left-1/2 after:w-6 after:-translate-x-1/2 aria-[orientation=vertical]:after:inset-x-0 aria-[orientation=vertical]:after:top-1/2 aria-[orientation=vertical]:h-0.5 aria-[orientation=vertical]:after:h-6 aria-[orientation=vertical]:after:-translate-y-1/2",
+		touch: "w-1 after:inset-y-0 after:left-1/2 after:w-11 after:-translate-x-1/2 aria-[orientation=vertical]:after:inset-x-0 aria-[orientation=vertical]:after:top-1/2 aria-[orientation=vertical]:h-1 aria-[orientation=vertical]:after:h-11 aria-[orientation=vertical]:after:-translate-y-1/2"
+	} },
+	defaultVariants: { size: "default" }
+});
+const RESIZABLE_HANDLE_ICON_CONTAINER_CLASSNAME = "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border";
+const RESIZABLE_HANDLE_ICON_CLASSNAME = "size-2.5";
+/**
+* ResizableHandle Component
+*
+* Interactive divider that allows users to resize adjacent panels.
+*/
+const ResizableHandle = memo(({ className, withHandle, size, ...props }) => {
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	const prefersReducedMotion = useReducedMotion() ?? false;
+	const effectiveSize = useMemo(() => {
+		if (size) return size;
+		return isTouchDevice ? "touch" : "default";
+	}, [size, isTouchDevice]);
+	const handleClassName = useMemo(() => cn(resizableHandleVariants({ size: effectiveSize }), className), [effectiveSize, className]);
+	const handleIcon = withHandle ? /* @__PURE__ */ jsx("div", {
+		className: RESIZABLE_HANDLE_ICON_CONTAINER_CLASSNAME,
+		children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: RESIZABLE_HANDLE_ICON_CLASSNAME })
+	}) : null;
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Separator, {
+		className: handleClassName,
+		"data-slot": "resizable-handle",
+		"data-touch": isTouchDevice ? "true" : "false",
+		"data-reduced-motion": prefersReducedMotion ? "true" : "false",
+		...props,
+		children: handleIcon
+	});
+});
+ResizableHandle.displayName = "ResizableHandle";
+
+//#endregion
+export { resizableHandleVariants as i, ResizablePanel as n, ResizablePanelGroup as r, ResizableHandle as t };
+//# sourceMappingURL=resizable--DaTse0W.mjs.map

package/dist/resizable--DaTse0W.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable--DaTse0W.mjs","names":[],"sources":["../src/components/elements/organisms/resizable/resizable.tsx"],"sourcesContent":["/**\n * @fileoverview Resizable Component - Premium Harmony V2\n *\n * A flexible panel layout component that allows users to resize sections via handles.\n * Built on react-resizable-panels with Premium Harmony V2 design and motion standards.\n * Supports horizontal and vertical orientations with touch-optimized handles.\n *\n * Features:\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Premium Harmony V2 design standards for layout and spacing\n * - Touch detection with automatic sizing for mobile devices (WCAG 2.5.5)\n * - Reduced motion support for accessibility\n * - Orientation support (horizontal and vertical)\n * - Draggable handles with visual feedback\n * - Standardized focus ring using ring-primary token\n * - Complete pseudo-state coverage (:hover, :focus-visible, :active)\n * - Data attributes for state tracking (data-touch, data-reduced-motion)\n * - Keyboard navigation for resizing via handles\n * - Persistent layout support\n * - Group and Panel compound component structure\n *\n * @module @od-oneapp/uni-ui/components/elements/organisms/resizable\n * @component ResizablePanelGroup, ResizablePanel, ResizableHandle\n *\n * @useCases\n * - Multi-pane application layouts: Sidebars, main content, and detail panels\n * - Code editors: File tree, editor, and terminal sections\n * - Dashboard builders: Resizable widgets and report sections\n * - Admin panels: Collapsible and resizable navigation menus\n * - Media players: Playlist and video player resizing\n * - Split-screen views: Comparing two sets of data or content\n *\n * @subcomponents\n * - ResizablePanelGroup - Container for resizable panels\n * - ResizablePanel - Individual resizable section\n * - ResizableHandle - Interaction point for resizing\n *\n * @variants\n * - handle.size: sm, default, lg, touch\n *\n * @example <ResizablePanelGroup direction=\"horizontal\"><ResizablePanel defaultSize={20}><Sidebar /></ResizablePanel><ResizableHandle withHandle /><ResizablePanel defaultSize={80}><MainContent /></ResizablePanel></ResizablePanelGroup>\n */\n\n'use client';\n\nimport * as React from 'react';\nimport { memo, useMemo } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { GripVerticalIcon } from 'lucide-react';\nimport * as ResizablePrimitive from 'react-resizable-panels';\n\nimport { cn } from '../../../../lib/utils';\n\n/**\n * ResizablePanelGroup component.\n *\n * Root container for a set of resizable panels.\n * Accepts both `direction` (v3 compat) and `orientation` (v4) props.\n */\nconst ResizablePanelGroup = ({\n  className,\n  direction,\n  orientation,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Group> & {\n  /** @deprecated Use `orientation` instead. Kept for backward compatibility. */\n  direction?: 'horizontal' | 'vertical';\n}) => {\n  const resolvedOrientation = orientation ?? direction ?? 'horizontal';\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      data-orientation={resolvedOrientation}\n      orientation={resolvedOrientation}\n      className={cn('flex size-full data-[orientation=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n};\n\n/**\n * ResizablePanel component.\n *\n * An individual panel within a ResizablePanelGroup.\n */\nconst ResizablePanel = ResizablePrimitive.Panel;\n\n/**\n * ResizableHandle variant definitions using CVA\n */\nconst resizableHandleVariants = cva(\n  [\n    'bg-border relative flex items-center justify-center after:absolute transition-all duration-200 outline-none',\n    // [Pillar 3: Pseudo-states] Enhanced focus ring using ring-primary token\n    'focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-offset-2',\n    'aria-[orientation=vertical]:w-full aria-[orientation=vertical]:after:left-0 aria-[orientation=vertical]:after:w-full aria-[orientation=vertical]:after:translate-x-0 aria-[orientation=vertical]:after:-translate-y-1/2 [&[aria-orientation=vertical]>div]:rotate-90',\n  ],\n  {\n    variants: {\n      /**\n       * Size variants for handles\n       * - touch: 44px hit area for WCAG 2.5.5 compliance\n       */\n      size: {\n        sm: 'w-[0.5px] after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2 aria-[orientation=vertical]:after:inset-x-0 aria-[orientation=vertical]:after:top-1/2 aria-[orientation=vertical]:h-[0.5px] aria-[orientation=vertical]:after:h-2 aria-[orientation=vertical]:after:-translate-y-1/2',\n        default:\n          'w-px after:inset-y-0 after:left-1/2 after:w-4 after:-translate-x-1/2 aria-[orientation=vertical]:after:inset-x-0 aria-[orientation=vertical]:after:top-1/2 aria-[orientation=vertical]:h-px aria-[orientation=vertical]:after:h-4 aria-[orientation=vertical]:after:-translate-y-1/2',\n        lg: 'w-0.5 after:inset-y-0 after:left-1/2 after:w-6 after:-translate-x-1/2 aria-[orientation=vertical]:after:inset-x-0 aria-[orientation=vertical]:after:top-1/2 aria-[orientation=vertical]:h-0.5 aria-[orientation=vertical]:after:h-6 aria-[orientation=vertical]:after:-translate-y-1/2',\n        touch:\n          'w-1 after:inset-y-0 after:left-1/2 after:w-11 after:-translate-x-1/2 aria-[orientation=vertical]:after:inset-x-0 aria-[orientation=vertical]:after:top-1/2 aria-[orientation=vertical]:h-1 aria-[orientation=vertical]:after:h-11 aria-[orientation=vertical]:after:-translate-y-1/2',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n\n// Static constants - moved outside component to prevent recreation\nconst RESIZABLE_HANDLE_ICON_CONTAINER_CLASSNAME =\n  'bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border';\nconst RESIZABLE_HANDLE_ICON_CLASSNAME = 'size-2.5';\n\n/**\n * ResizableHandle Component\n *\n * Interactive divider that allows users to resize adjacent panels.\n */\nconst ResizableHandle = memo(\n  ({\n    className,\n    withHandle,\n    size,\n    ...props\n  }: React.ComponentProps<typeof ResizablePrimitive.Separator> &\n    VariantProps<typeof resizableHandleVariants> & { withHandle?: boolean }) => {\n    // Premium Harmony V2: Detect touch devices for adaptive behavior\n    const isTouchDevice = useMediaQuery('(pointer: coarse)') ?? false;\n    const prefersReducedMotion = useReducedMotion() ?? false;\n\n    // Auto-apply touch size on touch devices\n    const effectiveSize = useMemo(() => {\n      if (size) return size;\n      return isTouchDevice ? 'touch' : 'default';\n    }, [size, isTouchDevice]);\n\n    // Memoize className computation\n    const handleClassName = useMemo(\n      () => cn(resizableHandleVariants({ size: effectiveSize }), className),\n      [effectiveSize, className],\n    );\n\n    const handleIcon = withHandle ? (\n      <div className={RESIZABLE_HANDLE_ICON_CONTAINER_CLASSNAME}>\n        <GripVerticalIcon className={RESIZABLE_HANDLE_ICON_CLASSNAME} />\n      </div>\n    ) : null;\n\n    return (\n      <ResizablePrimitive.Separator\n        className={handleClassName}\n        data-slot=\"resizable-handle\"\n        data-touch={isTouchDevice ? 'true' : 'false'}\n        data-reduced-motion={prefersReducedMotion ? 'true' : 'false'}\n        {...props}\n      >\n        {handleIcon}\n      </ResizablePrimitive.Separator>\n    );\n  },\n);\n\nResizableHandle.displayName = 'ResizableHandle';\n\nexport { ResizableHandle, resizableHandleVariants, ResizablePanel, ResizablePanelGroup };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAM,uBAAuB,EAC3B,WACA,WACA,aACA,GAAG,YAIC;CACJ,MAAM,sBAAsB,eAAe,aAAa;AACxD,QACE,oBAAC,mBAAmB;EAClB,aAAU;EACV,oBAAkB;EAClB,aAAa;EACb,WAAW,GAAG,uDAAuD,UAAU;EAC/E,GAAI;GACJ;;;;;;;AASN,MAAM,iBAAiB,mBAAmB;;;;AAK1C,MAAM,0BAA0B,IAC9B;CACE;CAEA;CACA;CACD,EACD;CACE,UAAU,EAKR,MAAM;EACJ,IAAI;EACJ,SACE;EACF,IAAI;EACJ,OACE;EACH,EACF;CACD,iBAAiB,EACf,MAAM,WACP;CACF,CACF;AAGD,MAAM,4CACJ;AACF,MAAM,kCAAkC;;;;;;AAOxC,MAAM,kBAAkB,MACrB,EACC,WACA,YACA,MACA,GAAG,YAEyE;CAE5E,MAAM,gBAAgB,cAAc,oBAAoB,IAAI;CAC5D,MAAM,uBAAuB,kBAAkB,IAAI;CAGnD,MAAM,gBAAgB,cAAc;AAClC,MAAI,KAAM,QAAO;AACjB,SAAO,gBAAgB,UAAU;IAChC,CAAC,MAAM,cAAc,CAAC;CAGzB,MAAM,kBAAkB,cAChB,GAAG,wBAAwB,EAAE,MAAM,eAAe,CAAC,EAAE,UAAU,EACrE,CAAC,eAAe,UAAU,CAC3B;CAED,MAAM,aAAa,aACjB,oBAAC;EAAI,WAAW;YACd,oBAAC,oBAAiB,WAAW,kCAAmC;GAC5D,GACJ;AAEJ,QACE,oBAAC,mBAAmB;EAClB,WAAW;EACX,aAAU;EACV,cAAY,gBAAgB,SAAS;EACrC,uBAAqB,uBAAuB,SAAS;EACrD,GAAI;YAEH;GAC4B;EAGpC;AAED,gBAAgB,cAAc"}

package/dist/scroll-area-Bxi-Edjc.mjs

@@ -0,0 +1,139 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import * as React$1 from "react";
+import { memo, useMemo } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+//#region src/components/elements/organisms/scroll-area/scroll-area.tsx
+/**
+* @fileoverview ScrollArea Component - Premium Harmony V2
+*
+* Custom scrollable area with cross-browser styling and smooth interactions.
+* Built on Radix UI primitives with Premium Harmony V2 motion and accessibility standards.
+* Features adaptive scrollbars for touch vs desktop and focus-visible ring support.
+*
+* Features:
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Premium Harmony V2 motion design for smooth scrolling feel
+* - Touch detection with adaptive scrollbar visibility
+* - Reduced motion support for accessibility
+* - Complete pseudo-state coverage (:hover, :active, :focus-visible)
+* - Orientation support (horizontal, vertical, both)
+* - Auto-hiding scrollbars with configurable delay
+* - Standardized focus ring using ring-primary token
+* - WCAG compliant focus-visible pattern
+* - Data attributes for state tracking (data-orientation, data-touch)
+* - Semantic color tokens for consistent theming
+*
+* @module @od-oneapp/uni-ui/components/elements/organisms/scroll-area
+* @component ScrollArea, ScrollBar
+*
+* @useCases
+* - Content-heavy containers: Dashboards, sidebars, long lists
+* - Modal/Dialog body: Constrained scrollable areas in overlays
+* - Dropdown menus: Scrollable option lists with z-index management
+* - Multi-pane layouts: Independent scroll areas in complex apps
+* - Code viewers: Monospace text with horizontal and vertical scroll
+* - Touch interfaces: Mobile-friendly scroll areas with gesture support
+*
+* @subcomponents
+* - ScrollArea - Root container with viewport management
+* - ScrollBar - Customizable scrollbar with orientation control
+*
+* @variants
+* - orientation: vertical (default), horizontal
+* - size: default, thin
+*/
+const SCROLL_AREA_BASE_CLASSNAME = "relative overflow-hidden";
+const SCROLL_AREA_VIEWPORT_BASE_CLASSNAME = "focus-visible:ring-primary focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 size-full rounded-[inherit] transition-all duration-200 outline-none";
+const SCROLL_BAR_THUMB_BASE_CLASSNAME = "bg-border relative flex-1 rounded-full";
+/**
+* ScrollArea variant definitions
+*/
+const scrollAreaVariants = cva(SCROLL_AREA_BASE_CLASSNAME);
+/**
+* ScrollBar variant definitions using CVA
+*
+* Base styles include:
+* - Flex layout for thumb positioning
+* - Transition for opacity/visibility
+* - Touch-optimized padding
+*/
+const scrollBarVariants = cva("flex touch-none transition-all duration-200 select-none ease-out", {
+	variants: {
+		orientation: {
+			vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",
+			horizontal: "h-2.5 flex-col border-t border-t-transparent p-[1px]"
+		},
+		size: {
+			default: "",
+			thin: "w-1.5 h-1.5"
+		}
+	},
+	defaultVariants: {
+		orientation: "vertical",
+		size: "default"
+	}
+});
+/**
+* ScrollArea Component
+*
+* Custom scrollable container with consistent styling across browsers.
+*/
+const ScrollArea = memo(React$1.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+		ref,
+		className: cn(scrollAreaVariants(), className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+				className: SCROLL_AREA_VIEWPORT_BASE_CLASSNAME,
+				children
+			}),
+			/* @__PURE__ */ jsx(ScrollBar, {}),
+			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+		]
+	});
+}));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+/**
+* ScrollBar Component
+*
+* Visual scrollbar indicator with orientation support.
+* Automatically adapts visibility for touch devices.
+*/
+const ScrollBar = memo(React$1.forwardRef(({ className, orientation = "vertical", size, ...props }, ref) => {
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	const prefersReducedMotion = useReducedMotion() ?? false;
+	const scrollbarClassName = useMemo(() => cn(scrollBarVariants({
+		orientation,
+		size
+	}), isTouchDevice && "opacity-0 hover:opacity-100", prefersReducedMotion && "transition-none", className), [
+		orientation,
+		size,
+		isTouchDevice,
+		prefersReducedMotion,
+		className
+	]);
+	return /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+		ref,
+		"data-slot": "scroll-area-scrollbar",
+		"data-orientation": orientation,
+		orientation,
+		className: scrollbarClassName,
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, {
+			"data-slot": "scroll-area-thumb",
+			className: SCROLL_BAR_THUMB_BASE_CLASSNAME
+		})
+	});
+}));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+//#endregion
+export { ScrollBar as n, scrollBarVariants as r, ScrollArea as t };
+//# sourceMappingURL=scroll-area-Bxi-Edjc.mjs.map

package/dist/scroll-area-Bxi-Edjc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area-Bxi-Edjc.mjs","names":["React"],"sources":["../src/components/elements/organisms/scroll-area/scroll-area.tsx"],"sourcesContent":["/**\n * @fileoverview ScrollArea Component - Premium Harmony V2\n *\n * Custom scrollable area with cross-browser styling and smooth interactions.\n * Built on Radix UI primitives with Premium Harmony V2 motion and accessibility standards.\n * Features adaptive scrollbars for touch vs desktop and focus-visible ring support.\n *\n * Features:\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Premium Harmony V2 motion design for smooth scrolling feel\n * - Touch detection with adaptive scrollbar visibility\n * - Reduced motion support for accessibility\n * - Complete pseudo-state coverage (:hover, :active, :focus-visible)\n * - Orientation support (horizontal, vertical, both)\n * - Auto-hiding scrollbars with configurable delay\n * - Standardized focus ring using ring-primary token\n * - WCAG compliant focus-visible pattern\n * - Data attributes for state tracking (data-orientation, data-touch)\n * - Semantic color tokens for consistent theming\n *\n * @module @od-oneapp/uni-ui/components/elements/organisms/scroll-area\n * @component ScrollArea, ScrollBar\n *\n * @useCases\n * - Content-heavy containers: Dashboards, sidebars, long lists\n * - Modal/Dialog body: Constrained scrollable areas in overlays\n * - Dropdown menus: Scrollable option lists with z-index management\n * - Multi-pane layouts: Independent scroll areas in complex apps\n * - Code viewers: Monospace text with horizontal and vertical scroll\n * - Touch interfaces: Mobile-friendly scroll areas with gesture support\n *\n * @subcomponents\n * - ScrollArea - Root container with viewport management\n * - ScrollBar - Customizable scrollbar with orientation control\n *\n * @variants\n * - orientation: vertical (default), horizontal\n * - size: default, thin\n */\n\n'use client';\n\nimport * as React from 'react';\nimport { memo, useMemo } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../../../lib/utils';\n\n// Static classNames - moved outside components to prevent recreation\nconst SCROLL_AREA_BASE_CLASSNAME = 'relative overflow-hidden';\nconst SCROLL_AREA_VIEWPORT_BASE_CLASSNAME =\n  'focus-visible:ring-primary focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 size-full rounded-[inherit] transition-all duration-200 outline-none';\nconst SCROLL_BAR_THUMB_BASE_CLASSNAME = 'bg-border relative flex-1 rounded-full';\n\n/**\n * ScrollArea variant definitions\n */\nconst scrollAreaVariants = cva(SCROLL_AREA_BASE_CLASSNAME);\n\n/**\n * ScrollBar variant definitions using CVA\n *\n * Base styles include:\n * - Flex layout for thumb positioning\n * - Transition for opacity/visibility\n * - Touch-optimized padding\n */\nconst scrollBarVariants = cva('flex touch-none transition-all duration-200 select-none ease-out', {\n  variants: {\n    orientation: {\n      vertical: 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n      horizontal: 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n    },\n    size: {\n      default: '',\n      thin: 'w-1.5 h-1.5',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    size: 'default',\n  },\n});\n\n/**\n * ScrollArea Component\n *\n * Custom scrollable container with consistent styling across browsers.\n */\nconst ScrollArea = memo(\n  React.forwardRef<\n    React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n  >(({ className, children, ...props }, ref) => {\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cn(scrollAreaVariants(), className)}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport className={SCROLL_AREA_VIEWPORT_BASE_CLASSNAME}>\n          {children}\n        </ScrollAreaPrimitive.Viewport>\n        <ScrollBar />\n        <ScrollAreaPrimitive.Corner />\n      </ScrollAreaPrimitive.Root>\n    );\n  }),\n);\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\n/**\n * ScrollBar Component\n *\n * Visual scrollbar indicator with orientation support.\n * Automatically adapts visibility for touch devices.\n */\nconst ScrollBar = memo(\n  React.forwardRef<\n    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> &\n      VariantProps<typeof scrollBarVariants>\n  >(({ className, orientation = 'vertical', size, ...props }, ref) => {\n    // Premium Harmony V2: Detect touch devices for adaptive behavior\n    const isTouchDevice = useMediaQuery('(pointer: coarse)') ?? false;\n    const prefersReducedMotion = useReducedMotion() ?? false;\n\n    // Memoize scrollbar className\n    const scrollbarClassName = useMemo(\n      () =>\n        cn(\n          scrollBarVariants({ orientation, size }),\n          // Hide scrollbars on touch devices by default (can be overridden with className)\n          isTouchDevice && 'opacity-0 hover:opacity-100',\n          // Disable transitions if user prefers reduced motion\n          prefersReducedMotion && 'transition-none',\n          className,\n        ),\n      [orientation, size, isTouchDevice, prefersReducedMotion, className],\n    );\n\n    return (\n      <ScrollAreaPrimitive.ScrollAreaScrollbar\n        ref={ref}\n        data-slot=\"scroll-area-scrollbar\"\n        data-orientation={orientation}\n        orientation={orientation}\n        className={scrollbarClassName}\n        {...props}\n      >\n        <ScrollAreaPrimitive.ScrollAreaThumb\n          data-slot=\"scroll-area-thumb\"\n          className={SCROLL_BAR_THUMB_BASE_CLASSNAME}\n        />\n      </ScrollAreaPrimitive.ScrollAreaScrollbar>\n    );\n  }),\n);\n\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport { ScrollArea, ScrollBar, scrollBarVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAM,6BAA6B;AACnC,MAAM,sCACJ;AACF,MAAM,kCAAkC;;;;AAKxC,MAAM,qBAAqB,IAAI,2BAA2B;;;;;;;;;AAU1D,MAAM,oBAAoB,IAAI,oEAAoE;CAChG,UAAU;EACR,aAAa;GACX,UAAU;GACV,YAAY;GACb;EACD,MAAM;GACJ,SAAS;GACT,MAAM;GACP;EACF;CACD,iBAAiB;EACf,aAAa;EACb,MAAM;EACP;CACF,CAAC;;;;;;AAOF,MAAM,aAAa,KACjBA,QAAM,YAGH,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;AAC5C,QACE,qBAAC,oBAAoB;EACd;EACL,WAAW,GAAG,oBAAoB,EAAE,UAAU;EAC9C,GAAI;;GAEJ,oBAAC,oBAAoB;IAAS,WAAW;IACtC;KAC4B;GAC/B,oBAAC,cAAY;GACb,oBAAC,oBAAoB,WAAS;;GACL;EAE7B,CACH;AAED,WAAW,cAAc,oBAAoB,KAAK;;;;;;;AAQlD,MAAM,YAAY,KAChBA,QAAM,YAIH,EAAE,WAAW,cAAc,YAAY,MAAM,GAAG,SAAS,QAAQ;CAElE,MAAM,gBAAgB,cAAc,oBAAoB,IAAI;CAC5D,MAAM,uBAAuB,kBAAkB,IAAI;CAGnD,MAAM,qBAAqB,cAEvB,GACE,kBAAkB;EAAE;EAAa;EAAM,CAAC,EAExC,iBAAiB,+BAEjB,wBAAwB,mBACxB,UACD,EACH;EAAC;EAAa;EAAM;EAAe;EAAsB;EAAU,CACpE;AAED,QACE,oBAAC,oBAAoB;EACd;EACL,aAAU;EACV,oBAAkB;EACL;EACb,WAAW;EACX,GAAI;YAEJ,oBAAC,oBAAoB;GACnB,aAAU;GACV,WAAW;IACX;GACsC;EAE5C,CACH;AAED,UAAU,cAAc,oBAAoB,oBAAoB"}

package/dist/scroll-area-CDRGG59G.d.mts

@@ -0,0 +1,19 @@
+
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/elements/organisms/scroll-area/scroll-area.d.ts
+declare const scrollBarVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+  size?: "default" | "thin" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare const ScrollArea: React$1.NamedExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React$1.NamedExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+  size?: "default" | "thin" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ScrollBar as n, scrollBarVariants as r, ScrollArea as t };
+//# sourceMappingURL=scroll-area-CDRGG59G.d.mts.map