{
- e.preventDefault();
- const el = getViewElement();
- if (!el) return;
- const rect = el.getBoundingClientRect();
- const x = (e.clientX - rect.left) / rect.width;
- const y = (e.clientY - rect.top) / rect.height;
-
- if (e.altKey) {
- // Multi-touch mode: begin gesture
- multiTouchActiveRef.current = true;
- multiTouchShiftRef.current = e.shiftKey;
- const fingers = { x1: x, y1: y, x2: 1.0 - x, y2: 1.0 - y };
- // For pan mode, lock the offset between fingers
- panOffsetRef.current = { dx: 1.0 - x - x, dy: 1.0 - y - y };
- setFingerIndicators(fingers);
- sendMultiTouch({ type: "begin", ...fingers });
- return;
- }
+ {relayMode && !useNativeRelayVideo && (
+ ![]()
{
+ const el = e.currentTarget;
+ if (el.naturalWidth > 0 && el.naturalHeight > 0) {
+ setScreenSize((prev) =>
+ prev && prev.width === el.naturalWidth && prev.height === el.naturalHeight
+ ? prev
+ : { width: el.naturalWidth, height: el.naturalHeight },
+ );
+ }
+ }}
+ style={{
+ position: "absolute",
+ inset: 0,
+ width: "100%",
+ height: "100%",
+ cursor: FINGER_CURSOR,
+ display: "block",
+ userSelect: "none",
+ WebkitUserSelect: "none" as any,
+ touchAction: "none",
+ ...imageStyle,
+ }}
+ />
+ )}
+ {/* Interactive overlay — captures all pointer events */}
+
{!hideControls && (
diff --git a/packages/serve-sim/Sources/SimStreamHelper/HTTPServer.swift b/packages/serve-sim/Sources/SimStreamHelper/HTTPServer.swift
index 980deec4..1d7909a7 100644
--- a/packages/serve-sim/Sources/SimStreamHelper/HTTPServer.swift
+++ b/packages/serve-sim/Sources/SimStreamHelper/HTTPServer.swift
@@ -70,17 +70,42 @@ final class HTTPServer {
}
)
- // Config endpoint
- server["/config"] = { [weak self] request in
- let size = self?.clientManager ?? nil
- let w = size?.screenWidth ?? 0
- let h = size?.screenHeight ?? 0
- return HttpResponse.ok(.json(["width": w, "height": h] as AnyObject))
+ // Config endpoint (must send CORS — preview UI is often http://localhost:* while helper is http://127.0.0.1:*)
+ server["/config"] = { [weak self] _ in
+ let w = self?.clientManager.screenWidth ?? 0
+ let h = self?.clientManager.screenHeight ?? 0
+ let obj: [String: Int] = ["width": w, "height": h]
+ guard let jsonData = try? JSONSerialization.data(withJSONObject: obj) else {
+ return HttpResponse.raw(500, "Internal Server Error", [
+ "Access-Control-Allow-Origin": "*",
+ ]) { _ in }
+ }
+ let bytes = [UInt8](jsonData)
+ return HttpResponse.raw(200, "OK", [
+ "Content-Type": "application/json",
+ "Cache-Control": "no-store",
+ "Access-Control-Allow-Origin": "*",
+ ]) { writer in
+ try writer.write(bytes)
+ }
}
// Health endpoint
server["/health"] = { _ in
- return .ok(.json(["status": "ok"] as AnyObject))
+ let obj: [String: String] = ["status": "ok"]
+ guard let jsonData = try? JSONSerialization.data(withJSONObject: obj) else {
+ return HttpResponse.raw(500, "Internal Server Error", [
+ "Access-Control-Allow-Origin": "*",
+ ]) { _ in }
+ }
+ let bytes = [UInt8](jsonData)
+ return HttpResponse.raw(200, "OK", [
+ "Content-Type": "application/json",
+ "Cache-Control": "no-store",
+ "Access-Control-Allow-Origin": "*",
+ ]) { writer in
+ try writer.write(bytes)
+ }
}
// CORS preflight
diff --git a/packages/serve-sim/bin/serve-sim-bin b/packages/serve-sim/bin/serve-sim-bin
index 7511b6d2..a95ede7b 100755
Binary files a/packages/serve-sim/bin/serve-sim-bin and b/packages/serve-sim/bin/serve-sim-bin differ
diff --git a/packages/serve-sim/build.ts b/packages/serve-sim/build.ts
index c083ff28..cd4347a1 100644
--- a/packages/serve-sim/build.ts
+++ b/packages/serve-sim/build.ts
@@ -13,11 +13,27 @@
* via the __PREVIEW_HTML_B64__ build-time define.
*/
import { resolve, dirname } from "path";
-import { mkdirSync, writeFileSync, rmSync, readFileSync } from "fs";
+import { mkdirSync, writeFileSync, rmSync, readFileSync, existsSync } from "fs";
import { spawnSync } from "child_process";
const root = import.meta.dir;
const distDir = resolve(root, "dist");
+
+/** Resolve a hoisted workspace dependency (preact may live in repo root `node_modules`). */
+function resolvePackageDir(packageName: string, startDir: string): string {
+ let dir = startDir;
+ for (;;) {
+ const candidate = resolve(dir, "node_modules", packageName);
+ if (existsSync(resolve(candidate, "package.json"))) return candidate;
+ const parent = dirname(dir);
+ if (parent === dir) {
+ throw new Error(
+ `Could not find "${packageName}" under node_modules (walked up from ${startDir}). Run install from the repo root.`,
+ );
+ }
+ dir = parent;
+ }
+}
rmSync(distDir, { recursive: true, force: true });
mkdirSync(distDir, { recursive: true });
@@ -27,23 +43,36 @@ function kb(n: number): string {
// ─── 1. Bundle the browser client (React aliased to Preact) ───────────────
+const preactRoot = resolvePackageDir("preact", root);
+const preactCompat = resolve(preactRoot, "compat/dist/compat.module.js");
+const preactCompatClient = resolve(preactRoot, "compat/client.mjs");
+const preactJsxRuntime = resolve(
+ preactRoot,
+ "jsx-runtime/dist/jsxRuntime.module.js",
+);
+
const clientResult = await Bun.build({
entrypoints: [resolve(root, "src/client/client.tsx")],
minify: true,
target: "browser",
format: "esm",
define: { "process.env.NODE_ENV": '"production"' },
- plugins: [{
- name: "preact-alias",
- setup(build) {
- const preactCompat = resolve(root, "node_modules/preact/compat/dist/compat.module.js");
- const preactCompatClient = resolve(root, "node_modules/preact/compat/client.mjs");
- const preactJsxRuntime = resolve(root, "node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js");
- build.onResolve({ filter: /^react-dom\/client$/ }, () => ({ path: preactCompatClient }));
- build.onResolve({ filter: /^react(-dom)?$/ }, () => ({ path: preactCompat }));
- build.onResolve({ filter: /^react\/jsx(-dev)?-runtime$/ }, () => ({ path: preactJsxRuntime }));
+ plugins: [
+ {
+ name: "preact-alias",
+ setup(build) {
+ build.onResolve({ filter: /^react-dom\/client$/ }, () => ({
+ path: preactCompatClient,
+ }));
+ build.onResolve({ filter: /^react(-dom)?$/ }, () => ({
+ path: preactCompat,
+ }));
+ build.onResolve({ filter: /^react\/jsx(-dev)?-runtime$/ }, () => ({
+ path: preactJsxRuntime,
+ }));
+ },
},
- }],
+ ],
});
if (!clientResult.success) {
@@ -52,14 +81,19 @@ if (!clientResult.success) {
process.exit(1);
}
-const clientJs = (await clientResult.outputs[0].text()).replace(/<\/script>/gi, "<\\/script>");
+const clientJs = (await clientResult.outputs[0].text()).replace(
+ /<\/script>/gi,
+ "<\\/script>",
+);
console.log(`client bundle ${kb(clientJs.length)}`);
// ─── 2. Inline client into preview HTML, base64-encode for the define ────
// Committed ICO copy of Simulator.app's AppIcon, inlined as a data URI so the
// preview tab shows the same icon as the native app.
-const faviconBytes = readFileSync(resolve(root, "src/client/simulator-icon.ico"));
+const faviconBytes = readFileSync(
+ resolve(root, "src/client/simulator-icon.ico"),
+);
const faviconTag = ``;
console.log(`favicon ${kb(faviconBytes.length)}`);
@@ -77,7 +111,9 @@ ${faviconTag}
{
+ e.preventDefault();
+ const el = getViewElement();
+ if (!el) return;
+ const rect = el.getBoundingClientRect();
+ const x = (e.clientX - rect.left) / rect.width;
+ const y = (e.clientY - rect.top) / rect.height;
- showTouchIndicator(x, y);
- if (y > 0.88) {
- edgeGestureRef.current = true;
- sendTouch({ type: "begin", x, y, edge: EDGE_BOTTOM });
- } else {
- edgeGestureRef.current = false;
- handleTouch("begin", e);
- }
- }}
- onMouseMove={(e) => {
- const el = getViewElement();
- if (!el) return;
- const rect = el.getBoundingClientRect();
- const x = (e.clientX - rect.left) / rect.width;
- const y = (e.clientY - rect.top) / rect.height;
- lastMousePosRef.current = { x, y };
-
- // Alt-hover preview (no buttons pressed)
- if (e.buttons === 0) {
if (e.altKey) {
- setFingerIndicators({
- x1: x,
- y1: y,
- x2: 1.0 - x,
- y2: 1.0 - y,
- });
+ // Multi-touch mode: begin gesture
+ multiTouchActiveRef.current = true;
+ multiTouchShiftRef.current = e.shiftKey;
+ const fingers = { x1: x, y1: y, x2: 1.0 - x, y2: 1.0 - y };
+ // For pan mode, lock the offset between fingers
+ panOffsetRef.current = { dx: 1.0 - x - x, dy: 1.0 - y - y };
+ setFingerIndicators(fingers);
+ sendMultiTouch({ type: "begin", ...fingers });
+ return;
}
- return;
- }
- if (multiTouchActiveRef.current) {
- let fingers;
- if (multiTouchShiftRef.current) {
- // Pan: both fingers translate together, maintaining fixed spacing
- const off = panOffsetRef.current;
- fingers = { x1: x, y1: y, x2: x + off.dx, y2: y + off.dy };
+ showTouchIndicator(x, y);
+ if (y > 0.88) {
+ edgeGestureRef.current = true;
+ sendTouch({ type: "begin", x, y, edge: EDGE_BOTTOM });
} else {
- // Pinch: fingers mirror around screen center (0.5, 0.5)
- fingers = { x1: x, y1: y, x2: 1.0 - x, y2: 1.0 - y };
+ edgeGestureRef.current = false;
+ handleTouch("begin", e);
}
- setFingerIndicators(fingers);
- sendMultiTouch({ type: "move", ...fingers });
- return;
- }
-
- moveTouchIndicator(x, y);
- if (edgeGestureRef.current) {
- sendTouch({ type: "move", x, y, edge: EDGE_BOTTOM });
- } else {
- handleTouch("move", e);
- }
- }}
- onMouseUp={(e) => {
- if (multiTouchActiveRef.current) {
+ }}
+ onMouseMove={(e) => {
const el = getViewElement();
- if (el) {
- const rect = el.getBoundingClientRect();
- const x = (e.clientX - rect.left) / rect.width;
- const y = (e.clientY - rect.top) / rect.height;
- if (multiTouchShiftRef.current) {
- const off = panOffsetRef.current;
- sendMultiTouch({
- type: "end",
- x1: x,
- y1: y,
- x2: x + off.dx,
- y2: y + off.dy,
- });
- } else {
- sendMultiTouch({
- type: "end",
+ if (!el) return;
+ const rect = el.getBoundingClientRect();
+ const x = (e.clientX - rect.left) / rect.width;
+ const y = (e.clientY - rect.top) / rect.height;
+ lastMousePosRef.current = { x, y };
+
+ // Alt-hover preview (no buttons pressed)
+ if (e.buttons === 0) {
+ if (e.altKey) {
+ setFingerIndicators({
x1: x,
y1: y,
x2: 1.0 - x,
y2: 1.0 - y,
});
}
+ return;
}
- multiTouchActiveRef.current = false;
- // Keep showing preview if alt is still held
- if (!e.altKey) setFingerIndicators(null);
- return;
- }
- hideTouchIndicator();
- if (edgeGestureRef.current) {
- const el = getViewElement();
- if (el) {
- const rect = el.getBoundingClientRect();
- const x = (e.clientX - rect.left) / rect.width;
- const y = (e.clientY - rect.top) / rect.height;
- sendTouch({ type: "end", x, y, edge: EDGE_BOTTOM });
+ if (multiTouchActiveRef.current) {
+ let fingers;
+ if (multiTouchShiftRef.current) {
+ // Pan: both fingers translate together, maintaining fixed spacing
+ const off = panOffsetRef.current;
+ fingers = { x1: x, y1: y, x2: x + off.dx, y2: y + off.dy };
+ } else {
+ // Pinch: fingers mirror around screen center (0.5, 0.5)
+ fingers = { x1: x, y1: y, x2: 1.0 - x, y2: 1.0 - y };
+ }
+ setFingerIndicators(fingers);
+ sendMultiTouch({ type: "move", ...fingers });
+ return;
}
- edgeGestureRef.current = false;
- return;
- }
- handleTouch("end", e);
- }}
- onMouseLeave={(e) => {
- if (multiTouchActiveRef.current) {
- if (fingerIndicators) {
- sendMultiTouch({ type: "end", ...fingerIndicators });
+
+ moveTouchIndicator(x, y);
+ if (edgeGestureRef.current) {
+ sendTouch({ type: "move", x, y, edge: EDGE_BOTTOM });
+ } else {
+ handleTouch("move", e);
+ }
+ }}
+ onMouseUp={(e) => {
+ if (multiTouchActiveRef.current) {
+ const el = getViewElement();
+ if (el) {
+ const rect = el.getBoundingClientRect();
+ const x = (e.clientX - rect.left) / rect.width;
+ const y = (e.clientY - rect.top) / rect.height;
+ if (multiTouchShiftRef.current) {
+ const off = panOffsetRef.current;
+ sendMultiTouch({
+ type: "end",
+ x1: x,
+ y1: y,
+ x2: x + off.dx,
+ y2: y + off.dy,
+ });
+ } else {
+ sendMultiTouch({
+ type: "end",
+ x1: x,
+ y1: y,
+ x2: 1.0 - x,
+ y2: 1.0 - y,
+ });
+ }
+ }
+ multiTouchActiveRef.current = false;
+ // Keep showing preview if alt is still held
+ if (!e.altKey) setFingerIndicators(null);
+ return;
}
- multiTouchActiveRef.current = false;
- setFingerIndicators(null);
- return;
- }
- hideTouchIndicator();
- if (edgeGestureRef.current) {
- const el = getViewElement();
- if (el) {
- const rect = el.getBoundingClientRect();
- const x = (e.clientX - rect.left) / rect.width;
- const y = (e.clientY - rect.top) / rect.height;
- sendTouch({ type: "end", x, y, edge: EDGE_BOTTOM });
+ hideTouchIndicator();
+ if (edgeGestureRef.current) {
+ const el = getViewElement();
+ if (el) {
+ const rect = el.getBoundingClientRect();
+ const x = (e.clientX - rect.left) / rect.width;
+ const y = (e.clientY - rect.top) / rect.height;
+ sendTouch({ type: "end", x, y, edge: EDGE_BOTTOM });
+ }
+ edgeGestureRef.current = false;
+ return;
}
- edgeGestureRef.current = false;
- return;
- }
- if (e.buttons > 0) handleTouch("end", e);
- setFingerIndicators(null);
- }}
- onTouchStart={(e) => {
- e.preventDefault();
- const el = getViewElement();
- if (!el) return;
- const rect = el.getBoundingClientRect();
-
- if (e.touches.length >= 2) {
- // Two fingers down — start multi-touch
+ handleTouch("end", e);
+ }}
+ onMouseLeave={(e) => {
+ if (multiTouchActiveRef.current) {
+ if (fingerIndicators) {
+ sendMultiTouch({ type: "end", ...fingerIndicators });
+ }
+ multiTouchActiveRef.current = false;
+ setFingerIndicators(null);
+ return;
+ }
+
hideTouchIndicator();
- const t1 = e.touches[0];
- const t2 = e.touches[1];
- const fingers = {
- x1: (t1.clientX - rect.left) / rect.width,
- y1: (t1.clientY - rect.top) / rect.height,
- x2: (t2.clientX - rect.left) / rect.width,
- y2: (t2.clientY - rect.top) / rect.height,
- };
- // If a single-touch gesture was already in progress, end it first
- if (!realMultiTouchRef.current && !edgeGestureRef.current) {
- sendTouch({ type: "end", x: fingers.x1, y: fingers.y1 });
+ if (edgeGestureRef.current) {
+ const el = getViewElement();
+ if (el) {
+ const rect = el.getBoundingClientRect();
+ const x = (e.clientX - rect.left) / rect.width;
+ const y = (e.clientY - rect.top) / rect.height;
+ sendTouch({ type: "end", x, y, edge: EDGE_BOTTOM });
+ }
+ edgeGestureRef.current = false;
+ return;
}
- realMultiTouchRef.current = true;
- multiTouchActiveRef.current = true;
- edgeGestureRef.current = false;
- setFingerIndicators(fingers);
- sendMultiTouch({ type: "begin", ...fingers });
- return;
- }
+ if (e.buttons > 0) handleTouch("end", e);
+ setFingerIndicators(null);
+ }}
+ onTouchStart={(e) => {
+ e.preventDefault();
+ const el = getViewElement();
+ if (!el) return;
+ const rect = el.getBoundingClientRect();
- const touch = e.touches[0];
- if (!touch) return;
- const x = (touch.clientX - rect.left) / rect.width;
- const y = (touch.clientY - rect.top) / rect.height;
- showTouchIndicator(x, y);
- if (y > 0.88) {
- edgeGestureRef.current = true;
- sendTouch({ type: "begin", x, y, edge: EDGE_BOTTOM });
- } else {
- edgeGestureRef.current = false;
- sendTouch({ type: "begin", x, y });
- }
- }}
- onTouchMove={(e) => {
- e.preventDefault();
- const el = getViewElement();
- if (!el) return;
- const rect = el.getBoundingClientRect();
-
- if (realMultiTouchRef.current && e.touches.length >= 2) {
- const t1 = e.touches[0];
- const t2 = e.touches[1];
- const fingers = {
- x1: (t1.clientX - rect.left) / rect.width,
- y1: (t1.clientY - rect.top) / rect.height,
- x2: (t2.clientX - rect.left) / rect.width,
- y2: (t2.clientY - rect.top) / rect.height,
- };
- setFingerIndicators(fingers);
- sendMultiTouch({ type: "move", ...fingers });
- return;
- }
+ if (e.touches.length >= 2) {
+ // Two fingers down — start multi-touch
+ hideTouchIndicator();
+ const t1 = e.touches[0];
+ const t2 = e.touches[1];
+ const fingers = {
+ x1: (t1.clientX - rect.left) / rect.width,
+ y1: (t1.clientY - rect.top) / rect.height,
+ x2: (t2.clientX - rect.left) / rect.width,
+ y2: (t2.clientY - rect.top) / rect.height,
+ };
+ // If a single-touch gesture was already in progress, end it first
+ if (!realMultiTouchRef.current && !edgeGestureRef.current) {
+ sendTouch({ type: "end", x: fingers.x1, y: fingers.y1 });
+ }
+ realMultiTouchRef.current = true;
+ multiTouchActiveRef.current = true;
+ edgeGestureRef.current = false;
+ setFingerIndicators(fingers);
+ sendMultiTouch({ type: "begin", ...fingers });
+ return;
+ }
- const touch = e.touches[0];
- if (!touch) return;
- const x = (touch.clientX - rect.left) / rect.width;
- const y = (touch.clientY - rect.top) / rect.height;
- moveTouchIndicator(x, y);
- if (edgeGestureRef.current) {
- sendTouch({ type: "move", x, y, edge: EDGE_BOTTOM });
- } else {
- sendTouch({ type: "move", x, y });
- }
- }}
- onTouchEnd={(e) => {
- e.preventDefault();
- const el = getViewElement();
- if (!el) return;
- const rect = el.getBoundingClientRect();
-
- if (realMultiTouchRef.current) {
- // End multi-touch when all fingers lift (touches.length is remaining fingers)
- if (e.touches.length < 2) {
- const t1 = e.changedTouches[0];
- // Use last known indicator positions as fallback for the second finger
- const last = fingerIndicators;
- if (t1 && last) {
- sendMultiTouch({
- type: "end",
- x1: (t1.clientX - rect.left) / rect.width,
- y1: (t1.clientY - rect.top) / rect.height,
- x2: last.x2,
- y2: last.y2,
- });
- } else if (last) {
- sendMultiTouch({ type: "end", ...last });
+ const touch = e.touches[0];
+ if (!touch) return;
+ const x = (touch.clientX - rect.left) / rect.width;
+ const y = (touch.clientY - rect.top) / rect.height;
+ showTouchIndicator(x, y);
+ if (y > 0.88) {
+ edgeGestureRef.current = true;
+ sendTouch({ type: "begin", x, y, edge: EDGE_BOTTOM });
+ } else {
+ edgeGestureRef.current = false;
+ sendTouch({ type: "begin", x, y });
+ }
+ }}
+ onTouchMove={(e) => {
+ e.preventDefault();
+ const el = getViewElement();
+ if (!el) return;
+ const rect = el.getBoundingClientRect();
+
+ if (realMultiTouchRef.current && e.touches.length >= 2) {
+ const t1 = e.touches[0];
+ const t2 = e.touches[1];
+ const fingers = {
+ x1: (t1.clientX - rect.left) / rect.width,
+ y1: (t1.clientY - rect.top) / rect.height,
+ x2: (t2.clientX - rect.left) / rect.width,
+ y2: (t2.clientY - rect.top) / rect.height,
+ };
+ setFingerIndicators(fingers);
+ sendMultiTouch({ type: "move", ...fingers });
+ return;
+ }
+
+ const touch = e.touches[0];
+ if (!touch) return;
+ const x = (touch.clientX - rect.left) / rect.width;
+ const y = (touch.clientY - rect.top) / rect.height;
+ moveTouchIndicator(x, y);
+ if (edgeGestureRef.current) {
+ sendTouch({ type: "move", x, y, edge: EDGE_BOTTOM });
+ } else {
+ sendTouch({ type: "move", x, y });
+ }
+ }}
+ onTouchEnd={(e) => {
+ e.preventDefault();
+ const el = getViewElement();
+ if (!el) return;
+ const rect = el.getBoundingClientRect();
+
+ if (realMultiTouchRef.current) {
+ // End multi-touch when all fingers lift (touches.length is remaining fingers)
+ if (e.touches.length < 2) {
+ const t1 = e.changedTouches[0];
+ // Use last known indicator positions as fallback for the second finger
+ const last = fingerIndicators;
+ if (t1 && last) {
+ sendMultiTouch({
+ type: "end",
+ x1: (t1.clientX - rect.left) / rect.width,
+ y1: (t1.clientY - rect.top) / rect.height,
+ x2: last.x2,
+ y2: last.y2,
+ });
+ } else if (last) {
+ sendMultiTouch({ type: "end", ...last });
+ }
+ realMultiTouchRef.current = false;
+ multiTouchActiveRef.current = false;
+ setFingerIndicators(null);
}
- realMultiTouchRef.current = false;
- multiTouchActiveRef.current = false;
- setFingerIndicators(null);
+ return;
}
- return;
- }
- const touch = e.changedTouches[0];
- if (!touch) return;
- const x = (touch.clientX - rect.left) / rect.width;
- const y = (touch.clientY - rect.top) / rect.height;
- hideTouchIndicator();
- if (edgeGestureRef.current) {
- sendTouch({ type: "end", x, y, edge: EDGE_BOTTOM });
- edgeGestureRef.current = false;
- } else {
- sendTouch({ type: "end", x, y });
- }
- }}
- />
- {/* Single-touch indicator (hidden by default, shown via ref) */}
-
- {/* Multi-touch finger indicators */}
- {fingerIndicators && (
- <>
-
-
-
- )}
- {!connected && !error && (
-
- Connecting...
-
- )}
- {error && (
-
-
- {error}
-
-
- )}
- {showSlowOverlay && (
-
-
- Slow connection
-
-
- )}
+ const touch = e.changedTouches[0];
+ if (!touch) return;
+ const x = (touch.clientX - rect.left) / rect.width;
+ const y = (touch.clientY - rect.top) / rect.height;
+ hideTouchIndicator();
+ if (edgeGestureRef.current) {
+ sendTouch({ type: "end", x, y, edge: EDGE_BOTTOM });
+ edgeGestureRef.current = false;
+ } else {
+ sendTouch({ type: "end", x, y });
+ }
+ }}
+ />
+ {/* Single-touch indicator (hidden by default, shown via ref) */}
+
+ {/* Multi-touch finger indicators */}
+ {fingerIndicators && (
+ <>
+
+
+
+ )}
+ {!connected && !error && (
+
+ Connecting...
+
+ )}
+ {error && (
+
+
+ {error}
+
+
+ )}
+ {showSlowOverlay && (
+
+
+ Slow connection
+
+
+ )}