PageScene: useEditorCanvas hook + tabIndex on viewport canvas

The Phase 6 hooks (useFreeCam, useViewportPointer, useViewportKeyboard)
need a React-shaped accessor for the canvas DOM node so their
useEffects re-run when the canvas mounts/unmounts. Promote the
existing editorCanvasSignal / camViewCanvasSignal into useEditorCanvas
/ useCamViewCanvas hooks that bridge signal -> React state via a
subscribe.

Add tabIndex={0} and outline:none to the editor canvas so it can
receive keyboard focus without showing a focus ring.

frontend/apps/artcraft/app/src/pages/PageScene/comps/EngineCanvases.tsx

@@ -17,6 +17,8 @@ export const EditorCanvas = () => {
       id="video-scene"
       width="1280px"
       height="720px"
+      tabIndex={0}
+      style={{ outline: "none" }}
     />
   );
 };

frontend/apps/artcraft/app/src/pages/PageScene/hooks/useEditorCanvas.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import {
+  camViewCanvasSignal,
+  editorCanvasSignal,
+} from "~/pages/PageScene/contexts/EngineContext";
+
+// React-shaped accessors for the canvas DOM nodes that the engine
+// renders into. The underlying storage is a signal (set by
+// EngineCanvases on mount); these hooks convert that to React state so
+// dependent useEffects re-run when the canvas mounts/unmounts.
+
+export function useEditorCanvas(): HTMLCanvasElement | null {
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(
+    editorCanvasSignal.value,
+  );
+  useEffect(() => editorCanvasSignal.subscribe(setCanvas), []);
+  return canvas;
+}
+
+export function useCamViewCanvas(): HTMLCanvasElement | null {
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(
+    camViewCanvasSignal.value,
+  );
+  useEffect(() => camViewCanvasSignal.subscribe(setCanvas), []);
+  return canvas;
+}