feat move debug cube with remote hand tracking

src/components/ui/HandTrackingOverlay.tsx

@@ -0,0 +1,24 @@
+import { useHandTrackingSnapshot } from "@/hooks/useHandTrackingSnapshot";
+
+export function HandTrackingOverlay(): React.JSX.Element | null {
+  const { hands, status, serverStatus, error } = useHandTrackingSnapshot();
+
+  if (status === "idle") {
+    return null;
+  }
+
+  const pinching = hands.some((hand) => hand.isPinch);
+
+  return (
+    <aside className="hand-tracking-overlay" aria-label="Hand tracking status">
+      <strong>Hand tracking</strong>
+      <span>Status: {status}</span>
+      {serverStatus ? <span>Server: {serverStatus}</span> : null}
+      <span>Hands: {hands.length}</span>
+      <span>Pinch: {pinching ? "yes" : "no"}</span>
+      {error ? (
+        <span className="hand-tracking-overlay__error">{error}</span>
+      ) : null}
+    </aside>
+  );
+}

src/components/ui/HandTrackingProvider.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { useSceneMode } from "@/hooks/debug/useSceneMode";
+import {
+  HAND_TRACKING_IDLE_SNAPSHOT,
+  HandTrackingContext,
+} from "@/hooks/useHandTrackingSnapshot";
+import { useRemoteHandTracking } from "@/hooks/useRemoteHandTracking";
+import { isDebugEnabled } from "@/utils/debug/isDebugEnabled";
+
+export function HandTrackingProvider({
+  children,
+}: {
+  children: ReactNode;
+}): React.JSX.Element {
+  const sceneMode = useSceneMode();
+  const enabled = isDebugEnabled() && sceneMode === "physics";
+  const snapshot = useRemoteHandTracking({ enabled });
+
+  return (
+    <HandTrackingContext
+      value={enabled ? snapshot : HAND_TRACKING_IDLE_SNAPSHOT}
+    >
+      {children}
+    </HandTrackingContext>
+  );
+}