@aixnn/aixautots 0.0.0-stage → 0.5.2

package/dist/chunk-AIUOLJZA.js

@@ -0,0 +1,412 @@
+import { MirrorView, ControlBar } from './chunk-CVV7FOMQ.js';
+import { useMirror, useDevices } from './chunk-EHF2WQUR.js';
+import { useClient } from './chunk-SUKFJ73W.js';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { RotateCw, Minimize2, Maximize2, X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PHASES = {
+  android: [
+    [25, "\u6B63\u5728\u8FDE\u63A5\u8BBE\u5907\u2026"],
+    [55, "\u5EFA\u7ACB\u52A0\u5BC6\u901A\u9053\u2026"],
+    [80, "\u62C9\u53D6\u5B9E\u65F6\u753B\u9762\u2026"],
+    [95, "\u5373\u5C06\u5448\u73B0\u2026"]
+  ],
+  ios: [
+    [25, "\u6B63\u5728\u8FDE\u63A5\u8BBE\u5907\u2026"],
+    [55, "\u5EFA\u7ACB\u52A0\u5BC6\u901A\u9053\u2026"],
+    [80, "\u62C9\u53D6\u5B9E\u65F6\u753B\u9762\u2026"],
+    [95, "\u5373\u5C06\u5448\u73B0\u2026"]
+  ]
+};
+function phaseLabel(phases, p) {
+  for (const [ceil, label] of phases) if (p <= ceil) return label;
+  return "\u5373\u5C06\u5448\u73B0\u2026";
+}
+function DeviceBootSplash({ error, expectedMs = 3e3, platform = "android", className }) {
+  const [pct, setPct] = useState(4);
+  const startRef = useRef(Date.now());
+  const phases = PHASES[platform];
+  useEffect(() => {
+    if (error) return;
+    startRef.current = Date.now();
+    setPct(4);
+    const id = setInterval(() => {
+      const elapsed = Date.now() - startRef.current;
+      const target = 95 * (1 - Math.exp(-elapsed / (expectedMs * 0.55)));
+      setPct((prev) => Math.max(prev, Math.min(95, Math.round(target))));
+    }, 250);
+    return () => clearInterval(id);
+  }, [error, expectedMs]);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex h-full w-full flex-col items-center justify-center gap-3 bg-black/80 px-6 text-center ${className ?? ""}`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "text-2xl", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-sm text-white/80", children: [
+            "\u8FDE\u63A5\u5931\u8D25\uFF1A",
+            error
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40", children: "\u8BBE\u5907\u9700\u5728\u7EBF\uFF1B\u82E5\u521A\u521B\u5EFA\uFF0C\u8BF7\u7B49\u5F85\u542F\u52A8\u5B8C\u6210\u540E\u91CD\u8BD5" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex h-full w-full flex-col items-center justify-center gap-5 bg-gradient-to-b from-zinc-900 to-black px-8 ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `absolute h-20 w-20 animate-ping rounded-full ${platform === "ios" ? "bg-sky-300/20" : "bg-emerald-400/20"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `absolute h-16 w-16 animate-pulse rounded-full ${platform === "ios" ? "bg-sky-300/10" : "bg-emerald-400/10"}`
+            }
+          ),
+          platform === "ios" ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-12 w-12 text-sky-200", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M16.37 12.78c-.02-2.05 1.67-3.03 1.75-3.08-.95-1.39-2.43-1.58-2.96-1.6-1.26-.13-2.46.74-3.1.74-.64 0-1.62-.72-2.66-.7-1.37.02-2.63.8-3.33 2.02-1.42 2.47-.36 6.12 1.02 8.13.67.98 1.48 2.08 2.53 2.04 1.02-.04 1.4-.66 2.63-.66 1.22 0 1.57.66 2.65.64 1.09-.02 1.79-1 2.46-1.98.77-1.13 1.09-2.23 1.11-2.29-.02-.01-2.13-.82-2.15-3.25ZM14.4 6.45c.56-.68.94-1.62.84-2.56-.81.03-1.79.54-2.37 1.21-.52.6-.97 1.56-.85 2.48.9.07 1.82-.46 2.38-1.13Z" }) }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-12 w-12 text-emerald-400", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M6 9a6 6 0 0 1 12 0v6a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9Zm2.5-3.2 -1-1.6a.4.4 0 0 1 .7-.4l1.05 1.7a6.7 6.7 0 0 1 3.5 0l1.05-1.7a.4.4 0 1 1 .7.4l-1 1.6A6 6 0 0 0 8.5 5.8ZM9.5 9.2a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8Zm5 0a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8ZM5 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Zm14 0a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1ZM9 17h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1 1 1 0 1 1-2 0h-2a1 1 0 1 1-2 0 1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[220px] space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-white/10", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `h-full rounded-full transition-[width] duration-300 ease-out ${platform === "ios" ? "bg-sky-300" : "bg-emerald-400"}`,
+              style: { width: `${pct}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-white/70", children: phaseLabel(phases, pct) }),
+            /* @__PURE__ */ jsxs("span", { className: "tabular-nums text-white/40", children: [
+              pct,
+              "%"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[11px] text-white/30", children: "\u6B63\u5728\u8FDE\u63A5\u5B9E\u65F6\u753B\u9762\uFF0C\u5C31\u7EEA\u540E\u81EA\u52A8\u663E\u793A" })
+      ]
+    }
+  );
+}
+
+// src/core/quality-auto.ts
+var RTT_HIGH = 0.15;
+var RTT_LOW = 0.04;
+var HYSTERESIS = 0.03;
+function pickAutoProfile(rtt, current) {
+  if (current === "low_latency") {
+    if (rtt >= RTT_HIGH - HYSTERESIS) return "low_latency";
+    return rtt < RTT_LOW ? "high_quality" : "balanced";
+  }
+  if (current === "high_quality") {
+    if (rtt <= RTT_LOW + HYSTERESIS) return "high_quality";
+    return rtt > RTT_HIGH ? "low_latency" : "balanced";
+  }
+  if (rtt > RTT_HIGH) return "low_latency";
+  if (rtt < RTT_LOW) return "high_quality";
+  return "balanced";
+}
+var PROFILE_LABELS = {
+  balanced: "\u5E73\u8861",
+  low_latency: "\u4F4E\u5EF6\u8FDF",
+  high_quality: "\u9AD8\u753B\u8D28"
+};
+var DEFAULT_SIZE = { width: 1080, height: 2340 };
+var AUTO_QUALITY_FIRST_CHECK_MS = 2e3;
+var AUTO_QUALITY_INTERVAL_MS = 8e3;
+var AUTO_QUALITY_MIN_SWITCH_INTERVAL_MS = 15e3;
+function MirrorSurface({ deviceId, platform = "android", onSize, videoAspect, shortcutBar, className }) {
+  const { stream, error, sendInput, setQuality, session } = useMirror(deviceId);
+  const [size, setSize] = useState(DEFAULT_SIZE);
+  const [hasFrame, setHasFrame] = useState(false);
+  useEffect(() => {
+    setHasFrame(false);
+  }, [deviceId, stream]);
+  useEffect(() => {
+    setSize(DEFAULT_SIZE);
+    onSize?.(DEFAULT_SIZE);
+  }, [deviceId, onSize]);
+  const [profile, setProfile] = useState("balanced");
+  const manualRef = useRef(false);
+  const changeProfile = useCallback(
+    (p, manual) => {
+      if (manual) manualRef.current = true;
+      setProfile(p);
+      setQuality(p);
+    },
+    [setQuality]
+  );
+  const [landscape, setLandscape] = useState(false);
+  const toggleOrientation = useCallback(() => {
+    setLandscape((prev) => {
+      const next = !prev;
+      sendInput({ t: "rotate", orientation: next ? "landscape" : "portrait" });
+      return next;
+    });
+  }, [sendInput]);
+  useEffect(() => {
+    manualRef.current = false;
+    setProfile("balanced");
+    setLandscape(false);
+  }, [deviceId]);
+  const profileRef = useRef(profile);
+  useEffect(() => {
+    profileRef.current = profile;
+  }, [profile]);
+  useEffect(() => {
+    if (!stream || !session) return;
+    let cancelled = false;
+    let lastSwitchAt = 0;
+    const check = async () => {
+      if (cancelled || manualRef.current) return;
+      const rtt = await session.currentRtt();
+      if (cancelled || rtt === null || manualRef.current) return;
+      const next = pickAutoProfile(rtt, profileRef.current);
+      if (next === profileRef.current) return;
+      const now = Date.now();
+      if (now - lastSwitchAt < AUTO_QUALITY_MIN_SWITCH_INTERVAL_MS) return;
+      lastSwitchAt = now;
+      changeProfile(next, false);
+    };
+    const first = setTimeout(check, AUTO_QUALITY_FIRST_CHECK_MS);
+    const interval = setInterval(check, AUTO_QUALITY_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      clearTimeout(first);
+      clearInterval(interval);
+    };
+  }, [stream, session, changeProfile]);
+  const reportSize = useCallback(
+    (real) => {
+      if (real.width > 0 && real.height > 0) {
+        setSize(real);
+        onSize?.(real);
+      }
+    },
+    [onSize]
+  );
+  const handleFirstFrame = useCallback(
+    (real) => {
+      setHasFrame(true);
+      reportSize(real);
+    },
+    [reportSize]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `flex min-h-0 flex-col items-center gap-2 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-full flex-1 items-stretch justify-center gap-2", children: [
+      shortcutBar,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `relative min-h-0 overflow-hidden rounded-lg ${videoAspect ? "h-full" : "h-full flex-1"}`,
+          style: videoAspect ? { aspectRatio: String(videoAspect) } : void 0,
+          children: [
+            stream && /* @__PURE__ */ jsx(
+              MirrorView,
+              {
+                stream,
+                deviceSize: size,
+                onInput: sendInput,
+                onFirstFrame: handleFirstFrame,
+                onResize: reportSize,
+                continuousTouch: platform === "android",
+                className: "h-full w-full"
+              }
+            ),
+            (!stream || !hasFrame) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx(
+              DeviceBootSplash,
+              {
+                error: error ? error.message : null,
+                platform,
+                className: "rounded-lg"
+              }
+            ) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        ControlBar,
+        {
+          platform,
+          onBack: () => sendInput({ t: "back" }),
+          onHome: () => sendInput({ t: "home" }),
+          onMenu: () => sendInput({ t: "key", code: "app_switch" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          "aria-label": "\u753B\u8D28\u6863\u4F4D",
+          value: profile,
+          onChange: (e) => changeProfile(e.target.value, true),
+          className: "rounded border border-border bg-secondary px-2 py-1 text-xs text-foreground outline-none hover:bg-card",
+          children: Object.keys(PROFILE_LABELS).map((p) => /* @__PURE__ */ jsx("option", { value: p, children: PROFILE_LABELS[p] }, p))
+        }
+      ),
+      platform === "android" && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: toggleOrientation,
+          "aria-label": landscape ? "\u5207\u56DE\u7AD6\u5C4F" : "\u5207\u6362\u6A2A\u5C4F",
+          title: landscape ? "\u5207\u56DE\u7AD6\u5C4F" : "\u5207\u6362\u6A2A\u5C4F",
+          "aria-pressed": landscape,
+          className: `flex items-center gap-1 rounded border border-border px-2 py-1 text-xs outline-none hover:bg-card ${landscape ? "bg-primary/15 text-primary" : "bg-secondary text-foreground"}`,
+          children: [
+            /* @__PURE__ */ jsx(RotateCw, { className: "h-3.5 w-3.5" }),
+            landscape ? "\u7AD6\u5C4F" : "\u6A2A\u5C4F"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function DeviceMirror({ deviceId, deviceName, platform = "android", shortcutBar, onClose }) {
+  const open = deviceId !== null;
+  const client = useClient();
+  const { data: devices } = useDevices();
+  const [size, setSize] = useState({ width: 1080, height: 2340 });
+  const overlayRef = useRef(null);
+  const [fullscreen, setFullscreen] = useState(false);
+  const sleepTimeoutMin = useMemo(() => {
+    if (!deviceId) return 30;
+    const d = devices?.find((dv) => dv.external_id === deviceId);
+    const v = d?.meta?.sleep_timeout_min;
+    return typeof v === "number" ? v : 30;
+  }, [devices, deviceId]);
+  const lastActivityRef = useRef(Date.now());
+  const resetActivity = useCallback(() => {
+    lastActivityRef.current = Date.now();
+  }, []);
+  useEffect(() => {
+    if (!open || !deviceId || sleepTimeoutMin === 0) return;
+    const ms = sleepTimeoutMin * 60 * 1e3;
+    const id = setInterval(() => {
+      if (Date.now() - lastActivityRef.current >= ms) {
+        void client.devices.sleep(deviceId).then(() => onClose()).catch(() => {
+        });
+        clearInterval(id);
+      }
+    }, 1e4);
+    return () => clearInterval(id);
+  }, [open, deviceId, sleepTimeoutMin, onClose, client]);
+  const enterFullscreen = useCallback(async () => {
+    const el = overlayRef.current;
+    if (!el) return;
+    try {
+      if (el.requestFullscreen) await el.requestFullscreen();
+      else if (el.webkitRequestFullscreen) await el.webkitRequestFullscreen();
+    } catch {
+    }
+  }, []);
+  const exitFullscreen = useCallback(async () => {
+    const doc = document;
+    try {
+      if (doc.fullscreenElement && doc.exitFullscreen) await doc.exitFullscreen();
+      else if (doc.webkitFullscreenElement && doc.webkitExitFullscreen) await doc.webkitExitFullscreen();
+    } catch {
+    }
+  }, []);
+  const toggleFullscreen = useCallback(() => {
+    if (fullscreen) void exitFullscreen();
+    else void enterFullscreen();
+  }, [fullscreen, enterFullscreen, exitFullscreen]);
+  useEffect(() => {
+    const onFsChange = () => {
+      const doc = document;
+      const fsEl = doc.fullscreenElement || doc.webkitFullscreenElement || null;
+      setFullscreen(fsEl === overlayRef.current);
+    };
+    document.addEventListener("fullscreenchange", onFsChange);
+    document.addEventListener("webkitfullscreenchange", onFsChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", onFsChange);
+      document.removeEventListener("webkitfullscreenchange", onFsChange);
+    };
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      resetActivity();
+      if (e.key === "Escape" && !fullscreen) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose, resetActivity, fullscreen]);
+  useEffect(() => {
+    if (!open) void exitFullscreen();
+  }, [open, exitFullscreen]);
+  const stop = useCallback((e) => e.stopPropagation(), []);
+  if (!open) return null;
+  const aspect = size.width > 0 && size.height > 0 ? size.width / size.height : 9 / 16;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm",
+      onClick: onClose,
+      onMouseMove: resetActivity,
+      onPointerDown: resetActivity,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex flex-col items-center ${fullscreen ? "h-full w-full gap-1 py-2" : "gap-3"}`,
+          onClick: stop,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-3 px-2 text-white/90", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium truncate max-w-[50vw]", children: [
+                deviceName || deviceId,
+                " \xB7 \u5B9E\u65F6\u955C\u50CF"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": fullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
+                    title: fullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
+                    onClick: toggleFullscreen,
+                    className: "rounded p-1 hover:bg-white/10",
+                    children: fullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-5 w-5" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "\u5173\u95ED",
+                    onClick: onClose,
+                    className: "rounded p-1 hover:bg-white/10",
+                    children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: `min-h-0 ${fullscreen ? "flex-1" : ""}`, style: fullscreen ? void 0 : { height: "80vh" }, children: /* @__PURE__ */ jsx(
+              MirrorSurface,
+              {
+                deviceId,
+                platform,
+                onSize: setSize,
+                videoAspect: aspect,
+                shortcutBar,
+                className: "h-full"
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { DeviceBootSplash, DeviceMirror, MirrorSurface };

package/dist/chunk-CVV7FOMQ.js

@@ -0,0 +1,175 @@
+import { toNormalizedPointClamped, classifyDrag, mapKey } from './chunk-NWFYTFMI.js';
+import { useRef, useEffect, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var TOUCH_MOVE_THROTTLE_MS = 30;
+function MirrorView({
+  stream,
+  deviceSize,
+  onInput,
+  keyboard = true,
+  autoFocus = true,
+  onFirstFrame,
+  onResize,
+  continuousTouch = false,
+  className
+}) {
+  const videoRef = useRef(null);
+  const downRef = useRef(null);
+  const gestureActiveRef = useRef(false);
+  const lastMoveSentRef = useRef(0);
+  const firstFrameRef = useRef(false);
+  useEffect(() => {
+    const v = videoRef.current;
+    if (v) v.srcObject = stream;
+    firstFrameRef.current = false;
+  }, [stream]);
+  const handleFrameReady = useCallback(() => {
+    if (firstFrameRef.current) return;
+    const v = videoRef.current;
+    if (!v || v.videoWidth === 0) return;
+    firstFrameRef.current = true;
+    onFirstFrame?.({ width: v.videoWidth, height: v.videoHeight });
+  }, [onFirstFrame]);
+  const handleResize = useCallback(() => {
+    const v = videoRef.current;
+    if (!v || v.videoWidth === 0) return;
+    onResize?.({ width: v.videoWidth, height: v.videoHeight });
+  }, [onResize]);
+  useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.addEventListener("resize", handleResize);
+    return () => v.removeEventListener("resize", handleResize);
+  }, [handleResize, stream]);
+  useEffect(() => {
+    if (autoFocus) videoRef.current?.focus();
+  }, [autoFocus, stream]);
+  const clampedPoint = useCallback(
+    (e) => {
+      const r = e.currentTarget.getBoundingClientRect();
+      const box = { left: r.left, top: r.top, width: r.width, height: r.height };
+      return toNormalizedPointClamped({ clientX: e.clientX, clientY: e.clientY }, box, deviceSize);
+    },
+    [deviceSize]
+  );
+  const handlePointerDown = useCallback((e) => {
+    if (!onInput) return;
+    e.currentTarget.focus();
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    if (continuousTouch) {
+      gestureActiveRef.current = true;
+      lastMoveSentRef.current = 0;
+      const p = clampedPoint(e);
+      if (p) onInput({ t: "touch_down", x: p.x, y: p.y });
+      return;
+    }
+    downRef.current = { clientX: e.clientX, clientY: e.clientY, t: e.timeStamp };
+  }, [onInput, continuousTouch, clampedPoint]);
+  const handlePointerMove = useCallback((e) => {
+    if (!onInput || !continuousTouch || !gestureActiveRef.current) return;
+    const now = Date.now();
+    if (now - lastMoveSentRef.current < TOUCH_MOVE_THROTTLE_MS) return;
+    lastMoveSentRef.current = now;
+    const p = clampedPoint(e);
+    if (p) onInput({ t: "touch_move", x: p.x, y: p.y });
+  }, [onInput, continuousTouch, clampedPoint]);
+  const handlePointerUp = useCallback((e) => {
+    if (!onInput) return;
+    if (continuousTouch) {
+      if (!gestureActiveRef.current) return;
+      gestureActiveRef.current = false;
+      const p = clampedPoint(e);
+      if (p) onInput({ t: "touch_up", x: p.x, y: p.y });
+      return;
+    }
+    const start = downRef.current;
+    downRef.current = null;
+    if (!start) return;
+    const box = e.currentTarget.getBoundingClientRect();
+    const msg = classifyDrag(
+      start,
+      { clientX: e.clientX, clientY: e.clientY, t: e.timeStamp },
+      { left: box.left, top: box.top, width: box.width, height: box.height },
+      deviceSize
+    );
+    if (msg) onInput(msg);
+  }, [onInput, continuousTouch, deviceSize, clampedPoint]);
+  const handleKeyDown = useCallback((e) => {
+    if (!onInput || !keyboard) return;
+    const msg = mapKey(e);
+    if (msg) {
+      e.preventDefault();
+      onInput(msg);
+    }
+  }, [onInput, keyboard]);
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      ref: videoRef,
+      autoPlay: true,
+      playsInline: true,
+      muted: true,
+      tabIndex: keyboard ? 0 : -1,
+      className,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      onLoadedData: handleFrameReady,
+      onPlaying: handleFrameReady,
+      style: {
+        background: "var(--aix-editor-bg, #000)",
+        borderRadius: "var(--aix-radius, 6px)",
+        width: "100%",
+        objectFit: "contain",
+        touchAction: "none",
+        outline: "none"
+      }
+    }
+  );
+}
+var btn = {
+  background: "var(--aix-accent, #2d6cdf)",
+  color: "#fff",
+  border: "none",
+  borderRadius: "var(--aix-radius, 6px)",
+  padding: "4px 12px",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var iconProps = {
+  width: 18,
+  height: 18,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.8,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var AndroidBack = () => /* @__PURE__ */ jsx("svg", { ...iconProps, "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15.5 5 L7.5 12 L15.5 19 Z" }) });
+var AndroidHome = () => /* @__PURE__ */ jsx("svg", { ...iconProps, "aria-hidden": true, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6.5" }) });
+var AndroidMenu = () => /* @__PURE__ */ jsx("svg", { ...iconProps, "aria-hidden": true, children: /* @__PURE__ */ jsx("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1.5" }) });
+var IosBack = () => /* @__PURE__ */ jsx("svg", { ...iconProps, "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M14.5 5 L8.5 12 L14.5 19" }) });
+var IosHome = () => /* @__PURE__ */ jsxs("svg", { ...iconProps, "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8.5" }),
+  /* @__PURE__ */ jsx("rect", { x: "8.5", y: "8.5", width: "7", height: "7", rx: "1.5" })
+] });
+function ControlBar({ platform = "android", onHome, onBack, onMenu, onScreenshot, className }) {
+  const android = platform === "android";
+  return /* @__PURE__ */ jsxs("div", { className, style: { display: "flex", gap: 8, padding: 8, background: "var(--aix-bg, #161616)", borderRadius: "var(--aix-radius, 6px)" }, children: [
+    onBack && /* @__PURE__ */ jsx("button", { type: "button", onClick: onBack, style: btn, "aria-label": "Back", title: "Back", children: android ? /* @__PURE__ */ jsx(AndroidBack, {}) : /* @__PURE__ */ jsx(IosBack, {}) }),
+    onHome && /* @__PURE__ */ jsx("button", { type: "button", onClick: onHome, style: btn, "aria-label": "Home", title: "Home", children: android ? /* @__PURE__ */ jsx(AndroidHome, {}) : /* @__PURE__ */ jsx(IosHome, {}) }),
+    android && onMenu && /* @__PURE__ */ jsx("button", { type: "button", onClick: onMenu, style: btn, "aria-label": "Menu", title: "Menu", children: /* @__PURE__ */ jsx(AndroidMenu, {}) }),
+    onScreenshot && /* @__PURE__ */ jsx("button", { type: "button", onClick: onScreenshot, style: btn, children: "Screenshot" })
+  ] });
+}
+
+export { ControlBar, MirrorView };