@handled-ai/design-system 0.8.0 → 0.9.0

package/src/three/agent-orb.tsx

@@ -0,0 +1,557 @@
+"use client"
+
+import * as React from "react"
+import { useEffect, useMemo, useRef } from "react"
+import { useTexture } from "@react-three/drei"
+import { Canvas, useFrame, useThree } from "@react-three/fiber"
+import {
+  Color,
+  Uniform,
+  RepeatWrapping,
+  type Mesh,
+  type CircleGeometry,
+  type ShaderMaterial,
+} from "three"
+import { cn } from "../lib/utils"
+
+export type AgentOrbState = null | "thinking" | "listening" | "talking"
+
+export interface AgentOrbProps {
+  state?: AgentOrbState
+  colors?: [string, string]
+  volumeMode?: "auto" | "manual"
+  manualInput?: number
+  manualOutput?: number
+  inputVolumeRef?: React.RefObject<number>
+  outputVolumeRef?: React.RefObject<number>
+  getInputVolume?: () => number
+  getOutputVolume?: () => number
+  seed?: number
+  showGlow?: boolean
+  className?: string
+}
+
+const PERLIN_NOISE_URL =
+  "https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png"
+
+/**
+ * Full AgentOrb with optional CSS glow wrapper.
+ * Colors default to CSS `--primary` via computed style at mount time.
+ */
+export function AgentOrb({
+  state = null,
+  colors,
+  volumeMode = "auto",
+  manualInput,
+  manualOutput,
+  inputVolumeRef,
+  outputVolumeRef,
+  getInputVolume,
+  getOutputVolume,
+  seed,
+  showGlow = true,
+  className,
+}: AgentOrbProps) {
+  const resolvedColors = useResolvedColors(colors)
+  const isSpeaking = state === "talking"
+  const isListening = state === "listening"
+
+  return (
+    <div className={cn("relative h-full w-full", className)}>
+      {showGlow && (
+        <GlowLayer
+          isSpeaking={isSpeaking}
+          isListening={isListening}
+        />
+      )}
+      <div
+        className={cn(
+          "relative z-10 w-full h-full transition-transform duration-700 ease-out",
+          isListening ? "scale-90" : "scale-100",
+        )}
+      >
+        <AgentOrbCanvas
+          colors={resolvedColors}
+          seed={seed}
+          agentState={state}
+          volumeMode={volumeMode}
+          manualInput={manualInput}
+          manualOutput={manualOutput}
+          inputVolumeRef={inputVolumeRef}
+          outputVolumeRef={outputVolumeRef}
+          getInputVolume={getInputVolume}
+          getOutputVolume={getOutputVolume}
+          className="w-full h-full"
+        />
+      </div>
+    </div>
+  )
+}
+
+function useResolvedColors(colors?: [string, string]): [string, string] {
+  const ref = useRef<[string, string]>(colors ?? ["#000000", "#000000"])
+
+  useEffect(() => {
+    if (colors) {
+      ref.current = colors
+      return
+    }
+    if (typeof document === "undefined") return
+    const style = getComputedStyle(document.documentElement)
+    const primary = style.getPropertyValue("--primary").trim() || "#000000"
+    ref.current = [primary, primary]
+  }, [colors])
+
+  return ref.current
+}
+
+/* ----- Glow Layer (CSS animations) ----- */
+
+function GlowLayer({ isSpeaking, isListening }: { isSpeaking: boolean; isListening: boolean }) {
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 flex items-center justify-center transition-all duration-700 ease-out",
+        isListening ? "scale-90" : "scale-100",
+      )}
+    >
+      {isListening && (
+        <>
+          <div
+            className="absolute inset-0 rounded-full animate-[spin_8s_linear_infinite]"
+            style={{
+              background:
+                "conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 30%, transparent) 0deg, transparent 60deg, color-mix(in srgb, var(--primary) 30%, transparent) 120deg, transparent 180deg, color-mix(in srgb, var(--primary) 30%, transparent) 240deg, transparent 300deg)",
+              filter: "blur(20px)",
+            }}
+          />
+          <div
+            className="absolute inset-0 rounded-full animate-[spin_12s_linear_infinite_reverse]"
+            style={{
+              background:
+                "conic-gradient(from 45deg, transparent 0deg, color-mix(in srgb, var(--primary) 20%, transparent) 90deg, transparent 180deg, color-mix(in srgb, var(--primary) 20%, transparent) 270deg)",
+              filter: "blur(25px)",
+            }}
+          />
+        </>
+      )}
+
+      {isSpeaking && (
+        <>
+          <div
+            className="absolute inset-0 rounded-full animate-[spin_6s_linear_infinite]"
+            style={{
+              background:
+                "conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 40%, transparent) 0deg, transparent 45deg, color-mix(in srgb, var(--primary) 40%, transparent) 90deg, transparent 135deg, color-mix(in srgb, var(--primary) 40%, transparent) 180deg, transparent 225deg, color-mix(in srgb, var(--primary) 40%, transparent) 270deg, transparent 315deg)",
+              filter: "blur(30px)",
+            }}
+          />
+          <div
+            className="absolute inset-0 rounded-full animate-pulse"
+            style={{
+              animationDuration: "2s",
+              background:
+                "radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 70%)",
+              filter: "blur(20px)",
+            }}
+          />
+        </>
+      )}
+
+      {!isSpeaking && !isListening && (
+        <div
+          className="absolute inset-0 rounded-full"
+          style={{
+            background:
+              "radial-gradient(circle, color-mix(in srgb, var(--primary) 15%, transparent) 0%, transparent 70%)",
+            filter: "blur(25px)",
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+/* ----- Raw Three.js Canvas (exported for advanced use) ----- */
+
+interface AgentOrbCanvasProps {
+  colors?: [string, string]
+  seed?: number
+  agentState?: AgentOrbState
+  volumeMode?: "auto" | "manual"
+  manualInput?: number
+  manualOutput?: number
+  inputVolumeRef?: React.RefObject<number>
+  outputVolumeRef?: React.RefObject<number>
+  getInputVolume?: () => number
+  getOutputVolume?: () => number
+  className?: string
+  resizeDebounce?: number
+}
+
+export function AgentOrbCanvas({
+  colors = ["#000000", "#000000"],
+  seed,
+  agentState = null,
+  volumeMode = "auto",
+  manualInput,
+  manualOutput,
+  inputVolumeRef,
+  outputVolumeRef,
+  getInputVolume,
+  getOutputVolume,
+  className,
+  resizeDebounce = 100,
+}: AgentOrbCanvasProps) {
+  return (
+    <div className={className ?? "relative h-full w-full"}>
+      <Canvas
+        resize={{ debounce: resizeDebounce }}
+        gl={{ alpha: true, antialias: true, premultipliedAlpha: true }}
+      >
+        <OrbScene
+          colors={colors}
+          seed={seed}
+          agentState={agentState}
+          volumeMode={volumeMode}
+          manualInput={manualInput}
+          manualOutput={manualOutput}
+          inputVolumeRef={inputVolumeRef}
+          outputVolumeRef={outputVolumeRef}
+          getInputVolume={getInputVolume}
+          getOutputVolume={getOutputVolume}
+        />
+      </Canvas>
+    </div>
+  )
+}
+
+/* ----- Internal Scene ----- */
+
+function OrbScene({
+  colors,
+  seed,
+  agentState,
+  volumeMode,
+  manualInput,
+  manualOutput,
+  inputVolumeRef,
+  outputVolumeRef,
+  getInputVolume,
+  getOutputVolume,
+}: {
+  colors: [string, string]
+  seed?: number
+  agentState: AgentOrbState
+  volumeMode: "auto" | "manual"
+  manualInput?: number
+  manualOutput?: number
+  inputVolumeRef?: React.RefObject<number>
+  outputVolumeRef?: React.RefObject<number>
+  getInputVolume?: () => number
+  getOutputVolume?: () => number
+}) {
+  const { gl } = useThree()
+  const circleRef = useRef<Mesh<CircleGeometry, ShaderMaterial>>(null)
+  const initialColorsRef = useRef<[string, string]>(colors)
+  const targetColor1Ref = useRef(new Color(colors[0]))
+  const targetColor2Ref = useRef(new Color(colors[1]))
+  const animSpeedRef = useRef(0.1)
+  const perlinNoiseTexture = useTexture(PERLIN_NOISE_URL)
+
+  const agentRef = useRef<AgentOrbState>(agentState)
+  const modeRef = useRef<"auto" | "manual">(volumeMode)
+  const curInRef = useRef(0)
+  const curOutRef = useRef(0)
+
+  useEffect(() => { agentRef.current = agentState }, [agentState])
+  useEffect(() => { modeRef.current = volumeMode }, [volumeMode])
+  useEffect(() => {
+    targetColor1Ref.current = new Color(colors[0])
+    targetColor2Ref.current = new Color(colors[1])
+  }, [colors])
+
+  const random = useMemo(
+    () => splitmix32(seed ?? Math.floor(Math.random() * 2 ** 32)),
+    [seed],
+  )
+  const offsets = useMemo(
+    () => new Float32Array(Array.from({ length: 7 }, () => random() * Math.PI * 2)),
+    [random],
+  )
+
+  useEffect(() => {
+    const apply = () => {
+      if (!circleRef.current) return
+      const isDark = document.documentElement.classList.contains("dark")
+      circleRef.current.material.uniforms.uInverted.value = isDark ? 1 : 0
+    }
+    apply()
+    const observer = new MutationObserver(apply)
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
+    return () => observer.disconnect()
+  }, [])
+
+  useFrame((_, delta: number) => {
+    const mat = circleRef.current?.material
+    if (!mat) return
+    const u = mat.uniforms
+    u.uTime.value += delta * 0.5
+
+    if (u.uOpacity.value < 1) {
+      u.uOpacity.value = Math.min(1, u.uOpacity.value + delta * 2)
+    }
+
+    let targetIn = 0
+    let targetOut = 0.3
+    if (modeRef.current === "manual") {
+      targetIn = clamp01(manualInput ?? inputVolumeRef?.current ?? getInputVolume?.() ?? 0)
+      targetOut = clamp01(manualOutput ?? outputVolumeRef?.current ?? getOutputVolume?.() ?? 0)
+    } else {
+      const t = u.uTime.value * 2
+      if (agentRef.current === null) {
+        targetIn = 0; targetOut = 0.3
+      } else if (agentRef.current === "listening") {
+        targetIn = clamp01(0.55 + Math.sin(t * 3.2) * 0.35); targetOut = 0.45
+      } else if (agentRef.current === "talking") {
+        targetIn = clamp01(0.65 + Math.sin(t * 4.8) * 0.22)
+        targetOut = clamp01(0.75 + Math.sin(t * 3.6) * 0.22)
+      } else {
+        const base = 0.38 + 0.07 * Math.sin(t * 0.7)
+        const wander = 0.05 * Math.sin(t * 2.1) * Math.sin(t * 0.37 + 1.2)
+        targetIn = clamp01(base + wander)
+        targetOut = clamp01(0.48 + 0.12 * Math.sin(t * 1.05 + 0.6))
+      }
+    }
+
+    curInRef.current += (targetIn - curInRef.current) * 0.2
+    curOutRef.current += (targetOut - curOutRef.current) * 0.2
+
+    const targetSpeed = 0.1 + (1 - Math.pow(curOutRef.current - 1, 2)) * 0.9
+    animSpeedRef.current += (targetSpeed - animSpeedRef.current) * 0.12
+
+    u.uAnimation.value += delta * animSpeedRef.current
+    u.uInputVolume.value = curInRef.current
+    u.uOutputVolume.value = curOutRef.current
+    u.uColor1.value.lerp(targetColor1Ref.current, 0.08)
+    u.uColor2.value.lerp(targetColor2Ref.current, 0.08)
+  })
+
+  useEffect(() => {
+    const canvas = gl.domElement
+    const onContextLost = (event: Event) => {
+      event.preventDefault()
+      setTimeout(() => { gl.forceContextRestore() }, 1)
+    }
+    canvas.addEventListener("webglcontextlost", onContextLost, false)
+    return () => canvas.removeEventListener("webglcontextlost", onContextLost, false)
+  }, [gl])
+
+  const uniforms = useMemo(() => {
+    perlinNoiseTexture.wrapS = RepeatWrapping
+    perlinNoiseTexture.wrapT = RepeatWrapping
+    const isDark =
+      typeof document !== "undefined" && document.documentElement.classList.contains("dark")
+    return {
+      uColor1: new Uniform(new Color(initialColorsRef.current[0])),
+      uColor2: new Uniform(new Color(initialColorsRef.current[1])),
+      uOffsets: { value: offsets },
+      uPerlinTexture: new Uniform(perlinNoiseTexture),
+      uTime: new Uniform(0),
+      uAnimation: new Uniform(0.1),
+      uInverted: new Uniform(isDark ? 1 : 0),
+      uInputVolume: new Uniform(0),
+      uOutputVolume: new Uniform(0),
+      uOpacity: new Uniform(0),
+    }
+  }, [perlinNoiseTexture, offsets])
+
+  return (
+    <mesh ref={circleRef}>
+      <circleGeometry args={[3.5, 64]} />
+      <shaderMaterial
+        uniforms={uniforms}
+        fragmentShader={fragmentShader}
+        vertexShader={vertexShader}
+        transparent
+      />
+    </mesh>
+  )
+}
+
+/* ----- Utilities ----- */
+
+function splitmix32(a: number) {
+  return function () {
+    a |= 0
+    a = (a + 0x9e3779b9) | 0
+    let t = a ^ (a >>> 16)
+    t = Math.imul(t, 0x21f0aaad)
+    t = t ^ (t >>> 15)
+    t = Math.imul(t, 0x735a2d97)
+    return ((t = t ^ (t >>> 15)) >>> 0) / 4294967296
+  }
+}
+
+function clamp01(n: number) {
+  if (!Number.isFinite(n)) return 0
+  return Math.min(1, Math.max(0, n))
+}
+
+/* ----- Shaders ----- */
+
+const vertexShader = /* glsl */ `
+uniform float uTime;
+uniform sampler2D uPerlinTexture;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`
+
+const fragmentShader = /* glsl */ `
+uniform float uTime;
+uniform float uAnimation;
+uniform float uInverted;
+uniform float uOffsets[7];
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform float uInputVolume;
+uniform float uOutputVolume;
+uniform float uOpacity;
+uniform sampler2D uPerlinTexture;
+varying vec2 vUv;
+
+const float PI = 3.14159265358979323846;
+
+bool drawOval(vec2 polarUv, vec2 polarCenter, float a, float b, bool reverseGradient, float softness, out vec4 color) {
+  vec2 p = polarUv - polarCenter;
+  float oval = (p.x * p.x) / (a * a) + (p.y * p.y) / (b * b);
+  float edge = smoothstep(1.0, 1.0 - softness, oval);
+  if (edge > 0.0) {
+    float gradient = reverseGradient ? (1.0 - (p.x / a + 1.0) / 2.0) : ((p.x / a + 1.0) / 2.0);
+    gradient = mix(0.5, gradient, 0.1);
+    color = vec4(vec3(gradient), 0.85 * edge);
+    return true;
+  }
+  return false;
+}
+
+vec3 colorRamp(float grayscale, vec3 color1, vec3 color2, vec3 color3, vec3 color4) {
+  if (grayscale < 0.33) return mix(color1, color2, grayscale * 3.0);
+  else if (grayscale < 0.66) return mix(color2, color3, (grayscale - 0.33) * 3.0);
+  else return mix(color3, color4, (grayscale - 0.66) * 3.0);
+}
+
+vec2 hash2(vec2 p) {
+  return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);
+}
+
+float noise2D(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float n = mix(
+    mix(dot(hash2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+        dot(hash2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+    mix(dot(hash2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+        dot(hash2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x),
+    u.y
+  );
+  return 0.5 + 0.5 * n;
+}
+
+float sharpRing(vec3 decomposed, float time) {
+  float ringStart = 1.0;
+  float ringWidth = 0.3;
+  float noiseScale = 5.0;
+  float noise = mix(
+    noise2D(vec2(decomposed.x, time) * noiseScale),
+    noise2D(vec2(decomposed.y, time) * noiseScale),
+    decomposed.z
+  );
+  noise = (noise - 0.5) * 2.5;
+  return ringStart + noise * ringWidth * 1.5;
+}
+
+float smoothRing(vec3 decomposed, float time) {
+  float ringStart = 0.9;
+  float ringWidth = 0.2;
+  float noiseScale = 6.0;
+  float noise = mix(
+    noise2D(vec2(decomposed.x, time) * noiseScale),
+    noise2D(vec2(decomposed.y, time) * noiseScale),
+    decomposed.z
+  );
+  noise = (noise - 0.5) * 5.0;
+  return ringStart + noise * ringWidth;
+}
+
+float flow(vec3 decomposed, float time) {
+  return mix(
+    texture(uPerlinTexture, vec2(time, decomposed.x / 2.0)).r,
+    texture(uPerlinTexture, vec2(time, decomposed.y / 2.0)).r,
+    decomposed.z
+  );
+}
+
+void main() {
+  vec2 uv = vUv * 2.0 - 1.0;
+  float radius = length(uv);
+  float theta = atan(uv.y, uv.x);
+  if (theta < 0.0) theta += 2.0 * PI;
+
+  vec3 decomposed = vec3(
+    theta / (2.0 * PI),
+    mod(theta / (2.0 * PI) + 0.5, 1.0) + 1.0,
+    abs(theta / PI - 1.0)
+  );
+
+  float noise = flow(decomposed, radius * 0.03 - uAnimation * 0.2) - 0.5;
+  theta += noise * mix(0.08, 0.25, uOutputVolume);
+
+  vec4 color = vec4(1.0, 1.0, 1.0, 1.0);
+  float originalCenters[7] = float[7](0.0, 0.5 * PI, 1.0 * PI, 1.5 * PI, 2.0 * PI, 2.5 * PI, 3.0 * PI);
+  float centers[7];
+  for (int i = 0; i < 7; i++) {
+    centers[i] = originalCenters[i] + 0.5 * sin(uTime / 20.0 + uOffsets[i]);
+  }
+  float a, b;
+  vec4 ovalColor;
+  for (int i = 0; i < 7; i++) {
+    float noise = texture(uPerlinTexture, vec2(mod(centers[i] + uTime * 0.05, 1.0), 0.5)).r;
+    a = 0.5 + noise * 0.3;
+    b = noise * mix(3.5, 2.5, uInputVolume);
+    bool reverseGradient = (i % 2 == 1);
+    float distTheta = min(abs(theta - centers[i]), min(abs(theta + 2.0 * PI - centers[i]), abs(theta - 2.0 * PI - centers[i])));
+    float distRadius = radius;
+    float softness = 0.6;
+    if (drawOval(vec2(distTheta, distRadius), vec2(0.0, 0.0), a, b, reverseGradient, softness, ovalColor)) {
+      color.rgb = mix(color.rgb, ovalColor.rgb, ovalColor.a);
+      color.a = max(color.a, ovalColor.a);
+    }
+  }
+
+  float ringRadius1 = sharpRing(decomposed, uTime * 0.1);
+  float ringRadius2 = smoothRing(decomposed, uTime * 0.1);
+  float inputRadius1 = radius + uInputVolume * 0.2;
+  float inputRadius2 = radius + uInputVolume * 0.15;
+  float opacity1 = mix(0.2, 0.6, uInputVolume);
+  float opacity2 = mix(0.15, 0.45, uInputVolume);
+  float ringAlpha1 = (inputRadius2 >= ringRadius1) ? opacity1 : 0.0;
+  float ringAlpha2 = smoothstep(ringRadius2 - 0.05, ringRadius2 + 0.05, inputRadius1) * opacity2;
+  float totalRingAlpha = max(ringAlpha1, ringAlpha2);
+  vec3 ringColor = vec3(1.0);
+  color.rgb = 1.0 - (1.0 - color.rgb) * (1.0 - ringColor * totalRingAlpha);
+
+  vec3 color1 = vec3(0.0, 0.0, 0.0);
+  vec3 color2 = uColor1;
+  vec3 color3 = uColor2;
+  vec3 color4 = vec3(1.0, 1.0, 1.0);
+  float luminance = mix(color.r, 1.0 - color.r, uInverted);
+  color.rgb = colorRamp(luminance, color1, color2, color3, color4);
+  color.a *= uOpacity;
+  gl_FragColor = color;
+}
+`

package/src/three/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @handled-ai/design-system/three
+ * Three.js / WebGL components
+ */
+export * from "./agent-orb"

package/src/types/r3f.d.ts

@@ -0,0 +1,8 @@
+import type { ThreeElements } from "@react-three/fiber"
+
+declare module "react" {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+    interface IntrinsicElements extends ThreeElements {}
+  }
+}