@limrun/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,735 @@
+import { jsxs as ne, jsx as q } from "react/jsx-runtime";
+import { forwardRef as De, useRef as S, useState as Ce, useMemo as Oe, useEffect as Ke, useImperativeHandle as le } from "react";
+import './index.css';function re(E) {
+  var a, D, i = "";
+  if (typeof E == "string" || typeof E == "number") i += E;
+  else if (typeof E == "object") if (Array.isArray(E)) {
+    var l = E.length;
+    for (a = 0; a < l; a++) E[a] && (D = re(E[a])) && (i && (i += " "), i += D);
+  } else for (D in E) E[D] && (i && (i += " "), i += D);
+  return i;
+}
+function Ye() {
+  for (var E, a, D = 0, i = "", l = arguments.length; D < l; D++) (E = arguments[D]) && (a = re(E)) && (i && (i += " "), i += a);
+  return i;
+}
+const Q = {
+  INJECT_KEYCODE: 0,
+  INJECT_TOUCH_EVENT: 2,
+  SET_CLIPBOARD: 9
+}, w = {
+  ACTION_DOWN: 0,
+  ACTION_UP: 1,
+  ACTION_MOVE: 2,
+  ACTION_CANCEL: 3,
+  BUTTON_PRIMARY: 1
+}, e = {
+  // Actions
+  ACTION_DOWN: 0,
+  ACTION_UP: 1,
+  // Meta state flags (from android.view.KeyEvent)
+  META_NONE: 0,
+  META_SHIFT_ON: 1,
+  META_ALT_ON: 2,
+  META_CTRL_ON: 4096,
+  // META_CTRL_LEFT_ON | META_CTRL_RIGHT_ON
+  META_META_ON: 65536,
+  KEYCODE_0: 7,
+  KEYCODE_1: 8,
+  KEYCODE_2: 9,
+  KEYCODE_3: 10,
+  KEYCODE_4: 11,
+  KEYCODE_5: 12,
+  KEYCODE_6: 13,
+  KEYCODE_7: 14,
+  KEYCODE_8: 15,
+  KEYCODE_9: 16,
+  DPAD_UP: 19,
+  // KEYCODE_DPAD_UP
+  DPAD_DOWN: 20,
+  // KEYCODE_DPAD_DOWN
+  DPAD_LEFT: 21,
+  // KEYCODE_DPAD_LEFT
+  DPAD_RIGHT: 22,
+  KEYCODE_A: 29,
+  KEYCODE_B: 30,
+  KEYCODE_C: 31,
+  KEYCODE_D: 32,
+  KEYCODE_E: 33,
+  KEYCODE_F: 34,
+  KEYCODE_G: 35,
+  KEYCODE_H: 36,
+  KEYCODE_I: 37,
+  KEYCODE_J: 38,
+  KEYCODE_K: 39,
+  KEYCODE_L: 40,
+  KEYCODE_M: 41,
+  KEYCODE_N: 42,
+  KEYCODE_O: 43,
+  KEYCODE_P: 44,
+  KEYCODE_Q: 45,
+  KEYCODE_R: 46,
+  KEYCODE_S: 47,
+  KEYCODE_T: 48,
+  KEYCODE_U: 49,
+  KEYCODE_V: 50,
+  KEYCODE_W: 51,
+  KEYCODE_X: 52,
+  KEYCODE_Y: 53,
+  KEYCODE_Z: 54,
+  KEYCODE_COMMA: 55,
+  KEYCODE_PERIOD: 56,
+  KEYCODE_ALT_LEFT: 57,
+  KEYCODE_ALT_RIGHT: 58,
+  KEYCODE_SHIFT_LEFT: 59,
+  KEYCODE_SHIFT_RIGHT: 60,
+  KEYCODE_TAB: 61,
+  KEYCODE_SPACE: 62,
+  ENTER: 66,
+  // KEYCODE_ENTER
+  DEL: 67,
+  // KEYCODE_DEL (Backspace)
+  KEYCODE_GRAVE: 68,
+  // `
+  KEYCODE_MINUS: 69,
+  // -
+  KEYCODE_EQUALS: 70,
+  // =
+  KEYCODE_LEFT_BRACKET: 71,
+  // [
+  KEYCODE_RIGHT_BRACKET: 72,
+  // ]
+  KEYCODE_BACKSLASH: 73,
+  // \
+  KEYCODE_SEMICOLON: 74,
+  // ;
+  KEYCODE_APOSTROPHE: 75,
+  // '
+  KEYCODE_SLASH: 76,
+  MENU: 82,
+  KEYCODE_PAGE_UP: 92,
+  KEYCODE_PAGE_DOWN: 93,
+  KEYCODE_ESCAPE: 111,
+  FORWARD_DEL: 112,
+  // KEYCODE_FORWARD_DEL (Delete key)
+  KEYCODE_CTRL_LEFT: 113,
+  KEYCODE_CTRL_RIGHT: 114,
+  KEYCODE_META_LEFT: 117,
+  KEYCODE_META_RIGHT: 118,
+  KEYCODE_MOVE_HOME: 122,
+  KEYCODE_MOVE_END: 123,
+  KEYCODE_INSERT: 124,
+  KEYCODE_F1: 131,
+  KEYCODE_F2: 132,
+  KEYCODE_F3: 133,
+  KEYCODE_F4: 134,
+  KEYCODE_F5: 135,
+  KEYCODE_F6: 136,
+  KEYCODE_F7: 137,
+  KEYCODE_F8: 138,
+  KEYCODE_F9: 139,
+  KEYCODE_F10: 140,
+  KEYCODE_F11: 141,
+  KEYCODE_F12: 142,
+  KEYCODE_NUMPAD_0: 144,
+  KEYCODE_NUMPAD_1: 145,
+  KEYCODE_NUMPAD_2: 146,
+  KEYCODE_NUMPAD_3: 147,
+  KEYCODE_NUMPAD_4: 148,
+  KEYCODE_NUMPAD_5: 149,
+  KEYCODE_NUMPAD_6: 150,
+  KEYCODE_NUMPAD_7: 151,
+  KEYCODE_NUMPAD_8: 152,
+  KEYCODE_NUMPAD_9: 153,
+  KEYCODE_NUMPAD_DIVIDE: 154,
+  KEYCODE_NUMPAD_MULTIPLY: 155,
+  KEYCODE_NUMPAD_SUBTRACT: 156,
+  KEYCODE_NUMPAD_ADD: 157,
+  KEYCODE_NUMPAD_DOT: 158,
+  KEYCODE_NUMPAD_COMMA: 159,
+  KEYCODE_NUMPAD_ENTER: 160,
+  KEYCODE_NUMPAD_EQUALS: 161
+}, oe = {
+  KeyA: e.KEYCODE_A,
+  KeyB: e.KEYCODE_B,
+  KeyC: e.KEYCODE_C,
+  KeyD: e.KEYCODE_D,
+  KeyE: e.KEYCODE_E,
+  KeyF: e.KEYCODE_F,
+  KeyG: e.KEYCODE_G,
+  KeyH: e.KEYCODE_H,
+  KeyI: e.KEYCODE_I,
+  KeyJ: e.KEYCODE_J,
+  KeyK: e.KEYCODE_K,
+  KeyL: e.KEYCODE_L,
+  KeyM: e.KEYCODE_M,
+  KeyN: e.KEYCODE_N,
+  KeyO: e.KEYCODE_O,
+  KeyP: e.KEYCODE_P,
+  KeyQ: e.KEYCODE_Q,
+  KeyR: e.KEYCODE_R,
+  KeyS: e.KEYCODE_S,
+  KeyT: e.KEYCODE_T,
+  KeyU: e.KEYCODE_U,
+  KeyV: e.KEYCODE_V,
+  KeyW: e.KEYCODE_W,
+  KeyX: e.KEYCODE_X,
+  KeyY: e.KEYCODE_Y,
+  KeyZ: e.KEYCODE_Z,
+  Digit0: e.KEYCODE_0,
+  Digit1: e.KEYCODE_1,
+  Digit2: e.KEYCODE_2,
+  Digit3: e.KEYCODE_3,
+  Digit4: e.KEYCODE_4,
+  Digit5: e.KEYCODE_5,
+  Digit6: e.KEYCODE_6,
+  Digit7: e.KEYCODE_7,
+  Digit8: e.KEYCODE_8,
+  Digit9: e.KEYCODE_9,
+  Backquote: e.KEYCODE_GRAVE,
+  Minus: e.KEYCODE_MINUS,
+  Equal: e.KEYCODE_EQUALS,
+  BracketLeft: e.KEYCODE_LEFT_BRACKET,
+  BracketRight: e.KEYCODE_RIGHT_BRACKET,
+  Backslash: e.KEYCODE_BACKSLASH,
+  Semicolon: e.KEYCODE_SEMICOLON,
+  Quote: e.KEYCODE_APOSTROPHE,
+  Comma: e.KEYCODE_COMMA,
+  Period: e.KEYCODE_PERIOD,
+  Slash: e.KEYCODE_SLASH,
+  Space: e.KEYCODE_SPACE,
+  Tab: e.KEYCODE_TAB,
+  Escape: e.KEYCODE_ESCAPE,
+  ArrowUp: e.DPAD_UP,
+  ArrowDown: e.DPAD_DOWN,
+  ArrowLeft: e.DPAD_LEFT,
+  ArrowRight: e.DPAD_RIGHT,
+  Enter: e.ENTER,
+  Backspace: e.DEL,
+  Delete: e.FORWARD_DEL,
+  Home: e.KEYCODE_MOVE_HOME,
+  End: e.KEYCODE_MOVE_END,
+  PageUp: e.KEYCODE_PAGE_UP,
+  PageDown: e.KEYCODE_PAGE_DOWN,
+  Insert: e.KEYCODE_INSERT,
+  F1: e.KEYCODE_F1,
+  F2: e.KEYCODE_F2,
+  F3: e.KEYCODE_F3,
+  F4: e.KEYCODE_F4,
+  F5: e.KEYCODE_F5,
+  F6: e.KEYCODE_F6,
+  F7: e.KEYCODE_F7,
+  F8: e.KEYCODE_F8,
+  F9: e.KEYCODE_F9,
+  F10: e.KEYCODE_F10,
+  F11: e.KEYCODE_F11,
+  F12: e.KEYCODE_F12,
+  ShiftLeft: e.KEYCODE_SHIFT_LEFT,
+  ShiftRight: e.KEYCODE_SHIFT_RIGHT,
+  ControlLeft: e.KEYCODE_CTRL_LEFT,
+  ControlRight: e.KEYCODE_CTRL_RIGHT,
+  AltLeft: e.KEYCODE_ALT_LEFT,
+  AltRight: e.KEYCODE_ALT_RIGHT,
+  MetaLeft: e.KEYCODE_META_LEFT,
+  MetaRight: e.KEYCODE_META_RIGHT,
+  // Windows/Command key
+  ContextMenu: e.MENU,
+  // Often the Menu key
+  // Numpad mappings
+  Numpad0: e.KEYCODE_NUMPAD_0,
+  Numpad1: e.KEYCODE_NUMPAD_1,
+  Numpad2: e.KEYCODE_NUMPAD_2,
+  Numpad3: e.KEYCODE_NUMPAD_3,
+  Numpad4: e.KEYCODE_NUMPAD_4,
+  Numpad5: e.KEYCODE_NUMPAD_5,
+  Numpad6: e.KEYCODE_NUMPAD_6,
+  Numpad7: e.KEYCODE_NUMPAD_7,
+  Numpad8: e.KEYCODE_NUMPAD_8,
+  Numpad9: e.KEYCODE_NUMPAD_9,
+  NumpadDivide: e.KEYCODE_NUMPAD_DIVIDE,
+  NumpadMultiply: e.KEYCODE_NUMPAD_MULTIPLY,
+  NumpadSubtract: e.KEYCODE_NUMPAD_SUBTRACT,
+  NumpadAdd: e.KEYCODE_NUMPAD_ADD,
+  NumpadDecimal: e.KEYCODE_NUMPAD_DOT,
+  NumpadComma: e.KEYCODE_NUMPAD_COMMA,
+  // Some numpads have comma
+  NumpadEnter: e.KEYCODE_NUMPAD_ENTER,
+  NumpadEqual: e.KEYCODE_NUMPAD_EQUALS
+};
+function fe(E, a, D, i, l, f, o = 1, c = 0, s = 0) {
+  const u = new ArrayBuffer(32), y = new DataView(u);
+  let d = 0;
+  return y.setUint8(d, Q.INJECT_TOUCH_EVENT), d += 1, y.setUint8(d, E), d += 1, y.setBigInt64(d, BigInt(a)), d += 8, y.setInt32(d, Math.round(l), !0), d += 4, y.setInt32(d, Math.round(f), !0), d += 4, y.setUint16(d, D, !0), d += 2, y.setUint16(d, i, !0), d += 2, y.setInt16(d, Math.round(o * 65535), !0), d += 2, y.setInt32(d, c, !0), d += 4, y.setInt32(d, s, !0), u;
+}
+function Ae(E, a = !0) {
+  const i = new TextEncoder().encode(E), l = new ArrayBuffer(14 + i.length), f = new DataView(l);
+  let o = 0;
+  return f.setUint8(o, Q.SET_CLIPBOARD), o += 1, f.setBigInt64(o, BigInt(0), !1), o += 8, f.setUint8(o, a ? 1 : 0), o += 1, f.setUint32(o, i.length, !1), o += 4, new Uint8Array(l, o).set(i), l;
+}
+function B(E, a, D = 0, i = 0) {
+  const l = new ArrayBuffer(14), f = new DataView(l);
+  let o = 0;
+  return f.setUint8(o, Q.INJECT_KEYCODE), o += 1, f.setUint8(o, E), o += 1, f.setInt32(o, a, !0), o += 4, f.setInt32(o, D, !0), o += 4, f.setInt32(o, i, !0), l;
+}
+const N = (...E) => {
+  window.debugRemoteControl && console.log(...E);
+}, Y = (...E) => {
+  window.debugRemoteControl && console.warn(...E);
+};
+function ye(E) {
+  const a = E.code, D = oe[a];
+  if (!D)
+    return Y(`Unknown event.code: ${a}, key: ${E.key}`), null;
+  let i = e.META_NONE;
+  const l = a >= "KeyA" && a <= "KeyZ", f = E.getModifierState("CapsLock"), o = E.shiftKey;
+  let c = o;
+  return l && (c = o !== f), c && (i |= e.META_SHIFT_ON), E.ctrlKey && (i |= e.META_CTRL_ON), E.altKey && (i |= e.META_ALT_ON), E.metaKey && (i |= e.META_META_ON), { keycode: D, metaState: i };
+}
+const Te = De(
+  ({ className: E, url: a, token: D, sessionId: i, openUrl: l }, f) => {
+    const o = S(null), c = S(null), s = S(null), u = S(null), [y, d] = Ce(!1), P = S(void 0), R = S(/* @__PURE__ */ new Map()), I = S(/* @__PURE__ */ new Map()), p = S(/* @__PURE__ */ new Map()), g = Oe(
+      () => i || Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
+      [i]
+    ), C = (r) => {
+      N(r);
+    }, U = (r) => {
+      !u.current || u.current.readyState !== "open" || u.current.send(r);
+    }, m = (r) => {
+      if (r.preventDefault(), r.stopPropagation(), !u.current || u.current.readyState !== "open" || !o.current)
+        return;
+      const O = o.current, t = O.getBoundingClientRect(), n = O.videoWidth, _ = O.videoHeight;
+      if (!n || !_) return;
+      const T = (A, K, k, M) => {
+        const b = t.width, F = t.height, W = n / _, ae = b / F;
+        let v = b, H = F;
+        W > ae ? H = b / W : v = F * W;
+        const de = (b - v) / 2, ue = (F - H) / 2, $ = K - t.left - de, V = k - t.top - ue, G = $ >= 0 && $ <= v && V >= 0 && V <= H;
+        let J = 0, x = 0;
+        G && (J = Math.max(0, Math.min(n, $ / v * n)), x = Math.max(0, Math.min(_, V / H * _)));
+        let L = null, h = null, _e = 1;
+        const ee = w.BUTTON_PRIMARY;
+        switch (M) {
+          case "down":
+            G ? (L = w.ACTION_DOWN, h = { x: J, y: x }, p.current.set(A, h), A === -1 && o.current?.focus()) : p.current.delete(A);
+            break;
+          case "move":
+            p.current.has(A) && G && (L = w.ACTION_MOVE, h = { x: J, y: x }, p.current.set(A, h));
+            break;
+          case "up":
+          case "cancel":
+            p.current.has(A) && (L = M === "cancel" ? w.ACTION_CANCEL : w.ACTION_UP, h = p.current.get(A), p.current.delete(A));
+            break;
+        }
+        if (L !== null && h !== null) {
+          const te = fe(
+            L,
+            A,
+            n,
+            _,
+            h.x,
+            h.y,
+            _e,
+            ee,
+            ee
+          );
+          te && U(te);
+        } else (M === "up" || M === "cancel") && p.current.delete(A);
+      };
+      if ("touches" in r) {
+        const A = r.changedTouches;
+        let K;
+        switch (r.type) {
+          case "touchstart":
+            K = "down";
+            break;
+          case "touchmove":
+            K = "move";
+            break;
+          case "touchend":
+            K = "up";
+            break;
+          case "touchcancel":
+            K = "cancel";
+            break;
+          default:
+            return;
+        }
+        for (let k = 0; k < A.length; k++) {
+          const M = A[k];
+          T(M.identifier, M.clientX, M.clientY, K);
+        }
+      } else {
+        let K = null;
+        switch (r.type) {
+          case "mousedown":
+            r.button === 0 && (K = "down");
+            break;
+          case "mousemove":
+            p.current.has(-1) && (K = "move");
+            break;
+          case "mouseup":
+            r.button === 0 && (K = "up");
+            break;
+          case "mouseleave":
+            p.current.has(-1) && (K = "up");
+            break;
+        }
+        K && T(-1, r.clientX, r.clientY, K);
+      }
+    }, X = (r) => {
+      if (r.preventDefault(), r.stopPropagation(), N("Keyboard event:", {
+        type: r.type,
+        key: r.key,
+        keyCode: r.keyCode,
+        code: r.code,
+        target: r.target.tagName,
+        focused: document.activeElement === o.current
+      }), document.activeElement !== o.current) {
+        Y("Video element not focused, skipping keyboard event");
+        return;
+      }
+      if (!u.current || u.current.readyState !== "open") {
+        Y("Data channel not ready for keyboard event:", u.current?.readyState);
+        return;
+      }
+      if (r.type === "keydown") {
+        if (r.key.toLowerCase() === "v" && (r.metaKey || r.ctrlKey)) {
+          N("Paste shortcut detected"), navigator.clipboard.readText().then((t) => {
+            if (t) {
+              N(
+                "Pasting text via SET_CLIPBOARD:",
+                t.substring(0, 20) + (t.length > 20 ? "..." : "")
+              );
+              const n = Ae(t, !0);
+              U(n);
+            }
+          }).catch((t) => {
+            console.error("Failed to read clipboard contents: ", t);
+          });
+          return;
+        }
+        if (r.key.toLowerCase() === "m" && (r.metaKey || r.ctrlKey)) {
+          N("Menu shortcut detected");
+          const t = B(
+            e.ACTION_DOWN,
+            e.MENU,
+            0,
+            e.META_NONE
+            // Modifiers are handled by the shortcut check, not passed down
+          );
+          U(t);
+          const n = B(
+            e.ACTION_UP,
+            e.MENU,
+            0,
+            e.META_NONE
+          );
+          U(n);
+          return;
+        }
+      }
+      const O = ye(r);
+      if (O) {
+        const { keycode: t, metaState: n } = O, _ = r.type === "keydown" ? e.ACTION_DOWN : e.ACTION_UP;
+        N(`Sending Keycode: key=${r.key}, code=${t}, action=${_}, meta=${n}`);
+        const T = B(
+          _,
+          t,
+          0,
+          // repeat count, typically 0 for single presses
+          n
+        );
+        U(T);
+      } else
+        N(`Ignoring unhandled key event: type=${r.type}, key=${r.key}`);
+    }, ce = () => {
+      c.current && c.current.readyState === WebSocket.OPEN && c.current.send(
+        JSON.stringify({
+          type: "keepAlive",
+          sessionId: g
+        })
+      );
+    }, j = () => {
+      P.current && window.clearInterval(P.current), P.current = window.setInterval(ce, 1e4);
+    }, Z = () => {
+      P.current && (window.clearInterval(P.current), P.current = void 0);
+    }, z = () => {
+      document.hidden ? Z() : j();
+    }, Ee = async () => {
+      try {
+        c.current = new WebSocket(`${a}?token=${D}`), c.current.onerror = (t) => {
+          C("WebSocket error: " + t);
+        }, c.current.onclose = () => {
+          C("WebSocket closed");
+        }, await new Promise((t, n) => {
+          c.current && (c.current.onopen = t, setTimeout(() => n(new Error("WebSocket connection timeout")), 5e3));
+        });
+        const O = await new Promise((t, n) => {
+          const _ = setTimeout(() => n(new Error("RTCConfiguration timeout")), 5e3), T = (A) => {
+            try {
+              const K = JSON.parse(A.data);
+              K.type === "rtcConfiguration" && (clearTimeout(_), c.current?.removeEventListener("message", T), t(K.rtcConfiguration));
+            } catch (K) {
+              console.error("Error handling RTC configuration:", K), n(K);
+            }
+          };
+          c.current?.addEventListener("message", T), c.current?.send(
+            JSON.stringify({
+              type: "requestRtcConfiguration",
+              sessionId: g
+            })
+          );
+        });
+        if (s.current = new RTCPeerConnection(O), s.current.addTransceiver("audio", { direction: "recvonly" }), s.current.addTransceiver("video", { direction: "recvonly" }), u.current = s.current.createDataChannel("control", {
+          ordered: !0,
+          negotiated: !0,
+          id: 1
+        }), u.current.onopen = () => {
+          if (C("Control channel opened"), c.current && (c.current.send(JSON.stringify({ type: "requestFrame", sessionId: g })), l))
+            try {
+              const t = decodeURIComponent(l);
+              C("Opening URL"), c.current.send(
+                JSON.stringify({
+                  type: "openUrl",
+                  url: t,
+                  sessionId: g
+                })
+              );
+            } catch (t) {
+              console.error({ error: t }, "Error decoding URL, falling back to the original URL"), c.current.send(
+                JSON.stringify({
+                  type: "openUrl",
+                  url: l,
+                  sessionId: g
+                })
+              );
+            }
+        }, u.current.onclose = () => {
+          C("Control channel closed");
+        }, u.current.onerror = (t) => {
+          console.error("Control channel error:", t), C("Control channel error: " + t);
+        }, s.current.onconnectionstatechange = () => {
+          C("Connection state: " + s.current?.connectionState), d(s.current?.connectionState === "connected");
+        }, s.current.oniceconnectionstatechange = () => {
+          C("ICE state: " + s.current?.iceConnectionState);
+        }, s.current.ontrack = (t) => {
+          C("Received remote track: " + t.track.kind), t.track.kind === "video" && o.current && (N(`[${(/* @__PURE__ */ new Date()).toISOString()}] Video track received:`, t.track), o.current.srcObject = t.streams[0]);
+        }, s.current.onicecandidate = (t) => {
+          if (t.candidate && c.current) {
+            const n = {
+              type: "candidate",
+              candidate: t.candidate.candidate,
+              sdpMid: t.candidate.sdpMid,
+              sdpMLineIndex: t.candidate.sdpMLineIndex,
+              sessionId: g
+            };
+            c.current.send(JSON.stringify(n)), C("Sent ICE candidate");
+          } else
+            C("ICE candidate gathering completed");
+        }, c.current.onmessage = async (t) => {
+          let n;
+          try {
+            n = JSON.parse(t.data);
+          } catch (_) {
+            Y("Error parsing message:", _);
+            return;
+          }
+          switch (C("Received: " + n.type), n.type) {
+            case "answer":
+              if (!s.current) {
+                C("No peer connection, skipping answer");
+                break;
+              }
+              await s.current.setRemoteDescription(
+                new RTCSessionDescription({
+                  type: "answer",
+                  sdp: n.sdp
+                })
+              ), C("Set remote description");
+              break;
+            case "candidate":
+              if (!s.current) {
+                C("No peer connection, skipping candidate");
+                break;
+              }
+              await s.current.addIceCandidate(
+                new RTCIceCandidate({
+                  candidate: n.candidate,
+                  sdpMid: n.sdpMid,
+                  sdpMLineIndex: n.sdpMLineIndex
+                })
+              ), C("Added ICE candidate");
+              break;
+            case "screenshot":
+              if (typeof n.id != "string" || typeof n.dataUri != "string") {
+                Y("Received invalid screenshot success message:", n);
+                break;
+              }
+              const _ = R.current.get(n.id);
+              if (!_) {
+                Y(`Received screenshot data for unknown or handled id: ${n.id}`);
+                break;
+              }
+              N(`Received screenshot data for id ${n.id}`), _({ dataUri: n.dataUri }), R.current.delete(n.id), I.current.delete(n.id);
+              break;
+            case "screenshotError":
+              if (typeof n.id != "string" || typeof n.message != "string") {
+                Y("Received invalid screenshot error message:", n);
+                break;
+              }
+              const T = I.current.get(n.id);
+              if (!T) {
+                Y(`Received screenshot error for unknown or handled id: ${n.id}`);
+                break;
+              }
+              Y(`Received screenshot error for id ${n.id}: ${n.message}`), T(new Error(n.message)), R.current.delete(n.id), I.current.delete(n.id);
+              break;
+            default:
+              Y(`Received unhandled message type: ${n.type}`, n);
+              break;
+          }
+        }, s.current) {
+          const t = await s.current.createOffer({
+            offerToReceiveVideo: !0,
+            offerToReceiveAudio: !1
+          });
+          await s.current.setLocalDescription(t), c.current && c.current.send(
+            JSON.stringify({
+              type: "offer",
+              sdp: t.sdp,
+              sessionId: g
+            })
+          ), C("Sent offer");
+        }
+      } catch (r) {
+        C("Error: " + r);
+      }
+    }, ie = () => {
+      c.current && (c.current.close(), c.current = null), s.current && (s.current.close(), s.current = null), o.current && (o.current.srcObject = null), u.current && (u.current.close(), u.current = null), d(!1), C("Stopped");
+    };
+    Ke(() => (Ee(), document.hidden || j(), document.addEventListener("visibilitychange", z), () => {
+      Z(), ie(), document.removeEventListener("visibilitychange", z);
+    }), [a, D, i]);
+    const se = () => {
+      o.current && o.current.focus();
+    };
+    return le(f, () => ({
+      openUrl: (r) => {
+        if (!c.current || c.current.readyState !== WebSocket.OPEN) {
+          Y("WebSocket not open, cannot send open_url command via ref.");
+          return;
+        }
+        try {
+          const O = decodeURIComponent(r);
+          C("Opening URL"), c.current.send(
+            JSON.stringify({
+              type: "openUrl",
+              url: O,
+              sessionId: g
+            })
+          );
+        } catch (O) {
+          Y("Error decoding or sending URL via ref:", { error: O, url: r }), c.current.send(
+            JSON.stringify({
+              type: "openUrl",
+              url: r,
+              sessionId: g
+            })
+          );
+        }
+      },
+      sendKeyEvent: (r) => {
+        if (!u.current || u.current.readyState !== "open") {
+          Y("Data channel not ready for imperative key command:", u.current?.readyState);
+          return;
+        }
+        const O = oe[r.code];
+        if (!O) {
+          Y(`Unknown event.code for imperative command: ${r.code}`);
+          return;
+        }
+        let t = e.META_NONE;
+        r.shiftKey && (t |= e.META_SHIFT_ON), r.altKey && (t |= e.META_ALT_ON), r.ctrlKey && (t |= e.META_CTRL_ON), r.metaKey && (t |= e.META_META_ON);
+        const n = r.type === "keydown" ? e.ACTION_DOWN : e.ACTION_UP;
+        N(
+          `Sending Imperative Key Command: code=${r.code}, keycode=${O}, action=${n}, meta=${t}`
+        );
+        const _ = B(
+          n,
+          O,
+          0,
+          // repeat count, typically 0 for single presses
+          t
+        );
+        _ && U(_);
+      },
+      screenshot: () => new Promise((r, O) => {
+        if (!c.current || c.current.readyState !== WebSocket.OPEN)
+          return Y("WebSocket not open, cannot send screenshot command."), O(new Error("WebSocket is not connected or connection is not open."));
+        const t = `ui-ss-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, n = {
+          type: "screenshot",
+          // Matches the type expected by instance API
+          id: t
+        };
+        R.current.set(t, r), I.current.set(t, O), N("Sending screenshot request:", n);
+        try {
+          c.current.send(JSON.stringify(n));
+        } catch (_) {
+          Y("Failed to send screenshot request immediately:", _), R.current.delete(t), I.current.delete(t), O(_);
+          return;
+        }
+        setTimeout(() => {
+          R.current.has(t) && (Y(`Screenshot request timed out for id ${t}`), I.current.get(t)?.(new Error("Screenshot request timed out")), R.current.delete(t), I.current.delete(t));
+        }, 3e4);
+      })
+    })), /* @__PURE__ */ ne(
+      "div",
+      {
+        className: Ye(
+          "rc-container",
+          // Use custom CSS class instead of Tailwind
+          E
+        ),
+        style: { touchAction: "none" },
+        onMouseDown: m,
+        onMouseMove: m,
+        onMouseUp: m,
+        onMouseLeave: m,
+        onTouchStart: m,
+        onTouchMove: m,
+        onTouchEnd: m,
+        onTouchCancel: m,
+        children: [
+          /* @__PURE__ */ q(
+            "video",
+            {
+              ref: o,
+              className: "rc-video",
+              autoPlay: !0,
+              playsInline: !0,
+              muted: !0,
+              tabIndex: 0,
+              style: { outline: "none", pointerEvents: "none" },
+              onKeyDown: X,
+              onKeyUp: X,
+              onClick: se,
+              onFocus: () => {
+                o.current && (o.current.style.outline = "none");
+              },
+              onBlur: () => {
+                o.current && (o.current.style.outline = "none");
+              }
+            }
+          ),
+          !y && /* @__PURE__ */ ne("div", { className: "rc-placeholder-wrapper", children: [
+            /* @__PURE__ */ q("div", { className: "rc-spinner" }),
+            /* @__PURE__ */ q("p", { className: "rc-placeholder-content", children: "Connecting..." })
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  Te as RemoteControl
+};