@mieweb/ui 0.7.1-dev.1 → 0.7.1-dev.11

package/dist/{chunk-KOCTIB6U.js → chunk-PS5INHGC.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-ZVSW2KS6.js';
+import { Button } from './chunk-WRYZ2752.js';
 import { useMediaTransport } from './chunk-SQHMGT4W.js';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
@@ -139,5 +139,5 @@ var MediaPlayer = React.forwardRef(
 MediaPlayer.displayName = "MediaPlayer";
 
 export { MediaPlayer, inferMediaKind, mediaPlayerVariants };
-//# sourceMappingURL=chunk-KOCTIB6U.js.map
-//# sourceMappingURL=chunk-KOCTIB6U.js.map
+//# sourceMappingURL=chunk-PS5INHGC.js.map
+//# sourceMappingURL=chunk-PS5INHGC.js.map

package/dist/{chunk-KOCTIB6U.js.map → chunk-PS5INHGC.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MediaPlayer/MediaPlayer.tsx"],"names":[],"mappings":"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","file":"chunk-KOCTIB6U.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { Button } from '../Button';\nimport { useMediaTransport } from '../../hooks/useMediaTransport';\n\n// ============================================================================\n// Types & Interfaces\n// ============================================================================\n\nexport type MediaPlayerState =\n  | 'idle'\n  | 'loading'\n  | 'playing'\n  | 'paused'\n  | 'error';\n\nexport type MediaKind = 'video' | 'audio';\n\n/** Ref handle for controlling {@link MediaPlayer} programmatically. */\nexport interface MediaPlayerRef {\n  /** Seek to a specific time in milliseconds. */\n  seekToMs: (timeMs: number) => void;\n  /** Start playback. */\n  play: () => void;\n  /** Pause playback. */\n  pause: () => void;\n  /** Get current playback time in milliseconds. */\n  getCurrentTimeMs: () => number;\n  /** Get total duration in milliseconds. */\n  getDurationMs: () => number;\n  /** Whether playback is currently paused. */\n  isPaused: () => boolean;\n  /** Set playback speed multiplier. */\n  setPlaybackRate: (rate: number) => void;\n  /**\n   * The underlying media element.\n   * Escape hatch for host integrations (e.g. thumbnail capture); prefer the\n   * typed methods above for playback control.\n   */\n  mediaElement: HTMLVideoElement | HTMLAudioElement | null;\n}\n\nexport interface MediaPlayerProps extends VariantProps<\n  typeof mediaPlayerVariants\n> {\n  /** Media source URL. */\n  src: string;\n  /** Force the media kind; when omitted it is inferred from the src extension. */\n  kind?: MediaKind;\n  /** Whether to show native controls (default `true`). */\n  controls?: boolean;\n  /** Callback when playback state changes. */\n  onStateChange?: (state: MediaPlayerState) => void;\n  /** Callback when playback ends. */\n  onEnded?: () => void;\n  /** Callback when an error occurs. */\n  onError?: (error: Error) => void;\n  /** Callback on time updates (milliseconds). */\n  onTimeUpdate?: (currentTimeMs: number, durationMs: number) => void;\n  /** Additional class name. */\n  className?: string;\n  /** Accessible label for the media element. */\n  'aria-label'?: string;\n  /**\n   * Transitional: exposes the raw media element to legacy consumers.\n   * Prefer {@link MediaPlayerRef} for playback control.\n   */\n  mediaElementRef?: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;\n}\n\n// ============================================================================\n// Variants\n// ============================================================================\n\nconst mediaPlayerVariants = cva(\n  'flex h-full w-full items-center justify-center',\n  {\n    variants: {\n      variant: {\n        plain: '',\n        card: 'rounded-xl border border-border bg-card text-card-foreground p-2',\n      },\n    },\n    defaultVariants: {\n      variant: 'plain',\n    },\n  }\n);\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst VIDEO_EXTENSIONS = /\\.(mp4|mov|avi|webm|mkv|m4v)$/i;\n\n/** Infer media kind from a URL's file extension; defaults to audio. */\nexport function inferMediaKind(src: string): MediaKind {\n  // Strip any query string / fragment before matching. Testing the extension\n  // against the full URL required a trailing `.*`, which backtracks\n  // polynomially on crafted inputs (ReDoS); splitting first is linear.\n  const path = src.split(/[?#]/, 1)[0];\n  return VIDEO_EXTENSIONS.test(path) ? 'video' : 'audio';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Media playback surface for audio and video with a shared imperative handle.\n *\n * Renders a native `<video>` or `<audio>` element (kind inferred from the src\n * extension unless forced) with themed error/retry handling. Playback state and\n * controls come from the shared {@link useMediaTransport} hook and are exposed\n * through {@link MediaPlayerRef} (all times in milliseconds) — consumers should\n * not reach into the DOM element directly.\n */\nexport const MediaPlayer = React.forwardRef<MediaPlayerRef, MediaPlayerProps>(\n  (\n    {\n      src,\n      kind,\n      controls = true,\n      variant,\n      onStateChange,\n      onEnded,\n      onError,\n      onTimeUpdate,\n      className,\n      'aria-label': ariaLabel,\n      mediaElementRef,\n    },\n    ref\n  ) => {\n    const [error, setError] = React.useState<string | null>(null);\n\n    // A failed load must not outlive its src: clearing on change lets a host\n    // swap in a corrected URL without being trapped on the error surface\n    // (which unmounts the media element, so the new src would never load).\n    React.useEffect(() => {\n      setError(null);\n    }, [src]);\n    const resolvedKind = kind ?? inferMediaKind(src);\n\n    const transport = useMediaTransport({\n      onTimeUpdate,\n      onStateChange,\n      onEnded,\n      onError: (err) => {\n        setError('Unable to load media. The server may be unavailable.');\n        onError?.(err);\n      },\n      endedState: 'paused',\n      errorLabel: `media: ${src}`,\n    });\n\n    const { setMediaElement, mediaElement } = transport;\n\n    const setElement = React.useCallback(\n      (el: HTMLVideoElement | HTMLAudioElement | null) => {\n        setMediaElement(el);\n        if (mediaElementRef) {\n          (mediaElementRef as React.MutableRefObject<typeof el>).current = el;\n        }\n      },\n      [setMediaElement, mediaElementRef]\n    );\n\n    React.useImperativeHandle(\n      ref,\n      (): MediaPlayerRef => ({\n        seekToMs: transport.seekToMs,\n        play: transport.play,\n        pause: transport.pause,\n        getCurrentTimeMs: transport.getCurrentTimeMs,\n        getDurationMs: transport.getDurationMs,\n        isPaused: transport.isPaused,\n        setPlaybackRate: transport.setPlaybackRate,\n        get mediaElement() {\n          return mediaElement;\n        },\n      }),\n      [transport, mediaElement]\n    );\n\n    const handleRetry = React.useCallback(() => {\n      setError(null);\n      mediaElement?.load();\n    }, [mediaElement]);\n\n    const sharedMediaProps = {\n      src,\n      controls,\n      'aria-label': ariaLabel,\n    };\n\n    if (error) {\n      return (\n        <div className={mediaPlayerVariants({ variant, className })}>\n          <div\n            role=\"alert\"\n            className=\"border-destructive/30 bg-destructive/10 flex min-h-36 flex-col items-center justify-center gap-3 rounded-lg border p-8 text-center\"\n          >\n            {/* destructive-700/300 instead of the base token: #dc2626 on the\n                destructive/10 tint is 4.14:1 — below WCAG AA (axe: color-contrast). */}\n            <p className=\"text-destructive-700 dark:text-destructive-300 m-0 text-sm\">\n              {error}\n            </p>\n            {/* bg-background: the outline button is transparent, and its text on\n                the destructive/10 tint sits exactly at the 4.5:1 AA boundary. */}\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"bg-background\"\n              onClick={handleRetry}\n            >\n              Retry\n            </Button>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div className={mediaPlayerVariants({ variant, className })}>\n        {resolvedKind === 'video' ? (\n          // Generic media surface: caption tracks belong to the consumer's media\n          // resource and are supplied via children, not this transport component.\n          // eslint-disable-next-line jsx-a11y/media-has-caption\n          <video\n            ref={setElement as React.Ref<HTMLVideoElement>}\n            playsInline\n            className=\"h-auto max-h-full w-auto max-w-full object-contain\"\n            {...sharedMediaProps}\n          />\n        ) : (\n          // eslint-disable-next-line jsx-a11y/media-has-caption\n          <audio\n            ref={setElement as React.Ref<HTMLAudioElement>}\n            className=\"my-4 w-[90%] max-w-lg\"\n            {...sharedMediaProps}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nMediaPlayer.displayName = 'MediaPlayer';\n\nexport { mediaPlayerVariants };\n"]}
+{"version":3,"sources":["../src/components/MediaPlayer/MediaPlayer.tsx"],"names":[],"mappings":"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","file":"chunk-PS5INHGC.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { Button } from '../Button';\nimport { useMediaTransport } from '../../hooks/useMediaTransport';\n\n// ============================================================================\n// Types & Interfaces\n// ============================================================================\n\nexport type MediaPlayerState =\n  | 'idle'\n  | 'loading'\n  | 'playing'\n  | 'paused'\n  | 'error';\n\nexport type MediaKind = 'video' | 'audio';\n\n/** Ref handle for controlling {@link MediaPlayer} programmatically. */\nexport interface MediaPlayerRef {\n  /** Seek to a specific time in milliseconds. */\n  seekToMs: (timeMs: number) => void;\n  /** Start playback. */\n  play: () => void;\n  /** Pause playback. */\n  pause: () => void;\n  /** Get current playback time in milliseconds. */\n  getCurrentTimeMs: () => number;\n  /** Get total duration in milliseconds. */\n  getDurationMs: () => number;\n  /** Whether playback is currently paused. */\n  isPaused: () => boolean;\n  /** Set playback speed multiplier. */\n  setPlaybackRate: (rate: number) => void;\n  /**\n   * The underlying media element.\n   * Escape hatch for host integrations (e.g. thumbnail capture); prefer the\n   * typed methods above for playback control.\n   */\n  mediaElement: HTMLVideoElement | HTMLAudioElement | null;\n}\n\nexport interface MediaPlayerProps extends VariantProps<\n  typeof mediaPlayerVariants\n> {\n  /** Media source URL. */\n  src: string;\n  /** Force the media kind; when omitted it is inferred from the src extension. */\n  kind?: MediaKind;\n  /** Whether to show native controls (default `true`). */\n  controls?: boolean;\n  /** Callback when playback state changes. */\n  onStateChange?: (state: MediaPlayerState) => void;\n  /** Callback when playback ends. */\n  onEnded?: () => void;\n  /** Callback when an error occurs. */\n  onError?: (error: Error) => void;\n  /** Callback on time updates (milliseconds). */\n  onTimeUpdate?: (currentTimeMs: number, durationMs: number) => void;\n  /** Additional class name. */\n  className?: string;\n  /** Accessible label for the media element. */\n  'aria-label'?: string;\n  /**\n   * Transitional: exposes the raw media element to legacy consumers.\n   * Prefer {@link MediaPlayerRef} for playback control.\n   */\n  mediaElementRef?: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;\n}\n\n// ============================================================================\n// Variants\n// ============================================================================\n\nconst mediaPlayerVariants = cva(\n  'flex h-full w-full items-center justify-center',\n  {\n    variants: {\n      variant: {\n        plain: '',\n        card: 'rounded-xl border border-border bg-card text-card-foreground p-2',\n      },\n    },\n    defaultVariants: {\n      variant: 'plain',\n    },\n  }\n);\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst VIDEO_EXTENSIONS = /\\.(mp4|mov|avi|webm|mkv|m4v)$/i;\n\n/** Infer media kind from a URL's file extension; defaults to audio. */\nexport function inferMediaKind(src: string): MediaKind {\n  // Strip any query string / fragment before matching. Testing the extension\n  // against the full URL required a trailing `.*`, which backtracks\n  // polynomially on crafted inputs (ReDoS); splitting first is linear.\n  const path = src.split(/[?#]/, 1)[0];\n  return VIDEO_EXTENSIONS.test(path) ? 'video' : 'audio';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Media playback surface for audio and video with a shared imperative handle.\n *\n * Renders a native `<video>` or `<audio>` element (kind inferred from the src\n * extension unless forced) with themed error/retry handling. Playback state and\n * controls come from the shared {@link useMediaTransport} hook and are exposed\n * through {@link MediaPlayerRef} (all times in milliseconds) — consumers should\n * not reach into the DOM element directly.\n */\nexport const MediaPlayer = React.forwardRef<MediaPlayerRef, MediaPlayerProps>(\n  (\n    {\n      src,\n      kind,\n      controls = true,\n      variant,\n      onStateChange,\n      onEnded,\n      onError,\n      onTimeUpdate,\n      className,\n      'aria-label': ariaLabel,\n      mediaElementRef,\n    },\n    ref\n  ) => {\n    const [error, setError] = React.useState<string | null>(null);\n\n    // A failed load must not outlive its src: clearing on change lets a host\n    // swap in a corrected URL without being trapped on the error surface\n    // (which unmounts the media element, so the new src would never load).\n    React.useEffect(() => {\n      setError(null);\n    }, [src]);\n    const resolvedKind = kind ?? inferMediaKind(src);\n\n    const transport = useMediaTransport({\n      onTimeUpdate,\n      onStateChange,\n      onEnded,\n      onError: (err) => {\n        setError('Unable to load media. The server may be unavailable.');\n        onError?.(err);\n      },\n      endedState: 'paused',\n      errorLabel: `media: ${src}`,\n    });\n\n    const { setMediaElement, mediaElement } = transport;\n\n    const setElement = React.useCallback(\n      (el: HTMLVideoElement | HTMLAudioElement | null) => {\n        setMediaElement(el);\n        if (mediaElementRef) {\n          (mediaElementRef as React.MutableRefObject<typeof el>).current = el;\n        }\n      },\n      [setMediaElement, mediaElementRef]\n    );\n\n    React.useImperativeHandle(\n      ref,\n      (): MediaPlayerRef => ({\n        seekToMs: transport.seekToMs,\n        play: transport.play,\n        pause: transport.pause,\n        getCurrentTimeMs: transport.getCurrentTimeMs,\n        getDurationMs: transport.getDurationMs,\n        isPaused: transport.isPaused,\n        setPlaybackRate: transport.setPlaybackRate,\n        get mediaElement() {\n          return mediaElement;\n        },\n      }),\n      [transport, mediaElement]\n    );\n\n    const handleRetry = React.useCallback(() => {\n      setError(null);\n      mediaElement?.load();\n    }, [mediaElement]);\n\n    const sharedMediaProps = {\n      src,\n      controls,\n      'aria-label': ariaLabel,\n    };\n\n    if (error) {\n      return (\n        <div className={mediaPlayerVariants({ variant, className })}>\n          <div\n            role=\"alert\"\n            className=\"border-destructive/30 bg-destructive/10 flex min-h-36 flex-col items-center justify-center gap-3 rounded-lg border p-8 text-center\"\n          >\n            {/* destructive-700/300 instead of the base token: #dc2626 on the\n                destructive/10 tint is 4.14:1 — below WCAG AA (axe: color-contrast). */}\n            <p className=\"text-destructive-700 dark:text-destructive-300 m-0 text-sm\">\n              {error}\n            </p>\n            {/* bg-background: the outline button is transparent, and its text on\n                the destructive/10 tint sits exactly at the 4.5:1 AA boundary. */}\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"bg-background\"\n              onClick={handleRetry}\n            >\n              Retry\n            </Button>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div className={mediaPlayerVariants({ variant, className })}>\n        {resolvedKind === 'video' ? (\n          // Generic media surface: caption tracks belong to the consumer's media\n          // resource and are supplied via children, not this transport component.\n          // eslint-disable-next-line jsx-a11y/media-has-caption\n          <video\n            ref={setElement as React.Ref<HTMLVideoElement>}\n            playsInline\n            className=\"h-auto max-h-full w-auto max-w-full object-contain\"\n            {...sharedMediaProps}\n          />\n        ) : (\n          // eslint-disable-next-line jsx-a11y/media-has-caption\n          <audio\n            ref={setElement as React.Ref<HTMLAudioElement>}\n            className=\"my-4 w-[90%] max-w-lg\"\n            {...sharedMediaProps}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nMediaPlayer.displayName = 'MediaPlayer';\n\nexport { mediaPlayerVariants };\n"]}

package/dist/{chunk-Y2S6QMKU.js → chunk-PTZB2GKL.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-F3SOEIN2.js';
+import { cn } from './chunk-TQONQSJO.js';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
@@ -74,5 +74,5 @@ var Toggle = React.forwardRef(
 Toggle.displayName = "Toggle";
 
 export { Toggle, toggleVariants };
-//# sourceMappingURL=chunk-Y2S6QMKU.js.map
-//# sourceMappingURL=chunk-Y2S6QMKU.js.map
+//# sourceMappingURL=chunk-PTZB2GKL.js.map
+//# sourceMappingURL=chunk-PTZB2GKL.js.map

package/dist/{chunk-Y2S6QMKU.js.map → chunk-PTZB2GKL.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":";;;;;AAIA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB;AAAA,IACE,+CAAA;AAAA,IACA,gCAAA;AAAA,IACA,mBAAA;AAAA,IACA,4CAAA;AAAA,IACA,qGAAA;AAAA,IACA,kDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,gBAAA;AAAA,QACT,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,oBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAuBA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACnB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA,EAAS,iBAAA;AAAA,IACT,cAAA,GAAiB,KAAA;AAAA,IACjB,eAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAC1C,eAAS,cAAc,CAAA;AAE/B,IAAA,MAAM,eAAe,iBAAA,KAAsB,MAAA;AAC3C,IAAA,MAAM,SAAA,GAAY,eAAe,iBAAA,GAAoB,mBAAA;AAErD,IAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA2C;AAC9D,MAAA,IAAI,QAAA,EAAU;AACd,MAAA,MAAM,OAAO,CAAC,SAAA;AACd,MAAA,IAAI,CAAC,YAAA,EAAc,sBAAA,CAAuB,IAAI,CAAA;AAC9C,MAAA,eAAA,GAAkB,IAAI,CAAA;AACtB,MAAA,OAAA,GAAU,CAAC,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,QAAA;AAAA,QACV,cAAA,EAAc,SAAA;AAAA,QACd,YAAA,EAAY,YAAY,IAAA,GAAO,KAAA;AAAA,QAC/B,QAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QACzD,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-Y2S6QMKU.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst toggleVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2',\n    'rounded-md text-sm font-medium',\n    'transition-colors',\n    'hover:bg-muted hover:text-muted-foreground',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'data-[state=on]:bg-primary-800 data-[state=on]:text-primary-foreground',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent data-[state=on]:border-transparent',\n      },\n      size: {\n        sm: 'h-8 min-w-8 px-2',\n        md: 'h-9 min-w-9 px-2.5',\n        lg: 'h-10 min-w-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  }\n);\n\nexport interface ToggleProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>,\n    VariantProps<typeof toggleVariants> {\n  /** Controlled pressed state */\n  pressed?: boolean;\n  /** Default pressed state (uncontrolled) */\n  defaultPressed?: boolean;\n  /** Callback fired when the pressed state changes */\n  onPressedChange?: (pressed: boolean) => void;\n}\n\n/**\n * A two-state toggle button.\n *\n * @example\n * ```tsx\n * <Toggle aria-label=\"Bold\"><BoldIcon /></Toggle>\n * <Toggle pressed={italic} onPressedChange={setItalic}>Italic</Toggle>\n * ```\n */\nconst Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      pressed: controlledPressed,\n      defaultPressed = false,\n      onPressedChange,\n      disabled,\n      onClick,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [uncontrolledPressed, setUncontrolledPressed] =\n      React.useState(defaultPressed);\n\n    const isControlled = controlledPressed !== undefined;\n    const isPressed = isControlled ? controlledPressed : uncontrolledPressed;\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (disabled) return;\n      const next = !isPressed;\n      if (!isControlled) setUncontrolledPressed(next);\n      onPressedChange?.(next);\n      onClick?.(e);\n    };\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-slot=\"toggle\"\n        aria-pressed={isPressed}\n        data-state={isPressed ? 'on' : 'off'}\n        disabled={disabled}\n        onClick={handleClick}\n        className={cn(toggleVariants({ variant, size }), className)}\n        {...props}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nToggle.displayName = 'Toggle';\n\nexport { Toggle, toggleVariants };\n"]}
+{"version":3,"sources":["../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":";;;;;AAIA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB;AAAA,IACE,+CAAA;AAAA,IACA,gCAAA;AAAA,IACA,mBAAA;AAAA,IACA,4CAAA;AAAA,IACA,qGAAA;AAAA,IACA,kDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,gBAAA;AAAA,QACT,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,oBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAuBA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACnB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA,EAAS,iBAAA;AAAA,IACT,cAAA,GAAiB,KAAA;AAAA,IACjB,eAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAC1C,eAAS,cAAc,CAAA;AAE/B,IAAA,MAAM,eAAe,iBAAA,KAAsB,MAAA;AAC3C,IAAA,MAAM,SAAA,GAAY,eAAe,iBAAA,GAAoB,mBAAA;AAErD,IAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA2C;AAC9D,MAAA,IAAI,QAAA,EAAU;AACd,MAAA,MAAM,OAAO,CAAC,SAAA;AACd,MAAA,IAAI,CAAC,YAAA,EAAc,sBAAA,CAAuB,IAAI,CAAA;AAC9C,MAAA,eAAA,GAAkB,IAAI,CAAA;AACtB,MAAA,OAAA,GAAU,CAAC,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,QAAA;AAAA,QACV,cAAA,EAAc,SAAA;AAAA,QACd,YAAA,EAAY,YAAY,IAAA,GAAO,KAAA;AAAA,QAC/B,QAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,QACzD,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-PTZB2GKL.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst toggleVariants = cva(\n  [\n    'inline-flex items-center justify-center gap-2',\n    'rounded-md text-sm font-medium',\n    'transition-colors',\n    'hover:bg-muted hover:text-muted-foreground',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'data-[state=on]:bg-primary-800 data-[state=on]:text-primary-foreground',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent data-[state=on]:border-transparent',\n      },\n      size: {\n        sm: 'h-8 min-w-8 px-2',\n        md: 'h-9 min-w-9 px-2.5',\n        lg: 'h-10 min-w-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  }\n);\n\nexport interface ToggleProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>,\n    VariantProps<typeof toggleVariants> {\n  /** Controlled pressed state */\n  pressed?: boolean;\n  /** Default pressed state (uncontrolled) */\n  defaultPressed?: boolean;\n  /** Callback fired when the pressed state changes */\n  onPressedChange?: (pressed: boolean) => void;\n}\n\n/**\n * A two-state toggle button.\n *\n * @example\n * ```tsx\n * <Toggle aria-label=\"Bold\"><BoldIcon /></Toggle>\n * <Toggle pressed={italic} onPressedChange={setItalic}>Italic</Toggle>\n * ```\n */\nconst Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      pressed: controlledPressed,\n      defaultPressed = false,\n      onPressedChange,\n      disabled,\n      onClick,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [uncontrolledPressed, setUncontrolledPressed] =\n      React.useState(defaultPressed);\n\n    const isControlled = controlledPressed !== undefined;\n    const isPressed = isControlled ? controlledPressed : uncontrolledPressed;\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (disabled) return;\n      const next = !isPressed;\n      if (!isControlled) setUncontrolledPressed(next);\n      onPressedChange?.(next);\n      onClick?.(e);\n    };\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-slot=\"toggle\"\n        aria-pressed={isPressed}\n        data-state={isPressed ? 'on' : 'off'}\n        disabled={disabled}\n        onClick={handleClick}\n        className={cn(toggleVariants({ variant, size }), className)}\n        {...props}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nToggle.displayName = 'Toggle';\n\nexport { Toggle, toggleVariants };\n"]}

package/dist/{chunk-NQME7MCK.js → chunk-QEBVYLI7.js}

@@ -1,7 +1,7 @@
-import { AudioPlayer } from './chunk-KAKH2UZA.js';
-import { cn } from './chunk-F3SOEIN2.js';
+import { AudioPlayer } from './chunk-XO3WLK65.js';
+import { cn } from './chunk-TQONQSJO.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
+import * as React2 from 'react';
 import { cva } from 'class-variance-authority';
 
 var sizeClasses = {
@@ -204,6 +204,68 @@ function SpinnerIcon({ className }) {
     }
   );
 }
+function CollapsiblePill({
+  label,
+  leadingIcon,
+  density = "standard",
+  defaultOpen = false,
+  pillClassName,
+  className,
+  title,
+  children
+}) {
+  const hasContent = Boolean(children);
+  const [isOpen, setIsOpen] = React2.useState(defaultOpen);
+  const contentId = React2.useId();
+  React2.useEffect(() => {
+    setIsOpen(defaultOpen);
+  }, [defaultOpen]);
+  const toggle = () => {
+    setIsOpen((open) => !open);
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "collapsible-pill", className, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: hasContent ? toggle : void 0,
+        "aria-expanded": hasContent ? isOpen : void 0,
+        "aria-controls": hasContent ? contentId : void 0,
+        title,
+        disabled: !hasContent,
+        className: cn(
+          "focus-visible:ring-ring inline-flex items-center gap-1.5 border font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
+          density === "condensed" ? "rounded-[8px] px-2 py-0.5 text-[10px]" : "rounded-[10px] px-[11px] py-1 text-[11px]",
+          pillClassName
+        ),
+        children: [
+          leadingIcon,
+          /* @__PURE__ */ jsx("span", { children: label }),
+          hasContent && /* @__PURE__ */ jsx(
+            ChevronIcon,
+            {
+              direction: isOpen ? "down" : "right",
+              className: density === "condensed" ? "h-2.5 w-2.5 opacity-60" : "h-3 w-3 opacity-60"
+            }
+          )
+        ]
+      }
+    ),
+    hasContent && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: contentId,
+        "aria-hidden": !isOpen,
+        inert: !isOpen || void 0,
+        className: cn(
+          "overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out",
+          isOpen ? "max-h-[500px] overflow-y-auto opacity-100" : "max-h-0 opacity-0"
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "mt-1.5", children })
+      }
+    )
+  ] });
+}
 var statusIconVariants = cva(
   "flex h-5 w-5 items-center justify-center rounded-full",
   {
@@ -671,10 +733,8 @@ function ResourceLink({ link, onClick, className }) {
 function ToolResultDisplay({
   result,
   onLinkClick,
-  showRawData = false,
   className
 }) {
-  const [showJson, setShowJson] = React.useState(false);
   if (result.type === "error") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -687,7 +747,6 @@ function ToolResultDisplay({
       }
     );
   }
-  const hasRawData = result.type === "json" && result.data !== void 0 && result.data !== null;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
     result.summary && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-700 dark:text-neutral-300", children: result.summary }),
     result.link && /* @__PURE__ */ jsx(ResourceLink, { link: result.link, onClick: onLinkClick }),
@@ -702,67 +761,9 @@ function ToolResultDisplay({
         onClick: onLinkClick
       },
       resource.id
-    )) }),
-    hasRawData && showRawData && /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => setShowJson(!showJson),
-          className: "flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
-          children: [
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                "aria-hidden": "true",
-                className: cn(
-                  "h-3 w-3 transition-transform",
-                  showJson && "rotate-90"
-                ),
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M9 5l7 7-7 7"
-                  }
-                )
-              }
-            ),
-            showJson ? "Hide" : "Show",
-            " raw data"
-          ]
-        }
-      ),
-      showJson && /* @__PURE__ */ jsx("pre", { className: "mt-2 max-h-40 overflow-auto rounded-md bg-neutral-100 p-2 text-xs dark:bg-neutral-800", children: JSON.stringify(result.data, null, 2) })
-    ] })
+    )) })
   ] });
 }
-var toolCallVariants = cva(
-  ["rounded-lg border", "overflow-hidden", "transition-all duration-200"],
-  {
-    variants: {
-      status: {
-        pending: "border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50",
-        running: "border-primary-200 bg-primary-50/50 dark:border-primary-800 dark:bg-primary-900/20",
-        success: "border-green-200 bg-green-50/50 dark:border-green-800 dark:bg-green-900/20",
-        error: "border-red-200 bg-red-50/50 dark:border-red-800 dark:bg-red-900/20",
-        cancelled: "border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50 opacity-60"
-      },
-      compact: {
-        true: "p-2",
-        false: "p-3"
-      }
-    },
-    defaultVariants: {
-      status: "pending",
-      compact: false
-    }
-  }
-);
 var TOOL_FRIENDLY_NAMES = {
   create_patient: "Creating patient",
   get_patient: "Looking up patient",
@@ -827,120 +828,113 @@ function getParameterSummary(toolName, params) {
   }
   return null;
 }
+var statusPillClasses = {
+  pending: "bg-neutral-100 border-neutral-200 text-neutral-600 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400",
+  running: "bg-primary-50 border-primary-200 text-primary-800 dark:bg-primary-900/20 dark:border-primary-800 dark:text-primary-300",
+  success: "bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-300",
+  error: "bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300",
+  cancelled: "bg-neutral-100 border-neutral-200 text-neutral-400 opacity-60 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400"
+};
 function MCPToolCallDisplay({
   toolCall,
   showParameters = true,
   collapsible = true,
-  defaultCollapsed = true,
+  defaultCollapsed,
   compact,
+  hidden = false,
   onLinkClick,
   className
 }) {
-  const [showDetails, setShowDetails] = React.useState(!defaultCollapsed);
   const formatDuration = (ms) => {
     if (!ms) return null;
     if (ms < 1e3) return `${ms}ms`;
     return `${(ms / 1e3).toFixed(1)}s`;
   };
   const friendlyName = getToolFriendlyName(toolCall.toolName, toolCall.status);
+  const durationLabel = formatDuration(toolCall.duration);
   const paramSummary = getParameterSummary(
     toolCall.toolName,
     toolCall.parameters
   );
-  return /* @__PURE__ */ jsx(
+  const detailBit = toolCall.status === "success" ? durationLabel : paramSummary ?? durationLabel;
+  const pillLabel = detailBit ? `${friendlyName} \xB7 ${detailBit}` : friendlyName;
+  const hasParams = showParameters && toolCall.parameters.length > 0;
+  const hasBoxContent = Boolean(toolCall.result || toolCall.error || hasParams);
+  const isCompleted = toolCall.status === "success" || toolCall.status === "error";
+  const effectiveDefaultCollapsed = defaultCollapsed ?? !isCompleted;
+  if (hidden) return null;
+  const box = /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-slot": "ai-tool-call",
       className: cn(
-        toolCallVariants({ status: toolCall.status, compact }),
-        className
+        "w-full max-w-md space-y-2 rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50",
+        compact ? "p-2" : "p-3"
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsx(
+      children: [
+        toolCall.result && /* @__PURE__ */ jsx("div", { "data-slot": "ai-tool-result", children: /* @__PURE__ */ jsx(
+          ToolResultDisplay,
+          {
+            result: toolCall.result,
+            onLinkClick
+          }
+        ) }),
+        toolCall.error && /* @__PURE__ */ jsx("div", { className: "rounded-md bg-red-100 p-2 dark:bg-red-900/30", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: toolCall.error }) }),
+        hasParams && /* @__PURE__ */ jsxs(
           "div",
           {
-            "data-slot": "ai-tool-icon",
-            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-white/50 text-neutral-600 dark:bg-neutral-700/50 dark:text-neutral-400",
-            children: getToolIcon(toolCall.toolName)
+            "data-slot": "ai-tool-parameters",
+            className: "rounded-md bg-neutral-100 p-2 dark:bg-neutral-800",
+            children: [
+              /* @__PURE__ */ jsx("h4", { className: "mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400", children: "Parameters" }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: toolCall.parameters.map((param) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
+                /* @__PURE__ */ jsxs("span", { className: "font-mono text-neutral-600 dark:text-neutral-400", children: [
+                  param.name,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-neutral-700 dark:text-neutral-300", children: typeof param.value === "string" ? param.value : JSON.stringify(param.value) })
+              ] }, param.name)) })
+            ]
           }
-        ),
-        /* @__PURE__ */ jsxs("div", { "data-slot": "ai-tool-content", className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-neutral-900 dark:text-white", children: friendlyName }),
-            /* @__PURE__ */ jsx(ToolStatusIcon, { status: toolCall.status }),
-            toolCall.duration && /* @__PURE__ */ jsx("span", { className: "text-xs text-neutral-600 dark:text-neutral-400", children: formatDuration(toolCall.duration) })
-          ] }),
-          paramSummary && toolCall.status !== "success" && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: paramSummary }),
-          toolCall.result && /* @__PURE__ */ jsx("div", { "data-slot": "ai-tool-result", className: "mt-2", children: /* @__PURE__ */ jsx(
-            ToolResultDisplay,
-            {
-              result: toolCall.result,
-              onLinkClick,
-              showRawData: showDetails
-            }
-          ) }),
-          toolCall.error && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-md bg-red-100 p-2 dark:bg-red-900/30", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: toolCall.error }) }),
-          collapsible && showParameters && toolCall.parameters.length > 0 && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setShowDetails(!showDetails),
-              className: "mt-2 flex items-center gap-1 text-xs text-neutral-600 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    "aria-hidden": "true",
-                    className: cn(
-                      "h-3 w-3 transition-transform",
-                      showDetails && "rotate-90"
-                    ),
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        d: "M9 5l7 7-7 7"
-                      }
-                    )
-                  }
-                ),
-                showDetails ? "Hide" : "Show",
-                " details"
-              ]
-            }
-          ),
-          showDetails && showParameters && toolCall.parameters.length > 0 && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-slot": "ai-tool-parameters",
-              className: "mt-3 rounded-md bg-neutral-100 p-2 dark:bg-neutral-800",
-              children: [
-                /* @__PURE__ */ jsx("h4", { className: "mb-1.5 text-xs font-medium tracking-wide text-neutral-600 uppercase dark:text-neutral-400", children: "Parameters" }),
-                /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: toolCall.parameters.map((param) => /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex items-start gap-2 text-xs",
-                    children: [
-                      /* @__PURE__ */ jsxs("span", { className: "font-mono text-neutral-600 dark:text-neutral-400", children: [
-                        param.name,
-                        ":"
-                      ] }),
-                      /* @__PURE__ */ jsx("span", { className: "font-mono text-neutral-700 dark:text-neutral-300", children: typeof param.value === "string" ? param.value : JSON.stringify(param.value) })
-                    ]
-                  },
-                  param.name
-                )) })
-              ]
-            }
-          )
-        ] })
-      ] })
+        )
+      ]
+    }
+  );
+  const staticPill = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "ai-tool-pill",
+      className: cn(
+        "inline-flex items-center gap-1.5 border font-medium",
+        compact ? "rounded-[8px] px-2 py-0.5 text-[10px]" : "rounded-[10px] px-[11px] py-1 text-[11px]",
+        statusPillClasses[toolCall.status]
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ToolStatusIcon, { status: toolCall.status }),
+        /* @__PURE__ */ jsx("span", { children: pillLabel })
+      ]
     }
   );
+  return /* @__PURE__ */ jsx("div", { "data-slot": "ai-tool-call", className, children: !hasBoxContent ? staticPill : collapsible ? (
+    // Pill click reveals the whole box (result + params) in one go.
+    /* @__PURE__ */ jsx(
+      CollapsiblePill,
+      {
+        label: pillLabel,
+        leadingIcon: /* @__PURE__ */ jsx(ToolStatusIcon, { status: toolCall.status }),
+        density: compact ? "condensed" : "standard",
+        defaultOpen: !effectiveDefaultCollapsed,
+        pillClassName: statusPillClasses[toolCall.status],
+        title: "Toggle details",
+        children: box
+      }
+    )
+  ) : (
+    // Non-collapsible: pill + box always visible.
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      staticPill,
+      box
+    ] })
+  ) });
 }
 var avatarVariants = cva(
   "flex shrink-0 items-center justify-center rounded-full",
@@ -1075,6 +1069,39 @@ function AITypingIndicator({ className }) {
     }
   );
 }
+function ThinkingBlock({
+  text,
+  streaming,
+  defaultCollapsed = false
+}) {
+  const startedAt = React2.useRef(Date.now());
+  const [elapsed, setElapsed] = React2.useState(null);
+  const prevStreaming = React2.useRef(streaming);
+  React2.useEffect(() => {
+    if (prevStreaming.current && !streaming) {
+      setElapsed(Math.round((Date.now() - startedAt.current) / 1e3));
+    }
+    prevStreaming.current = streaming;
+  }, [streaming]);
+  const label = streaming ? "Thinking" : elapsed !== null && elapsed > 0 ? `Thought for ${elapsed}s` : "Thought";
+  const dot = streaming ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-violet-500 dark:bg-violet-400"
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "ai-message-thinking", children: /* @__PURE__ */ jsx(
+    CollapsiblePill,
+    {
+      label,
+      leadingIcon: dot,
+      defaultOpen: !defaultCollapsed,
+      pillClassName: "bg-violet-50 border-violet-200 text-violet-600 hover:bg-violet-100 dark:bg-violet-950/30 dark:border-violet-800 dark:text-violet-400 dark:hover:bg-violet-950/50 focus-visible:ring-violet-500",
+      children: /* @__PURE__ */ jsx("div", { className: "border-s-2 border-violet-200 ps-3 text-[13px] leading-relaxed text-neutral-600 italic dark:border-violet-700 dark:text-neutral-400", children: text })
+    }
+  ) });
+}
 function ContentBlock({
   content,
   onLinkClick,
@@ -1083,9 +1110,6 @@ function ContentBlock({
   role,
   renderTextContent
 }) {
-  const [isCollapsed, setIsCollapsed] = React.useState(
-    content.collapsed ?? false
-  );
   if (content.type === "text" && content.text) {
     if (renderTextContent) {
       return /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: renderTextContent(content.text, { messageId, streaming, role }) });
@@ -1103,52 +1127,12 @@ function ContentBlock({
     );
   }
   if (content.type === "thinking" && content.text) {
-    return /* @__PURE__ */ jsxs(
-      "div",
+    return /* @__PURE__ */ jsx(
+      ThinkingBlock,
       {
-        "data-slot": "ai-message-thinking",
-        className: "rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/50",
-        children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setIsCollapsed(!isCollapsed),
-              className: "flex w-full items-center justify-between px-3 py-2 text-left",
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [
-                  /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      "aria-hidden": "true",
-                      className: "h-4 w-4",
-                      fill: "none",
-                      viewBox: "0 0 24 24",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          d: "M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
-                        }
-                      )
-                    }
-                  ),
-                  "Thinking..."
-                ] }),
-                /* @__PURE__ */ jsx(
-                  ChevronIcon,
-                  {
-                    direction: isCollapsed ? "right" : "down",
-                    className: "text-neutral-400"
-                  }
-                )
-              ]
-            }
-          ),
-          !isCollapsed && /* @__PURE__ */ jsx("div", { className: "border-t border-neutral-200 px-3 py-2 dark:border-neutral-700", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-600 italic dark:text-neutral-400", children: content.text }) })
-        ]
+        text: content.text,
+        streaming,
+        defaultCollapsed: content.collapsed ?? false
       }
     );
   }
@@ -1297,7 +1281,7 @@ var bubbleVariants = cva("rounded-2xl px-4 py-2.5 w-fit max-w-[85%]", {
     variant: "assistant"
   }
 });
-var ChatBubble = React.forwardRef(
+var ChatBubble = React2.forwardRef(
   ({ className, variant, hasError, accent, style, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1411,6 +1395,6 @@ function AIMessageDisplay({
   );
 }
 
-export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
-//# sourceMappingURL=chunk-NQME7MCK.js.map
-//# sourceMappingURL=chunk-NQME7MCK.js.map
+export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, CollapsiblePill, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
+//# sourceMappingURL=chunk-QEBVYLI7.js.map
+//# sourceMappingURL=chunk-QEBVYLI7.js.map