@thunderphone/widget 0.1.0

package/dist/index.mjs

@@ -0,0 +1,243 @@
+// src/ThunderPhoneWidget.tsx
+import { useCallback, useState as useState2 } from "react";
+import { LiveKitRoom } from "@livekit/components-react";
+
+// src/AudioHandler.tsx
+import { useEffect, useRef } from "react";
+import { useRoomContext } from "@livekit/components-react";
+import { RoomEvent, Track } from "livekit-client";
+import { jsx } from "react/jsx-runtime";
+function AudioHandler({ onAgentConnected, onDisconnected }) {
+  const room = useRoomContext();
+  const audioRef = useRef(null);
+  useEffect(() => {
+    if (room.remoteParticipants.size > 0) {
+      onAgentConnected();
+    }
+    const handleParticipantConnected = () => onAgentConnected();
+    const handleDisconnect = () => onDisconnected();
+    const attachTrack = (track, _pub, _participant) => {
+      if (track.kind === Track.Kind.Audio && audioRef.current) {
+        const stream = new MediaStream([track.mediaStreamTrack]);
+        audioRef.current.srcObject = stream;
+        audioRef.current.play().catch(() => {
+        });
+      }
+    };
+    room.on(RoomEvent.ParticipantConnected, handleParticipantConnected);
+    room.on(RoomEvent.Disconnected, handleDisconnect);
+    room.on(RoomEvent.TrackSubscribed, attachTrack);
+    for (const participant of room.remoteParticipants.values()) {
+      for (const pub of participant.trackPublications.values()) {
+        if (pub.track && pub.isSubscribed && pub.track.kind === Track.Kind.Audio && audioRef.current) {
+          const stream = new MediaStream([pub.track.mediaStreamTrack]);
+          audioRef.current.srcObject = stream;
+          audioRef.current.play().catch(() => {
+          });
+        }
+      }
+    }
+    return () => {
+      room.off(RoomEvent.ParticipantConnected, handleParticipantConnected);
+      room.off(RoomEvent.Disconnected, handleDisconnect);
+      room.off(RoomEvent.TrackSubscribed, attachTrack);
+    };
+  }, [room, onAgentConnected, onDisconnected]);
+  return /* @__PURE__ */ jsx("audio", { ref: audioRef, autoPlay: true });
+}
+
+// src/WidgetButton.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function WidgetButton({ state, muted, onClick, onMuteToggle }) {
+  if (state === "connected") {
+    return /* @__PURE__ */ jsxs("div", { className: "tp-button-group", children: [
+      /* @__PURE__ */ jsx2("button", { className: "tp-button tp-button--mute", onClick: onMuteToggle, type: "button", children: muted ? /* @__PURE__ */ jsxs("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx2("line", { x1: "1", y1: "1", x2: "23", y2: "23" }),
+        /* @__PURE__ */ jsx2("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" }),
+        /* @__PURE__ */ jsx2("path", { d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.13 1.49-.36 2.18" }),
+        /* @__PURE__ */ jsx2("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+        /* @__PURE__ */ jsx2("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+      ] }) : /* @__PURE__ */ jsxs("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx2("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+        /* @__PURE__ */ jsx2("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+        /* @__PURE__ */ jsx2("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+        /* @__PURE__ */ jsx2("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+      ] }) }),
+      /* @__PURE__ */ jsx2("button", { className: "tp-button tp-button--end", onClick, type: "button", children: /* @__PURE__ */ jsx2("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx2("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      className: `tp-button tp-button--start ${state === "connecting" ? "tp-button--loading" : ""}`,
+      onClick,
+      disabled: state === "connecting",
+      type: "button",
+      children: state === "connecting" ? /* @__PURE__ */ jsx2("svg", { className: "tp-icon tp-spin", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) : /* @__PURE__ */ jsxs("svg", { className: "tp-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+        /* @__PURE__ */ jsx2("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+        /* @__PURE__ */ jsx2("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+        /* @__PURE__ */ jsx2("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+        /* @__PURE__ */ jsx2("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+      ] })
+    }
+  );
+}
+
+// src/WidgetStatus.tsx
+import { useEffect as useEffect2, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function WidgetStatus({ state, agentName, errorMessage }) {
+  const [elapsed, setElapsed] = useState(0);
+  useEffect2(() => {
+    if (state !== "connected") {
+      setElapsed(0);
+      return;
+    }
+    const interval = setInterval(() => setElapsed((s) => s + 1), 1e3);
+    return () => clearInterval(interval);
+  }, [state]);
+  const formatTime = (seconds) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, "0")}`;
+  };
+  const statusText = {
+    idle: "Ready",
+    connecting: "Connecting...",
+    connected: formatTime(elapsed),
+    disconnected: "Disconnected",
+    error: "Unable to connect"
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "tp-status", children: [
+    agentName && /* @__PURE__ */ jsx3("div", { className: "tp-status__name", children: agentName }),
+    /* @__PURE__ */ jsxs2("div", { className: `tp-status__text tp-status--${state}`, children: [
+      state === "connected" && /* @__PURE__ */ jsx3("span", { className: "tp-status__dot" }),
+      errorMessage && state === "error" ? errorMessage : statusText[state]
+    ] })
+  ] });
+}
+
+// src/api.ts
+var DEFAULT_API_BASE = "https://api.thunderphone.com/v1";
+var WidgetAPIError = class extends Error {
+  constructor(code, message) {
+    super(message);
+    this.code = code;
+    this.name = "WidgetAPIError";
+  }
+};
+async function createWidgetSession(apiKey, agentId, apiBase) {
+  const base = apiBase || DEFAULT_API_BASE;
+  const response = await fetch(`${base}/widget/session`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-API-Key": apiKey
+    },
+    body: JSON.stringify({ agent_id: agentId })
+  });
+  if (!response.ok) {
+    const data = await response.json().catch(() => ({
+      error: "unknown",
+      message: "Unable to connect."
+    }));
+    throw new WidgetAPIError(data.error, data.message);
+  }
+  return response.json();
+}
+
+// src/ThunderPhoneWidget.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ThunderPhoneWidget({
+  apiKey,
+  agentId,
+  apiBase,
+  onConnect,
+  onDisconnect,
+  onError,
+  className
+}) {
+  const [state, setState] = useState2("idle");
+  const [session, setSession] = useState2(null);
+  const [muted, setMuted] = useState2(false);
+  const [errorMessage, setErrorMessage] = useState2();
+  const handleConnect = useCallback(async () => {
+    if (state === "connecting" || state === "connected") return;
+    setState("connecting");
+    setErrorMessage(void 0);
+    try {
+      const sess = await createWidgetSession(apiKey, agentId, apiBase);
+      setSession(sess);
+    } catch (err) {
+      setState("error");
+      if (err instanceof WidgetAPIError) {
+        setErrorMessage(err.message);
+        onError?.({ error: err.code, message: err.message });
+      } else {
+        setErrorMessage("Unable to connect.");
+        onError?.({ error: "unknown", message: "Unable to connect." });
+      }
+    }
+  }, [apiKey, agentId, apiBase, state, onError]);
+  const handleDisconnect = useCallback(() => {
+    setState("disconnected");
+    setSession(null);
+    setMuted(false);
+    onDisconnect?.();
+    setTimeout(() => setState("idle"), 1500);
+  }, [onDisconnect]);
+  const handleAgentConnected = useCallback(() => {
+    setState("connected");
+    onConnect?.();
+  }, [onConnect]);
+  const handleClick = () => {
+    if (state === "connected") {
+      handleDisconnect();
+    } else if (state === "idle" || state === "error" || state === "disconnected") {
+      handleConnect();
+    }
+  };
+  const handleMuteToggle = useCallback(() => {
+    setMuted((m) => !m);
+  }, []);
+  return /* @__PURE__ */ jsxs3("div", { className: `tp-widget ${className || ""}`, children: [
+    /* @__PURE__ */ jsx4(
+      WidgetStatus,
+      {
+        state,
+        agentName: session?.agent_name || null,
+        errorMessage
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      WidgetButton,
+      {
+        state,
+        muted,
+        onClick: handleClick,
+        onMuteToggle: handleMuteToggle
+      }
+    ),
+    session && /* @__PURE__ */ jsx4(
+      LiveKitRoom,
+      {
+        token: session.token,
+        serverUrl: session.server_url,
+        audio: !muted,
+        video: false,
+        connect: true,
+        children: /* @__PURE__ */ jsx4(
+          AudioHandler,
+          {
+            onAgentConnected: handleAgentConnected,
+            onDisconnected: handleDisconnect
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  ThunderPhoneWidget
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ThunderPhoneWidget.tsx","../src/AudioHandler.tsx","../src/WidgetButton.tsx","../src/WidgetStatus.tsx","../src/api.ts"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { LiveKitRoom } from '@livekit/components-react'\nimport { AudioHandler } from './AudioHandler'\nimport { WidgetButton } from './WidgetButton'\nimport { WidgetStatus } from './WidgetStatus'\nimport { createWidgetSession, WidgetAPIError } from './api'\nimport type { ThunderPhoneWidgetProps, WidgetState, WidgetSessionResponse } from './types'\n\nexport function ThunderPhoneWidget({\n  apiKey,\n  agentId,\n  apiBase,\n  onConnect,\n  onDisconnect,\n  onError,\n  className,\n}: ThunderPhoneWidgetProps) {\n  const [state, setState] = useState<WidgetState>('idle')\n  const [session, setSession] = useState<WidgetSessionResponse | null>(null)\n  const [muted, setMuted] = useState(false)\n  const [errorMessage, setErrorMessage] = useState<string | undefined>()\n\n  const handleConnect = useCallback(async () => {\n    if (state === 'connecting' || state === 'connected') return\n    setState('connecting')\n    setErrorMessage(undefined)\n    try {\n      const sess = await createWidgetSession(apiKey, agentId, apiBase)\n      setSession(sess)\n    } catch (err) {\n      setState('error')\n      if (err instanceof WidgetAPIError) {\n        setErrorMessage(err.message)\n        onError?.({ error: err.code, message: err.message })\n      } else {\n        setErrorMessage('Unable to connect.')\n        onError?.({ error: 'unknown', message: 'Unable to connect.' })\n      }\n    }\n  }, [apiKey, agentId, apiBase, state, onError])\n\n  const handleDisconnect = useCallback(() => {\n    setState('disconnected')\n    setSession(null)\n    setMuted(false)\n    onDisconnect?.()\n    setTimeout(() => setState('idle'), 1500)\n  }, [onDisconnect])\n\n  const handleAgentConnected = useCallback(() => {\n    setState('connected')\n    onConnect?.()\n  }, [onConnect])\n\n  const handleClick = () => {\n    if (state === 'connected') {\n      handleDisconnect()\n    } else if (state === 'idle' || state === 'error' || state === 'disconnected') {\n      handleConnect()\n    }\n  }\n\n  const handleMuteToggle = useCallback(() => {\n    setMuted(m => !m)\n  }, [])\n\n  return (\n    <div className={`tp-widget ${className || ''}`}>\n      <WidgetStatus\n        state={state}\n        agentName={session?.agent_name || null}\n        errorMessage={errorMessage}\n      />\n      <WidgetButton\n        state={state}\n        muted={muted}\n        onClick={handleClick}\n        onMuteToggle={handleMuteToggle}\n      />\n      {session && (\n        <LiveKitRoom\n          token={session.token}\n          serverUrl={session.server_url}\n          audio={!muted}\n          video={false}\n          connect={true}\n        >\n          <AudioHandler\n            onAgentConnected={handleAgentConnected}\n            onDisconnected={handleDisconnect}\n          />\n        </LiveKitRoom>\n      )}\n    </div>\n  )\n}\n","import { useEffect, useRef } from 'react'\nimport { useRoomContext } from '@livekit/components-react'\nimport { RoomEvent, Track, type RemoteTrackPublication, type RemoteParticipant } from 'livekit-client'\n\ninterface AudioHandlerProps {\n  onAgentConnected: () => void\n  onDisconnected: () => void\n}\n\nexport function AudioHandler({ onAgentConnected, onDisconnected }: AudioHandlerProps) {\n  const room = useRoomContext()\n  const audioRef = useRef<HTMLAudioElement>(null)\n\n  useEffect(() => {\n    if (room.remoteParticipants.size > 0) {\n      onAgentConnected()\n    }\n\n    const handleParticipantConnected = () => onAgentConnected()\n    const handleDisconnect = () => onDisconnected()\n\n    const attachTrack = (\n      track: { kind: Track.Kind; mediaStreamTrack: MediaStreamTrack },\n      _pub: RemoteTrackPublication,\n      _participant: RemoteParticipant,\n    ) => {\n      if (track.kind === Track.Kind.Audio && audioRef.current) {\n        const stream = new MediaStream([track.mediaStreamTrack])\n        audioRef.current.srcObject = stream\n        audioRef.current.play().catch(() => {})\n      }\n    }\n\n    room.on(RoomEvent.ParticipantConnected, handleParticipantConnected)\n    room.on(RoomEvent.Disconnected, handleDisconnect)\n    room.on(RoomEvent.TrackSubscribed, attachTrack)\n\n    for (const participant of room.remoteParticipants.values()) {\n      for (const pub of participant.trackPublications.values()) {\n        if (pub.track && pub.isSubscribed && pub.track.kind === Track.Kind.Audio && audioRef.current) {\n          const stream = new MediaStream([pub.track.mediaStreamTrack])\n          audioRef.current.srcObject = stream\n          audioRef.current.play().catch(() => {})\n        }\n      }\n    }\n\n    return () => {\n      room.off(RoomEvent.ParticipantConnected, handleParticipantConnected)\n      room.off(RoomEvent.Disconnected, handleDisconnect)\n      room.off(RoomEvent.TrackSubscribed, attachTrack)\n    }\n  }, [room, onAgentConnected, onDisconnected])\n\n  return <audio ref={audioRef} autoPlay />\n}\n","import type { WidgetState } from './types'\n\ninterface WidgetButtonProps {\n  state: WidgetState\n  muted: boolean\n  onClick: () => void\n  onMuteToggle: () => void\n}\n\nexport function WidgetButton({ state, muted, onClick, onMuteToggle }: WidgetButtonProps) {\n  if (state === 'connected') {\n    return (\n      <div className=\"tp-button-group\">\n        <button className=\"tp-button tp-button--mute\" onClick={onMuteToggle} type=\"button\">\n          {muted ? (\n            <svg className=\"tp-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n              <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\" />\n              <path d=\"M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6\" />\n              <path d=\"M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.13 1.49-.36 2.18\" />\n              <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\" />\n              <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\" />\n            </svg>\n          ) : (\n            <svg className=\"tp-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n              <path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\" />\n              <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" />\n              <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\" />\n              <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\" />\n            </svg>\n          )}\n        </button>\n        <button className=\"tp-button tp-button--end\" onClick={onClick} type=\"button\">\n          <svg className=\"tp-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" />\n          </svg>\n        </button>\n      </div>\n    )\n  }\n\n  return (\n    <button\n      className={`tp-button tp-button--start ${state === 'connecting' ? 'tp-button--loading' : ''}`}\n      onClick={onClick}\n      disabled={state === 'connecting'}\n      type=\"button\"\n    >\n      {state === 'connecting' ? (\n        <svg className=\"tp-icon tp-spin\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n        </svg>\n      ) : (\n        <svg className=\"tp-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n          <path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\" />\n          <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" />\n          <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\" />\n          <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\" />\n        </svg>\n      )}\n    </button>\n  )\n}\n","import { useEffect, useState } from 'react'\nimport type { WidgetState } from './types'\n\ninterface WidgetStatusProps {\n  state: WidgetState\n  agentName: string | null\n  errorMessage?: string\n}\n\nexport function WidgetStatus({ state, agentName, errorMessage }: WidgetStatusProps) {\n  const [elapsed, setElapsed] = useState(0)\n\n  useEffect(() => {\n    if (state !== 'connected') {\n      setElapsed(0)\n      return\n    }\n    const interval = setInterval(() => setElapsed(s => s + 1), 1000)\n    return () => clearInterval(interval)\n  }, [state])\n\n  const formatTime = (seconds: number) => {\n    const m = Math.floor(seconds / 60)\n    const s = seconds % 60\n    return `${m}:${s.toString().padStart(2, '0')}`\n  }\n\n  const statusText: Record<WidgetState, string> = {\n    idle: 'Ready',\n    connecting: 'Connecting...',\n    connected: formatTime(elapsed),\n    disconnected: 'Disconnected',\n    error: 'Unable to connect',\n  }\n\n  return (\n    <div className=\"tp-status\">\n      {agentName && <div className=\"tp-status__name\">{agentName}</div>}\n      <div className={`tp-status__text tp-status--${state}`}>\n        {state === 'connected' && <span className=\"tp-status__dot\" />}\n        {errorMessage && state === 'error' ? errorMessage : statusText[state]}\n      </div>\n    </div>\n  )\n}\n","import type { WidgetSessionResponse, WidgetError } from './types'\n\nconst DEFAULT_API_BASE = 'https://api.thunderphone.com/v1'\n\nexport class WidgetAPIError extends Error {\n  constructor(public code: string, message: string) {\n    super(message)\n    this.name = 'WidgetAPIError'\n  }\n}\n\nexport async function createWidgetSession(\n  apiKey: string,\n  agentId: number,\n  apiBase?: string,\n): Promise<WidgetSessionResponse> {\n  const base = apiBase || DEFAULT_API_BASE\n  const response = await fetch(`${base}/widget/session`, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      'X-API-Key': apiKey,\n    },\n    body: JSON.stringify({ agent_id: agentId }),\n  })\n\n  if (!response.ok) {\n    const data: WidgetError = await response.json().catch(() => ({\n      error: 'unknown',\n      message: 'Unable to connect.',\n    }))\n    throw new WidgetAPIError(data.error, data.message)\n  }\n\n  return response.json()\n}\n"],"mappings":"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","names":["useState","jsx","useEffect","jsx","jsxs","jsx","jsxs","useState"]}

package/dist/mount.css

@@ -0,0 +1,112 @@
+/* src/style.css */
+.tp-widget {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+}
+.tp-status {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.tp-status__name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #18181b;
+}
+.tp-status__text {
+  font-size: 12px;
+  color: #71717a;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.tp-status--connected {
+  color: #059669;
+}
+.tp-status--error {
+  color: #dc2626;
+}
+.tp-status__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #059669;
+  animation: tp-pulse 2s ease-in-out infinite;
+}
+.tp-icon {
+  width: 20px;
+  height: 20px;
+}
+.tp-button-group {
+  display: inline-flex;
+  gap: 8px;
+}
+.tp-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s, transform 0.1s;
+}
+.tp-button:active {
+  transform: scale(0.95);
+}
+.tp-button--start {
+  background: #18181b;
+  color: white;
+}
+.tp-button--start:hover {
+  background: #27272a;
+}
+.tp-button--start:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.tp-button--mute {
+  background: #f4f4f5;
+  color: #18181b;
+}
+.tp-button--mute:hover {
+  background: #e4e4e7;
+}
+.tp-button--end {
+  background: #dc2626;
+  color: white;
+}
+.tp-button--end:hover {
+  background: #b91c1c;
+}
+.tp-button--loading {
+  opacity: 0.7;
+}
+.tp-spin {
+  animation: tp-spin 1s linear infinite;
+}
+@keyframes tp-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes tp-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+/*# sourceMappingURL=mount.css.map */

package/dist/mount.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/style.css"],"sourcesContent":[".tp-widget {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.tp-status {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.tp-status__name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #18181b;\n}\n\n.tp-status__text {\n  font-size: 12px;\n  color: #71717a;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.tp-status--connected {\n  color: #059669;\n}\n\n.tp-status--error {\n  color: #dc2626;\n}\n\n.tp-status__dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #059669;\n  animation: tp-pulse 2s ease-in-out infinite;\n}\n\n.tp-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.tp-button-group {\n  display: inline-flex;\n  gap: 8px;\n}\n\n.tp-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.15s, transform 0.1s;\n}\n\n.tp-button:active {\n  transform: scale(0.95);\n}\n\n.tp-button--start {\n  background: #18181b;\n  color: white;\n}\n\n.tp-button--start:hover {\n  background: #27272a;\n}\n\n.tp-button--start:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.tp-button--mute {\n  background: #f4f4f5;\n  color: #18181b;\n}\n\n.tp-button--mute:hover {\n  background: #e4e4e7;\n}\n\n.tp-button--end {\n  background: #dc2626;\n  color: white;\n}\n\n.tp-button--end:hover {\n  background: #b91c1c;\n}\n\n.tp-button--loading {\n  opacity: 0.7;\n}\n\n.tp-spin {\n  animation: tp-spin 1s linear infinite;\n}\n\n@keyframes tp-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n@keyframes tp-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK;AACL;AAAA,IAAa,aAAa;AAAA,IAAE,kBAAkB;AAAA,IAAE,UAAU;AAAA,IAAE,MAAM;AAAA,IAAE;AACtE;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AAEA,CAAC;AACC,aAAW;AACX,eAAa;AACb,SAAO;AACT;AAEA,CAAC;AACC,aAAW;AACX,SAAO;AACP,WAAS;AACT,eAAa;AACb,OAAK;AACP;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,cAAY;AACZ,aAAW,SAAS,GAAG,YAAY;AACrC;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACT,OAAK;AACP;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,UAAQ;AACR,iBAAe;AACf,UAAQ;AACR,UAAQ;AACR,cAAY,iBAAiB,KAAK,EAAE,UAAU;AAChD;AAEA,CAZC,SAYS;AACR,aAAW,MAAM;AACnB;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACT;AAEA,CALC,gBAKgB;AACf,cAAY;AACd;AAEA,CATC,gBASgB;AACf,WAAS;AACT,UAAQ;AACV;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACT;AAEA,CALC,eAKe;AACd,cAAY;AACd;AAEA,CAAC;AACC,cAAY;AACZ,SAAO;AACT;AAEA,CALC,cAKc;AACb,cAAY;AACd;AAEA,CAAC;AACC,WAAS;AACX;AAEA,CAAC;AACC,aAAW,QAAQ,GAAG,OAAO;AAC/B;AAEA,WAJC;AAKC;AAAO,eAAW,OAAO;AAAO;AAChC;AAAK,eAAW,OAAO;AAAS;AAClC;AAEA,WA1Ea;AA2EX;AAAW,aAAS;AAAG;AACvB;AAAM,aAAS;AAAK;AACtB;","names":[]}