@wix/legends-platform-sdk 1.0.0

package/README.md

@@ -0,0 +1,186 @@
+# @wix/legends-platform-sdk
+
+React SDK for building AI-powered voice, video, and text chat experiences on the Legends Platform.
+
+## Installation
+
+```bash
+npm install @wix/legends-platform-sdk
+# or
+yarn add @wix/legends-platform-sdk
+```
+
+## Quick Start
+
+Wrap your app with `LegendsPlatform` and pass your API key:
+
+```tsx
+import { LegendsPlatform, useConversation, useMicrophone } from '@wix/legends-platform-sdk';
+
+function VoiceButton() {
+  const { status, join, leave } = useConversation({ type: 'audio' });
+  const { enabled, setEnabled } = useMicrophone();
+
+  return (
+    <div>
+      <p>Status: {status}</p>
+      {status === 'pending' && <button onClick={join}>Start</button>}
+      {status === 'created' && (
+        <>
+          <button onClick={() => leave()}>End</button>
+          <button onClick={() => setEnabled(!enabled)}>
+            Mic: {enabled ? 'ON' : 'OFF'}
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <LegendsPlatform
+      chatId="your-chat-id"
+      namespace="your-namespace"
+      apiKey="your-api-key"
+    >
+      <VoiceButton />
+    </LegendsPlatform>
+  );
+}
+```
+
+## API
+
+### `<LegendsPlatform />`
+
+The root context provider. Must wrap all SDK hooks and components.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `chatId` | `string` | Required. The chat instance ID |
+| `namespace` | `string` | Required. Your namespace |
+| `apiKey` | `string` | API key for authentication (external apps) |
+| `personaChatService` | `IPersonaChatService` | Custom service implementation (advanced) |
+| `queryClient` | `QueryClient` | Optional TanStack Query client |
+| `children` | `ReactNode` | Required |
+
+Either `apiKey` or `personaChatService` must be provided.
+
+---
+
+### Hooks
+
+#### `useConversation(options)`
+
+Manages a voice or video conversation session.
+
+```tsx
+const { status, join, leave } = useConversation({
+  type: 'audio' | 'video', // default: 'audio'
+  autoJoin: false,          // default: false
+});
+```
+
+| Return | Type | Description |
+|--------|------|-------------|
+| `status` | `'pending' \| 'connecting' \| 'created' \| 'ended'` | Current conversation state |
+| `join()` | `() => void` | Start the conversation |
+| `leave()` | `(reason?) => void` | End the conversation |
+
+#### `useMicrophone()`
+
+```tsx
+const { enabled, setEnabled } = useMicrophone();
+```
+
+#### `useCamera()`
+
+```tsx
+const { enabled, setEnabled } = useCamera();
+```
+
+#### `useSpeaker()`
+
+```tsx
+const { volume, setVolume } = useSpeaker();
+```
+
+#### `useTextChat()`
+
+Manages text-based chat messages.
+
+```tsx
+const { messages, status, send, fetchNext } = useTextChat();
+
+await send({ message: 'Hello' });
+```
+
+#### `useConversationStatus()`
+
+```tsx
+const status = useConversationStatus();
+// 'pending' | 'connecting' | 'created' | 'ended'
+```
+
+#### `useConversationTimer()`
+
+```tsx
+const { elapsed, remaining } = useConversationTimer();
+```
+
+#### `useTools(registry)`
+
+Register custom tool handlers for function calling.
+
+```tsx
+import { useTools } from '@wix/legends-platform-sdk';
+
+const tools = useTools({
+  get_weather: {
+    handler: async ({ city }) => {
+      const data = await fetchWeather(city);
+      return { temperature: data.temp };
+    },
+  },
+});
+
+return (
+  <LegendsPlatform ... tools={tools}>
+    ...
+  </LegendsPlatform>
+);
+```
+
+---
+
+## Advanced: Custom Service
+
+For advanced use cases, inject a custom `IPersonaChatService` instead of using `apiKey`:
+
+```tsx
+import { LegendsPlatform, type IPersonaChatService } from '@wix/legends-platform-sdk';
+
+const myService: IPersonaChatService = {
+  async createVoiceConversation(params) { ... },
+  async createInteractiveConversation(params) { ... },
+  async endInteractiveConversation(params) { ... },
+  async sendChatMessage(params) { ... },
+  async queryChatMessages(params) { ... },
+};
+
+<LegendsPlatform personaChatService={myService} ...>
+  ...
+</LegendsPlatform>
+```
+
+---
+
+## Supported Conversation Vendors
+
+- **LiveKit** — voice and video
+- **Daily** — video
+- **Hume** — voice with emotional intelligence
+- **ElevenLabs** — voice
+
+The vendor is determined automatically based on the conversation configuration.

package/components/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/components.js",
+  "module": "../dist/esm/components.js",
+  "types": "../dist/types/components.d.ts"
+}

package/dist/cjs/components/Audio/Audio.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Audio = Audio;
+var _react = _interopRequireDefault(require("react"));
+var _invariant = _interopRequireDefault(require("invariant"));
+var _jotai = require("jotai");
+var _componentsReact = require("@livekit/components-react");
+var _useAudio = require("../../hooks/useAudio");
+var _conversation = require("../../conversation");
+var _jsxFileName = "/home/builduser/work/cfec65c05e11cc5b/packages/legends-platform-sdk/dist/cjs/components/Audio/Audio.tsx";
+function Audio() {
+  const conversation = (0, _jotai.useAtomValue)(_conversation.state.conversation);
+  const {
+    muted,
+    volume
+  } = (0, _useAudio.useAudio)();
+  (0, _invariant.default)(conversation, 'Conversation is not initialized');
+  return /*#__PURE__*/_react.default.createElement(_componentsReact.RoomAudioRenderer, {
+    muted: muted,
+    volume: volume,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 14,
+      columnNumber: 10
+    }
+  });
+}
+//# sourceMappingURL=Audio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_invariant","_jotai","_componentsReact","_useAudio","_conversation","_jsxFileName","Audio","conversation","useAtomValue","state","muted","volume","useAudio","invariant","default","createElement","RoomAudioRenderer","__self","__source","fileName","lineNumber","columnNumber"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAEA,IAAAK,aAAA,GAAAL,OAAA;AAA2C,IAAAM,YAAA;AAEpC,SAASC,KAAKA,CAAA,EAAG;EACtB,MAAMC,YAAY,GAAG,IAAAC,mBAAY,EAACC,mBAAK,CAACF,YAAY,CAAC;EACrD,MAAM;IAAEG,KAAK;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAEpC,IAAAC,kBAAS,EAACN,YAAY,EAAE,iCAAiC,CAAC;EAC1D,oBAAOV,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACb,gBAAA,CAAAc,iBAAiB;IAACN,KAAK,EAAEA,KAAM;IAACC,MAAM,EAAEA,MAAO;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC;AAC5D","ignoreList":[]}

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

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

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

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

package/dist/cjs/components/ChromaKey/ChromaKey.js

@@ -0,0 +1,127 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ChromaKey = ChromaKey;
+var _react = _interopRequireWildcard(require("react"));
+var _chromaKey = require("./chroma-key");
+var _usePictureInPicture = require("../../hooks/usePictureInPicture");
+var _jotai = require("jotai");
+var _jsxFileName = "/home/builduser/work/cfec65c05e11cc5b/packages/legends-platform-sdk/dist/cjs/components/ChromaKey/ChromaKey.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ChromaKey(props) {
+  const {
+    debug = false,
+    children,
+    color = '#03ff9c',
+    spill = 0.1,
+    smoothness = 0.15,
+    similarity = 0.3,
+    fallback,
+    background
+  } = props;
+  const {
+    className,
+    style,
+    width,
+    height,
+    pip,
+    onPiPEnter,
+    onPiPExit,
+    onPiPError,
+    ...restVideoProps
+  } = children.props;
+  const [isPlayable, setIsPlayable] = (0, _react.useState)(false);
+  const $video = (0, _react.useRef)(null);
+  const $canvas = (0, _react.useRef)(null);
+  const isPiPActive = (0, _jotai.useAtomValue)(_usePictureInPicture.pipActiveAtom);
+
+  // Setup PiP - hook handles canvas → video conversion internally
+  (0, _usePictureInPicture.usePictureInPictureAuto)({
+    element: pip && isPlayable ? $canvas.current : null,
+    onEnter: onPiPEnter,
+    onExit: onPiPExit,
+    onError: onPiPError
+  });
+  const showPipFallback = pip && isPiPActive;
+  (0, _react.useEffect)(() => {
+    if (!$video.current || !$canvas.current || !isPlayable) {
+      debug && console.warn('Video or canvas is not initialized');
+      return;
+    }
+    const process = (0, _chromaKey.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.default.createElement("div", {
+    className: className,
+    style: {
+      ...style,
+      width,
+      height
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("canvas", {
+    ref: $canvas,
+    style: {
+      width: '100%',
+      height: '100%',
+      display: showPipFallback ? 'none' : 'block',
+      ...(isPlayable ? {} : {
+        position: 'absolute',
+        opacity: 0,
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        zIndex: -1
+      })
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 120,
+      columnNumber: 7
+    }
+  }), !isPlayable && fallback, /*#__PURE__*/_react.default.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/cjs/components/ChromaKey/ChromaKey.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_chromaKey","_usePictureInPicture","_jotai","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ChromaKey","props","debug","children","color","spill","smoothness","similarity","fallback","background","className","style","width","height","pip","onPiPEnter","onPiPExit","onPiPError","restVideoProps","isPlayable","setIsPlayable","useState","$video","useRef","$canvas","isPiPActive","useAtomValue","pipActiveAtom","usePictureInPictureAuto","element","current","onEnter","onExit","onError","showPipFallback","useEffect","console","warn","process","chromaKey","log","rafId","isActive","loop","requestAnimationFrame","cancelAnimationFrame","createElement","__self","__source","fileName","lineNumber","columnNumber","ref","display","position","opacity","pointerEvents","visibility","zIndex","React","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":"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","ignoreList":[]}

package/dist/cjs/components/ChromaKey/chroma-key.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.chromaKey = chromaKey;
+var _invariant = _interopRequireDefault(require("invariant"));
+var shaders = _interopRequireWildcard(require("./shaders"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function chromaKey($video, $canvas, options) {
+  const gl = $canvas.getContext('webgl', {
+    alpha: true,
+    premultipliedAlpha: false,
+    preserveDrawingBuffer: true
+  });
+  (0, _invariant.default)(gl, 'WebGL context is not initialized');
+  const BUFFER = gl.createBuffer();
+  const TEXTURE = gl.createTexture();
+  const program = gl.createProgram();
+  const _VS_ = gl.createShader(gl.VERTEX_SHADER);
+  const _FS_ = gl.createShader(gl.FRAGMENT_SHADER);
+  (0, _invariant.default)(program, 'Program is not initialized');
+  (0, _invariant.default)(_VS_, 'Vertex shader is not initialized');
+  (0, _invariant.default)(_FS_, 'Fragment shader is not initialized');
+  gl.shaderSource(_VS_, shaders.VertexAlign);
+  gl.shaderSource(_FS_, shaders.ChromaKey);
+  gl.compileShader(_VS_);
+  gl.compileShader(_FS_);
+  if (!gl.getShaderParameter(_FS_, gl.COMPILE_STATUS)) {
+    console.error('Fragment shader compilation failed', gl.getShaderInfoLog(_FS_));
+  }
+  gl.attachShader(program, _VS_);
+  gl.attachShader(program, _FS_);
+  gl.linkProgram(program);
+  gl.useProgram(program);
+  gl.bindTexture(gl.TEXTURE_2D, TEXTURE);
+  gl.bindBuffer(gl.ARRAY_BUFFER, BUFFER);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  const $coords$ = gl.getAttribLocation(program, 'coords');
+  const $texture$ = gl.getUniformLocation(program, 'tex');
+  const $width$ = gl.getUniformLocation(program, 'texWidth');
+  const $height$ = gl.getUniformLocation(program, 'texHeight');
+  const $color$ = gl.getUniformLocation(program, 'keyColor');
+  const $similarity$ = gl.getUniformLocation(program, 'similarity');
+  const $smoothness$ = gl.getUniformLocation(program, 'smoothness');
+  const $spill$ = gl.getUniformLocation(program, 'spill');
+  gl.vertexAttribPointer($coords$, 2, gl.FLOAT, false, 0, 0);
+  gl.enableVertexAttribArray($coords$);
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Enable blending for transparency (critical for Safari)
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  return function process() {
+    const {
+      color,
+      spill,
+      similarity,
+      smoothness,
+      background
+    } = options;
+
+    // Use video dimensions directly instead of metadata (for Safari compatibility)
+    const videoWidth = $video.videoWidth;
+    const videoHeight = $video.videoHeight;
+    if (!videoWidth || !videoHeight) {
+      return; // Video not ready yet
+    }
+    const width = videoWidth * window.devicePixelRatio;
+    const height = videoHeight * window.devicePixelRatio;
+    $canvas.width = width;
+    $canvas.height = height;
+    gl.viewport(0, 0, width, height);
+
+    // Clear with background color or transparent
+    if (background) {
+      const r = parseInt(background.substring(1, 3), 16) / 255;
+      const g = parseInt(background.substring(3, 5), 16) / 255;
+      const b = parseInt(background.substring(5, 7), 16) / 255;
+      gl.clearColor(r, g, b, 1);
+    } else {
+      gl.clearColor(0, 0, 0, 0);
+    }
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    gl.uniform1i($texture$, 0);
+    gl.uniform1f($width$, width);
+    gl.uniform1f($height$, height);
+    gl.uniform1f($spill$, spill);
+    gl.uniform1f($similarity$, similarity);
+    gl.uniform1f($smoothness$, smoothness);
+    gl.uniform3f($color$, parseInt(color.substr(1, 2), 16) / 255, parseInt(color.substr(3, 2), 16) / 255, parseInt(color.substr(5, 2), 16) / 255);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);
+    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
+  };
+}
+//# sourceMappingURL=chroma-key.js.map

package/dist/cjs/components/ChromaKey/chroma-key.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_invariant","_interopRequireDefault","require","shaders","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","chromaKey","$video","$canvas","options","gl","getContext","alpha","premultipliedAlpha","preserveDrawingBuffer","invariant","BUFFER","createBuffer","TEXTURE","createTexture","program","createProgram","_VS_","createShader","VERTEX_SHADER","_FS_","FRAGMENT_SHADER","shaderSource","VertexAlign","ChromaKey","compileShader","getShaderParameter","COMPILE_STATUS","console","error","getShaderInfoLog","attachShader","linkProgram","useProgram","bindTexture","TEXTURE_2D","bindBuffer","ARRAY_BUFFER","bufferData","Float32Array","STATIC_DRAW","texParameteri","TEXTURE_MIN_FILTER","LINEAR","TEXTURE_WRAP_S","CLAMP_TO_EDGE","TEXTURE_WRAP_T","$coords$","getAttribLocation","$texture$","getUniformLocation","$width$","$height$","$color$","$similarity$","$smoothness$","$spill$","vertexAttribPointer","FLOAT","enableVertexAttribArray","activeTexture","TEXTURE0","enable","BLEND","blendFunc","SRC_ALPHA","ONE_MINUS_SRC_ALPHA","process","color","spill","similarity","smoothness","background","videoWidth","videoHeight","width","window","devicePixelRatio","height","viewport","parseInt","substring","g","b","clearColor","clear","COLOR_BUFFER_BIT","uniform1i","uniform1f","uniform3f","substr","texImage2D","RGB","UNSIGNED_BYTE","drawArrays","TRIANGLE_FAN"],"sources":["../../../../src/components/ChromaKey/chroma-key.ts"],"sourcesContent":["import invariant from 'invariant';\n\nimport * as shaders from './shaders';\n\nexport type ProcessCallback = () => void;\n\nexport function chromaKey(\n  $video: HTMLVideoElement,\n  $canvas: HTMLCanvasElement,\n  options: {\n    color: string;\n    spill: number;\n    similarity: number;\n    smoothness: number;\n    background?: string | null;\n  },\n): ProcessCallback {\n  const gl = $canvas.getContext('webgl', {\n    alpha: true,\n    premultipliedAlpha: false,\n    preserveDrawingBuffer: true,\n  });\n\n  invariant(gl, 'WebGL context is not initialized');\n\n  const BUFFER = gl.createBuffer();\n  const TEXTURE = gl.createTexture();\n  const program = gl.createProgram();\n  const _VS_ = gl.createShader(gl.VERTEX_SHADER);\n  const _FS_ = gl.createShader(gl.FRAGMENT_SHADER);\n\n  invariant(program, 'Program is not initialized');\n  invariant(_VS_, 'Vertex shader is not initialized');\n  invariant(_FS_, 'Fragment shader is not initialized');\n\n  gl.shaderSource(_VS_, shaders.VertexAlign);\n  gl.shaderSource(_FS_, shaders.ChromaKey);\n\n  gl.compileShader(_VS_);\n  gl.compileShader(_FS_);\n\n  if (!gl.getShaderParameter(_FS_, gl.COMPILE_STATUS)) {\n    console.error(\n      'Fragment shader compilation failed',\n      gl.getShaderInfoLog(_FS_),\n    );\n  }\n\n  gl.attachShader(program, _VS_);\n  gl.attachShader(program, _FS_);\n\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  gl.bindTexture(gl.TEXTURE_2D, TEXTURE);\n  gl.bindBuffer(gl.ARRAY_BUFFER, BUFFER);\n\n  gl.bufferData(\n    gl.ARRAY_BUFFER,\n    new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),\n    gl.STATIC_DRAW,\n  );\n\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n\n  const $coords$ = gl.getAttribLocation(program, 'coords');\n  const $texture$ = gl.getUniformLocation(program, 'tex');\n  const $width$ = gl.getUniformLocation(program, 'texWidth');\n  const $height$ = gl.getUniformLocation(program, 'texHeight');\n  const $color$ = gl.getUniformLocation(program, 'keyColor');\n  const $similarity$ = gl.getUniformLocation(program, 'similarity');\n  const $smoothness$ = gl.getUniformLocation(program, 'smoothness');\n  const $spill$ = gl.getUniformLocation(program, 'spill');\n\n  gl.vertexAttribPointer($coords$, 2, gl.FLOAT, false, 0, 0);\n  gl.enableVertexAttribArray($coords$);\n\n  gl.activeTexture(gl.TEXTURE0);\n\n  // Enable blending for transparency (critical for Safari)\n  gl.enable(gl.BLEND);\n  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\n\n  return function process() {\n    const { color, spill, similarity, smoothness, background } = options;\n\n    // Use video dimensions directly instead of metadata (for Safari compatibility)\n    const videoWidth = $video.videoWidth;\n    const videoHeight = $video.videoHeight;\n\n    if (!videoWidth || !videoHeight) {\n      return; // Video not ready yet\n    }\n\n    const width = videoWidth * window.devicePixelRatio;\n    const height = videoHeight * window.devicePixelRatio;\n\n    $canvas.width = width;\n    $canvas.height = height;\n\n    gl.viewport(0, 0, width, height);\n\n    // Clear with background color or transparent\n    if (background) {\n      const r = parseInt(background.substring(1, 3), 16) / 255;\n      const g = parseInt(background.substring(3, 5), 16) / 255;\n      const b = parseInt(background.substring(5, 7), 16) / 255;\n      gl.clearColor(r, g, b, 1);\n    } else {\n      gl.clearColor(0, 0, 0, 0);\n    }\n    gl.clear(gl.COLOR_BUFFER_BIT);\n\n    gl.useProgram(program);\n\n    gl.uniform1i($texture$, 0);\n    gl.uniform1f($width$, width);\n    gl.uniform1f($height$, height);\n    gl.uniform1f($spill$, spill);\n    gl.uniform1f($similarity$, similarity);\n    gl.uniform1f($smoothness$, smoothness);\n    gl.uniform3f(\n      $color$,\n      parseInt(color.substr(1, 2), 16) / 255,\n      parseInt(color.substr(3, 2), 16) / 255,\n      parseInt(color.substr(5, 2), 16) / 255,\n    );\n\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);\n    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/ChromaKey/index.js

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

package/dist/cjs/components/ChromaKey/index.js.map

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

package/dist/cjs/components/ChromaKey/shaders/chroma-key.shader.js

@@ -0,0 +1,44 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = exports.default = `
+precision mediump float;
+
+uniform sampler2D tex;
+uniform float texWidth;
+uniform float texHeight;
+
+uniform vec3 keyColor;
+uniform float similarity;
+uniform float smoothness;
+uniform float spill;
+
+vec2 RGBtoUV(vec3 rgb) {
+  return vec2(
+    rgb.r * -0.169 + rgb.g * -0.331 + rgb.b *  0.5    + 0.5,
+    rgb.r *  0.5   + rgb.g * -0.419 + rgb.b * -0.081  + 0.5
+  );
+}
+
+vec4 ChromaKey(vec2 texCoord) {
+  vec4 rgba = texture2D(tex, texCoord);
+  float chromaDist = distance(RGBtoUV(texture2D(tex, texCoord).rgb), RGBtoUV(keyColor));
+
+  float baseMask = chromaDist - similarity;
+  float fullMask = pow(clamp(baseMask / smoothness, 0., 1.), 1.5);
+  rgba.a = fullMask;
+
+  float spillVal = pow(clamp(baseMask / spill, 0., 1.), 1.5);
+  float desat = clamp(rgba.r * 0.2126 + rgba.g * 0.7152 + rgba.b * 0.0722, 0., 1.);
+  rgba.rgb = mix(vec3(desat, desat, desat), rgba.rgb, spillVal);
+
+  return rgba;
+}
+
+void main(void) {
+  vec2 texCoord = vec2(gl_FragCoord.x/texWidth, 1.0 - (gl_FragCoord.y/texHeight));
+  gl_FragColor = ChromaKey(texCoord);
+}
+`;
+//# sourceMappingURL=chroma-key.shader.js.map

package/dist/cjs/components/ChromaKey/shaders/chroma-key.shader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../src/components/ChromaKey/shaders/chroma-key.shader.ts"],"sourcesContent":["export default `\nprecision mediump float;\n\nuniform sampler2D tex;\nuniform float texWidth;\nuniform float texHeight;\n\nuniform vec3 keyColor;\nuniform float similarity;\nuniform float smoothness;\nuniform float spill;\n\nvec2 RGBtoUV(vec3 rgb) {\n  return vec2(\n    rgb.r * -0.169 + rgb.g * -0.331 + rgb.b *  0.5    + 0.5,\n    rgb.r *  0.5   + rgb.g * -0.419 + rgb.b * -0.081  + 0.5\n  );\n}\n\nvec4 ChromaKey(vec2 texCoord) {\n  vec4 rgba = texture2D(tex, texCoord);\n  float chromaDist = distance(RGBtoUV(texture2D(tex, texCoord).rgb), RGBtoUV(keyColor));\n\n  float baseMask = chromaDist - similarity;\n  float fullMask = pow(clamp(baseMask / smoothness, 0., 1.), 1.5);\n  rgba.a = fullMask;\n\n  float spillVal = pow(clamp(baseMask / spill, 0., 1.), 1.5);\n  float desat = clamp(rgba.r * 0.2126 + rgba.g * 0.7152 + rgba.b * 0.0722, 0., 1.);\n  rgba.rgb = mix(vec3(desat, desat, desat), rgba.rgb, spillVal);\n\n  return rgba;\n}\n\nvoid main(void) {\n  vec2 texCoord = vec2(gl_FragCoord.x/texWidth, 1.0 - (gl_FragCoord.y/texHeight));\n  gl_FragColor = ChromaKey(texCoord);\n}\n`;\n"],"mappings":";;;;iCAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/dist/cjs/components/ChromaKey/shaders/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.VertexAlign = exports.ChromaKey = void 0;
+var _chromaKey = _interopRequireDefault(require("./chroma-key.shader"));
+exports.ChromaKey = _chromaKey.default;
+var _vertexAlign = _interopRequireDefault(require("./vertex-align.shader"));
+exports.VertexAlign = _vertexAlign.default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/ChromaKey/shaders/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_chromaKey","_interopRequireDefault","require","exports","ChromaKey","default","_vertexAlign","VertexAlign"],"sources":["../../../../../src/components/ChromaKey/shaders/index.ts"],"sourcesContent":["export { default as ChromaKey } from './chroma-key.shader';\nexport { default as VertexAlign } from './vertex-align.shader';\n"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA2DC,OAAA,CAAAC,SAAA,GAAAJ,UAAA,CAAAK,OAAA;AAC3D,IAAAC,YAAA,GAAAL,sBAAA,CAAAC,OAAA;AAA+DC,OAAA,CAAAI,WAAA,GAAAD,YAAA,CAAAD,OAAA","ignoreList":[]}

package/dist/cjs/components/ChromaKey/shaders/vertex-align.shader.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = exports.default = `
+attribute vec2 coords;
+
+void main(void) {
+  gl_Position=vec4(coords, 0.0, 1.0);
+}
+`;
+//# sourceMappingURL=vertex-align.shader.js.map

package/dist/cjs/components/ChromaKey/shaders/vertex-align.shader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../src/components/ChromaKey/shaders/vertex-align.shader.ts"],"sourcesContent":["export default `\nattribute vec2 coords;\n\nvoid main(void) {\n  gl_Position=vec4(coords, 0.0, 1.0);\n}\n`;\n"],"mappings":";;;;iCAAe;AACf;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/dist/cjs/components/ChromaKey/types.js

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

package/dist/cjs/components/ChromaKey/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/components/ChromaKey/types.ts"],"sourcesContent":["export type FrameCallback = Parameters<\n  HTMLVideoElement['requestVideoFrameCallback']\n>[0];\n\nexport type FrameCallbackMetadata = Parameters<FrameCallback>[1];\n"],"mappings":"","ignoreList":[]}