@refraction-ui/react 0.4.0 → 0.4.1

package/dist/index.js

@@ -7093,6 +7093,798 @@ var VideoPlayer = React11.forwardRef(
 );
 VideoPlayer.displayName = "VideoPlayer";
 
+// ../voice-pill/dist/index.js
+var DEFAULT_VOICE_PILL_SPEAKER = "ai";
+var DEFAULT_VOICE_PILL_POSITION = "bottom-center";
+function formatNumber(value) {
+  return Number(value.toFixed(3)).toString();
+}
+function getRawSpeaker(speaker) {
+  const value = String(speaker ?? DEFAULT_VOICE_PILL_SPEAKER).trim();
+  return value.length > 0 ? value : DEFAULT_VOICE_PILL_SPEAKER;
+}
+function clampVoicePillIntensity(intensity = 0) {
+  const value = Number(intensity);
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+  return Math.min(1, Math.max(0, value));
+}
+function getVoicePillSpeakerKey(speaker) {
+  const normalized = getRawSpeaker(speaker).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return normalized.length > 0 ? normalized : DEFAULT_VOICE_PILL_SPEAKER;
+}
+function getVoicePillSpeakerLabel(speaker) {
+  const raw = getRawSpeaker(speaker);
+  const key = getVoicePillSpeakerKey(raw);
+  if (key === "ai") return "AI";
+  if (key === "user") return "User";
+  return raw;
+}
+function getVoicePillInitials(speaker) {
+  const key = getVoicePillSpeakerKey(speaker);
+  if (key === "ai") return "AI";
+  if (key === "user") return "U";
+  const initials = getVoicePillSpeakerLabel(speaker).split(/[\s_-]+/).map((part) => part.charAt(0)).filter(Boolean).join("").slice(0, 2).toUpperCase();
+  return initials.length > 0 ? initials : "V";
+}
+function getVoicePillPosition(position) {
+  return position ?? DEFAULT_VOICE_PILL_POSITION;
+}
+function getVoicePillAriaLabel(props) {
+  const parts = [`${getVoicePillSpeakerLabel(props.speaker)}: ${props.label}`];
+  if (props.sub) {
+    parts.push(props.sub);
+  }
+  if (props.muted) {
+    parts.push("muted");
+  }
+  return parts.join(", ");
+}
+function getVoicePillPulseStyle(intensity, muted = false) {
+  const clamped = clampVoicePillIntensity(intensity);
+  const visualIntensity = muted ? 0 : clamped;
+  const ringOpacity = visualIntensity === 0 ? 0 : 0.12 + visualIntensity * 0.42;
+  const ringScale = 1 + visualIntensity * 0.35;
+  const duration = visualIntensity === 0 ? 1800 : Math.round(1700 - visualIntensity * 700);
+  return {
+    "--rfr-voice-pill-intensity": formatNumber(clamped),
+    "--rfr-voice-pill-visual-intensity": formatNumber(visualIntensity),
+    "--rfr-voice-pill-ring-opacity": formatNumber(ringOpacity),
+    "--rfr-voice-pill-ring-scale": formatNumber(ringScale),
+    "--rfr-voice-pill-pulse-duration": `${duration}ms`,
+    "--rfr-voice-pill-pulse-delay": `-${Math.round(duration / 2)}ms`
+  };
+}
+function createVoicePill(props) {
+  const {
+    speaker: speakerProp,
+    label,
+    sub,
+    intensity: intensityProp,
+    muted: mutedProp = false,
+    onToggleMute,
+    position: positionProp
+  } = props;
+  const speaker = getVoicePillSpeakerLabel(speakerProp);
+  const speakerKey = getVoicePillSpeakerKey(speakerProp);
+  const intensity = clampVoicePillIntensity(intensityProp);
+  const muted = Boolean(mutedProp);
+  const visualIntensity = muted ? 0 : intensity;
+  const position = getVoicePillPosition(positionProp);
+  function toggleMute() {
+    onToggleMute?.();
+  }
+  const ariaProps = {
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": true,
+    "aria-label": getVoicePillAriaLabel({ speaker: speakerProp, label, sub, muted })
+  };
+  const toggleMuteAriaProps = {
+    "aria-label": muted ? "Unmute voice" : "Mute voice",
+    "aria-pressed": muted
+  };
+  const dataAttributes = {
+    "data-speaker": speakerKey,
+    "data-muted": String(muted),
+    "data-position": position,
+    "data-intensity": formatNumber(intensity),
+    "data-active": String(visualIntensity > 0)
+  };
+  return {
+    speaker,
+    speakerKey,
+    label,
+    sub,
+    intensity,
+    visualIntensity,
+    muted,
+    position,
+    initials: getVoicePillInitials(speakerProp),
+    toggleMute,
+    ariaProps,
+    toggleMuteAriaProps,
+    dataAttributes,
+    style: getVoicePillPulseStyle(intensity, muted)
+  };
+}
+var voicePillTokens = {
+  name: "voice-pill",
+  tokens: {
+    bg: { variable: "--rfr-voice-pill-bg", fallback: "hsl(var(--background))" },
+    fg: { variable: "--rfr-voice-pill-fg", fallback: "hsl(var(--foreground))" },
+    border: { variable: "--rfr-voice-pill-border", fallback: "hsl(var(--border))" },
+    accent: { variable: "--rfr-voice-pill-accent", fallback: "hsl(var(--primary))" },
+    accentFg: {
+      variable: "--rfr-voice-pill-accent-foreground",
+      fallback: "hsl(var(--primary-foreground))"
+    }
+  }
+};
+var voicePillRootStyles = "inline-flex min-w-0 max-w-[min(calc(100vw-2rem),22rem)] items-center gap-3 rounded-full border border-border bg-background px-3 py-2 text-foreground shadow-lg ring-1 ring-border/50 transition-opacity data-[muted=true]:opacity-80";
+var voicePillSpeakerStyles = "[--rfr-voice-pill-accent:hsl(var(--primary))] [--rfr-voice-pill-accent-foreground:hsl(var(--primary-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent:hsl(var(--accent-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent-foreground:hsl(var(--accent))] data-[muted=true]:[--rfr-voice-pill-accent:hsl(var(--muted-foreground))]";
+var voicePillPositionVariants = cva({
+  base: "fixed z-50",
+  variants: {
+    position: {
+      "top-start": "top-[calc(env(safe-area-inset-top)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]",
+      "top-center": "top-[calc(env(safe-area-inset-top)+1rem)] left-1/2 -translate-x-1/2",
+      "top-end": "top-[calc(env(safe-area-inset-top)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]",
+      "bottom-start": "bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]",
+      "bottom-center": "bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-1/2 -translate-x-1/2",
+      "bottom-end": "bottom-[calc(env(safe-area-inset-bottom)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]",
+      "left-start": "left-[calc(env(safe-area-inset-left)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]",
+      "left-center": "left-[calc(env(safe-area-inset-left)+1rem)] top-1/2 -translate-y-1/2",
+      "left-end": "left-[calc(env(safe-area-inset-left)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]",
+      "right-start": "right-[calc(env(safe-area-inset-right)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]",
+      "right-center": "right-[calc(env(safe-area-inset-right)+1rem)] top-1/2 -translate-y-1/2",
+      "right-end": "right-[calc(env(safe-area-inset-right)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]"
+    }
+  },
+  defaultVariants: {
+    position: "bottom-center"
+  }
+});
+var voicePillAvatarWrapStyles = "relative flex h-10 w-10 shrink-0 items-center justify-center";
+var voicePillPulseRingStyles = "pointer-events-none absolute inset-0 rounded-full border border-[var(--rfr-voice-pill-accent)] opacity-[var(--rfr-voice-pill-ring-opacity)] motion-safe:animate-ping motion-reduce:animate-none";
+var voicePillAvatarStyles = "relative z-10 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[var(--rfr-voice-pill-accent)] text-[var(--rfr-voice-pill-accent-foreground)] text-xs font-semibold uppercase";
+var voicePillTextStyles = "min-w-0 flex-1";
+var voicePillLabelStyles = "block truncate text-sm font-medium leading-tight";
+var voicePillSubStyles = "block truncate text-xs leading-tight text-muted-foreground";
+var voicePillMuteButtonStyles = "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+// ../react-voice-pill/dist/index.js
+var VoicePill = React11.forwardRef(
+  ({
+    speaker,
+    label,
+    sub,
+    intensity,
+    muted,
+    onToggleMute,
+    position,
+    avatar,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const api = createVoicePill({
+      speaker,
+      label,
+      sub,
+      intensity,
+      muted,
+      onToggleMute,
+      position
+    });
+    const mergedStyle = {
+      ...api.style,
+      ...style
+    };
+    const pulseStyle = {
+      animationDuration: "var(--rfr-voice-pill-pulse-duration)",
+      transform: "scale(var(--rfr-voice-pill-ring-scale))"
+    };
+    const delayedPulseStyle = {
+      ...pulseStyle,
+      animationDelay: "var(--rfr-voice-pill-pulse-delay)"
+    };
+    return React11.createElement(
+      "div",
+      {
+        ...props,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ref,
+        className: cn(
+          voicePillPositionVariants({ position: api.position }),
+          voicePillRootStyles,
+          voicePillSpeakerStyles,
+          className
+        ),
+        style: mergedStyle
+      },
+      React11.createElement(
+        "span",
+        {
+          className: voicePillAvatarWrapStyles,
+          "aria-hidden": true
+        },
+        api.visualIntensity > 0 && React11.createElement("span", {
+          className: voicePillPulseRingStyles,
+          style: pulseStyle
+        }),
+        api.visualIntensity > 0 && React11.createElement("span", {
+          className: voicePillPulseRingStyles,
+          style: delayedPulseStyle
+        }),
+        React11.createElement(
+          "span",
+          { className: voicePillAvatarStyles },
+          avatar ?? api.initials
+        )
+      ),
+      React11.createElement(
+        "span",
+        { className: voicePillTextStyles },
+        React11.createElement("span", { className: voicePillLabelStyles }, api.label),
+        api.sub && React11.createElement("span", { className: voicePillSubStyles }, api.sub)
+      ),
+      onToggleMute && React11.createElement(
+        "button",
+        {
+          type: "button",
+          className: voicePillMuteButtonStyles,
+          onClick: api.toggleMute,
+          ...api.toggleMuteAriaProps
+        },
+        renderMuteIcon(api.muted)
+      )
+    );
+  }
+);
+VoicePill.displayName = "VoicePill";
+function renderMuteIcon(muted) {
+  return React11.createElement(
+    "svg",
+    {
+      "aria-hidden": true,
+      className: "h-4 w-4",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      viewBox: "0 0 24 24"
+    },
+    React11.createElement("path", {
+      d: "M4 9v6h4l5 4V5L8 9H4Z"
+    }),
+    muted ? React11.createElement(
+      React11.Fragment,
+      null,
+      React11.createElement("path", { d: "m19 9-4 4" }),
+      React11.createElement("path", { d: "m15 9 4 4" })
+    ) : React11.createElement(
+      React11.Fragment,
+      null,
+      React11.createElement("path", { d: "M16 8.5a4 4 0 0 1 0 7" }),
+      React11.createElement("path", { d: "M18.5 6a7 7 0 0 1 0 12" })
+    )
+  );
+}
+
+// ../waveform/dist/index.js
+var DEFAULT_WAVEFORM_BAR_COUNT = 48;
+var DEFAULT_WAVEFORM_COLOR = "var(--accent-2)";
+var DEFAULT_WAVEFORM_HEIGHT = 80;
+var DEFAULT_WAVEFORM_INTENSITY = 1;
+var DEFAULT_WAVEFORM_SMOOTHING = 0.8;
+var MAX_BAR_COUNT = 1024;
+var MAX_INTENSITY = 1;
+function normalizeBarCount(value) {
+  if (value == null || !Number.isFinite(value)) return DEFAULT_WAVEFORM_BAR_COUNT;
+  return Math.min(MAX_BAR_COUNT, Math.max(1, Math.round(value)));
+}
+function normalizeSmoothing(value) {
+  if (value == null || !Number.isFinite(value)) return DEFAULT_WAVEFORM_SMOOTHING;
+  return Math.min(0.99, Math.max(0, value));
+}
+function normalizeIntensity(value) {
+  if (value == null || !Number.isFinite(value)) return DEFAULT_WAVEFORM_INTENSITY;
+  return Math.min(MAX_INTENSITY, Math.max(0, value));
+}
+function normalizeWaveformConfig(props = {}) {
+  return {
+    variant: props.variant ?? "bars",
+    intensity: normalizeIntensity(props.intensity),
+    height: props.height ?? DEFAULT_WAVEFORM_HEIGHT,
+    width: props.width ?? "100%",
+    barCount: normalizeBarCount(props.barCount),
+    smoothing: normalizeSmoothing(props.smoothing),
+    color: props.color ?? DEFAULT_WAVEFORM_COLOR,
+    paused: props.paused ?? false
+  };
+}
+function isWaveformSampleInput(value) {
+  return value instanceof Float32Array || Array.isArray(value);
+}
+function createSilentSamples(count = DEFAULT_WAVEFORM_BAR_COUNT) {
+  return new Float32Array(normalizeBarCount(count));
+}
+function createIntensitySamples(intensity = DEFAULT_WAVEFORM_INTENSITY, count = DEFAULT_WAVEFORM_BAR_COUNT) {
+  const normalizedIntensity = normalizeIntensity(intensity);
+  const normalizedCount = normalizeBarCount(count);
+  const samples = new Float32Array(normalizedCount);
+  if (normalizedIntensity === 0) return samples;
+  for (let i = 0; i < normalizedCount; i += 1) {
+    const progress = normalizedCount <= 1 ? 0.5 : i / (normalizedCount - 1);
+    const envelope = 0.35 + Math.sin(progress * Math.PI) * 0.65;
+    const carrier = Math.sin(progress * Math.PI * 6);
+    samples[i] = carrier * envelope * normalizedIntensity;
+  }
+  return samples;
+}
+function normalizeWaveformSamples(input, targetCount) {
+  const sourceLength = input?.length ?? 0;
+  if (sourceLength === 0) {
+    return targetCount == null ? new Float32Array() : createSilentSamples(targetCount);
+  }
+  const normalized = new Float32Array(sourceLength);
+  let maxAbs = 0;
+  for (let i = 0; i < sourceLength; i += 1) {
+    const value = Number(input?.[i]);
+    const sample = Number.isFinite(value) ? value : 0;
+    normalized[i] = sample;
+    maxAbs = Math.max(maxAbs, Math.abs(sample));
+  }
+  const divisor = maxAbs > 1 ? maxAbs : 1;
+  for (let i = 0; i < normalized.length; i += 1) {
+    normalized[i] = clamp(normalized[i] / divisor, -1, 1);
+  }
+  if (targetCount == null || targetCount === normalized.length) {
+    return normalized;
+  }
+  return resampleWaveformSamples(normalized, targetCount);
+}
+function resampleWaveformSamples(samples, targetCount) {
+  const count = normalizeBarCount(targetCount);
+  const sourceLength = samples.length;
+  if (sourceLength === 0) return createSilentSamples(count);
+  if (sourceLength === count) return Float32Array.from(samples);
+  const output = new Float32Array(count);
+  for (let i = 0; i < count; i += 1) {
+    const start = i * sourceLength / count;
+    const end = (i + 1) * sourceLength / count;
+    const firstIndex = Math.floor(start);
+    const lastIndex = Math.max(firstIndex + 1, Math.ceil(end));
+    let total = 0;
+    let values = 0;
+    for (let j = firstIndex; j < lastIndex && j < sourceLength; j += 1) {
+      total += Number(samples[j]);
+      values += 1;
+    }
+    output[i] = values > 0 ? total / values : Number(samples[Math.min(firstIndex, sourceLength - 1)]);
+  }
+  return output;
+}
+function smoothWaveformSamples(previous, next, smoothing = DEFAULT_WAVEFORM_SMOOTHING) {
+  if (previous == null || previous.length === 0) {
+    return Float32Array.from(next);
+  }
+  const amount = normalizeSmoothing(smoothing);
+  const output = new Float32Array(next.length);
+  for (let i = 0; i < next.length; i += 1) {
+    const previousValue = Number(previous[i] ?? next[i]);
+    output[i] = previousValue * amount + Number(next[i]) * (1 - amount);
+  }
+  return output;
+}
+function scaleWaveformSamples(samples, intensity = DEFAULT_WAVEFORM_INTENSITY) {
+  const amount = normalizeIntensity(intensity);
+  const output = new Float32Array(samples.length);
+  for (let i = 0; i < samples.length; i += 1) {
+    output[i] = clamp(Number(samples[i]) * amount, -1, 1);
+  }
+  return output;
+}
+function getWaveformPeak(samples) {
+  let peak = 0;
+  for (let i = 0; i < samples.length; i += 1) {
+    peak = Math.max(peak, Math.abs(Number(samples[i]) || 0));
+  }
+  return Math.min(1, peak);
+}
+function toCssDimension(value) {
+  if (value == null) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function createWaveform(props = {}) {
+  const config = normalizeWaveformConfig(props);
+  const inputSamples = props.samples ?? (isWaveformSampleInput(props.source) ? props.source : void 0);
+  const samples = inputSamples == null ? createIntensitySamples(config.intensity, config.barCount) : normalizeWaveformSamples(inputSamples, config.barCount);
+  return {
+    config,
+    samples,
+    ariaProps: {
+      role: "img",
+      "aria-label": "Audio waveform"
+    },
+    dataAttributes: {
+      "data-variant": config.variant,
+      "data-paused": String(config.paused)
+    },
+    getSamples(barCount = config.barCount) {
+      return inputSamples == null ? createIntensitySamples(config.intensity, barCount) : normalizeWaveformSamples(inputSamples, barCount);
+    }
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function prepareWaveformCanvas(canvas, size) {
+  const width = Math.max(1, Math.floor(size.width));
+  const height = Math.max(1, Math.floor(size.height));
+  const pixelRatio = Math.max(1, size.pixelRatio ?? 1);
+  const pixelWidth = Math.floor(width * pixelRatio);
+  const pixelHeight = Math.floor(height * pixelRatio);
+  if (canvas.width !== pixelWidth) {
+    canvas.width = pixelWidth;
+  }
+  if (canvas.height !== pixelHeight) {
+    canvas.height = pixelHeight;
+  }
+  const context = canvas.getContext("2d");
+  if (!context) return null;
+  context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+  return context;
+}
+function drawWaveform(context, samples, size, options = {}) {
+  const width = Math.max(1, Math.floor(size.width));
+  const height = Math.max(1, Math.floor(size.height));
+  const variant = options.variant ?? "bars";
+  const color = options.color ?? DEFAULT_WAVEFORM_COLOR;
+  const intensity = normalizeIntensity(options.intensity ?? DEFAULT_WAVEFORM_INTENSITY);
+  const barCount = normalizeBarCount(options.barCount);
+  context.clearRect(0, 0, width, height);
+  applyCanvasColor(context, color);
+  if (variant === "line") {
+    drawLine(context, samples, width, height, intensity);
+    return;
+  }
+  if (variant === "rings") {
+    drawRings(context, samples, width, height, intensity);
+    return;
+  }
+  drawBars(context, samples, width, height, intensity, barCount);
+}
+function drawBars(context, samples, width, height, intensity, barCount) {
+  const bars = scaleWaveformSamples(resampleWaveformSamples(samples, barCount), intensity);
+  const slotWidth = width / bars.length;
+  const barWidth = Math.max(1, slotWidth * 0.64);
+  const center = height / 2;
+  for (let i = 0; i < bars.length; i += 1) {
+    const value = Math.abs(bars[i]);
+    const barHeight = Math.max(value * height, value > 0 ? 1 : 0);
+    const x = i * slotWidth + (slotWidth - barWidth) / 2;
+    const y = center - barHeight / 2;
+    context.fillRect(x, y, barWidth, barHeight);
+  }
+}
+function drawLine(context, samples, width, height, intensity) {
+  const lineSamples = scaleWaveformSamples(samples, intensity);
+  const center = height / 2;
+  const amplitude = height * 0.45;
+  context.beginPath();
+  for (let i = 0; i < lineSamples.length; i += 1) {
+    const x = lineSamples.length <= 1 ? width / 2 : i / (lineSamples.length - 1) * width;
+    const y = center - Number(lineSamples[i]) * amplitude;
+    if (i === 0) {
+      context.moveTo(x, y);
+    } else {
+      context.lineTo(x, y);
+    }
+  }
+  context.lineWidth = Math.max(1.5, Math.min(width, height) * 0.025);
+  context.lineCap = "round";
+  context.lineJoin = "round";
+  context.stroke();
+}
+function drawRings(context, samples, width, height, intensity) {
+  const peak = getWaveformPeak(scaleWaveformSamples(samples, intensity));
+  const minDimension = Math.min(width, height);
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const ringCount = 3;
+  const baseRadius = minDimension * 0.16;
+  const radiusStep = minDimension * 0.13;
+  context.save();
+  context.lineWidth = Math.max(1.5, minDimension * 0.018);
+  for (let i = 0; i < ringCount; i += 1) {
+    const progress = (i + 1) / ringCount;
+    const pulse = peak * minDimension * 0.1 * progress;
+    const radius = baseRadius + radiusStep * i + pulse;
+    context.globalAlpha = 0.28 + progress * 0.34;
+    context.beginPath();
+    context.arc(centerX, centerY, radius, 0, Math.PI * 2);
+    context.stroke();
+  }
+  context.restore();
+}
+function applyCanvasColor(context, color) {
+  try {
+    context.fillStyle = color;
+    context.strokeStyle = color;
+  } catch {
+    context.fillStyle = "#000";
+    context.strokeStyle = "#000";
+  }
+}
+var waveformVariants = cva({
+  base: "relative block overflow-hidden",
+  variants: {
+    variant: {
+      bars: "",
+      line: "",
+      rings: ""
+    }
+  },
+  defaultVariants: {
+    variant: "bars"
+  }
+});
+var waveformCanvasVariants = cva({
+  base: "block h-full w-full"
+});
+var Waveform = React11.forwardRef(
+  ({
+    source,
+    samples,
+    intensity,
+    variant,
+    height,
+    width,
+    barCount,
+    smoothing,
+    color,
+    paused,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const rootRef = React11.useRef(null);
+    const canvasRef = React11.useRef(null);
+    const previousSamplesRef = React11.useRef(null);
+    const mediaAnalyserRef = React11.useRef(null);
+    const floatBufferRef = React11.useRef(null);
+    const byteBufferRef = React11.useRef(null);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const api = createWaveform({
+      source,
+      samples,
+      intensity,
+      variant,
+      height,
+      width,
+      barCount,
+      smoothing,
+      color,
+      paused
+    });
+    const rootStyle = React11.useMemo(
+      () => ({
+        ...style,
+        width: toCssDimension(width) ?? style?.width ?? "100%",
+        height: toCssDimension(height) ?? style?.height ?? `${api.config.height}px`,
+        "--waveform-color": api.config.color
+      }),
+      [api.config.color, api.config.height, height, style, width]
+    );
+    const setRootRef = React11.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    React11.useEffect(() => {
+      if (!isMediaStreamSource(source)) {
+        mediaAnalyserRef.current = null;
+        return;
+      }
+      if (typeof window === "undefined") return;
+      const AudioContextClass = window.AudioContext ?? window.webkitAudioContext;
+      if (!AudioContextClass) return;
+      const audioContext = new AudioContextClass();
+      const analyser = audioContext.createAnalyser();
+      const streamSource = audioContext.createMediaStreamSource(source);
+      analyser.smoothingTimeConstant = normalizeSmoothing(api.config.smoothing);
+      streamSource.connect(analyser);
+      mediaAnalyserRef.current = analyser;
+      return () => {
+        mediaAnalyserRef.current = null;
+        streamSource.disconnect();
+        analyser.disconnect();
+        if (audioContext.state !== "closed") {
+          void audioContext.close();
+        }
+      };
+    }, [api.config.smoothing, source]);
+    React11.useEffect(() => {
+      if (isAnalyserSource(source)) {
+        source.smoothingTimeConstant = normalizeSmoothing(api.config.smoothing);
+      }
+    }, [api.config.smoothing, source]);
+    React11.useEffect(() => {
+      const root = rootRef.current;
+      const canvas = canvasRef.current;
+      if (!root || !canvas) return;
+      let size = measureWaveform(root, api.config.width, api.config.height);
+      let frame = null;
+      let disposed = false;
+      const cancelFrame = () => {
+        if (frame == null) return;
+        if (typeof window.requestAnimationFrame === "function") {
+          window.cancelAnimationFrame(frame);
+        } else {
+          clearTimeout(frame);
+        }
+        frame = null;
+      };
+      const readSamples = () => {
+        if (samples != null) {
+          return normalizeWaveformSamples(samples, api.config.barCount);
+        }
+        if (isWaveformSampleInput(source)) {
+          return normalizeWaveformSamples(source, api.config.barCount);
+        }
+        const analyser = isAnalyserSource(source) ? source : mediaAnalyserRef.current;
+        if (analyser) {
+          return readAnalyserSamples(analyser, api.config.barCount, floatBufferRef, byteBufferRef);
+        }
+        return createIntensitySamples(api.config.intensity, api.config.barCount);
+      };
+      const draw = () => {
+        const context = prepareWaveformCanvas(canvas, {
+          ...size,
+          pixelRatio: window.devicePixelRatio || 1
+        });
+        if (!context) return;
+        const nextSamples = readSamples();
+        const renderedSamples = smoothWaveformSamples(
+          previousSamplesRef.current ?? void 0,
+          nextSamples,
+          api.config.smoothing
+        );
+        previousSamplesRef.current = renderedSamples;
+        drawWaveform(context, renderedSamples, size, {
+          variant: api.config.variant,
+          color: resolveCanvasColor(root, api.config.color),
+          intensity: api.config.intensity,
+          barCount: api.config.barCount
+        });
+      };
+      const schedule = () => {
+        if (disposed || api.config.paused || prefersReducedMotion) return;
+        if (typeof window.requestAnimationFrame === "function") {
+          frame = window.requestAnimationFrame(tick);
+        } else {
+          frame = window.setTimeout(() => tick(), 16);
+        }
+      };
+      const tick = () => {
+        draw();
+        schedule();
+      };
+      draw();
+      schedule();
+      const observer = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+        size = measureWaveform(root, api.config.width, api.config.height);
+        draw();
+      }) : null;
+      observer?.observe(root);
+      return () => {
+        disposed = true;
+        cancelFrame();
+        observer?.disconnect();
+      };
+    }, [
+      api.config.barCount,
+      api.config.color,
+      api.config.height,
+      api.config.intensity,
+      api.config.paused,
+      api.config.smoothing,
+      api.config.variant,
+      api.config.width,
+      prefersReducedMotion,
+      samples,
+      source
+    ]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRootRef,
+        className: cn(waveformVariants({ variant: api.config.variant }), className),
+        style: rootStyle,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: waveformCanvasVariants(),
+            "aria-hidden": "true",
+            "data-waveform-canvas": ""
+          }
+        )
+      }
+    );
+  }
+);
+Waveform.displayName = "Waveform";
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = React11.useState(false);
+  React11.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setPrefersReducedMotion(media.matches);
+    update();
+    media.addEventListener?.("change", update);
+    return () => {
+      media.removeEventListener?.("change", update);
+    };
+  }, []);
+  return prefersReducedMotion;
+}
+function readAnalyserSamples(analyser, barCount, floatBufferRef, byteBufferRef) {
+  if (typeof analyser.getFloatTimeDomainData === "function") {
+    const length2 = Math.max(1, analyser.fftSize || analyser.frequencyBinCount || barCount);
+    if (floatBufferRef.current?.length !== length2) {
+      floatBufferRef.current = new Float32Array(length2);
+    }
+    analyser.getFloatTimeDomainData(floatBufferRef.current);
+    return normalizeWaveformSamples(floatBufferRef.current, barCount);
+  }
+  const length = Math.max(1, analyser.frequencyBinCount || barCount);
+  if (byteBufferRef.current?.length !== length) {
+    byteBufferRef.current = new Uint8Array(length);
+  }
+  analyser.getByteFrequencyData(byteBufferRef.current);
+  return normalizeWaveformSamples(Array.from(byteBufferRef.current), barCount);
+}
+function measureWaveform(element, width, height) {
+  const rect = element.getBoundingClientRect();
+  const fallbackWidth = typeof width === "number" ? width : 300;
+  const fallbackHeight = typeof height === "number" ? height : 80;
+  return {
+    width: Math.max(1, Math.round(rect.width || element.clientWidth || fallbackWidth)),
+    height: Math.max(1, Math.round(rect.height || element.clientHeight || fallbackHeight))
+  };
+}
+function resolveCanvasColor(element, color) {
+  const variableMatch = color.match(/^var\((--[^),\s]+)(?:,[^)]+)?\)$/);
+  if (!variableMatch || typeof window.getComputedStyle !== "function") {
+    return color;
+  }
+  const value = window.getComputedStyle(element).getPropertyValue(variableMatch[1]).trim();
+  return value || color;
+}
+function isAnalyserSource(value) {
+  return value != null && typeof value.frequencyBinCount === "number" && (typeof value.getFloatTimeDomainData === "function" || typeof value.getByteFrequencyData === "function");
+}
+function isMediaStreamSource(value) {
+  return value != null && typeof value.getTracks === "function";
+}
+
 // ../progress-display/dist/index.js
 function createProgressDisplay(props) {
   const { stats, badges } = props;
@@ -8046,7 +8838,7 @@ function VersionSelector({
 VersionSelector.displayName = "VersionSelector";
 
 // ../resizable-layout/dist/index.js
-function clamp(value, min, max) {
+function clamp2(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function createResizableLayout(props = {}) {
@@ -8101,9 +8893,9 @@ function createResizableLayout(props = {}) {
     if (j >= sizes.length) return;
     const totalAvailable = sizesBeforeResize[i] + sizesBeforeResize[j];
     let newSizeI = sizesBeforeResize[i] + delta;
-    newSizeI = clamp(newSizeI, getMinSize(i), getMaxSize(i));
+    newSizeI = clamp2(newSizeI, getMinSize(i), getMaxSize(i));
     let newSizeJ = totalAvailable - newSizeI;
-    newSizeJ = clamp(newSizeJ, getMinSize(j), getMaxSize(j));
+    newSizeJ = clamp2(newSizeJ, getMinSize(j), getMaxSize(j));
     newSizeI = totalAvailable - newSizeJ;
     sizes[i] = newSizeI;
     sizes[j] = newSizeJ;
@@ -12819,6 +13611,6 @@ var PaymentButton = React11.forwardRef(
 );
 PaymentButton.displayName = "PaymentButton";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AltHintState, AnimatedText, AppShell, AuthGuard, AuthProvider, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, BadgeDisplay, BottomNav, Breadcrumbs, Button, CATEGORY_LABELS, Calendar, CalendarHeader, Callout, CalloutContent, CalloutDescription, CalloutIcon, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselTrigger, Checkbox, CodeBlock, CodeBlockContent, CodeBlockHeader, CodeEditor, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, ContentProtection, DataTable, DatePicker, DeviceFrame, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EMOJI_CATEGORIES, EMOJI_DATA, EmojiPicker, FeedbackButton, FeedbackDialog, FileTree, FileUpload, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, IconSystem, InlineEditor, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InstallPrompt, KeyboardShortcut, LanguageSelector, LinkCard, MarkdownRenderer, MobileNav, MobileNavContent, MobileNavLink, MobileNavTrigger, Navbar, OtpInput, STATUS_COLORS as PRESENCE_STATUS_COLORS, STATUS_LABELS as PRESENCE_STATUS_LABELS, Pagination, Payment, Popover, PopoverClose, PopoverContent, PopoverTrigger, PresenceIndicator, ProgressBar, RadioGroup, RadioItem, ReactionBar, ResizableDivider, ResizableLayout, ResizablePane, SANE_DEFAULTS, STATUS_INDICATOR_COLORS as STATUS_COLORS, STATUS_INDICATOR_LABELS as STATUS_LABELS, SearchBar, SearchResultItem, SearchResults, Select, SelectContent, SelectItem, SelectTrigger, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger, ShortcutBadge, ShortcutContext, ShortcutHint, ShortcutProvider, ShortcutRegistry, Sidebar, Skeleton, SkeletonText, SkipToContent, SlideViewer, Slot, StatsGrid, StatusIndicator, Step, StepContent, StepDescription, StepIndicator, StepTitle, Steps, Switch, TableOfContents, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThreadView, Toast, ToastProvider, Toaster, Tooltip, TooltipContent, TooltipTrigger, TypewriterText, VersionSelector, VideoPlayer, altHintState, animatedTextVariants, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, badgeGridVariants, badgeItemVariants, badgeVariants, bottomNavTabVariants, bottomNavVariants, breadcrumbItemVariants, breadcrumbSeparatorStyles, breadcrumbsVariants, buttonTokens, buttonVariants, calendarVariants, canAccessAdmin, canAccessReviewer, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, cellVariants, checkIconPath, checkboxTokens, checkboxVariants, codeEditorTokens, codeEditorVariants, collapsibleContentVariants, comboboxContentVariants, comboboxEmptyVariants, comboboxInputVariants, comboboxItemVariants, comboboxListVariants, comboboxTriggerVariants, commandGroupVariants, commandInputVariants, commandItemVariants, commandVariants, contentProtectionVariants, controlsVariants, dayVariants, deviceFrameVariants, dialogContentVariants, editorVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, feedbackDialogVariants, fileUploadDropZoneVariants, fileUploadFileItemStyles, fileUploadFileListStyles, footerVariants, formItemVariants, formLabelVariants, formatFileSize, formatRelativeTime, formatShortcut, formatTimestamp, getAssignableRoles, getDefaultPortal, getInitials, globalShortcutRegistry, hasAllRoles, hasAnyRole, hasRole, headerVariants, indeterminateIconPath, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupTokens, inputGroupVariants, inputVariants, installPromptVariants, latestBadgeVariants, markdownRendererTokens, menuContentVariants, menuItemVariants, mobileNavContentVariants, mobileNavLinkVariants, mobileNavTokens, mobileNavTriggerVariants, mobileNavVariants, navLinkVariants, navbarVariants, optionVariants, otpInputContainerVariants, otpInputSlotVariants, otpInputTokens, overlayStyles, overlayVariants, playerVariants, popoverContentVariants, previewVariants, progressBarVariants, proseVariants, radioCircleVariants, radioGroupVariants, radioItemVariants, reactionAddButtonStyles, reactionBarStyles, reactionCountStyles, reactionEmojiStyles, reactionPillVariants, resizableDividerVariants, resizableLayoutTokens, resizableLayoutVariants, resizablePaneVariants, rowVariants, searchBarVariants, searchResultVariants, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants, selectorVariants, sheetContentVariants, sheetOverlayStyles, shortcutBadgeStyles, shortcutKeyStyles, shortcutSeparatorStyles, sidebarItemVariants, sidebarVariants, skeletonVariants, slideTypeBadgeVariants, slideViewerProgressBarVariants, slideViewerTokens, slideViewerVariants, statCardVariants, statsGridVariants, statusContainerStyles, statusDotVariants, statusLabelStyles, statusPulseVariants, switchThumbVariants, switchTokens, switchVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, threadAuthorStyles, threadAvatarStyles, threadBodyStyles, threadContainerStyles, threadContentStyles, threadMessageStyles, threadReactionsStyles, threadTimestampStyles, toastVariants, toolbarVariants, tooltipContentVariants, typewriterVariants, useAuth, useFormField, useShortcut, useToast, versionSelectorOptionVariants, versionSelectorVariants, watermarkVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AltHintState, AnimatedText, AppShell, AuthGuard, AuthProvider, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, BadgeDisplay, BottomNav, Breadcrumbs, Button, CATEGORY_LABELS, Calendar, CalendarHeader, Callout, CalloutContent, CalloutDescription, CalloutIcon, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselTrigger, Checkbox, CodeBlock, CodeBlockContent, CodeBlockHeader, CodeEditor, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, ContentProtection, DEFAULT_VOICE_PILL_POSITION, DEFAULT_VOICE_PILL_SPEAKER, DEFAULT_WAVEFORM_BAR_COUNT, DEFAULT_WAVEFORM_COLOR, DEFAULT_WAVEFORM_HEIGHT, DEFAULT_WAVEFORM_INTENSITY, DEFAULT_WAVEFORM_SMOOTHING, DataTable, DatePicker, DeviceFrame, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EMOJI_CATEGORIES, EMOJI_DATA, EmojiPicker, FeedbackButton, FeedbackDialog, FileTree, FileUpload, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, IconSystem, InlineEditor, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InstallPrompt, KeyboardShortcut, LanguageSelector, LinkCard, MarkdownRenderer, MobileNav, MobileNavContent, MobileNavLink, MobileNavTrigger, Navbar, OtpInput, STATUS_COLORS as PRESENCE_STATUS_COLORS, STATUS_LABELS as PRESENCE_STATUS_LABELS, Pagination, Payment, Popover, PopoverClose, PopoverContent, PopoverTrigger, PresenceIndicator, ProgressBar, RadioGroup, RadioItem, ReactionBar, ResizableDivider, ResizableLayout, ResizablePane, SANE_DEFAULTS, STATUS_INDICATOR_COLORS as STATUS_COLORS, STATUS_INDICATOR_LABELS as STATUS_LABELS, SearchBar, SearchResultItem, SearchResults, Select, SelectContent, SelectItem, SelectTrigger, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger, ShortcutBadge, ShortcutContext, ShortcutHint, ShortcutProvider, ShortcutRegistry, Sidebar, Skeleton, SkeletonText, SkipToContent, SlideViewer, Slot, StatsGrid, StatusIndicator, Step, StepContent, StepDescription, StepIndicator, StepTitle, Steps, Switch, TableOfContents, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThreadView, Toast, ToastProvider, Toaster, Tooltip, TooltipContent, TooltipTrigger, TypewriterText, VersionSelector, VideoPlayer, VoicePill, Waveform, altHintState, animatedTextVariants, avatarFallbackVariants, avatarImageVariants, avatarTokens, avatarVariants, badgeGridVariants, badgeItemVariants, badgeVariants, bottomNavTabVariants, bottomNavVariants, breadcrumbItemVariants, breadcrumbSeparatorStyles, breadcrumbsVariants, buttonTokens, buttonVariants, calendarVariants, canAccessAdmin, canAccessReviewer, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardTokens, cardVariants, cellVariants, checkIconPath, checkboxTokens, checkboxVariants, clampVoicePillIntensity, codeEditorTokens, codeEditorVariants, collapsibleContentVariants, comboboxContentVariants, comboboxEmptyVariants, comboboxInputVariants, comboboxItemVariants, comboboxListVariants, comboboxTriggerVariants, commandGroupVariants, commandInputVariants, commandItemVariants, commandVariants, contentProtectionVariants, controlsVariants, createIntensitySamples, createSilentSamples, createVoicePill, createWaveform, dayVariants, deviceFrameVariants, dialogContentVariants, drawWaveform, editorVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, feedbackDialogVariants, fileUploadDropZoneVariants, fileUploadFileItemStyles, fileUploadFileListStyles, footerVariants, formItemVariants, formLabelVariants, formatFileSize, formatRelativeTime, formatShortcut, formatTimestamp, getAssignableRoles, getDefaultPortal, getInitials, getVoicePillAriaLabel, getVoicePillInitials, getVoicePillPosition, getVoicePillPulseStyle, getVoicePillSpeakerKey, getVoicePillSpeakerLabel, getWaveformPeak, globalShortcutRegistry, hasAllRoles, hasAnyRole, hasRole, headerVariants, indeterminateIconPath, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupTokens, inputGroupVariants, inputVariants, installPromptVariants, isWaveformSampleInput, latestBadgeVariants, markdownRendererTokens, menuContentVariants, menuItemVariants, mobileNavContentVariants, mobileNavLinkVariants, mobileNavTokens, mobileNavTriggerVariants, mobileNavVariants, navLinkVariants, navbarVariants, normalizeBarCount, normalizeIntensity, normalizeSmoothing, normalizeWaveformConfig, normalizeWaveformSamples, optionVariants, otpInputContainerVariants, otpInputSlotVariants, otpInputTokens, overlayStyles, overlayVariants, playerVariants, popoverContentVariants, prepareWaveformCanvas, previewVariants, progressBarVariants, proseVariants, radioCircleVariants, radioGroupVariants, radioItemVariants, reactionAddButtonStyles, reactionBarStyles, reactionCountStyles, reactionEmojiStyles, reactionPillVariants, resampleWaveformSamples, resizableDividerVariants, resizableLayoutTokens, resizableLayoutVariants, resizablePaneVariants, rowVariants, scaleWaveformSamples, searchBarVariants, searchResultVariants, selectContentVariants, selectItemVariants, selectTokens, selectTriggerVariants, selectorVariants, sheetContentVariants, sheetOverlayStyles, shortcutBadgeStyles, shortcutKeyStyles, shortcutSeparatorStyles, sidebarItemVariants, sidebarVariants, skeletonVariants, slideTypeBadgeVariants, slideViewerProgressBarVariants, slideViewerTokens, slideViewerVariants, smoothWaveformSamples, statCardVariants, statsGridVariants, statusContainerStyles, statusDotVariants, statusLabelStyles, statusPulseVariants, switchThumbVariants, switchTokens, switchVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, threadAuthorStyles, threadAvatarStyles, threadBodyStyles, threadContainerStyles, threadContentStyles, threadMessageStyles, threadReactionsStyles, threadTimestampStyles, toCssDimension, toastVariants, toolbarVariants, tooltipContentVariants, typewriterVariants, useAuth, useFormField, useShortcut, useToast, versionSelectorOptionVariants, versionSelectorVariants, voicePillAvatarStyles, voicePillAvatarWrapStyles, voicePillLabelStyles, voicePillMuteButtonStyles, voicePillPositionVariants, voicePillPulseRingStyles, voicePillRootStyles, voicePillSpeakerStyles, voicePillSubStyles, voicePillTextStyles, voicePillTokens, watermarkVariants, waveformCanvasVariants, waveformVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map