@ksp-gonogo/kerbcast-react 1.12.0-rc.1 → 1.12.0-rc.2

package/README.md

@@ -82,6 +82,18 @@ cannot loop with the request. A resize within about a second of the stream
 changing that matches its new shape counts as following it. Layout changes
 outside that window always report.
 
+The feed frame (the element fullscreen targets) carries two attributes for
+hosts and tests:
+
+- `data-kc-signal`: `live`, `stalled` (no frame has left the decoder for
+  half a second, or none yet since the source attached) or `none` (no
+  source). It is measured after any encoded transform the host installs, so
+  a transform that holds frames back shows as `stalled` while it holds them.
+  The video keeps presenting frames while it shows static, so its frame
+  counts cannot tell a picture from static, and inbound-rtp `framesDecoded`
+  averaged over seconds misses gaps this short; this attribute can
+- `data-fullscreen`: present while the feed is fullscreen
+
 An imperative `CameraFeedHandle` (via `ref`) exposes `stepCamera`,
 `setPanAxis`, `setZoomRate`, `nudgePan`, and `nudgeZoom` for wiring feeds
 to a gamepad or keyboard.

package/dist/CameraFeed.js

@@ -19,7 +19,7 @@ import { useTargetBracketsPreference } from "./hooks/useTargetBracketsPreference
 import { StandbyIcon } from "./StandbyIcon";
 import { isCameraDestroyed } from "./lifecycle";
 import { claimAnchors } from "./sharedAnchors";
-import { usePortalMenu } from "./menuPositioning";
+import { menuPortalRoot, usePortalMenu } from "./menuPositioning";
 import { formatElapsed, nowMs } from "./timing";
 // ---------------------------------------------------------------------------
 // Tuning constants
@@ -44,6 +44,15 @@ function presetDim(operatorDim, scale) {
     const v = Math.trunc(operatorDim * scale) & ~1;
     return v < 2 ? 2 : v;
 }
+function videoTrackId(source) {
+    if (!source || !("getVideoTracks" in source))
+        return undefined;
+    return source.getVideoTracks()[0]?.id;
+}
+function sameVideoTrack(a, b) {
+    const id = videoTrackId(a);
+    return id !== undefined && id === videoTrackId(b);
+}
 function isFullscreenSupported() {
     if (typeof document === "undefined")
         return false;
@@ -161,10 +170,17 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     }, []);
     // The feed frame; fullscreen targets this and ResizeObserver measures it.
     const wrapRef = useRef(null);
+    /* Clearing to null on a switch to a camera with no stream yet stops the
+       previous camera's last frame lingering. A rebind can hand over a new
+       MediaStream around the same track; reassigning that would reset the
+       element and flash black, so it is skipped. */
     useEffect(() => {
-        if (videoRef.current && stream) {
-            videoRef.current.srcObject = stream;
-        }
+        const video = videoRef.current;
+        if (!video || video.srcObject === stream)
+            return;
+        if (sameVideoTrack(video.srcObject, stream))
+            return;
+        video.srcObject = stream;
     }, [stream]);
     // -------------------------------------------------------------------------
     // Stall presentation. The static is composited in-stream by the SDK's
@@ -186,6 +202,19 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
         setIsStale(cam.stalled);
         return cam.on("stall", setIsStale);
     }, [client, flightId]);
+    const [hasSource, setHasSource] = useState(false);
+    useEffect(() => {
+        if (flightId === null) {
+            setHasSource(false);
+            return;
+        }
+        const cam = client.camera(flightId);
+        setHasSource(cam.hasSource);
+        return cam.on("source", setHasSource);
+    }, [client, flightId]);
+    /* The in-stream static keeps the video element presenting frames, so a
+       frame count cannot tell a picture from static; this attribute can. */
+    const signal = flightId === null ? undefined : !hasSource ? "none" : isStale ? "stalled" : "live";
     // -------------------------------------------------------------------------
     // Fullscreen + Picture-in-Picture (opt-in, feature-detected)
     // -------------------------------------------------------------------------
@@ -224,6 +253,21 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
             v.removeEventListener("leavepictureinpicture", onLeave);
         };
     }, [pipAvailable, flightId]);
+    /* Browsers usually consume Escape to leave fullscreen themselves; this
+       covers hosts and embedded views that hand the key to the page instead. */
+    useEffect(() => {
+        if (!isFullscreen)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape" &&
+                !e.defaultPrevented &&
+                currentFullscreenElement() === wrapRef.current) {
+                exitFullscreen();
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [isFullscreen]);
     const toggleFullscreen = useCallback(() => {
         const el = wrapRef.current;
         if (!el)
@@ -583,7 +627,7 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                 createPortal(_jsx(CameraMenu, { ref: cameraMenu.menuRef, id: menuId, role: "menu", "aria-label": "Camera", style: cameraMenu.position, children: cameras.map((c) => (_jsxs(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": c.flightId === flightId, "$selected": c.flightId === flightId, onClick: () => {
                             onSelectCamera?.(c.flightId);
                             cameraMenu.close();
-                        }, children: [cameraLabel(c), " (", c.vesselName, ")", isCameraDestroyed(c) ? " - signal lost" : ""] }, c.flightId))) }), document.body), showDebugInfo &&
+                        }, children: [cameraLabel(c), " (", c.vesselName, ")", isCameraDestroyed(c) ? " - signal lost" : ""] }, c.flightId))) }), menuPortalRoot()), showDebugInfo &&
                 (camera ? (_jsxs(TopMeta, { children: [camera.vesselName, " \u00B7 ", camera.renderWidth, "\u00D7", camera.renderHeight, bitrateLabel, adaptiveLabel] })) : (_jsx(TopMeta, { children: "no cameras on this vessel" })))] }));
     /*
      * Built-in action-bar entries, in the bar's natural (fallback) order:
@@ -677,8 +721,11 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                 {
                     id: "fullscreen",
                     label: fullscreenLabel,
+                    /* While fullscreen the exit stays inline, never in the ⋮ menu,
+                       so it can be the one control the Stage keeps visible. */
                     stateful: false,
-                    render: () => (_jsx(OverlayIconButton, { type: "button", "aria-label": fullscreenLabel, "aria-pressed": isFullscreen, title: fullscreenLabel, "$active": isFullscreen, onClick: toggleFullscreen, children: isFullscreen ? _jsx(FullscreenExitIcon, {}) : _jsx(FullscreenEnterIcon, {}) })),
+                    inline: isFullscreen,
+                    render: () => (_jsx(OverlayIconButton, { type: "button", "data-kc-fullscreen-exit": isFullscreen || undefined, "aria-label": fullscreenLabel, "aria-pressed": isFullscreen, title: fullscreenLabel, "$active": isFullscreen, onClick: toggleFullscreen, children: isFullscreen ? _jsx(FullscreenExitIcon, {}) : _jsx(FullscreenEnterIcon, {}) })),
                 },
             ]
             : []),
@@ -713,22 +760,22 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
             builtInActions);
     const stepButtons = hasCameras ? (_jsxs(StepButtons, { children: [_jsx(OverlayIconButton, { type: "button", "aria-label": "Previous camera", disabled: !canStep, onClick: () => stepCamera(-1), children: "\u2039" }), _jsx(OverlayIconButton, { type: "button", "aria-label": "Next camera", disabled: !canStep, onClick: () => stepCamera(1), children: "\u203A" })] })) : null;
     const actionBar = hasActionBar ? (_jsx(FeedActionBar, { leading: stepButtons, entries: entries })) : null;
-    return (_jsx(FeedBox, { style: feedShape, children: _jsx(Stage, { ref: wrapRef, "$pinned": chromePinned, children: flightId === null ? (_jsxs(_Fragment, { children: [_jsx(Empty, { children: emptyMessage }), topOverlay, actionBar] })) : (_jsxs(_Fragment, { children: [_jsx(StyledVideo, { ref: attachVideo, autoPlay: true, playsInline: true, muted: true, controls: false, onClick: () => setChromePinned((v) => !v) }), topOverlay, actionBar, qualityAvailable &&
+    return (_jsx(FeedBox, { style: feedShape, children: _jsx(Stage, { ref: wrapRef, "$pinned": chromePinned, "$fullscreen": isFullscreen, "data-fullscreen": isFullscreen || undefined, "data-kc-signal": signal, children: flightId === null ? (_jsxs(_Fragment, { children: [_jsx(Empty, { children: emptyMessage }), topOverlay, actionBar] })) : (_jsxs(_Fragment, { children: [_jsx(StyledVideo, { ref: attachVideo, autoPlay: true, playsInline: true, muted: true, controls: false, onClick: () => setChromePinned((v) => !v) }), topOverlay, actionBar, qualityAvailable &&
                         qualityMenu.open &&
                         qualityMenu.position &&
                         camera &&
-                        createPortal(_jsxs(QualityMenu, { ref: qualityMenu.menuRef, id: qualityMenuId, role: "menu", "aria-label": "Quality", style: qualityMenu.position, children: [_jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": camera.viewerQuality == null, "$selected": camera.viewerQuality == null, onClick: () => selectQuality(null), children: "Auto" }), QUALITY_PRESETS.map(({ preset, label, scale }) => (_jsxs(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": camera.viewerQuality === preset, "$selected": camera.viewerQuality === preset, onClick: () => selectQuality(preset), children: [label, " (", presetDim(camera.operatorWidth, scale), "\u00D7", presetDim(camera.operatorHeight, scale), ")"] }, preset))), _jsxs(QualityMeta, { role: "status", children: ["now ", camera.renderWidth, "\u00D7", camera.renderHeight, qualityThrottled ? " · throttled" : ""] })] }), document.body), trackingAvailable &&
+                        createPortal(_jsxs(QualityMenu, { ref: qualityMenu.menuRef, id: qualityMenuId, role: "menu", "aria-label": "Quality", style: qualityMenu.position, children: [_jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": camera.viewerQuality == null, "$selected": camera.viewerQuality == null, onClick: () => selectQuality(null), children: "Auto" }), QUALITY_PRESETS.map(({ preset, label, scale }) => (_jsxs(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": camera.viewerQuality === preset, "$selected": camera.viewerQuality === preset, onClick: () => selectQuality(preset), children: [label, " (", presetDim(camera.operatorWidth, scale), "\u00D7", presetDim(camera.operatorHeight, scale), ")"] }, preset))), _jsxs(QualityMeta, { role: "status", children: ["now ", camera.renderWidth, "\u00D7", camera.renderHeight, qualityThrottled ? " · throttled" : ""] })] }), menuPortalRoot()), trackingAvailable &&
                         trackingMenu.open &&
                         trackingMenu.position &&
                         camera &&
-                        createPortal(_jsxs(QualityMenu, { ref: trackingMenu.menuRef, id: trackingMenuId, role: "menu", "aria-label": "Auto-track", style: trackingMenu.position, children: [_jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": trackMode === TrackMode.ActiveVessel, "$selected": trackMode === TrackMode.ActiveVessel, onClick: () => selectTrack(TrackMode.ActiveVessel), children: "Track active vessel" }), _jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": trackMode === TrackMode.Target, "$selected": trackMode === TrackMode.Target, onClick: () => selectTrack(TrackMode.Target), children: "Track target" })] }), document.body), commandTargetAvailable &&
+                        createPortal(_jsxs(QualityMenu, { ref: trackingMenu.menuRef, id: trackingMenuId, role: "menu", "aria-label": "Auto-track", style: trackingMenu.position, children: [_jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": trackMode === TrackMode.ActiveVessel, "$selected": trackMode === TrackMode.ActiveVessel, onClick: () => selectTrack(TrackMode.ActiveVessel), children: "Track active vessel" }), _jsx(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": trackMode === TrackMode.Target, "$selected": trackMode === TrackMode.Target, onClick: () => selectTrack(TrackMode.Target), children: "Track target" })] }), menuPortalRoot()), commandTargetAvailable &&
                         commandTargetMenu.open &&
                         commandTargetMenu.position &&
                         createPortal(_jsx(CameraMenu, { ref: commandTargetMenu.menuRef, id: commandTargetMenuId, role: "menu", "aria-label": "Target", style: commandTargetMenu.position, children: commandTargets.map((t) => {
                                 const eligible = t.eligibility === CommandTargetEligibility.Ok;
                                 const current = t.persistentId === commandTargetId;
                                 return (_jsxs(CameraMenuItem, { type: "button", role: "menuitemradio", "aria-checked": current, "$selected": current, disabled: !eligible, title: eligible ? undefined : t.eligibilityText, onClick: () => selectCommandTarget(t.persistentId), children: [t.vesselName, t.rangeM != null ? ` · ${formatCommandRange(t.rangeM)}` : "", eligible ? "" : ` · ${t.eligibilityText}`] }, t.persistentId));
-                            }) }), document.body), commandState &&
+                            }) }), menuPortalRoot()), commandState &&
                         !outOfFlight &&
                         (_jsxs(_Fragment, { children: [commandState.blank && _jsx(CommandBlank, { reason: commandState.blank }), commandState.waitingForTarget && !commandState.blank && !isDestroyed && waitingForTargetLabel && (_jsx(WaitingBadge, { role: "status", children: waitingForTargetLabel })), targetBracketsAvailable && bracketsOn && (_jsx(LiveCommandBrackets, { flightId: commandCamera?.flightId ?? null, state: commandState, displayUt: commandDisplayUt?.ut ?? commandTrack.ut, utSource: commandDisplayUt?.source ?? null, video: videoEl, fallbackSize: camera ? { width: camera.renderWidth, height: camera.renderHeight } : null, overlay: targetBracketOverlay }))] })), waitingForSlot && !outOfFlight && !isDestroyed && noSlotLabel && (_jsx(NoSlotNotice, { role: "status", children: noSlotLabel })), drawsAnchors && !outOfFlight && !isDestroyed && !commandState?.blank && (_jsx(LiveAnchorMarkers, { flightId: flightId, video: videoEl, overlay: anchorOverlay })), outOfFlight ? (showStandbyIcon && (_jsx(StandbyOverlay, { role: "status", "aria-label": "Standby, no active flight", children: _jsx(StandbyIconWrap, { children: _jsx(StandbyIcon, { size: 40 }) }) }))) : (isDestroyed && (_jsx(SignalLostOverlay, { role: "status", "aria-label": "Signal lost", children: _jsx(SignalLostText, { "$animated": effectiveShowStatic, children: "SIGNAL LOST" }) }))), !outOfFlight && !effectiveShowStatic && isStale && !isDestroyed && (_jsxs(_Fragment, { children: [_jsx(StaleScrim, { "aria-hidden": "true" }), _jsxs(StaleBadge, { role: "status", "aria-label": "Feed stale", children: [_jsx(StaleIcon, {}), "Stale"] })] })), recordingActive && armingActive && (_jsxs(ArmingBadge, { role: "status", "aria-label": "Arming", children: [_jsx(ArmingDot, { "aria-hidden": "true" }), "ARMING"] })), recordingActive && !armingActive && !savingActive && (_jsxs(RecBadge, { role: "status", "aria-label": "Recording", children: [_jsx(RecDot, { "aria-hidden": "true" }), "REC ", formatElapsed(recordingElapsedMs)] })), recordingActive && savingActive && (_jsx(RecBadge, { role: "status", "aria-label": "Saving recording", children: "SAVING" })), showZoom && (_jsxs(ZoomControlsWrap, { "$disabled": manualDisabled, "aria-hidden": manualDisabled, children: [_jsx(ZoomButton, { type: "button", "aria-label": "Zoom in", "$pos": "top", disabled: manualDisabled, onPointerDown: () => controllerRef.current?.setZoomRate(1), onPointerUp: () => controllerRef.current?.setZoomRate(0), onPointerLeave: () => controllerRef.current?.setZoomRate(0), onPointerCancel: () => controllerRef.current?.setZoomRate(0), onClick: (e) => {
                                     if (e.detail === 0)
@@ -1033,8 +1080,9 @@ const StepButtons = styled.div `
   flex-shrink: 0;
 `;
 const CameraMenu = styled.div `
-  /* Portaled to document.body: fixed position (set inline from the trigger
-     rect) keeps it clear of the tile's overflow clipping. */
+  /* Portaled to document.body (the fullscreen element while fullscreen):
+     fixed position (set inline from the trigger rect) keeps it clear of the
+     tile's overflow clipping. */
   position: fixed;
   z-index: 1000;
   max-width: min(260px, calc(100vw - 16px));
@@ -1090,7 +1138,7 @@ const TopMeta = styled.div `
   color: rgba(255, 255, 255, 0.78);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
 `;
-/* The quality picker: portaled to document.body like CameraMenu, hung from
+/* The quality picker: portaled like CameraMenu, hung from
    its action-bar trigger (fixed position set inline from the trigger rect)
    so tile clipping cannot cut it off and it survives the hover-revealed
    chrome fading while the pointer is over the menu. */
@@ -1307,6 +1355,30 @@ const Stage = styled(Panel) `
         opacity: 1;
       }
     `}
+
+  /* Fullscreen has no hover on touch and may have no pointer at all, so the
+     exit button stays visible in its usual slot while the rest of the bar
+     keeps its hover/focus/tap reveal. */
+  ${(p) => p.$fullscreen &&
+    !p.$pinned &&
+    css `
+      ${ActionBarRow} {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      ${ActionBarRow} > * {
+        transition: opacity 0.15s;
+      }
+      &:not(:hover):not(:focus-within) ${ActionBarRow} > :not([data-kc-fullscreen-exit]) {
+        opacity: 0;
+        pointer-events: none;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        ${ActionBarRow} > * {
+          transition: none;
+        }
+      }
+    `}
 `;
 const Empty = styled.div `
   color: #888;

package/dist/FeedActionBar.d.ts

@@ -68,6 +68,7 @@ export interface FeedAction {
 }
 interface Partitionable {
     stateful?: boolean;
+    inline?: boolean;
     order?: number;
     pinnedTrailing?: boolean;
 }
@@ -97,6 +98,12 @@ export interface FeedActionBarEntry {
     id: string;
     label: string;
     stateful?: boolean;
+    /**
+     * Keeps a non-stateful entry out of the ⋮ menu without changing the split:
+     * it still counts as non-stateful toward the overflow threshold, so the
+     * rest of the bar lays out exactly as it would without the flag.
+     */
+    inline?: boolean;
     order?: number;
     pinnedTrailing?: boolean;
     render: () => React.ReactNode;

package/dist/FeedActionBar.js

@@ -29,7 +29,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useId } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
-import { usePortalMenu } from "./menuPositioning";
+import { menuPortalRoot, usePortalMenu } from "./menuPositioning";
 // ---------------------------------------------------------------------------
 // Partition logic (pure, unit-tested independently of any rendering)
 // ---------------------------------------------------------------------------
@@ -56,8 +56,8 @@ export function partitionActionBarEntries(entries) {
         return { primary: overflowable, overflow: [], pinnedTrailing };
     }
     return {
-        primary: overflowable.filter((e) => e.stateful),
-        overflow: nonStateful,
+        primary: overflowable.filter((e) => e.stateful || e.inline),
+        overflow: nonStateful.filter((e) => !e.inline),
         pinnedTrailing,
     };
 }
@@ -108,7 +108,7 @@ export function FeedActionBar({ leading, entries, className }) {
                     // the entry's own button click handler, so this closes the
                     // menu once the action has actually fired rather than
                     // pre-empting it.
-                    _jsxs(OverflowMenuItem, { onClick: closeOverflowMenu, children: [e.render(), _jsx(OverflowMenuItemLabel, { "aria-hidden": "true", children: e.label })] }, e.id))) }), document.body), pinnedTrailing.map((e) => (_jsx(Fragment, { children: e.render() }, e.id)))] }));
+                    _jsxs(OverflowMenuItem, { onClick: closeOverflowMenu, children: [e.render(), _jsx(OverflowMenuItemLabel, { "aria-hidden": "true", children: e.label })] }, e.id))) }), menuPortalRoot()), pinnedTrailing.map((e) => (_jsx(Fragment, { children: e.render() }, e.id)))] }));
 }
 // ---------------------------------------------------------------------------
 // Icons

package/dist/menuPositioning.d.ts

@@ -1,6 +1,6 @@
 /**
- * Shared geometry + behaviour for a dropdown portaled to document.body.
- * Used by CameraFeed's camera / quality / tracking menus and by
+ * Shared geometry + behaviour for a portaled dropdown (document.body, or the
+ * fullscreen element while one is fullscreen). Used by CameraFeed's camera / quality / tracking menus and by
  * FeedActionBar's overflow menu, so the anchoring, dismissal, and Escape
  * handling live in exactly one place.
  */
@@ -10,6 +10,12 @@ export interface MenuAnchor {
     align: "start" | "end";
 }
 export declare function computeMenuPosition(trigger: HTMLElement, anchor: MenuAnchor): React.CSSProperties;
+/**
+ * Where a dropdown portals to. Only the fullscreen element and its
+ * descendants render while something is fullscreen, so a menu portaled to
+ * document.body then would open invisibly behind it.
+ */
+export declare function menuPortalRoot(): Element;
 export declare function usePortalMenu({ maxWidth, maxHeight, align }: MenuAnchor): {
     open: boolean;
     toggle: () => void;

package/dist/menuPositioning.js

@@ -1,6 +1,6 @@
 /**
- * Shared geometry + behaviour for a dropdown portaled to document.body.
- * Used by CameraFeed's camera / quality / tracking menus and by
+ * Shared geometry + behaviour for a portaled dropdown (document.body, or the
+ * fullscreen element while one is fullscreen). Used by CameraFeed's camera / quality / tracking menus and by
  * FeedActionBar's overflow menu, so the anchoring, dismissal, and Escape
  * handling live in exactly one place.
  */
@@ -32,8 +32,18 @@ export function computeMenuPosition(trigger, anchor) {
     const top = Math.min(rect.bottom + MENU_GAP, Math.max(MENU_EDGE, vh - MENU_EDGE - menuH));
     return { ...inline, top };
 }
+/**
+ * Where a dropdown portals to. Only the fullscreen element and its
+ * descendants render while something is fullscreen, so a menu portaled to
+ * document.body then would open invisibly behind it.
+ */
+export function menuPortalRoot() {
+    const d = document;
+    return d.fullscreenElement ?? d.webkitFullscreenElement ?? document.body;
+}
 /*
- * Shared behaviour for a dropdown portaled to document.body: fixed position
+ * Shared behaviour for a dropdown portaled to document.body (or the
+ * fullscreen element, see menuPortalRoot): fixed position
  * computed from the trigger's rect (so tile overflow cannot clip it),
  * re-anchored on window resize/scroll while open, Escape to close with focus
  * returned to the trigger, and portal-aware outside-pointer-down dismissal
@@ -68,24 +78,39 @@ export function usePortalMenu({ maxWidth, maxHeight, align }) {
     useEffect(() => {
         if (!open)
             return;
+        /* Capture phase and preventDefault so document-level Escape handlers
+           registered earlier (CameraFeed's exit-fullscreen key) see the press
+           as already consumed by the menu. */
         const onKeyDown = (e) => {
             if (e.key === "Escape") {
+                e.preventDefault();
                 e.stopPropagation();
                 setOpen(false);
                 triggerRef.current?.focus();
             }
         };
+        /* The portal root changes with fullscreen and no resize may fire (kiosk,
+           F11), so a menu left open would remount elsewhere with stale
+           coordinates. */
+        const onFullscreenChange = () => {
+            setOpen(false);
+            triggerRef.current?.focus();
+        };
         const onPointerDown = (e) => {
             if (!menuRef.current?.contains(e.target) &&
                 !triggerRef.current?.contains(e.target)) {
                 setOpen(false);
             }
         };
-        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("keydown", onKeyDown, true);
         document.addEventListener("pointerdown", onPointerDown);
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        document.addEventListener("webkitfullscreenchange", onFullscreenChange);
         return () => {
-            document.removeEventListener("keydown", onKeyDown);
+            document.removeEventListener("keydown", onKeyDown, true);
             document.removeEventListener("pointerdown", onPointerDown);
+            document.removeEventListener("fullscreenchange", onFullscreenChange);
+            document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
         };
     }, [open]);
     const toggle = useCallback(() => setOpen((v) => !v), []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ksp-gonogo/kerbcast-react",
-  "version": "1.12.0-rc.1",
+  "version": "1.12.0-rc.2",
   "description": "React components and hooks for kerbcast camera feeds.",
   "license": "MIT",
   "author": "Jon Pepler",
@@ -45,7 +45,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ksp-gonogo/kerbcast": "^1.12.0-rc.1"
+    "@ksp-gonogo/kerbcast": "^1.12.0-rc.2"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/CameraFeed.test.tsx

@@ -998,6 +998,107 @@ describe("CameraFeed - stall presentation (showStatic)", () => {
     }
   });
 
+  it("data-kc-signal follows a feed into and out of a stall without remounting its video", async () => {
+    const env = installStallEnv();
+    try {
+      const { client, sidecar } = await buildConnectedSource();
+      const { container } = renderFeed(client, { flightId: 42 });
+      const signal = () => container.querySelector("[data-kc-signal]")?.getAttribute("data-kc-signal");
+      expect(signal()).toBe("none");
+
+      await act(async () => {
+        sidecar.deliverTrack(sidecar.slotMidFor(42) as string, {} as MediaStreamTrack);
+      });
+      env.setNow(1000);
+      await act(async () => {
+        env.fireFrame();
+        env.drawOnce();
+      });
+      expect(signal()).toBe("live");
+      const video = container.querySelector("video");
+
+      env.setNow(1601);
+      await act(async () => {
+        env.drawOnce();
+      });
+      expect(signal()).toBe("stalled");
+      expect(container.querySelector("video")).toBe(video);
+
+      await act(async () => {
+        env.fireFrame();
+        env.drawOnce();
+      });
+      expect(signal()).toBe("live");
+      expect(container.querySelector("video")).toBe(video);
+    } finally {
+      env.restore();
+    }
+  });
+
+  it("data-kc-signal reads stalled for a source that never delivers a frame", async () => {
+    const env = installStallEnv();
+    try {
+      const { client, sidecar } = await buildConnectedSource();
+      const { container } = renderFeed(client, { flightId: 42 });
+      const signal = () => container.querySelector("[data-kc-signal]")?.getAttribute("data-kc-signal");
+
+      env.setNow(1000);
+      await act(async () => {
+        sidecar.deliverTrack(sidecar.slotMidFor(42) as string, {} as MediaStreamTrack);
+        env.drawOnce();
+      });
+      env.setNow(1601);
+      await act(async () => {
+        env.drawOnce();
+      });
+      expect(signal()).toBe("stalled");
+    } finally {
+      env.restore();
+    }
+  });
+
+  it("data-kc-signal reads stalled after a camera switch until the new camera's first frame", async () => {
+    const env = installStallEnv();
+    try {
+      const { client, sidecar } = await buildConnectedSource([
+        makeCamera({ flightId: 42, cameraName: "Starboard Cam" }),
+        makeCamera({ flightId: 43, cameraName: "Port Cam" }),
+      ]);
+      const view = renderFeed(client, { flightId: 42 });
+      const signal = () => view.container.querySelector("[data-kc-signal]")?.getAttribute("data-kc-signal");
+      await act(async () => {
+        sidecar.deliverTrack(sidecar.slotMidFor(42) as string, {} as MediaStreamTrack);
+      });
+      env.setNow(1000);
+      await act(async () => {
+        env.fireFrame();
+        env.drawOnce();
+      });
+      expect(signal()).toBe("live");
+
+      /* The freed slot passes straight to the new camera, so there is a
+         source at once but no frame of it yet. */
+      view.rerender(
+        <KerbcastProvider client={client}>
+          <CameraFeed flightId={43} />
+        </KerbcastProvider>,
+      );
+      env.setNow(1601);
+      await act(async () => {
+        env.drawOnce();
+      });
+      expect(signal()).toBe("stalled");
+
+      await act(async () => {
+        env.fireFrame();
+        env.drawOnce();
+      });
+      expect(signal()).toBe("live");
+    } finally {
+      env.restore();
+    }
+  });
+
   it("SIGNAL LOST supersedes the stale badge when the camera is destroyed", async () => {
     const env = installStallEnv();
     try {
@@ -3230,3 +3331,366 @@ describe("CameraFeed - anchors", () => {
     warn.mockRestore();
   });
 });
+
+describe("CameraFeed - fullscreen exit without a mouse", () => {
+  type FsDoc = Document & {
+    fullscreenEnabled?: boolean;
+    fullscreenElement?: Element | null;
+    exitFullscreen?: () => Promise<void>;
+  };
+  const fsDoc = document as FsDoc;
+  let fsElement: Element | null = null;
+  const exitSpy = vi.fn(async () => {
+    fsElement = null;
+    document.dispatchEvent(new Event("fullscreenchange"));
+  });
+
+  beforeEach(() => {
+    fsElement = null;
+    exitSpy.mockClear();
+    Object.defineProperty(fsDoc, "fullscreenEnabled", { value: true, configurable: true });
+    Object.defineProperty(fsDoc, "fullscreenElement", {
+      get: () => fsElement,
+      configurable: true,
+    });
+    Object.defineProperty(fsDoc, "exitFullscreen", { value: exitSpy, configurable: true });
+    Object.defineProperty(HTMLElement.prototype, "requestFullscreen", {
+      value: async function (this: HTMLElement) {
+        fsElement = this;
+        document.dispatchEvent(new Event("fullscreenchange"));
+      },
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    delete (fsDoc as { fullscreenEnabled?: boolean }).fullscreenEnabled;
+    delete (fsDoc as { fullscreenElement?: Element | null }).fullscreenElement;
+    delete (fsDoc as { exitFullscreen?: unknown }).exitFullscreen;
+    delete (HTMLElement.prototype as { requestFullscreen?: unknown }).requestFullscreen;
+    delete (document as { pictureInPictureEnabled?: boolean }).pictureInPictureEnabled;
+  });
+
+  async function enterFullscreen() {
+    const pipDoc = document as Document & { pictureInPictureEnabled?: boolean };
+    Object.defineProperty(pipDoc, "pictureInPictureEnabled", { value: true, configurable: true });
+    const { client } = await buildConnectedSource([
+      makeCamera({
+        flightId: 42,
+        cameraName: "Launchpad Cam",
+        supportsPan: true,
+        supportsZoom: true,
+        panPitchMin: -90,
+        panPitchMax: 90,
+      }),
+    ]);
+    /* Crowded enough (REC + tracking + PiP + fullscreen) that fullscreen
+       starts out in the ⋮ overflow. */
+    const utils = renderFeed(client, {
+      flightId: 42,
+      enableRecording: true,
+      enableTracking: true,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+    });
+    fireEvent.click(utils.getByLabelText("More actions"));
+    await act(async () => {
+      fireEvent.click(utils.getByLabelText("Enter fullscreen"));
+    });
+    return utils;
+  }
+
+  it("keeps the exit inline and marked as the always-visible control", async () => {
+    const { getByLabelText } = await enterFullscreen();
+    const exit = getByLabelText("Exit fullscreen");
+    expect(exit.hasAttribute("data-kc-fullscreen-exit")).toBe(true);
+    expect(exit.closest("[role=menu]")).toBeNull();
+    expect(exit.closest("[data-fullscreen]")).toBe(fsElement);
+    expect(exit.tabIndex).toBe(0);
+    /* The ⋮ menu hands focus back to its trigger, which reveals the whole
+       bar by focus-within; at rest only the exit shows. */
+    (document.activeElement as HTMLElement | null)?.blur();
+    expect(getComputedStyle(exit).opacity).not.toBe("0");
+    expect(getComputedStyle(exit).pointerEvents).not.toBe("none");
+    expect(getComputedStyle(getByLabelText("Auto-track")).opacity).toBe("0");
+
+    await act(async () => {
+      fireEvent.click(exit);
+    });
+    expect(exitSpy).toHaveBeenCalledTimes(1);
+    expect(document.querySelector("[data-kc-fullscreen-exit]")).toBeNull();
+    expect(document.querySelector("[data-fullscreen]")).toBeNull();
+  });
+
+  it("entering fullscreen adds the exit without moving the rest of the bar", async () => {
+    const barLabels = () => {
+      const row = screen.getByLabelText("More actions").parentElement as HTMLElement;
+      return Array.from(row.children).map((c) => c.getAttribute("aria-label") ?? "steps");
+    };
+    const pipDoc = document as Document & { pictureInPictureEnabled?: boolean };
+    Object.defineProperty(pipDoc, "pictureInPictureEnabled", { value: true, configurable: true });
+    const { client } = await buildConnectedSource([
+      makeCamera({
+        flightId: 42,
+        cameraName: "Launchpad Cam",
+        supportsPan: true,
+        supportsZoom: true,
+        panPitchMin: -90,
+        panPitchMax: 90,
+      }),
+    ]);
+    const { getByLabelText } = renderFeed(client, {
+      flightId: 42,
+      enableRecording: true,
+      enableTracking: true,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+      trailingActions: [{ id: "x", label: "Close", icon: null, onClick: () => {} }],
+    });
+    const before = barLabels();
+    expect(before).toContain("More actions");
+    expect(before).not.toContain("Picture in picture");
+
+    fireEvent.click(getByLabelText("More actions"));
+    await act(async () => {
+      fireEvent.click(getByLabelText("Enter fullscreen"));
+    });
+    const after = barLabels();
+    expect(after.filter((l) => l !== "Exit fullscreen")).toEqual(before);
+    expect(after.indexOf("Exit fullscreen")).toBe(after.indexOf("More actions") - 1);
+  });
+
+  it("leaves an Escape another handler already consumed alone", async () => {
+    await enterFullscreen();
+    const consumed = new KeyboardEvent("keydown", { key: "Escape", cancelable: true });
+    consumed.preventDefault();
+    await act(async () => {
+      document.dispatchEvent(consumed);
+    });
+    expect(exitSpy).not.toHaveBeenCalled();
+  });
+
+  it("a tap on the video reveals the rest of the bar", async () => {
+    const { getByLabelText } = await enterFullscreen();
+    (document.activeElement as HTMLElement | null)?.blur();
+    expect(getComputedStyle(getByLabelText("Auto-track")).opacity).toBe("0");
+    const video = document.querySelector("video") as HTMLVideoElement;
+    fireEvent.click(video);
+    expect(getComputedStyle(getByLabelText("Auto-track")).opacity).not.toBe("0");
+  });
+
+  it("Escape leaves fullscreen", async () => {
+    const { queryByLabelText } = await enterFullscreen();
+    await act(async () => {
+      fireEvent.keyDown(document, { key: "Escape" });
+    });
+    expect(exitSpy).toHaveBeenCalledTimes(1);
+    expect(queryByLabelText("Exit fullscreen")).toBeNull();
+  });
+});
+
+describe("CameraFeed - video source on camera switch", () => {
+  const TWO_CAMERAS = [
+    makeCamera({ flightId: 42, cameraName: "Starboard Cam" }),
+    makeCamera({ flightId: 43, cameraName: "Nose Cam" }),
+  ];
+
+  it("clears the previous frame when the new camera has no stream yet", async () => {
+    const { client } = await buildConnectedSource(TWO_CAMERAS);
+    const sentinel = {} as MediaStream;
+    const useCustom: CameraStreamHook = (id) => (id === 42 ? sentinel : null);
+    const view = (flightId: number) => (
+      <KerbcastProvider client={client}>
+        <CameraFeed flightId={flightId} useStream={useCustom} />
+      </KerbcastProvider>
+    );
+    const { rerender } = render(view(42));
+    const video = document.querySelector("video") as HTMLVideoElement;
+    expect(video.srcObject).toBe(sentinel);
+
+    rerender(view(43));
+    expect(document.querySelector("video")).toBe(video);
+    expect(video.srcObject).toBeNull();
+  });
+
+  it("keeps the element bound when a rebind wraps the same track in a new stream", async () => {
+    const { client } = await buildConnectedSource(TWO_CAMERAS);
+    const track = { id: "track-1", kind: "video" } as MediaStreamTrack;
+    const wrap = () =>
+      ({ getVideoTracks: () => [track] }) as unknown as MediaStream;
+    const first = wrap();
+    const second = wrap();
+    const view = (stream: MediaStream) => {
+      const useFixed: CameraStreamHook = () => stream;
+      return (
+        <KerbcastProvider client={client}>
+          <CameraFeed flightId={42} useStream={useFixed} />
+        </KerbcastProvider>
+      );
+    };
+    const { rerender } = render(view(first));
+    const video = document.querySelector("video") as HTMLVideoElement;
+    expect(video.srcObject).toBe(first);
+
+    rerender(view(second));
+    expect(video.srcObject).toBe(first);
+
+    const other = { getVideoTracks: () => [{ id: "track-2" }] } as unknown as MediaStream;
+    rerender(view(other));
+    expect(video.srcObject).toBe(other);
+  });
+
+  it("never reassigns a live stream on a re-render", async () => {
+    const { client } = await buildConnectedSource(TWO_CAMERAS);
+    const sentinel = {} as MediaStream;
+    const useCustom: CameraStreamHook = () => sentinel;
+    const view = (debug: boolean) => (
+      <KerbcastProvider client={client}>
+        <CameraFeed flightId={42} useStream={useCustom} showDebugInfo={debug} />
+      </KerbcastProvider>
+    );
+    const { rerender } = render(view(false));
+    const video = document.querySelector("video") as HTMLVideoElement;
+    expect(video.srcObject).toBe(sentinel);
+
+    let current: MediaProvider | null = sentinel;
+    const sets: (MediaProvider | null)[] = [];
+    Object.defineProperty(video, "srcObject", {
+      get: () => current,
+      set: (v: MediaProvider | null) => {
+        sets.push(v);
+        current = v;
+      },
+      configurable: true,
+    });
+    rerender(view(true));
+    rerender(view(false));
+    expect(sets).toEqual([]);
+    expect(video.srcObject).toBe(sentinel);
+  });
+});
+
+describe("CameraFeed - menus in fullscreen", () => {
+  type FsDoc = Document & {
+    fullscreenEnabled?: boolean;
+    fullscreenElement?: Element | null;
+    pictureInPictureEnabled?: boolean;
+  };
+  const fsDoc = document as FsDoc;
+  let fsElement: Element | null = null;
+
+  beforeEach(() => {
+    fsElement = null;
+    Object.defineProperty(fsDoc, "fullscreenEnabled", { value: true, configurable: true });
+    Object.defineProperty(fsDoc, "pictureInPictureEnabled", { value: true, configurable: true });
+    Object.defineProperty(fsDoc, "fullscreenElement", {
+      get: () => fsElement,
+      configurable: true,
+    });
+    Object.defineProperty(HTMLElement.prototype, "requestFullscreen", {
+      value: async function (this: HTMLElement) {
+        fsElement = this;
+        document.dispatchEvent(new Event("fullscreenchange"));
+      },
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    delete (fsDoc as { fullscreenEnabled?: boolean }).fullscreenEnabled;
+    delete (fsDoc as { pictureInPictureEnabled?: boolean }).pictureInPictureEnabled;
+    delete (fsDoc as { fullscreenElement?: Element | null }).fullscreenElement;
+    delete (HTMLElement.prototype as { requestFullscreen?: unknown }).requestFullscreen;
+  });
+
+  it("opens the more actions menu inside the fullscreen feed on the first tap", async () => {
+    const { client } = await buildConnectedSource();
+    const { getByLabelText, getByRole } = renderFeed(client, {
+      flightId: 42,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+      actions: [
+        { id: "a", label: "Spotlight", icon: null, onClick: () => {} },
+        { id: "b", label: "Snapshot", icon: null, onClick: () => {} },
+      ],
+      trailingActions: [{ id: "x", label: "Close", icon: null, onClick: () => {} }],
+    });
+    /* Crowded enough that ⋮ stays even once fullscreen pins its exit inline. */
+    fireEvent.click(getByLabelText("More actions"));
+    await act(async () => {
+      fireEvent.click(getByLabelText("Enter fullscreen"));
+    });
+    expect(fsElement).not.toBeNull();
+
+    const trigger = getByLabelText("More actions");
+    fireEvent.pointerDown(trigger);
+    fireEvent.click(trigger);
+    const menu = getByRole("menu", { name: "More actions" });
+    expect(fsElement?.contains(menu)).toBe(true);
+
+    fireEvent.pointerDown(menu);
+    expect(getByRole("menu", { name: "More actions" })).toBe(menu);
+  });
+
+  async function openMenuInFullscreen() {
+    const { client } = await buildConnectedSource();
+    const utils = renderFeed(client, {
+      flightId: 42,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+      actions: [
+        { id: "a", label: "Spotlight", icon: null, onClick: () => {} },
+        { id: "b", label: "Snapshot", icon: null, onClick: () => {} },
+      ],
+    });
+    fireEvent.click(utils.getByLabelText("More actions"));
+    await act(async () => {
+      fireEvent.click(utils.getByLabelText("Enter fullscreen"));
+    });
+    fireEvent.click(utils.getByLabelText("More actions"));
+    expect(utils.getByRole("menu", { name: "More actions" })).toBeTruthy();
+    return utils;
+  }
+
+  it("Escape with a menu open closes the menu and stays fullscreen", async () => {
+    const exitSpy = vi.fn();
+    Object.defineProperty(fsDoc, "exitFullscreen", { value: exitSpy, configurable: true });
+    try {
+      const { queryByRole, getByLabelText, getByRole } = await openMenuInFullscreen();
+      await act(async () => {
+        fireEvent.keyDown(getByRole("button", { name: "More actions" }), { key: "Escape" });
+      });
+      expect(queryByRole("menu", { name: "More actions" })).toBeNull();
+      expect(exitSpy).not.toHaveBeenCalled();
+      expect(document.activeElement).toBe(getByLabelText("More actions"));
+    } finally {
+      delete (fsDoc as { exitFullscreen?: unknown }).exitFullscreen;
+    }
+  });
+
+  it("closes an open menu when fullscreen ends", async () => {
+    const { queryByRole, getByLabelText } = await openMenuInFullscreen();
+    await act(async () => {
+      fsElement = null;
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+    expect(queryByRole("menu", { name: "More actions" })).toBeNull();
+    expect(document.activeElement).toBe(getByLabelText("More actions"));
+  });
+
+  it("still portals menus to the body when not fullscreen", async () => {
+    const { client } = await buildConnectedSource();
+    const { getByLabelText, getByRole } = renderFeed(client, {
+      flightId: 42,
+      enableFullscreen: true,
+      enablePictureInPicture: true,
+      actions: [
+        { id: "a", label: "Spotlight", icon: null, onClick: () => {} },
+        { id: "b", label: "Snapshot", icon: null, onClick: () => {} },
+      ],
+    });
+    fireEvent.click(getByLabelText("More actions"));
+    const menu = getByRole("menu", { name: "More actions" });
+    expect(menu.parentElement).toBe(document.body);
+  });
+});

package/src/CameraFeed.tsx

@@ -45,7 +45,7 @@ import { useTargetBracketsPreference } from "./hooks/useTargetBracketsPreference
 import { StandbyIcon } from "./StandbyIcon";
 import { isCameraDestroyed } from "./lifecycle";
 import { claimAnchors } from "./sharedAnchors";
-import { usePortalMenu } from "./menuPositioning";
+import { menuPortalRoot, usePortalMenu } from "./menuPositioning";
 import { formatElapsed, nowMs } from "./timing";
 
 // ---------------------------------------------------------------------------
@@ -78,6 +78,16 @@ function presetDim(operatorDim: number, scale: number): number {
   return v < 2 ? 2 : v;
 }
 
+function videoTrackId(source: MediaProvider | null): string | undefined {
+  if (!source || !("getVideoTracks" in source)) return undefined;
+  return source.getVideoTracks()[0]?.id;
+}
+
+function sameVideoTrack(a: MediaProvider | null, b: MediaStream | null): boolean {
+  const id = videoTrackId(a);
+  return id !== undefined && id === videoTrackId(b);
+}
+
 /*
  * Fullscreen helpers. Safari (incl. iPadOS) only exposes the webkit-prefixed
  * API; iOS iPhone has no element fullscreen at all, which `isFullscreenSupported`
@@ -520,10 +530,15 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     }, []);
     // The feed frame; fullscreen targets this and ResizeObserver measures it.
     const wrapRef = useRef<HTMLDivElement>(null);
+    /* Clearing to null on a switch to a camera with no stream yet stops the
+       previous camera's last frame lingering. A rebind can hand over a new
+       MediaStream around the same track; reassigning that would reset the
+       element and flash black, so it is skipped. */
     useEffect(() => {
-      if (videoRef.current && stream) {
-        videoRef.current.srcObject = stream;
-      }
+      const video = videoRef.current;
+      if (!video || video.srcObject === stream) return;
+      if (sameVideoTrack(video.srcObject, stream)) return;
+      video.srcObject = stream;
     }, [stream]);
 
     // -------------------------------------------------------------------------
@@ -547,6 +562,20 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
       return cam.on("stall", setIsStale);
     }, [client, flightId]);
 
+    const [hasSource, setHasSource] = useState(false);
+    useEffect(() => {
+      if (flightId === null) {
+        setHasSource(false);
+        return;
+      }
+      const cam = client.camera(flightId);
+      setHasSource(cam.hasSource);
+      return cam.on("source", setHasSource);
+    }, [client, flightId]);
+    /* The in-stream static keeps the video element presenting frames, so a
+       frame count cannot tell a picture from static; this attribute can. */
+    const signal = flightId === null ? undefined : !hasSource ? "none" : isStale ? "stalled" : "live";
+
     // -------------------------------------------------------------------------
     // Fullscreen + Picture-in-Picture (opt-in, feature-detected)
     // -------------------------------------------------------------------------
@@ -588,6 +617,23 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
       };
     }, [pipAvailable, flightId]);
 
+    /* Browsers usually consume Escape to leave fullscreen themselves; this
+       covers hosts and embedded views that hand the key to the page instead. */
+    useEffect(() => {
+      if (!isFullscreen) return;
+      const onKey = (e: KeyboardEvent) => {
+        if (
+          e.key === "Escape" &&
+          !e.defaultPrevented &&
+          currentFullscreenElement() === wrapRef.current
+        ) {
+          exitFullscreen();
+        }
+      };
+      document.addEventListener("keydown", onKey);
+      return () => document.removeEventListener("keydown", onKey);
+    }, [isFullscreen]);
+
     const toggleFullscreen = useCallback(() => {
       const el = wrapRef.current;
       if (!el) return;
@@ -1053,7 +1099,7 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
                 </CameraMenuItem>
               ))}
             </CameraMenu>,
-            document.body,
+            menuPortalRoot(),
           )}
 
         {showDebugInfo &&
@@ -1243,10 +1289,14 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
             {
               id: "fullscreen",
               label: fullscreenLabel,
+              /* While fullscreen the exit stays inline, never in the ⋮ menu,
+                 so it can be the one control the Stage keeps visible. */
               stateful: false,
+              inline: isFullscreen,
               render: () => (
                 <OverlayIconButton
                   type="button"
+                  data-kc-fullscreen-exit={isFullscreen || undefined}
                   aria-label={fullscreenLabel}
                   aria-pressed={isFullscreen}
                   title={fullscreenLabel}
@@ -1327,7 +1377,13 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
 
     return (
       <FeedBox style={feedShape}>
-        <Stage ref={wrapRef} $pinned={chromePinned}>
+        <Stage
+          ref={wrapRef}
+          $pinned={chromePinned}
+          $fullscreen={isFullscreen}
+          data-fullscreen={isFullscreen || undefined}
+          data-kc-signal={signal}
+        >
           {flightId === null ? (
             <>
               <Empty>{emptyMessage}</Empty>
@@ -1385,7 +1441,7 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
                       {qualityThrottled ? " · throttled" : ""}
                     </QualityMeta>
                   </QualityMenu>,
-                  document.body,
+                  menuPortalRoot(),
                 )}
               {trackingAvailable &&
                 trackingMenu.open &&
@@ -1418,7 +1474,7 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
                       Track target
                     </CameraMenuItem>
                   </QualityMenu>,
-                  document.body,
+                  menuPortalRoot(),
                 )}
               {commandTargetAvailable &&
                 commandTargetMenu.open &&
@@ -1452,7 +1508,7 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
                       );
                     })}
                   </CameraMenu>,
-                  document.body,
+                  menuPortalRoot(),
                 )}
               {commandState &&
                 !outOfFlight &&
@@ -2027,8 +2083,9 @@ const StepButtons = styled.div`
 `;
 
 const CameraMenu = styled.div`
-  /* Portaled to document.body: fixed position (set inline from the trigger
-     rect) keeps it clear of the tile's overflow clipping. */
+  /* Portaled to document.body (the fullscreen element while fullscreen):
+     fixed position (set inline from the trigger rect) keeps it clear of the
+     tile's overflow clipping. */
   position: fixed;
   z-index: 1000;
   max-width: min(260px, calc(100vw - 16px));
@@ -2088,7 +2145,7 @@ const TopMeta = styled.div`
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
 `;
 
-/* The quality picker: portaled to document.body like CameraMenu, hung from
+/* The quality picker: portaled like CameraMenu, hung from
    its action-bar trigger (fixed position set inline from the trigger rect)
    so tile clipping cannot cut it off and it survives the hover-revealed
    chrome fading while the pointer is over the menu. */
@@ -2274,7 +2331,7 @@ const FeedBox = styled.div`
   justify-content: center;
 `;
 
-const Stage = styled(Panel)<{ $pinned: boolean }>`
+const Stage = styled(Panel)<{ $pinned: boolean; $fullscreen: boolean }>`
   width: min(100cqw, 100cqh * var(--kc-feed-w) / var(--kc-feed-h));
   height: auto;
   aspect-ratio: var(--kc-feed-w) / var(--kc-feed-h);
@@ -2319,6 +2376,31 @@ const Stage = styled(Panel)<{ $pinned: boolean }>`
         opacity: 1;
       }
     `}
+
+  /* Fullscreen has no hover on touch and may have no pointer at all, so the
+     exit button stays visible in its usual slot while the rest of the bar
+     keeps its hover/focus/tap reveal. */
+  ${(p) =>
+    p.$fullscreen &&
+    !p.$pinned &&
+    css`
+      ${ActionBarRow} {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      ${ActionBarRow} > * {
+        transition: opacity 0.15s;
+      }
+      &:not(:hover):not(:focus-within) ${ActionBarRow} > :not([data-kc-fullscreen-exit]) {
+        opacity: 0;
+        pointer-events: none;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        ${ActionBarRow} > * {
+          transition: none;
+        }
+      }
+    `}
 `;
 
 const Empty = styled.div`

package/src/FeedActionBar.test.ts

@@ -13,6 +13,7 @@ import { partitionActionBarEntries } from "./FeedActionBar";
 interface Entry {
   id: string;
   stateful?: boolean;
+  inline?: boolean;
   order?: number;
   pinnedTrailing?: boolean;
 }
@@ -41,6 +42,27 @@ describe("partitionActionBarEntries", () => {
     expect(ids(overflow)).toEqual(["quality", "pip", "fullscreen"]);
   });
 
+  it("keeps an inline entry out of overflow without changing the split", () => {
+    const base: Entry[] = [
+      { id: "tracking", stateful: true },
+      { id: "quality" },
+      { id: "pip" },
+      { id: "fullscreen" },
+    ];
+    const pinned = base.map((e) => (e.id === "fullscreen" ? { ...e, inline: true } : e));
+    const { primary, overflow } = partitionActionBarEntries(pinned);
+    expect(ids(primary)).toEqual(["tracking", "fullscreen"]);
+    expect(ids(overflow)).toEqual(["quality", "pip"]);
+
+    const twoNonStateful: Entry[] = [
+      { id: "tracking", stateful: true },
+      { id: "rec", stateful: true },
+      { id: "pip" },
+      { id: "fullscreen", inline: true },
+    ];
+    expect(ids(partitionActionBarEntries(twoNonStateful).overflow)).toEqual(["pip"]);
+  });
+
   it("never collapses a single non-stateful item, even with total >= 4", () => {
     const entries: Entry[] = [
       { id: "tracking", stateful: true },

package/src/FeedActionBar.tsx

@@ -29,7 +29,7 @@
 import { Fragment, useId } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
-import { usePortalMenu } from "./menuPositioning";
+import { menuPortalRoot, usePortalMenu } from "./menuPositioning";
 
 /**
  * A consumer-supplied action rendered into a feed's action bar. Lets a host
@@ -82,6 +82,7 @@ const OVERFLOW_MIN_NON_STATEFUL = 2;
 
 interface Partitionable {
   stateful?: boolean;
+  inline?: boolean;
   order?: number;
   pinnedTrailing?: boolean;
 }
@@ -113,8 +114,8 @@ export function partitionActionBarEntries<T extends Partitionable>(
     return { primary: overflowable, overflow: [], pinnedTrailing };
   }
   return {
-    primary: overflowable.filter((e) => e.stateful),
-    overflow: nonStateful,
+    primary: overflowable.filter((e) => e.stateful || e.inline),
+    overflow: nonStateful.filter((e) => !e.inline),
     pinnedTrailing,
   };
 }
@@ -133,6 +134,12 @@ export interface FeedActionBarEntry {
   id: string;
   label: string;
   stateful?: boolean;
+  /**
+   * Keeps a non-stateful entry out of the ⋮ menu without changing the split:
+   * it still counts as non-stateful toward the overflow threshold, so the
+   * rest of the bar lays out exactly as it would without the flag.
+   */
+  inline?: boolean;
   order?: number;
   pinnedTrailing?: boolean;
   render: () => React.ReactNode;
@@ -244,7 +251,7 @@ export function FeedActionBar({ leading, entries, className }: FeedActionBarProp
               </OverflowMenuItem>
             ))}
           </OverflowMenu>,
-          document.body,
+          menuPortalRoot(),
         )}
       {pinnedTrailing.map((e) => (
         <Fragment key={e.id}>{e.render()}</Fragment>

package/src/menuPositioning.ts

@@ -1,6 +1,6 @@
 /**
- * Shared geometry + behaviour for a dropdown portaled to document.body.
- * Used by CameraFeed's camera / quality / tracking menus and by
+ * Shared geometry + behaviour for a portaled dropdown (document.body, or the
+ * fullscreen element while one is fullscreen). Used by CameraFeed's camera / quality / tracking menus and by
  * FeedActionBar's overflow menu, so the anchoring, dismissal, and Escape
  * handling live in exactly one place.
  */
@@ -55,8 +55,19 @@ export function computeMenuPosition(
   return { ...inline, top };
 }
 
+/**
+ * Where a dropdown portals to. Only the fullscreen element and its
+ * descendants render while something is fullscreen, so a menu portaled to
+ * document.body then would open invisibly behind it.
+ */
+export function menuPortalRoot(): Element {
+  const d = document as Document & { webkitFullscreenElement?: Element | null };
+  return d.fullscreenElement ?? d.webkitFullscreenElement ?? document.body;
+}
+
 /*
- * Shared behaviour for a dropdown portaled to document.body: fixed position
+ * Shared behaviour for a dropdown portaled to document.body (or the
+ * fullscreen element, see menuPortalRoot): fixed position
  * computed from the trigger's rect (so tile overflow cannot clip it),
  * re-anchored on window resize/scroll while open, Escape to close with focus
  * returned to the trigger, and portal-aware outside-pointer-down dismissal
@@ -92,13 +103,24 @@ export function usePortalMenu({ maxWidth, maxHeight, align }: MenuAnchor) {
 
   useEffect(() => {
     if (!open) return;
+    /* Capture phase and preventDefault so document-level Escape handlers
+       registered earlier (CameraFeed's exit-fullscreen key) see the press
+       as already consumed by the menu. */
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
+        e.preventDefault();
         e.stopPropagation();
         setOpen(false);
         triggerRef.current?.focus();
       }
     };
+    /* The portal root changes with fullscreen and no resize may fire (kiosk,
+       F11), so a menu left open would remount elsewhere with stale
+       coordinates. */
+    const onFullscreenChange = () => {
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
     const onPointerDown = (e: PointerEvent) => {
       if (
         !menuRef.current?.contains(e.target as Node) &&
@@ -107,11 +129,15 @@ export function usePortalMenu({ maxWidth, maxHeight, align }: MenuAnchor) {
         setOpen(false);
       }
     };
-    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keydown", onKeyDown, true);
     document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    document.addEventListener("webkitfullscreenchange", onFullscreenChange);
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("keydown", onKeyDown, true);
       document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+      document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
     };
   }, [open]);