react-ai-avatar 0.1.0

package/dist/lib/VrmAvatar-CehRzj0J.js

@@ -0,0 +1,224 @@
+import { jsxs as w, jsx as a } from "react/jsx-runtime";
+import te, { useState as Q, useEffect as C, Suspense as ne, useRef as c } from "react";
+import { Canvas as ae, useLoader as ie, useFrame as oe } from "@react-three/fiber";
+import { GLTFLoader as se } from "three/addons/loaders/GLTFLoader.js";
+import { VRMLoaderPlugin as ce } from "@pixiv/three-vrm";
+import { OrbitControls as le } from "@react-three/drei";
+import * as n from "three";
+import { u as ue, c as de } from "./useReducedMotion-BDcEizfP.js";
+class pe extends te.Component {
+  constructor(t) {
+    super(t), this.state = { hasError: !1 };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: !0 };
+  }
+  componentDidCatch(t) {
+    this.props.onError((t == null ? void 0 : t.message) || String(t));
+  }
+  render() {
+    return this.state.hasError ? null : this.props.children;
+  }
+}
+function d(l, t, p) {
+  if (!l.expressionManager) return;
+  const k = l.expressionManager.expressionMap || {}, U = Object.keys(k);
+  let i = [];
+  switch (t) {
+    case "blink":
+      i = ["blink", "Blink", "BLINK"];
+      break;
+    case "aa":
+      i = ["aa", "Aa", "a", "A", "AA", "mouth_a", "mouth_A"];
+      break;
+    case "ee":
+      i = ["ee", "Ee", "e", "E", "EE", "mouth_e", "mouth_E"];
+      break;
+    case "oo":
+      i = ["oh", "Oh", "oo", "Oo", "o", "O", "OO", "mouth_o", "mouth_O"];
+      break;
+    case "happy":
+      i = ["happy", "Happy", "joy", "Joy", "JOY", "fun", "Fun", "FUN", "HAPPY"];
+      break;
+    case "sad":
+      i = ["sad", "Sad", "sorrow", "Sorrow", "SORROW", "sadness", "SAD"];
+      break;
+    case "relaxed":
+      i = ["relaxed", "Relaxed", "fun", "Fun", "FUN", "neutral", "Neutral", "RELAXED"];
+      break;
+  }
+  const E = i.find((g) => k[g] !== void 0 || U.includes(g));
+  if (E)
+    l.expressionManager.setValue(E, p);
+  else
+    try {
+      l.expressionManager.setValue(i[0], p);
+    } catch {
+    }
+}
+function me({
+  url: l,
+  state: t,
+  analyser: p,
+  maxMouthOpening: k = 30,
+  mouseTrackingIntensity: U = 1,
+  blinkIntervalMin: i = 2e3,
+  blinkIntervalMax: E = 6e3,
+  blinkDuration: g = 100,
+  reducedMotion: L = !1,
+  onLoaded: O
+}) {
+  const e = ie(se, l, (f) => {
+    f.register((h) => new ce(h));
+  }).userData.vrm;
+  C(() => {
+    var f, h;
+    if (e) {
+      O(!0), console.log(
+        "[VRM] Model loaded successfully. Available expressions:",
+        Object.keys(((f = e.expressionManager) == null ? void 0 : f.expressionMap) || {})
+      ), e.scene.traverse((y) => {
+        y.frustumCulled = !1;
+      });
+      const o = ((h = e.meta) == null ? void 0 : h.metaVersion) === "0";
+      e.scene.rotation.y = o ? Math.PI : 0;
+    }
+  }, [e, O]);
+  const x = c(0), m = c(0), u = c(0), A = c(0), z = c(0), v = c(0), M = c(Math.random() * 3 + 2), b = c(0), V = c(!1), P = c(null), S = c(null);
+  return oe((f, h) => {
+    var D, _, H, K, Y, T, X, G, J;
+    if (!e) return;
+    e.update(h);
+    const o = (D = e.humanoid) == null ? void 0 : D.getNormalizedBoneNode("neck"), y = (_ = e.humanoid) == null ? void 0 : _.getNormalizedBoneNode("head");
+    if (((H = e.meta) == null ? void 0 : H.metaVersion) === "0") {
+      const s = (K = e.humanoid) == null ? void 0 : K.getNormalizedBoneNode("leftUpperArm"), N = (Y = e.humanoid) == null ? void 0 : Y.getNormalizedBoneNode("rightUpperArm");
+      s && (s.rotation.z = Math.PI / 2.6), N && (N.rotation.z = -Math.PI / 2.6);
+    }
+    const ee = ((T = f.pointer) == null ? void 0 : T.x) ?? ((X = f.mouse) == null ? void 0 : X.x) ?? 0, re = ((G = f.pointer) == null ? void 0 : G.y) ?? ((J = f.mouse) == null ? void 0 : J.y) ?? 0, B = L ? 0 : U, I = ee * 0.35 * B, F = -re * 0.2 * B;
+    if (o && (o.rotation.y = n.MathUtils.lerp(o.rotation.y, I, 0.1), o.rotation.x = n.MathUtils.lerp(o.rotation.x, F, 0.1)), y && (y.rotation.y = n.MathUtils.lerp(y.rotation.y, I * 0.2, 0.1), y.rotation.x = n.MathUtils.lerp(y.rotation.x, F * 0.2, 0.1)), !L)
+      if (!V.current)
+        M.current -= h, M.current <= 0 && (V.current = !0);
+      else {
+        const s = 1e3 / (g || 100);
+        b.current += h * s * 2, b.current >= 1 && (b.current = 1, V.current = !1, M.current = Math.random() * ((E - i) / 1e3) + i / 1e3);
+      }
+    if (!V.current && b.current > 0) {
+      const s = 1e3 / (g || 100);
+      b.current -= h * s * 2, b.current < 0 && (b.current = 0);
+    }
+    if (e.expressionManager) {
+      d(e, "blink", b.current);
+      let s = 0, N = 0, W = 0;
+      if (t === "listening" ? (s = 0.35, N = 0.2) : t === "thinking" ? (W = 0.25, N = 0.15, o && (o.rotation.y = n.MathUtils.lerp(o.rotation.y, -0.18, 0.05), o.rotation.x = n.MathUtils.lerp(o.rotation.x, 0.12, 0.05))) : t === "speaking" ? s = 0.15 : s = 0.05, A.current = n.MathUtils.lerp(A.current, s, 0.1), z.current = n.MathUtils.lerp(z.current, N, 0.1), v.current = n.MathUtils.lerp(v.current, W, 0.1), d(e, "happy", A.current), d(e, "relaxed", z.current), d(e, "sad", v.current), t === "speaking") {
+        (!P.current || S.current !== p) && (P.current = de(p), S.current = p);
+        const R = P.current.read(), j = k / 30;
+        let Z = 0, $ = 0, q = 0;
+        R.shape === "e" ? $ = R.level * 0.8 * j : R.shape === "o" ? q = R.level * 0.8 * j : R.shape === "a" && (Z = R.level * 0.95 * j), x.current = n.MathUtils.lerp(x.current, Z, 0.25), m.current = n.MathUtils.lerp(m.current, $, 0.25), u.current = n.MathUtils.lerp(u.current, q, 0.25), d(e, "aa", x.current), d(e, "ee", m.current), d(e, "oo", u.current);
+      } else
+        x.current = n.MathUtils.lerp(x.current, 0, 0.2), m.current = n.MathUtils.lerp(m.current, 0, 0.2), u.current = n.MathUtils.lerp(u.current, 0, 0.2), d(e, "aa", x.current), d(e, "ee", m.current), d(e, "oo", u.current);
+      e.expressionManager.update();
+    }
+  }), e ? /* @__PURE__ */ a("primitive", { object: e.scene }) : null;
+}
+function Ee({
+  state: l,
+  analyser: t,
+  size: p = 300,
+  className: k = "",
+  style: U,
+  maxMouthOpening: i,
+  blinkIntervalMin: E,
+  blinkIntervalMax: g,
+  blinkDuration: L,
+  mouseTrackingIntensity: O,
+  stateColors: r,
+  vrmUrl: e
+}) {
+  const [x, m] = Q(!1), [u, A] = Q(null), z = ue();
+  C(() => {
+    m(!1), A(null);
+  }, [e]);
+  const v = {
+    idle: (r == null ? void 0 : r.idle) ?? "#4b5563",
+    listening: (r == null ? void 0 : r.listening) ?? "#3b82f6",
+    thinking: (r == null ? void 0 : r.thinking) ?? "#8b5cf6",
+    speaking: (r == null ? void 0 : r.speaking) ?? "#10b981",
+    working: (r == null ? void 0 : r.working) ?? "#f59e0b"
+  };
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      className: `relative flex items-center justify-center rounded-3xl overflow-hidden border border-zinc-800/40 bg-zinc-950/40 ${k}`,
+      style: { width: p, height: p, ...U },
+      children: [
+        /* @__PURE__ */ w(
+          ae,
+          {
+            camera: { position: [0, 1.43, 0.88], fov: 44 },
+            shadows: !0,
+            gl: { antialias: !0, alpha: !0, preserveDrawingBuffer: !0 },
+            style: { width: "100%", height: "100%", background: "transparent" },
+            children: [
+              /* @__PURE__ */ a("ambientLight", { intensity: 1.5 }),
+              /* @__PURE__ */ a(
+                "spotLight",
+                {
+                  position: [0, 3, 2],
+                  angle: 0.6,
+                  penumbra: 1,
+                  intensity: 3,
+                  color: v[l],
+                  castShadow: !0
+                }
+              ),
+              /* @__PURE__ */ a("directionalLight", { position: [-2, 2, -2], intensity: 1.8, color: "#ffffff" }),
+              /* @__PURE__ */ a("directionalLight", { position: [2, 2, 2], intensity: 2.2, color: "#ffffff" }),
+              /* @__PURE__ */ a(pe, { onError: (M) => A(M), children: e && /* @__PURE__ */ a(ne, { fallback: null, children: /* @__PURE__ */ a(
+                me,
+                {
+                  url: e,
+                  state: l,
+                  analyser: t,
+                  maxMouthOpening: i,
+                  mouseTrackingIntensity: O,
+                  blinkIntervalMin: E,
+                  blinkIntervalMax: g,
+                  blinkDuration: L,
+                  reducedMotion: z,
+                  onLoaded: (M) => m(M)
+                }
+              ) }) }),
+              /* @__PURE__ */ a(
+                le,
+                {
+                  enableZoom: !1,
+                  enablePan: !1,
+                  minPolarAngle: Math.PI / 2.6,
+                  maxPolarAngle: Math.PI / 1.7,
+                  minAzimuthAngle: -Math.PI / 4,
+                  maxAzimuthAngle: Math.PI / 4,
+                  target: [0, 1.38, 0]
+                }
+              )
+            ]
+          }
+        ),
+        !e && /* @__PURE__ */ w("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/90 backdrop-blur-md z-20 p-4 text-center", children: [
+          /* @__PURE__ */ a("span", { className: "text-xs font-mono font-bold text-amber-400 uppercase tracking-wider mb-2", children: "Missing vrmUrl" }),
+          /* @__PURE__ */ a("p", { className: "text-[10px] text-zinc-500 max-w-[200px] leading-relaxed", children: "Pass a CORS-enabled .vrm URL via the vrmUrl prop." })
+        ] }),
+        e && !x && !u && /* @__PURE__ */ w("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/80 backdrop-blur-md z-20", children: [
+          /* @__PURE__ */ a("div", { className: "w-10 h-10 border-4 border-t-emerald-500 border-emerald-500/20 rounded-full animate-spin mb-3" }),
+          /* @__PURE__ */ a("span", { className: "text-[10px] font-mono font-bold tracking-widest text-zinc-400 animate-pulse", children: "LOADING NEURAL VRM MODEL..." })
+        ] }),
+        u && /* @__PURE__ */ w("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/90 backdrop-blur-md z-20 p-4 text-center", children: [
+          /* @__PURE__ */ a("span", { className: "text-xs font-mono font-bold text-red-400 uppercase tracking-wider mb-2", children: "Failed to load VRM" }),
+          /* @__PURE__ */ a("p", { className: "text-[10px] text-zinc-500 max-w-[200px] leading-relaxed break-all", children: u })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Ee as VrmAvatar
+};

package/dist/lib/VrmAvatar-D_jr2TOG.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),P=require("@react-three/fiber"),te=require("three/addons/loaders/GLTFLoader.js"),re=require("@pixiv/three-vrm"),ne=require("@react-three/drei"),ae=require("three"),Q=require("./useReducedMotion-BRDEmRNI.cjs");function ie(a){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const o in a)if(o!=="default"){const p=Object.getOwnPropertyDescriptor(a,o);Object.defineProperty(r,o,p.get?p:{enumerable:!0,get:()=>a[o]})}}return r.default=a,Object.freeze(r)}const s=ie(ae);class se extends n.Component{constructor(r){super(r),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(r){this.props.onError((r==null?void 0:r.message)||String(r))}render(){return this.state.hasError?null:this.props.children}}function f(a,r,o){if(!a.expressionManager)return;const p=a.expressionManager.expressionMap||{},N=Object.keys(p);let c=[];switch(r){case"blink":c=["blink","Blink","BLINK"];break;case"aa":c=["aa","Aa","a","A","AA","mouth_a","mouth_A"];break;case"ee":c=["ee","Ee","e","E","EE","mouth_e","mouth_E"];break;case"oo":c=["oh","Oh","oo","Oo","o","O","OO","mouth_o","mouth_O"];break;case"happy":c=["happy","Happy","joy","Joy","JOY","fun","Fun","FUN","HAPPY"];break;case"sad":c=["sad","Sad","sorrow","Sorrow","SORROW","sadness","SAD"];break;case"relaxed":c=["relaxed","Relaxed","fun","Fun","FUN","neutral","Neutral","RELAXED"];break}const R=c.find(g=>p[g]!==void 0||N.includes(g));if(R)a.expressionManager.setValue(R,o);else try{a.expressionManager.setValue(c[0],o)}catch{}}function oe({url:a,state:r,analyser:o,maxMouthOpening:p=30,mouseTrackingIntensity:N=1,blinkIntervalMin:c=2e3,blinkIntervalMax:R=6e3,blinkDuration:g=100,reducedMotion:U=!1,onLoaded:z}){const e=P.useLoader(te.GLTFLoader,a,m=>{m.register(x=>new re.VRMLoaderPlugin(x))}).userData.vrm;n.useEffect(()=>{var m,x;if(e){z(!0),console.log("[VRM] Model loaded successfully. Available expressions:",Object.keys(((m=e.expressionManager)==null?void 0:m.expressionMap)||{})),e.scene.traverse(j=>{j.frustumCulled=!1});const l=((x=e.meta)==null?void 0:x.metaVersion)==="0";e.scene.rotation.y=l?Math.PI:0}},[e,z]);const b=n.useRef(0),h=n.useRef(0),d=n.useRef(0),k=n.useRef(0),O=n.useRef(0),v=n.useRef(0),y=n.useRef(Math.random()*3+2),M=n.useRef(0),w=n.useRef(!1),L=n.useRef(null),S=n.useRef(null);return P.useFrame((m,x)=>{var F,I,q,T,H,K,Y,G,X;if(!e)return;e.update(x);const l=(F=e.humanoid)==null?void 0:F.getNormalizedBoneNode("neck"),j=(I=e.humanoid)==null?void 0:I.getNormalizedBoneNode("head");if(((q=e.meta)==null?void 0:q.metaVersion)==="0"){const u=(T=e.humanoid)==null?void 0:T.getNormalizedBoneNode("leftUpperArm"),E=(H=e.humanoid)==null?void 0:H.getNormalizedBoneNode("rightUpperArm");u&&(u.rotation.z=Math.PI/2.6),E&&(E.rotation.z=-Math.PI/2.6)}const C=((K=m.pointer)==null?void 0:K.x)??((Y=m.mouse)==null?void 0:Y.x)??0,ee=((G=m.pointer)==null?void 0:G.y)??((X=m.mouse)==null?void 0:X.y)??0,_=U?0:N,B=C*.35*_,D=-ee*.2*_;if(l&&(l.rotation.y=s.MathUtils.lerp(l.rotation.y,B,.1),l.rotation.x=s.MathUtils.lerp(l.rotation.x,D,.1)),j&&(j.rotation.y=s.MathUtils.lerp(j.rotation.y,B*.2,.1),j.rotation.x=s.MathUtils.lerp(j.rotation.x,D*.2,.1)),!U)if(!w.current)y.current-=x,y.current<=0&&(w.current=!0);else{const u=1e3/(g||100);M.current+=x*u*2,M.current>=1&&(M.current=1,w.current=!1,y.current=Math.random()*((R-c)/1e3)+c/1e3)}if(!w.current&&M.current>0){const u=1e3/(g||100);M.current-=x*u*2,M.current<0&&(M.current=0)}if(e.expressionManager){f(e,"blink",M.current);let u=0,E=0,J=0;if(r==="listening"?(u=.35,E=.2):r==="thinking"?(J=.25,E=.15,l&&(l.rotation.y=s.MathUtils.lerp(l.rotation.y,-.18,.05),l.rotation.x=s.MathUtils.lerp(l.rotation.x,.12,.05))):r==="speaking"?u=.15:u=.05,k.current=s.MathUtils.lerp(k.current,u,.1),O.current=s.MathUtils.lerp(O.current,E,.1),v.current=s.MathUtils.lerp(v.current,J,.1),f(e,"happy",k.current),f(e,"relaxed",O.current),f(e,"sad",v.current),r==="speaking"){(!L.current||S.current!==o)&&(L.current=Q.createMouthEngine(o),S.current=o);const A=L.current.read(),V=p/30;let W=0,Z=0,$=0;A.shape==="e"?Z=A.level*.8*V:A.shape==="o"?$=A.level*.8*V:A.shape==="a"&&(W=A.level*.95*V),b.current=s.MathUtils.lerp(b.current,W,.25),h.current=s.MathUtils.lerp(h.current,Z,.25),d.current=s.MathUtils.lerp(d.current,$,.25),f(e,"aa",b.current),f(e,"ee",h.current),f(e,"oo",d.current)}else b.current=s.MathUtils.lerp(b.current,0,.2),h.current=s.MathUtils.lerp(h.current,0,.2),d.current=s.MathUtils.lerp(d.current,0,.2),f(e,"aa",b.current),f(e,"ee",h.current),f(e,"oo",d.current);e.expressionManager.update()}}),e?t.jsx("primitive",{object:e.scene}):null}function ce({state:a,analyser:r,size:o=300,className:p="",style:N,maxMouthOpening:c,blinkIntervalMin:R,blinkIntervalMax:g,blinkDuration:U,mouseTrackingIntensity:z,stateColors:i,vrmUrl:e}){const[b,h]=n.useState(!1),[d,k]=n.useState(null),O=Q.useReducedMotion();n.useEffect(()=>{h(!1),k(null)},[e]);const v={idle:(i==null?void 0:i.idle)??"#4b5563",listening:(i==null?void 0:i.listening)??"#3b82f6",thinking:(i==null?void 0:i.thinking)??"#8b5cf6",speaking:(i==null?void 0:i.speaking)??"#10b981",working:(i==null?void 0:i.working)??"#f59e0b"};return t.jsxs("div",{className:`relative flex items-center justify-center rounded-3xl overflow-hidden border border-zinc-800/40 bg-zinc-950/40 ${p}`,style:{width:o,height:o,...N},children:[t.jsxs(P.Canvas,{camera:{position:[0,1.43,.88],fov:44},shadows:!0,gl:{antialias:!0,alpha:!0,preserveDrawingBuffer:!0},style:{width:"100%",height:"100%",background:"transparent"},children:[t.jsx("ambientLight",{intensity:1.5}),t.jsx("spotLight",{position:[0,3,2],angle:.6,penumbra:1,intensity:3,color:v[a],castShadow:!0}),t.jsx("directionalLight",{position:[-2,2,-2],intensity:1.8,color:"#ffffff"}),t.jsx("directionalLight",{position:[2,2,2],intensity:2.2,color:"#ffffff"}),t.jsx(se,{onError:y=>k(y),children:e&&t.jsx(n.Suspense,{fallback:null,children:t.jsx(oe,{url:e,state:a,analyser:r,maxMouthOpening:c,mouseTrackingIntensity:z,blinkIntervalMin:R,blinkIntervalMax:g,blinkDuration:U,reducedMotion:O,onLoaded:y=>h(y)})})}),t.jsx(ne.OrbitControls,{enableZoom:!1,enablePan:!1,minPolarAngle:Math.PI/2.6,maxPolarAngle:Math.PI/1.7,minAzimuthAngle:-Math.PI/4,maxAzimuthAngle:Math.PI/4,target:[0,1.38,0]})]}),!e&&t.jsxs("div",{className:"absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/90 backdrop-blur-md z-20 p-4 text-center",children:[t.jsx("span",{className:"text-xs font-mono font-bold text-amber-400 uppercase tracking-wider mb-2",children:"Missing vrmUrl"}),t.jsx("p",{className:"text-[10px] text-zinc-500 max-w-[200px] leading-relaxed",children:"Pass a CORS-enabled .vrm URL via the vrmUrl prop."})]}),e&&!b&&!d&&t.jsxs("div",{className:"absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/80 backdrop-blur-md z-20",children:[t.jsx("div",{className:"w-10 h-10 border-4 border-t-emerald-500 border-emerald-500/20 rounded-full animate-spin mb-3"}),t.jsx("span",{className:"text-[10px] font-mono font-bold tracking-widest text-zinc-400 animate-pulse",children:"LOADING NEURAL VRM MODEL..."})]}),d&&t.jsxs("div",{className:"absolute inset-0 flex flex-col items-center justify-center bg-zinc-950/90 backdrop-blur-md z-20 p-4 text-center",children:[t.jsx("span",{className:"text-xs font-mono font-bold text-red-400 uppercase tracking-wider mb-2",children:"Failed to load VRM"}),t.jsx("p",{className:"text-[10px] text-zinc-500 max-w-[200px] leading-relaxed break-all",children:d})]})]})}exports.VrmAvatar=ce;

package/dist/lib/components/AudioVisualizer.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AvatarState } from '../lib/types';
+export interface AudioVisualizerProps {
+    analyser: AnalyserNode | null;
+    state: AvatarState;
+    height?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    stateColors?: {
+        idle?: string;
+        listening?: string;
+        thinking?: string;
+        speaking?: string;
+        working?: string;
+    };
+}
+export declare function AudioVisualizer({ analyser, state, height, className, style, stateColors }: AudioVisualizerProps): React.JSX.Element;

package/dist/lib/components/ContractAvatar.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { AvatarState, StateColors } from '../lib/types';
+import type { MouthSource } from '../lib/mouthEngine';
+/**
+ * Wraps any SVG implementing the layer contract (`#rra-*` hooks) and runs
+ * the animation runtime over it. Used by the built-in contract presets
+ * (geometric, …) and by `variant="byos"` where the children are the
+ * developer's own SVG.
+ */
+export interface ContractAvatarProps {
+    state: AvatarState;
+    /** Mouth source: AnalyserNode (audio), SpeechActivitySource (text), or null. */
+    analyser: MouthSource;
+    size?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    maxMouthOpening?: number;
+    mouseTrackingIntensity?: number;
+    blinkIntervalMin?: number;
+    blinkIntervalMax?: number;
+    blinkDuration?: number;
+    stateColors?: StateColors;
+    children: React.ReactNode;
+}
+export declare function ContractAvatar({ state, analyser, size, className, style, maxMouthOpening, mouseTrackingIntensity, blinkIntervalMin, blinkIntervalMax, blinkDuration, stateColors, children, }: ContractAvatarProps): React.JSX.Element;

package/dist/lib/components/DefaultAvatar.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { AvatarState } from '../lib/types';
+import type { MouthSource } from '../lib/mouthEngine';
+export interface AvatarCustomization {
+    skinColor: string;
+    hairColor: string;
+    clothingColor: string;
+    hoodieColor: string;
+    bgColor: string;
+    glasses: boolean;
+    glassesColor: string;
+    headphones: boolean;
+    headphonesColor: string;
+}
+export declare function darkenColor(hex: string, percent: number): string;
+export interface AvatarProps {
+    state: AvatarState;
+    /** Mouth source: AnalyserNode (audio), SpeechActivitySource (text), or null. */
+    analyser: MouthSource;
+    size?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    maxMouthOpening?: number;
+    blinkIntervalMin?: number;
+    blinkIntervalMax?: number;
+    blinkDuration?: number;
+    mouseTrackingIntensity?: number;
+    stateColors?: {
+        idle?: string;
+        listening?: string;
+        thinking?: string;
+        speaking?: string;
+        working?: string;
+    };
+    customization?: AvatarCustomization;
+}
+export declare function DefaultAvatar({ state, analyser, size, className, style, maxMouthOpening, blinkIntervalMin, blinkIntervalMax, blinkDuration, stateColors, customization }: AvatarProps): React.JSX.Element;

package/dist/lib/components/DiceBearAvatar.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { AvatarState, StateColors } from '../lib/types';
+import { MouthSource } from '../lib/mouthEngine';
+import { DiceBearCollection } from '../lib/dicebear';
+/**
+ * DiceBearAvatar — renders a DiceBear (https://www.dicebear.com) avatar and
+ * makes it talk.
+ *
+ * Two animation strategies, picked per style:
+ *
+ * 1. **Viseme swapping** (styles with a face: pixel-art, lorelei, notionists,
+ *    thumbs, open-peeps). DiceBear has no `#rra-*` hooks, but its option API
+ *    lets us pick which mouth/eyes variant to render. So we pre-generate a few
+ *    frames of the SAME avatar (same seed ⇒ identical hair/skin/etc.) with
+ *    closed / mid / open mouths (+ optional blink) and swap which one is shown
+ *    per audio frame. Real articulation, via the supported API — no fragile
+ *    path heuristics. A subtle bounce rides on top for liveliness. The per-style
+ *    variant choices live in `DICEBEAR_RIGS`.
+ *
+ * 2. **Audio-reactive bounce** — fallback for any non-rigged style id a host
+ *    passes itself (e.g. a faceless abstract DiceBear style). The whole avatar
+ *    squashes & lifts with amplitude. The curated catalog has none of these.
+ *
+ * Generation is client-side and lazy: `@dicebear/core` + `@dicebear/collection`
+ * are optional peer deps, dynamically imported only when this variant renders.
+ * Deterministic per `seed`, no network call. The curated catalog is CC0-only
+ * (see ../lib/dicebear.ts) so the library keeps its no-attribution promise.
+ */
+export interface DiceBearAvatarProps {
+    state: AvatarState;
+    /** Mouth source: AnalyserNode (audio), SpeechActivitySource (text), or null. */
+    analyser: MouthSource;
+    size?: number;
+    /** Curated CC0 style; any DiceBear style id also works at your own licensing discretion. */
+    collection?: DiceBearCollection | string;
+    /** Deterministic seed — same seed + style => same face. */
+    seed?: string;
+    /** DiceBear background colors (hex without `#`, e.g. ['b6e3f4']). */
+    backgroundColor?: string[];
+    /** DiceBear background corner radius, 0–50. */
+    radius?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Reused as bounce/mouth intensity (same slider as the SVG presets). */
+    maxMouthOpening?: number;
+    stateColors?: StateColors;
+}
+export declare function DiceBearAvatar({ state, analyser, size, collection, seed, backgroundColor, radius, className, style, maxMouthOpening, stateColors, }: DiceBearAvatarProps): React.JSX.Element;

package/dist/lib/components/DiceBearThumb.d.ts

@@ -0,0 +1,15 @@
+import { DiceBearCollection } from '../lib/dicebear';
+/**
+ * Static, non-animated DiceBear face — a single SVG generated client-side for a
+ * given style + seed. Used by the face-picker gallery so users see the actual
+ * faces instead of guessing seed strings. Shares the lazy package load + module
+ * cache with `DiceBearAvatar` (see `loadDiceBear`), so a grid of thumbnails only
+ * pays for one package import.
+ */
+export interface DiceBearThumbProps {
+    collection: DiceBearCollection | string;
+    seed: string;
+    size?: number;
+    className?: string;
+}
+export declare function DiceBearThumb({ collection, seed, size, className }: DiceBearThumbProps): import("react").JSX.Element;

package/dist/lib/components/DoodleAvatar.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AvatarCustomization } from './DefaultAvatar';
+import { AvatarState } from '../lib/types';
+/**
+ * DoodleAvatar — hand-drawn ink-on-paper sketch style: wobbly outlines,
+ * scribbled hair, slightly imperfect strokes. The "imperfection" is drawn
+ * into the paths; the runtime adds the life (blink, gaze, mouth).
+ *
+ * Implements the layer contract (see useAvatarRuntime).
+ * License: MIT. Own design (no third-party assets).
+ */
+export interface DoodleAvatarProps {
+    size?: number;
+    customization?: Partial<AvatarCustomization>;
+    inkColor?: string;
+    /** Accepted for a uniform preset API; this head-only preset doesn't use it. */
+    state?: AvatarState;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function DoodleAvatar({ size, customization, inkColor, className, style, }: DoodleAvatarProps): React.JSX.Element;

package/dist/lib/components/GeometricAvatar.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AvatarCustomization } from './DefaultAvatar';
+import { AvatarState } from '../lib/types';
+/**
+ * GeometricAvatar — minimalist geometric SVG avatar (head only).
+ *
+ * Purpose: the library's default preset AND the canonical example of the
+ * layer contract (see useAvatarRuntime). Purely presentational: it does not
+ * animate by itself — it exposes stable ids/classes the runtime drives.
+ *
+ * License: MIT. Own design (no third-party assets, no attribution needed).
+ */
+export interface GeometricAvatarProps {
+    size?: number;
+    customization?: Partial<AvatarCustomization>;
+    mouthColor?: string;
+    /** Accepted for a uniform preset API; this head-only preset doesn't use it. */
+    state?: AvatarState;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function GeometricAvatar({ size, customization, mouthColor, className, style, }: GeometricAvatarProps): React.JSX.Element;

package/dist/lib/components/GlbArkitAvatar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AvatarProps } from './DefaultAvatar';
+export interface GlbArkitAvatarProps extends AvatarProps {
+    /** CORS-enabled .glb URL with ARKit blendshapes (e.g. a converted Rocketbox avatar). */
+    glbUrl?: string;
+}
+export declare function GlbArkitAvatar({ state, analyser, size, className, style, maxMouthOpening, blinkIntervalMin, blinkIntervalMax, blinkDuration, mouseTrackingIntensity, stateColors, glbUrl, }: GlbArkitAvatarProps): React.JSX.Element;

package/dist/lib/components/MemojiAvatar.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { AvatarCustomization } from './DefaultAvatar';
+import { AvatarState } from '../lib/types';
+/**
+ * MemojiAvatar — soft, volumetric SVG head in the spirit of Apple's memoji:
+ * radial gradients for skin volume, glossy eyes with highlights, blush.
+ *
+ * Implements the layer contract (see useAvatarRuntime).
+ * License: MIT. Own design (no third-party assets).
+ */
+export interface MemojiAvatarProps {
+    size?: number;
+    customization?: Partial<AvatarCustomization>;
+    /** Accepted for a uniform preset API; this head-only preset doesn't use it. */
+    state?: AvatarState;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function MemojiAvatar({ size, customization, className, style, }: MemojiAvatarProps): React.JSX.Element;

package/dist/lib/components/PixelArtAvatar.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { AvatarCustomization } from './DefaultAvatar';
+import { AvatarState } from '../lib/types';
+/**
+ * PixelArtAvatar — retro avatar on a logical 32x32 grid.
+ *
+ * Everything renders with crisp edges, and motion is intentionally chunky:
+ * the runtime snaps the mouth and pupils to whole pixels (`data-quantize`),
+ * and the eyelids close in two frames worth of pixels. That quantized look
+ * IS the aesthetic.
+ *
+ * Implements the layer contract (see useAvatarRuntime).
+ * License: MIT. Own design (no third-party assets).
+ */
+export interface PixelArtAvatarProps {
+    size?: number;
+    customization?: Partial<AvatarCustomization>;
+    /** Accepted for a uniform preset API; this head-only preset doesn't use it. */
+    state?: AvatarState;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function PixelArtAvatar({ size, customization, className, style, }: PixelArtAvatarProps): React.JSX.Element;

package/dist/lib/components/RealtimeAvatar.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { AvatarCustomization } from './DefaultAvatar';
+import { AvatarState } from '../lib/types';
+import type { SpeechActivitySource } from '../lib/speechActivity';
+import type { DiceBearCollection } from '../lib/dicebear';
+export interface RealtimeAvatarProps {
+    state: AvatarState;
+    /**
+     * WebAudio AnalyserNode for the audio-reactive mouth (voice pipelines).
+     * Optional: omit it (or pass `null`) and `speaking` falls back to a
+     * synthetic speech-like pattern — so the minimal usage is just
+     * `<RealtimeAvatar state={state} />`.
+     */
+    analyser?: AnalyserNode | null;
+    /**
+     * Token-rate mouth driver for text-streaming LLMs (OpenAI-style
+     * `/chat/completions` or `/responses` with `stream: true`). Create one with
+     * `createSpeechActivity()` and `push()` each streamed chunk. When provided,
+     * it drives the mouth instead of `analyser` — so a text-only assistant still
+     * gets a face that tracks the stream. See `createSpeechActivity`.
+     */
+    speechActivity?: SpeechActivitySource;
+    /**
+     * Declarative mouth driver for text-streaming chats. Pass the *accumulated*
+     * assistant text (the kind a hook like the Vercel AI SDK's `useChat` hands
+     * you — it grows each render); the avatar diffs its growth internally and
+     * drives the mouth from token cadence. No `createSpeechActivity`, no reader
+     * loop. Ignored when `speechActivity` is set; takes precedence over
+     * `analyser`. See `useStreamingTextActivity`.
+     */
+    streamingText?: string;
+    size?: number;
+    variant?: 'geometric' | 'memoji' | 'pixelart' | 'doodle' | 'vrm' | 'glb' | 'dicebear' | 'byos';
+    /** Your own contract-compliant SVG, rendered when variant="byos". */
+    children?: React.ReactNode;
+    vrmUrl?: string;
+    /** CORS-enabled .glb URL with ARKit blendshapes, for variant="glb". */
+    glbUrl?: string;
+    /** DiceBear style id (curated CC0 set), for variant="dicebear". */
+    dicebearCollection?: DiceBearCollection | string;
+    /** Deterministic DiceBear seed, for variant="dicebear". */
+    dicebearSeed?: string;
+    subtitle?: string;
+    thought?: string;
+    tool?: string;
+    /** HUD satellites — all on by default; set false to hide individually. */
+    showGlow?: boolean;
+    showStatePill?: boolean;
+    showThought?: boolean;
+    showSubtitle?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    maxMouthOpening?: number;
+    blinkIntervalMin?: number;
+    blinkIntervalMax?: number;
+    blinkDuration?: number;
+    mouseTrackingIntensity?: number;
+    stateColors?: {
+        idle?: string;
+        listening?: string;
+        thinking?: string;
+        speaking?: string;
+        working?: string;
+    };
+    stateLabels?: {
+        idle?: string;
+        listening?: string;
+        thinking?: string;
+        speaking?: string;
+        working?: string;
+    };
+    customization?: AvatarCustomization;
+}
+export declare function RealtimeAvatar({ state, analyser, speechActivity, streamingText, size, variant, children, vrmUrl, glbUrl, subtitle, thought, tool, showGlow, showStatePill, showThought, showSubtitle, className, style, dicebearCollection, dicebearSeed, maxMouthOpening, blinkIntervalMin, blinkIntervalMax, blinkDuration, mouseTrackingIntensity, stateColors, stateLabels, customization }: RealtimeAvatarProps): React.JSX.Element;

package/dist/lib/components/SquirrelAvatar.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { AvatarCustomization } from './DefaultAvatar';
+/**
+ * SquirrelAvatar — a full branded character (red-squirrel developer) drawn as a
+ * flat-vector face: tufted ears, bushy tail, round glasses, brown quiff, hoodie +
+ * circuit tee, and a neck bridging head and body. Own design (MIT, no third-party
+ * assets).
+ *
+ * It implements the layer contract (see useAvatarRuntime) exactly like the built-in
+ * presets, so the runtime drives blink / gaze / mouth for free. No state ring —
+ * matches the other presets, which dropped theirs. The fur color is reused for BOTH
+ * eyelids on purpose — recolor it and a blink still reads as the face coming down
+ * over the eye.
+ *
+ * In the demo it's rendered through `variant="byos"`; it's also the worked example
+ * behind the `rra-character-avatar` skill.
+ */
+import type { AvatarState } from '../lib/types';
+export interface SquirrelAvatarProps {
+    /** SVG width/height. Defaults to `'100%'` so the squirrel fills its (sized)
+     *  container — e.g. the box `ContractAvatar`/`RealtimeAvatar` already reserves.
+     *  Pass a number for a fixed pixel size. */
+    size?: number | string;
+    customization?: Partial<AvatarCustomization>;
+    state?: AvatarState;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function SquirrelAvatar({ size, customization, state, className, style, }: SquirrelAvatarProps): React.JSX.Element;

package/dist/lib/components/VrmAvatar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AvatarProps } from './DefaultAvatar';
+export interface VrmAvatarProps extends AvatarProps {
+    vrmUrl?: string;
+}
+export declare function VrmAvatar({ state, analyser, size, className, style, maxMouthOpening, blinkIntervalMin, blinkIntervalMax, blinkDuration, mouseTrackingIntensity, stateColors, vrmUrl, }: VrmAvatarProps): React.JSX.Element;