@limrun/ui 0.18.2 → 0.20.0

package/dist/remote-control-BBgt4TkM.mjs

@@ -0,0 +1,1145 @@
+import { jsx as m, jsxs as $, Fragment as mt } from "react/jsx-runtime";
+import { f as Bt, c as pt, d as jt, b as Gt, h as qt, i as Qt, s as we, j as Zt, e as Jt, k as Y, l as Ge, m as en, o as He, p as E, q as We, a as tn, r as nn, t as p, u as on } from "./core-BhHpU_lr.mjs";
+import { memo as qe, useState as R, useEffect as x, useMemo as Te, useCallback as rn, lazy as cn, forwardRef as sn, useRef as S, useImperativeHandle as an, Suspense as ln } from "react";
+import { createPortal as dn } from "react-dom";
+import './index.css';function gt(d) {
+  var r, h, u = "";
+  if (typeof d == "string" || typeof d == "number") u += d;
+  else if (typeof d == "object") if (Array.isArray(d)) {
+    var b = d.length;
+    for (r = 0; r < b; r++) d[r] && (h = gt(d[r])) && (u && (u += " "), u += h);
+  } else for (h in d) d[h] && (u && (u += " "), u += h);
+  return u;
+}
+function de() {
+  for (var d, r, h = 0, u = "", b = arguments.length; h < b; h++) (d = arguments[h]) && (r = gt(d)) && (u && (u += " "), u += r);
+  return u;
+}
+const un = async (d) => {
+  if (!d) return !1;
+  try {
+    if (typeof navigator < "u" && navigator.clipboard?.writeText)
+      return await navigator.clipboard.writeText(d), !0;
+  } catch {
+  }
+  try {
+    const r = document.createElement("textarea");
+    r.value = d, r.style.position = "fixed", r.style.opacity = "0", document.body.appendChild(r), r.select();
+    const h = document.execCommand("copy");
+    return document.body.removeChild(r), h;
+  } catch {
+    return !1;
+  }
+}, hn = qe(
+  function({ element: r, screen: h, highlighted: u, selected: b, selectable: K, onClick: M }) {
+    const T = Bt(r.frame, h);
+    if (!T) return null;
+    const U = pt(r);
+    return /* @__PURE__ */ m(
+      "button",
+      {
+        type: "button",
+        className: de("rc-inspect-box", !r.enabled && "rc-inspect-box-disabled"),
+        "data-ax-id": r.id,
+        "data-ax-path": r.path,
+        "data-ax-label": r.label || void 0,
+        "data-ax-role": r.role || void 0,
+        "data-highlighted": u ? "true" : "false",
+        "data-selected": b ? "true" : "false",
+        "aria-label": U,
+        onClick: (H) => {
+          K && (H.preventDefault(), H.stopPropagation(), M(r, { x: H.clientX, y: H.clientY }));
+        },
+        style: {
+          left: `${T.x / h.width * 100}%`,
+          top: `${T.y / h.height * 100}%`,
+          width: `${T.width / h.width * 100}%`,
+          height: `${T.height / h.height * 100}%`
+        }
+      }
+    );
+  },
+  (d, r) => d.highlighted === r.highlighted && d.selected === r.selected && d.selectable === r.selectable && d.screen.width === r.screen.width && d.screen.height === r.screen.height && d.onClick === r.onClick && jt(d.element, r.element)
+), fn = 260, mn = 220, pn = 6, gn = 8, vn = qe(function({
+  element: r,
+  platform: h,
+  anchor: u,
+  cursorAnchored: b,
+  showActions: K,
+  onTap: M
+}) {
+  const [T, U] = R(null);
+  x(() => {
+    if (!T) return;
+    const A = window.setTimeout(() => U(null), 1100);
+    return () => window.clearTimeout(A);
+  }, [T]);
+  const H = Te(() => {
+    const A = fn, F = mn, X = pn, g = gn, Q = typeof window < "u" ? window.innerWidth : 1024, oe = typeof window < "u" ? window.innerHeight : 768, Z = u.x + X + A <= Q - g, J = u.y - X - F >= g;
+    let ue = Z ? u.x + X : u.x - X, be = J ? u.y - X : u.y + X;
+    const Oe = `translate(${Z ? "0" : "-100%"}, ${J ? "-100%" : "0"})`;
+    return ue = Math.max(g + (Z ? 0 : A), Math.min(Q - g - (Z ? A : 0), ue)), be = Math.max(g + (J ? F : 0), Math.min(oe - g - (J ? 0 : F), be)), { left: `${ue}px`, top: `${be}px`, transform: Oe };
+  }, [u.x, u.y]), O = Te(() => Gt(r, h), [r, h]), W = h === "ios" ? r.selectors.AXUniqueId : r.selectors.resourceId, B = h === "ios" ? "AXUniqueId" : "resourceId", q = rn(async (A, F) => {
+    if (!A) return;
+    await un(A) && U(F);
+  }, []), P = qt(r), Ae = r.label || r.value || P, ne = pt(r);
+  return dn(
+    /* @__PURE__ */ $(
+      "div",
+      {
+        className: "rc-inspect-card",
+        "data-cursor-anchored": b ? "true" : "false",
+        style: H,
+        onClick: (A) => A.stopPropagation(),
+        onMouseDown: (A) => A.stopPropagation(),
+        onMouseMove: (A) => A.stopPropagation(),
+        children: [
+          /* @__PURE__ */ $("div", { className: "rc-inspect-card-header", children: [
+            /* @__PURE__ */ m("span", { className: "rc-inspect-card-role", children: P }),
+            !r.enabled && /* @__PURE__ */ m("span", { className: "rc-inspect-card-tag", children: "disabled" }),
+            r.focused && /* @__PURE__ */ m("span", { className: "rc-inspect-card-tag rc-inspect-card-tag-blue", children: "focused" })
+          ] }),
+          /* @__PURE__ */ m("p", { className: "rc-inspect-card-title", title: ne, children: Ae }),
+          W && /* @__PURE__ */ $("div", { className: "rc-inspect-card-row", children: [
+            /* @__PURE__ */ $("span", { className: "rc-inspect-card-row-label", children: [
+              B,
+              ":"
+            ] }),
+            /* @__PURE__ */ m("span", { className: "rc-inspect-card-row-value", children: W })
+          ] }),
+          r.value && r.value !== r.label && /* @__PURE__ */ $("div", { className: "rc-inspect-card-row", children: [
+            /* @__PURE__ */ m("span", { className: "rc-inspect-card-row-label", children: "value:" }),
+            /* @__PURE__ */ m("span", { className: "rc-inspect-card-row-value", children: r.value })
+          ] }),
+          /* @__PURE__ */ $("div", { className: "rc-inspect-card-row", children: [
+            /* @__PURE__ */ m("span", { className: "rc-inspect-card-row-label", children: "frame:" }),
+            /* @__PURE__ */ $("span", { className: "rc-inspect-card-row-value", children: [
+              Math.round(r.frame.width),
+              "×",
+              Math.round(r.frame.height),
+              " @ ",
+              Math.round(r.frame.x),
+              ",",
+              Math.round(r.frame.y)
+            ] })
+          ] }),
+          K && /* @__PURE__ */ $("div", { className: "rc-inspect-card-actions", children: [
+            /* @__PURE__ */ m(
+              "button",
+              {
+                type: "button",
+                className: "rc-inspect-card-btn rc-inspect-card-btn-primary",
+                onClick: () => M(r, u),
+                children: "Tap"
+              }
+            ),
+            /* @__PURE__ */ m(
+              "button",
+              {
+                type: "button",
+                className: de("rc-inspect-card-btn", T === "selector" && "rc-inspect-card-btn-copied"),
+                disabled: !O,
+                title: O ?? "No usable selector for this element",
+                onClick: () => q(O ?? void 0, "selector"),
+                children: T === "selector" ? "Copied!" : "Copy selector"
+              }
+            ),
+            /* @__PURE__ */ m(
+              "button",
+              {
+                type: "button",
+                className: de("rc-inspect-card-btn", T === "id" && "rc-inspect-card-btn-copied"),
+                disabled: !W,
+                title: W ?? `No ${B}`,
+                onClick: () => q(W, "id"),
+                children: T === "id" ? "Copied!" : `Copy ${B}`
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}), yn = qe(function({
+  snapshot: r,
+  geometry: h,
+  highlightedId: u,
+  selectedId: b,
+  mode: K,
+  cursorPosition: M,
+  frozenCursorPosition: T,
+  onSelectChange: U,
+  onTapElement: H
+}) {
+  const O = K === "select", W = O ? u !== null && u !== b : u !== null, B = O ? u ?? b : u, q = Te(() => {
+    const g = /* @__PURE__ */ new Map();
+    if (!r) return g;
+    for (const Q of r.elements) g.set(Q.id, Q);
+    return g;
+  }, [r]), P = Te(() => B ? q.get(B) ?? null : null, [B, q]);
+  if (!(!!r && !!h && r.screen.width > 0 && r.screen.height > 0 && r.elements.length > 0)) return null;
+  const ne = W ? M : T ?? M, A = W, F = O && !W && b !== null, X = (g) => {
+    O && g.target === g.currentTarget && U(null, null);
+  };
+  return /* @__PURE__ */ $(mt, { children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: de("rc-inspect-overlay", O && "rc-inspect-overlay-select"),
+        style: {
+          left: `${h.left}px`,
+          top: `${h.top}px`,
+          width: `${h.width}px`,
+          height: `${h.height}px`
+        },
+        onClick: X,
+        children: r.elements.map((g) => /* @__PURE__ */ m(
+          hn,
+          {
+            element: g,
+            screen: r.screen,
+            highlighted: g.id === u,
+            selected: g.id === b,
+            selectable: O,
+            onClick: U
+          },
+          g.id
+        ))
+      }
+    ),
+    P && ne && /* @__PURE__ */ m(
+      vn,
+      {
+        element: P,
+        platform: r.platform,
+        anchor: ne,
+        cursorAnchored: A,
+        showActions: F,
+        onTap: H
+      }
+    )
+  ] });
+}), wn = cn(() => import("./duo-view-tndcvbIi.mjs").then((d) => d.d)), xe = (d) => Object.entries(p).find(
+  ([h, u]) => h.startsWith("ACTION_") && u === d
+)?.[0] ?? String(d), ht = 1920, ft = 1200, Tn = (d, r) => d === ht && r === ft || d === ft && r === ht, An = {
+  ios: {
+    videoBorderRadiusMultiplier: 0.15,
+    loadingLogoSize: "20%",
+    // Video position as percentage of frame dimensions
+    videoPosition: {
+      portrait: { heightMultiplier: 0.9678 },
+      landscape: { widthMultiplier: 0.9678 }
+    }
+  },
+  android: {
+    videoBorderRadiusMultiplier: 0.13,
+    loadingLogoSize: "40%",
+    // Video position as percentage of frame dimensions
+    videoPosition: {
+      portrait: { heightMultiplier: 0.967 },
+      landscape: { widthMultiplier: 0.962 }
+    }
+  }
+};
+function bn(d) {
+  const r = d.code, h = nn[r];
+  if (!h)
+    return Ge(`Unknown event.code: ${r}, key: ${d.key}`), null;
+  let u = E.META_NONE;
+  const b = r >= "KeyA" && r <= "KeyZ", K = d.getModifierState("CapsLock"), M = d.shiftKey;
+  let T = M;
+  return b && (T = M !== K), T && (u |= E.META_SHIFT_ON), d.ctrlKey && (u |= E.META_CTRL_ON), d.altKey && (u |= E.META_ALT_ON), d.metaKey && (u |= E.META_META_ON), { keycode: h, metaState: u };
+}
+const In = sn(
+  ({
+    className: d,
+    url: r,
+    token: h,
+    sessionId: u,
+    openUrl: b,
+    showFrame: K = !0,
+    deviceModel: M,
+    duoModelUrl: T,
+    autoReconnect: U = !1,
+    jitterBufferTargetMs: H,
+    onPlaybackStats: O,
+    onTerminated: W,
+    assets: B,
+    onConnectionStateChange: q,
+    inspectMode: P,
+    onAxSnapshotChange: Ae,
+    onInspectSelectionChange: ne,
+    onAxStatusChange: A,
+    axPollIntervalMs: F,
+    axMaxBackoffMs: X,
+    androidElementTreeOptions: g,
+    onCameraDemandChange: Q,
+    onCameraStats: oe,
+    onTrace: Z,
+    microphoneEnabled: J = !1,
+    onMicrophoneStateChange: ue
+  }, be) => {
+    const Ce = S(null), I = S(null), Oe = S(null), [vt, yt] = R(!1), z = M === "iphone-duo" || vt, _e = S(null), [Qe, wt] = R(null), [Ze, Tt] = R(), [At, bt] = R(!1), [Ct, Nt] = R(!1), [Rt, Et] = R(!1), [Je, et] = R(!1), [It, tt] = R(!1), [Mt, $e] = R({}), Ue = S(null), _ = S(/* @__PURE__ */ new Map()), re = S(!1), [Ot, _t] = R(!1), C = S(null), he = S(null), Ne = S({
+      handle: () => {
+      },
+      end: () => {
+      }
+    }), [ie, Se] = R(null), [nt, Fe] = R(null), [ze, Re] = R(null), [Ke, Pe] = R(null), [St, ot] = R(null), [Pt, rt] = R(null), ke = S(null), j = S(void 0), it = (e) => {
+      ke.current = e, j.current === void 0 && (j.current = window.requestAnimationFrame(() => {
+        j.current = void 0, rt(ke.current);
+      }));
+    }, [kt, fe] = R(null), ce = S(null);
+    ce.current = nt;
+    const me = S(ne);
+    me.current = ne;
+    const Ee = P === !0 || P === "hover-only", Yt = P === "hover-only" ? "hover-only" : "select", ee = Te(() => Qt(r), [r]), Xt = Te(
+      () => u || Array.from(crypto.getRandomValues(new Uint32Array(4)), (e) => e.toString(36)).join(""),
+      [u]
+    ), pe = An[ee], Ie = B?.[ee], ct = ee === "android" && It ? Je ? Ie?.tabletFrameLandscape : Ie?.tabletFrame : Je ? Ie?.frameLandscape : Ie?.frame, st = Ie?.loadingLogo, Ye = !z && K && !!ct, v = S(null), V = (e) => v.current?.sendControl(e), Ve = (e, n) => v.current?.sendDuoControl(e, n) ?? Promise.reject(new Error("Simulator disconnected")), at = -10, lt = (e, n) => {
+      const o = Me();
+      if (!o) return;
+      const t = ve(o, e, n);
+      if (!t) return;
+      const { videoX: c, videoY: s, videoWidth: i, videoHeight: a } = t, l = We(
+        p.ACTION_DOWN,
+        at,
+        i,
+        a,
+        c,
+        s,
+        1,
+        p.BUTTON_PRIMARY,
+        p.BUTTON_PRIMARY
+      );
+      l && V(l), window.setTimeout(() => {
+        const f = We(
+          p.ACTION_UP,
+          at,
+          i,
+          a,
+          c,
+          s,
+          0,
+          p.BUTTON_PRIMARY,
+          p.BUTTON_PRIMARY
+        );
+        f && V(f);
+      }, 60);
+    }, Dt = (e, n) => {
+      const o = Me();
+      if (!o || n.screen.width <= 0 || n.screen.height <= 0) return;
+      const t = e.frame.x + e.frame.width / 2, c = e.frame.y + e.frame.height / 2, s = t / n.screen.width * o.actualWidth, i = c / n.screen.height * o.actualHeight, a = o.videoRect.left + o.offsetX + s, l = o.videoRect.top + o.offsetY + i;
+      lt(a, l);
+    }, Xe = -1, De = -2, se = -3, ge = (e, n, o, t, c, s) => {
+      const i = We(
+        e,
+        n,
+        o,
+        t,
+        c,
+        s,
+        1,
+        // pressure
+        p.BUTTON_PRIMARY,
+        p.BUTTON_PRIMARY
+      );
+      i && (Y("[rc-touch] sendSingleTouch", {
+        action: e,
+        actionName: xe(e),
+        pointerId: n,
+        x: c,
+        y: s,
+        video: { width: o, height: t }
+      }), V(i));
+    }, ae = (e, n, o) => {
+      if (!o) return;
+      const { videoX: t, videoY: c, videoWidth: s, videoHeight: i } = o;
+      let a = null, l = null, f = 1;
+      const N = p.BUTTON_PRIMARY;
+      switch (n) {
+        case "down":
+          e !== se && Ne.current.end(), a = _.current.size === 0 ? p.ACTION_DOWN : p.ACTION_POINTER_DOWN, l = { x: t, y: c }, _.current.set(e, l), e === -1 && I.current?.focus();
+          break;
+        case "move":
+          _.current.has(e) && (a = p.ACTION_MOVE, l = { x: t, y: c }, _.current.set(e, l));
+          break;
+        case "up":
+        case "cancel":
+          _.current.has(e) && (l = _.current.get(e), _.current.delete(e), n === "cancel" ? a = p.ACTION_CANCEL : a = _.current.size === 0 ? p.ACTION_UP : p.ACTION_POINTER_UP);
+          break;
+      }
+      if (a !== null && l !== null) {
+        Y("[rc-touch][mouse->touch] sending", {
+          pointerId: e,
+          eventType: n,
+          action: a,
+          actionName: xe(a),
+          positionToSend: l,
+          video: { width: s, height: i },
+          altHeld: re.current,
+          activePointersAfter: Array.from(_.current.entries()).map(([k, w]) => ({
+            id: k,
+            x: w.x,
+            y: w.y
+          }))
+        });
+        const y = We(
+          a,
+          e,
+          s,
+          i,
+          l.x,
+          l.y,
+          f,
+          N,
+          N
+        );
+        y && (Y("[rc-touch][mouse->touch] buffer", {
+          pointerId: e,
+          actionName: xe(a),
+          byteLength: y.byteLength
+        }), V(y));
+      } else (n === "up" || n === "cancel") && _.current.delete(e);
+    }, Be = (e) => {
+      if (re.current !== e && (re.current = e, _t(e), e || Se(null), Y("[rc-touch][alt] updateAltHeld", {
+        nextHeld: e,
+        activePointerIds: Array.from(_.current.keys())
+      }), ee === "ios" && v.current?.getState().controlReady)) {
+        const n = e ? E.ACTION_DOWN : E.ACTION_UP, o = He(
+          n,
+          E.KEYCODE_ALT_LEFT,
+          0,
+          E.META_NONE
+        );
+        Y("[rc-touch][alt] sending Indigo modifier keycode", {
+          action: n,
+          keycode: E.KEYCODE_ALT_LEFT
+        }), o && V(o);
+      }
+    }, Me = () => {
+      const e = I.current, n = Ce.current;
+      if (!e || !n) return null;
+      const o = e.videoWidth, t = e.videoHeight;
+      if (!o || !t) return null;
+      const c = e.getBoundingClientRect(), s = n.getBoundingClientRect(), i = c.width, a = c.height, l = o / t, f = i / a;
+      let N = i, y = a;
+      l > f ? y = i / l : N = a * l;
+      const k = (i - N) / 2, w = (a - y) / 2;
+      return {
+        videoWidth: o,
+        videoHeight: t,
+        videoRect: c,
+        containerRect: s,
+        actualWidth: N,
+        actualHeight: y,
+        offsetX: k,
+        offsetY: w
+      };
+    }, ve = (e, n, o) => {
+      const t = n - e.videoRect.left - e.offsetX, c = o - e.videoRect.top - e.offsetY, s = Math.max(0, Math.min(e.actualWidth, t)), i = Math.max(0, Math.min(e.actualHeight, c)), a = Math.max(
+        0,
+        Math.min(e.videoWidth, s / e.actualWidth * e.videoWidth)
+      ), l = Math.max(
+        0,
+        Math.min(e.videoHeight, i / e.actualHeight * e.videoHeight)
+      );
+      return {
+        videoX: a,
+        videoY: l,
+        videoWidth: e.videoWidth,
+        videoHeight: e.videoHeight
+      };
+    }, Lt = (e, n, o) => {
+      const t = n - e.videoRect.left - e.offsetX, c = o - e.videoRect.top - e.offsetY, s = Math.max(0, Math.min(e.actualWidth, t)), i = Math.max(0, Math.min(e.actualHeight, c)), a = Math.max(
+        0,
+        Math.min(e.videoWidth, s / e.actualWidth * e.videoWidth)
+      ), l = Math.max(
+        0,
+        Math.min(e.videoHeight, i / e.actualHeight * e.videoHeight)
+      ), f = e.videoWidth - a, N = e.videoHeight - l, y = e.videoRect.left + e.offsetX, k = e.videoRect.top + e.offsetY, w = y - e.containerRect.left + s, G = k - e.containerRect.top + i, le = y - e.containerRect.left + (e.actualWidth - s), L = k - e.containerRect.top + (e.actualHeight - i);
+      return {
+        containerX: w,
+        containerY: G,
+        mirrorContainerX: le,
+        mirrorContainerY: L,
+        videoX: a,
+        videoY: l,
+        mirrorVideoX: f,
+        mirrorVideoY: N,
+        videoWidth: e.videoWidth,
+        videoHeight: e.videoHeight
+      };
+    }, Ht = (e, n, o, t, c, s, i) => {
+      const a = on(e, n, o, t, c, s, i);
+      Y("[rc-touch2] sendTwoFingerMessage (iOS)", {
+        actionName: xe(e),
+        video: { width: n, height: o },
+        p0: { x: t, y: c },
+        p1: { x: s, y: i },
+        byteLength: a.byteLength
+      }), V(a);
+    }, ye = (e, n, o, t, c, s, i, a, l) => {
+      if (Y("[rc-touch2] applyTwoFingerEvent", {
+        platform: ee,
+        eventType: e,
+        video: { width: n, height: o },
+        p0: { x: t, y: c, id: a },
+        p1: { x: s, y: i, id: l }
+      }), e === "down" && Ne.current.end(), ee === "ios") {
+        const f = e === "down" ? p.ACTION_DOWN : e === "move" ? p.ACTION_MOVE : p.ACTION_UP;
+        Ht(f, n, o, t, c, s, i);
+      } else
+        e === "down" ? (ge(p.ACTION_DOWN, a, n, o, t, c), ge(p.ACTION_POINTER_DOWN, l, n, o, s, i)) : e === "move" ? (ge(p.ACTION_MOVE, a, n, o, t, c), ge(p.ACTION_MOVE, l, n, o, s, i)) : (ge(p.ACTION_POINTER_UP, l, n, o, s, i), ge(p.ACTION_UP, a, n, o, t, c));
+    }, Wt = (e, n, o) => {
+      if (!re.current) {
+        ie !== null && Se(null);
+        return;
+      }
+      const t = Lt(e, n, o);
+      Se(t);
+    }, xt = (e, n, o) => {
+      const t = ce.current;
+      if (!t || t.screen.width <= 0 || t.screen.height <= 0) return null;
+      const c = n - e.videoRect.left - e.offsetX, s = o - e.videoRect.top - e.offsetY;
+      if (c < 0 || s < 0 || c > e.actualWidth || s > e.actualHeight) return null;
+      const i = c / e.actualWidth * t.screen.width, a = s / e.actualHeight * t.screen.height;
+      return tn(t, i, a);
+    }, te = (e) => {
+      if (z) return;
+      e.preventDefault(), e.stopPropagation();
+      const n = Me();
+      if ((P === !0 || P === "hover-only") && !("touches" in e))
+        if (e.type === "mousemove") {
+          if (it({ x: e.clientX, y: e.clientY }), n) {
+            const t = xt(n, e.clientX, e.clientY);
+            Re(t?.id ?? null);
+          }
+        } else e.type === "mouseleave" && (it(null), Re(null));
+      if (P !== !0 && (!("touches" in e) && n && (e.type === "mousemove" ? Wt(n, e.clientX, e.clientY) : e.type === "mouseleave" && Se(null)), !(!v.current?.getState().controlReady || !I.current || !n)))
+        if ("touches" in e) {
+          const t = e.touches, c = e.changedTouches;
+          let s;
+          switch (e.type) {
+            case "touchstart":
+              s = "down";
+              break;
+            case "touchmove":
+              s = "move";
+              break;
+            case "touchend":
+              s = "up";
+              break;
+            case "touchcancel":
+              s = "cancel";
+              break;
+            default:
+              return;
+          }
+          if (t.length === 2) {
+            const i = t[0], a = t[1], l = ve(n, i.clientX, i.clientY), f = ve(n, a.clientX, a.clientY);
+            if (!l || !f) return;
+            C.current ? C.current.source === "real-touch" && (C.current.finger0 = { x: l.videoX, y: l.videoY }, C.current.finger1 = { x: f.videoX, y: f.videoY }, ye(
+              "move",
+              l.videoWidth,
+              l.videoHeight,
+              l.videoX,
+              l.videoY,
+              f.videoX,
+              f.videoY,
+              C.current.pointerId0,
+              C.current.pointerId1
+            )) : (C.current = {
+              finger0: { x: l.videoX, y: l.videoY },
+              finger1: { x: f.videoX, y: f.videoY },
+              videoSize: { width: l.videoWidth, height: l.videoHeight },
+              source: "real-touch",
+              pointerId0: i.identifier,
+              pointerId1: a.identifier
+            }, ye(
+              "down",
+              l.videoWidth,
+              l.videoHeight,
+              l.videoX,
+              l.videoY,
+              f.videoX,
+              f.videoY,
+              i.identifier,
+              a.identifier
+            ));
+          } else if (t.length < 2 && C.current?.source === "real-touch") {
+            const i = C.current;
+            ye(
+              "up",
+              i.videoSize.width,
+              i.videoSize.height,
+              i.finger0.x,
+              i.finger0.y,
+              i.finger1.x,
+              i.finger1.y,
+              i.pointerId0,
+              i.pointerId1
+            ), C.current = null;
+            return;
+          } else {
+            if (t.length > 2)
+              return;
+            {
+              const i = c[0];
+              if (i) {
+                const a = ve(n, i.clientX, i.clientY);
+                ae(i.identifier, s, a);
+              }
+            }
+          }
+        } else {
+          let c = null;
+          const s = C.current?.source === "alt-mouse";
+          switch (e.type) {
+            case "mousedown":
+              e.button === 0 && (c = "down");
+              break;
+            case "mousemove":
+              (s || _.current.has(-1)) && (c = "move");
+              break;
+            case "mouseup":
+              e.button === 0 && (c = "up");
+              break;
+            case "mouseleave":
+              (s || _.current.has(-1)) && (c = "up");
+              break;
+          }
+          if (c) {
+            const i = ve(n, e.clientX, e.clientY);
+            if (!i)
+              return;
+            Y("[rc-touch][mouse] event", {
+              domType: e.type,
+              eventType: c,
+              button: e.button,
+              buttons: e.buttons,
+              client: { x: e.clientX, y: e.clientY },
+              altHeldRef: re.current,
+              inTwoFingerMode: s,
+              geometry: {
+                videoX: i.videoX,
+                videoY: i.videoY,
+                videoWidth: i.videoWidth,
+                videoHeight: i.videoHeight
+              },
+              activePointerIds: Array.from(_.current.keys())
+            }), re.current || s ? $t(c, i) : ae(-1, c, i);
+          }
+        }
+    }, $t = (e, n) => {
+      const { videoX: o, videoY: t, videoWidth: c, videoHeight: s } = n, i = c - o, a = s - t;
+      if (e === "down") {
+        C.current = {
+          finger0: { x: o, y: t },
+          finger1: { x: i, y: a },
+          videoSize: { width: c, height: s },
+          source: "alt-mouse",
+          pointerId0: Xe,
+          pointerId1: De
+        }, I.current?.focus(), ye(
+          "down",
+          c,
+          s,
+          o,
+          t,
+          i,
+          a,
+          Xe,
+          De
+        );
+        return;
+      }
+      if (e === "move") {
+        C.current?.source === "alt-mouse" && (C.current.finger0 = { x: o, y: t }, C.current.finger1 = { x: i, y: a }, ye(
+          "move",
+          c,
+          s,
+          o,
+          t,
+          i,
+          a,
+          Xe,
+          De
+        ));
+        return;
+      }
+      if (e === "up" || e === "cancel") {
+        const l = C.current;
+        if (l?.source === "alt-mouse") {
+          const { finger0: f, finger1: N, videoSize: y } = l;
+          ye(
+            "up",
+            y.width,
+            y.height,
+            f.x,
+            f.y,
+            N.x,
+            N.y,
+            Xe,
+            De
+          ), C.current = null;
+        }
+        return;
+      }
+    }, Ut = 150, dt = () => {
+      const e = he.current;
+      e && (window.clearTimeout(e.endTimer), ae(se, "up", e.pos), he.current = null);
+    }, Ft = (e) => {
+      if (e.ctrlKey || re.current || C.current) return;
+      const n = _.current.size;
+      if (n > 1 || n === 1 && !_.current.has(se)) return;
+      const o = Me();
+      if (!o) return;
+      const t = e.clientX - o.videoRect.left - o.offsetX, c = e.clientY - o.videoRect.top - o.offsetY;
+      if (t < 0 || t > o.actualWidth || c < 0 || c > o.actualHeight)
+        return;
+      const s = ve(o, e.clientX, e.clientY);
+      if (!s) return;
+      e.preventDefault();
+      const i = (e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? o.actualWidth : 1) * (o.videoWidth / o.actualWidth), a = (e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? o.actualHeight : 1) * (o.videoHeight / o.actualHeight), l = -e.deltaX * i, f = -e.deltaY * a, N = (L) => {
+        window.clearTimeout(L.endTimer), L.endTimer = window.setTimeout(dt, Ut);
+      };
+      if (l === 0 && f === 0) {
+        he.current && N(he.current);
+        return;
+      }
+      const y = () => ({
+        videoWidth: s.videoWidth,
+        videoHeight: s.videoHeight,
+        videoX: Math.abs(l) > Math.abs(f) ? Math.min(Math.max(s.videoX, s.videoWidth * 0.2), s.videoWidth * 0.8) : s.videoX,
+        videoY: Math.abs(f) >= Math.abs(l) ? Math.min(Math.max(s.videoY, s.videoHeight * 0.2), s.videoHeight * 0.8) : s.videoY
+      }), k = (L) => ({
+        ...L,
+        videoX: Math.min(Math.max(L.videoX + l, 0), L.videoWidth),
+        videoY: Math.min(Math.max(L.videoY + f, 0), L.videoHeight)
+      });
+      let w = he.current;
+      if (w)
+        window.clearTimeout(w.endTimer);
+      else {
+        const L = y();
+        ae(se, "down", L), w = { pos: L, endTimer: 0 }, he.current = w;
+      }
+      let G = w.pos, le = k(G);
+      le.videoX === G.videoX && le.videoY === G.videoY && (ae(se, "up", G), G = y(), ae(se, "down", G), le = k(G)), ae(se, "move", le), w.pos = le, N(w);
+    };
+    x(() => {
+      Ne.current = { handle: Ft, end: dt };
+    }), x(() => {
+      const e = Ce.current;
+      if (!e) return;
+      const n = (o) => Ne.current.handle(o);
+      return e.addEventListener("wheel", n, { passive: !1 }), () => {
+        Ne.current.end(), e.removeEventListener("wheel", n);
+      };
+    }, []), x(() => {
+      const e = (t) => {
+        t.key === "Alt" && Be(!0);
+      }, n = (t) => {
+        t.key === "Alt" && Be(!1);
+      }, o = () => {
+        Be(!1);
+      };
+      return window.addEventListener("keydown", e, !0), window.addEventListener("keyup", n, !0), window.addEventListener("blur", o), () => {
+        window.removeEventListener("keydown", e, !0), window.removeEventListener("keyup", n, !0), window.removeEventListener("blur", o);
+      };
+    }, []);
+    const Le = (e) => {
+      e.preventDefault(), e.stopPropagation();
+      const n = document.activeElement === I.current || z && document.activeElement === e.currentTarget;
+      if (Y("Keyboard event:", {
+        type: e.type,
+        key: e.key,
+        keyCode: e.keyCode,
+        code: e.code,
+        target: e.target.tagName,
+        focused: n
+      }), !n) {
+        Ge("Simulator input not focused, skipping keyboard event");
+        return;
+      }
+      if (!v.current?.getState().controlReady) {
+        Ge("Data channel not ready for keyboard event:", v.current?.getState().connection);
+        return;
+      }
+      if (e.type === "keydown") {
+        if (e.key.toLowerCase() === "v" && (e.metaKey || e.ctrlKey)) {
+          Y("Paste shortcut detected"), navigator.clipboard.readText().then((t) => {
+            if (t) {
+              Y(
+                "Pasting text via SET_CLIPBOARD:",
+                t.substring(0, 20) + (t.length > 20 ? "..." : "")
+              );
+              const c = en(t, !0);
+              V(c);
+            }
+          }).catch((t) => {
+            console.error("Failed to read clipboard contents: ", t);
+          });
+          return;
+        }
+        if (e.key.toLowerCase() === "m" && (e.metaKey || e.ctrlKey)) {
+          Y("Menu shortcut detected");
+          const t = He(
+            E.ACTION_DOWN,
+            E.MENU,
+            0,
+            E.META_NONE
+            // Modifiers are handled by the shortcut check, not passed down
+          );
+          V(t);
+          const c = He(
+            E.ACTION_UP,
+            E.MENU,
+            0,
+            E.META_NONE
+          );
+          V(c);
+          return;
+        }
+      }
+      const o = bn(e);
+      if (o) {
+        const { keycode: t, metaState: c } = o, s = e.type === "keydown" ? E.ACTION_DOWN : E.ACTION_UP;
+        Y(`Sending Keycode: key=${e.key}, code=${t}, action=${s}, meta=${c}`);
+        const i = He(
+          s,
+          t,
+          0,
+          // repeat count, typically 0 for single presses
+          c
+        );
+        V(i);
+      } else
+        Y(`Ignoring unhandled key event: type=${e.type}, key=${e.key}`);
+    }, zt = (e) => {
+      e.stopPropagation(), v.current?.reconnect();
+    }, D = S({
+      onAxSnapshotChange: Ae,
+      onAxStatusChange: A,
+      onCameraDemandChange: Q,
+      onCameraStats: oe,
+      onMicrophoneStateChange: ue,
+      onTrace: Z,
+      onTerminated: W,
+      onConnectionStateChange: q,
+      onPlaybackStats: O
+    });
+    D.current = {
+      onAxSnapshotChange: Ae,
+      onAxStatusChange: A,
+      onCameraDemandChange: Q,
+      onCameraStats: oe,
+      onMicrophoneStateChange: ue,
+      onTrace: Z,
+      onTerminated: W,
+      onConnectionStateChange: q,
+      onPlaybackStats: O
+    };
+    const je = !!Z;
+    x(() => {
+      Ue.current = null, et(!1), tt(!1), $e({});
+    }, [r, M]), x(() => {
+      let e = !0;
+      ce.current !== null && (ce.current = null, Fe(null), we("onAxSnapshotChange", D.current.onAxSnapshotChange, null));
+      const n = Zt({
+        url: r,
+        token: h,
+        sessionId: Xt,
+        deviceModel: M,
+        autoReconnect: U,
+        jitterBufferTargetMs: H,
+        openUrl: b,
+        inspectMode: P,
+        axPollIntervalMs: F,
+        axMaxBackoffMs: X,
+        androidElementTreeOptions: g,
+        microphoneEnabled: J,
+        onStateChange: (t) => {
+          (t.videoReady || t.connection === "idle" || t.connection === "connecting" || t.connection === "reconnecting") && bt(t.videoReady), Nt(t.connection === "failed"), Et(t.connection === "terminated"), yt(t.duo), wt(t.duoState), Tt(t.duoError);
+        },
+        onAxSnapshotChange: (t) => {
+          e && (Fe((c) => Jt(c, t) ? c : t), D.current.onAxSnapshotChange?.(t));
+        },
+        onAxStatusChange: (...t) => D.current.onAxStatusChange?.(...t),
+        onCameraDemandChange: (...t) => D.current.onCameraDemandChange?.(...t),
+        onCameraStats: oe ? (...t) => D.current.onCameraStats?.(...t) : void 0,
+        onMicrophoneStateChange: (...t) => D.current.onMicrophoneStateChange?.(...t),
+        onTrace: je ? (...t) => D.current.onTrace?.(...t) : void 0,
+        onTerminated: () => D.current.onTerminated?.(),
+        onConnectionStateChange: (...t) => D.current.onConnectionStateChange?.(...t),
+        onPlaybackStats: O ? (...t) => D.current.onPlaybackStats?.(...t) : void 0
+      });
+      v.current = n;
+      const o = I.current ? n.attachVideo(I.current) : void 0;
+      return n.start(), () => {
+        e = !1, n.dispose(), o?.(), v.current = null;
+      };
+    }, [r, h, u, M, je]), x(() => {
+      if (z && _e.current)
+        return v.current?.attachVideo(_e.current, "inner");
+    }, [z, r, h, u, M, je]), x(() => {
+      v.current?.updateOptions({
+        openUrl: b,
+        axPollIntervalMs: F,
+        axMaxBackoffMs: X,
+        androidElementTreeOptions: g,
+        autoReconnect: U,
+        jitterBufferTargetMs: H,
+        microphoneEnabled: J,
+        inspectMode: P,
+        onPlaybackStats: O ? (...e) => D.current.onPlaybackStats?.(...e) : void 0,
+        onCameraStats: oe ? (...e) => D.current.onCameraStats?.(...e) : void 0
+      });
+    }, [
+      U,
+      H,
+      J,
+      P,
+      !!O,
+      !!oe,
+      b,
+      F,
+      X,
+      g
+    ]);
+    const ut = () => {
+      const e = Me();
+      if (!e) {
+        ot(null);
+        return;
+      }
+      const n = {
+        left: e.videoRect.left - e.containerRect.left + e.offsetX,
+        top: e.videoRect.top - e.containerRect.top + e.offsetY,
+        width: e.actualWidth,
+        height: e.actualHeight
+      };
+      ot(
+        (o) => o && o.left === n.left && o.top === n.top && o.width === n.width && o.height === n.height ? o : n
+      );
+    };
+    x(() => {
+      const e = I.current, n = Oe.current, o = Ce.current;
+      if (!e) return;
+      const t = () => {
+        const i = e.videoWidth > 0 && e.videoHeight > 0;
+        i && (Ue.current = { width: e.videoWidth, height: e.videoHeight });
+        const a = Ue.current, l = a ? `${a.width} / ${a.height}` : void 0;
+        if (!Ye || !n) {
+          $e(
+            !i && a ? {
+              aspectRatio: l,
+              contain: "size",
+              containIntrinsicSize: `${a.width}px ${a.height}px`
+            } : {}
+          ), ut();
+          return;
+        }
+        const f = n.clientWidth, N = n.clientHeight;
+        if (f === 0 || N === 0) return;
+        const y = a ? a.width > a.height : !1;
+        et(y), tt(
+          ee === "android" && !!a && Tn(a.width, a.height)
+        );
+        const k = y ? pe.videoPosition.landscape : pe.videoPosition.portrait;
+        let w = { aspectRatio: l };
+        k.heightMultiplier ? (w.height = `${N * k.heightMultiplier}px`, w.width = "auto") : k.widthMultiplier && (w.width = `${f * k.widthMultiplier}px`, w.height = "auto"), w.borderRadius = `${y ? N * pe.videoBorderRadiusMultiplier : f * pe.videoBorderRadiusMultiplier}px`, $e(w), ut();
+      }, c = new ResizeObserver(() => {
+        t();
+      });
+      n && c.observe(n), c.observe(e), o && c.observe(o), n && n.addEventListener("load", t), e.addEventListener("loadedmetadata", t), e.addEventListener("resize", t);
+      const s = () => v.current?.bumpActivity();
+      return e.addEventListener("resize", s), t(), () => {
+        c.disconnect(), e.removeEventListener("loadedmetadata", t), e.removeEventListener("resize", t), e.removeEventListener("resize", s), n && n.removeEventListener("load", t);
+      };
+    }, [pe, Ye, r, M]), x(() => {
+      Ee || (Fe(null), Re(null), Pe(null), rt(null), fe(null), ke.current = null, j.current !== void 0 && (window.cancelAnimationFrame(j.current), j.current = void 0));
+    }, [Ee]), x(() => () => {
+      j.current !== void 0 && (window.cancelAnimationFrame(j.current), j.current = void 0);
+    }, []), x(() => {
+      if (!Ee) return;
+      const e = (n) => {
+        n.key === "Escape" && (Ke || ze) && (Pe(null), Re(null), fe(null), we("onInspectSelectionChange", me.current, null));
+      };
+      return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+    }, [Ee, Ke, ze]);
+    const Kt = () => {
+      I.current && I.current.focus();
+    };
+    an(be, () => ({
+      openUrl: (e) => v.current?.openUrl(e),
+      sendKeyEvent: (e) => v.current?.sendKeyEvent(e),
+      screenshot: (e) => v.current?.screenshot(e) ?? Promise.reject(new Error("Simulator disconnected")),
+      terminateApp: (e) => v.current?.terminateApp(e) ?? Promise.reject(new Error("Simulator disconnected")),
+      reconnect: () => v.current?.reconnect(),
+      refreshAxTree: () => v.current?.refreshAxTree() ?? Promise.reject(new Error("Simulator disconnected")),
+      getAxSnapshot: () => v.current?.getAxSnapshot() ?? null,
+      setInspectHighlight: (e) => {
+        Re(e?.id ?? null);
+      },
+      setInspectSelection: (e) => {
+        Pe(e?.id ?? null), fe(e ? ke.current : null);
+        const n = ce.current;
+        e && n ? we("onInspectSelectionChange", me.current, { element: e, snapshot: n }) : we("onInspectSelectionChange", me.current, null);
+      },
+      getAxStatus: () => v.current?.getAxStatus() ?? "idle"
+    }));
+    const Vt = Ot && ie !== null;
+    return /* @__PURE__ */ $(
+      "div",
+      {
+        ref: Ce,
+        className: de("rc-container", d),
+        style: { touchAction: "none" },
+        onMouseDown: te,
+        onMouseMove: te,
+        onMouseUp: te,
+        onMouseLeave: te,
+        onTouchStart: te,
+        onTouchMove: te,
+        onTouchEnd: te,
+        onTouchCancel: te,
+        children: [
+          Vt && ie && /* @__PURE__ */ $(mt, { children: [
+            /* @__PURE__ */ m(
+              "div",
+              {
+                className: "rc-touch-indicator",
+                style: {
+                  left: `${ie.containerX}px`,
+                  top: `${ie.containerY}px`
+                }
+              }
+            ),
+            /* @__PURE__ */ m(
+              "div",
+              {
+                className: "rc-touch-indicator",
+                style: {
+                  left: `${ie.mirrorContainerX}px`,
+                  top: `${ie.mirrorContainerY}px`
+                }
+              }
+            )
+          ] }),
+          Ye && /* @__PURE__ */ m(
+            "img",
+            {
+              ref: Oe,
+              src: ct,
+              alt: "",
+              className: ee === "ios" ? de("rc-phone-frame", "rc-phone-frame-ios") : "rc-phone-frame",
+              draggable: !1
+            }
+          ),
+          /* @__PURE__ */ m(
+            "video",
+            {
+              ref: I,
+              className: de(
+                "rc-video",
+                !Ye && "rc-video-frameless",
+                !At && "rc-video-loading"
+              ),
+              style: {
+                ...Mt,
+                ...z ? { opacity: 0, width: 1, height: 1, pointerEvents: "none" } : {},
+                ...st ? {
+                  backgroundImage: `url("${st}")`,
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "center",
+                  backgroundSize: pe.loadingLogoSize
+                } : {}
+              },
+              autoPlay: !0,
+              playsInline: !0,
+              muted: !0,
+              tabIndex: z ? -1 : 0,
+              onKeyDown: Le,
+              onKeyUp: Le,
+              onClick: Kt,
+              onFocus: () => {
+                I.current && (I.current.style.outline = "none");
+              },
+              onBlur: () => {
+                I.current && (I.current.style.outline = "none");
+              }
+            }
+          ),
+          z && /* @__PURE__ */ m(
+            "video",
+            {
+              ref: _e,
+              autoPlay: !0,
+              playsInline: !0,
+              muted: !0,
+              style: { position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" }
+            }
+          ),
+          z && Qe && /* @__PURE__ */ m(ln, { fallback: /* @__PURE__ */ m("div", { children: "Loading iPhone Duo…" }), children: /* @__PURE__ */ m(
+            wn,
+            {
+              showFrame: K,
+              modelUrl: T,
+              outer: I.current,
+              inner: _e.current,
+              state: Qe,
+              setAngle: (e) => Ve("setHingeAngle", { angleDegrees: e }),
+              setOrientation: (e) => Ve("setDuoOrientation", { orientation: e }),
+              button: (e, n) => Ve("performActions", {
+                actions: [{ type: n ? "buttonDown" : "buttonUp", button: e }]
+              }),
+              touch: (e, n, o, t) => {
+                v.current?.sendDisplayTouch(e, n, o, t);
+              },
+              onKeyDown: Le,
+              onKeyUp: Le
+            }
+          ) }),
+          z && Ze && /* @__PURE__ */ m("div", { role: "alert", className: "rc-duo-error", children: Ze }),
+          !z && Ee && /* @__PURE__ */ m(
+            yn,
+            {
+              snapshot: nt,
+              geometry: St,
+              highlightedId: ze,
+              selectedId: Ke,
+              mode: Yt,
+              cursorPosition: Pt,
+              frozenCursorPosition: kt,
+              onSelectChange: (e, n) => {
+                Pe(e?.id ?? null), e && n ? fe(n) : e || fe(null);
+                const o = ce.current;
+                e && o ? we("onInspectSelectionChange", me.current, {
+                  element: e,
+                  snapshot: o
+                }) : we("onInspectSelectionChange", me.current, null);
+              },
+              onTapElement: (e, n) => {
+                if (n) {
+                  lt(n.x, n.y);
+                  return;
+                }
+                const o = ce.current;
+                o && Dt(e, o);
+              }
+            }
+          ),
+          Rt ? /* @__PURE__ */ $("div", { className: "rc-terminated", role: "status", children: [
+            /* @__PURE__ */ m("div", { className: "rc-terminated-title", children: "Instance terminated" }),
+            /* @__PURE__ */ m("div", { className: "rc-terminated-message", children: "This instance no longer exists and can't be reconnected." })
+          ] }) : Ct && /* @__PURE__ */ m("button", { type: "button", className: "rc-retry-button", onClick: zt, children: "Retry" })
+        ]
+      }
+    );
+  }
+);
+export {
+  In as R
+};