Release v0.1.1 2026-07-10

src/components/DualDisplayFrame.tsx

@@ -1,34 +1,33 @@
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { subscribeDisplaySurface, type DisplaySurface } from "../platform/displayRouting";
+import { subscribeControllerToken } from "../input/controller";
 
 export function DualDisplayFrame({ top, bottom }: { top: ReactNode; bottom: ReactNode }) {
-  const [activeSurface, setActiveSurface] = useState<DisplaySurface>("top");
+  const [activeSurface, setActiveSurface] = useState<DisplaySurface>(() =>
+    new URLSearchParams(window.location.search).get("display") === "bottom" ? "bottom" : "top"
+  );
   const activeSurfaceRef = useRef(activeSurface);
   activeSurfaceRef.current = activeSurface;
 
   useEffect(() => {
     if (!document.documentElement.classList.contains("native-platform")) return;
-    let frame = 0;
-    let selectHeld = false;
+    const dedicatedSurface = new URLSearchParams(window.location.search).has("display");
+    if (dedicatedSurface) return;
     const toggle = () => setActiveSurface((surface) => surface === "top" ? "bottom" : "top");
     const unsubscribeSurface = subscribeDisplaySurface(setActiveSurface);
+    const unsubscribeController = subscribeControllerToken(({ token, repeat }) => {
+      if (token === "Button8" && !repeat) toggle();
+    });
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Tab" || event.repeat) return;
       event.preventDefault();
       toggle();
     };
-    const poll = () => {
-      const held = navigator.getGamepads?.()[0]?.buttons[8]?.pressed ?? false;
-      if (held && !selectHeld) toggle();
-      selectHeld = held;
-      frame = requestAnimationFrame(poll);
-    };
     window.addEventListener("keydown", onKeyDown);
-    frame = requestAnimationFrame(poll);
     return () => {
       window.removeEventListener("keydown", onKeyDown);
       unsubscribeSurface();
-      cancelAnimationFrame(frame);
+      unsubscribeController();
     };
   }, []);