@actioneer/ads 0.3.0 → 0.4.0

package/styles.css

@@ -34,11 +34,17 @@
  */
 @theme {
   /* ---- Typography ----
-     One typeface only. No monospace font — numeric/code contexts use
-     Aribau Grotesk with `tabular-nums` for aligned figures. */
+     One brand typeface. Figures inside prose stay in Aribau Grotesk with
+     `tabular-nums`; only literal source code steps to the mono stack. */
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
+  /* Source code only (CodeBlock, inline Code). ADS ships no mono webfont —
+     this resolves to the reader's platform mono, which is what a developer
+     already reads code in. Never use it for UI copy or data. */
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
   /* ---- Type scale ---- base = 15px (0.9375rem). Root stays 16px so the
      spacing grid is unaffected; only text sizes are anchored to 15px. */
   /* SIX sizes only — a deliberately small ladder (captions → display).
@@ -116,8 +122,8 @@
   /* ---- Elevation ---- ONE soft token (Claude-panel style).
      Delineate surfaces with fill color first; add this to gently lift them. */
   --shadow-elevation: 0 0 0 1px rgb(10 10 11 / 0.03),
-    0 1px 2px 0 rgb(10 10 11 / 0.05),
-    0 8px 24px -6px rgb(10 10 11 / 0.12);
+    0 1px 2px 0 rgb(10 10 11 / 0.04),
+    0 8px 28px -8px rgb(10 10 11 / 0.09);
 
   /* ---- CTA inner glow ---- luminous inset highlight for primary buttons
      (adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
@@ -141,11 +147,13 @@
   --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); /* side-panel and drawer slide */
   --ease-drawer: var(--ease-expo-out); /* backwards-compatible alias */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot (rare) */
+  --ease-disclosure: cubic-bezier(0.32, 0.72, 0, 1); /* height reveals — moves off the mark immediately, settles long */
 
   /* Durations — every animation/transition timing flows from these.
      UI animations stay under 300ms; exits run faster than enters. */
   --duration-fast: 0.15s; /* menu / popover / tooltip enter */
   --duration-normal: 0.2s; /* state transitions */
+  --duration-disclosure: 0.28s; /* collapsible open — travels a real distance */
   --duration-spin: 0.8s; /* rotation loops (spinner) */
   --duration-pulse: 1.5s; /* breathing / shimmer loops */
   --duration-bloom: 0.9s; /* ambient reveals (chat texture bloom, curtain wipe) */
@@ -692,5 +700,103 @@
     animation: none !important;
   }
 }
+
+/* Collapsible disclosure (CSS path) — opt-in via .ads-collapsible for simple
+   disclosures. ChainOfThoughtContent does NOT use this: it animates with
+   Motion so a toggle mid-flight reverses from the current height instead of
+   restarting, which CSS keyframes cannot do.
+
+   Height, opacity and a short rise in ONE animation.
+   Two separate `animation` declarations cannot coexist (the shorthand replaces,
+   it does not merge), so animating height alongside tw-animate-css's enter/exit
+   silently drops the fade and leaves a bare height shutter — which reads as
+   rigid no matter how it is timed. Radix publishes the measured height as
+   --radix-collapsible-content-height; exits run faster than enters.
+   Eased with --ease-disclosure. --ease-out front-loads ~60% of the travel into
+   the first third (pop, then settle); --ease-in-out holds ~150ms before moving
+   (lag, then rush). A height reveal needs to leave the mark immediately and
+   settle long, which is what this curve does. */
+@keyframes ads-collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+    transform: translate3d(0, -4px, 0);
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes ads-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    height: 0;
+    opacity: 0;
+    transform: translate3d(0, -4px, 0);
+  }
+}
+.ads-collapsible[data-state="open"] {
+  animation: ads-collapsible-down var(--duration-disclosure) var(--ease-disclosure);
+}
+.ads-collapsible[data-state="closed"] {
+  animation: ads-collapsible-up var(--duration-normal) var(--ease-disclosure);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ads-collapsible[data-state="open"],
+  .ads-collapsible[data-state="closed"] {
+    animation: none;
+  }
+}
+
+/* Tree connector — the rail that links a group of children back to their
+   parent, and the L-shaped elbow that reaches an individual child.
+
+   Two classes so a rail can pass THROUGH content that is not itself a branch:
+   `.ads-tree-rail` draws the vertical only, `.ads-tree-branch` adds the elbow.
+   Mixing them keeps the rail unbroken from the parent icon while only the
+   rows that are actual children get an elbow.
+
+   - --tree-rail-lead : how far the FIRST child's rail climbs to meet the
+                        parent row.
+   - --tree-elbow     : where the elbow meets the child — its icon centre. */
+.ads-tree-rail,
+.ads-tree-branch {
+  position: relative;
+  padding-inline-start: 1.25rem;
+}
+.ads-tree-rail::before,
+.ads-tree-branch::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  border-left: 1px solid var(--border-strong);
+}
+.ads-tree-rail:first-child::before,
+.ads-tree-branch:first-child::before {
+  top: calc(-1 * var(--tree-rail-lead, 0px));
+}
+/* The last child needs no rail: its elbow (or the content's end) terminates
+   the branch, and a rail there pokes through the curve. */
+.ads-tree-rail:last-child::before,
+.ads-tree-branch:last-child::before {
+  display: none;
+}
+.ads-tree-branch::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: var(--tree-elbow, 1.125rem);
+  width: 1rem;
+  border-bottom: 1px solid var(--border-strong);
+  border-left: 1px solid var(--border-strong);
+  border-bottom-left-radius: 9px;
+}
 /* Let the consumer's Tailwind discover the classes ADS components use. */
 @source "./**/*.{js,mjs}";

package/theme.css

@@ -7,11 +7,17 @@
  */
 @theme {
   /* ---- Typography ----
-     One typeface only. No monospace font — numeric/code contexts use
-     Aribau Grotesk with `tabular-nums` for aligned figures. */
+     One brand typeface. Figures inside prose stay in Aribau Grotesk with
+     `tabular-nums`; only literal source code steps to the mono stack. */
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
+  /* Source code only (CodeBlock, inline Code). ADS ships no mono webfont —
+     this resolves to the reader's platform mono, which is what a developer
+     already reads code in. Never use it for UI copy or data. */
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
   /* ---- Type scale ---- base = 15px (0.9375rem). Root stays 16px so the
      spacing grid is unaffected; only text sizes are anchored to 15px. */
   /* SIX sizes only — a deliberately small ladder (captions → display).
@@ -89,8 +95,8 @@
   /* ---- Elevation ---- ONE soft token (Claude-panel style).
      Delineate surfaces with fill color first; add this to gently lift them. */
   --shadow-elevation: 0 0 0 1px rgb(10 10 11 / 0.03),
-    0 1px 2px 0 rgb(10 10 11 / 0.05),
-    0 8px 24px -6px rgb(10 10 11 / 0.12);
+    0 1px 2px 0 rgb(10 10 11 / 0.04),
+    0 8px 28px -8px rgb(10 10 11 / 0.09);
 
   /* ---- CTA inner glow ---- luminous inset highlight for primary buttons
      (adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
@@ -114,11 +120,13 @@
   --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); /* side-panel and drawer slide */
   --ease-drawer: var(--ease-expo-out); /* backwards-compatible alias */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot (rare) */
+  --ease-disclosure: cubic-bezier(0.32, 0.72, 0, 1); /* height reveals — moves off the mark immediately, settles long */
 
   /* Durations — every animation/transition timing flows from these.
      UI animations stay under 300ms; exits run faster than enters. */
   --duration-fast: 0.15s; /* menu / popover / tooltip enter */
   --duration-normal: 0.2s; /* state transitions */
+  --duration-disclosure: 0.28s; /* collapsible open — travels a real distance */
   --duration-spin: 0.8s; /* rotation loops (spinner) */
   --duration-pulse: 1.5s; /* breathing / shimmer loops */
   --duration-bloom: 0.9s; /* ambient reveals (chat texture bloom, curtain wipe) */

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

@@ -1,11 +0,0 @@
-import { VoiceVisualizerColor, VoiceVisualizerDriver } from '../../hooks/agents-ui/voice-visualizer-types';
-import * as React from "react";
-export interface AgentAudioVisualizerAuraProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, VoiceVisualizerDriver {
-    /** Normalized RGB shader color. */
-    color?: VoiceVisualizerColor;
-    /** Hue variation across aura layers. */
-    colorShift?: number;
-    themeMode?: "dark" | "light";
-}
-/** Internal ADS port of LiveKit Agents UI's Aura visualizer. */
-export declare const AgentAudioVisualizerAura: React.ForwardRefExoticComponent<AgentAudioVisualizerAuraProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,277 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1,203 +0,0 @@
-"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
-};