@coxwave/tap-kit 2.0.1 → 2.0.2

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-import { TapKitElement, TapKitConfig } from '@coxwave/tap-kit-types';
-import React$1 from 'react';
+import { TapKitElement } from '@coxwave/tap-kit-types';
+import React from 'react';
 
 /**
  * React-specific type definitions for TapKit
@@ -66,6 +66,12 @@ interface TapKitControl<T> {
      * Separated from options for easier event listener management.
      */
     handlers: TapKitEventHandlers;
+    /**
+     * Whether CDN is loaded and Web Component is available
+     *
+     * @internal Used by TapKit component to delay rendering
+     */
+    isCdnLoaded: boolean;
 }
 
 /**
@@ -110,24 +116,18 @@ interface TapKitControl<T> {
 /**
  * Props for TapKit React component
  */
-interface TapKitProps extends Omit<React$1.HTMLAttributes<TapKitElement>, "children" | "dangerouslySetInnerHTML"> {
+interface TapKitProps extends Omit<React.HTMLAttributes<TapKitElement>, "children" | "dangerouslySetInnerHTML"> {
     /**
      * Control object from useTapKit hook
      *
      * Provides instance management, configuration, and event handlers.
      */
     control: TapKitControl<any>;
-    /**
-     * Custom container element ID (optional)
-     *
-     * If provided, TapKit will use this element as container.
-     */
-    containerId?: string;
 }
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            "tap-kit": React$1.DetailedHTMLProps<React$1.HTMLAttributes<TapKitElement>, TapKitElement> & {
+            "tap-kit": React.DetailedHTMLProps<React.HTMLAttributes<TapKitElement>, TapKitElement> & {
                 "api-key"?: string;
                 "user-id"?: string;
                 "course-id"?: string;
@@ -135,7 +135,6 @@ declare global {
                 "clip-play-head"?: number;
                 language?: "ko" | "en";
                 "button-id"?: string;
-                "container-id"?: string;
                 mode?: "inline" | "floating" | "sidebar";
                 debug?: boolean;
                 "tap-url"?: string;
@@ -158,60 +157,45 @@ declare global {
  * // tapkitRef.current?.show()
  * ```
  */
-declare const TapKit: React$1.ForwardRefExoticComponent<TapKitProps & React$1.RefAttributes<TapKitElement>>;
+declare const TapKit: React.ForwardRefExoticComponent<TapKitProps & React.RefAttributes<TapKitElement>>;
 
 /**
- * useTapKit Hook - Advanced imperative control of TapKit Web Component
- *
- * This hook provides direct access to the TapKitElement instance and full
- * control over its lifecycle. Use this when you need:
- * - Direct element manipulation
- * - Custom rendering logic
- * - Imperative control over Web Component behavior
+ * useTapKit Hook - ChatKit-style control for TapKit Web Component
  *
- * For most use cases, prefer the `<TapKit />` component which provides a
- * simpler declarative API.
+ * This hook provides a control object to manage TapKit through the
+ * <TapKit /> component. Inspired by OpenAI's ChatKit pattern.
  *
- * @param options - TapKit configuration
- * @returns Object with element reference, state, and control methods
- *
- * @example Advanced control with custom rendering
+ * @example
  * ```tsx
  * 'use client';
  *
- * import { useTapKit } from '@coxwave/tap-kit/react';
+ * import { TapKit, useTapKit } from '@coxwave/tap-kit/react';
  *
- * function MyComponent() {
- *   const { element, elementRef, show, hide, isReady, error } = useTapKit({
+ * function MyApp() {
+ *   const tapkit = useTapKit({
  *     apiKey: 'your-key',
  *     userId: 'user-123',
  *     courseId: 'course-456',
  *     clipId: 'clip-789',
+ *     onReady: () => console.log('Ready!'),
+ *     onError: (error) => console.error(error),
  *   });
  *
- *   // Direct element access for advanced operations
- *   useEffect(() => {
- *     if (element) {
- *       // Direct manipulation of TapKitElement
- *       console.log('Element mounted:', element);
- *     }
- *   }, [element]);
- *
  *   return (
  *     <div>
- *       <button onClick={show} disabled={!isReady}>Show Chat</button>
- *       <button onClick={hide}>Hide Chat</button>
- *       {error && <p>Error: {error.message}</p>}
- *       <div ref={elementRef} /> // Container for Web Component
+ *       <button onClick={tapkit.show} disabled={!tapkit.isReady}>
+ *         Ask AI Tutor
+ *       </button>
+ *       <TapKit control={tapkit.control} />
  *     </div>
  *   );
  * }
  * ```
- *
- * @see TapKit - Use this component for simpler declarative API
  */
 
-interface UseTapKitOptions extends TapKitConfig, TapKitEventHandlers {
+interface UseTapKitOptions extends TapKitEventHandlers {
+    /** API Key (required) */
+    apiKey: string;
     /** User ID */
     userId?: string;
     /** Course ID */
@@ -240,13 +224,7 @@ interface UseTapKitOptions extends TapKitConfig, TapKitEventHandlers {
  */
 type TapKitOptions = Omit<UseTapKitOptions, keyof TapKitEventHandlers>;
 interface UseTapKitReturn {
-    /** Web Component element reference */
-    element: TapKitElement | null;
-    /** Ref object for direct element access */
-    ref: React.RefObject<TapKitElement | null>;
-    /** Container ref to attach element */
-    elementRef: React.RefCallback<HTMLDivElement>;
-    /** Control object for TapKit component */
+    /** Control object for <TapKit /> component */
     control: TapKitControl<TapKitOptions>;
     /** Whether TapKit is ready */
     isReady: boolean;
@@ -263,14 +241,22 @@ interface UseTapKitReturn {
         userId?: string;
         clipPlayHead?: number;
     }) => void;
+    /** Video adapter control */
+    video: {
+        /** Bind video player for timeline synchronization */
+        bind: (adapter: {
+            getCurrentTime: () => number;
+            setCurrentTime: (time: number) => void;
+        }, clipId: string) => void;
+        /** Unbind current video player */
+        unbind: () => void;
+    };
 }
 /**
- * Hook for managing TapKit Web Component
- *
- * Automatically loads CDN, creates Web Component, and provides control methods.
+ * Hook for managing TapKit Web Component (ChatKit Pattern)
  *
- * @param options - TapKit configuration with event handlers
- * @returns Methods to control TapKit instance and control object
+ * Returns a control object to pass to <TapKit /> component.
+ * The component handles rendering, this hook handles state and methods.
  */
 declare function useTapKit(options: UseTapKitOptions): UseTapKitReturn;
 

package/dist/react.js

@@ -1,3 +1,374 @@
-'use strict';var B=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var B__default=/*#__PURE__*/_interopDefault(B);var R={"tap-kit:ready":"onReady","tap-kit:error":"onError"},k=Object.keys(R);var X=B__default.default.forwardRef(function({control:t,containerId:i,...s},a){let o=B.useRef(null);B.useImperativeHandle(a,()=>o.current,[]),B.useEffect(()=>{let d=o.current;if(d)return t.setInstance(d),()=>{t.setInstance(null);}},[t.setInstance]),B.useEffect(()=>{let d=o.current;if(!d)return;let l=[];for(let c of k){let p=R[c],_=t.handlers[p];if(_){let f=m=>{let T=m;p==="onError"&&T.detail?.error?_(T.detail.error):p==="onReady"&&_();};d.addEventListener(c,f),l.push({event:c,handler:f});}}return ()=>{for(let{event:c,handler:p}of l)d.removeEventListener(c,p);}},[t]);let{options:r}=t;return jsxRuntime.jsx("tap-kit",{ref:o,"api-key":r.apiKey,"user-id":r.userId,"course-id":r.courseId,"clip-id":r.clipId,"clip-play-head":r.clipPlayHead,language:r.language,"button-id":r.buttonId,"container-id":i,mode:r.mode,debug:r.debug,"tap-url":r.tapUrl,"api-url":r.apiUrl,environment:r.environment,...s})});var W=typeof __DEFAULT_CDN_LOADER_URL__<"u"?__DEFAULT_CDN_LOADER_URL__:"https://files.edutap.ai/tap-sdk/loader.js",Y=4e3,h=500;function Z(){return window?.__TAP_KIT_LOADER_URL__?window.__TAP_KIT_LOADER_URL__:W}function j(){return typeof window<"u"&&!!window.__TAP_KIT_CORE_URL__}function ee(){return window.__TAP_KIT_CORE_URL__||""}function N(n,t,i){let s=Date.now(),a=()=>{if(window.TapKit&&window.TapKitLoaded===true){window.__TAP_KIT_LOADER_LOADED__=true,window.__TAP_KIT_LOADER_LOADING__=void 0,n();return}if(Date.now()-s>i){window.__TAP_KIT_LOADER_LOADING__=void 0,t(new Error(`TapKit loader timeout: SDK not available after ${i}ms`));return}typeof requestIdleCallback<"u"?requestIdleCallback(a,{timeout:h}):setTimeout(a,h);};return a}function H(n=Y){if(window.__TAP_KIT_LOADER_LOADED__&&window.TapKit)return Promise.resolve();if(window.__TAP_KIT_LOADER_LOADING__)return window.__TAP_KIT_LOADER_LOADING__;let t=new Promise((i,s)=>{if(typeof document>"u"){s(new Error("TapKit requires browser environment (document is undefined)"));return}if(j()){if(window.TapKit&&window.TapKitLoaded===true){window.__TAP_KIT_LOADER_LOADED__=true,window.__TAP_KIT_LOADER_LOADING__=void 0,i();return}let d=ee(),l=document.createElement("script");l.src=d,l.async=true,l.onload=()=>{window.TapKit?(window.TapKitLoaded=true,window.__TAP_KIT_LOADER_LOADED__=true,window.__TAP_KIT_LOADER_LOADING__=void 0,i()):(window.__TAP_KIT_LOADER_LOADING__=void 0,s(new Error("TapKit not available after loading local core")));},l.onerror=()=>{window.__TAP_KIT_LOADER_LOADING__=void 0,s(new Error(`Failed to load local TapKit core: ${d}`));},document.head.appendChild(l);return}let a=Z(),o=document.createElement("script");o.src=a,o.async=true,o.onload=()=>{N(i,s,n)();},o.onerror=()=>{window.__TAP_KIT_LOADER_LOADING__=void 0,s(new Error(`Failed to load TapKit CDN loader: ${a}`));};let r=document.querySelector(`script[src="${a}"]`);r?(r.addEventListener("load",()=>{N(i,s,n)();}),r.addEventListener("error",()=>s(new Error(`Failed to load TapKit CDN loader: ${a}`)))):document.head.appendChild(o);});return window.__TAP_KIT_LOADER_LOADING__=t,t}function ne(n){let{onReady:t,onError:i,onTimelineSeek:s,onAlarmFadeIn:a,...o}=n;return o}function te(n){return {onReady:n.onReady,onError:n.onError,onTimelineSeek:n.onTimelineSeek,onAlarmFadeIn:n.onAlarmFadeIn}}function re(n,t){let i=[];return t.onTimelineSeek&&i.push(n.events.onTimelineSeek(t.onTimelineSeek)),t.onAlarmFadeIn&&i.push(n.events.onAlarmFadeIn(t.onAlarmFadeIn)),i}function ie(n){let{onReady:t,onError:i,apiKey:s,userId:a,courseId:o,clipId:r,clipPlayHead:d,language:l,buttonId:c,mode:p="floating",debug:_,tapUrl:f,apiUrl:m,environment:T}=n,u=B.useRef(null),I=B.useRef(null),[E,O]=B.useState(false),[x,M]=B.useState(null),K=B.useRef(true),F=B.useCallback(e=>{I.current=e;},[]),b=B.useCallback(e=>{u.current=e;},[]);B.useEffect(()=>{K.current=true;let e=null;async function D(){try{if(await H(),await customElements.whenDefined("tap-kit"),!K.current||!I.current)return;if(!window.createTapKit)throw new Error("createTapKit not available after loading CDN");if(e=window.createTapKit({apiKey:s,userId:a,courseId:o,clipId:r,clipPlayHead:d,language:l,buttonId:c,mode:p,debug:_,tapUrl:f,apiUrl:m,environment:T}),I.current.appendChild(e),u.current=e,await e.ready,!K.current)return;O(!0),t&&t();}catch(w){let P=w instanceof Error?w:new Error(String(w));K.current&&(M(P),i&&i(P));}}return D(),()=>{K.current=false,e&&(e.remove(),u.current=null),O(false);}},[s,t,i]),B.useEffect(()=>{let e=u.current;!e||!E||(a!==void 0&&(e.userId=a),o!==void 0&&(e.courseId=o),r!==void 0&&(e.clipId=r),d!==void 0&&(e.clipPlayHead=d),l!==void 0&&(e.language=l),c!==void 0&&(e.buttonId=c),p!==void 0&&(e.mode=p),_!==void 0&&(e.debug=_),f!==void 0&&(e.tapUrl=f),m!==void 0&&(e.apiUrl=m),T!==void 0&&(e.environment=T));},[E,a,o,r,d,l,c,p,_,f,m,T]);let C=B.useMemo(()=>ne(n),[n]),L=B.useMemo(()=>te(n),[n]);B.useEffect(()=>{let e=u.current;if(!e||!E)return;let D=re(e,L);return ()=>{for(let w of D)w();}},[E,L]);let G=B.useMemo(()=>({setInstance:b,options:C,handlers:L}),[b,C,L]),V=B.useCallback(()=>{u.current&&u.current.show();},[]),$=B.useCallback(()=>{u.current&&u.current.hide();},[]),q=B.useCallback(e=>{u.current&&u.current.setCourse(e);},[]);return {element:u.current,ref:u,elementRef:F,control:G,isReady:E,error:x,show:V,hide:$,setCourse:q}}
-exports.TapKit=X;exports.useTapKit=ie;//# sourceMappingURL=react.js.map
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/react/TapKit.tsx
+
+// src/react/types.ts
+var EVENT_HANDLER_MAP = {
+  "tap-kit:ready": "onReady",
+  "tap-kit:error": "onError"
+};
+var EVENT_NAMES = Object.keys(
+  EVENT_HANDLER_MAP
+);
+var TapKit = React__default.default.forwardRef(
+  function TapKit2({ control, ...htmlProps }, forwardedRef) {
+    const elementRef = React.useRef(null);
+    React.useImperativeHandle(
+      forwardedRef,
+      () => elementRef.current,
+      []
+    );
+    const setElementRef = React.useCallback(
+      (element) => {
+        elementRef.current = element;
+        if (element && control.options.apiKey) {
+          element.apiKey = control.options.apiKey;
+        }
+        control.setInstance(element);
+      },
+      [control.setInstance, control.options.apiKey]
+    );
+    const handlersRef = React.useRef(control.handlers);
+    handlersRef.current = control.handlers;
+    React.useEffect(() => {
+      const element = elementRef.current;
+      if (!element) return;
+      const listeners = [];
+      for (const eventName of EVENT_NAMES) {
+        const handlerKey = EVENT_HANDLER_MAP[eventName];
+        const listener = (e) => {
+          const handler = handlersRef.current[handlerKey];
+          if (!handler) return;
+          const customEvent = e;
+          if (handlerKey === "onError" && customEvent.detail?.error) {
+            handler(customEvent.detail.error);
+          } else if (handlerKey === "onReady") {
+            handler();
+          }
+        };
+        element.addEventListener(eventName, listener);
+        listeners.push({ event: eventName, handler: listener });
+      }
+      return () => {
+        for (const { event, handler } of listeners) {
+          element.removeEventListener(event, handler);
+        }
+      };
+    }, []);
+    const { options, isCdnLoaded } = control;
+    if (!isCdnLoaded) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tap-kit",
+      {
+        ref: setElementRef,
+        "user-id": options.userId,
+        "course-id": options.courseId,
+        "clip-id": options.clipId,
+        "clip-play-head": options.clipPlayHead,
+        language: options.language,
+        "button-id": options.buttonId,
+        mode: options.mode,
+        debug: options.debug,
+        "tap-url": options.tapUrl,
+        "api-url": options.apiUrl,
+        environment: options.environment,
+        ...htmlProps
+      }
+    );
+  }
+);
+
+// src/loader.ts
+var DEFAULT_CDN_LOADER_URL = typeof __DEFAULT_CDN_LOADER_URL__ !== "undefined" ? __DEFAULT_CDN_LOADER_URL__ : "https://files.edutap.ai/tap-sdk/loader.js";
+var DEFAULT_TIMEOUT_MS = 4e3;
+var IDLE_CALLBACK_TIMEOUT_MS = 500;
+function getLoaderURL() {
+  return window?.__TAP_KIT_LOADER_URL__ ? window.__TAP_KIT_LOADER_URL__ : DEFAULT_CDN_LOADER_URL;
+}
+function isLocalCoreMode() {
+  return typeof window !== "undefined" && !!window.__TAP_KIT_CORE_URL__;
+}
+function getLocalCoreURL() {
+  return window.__TAP_KIT_CORE_URL__ || "";
+}
+function createSDKChecker(resolve, reject, timeoutMs) {
+  const startTime = Date.now();
+  const checkSDK = () => {
+    if (window.TapKit && window.TapKitLoaded === true) {
+      window.__TAP_KIT_LOADER_LOADED__ = true;
+      window.__TAP_KIT_LOADER_LOADING__ = void 0;
+      resolve();
+      return;
+    }
+    const elapsed = Date.now() - startTime;
+    if (elapsed > timeoutMs) {
+      window.__TAP_KIT_LOADER_LOADING__ = void 0;
+      reject(
+        new Error(
+          `TapKit loader timeout: SDK not available after ${timeoutMs}ms`
+        )
+      );
+      return;
+    }
+    if (typeof requestIdleCallback !== "undefined") {
+      requestIdleCallback(checkSDK, { timeout: IDLE_CALLBACK_TIMEOUT_MS });
+    } else {
+      setTimeout(checkSDK, IDLE_CALLBACK_TIMEOUT_MS);
+    }
+  };
+  return checkSDK;
+}
+function loadCDNLoader(timeoutMs = DEFAULT_TIMEOUT_MS) {
+  if (window.__TAP_KIT_LOADER_LOADED__ && window.TapKit) {
+    return Promise.resolve();
+  }
+  if (window.__TAP_KIT_LOADER_LOADING__) {
+    return window.__TAP_KIT_LOADER_LOADING__;
+  }
+  const loadingPromise = new Promise((resolve, reject) => {
+    if (typeof document === "undefined") {
+      reject(
+        new Error(
+          "TapKit requires browser environment (document is undefined)"
+        )
+      );
+      return;
+    }
+    if (isLocalCoreMode()) {
+      if (window.TapKit && window.TapKitLoaded === true) {
+        window.__TAP_KIT_LOADER_LOADED__ = true;
+        window.__TAP_KIT_LOADER_LOADING__ = void 0;
+        resolve();
+        return;
+      }
+      const coreURL = getLocalCoreURL();
+      const script2 = document.createElement("script");
+      script2.src = coreURL;
+      script2.async = true;
+      script2.onload = () => {
+        if (window.TapKit) {
+          window.TapKitLoaded = true;
+          window.__TAP_KIT_LOADER_LOADED__ = true;
+          window.__TAP_KIT_LOADER_LOADING__ = void 0;
+          resolve();
+        } else {
+          window.__TAP_KIT_LOADER_LOADING__ = void 0;
+          reject(new Error("TapKit not available after loading local core"));
+        }
+      };
+      script2.onerror = () => {
+        window.__TAP_KIT_LOADER_LOADING__ = void 0;
+        reject(new Error(`Failed to load local TapKit core: ${coreURL}`));
+      };
+      document.head.appendChild(script2);
+      return;
+    }
+    const loaderURL = getLoaderURL();
+    const script = document.createElement("script");
+    script.src = loaderURL;
+    script.async = true;
+    script.onload = () => {
+      const checkSDK = createSDKChecker(resolve, reject, timeoutMs);
+      checkSDK();
+    };
+    script.onerror = () => {
+      window.__TAP_KIT_LOADER_LOADING__ = void 0;
+      reject(new Error(`Failed to load TapKit CDN loader: ${loaderURL}`));
+    };
+    const existingScript = document.querySelector(`script[src="${loaderURL}"]`);
+    if (existingScript) {
+      existingScript.addEventListener("load", () => {
+        const checkSDK = createSDKChecker(resolve, reject, timeoutMs);
+        checkSDK();
+      });
+      existingScript.addEventListener(
+        "error",
+        () => reject(new Error(`Failed to load TapKit CDN loader: ${loaderURL}`))
+      );
+    } else {
+      document.head.appendChild(script);
+    }
+  });
+  window.__TAP_KIT_LOADER_LOADING__ = loadingPromise;
+  return loadingPromise;
+}
+
+// src/react/useTapKit.ts
+function extractHandlers(options) {
+  return {
+    onReady: options.onReady,
+    onError: options.onError,
+    onTimelineSeek: options.onTimelineSeek,
+    onAlarmFadeIn: options.onAlarmFadeIn
+  };
+}
+function useTapKit(options) {
+  const elementRef = React.useRef(null);
+  const [isCdnLoaded, setIsCdnLoaded] = React.useState(false);
+  const [isReady, setIsReady] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const handlersRef = React.useRef(extractHandlers(options));
+  handlersRef.current = extractHandlers(options);
+  React.useEffect(() => {
+    loadCDNLoader().then(() => {
+      setIsCdnLoaded(true);
+    }).catch((err) => {
+      const loadError = err instanceof Error ? err : new Error("Failed to load TapKit CDN");
+      setError(loadError);
+      handlersRef.current.onError?.(loadError);
+    });
+  }, []);
+  const setInstance = React.useCallback((instance) => {
+    elementRef.current = instance;
+    if (!instance) {
+      setIsReady(false);
+      return;
+    }
+    const handleReady = () => {
+      setIsReady(true);
+      handlersRef.current.onReady?.();
+    };
+    const handleError = (e) => {
+      const customEvent = e;
+      const err = customEvent.detail?.error ?? new Error("Unknown error");
+      setError(err);
+      handlersRef.current.onError?.(err);
+    };
+    instance.addEventListener("tap-kit:ready", handleReady);
+    instance.addEventListener("tap-kit:error", handleError);
+    if (instance.isInitialized) {
+      setIsReady(true);
+    }
+    const setupEventHandlers = () => {
+      if (instance.events && typeof instance.events.onTimelineSeek === "function") {
+        if (handlersRef.current.onTimelineSeek) {
+          instance.events.onTimelineSeek(handlersRef.current.onTimelineSeek);
+        }
+        if (handlersRef.current.onAlarmFadeIn) {
+          instance.events.onAlarmFadeIn(handlersRef.current.onAlarmFadeIn);
+        }
+      }
+    };
+    if (instance.ready && typeof instance.ready.then === "function") {
+      instance.ready.then(setupEventHandlers).catch(() => {
+      });
+    } else if (instance.isInitialized) {
+      setupEventHandlers();
+    } else {
+      instance.addEventListener("tap-kit:ready", setupEventHandlers, {
+        once: true
+      });
+    }
+  }, []);
+  const configOptions = React.useMemo(
+    () => ({
+      apiKey: options.apiKey,
+      userId: options.userId,
+      courseId: options.courseId,
+      clipId: options.clipId,
+      clipPlayHead: options.clipPlayHead,
+      language: options.language,
+      buttonId: options.buttonId,
+      mode: options.mode,
+      debug: options.debug,
+      tapUrl: options.tapUrl,
+      apiUrl: options.apiUrl,
+      environment: options.environment
+    }),
+    [
+      options.apiKey,
+      options.userId,
+      options.courseId,
+      options.clipId,
+      options.clipPlayHead,
+      options.language,
+      options.buttonId,
+      options.mode,
+      options.debug,
+      options.tapUrl,
+      options.apiUrl,
+      options.environment
+    ]
+  );
+  const handlers = React.useMemo(
+    () => ({
+      onReady: handlersRef.current.onReady,
+      onError: handlersRef.current.onError,
+      onTimelineSeek: handlersRef.current.onTimelineSeek,
+      onAlarmFadeIn: handlersRef.current.onAlarmFadeIn
+    }),
+    // Empty deps - handlers are accessed via ref which is always up-to-date
+    []
+  );
+  const control = React.useMemo(
+    () => ({
+      setInstance,
+      options: configOptions,
+      handlers,
+      isCdnLoaded
+    }),
+    [setInstance, configOptions, handlers, isCdnLoaded]
+  );
+  const show = React.useCallback(() => {
+    if (!elementRef.current) {
+      console.warn("[useTapKit] Cannot show: element not mounted");
+      return;
+    }
+    elementRef.current.show();
+  }, []);
+  const hide = React.useCallback(() => {
+    if (!elementRef.current) {
+      console.warn("[useTapKit] Cannot hide: element not mounted");
+      return;
+    }
+    elementRef.current.hide();
+  }, []);
+  const setCourse = React.useCallback(
+    (course) => {
+      if (!elementRef.current) {
+        console.warn("[useTapKit] Cannot setCourse: element not mounted");
+        return;
+      }
+      elementRef.current.setCourse(course);
+    },
+    []
+  );
+  const video = React.useMemo(
+    () => ({
+      bind: (adapter, clipId) => {
+        if (!elementRef.current) {
+          console.warn("[useTapKit] Cannot bind video: element not mounted");
+          return;
+        }
+        elementRef.current.video.bind(adapter, clipId);
+      },
+      unbind: () => {
+        elementRef.current?.video?.unbind();
+      }
+    }),
+    []
+  );
+  return {
+    control,
+    isReady,
+    error,
+    show,
+    hide,
+    setCourse,
+    video
+  };
+}
+
+exports.TapKit = TapKit;
+exports.useTapKit = useTapKit;
+//# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map