@refraction-ui/astro 0.4.13 → 0.5.1

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

@@ -0,0 +1,235 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type VoicePillSpeaker = 'ai' | 'user' | (string & {})
+
+export type VoicePillPosition =
+  | 'inline'
+  | 'top-start'
+  | 'top-center'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-center'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-center'
+  | 'left-end'
+  | 'right-start'
+  | 'right-center'
+  | 'right-end'
+
+export interface VoicePillProps {
+  /** Speaker identity used for labels and data-speaker theming */
+  speaker?: VoicePillSpeaker
+  /** Primary voice status text */
+  label: string
+  /** Optional secondary status text */
+  sub?: string
+  /** Voice activity intensity, clamped from 0 to 1 */
+  intensity?: number
+  /** Whether voice output/input is muted */
+  muted?: boolean
+  /** Callback for the optional mute toggle */
+  onToggleMute?: () => void
+  /** Viewport position, or inline for embedding inside another layout */
+  position?: VoicePillPosition
+}
+
+export interface VoicePillStyleVars {
+  [key: `--${string}`]: string
+}
+
+export interface VoicePillAPI {
+  /** Display speaker label */
+  speaker: string
+  /** Normalized key for data-speaker */
+  speakerKey: string
+  /** Primary label */
+  label: string
+  /** Secondary label */
+  sub?: string
+  /** Clamped raw intensity */
+  intensity: number
+  /** Intensity used for visual animation after muted state is applied */
+  visualIntensity: number
+  /** Muted state */
+  muted: boolean
+  /** Viewport position, or inline for embedding inside another layout */
+  position: VoicePillPosition
+  /** Fallback initials for the speaker avatar */
+  initials: string
+  /** Invoke the mute callback when provided */
+  toggleMute(): void
+  /** ARIA props for the live status pill */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** ARIA props for the mute toggle */
+  toggleMuteAriaProps: Record<string, unknown>
+  /** Data attributes reflecting speaker/state */
+  dataAttributes: Record<string, string>
+  /** CSS custom properties that drive pulse visuals */
+  style: VoicePillStyleVars
+}
+
+export const DEFAULT_VOICE_PILL_SPEAKER = 'ai'
+export const DEFAULT_VOICE_PILL_POSITION: VoicePillPosition = 'bottom-center'
+
+function formatNumber(value: number): string {
+  return Number(value.toFixed(3)).toString()
+}
+
+function getRawSpeaker(speaker?: VoicePillSpeaker): string {
+  const value = String(speaker ?? DEFAULT_VOICE_PILL_SPEAKER).trim()
+  return value.length > 0 ? value : DEFAULT_VOICE_PILL_SPEAKER
+}
+
+export function clampVoicePillIntensity(intensity = 0): number {
+  const value = Number(intensity)
+
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  return Math.min(1, Math.max(0, value))
+}
+
+export function getVoicePillSpeakerKey(speaker?: VoicePillSpeaker): string {
+  const normalized = getRawSpeaker(speaker)
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+
+  return normalized.length > 0 ? normalized : DEFAULT_VOICE_PILL_SPEAKER
+}
+
+export function getVoicePillSpeakerLabel(speaker?: VoicePillSpeaker): string {
+  const raw = getRawSpeaker(speaker)
+  const key = getVoicePillSpeakerKey(raw)
+
+  if (key === 'ai') return 'AI'
+  if (key === 'user') return 'User'
+
+  return raw
+}
+
+export function getVoicePillInitials(speaker?: VoicePillSpeaker): string {
+  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'
+}
+
+export function getVoicePillPosition(
+  position?: VoicePillPosition,
+): VoicePillPosition {
+  return position ?? DEFAULT_VOICE_PILL_POSITION
+}
+
+export function getVoicePillAriaLabel(props: {
+  speaker?: VoicePillSpeaker
+  label: string
+  sub?: string
+  muted?: boolean
+}): string {
+  const parts = [`${getVoicePillSpeakerLabel(props.speaker)}: ${props.label}`]
+
+  if (props.sub) {
+    parts.push(props.sub)
+  }
+
+  if (props.muted) {
+    parts.push('muted')
+  }
+
+  return parts.join(', ')
+}
+
+export function getVoicePillPulseStyle(
+  intensity?: number,
+  muted = false,
+): VoicePillStyleVars {
+  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`,
+  }
+}
+
+export function createVoicePill(props: VoicePillProps): VoicePillAPI {
+  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(): void {
+    onToggleMute?.()
+  }
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'status',
+    'aria-live': 'polite',
+    'aria-atomic': true,
+    'aria-label': getVoicePillAriaLabel({ speaker: speakerProp, label, sub, muted }),
+  }
+
+  const toggleMuteAriaProps: Record<string, unknown> = {
+    'aria-label': muted ? 'Unmute voice' : 'Mute voice',
+    'aria-pressed': muted,
+  }
+
+  const dataAttributes: Record<string, string> = {
+    '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),
+  }
+}

package/dist/waveform/index.ts

@@ -0,0 +1,39 @@
+export {
+  DEFAULT_WAVEFORM_BAR_COUNT,
+  DEFAULT_WAVEFORM_COLOR,
+  DEFAULT_WAVEFORM_HEIGHT,
+  DEFAULT_WAVEFORM_INTENSITY,
+  DEFAULT_WAVEFORM_SMOOTHING,
+  createSilentSamples,
+  createIntensitySamples,
+  createWaveform,
+  getWaveformPeak,
+  isWaveformSampleInput,
+  normalizeBarCount,
+  normalizeIntensity,
+  normalizeSmoothing,
+  normalizeWaveformConfig,
+  normalizeWaveformSamples,
+  resampleWaveformSamples,
+  scaleWaveformSamples,
+  smoothWaveformSamples,
+  toCssDimension,
+  type NormalizedWaveformConfig,
+  type WaveformAPI,
+  type WaveformProps,
+  type WaveformSampleInput,
+  type WaveformSource,
+  type WaveformVariant,
+} from './waveform.js'
+
+export {
+  drawWaveform,
+  prepareWaveformCanvas,
+  type WaveformCanvasSize,
+  type WaveformRenderOptions,
+} from './waveform-renderer.js'
+
+export {
+  waveformCanvasVariants,
+  waveformVariants,
+} from './waveform.styles.js'

package/dist/waveform/waveform-renderer.ts

@@ -0,0 +1,181 @@
+import {
+  DEFAULT_WAVEFORM_COLOR,
+  DEFAULT_WAVEFORM_AMPLITUDE,
+  DEFAULT_WAVEFORM_INTENSITY,
+  getWaveformPeak,
+  normalizeAmplitude,
+  normalizeBarCount,
+  normalizeIntensity,
+  resampleWaveformSamples,
+  scaleWaveformSamples,
+  type WaveformSampleInput,
+  type WaveformVariant,
+} from './waveform.js'
+
+export interface WaveformCanvasSize {
+  width: number
+  height: number
+  pixelRatio?: number
+}
+
+export interface WaveformRenderOptions {
+  variant?: WaveformVariant
+  color?: string
+  intensity?: number
+  amplitude?: number
+  barCount?: number
+}
+
+export function prepareWaveformCanvas(
+  canvas: HTMLCanvasElement,
+  size: WaveformCanvasSize,
+): CanvasRenderingContext2D | null {
+  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
+}
+
+export function drawWaveform(
+  context: CanvasRenderingContext2D,
+  samples: WaveformSampleInput,
+  size: WaveformCanvasSize,
+  options: WaveformRenderOptions = {},
+): void {
+  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 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, amplitude)
+    return
+  }
+
+  if (variant === 'rings') {
+    drawRings(context, samples, width, height, intensity, amplitude)
+    return
+  }
+
+  drawBars(context, samples, width, height, intensity, amplitude, barCount)
+}
+
+function drawBars(
+  context: CanvasRenderingContext2D,
+  samples: WaveformSampleInput,
+  width: number,
+  height: number,
+  intensity: number,
+  amplitude: number,
+  barCount: number,
+) {
+  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 * 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: CanvasRenderingContext2D,
+  samples: WaveformSampleInput,
+  width: number,
+  height: number,
+  intensity: number,
+  amplitudeScale: number,
+) {
+  const lineSamples = scaleWaveformSamples(samples, intensity)
+  const center = height / 2
+  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
+    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: CanvasRenderingContext2D,
+  samples: WaveformSampleInput,
+  width: number,
+  height: number,
+  intensity: number,
+  amplitude: number,
+) {
+  const peak = getWaveformPeak(scaleWaveformSamples(samples, intensity)) * amplitude
+  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: CanvasRenderingContext2D, color: string) {
+  try {
+    context.fillStyle = color
+    context.strokeStyle = color
+  } catch {
+    context.fillStyle = '#000'
+    context.strokeStyle = '#000'
+  }
+}

package/dist/waveform/waveform.styles.ts

@@ -0,0 +1,19 @@
+import { cva } from '../shared/index.ts'
+
+export const waveformVariants = cva({
+  base: 'relative block overflow-hidden',
+  variants: {
+    variant: {
+      bars: '',
+      line: '',
+      rings: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'bars',
+  },
+})
+
+export const waveformCanvasVariants = cva({
+  base: 'block h-full w-full',
+})