orb-ui 0.1.0

package/README.md

@@ -0,0 +1,114 @@
+# orb-ui
+
+The simplest way to add voice UI to your React app. One install, one component, works with Vapi and ElevenLabs out of the box.
+
+```jsx
+import { VoiceOrb } from 'orb-ui'
+import { createVapiAdapter } from 'orb-ui/adapters'
+
+<VoiceOrb adapter={createVapiAdapter(vapi, { assistantId: 'your-id' })} theme="circle" />
+```
+
+## Install
+
+```bash
+npm install orb-ui
+# or
+yarn add orb-ui
+```
+
+## Quick Start
+
+### With Vapi
+
+```jsx
+import Vapi from '@vapi-ai/web'
+import { VoiceOrb } from 'orb-ui'
+import { createVapiAdapter } from 'orb-ui/adapters'
+
+const vapi = new Vapi('your-public-key')
+const adapter = createVapiAdapter(vapi, { assistantId: 'your-assistant-id' })
+
+function App() {
+  return <VoiceOrb adapter={adapter} theme="circle" />
+}
+```
+
+### With ElevenLabs
+
+```jsx
+import { Conversation } from '@elevenlabs/client'
+import { VoiceOrb } from 'orb-ui'
+import { createElevenLabsAdapter } from 'orb-ui/adapters'
+
+const adapter = createElevenLabsAdapter(Conversation, { agentId: 'your-agent-id' })
+
+function App() {
+  return <VoiceOrb adapter={adapter} theme="circle" />
+}
+```
+
+### Controlled mode (custom integration)
+
+```jsx
+import { VoiceOrb } from 'orb-ui'
+import { useState } from 'react'
+
+function App() {
+  const [state, setState] = useState('idle')
+  const [volume, setVolume] = useState(0)
+
+  return <VoiceOrb state={state} volume={volume} theme="circle" />
+}
+```
+
+## Themes
+
+| Theme | Description |
+|---|---|
+| `debug` | State + volume display with start/stop. Use to verify your integration works. |
+| `circle` | Pulsing circle that reacts to volume. |
+| `bars` | Three bars that animate with voice. |
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `theme` | `'debug' \| 'circle' \| 'bars'` | `'debug'` | Visual theme |
+| `state` | `OrbState` | `'idle'` | Conversation state (controlled mode) |
+| `volume` | `number` | `0` | Audio volume, 0–1 (controlled mode) |
+| `adapter` | `OrbAdapter` | — | Provider adapter (manages state + volume automatically) |
+| `size` | `number` | `200` | Size in pixels |
+| `onStart` | `() => void` | — | Custom start handler (overrides adapter.start()) |
+| `onStop` | `() => void` | — | Custom stop handler (overrides adapter.stop()) |
+
+## States
+
+`idle` · `connecting` · `listening` · `thinking` · `speaking` · `error` · `disconnected`
+
+## Supported Providers
+
+| Provider | Adapter |
+|---|---|
+| [Vapi](https://vapi.ai) | `createVapiAdapter` from `orb-ui/adapters` |
+| [ElevenLabs](https://elevenlabs.io/conversational-ai) | `createElevenLabsAdapter` from `orb-ui/adapters` |
+| Custom | Use controlled mode — pass `state` and `volume` directly |
+
+## Development
+
+```bash
+git clone https://github.com/alexanderqchen/orb-ui.git
+cd orb-ui
+yarn install
+cd demo && yarn install && cd ..
+
+# Build the library
+yarn build
+
+# Run demo locally
+cd demo && yarn dev
+```
+
+## License
+
+MIT © [Alexander Chen](https://github.com/alexanderqchen)

package/dist/adapters.d.ts

@@ -0,0 +1,146 @@
+export declare interface AdapterCallbacks {
+    onStateChange: (state: OrbState) => void;
+    onVolumeChange: (volume: number) => void;
+}
+
+/**
+ * Creates an OrbAdapter for ElevenLabs Conversational AI.
+ *
+ * Unlike createVapiAdapter, this adapter owns the session lifecycle because
+ * ElevenLabs requires callbacks to be injected at Conversation.startSession()
+ * time. Use the returned start() and stop() methods with VoiceOrb's props.
+ *
+ * @param ConversationClass - The Conversation class from @elevenlabs/client
+ * @param config            - agentId / signedUrl + any other startSession options
+ *
+ * @example
+ * import { Conversation } from '@elevenlabs/client'
+ * import { VoiceOrb } from 'orb-ui'
+ * import { createElevenLabsAdapter } from 'orb-ui/adapters'
+ *
+ * const adapter = createElevenLabsAdapter(Conversation, {
+ *   agentId: 'your-agent-id',
+ * })
+ *
+ * function App() {
+ *   return (
+ *     <VoiceOrb
+ *       adapter={adapter}
+ *       theme="circle"
+ *       onStart={() => adapter.start()}
+ *       onStop={() => adapter.stop()}
+ *     />
+ *   )
+ * }
+ */
+export declare function createElevenLabsAdapter(ConversationClass: ElevenLabsConversationClass, config: ElevenLabsConfig): ElevenLabsOrbAdapter;
+
+export declare function createVapiAdapter(client: VapiClient, options?: VapiAdapterOptions): OrbAdapter;
+
+declare interface ElevenLabsCallbacks {
+    onConnect?: (props: {
+        conversationId: string;
+    }) => void;
+    onDisconnect?: (details: unknown) => void;
+    onError?: (message: string, context?: unknown) => void;
+    onModeChange?: (prop: {
+        mode: ElevenLabsMode;
+    }) => void;
+    onStatusChange?: (prop: {
+        status: ElevenLabsStatus;
+    }) => void;
+    onVadScore?: (props: {
+        vadScore: number;
+    }) => void;
+}
+
+declare type ElevenLabsConfig = {
+    agentId?: string;
+    signedUrl?: string;
+    [key: string]: unknown;
+};
+
+declare interface ElevenLabsConversation {
+    endSession(): Promise<void>;
+    getInputVolume(): number;
+    getOutputVolume(): number;
+    getInputByteFrequencyData(): Uint8Array;
+    getOutputByteFrequencyData(): Uint8Array;
+}
+
+declare interface ElevenLabsConversationClass {
+    startSession(options: ElevenLabsConfig & ElevenLabsCallbacks): Promise<ElevenLabsConversation>;
+}
+
+declare type ElevenLabsMode = 'speaking' | 'listening';
+
+export declare interface ElevenLabsOrbAdapter extends OrbAdapter {
+    /** Call this from VoiceOrb's onStart prop to begin a conversation. */
+    start(): Promise<void>;
+    /** Call this from VoiceOrb's onStop prop to end the current conversation. */
+    stop(): Promise<void>;
+}
+
+declare type ElevenLabsStatus = 'disconnected' | 'connecting' | 'connected' | 'disconnecting';
+
+export declare interface OrbAdapter {
+    /**
+     * Subscribe to state and volume changes from a voice provider.
+     * Returns an unsubscribe function to clean up listeners.
+     */
+    subscribe(callbacks: {
+        onStateChange: (state: OrbState) => void;
+        onVolumeChange: (volume: number) => void;
+    }): () => void;
+    /** Start the voice session. Called internally by VoiceOrb on click. */
+    start?: () => void | Promise<void>;
+    /** Stop the voice session. Called internally by VoiceOrb on click. */
+    stop?: () => void | Promise<void>;
+}
+
+export declare type OrbState = 'idle' | 'connecting' | 'listening' | 'thinking' | 'speaking' | 'error' | 'disconnected';
+
+/**
+ * Creates an OrbAdapter for Vapi voice agents.
+ *
+ * State mapping:
+ *   vapi.start() called (intercepted)      → 'connecting'
+ *   call-start                             → 'listening'
+ *   message (final user transcript)        → 'thinking'
+ *   speech-start                           → 'speaking'
+ *   speech-end                             → 'listening'  (debounced 350 ms)
+ *   call-end                               → 'disconnected'
+ *   error                                  → 'error'
+ *
+ * Volume: raw Vapi values are normalized (noise gate + EMA) before being
+ * passed to onVolumeChange, so themes receive a clean 0–1 signal.
+ *
+ * @param client  - A Vapi instance from @vapi-ai/web
+ * @param options - Optional config (e.g. assistantId to pass to vapi.start())
+ */
+declare interface VapiAdapterOptions {
+    /** Assistant ID passed to vapi.start() when the orb is clicked. */
+    assistantId?: string;
+}
+
+declare interface VapiClient {
+    on(event: 'call-start', listener: () => void): void;
+    on(event: 'call-end', listener: () => void): void;
+    on(event: 'speech-start', listener: () => void): void;
+    on(event: 'speech-end', listener: () => void): void;
+    on(event: 'volume-level', listener: (volume: number) => void): void;
+    on(event: 'message', listener: (message: VapiMessage) => void): void;
+    on(event: 'error', listener: (error: unknown) => void): void;
+    removeListener(event: string, listener: (...args: unknown[]) => void): void;
+    start(...args: any[]): Promise<unknown>;
+    stop(): void;
+}
+
+declare interface VapiMessage {
+    type: string;
+    role?: string;
+    transcriptType?: 'partial' | 'final';
+    transcript?: string;
+}
+
+export { }

package/dist/adapters.js

@@ -0,0 +1,149 @@
+function h(e) {
+  let l = "idle", t = null;
+  function s(i) {
+    if (t && (clearTimeout(t), t = null), l === "speaking" && i === "listening") {
+      t = setTimeout(() => {
+        l = i, e(i), t = null;
+      }, 350);
+      return;
+    }
+    l = i, e(i);
+  }
+  function c() {
+    t && (clearTimeout(t), t = null);
+  }
+  return { emitState: s, clearTimer: c };
+}
+function I(e, l) {
+  var m;
+  let t = 0;
+  function s(a) {
+    const n = a < 0.12 ? 0 : (a - 0.12) / 0.88, o = n > t ? 0.65 : 0.12;
+    return t = t + (n - t) * o, t;
+  }
+  let c = null;
+  if (typeof navigator < "u" && ((m = navigator.mediaDevices) != null && m.getUserMedia)) {
+    const a = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
+    navigator.mediaDevices.getUserMedia = async (n) => {
+      const o = await a(n);
+      return n != null && n.audio && (c = o), o;
+    };
+  }
+  function i() {
+    c == null || c.getTracks().forEach((a) => {
+      a.readyState === "live" && a.stop();
+    }), c = null;
+  }
+  return {
+    async start() {
+      await e.start(l == null ? void 0 : l.assistantId);
+    },
+    stop() {
+      e.stop();
+    },
+    subscribe({ onStateChange: a, onVolumeChange: n }) {
+      const { emitState: o, clearTimer: g } = h(a), d = () => o("listening"), v = () => {
+        o("disconnected"), n(0), t = 0, i();
+      }, r = () => o("speaking"), f = () => {
+        o("listening"), n(0);
+      }, E = (u) => {
+        n(s(u));
+      }, S = (u) => {
+        u.type === "transcript" && u.transcriptType === "final" && u.role === "user" && (o("thinking"), n(0));
+      }, O = (u) => {
+        console.error("[orb-ui/vapi] Error:", u), o("error"), n(0), t = 0, i();
+      };
+      e.on("call-start", d), e.on("call-end", v), e.on("speech-start", r), e.on("speech-end", f), e.on("volume-level", E), e.on("message", S), e.on("error", O);
+      const b = e.start.bind(e);
+      return e.start = async (...u) => (o("connecting"), b(...u)), () => {
+        g(), e.removeListener("call-start", d), e.removeListener("call-end", v), e.removeListener("speech-start", r), e.removeListener("speech-end", f), e.removeListener("volume-level", E), e.removeListener("message", S), e.removeListener("error", O), e.start = b, i();
+      };
+    }
+  };
+}
+const y = 2.7, p = 0.05, M = 0.5, T = 0.15;
+function L() {
+  let e = 0;
+  return function(t) {
+    const s = t > e ? M : T;
+    return e = e + (t - e) * s, e;
+  };
+}
+function _(e, l) {
+  let t = null, s = null, c = "listening";
+  const i = L(), m = L(), a = /* @__PURE__ */ new Set();
+  function n(r) {
+    a.forEach((f) => f.onStateChange(r));
+  }
+  function o(r) {
+    a.forEach((f) => f.onVolumeChange(r));
+  }
+  function g() {
+    s || (s = setInterval(() => {
+      if (!t) return;
+      const r = t.getOutputVolume();
+      o(i(Math.min(1, r * y)));
+    }, 33));
+  }
+  function d() {
+    s && (clearInterval(s), s = null), o(0);
+  }
+  const v = {
+    onStatusChange: ({ status: r }) => {
+      r === "connecting" && n("connecting");
+    },
+    onConnect: () => {
+      n("listening");
+    },
+    onModeChange: ({ mode: r }) => {
+      c = r, r === "speaking" ? (n("speaking"), g()) : (n("listening"), d());
+    },
+    onVadScore: ({ vadScore: r }) => {
+      if (c === "listening") {
+        const f = r < p ? 0 : (r - p) / (1 - p);
+        o(m(f));
+      }
+    },
+    onDisconnect: () => {
+      d(), n("disconnected"), o(0), t = null;
+    },
+    onError: (r) => {
+      console.error("[orb-ui/elevenlabs] Error:", r), d(), n("error"), o(0), t = null;
+    }
+  };
+  return {
+    // ── OrbAdapter.subscribe ────────────────────────────────────────────────
+    subscribe(r) {
+      return a.add(r), () => {
+        a.delete(r), a.size === 0 && d();
+      };
+    },
+    // ── Lifecycle ───────────────────────────────────────────────────────────
+    async start() {
+      if (!t)
+        try {
+          t = await e.startSession({
+            ...l,
+            ...v
+          });
+        } catch (r) {
+          console.error("[orb-ui/elevenlabs] startSession failed:", r), n("error"), o(0);
+        }
+    },
+    async stop() {
+      if (t) {
+        d();
+        try {
+          await t.endSession();
+        } catch (r) {
+          console.error("[orb-ui/elevenlabs] endSession failed:", r);
+        }
+        t = null;
+      }
+    }
+  };
+}
+export {
+  _ as createElevenLabsAdapter,
+  I as createVapiAdapter
+};

package/dist/orb-ui.d.ts

@@ -0,0 +1,52 @@
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+export declare interface OrbAdapter {
+    /**
+     * Subscribe to state and volume changes from a voice provider.
+     * Returns an unsubscribe function to clean up listeners.
+     */
+    subscribe(callbacks: {
+        onStateChange: (state: OrbState) => void;
+        onVolumeChange: (volume: number) => void;
+    }): () => void;
+    /** Start the voice session. Called internally by VoiceOrb on click. */
+    start?: () => void | Promise<void>;
+    /** Stop the voice session. Called internally by VoiceOrb on click. */
+    stop?: () => void | Promise<void>;
+}
+
+export declare type OrbState = 'idle' | 'connecting' | 'listening' | 'thinking' | 'speaking' | 'error' | 'disconnected';
+
+export declare type OrbTheme = 'debug' | 'circle' | 'bars';
+
+export declare function VoiceOrb({ state: stateProp, volume: volumeProp, adapter, theme, size, className, style, onStart, onStop, }: VoiceOrbProps): JSX_2.Element;
+
+export declare interface VoiceOrbProps {
+    /**
+     * Current conversation state. Required in controlled mode (no adapter).
+     * Overrides adapter state if both are provided.
+     */
+    state?: OrbState;
+    /**
+     * Current audio volume, normalized 0–1.
+     * Overrides adapter volume if both are provided.
+     */
+    volume?: number;
+    /**
+     * Provider adapter (Vapi, ElevenLabs, etc.).
+     * Handles state and volume automatically from the SDK.
+     */
+    adapter?: OrbAdapter;
+    /** Visual theme. Defaults to 'debug'. */
+    theme?: OrbTheme;
+    /** Size in pixels. Defaults to 200. */
+    size?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Called when the Start button is clicked (debug theme only). */
+    onStart?: () => void;
+    /** Called when the Stop button is clicked (debug theme only). */
+    onStop?: () => void;
+}
+
+export { }

package/dist/orb-ui.js

@@ -0,0 +1,397 @@
+import { jsxs as C, jsx as i } from "react/jsx-runtime";
+import { useRef as y, useLayoutEffect as q, useEffect as T, useState as O, useCallback as G } from "react";
+const N = [
+  "idle",
+  "connecting",
+  "listening",
+  "thinking",
+  "speaking",
+  "error",
+  "disconnected"
+], I = {
+  idle: "#888",
+  connecting: "#f0c040",
+  listening: "#40c0f0",
+  thinking: "#c040f0",
+  speaking: "#40f080",
+  error: "#f04040",
+  disconnected: "#555"
+};
+function V({
+  state: e,
+  volume: u,
+  size: n,
+  className: x,
+  style: S,
+  onStart: g,
+  onStop: a
+}) {
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: x,
+      style: {
+        width: n,
+        fontFamily: "monospace",
+        fontSize: 12,
+        background: "#111",
+        color: "#ccc",
+        border: "1px solid #333",
+        borderRadius: 8,
+        padding: 12,
+        boxSizing: "border-box",
+        userSelect: "none",
+        ...S
+      },
+      children: [
+        /* @__PURE__ */ i("div", { style: { color: "#555", marginBottom: 10, fontSize: 10, letterSpacing: 1 }, children: "ORB DEBUG" }),
+        /* @__PURE__ */ C("div", { style: { marginBottom: 8 }, children: [
+          /* @__PURE__ */ i("span", { style: { color: "#555" }, children: "state  " }),
+          /* @__PURE__ */ i("span", { style: { color: I[e], fontWeight: "bold" }, children: e })
+        ] }),
+        /* @__PURE__ */ C("div", { style: { marginBottom: 10 }, children: [
+          /* @__PURE__ */ i("span", { style: { color: "#555" }, children: "volume " }),
+          /* @__PURE__ */ i("span", { style: { color: "#ccc" }, children: u.toFixed(2) }),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                marginTop: 4,
+                height: 4,
+                background: "#222",
+                borderRadius: 2,
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ i(
+                "div",
+                {
+                  style: {
+                    height: "100%",
+                    width: `${u * 100}%`,
+                    background: I[e],
+                    borderRadius: 2,
+                    transition: "width 50ms linear"
+                  }
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ C("div", { style: { marginBottom: 10 }, children: [
+          /* @__PURE__ */ i("div", { style: { color: "#555", marginBottom: 4, fontSize: 10 }, children: "force state" }),
+          /* @__PURE__ */ i("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: N.map((r) => /* @__PURE__ */ i(
+            "button",
+            {
+              style: {
+                fontSize: 10,
+                padding: "2px 6px",
+                background: e === r ? I[r] : "#222",
+                color: e === r ? "#000" : "#888",
+                border: `1px solid ${e === r ? I[r] : "#333"}`,
+                borderRadius: 3,
+                cursor: "pointer"
+              },
+              onClick: () => {
+                console.warn(
+                  `[orb-ui debug] To force state '${r}', use controlled mode: <VoiceOrb state="${r}" />`
+                );
+              },
+              children: r
+            },
+            r
+          )) })
+        ] }),
+        /* @__PURE__ */ C("div", { style: { display: "flex", gap: 6 }, children: [
+          /* @__PURE__ */ i(
+            "button",
+            {
+              onClick: g,
+              style: {
+                flex: 1,
+                padding: "4px 0",
+                background: "#1a3a1a",
+                color: "#40f080",
+                border: "1px solid #40f080",
+                borderRadius: 4,
+                cursor: "pointer",
+                fontSize: 11
+              },
+              children: "Start"
+            }
+          ),
+          /* @__PURE__ */ i(
+            "button",
+            {
+              onClick: a,
+              style: {
+                flex: 1,
+                padding: "4px 0",
+                background: "#3a1a1a",
+                color: "#f04040",
+                border: "1px solid #f04040",
+                borderRadius: 4,
+                cursor: "pointer",
+                fontSize: 11
+              },
+              children: "Stop"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function L(e) {
+  return [
+    parseInt(e.slice(1, 3), 16),
+    parseInt(e.slice(3, 5), 16),
+    parseInt(e.slice(5, 7), 16)
+  ];
+}
+const v = {
+  idle: "#cccccc",
+  connecting: "#cccccc",
+  listening: "#60a5fa",
+  speaking: "#a3e635",
+  thinking: "#fbbf24",
+  error: "#f87171",
+  disconnected: "#444444"
+}, W = `
+@keyframes orb-circle-idle-pulse {
+  from { transform: scale(1); }
+  to   { transform: scale(1.06); }
+}
+@keyframes orb-circle-connecting-pulse {
+  from { transform: scale(1); }
+  to   { transform: scale(1.06); }
+}
+@keyframes orb-circle-thinking-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+`, M = 0.88, K = 0.22, j = 0.9, D = 0.15, U = 16, Q = 10, H = 0.55;
+function Y({ state: e, volume: u, size: n, className: x, style: S }) {
+  const g = y(null), a = y(0), r = y(u);
+  q(() => {
+    r.current = u;
+  }, [u]);
+  const f = y(1), p = y(0), A = y(L(v.idle));
+  T(() => {
+    const s = "orb-circle-keyframes";
+    if (!document.getElementById(s)) {
+      const m = document.createElement("style");
+      m.id = s, m.textContent = W, document.head.appendChild(m);
+    }
+  }, []), T(() => {
+    const s = g.current;
+    if (s)
+      if (e === "listening" || e === "speaking") {
+        const m = e === "speaking" ? M : j, $ = e === "speaking" ? K : D, h = e === "speaking" ? U : Q, c = () => {
+          const b = r.current, R = m + b * $, l = b * h;
+          f.current += (R - f.current) * H, p.current += (l - p.current) * H;
+          const t = L(v[e]), [o, d, k] = A.current;
+          A.current = [
+            o + (t[0] - o) * 0.05,
+            d + (t[1] - d) * 0.05,
+            k + (t[2] - k) * 0.05
+          ];
+          const [_, F, B] = A.current.map(Math.round);
+          s.style.transform = `scale(${f.current})`, s.style.background = `rgb(${_},${F},${B})`, s.style.boxShadow = `0 0 ${p.current}px ${p.current * 0.25}px rgb(${_},${F},${B})`, s.style.animation = "none", a.current = requestAnimationFrame(c);
+        };
+        return a.current = requestAnimationFrame(c), () => {
+          cancelAnimationFrame(a.current);
+        };
+      } else
+        cancelAnimationFrame(a.current), f.current = 1, p.current = 0, A.current = L(v[e] ?? v.idle), s.style.transform = "", s.style.boxShadow = "", s.style.background = v[e] ?? v.idle, e === "idle" ? s.style.animation = "orb-circle-idle-pulse 3s ease-in-out infinite alternate" : e === "connecting" ? s.style.animation = "orb-circle-connecting-pulse 1.2s ease-in-out infinite alternate" : s.style.animation = "none";
+  }, [e]);
+  const w = n * 0.55;
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: x,
+      style: {
+        width: n,
+        height: n,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        ...S
+      },
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            ref: g,
+            style: {
+              width: w,
+              height: w,
+              borderRadius: "50%",
+              // Initial color — rAF overwrites this immediately on first frame
+              background: v[e]
+            }
+          }
+        ),
+        e === "thinking" && /* @__PURE__ */ i("div", { style: {
+          position: "absolute",
+          width: n * 0.68,
+          height: n * 0.68,
+          border: "2px dashed #fbbf24",
+          borderRadius: "50%",
+          animation: "orb-circle-thinking-spin 1.5s linear infinite",
+          pointerEvents: "none"
+        } })
+      ]
+    }
+  );
+}
+const E = 5, J = 1.4, X = Math.PI * 2 / E, P = {
+  idle: "#cccccc",
+  connecting: "#cccccc",
+  listening: "#60a5fa",
+  speaking: "#a3e635",
+  thinking: "#fbbf24",
+  error: "#f87171",
+  disconnected: "#444444"
+};
+function Z(e) {
+  const u = e * 0.55, n = e * 0.06;
+  return `
+@keyframes orb-bars-wave {
+  0%, 100% { height: ${n}px; }
+  50% { height: ${u * 0.5}px; }
+}
+@keyframes orb-bars-wave-fast {
+  0%, 100% { height: ${n}px; }
+  50% { height: ${u * 0.5}px; }
+}
+`;
+}
+function z({ state: e, volume: u, size: n, className: x, style: S }) {
+  const g = y([]), a = y(0), r = y(new Array(E).fill(0)), f = y(null), p = y(u);
+  T(() => {
+    p.current = u;
+  }, [u]), T(() => {
+    const h = "orb-bars-keyframes";
+    let c = document.getElementById(h);
+    c || (c = document.createElement("style"), c.id = h, document.head.appendChild(c)), c.textContent = Z(n), f.current = c;
+  }, [n]), T(() => {
+    const h = n * 0.55, c = n * 0.06, b = P[e], R = (l, t) => {
+      for (let o = 0; o < E; o++) {
+        const d = g.current[o];
+        d && (d.style.height = `${l[o]}px`, d.style.background = t, d.style.animation = "none");
+      }
+    };
+    if (e === "listening" || e === "speaking") {
+      const l = e === "speaking" ? 1 : 0.4, t = () => {
+        const o = p.current, d = Date.now() / 1e3;
+        for (let k = 0; k < E; k++) {
+          const _ = 0.5 + 0.15 * Math.sin(d * J * l * Math.PI * 2 + k * X), F = c + (h - c) * o * _, B = F > r.current[k] ? 0.3 : 0.2;
+          r.current[k] += (F - r.current[k]) * B;
+        }
+        R(r.current, b), a.current = requestAnimationFrame(t);
+      };
+      return a.current = requestAnimationFrame(t), () => cancelAnimationFrame(a.current);
+    }
+    if (e === "thinking") {
+      const l = () => {
+        const t = Date.now(), o = [];
+        for (let d = 0; d < E; d++)
+          o.push(c + (h - c) * 0.5 * (1 + Math.sin(t / 500 + d * 0.8)));
+        R(o, b), a.current = requestAnimationFrame(l);
+      };
+      return a.current = requestAnimationFrame(l), () => cancelAnimationFrame(a.current);
+    }
+    if (cancelAnimationFrame(a.current), e === "idle" || e === "connecting") {
+      const l = e === "idle" ? "1.8s" : "1s";
+      for (let t = 0; t < E; t++) {
+        const o = g.current[t];
+        if (!o) continue;
+        o.style.background = b, o.style.height = "";
+        const d = e === "idle" ? "orb-bars-wave" : "orb-bars-wave-fast";
+        o.style.animation = `${d} ${l} ease-in-out ${t * 0.15}s infinite`;
+      }
+      return;
+    }
+    for (let l = 0; l < E; l++) {
+      const t = g.current[l];
+      t && (t.style.height = `${c}px`, t.style.background = b, t.style.animation = "none");
+    }
+  }, [e, n]);
+  const A = n * 0.055, w = n * 0.035, s = n * 0.03, m = n * 0.55, $ = n * 0.06;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: x,
+      style: {
+        width: n,
+        height: n,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: w,
+        ...S
+      },
+      children: Array.from({ length: E }, (h, c) => /* @__PURE__ */ i(
+        "div",
+        {
+          ref: (b) => {
+            g.current[c] = b;
+          },
+          style: {
+            width: A,
+            minHeight: $,
+            maxHeight: m,
+            height: $,
+            borderRadius: s,
+            background: P[e],
+            transition: "background 0.3s ease"
+          }
+        },
+        c
+      ))
+    }
+  );
+}
+function te({
+  state: e,
+  volume: u,
+  adapter: n,
+  theme: x = "debug",
+  size: S = 200,
+  className: g,
+  style: a,
+  onStart: r,
+  onStop: f
+}) {
+  const [p, A] = O("idle"), [w, s] = O(0);
+  T(() => n ? n.subscribe({
+    onStateChange: A,
+    onVolumeChange: s
+  }) : void 0, [n]);
+  const m = e ?? p, $ = u ?? w, h = m !== "idle" && m !== "disconnected" && m !== "error", c = G(() => {
+    var t, o;
+    h ? f ? f() : (t = n == null ? void 0 : n.stop) == null || t.call(n) : r ? r() : (o = n == null ? void 0 : n.start) == null || o.call(n);
+  }, [n, h, r, f]), b = !!(n != null && n.start || r || f), R = { state: m, volume: $, size: S, className: g, style: a }, l = (() => {
+    switch (x) {
+      case "circle":
+        return /* @__PURE__ */ i(Y, { ...R });
+      case "bars":
+        return /* @__PURE__ */ i(z, { ...R });
+      case "debug":
+      default:
+        return /* @__PURE__ */ i(V, { ...R, onStart: r, onStop: f });
+    }
+  })();
+  return b && x !== "debug" ? /* @__PURE__ */ i(
+    "div",
+    {
+      onClick: c,
+      style: { cursor: "pointer", display: "inline-flex" },
+      children: l
+    }
+  ) : l;
+}
+export {
+  te as VoiceOrb
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "orb-ui",
+  "version": "0.1.0",
+  "description": "The simplest voice AI UI component library for React. Works with Vapi and ElevenLabs.",
+  "type": "module",
+  "module": "./dist/orb-ui.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/orb-ui.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./adapters": {
+      "import": "./dist/adapters.js",
+      "types": "./dist/adapters/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "eslint": "^8.57.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.3.0",
+    "vite-plugin-dts": "^3.9.0",
+    "vitest": "^1.6.0"
+  },
+  "keywords": [
+    "voice",
+    "ai",
+    "react",
+    "animation",
+    "component",
+    "vapi",
+    "elevenlabs"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alexanderqchen/orb-ui.git"
+  },
+  "dependencies": {}
+}