@refraction-ui/astro 0.5.0 → 0.5.1

package/dist/astro-waveform/Waveform.astro

@@ -12,6 +12,7 @@ import { cn } from '../shared/index.ts'
 interface Props extends Omit<astroHTML.JSX.HTMLAttributes, 'color' | 'height' | 'width'> {
   samples?: WaveformSampleInput
   intensity?: number
+  amplitude?: number
   variant?: WaveformVariant
   height?: number | string
   width?: number | string
@@ -24,6 +25,7 @@ interface Props extends Omit<astroHTML.JSX.HTMLAttributes, 'color' | 'height' |
 const {
   samples,
   intensity,
+  amplitude,
   variant,
   height,
   width,
@@ -39,6 +41,7 @@ const {
 const api = createWaveform({
   samples,
   intensity,
+  amplitude,
   variant,
   height,
   width,
@@ -65,6 +68,7 @@ const waveformData = {
   samples: Array.from(api.samples),
   variant: api.config.variant,
   intensity: api.config.intensity,
+  amplitude: api.config.amplitude,
   barCount: api.config.barCount,
   color: api.config.color,
 }
@@ -139,10 +143,11 @@ function toKebabCase(value: string): string {
     })
   }
 
-  const scaleSamples = (samples, intensity) => {
+  const scaleSamples = (samples, intensity, amplitude) => {
     const amount = Math.max(0, Math.min(1, Number(intensity) || 0))
+    const visualHeight = Math.max(0, Math.min(1, Number(amplitude) || 0))
 
-    return samples.map((sample) => Math.max(-1, Math.min(1, sample * amount)))
+    return samples.map((sample) => Math.max(-1, Math.min(1, sample * amount * visualHeight)))
   }
 
   const resolveColor = (element, color) => {
@@ -248,6 +253,7 @@ function toKebabCase(value: string): string {
     const samples = scaleSamples(
       normalizeSamples(config.samples, config.barCount),
       config.intensity,
+      config.amplitude,
     )
     const color = resolveColor(canvas.parentElement || canvas, config.color || 'currentColor')
 

package/dist/voice-pill/voice-pill.styles.ts

@@ -22,33 +22,34 @@ export const 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))]'
 
 export const voicePillPositionVariants = cva({
-  base: 'fixed z-50',
+  base: 'z-50',
   variants: {
     position: {
+      inline: 'relative',
       'top-start':
-        'top-[calc(env(safe-area-inset-top)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]',
+        'fixed 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',
+        'fixed 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)]',
+        'fixed 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)]',
+        'fixed 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',
+        'fixed 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)]',
+        'fixed 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)]',
+        'fixed 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',
+        'fixed 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)]',
+        'fixed 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)]',
+        'fixed 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',
+        'fixed 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)]',
+        'fixed right-[calc(env(safe-area-inset-right)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]',
     },
   },
   defaultVariants: {

package/dist/voice-pill/voice-pill.ts

@@ -3,6 +3,7 @@ import type { AccessibilityProps } from '../shared/index.ts'
 export type VoicePillSpeaker = 'ai' | 'user' | (string & {})
 
 export type VoicePillPosition =
+  | 'inline'
   | 'top-start'
   | 'top-center'
   | 'top-end'
@@ -29,7 +30,7 @@ export interface VoicePillProps {
   muted?: boolean
   /** Callback for the optional mute toggle */
   onToggleMute?: () => void
-  /** Fixed viewport position */
+  /** Viewport position, or inline for embedding inside another layout */
   position?: VoicePillPosition
 }
 
@@ -52,7 +53,7 @@ export interface VoicePillAPI {
   visualIntensity: number
   /** Muted state */
   muted: boolean
-  /** Fixed viewport position */
+  /** Viewport position, or inline for embedding inside another layout */
   position: VoicePillPosition
   /** Fallback initials for the speaker avatar */
   initials: string

package/dist/waveform/waveform-renderer.ts

@@ -1,7 +1,9 @@
 import {
   DEFAULT_WAVEFORM_COLOR,
+  DEFAULT_WAVEFORM_AMPLITUDE,
   DEFAULT_WAVEFORM_INTENSITY,
   getWaveformPeak,
+  normalizeAmplitude,
   normalizeBarCount,
   normalizeIntensity,
   resampleWaveformSamples,
@@ -20,6 +22,7 @@ export interface WaveformRenderOptions {
   variant?: WaveformVariant
   color?: string
   intensity?: number
+  amplitude?: number
   barCount?: number
 }
 
@@ -60,22 +63,23 @@ export function drawWaveform(
   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(
@@ -84,6 +88,7 @@ function drawBars(
   width: number,
   height: number,
   intensity: number,
+  amplitude: number,
   barCount: number,
 ) {
   const bars = scaleWaveformSamples(resampleWaveformSamples(samples, barCount), intensity)
@@ -93,7 +98,7 @@ function drawBars(
 
   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
 
@@ -107,10 +112,11 @@ function drawLine(
   width: number,
   height: number,
   intensity: number,
+  amplitudeScale: number,
 ) {
   const lineSamples = scaleWaveformSamples(samples, intensity)
   const center = height / 2
-  const amplitude = height * 0.45
+  const amplitude = height * 0.45 * amplitudeScale
 
   context.beginPath()
 
@@ -137,8 +143,9 @@ function drawRings(
   width: number,
   height: number,
   intensity: number,
+  amplitude: number,
 ) {
-  const peak = getWaveformPeak(scaleWaveformSamples(samples, intensity))
+  const peak = getWaveformPeak(scaleWaveformSamples(samples, intensity)) * amplitude
   const minDimension = Math.min(width, height)
   const centerX = width / 2
   const centerY = height / 2

package/dist/waveform/waveform.ts

@@ -8,6 +8,7 @@ export interface WaveformProps {
   source?: WaveformSource
   samples?: WaveformSampleInput
   intensity?: number
+  amplitude?: number
   variant?: WaveformVariant
   height?: number | string
   width?: number | string
@@ -20,6 +21,7 @@ export interface WaveformProps {
 export interface NormalizedWaveformConfig {
   variant: WaveformVariant
   intensity: number
+  amplitude: number
   height: number | string
   width: number | string
   barCount: number
@@ -40,6 +42,7 @@ export const DEFAULT_WAVEFORM_BAR_COUNT = 48
 export const DEFAULT_WAVEFORM_COLOR = 'var(--accent-2)'
 export const DEFAULT_WAVEFORM_HEIGHT = 80
 export const DEFAULT_WAVEFORM_INTENSITY = 1
+export const DEFAULT_WAVEFORM_AMPLITUDE = 1
 export const DEFAULT_WAVEFORM_SMOOTHING = 0.8
 
 const MAX_BAR_COUNT = 1024
@@ -63,10 +66,17 @@ export function normalizeIntensity(value: number | undefined): number {
   return Math.min(MAX_INTENSITY, Math.max(0, value))
 }
 
+export function normalizeAmplitude(value: number | undefined): number {
+  if (value == null || !Number.isFinite(value)) return DEFAULT_WAVEFORM_AMPLITUDE
+
+  return Math.min(1, Math.max(0, value))
+}
+
 export function normalizeWaveformConfig(props: WaveformProps = {}): NormalizedWaveformConfig {
   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),
@@ -87,6 +97,7 @@ export function createSilentSamples(count = DEFAULT_WAVEFORM_BAR_COUNT): Float32
 export function createIntensitySamples(
   intensity = DEFAULT_WAVEFORM_INTENSITY,
   count = DEFAULT_WAVEFORM_BAR_COUNT,
+  phase = 0,
 ): Float32Array {
   const normalizedIntensity = normalizeIntensity(intensity)
   const normalizedCount = normalizeBarCount(count)
@@ -94,11 +105,13 @@ export function createIntensitySamples(
 
   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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {