@refraction-ui/react 0.4.1 → 0.4.2

package/dist/index.js

@@ -7225,21 +7225,22 @@ var voicePillTokens = {
 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",
+  base: "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)]"
+      inline: "relative",
+      "top-start": "fixed top-[calc(env(safe-area-inset-top)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]",
+      "top-center": "fixed top-[calc(env(safe-area-inset-top)+1rem)] left-1/2 -translate-x-1/2",
+      "top-end": "fixed top-[calc(env(safe-area-inset-top)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]",
+      "bottom-start": "fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]",
+      "bottom-center": "fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-1/2 -translate-x-1/2",
+      "bottom-end": "fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]",
+      "left-start": "fixed left-[calc(env(safe-area-inset-left)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]",
+      "left-center": "fixed left-[calc(env(safe-area-inset-left)+1rem)] top-1/2 -translate-y-1/2",
+      "left-end": "fixed left-[calc(env(safe-area-inset-left)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]",
+      "right-start": "fixed right-[calc(env(safe-area-inset-right)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]",
+      "right-center": "fixed right-[calc(env(safe-area-inset-right)+1rem)] top-1/2 -translate-y-1/2",
+      "right-end": "fixed right-[calc(env(safe-area-inset-right)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]"
     }
   },
   defaultVariants: {
@@ -7380,6 +7381,7 @@ 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_AMPLITUDE = 1;
 var DEFAULT_WAVEFORM_SMOOTHING = 0.8;
 var MAX_BAR_COUNT = 1024;
 var MAX_INTENSITY = 1;
@@ -7395,10 +7397,15 @@ function normalizeIntensity(value) {
   if (value == null || !Number.isFinite(value)) return DEFAULT_WAVEFORM_INTENSITY;
   return Math.min(MAX_INTENSITY, Math.max(0, value));
 }
+function normalizeAmplitude(value) {
+  if (value == null || !Number.isFinite(value)) return DEFAULT_WAVEFORM_AMPLITUDE;
+  return Math.min(1, Math.max(0, value));
+}
 function normalizeWaveformConfig(props = {}) {
   return {
     variant: props.variant ?? "bars",
     intensity: normalizeIntensity(props.intensity),
+    amplitude: normalizeAmplitude(props.amplitude),
     height: props.height ?? DEFAULT_WAVEFORM_HEIGHT,
     width: props.width ?? "100%",
     barCount: normalizeBarCount(props.barCount),
@@ -7413,16 +7420,17 @@ function isWaveformSampleInput(value) {
 function createSilentSamples(count = DEFAULT_WAVEFORM_BAR_COUNT) {
   return new Float32Array(normalizeBarCount(count));
 }
-function createIntensitySamples(intensity = DEFAULT_WAVEFORM_INTENSITY, count = DEFAULT_WAVEFORM_BAR_COUNT) {
+function createIntensitySamples(intensity = DEFAULT_WAVEFORM_INTENSITY, count = DEFAULT_WAVEFORM_BAR_COUNT, phase = 0) {
   const normalizedIntensity = normalizeIntensity(intensity);
   const normalizedCount = normalizeBarCount(count);
   const samples = new Float32Array(normalizedCount);
   if (normalizedIntensity === 0) return samples;
+  const pulse = 0.72 + Math.sin(phase * 1.8) * 0.18;
   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;
+    const carrier = Math.sin(progress * Math.PI * 6 + phase * 2.8);
+    samples[i] = carrier * envelope * normalizedIntensity * pulse;
   }
   return samples;
 }
@@ -7546,36 +7554,37 @@ function drawWaveform(context, samples, size, options = {}) {
   const variant = options.variant ?? "bars";
   const color = options.color ?? DEFAULT_WAVEFORM_COLOR;
   const intensity = normalizeIntensity(options.intensity ?? DEFAULT_WAVEFORM_INTENSITY);
+  const amplitude = normalizeAmplitude(options.amplitude ?? DEFAULT_WAVEFORM_AMPLITUDE);
   const barCount = normalizeBarCount(options.barCount);
   context.clearRect(0, 0, width, height);
   applyCanvasColor(context, color);
   if (variant === "line") {
-    drawLine(context, samples, width, height, intensity);
+    drawLine(context, samples, width, height, intensity, amplitude);
     return;
   }
   if (variant === "rings") {
-    drawRings(context, samples, width, height, intensity);
+    drawRings(context, samples, width, height, intensity, amplitude);
     return;
   }
-  drawBars(context, samples, width, height, intensity, barCount);
+  drawBars(context, samples, width, height, intensity, amplitude, barCount);
 }
-function drawBars(context, samples, width, height, intensity, barCount) {
+function drawBars(context, samples, width, height, intensity, amplitude, 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 barHeight = Math.max(value * height * amplitude, 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) {
+function drawLine(context, samples, width, height, intensity, amplitudeScale) {
   const lineSamples = scaleWaveformSamples(samples, intensity);
   const center = height / 2;
-  const amplitude = height * 0.45;
+  const amplitude = height * 0.45 * amplitudeScale;
   context.beginPath();
   for (let i = 0; i < lineSamples.length; i += 1) {
     const x = lineSamples.length <= 1 ? width / 2 : i / (lineSamples.length - 1) * width;
@@ -7591,8 +7600,8 @@ function drawLine(context, samples, width, height, intensity) {
   context.lineJoin = "round";
   context.stroke();
 }
-function drawRings(context, samples, width, height, intensity) {
-  const peak = getWaveformPeak(scaleWaveformSamples(samples, intensity));
+function drawRings(context, samples, width, height, intensity, amplitude) {
+  const peak = getWaveformPeak(scaleWaveformSamples(samples, intensity)) * amplitude;
   const minDimension = Math.min(width, height);
   const centerX = width / 2;
   const centerY = height / 2;
@@ -7642,6 +7651,7 @@ var Waveform = React11.forwardRef(
     source,
     samples,
     intensity,
+    amplitude,
     variant,
     height,
     width,
@@ -7664,6 +7674,7 @@ var Waveform = React11.forwardRef(
       source,
       samples,
       intensity,
+      amplitude,
       variant,
       height,
       width,
@@ -7736,7 +7747,7 @@ var Waveform = React11.forwardRef(
         }
         frame = null;
       };
-      const readSamples = () => {
+      const readSamples = (phase = 0) => {
         if (samples != null) {
           return normalizeWaveformSamples(samples, api.config.barCount);
         }
@@ -7747,15 +7758,15 @@ var Waveform = React11.forwardRef(
         if (analyser) {
           return readAnalyserSamples(analyser, api.config.barCount, floatBufferRef, byteBufferRef);
         }
-        return createIntensitySamples(api.config.intensity, api.config.barCount);
+        return createIntensitySamples(api.config.intensity, api.config.barCount, phase);
       };
-      const draw = () => {
+      const draw = (time = typeof performance === "undefined" ? 0 : performance.now()) => {
         const context = prepareWaveformCanvas(canvas, {
           ...size,
           pixelRatio: window.devicePixelRatio || 1
         });
         if (!context) return;
-        const nextSamples = readSamples();
+        const nextSamples = readSamples(time / 1e3);
         const renderedSamples = smoothWaveformSamples(
           previousSamplesRef.current ?? void 0,
           nextSamples,
@@ -7766,6 +7777,7 @@ var Waveform = React11.forwardRef(
           variant: api.config.variant,
           color: resolveCanvasColor(root, api.config.color),
           intensity: api.config.intensity,
+          amplitude: api.config.amplitude,
           barCount: api.config.barCount
         });
       };
@@ -7774,11 +7786,11 @@ var Waveform = React11.forwardRef(
         if (typeof window.requestAnimationFrame === "function") {
           frame = window.requestAnimationFrame(tick);
         } else {
-          frame = window.setTimeout(() => tick(), 16);
+          frame = window.setTimeout(() => tick(performance.now()), 16);
         }
       };
-      const tick = () => {
-        draw();
+      const tick = (time) => {
+        draw(time);
         schedule();
       };
       draw();
@@ -7798,6 +7810,7 @@ var Waveform = React11.forwardRef(
       api.config.color,
       api.config.height,
       api.config.intensity,
+      api.config.amplitude,
       api.config.paused,
       api.config.smoothing,
       api.config.variant,