@fanvue/ui 3.15.0 → 3.17.0

package/dist/components/AudioPlayer/AudioPlayer.mjs

@@ -1,7 +1,9 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
+import { generateFallbackPeaks, decodeAudioPeaks, resamplePeaks, formatTime, RAW_PEAK_COUNT } from "../../utils/audioWaveform.mjs";
 import { cn } from "../../utils/cn.mjs";
+import { useFittedBarCount } from "../../utils/useFittedBarCount.mjs";
 import { PauseIcon } from "../Icons/PauseIcon.mjs";
 import { PlayIcon } from "../Icons/PlayIcon.mjs";
 const BAR_WIDTH_PX = 4;
@@ -9,72 +11,8 @@ const BAR_GAP_PX = 4;
 const MIN_BAR_HEIGHT_PX = 4;
 const MAX_BAR_HEIGHT_PX = 26;
 const DEFAULT_BAR_COUNT = 24;
-const RAW_PEAK_COUNT = 128;
 const SEEK_STEP_SECONDS = 1;
 const SEEK_STEP_LARGE_SECONDS = 5;
-function formatTime(seconds) {
-  if (seconds === void 0 || !Number.isFinite(seconds)) return "--:--";
-  const totalSeconds = Math.max(0, Math.floor(seconds));
-  const minutes = Math.floor(totalSeconds / 60);
-  const remainingSeconds = totalSeconds % 60;
-  return `${minutes}:${String(remainingSeconds).padStart(2, "0")}`;
-}
-function hashString(value) {
-  let hash = 2166136261;
-  for (let i = 0; i < value.length; i++) {
-    hash ^= value.charCodeAt(i);
-    hash = Math.imul(hash, 16777619);
-  }
-  return hash >>> 0;
-}
-function createSeededRandom(seed) {
-  let state = seed;
-  return () => {
-    state = state + 1831565813 | 0;
-    let t = Math.imul(state ^ state >>> 15, 1 | state);
-    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-    return ((t ^ t >>> 14) >>> 0) / 4294967296;
-  };
-}
-function generateFallbackPeaks(src, count) {
-  const random = createSeededRandom(hashString(src));
-  return Array.from({ length: count }, () => 0.2 + random() * 0.8);
-}
-function computePeaksFromChannelData(channelData, count) {
-  const blockSize = Math.max(1, Math.floor(channelData.length / count));
-  const peaks = [];
-  for (let i = 0; i < count; i++) {
-    const start = i * blockSize;
-    let max = 0;
-    for (let j = 0; j < blockSize && start + j < channelData.length; j++) {
-      max = Math.max(max, Math.abs(channelData[start + j] ?? 0));
-    }
-    peaks.push(max);
-  }
-  return peaks;
-}
-function resamplePeaks(peaks, barCount) {
-  if (peaks.length === 0 || barCount <= 0) return [];
-  const step = peaks.length / barCount;
-  return Array.from(
-    { length: barCount },
-    (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i * step))] ?? 0
-  );
-}
-async function decodeAudioPeaks(src, signal) {
-  const AudioContextCtor = window.AudioContext ?? window.webkitAudioContext;
-  if (!AudioContextCtor) throw new Error("WebAudio unsupported");
-  const response = await fetch(src, { signal });
-  const arrayBuffer = await response.arrayBuffer();
-  const audioContext = new AudioContextCtor();
-  try {
-    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-    return computePeaksFromChannelData(audioBuffer.getChannelData(0), RAW_PEAK_COUNT);
-  } finally {
-    if (audioContext.state !== "closed") audioContext.close().catch(() => {
-    });
-  }
-}
 const AudioPlayer = React.forwardRef(
   ({
     className,
@@ -95,7 +33,11 @@ const AudioPlayer = React.forwardRef(
     const playing = isControlled ? controlledPlaying : internalPlaying;
     const [currentTime, setCurrentTime] = React.useState(0);
     const [mediaDuration, setMediaDuration] = React.useState(void 0);
-    const [barCount, setBarCount] = React.useState(DEFAULT_BAR_COUNT);
+    const barCount = useFittedBarCount(trackRef, {
+      barWidthPx: BAR_WIDTH_PX,
+      gapPx: BAR_GAP_PX,
+      fallback: DEFAULT_BAR_COUNT
+    });
     const [peaks, setPeaks] = React.useState(
       () => generateFallbackPeaks(src, RAW_PEAK_COUNT)
     );
@@ -135,21 +77,6 @@ const AudioPlayer = React.forwardRef(
         abortController.abort();
       };
     }, [src]);
-    React.useEffect(() => {
-      const track = trackRef.current;
-      if (!track) return;
-      const updateFromWidth = (width) => {
-        if (width <= 0) return;
-        setBarCount(Math.max(1, Math.floor((width + BAR_GAP_PX) / (BAR_WIDTH_PX + BAR_GAP_PX))));
-      };
-      updateFromWidth(track.getBoundingClientRect().width);
-      const observer = new ResizeObserver((entries) => {
-        const entry = entries[0];
-        if (entry) updateFromWidth(entry.contentRect.width);
-      });
-      observer.observe(track);
-      return () => observer.disconnect();
-    }, []);
     React.useEffect(() => {
       const audio = audioRef.current;
       if (!audio) return;

package/dist/components/AudioPlayer/AudioPlayer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.mjs","sources":["../../../src/components/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { PauseIcon } from \"../Icons/PauseIcon\";\nimport { PlayIcon } from \"../Icons/PlayIcon\";\n\n/** Width of a single waveform bar, in pixels. */\nconst BAR_WIDTH_PX = 4;\n/** Gap between waveform bars, in pixels. */\nconst BAR_GAP_PX = 4;\n/** Shortest a waveform bar can render, in pixels. */\nconst MIN_BAR_HEIGHT_PX = 4;\n/** Tallest a waveform bar can render, in pixels — matches the 40px row height. */\nconst MAX_BAR_HEIGHT_PX = 26;\n/** Bar count used before the container has been measured (e.g. during SSR or in jsdom, where layout is unavailable). */\nconst DEFAULT_BAR_COUNT = 24;\n/** Number of amplitude samples kept internally, resampled to the rendered bar count. */\nconst RAW_PEAK_COUNT = 128;\n/** Seconds moved per Arrow key press while seeking. */\nconst SEEK_STEP_SECONDS = 1;\n/** Seconds moved per Page Up/Down press while seeking. */\nconst SEEK_STEP_LARGE_SECONDS = 5;\n\n/** Height of the audio player row, in pixels. Matches both the Vault card overlay and the \"Generated Audio\" modal row in Figma — both use an identical 32px play button and 40px row. */\nexport type AudioPlayerSize = \"40\";\n\nexport interface AudioPlayerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onPlay\" | \"onPause\" | \"onEnded\"> {\n  /** URL of the audio file to play. */\n  src: string;\n  /**\n   * Total duration in seconds, used to render the timestamp before the\n   * media's own metadata has loaded (and as a fallback if it never does).\n   */\n  duration?: number;\n  /**\n   * Whether playback is active (controlled). Note: once `onEnded` fires, the\n   * browser has already stopped native playback. To loop or replay under\n   * controlled usage, toggle this prop `false` then `true` (rather than\n   * leaving it `true`) — the sync effect only calls `play()` again when this\n   * value actually changes.\n   */\n  playing?: boolean;\n  /** Initial playback state (uncontrolled). @default false */\n  defaultPlaying?: boolean;\n  /** Called when playback starts. */\n  onPlay?: () => void;\n  /** Called when playback is paused. */\n  onPause?: () => void;\n  /** Called when playback reaches the end of the media. */\n  onEnded?: () => void;\n  /** Height of the player row, in pixels. @default \"40\" */\n  size?: AudioPlayerSize;\n}\n\nfunction formatTime(seconds: number | undefined): string {\n  if (seconds === undefined || !Number.isFinite(seconds)) return \"--:--\";\n  const totalSeconds = Math.max(0, Math.floor(seconds));\n  const minutes = Math.floor(totalSeconds / 60);\n  const remainingSeconds = totalSeconds % 60;\n  return `${minutes}:${String(remainingSeconds).padStart(2, \"0\")}`;\n}\n\n/** Deterministic 32-bit string hash (FNV-1a), used to seed the fallback waveform. */\nfunction hashString(value: string): number {\n  let hash = 2166136261;\n  for (let i = 0; i < value.length; i++) {\n    hash ^= value.charCodeAt(i);\n    hash = Math.imul(hash, 16777619);\n  }\n  return hash >>> 0;\n}\n\n/** Seeded PRNG (mulberry32) — deterministic across runs, unlike `Math.random`. */\nfunction createSeededRandom(seed: number): () => number {\n  let state = seed;\n  return () => {\n    state = (state + 0x6d2b79f5) | 0;\n    let t = Math.imul(state ^ (state >>> 15), 1 | state);\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n/** Deterministic placeholder amplitudes used when audio can't be decoded (network/CORS/format failure). */\nfunction generateFallbackPeaks(src: string, count: number): number[] {\n  const random = createSeededRandom(hashString(src));\n  return Array.from({ length: count }, () => 0.2 + random() * 0.8);\n}\n\n/** Downsamples decoded PCM data to `count` peak (max-abs) amplitudes. */\nfunction computePeaksFromChannelData(channelData: Float32Array, count: number): number[] {\n  const blockSize = Math.max(1, Math.floor(channelData.length / count));\n  const peaks: number[] = [];\n  for (let i = 0; i < count; i++) {\n    const start = i * blockSize;\n    let max = 0;\n    for (let j = 0; j < blockSize && start + j < channelData.length; j++) {\n      max = Math.max(max, Math.abs(channelData[start + j] ?? 0));\n    }\n    peaks.push(max);\n  }\n  return peaks;\n}\n\n/** Resamples a peaks array to the number of bars that currently fit the container. */\nfunction resamplePeaks(peaks: number[], barCount: number): number[] {\n  if (peaks.length === 0 || barCount <= 0) return [];\n  const step = peaks.length / barCount;\n  return Array.from(\n    { length: barCount },\n    (_, i) => peaks[Math.min(peaks.length - 1, Math.floor(i * step))] ?? 0,\n  );\n}\n\n/** Decodes `src` via WebAudio and returns downsampled peak amplitudes. Throws on any failure. */\nasync function decodeAudioPeaks(src: string, signal: AbortSignal): Promise<number[]> {\n  const AudioContextCtor =\n    window.AudioContext ??\n    (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;\n  if (!AudioContextCtor) throw new Error(\"WebAudio unsupported\");\n\n  const response = await fetch(src, { signal });\n  const arrayBuffer = await response.arrayBuffer();\n  const audioContext = new AudioContextCtor();\n  try {\n    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n    return computePeaksFromChannelData(audioBuffer.getChannelData(0), RAW_PEAK_COUNT);\n  } finally {\n    if (audioContext.state !== \"closed\") audioContext.close().catch(() => {});\n  }\n}\n\n/**\n * A compact playback control for a single audio clip: a play/pause toggle, a\n * static amplitude waveform that doubles as a seek scrubber, and elapsed/total\n * timestamps. Designed to sit as an overlay on media thumbnails (Vault cards)\n * as well as inline rows (the AI Voice Message \"Generated Audio\" row).\n *\n * The waveform is seeded from the decoded audio when possible, falling back\n * to a deterministic (not random) placeholder derived from `src` so the\n * result is stable across renders, SSR, and Chromatic snapshots.\n *\n * @example\n * ```tsx\n * <AudioPlayer src=\"https://example.com/clip.mp3\" duration={5} />\n * ```\n */\nexport const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(\n  (\n    {\n      className,\n      src,\n      duration,\n      playing: controlledPlaying,\n      defaultPlaying = false,\n      onPlay,\n      onPause,\n      onEnded,\n      size = \"40\",\n      ...props\n    },\n    ref,\n  ) => {\n    const audioRef = React.useRef<HTMLAudioElement>(null);\n    const trackRef = React.useRef<HTMLDivElement>(null);\n\n    const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying);\n    const isControlled = controlledPlaying !== undefined;\n    const playing = isControlled ? controlledPlaying : internalPlaying;\n\n    const [currentTime, setCurrentTime] = React.useState(0);\n    const [mediaDuration, setMediaDuration] = React.useState<number | undefined>(undefined);\n    const [barCount, setBarCount] = React.useState(DEFAULT_BAR_COUNT);\n    const [peaks, setPeaks] = React.useState<number[]>(() =>\n      generateFallbackPeaks(src, RAW_PEAK_COUNT),\n    );\n    const [isDragging, setIsDragging] = React.useState(false);\n\n    const displayDuration = mediaDuration ?? duration;\n    const hasStarted = playing || currentTime > 0;\n\n    // Latest-value refs so the src-change effect below can react to a src swap\n    // without re-running whenever `playing`/`isControlled`/`onPause` change.\n    const playingRef = React.useRef(playing);\n    playingRef.current = playing;\n    const isControlledRef = React.useRef(isControlled);\n    isControlledRef.current = isControlled;\n    const onPauseRef = React.useRef(onPause);\n    onPauseRef.current = onPause;\n\n    // Reset transient playback state when the source changes. Skips the\n    // initial mount (there's nothing to reset yet) and, if playback was\n    // active, stops it — the browser silently drops playback on a source\n    // swap, so the UI (and any controlled parent) must be told via onPause.\n    const isFirstSrcRenderRef = React.useRef(true);\n    React.useEffect(() => {\n      if (isFirstSrcRenderRef.current) {\n        isFirstSrcRenderRef.current = false;\n        return;\n      }\n      setCurrentTime(0);\n      setMediaDuration(undefined);\n      setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));\n      if (playingRef.current) {\n        if (!isControlledRef.current) setInternalPlaying(false);\n        onPauseRef.current?.();\n      }\n    }, [src]);\n\n    // Decode the audio to derive real waveform amplitudes, falling back to a\n    // deterministic placeholder on any failure (network, CORS, unsupported format).\n    React.useEffect(() => {\n      let cancelled = false;\n      const abortController = new AbortController();\n\n      decodeAudioPeaks(src, abortController.signal)\n        .then((decodedPeaks) => {\n          if (!cancelled) setPeaks(decodedPeaks);\n        })\n        .catch(() => {\n          if (!cancelled) setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));\n        });\n\n      return () => {\n        cancelled = true;\n        abortController.abort();\n      };\n    }, [src]);\n\n    // Measure the track to decide how many bars fit; falls back to DEFAULT_BAR_COUNT\n    // when layout is unavailable (SSR, jsdom).\n    React.useEffect(() => {\n      const track = trackRef.current;\n      if (!track) return;\n\n      const updateFromWidth = (width: number) => {\n        if (width <= 0) return;\n        setBarCount(Math.max(1, Math.floor((width + BAR_GAP_PX) / (BAR_WIDTH_PX + BAR_GAP_PX))));\n      };\n\n      updateFromWidth(track.getBoundingClientRect().width);\n\n      const observer = new ResizeObserver((entries) => {\n        const entry = entries[0];\n        if (entry) updateFromWidth(entry.contentRect.width);\n      });\n      observer.observe(track);\n      return () => observer.disconnect();\n    }, []);\n\n    // Sync the controlled/uncontrolled `playing` state to the media element.\n    React.useEffect(() => {\n      const audio = audioRef.current;\n      if (!audio) return;\n      if (playing) {\n        audio.play().catch(() => {\n          if (!isControlled) setInternalPlaying(false);\n          onPauseRef.current?.();\n        });\n      } else {\n        audio.pause();\n      }\n    }, [playing, isControlled]);\n\n    const handleToggle = () => {\n      const next = !playing;\n      if (!isControlled) setInternalPlaying(next);\n      if (next) onPlay?.();\n      else onPause?.();\n    };\n\n    const seekTo = React.useCallback(\n      (time: number) => {\n        if (displayDuration === undefined) return;\n        const clamped = Math.min(Math.max(time, 0), displayDuration);\n        setCurrentTime(clamped);\n        const audio = audioRef.current;\n        if (audio) audio.currentTime = clamped;\n      },\n      [displayDuration],\n    );\n\n    const seekFromClientX = React.useCallback(\n      (clientX: number) => {\n        const track = trackRef.current;\n        if (!track || displayDuration === undefined) return;\n        const rect = track.getBoundingClientRect();\n        if (rect.width <= 0) return;\n        const fraction = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);\n        seekTo(fraction * displayDuration);\n      },\n      [displayDuration, seekTo],\n    );\n\n    // Track drag outside the element via window listeners rather than pointer\n    // capture, which some environments (and jsdom) don't fully implement.\n    React.useEffect(() => {\n      if (!isDragging) return;\n      const handleWindowPointerMove = (event: PointerEvent) => seekFromClientX(event.clientX);\n      const handleWindowPointerUp = () => setIsDragging(false);\n      window.addEventListener(\"pointermove\", handleWindowPointerMove);\n      window.addEventListener(\"pointerup\", handleWindowPointerUp);\n      return () => {\n        window.removeEventListener(\"pointermove\", handleWindowPointerMove);\n        window.removeEventListener(\"pointerup\", handleWindowPointerUp);\n      };\n    }, [isDragging, seekFromClientX]);\n\n    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n      seekFromClientX(event.clientX);\n      setIsDragging(true);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (displayDuration === undefined) return;\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          event.preventDefault();\n          seekTo(currentTime + SEEK_STEP_SECONDS);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          seekTo(currentTime - SEEK_STEP_SECONDS);\n          break;\n        case \"PageUp\":\n          event.preventDefault();\n          seekTo(currentTime + SEEK_STEP_LARGE_SECONDS);\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          seekTo(currentTime - SEEK_STEP_LARGE_SECONDS);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          seekTo(0);\n          break;\n        case \"End\":\n          event.preventDefault();\n          seekTo(displayDuration);\n          break;\n        default:\n          break;\n      }\n    };\n\n    const bars = resamplePeaks(peaks, barCount);\n    const progressFraction =\n      displayDuration && displayDuration > 0\n        ? Math.min(Math.max(currentTime / displayDuration, 0), 1)\n        : 0;\n    const playedBarCount = hasStarted ? Math.round(progressFraction * bars.length) : bars.length;\n    const barData = bars.map((amplitude, index) => {\n      const isPlayed = index < playedBarCount;\n      return {\n        heightPx: MIN_BAR_HEIGHT_PX + amplitude * (MAX_BAR_HEIGHT_PX - MIN_BAR_HEIGHT_PX),\n        className: cn(\n          \"w-1 shrink-0 rounded-3xs bg-messages-waveform-default\",\n          \"motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-in-out\",\n          isPlayed ? \"opacity-100\" : \"opacity-50\",\n        ),\n      };\n    });\n\n    return (\n      <div\n        ref={ref}\n        data-size={size}\n        className={cn(\"flex w-full items-center gap-3\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={handleToggle}\n          aria-label={playing ? \"Pause\" : \"Play\"}\n          className={cn(\n            \"flex size-8 shrink-0 items-center justify-center rounded-full\",\n            \"bg-buttons-secondary-default text-icons-primary backdrop-blur-[40px]\",\n            \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n            \"hover:bg-buttons-secondary-hover\",\n            \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          )}\n        >\n          {playing ? <PauseIcon size={16} filled /> : <PlayIcon size={16} filled />}\n        </button>\n\n        <div className=\"flex min-w-0 flex-1 items-center gap-3\">\n          <div\n            ref={trackRef}\n            role=\"slider\"\n            tabIndex={0}\n            aria-label=\"Seek\"\n            aria-orientation=\"horizontal\"\n            aria-valuemin={0}\n            aria-valuemax={displayDuration}\n            aria-valuenow={Math.round(currentTime)}\n            aria-valuetext={\n              displayDuration !== undefined\n                ? `${formatTime(currentTime)} of ${formatTime(displayDuration)}`\n                : formatTime(currentTime)\n            }\n            onPointerDown={handlePointerDown}\n            onKeyDown={handleKeyDown}\n            className={cn(\n              \"flex h-10 min-w-0 flex-1 cursor-pointer touch-none select-none items-center gap-1 overflow-hidden\",\n              \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n            )}\n          >\n            {barData.map((bar, index) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: bars are a fixed-count, non-reorderable list\n              <span key={index} className={bar.className} style={{ height: bar.heightPx }} />\n            ))}\n          </div>\n\n          <span className=\"typography-body-small-14px-semibold flex shrink-0 items-center gap-0.5 whitespace-nowrap\">\n            {hasStarted ? (\n              <>\n                <span className=\"text-content-primary\">{formatTime(currentTime)}</span>\n                <span className=\"text-content-secondary\">/{formatTime(displayDuration)}</span>\n              </>\n            ) : (\n              <span className=\"text-content-primary\">{formatTime(displayDuration)}</span>\n            )}\n          </span>\n        </div>\n\n        {/* biome-ignore lint/a11y/useMediaCaption: this is a UI sound clip (voice note / short recording), not spoken/narrated content requiring captions. */}\n        <audio\n          ref={audioRef}\n          src={src}\n          preload=\"metadata\"\n          className=\"hidden\"\n          onLoadedMetadata={(event) => {\n            const { duration: nativeDuration } = event.currentTarget;\n            setMediaDuration(Number.isFinite(nativeDuration) ? nativeDuration : undefined);\n          }}\n          onTimeUpdate={(event) => {\n            if (isDragging) return;\n            setCurrentTime(event.currentTarget.currentTime);\n          }}\n          onEnded={() => {\n            setCurrentTime(0);\n            if (!isControlled) setInternalPlaying(false);\n            onEnded?.();\n          }}\n        />\n      </div>\n    );\n  },\n);\n\nAudioPlayer.displayName = \"AudioPlayer\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AudioPlayer.mjs","sources":["../../../src/components/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  decodeAudioPeaks,\n  formatTime,\n  generateFallbackPeaks,\n  RAW_PEAK_COUNT,\n  resamplePeaks,\n} from \"../../utils/audioWaveform\";\nimport { cn } from \"../../utils/cn\";\nimport { useFittedBarCount } from \"../../utils/useFittedBarCount\";\nimport { PauseIcon } from \"../Icons/PauseIcon\";\nimport { PlayIcon } from \"../Icons/PlayIcon\";\n\n/** Width of a single waveform bar, in pixels. */\nconst BAR_WIDTH_PX = 4;\n/** Gap between waveform bars, in pixels. */\nconst BAR_GAP_PX = 4;\n/** Shortest a waveform bar can render, in pixels. */\nconst MIN_BAR_HEIGHT_PX = 4;\n/** Tallest a waveform bar can render, in pixels — matches the 40px row height. */\nconst MAX_BAR_HEIGHT_PX = 26;\n/** Bar count used before the container has been measured (e.g. during SSR or in jsdom, where layout is unavailable). */\nconst DEFAULT_BAR_COUNT = 24;\n/** Seconds moved per Arrow key press while seeking. */\nconst SEEK_STEP_SECONDS = 1;\n/** Seconds moved per Page Up/Down press while seeking. */\nconst SEEK_STEP_LARGE_SECONDS = 5;\n\n/** Height of the audio player row, in pixels. Matches both the Vault card overlay and the \"Generated Audio\" modal row in Figma — both use an identical 32px play button and 40px row. */\nexport type AudioPlayerSize = \"40\";\n\nexport interface AudioPlayerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onPlay\" | \"onPause\" | \"onEnded\"> {\n  /** URL of the audio file to play. */\n  src: string;\n  /**\n   * Total duration in seconds, used to render the timestamp before the\n   * media's own metadata has loaded (and as a fallback if it never does).\n   */\n  duration?: number;\n  /**\n   * Whether playback is active (controlled). Note: once `onEnded` fires, the\n   * browser has already stopped native playback. To loop or replay under\n   * controlled usage, toggle this prop `false` then `true` (rather than\n   * leaving it `true`) — the sync effect only calls `play()` again when this\n   * value actually changes.\n   */\n  playing?: boolean;\n  /** Initial playback state (uncontrolled). @default false */\n  defaultPlaying?: boolean;\n  /** Called when playback starts. */\n  onPlay?: () => void;\n  /** Called when playback is paused. */\n  onPause?: () => void;\n  /** Called when playback reaches the end of the media. */\n  onEnded?: () => void;\n  /** Height of the player row, in pixels. @default \"40\" */\n  size?: AudioPlayerSize;\n}\n\n/**\n * A compact playback control for a single audio clip: a play/pause toggle, a\n * static amplitude waveform that doubles as a seek scrubber, and elapsed/total\n * timestamps. Designed to sit as an overlay on media thumbnails (Vault cards)\n * as well as inline rows (the AI Voice Message \"Generated Audio\" row).\n *\n * The waveform is seeded from the decoded audio when possible, falling back\n * to a deterministic (not random) placeholder derived from `src` so the\n * result is stable across renders, SSR, and Chromatic snapshots.\n *\n * @example\n * ```tsx\n * <AudioPlayer src=\"https://example.com/clip.mp3\" duration={5} />\n * ```\n */\nexport const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(\n  (\n    {\n      className,\n      src,\n      duration,\n      playing: controlledPlaying,\n      defaultPlaying = false,\n      onPlay,\n      onPause,\n      onEnded,\n      size = \"40\",\n      ...props\n    },\n    ref,\n  ) => {\n    const audioRef = React.useRef<HTMLAudioElement>(null);\n    const trackRef = React.useRef<HTMLDivElement>(null);\n\n    const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying);\n    const isControlled = controlledPlaying !== undefined;\n    const playing = isControlled ? controlledPlaying : internalPlaying;\n\n    const [currentTime, setCurrentTime] = React.useState(0);\n    const [mediaDuration, setMediaDuration] = React.useState<number | undefined>(undefined);\n    const barCount = useFittedBarCount(trackRef, {\n      barWidthPx: BAR_WIDTH_PX,\n      gapPx: BAR_GAP_PX,\n      fallback: DEFAULT_BAR_COUNT,\n    });\n    const [peaks, setPeaks] = React.useState<number[]>(() =>\n      generateFallbackPeaks(src, RAW_PEAK_COUNT),\n    );\n    const [isDragging, setIsDragging] = React.useState(false);\n\n    const displayDuration = mediaDuration ?? duration;\n    const hasStarted = playing || currentTime > 0;\n\n    // Latest-value refs so the src-change effect below can react to a src swap\n    // without re-running whenever `playing`/`isControlled`/`onPause` change.\n    const playingRef = React.useRef(playing);\n    playingRef.current = playing;\n    const isControlledRef = React.useRef(isControlled);\n    isControlledRef.current = isControlled;\n    const onPauseRef = React.useRef(onPause);\n    onPauseRef.current = onPause;\n\n    // Reset transient playback state when the source changes. Skips the\n    // initial mount (there's nothing to reset yet) and, if playback was\n    // active, stops it — the browser silently drops playback on a source\n    // swap, so the UI (and any controlled parent) must be told via onPause.\n    const isFirstSrcRenderRef = React.useRef(true);\n    React.useEffect(() => {\n      if (isFirstSrcRenderRef.current) {\n        isFirstSrcRenderRef.current = false;\n        return;\n      }\n      setCurrentTime(0);\n      setMediaDuration(undefined);\n      setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));\n      if (playingRef.current) {\n        if (!isControlledRef.current) setInternalPlaying(false);\n        onPauseRef.current?.();\n      }\n    }, [src]);\n\n    // Decode the audio to derive real waveform amplitudes, falling back to a\n    // deterministic placeholder on any failure (network, CORS, unsupported format).\n    React.useEffect(() => {\n      let cancelled = false;\n      const abortController = new AbortController();\n\n      decodeAudioPeaks(src, abortController.signal)\n        .then((decodedPeaks) => {\n          if (!cancelled) setPeaks(decodedPeaks);\n        })\n        .catch(() => {\n          if (!cancelled) setPeaks(generateFallbackPeaks(src, RAW_PEAK_COUNT));\n        });\n\n      return () => {\n        cancelled = true;\n        abortController.abort();\n      };\n    }, [src]);\n\n    // Sync the controlled/uncontrolled `playing` state to the media element.\n    React.useEffect(() => {\n      const audio = audioRef.current;\n      if (!audio) return;\n      if (playing) {\n        audio.play().catch(() => {\n          if (!isControlled) setInternalPlaying(false);\n          onPauseRef.current?.();\n        });\n      } else {\n        audio.pause();\n      }\n    }, [playing, isControlled]);\n\n    const handleToggle = () => {\n      const next = !playing;\n      if (!isControlled) setInternalPlaying(next);\n      if (next) onPlay?.();\n      else onPause?.();\n    };\n\n    const seekTo = React.useCallback(\n      (time: number) => {\n        if (displayDuration === undefined) return;\n        const clamped = Math.min(Math.max(time, 0), displayDuration);\n        setCurrentTime(clamped);\n        const audio = audioRef.current;\n        if (audio) audio.currentTime = clamped;\n      },\n      [displayDuration],\n    );\n\n    const seekFromClientX = React.useCallback(\n      (clientX: number) => {\n        const track = trackRef.current;\n        if (!track || displayDuration === undefined) return;\n        const rect = track.getBoundingClientRect();\n        if (rect.width <= 0) return;\n        const fraction = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);\n        seekTo(fraction * displayDuration);\n      },\n      [displayDuration, seekTo],\n    );\n\n    // Track drag outside the element via window listeners rather than pointer\n    // capture, which some environments (and jsdom) don't fully implement.\n    React.useEffect(() => {\n      if (!isDragging) return;\n      const handleWindowPointerMove = (event: PointerEvent) => seekFromClientX(event.clientX);\n      const handleWindowPointerUp = () => setIsDragging(false);\n      window.addEventListener(\"pointermove\", handleWindowPointerMove);\n      window.addEventListener(\"pointerup\", handleWindowPointerUp);\n      return () => {\n        window.removeEventListener(\"pointermove\", handleWindowPointerMove);\n        window.removeEventListener(\"pointerup\", handleWindowPointerUp);\n      };\n    }, [isDragging, seekFromClientX]);\n\n    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n      seekFromClientX(event.clientX);\n      setIsDragging(true);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (displayDuration === undefined) return;\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          event.preventDefault();\n          seekTo(currentTime + SEEK_STEP_SECONDS);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          seekTo(currentTime - SEEK_STEP_SECONDS);\n          break;\n        case \"PageUp\":\n          event.preventDefault();\n          seekTo(currentTime + SEEK_STEP_LARGE_SECONDS);\n          break;\n        case \"PageDown\":\n          event.preventDefault();\n          seekTo(currentTime - SEEK_STEP_LARGE_SECONDS);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          seekTo(0);\n          break;\n        case \"End\":\n          event.preventDefault();\n          seekTo(displayDuration);\n          break;\n        default:\n          break;\n      }\n    };\n\n    const bars = resamplePeaks(peaks, barCount);\n    const progressFraction =\n      displayDuration && displayDuration > 0\n        ? Math.min(Math.max(currentTime / displayDuration, 0), 1)\n        : 0;\n    const playedBarCount = hasStarted ? Math.round(progressFraction * bars.length) : bars.length;\n    const barData = bars.map((amplitude, index) => {\n      const isPlayed = index < playedBarCount;\n      return {\n        heightPx: MIN_BAR_HEIGHT_PX + amplitude * (MAX_BAR_HEIGHT_PX - MIN_BAR_HEIGHT_PX),\n        className: cn(\n          \"w-1 shrink-0 rounded-3xs bg-messages-waveform-default\",\n          \"motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-in-out\",\n          isPlayed ? \"opacity-100\" : \"opacity-50\",\n        ),\n      };\n    });\n\n    return (\n      <div\n        ref={ref}\n        data-size={size}\n        className={cn(\"flex w-full items-center gap-3\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={handleToggle}\n          aria-label={playing ? \"Pause\" : \"Play\"}\n          className={cn(\n            \"flex size-8 shrink-0 items-center justify-center rounded-full\",\n            \"bg-buttons-secondary-default text-icons-primary backdrop-blur-[40px]\",\n            \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n            \"hover:bg-buttons-secondary-hover\",\n            \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          )}\n        >\n          {playing ? <PauseIcon size={16} filled /> : <PlayIcon size={16} filled />}\n        </button>\n\n        <div className=\"flex min-w-0 flex-1 items-center gap-3\">\n          <div\n            ref={trackRef}\n            role=\"slider\"\n            tabIndex={0}\n            aria-label=\"Seek\"\n            aria-orientation=\"horizontal\"\n            aria-valuemin={0}\n            aria-valuemax={displayDuration}\n            aria-valuenow={Math.round(currentTime)}\n            aria-valuetext={\n              displayDuration !== undefined\n                ? `${formatTime(currentTime)} of ${formatTime(displayDuration)}`\n                : formatTime(currentTime)\n            }\n            onPointerDown={handlePointerDown}\n            onKeyDown={handleKeyDown}\n            className={cn(\n              \"flex h-10 min-w-0 flex-1 cursor-pointer touch-none select-none items-center gap-1 overflow-hidden\",\n              \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n            )}\n          >\n            {barData.map((bar, index) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: bars are a fixed-count, non-reorderable list\n              <span key={index} className={bar.className} style={{ height: bar.heightPx }} />\n            ))}\n          </div>\n\n          <span className=\"typography-body-small-14px-semibold flex shrink-0 items-center gap-0.5 whitespace-nowrap\">\n            {hasStarted ? (\n              <>\n                <span className=\"text-content-primary\">{formatTime(currentTime)}</span>\n                <span className=\"text-content-secondary\">/{formatTime(displayDuration)}</span>\n              </>\n            ) : (\n              <span className=\"text-content-primary\">{formatTime(displayDuration)}</span>\n            )}\n          </span>\n        </div>\n\n        {/* biome-ignore lint/a11y/useMediaCaption: this is a UI sound clip (voice note / short recording), not spoken/narrated content requiring captions. */}\n        <audio\n          ref={audioRef}\n          src={src}\n          preload=\"metadata\"\n          className=\"hidden\"\n          onLoadedMetadata={(event) => {\n            const { duration: nativeDuration } = event.currentTarget;\n            setMediaDuration(Number.isFinite(nativeDuration) ? nativeDuration : undefined);\n          }}\n          onTimeUpdate={(event) => {\n            if (isDragging) return;\n            setCurrentTime(event.currentTarget.currentTime);\n          }}\n          onEnded={() => {\n            setCurrentTime(0);\n            if (!isControlled) setInternalPlaying(false);\n            onEnded?.();\n          }}\n        />\n      </div>\n    );\n  },\n);\n\nAudioPlayer.displayName = \"AudioPlayer\";\n"],"names":[],"mappings":"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"}

package/dist/components/AudioRecordButton/AudioRecordButton.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { IconButton } from "../IconButton/IconButton.mjs";
+import { MicrophoneIcon } from "../Icons/MicrophoneIcon.mjs";
+import { StopIcon } from "../Icons/StopIcon.mjs";
+const STATUS_VARIANT = {
+  idle: "primary",
+  recording: "error"
+};
+const STATUS_ICON = {
+  idle: /* @__PURE__ */ jsx(MicrophoneIcon, {}),
+  recording: /* @__PURE__ */ jsx(StopIcon, {})
+};
+const STATUS_LABEL = {
+  idle: "Record",
+  recording: "Stop recording"
+};
+const AudioRecordButton = React.forwardRef(
+  ({ status = "idle", "aria-label": ariaLabel, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref,
+        variant: STATUS_VARIANT[status],
+        icon: STATUS_ICON[status],
+        "aria-label": ariaLabel ?? STATUS_LABEL[status],
+        ...props
+      }
+    );
+  }
+);
+AudioRecordButton.displayName = "AudioRecordButton";
+export {
+  AudioRecordButton
+};
+//# sourceMappingURL=AudioRecordButton.mjs.map

package/dist/components/AudioRecordButton/AudioRecordButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecordButton.mjs","sources":["../../../src/components/AudioRecordButton/AudioRecordButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IconButton, type IconButtonProps, type IconButtonVariant } from \"../IconButton/IconButton\";\nimport { MicrophoneIcon } from \"../Icons/MicrophoneIcon\";\nimport { StopIcon } from \"../Icons/StopIcon\";\n\n/**\n * Recording state of the button. Drives the icon and colour: `idle` shows the\n * microphone to start a recording, `recording` shows the stop glyph with the\n * destructive treatment to end it.\n */\nexport type AudioRecordButtonStatus = \"idle\" | \"recording\";\n\nconst STATUS_VARIANT: Record<AudioRecordButtonStatus, IconButtonVariant> = {\n  idle: \"primary\",\n  recording: \"error\",\n};\n\nconst STATUS_ICON: Record<AudioRecordButtonStatus, React.ReactNode> = {\n  idle: <MicrophoneIcon />,\n  recording: <StopIcon />,\n};\n\nconst STATUS_LABEL: Record<AudioRecordButtonStatus, string> = {\n  idle: \"Record\",\n  recording: \"Stop recording\",\n};\n\nexport interface AudioRecordButtonProps\n  extends Omit<IconButtonProps, \"icon\" | \"variant\" | \"aria-label\"> {\n  /** Recording state; drives the icon and colour. @default \"idle\" */\n  status?: AudioRecordButtonStatus;\n  /**\n   * Accessible name. Falls back to a status-aware default (\"Record\" /\n   * \"Stop recording\") when omitted so screen readers announce the action.\n   */\n  \"aria-label\"?: string;\n}\n\n/**\n * A circular icon button that toggles audio recording. It owns the record\n * lifecycle so consumers flip a single `status` prop instead of swapping an\n * {@link IconButton}'s icon and colour: `idle` shows the microphone to start,\n * `recording` turns destructive with a stop glyph to end. Used by\n * {@link AudioUpload} for its in-progress stop control.\n *\n * @example\n * ```tsx\n * <AudioRecordButton status={recording ? \"recording\" : \"idle\"} onClick={toggle} />\n * ```\n */\nexport const AudioRecordButton = React.forwardRef<HTMLButtonElement, AudioRecordButtonProps>(\n  ({ status = \"idle\", \"aria-label\": ariaLabel, ...props }, ref) => {\n    return (\n      <IconButton\n        ref={ref}\n        variant={STATUS_VARIANT[status]}\n        icon={STATUS_ICON[status]}\n        aria-label={ariaLabel ?? STATUS_LABEL[status]}\n        {...props}\n      />\n    );\n  },\n);\n\nAudioRecordButton.displayName = \"AudioRecordButton\";\n"],"names":[],"mappings":";;;;;;AAYA,MAAM,iBAAqE;AAAA,EACzE,MAAM;AAAA,EACN,WAAW;AACb;AAEA,MAAM,cAAgE;AAAA,EACpE,0BAAO,gBAAA,EAAe;AAAA,EACtB,+BAAY,UAAA,CAAA,CAAS;AACvB;AAEA,MAAM,eAAwD;AAAA,EAC5D,MAAM;AAAA,EACN,WAAW;AACb;AAyBO,MAAM,oBAAoB,MAAM;AAAA,EACrC,CAAC,EAAE,SAAS,QAAQ,cAAc,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC/D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS,eAAe,MAAM;AAAA,QAC9B,MAAM,YAAY,MAAM;AAAA,QACxB,cAAY,aAAa,aAAa,MAAM;AAAA,QAC3C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,kBAAkB,cAAc;"}

package/dist/components/AudioUpload/AudioUpload.mjs

@@ -2,9 +2,9 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
+import { AudioRecordButton } from "../AudioRecordButton/AudioRecordButton.mjs";
 import { Button } from "../Button/Button.mjs";
 import { MicrophoneIcon } from "../Icons/MicrophoneIcon.mjs";
-import { StopIcon } from "../Icons/StopIcon.mjs";
 import { UploadCloudIcon } from "../Icons/UploadCloudIcon.mjs";
 import { AudioWaveform } from "./AudioWaveform.mjs";
 import { formatAudioTime, validateAudioFile } from "./audioUtils.mjs";
@@ -179,14 +179,14 @@ const AudioUpload = React.forwardRef(
                 }
               ) }),
               /* @__PURE__ */ jsx(
-                "button",
+                AudioRecordButton,
                 {
                   ref: stopButtonRef,
-                  type: "button",
+                  status: "recording",
+                  size: "40",
                   onClick: handleStopClick,
-                  className: "mt-1 flex size-11 items-center justify-center rounded-full bg-error-content text-content-always-white transition-colors hover:bg-error-content/80 focus:shadow-focus-ring focus-visible:outline-none",
                   "aria-label": stopButtonAriaLabel,
-                  children: /* @__PURE__ */ jsx(StopIcon, { className: "size-5" })
+                  className: "mt-1"
                 }
               )
             ]

package/dist/components/AudioUpload/AudioUpload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioUpload.mjs","sources":["../../../src/components/AudioUpload/AudioUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { MicrophoneIcon } from \"../Icons/MicrophoneIcon\";\nimport { StopIcon } from \"../Icons/StopIcon\";\nimport { UploadCloudIcon } from \"../Icons/UploadCloudIcon\";\nimport { AudioWaveform } from \"./AudioWaveform\";\nimport { type AudioValidationError, formatAudioTime, validateAudioFile } from \"./audioUtils\";\nimport {\n  DEFAULT_ACCEPTED_TYPES,\n  DEFAULT_MAX_FILE_SIZE,\n  DEFAULT_MAX_RECORDING_DURATION,\n  DEFAULT_MIN_RECORDING_DURATION,\n} from \"./constants\";\nimport { useAudioRecorder } from \"./useAudioRecorder\";\n\n/** A file that was rejected during drop or browse, along with the reasons. */\nexport interface AudioFileRejection {\n  /** The rejected file. */\n  file: File;\n  /** One or more validation errors explaining why the file was rejected. */\n  errors: AudioValidationError[];\n}\n\nexport interface AudioUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onDrop\"> {\n  /** Maximum file size in bytes. @default 10_485_760 (10MB) */\n  maxFileSize?: number;\n  /** Accepted audio MIME types. @default DEFAULT_ACCEPTED_TYPES */\n  accept?: readonly string[];\n  /** Maximum number of files per drop. @default 1 */\n  maxFiles?: number;\n  /** Whether to show the record audio button. @default true */\n  allowRecording?: boolean;\n  /** Maximum recording duration in seconds. @default 30 */\n  maxRecordingDuration?: number;\n  /** Minimum recording duration in seconds. @default 5 */\n  minRecordingDuration?: number;\n\n  /** Called when valid files are accepted via drop or browse */\n  onFilesAccepted?: (files: File[]) => void;\n  /** Called when files are rejected (wrong type, too large, etc.) */\n  onFilesRejected?: (rejections: AudioFileRejection[]) => void;\n  /** Called when a recording completes and meets minimum duration */\n  onRecordingComplete?: (blob: Blob, durationMs: number) => void;\n  /** Called when recording is stopped but does not meet minimum duration */\n  onRecordingTooShort?: (durationMs: number, minDurationMs: number) => void;\n  /** Called when microphone permission is denied or unavailable */\n  onPermissionError?: (error: Error) => void;\n  /** Called when an unexpected recording error occurs */\n  onRecordingError?: (error: Error) => void;\n\n  /** Upload area title text. @default \"Click to upload, or drag & drop\" */\n  uploadTitle?: string;\n  /** Upload area description text. @default \"Audio files only, up to 10MB each\" */\n  uploadDescription?: string;\n  /** Separator text between upload and record. @default \"or\" */\n  separatorText?: string;\n  /** Record button label. @default \"Record audio\" */\n  recordButtonLabel?: string;\n  /** Stop recording button aria-label. @default \"Stop recording\" */\n  stopButtonAriaLabel?: string;\n\n  /** Whether the component is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction partitionFiles(\n  files: File[],\n  maxFileSize: number,\n  accept: readonly string[],\n  maxFiles: number,\n): { accepted: File[]; rejected: AudioFileRejection[] } {\n  const accepted: File[] = [];\n  const rejected: AudioFileRejection[] = [];\n\n  for (const file of files) {\n    const errors = validateAudioFile(file, { maxFileSize, acceptedTypes: accept });\n    if (errors.length > 0) {\n      rejected.push({ file, errors });\n    } else {\n      accepted.push(file);\n    }\n  }\n\n  if (maxFiles > 0 && accepted.length > maxFiles) {\n    const excess = accepted.splice(maxFiles);\n    for (const file of excess) {\n      rejected.push({\n        file,\n        errors: [{ code: \"too-many-files\", message: `Too many files. Maximum is ${maxFiles}` }],\n      });\n    }\n  }\n\n  return { accepted, rejected };\n}\n\n/**\n * Audio file upload with drag-and-drop and optional in-browser recording.\n * Supports file validation, multiple files, and real-time waveform visualization during recording.\n *\n * @example\n * ```tsx\n * <AudioUpload\n *   onFilesAccepted={(files) => console.log(files)}\n *   onRecordingComplete={(blob, duration) => console.log(blob, duration)}\n * />\n * ```\n */\nexport const AudioUpload = React.forwardRef<HTMLDivElement, AudioUploadProps>(\n  (\n    {\n      className,\n      maxFileSize = DEFAULT_MAX_FILE_SIZE,\n      accept = DEFAULT_ACCEPTED_TYPES,\n      maxFiles = 1,\n      allowRecording = true,\n      maxRecordingDuration = DEFAULT_MAX_RECORDING_DURATION,\n      minRecordingDuration = DEFAULT_MIN_RECORDING_DURATION,\n      onFilesAccepted,\n      onFilesRejected,\n      onRecordingComplete,\n      onRecordingTooShort,\n      onPermissionError,\n      onRecordingError,\n      uploadTitle = \"Click to upload, or drag & drop\",\n      uploadDescription = \"Audio files only, up to 10MB each\",\n      separatorText = \"or\",\n      recordButtonLabel = \"Record audio\",\n      stopButtonAriaLabel = \"Stop recording\",\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = React.useId();\n    const descriptionId = React.useId();\n    const [isDragActive, setIsDragActive] = React.useState(false);\n    const stopButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    const {\n      isRecording,\n      elapsedMs,\n      startRecording,\n      stopRecording,\n      analyserNode,\n      isSupported: isRecordingSupported,\n    } = useAudioRecorder({\n      maxDuration: maxRecordingDuration,\n      minDuration: minRecordingDuration,\n      onComplete: onRecordingComplete,\n      onTooShort: onRecordingTooShort,\n      onPermissionError,\n      onError: onRecordingError,\n    });\n\n    const acceptString = accept.join(\",\");\n\n    // Move focus to stop button when recording starts\n    React.useEffect(() => {\n      if (isRecording) {\n        stopButtonRef.current?.focus();\n      }\n    }, [isRecording]);\n\n    const validateAndAcceptFiles = React.useCallback(\n      (files: FileList | File[]) => {\n        const { accepted, rejected } = partitionFiles(\n          Array.from(files),\n          maxFileSize,\n          accept,\n          maxFiles,\n        );\n        if (accepted.length > 0) onFilesAccepted?.(accepted);\n        if (rejected.length > 0) onFilesRejected?.(rejected);\n      },\n      [maxFileSize, accept, maxFiles, onFilesAccepted, onFilesRejected],\n    );\n\n    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n\n      if (disabled) return;\n\n      const { files } = e.dataTransfer;\n      if (files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n    };\n\n    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (!disabled) {\n        setIsDragActive(true);\n      }\n    };\n\n    const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n    };\n\n    const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const { files } = e.target;\n      if (files && files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n      // Reset input so same file can be selected again\n      e.target.value = \"\";\n    };\n\n    const handleRecordClick = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      startRecording();\n    };\n\n    const handleStopClick = () => {\n      stopRecording();\n    };\n\n    if (isRecording) {\n      const formattedElapsed = formatAudioTime(elapsedMs);\n\n      return (\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label=\"Audio recording in progress\"\n          data-testid=\"audio-upload\"\n          data-state=\"recording\"\n          className={cn(\n            \"flex flex-col items-center justify-center gap-2 rounded-md bg-surface-secondary px-4 py-3\",\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"flex flex-1 flex-col items-center gap-2\">\n            <div\n              className=\"flex size-[72px] items-center justify-center rounded-full bg-buttons-primary-default\"\n              aria-hidden=\"true\"\n            >\n              <MicrophoneIcon className=\"size-5 text-content-primary-inverted\" />\n            </div>\n\n            <p\n              role=\"timer\"\n              aria-label=\"Recording time\"\n              className=\"typography-body-default-16px-regular text-content-primary\"\n            >\n              {formattedElapsed} / {formatAudioTime(maxRecordingDuration * 1000)}\n            </p>\n          </div>\n\n          <div className=\"flex w-full items-center gap-2.5\" aria-hidden=\"true\">\n            <AudioWaveform\n              analyserNode={analyserNode}\n              isRecording={isRecording}\n              className=\"flex-1\"\n            />\n          </div>\n\n          <button\n            ref={stopButtonRef}\n            type=\"button\"\n            onClick={handleStopClick}\n            className=\"mt-1 flex size-11 items-center justify-center rounded-full bg-error-content text-content-always-white transition-colors hover:bg-error-content/80 focus:shadow-focus-ring focus-visible:outline-none\"\n            aria-label={stopButtonAriaLabel}\n          >\n            <StopIcon className=\"size-5\" />\n          </button>\n        </div>\n      );\n    }\n\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Audio upload\"\n        data-testid=\"audio-upload\"\n        data-state=\"idle\"\n        aria-disabled={disabled || undefined}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        className={cn(\n          \"flex flex-col items-center justify-center gap-2 rounded-md bg-surface-secondary px-4 py-3 transition-colors\",\n          isDragActive && \"bg-brand-primary-muted ring-2 ring-brand-primary-default\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={acceptString}\n          multiple={maxFiles > 1}\n          onChange={handleFileInputChange}\n          className=\"peer sr-only\"\n          disabled={disabled}\n          aria-describedby={descriptionId}\n        />\n\n        <label\n          htmlFor={inputId}\n          className=\"flex cursor-pointer flex-col items-center gap-2 rounded-xs px-2 py-1 peer-focus-visible:shadow-focus-ring\"\n        >\n          <UploadCloudIcon className=\"size-5 text-content-primary\" />\n\n          <span className=\"typography-body-default-16px-semibold text-center text-content-primary\">\n            {uploadTitle}\n          </span>\n\n          <span\n            id={descriptionId}\n            className=\"typography-body-small-14px-regular text-center text-content-primary\"\n          >\n            {uploadDescription}\n          </span>\n        </label>\n\n        {allowRecording && isRecordingSupported && (\n          <>\n            <p className=\"typography-body-small-14px-regular text-center text-content-primary\">\n              {separatorText}\n            </p>\n\n            <Button\n              variant=\"brand\"\n              size=\"40\"\n              leftIcon={<MicrophoneIcon className=\"size-5\" />}\n              onClick={handleRecordClick}\n              disabled={disabled}\n              type=\"button\"\n            >\n              {recordButtonLabel}\n            </Button>\n          </>\n        )}\n      </div>\n    );\n  },\n);\n\nAudioUpload.displayName = \"AudioUpload\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AudioUpload.mjs","sources":["../../../src/components/AudioUpload/AudioUpload.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { AudioRecordButton } from \"../AudioRecordButton/AudioRecordButton\";\nimport { Button } from \"../Button/Button\";\nimport { MicrophoneIcon } from \"../Icons/MicrophoneIcon\";\nimport { UploadCloudIcon } from \"../Icons/UploadCloudIcon\";\nimport { AudioWaveform } from \"./AudioWaveform\";\nimport { type AudioValidationError, formatAudioTime, validateAudioFile } from \"./audioUtils\";\nimport {\n  DEFAULT_ACCEPTED_TYPES,\n  DEFAULT_MAX_FILE_SIZE,\n  DEFAULT_MAX_RECORDING_DURATION,\n  DEFAULT_MIN_RECORDING_DURATION,\n} from \"./constants\";\nimport { useAudioRecorder } from \"./useAudioRecorder\";\n\n/** A file that was rejected during drop or browse, along with the reasons. */\nexport interface AudioFileRejection {\n  /** The rejected file. */\n  file: File;\n  /** One or more validation errors explaining why the file was rejected. */\n  errors: AudioValidationError[];\n}\n\nexport interface AudioUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onDrop\"> {\n  /** Maximum file size in bytes. @default 10_485_760 (10MB) */\n  maxFileSize?: number;\n  /** Accepted audio MIME types. @default DEFAULT_ACCEPTED_TYPES */\n  accept?: readonly string[];\n  /** Maximum number of files per drop. @default 1 */\n  maxFiles?: number;\n  /** Whether to show the record audio button. @default true */\n  allowRecording?: boolean;\n  /** Maximum recording duration in seconds. @default 30 */\n  maxRecordingDuration?: number;\n  /** Minimum recording duration in seconds. @default 5 */\n  minRecordingDuration?: number;\n\n  /** Called when valid files are accepted via drop or browse */\n  onFilesAccepted?: (files: File[]) => void;\n  /** Called when files are rejected (wrong type, too large, etc.) */\n  onFilesRejected?: (rejections: AudioFileRejection[]) => void;\n  /** Called when a recording completes and meets minimum duration */\n  onRecordingComplete?: (blob: Blob, durationMs: number) => void;\n  /** Called when recording is stopped but does not meet minimum duration */\n  onRecordingTooShort?: (durationMs: number, minDurationMs: number) => void;\n  /** Called when microphone permission is denied or unavailable */\n  onPermissionError?: (error: Error) => void;\n  /** Called when an unexpected recording error occurs */\n  onRecordingError?: (error: Error) => void;\n\n  /** Upload area title text. @default \"Click to upload, or drag & drop\" */\n  uploadTitle?: string;\n  /** Upload area description text. @default \"Audio files only, up to 10MB each\" */\n  uploadDescription?: string;\n  /** Separator text between upload and record. @default \"or\" */\n  separatorText?: string;\n  /** Record button label. @default \"Record audio\" */\n  recordButtonLabel?: string;\n  /** Stop recording button aria-label. @default \"Stop recording\" */\n  stopButtonAriaLabel?: string;\n\n  /** Whether the component is disabled. @default false */\n  disabled?: boolean;\n}\n\nfunction partitionFiles(\n  files: File[],\n  maxFileSize: number,\n  accept: readonly string[],\n  maxFiles: number,\n): { accepted: File[]; rejected: AudioFileRejection[] } {\n  const accepted: File[] = [];\n  const rejected: AudioFileRejection[] = [];\n\n  for (const file of files) {\n    const errors = validateAudioFile(file, { maxFileSize, acceptedTypes: accept });\n    if (errors.length > 0) {\n      rejected.push({ file, errors });\n    } else {\n      accepted.push(file);\n    }\n  }\n\n  if (maxFiles > 0 && accepted.length > maxFiles) {\n    const excess = accepted.splice(maxFiles);\n    for (const file of excess) {\n      rejected.push({\n        file,\n        errors: [{ code: \"too-many-files\", message: `Too many files. Maximum is ${maxFiles}` }],\n      });\n    }\n  }\n\n  return { accepted, rejected };\n}\n\n/**\n * Audio file upload with drag-and-drop and optional in-browser recording.\n * Supports file validation, multiple files, and real-time waveform visualization during recording.\n *\n * @example\n * ```tsx\n * <AudioUpload\n *   onFilesAccepted={(files) => console.log(files)}\n *   onRecordingComplete={(blob, duration) => console.log(blob, duration)}\n * />\n * ```\n */\nexport const AudioUpload = React.forwardRef<HTMLDivElement, AudioUploadProps>(\n  (\n    {\n      className,\n      maxFileSize = DEFAULT_MAX_FILE_SIZE,\n      accept = DEFAULT_ACCEPTED_TYPES,\n      maxFiles = 1,\n      allowRecording = true,\n      maxRecordingDuration = DEFAULT_MAX_RECORDING_DURATION,\n      minRecordingDuration = DEFAULT_MIN_RECORDING_DURATION,\n      onFilesAccepted,\n      onFilesRejected,\n      onRecordingComplete,\n      onRecordingTooShort,\n      onPermissionError,\n      onRecordingError,\n      uploadTitle = \"Click to upload, or drag & drop\",\n      uploadDescription = \"Audio files only, up to 10MB each\",\n      separatorText = \"or\",\n      recordButtonLabel = \"Record audio\",\n      stopButtonAriaLabel = \"Stop recording\",\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = React.useId();\n    const descriptionId = React.useId();\n    const [isDragActive, setIsDragActive] = React.useState(false);\n    const stopButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    const {\n      isRecording,\n      elapsedMs,\n      startRecording,\n      stopRecording,\n      analyserNode,\n      isSupported: isRecordingSupported,\n    } = useAudioRecorder({\n      maxDuration: maxRecordingDuration,\n      minDuration: minRecordingDuration,\n      onComplete: onRecordingComplete,\n      onTooShort: onRecordingTooShort,\n      onPermissionError,\n      onError: onRecordingError,\n    });\n\n    const acceptString = accept.join(\",\");\n\n    // Move focus to stop button when recording starts\n    React.useEffect(() => {\n      if (isRecording) {\n        stopButtonRef.current?.focus();\n      }\n    }, [isRecording]);\n\n    const validateAndAcceptFiles = React.useCallback(\n      (files: FileList | File[]) => {\n        const { accepted, rejected } = partitionFiles(\n          Array.from(files),\n          maxFileSize,\n          accept,\n          maxFiles,\n        );\n        if (accepted.length > 0) onFilesAccepted?.(accepted);\n        if (rejected.length > 0) onFilesRejected?.(rejected);\n      },\n      [maxFileSize, accept, maxFiles, onFilesAccepted, onFilesRejected],\n    );\n\n    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n\n      if (disabled) return;\n\n      const { files } = e.dataTransfer;\n      if (files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n    };\n\n    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (!disabled) {\n        setIsDragActive(true);\n      }\n    };\n\n    const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragActive(false);\n    };\n\n    const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const { files } = e.target;\n      if (files && files.length > 0) {\n        validateAndAcceptFiles(files);\n      }\n      // Reset input so same file can be selected again\n      e.target.value = \"\";\n    };\n\n    const handleRecordClick = (e: React.MouseEvent) => {\n      e.stopPropagation();\n      startRecording();\n    };\n\n    const handleStopClick = () => {\n      stopRecording();\n    };\n\n    if (isRecording) {\n      const formattedElapsed = formatAudioTime(elapsedMs);\n\n      return (\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label=\"Audio recording in progress\"\n          data-testid=\"audio-upload\"\n          data-state=\"recording\"\n          className={cn(\n            \"flex flex-col items-center justify-center gap-2 rounded-md bg-surface-secondary px-4 py-3\",\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"flex flex-1 flex-col items-center gap-2\">\n            <div\n              className=\"flex size-[72px] items-center justify-center rounded-full bg-buttons-primary-default\"\n              aria-hidden=\"true\"\n            >\n              <MicrophoneIcon className=\"size-5 text-content-primary-inverted\" />\n            </div>\n\n            <p\n              role=\"timer\"\n              aria-label=\"Recording time\"\n              className=\"typography-body-default-16px-regular text-content-primary\"\n            >\n              {formattedElapsed} / {formatAudioTime(maxRecordingDuration * 1000)}\n            </p>\n          </div>\n\n          <div className=\"flex w-full items-center gap-2.5\" aria-hidden=\"true\">\n            <AudioWaveform\n              analyserNode={analyserNode}\n              isRecording={isRecording}\n              className=\"flex-1\"\n            />\n          </div>\n\n          <AudioRecordButton\n            ref={stopButtonRef}\n            status=\"recording\"\n            size=\"40\"\n            onClick={handleStopClick}\n            aria-label={stopButtonAriaLabel}\n            className=\"mt-1\"\n          />\n        </div>\n      );\n    }\n\n    return (\n      // biome-ignore lint/a11y/useSemanticElements: <fieldset> would break the public HTMLDivElement ref/props API\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label=\"Audio upload\"\n        data-testid=\"audio-upload\"\n        data-state=\"idle\"\n        aria-disabled={disabled || undefined}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        className={cn(\n          \"flex flex-col items-center justify-center gap-2 rounded-md bg-surface-secondary px-4 py-3 transition-colors\",\n          isDragActive && \"bg-brand-primary-muted ring-2 ring-brand-primary-default\",\n          disabled && \"pointer-events-none opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={acceptString}\n          multiple={maxFiles > 1}\n          onChange={handleFileInputChange}\n          className=\"peer sr-only\"\n          disabled={disabled}\n          aria-describedby={descriptionId}\n        />\n\n        <label\n          htmlFor={inputId}\n          className=\"flex cursor-pointer flex-col items-center gap-2 rounded-xs px-2 py-1 peer-focus-visible:shadow-focus-ring\"\n        >\n          <UploadCloudIcon className=\"size-5 text-content-primary\" />\n\n          <span className=\"typography-body-default-16px-semibold text-center text-content-primary\">\n            {uploadTitle}\n          </span>\n\n          <span\n            id={descriptionId}\n            className=\"typography-body-small-14px-regular text-center text-content-primary\"\n          >\n            {uploadDescription}\n          </span>\n        </label>\n\n        {allowRecording && isRecordingSupported && (\n          <>\n            <p className=\"typography-body-small-14px-regular text-center text-content-primary\">\n              {separatorText}\n            </p>\n\n            <Button\n              variant=\"brand\"\n              size=\"40\"\n              leftIcon={<MicrophoneIcon className=\"size-5\" />}\n              onClick={handleRecordClick}\n              disabled={disabled}\n              type=\"button\"\n            >\n              {recordButtonLabel}\n            </Button>\n          </>\n        )}\n      </div>\n    );\n  },\n);\n\nAudioUpload.displayName = \"AudioUpload\";\n"],"names":[],"mappings":"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"}

package/dist/components/ChatInput/ChatInput.mjs

@@ -307,22 +307,17 @@ function InlineSelect({
               className: cn(
                 "flex w-full items-start gap-2 rounded-sm px-3 py-2 text-left outline-none",
                 "focus-visible:shadow-focus-ring",
-                isSelected ? "typography-body-default-16px-semibold bg-buttons-primary-default text-content-primary-inverted" : "typography-body-default-16px-regular text-content-primary hover:bg-neutral-alphas-50"
+                "typography-body-default-16px-regular text-content-primary hover:bg-neutral-alphas-50",
+                // bg-interaction-hover aliases to the same token as the
+                // plain hover background above, so it can't distinguish
+                // the selected option from a hovered-but-unselected one.
+                isSelected && ["bg-neutral-alphas-100", "hover:bg-neutral-alphas-200"]
               ),
               children: [
                 option.icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center pt-1 [&>svg]:size-4", children: option.icon }),
                 /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
                   /* @__PURE__ */ jsx("span", { className: "truncate", children: option.menuLabel ?? option.label }),
-                  option.description && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "typography-body-small-14px-regular truncate",
-                        isSelected ? "text-content-primary-inverted" : "text-content-secondary"
-                      ),
-                      children: option.description
-                    }
-                  )
+                  option.description && /* @__PURE__ */ jsx("span", { className: "typography-body-small-14px-regular truncate text-content-secondary", children: option.description })
                 ] }),
                 isSelected && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center pt-1", children: /* @__PURE__ */ jsx(SelectedTick, {}) })
               ]

package/dist/components/ChatInput/ChatInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.mjs","sources":["../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from \"../Drawer/Drawer\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { TickIcon } from \"../Icons/TickIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. */\nexport interface ChatInputAttachmentItem {\n  /** Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. */\n  id: string;\n  /** Image URL for the thumbnail. */\n  src: string;\n  /** Optional value passed to the remove control `aria-label`. */\n  ariaLabel?: string;\n}\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Short label shown on the collapsed trigger button (e.g. \"Sonnet 4.6\"). */\n  label: string;\n  /**\n   * Optional longer title shown on the option's row inside the open menu/sheet\n   * (e.g. \"Claude Sonnet 4.6\"). Falls back to {@link label} when omitted.\n   */\n  menuLabel?: string;\n  /** Optional secondary text shown below the label in the dropdown menu. */\n  description?: string;\n  /** Optional icon rendered to the left of the label. */\n  icon?: React.ReactNode;\n}\n\n/**\n * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n */\nexport interface ChatInputProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    \"className\" | \"rows\" | \"onSubmit\"\n  > {\n  /** Minimum number of visible rows. @default 1 */\n  minRows?: number;\n  /** Maximum number of visible rows before scrolling. @default 6 */\n  maxRows?: number;\n  /** Whether a submission is in progress (disables submit, shows visual feedback). @default false */\n  loading?: boolean;\n  /**\n   * Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n   * Receives the current trimmed text value.\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n   * @default false\n   */\n  showFileButton?: boolean;\n  /** Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. */\n  onFileClick?: () => void;\n  /** Accessible label for the attach-file button. @default \"Attach file\" */\n  fileButtonAriaLabel?: string;\n  /** Accessible label for the submit button. @default \"Send message\" */\n  submitAriaLabel?: string;\n  /** Icon element for the submit button. @default `<ArrowUpIcon />` */\n  submitIcon?: React.ReactNode;\n  /**\n   * Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n   * When provided, takes precedence over the built-in `selectOptions` dropdown.\n   */\n  toolbarRight?: React.ReactNode;\n  /**\n   * Options for the built-in inline dropdown selector (e.g. model picker).\n   * Ignored when `toolbarRight` is provided.\n   */\n  selectOptions?: ChatInputSelectOption[];\n  /**\n   * How the built-in selector presents its options:\n   * - `\"menu\"` (default) — a dropdown anchored to the trigger, for pointer/desktop.\n   * - `\"sheet\"` — a bottom sheet, for mobile/touch viewports.\n   *\n   * The viewport decision belongs to the consumer (it owns the breakpoint\n   * source of truth), so pass e.g. `selectVariant={isDesktop ? \"menu\" : \"sheet\"}`.\n   * @default \"menu\"\n   */\n  selectVariant?: \"menu\" | \"sheet\";\n  /**\n   * Title shown at the top of the `\"sheet\"` variant of the built-in selector\n   * (e.g. \"Switch AI Model\"). @default \"Select an option\"\n   */\n  selectMenuTitle?: string;\n  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** When `true`, disables only the built-in dropdown selector. @default false */\n  selectDisabled?: boolean;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\n  /**\n   * Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n   * is provided (including `null`).\n   */\n  attachments?: ChatInputAttachmentItem[];\n  /**\n   * Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n   * omitted or the input is {@link ChatInputProps.disabled}.\n   */\n  onAttachmentRemove?: (id: string) => void;\n  /**\n   * Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n   * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n   */\n  attachmentPreviews?: React.ReactNode;\n  /** Additional className applied to the outermost container. */\n  className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n  attachments: ChatInputAttachmentItem[];\n  onAttachmentRemove?: (id: string) => void;\n  disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n  attachments,\n  onAttachmentRemove,\n  disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n  return attachments.map((item) => (\n    <div\n      key={item.id}\n      className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary\"\n    >\n      <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n      <IconButton\n        variant=\"tertiary\"\n        size=\"24\"\n        aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n        icon={<CloseIcon className=\"!size-3\" />}\n        disabled={disabled || !onAttachmentRemove}\n        onClick={() => onAttachmentRemove?.(item.id)}\n        className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n      />\n    </div>\n  ));\n}\n\n/**\n * A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n *\n * Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Type a message...\"\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Ask the agent...\"\n *   showFileButton\n *   onFileClick={() => openFilePicker()}\n *   selectOptions={[\n *     { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n *     { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n *   ]}\n *   selectValue=\"fanvue-ai\"\n *   onSelectChange={(v) => setModel(v)}\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachments={files}\n *   onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n  (\n    {\n      className,\n      minRows = 1,\n      maxRows = 6,\n      disabled = false,\n      loading = false,\n      value,\n      defaultValue,\n      placeholder,\n      maxLength,\n      \"aria-label\": ariaLabel,\n      onChange,\n      onKeyDown,\n      onSubmit,\n      showFileButton = false,\n      onFileClick,\n      fileButtonAriaLabel = \"Attach file\",\n      submitAriaLabel = \"Send message\",\n      submitIcon,\n      toolbarRight,\n      selectOptions,\n      selectVariant = \"menu\",\n      selectMenuTitle,\n      selectValue,\n      selectDisabled = false,\n      onSelectChange,\n      attachments,\n      onAttachmentRemove,\n      attachmentPreviews,\n      style,\n      ...textareaProps\n    },\n    ref,\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n    const resolvedValue = value !== undefined ? value : internalValue;\n    const isControlled = value !== undefined;\n\n    const mergedRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (!textarea) return;\n\n      const minHeight = calculateHeight(minRows);\n      const maxHeight = calculateHeight(maxRows);\n\n      textarea.style.height = `${minHeight}px`;\n      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n      textarea.style.height = `${desired}px`;\n    }, [minRows, maxRows]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [adjustHeight]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value);\n      }\n      onChange?.(e);\n    };\n\n    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n    const handleSubmit = () => {\n      const text = String(resolvedValue).trim();\n      if (!text || !canSubmit) return;\n      onSubmit?.(text);\n      if (!isControlled) {\n        setInternalValue(\"\");\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n      onKeyDown?.(e);\n    };\n\n    const minHeight = calculateHeight(minRows);\n    const maxHeight = calculateHeight(maxRows);\n\n    const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n    const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n    const defaultAttachmentStrip =\n      !useCustomAttachmentPreviews && !!attachments?.length ? (\n        <ChatInputDefaultAttachmentThumbnails\n          attachments={attachments ?? []}\n          disabled={disabled}\n          onAttachmentRemove={onAttachmentRemove}\n        />\n      ) : null;\n    const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n    const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n    const selectedOption =\n      selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n    const resolvedToolbarRight =\n      toolbarRight ??\n      (selectOptions && selectOptions.length > 0 ? (\n        <InlineSelect\n          options={selectOptions}\n          value={selectValue}\n          onChange={onSelectChange}\n          disabled={disabled || selectDisabled}\n          selectedOption={selectedOption}\n          variant={selectVariant}\n          menuTitle={selectMenuTitle}\n        />\n      ) : null);\n\n    return (\n      <div\n        className={cn(\n          \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n          \"has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col\">\n          {hasAttachmentStrip ? (\n            <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n              {resolvedAttachmentStrip}\n            </div>\n          ) : null}\n          <textarea\n            {...textareaProps}\n            ref={mergedRef}\n            value={isControlled ? value : internalValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            aria-label={ariaLabel ?? placeholder}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            rows={minRows}\n            className={cn(\n              \"w-full resize-none bg-transparent px-4\",\n              hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n              \"typography-body-small-14px-regular text-content-primary\",\n              \"placeholder:text-content-tertiary\",\n              \"focus:outline-none disabled:cursor-not-allowed\",\n              \"overflow-y-auto\",\n            )}\n            style={{\n              minHeight: `${minHeight}px`,\n              maxHeight: `${maxHeight}px`,\n              ...style,\n            }}\n          />\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n          <div className=\"flex items-center gap-1\">\n            {showFileButton && (\n              <IconButton\n                variant=\"tertiary\"\n                size=\"32\"\n                icon={<AddIcon />}\n                aria-label={fileButtonAriaLabel}\n                onClick={onFileClick}\n                disabled={disabled}\n                className=\"max-sm:-ml-2 sm:border sm:border-border-primary\"\n              />\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            {resolvedToolbarRight}\n            <IconButton\n              variant=\"primary\"\n              size=\"32\"\n              icon={submitIcon ?? <ArrowUpIcon />}\n              aria-label={submitAriaLabel}\n              onClick={handleSubmit}\n              disabled={!canSubmit}\n              className=\"disabled:bg-surface-secondary disabled:text-icons-primary disabled:opacity-100\"\n            />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n  options: ChatInputSelectOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Presentation: anchored dropdown (`\"menu\"`) or bottom sheet (`\"sheet\"`). */\n  variant: \"menu\" | \"sheet\";\n  /** Title for the bottom-sheet header. */\n  menuTitle?: string;\n}\n\ninterface SelectTriggerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Whether the menu/sheet is open (drives chevron rotation + active background). */\n  open: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Label shown when no option is selected. */\n  fallbackLabel?: string;\n}\n\n/**\n * The collapsed pill trigger (icon + short label + chevron). Shared by the\n * desktop menu and mobile sheet; spreads Radix-injected trigger props via\n * `asChild`.\n */\nconst SelectTriggerButton = React.forwardRef<HTMLButtonElement, SelectTriggerButtonProps>(\n  ({ open, selectedOption, fallbackLabel, className, ...props }, ref) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label=\"Select model\"\n      className={cn(\n        \"typography-description-12px-semibold text-content-primary\",\n        \"flex items-center gap-1 rounded-md px-2 py-2\",\n        \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"motion-safe:transition-colors\",\n        open && \"bg-neutral-alphas-50\",\n        className,\n      )}\n      {...props}\n    >\n      {selectedOption?.icon && (\n        <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n      )}\n      {selectedOption?.label ?? fallbackLabel ?? \"Select\"}\n      <ChevronDownIcon\n        className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n      />\n    </button>\n  ),\n);\nSelectTriggerButton.displayName = \"SelectTriggerButton\";\n\n/** The green tick shown on the selected option (matches DropDown V2). */\nfunction SelectedTick() {\n  return <TickIcon size={16} className=\"text-success-negative-content\" aria-hidden=\"true\" />;\n}\n\n/**\n * Inline model/option selector for the ChatInput toolbar. Renders the\n * design-system dropdown (DropDown V2) on desktop and a bottom sheet on mobile.\n */\nfunction InlineSelect({\n  options,\n  value,\n  onChange,\n  disabled,\n  selectedOption,\n  variant,\n  menuTitle,\n}: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const fallbackLabel = options[0]?.label;\n\n  // Never allow the menu/sheet to open while disabled, regardless of how the\n  // open request originates (click, keyboard, programmatic).\n  const handleOpenChange = (next: boolean) => {\n    if (disabled && next) return;\n    setOpen(next);\n  };\n\n  const trigger = (\n    <SelectTriggerButton\n      open={open}\n      selectedOption={selectedOption}\n      fallbackLabel={fallbackLabel}\n      disabled={disabled}\n    />\n  );\n\n  if (variant === \"sheet\") {\n    return (\n      <Drawer open={open} onOpenChange={handleOpenChange}>\n        <DrawerTrigger asChild>{trigger}</DrawerTrigger>\n        <DrawerContent position=\"bottom\" variant=\"sheet\">\n          <DrawerHeader>\n            <DrawerTitle className=\"typography-header-heading-xs\">\n              {menuTitle ?? \"Select an option\"}\n            </DrawerTitle>\n          </DrawerHeader>\n          {/* Mirrors DropdownMenuItem's two-line layout, which can't be reused\n              here because it requires a DropdownMenu (Radix Menu) context. */}\n          <div className=\"flex flex-col gap-1 overflow-y-auto px-4 pb-4\" role=\"listbox\">\n            {options.map((option) => {\n              const isSelected = option.value === value;\n              return (\n                <button\n                  key={option.value}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={isSelected}\n                  onClick={() => {\n                    onChange?.(option.value);\n                    setOpen(false);\n                  }}\n                  className={cn(\n                    \"flex w-full items-start gap-2 rounded-sm px-3 py-2 text-left outline-none\",\n                    \"focus-visible:shadow-focus-ring\",\n                    isSelected\n                      ? \"typography-body-default-16px-semibold bg-buttons-primary-default text-content-primary-inverted\"\n                      : \"typography-body-default-16px-regular text-content-primary hover:bg-neutral-alphas-50\",\n                  )}\n                >\n                  {option.icon && (\n                    <span className=\"flex shrink-0 items-center pt-1 [&>svg]:size-4\">\n                      {option.icon}\n                    </span>\n                  )}\n                  <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <span className=\"truncate\">{option.menuLabel ?? option.label}</span>\n                    {option.description && (\n                      <span\n                        className={cn(\n                          \"typography-body-small-14px-regular truncate\",\n                          isSelected ? \"text-content-primary-inverted\" : \"text-content-secondary\",\n                        )}\n                      >\n                        {option.description}\n                      </span>\n                    )}\n                  </span>\n                  {isSelected && (\n                    <span className=\"flex shrink-0 items-center pt-1\">\n                      <SelectedTick />\n                    </span>\n                  )}\n                </button>\n              );\n            })}\n          </div>\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  return (\n    <DropdownMenu open={open} onOpenChange={handleOpenChange}>\n      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n      <DropdownMenuContent side=\"top\" align=\"end\" className=\"min-w-[244px]\">\n        {options.map((option) => {\n          const isSelected = option.value === value;\n          return (\n            <DropdownMenuItem\n              key={option.value}\n              size=\"40\"\n              selected={isSelected}\n              description={option.description}\n              leadingIcon={\n                option.icon ? (\n                  <span className=\"flex size-4 items-center [&>svg]:size-4\">{option.icon}</span>\n                ) : undefined\n              }\n              trailingIcon={isSelected ? <SelectedTick /> : undefined}\n              onSelect={() => onChange?.(option.value)}\n            >\n              {option.menuLabel ?? option.label}\n            </DropdownMenuItem>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["minHeight","maxHeight"],"mappings":"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"}
+{"version":3,"file":"ChatInput.mjs","sources":["../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from \"../Drawer/Drawer\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { TickIcon } from \"../Icons/TickIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. */\nexport interface ChatInputAttachmentItem {\n  /** Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. */\n  id: string;\n  /** Image URL for the thumbnail. */\n  src: string;\n  /** Optional value passed to the remove control `aria-label`. */\n  ariaLabel?: string;\n}\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Short label shown on the collapsed trigger button (e.g. \"Sonnet 4.6\"). */\n  label: string;\n  /**\n   * Optional longer title shown on the option's row inside the open menu/sheet\n   * (e.g. \"Claude Sonnet 4.6\"). Falls back to {@link label} when omitted.\n   */\n  menuLabel?: string;\n  /** Optional secondary text shown below the label in the dropdown menu. */\n  description?: string;\n  /** Optional icon rendered to the left of the label. */\n  icon?: React.ReactNode;\n}\n\n/**\n * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n */\nexport interface ChatInputProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    \"className\" | \"rows\" | \"onSubmit\"\n  > {\n  /** Minimum number of visible rows. @default 1 */\n  minRows?: number;\n  /** Maximum number of visible rows before scrolling. @default 6 */\n  maxRows?: number;\n  /** Whether a submission is in progress (disables submit, shows visual feedback). @default false */\n  loading?: boolean;\n  /**\n   * Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n   * Receives the current trimmed text value.\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n   * @default false\n   */\n  showFileButton?: boolean;\n  /** Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. */\n  onFileClick?: () => void;\n  /** Accessible label for the attach-file button. @default \"Attach file\" */\n  fileButtonAriaLabel?: string;\n  /** Accessible label for the submit button. @default \"Send message\" */\n  submitAriaLabel?: string;\n  /** Icon element for the submit button. @default `<ArrowUpIcon />` */\n  submitIcon?: React.ReactNode;\n  /**\n   * Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n   * When provided, takes precedence over the built-in `selectOptions` dropdown.\n   */\n  toolbarRight?: React.ReactNode;\n  /**\n   * Options for the built-in inline dropdown selector (e.g. model picker).\n   * Ignored when `toolbarRight` is provided.\n   */\n  selectOptions?: ChatInputSelectOption[];\n  /**\n   * How the built-in selector presents its options:\n   * - `\"menu\"` (default) — a dropdown anchored to the trigger, for pointer/desktop.\n   * - `\"sheet\"` — a bottom sheet, for mobile/touch viewports.\n   *\n   * The viewport decision belongs to the consumer (it owns the breakpoint\n   * source of truth), so pass e.g. `selectVariant={isDesktop ? \"menu\" : \"sheet\"}`.\n   * @default \"menu\"\n   */\n  selectVariant?: \"menu\" | \"sheet\";\n  /**\n   * Title shown at the top of the `\"sheet\"` variant of the built-in selector\n   * (e.g. \"Switch AI Model\"). @default \"Select an option\"\n   */\n  selectMenuTitle?: string;\n  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** When `true`, disables only the built-in dropdown selector. @default false */\n  selectDisabled?: boolean;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\n  /**\n   * Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n   * is provided (including `null`).\n   */\n  attachments?: ChatInputAttachmentItem[];\n  /**\n   * Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n   * omitted or the input is {@link ChatInputProps.disabled}.\n   */\n  onAttachmentRemove?: (id: string) => void;\n  /**\n   * Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n   * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n   */\n  attachmentPreviews?: React.ReactNode;\n  /** Additional className applied to the outermost container. */\n  className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n  attachments: ChatInputAttachmentItem[];\n  onAttachmentRemove?: (id: string) => void;\n  disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n  attachments,\n  onAttachmentRemove,\n  disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n  return attachments.map((item) => (\n    <div\n      key={item.id}\n      className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary\"\n    >\n      <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n      <IconButton\n        variant=\"tertiary\"\n        size=\"24\"\n        aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n        icon={<CloseIcon className=\"!size-3\" />}\n        disabled={disabled || !onAttachmentRemove}\n        onClick={() => onAttachmentRemove?.(item.id)}\n        className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n      />\n    </div>\n  ));\n}\n\n/**\n * A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n *\n * Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Type a message...\"\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Ask the agent...\"\n *   showFileButton\n *   onFileClick={() => openFilePicker()}\n *   selectOptions={[\n *     { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n *     { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n *   ]}\n *   selectValue=\"fanvue-ai\"\n *   onSelectChange={(v) => setModel(v)}\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachments={files}\n *   onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n  (\n    {\n      className,\n      minRows = 1,\n      maxRows = 6,\n      disabled = false,\n      loading = false,\n      value,\n      defaultValue,\n      placeholder,\n      maxLength,\n      \"aria-label\": ariaLabel,\n      onChange,\n      onKeyDown,\n      onSubmit,\n      showFileButton = false,\n      onFileClick,\n      fileButtonAriaLabel = \"Attach file\",\n      submitAriaLabel = \"Send message\",\n      submitIcon,\n      toolbarRight,\n      selectOptions,\n      selectVariant = \"menu\",\n      selectMenuTitle,\n      selectValue,\n      selectDisabled = false,\n      onSelectChange,\n      attachments,\n      onAttachmentRemove,\n      attachmentPreviews,\n      style,\n      ...textareaProps\n    },\n    ref,\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n    const resolvedValue = value !== undefined ? value : internalValue;\n    const isControlled = value !== undefined;\n\n    const mergedRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (!textarea) return;\n\n      const minHeight = calculateHeight(minRows);\n      const maxHeight = calculateHeight(maxRows);\n\n      textarea.style.height = `${minHeight}px`;\n      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n      textarea.style.height = `${desired}px`;\n    }, [minRows, maxRows]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [adjustHeight]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value);\n      }\n      onChange?.(e);\n    };\n\n    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n    const handleSubmit = () => {\n      const text = String(resolvedValue).trim();\n      if (!text || !canSubmit) return;\n      onSubmit?.(text);\n      if (!isControlled) {\n        setInternalValue(\"\");\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n      onKeyDown?.(e);\n    };\n\n    const minHeight = calculateHeight(minRows);\n    const maxHeight = calculateHeight(maxRows);\n\n    const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n    const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n    const defaultAttachmentStrip =\n      !useCustomAttachmentPreviews && !!attachments?.length ? (\n        <ChatInputDefaultAttachmentThumbnails\n          attachments={attachments ?? []}\n          disabled={disabled}\n          onAttachmentRemove={onAttachmentRemove}\n        />\n      ) : null;\n    const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n    const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n    const selectedOption =\n      selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n    const resolvedToolbarRight =\n      toolbarRight ??\n      (selectOptions && selectOptions.length > 0 ? (\n        <InlineSelect\n          options={selectOptions}\n          value={selectValue}\n          onChange={onSelectChange}\n          disabled={disabled || selectDisabled}\n          selectedOption={selectedOption}\n          variant={selectVariant}\n          menuTitle={selectMenuTitle}\n        />\n      ) : null);\n\n    return (\n      <div\n        className={cn(\n          \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n          \"has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col\">\n          {hasAttachmentStrip ? (\n            <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n              {resolvedAttachmentStrip}\n            </div>\n          ) : null}\n          <textarea\n            {...textareaProps}\n            ref={mergedRef}\n            value={isControlled ? value : internalValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            aria-label={ariaLabel ?? placeholder}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            rows={minRows}\n            className={cn(\n              \"w-full resize-none bg-transparent px-4\",\n              hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n              \"typography-body-small-14px-regular text-content-primary\",\n              \"placeholder:text-content-tertiary\",\n              \"focus:outline-none disabled:cursor-not-allowed\",\n              \"overflow-y-auto\",\n            )}\n            style={{\n              minHeight: `${minHeight}px`,\n              maxHeight: `${maxHeight}px`,\n              ...style,\n            }}\n          />\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n          <div className=\"flex items-center gap-1\">\n            {showFileButton && (\n              <IconButton\n                variant=\"tertiary\"\n                size=\"32\"\n                icon={<AddIcon />}\n                aria-label={fileButtonAriaLabel}\n                onClick={onFileClick}\n                disabled={disabled}\n                className=\"max-sm:-ml-2 sm:border sm:border-border-primary\"\n              />\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            {resolvedToolbarRight}\n            <IconButton\n              variant=\"primary\"\n              size=\"32\"\n              icon={submitIcon ?? <ArrowUpIcon />}\n              aria-label={submitAriaLabel}\n              onClick={handleSubmit}\n              disabled={!canSubmit}\n              className=\"disabled:bg-surface-secondary disabled:text-icons-primary disabled:opacity-100\"\n            />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n  options: ChatInputSelectOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Presentation: anchored dropdown (`\"menu\"`) or bottom sheet (`\"sheet\"`). */\n  variant: \"menu\" | \"sheet\";\n  /** Title for the bottom-sheet header. */\n  menuTitle?: string;\n}\n\ninterface SelectTriggerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Whether the menu/sheet is open (drives chevron rotation + active background). */\n  open: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Label shown when no option is selected. */\n  fallbackLabel?: string;\n}\n\n/**\n * The collapsed pill trigger (icon + short label + chevron). Shared by the\n * desktop menu and mobile sheet; spreads Radix-injected trigger props via\n * `asChild`.\n */\nconst SelectTriggerButton = React.forwardRef<HTMLButtonElement, SelectTriggerButtonProps>(\n  ({ open, selectedOption, fallbackLabel, className, ...props }, ref) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label=\"Select model\"\n      className={cn(\n        \"typography-description-12px-semibold text-content-primary\",\n        \"flex items-center gap-1 rounded-md px-2 py-2\",\n        \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"motion-safe:transition-colors\",\n        open && \"bg-neutral-alphas-50\",\n        className,\n      )}\n      {...props}\n    >\n      {selectedOption?.icon && (\n        <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n      )}\n      {selectedOption?.label ?? fallbackLabel ?? \"Select\"}\n      <ChevronDownIcon\n        className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n      />\n    </button>\n  ),\n);\nSelectTriggerButton.displayName = \"SelectTriggerButton\";\n\n/** The green tick shown on the selected option (matches DropDown V2). */\nfunction SelectedTick() {\n  return <TickIcon size={16} className=\"text-success-negative-content\" aria-hidden=\"true\" />;\n}\n\n/**\n * Inline model/option selector for the ChatInput toolbar. Renders the\n * design-system dropdown (DropDown V2) on desktop and a bottom sheet on mobile.\n */\nfunction InlineSelect({\n  options,\n  value,\n  onChange,\n  disabled,\n  selectedOption,\n  variant,\n  menuTitle,\n}: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const fallbackLabel = options[0]?.label;\n\n  // Never allow the menu/sheet to open while disabled, regardless of how the\n  // open request originates (click, keyboard, programmatic).\n  const handleOpenChange = (next: boolean) => {\n    if (disabled && next) return;\n    setOpen(next);\n  };\n\n  const trigger = (\n    <SelectTriggerButton\n      open={open}\n      selectedOption={selectedOption}\n      fallbackLabel={fallbackLabel}\n      disabled={disabled}\n    />\n  );\n\n  if (variant === \"sheet\") {\n    return (\n      <Drawer open={open} onOpenChange={handleOpenChange}>\n        <DrawerTrigger asChild>{trigger}</DrawerTrigger>\n        <DrawerContent position=\"bottom\" variant=\"sheet\">\n          <DrawerHeader>\n            <DrawerTitle className=\"typography-header-heading-xs\">\n              {menuTitle ?? \"Select an option\"}\n            </DrawerTitle>\n          </DrawerHeader>\n          {/* Mirrors DropdownMenuItem's two-line layout, which can't be reused\n              here because it requires a DropdownMenu (Radix Menu) context. */}\n          <div className=\"flex flex-col gap-1 overflow-y-auto px-4 pb-4\" role=\"listbox\">\n            {options.map((option) => {\n              const isSelected = option.value === value;\n              return (\n                <button\n                  key={option.value}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={isSelected}\n                  onClick={() => {\n                    onChange?.(option.value);\n                    setOpen(false);\n                  }}\n                  className={cn(\n                    \"flex w-full items-start gap-2 rounded-sm px-3 py-2 text-left outline-none\",\n                    \"focus-visible:shadow-focus-ring\",\n                    \"typography-body-default-16px-regular text-content-primary hover:bg-neutral-alphas-50\",\n                    // bg-interaction-hover aliases to the same token as the\n                    // plain hover background above, so it can't distinguish\n                    // the selected option from a hovered-but-unselected one.\n                    isSelected && [\"bg-neutral-alphas-100\", \"hover:bg-neutral-alphas-200\"],\n                  )}\n                >\n                  {option.icon && (\n                    <span className=\"flex shrink-0 items-center pt-1 [&>svg]:size-4\">\n                      {option.icon}\n                    </span>\n                  )}\n                  <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <span className=\"truncate\">{option.menuLabel ?? option.label}</span>\n                    {option.description && (\n                      <span className=\"typography-body-small-14px-regular truncate text-content-secondary\">\n                        {option.description}\n                      </span>\n                    )}\n                  </span>\n                  {isSelected && (\n                    <span className=\"flex shrink-0 items-center pt-1\">\n                      <SelectedTick />\n                    </span>\n                  )}\n                </button>\n              );\n            })}\n          </div>\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  return (\n    <DropdownMenu open={open} onOpenChange={handleOpenChange}>\n      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n      <DropdownMenuContent side=\"top\" align=\"end\" className=\"min-w-[244px]\">\n        {options.map((option) => {\n          const isSelected = option.value === value;\n          return (\n            <DropdownMenuItem\n              key={option.value}\n              size=\"40\"\n              selected={isSelected}\n              description={option.description}\n              leadingIcon={\n                option.icon ? (\n                  <span className=\"flex size-4 items-center [&>svg]:size-4\">{option.icon}</span>\n                ) : undefined\n              }\n              trailingIcon={isSelected ? <SelectedTick /> : undefined}\n              onSelect={() => onChange?.(option.value)}\n            >\n              {option.menuLabel ?? option.label}\n            </DropdownMenuItem>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["minHeight","maxHeight"],"mappings":"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"}