@wix/legends-platform-sdk 1.0.0

package/dist/cjs/services/FetchPersonaChatService.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.FetchPersonaChatService = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _http = require("../types/http");
+const BASE_URL = 'https://www.wixapis.com';
+function resolveLimitMs(limitation) {
+  if (!limitation) {
+    return undefined;
+  }
+  switch (limitation.type) {
+    case 'MINUTES':
+      return (limitation.limit ?? 0) * 60 * 1000;
+    case 'SECONDS':
+      return (limitation.limit ?? 0) * 1000;
+    case 'TOKENS':
+    default:
+      return 0;
+  }
+}
+class FetchPersonaChatService {
+  constructor(apiKey) {
+    (0, _defineProperty2.default)(this, "apiKey", void 0);
+    this.apiKey = apiKey;
+  }
+  headers() {
+    return {
+      'Content-Type': 'application/json',
+      Authorization: this.apiKey
+    };
+  }
+  async post(path, body) {
+    const response = await fetch(`${BASE_URL}${path}`, {
+      method: 'POST',
+      headers: this.headers(),
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new _http.HttpError(response.status, `Request failed: ${response.status} ${text}`);
+    }
+    return response.json();
+  }
+  async createVoiceConversation(params) {
+    const {
+      chatId,
+      namespace,
+      chatConfig
+    } = params;
+    const data = await this.post(`/_api/persona-chat-service/v1/chats/${chatId}/create-voice-conversation`, {
+      namespace,
+      ...(chatConfig ? {
+        chatConfig
+      } : {})
+    });
+    return {
+      url: data.conversationUrl ?? '',
+      id: data.interactiveConversationId ?? '',
+      limit: resolveLimitMs(data.limitation)
+    };
+  }
+  async createInteractiveConversation(params) {
+    const {
+      chatId,
+      namespace,
+      chatConfig
+    } = params;
+    const data = await this.post(`/_api/persona-chat-service/v1/chats/${chatId}/create-interactive-conversation`, {
+      namespace,
+      ...(chatConfig ? {
+        chatConfig
+      } : {})
+    });
+    return {
+      url: data.conversationUrl ?? '',
+      id: data.interactiveConversationId ?? '',
+      limit: resolveLimitMs(data.limitation)
+    };
+  }
+  async endInteractiveConversation(params) {
+    const {
+      chatId,
+      conversationId,
+      namespace
+    } = params;
+    await this.post(`/_api/persona-chat-service/v1/chats/${chatId}/end-interactive-conversation`, {
+      namespace,
+      interactiveConversationId: conversationId
+    }).catch(() => {
+      // best-effort
+    });
+  }
+  async sendChatMessage(params) {
+    const {
+      chatId,
+      namespace,
+      message,
+      functionCallResults
+    } = params;
+    return this.post(`/_api/persona-chat-service/v1/chats/${chatId}/messages`, {
+      namespace,
+      message,
+      functionCallResults
+    });
+  }
+  async queryChatMessages(params) {
+    var _data$pagingMetadata;
+    const {
+      chatId,
+      namespace,
+      limit = 100,
+      cursor
+    } = params;
+    const data = await this.post(`/_api/persona-chat-service/v1/chats/${chatId}/messages/query`, {
+      namespace,
+      query: {
+        cursorPaging: {
+          limit,
+          ...(cursor ? {
+            cursor
+          } : {})
+        }
+      }
+    });
+    return {
+      messages: (data.chatMessages ?? []).map(m => ({
+        id: m.id,
+        content: m.content,
+        role: m.role,
+        createdAt: m.createdAt
+      })),
+      nextCursor: (_data$pagingMetadata = data.pagingMetadata) == null || (_data$pagingMetadata = _data$pagingMetadata.cursors) == null ? void 0 : _data$pagingMetadata.next
+    };
+  }
+}
+exports.FetchPersonaChatService = FetchPersonaChatService;
+//# sourceMappingURL=FetchPersonaChatService.js.map

package/dist/cjs/services/FetchPersonaChatService.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_http","require","BASE_URL","resolveLimitMs","limitation","undefined","type","limit","FetchPersonaChatService","constructor","apiKey","_defineProperty2","default","headers","Authorization","post","path","body","response","fetch","method","JSON","stringify","ok","text","catch","HttpError","status","json","createVoiceConversation","params","chatId","namespace","chatConfig","data","url","conversationUrl","id","interactiveConversationId","createInteractiveConversation","endInteractiveConversation","conversationId","sendChatMessage","message","functionCallResults","queryChatMessages","_data$pagingMetadata","cursor","query","cursorPaging","messages","chatMessages","map","m","content","role","createdAt","nextCursor","pagingMetadata","cursors","next","exports"],"sources":["../../../src/services/FetchPersonaChatService.ts"],"sourcesContent":["import { HttpError } from '../types/http';\nimport type {\n  IPersonaChatService,\n  CreateConversationParams,\n  ConversationResult,\n  EndConversationParams,\n  SendMessageParams,\n  QueryMessagesParams,\n  QueryMessagesResult,\n  FunctionCall,\n  Limitation,\n} from '../types/service';\n\nconst BASE_URL = 'https://www.wixapis.com';\n\nfunction resolveLimitMs(limitation?: Limitation): number | undefined {\n  if (!limitation) {\n    return undefined;\n  }\n  switch (limitation.type) {\n    case 'MINUTES':\n      return (limitation.limit ?? 0) * 60 * 1000;\n    case 'SECONDS':\n      return (limitation.limit ?? 0) * 1000;\n    case 'TOKENS':\n    default:\n      return 0;\n  }\n}\n\nexport class FetchPersonaChatService implements IPersonaChatService {\n  private readonly apiKey: string;\n\n  constructor(apiKey: string) {\n    this.apiKey = apiKey;\n  }\n\n  private headers(): Record<string, string> {\n    return {\n      'Content-Type': 'application/json',\n      Authorization: this.apiKey,\n    };\n  }\n\n  private async post<T>(path: string, body: unknown): Promise<T> {\n    const response = await fetch(`${BASE_URL}${path}`, {\n      method: 'POST',\n      headers: this.headers(),\n      body: JSON.stringify(body),\n    });\n\n    if (!response.ok) {\n      const text = await response.text().catch(() => '');\n      throw new HttpError(\n        response.status,\n        `Request failed: ${response.status} ${text}`,\n      );\n    }\n\n    return response.json() as Promise<T>;\n  }\n\n  async createVoiceConversation(\n    params: CreateConversationParams,\n  ): Promise<ConversationResult> {\n    const { chatId, namespace, chatConfig } = params;\n\n    const data = await this.post<{\n      conversationUrl?: string;\n      interactiveConversationId?: string;\n      limitation?: Limitation;\n    }>(\n      `/_api/persona-chat-service/v1/chats/${chatId}/create-voice-conversation`,\n      {\n        namespace,\n        ...(chatConfig ? { chatConfig } : {}),\n      },\n    );\n\n    return {\n      url: data.conversationUrl ?? '',\n      id: data.interactiveConversationId ?? '',\n      limit: resolveLimitMs(data.limitation),\n    };\n  }\n\n  async createInteractiveConversation(\n    params: CreateConversationParams,\n  ): Promise<ConversationResult> {\n    const { chatId, namespace, chatConfig } = params;\n\n    const data = await this.post<{\n      conversationUrl?: string;\n      interactiveConversationId?: string;\n      limitation?: Limitation;\n    }>(\n      `/_api/persona-chat-service/v1/chats/${chatId}/create-interactive-conversation`,\n      {\n        namespace,\n        ...(chatConfig ? { chatConfig } : {}),\n      },\n    );\n\n    return {\n      url: data.conversationUrl ?? '',\n      id: data.interactiveConversationId ?? '',\n      limit: resolveLimitMs(data.limitation),\n    };\n  }\n\n  async endInteractiveConversation(\n    params: EndConversationParams,\n  ): Promise<void> {\n    const { chatId, conversationId, namespace } = params;\n\n    await this.post(\n      `/_api/persona-chat-service/v1/chats/${chatId}/end-interactive-conversation`,\n      { namespace, interactiveConversationId: conversationId },\n    ).catch(() => {\n      // best-effort\n    });\n  }\n\n  async sendChatMessage(\n    params: SendMessageParams,\n  ): Promise<{ functionCalls?: FunctionCall[] }> {\n    const { chatId, namespace, message, functionCallResults } = params;\n\n    return this.post<{ functionCalls?: FunctionCall[] }>(\n      `/_api/persona-chat-service/v1/chats/${chatId}/messages`,\n      { namespace, message, functionCallResults },\n    );\n  }\n\n  async queryChatMessages(\n    params: QueryMessagesParams,\n  ): Promise<QueryMessagesResult> {\n    const { chatId, namespace, limit = 100, cursor } = params;\n\n    const data = await this.post<{\n      chatMessages?: {\n        id: string;\n        content: string;\n        role: string;\n        createdAt?: string;\n      }[];\n      pagingMetadata?: { cursors?: { next?: string } };\n    }>(`/_api/persona-chat-service/v1/chats/${chatId}/messages/query`, {\n      namespace,\n      query: { cursorPaging: { limit, ...(cursor ? { cursor } : {}) } },\n    });\n\n    return {\n      messages: (data.chatMessages ?? []).map((m) => ({\n        id: m.id,\n        content: m.content,\n        role: m.role as 'user' | 'assistant',\n        createdAt: m.createdAt,\n      })),\n      nextCursor: data.pagingMetadata?.cursors?.next,\n    };\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/test-types.d.js

@@ -0,0 +1,2 @@
+/// <reference types="@wix/jest-yoshi-preset/types" />
+//# sourceMappingURL=test-types.d.js.map

package/dist/cjs/test-types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/test-types.d.ts"],"sourcesContent":["/// <reference types=\"@wix/jest-yoshi-preset/types\" />\n"],"mappings":"AAAA","ignoreList":[]}

package/dist/cjs/types/http.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.HttpError = void 0;
+class HttpError extends Error {
+  constructor(status, message, data) {
+    super(message);
+    this.status = status;
+    this.data = data;
+    this.name = 'HttpError';
+  }
+}
+exports.HttpError = HttpError;
+//# sourceMappingURL=http.js.map

package/dist/cjs/types/http.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HttpError","Error","constructor","status","message","data","name","exports"],"sources":["../../../src/types/http.ts"],"sourcesContent":["export interface HttpRequestConfig {\n  url: string;\n  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';\n  data?: unknown;\n  headers?: Record<string, string>;\n}\n\nexport interface IHttpClient {\n  request<T>(config: HttpRequestConfig): Promise<T>;\n}\n\nexport class HttpError extends Error {\n  constructor(\n    public readonly status: number,\n    message: string,\n    public readonly data?: unknown,\n  ) {\n    super(message);\n    this.name = 'HttpError';\n  }\n}\n"],"mappings":";;;;AAWO,MAAMA,SAAS,SAASC,KAAK,CAAC;EACnCC,WAAWA,CACOC,MAAc,EAC9BC,OAAe,EACCC,IAAc,EAC9B;IACA,KAAK,CAACD,OAAO,CAAC;IAAC,KAJCD,MAAc,GAAdA,MAAc;IAAA,KAEdE,IAAc,GAAdA,IAAc;IAG9B,IAAI,CAACC,IAAI,GAAG,WAAW;EACzB;AACF;AAACC,OAAA,CAAAP,SAAA,GAAAA,SAAA","ignoreList":[]}

package/dist/cjs/types/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+exports.HttpError = void 0;
+var _http = require("./http");
+exports.HttpError = _http.HttpError;
+//# sourceMappingURL=index.js.map

package/dist/cjs/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_http","require","exports","HttpError"],"sources":["../../../src/types/index.ts"],"sourcesContent":["export type { IHttpClient, HttpRequestConfig } from './http';\nexport { HttpError } from './http';\nexport type {\n  IPersonaChatService,\n  ConversationResult,\n  CreateConversationParams,\n  EndConversationParams,\n  SendMessageParams,\n  ChatMessage,\n  QueryMessagesParams,\n  QueryMessagesResult,\n  FunctionCall,\n  FunctionCallResult,\n  Limitation,\n  LimitationType,\n} from './service';\n"],"mappings":";;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AAAmCC,OAAA,CAAAC,SAAA,GAAAH,KAAA,CAAAG,SAAA","ignoreList":[]}

package/dist/cjs/types/service.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=service.js.map

package/dist/cjs/types/service.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/types/service.ts"],"sourcesContent":["export type FunctionCall = {\n  functionCallId: string;\n  name: string;\n  arguments: string;\n};\n\nexport type FunctionCallResult = {\n  functionCallId: string;\n  result: string;\n  error?: string;\n};\n\nexport type LimitationType = 'MINUTES' | 'SECONDS' | 'TOKENS';\n\nexport interface Limitation {\n  type?: LimitationType;\n  limit?: number;\n}\n\nexport interface ConversationResult {\n  url: string;\n  id: string;\n  limit?: number;\n}\n\nexport interface CreateConversationParams {\n  chatId: string;\n  namespace: string;\n  chatConfig?: Record<string, unknown>;\n}\n\nexport interface EndConversationParams {\n  chatId: string;\n  conversationId: string;\n  namespace: string;\n}\n\nexport interface SendMessageParams {\n  chatId: string;\n  namespace: string;\n  message: string;\n  functionCallResults?: FunctionCallResult[];\n}\n\nexport interface ChatMessage {\n  id: string;\n  content: string;\n  role: 'user' | 'assistant';\n  createdAt?: string;\n}\n\nexport interface QueryMessagesParams {\n  chatId: string;\n  namespace: string;\n  limit?: number;\n  cursor?: string;\n}\n\nexport interface QueryMessagesResult {\n  messages: ChatMessage[];\n  nextCursor?: string;\n}\n\nexport interface IPersonaChatService {\n  createVoiceConversation(\n    params: CreateConversationParams,\n  ): Promise<ConversationResult>;\n  createInteractiveConversation(\n    params: CreateConversationParams,\n  ): Promise<ConversationResult>;\n  endInteractiveConversation(params: EndConversationParams): Promise<void>;\n  sendChatMessage(\n    params: SendMessageParams,\n  ): Promise<{ functionCalls?: FunctionCall[] }>;\n  queryChatMessages(params: QueryMessagesParams): Promise<QueryMessagesResult>;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/utils/captureImage/captureImage.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.captureImage = captureImage;
+var _helpers = require("./helpers");
+async function captureImage(video, options = {}) {
+  const {
+    targetWidth,
+    targetHeight,
+    fit = 'contain',
+    quality,
+    imageType = 'image/png'
+  } = options;
+  try {
+    const tw = targetWidth ?? video.videoWidth;
+    const th = targetHeight ?? video.videoHeight;
+    const canvas = new OffscreenCanvas(tw, th);
+    const ctx = canvas.getContext('2d');
+    (0, _helpers.drawFitted)(ctx, video, tw, th, fit);
+    const blob = await canvas.convertToBlob({
+      type: imageType,
+      quality: (0, _helpers.getQuality)(imageType, quality)
+    });
+    return blob;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+//# sourceMappingURL=captureImage.js.map

package/dist/cjs/utils/captureImage/captureImage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_helpers","require","captureImage","video","options","targetWidth","targetHeight","fit","quality","imageType","tw","videoWidth","th","videoHeight","canvas","OffscreenCanvas","ctx","getContext","drawFitted","blob","convertToBlob","type","getQuality","error","Promise","reject"],"sources":["../../../../src/utils/captureImage/captureImage.ts"],"sourcesContent":["import type { CaptureOptions } from './types';\nimport { drawFitted, getQuality } from './helpers';\n\nexport async function captureImage(\n  video: HTMLVideoElement,\n  options: CaptureOptions = {},\n): Promise<Blob> {\n  const {\n    targetWidth,\n    targetHeight,\n    fit = 'contain',\n    quality,\n    imageType = 'image/png',\n  } = options;\n\n  try {\n    const tw = targetWidth ?? video.videoWidth;\n    const th = targetHeight ?? video.videoHeight;\n\n    const canvas = new OffscreenCanvas(tw, th);\n    const ctx = canvas.getContext('2d')!;\n    drawFitted(ctx, video, tw, th, fit);\n\n    const blob = await canvas.convertToBlob({\n      type: imageType,\n      quality: getQuality(imageType, quality),\n    });\n\n    return blob;\n  } catch (error) {\n    return Promise.reject(error);\n  }\n}\n"],"mappings":";;;;AACA,IAAAA,QAAA,GAAAC,OAAA;AAEO,eAAeC,YAAYA,CAChCC,KAAuB,EACvBC,OAAuB,GAAG,CAAC,CAAC,EACb;EACf,MAAM;IACJC,WAAW;IACXC,YAAY;IACZC,GAAG,GAAG,SAAS;IACfC,OAAO;IACPC,SAAS,GAAG;EACd,CAAC,GAAGL,OAAO;EAEX,IAAI;IACF,MAAMM,EAAE,GAAGL,WAAW,IAAIF,KAAK,CAACQ,UAAU;IAC1C,MAAMC,EAAE,GAAGN,YAAY,IAAIH,KAAK,CAACU,WAAW;IAE5C,MAAMC,MAAM,GAAG,IAAIC,eAAe,CAACL,EAAE,EAAEE,EAAE,CAAC;IAC1C,MAAMI,GAAG,GAAGF,MAAM,CAACG,UAAU,CAAC,IAAI,CAAE;IACpC,IAAAC,mBAAU,EAACF,GAAG,EAAEb,KAAK,EAAEO,EAAE,EAAEE,EAAE,EAAEL,GAAG,CAAC;IAEnC,MAAMY,IAAI,GAAG,MAAML,MAAM,CAACM,aAAa,CAAC;MACtCC,IAAI,EAAEZ,SAAS;MACfD,OAAO,EAAE,IAAAc,mBAAU,EAACb,SAAS,EAAED,OAAO;IACxC,CAAC,CAAC;IAEF,OAAOW,IAAI;EACb,CAAC,CAAC,OAAOI,KAAK,EAAE;IACd,OAAOC,OAAO,CAACC,MAAM,CAACF,KAAK,CAAC;EAC9B;AACF","ignoreList":[]}

package/dist/cjs/utils/captureImage/helpers.js

@@ -0,0 +1,74 @@
+"use strict";
+
+exports.__esModule = true;
+exports.drawFitted = drawFitted;
+exports.getQuality = getQuality;
+function getQuality(type, quality) {
+  const mime = (type || '').toLowerCase();
+  if (mime === 'image/jpeg' || mime === 'image/webp') {
+    if (quality == null) {
+      return undefined;
+    }
+    return Math.min(1, Math.max(0, quality));
+  }
+  return undefined;
+}
+function drawFitted(ctx, source, tw, th, fit) {
+  const sw = source.videoWidth || source.width;
+  const sh = source.videoHeight || source.height;
+  const srcRatio = sw / sh;
+  const dstRatio = tw / th;
+  let dw = tw;
+  let dh = th;
+  let dx = 0;
+  let dy = 0;
+  switch (fit) {
+    case 'fill':
+      ctx.drawImage(source, 0, 0, tw, th);
+      return;
+    case 'none':
+      dx = (tw - sw) / 2;
+      dy = (th - sh) / 2;
+      ctx.drawImage(source, dx, dy);
+      return;
+    case 'contain':
+      if (srcRatio > dstRatio) {
+        dh = tw / srcRatio;
+      } else {
+        dw = th * srcRatio;
+      }
+      break;
+    case 'cover':
+      if (srcRatio > dstRatio) {
+        dw = th * srcRatio;
+      } else {
+        dh = tw / srcRatio;
+      }
+      break;
+    case 'scale-down':
+      {
+        const maxW = Math.min(tw, sw);
+        const maxH = Math.min(th, sh);
+        const limitRatio = maxW / maxH;
+        if (srcRatio > limitRatio) {
+          dh = maxW / srcRatio;
+          dw = maxW;
+        } else {
+          dw = maxH * srcRatio;
+          dh = maxH;
+        }
+        break;
+      }
+    default:
+      if (srcRatio > dstRatio) {
+        dh = tw / srcRatio;
+      } else {
+        dw = th * srcRatio;
+      }
+      break;
+  }
+  dx = (tw - dw) / 2;
+  dy = (th - dh) / 2;
+  ctx.drawImage(source, dx, dy, dw, dh);
+}
+//# sourceMappingURL=helpers.js.map

package/dist/cjs/utils/captureImage/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getQuality","type","quality","mime","toLowerCase","undefined","Math","min","max","drawFitted","ctx","source","tw","th","fit","sw","videoWidth","width","sh","videoHeight","height","srcRatio","dstRatio","dw","dh","dx","dy","drawImage","maxW","maxH","limitRatio"],"sources":["../../../../src/utils/captureImage/helpers.ts"],"sourcesContent":["import type { Fit } from './types';\n\nexport function getQuality(type: string, quality?: number): number | undefined {\n  const mime = (type || '').toLowerCase();\n\n  if (mime === 'image/jpeg' || mime === 'image/webp') {\n    if (quality == null) {\n      return undefined;\n    }\n\n    return Math.min(1, Math.max(0, quality));\n  }\n\n  return undefined;\n}\n\nexport function drawFitted(\n  ctx: OffscreenCanvasRenderingContext2D,\n  source: HTMLVideoElement,\n  tw: number,\n  th: number,\n  fit: Fit,\n) {\n  const sw = source.videoWidth || source.width;\n  const sh = source.videoHeight || source.height;\n\n  const srcRatio = sw / sh;\n  const dstRatio = tw / th;\n\n  let dw = tw;\n  let dh = th;\n  let dx = 0;\n  let dy = 0;\n\n  switch (fit) {\n    case 'fill':\n      ctx.drawImage(source, 0, 0, tw, th);\n      return;\n\n    case 'none':\n      dx = (tw - sw) / 2;\n      dy = (th - sh) / 2;\n      ctx.drawImage(source, dx, dy);\n      return;\n\n    case 'contain':\n      if (srcRatio > dstRatio) {\n        dh = tw / srcRatio;\n      } else {\n        dw = th * srcRatio;\n      }\n      break;\n\n    case 'cover':\n      if (srcRatio > dstRatio) {\n        dw = th * srcRatio;\n      } else {\n        dh = tw / srcRatio;\n      }\n      break;\n\n    case 'scale-down': {\n      const maxW = Math.min(tw, sw);\n      const maxH = Math.min(th, sh);\n      const limitRatio = maxW / maxH;\n      if (srcRatio > limitRatio) {\n        dh = maxW / srcRatio;\n        dw = maxW;\n      } else {\n        dw = maxH * srcRatio;\n        dh = maxH;\n      }\n      break;\n    }\n\n    default:\n      if (srcRatio > dstRatio) {\n        dh = tw / srcRatio;\n      } else {\n        dw = th * srcRatio;\n      }\n      break;\n  }\n\n  dx = (tw - dw) / 2;\n  dy = (th - dh) / 2;\n\n  ctx.drawImage(source, dx, dy, dw, dh);\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/utils/captureImage/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+var _captureImage = require("./captureImage");
+Object.keys(_captureImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _captureImage[key]) return;
+  exports[key] = _captureImage[key];
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  exports[key] = _types[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/utils/captureImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_captureImage","require","Object","keys","forEach","key","exports","_types"],"sources":["../../../../src/utils/captureImage/index.ts"],"sourcesContent":["export * from './captureImage';\nexport * from './types';\n"],"mappings":";;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,aAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,aAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,aAAA,CAAAK,GAAA;AAAA;AACA,IAAAE,MAAA,GAAAN,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAI,MAAA,EAAAH,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,MAAA,CAAAF,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAE,MAAA,CAAAF,GAAA;AAAA","ignoreList":[]}

package/dist/cjs/utils/captureImage/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=types.js.map

package/dist/cjs/utils/captureImage/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/utils/captureImage/types.ts"],"sourcesContent":["export type Fit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\nexport interface CaptureOptions {\n  targetWidth?: number;\n  targetHeight?: number;\n  fit?: Fit;\n  quality?: number;\n  imageType?: string;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/utils/compatibility/compatibility.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.detectBrowser = detectBrowser;
+exports.isIosDevice = isIosDevice;
+var _detectBrowser = require("detect-browser");
+// https://github.com/elevenlabs/packages/pull/391/files
+function isIosDevice() {
+  return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
+  // iPad on iOS 13 detection
+  navigator.userAgent.includes('Mac') && 'ontouchend' in document;
+}
+function detectBrowser() {
+  const browser = (0, _detectBrowser.detect)();
+  return browser == null ? void 0 : browser.name;
+}
+//# sourceMappingURL=compatibility.js.map

package/dist/cjs/utils/compatibility/compatibility.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_detectBrowser","require","isIosDevice","includes","navigator","platform","userAgent","document","detectBrowser","browser","detect","name"],"sources":["../../../../src/utils/compatibility/compatibility.ts"],"sourcesContent":["import { detect } from 'detect-browser';\n// https://github.com/elevenlabs/packages/pull/391/files\nexport function isIosDevice() {\n  return (\n    [\n      'iPad Simulator',\n      'iPhone Simulator',\n      'iPod Simulator',\n      'iPad',\n      'iPhone',\n      'iPod',\n    ].includes(navigator.platform) ||\n    // iPad on iOS 13 detection\n    (navigator.userAgent.includes('Mac') && 'ontouchend' in document)\n  );\n}\n\nexport function detectBrowser() {\n  const browser = detect();\n  return browser?.name;\n}\n"],"mappings":";;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AACA;AACO,SAASC,WAAWA,CAAA,EAAG;EAC5B,OACE,CACE,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,MAAM,CACP,CAACC,QAAQ,CAACC,SAAS,CAACC,QAAQ,CAAC;EAC9B;EACCD,SAAS,CAACE,SAAS,CAACH,QAAQ,CAAC,KAAK,CAAC,IAAI,YAAY,IAAII,QAAS;AAErE;AAEO,SAASC,aAAaA,CAAA,EAAG;EAC9B,MAAMC,OAAO,GAAG,IAAAC,qBAAM,EAAC,CAAC;EACxB,OAAOD,OAAO,oBAAPA,OAAO,CAAEE,IAAI;AACtB","ignoreList":[]}

package/dist/cjs/utils/compatibility/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+var _compatibility = require("./compatibility");
+Object.keys(_compatibility).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _compatibility[key]) return;
+  exports[key] = _compatibility[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/utils/compatibility/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_compatibility","require","Object","keys","forEach","key","exports"],"sources":["../../../../src/utils/compatibility/index.ts"],"sourcesContent":["export * from './compatibility';\n"],"mappings":";;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,cAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,cAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,cAAA,CAAAK,GAAA;AAAA","ignoreList":[]}

package/dist/cjs/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+var _captureImage = require("./utils/captureImage");
+Object.keys(_captureImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _captureImage[key]) return;
+  exports[key] = _captureImage[key];
+});
+//# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_captureImage","require","Object","keys","forEach","key","exports"],"sources":["../../src/utils.ts"],"sourcesContent":["export * from './utils/captureImage';\n"],"mappings":";;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,aAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,aAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,aAAA,CAAAK,GAAA;AAAA","ignoreList":[]}

package/dist/esm/components/Audio/Audio.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import invariant from 'invariant';
+import { useAtomValue } from 'jotai';
+import { RoomAudioRenderer } from '@livekit/components-react';
+import { useAudio } from '../../hooks/useAudio';
+import { state } from '../../conversation';
+export function Audio() {
+  const conversation = useAtomValue(state.conversation);
+  const _useAudio = useAudio(),
+    muted = _useAudio.muted,
+    volume = _useAudio.volume;
+  invariant(conversation, 'Conversation is not initialized');
+  return /*#__PURE__*/React.createElement(RoomAudioRenderer, {
+    muted: muted,
+    volume: volume
+  });
+}
+//# sourceMappingURL=Audio.js.map

package/dist/esm/components/Audio/Audio.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","invariant","useAtomValue","RoomAudioRenderer","useAudio","state","Audio","conversation","_useAudio","muted","volume","createElement"],"sources":["../../../../src/components/Audio/Audio.tsx"],"sourcesContent":["import React from 'react';\nimport invariant from 'invariant';\nimport { useAtomValue } from 'jotai';\nimport { RoomAudioRenderer } from '@livekit/components-react';\nimport { useAudio } from '../../hooks/useAudio';\n\nimport { state } from '../../conversation';\n\nexport function Audio() {\n  const conversation = useAtomValue(state.conversation);\n  const { muted, volume } = useAudio();\n\n  invariant(conversation, 'Conversation is not initialized');\n  return <RoomAudioRenderer muted={muted} volume={volume} />;\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,WAAW;AACjC,SAASC,YAAY,QAAQ,OAAO;AACpC,SAASC,iBAAiB,QAAQ,2BAA2B;AAC7D,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAO,SAASC,KAAKA,CAAA,EAAG;EACtB,MAAMC,YAAY,GAAGL,YAAY,CAACG,KAAK,CAACE,YAAY,CAAC;EACrD,MAAAC,SAAA,GAA0BJ,QAAQ,CAAC,CAAC;IAA5BK,KAAK,GAAAD,SAAA,CAALC,KAAK;IAAEC,MAAM,GAAAF,SAAA,CAANE,MAAM;EAErBT,SAAS,CAACM,YAAY,EAAE,iCAAiC,CAAC;EAC1D,oBAAOP,KAAA,CAAAW,aAAA,CAACR,iBAAiB;IAACM,KAAK,EAAEA,KAAM;IAACC,MAAM,EAAEA;EAAO,CAAE,CAAC;AAC5D","ignoreList":[]}

package/dist/esm/components/Audio/index.js

@@ -0,0 +1,2 @@
+export * from './Audio';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Audio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/Audio/index.ts"],"sourcesContent":["export * from './Audio';\n"],"mappings":"AAAA,cAAc,SAAS","ignoreList":[]}

package/dist/esm/components/ChromaKey/ChromaKey.js

@@ -0,0 +1,115 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+const _excluded = ["className", "style", "width", "height", "pip", "onPiPEnter", "onPiPExit", "onPiPError"];
+import React, { useEffect, useRef, useState } from 'react';
+import { chromaKey } from './chroma-key';
+import { pipActiveAtom, usePictureInPictureAuto } from '../../hooks/usePictureInPicture';
+import { useAtomValue } from 'jotai';
+export function ChromaKey(props) {
+  const _props$debug = props.debug,
+    debug = _props$debug === void 0 ? false : _props$debug,
+    children = props.children,
+    _props$color = props.color,
+    color = _props$color === void 0 ? '#03ff9c' : _props$color,
+    _props$spill = props.spill,
+    spill = _props$spill === void 0 ? 0.1 : _props$spill,
+    _props$smoothness = props.smoothness,
+    smoothness = _props$smoothness === void 0 ? 0.15 : _props$smoothness,
+    _props$similarity = props.similarity,
+    similarity = _props$similarity === void 0 ? 0.3 : _props$similarity,
+    fallback = props.fallback,
+    background = props.background;
+  const _children$props = children.props,
+    className = _children$props.className,
+    style = _children$props.style,
+    width = _children$props.width,
+    height = _children$props.height,
+    pip = _children$props.pip,
+    onPiPEnter = _children$props.onPiPEnter,
+    onPiPExit = _children$props.onPiPExit,
+    onPiPError = _children$props.onPiPError,
+    restVideoProps = _objectWithoutPropertiesLoose(_children$props, _excluded);
+  const _useState = useState(false),
+    isPlayable = _useState[0],
+    setIsPlayable = _useState[1];
+  const $video = useRef(null);
+  const $canvas = useRef(null);
+  const isPiPActive = useAtomValue(pipActiveAtom);
+
+  // Setup PiP - hook handles canvas → video conversion internally
+  usePictureInPictureAuto({
+    element: pip && isPlayable ? $canvas.current : null,
+    onEnter: onPiPEnter,
+    onExit: onPiPExit,
+    onError: onPiPError
+  });
+  const showPipFallback = pip && isPiPActive;
+  useEffect(() => {
+    if (!$video.current || !$canvas.current || !isPlayable) {
+      debug && console.warn('Video or canvas is not initialized');
+      return;
+    }
+    const process = chromaKey($video.current, $canvas.current, {
+      color,
+      spill,
+      similarity,
+      smoothness,
+      background
+    });
+    debug && console.log('Chroma key initialized', $video.current, $canvas.current, {
+      color,
+      spill,
+      similarity,
+      smoothness
+    });
+    let rafId;
+    let isActive = true;
+    function loop() {
+      if (!isActive) {
+        return;
+      }
+      process == null || process();
+      rafId = requestAnimationFrame(loop);
+    }
+    rafId = requestAnimationFrame(loop);
+    return () => {
+      debug && console.log('Chroma key process cleanup');
+      isActive = false;
+      cancelAnimationFrame(rafId);
+    };
+  }, [color, spill, similarity, smoothness, isPlayable, debug, background]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      ...style,
+      width,
+      height
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: $canvas,
+    style: {
+      width: '100%',
+      height: '100%',
+      display: showPipFallback ? 'none' : 'block',
+      ...(isPlayable ? {} : {
+        position: 'absolute',
+        opacity: 0,
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        zIndex: -1
+      })
+    }
+  }), !isPlayable && fallback, /*#__PURE__*/React.cloneElement(children, {
+    ...restVideoProps,
+    ref: $video,
+    style: {
+      display: 'none'
+    },
+    onCanPlay: checkPlayable,
+    onLoadedMetadata: checkPlayable
+  }));
+  function checkPlayable(event) {
+    const readyState = event.currentTarget.readyState;
+    setIsPlayable(readyState >= HTMLMediaElement.HAVE_FUTURE_DATA);
+  }
+}
+//# sourceMappingURL=ChromaKey.js.map

package/dist/esm/components/ChromaKey/ChromaKey.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","useState","chromaKey","pipActiveAtom","usePictureInPictureAuto","useAtomValue","ChromaKey","props","_props$debug","debug","children","_props$color","color","_props$spill","spill","_props$smoothness","smoothness","_props$similarity","similarity","fallback","background","_children$props","className","style","width","height","pip","onPiPEnter","onPiPExit","onPiPError","restVideoProps","_objectWithoutPropertiesLoose","_excluded","_useState","isPlayable","setIsPlayable","$video","$canvas","isPiPActive","element","current","onEnter","onExit","onError","showPipFallback","console","warn","process","log","rafId","isActive","loop","requestAnimationFrame","cancelAnimationFrame","createElement","ref","display","position","opacity","pointerEvents","visibility","zIndex","cloneElement","onCanPlay","checkPlayable","onLoadedMetadata","event","readyState","currentTarget","HTMLMediaElement","HAVE_FUTURE_DATA"],"sources":["../../../../src/components/ChromaKey/ChromaKey.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { chromaKey } from './chroma-key';\nimport {\n  pipActiveAtom,\n  usePictureInPictureAuto,\n} from '../../hooks/usePictureInPicture';\nimport { useAtomValue } from 'jotai';\n\ninterface ChromaKeyProps extends React.HTMLAttributes<HTMLCanvasElement> {\n  debug?: boolean;\n  color?: string;\n  spill?: number;\n  similarity?: number;\n  smoothness?: number;\n  fallback?: React.ReactNode;\n  background?: string | null;\n  children: React.ReactElement<\n    React.VideoHTMLAttributes<HTMLVideoElement> & {\n      ref?: React.Ref<HTMLVideoElement>;\n      pip?: boolean;\n      onPiPEnter?: () => void;\n      onPiPExit?: () => void;\n      onPiPError?: (error: Error) => void;\n    }\n  >;\n}\n\nexport function ChromaKey(props: ChromaKeyProps) {\n  const {\n    debug = false,\n    children,\n    color = '#03ff9c',\n    spill = 0.1,\n    smoothness = 0.15,\n    similarity = 0.3,\n    fallback,\n    background,\n  } = props;\n\n  const {\n    className,\n    style,\n    width,\n    height,\n    pip,\n    onPiPEnter,\n    onPiPExit,\n    onPiPError,\n    ...restVideoProps\n  } = children.props;\n  const [isPlayable, setIsPlayable] = useState(false);\n\n  const $video = useRef<HTMLVideoElement>(null);\n  const $canvas = useRef<HTMLCanvasElement>(null);\n  const isPiPActive = useAtomValue(pipActiveAtom);\n\n  // Setup PiP - hook handles canvas → video conversion internally\n  usePictureInPictureAuto({\n    element: pip && isPlayable ? $canvas.current : null,\n    onEnter: onPiPEnter,\n    onExit: onPiPExit,\n    onError: onPiPError,\n  });\n\n  const showPipFallback = pip && isPiPActive;\n\n  useEffect(() => {\n    if (!$video.current || !$canvas.current || !isPlayable) {\n      debug && console.warn('Video or canvas is not initialized');\n\n      return;\n    }\n\n    const process = chromaKey($video.current, $canvas.current, {\n      color,\n      spill,\n      similarity,\n      smoothness,\n      background,\n    });\n\n    debug &&\n      console.log('Chroma key initialized', $video.current, $canvas.current, {\n        color,\n        spill,\n        similarity,\n        smoothness,\n      });\n\n    let rafId: number;\n    let isActive = true;\n\n    function loop() {\n      if (!isActive) {\n        return;\n      }\n      process?.();\n      rafId = requestAnimationFrame(loop);\n    }\n\n    rafId = requestAnimationFrame(loop);\n\n    return () => {\n      debug && console.log('Chroma key process cleanup');\n      isActive = false;\n      cancelAnimationFrame(rafId);\n    };\n  }, [color, spill, similarity, smoothness, isPlayable, debug, background]);\n\n  return (\n    <div\n      className={className}\n      style={{\n        ...style,\n        width,\n        height,\n      }}\n    >\n      <canvas\n        ref={$canvas}\n        style={{\n          width: '100%',\n          height: '100%',\n          display: showPipFallback ? 'none' : 'block',\n          ...(isPlayable\n            ? {}\n            : {\n                position: 'absolute',\n                opacity: 0,\n                pointerEvents: 'none',\n                visibility: 'hidden',\n                zIndex: -1,\n              }),\n        }}\n      />\n      {!isPlayable && fallback}\n\n      {React.cloneElement(children, {\n        ...restVideoProps,\n        ref: $video,\n        style: { display: 'none' },\n        onCanPlay: checkPlayable,\n        onLoadedMetadata: checkPlayable,\n      })}\n    </div>\n  );\n\n  function checkPlayable(event: React.SyntheticEvent<HTMLVideoElement>) {\n    const readyState = event.currentTarget.readyState;\n\n    setIsPlayable(readyState >= HTMLMediaElement.HAVE_FUTURE_DATA);\n  }\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAE1D,SAASC,SAAS,QAAQ,cAAc;AACxC,SACEC,aAAa,EACbC,uBAAuB,QAClB,iCAAiC;AACxC,SAASC,YAAY,QAAQ,OAAO;AAqBpC,OAAO,SAASC,SAASA,CAACC,KAAqB,EAAE;EAC/C,MAAAC,YAAA,GASID,KAAK,CARPE,KAAK;IAALA,KAAK,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACbE,QAAQ,GAONH,KAAK,CAPPG,QAAQ;IAAAC,YAAA,GAONJ,KAAK,CANPK,KAAK;IAALA,KAAK,GAAAD,YAAA,cAAG,SAAS,GAAAA,YAAA;IAAAE,YAAA,GAMfN,KAAK,CALPO,KAAK;IAALA,KAAK,GAAAD,YAAA,cAAG,GAAG,GAAAA,YAAA;IAAAE,iBAAA,GAKTR,KAAK,CAJPS,UAAU;IAAVA,UAAU,GAAAD,iBAAA,cAAG,IAAI,GAAAA,iBAAA;IAAAE,iBAAA,GAIfV,KAAK,CAHPW,UAAU;IAAVA,UAAU,GAAAD,iBAAA,cAAG,GAAG,GAAAA,iBAAA;IAChBE,QAAQ,GAENZ,KAAK,CAFPY,QAAQ;IACRC,UAAU,GACRb,KAAK,CADPa,UAAU;EAGZ,MAAAC,eAAA,GAUIX,QAAQ,CAACH,KAAK;IAThBe,SAAS,GAAAD,eAAA,CAATC,SAAS;IACTC,KAAK,GAAAF,eAAA,CAALE,KAAK;IACLC,KAAK,GAAAH,eAAA,CAALG,KAAK;IACLC,MAAM,GAAAJ,eAAA,CAANI,MAAM;IACNC,GAAG,GAAAL,eAAA,CAAHK,GAAG;IACHC,UAAU,GAAAN,eAAA,CAAVM,UAAU;IACVC,SAAS,GAAAP,eAAA,CAATO,SAAS;IACTC,UAAU,GAAAR,eAAA,CAAVQ,UAAU;IACPC,cAAc,GAAAC,6BAAA,CAAAV,eAAA,EAAAW,SAAA;EAEnB,MAAAC,SAAA,GAAoChC,QAAQ,CAAC,KAAK,CAAC;IAA5CiC,UAAU,GAAAD,SAAA;IAAEE,aAAa,GAAAF,SAAA;EAEhC,MAAMG,MAAM,GAAGpC,MAAM,CAAmB,IAAI,CAAC;EAC7C,MAAMqC,OAAO,GAAGrC,MAAM,CAAoB,IAAI,CAAC;EAC/C,MAAMsC,WAAW,GAAGjC,YAAY,CAACF,aAAa,CAAC;;EAE/C;EACAC,uBAAuB,CAAC;IACtBmC,OAAO,EAAEb,GAAG,IAAIQ,UAAU,GAAGG,OAAO,CAACG,OAAO,GAAG,IAAI;IACnDC,OAAO,EAAEd,UAAU;IACnBe,MAAM,EAAEd,SAAS;IACjBe,OAAO,EAAEd;EACX,CAAC,CAAC;EAEF,MAAMe,eAAe,GAAGlB,GAAG,IAAIY,WAAW;EAE1CvC,SAAS,CAAC,MAAM;IACd,IAAI,CAACqC,MAAM,CAACI,OAAO,IAAI,CAACH,OAAO,CAACG,OAAO,IAAI,CAACN,UAAU,EAAE;MACtDzB,KAAK,IAAIoC,OAAO,CAACC,IAAI,CAAC,oCAAoC,CAAC;MAE3D;IACF;IAEA,MAAMC,OAAO,GAAG7C,SAAS,CAACkC,MAAM,CAACI,OAAO,EAAEH,OAAO,CAACG,OAAO,EAAE;MACzD5B,KAAK;MACLE,KAAK;MACLI,UAAU;MACVF,UAAU;MACVI;IACF,CAAC,CAAC;IAEFX,KAAK,IACHoC,OAAO,CAACG,GAAG,CAAC,wBAAwB,EAAEZ,MAAM,CAACI,OAAO,EAAEH,OAAO,CAACG,OAAO,EAAE;MACrE5B,KAAK;MACLE,KAAK;MACLI,UAAU;MACVF;IACF,CAAC,CAAC;IAEJ,IAAIiC,KAAa;IACjB,IAAIC,QAAQ,GAAG,IAAI;IAEnB,SAASC,IAAIA,CAAA,EAAG;MACd,IAAI,CAACD,QAAQ,EAAE;QACb;MACF;MACAH,OAAO,YAAPA,OAAO,CAAG,CAAC;MACXE,KAAK,GAAGG,qBAAqB,CAACD,IAAI,CAAC;IACrC;IAEAF,KAAK,GAAGG,qBAAqB,CAACD,IAAI,CAAC;IAEnC,OAAO,MAAM;MACX1C,KAAK,IAAIoC,OAAO,CAACG,GAAG,CAAC,4BAA4B,CAAC;MAClDE,QAAQ,GAAG,KAAK;MAChBG,oBAAoB,CAACJ,KAAK,CAAC;IAC7B,CAAC;EACH,CAAC,EAAE,CAACrC,KAAK,EAAEE,KAAK,EAAEI,UAAU,EAAEF,UAAU,EAAEkB,UAAU,EAAEzB,KAAK,EAAEW,UAAU,CAAC,CAAC;EAEzE,oBACEtB,KAAA,CAAAwD,aAAA;IACEhC,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAE;MACL,GAAGA,KAAK;MACRC,KAAK;MACLC;IACF;EAAE,gBAEF3B,KAAA,CAAAwD,aAAA;IACEC,GAAG,EAAElB,OAAQ;IACbd,KAAK,EAAE;MACLC,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE,MAAM;MACd+B,OAAO,EAAEZ,eAAe,GAAG,MAAM,GAAG,OAAO;MAC3C,IAAIV,UAAU,GACV,CAAC,CAAC,GACF;QACEuB,QAAQ,EAAE,UAAU;QACpBC,OAAO,EAAE,CAAC;QACVC,aAAa,EAAE,MAAM;QACrBC,UAAU,EAAE,QAAQ;QACpBC,MAAM,EAAE,CAAC;MACX,CAAC;IACP;EAAE,CACH,CAAC,EACD,CAAC3B,UAAU,IAAIf,QAAQ,eAEvBrB,KAAK,CAACgE,YAAY,CAACpD,QAAQ,EAAE;IAC5B,GAAGoB,cAAc;IACjByB,GAAG,EAAEnB,MAAM;IACXb,KAAK,EAAE;MAAEiC,OAAO,EAAE;IAAO,CAAC;IAC1BO,SAAS,EAAEC,aAAa;IACxBC,gBAAgB,EAAED;EACpB,CAAC,CACE,CAAC;EAGR,SAASA,aAAaA,CAACE,KAA6C,EAAE;IACpE,MAAMC,UAAU,GAAGD,KAAK,CAACE,aAAa,CAACD,UAAU;IAEjDhC,aAAa,CAACgC,UAAU,IAAIE,gBAAgB,CAACC,gBAAgB,CAAC;EAChE;AACF","ignoreList":[]}