@actioneer/ads 0.1.0

package/components/agents-ui/agent-audio-visualizer-aura.js

@@ -0,0 +1,277 @@
+"use client";
+import { jsx as d } from "react/jsx-runtime";
+import * as x from "react";
+import { ReactShaderToy as y } from "./react-shader-toy.js";
+import { useAgentAudioVisualizerAura as b } from "../../hooks/agents-ui/use-agent-audio-visualizer-aura.js";
+import { cn as S } from "../../lib/cn.js";
+const h = [0.122, 0.835, 0.976], A = `
+const float TAU = 6.283185;
+
+// Noise for dithering
+vec2 randFibo(vec2 p) {
+  p = fract(p * vec2(443.897, 441.423));
+  p += dot(p, p.yx + 19.19);
+  return fract((p.xx + p.yx) * p.xy);
+}
+
+// Tonemap
+vec3 Tonemap(vec3 x) {
+  x *= 4.0;
+  return x / (1.0 + x);
+}
+
+// Luma for alpha
+float luma(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+// RGB to HSV
+vec3 rgb2hsv(vec3 c) {
+  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  float d = q.x - min(q.w, q.y);
+  float e = 1.0e-10;
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+// HSV to RGB
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+// SDF shapes
+float sdCircle(vec2 st, float r) {
+  return length(st) - r;
+}
+
+float sdLine(vec2 p, float r) {
+  float halfLen = r * 2.0;
+  vec2 a = vec2(-halfLen, 0.0);
+  vec2 b = vec2(halfLen, 0.0);
+  vec2 pa = p - a;
+  vec2 ba = b - a;
+  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+  return length(pa - ba * h);
+}
+
+float getSdf(vec2 st) {
+  if(uShape == 1.0) return sdCircle(st, uScale);
+  else if(uShape == 2.0) return sdLine(st, uScale);
+  return sdCircle(st, uScale); // Default
+}
+
+vec2 turb(vec2 pos, float t, float it) {
+  // Initial rotation matrix for swirl direction
+  mat2 rotation = mat2(0.6, -0.25, 0.25, 0.9);
+  // Secondary rotation applied each iteration (approx 53 degree rotation)
+  mat2 layerRotation = mat2(0.6, -0.8, 0.8, 0.6);
+  
+  float frequency = mix(2.0, 15.0, uFrequency);
+  float amplitude = uAmplitude;
+  float frequencyGrowth = 1.4;
+  float animTime = t * 0.1 * uSpeed;
+  
+  const int LAYERS = 4;
+  for(int i = 0; i < LAYERS; i++) {
+    // Calculate wave displacement for this layer
+    vec2 rotatedPos = pos * rotation;
+    vec2 wave = sin(frequency * rotatedPos + float(i) * animTime + it);
+    
+    // Apply displacement along rotation direction
+    pos += (amplitude / frequency) * rotation[0] * wave;
+    
+    // Evolve parameters for next layer
+    rotation *= layerRotation;
+    amplitude *= mix(1.0, max(wave.x, wave.y), uVariance);
+    frequency *= frequencyGrowth;
+  }
+
+  return pos;
+}
+
+const float ITERATIONS = 36.0;
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  
+  vec3 pp = vec3(0.0);
+  vec3 bloom = vec3(0.0);
+  float t = iTime * 0.5;
+  vec2 pos = uv - 0.5;
+      
+  vec2 prevPos = turb(pos, t, 0.0 - 1.0 / ITERATIONS);
+  float spacing = mix(1.0, TAU, uSpacing);
+
+  for(float i = 1.0; i < ITERATIONS + 1.0; i++) {
+    float iter = i / ITERATIONS;
+    vec2 st = turb(pos, t, iter * spacing);
+    float d = abs(getSdf(st));
+    float pd = distance(st, prevPos);
+    prevPos = st;
+    float dynamicBlur = exp2(pd * 2.0 * 1.4426950408889634) - 1.0;
+    float ds = smoothstep(0.0, uBlur * 0.05 + max(dynamicBlur * uSmoothing, 0.001), d);
+    
+    // Shift color based on iteration using uColorScale
+    vec3 color = uColor;
+    if(uColorShift > 0.01) {
+      vec3 hsv = rgb2hsv(color);
+      // Shift hue by iteration
+      hsv.x = fract(hsv.x + (1.0 - iter) * uColorShift * 0.3); 
+      color = hsv2rgb(hsv);
+    }
+    
+    float invd = 1.0 / max(d + dynamicBlur, 0.001);
+    pp += (ds - 1.0) * color;
+    bloom += clamp(invd, 0.0, 250.0) * color;
+  }
+
+  pp *= 1.0 / ITERATIONS;
+  
+  vec3 color;
+  
+  // Dark mode (default)
+  if(uMode < 0.5) {
+    // use bloom effect
+    bloom = bloom / (bloom + 2e4);
+    color = (-pp + bloom * 3.0 * uBloom) * 1.2;
+    color += (randFibo(fragCoord).x - 0.5) / 255.0;
+    color = Tonemap(color);
+    float alpha = luma(color) * uMix;
+    fragColor = vec4(color * uMix, alpha);
+  }
+    
+  // Light mode 
+  else {
+    // no bloom effect
+    color = -pp;
+    color += (randFibo(fragCoord).x - 0.5) / 255.0;
+  
+    // Preserve hue by tone mapping brightness only
+    float brightness = length(color);
+    vec3 direction = brightness > 0.0 ? color / brightness : color;
+  
+    // Reinhard on brightness
+    float factor = 2.0;
+    float mappedBrightness = (brightness * factor) / (1.0 + brightness * factor);
+    color = direction * mappedBrightness;
+    
+    // Boost saturation to compensate for white background bleed-through
+    // When alpha < 1.0, white bleeds through making colors look desaturated
+    // So we increase saturation to maintain vibrant appearance
+    float gray = dot(color, vec3(0.2, 0.5, 0.1));
+    float saturationBoost = 3.0;
+    color = mix(vec3(gray), color, saturationBoost);
+    
+    // Clamp between 0-1
+    color = clamp(color, 0.0, 1.0);
+    
+    float alpha = mappedBrightness * clamp(uMix, 1.0, 2.0);
+    fragColor = vec4(color, alpha);
+  }
+}`;
+function g({
+  shape: m = 1,
+  speed: e = 1,
+  amplitude: t = 0.5,
+  frequency: a = 0.5,
+  scale: r = 0.2,
+  blur: l = 1,
+  color: i = h,
+  colorShift: c = 1,
+  brightness: n = 1,
+  themeMode: u = "light",
+  reduced: s = !1,
+  ref: p,
+  className: f,
+  ...v
+}) {
+  return /* @__PURE__ */ d("div", { ref: p, className: f, ...v, children: /* @__PURE__ */ d(
+    y,
+    {
+      fs: A,
+      className: "size-full",
+      devicePixelRatio: 1,
+      paused: s || e === 0,
+      uniforms: {
+        // Aurora wave speed
+        uSpeed: { type: "1f", value: e },
+        // Edge blur/softness
+        uBlur: { type: "1f", value: l },
+        // Shape scale
+        uScale: { type: "1f", value: r },
+        // Shape type: 1=circle, 2=line
+        uShape: { type: "1f", value: m },
+        // Wave frequency and complexity
+        uFrequency: { type: "1f", value: a },
+        // Turbulence amplitude
+        uAmplitude: { type: "1f", value: t },
+        // Light intensity (bloom)
+        uBloom: { type: "1f", value: 0 },
+        // Brightness of the aurora (0-1)
+        uMix: { type: "1f", value: n },
+        // Color variation across layers (0-1)
+        uSpacing: { type: "1f", value: 0.5 },
+        // Color palette offset - shifts colors along the gradient (0-1)
+        uColorShift: { type: "1f", value: c },
+        // Color variation across layers (0-1)
+        uVariance: { type: "1f", value: 0.1 },
+        // Smoothing of the aurora (0-1)
+        uSmoothing: { type: "1f", value: 1 },
+        // Display mode: 0=dark background, 1=light background
+        uMode: { type: "1f", value: u === "light" ? 1 : 0 },
+        // Color
+        uColor: { type: "3fv", value: i }
+      },
+      onError: (o) => {
+        console.error("Shader error:", o);
+      },
+      onWarning: (o) => {
+        console.warn("Shader warning:", o);
+      }
+    }
+  ) });
+}
+g.displayName = "AuraShader";
+const w = x.forwardRef(function({
+  state: e = "idle",
+  volume: t = 0,
+  reduced: a = !1,
+  color: r = h,
+  colorShift: l = 0.05,
+  themeMode: i = "light",
+  className: c,
+  ...n
+}, u) {
+  const { speed: s, scale: p, amplitude: f, frequency: v, brightness: o } = b({
+    state: e,
+    volume: t,
+    reduced: a
+  });
+  return /* @__PURE__ */ d(
+    g,
+    {
+      ref: u,
+      "aria-hidden": !0,
+      "data-state": e,
+      blur: 0.2,
+      color: r,
+      colorShift: l,
+      speed: s,
+      scale: p,
+      themeMode: i,
+      amplitude: f,
+      frequency: v,
+      brightness: o,
+      reduced: a,
+      className: S("size-full", c),
+      ...n
+    }
+  );
+});
+w.displayName = "AgentAudioVisualizerAura";
+export {
+  w as AgentAudioVisualizerAura
+};

package/components/agents-ui/agent-audio-visualizer-wave.d.ts

@@ -0,0 +1,12 @@
+import { VoiceVisualizerColor, VoiceVisualizerDriver } from '../../hooks/agents-ui/voice-visualizer-types';
+import * as React from "react";
+export interface AgentAudioVisualizerWaveProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, VoiceVisualizerDriver {
+    /** Normalized RGB shader color. */
+    color?: VoiceVisualizerColor;
+    /** Hue variation toward the outside of the wave. */
+    colorShift?: number;
+    lineWidth?: number;
+    blur?: number;
+}
+/** Internal ADS port of LiveKit Agents UI's Wave visualizer. */
+export declare const AgentAudioVisualizerWave: React.ForwardRefExoticComponent<AgentAudioVisualizerWaveProps & React.RefAttributes<HTMLDivElement>>;

package/components/agents-ui/agent-audio-visualizer-wave.js

@@ -0,0 +1,203 @@
+"use client";
+import { jsx as v } from "react/jsx-runtime";
+import * as g from "react";
+import { ReactShaderToy as y } from "./react-shader-toy.js";
+import { useAgentAudioVisualizerWave as w } from "../../hooks/agents-ui/use-agent-audio-visualizer-wave.js";
+import { cn as b } from "../../lib/cn.js";
+const p = [0.122, 0.835, 0.976], S = `
+const float TAU = 6.28318530718;
+
+// Noise for dithering
+vec2 randFibo(vec2 p) {
+  p = fract(p * vec2(443.897, 441.423));
+  p += dot(p, p.yx + 19.19);
+  return fract((p.xx + p.yx) * p.xy);
+}
+
+// Luma for alpha
+float luma(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+// RGB to HSV
+vec3 rgb2hsv(vec3 c) {
+  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  float d = q.x - min(q.w, q.y);
+  float e = 1.0e-10;
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+// HSV to RGB
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+// Bell curve function for attenuation from center with rounded top
+float bellCurve(float distanceFromCenter, float maxDistance) {
+  float normalizedDistance = distanceFromCenter / maxDistance;
+  // Use cosine with high power for smooth rounded top
+  return pow(cos(normalizedDistance * (3.14159265359 / 4.0)), 16.0);
+}
+
+// Calculate the sine wave
+float oscilloscopeWave(float x, float centerX, float time) {
+  float relativeX = x - centerX;
+  float maxDistance = centerX;
+  float distanceFromCenter = abs(relativeX);
+  
+  // Apply bell curve for amplitude attenuation
+  float bell = bellCurve(distanceFromCenter, maxDistance);
+  
+  // Calculate wave with uniforms and bell curve attenuation
+  float wave = sin(relativeX * uFrequency + time * uSpeed) * uAmplitude * bell;
+  
+  return wave;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 pos = uv - 0.5;
+  
+  // Calculate center and positions
+  float centerX = 0.5;
+  float centerY = 0.5;
+  float x = uv.x;
+  float y = uv.y;
+  
+  // Convert line width from pixels to UV space
+  // Use the average of width and height to handle aspect ratio
+  float pixelSize = 2.0 / (iResolution.x + iResolution.y);
+  float lineWidthUV = uLineWidth * pixelSize;
+  float smoothingUV = uSmoothing * pixelSize;
+  
+  // Find minimum distance to the wave by sampling nearby points
+  // This gives us consistent line width without high-frequency artifacts
+  const int NUM_SAMPLES = 50; // Must be const for GLSL loop
+  float minDist = 1000.0;
+  float sampleRange = 0.02; // Range to search for closest point
+  
+  for(int i = 0; i < NUM_SAMPLES; i++) {
+    float offset = (float(i) / float(NUM_SAMPLES - 1) - 0.5) * sampleRange;
+    float sampleX = x + offset;
+    float waveY = centerY + oscilloscopeWave(sampleX, centerX, iTime);
+    
+    // Calculate distance from current pixel to this point on the wave
+    vec2 wavePoint = vec2(sampleX, waveY);
+    vec2 currentPoint = vec2(x, y);
+    float dist = distance(currentPoint, wavePoint);
+    
+    minDist = min(minDist, dist);
+  }
+  
+  // Solid line with smooth edges using minimum distance
+  float line = smoothstep(lineWidthUV + smoothingUV, lineWidthUV - smoothingUV, minDist);
+  
+  vec3 color = uColor;
+  if(abs(uColorShift) > 0.01) {
+    // Keep the center 50% at base color, then ramp shift across outer 25% on each side.
+    float centerBandHalfWidth = 0.2;
+    float edgeBandWidth = 0.5;
+    float distanceFromCenter = abs(x - centerX);
+    float edgeFactor = clamp((distanceFromCenter - centerBandHalfWidth) / edgeBandWidth, 0.0, 1.0);
+    vec3 hsv = rgb2hsv(color);
+    // Hue shift is zero in the center band and strongest at far edges.
+    hsv.x = fract(hsv.x + edgeFactor * uColorShift * 0.3);
+    color = hsv2rgb(hsv);
+  }
+  
+  // Apply line intensity
+  color *= line;
+  
+  // Add dithering for smoother gradients
+  // color += (randFibo(fragCoord).x - 0.5) / 255.0;
+  
+  // Calculate alpha based on line intensity
+  float alpha = line * uMix;
+  
+  fragColor = vec4(color * uMix, alpha);
+}`;
+function m({
+  speed: a = 10,
+  color: t = p,
+  colorShift: i = 0.05,
+  mix: o = 1,
+  amplitude: n = 0.02,
+  frequency: r = 20,
+  lineWidth: l = 2,
+  blur: c = 0.5,
+  reduced: s = !1,
+  ref: f,
+  className: u,
+  ...d
+}) {
+  return /* @__PURE__ */ v("div", { ref: f, className: u, ...d, children: /* @__PURE__ */ v(
+    y,
+    {
+      fs: S,
+      className: "size-full",
+      devicePixelRatio: 1,
+      paused: s || a === 0,
+      uniforms: {
+        uSpeed: { type: "1f", value: a },
+        uAmplitude: { type: "1f", value: n },
+        uFrequency: { type: "1f", value: r },
+        uMix: { type: "1f", value: o },
+        uLineWidth: { type: "1f", value: l },
+        uSmoothing: { type: "1f", value: c },
+        uColor: { type: "3fv", value: t },
+        uColorShift: { type: "1f", value: i }
+      },
+      onError: (e) => {
+        console.error("Shader error:", e);
+      },
+      onWarning: (e) => {
+        console.warn("Shader warning:", e);
+      }
+    }
+  ) });
+}
+m.displayName = "WaveShader";
+const C = g.forwardRef(function({
+  state: t = "idle",
+  volume: i = 0,
+  reduced: o = !1,
+  color: n = p,
+  colorShift: r = 0.05,
+  lineWidth: l = 1.5,
+  blur: c = 0.5,
+  className: s,
+  ...f
+}, u) {
+  const { speed: d, amplitude: e, frequency: h, opacity: x } = w({
+    state: t,
+    volume: i,
+    reduced: o
+  });
+  return /* @__PURE__ */ v(
+    m,
+    {
+      ref: u,
+      "aria-hidden": !0,
+      "data-state": t,
+      speed: d,
+      color: n,
+      colorShift: r,
+      mix: x,
+      amplitude: e,
+      frequency: h,
+      lineWidth: l,
+      blur: c,
+      reduced: o,
+      className: b("size-full", s),
+      ...f
+    }
+  );
+});
+C.displayName = "AgentAudioVisualizerWave";
+export {
+  C as AgentAudioVisualizerWave
+};

package/components/agents-ui/react-shader-toy.d.ts

@@ -0,0 +1,87 @@
+import { default as React, ComponentPropsWithoutRef } from 'react';
+type Vector4<T = number> = [T, T, T, T];
+type Uniform = {
+    type: string;
+    value: number[] | number;
+};
+type Uniforms = Record<string, Uniform>;
+type TextureParams = {
+    url: string;
+    wrapS?: number;
+    wrapT?: number;
+    minFilter?: number;
+    magFilter?: number;
+    flipY?: number;
+};
+export interface ReactShaderToyProps {
+    /** Fragment shader GLSL code. */
+    fs: string;
+    /** Vertex shader GLSL code. */
+    vs?: string;
+    /**
+     * Textures to be passed to the shader. Textures need to be squared or will be
+     * automatically resized.
+     *
+     * Options default to:
+     *
+     * ```js
+     * {
+     *   minFilter: LinearMipMapLinearFilter,
+     *   magFilter: LinearFilter,
+     *   wrapS: RepeatWrapping,
+     *   wrapT: RepeatWrapping,
+     * }
+     * ```
+     *
+     * See [textures in the docs](https://rysana.com/docs/react-shaders#textures)
+     * for details.
+     */
+    textures?: TextureParams[];
+    /**
+     * Custom uniforms to be passed to the shader.
+     *
+     * See [custom uniforms in the
+     * docs](https://rysana.com/docs/react-shaders#custom-uniforms) for details.
+     */
+    uniforms?: Uniforms;
+    /**
+     * Color used when clearing the canvas.
+     *
+     * See [the WebGL
+     * docs](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/clearColor)
+     * for details.
+     */
+    clearColor?: Vector4;
+    /**
+     * GLSL precision qualifier. Defaults to `'highp'`. Balance between
+     * performance and quality.
+     */
+    precision?: 'highp' | 'lowp' | 'mediump';
+    /** Custom inline style for canvas. */
+    style?: React.CSSProperties;
+    /** Customize WebGL context attributes. See [the WebGL docs](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getContextAttributes) for details. */
+    contextAttributes?: Record<string, unknown>;
+    /** Lerp value for `iMouse` built-in uniform. Must be between 0 and 1. */
+    lerp?: number;
+    /** Device pixel ratio. */
+    devicePixelRatio?: number;
+    /**
+     * Callback for when the textures are done loading. Useful if you want to do
+     * something like e.g. hide the canvas until textures are done loading.
+     */
+    onDoneLoadingTextures?: () => void;
+    /** Custom callback to handle errors. Defaults to `console.error`. */
+    onError?: (error: string) => void;
+    /** Custom callback to handle warnings. Defaults to `console.warn`. */
+    onWarning?: (warning: string) => void;
+    /**
+     * When true, the animation loop runs even when the canvas is not visible in the viewport.
+     * When false (default), animation runs only while visible (uses Intersection Observer),
+     * reducing CPU/GPU usage when the shader is off-screen.
+     */
+    animateWhenNotVisible?: boolean;
+    /** Draw the current frame but freeze shader time until resumed. */
+    paused?: boolean;
+}
+export declare function ReactShaderToy({ fs, vs, textures, uniforms: propUniforms, clearColor, precision, style, contextAttributes, lerp, devicePixelRatio, onDoneLoadingTextures, onError, onWarning, animateWhenNotVisible, paused, ...canvasProps }: ReactShaderToyProps & ComponentPropsWithoutRef<'canvas'>): React.JSX.Element;
+export {};