@limrun/ui 0.19.0 → 0.20.1

package/dist/remote-control-aGoEKYFB.mjs

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