@limrun/ui 0.13.4 → 0.13.5

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx as H, jsxs as $, Fragment as _e } from "react/jsx-runtime";
-import { memo as Ye, useState as L, useEffect as cA, useMemo as KA, useCallback as Zt, forwardRef as kt, useRef as z, useImperativeHandle as Ot } from "react";
+import { memo as Ye, useState as L, useEffect as sA, useMemo as KA, useCallback as Zt, forwardRef as kt, useRef as z, useImperativeHandle as Ot } from "react";
 import { createPortal as St } from "react-dom";
 import './index.css';function $e(t) {
   var e, s, o = "";
@@ -655,20 +655,20 @@ const on = async (t) => {
   onTap: w
 }) {
   const [d, k] = L(null);
-  cA(() => {
+  sA(() => {
     if (!d) return;
     const P = window.setTimeout(() => k(null), 1100);
     return () => window.clearTimeout(P);
   }, [d]);
   const l = KA(() => {
-    const P = gn, b = an, O = Cn, J = In, uA = typeof window < "u" ? window.innerWidth : 1024, GA = typeof window < "u" ? window.innerHeight : 768, hA = o.x + O + P <= uA - J, EA = o.y - O - b >= J;
-    let QA = hA ? o.x + O : o.x - O, xA = EA ? o.y - O : o.y + O;
-    const Ie = `translate(${hA ? "0" : "-100%"}, ${EA ? "-100%" : "0"})`;
-    return QA = Math.max(J + (hA ? 0 : P), Math.min(uA - J - (hA ? P : 0), QA)), xA = Math.max(J + (EA ? b : 0), Math.min(GA - J - (EA ? 0 : b), xA)), { left: `${QA}px`, top: `${xA}px`, transform: Ie };
-  }, [o.x, o.y]), F = KA(() => $t(e, s), [e, s]), Z = s === "ios" ? e.selectors.AXUniqueId : e.selectors.resourceId, tA = s === "ios" ? "AXUniqueId" : "resourceId", sA = Zt(async (P, b) => {
+    const P = gn, b = an, O = Cn, J = In, uA = typeof window < "u" ? window.innerWidth : 1024, GA = typeof window < "u" ? window.innerHeight : 768, hA = o.x + O + P <= uA - J, gA = o.y - O - b >= J;
+    let QA = hA ? o.x + O : o.x - O, xA = gA ? o.y - O : o.y + O;
+    const Ie = `translate(${hA ? "0" : "-100%"}, ${gA ? "-100%" : "0"})`;
+    return QA = Math.max(J + (hA ? 0 : P), Math.min(uA - J - (hA ? P : 0), QA)), xA = Math.max(J + (gA ? b : 0), Math.min(GA - J - (gA ? 0 : b), xA)), { left: `${QA}px`, top: `${xA}px`, transform: Ie };
+  }, [o.x, o.y]), F = KA(() => $t(e, s), [e, s]), Z = s === "ios" ? e.selectors.AXUniqueId : e.selectors.resourceId, tA = s === "ios" ? "AXUniqueId" : "resourceId", oA = Zt(async (P, b) => {
     if (!P) return;
     await on(P) && k(b);
-  }, []), oA = it(e), BA = e.label || e.value || oA, AA = rt(e);
+  }, []), EA = it(e), BA = e.label || e.value || EA, AA = rt(e);
   return St(
     /* @__PURE__ */ $(
       "div",
@@ -681,7 +681,7 @@ const on = async (t) => {
         onMouseMove: (P) => P.stopPropagation(),
         children: [
           /* @__PURE__ */ $("div", { className: "rc-inspect-card-header", children: [
-            /* @__PURE__ */ H("span", { className: "rc-inspect-card-role", children: oA }),
+            /* @__PURE__ */ H("span", { className: "rc-inspect-card-role", children: EA }),
             !e.enabled && /* @__PURE__ */ H("span", { className: "rc-inspect-card-tag", children: "disabled" }),
             e.focused && /* @__PURE__ */ H("span", { className: "rc-inspect-card-tag rc-inspect-card-tag-blue", children: "focused" })
           ] }),
@@ -726,7 +726,7 @@ const on = async (t) => {
                 className: fA("rc-inspect-card-btn", d === "selector" && "rc-inspect-card-btn-copied"),
                 disabled: !F,
                 title: F ?? "No usable selector for this element",
-                onClick: () => sA(F ?? void 0, "selector"),
+                onClick: () => oA(F ?? void 0, "selector"),
                 children: d === "selector" ? "Copied!" : "Copy selector"
               }
             ),
@@ -737,7 +737,7 @@ const on = async (t) => {
                 className: fA("rc-inspect-card-btn", d === "id" && "rc-inspect-card-btn-copied"),
                 disabled: !Z,
                 title: Z ?? `No ${tA}`,
-                onClick: () => sA(Z, "id"),
+                onClick: () => oA(Z, "id"),
                 children: d === "id" ? "Copied!" : `Copy ${tA}`
               }
             )
@@ -758,12 +758,12 @@ const on = async (t) => {
   onSelectChange: k,
   onTapElement: l
 }) {
-  const F = a === "select", Z = F ? o !== null && o !== I : o !== null, tA = F ? o ?? I : o, sA = KA(() => {
+  const F = a === "select", Z = F ? o !== null && o !== I : o !== null, tA = F ? o ?? I : o, oA = KA(() => {
     const J = /* @__PURE__ */ new Map();
     if (!e) return J;
     for (const uA of e.elements) J.set(uA.id, uA);
     return J;
-  }, [e]), oA = KA(() => tA ? sA.get(tA) ?? null : null, [tA, sA]);
+  }, [e]), EA = KA(() => tA ? oA.get(tA) ?? null : null, [tA, oA]);
   if (!(!!e && !!s && e.screen.width > 0 && e.screen.height > 0 && e.elements.length > 0)) return null;
   const AA = Z ? w : d ?? w, P = Z, b = F && !Z && I !== null, O = (J) => {
     F && J.target === J.currentTarget && k(null, null);
@@ -794,10 +794,10 @@ const on = async (t) => {
         ))
       }
     ),
-    oA && AA && /* @__PURE__ */ H(
+    EA && AA && /* @__PURE__ */ H(
       Mn,
       {
-        element: oA,
+        element: EA,
         platform: e.platform,
         anchor: AA,
         cursorAnchored: P,
@@ -873,22 +873,22 @@ const Fn = kt(
     onAxStatusChange: F,
     axPollIntervalMs: Z,
     axMaxBackoffMs: tA,
-    onCameraDemandChange: sA,
-    onCameraStats: oA,
+    onCameraDemandChange: oA,
+    onCameraStats: EA,
     cameraResolutionCap: BA = "auto",
     cameraAspect: AA
   }, P) => {
-    const b = z(null), O = z(null), J = z(null), [uA, GA] = L(!1), [hA, EA] = L(!1), [QA, xA] = L(!1), [De, Re] = L(!1), [Ie, Fe] = L({}), Q = z(null), y = z(null), j = z(null), zA = z(void 0), yA = z(void 0), JA = z(void 0), qA = z(void 0), YA = z(void 0), DA = z(0), _A = z(0), RA = z(!1), Me = z(w);
+    const b = z(null), O = z(null), J = z(null), [uA, GA] = L(!1), [hA, gA] = L(!1), [QA, xA] = L(!1), [De, Re] = L(!1), [Ie, Fe] = L({}), Q = z(null), y = z(null), j = z(null), zA = z(void 0), yA = z(void 0), JA = z(void 0), qA = z(void 0), YA = z(void 0), DA = z(0), _A = z(0), RA = z(!1), Me = z(w);
     Me.current = w;
     const HA = z(null), q = z(null), Ze = z(0), ke = z(BA);
     ke.current = BA;
     const Oe = z(AA);
     Oe.current = AA;
-    const nA = z(sA);
-    nA.current = sA;
-    const $A = z(oA);
-    $A.current = oA;
-    const PA = z(null), Ae = z(null), NA = z(!1), gA = z(/* @__PURE__ */ new Map()), iA = z(/* @__PURE__ */ new Map()), dA = z(/* @__PURE__ */ new Map()), wA = z(/* @__PURE__ */ new Map()), X = z(/* @__PURE__ */ new Map()), FA = z(!1), [ct, st] = L(!1), U = z(null), [mA, ee] = L(null), T = z(null), [Se, ve] = L(null), [Be, UA] = L(null), [ue, te] = L(null), [ot, pe] = L(null), [Et, je] = L(null), ne = z(null), V = z(void 0), Ke = (A) => {
+    const nA = z(oA);
+    nA.current = oA;
+    const $A = z(EA);
+    $A.current = EA;
+    const PA = z(null), Ae = z(null), NA = z(!1), aA = z(/* @__PURE__ */ new Map()), iA = z(/* @__PURE__ */ new Map()), dA = z(/* @__PURE__ */ new Map()), wA = z(/* @__PURE__ */ new Map()), X = z(/* @__PURE__ */ new Map()), FA = z(!1), [ct, st] = L(!1), U = z(null), [mA, ee] = L(null), T = z(null), [Se, ve] = L(null), [Be, UA] = L(null), [ue, te] = L(null), [ot, pe] = L(null), [Et, je] = L(null), ne = z(null), V = z(void 0), Ke = (A) => {
       ne.current = A, V.current === void 0 && (V.current = window.requestAnimationFrame(() => {
         V.current = void 0, je(ne.current);
       }));
@@ -905,7 +905,7 @@ const Fn = kt(
     const TA = d === !0 || d === "hover-only", at = d === "hover-only" ? "hover-only" : "select", rA = KA(
       () => o || Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
       [o]
-    ), aA = KA(() => un(e), [e]), eA = fn[aA], v = (A) => {
+    ), cA = KA(() => un(e), [e]), eA = fn[cA], v = (A) => {
       x(A);
     }, _ = (A) => {
       !j.current || j.current.readyState !== "open" || (j.current.send(A), T.current?.bumpActivity());
@@ -1018,7 +1018,7 @@ const Fn = kt(
       if (FA.current !== A && (FA.current = A, st(A), A || ee(null), x("[rc-touch][alt] updateAltHeld", {
         nextHeld: A,
         activePointerIds: Array.from(X.current.keys())
-      }), aA === "ios" && j.current && j.current.readyState === "open")) {
+      }), cA === "ios" && j.current && j.current.readyState === "open")) {
         const r = A ? c.ACTION_DOWN : c.ACTION_UP, i = bA(
           r,
           c.KEYCODE_ALT_LEFT,
@@ -1094,12 +1094,12 @@ const Fn = kt(
       }), _(B);
     }, pA = (A, r, i, n, C, M, E, B, m) => {
       if (x("[rc-touch2] applyTwoFingerEvent", {
-        platform: aA,
+        platform: cA,
         eventType: A,
         video: { width: r, height: i },
         p0: { x: n, y: C, id: B },
         p1: { x: M, y: E, id: m }
-      }), aA === "ios") {
+      }), cA === "ios") {
         const h = A === "down" ? G.ACTION_DOWN : A === "move" ? G.ACTION_MOVE : G.ACTION_UP;
         Mt(h, r, i, n, C, M, E);
       } else
@@ -1299,7 +1299,7 @@ const Fn = kt(
         return;
       }
     };
-    cA(() => {
+    sA(() => {
       const A = (n) => {
         n.key === "Alt" && we(!0);
       }, r = (n) => {
@@ -1489,7 +1489,7 @@ const Fn = kt(
         return;
       if (RA.current) {
         if (!Me.current) {
-          v(`Connection failed after it was established: ${A}`), EA(!0), WA();
+          v(`Connection failed after it was established: ${A}`), gA(!0), WA();
           return;
         }
         v(`Reconnecting after established session dropped: ${A}`), RA.current = !1, _A.current = -1;
@@ -1497,7 +1497,7 @@ const Fn = kt(
       me();
       const i = _A.current + 1;
       if (i >= ze) {
-        v(`Connection failed after ${ze} attempts: ${A}`), EA(!0), WA();
+        v(`Connection failed after ${ze} attempts: ${A}`), gA(!0), WA();
         return;
       }
       v(`Retrying connection (${i + 1}/${ze})`), WA(), yA.current = window.setTimeout(() => {
@@ -1505,7 +1505,7 @@ const Fn = kt(
       }, dn);
     }, Xe = async (A = 0) => {
       const r = DA.current + 1;
-      DA.current = r, _A.current = A, RA.current = !1, EA(!1), me(), le(), LA(), NA.current = !1, GA(!1), WA();
+      DA.current = r, _A.current = A, RA.current = !1, gA(!1), me(), le(), LA(), NA.current = !1, GA(!1), WA();
       const i = () => r === DA.current;
       JA.current = window.setTimeout(() => {
         JA.current = void 0, !(!i() || RA.current) && VA("Connection did not succeed within 15 seconds", r);
@@ -1560,10 +1560,10 @@ const Fn = kt(
           return;
         const E = new RTCPeerConnection(M);
         y.current = E, E.addTransceiver("audio", { direction: "recvonly" });
-        const B = E.addTransceiver("video", { direction: "recvonly" }), m = E.addTransceiver("video", {
+        const B = E.addTransceiver("video", { direction: "recvonly" }), m = cA === "ios" ? E.addTransceiver("video", {
           direction: "sendonly"
-        });
-        if (HA.current = m.sender, RTCRtpReceiver.getCapabilities) {
+        }) : null;
+        if (HA.current = m?.sender ?? null, RTCRtpReceiver.getCapabilities) {
           const u = RTCRtpReceiver.getCapabilities("video");
           if (u && u.codecs) {
             const f = u.codecs.sort((K, R) => {
@@ -1576,7 +1576,7 @@ const Fn = kt(
             B.setCodecPreferences(f), x("Set codec preferences:", f.map((K) => K.mimeType).join(", "));
           }
         }
-        if (RTCRtpSender.getCapabilities) {
+        if (m && RTCRtpSender.getCapabilities) {
           const u = RTCRtpSender.getCapabilities("video");
           if (u && u.codecs) {
             const g = /* @__PURE__ */ new Set(["42e01f", "42e028", "640c1f"]), f = (R) => {
@@ -1602,7 +1602,7 @@ const Fn = kt(
           if (!i() || j.current !== h || Q.current !== n)
             return;
           RA.current = !0, le(), v("Control channel opened"), T.current || (T.current = new sn({
-            platform: aA,
+            platform: cA,
             baseIntervalMs: Z,
             maxBackoffMs: tA,
             send: (g) => {
@@ -1742,7 +1742,7 @@ const Fn = kt(
                     Y(`Received screenshot error for unknown or handled id: ${g.id}`);
                     break;
                   }
-                  Y(`Received screenshot error for id ${g.id}: ${R}`), p(new Error(R)), gA.current.delete(g.id), iA.current.delete(g.id);
+                  Y(`Received screenshot error for id ${g.id}: ${R}`), p(new Error(R)), aA.current.delete(g.id), iA.current.delete(g.id);
                   break;
                 }
                 const D = zn(g);
@@ -1750,12 +1750,12 @@ const Fn = kt(
                   Y("Received screenshot message without image data:", g);
                   break;
                 }
-                const W = gA.current.get(g.id);
+                const W = aA.current.get(g.id);
                 if (!W) {
                   Y(`Received screenshot data for unknown or handled id: ${g.id}`);
                   break;
                 }
-                x(`Received screenshot data for id ${g.id}`), W(D), gA.current.delete(g.id), iA.current.delete(g.id);
+                x(`Received screenshot data for id ${g.id}`), W(D), aA.current.delete(g.id), iA.current.delete(g.id);
                 break;
               }
               case "screenshotError":
@@ -1768,7 +1768,7 @@ const Fn = kt(
                   Y(`Received screenshot error for unknown or handled id: ${g.id}`);
                   break;
                 }
-                Y(`Received screenshot error for id ${g.id}: ${g.message}`), f(new Error(g.message)), gA.current.delete(g.id), iA.current.delete(g.id);
+                Y(`Received screenshot error for id ${g.id}: ${g.message}`), f(new Error(g.message)), aA.current.delete(g.id), iA.current.delete(g.id);
                 break;
               case "cameraRequest": {
                 const R = g.active === !0, D = ++Ze.current, W = () => i() && Q.current === n && D === Ze.current;
@@ -1930,7 +1930,7 @@ const Fn = kt(
     }, zt = (A) => {
       A.stopPropagation(), he();
     };
-    cA(() => {
+    sA(() => {
       const A = q.current;
       if (!A) return;
       const r = A.getVideoTracks()[0];
@@ -1939,7 +1939,7 @@ const Fn = kt(
       r.applyConstraints(i).catch((n) => {
         Y("applyConstraints for new camera cap failed:", n);
       });
-    }, [BA]), cA(() => {
+    }, [BA]), sA(() => {
       if (!AA) return;
       const A = Q.current;
       if (!(!A || A.readyState !== WebSocket.OPEN))
@@ -1948,7 +1948,7 @@ const Fn = kt(
         } catch (r) {
           Y("cameraAspect send failed:", r);
         }
-    }, [AA]), cA(() => (GA(!1), he(), document.hidden || Pe(), document.addEventListener("visibilitychange", Te), () => {
+    }, [AA]), sA(() => (GA(!1), he(), document.hidden || Pe(), document.addEventListener("visibilitychange", Te), () => {
       Ne(), Qt(), document.removeEventListener("visibilitychange", Te);
     }), [e, s, o]);
     const Le = () => {
@@ -1967,7 +1967,7 @@ const Fn = kt(
         (i) => i && i.left === r.left && i.top === r.top && i.width === r.width && i.height === r.height ? i : r
       );
     };
-    cA(() => {
+    sA(() => {
       const A = O.current, r = J.current, i = b.current;
       if (!A) return;
       const n = () => {
@@ -1979,7 +1979,7 @@ const Fn = kt(
         if (E === 0 || B === 0) return;
         const m = A.videoWidth > A.videoHeight;
         xA(m), Re(
-          aA === "android" && ln(A.videoWidth, A.videoHeight)
+          cA === "android" && ln(A.videoWidth, A.videoHeight)
         );
         const h = m ? eA.videoPosition.landscape : eA.videoPosition.portrait;
         let u = {};
@@ -1992,12 +1992,12 @@ const Fn = kt(
       return A.addEventListener("resize", M), n(), () => {
         C.disconnect(), A.removeEventListener("loadedmetadata", n), A.removeEventListener("resize", n), A.removeEventListener("resize", M), r && r.removeEventListener("load", n);
       };
-    }, [eA, a]), cA(() => {
+    }, [eA, a]), sA(() => {
       const A = T.current;
       TA ? A?.start() : (A?.stop(), ve(null), UA(null), te(null), je(null), ZA(null), ne.current = null, V.current !== void 0 && (window.cancelAnimationFrame(V.current), V.current = void 0), N("onAxSnapshotChange", de.current, null));
-    }, [TA]), cA(() => () => {
+    }, [TA]), sA(() => () => {
       V.current !== void 0 && (window.cancelAnimationFrame(V.current), V.current = void 0);
-    }, []), cA(() => {
+    }, []), sA(() => {
       if (!TA) return;
       const A = (r) => {
         r.key === "Escape" && (ue || Be) && (te(null), UA(null), ZA(null), N("onInspectSelectionChange", SA.current, null));
@@ -2066,15 +2066,15 @@ const Fn = kt(
           // Matches the type expected by instance API
           id: i
         };
-        gA.current.set(i, A), iA.current.set(i, r), x("Sending screenshot request:", n);
+        aA.current.set(i, A), iA.current.set(i, r), x("Sending screenshot request:", n);
         try {
           Q.current.send(JSON.stringify(n));
         } catch (C) {
-          Y("Failed to send screenshot request immediately:", C), gA.current.delete(i), iA.current.delete(i), r(C);
+          Y("Failed to send screenshot request immediately:", C), aA.current.delete(i), iA.current.delete(i), r(C);
           return;
         }
         setTimeout(() => {
-          gA.current.has(i) && (Y(`Screenshot request timed out for id ${i}`), iA.current.get(i)?.(new Error("Screenshot request timed out")), gA.current.delete(i), iA.current.delete(i));
+          aA.current.has(i) && (Y(`Screenshot request timed out for id ${i}`), iA.current.get(i)?.(new Error("Screenshot request timed out")), aA.current.delete(i), iA.current.delete(i));
         }, 3e4);
       }),
       terminateApp: (A) => new Promise((r, i) => {
@@ -2114,7 +2114,7 @@ const Fn = kt(
       },
       getAxStatus: () => T.current?.getStatus() ?? "idle"
     }));
-    const Dt = ct && mA !== null, Rt = aA === "android" && De ? QA ? Gt : Kt : QA ? eA.frame.imageLandscape : eA.frame.image;
+    const Dt = ct && mA !== null, Rt = cA === "android" && De ? QA ? Gt : Kt : QA ? eA.frame.imageLandscape : eA.frame.image;
     return /* @__PURE__ */ $(
       "div",
       {
@@ -2158,7 +2158,7 @@ const Fn = kt(
               ref: J,
               src: Rt,
               alt: "",
-              className: aA === "ios" ? fA("rc-phone-frame", "rc-phone-frame-ios") : "rc-phone-frame",
+              className: cA === "ios" ? fA("rc-phone-frame", "rc-phone-frame-ios") : "rc-phone-frame",
               draggable: !1
             }
           ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limrun/ui",
-  "version": "0.13.4",
+  "version": "0.13.5",
   "publishConfig": {
     "access": "public"
   },

package/src/components/remote-control.tsx

@@ -2035,18 +2035,22 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         peerConnection.addTransceiver('audio', { direction: 'recvonly' });
         const videoTransceiver = peerConnection.addTransceiver('video', { direction: 'recvonly' });
 
-        // Pre-allocate a sendonly video slot for the user's camera.
-        // The track stays `null` until the limulator side asks for one
-        // (via the `cameraRequest` WS message), at which point we call
-        // `replaceTrack` with a `getUserMedia` result. Allocating
-        // up-front means we don't have to renegotiate the SDP when the
-        // simulator app actually opens its `AVCaptureSession` — the
-        // codec/SSRC negotiation happens once, here, and turning the
-        // camera on/off later is just a track-replace.
-        const outboundCameraTransceiver = peerConnection.addTransceiver('video', {
-          direction: 'sendonly',
-        });
-        outboundCameraSenderRef.current = outboundCameraTransceiver.sender;
+        // Pre-allocate a sendonly slot for the user's camera so the
+        // sim can pull frames later without renegotiating SDP.
+        // Allocating up-front means we don't have to renegotiate the
+        // SDP when the simulator app actually opens its
+        // `AVCaptureSession` — the codec/SSRC negotiation happens
+        // once, here, and turning the camera on/off later is just a
+        // `replaceTrack`.
+        // iOS only: Android has no camera consumer, and the extra
+        // m=video line crashes Android 14's scrcpy/libwebrtc.
+        const outboundCameraTransceiver =
+          platform === 'ios'
+            ? peerConnection.addTransceiver('video', {
+                direction: 'sendonly',
+              })
+            : null;
+        outboundCameraSenderRef.current = outboundCameraTransceiver?.sender ?? null;
 
         // As hardware encoder, we use H265 for iOS and VP9 for Android.
         // We make sure these two are the first ones in the list.
@@ -2092,7 +2096,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         // Chrome falls back to *software* HEVC, not H.264 — no spec
         // hook for runtime re-negotiation. The host-side stats
         // logger will surface this as decoder=ffmpeg / hw=false.
-        if (RTCRtpSender.getCapabilities) {
+        if (outboundCameraTransceiver && RTCRtpSender.getCapabilities) {
           const senderCaps = RTCRtpSender.getCapabilities('video');
           if (senderCaps && senderCaps.codecs) {
             const vtH264Profiles = new Set(['42e01f', '42e028', '640c1f']);