@devalok/shilp-sutra 0.44.1 → 0.45.0

package/dist/_chunks/chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat.js","names":[],"sources":["../../src/ui/chat/date-separator.tsx","../../src/ui/chat/message.tsx","../../src/ui/chat/message-input.tsx","../../src/ui/chat/message-list.tsx","../../src/ui/chat/system-message.tsx","../../src/ui/chat/typing-indicator.tsx","../../src/ui/chat/unread-separator.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport interface DateSeparatorProps {\n  date: Date | string\n  format?: (date: Date) => string\n  className?: string\n}\n\nfunction defaultFormat(date: Date): string {\n  const now = new Date()\n  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n  const target = new Date(date.getFullYear(), date.getMonth(), date.getDate())\n  const diffMs = today.getTime() - target.getTime()\n  const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24))\n\n  if (diffDays === 0) return 'Today'\n  if (diffDays === 1) return 'Yesterday'\n\n  const month = date.toLocaleString('en-US', { month: 'short' })\n  const day = date.getDate()\n\n  if (date.getFullYear() !== now.getFullYear()) {\n    return `${month} ${day}, ${date.getFullYear()}`\n  }\n\n  return `${month} ${day}`\n}\n\nfunction DateSeparator({ date, format, className }: DateSeparatorProps) {\n  const d = typeof date === 'string' ? new Date(date) : date\n  const label = format ? format(d) : defaultFormat(d)\n\n  return (\n    <div className={cn('flex items-center gap-ds-03 py-ds-03', className)}>\n      <div className=\"flex-1 border-t border-surface-border-subtle\" />\n      <span className=\"text-ds-xs font-medium text-surface-fg-subtle/50 uppercase tracking-wider\">\n        {label}\n      </span>\n      <div className=\"flex-1 border-t border-surface-border-subtle\" />\n    </div>\n  )\n}\nDateSeparator.displayName = 'DateSeparator'\n\nexport { DateSeparator }\n","'use client'\n\nimport { IconTrash } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Avatar, AvatarFallback,AvatarImage } from '../avatar'\nimport { Icon } from '../icon'\nimport { IconProvider } from '../icon-context'\nimport type { IconInput } from '../lib/icon-input'\nimport { motionProps,springs } from '../lib/motion'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { Textarea } from '../textarea'\nimport { Tooltip, TooltipContent,TooltipTrigger } from '../tooltip'\n\n// ── Context ──────────────────────────────────────────────────────────────\n\ninterface MessageContextValue {\n  variant: 'flat' | 'bubble'\n  placement: 'start' | 'end'\n  grouped: boolean\n  highlight?: 'mention' | 'internal'\n}\n\nconst MessageContext = React.createContext<MessageContextValue>({\n  variant: 'flat',\n  placement: 'start',\n  grouped: false,\n})\n\nfunction useMessageContext() {\n  return React.useContext(MessageContext)\n}\n\n// ── Root ─────────────────────────────────────────────────────────────────\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  variant?: 'flat' | 'bubble'\n  placement?: 'start' | 'end'\n  highlight?: 'mention' | 'internal'\n  grouped?: boolean\n  deleted?: boolean\n  deletedText?: string\n}\n\nconst MessageRoot = React.forwardRef<HTMLDivElement, MessageProps>(\n  (\n    {\n      children,\n      variant = 'flat',\n      placement = 'start',\n      highlight,\n      grouped = false,\n      deleted = false,\n      deletedText = 'This message was deleted',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const ctx = React.useMemo<MessageContextValue>(\n      () => ({ variant, placement, grouped, highlight }),\n      [variant, placement, grouped, highlight],\n    )\n\n    if (deleted) {\n      return (\n        <motion.div\n          ref={ref}\n          initial={{ opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={springs.snappy}\n          className={cn(\n            'flex items-center gap-ds-02 py-ds-02 text-ds-xs text-surface-fg-subtle/50 italic',\n            className,\n          )}\n          {...motionProps(props)}\n        >\n          <Icon icon={IconTrash} size=\"xs\" />\n          {deletedText}\n        </motion.div>\n      )\n    }\n\n    if (variant === 'bubble') {\n      return (\n        <MessageContext.Provider value={ctx}>\n          <motion.div\n            ref={ref}\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={springs.snappy}\n            className={cn(\n              'group/message relative flex',\n              placement === 'end' ? 'justify-end' : 'justify-start',\n              highlight === 'mention' && 'bg-accent-2 pl-ds-03 rounded-control-inner',\n              highlight === 'internal' && 'bg-warning-2/50 rounded-control-inner',\n              className,\n            )}\n            {...motionProps(props)}\n          >\n            <div\n              className={cn(\n                'max-w-[85%] rounded-bubble px-ds-04 py-ds-03',\n                placement === 'end'\n                  ? 'bg-accent-3 text-surface-fg'\n                  : 'bg-surface-raised text-surface-fg',\n              )}\n            >\n              {children}\n            </div>\n          </motion.div>\n        </MessageContext.Provider>\n      )\n    }\n\n    // flat variant (default)\n    return (\n      <MessageContext.Provider value={ctx}>\n        <motion.div\n          ref={ref}\n          initial={{ opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={springs.snappy}\n          className={cn(\n            'group/message relative flex gap-ds-04',\n            grouped && '-mt-ds-01',\n            highlight === 'mention' && 'border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-control-inner',\n            highlight === 'internal' && 'bg-warning-2/50 rounded-control-inner',\n            className,\n          )}\n          {...motionProps(props)}\n        >\n          {children}\n        </motion.div>\n      </MessageContext.Provider>\n    )\n  },\n)\nMessageRoot.displayName = 'Message'\n\n// ── Avatar ───────────────────────────────────────────────────────────────\n\nexport interface MessageAvatarProps {\n  src?: string | null\n  fallback?: string\n  icon?: IconInput\n  size?: 'sm' | 'md'\n  children?: React.ReactNode\n}\n\nfunction MessageAvatar({\n  src,\n  fallback,\n  icon,\n  size = 'md',\n  children,\n}: MessageAvatarProps) {\n  const { grouped } = useMessageContext()\n\n  const sizeClass = size === 'sm' ? 'w-5' : 'w-6'\n  const heightClass = size === 'sm' ? 'h-5' : 'h-6'\n\n  if (grouped) {\n    return <div className={cn(sizeClass, heightClass, 'shrink-0')} />\n  }\n\n  if (children) {\n    return (\n      <div className={cn(sizeClass, 'shrink-0 flex items-start')}>\n        {children}\n      </div>\n    )\n  }\n\n  if (icon) {\n    return (\n      <div\n        className={cn(\n          sizeClass,\n          size === 'sm' ? 'h-5' : 'h-6',\n          'shrink-0 flex items-center justify-center rounded-pill bg-surface-raised-hover',\n        )}\n      >\n        <IconProvider size={size === 'sm' ? 'xs' : 'sm'}>{normalizeIcon(icon)}</IconProvider>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(sizeClass, 'shrink-0')}>\n      <Avatar size={size === 'sm' ? 'xs' : 'sm'}>\n        {src && <AvatarImage src={src} alt={fallback ?? ''} />}\n        <AvatarFallback>{fallback ?? ''}</AvatarFallback>\n      </Avatar>\n    </div>\n  )\n}\nMessageAvatar.displayName = 'Message.Avatar'\n\n// ── Content ──────────────────────────────────────────────────────────────\n\nexport interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nfunction MessageContent({ children, className, ...props }: MessageContentProps) {\n  return (\n    <div className={cn('min-w-0 flex-1 flex flex-col gap-ds-02', className)} {...props}>\n      {children}\n    </div>\n  )\n}\nMessageContent.displayName = 'Message.Content'\n\n// ── Author ───────────────────────────────────────────────────────────────\n\nexport interface MessageAuthorProps {\n  name: string\n  badge?: React.ReactNode\n  timestamp?: Date\n  formattedTimestamp?: string\n  timestampFormat?: (date: Date) => string\n}\n\nfunction defaultTimestampFormat(date: Date): string {\n  return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })\n}\n\nfunction MessageAuthor({\n  name,\n  badge,\n  timestamp,\n  formattedTimestamp,\n  timestampFormat = defaultTimestampFormat,\n}: MessageAuthorProps) {\n  const { grouped } = useMessageContext()\n\n  if (grouped) return null\n\n  const timeStr = formattedTimestamp\n    ?? (timestamp ? timestampFormat(timestamp) : undefined)\n\n  return (\n    <div className=\"flex items-baseline gap-ds-02\">\n      <span className=\"font-semibold text-[13px] text-surface-fg\">{name}</span>\n      {badge}\n      {timeStr && (\n        <span className=\"text-[11px] text-surface-fg-subtle/50\">{timeStr}</span>\n      )}\n    </div>\n  )\n}\nMessageAuthor.displayName = 'Message.Author'\n\n// ── Body ─────────────────────────────────────────────────────────────────\n\nexport interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nfunction MessageBody({ children, className, ...props }: MessageBodyProps) {\n  return (\n    <div\n      className={cn(\n        'text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\nMessageBody.displayName = 'Message.Body'\n\n// ── EditableBody ─────────────────────────────────────────────────────────\n\nexport interface MessageEditableBodyProps {\n  content: string\n  onSave: (newContent: string) => void\n  onCancel?: () => void\n  canEdit?: boolean\n  renderContent?: (content: string) => React.ReactNode\n}\n\nfunction MessageEditableBody({\n  content,\n  onSave,\n  onCancel,\n  canEdit = false,\n  renderContent,\n}: MessageEditableBodyProps) {\n  const [isEditing, setIsEditing] = React.useState(false)\n  const [editDraft, setEditDraft] = React.useState(content)\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n\n  React.useEffect(() => {\n    if (isEditing && textareaRef.current) {\n      textareaRef.current.focus()\n      textareaRef.current.select()\n    }\n  }, [isEditing])\n\n  const handleStartEdit = React.useCallback(() => {\n    if (!canEdit) return\n    setEditDraft(content)\n    setIsEditing(true)\n  }, [canEdit, content])\n\n  const handleSave = React.useCallback(() => {\n    const trimmed = editDraft.trim()\n    if (trimmed && trimmed !== content) {\n      onSave(trimmed)\n    }\n    setIsEditing(false)\n  }, [editDraft, content, onSave])\n\n  const handleCancel = React.useCallback(() => {\n    setIsEditing(false)\n    setEditDraft(content)\n    onCancel?.()\n  }, [content, onCancel])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === 'Enter' && !e.shiftKey) {\n        e.preventDefault()\n        handleSave()\n      } else if (e.key === 'Escape') {\n        e.preventDefault()\n        handleCancel()\n      }\n    },\n    [handleSave, handleCancel],\n  )\n\n  if (isEditing) {\n    return (\n      <div className=\"text-[13px] leading-relaxed\">\n        <Textarea\n          ref={textareaRef}\n          value={editDraft}\n          onChange={(e) => setEditDraft(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onBlur={handleSave}\n          // compact inline-edit overrides on top of the Textarea base\n          className=\"resize-none rounded-control-inner bg-surface-raised-hover px-ds-02 py-ds-01 text-[13px] leading-relaxed\"\n          rows={2}\n        />\n        <div className=\"mt-ds-01 text-ds-xs text-surface-fg-subtle/50\">\n          Enter to save · Escape to cancel\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        'text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap',\n        canEdit && 'cursor-pointer hover:bg-surface-raised-hover rounded-control-inner transition-colors',\n      )}\n      onClick={handleStartEdit}\n      role={canEdit ? 'button' : undefined}\n      tabIndex={canEdit ? 0 : undefined}\n      onKeyDown={\n        canEdit\n          ? (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault()\n                handleStartEdit()\n              }\n            }\n          : undefined\n      }\n    >\n      {renderContent ? renderContent(content) : content}\n    </div>\n  )\n}\nMessageEditableBody.displayName = 'Message.EditableBody'\n\n// ── Reactions ────────────────────────────────────────────────────────────\n\nexport interface MessageReactionsProps {\n  reactions: { emoji: string; count: number; reacted: boolean }[]\n  onReact: (emoji: string) => void\n}\n\nfunction MessageReactions({ reactions, onReact }: MessageReactionsProps) {\n  if (reactions.length === 0) return null\n\n  return (\n    <div className=\"flex flex-wrap gap-ds-02 mt-ds-03\">\n      {reactions.map((r) => (\n        <button\n          key={r.emoji}\n          type=\"button\"\n          onClick={() => onReact(r.emoji)}\n          aria-label={`${r.emoji} ${r.count} reaction${r.count !== 1 ? 's' : ''}${r.reacted ? ', you reacted' : ''}`}\n          className={cn(\n            'inline-flex items-center gap-ds-01 rounded-pill px-ds-02 py-ds-01 text-ds-xs transition-colors',\n            r.reacted\n              ? 'bg-accent-3 ring-1 ring-accent-6'\n              : 'bg-surface-raised-hover hover:bg-surface-raised-active',\n          )}\n        >\n          <span>{r.emoji}</span>\n          <span>{r.count}</span>\n        </button>\n      ))}\n    </div>\n  )\n}\nMessageReactions.displayName = 'Message.Reactions'\n\n// ── Actions (floating toolbar) ───────────────────────────────────────────\n\nexport interface MessageActionsProps {\n  children: React.ReactNode\n  delay?: number\n}\n\nfunction MessageActions({ children, delay = 100 }: MessageActionsProps) {\n  return (\n    <div\n      className={cn(\n        'absolute -top-2 right-0 z-10',\n        'flex items-center gap-ds-01 rounded-control bg-surface-raised px-ds-01 py-ds-01 shadow-raised',\n        'opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 transition-opacity duration-150',\n      )}\n      style={{ transitionDelay: `${delay}ms` }}\n    >\n      {children}\n    </div>\n  )\n}\nMessageActions.displayName = 'Message.Actions'\n\n// ── Action (single icon button) ──────────────────────────────────────────\n\nexport interface MessageActionProps {\n  icon: IconInput\n  label: string\n  onClick: () => void\n  variant?: 'default' | 'danger'\n}\n\nfunction MessageAction({\n  icon,\n  label,\n  onClick,\n  variant = 'default',\n}: MessageActionProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-label={label}\n          className={cn(\n            'p-ds-02 rounded-control-inner transition-colors',\n            variant === 'default' &&\n              'text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover',\n            variant === 'danger' &&\n              'text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover',\n          )}\n        >\n          <IconProvider size=\"xs\">{normalizeIcon(icon)}</IconProvider>\n        </button>\n      </TooltipTrigger>\n      <TooltipContent>{label}</TooltipContent>\n    </Tooltip>\n  )\n}\nMessageAction.displayName = 'Message.Action'\n\n// ── Compound Export ──────────────────────────────────────────────────────\n\nexport const Message = Object.assign(MessageRoot, {\n  Avatar: MessageAvatar,\n  Content: MessageContent,\n  Author: MessageAuthor,\n  Body: MessageBody,\n  EditableBody: MessageEditableBody,\n  Reactions: MessageReactions,\n  Actions: MessageActions,\n  Action: MessageAction,\n})\n\nexport {\n  type MessageContextValue,\n  useMessageContext,\n}\n","'use client'\n\nimport { IconSend, IconSquare } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { cn } from '../lib/utils'\n\nexport interface MessageInputProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit'> {\n  onSubmit: (text: string) => void\n  placeholder?: string\n  disabled?: boolean\n  isStreaming?: boolean\n  onCancel?: () => void\n  leadingSlot?: React.ReactNode\n  trailingSlot?: React.ReactNode\n  disclaimer?: string\n  sendIcon?: React.ReactNode\n}\n\nconst MessageInput = React.forwardRef<HTMLDivElement, MessageInputProps>(\n  (\n    {\n      onSubmit,\n      placeholder = 'Type a message...',\n      disabled = false,\n      isStreaming = false,\n      onCancel,\n      leadingSlot,\n      trailingSlot,\n      disclaimer,\n      sendIcon,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [text, setText] = React.useState('')\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n\n    const resize = React.useCallback(() => {\n      const el = textareaRef.current\n      if (!el) return\n      el.style.height = 'auto'\n      el.style.height = `${Math.min(el.scrollHeight, 160)}px`\n    }, [])\n\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setText(e.target.value)\n        resize()\n      },\n      [resize],\n    )\n\n    const handleSend = React.useCallback(() => {\n      const trimmed = text.trim()\n      if (!trimmed || isStreaming) return\n      onSubmit(trimmed)\n      setText('')\n      // Reset height after clearing\n      if (textareaRef.current) {\n        textareaRef.current.style.height = 'auto'\n      }\n    }, [text, isStreaming, onSubmit])\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (e.key === 'Enter' && !e.shiftKey) {\n          e.preventDefault()\n          if (!isStreaming) {\n            handleSend()\n          }\n        }\n      },\n      [isStreaming, handleSend],\n    )\n\n    const isEmpty = text.trim().length === 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'border-t border-surface-border-subtle px-ds-05 py-ds-04',\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-end gap-ds-02 rounded-overlay-lg border border-surface-border bg-surface-base p-ds-03\">\n          {leadingSlot}\n          <textarea\n            ref={textareaRef}\n            value={text}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            aria-label={placeholder || 'Type a message'}\n            disabled={disabled}\n            rows={1}\n            className=\"flex-1 resize-none bg-transparent px-ds-02 py-ds-01 text-ds-sm text-surface-fg placeholder:text-surface-fg-subtle/50 focus:outline-hidden disabled:opacity-50\"\n            style={{ maxHeight: 160 }}\n          />\n          {isStreaming ? (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              color=\"error\"\n              onClick={onCancel}\n              aria-label=\"Stop\"\n            >\n              <Icon icon={IconSquare} size=\"sm\" />\n            </Button>\n          ) : (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              onClick={handleSend}\n              disabled={isEmpty || disabled}\n              aria-label=\"Send\"\n            >\n              {sendIcon ?? <Icon icon={IconSend} size=\"sm\" />}\n            </Button>\n          )}\n          {trailingSlot}\n        </div>\n        {disclaimer && (\n          <p className=\"mt-ds-02 text-center text-ds-xs text-surface-fg-subtle/50\">\n            {disclaimer}\n          </p>\n        )}\n      </div>\n    )\n  },\n)\nMessageInput.displayName = 'MessageInput'\n\nexport { MessageInput }\n","'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { Spinner } from '../spinner'\n\nexport interface MessageListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  /** Auto-scroll to bottom when new content arrives (default true) */\n  autoScroll?: boolean\n  /** Number of new messages to show in the floating pill */\n  newMessageCount?: number\n  /** Called when user clicks the \"N new\" pill */\n  onScrollToBottom?: () => void\n  /** Called when user scrolls near the top — triggers load-more */\n  onLoadMore?: () => void\n  /** Whether more messages are currently being loaded */\n  loadingMore?: boolean\n  /** Content to render when there are no children */\n  emptySlot?: React.ReactNode\n  /** Custom scroll-to-bottom button (unused slot for future override) */\n  scrollToBottomSlot?: React.ReactNode\n  /** Content rendered above the scroll container (e.g. channel name) */\n  headerSlot?: React.ReactNode\n}\n\nconst MessageList = React.forwardRef<HTMLDivElement, MessageListProps>(\n  (\n    {\n      children,\n      autoScroll = true,\n      newMessageCount = 0,\n      onScrollToBottom,\n      onLoadMore,\n      loadingMore = false,\n      emptySlot,\n      scrollToBottomSlot,\n      headerSlot,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const scrollRef = React.useRef<HTMLDivElement>(null)\n    const isAtBottomRef = React.useRef(true)\n    const [isAtBottom, setIsAtBottom] = React.useState(true)\n    const loadingMoreRef = React.useRef(false)\n    const prevScrollHeightRef = React.useRef(0)\n\n    const isEmpty = React.Children.count(children) === 0 && !loadingMore\n\n    // ── Scroll handler ────────────────────────────────────────────\n    const handleScroll = React.useCallback(() => {\n      const el = scrollRef.current\n      if (!el) return\n\n      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40\n      isAtBottomRef.current = atBottom\n      setIsAtBottom(atBottom)\n\n      // Load more when near top\n      if (el.scrollTop < 100 && onLoadMore && !loadingMoreRef.current) {\n        loadingMoreRef.current = true\n        prevScrollHeightRef.current = el.scrollHeight\n        onLoadMore()\n      }\n    }, [onLoadMore])\n\n    // ── Auto-scroll to bottom when children change ────────────────\n    React.useLayoutEffect(() => {\n      const el = scrollRef.current\n      if (!el) return\n\n      // Scroll preservation after load-more\n      if (loadingMoreRef.current) {\n        const newScrollHeight = el.scrollHeight\n        el.scrollTop = newScrollHeight - prevScrollHeightRef.current\n        loadingMoreRef.current = false\n        return\n      }\n\n      // Auto-scroll if user was at bottom\n      if (autoScroll && isAtBottomRef.current) {\n        el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })\n      }\n    }, [children, autoScroll])\n\n    // ── Reset loading flag when loadingMore goes false ──────────\n    React.useEffect(() => {\n      if (!loadingMore) {\n        loadingMoreRef.current = false\n      }\n    }, [loadingMore])\n\n    // ── \"N new\" pill visibility ───────────────────────────────────\n    const showNewPill = newMessageCount > 0 && !isAtBottom\n\n    const handleScrollToBottom = React.useCallback(() => {\n      const el = scrollRef.current\n      if (el) {\n        el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })\n      }\n      onScrollToBottom?.()\n    }, [onScrollToBottom])\n\n    return (\n      <div\n        ref={ref}\n        className={cn('relative flex flex-1 flex-col overflow-hidden', className)}\n        {...props}\n      >\n        {headerSlot}\n        <div\n          ref={scrollRef}\n          role=\"log\"\n          aria-live=\"polite\"\n          aria-relevant=\"additions\"\n          className=\"flex-1 overflow-y-auto px-ds-05 py-ds-04\"\n          style={{\n            scrollbarWidth: 'thin',\n            scrollbarColor: 'var(--color-surface-border) transparent',\n          }}\n          onScroll={handleScroll}\n        >\n          {loadingMore && (\n            <div className=\"flex justify-center py-ds-03\">\n              <Spinner size=\"sm\" />\n            </div>\n          )}\n          {isEmpty ? (\n            emptySlot\n          ) : (\n            <div className=\"flex flex-col gap-ds-04\">\n              <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </div>\n          )}\n        </div>\n\n        {/* \"N new\" floating pill */}\n        <AnimatePresence>\n          {showNewPill && (\n            <motion.button\n              initial={{ opacity: 0, y: 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: 10 }}\n              transition={tweens.fade}\n              onClick={handleScrollToBottom}\n              className=\"absolute bottom-ds-04 left-1/2 z-10 -translate-x-1/2 rounded-pill bg-accent-9 px-ds-04 py-ds-02 text-ds-xs font-medium text-accent-fg shadow-raised transition-colors hover:bg-accent-10\"\n            >\n              {newMessageCount} new\n            </motion.button>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nMessageList.displayName = 'MessageList'\n\nexport { MessageList }\n","'use client'\n\nimport { IconAlertCircle } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Icon } from '../icon'\nimport { IconProvider } from '../icon-context'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\n\nexport interface SystemMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: IconInput\n  timestamp?: string\n  variant?: 'event' | 'alert'\n  children: React.ReactNode\n}\n\nfunction formatTime(ts: string): string {\n  return new Date(ts).toLocaleTimeString('en-US', {\n    hour: 'numeric',\n    minute: '2-digit',\n  })\n}\n\nconst SystemMessage = React.forwardRef<HTMLDivElement, SystemMessageProps>(\n  ({ icon, timestamp, variant = 'event', children, className, ...props }, ref) => {\n    if (variant === 'alert') {\n      return (\n        <div\n          ref={ref}\n          role=\"alert\"\n          className={cn('flex justify-center', className)}\n          {...props}\n        >\n          <div className=\"flex items-center gap-ds-03 rounded-surface bg-error-3 px-ds-04 py-ds-03\">\n            <IconProvider size=\"sm\">{normalizeIcon(icon) ?? <Icon icon={IconAlertCircle} />}</IconProvider>\n            <span className=\"text-ds-sm text-error-11\">{children}</span>\n            {timestamp && (\n              <span className=\"text-ds-sm text-error-11/60\">\n                {formatTime(timestamp)}\n              </span>\n            )}\n          </div>\n        </div>\n      )\n    }\n\n    // event variant (default)\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center gap-ds-02 rounded-control-inner bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-ds-sm text-surface-fg-subtle/60',\n          className,\n        )}\n        {...props}\n      >\n        <IconProvider size=\"xs\">{normalizeIcon(icon)}</IconProvider>\n        <span className=\"flex-1\">{children}</span>\n        {timestamp && <span>{formatTime(timestamp)}</span>}\n      </div>\n    )\n  },\n)\nSystemMessage.displayName = 'SystemMessage'\n\nexport { SystemMessage }\n","'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport interface TypingIndicatorProps {\n  users: { name: string; image?: string }[]\n  className?: string\n}\n\nfunction formatTypingText(users: { name: string }[]): string {\n  if (users.length === 1) return `${users[0].name} is typing...`\n  if (users.length === 2) return `${users[0].name} and ${users[1].name} are typing...`\n  return 'Several people are typing...'\n}\n\nfunction TypingIndicator({ users, className }: TypingIndicatorProps) {\n  return (\n    <div className={cn('min-h-[24px] px-ds-05', className)} role=\"status\" aria-live=\"polite\">\n      <AnimatePresence>\n        {users.length > 0 && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            className=\"flex items-center gap-ds-02 text-ds-xs text-surface-fg-subtle\"\n          >\n            <span className=\"flex items-center gap-ds-01\">\n              {[0, 1, 2].map((i) => (\n                <motion.span\n                  key={i}\n                  className=\"h-1 w-1 rounded-pill bg-surface-fg-subtle\"\n                  animate={{ y: [0, -3, 0] }}\n                  transition={{\n                    duration: 0.5,\n                    repeat: Infinity,\n                    delay: i * 0.15,\n                  }}\n                />\n              ))}\n            </span>\n            <span>{formatTypingText(users)}</span>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  )\n}\nTypingIndicator.displayName = 'TypingIndicator'\n\nexport { TypingIndicator }\n","import * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport interface UnreadSeparatorProps {\n  label?: string\n  count?: number\n  className?: string\n}\n\nfunction UnreadSeparator({\n  label = 'NEW',\n  count,\n  className,\n}: UnreadSeparatorProps) {\n  return (\n    <div className={cn('relative flex items-center py-ds-02', className)}>\n      <div className=\"flex-1 border-t-2 border-accent-7\" />\n      <span className=\"px-ds-03 text-ds-xs font-semibold text-accent-11\">\n        {count ? `${count} ${label}` : label}\n      </span>\n      <div className=\"flex-1 border-t-2 border-accent-7\" />\n    </div>\n  )\n}\nUnreadSeparator.displayName = 'UnreadSeparator'\n\nexport { UnreadSeparator }\n"],"mappings":"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"}
+{"version":3,"file":"chat.js","names":[],"sources":["../../src/ui/chat/date-separator.tsx","../../src/ui/chat/message.tsx","../../src/ui/chat/message-input.tsx","../../src/ui/chat/message-list.tsx","../../src/ui/chat/system-message.tsx","../../src/ui/chat/typing-indicator.tsx","../../src/ui/chat/unread-separator.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport interface DateSeparatorProps {\n  date: Date | string\n  format?: (date: Date) => string\n  className?: string\n}\n\nfunction defaultFormat(date: Date): string {\n  const now = new Date()\n  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n  const target = new Date(date.getFullYear(), date.getMonth(), date.getDate())\n  const diffMs = today.getTime() - target.getTime()\n  const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24))\n\n  if (diffDays === 0) return 'Today'\n  if (diffDays === 1) return 'Yesterday'\n\n  const month = date.toLocaleString('en-US', { month: 'short' })\n  const day = date.getDate()\n\n  if (date.getFullYear() !== now.getFullYear()) {\n    return `${month} ${day}, ${date.getFullYear()}`\n  }\n\n  return `${month} ${day}`\n}\n\nfunction DateSeparator({ date, format, className }: DateSeparatorProps) {\n  const d = typeof date === 'string' ? new Date(date) : date\n  const label = format ? format(d) : defaultFormat(d)\n\n  return (\n    <div className={cn('flex items-center gap-ds-03 py-ds-03', className)}>\n      <div className=\"flex-1 border-t border-surface-border-subtle\" />\n      <span className=\"text-ds-xs font-medium text-surface-fg-subtle/50 uppercase tracking-wider\">\n        {label}\n      </span>\n      <div className=\"flex-1 border-t border-surface-border-subtle\" />\n    </div>\n  )\n}\nDateSeparator.displayName = 'DateSeparator'\n\nexport { DateSeparator }\n","'use client'\n\nimport { IconTrash } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Avatar, AvatarFallback,AvatarImage } from '../avatar'\nimport { Icon } from '../icon'\nimport { IconProvider } from '../icon-context'\nimport type { IconInput } from '../lib/icon-input'\nimport { motionProps,springs } from '../lib/motion'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { Textarea } from '../textarea'\nimport { Tooltip, TooltipContent,TooltipTrigger } from '../tooltip'\n\n// ── Context ──────────────────────────────────────────────────────────────\n\ninterface MessageContextValue {\n  variant: 'flat' | 'bubble'\n  placement: 'start' | 'end'\n  grouped: boolean\n  highlight?: 'mention' | 'internal'\n}\n\nconst MessageContext = React.createContext<MessageContextValue>({\n  variant: 'flat',\n  placement: 'start',\n  grouped: false,\n})\n\nfunction useMessageContext() {\n  return React.useContext(MessageContext)\n}\n\n// ── Root ─────────────────────────────────────────────────────────────────\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  variant?: 'flat' | 'bubble'\n  placement?: 'start' | 'end'\n  highlight?: 'mention' | 'internal'\n  grouped?: boolean\n  deleted?: boolean\n  deletedText?: string\n}\n\nconst MessageRoot = React.forwardRef<HTMLDivElement, MessageProps>(\n  (\n    {\n      children,\n      variant = 'flat',\n      placement = 'start',\n      highlight,\n      grouped = false,\n      deleted = false,\n      deletedText = 'This message was deleted',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const ctx = React.useMemo<MessageContextValue>(\n      () => ({ variant, placement, grouped, highlight }),\n      [variant, placement, grouped, highlight],\n    )\n\n    if (deleted) {\n      return (\n        <motion.div\n          ref={ref}\n          initial={{ opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={springs.snappy}\n          className={cn(\n            'flex items-center gap-ds-02 py-ds-02 text-ds-xs text-surface-fg-subtle/50 italic',\n            className,\n          )}\n          {...motionProps(props)}\n        >\n          <Icon icon={IconTrash} size=\"xs\" />\n          {deletedText}\n        </motion.div>\n      )\n    }\n\n    if (variant === 'bubble') {\n      return (\n        <MessageContext.Provider value={ctx}>\n          <motion.div\n            ref={ref}\n            data-highlight={highlight}\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={springs.snappy}\n            className={cn(\n              'group/message relative flex',\n              placement === 'end' ? 'justify-end' : 'justify-start',\n              // mention is carried by the in-content @token, not a row tint/rail\n              highlight === 'internal' && 'bg-warning-2/50 rounded-control-inner',\n              className,\n            )}\n            {...motionProps(props)}\n          >\n            <div\n              className={cn(\n                'max-w-[85%] rounded-bubble px-ds-04 py-ds-03',\n                placement === 'end'\n                  ? 'bg-accent-3 text-surface-fg'\n                  : 'bg-surface-raised text-surface-fg',\n              )}\n            >\n              {children}\n            </div>\n          </motion.div>\n        </MessageContext.Provider>\n      )\n    }\n\n    // flat variant (default)\n    return (\n      <MessageContext.Provider value={ctx}>\n        <motion.div\n          ref={ref}\n          data-highlight={highlight}\n          initial={{ opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={springs.snappy}\n          className={cn(\n            'group/message relative flex gap-ds-04',\n            grouped && '-mt-ds-01',\n            // mention is carried by the in-content @token, not a row rail/tint\n            highlight === 'internal' && 'bg-warning-2/50 rounded-control-inner',\n            className,\n          )}\n          {...motionProps(props)}\n        >\n          {children}\n        </motion.div>\n      </MessageContext.Provider>\n    )\n  },\n)\nMessageRoot.displayName = 'Message'\n\n// ── Avatar ───────────────────────────────────────────────────────────────\n\nexport interface MessageAvatarProps {\n  src?: string | null\n  fallback?: string\n  icon?: IconInput\n  size?: 'sm' | 'md'\n  children?: React.ReactNode\n}\n\nfunction MessageAvatar({\n  src,\n  fallback,\n  icon,\n  size = 'md',\n  children,\n}: MessageAvatarProps) {\n  const { grouped } = useMessageContext()\n\n  const sizeClass = size === 'sm' ? 'w-5' : 'w-6'\n  const heightClass = size === 'sm' ? 'h-5' : 'h-6'\n\n  if (grouped) {\n    return <div className={cn(sizeClass, heightClass, 'shrink-0')} />\n  }\n\n  if (children) {\n    return (\n      <div className={cn(sizeClass, 'shrink-0 flex items-start')}>\n        {children}\n      </div>\n    )\n  }\n\n  if (icon) {\n    return (\n      <div\n        className={cn(\n          sizeClass,\n          size === 'sm' ? 'h-5' : 'h-6',\n          'shrink-0 flex items-center justify-center rounded-pill bg-surface-raised-hover',\n        )}\n      >\n        <IconProvider size={size === 'sm' ? 'xs' : 'sm'}>{normalizeIcon(icon)}</IconProvider>\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(sizeClass, 'shrink-0')}>\n      <Avatar size={size === 'sm' ? 'xs' : 'sm'}>\n        {src && <AvatarImage src={src} alt={fallback ?? ''} />}\n        <AvatarFallback>{fallback ?? ''}</AvatarFallback>\n      </Avatar>\n    </div>\n  )\n}\nMessageAvatar.displayName = 'Message.Avatar'\n\n// ── Content ──────────────────────────────────────────────────────────────\n\nexport interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nfunction MessageContent({ children, className, ...props }: MessageContentProps) {\n  return (\n    <div className={cn('min-w-0 flex-1 flex flex-col gap-ds-02', className)} {...props}>\n      {children}\n    </div>\n  )\n}\nMessageContent.displayName = 'Message.Content'\n\n// ── Author ───────────────────────────────────────────────────────────────\n\nexport interface MessageAuthorProps {\n  name: string\n  badge?: React.ReactNode\n  timestamp?: Date\n  formattedTimestamp?: string\n  timestampFormat?: (date: Date) => string\n}\n\nfunction defaultTimestampFormat(date: Date): string {\n  return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })\n}\n\nfunction MessageAuthor({\n  name,\n  badge,\n  timestamp,\n  formattedTimestamp,\n  timestampFormat = defaultTimestampFormat,\n}: MessageAuthorProps) {\n  const { grouped } = useMessageContext()\n\n  if (grouped) return null\n\n  const timeStr = formattedTimestamp\n    ?? (timestamp ? timestampFormat(timestamp) : undefined)\n\n  return (\n    <div className=\"flex items-baseline gap-ds-02\">\n      <span className=\"font-semibold text-[13px] text-surface-fg\">{name}</span>\n      {badge}\n      {timeStr && (\n        <span className=\"text-[11px] text-surface-fg-subtle/50\">{timeStr}</span>\n      )}\n    </div>\n  )\n}\nMessageAuthor.displayName = 'Message.Author'\n\n// ── Body ─────────────────────────────────────────────────────────────────\n\nexport interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nfunction MessageBody({ children, className, ...props }: MessageBodyProps) {\n  return (\n    <div\n      className={cn(\n        'text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\nMessageBody.displayName = 'Message.Body'\n\n// ── EditableBody ─────────────────────────────────────────────────────────\n\nexport interface MessageEditableBodyProps {\n  content: string\n  onSave: (newContent: string) => void\n  onCancel?: () => void\n  canEdit?: boolean\n  renderContent?: (content: string) => React.ReactNode\n}\n\nfunction MessageEditableBody({\n  content,\n  onSave,\n  onCancel,\n  canEdit = false,\n  renderContent,\n}: MessageEditableBodyProps) {\n  const [isEditing, setIsEditing] = React.useState(false)\n  const [editDraft, setEditDraft] = React.useState(content)\n  const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n\n  React.useEffect(() => {\n    if (isEditing && textareaRef.current) {\n      textareaRef.current.focus()\n      textareaRef.current.select()\n    }\n  }, [isEditing])\n\n  const handleStartEdit = React.useCallback(() => {\n    if (!canEdit) return\n    setEditDraft(content)\n    setIsEditing(true)\n  }, [canEdit, content])\n\n  const handleSave = React.useCallback(() => {\n    const trimmed = editDraft.trim()\n    if (trimmed && trimmed !== content) {\n      onSave(trimmed)\n    }\n    setIsEditing(false)\n  }, [editDraft, content, onSave])\n\n  const handleCancel = React.useCallback(() => {\n    setIsEditing(false)\n    setEditDraft(content)\n    onCancel?.()\n  }, [content, onCancel])\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === 'Enter' && !e.shiftKey) {\n        e.preventDefault()\n        handleSave()\n      } else if (e.key === 'Escape') {\n        e.preventDefault()\n        handleCancel()\n      }\n    },\n    [handleSave, handleCancel],\n  )\n\n  if (isEditing) {\n    return (\n      <div className=\"text-[13px] leading-relaxed\">\n        <Textarea\n          ref={textareaRef}\n          value={editDraft}\n          onChange={(e) => setEditDraft(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onBlur={handleSave}\n          // compact inline-edit overrides on top of the Textarea base\n          className=\"resize-none rounded-control-inner bg-surface-raised-hover px-ds-02 py-ds-01 text-[13px] leading-relaxed\"\n          rows={2}\n        />\n        <div className=\"mt-ds-01 text-ds-xs text-surface-fg-subtle/50\">\n          Enter to save · Escape to cancel\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        'text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap',\n        canEdit && 'cursor-pointer hover:bg-surface-raised-hover rounded-control-inner transition-colors',\n      )}\n      onClick={handleStartEdit}\n      role={canEdit ? 'button' : undefined}\n      tabIndex={canEdit ? 0 : undefined}\n      onKeyDown={\n        canEdit\n          ? (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault()\n                handleStartEdit()\n              }\n            }\n          : undefined\n      }\n    >\n      {renderContent ? renderContent(content) : content}\n    </div>\n  )\n}\nMessageEditableBody.displayName = 'Message.EditableBody'\n\n// ── Reactions ────────────────────────────────────────────────────────────\n\nexport interface MessageReactionsProps {\n  reactions: { emoji: string; count: number; reacted: boolean }[]\n  onReact: (emoji: string) => void\n}\n\nfunction MessageReactions({ reactions, onReact }: MessageReactionsProps) {\n  if (reactions.length === 0) return null\n\n  return (\n    <div className=\"flex flex-wrap gap-ds-02 mt-ds-03\">\n      {reactions.map((r) => (\n        <button\n          key={r.emoji}\n          type=\"button\"\n          onClick={() => onReact(r.emoji)}\n          aria-label={`${r.emoji} ${r.count} reaction${r.count !== 1 ? 's' : ''}${r.reacted ? ', you reacted' : ''}`}\n          className={cn(\n            'inline-flex items-center gap-ds-01 rounded-pill px-ds-02 py-ds-01 text-ds-xs transition-colors',\n            r.reacted\n              ? 'bg-accent-3 ring-1 ring-accent-6'\n              : 'bg-surface-raised-hover hover:bg-surface-raised-active',\n          )}\n        >\n          <span>{r.emoji}</span>\n          <span>{r.count}</span>\n        </button>\n      ))}\n    </div>\n  )\n}\nMessageReactions.displayName = 'Message.Reactions'\n\n// ── Actions (floating toolbar) ───────────────────────────────────────────\n\nexport interface MessageActionsProps {\n  children: React.ReactNode\n  delay?: number\n}\n\nfunction MessageActions({ children, delay = 100 }: MessageActionsProps) {\n  return (\n    <div\n      className={cn(\n        'absolute -top-2 right-0 z-10',\n        'flex items-center gap-ds-01 rounded-control bg-surface-raised px-ds-01 py-ds-01 shadow-raised',\n        'opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 transition-opacity duration-150',\n      )}\n      style={{ transitionDelay: `${delay}ms` }}\n    >\n      {children}\n    </div>\n  )\n}\nMessageActions.displayName = 'Message.Actions'\n\n// ── Action (single icon button) ──────────────────────────────────────────\n\nexport interface MessageActionProps {\n  icon: IconInput\n  label: string\n  onClick: () => void\n  variant?: 'default' | 'danger'\n}\n\nfunction MessageAction({\n  icon,\n  label,\n  onClick,\n  variant = 'default',\n}: MessageActionProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-label={label}\n          className={cn(\n            'p-ds-02 rounded-control-inner transition-colors',\n            variant === 'default' &&\n              'text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover',\n            variant === 'danger' &&\n              'text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover',\n          )}\n        >\n          <IconProvider size=\"xs\">{normalizeIcon(icon)}</IconProvider>\n        </button>\n      </TooltipTrigger>\n      <TooltipContent>{label}</TooltipContent>\n    </Tooltip>\n  )\n}\nMessageAction.displayName = 'Message.Action'\n\n// ── Compound Export ──────────────────────────────────────────────────────\n\nexport const Message = Object.assign(MessageRoot, {\n  Avatar: MessageAvatar,\n  Content: MessageContent,\n  Author: MessageAuthor,\n  Body: MessageBody,\n  EditableBody: MessageEditableBody,\n  Reactions: MessageReactions,\n  Actions: MessageActions,\n  Action: MessageAction,\n})\n\nexport {\n  type MessageContextValue,\n  useMessageContext,\n}\n","'use client'\n\nimport { IconSend, IconSquare } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { cn } from '../lib/utils'\n\nexport interface MessageInputProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit'> {\n  onSubmit: (text: string) => void\n  placeholder?: string\n  disabled?: boolean\n  isStreaming?: boolean\n  onCancel?: () => void\n  leadingSlot?: React.ReactNode\n  trailingSlot?: React.ReactNode\n  disclaimer?: string\n  sendIcon?: React.ReactNode\n}\n\nconst MessageInput = React.forwardRef<HTMLDivElement, MessageInputProps>(\n  (\n    {\n      onSubmit,\n      placeholder = 'Type a message...',\n      disabled = false,\n      isStreaming = false,\n      onCancel,\n      leadingSlot,\n      trailingSlot,\n      disclaimer,\n      sendIcon,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [text, setText] = React.useState('')\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null)\n\n    const resize = React.useCallback(() => {\n      const el = textareaRef.current\n      if (!el) return\n      el.style.height = 'auto'\n      el.style.height = `${Math.min(el.scrollHeight, 160)}px`\n    }, [])\n\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setText(e.target.value)\n        resize()\n      },\n      [resize],\n    )\n\n    const handleSend = React.useCallback(() => {\n      const trimmed = text.trim()\n      if (!trimmed || isStreaming) return\n      onSubmit(trimmed)\n      setText('')\n      // Reset height after clearing\n      if (textareaRef.current) {\n        textareaRef.current.style.height = 'auto'\n      }\n    }, [text, isStreaming, onSubmit])\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (e.key === 'Enter' && !e.shiftKey) {\n          e.preventDefault()\n          if (!isStreaming) {\n            handleSend()\n          }\n        }\n      },\n      [isStreaming, handleSend],\n    )\n\n    const isEmpty = text.trim().length === 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'border-t border-surface-border-subtle px-ds-05 py-ds-04',\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-end gap-ds-02 rounded-overlay-lg border border-surface-border bg-surface-base p-ds-03\">\n          {leadingSlot}\n          <textarea\n            ref={textareaRef}\n            value={text}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            placeholder={placeholder}\n            aria-label={placeholder || 'Type a message'}\n            disabled={disabled}\n            rows={1}\n            className=\"flex-1 resize-none bg-transparent px-ds-02 py-ds-01 text-ds-sm text-surface-fg placeholder:text-surface-fg-subtle/50 focus:outline-hidden disabled:opacity-50\"\n            style={{ maxHeight: 160 }}\n          />\n          {isStreaming ? (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              color=\"error\"\n              onClick={onCancel}\n              aria-label=\"Stop\"\n            >\n              <Icon icon={IconSquare} size=\"sm\" />\n            </Button>\n          ) : (\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              onClick={handleSend}\n              disabled={isEmpty || disabled}\n              aria-label=\"Send\"\n            >\n              {sendIcon ?? <Icon icon={IconSend} size=\"sm\" />}\n            </Button>\n          )}\n          {trailingSlot}\n        </div>\n        {disclaimer && (\n          <p className=\"mt-ds-02 text-center text-ds-xs text-surface-fg-subtle/50\">\n            {disclaimer}\n          </p>\n        )}\n      </div>\n    )\n  },\n)\nMessageInput.displayName = 'MessageInput'\n\nexport { MessageInput }\n","'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { Spinner } from '../spinner'\n\nexport interface MessageListProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  /** Auto-scroll to bottom when new content arrives (default true) */\n  autoScroll?: boolean\n  /** Number of new messages to show in the floating pill */\n  newMessageCount?: number\n  /** Called when user clicks the \"N new\" pill */\n  onScrollToBottom?: () => void\n  /** Called when user scrolls near the top — triggers load-more */\n  onLoadMore?: () => void\n  /** Whether more messages are currently being loaded */\n  loadingMore?: boolean\n  /** Content to render when there are no children */\n  emptySlot?: React.ReactNode\n  /** Custom scroll-to-bottom button (unused slot for future override) */\n  scrollToBottomSlot?: React.ReactNode\n  /** Content rendered above the scroll container (e.g. channel name) */\n  headerSlot?: React.ReactNode\n}\n\nconst MessageList = React.forwardRef<HTMLDivElement, MessageListProps>(\n  (\n    {\n      children,\n      autoScroll = true,\n      newMessageCount = 0,\n      onScrollToBottom,\n      onLoadMore,\n      loadingMore = false,\n      emptySlot,\n      scrollToBottomSlot,\n      headerSlot,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const scrollRef = React.useRef<HTMLDivElement>(null)\n    const isAtBottomRef = React.useRef(true)\n    const [isAtBottom, setIsAtBottom] = React.useState(true)\n    const loadingMoreRef = React.useRef(false)\n    const prevScrollHeightRef = React.useRef(0)\n\n    const isEmpty = React.Children.count(children) === 0 && !loadingMore\n\n    // ── Scroll handler ────────────────────────────────────────────\n    const handleScroll = React.useCallback(() => {\n      const el = scrollRef.current\n      if (!el) return\n\n      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40\n      isAtBottomRef.current = atBottom\n      setIsAtBottom(atBottom)\n\n      // Load more when near top\n      if (el.scrollTop < 100 && onLoadMore && !loadingMoreRef.current) {\n        loadingMoreRef.current = true\n        prevScrollHeightRef.current = el.scrollHeight\n        onLoadMore()\n      }\n    }, [onLoadMore])\n\n    // ── Auto-scroll to bottom when children change ────────────────\n    React.useLayoutEffect(() => {\n      const el = scrollRef.current\n      if (!el) return\n\n      // Scroll preservation after load-more\n      if (loadingMoreRef.current) {\n        const newScrollHeight = el.scrollHeight\n        el.scrollTop = newScrollHeight - prevScrollHeightRef.current\n        loadingMoreRef.current = false\n        return\n      }\n\n      // Auto-scroll if user was at bottom\n      if (autoScroll && isAtBottomRef.current) {\n        el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })\n      }\n    }, [children, autoScroll])\n\n    // ── Reset loading flag when loadingMore goes false ──────────\n    React.useEffect(() => {\n      if (!loadingMore) {\n        loadingMoreRef.current = false\n      }\n    }, [loadingMore])\n\n    // ── \"N new\" pill visibility ───────────────────────────────────\n    const showNewPill = newMessageCount > 0 && !isAtBottom\n\n    const handleScrollToBottom = React.useCallback(() => {\n      const el = scrollRef.current\n      if (el) {\n        el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })\n      }\n      onScrollToBottom?.()\n    }, [onScrollToBottom])\n\n    return (\n      <div\n        ref={ref}\n        className={cn('relative flex flex-1 flex-col overflow-hidden', className)}\n        {...props}\n      >\n        {headerSlot}\n        <div\n          ref={scrollRef}\n          role=\"log\"\n          aria-live=\"polite\"\n          aria-relevant=\"additions\"\n          className=\"flex-1 overflow-y-auto px-ds-05 py-ds-04\"\n          style={{\n            scrollbarWidth: 'thin',\n            scrollbarColor: 'var(--color-surface-border) transparent',\n          }}\n          onScroll={handleScroll}\n        >\n          {loadingMore && (\n            <div className=\"flex justify-center py-ds-03\">\n              <Spinner size=\"sm\" />\n            </div>\n          )}\n          {isEmpty ? (\n            emptySlot\n          ) : (\n            <div className=\"flex flex-col gap-ds-04\">\n              <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </div>\n          )}\n        </div>\n\n        {/* \"N new\" floating pill */}\n        <AnimatePresence>\n          {showNewPill && (\n            <motion.button\n              initial={{ opacity: 0, y: 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: 10 }}\n              transition={tweens.fade}\n              onClick={handleScrollToBottom}\n              className=\"absolute bottom-ds-04 left-1/2 z-10 -translate-x-1/2 rounded-pill bg-accent-9 px-ds-04 py-ds-02 text-ds-xs font-medium text-accent-fg shadow-raised transition-colors hover:bg-accent-10\"\n            >\n              {newMessageCount} new\n            </motion.button>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nMessageList.displayName = 'MessageList'\n\nexport { MessageList }\n","'use client'\n\nimport { IconAlertCircle } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Icon } from '../icon'\nimport { IconProvider } from '../icon-context'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\n\nexport interface SystemMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: IconInput\n  timestamp?: string\n  variant?: 'event' | 'alert'\n  children: React.ReactNode\n}\n\nfunction formatTime(ts: string): string {\n  return new Date(ts).toLocaleTimeString('en-US', {\n    hour: 'numeric',\n    minute: '2-digit',\n  })\n}\n\nconst SystemMessage = React.forwardRef<HTMLDivElement, SystemMessageProps>(\n  ({ icon, timestamp, variant = 'event', children, className, ...props }, ref) => {\n    if (variant === 'alert') {\n      return (\n        <div\n          ref={ref}\n          role=\"alert\"\n          className={cn('flex justify-center', className)}\n          {...props}\n        >\n          <div className=\"flex items-center gap-ds-03 rounded-surface bg-error-3 px-ds-04 py-ds-03\">\n            <IconProvider size=\"sm\">{normalizeIcon(icon) ?? <Icon icon={IconAlertCircle} />}</IconProvider>\n            <span className=\"text-ds-sm text-error-11\">{children}</span>\n            {timestamp && (\n              <span className=\"text-ds-sm text-error-11/60\">\n                {formatTime(timestamp)}\n              </span>\n            )}\n          </div>\n        </div>\n      )\n    }\n\n    // event variant (default)\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center gap-ds-02 rounded-control-inner bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-ds-sm text-surface-fg-subtle/60',\n          className,\n        )}\n        {...props}\n      >\n        <IconProvider size=\"xs\">{normalizeIcon(icon)}</IconProvider>\n        <span className=\"flex-1\">{children}</span>\n        {timestamp && <span>{formatTime(timestamp)}</span>}\n      </div>\n    )\n  },\n)\nSystemMessage.displayName = 'SystemMessage'\n\nexport { SystemMessage }\n","'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport interface TypingIndicatorProps {\n  users: { name: string; image?: string }[]\n  className?: string\n}\n\nfunction formatTypingText(users: { name: string }[]): string {\n  if (users.length === 1) return `${users[0].name} is typing...`\n  if (users.length === 2) return `${users[0].name} and ${users[1].name} are typing...`\n  return 'Several people are typing...'\n}\n\nfunction TypingIndicator({ users, className }: TypingIndicatorProps) {\n  return (\n    <div className={cn('min-h-[24px] px-ds-05', className)} role=\"status\" aria-live=\"polite\">\n      <AnimatePresence>\n        {users.length > 0 && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            className=\"flex items-center gap-ds-02 text-ds-xs text-surface-fg-subtle\"\n          >\n            <span className=\"flex items-center gap-ds-01\">\n              {[0, 1, 2].map((i) => (\n                <motion.span\n                  key={i}\n                  className=\"h-1 w-1 rounded-pill bg-surface-fg-subtle\"\n                  animate={{ y: [0, -3, 0] }}\n                  transition={{\n                    duration: 0.5,\n                    repeat: Infinity,\n                    delay: i * 0.15,\n                  }}\n                />\n              ))}\n            </span>\n            <span>{formatTypingText(users)}</span>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  )\n}\nTypingIndicator.displayName = 'TypingIndicator'\n\nexport { TypingIndicator }\n","import * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport interface UnreadSeparatorProps {\n  label?: string\n  count?: number\n  className?: string\n}\n\nfunction UnreadSeparator({\n  label = 'NEW',\n  count,\n  className,\n}: UnreadSeparatorProps) {\n  return (\n    <div className={cn('relative flex items-center py-ds-02', className)}>\n      <div className=\"flex-1 border-t-2 border-accent-7\" />\n      <span className=\"px-ds-03 text-ds-xs font-semibold text-accent-11\">\n        {count ? `${count} ${label}` : label}\n      </span>\n      <div className=\"flex-1 border-t-2 border-accent-7\" />\n    </div>\n  )\n}\nUnreadSeparator.displayName = 'UnreadSeparator'\n\nexport { UnreadSeparator }\n"],"mappings":"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"}

package/dist/_chunks/document-preview.js

@@ -3,7 +3,7 @@ import { tweens as e } from "../ui/lib/motion.js";
 import { Icon as t } from "../ui/icon.js";
 import { Button as n } from "../ui/button.js";
 import { Skeleton as r } from "../ui/skeleton.js";
-import { n as i, t as a } from "./shared.js";
+import { r as i, t as a } from "./shared.js";
 import * as o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { IconChevronLeft as l, IconChevronRight as u } from "@tabler/icons-react";

package/dist/_chunks/image-preview.js

@@ -4,7 +4,7 @@ import { cn as t } from "../ui/lib/utils.js";
 import { Icon as n } from "../ui/icon.js";
 import { Button as r } from "../ui/button.js";
 import { Skeleton as i } from "../ui/skeleton.js";
-import { n as a, r as o, t as s } from "./shared.js";
+import { i as a, r as o, t as s } from "./shared.js";
 import * as c from "react";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 import { IconMaximize as f, IconMinimize as p, IconZoomIn as m, IconZoomOut as h, IconZoomReset as g } from "@tabler/icons-react";
@@ -64,7 +64,7 @@ function b({ url: b, alt: x, onError: S }) {
 						draggable: !1
 					})
 				})]
-			}), C && /* @__PURE__ */ d(a, {
+			}), C && /* @__PURE__ */ d(o, {
 				className: k ? "absolute bottom-ds-06" : void 0,
 				children: [
 					/* @__PURE__ */ u(r, {
@@ -93,7 +93,7 @@ function b({ url: b, alt: x, onError: S }) {
 							size: "sm"
 						})
 					}),
-					/* @__PURE__ */ u(o, {}),
+					/* @__PURE__ */ u(a, {}),
 					/* @__PURE__ */ u(r, {
 						variant: "ghost",
 						size: "icon-xs",
@@ -105,7 +105,7 @@ function b({ url: b, alt: x, onError: S }) {
 							size: "sm"
 						})
 					}),
-					/* @__PURE__ */ u(o, {}),
+					/* @__PURE__ */ u(a, {}),
 					/* @__PURE__ */ u(r, {
 						variant: "ghost",
 						size: "icon-xs",

package/dist/_chunks/shared.js

@@ -1,35 +1,36 @@
 "use client";
-import { tweens as e } from "../ui/lib/motion.js";
-import { cn as t } from "../ui/lib/utils.js";
-import { Icon as n } from "../ui/icon.js";
-import { Button as r } from "../ui/button.js";
-import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { IconAlertTriangle as s, IconDownload as c, IconVolume as l, IconVolumeOff as u } from "@tabler/icons-react";
-import { motion as d } from "framer-motion";
+import { H as e, U as t, V as n, W as r } from "./primitives.js";
+import { tweens as i } from "../ui/lib/motion.js";
+import { cn as a } from "../ui/lib/utils.js";
+import { Icon as o } from "../ui/icon.js";
+import { Button as s } from "../ui/button.js";
+import "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { IconAlertTriangle as u, IconDownload as d, IconVolume as f, IconVolumeOff as p } from "@tabler/icons-react";
+import { motion as m } from "framer-motion";
 //#region src/composed/file-preview/shared.tsx
-function f({ message: e, url: t }) {
-	return /* @__PURE__ */ o("div", {
+function h({ message: e, url: t }) {
+	return /* @__PURE__ */ l("div", {
 		className: "flex flex-col items-center justify-center gap-ds-04 rounded-control border border-surface-border bg-surface-sunken p-ds-08 text-center",
 		children: [
-			/* @__PURE__ */ a(n, {
-				icon: s,
+			/* @__PURE__ */ c(o, {
+				icon: u,
 				size: "2xl",
 				className: "text-warning-9"
 			}),
-			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
+			/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
 				className: "text-ds-md font-semibold text-surface-fg",
 				children: "Preview unavailable"
-			}), /* @__PURE__ */ a("p", {
+			}), /* @__PURE__ */ c("p", {
 				className: "text-ds-sm text-surface-fg-muted mt-ds-01",
 				children: e
 			})] }),
-			/* @__PURE__ */ a(r, {
+			/* @__PURE__ */ c(s, {
 				variant: "outline",
 				size: "xs",
-				startIcon: /* @__PURE__ */ a(n, { icon: c }),
+				startIcon: /* @__PURE__ */ c(o, { icon: d }),
 				asChild: !0,
-				children: /* @__PURE__ */ a("a", {
+				children: /* @__PURE__ */ c("a", {
 					href: t,
 					download: !0,
 					target: "_blank",
@@ -40,8 +41,8 @@ function f({ message: e, url: t }) {
 		]
 	});
 }
-function p({ children: n, className: r }) {
-	return /* @__PURE__ */ a(d.div, {
+function g({ children: e, className: t }) {
+	return /* @__PURE__ */ c(m.div, {
 		initial: {
 			opacity: 0,
 			y: 8
@@ -50,77 +51,63 @@ function p({ children: n, className: r }) {
 			opacity: 1,
 			y: 0
 		},
-		transition: e.fade,
-		className: t("flex items-center gap-ds-01 rounded-control bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs", r),
-		children: n
+		transition: i.fade,
+		className: a("flex items-center gap-ds-01 rounded-control bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs", t),
+		children: e
 	});
 }
-function m() {
-	return /* @__PURE__ */ a("div", { className: "mx-ds-01 h-4 w-px bg-surface-border-subtle" });
+function _() {
+	return /* @__PURE__ */ c("div", { className: "mx-ds-01 h-4 w-px bg-surface-border-subtle" });
 }
-function h({ volume: e, muted: r, onVolumeChange: s, onMuteToggle: c, variant: d = "light" }) {
-	let f = i.useRef(null), [p, m] = i.useState(!1), h = r ? 0 : e;
-	function g(t) {
-		if (!f.current) return e;
-		let n = f.current.getBoundingClientRect();
-		return Math.max(0, Math.min(1, (t.clientX - n.left) / n.width));
-	}
-	function _(e) {
-		e.preventDefault(), m(!0), s(g(e)), e.target.setPointerCapture(e.pointerId);
-	}
-	function v(e) {
-		p && s(g(e));
-	}
-	function y() {
-		m(!1);
-	}
-	let b = d === "dark", x = b ? "bg-white/30" : "bg-surface-sunken", S = b ? "bg-white" : "bg-accent-9", C = b ? "bg-white" : "bg-accent-9";
-	return /* @__PURE__ */ o("div", {
-		className: "group/vol flex items-center gap-ds-02 shrink-0",
-		children: [/* @__PURE__ */ a("button", {
-			onClick: c,
-			className: t("transition-colors", b ? "text-white hover:text-white/80" : "text-surface-fg-muted hover:text-surface-fg"),
-			"aria-label": r ? "Unmute (M)" : "Mute (M)",
-			title: r ? "Unmute" : "Mute",
-			children: r || e === 0 ? /* @__PURE__ */ a(n, {
-				icon: u,
+function v({ value: i, max: o = 100, step: s = 1, onValueChange: u, tone: d = "light", ariaLabel: f, disabled: p, className: m }) {
+	let h = d === "dark";
+	return /* @__PURE__ */ l(e, {
+		className: a("group/ms relative flex h-3 w-full cursor-pointer touch-none select-none items-center", m),
+		value: [i],
+		max: o,
+		step: s,
+		disabled: p,
+		onValueChange: (e) => u(e[0] ?? 0),
+		"aria-label": f,
+		children: [/* @__PURE__ */ c(r, {
+			className: a("relative h-1 w-full grow overflow-hidden rounded-pill", h ? "bg-white/30" : "bg-surface-sunken"),
+			children: /* @__PURE__ */ c(n, { className: a("absolute h-full rounded-pill", h ? "bg-white" : "bg-accent-9") })
+		}), /* @__PURE__ */ c(t, { className: a("block h-3 w-3 rounded-pill shadow-raised outline-hidden transition-[opacity,transform] duration-fast-02", "opacity-0 group-hover/ms:opacity-100 focus:opacity-100 active:scale-110", "focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1", h ? "bg-white focus-visible:ring-white" : "bg-accent-9 focus-visible:ring-accent-9") })]
+	});
+}
+function y({ volume: e, muted: t, onVolumeChange: n, onMuteToggle: r, variant: i = "light" }) {
+	let s = t ? 0 : e;
+	return /* @__PURE__ */ l("div", {
+		className: "flex items-center gap-ds-02 shrink-0 group/vol",
+		children: [/* @__PURE__ */ c("button", {
+			onClick: r,
+			className: a("transition-colors", i === "dark" ? "text-white hover:text-white/80" : "text-surface-fg-muted hover:text-surface-fg"),
+			"aria-label": t ? "Unmute (M)" : "Mute (M)",
+			title: t ? "Unmute" : "Mute",
+			children: t || e === 0 ? /* @__PURE__ */ c(o, {
+				icon: p,
 				size: "sm"
-			}) : /* @__PURE__ */ a(n, {
-				icon: l,
+			}) : /* @__PURE__ */ c(o, {
+				icon: f,
 				size: "sm"
 			})
-		}), /* @__PURE__ */ a("div", {
-			className: "w-0 overflow-hidden group-hover/vol:w-20 transition-[width] duration-200 ease-productive-standard flex items-center",
-			children: /* @__PURE__ */ o("div", {
-				ref: f,
-				className: t("relative w-full h-1 rounded-pill cursor-pointer", x),
-				onPointerDown: _,
-				onPointerMove: v,
-				onPointerUp: y,
-				role: "slider",
-				"aria-label": "Volume",
-				"aria-valuenow": Math.round(h * 100),
-				"aria-valuemin": 0,
-				"aria-valuemax": 100,
-				tabIndex: 0,
-				children: [/* @__PURE__ */ a("div", {
-					className: t("absolute left-0 top-0 h-full rounded-pill transition-[width] duration-75", S),
-					style: { width: `${h * 100}%` }
-				}), /* @__PURE__ */ a("div", {
-					className: t("absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-pill shadow-raised transition-opacity", C, p ? "opacity-100 scale-110" : "opacity-0 group-hover/vol:opacity-100"),
-					style: {
-						left: `${h * 100}%`,
-						marginLeft: "-5px"
-					}
-				})]
+		}), /* @__PURE__ */ c("div", {
+			className: "flex w-0 items-center overflow-hidden transition-[width] duration-200 ease-productive-standard group-hover/vol:w-20 focus-within:w-20",
+			children: /* @__PURE__ */ c(v, {
+				value: s,
+				max: 1,
+				step: .01,
+				onValueChange: n,
+				tone: i,
+				ariaLabel: "Volume"
 			})
 		})]
 	});
 }
-function g(e) {
+function b(e) {
 	if (!isFinite(e) || e < 0) return "0:00";
 	let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
 	return t > 0 ? `${t}:${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}` : `${n}:${r.toString().padStart(2, "0")}`;
 }
 //#endregion
-export { g as a, h as i, p as n, m as r, f as t };
+export { y as a, _ as i, v as n, b as o, g as r, h as t };

package/dist/_chunks/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","names":[],"sources":["../../src/composed/file-preview/shared.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconAlertTriangle,\n  IconDownload,\n  IconVolume,\n  IconVolumeOff,\n} from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Button } from '../../ui/button'\nimport { Icon } from '../../ui/icon'\nimport { tweens } from '../../ui/lib/motion'\nimport { cn } from '../../ui/lib/utils'\n\n// ============================================================\n// Shared: Error Fallback\n// ============================================================\n\nexport function ErrorFallback({ message, url }: { message: string; url: string }) {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-ds-04 rounded-control border border-surface-border bg-surface-sunken p-ds-08 text-center\">\n      <Icon icon={IconAlertTriangle} size=\"2xl\" className=\"text-warning-9\" />\n      <div>\n        <p className=\"text-ds-md font-semibold text-surface-fg\">Preview unavailable</p>\n        <p className=\"text-ds-sm text-surface-fg-muted mt-ds-01\">{message}</p>\n      </div>\n      <Button variant=\"outline\" size=\"xs\" startIcon={<Icon icon={IconDownload} />} asChild>\n        <a href={url} download target=\"_blank\" rel=\"noopener noreferrer\">Download file</a>\n      </Button>\n    </div>\n  )\n}\n\n// ============================================================\n// Shared: Floating Toolbar\n// ============================================================\n\nexport function Toolbar({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={tweens.fade}\n      className={cn(\n        'flex items-center gap-ds-01 rounded-control bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs',\n        className,\n      )}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nexport function ToolbarDivider() {\n  return <div className=\"mx-ds-01 h-4 w-px bg-surface-border-subtle\" />\n}\n\n// ============================================================\n// Shared: Volume Slider (Spotify/YouTube style)\n// Custom-built — no native input range. Consistent across browsers.\n// ============================================================\n\nexport function VolumeControl({\n  volume,\n  muted,\n  onVolumeChange,\n  onMuteToggle,\n  variant = 'light',\n}: {\n  volume: number\n  muted: boolean\n  onVolumeChange: (v: number) => void\n  onMuteToggle: () => void\n  variant?: 'light' | 'dark'\n}) {\n  const trackRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n  const displayVolume = muted ? 0 : volume\n\n  function getVolumeFromEvent(e: MouseEvent | React.MouseEvent) {\n    if (!trackRef.current) return volume\n    const rect = trackRef.current.getBoundingClientRect()\n    return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\n  }\n\n  function handlePointerDown(e: React.PointerEvent) {\n    e.preventDefault()\n    setDragging(true)\n    const v = getVolumeFromEvent(e)\n    onVolumeChange(v)\n    ;(e.target as HTMLElement).setPointerCapture(e.pointerId)\n  }\n\n  function handlePointerMove(e: React.PointerEvent) {\n    if (!dragging) return\n    onVolumeChange(getVolumeFromEvent(e))\n  }\n\n  function handlePointerUp() {\n    setDragging(false)\n  }\n\n  const isDark = variant === 'dark'\n  const trackBg = isDark ? 'bg-white/30' : 'bg-surface-sunken'\n  const fillBg = isDark ? 'bg-white' : 'bg-accent-9'\n  const thumbBg = isDark ? 'bg-white' : 'bg-accent-9'\n  const iconClass = isDark ? 'text-white hover:text-white/80' : 'text-surface-fg-muted hover:text-surface-fg'\n\n  return (\n    <div className=\"group/vol flex items-center gap-ds-02 shrink-0\">\n      <button onClick={onMuteToggle} className={cn('transition-colors', iconClass)} aria-label={muted ? 'Unmute (M)' : 'Mute (M)'} title={muted ? 'Unmute' : 'Mute'}>\n        {muted || volume === 0 ? <Icon icon={IconVolumeOff} size=\"sm\" /> : <Icon icon={IconVolume} size=\"sm\" />}\n      </button>\n      <div className=\"w-0 overflow-hidden group-hover/vol:w-20 transition-[width] duration-200 ease-productive-standard flex items-center\">\n        <div\n          ref={trackRef}\n          className={cn('relative w-full h-1 rounded-pill cursor-pointer', trackBg)}\n          onPointerDown={handlePointerDown}\n          onPointerMove={handlePointerMove}\n          onPointerUp={handlePointerUp}\n          role=\"slider\"\n          aria-label=\"Volume\"\n          aria-valuenow={Math.round(displayVolume * 100)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          tabIndex={0}\n        >\n          {/* Fill */}\n          <div\n            className={cn('absolute left-0 top-0 h-full rounded-pill transition-[width] duration-75', fillBg)}\n            style={{ width: `${displayVolume * 100}%` }}\n          />\n          {/* Thumb */}\n          <div\n            className={cn(\n              'absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-pill shadow-raised transition-opacity',\n              thumbBg,\n              dragging ? 'opacity-100 scale-110' : 'opacity-0 group-hover/vol:opacity-100',\n            )}\n            style={{ left: `${displayVolume * 100}%`, marginLeft: '-5px' }}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ============================================================\n// Shared: Time Formatting\n// ============================================================\n\nexport function formatTime(s: number): string {\n  if (!isFinite(s) || s < 0) return '0:00'\n  const h = Math.floor(s / 3600)\n  const m = Math.floor((s % 3600) / 60)\n  const sec = Math.floor(s % 60)\n  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`\n  return `${m}:${sec.toString().padStart(2, '0')}`\n}\n"],"mappings":"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"}
+{"version":3,"file":"shared.js","names":[],"sources":["../../src/composed/file-preview/shared.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport {\n  IconAlertTriangle,\n  IconDownload,\n  IconVolume,\n  IconVolumeOff,\n} from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Button } from '../../ui/button'\nimport { Icon } from '../../ui/icon'\nimport { tweens } from '../../ui/lib/motion'\nimport { cn } from '../../ui/lib/utils'\n\n// ============================================================\n// Shared: Error Fallback\n// ============================================================\n\nexport function ErrorFallback({ message, url }: { message: string; url: string }) {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-ds-04 rounded-control border border-surface-border bg-surface-sunken p-ds-08 text-center\">\n      <Icon icon={IconAlertTriangle} size=\"2xl\" className=\"text-warning-9\" />\n      <div>\n        <p className=\"text-ds-md font-semibold text-surface-fg\">Preview unavailable</p>\n        <p className=\"text-ds-sm text-surface-fg-muted mt-ds-01\">{message}</p>\n      </div>\n      <Button variant=\"outline\" size=\"xs\" startIcon={<Icon icon={IconDownload} />} asChild>\n        <a href={url} download target=\"_blank\" rel=\"noopener noreferrer\">Download file</a>\n      </Button>\n    </div>\n  )\n}\n\n// ============================================================\n// Shared: Floating Toolbar\n// ============================================================\n\nexport function Toolbar({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={tweens.fade}\n      className={cn(\n        'flex items-center gap-ds-01 rounded-control bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs',\n        className,\n      )}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nexport function ToolbarDivider() {\n  return <div className=\"mx-ds-01 h-4 w-px bg-surface-border-subtle\" />\n}\n\n// ============================================================\n// Shared: MediaSlider — slim seek/scrub/volume control\n// Composes the Radix Slider primitive (the same one ui/Slider uses) so it's\n// keyboard-operable (Arrow/Home/End), shows a visible focus ring, and forced-colors-safe —\n// unlike the old mouse-only <div role=\"slider\">. Styled slim for media chrome;\n// the thumb is hover/focus-reveal (hidden at rest, shown on hover, drag, or\n// keyboard focus). `tone=\"dark\"` = white-on-overlay; `tone=\"light\"` = accent.\n// ============================================================\n\nexport function MediaSlider({\n  value,\n  max = 100,\n  step = 1,\n  onValueChange,\n  tone = 'light',\n  ariaLabel,\n  disabled,\n  className,\n}: {\n  value: number\n  max?: number\n  step?: number\n  onValueChange: (v: number) => void\n  tone?: 'light' | 'dark'\n  ariaLabel: string\n  disabled?: boolean\n  className?: string\n}) {\n  const isDark = tone === 'dark'\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        'group/ms relative flex h-3 w-full cursor-pointer touch-none select-none items-center',\n        className,\n      )}\n      value={[value]}\n      max={max}\n      step={step}\n      disabled={disabled}\n      onValueChange={(vals) => onValueChange(vals[0] ?? 0)}\n      aria-label={ariaLabel}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          'relative h-1 w-full grow overflow-hidden rounded-pill',\n          isDark ? 'bg-white/30' : 'bg-surface-sunken',\n        )}\n      >\n        <SliderPrimitive.Range\n          className={cn('absolute h-full rounded-pill', isDark ? 'bg-white' : 'bg-accent-9')}\n        />\n      </SliderPrimitive.Track>\n      <SliderPrimitive.Thumb\n        className={cn(\n          'block h-3 w-3 rounded-pill shadow-raised outline-hidden transition-[opacity,transform] duration-fast-02',\n          // hover/focus-reveal: hidden at rest, shown on hover, drag (focus), or keyboard\n          'opacity-0 group-hover/ms:opacity-100 focus:opacity-100 active:scale-110',\n          'focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1',\n          isDark ? 'bg-white focus-visible:ring-white' : 'bg-accent-9 focus-visible:ring-accent-9',\n        )}\n      />\n    </SliderPrimitive.Root>\n  )\n}\n\n// ============================================================\n// Shared: Volume Slider (Spotify/YouTube style)\n// ============================================================\n\nexport function VolumeControl({\n  volume,\n  muted,\n  onVolumeChange,\n  onMuteToggle,\n  variant = 'light',\n}: {\n  volume: number\n  muted: boolean\n  onVolumeChange: (v: number) => void\n  onMuteToggle: () => void\n  variant?: 'light' | 'dark'\n}) {\n  const displayVolume = muted ? 0 : volume\n  const isDark = variant === 'dark'\n  const iconClass = isDark ? 'text-white hover:text-white/80' : 'text-surface-fg-muted hover:text-surface-fg'\n\n  return (\n    <div className=\"flex items-center gap-ds-02 shrink-0 group/vol\">\n      <button onClick={onMuteToggle} className={cn('transition-colors', iconClass)} aria-label={muted ? 'Unmute (M)' : 'Mute (M)'} title={muted ? 'Unmute' : 'Mute'}>\n        {muted || volume === 0 ? <Icon icon={IconVolumeOff} size=\"sm\" /> : <Icon icon={IconVolume} size=\"sm\" />}\n      </button>\n      <div className=\"flex w-0 items-center overflow-hidden transition-[width] duration-200 ease-productive-standard group-hover/vol:w-20 focus-within:w-20\">\n        <MediaSlider\n          value={displayVolume}\n          max={1}\n          step={0.01}\n          onValueChange={onVolumeChange}\n          tone={variant}\n          ariaLabel=\"Volume\"\n        />\n      </div>\n    </div>\n  )\n}\n\n// ============================================================\n// Shared: Time Formatting\n// ============================================================\n\nexport function formatTime(s: number): string {\n  if (!isFinite(s) || s < 0) return '0:00'\n  const h = Math.floor(s / 3600)\n  const m = Math.floor((s % 3600) / 60)\n  const sec = Math.floor(s % 60)\n  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`\n  return `${m}:${sec.toString().padStart(2, '0')}`\n}\n"],"mappings":";;;;;;;;;;AAqBA,SAAgB,EAAc,EAAE,YAAS,UAAyC;AAChF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IAAM,MAAM;IAAmB,MAAK;IAAM,WAAU;IAAmB,CAAA;GACvE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;cAA2C;IAAuB,CAAA,EAC/E,kBAAC,KAAD;IAAG,WAAU;cAA6C;IAAY,CAAA,CAClE,EAAA,CAAA;GACN,kBAAC,GAAD;IAAQ,SAAQ;IAAU,MAAK;IAAK,WAAW,kBAAC,GAAD,EAAM,MAAM,GAAgB,CAAA;IAAE,SAAA;cAC3E,kBAAC,KAAD;KAAG,MAAM;KAAK,UAAA;KAAS,QAAO;KAAS,KAAI;eAAsB;KAAiB,CAAA;IAC3E,CAAA;GACL;;;AAQV,SAAgB,EAAQ,EAAE,aAAU,gBAAgE;AAClG,QACE,kBAAC,EAAO,KAAR;EACE,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,YAAY,EAAO;EACnB,WAAW,EACT,wHACA,EACD;EAEA;EACU,CAAA;;AAIjB,SAAgB,IAAiB;AAC/B,QAAO,kBAAC,OAAD,EAAK,WAAU,8CAA+C,CAAA;;AAYvE,SAAgB,EAAY,EAC1B,UACA,SAAM,KACN,UAAO,GACP,kBACA,UAAO,SACP,cACA,aACA,gBAUC;CACD,IAAM,IAAS,MAAS;AACxB,QACE,kBAAC,GAAD;EACE,WAAW,EACT,wFACA,EACD;EACD,OAAO,CAAC,EAAM;EACT;EACC;EACI;EACV,gBAAgB,MAAS,EAAc,EAAK,MAAM,EAAE;EACpD,cAAY;YAVd,CAYE,kBAAC,GAAD;GACE,WAAW,EACT,yDACA,IAAS,gBAAgB,oBAC1B;aAED,kBAAC,GAAD,EACE,WAAW,EAAG,gCAAgC,IAAS,aAAa,cAAc,EAClF,CAAA;GACoB,CAAA,EACxB,kBAAC,GAAD,EACE,WAAW,EACT,2GAEA,2EACA,8EACA,IAAS,sCAAsC,0CAChD,EACD,CAAA,CACmB;;;AAQ3B,SAAgB,EAAc,EAC5B,WACA,UACA,mBACA,iBACA,aAAU,WAOT;CACD,IAAM,IAAgB,IAAQ,IAAI;AAIlC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GAAQ,SAAS;GAAc,WAAW,EAAG,qBALlC,MAAY,SACA,mCAAmC,8CAIkB;GAAE,cAAY,IAAQ,eAAe;GAAY,OAAO,IAAQ,WAAW;aACpJ,KAAS,MAAW,IAAI,kBAAC,GAAD;IAAM,MAAM;IAAe,MAAK;IAAO,CAAA,GAAG,kBAAC,GAAD;IAAM,MAAM;IAAY,MAAK;IAAO,CAAA;GAChG,CAAA,EACT,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,OAAO;IACP,KAAK;IACL,MAAM;IACN,eAAe;IACf,MAAM;IACN,WAAU;IACV,CAAA;GACE,CAAA,CACF;;;AAQV,SAAgB,EAAW,GAAmB;AAC5C,KAAI,CAAC,SAAS,EAAE,IAAI,IAAI,EAAG,QAAO;CAClC,IAAM,IAAI,KAAK,MAAM,IAAI,KAAK,EACxB,IAAI,KAAK,MAAO,IAAI,OAAQ,GAAG,EAC/B,IAAM,KAAK,MAAM,IAAI,GAAG;AAE9B,QADI,IAAI,IAAU,GAAG,EAAE,GAAG,EAAE,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAI,UAAU,CAAC,SAAS,GAAG,IAAI,KACnF,GAAG,EAAE,GAAG,EAAI,UAAU,CAAC,SAAS,GAAG,IAAI"}