fix: prevent stream exit during overlays

js/src/components/keybindings-overlay.tsx

@@ -1,3 +1,4 @@
+import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store";
 import { useEffect } from "react";
 import { createPortal } from "react-dom";
 
@@ -24,6 +25,14 @@ export function KeybindingsOverlay({
   groups,
   title = "Keyboard Shortcuts",
 }: KeybindingsOverlayProps) {
+  // Suspend stream playback
+  useEffect(() => {
+    if (!open) return;
+    const { suspend, release } = usePlaybackSuspenderStore.getState();
+    suspend();
+    return release;
+  }, [open]);
+
   useEffect(() => {
     if (!open) return;
     const handler = (e: KeyboardEvent) => {

js/src/features/particles/rename-stream-overlay.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { updateParticleProperties } from "@/lib/firestore-particles";
 import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
 import type { Particle } from "@/api/types";
+import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store";
 
 interface RenameStreamOverlayProps {
   networkId: string;
@@ -17,6 +18,13 @@ export function RenameStreamOverlay({
   streamParticle,
   onClose,
 }: RenameStreamOverlayProps) {
+  // Suspend stream playback
+  useEffect(() => {
+    const { suspend, release } = usePlaybackSuspenderStore.getState();
+    suspend();
+    return release;
+  }, []);
+
   const [name, setName] = useState(streamParticle.properties.name);
   const [saving, setSaving] = useState(false);
 

js/src/features/particles/stream-members-overlay.tsx

@@ -13,6 +13,7 @@ import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
 import { useNetwork } from "@/hooks/use-networks";
 import { cn, getInitials } from "@/lib/utils";
 import type { Particle } from "@/api/types";
+import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store";
 
 interface StreamMembersOverlayProps {
   networkId: string;
@@ -27,6 +28,13 @@ export function StreamMembersOverlay({
   isCreator,
   onClose,
 }: StreamMembersOverlayProps) {
+  // Suspend stream playback
+  useEffect(() => {
+    const { suspend, release } = usePlaybackSuspenderStore.getState();
+    suspend();
+    return release;
+  }, []);
+
   const network = useNetwork(networkId);
   const humans = network?.humans ?? [];
   const creatorId = streamParticle.created_by_human_id;