@ksp-gonogo/kerbcast-react 1.6.3 → 1.8.0

package/dist/CameraFeed.js

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PanZoomController, QualityPreset } from "@ksp-gonogo/kerbcast";
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { PanZoomController, QualityPreset, TrackMode } from "@ksp-gonogo/kerbcast";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useReducer, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import styled, { css } from "styled-components";
 import { buildCameraLabeler } from "./cameraLabels";
 import { KerbcastProvider, useKerbcastClient } from "./context";
+import { ActionBarRow, FeedActionBar, OverlayIconButton, feedActionToEntry, } from "./FeedActionBar";
 import { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 import { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
 import { useKerbcastStream } from "./hooks/useKerbcastStream";
+import { useRecordings } from "./hooks/useRecordings";
+import { useReportDisplaySize } from "./hooks/useReportDisplaySize";
 import { StandbyIcon } from "./StandbyIcon";
 import { isCameraDestroyed } from "./lifecycle";
+import { usePortalMenu } from "./menuPositioning";
+import { formatElapsed, nowMs } from "./timing";
 // ---------------------------------------------------------------------------
 // Tuning constants
 // ---------------------------------------------------------------------------
@@ -18,101 +23,6 @@ const MENU_MAX_WIDTH = 260; // matches CameraMenu's CSS cap
 const MENU_MAX_HEIGHT = 300; // matches CameraMenu's min(40vh, 300px) cap
 const QUALITY_MENU_MAX_WIDTH = 220; // matches QualityMenu's CSS cap
 const QUALITY_MENU_MAX_HEIGHT = 220; // matches QualityMenu's min(40vh, 220px) cap
-const MENU_GAP = 4; // trigger-to-menu spacing
-const MENU_EDGE = 8; // minimum inset from the viewport edge
-/*
- * Fixed-position style for a portaled menu, anchored to its trigger button.
- * Opens downward by default; flips above the trigger when there is not
- * enough room below but there is above, otherwise clamps to the viewport.
- */
-function computeMenuPosition(trigger, anchor) {
-    const rect = trigger.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const width = Math.min(anchor.maxWidth, vw - 2 * MENU_EDGE);
-    /* Inline offset from the aligned viewport edge, clamped so a full-width
-       menu still fits inside the opposite edge. */
-    const inset = Math.max(MENU_EDGE, vw - width - MENU_EDGE);
-    const inline = anchor.align === "start"
-        ? { left: Math.min(Math.max(rect.left, MENU_EDGE), inset) }
-        : { right: Math.min(Math.max(vw - rect.right, MENU_EDGE), inset) };
-    const menuH = Math.min(0.4 * vh, anchor.maxHeight);
-    const fitsBelow = rect.bottom + MENU_GAP + menuH <= vh - MENU_EDGE;
-    const fitsAbove = rect.top - MENU_GAP - menuH >= MENU_EDGE;
-    if (!fitsBelow && fitsAbove) {
-        return { ...inline, bottom: vh - rect.top + MENU_GAP };
-    }
-    const top = Math.min(rect.bottom + MENU_GAP, Math.max(MENU_EDGE, vh - MENU_EDGE - menuH));
-    return { ...inline, top };
-}
-/*
- * Shared behaviour for a dropdown portaled to document.body: 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
- * (menuRef points at the portaled menu, so clicks inside it stay "inside").
- * One menu at a time falls out of the dismissal: opening another menu's
- * trigger is an outside press for this one.
- */
-function usePortalMenu({ maxWidth, maxHeight, align }) {
-    const [open, setOpen] = useState(false);
-    const [position, setPosition] = useState(null);
-    const menuRef = useRef(null);
-    const triggerRef = useRef(null);
-    useEffect(() => {
-        if (!open) {
-            setPosition(null);
-            return;
-        }
-        const update = () => {
-            const trigger = triggerRef.current;
-            if (trigger) {
-                setPosition(computeMenuPosition(trigger, { maxWidth, maxHeight, align }));
-            }
-        };
-        update();
-        window.addEventListener("resize", update);
-        window.addEventListener("scroll", update, true);
-        return () => {
-            window.removeEventListener("resize", update);
-            window.removeEventListener("scroll", update, true);
-        };
-    }, [open, maxWidth, maxHeight, align]);
-    useEffect(() => {
-        if (!open)
-            return;
-        const onKeyDown = (e) => {
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                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("pointerdown", onPointerDown);
-        return () => {
-            document.removeEventListener("keydown", onKeyDown);
-            document.removeEventListener("pointerdown", onPointerDown);
-        };
-    }, [open]);
-    const toggle = useCallback(() => setOpen((v) => !v), []);
-    /** Close after an item pick, returning focus to the trigger. */
-    const close = useCallback(() => {
-        setOpen(false);
-        triggerRef.current?.focus();
-    }, []);
-    return { open, toggle, close, position, menuRef, triggerRef };
-}
-/** Round n to the nearest even integer, minimum 2 (H.264 chroma requirement). */
-function toEvenPx(n) {
-    return Math.max(2, Math.round(n / 2) * 2);
-}
 /*
  * Viewer quality presets, in menu order. Scales mirror the sidecar's
  * QualityPreset mapping (fractions of the camera's operator render size);
@@ -149,9 +59,17 @@ function exitFullscreen() {
 // ---------------------------------------------------------------------------
 // Inner component (reads from context)
 // ---------------------------------------------------------------------------
-const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requestedFlightId, onSelectCamera, onDisplayedCameraChange, showDebugInfo = false, showStatic, inFlight: inFlightProp, showStandbyIcon = true, renderSize = "auto", emptyMessage = "No camera feeds - start a vessel with Hullcam parts installed", enableFullscreen = false, enablePictureInPicture = false, enableQualityControl = false, actions, trailingActions, useStream, }, ref) {
+const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requestedFlightId, onSelectCamera, cameraFilter, onDisplayedCameraChange, showDebugInfo = false, showStatic, inFlight: inFlightProp, showStandbyIcon = true, renderSize = "auto", emptyMessage = "No camera feeds - start a vessel with Hullcam parts installed", enableFullscreen = false, enablePictureInPicture = false, enableQualityControl = false, enableTracking = false, enableRecording = false, recordFullResolution = false, actions, trailingActions, showActions = true, useStream, }, ref) {
     const client = useKerbcastClient();
-    const cameras = useKerbcastCameras();
+    // Always called (rules of hooks); `enableRecording` only gates whether the
+    // REC entry/badge render, not whether the store is subscribed.
+    const recordings = useRecordings();
+    // The selectable set: every live camera, optionally narrowed by the host's
+    // cameraFilter (e.g. a part-grid tile offering only part cams). Drives the
+    // picker menu, the stepper, and the auto-latch fallback so none can land on
+    // a filtered-out camera.
+    const allCameras = useKerbcastCameras();
+    const cameras = useMemo(() => (cameraFilter ? allCameras.filter(cameraFilter) : allCameras), [allCameras, cameraFilter]);
     const inFlightFromClient = useKerbcastInFlight();
     const inFlight = inFlightProp ?? inFlightFromClient;
     const outOfFlight = inFlight === false;
@@ -316,6 +234,13 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     const isDestroyed = camera ? isCameraDestroyed(camera) : false;
     const showPan = camera?.supportsPan && !isDestroyed;
     const showZoom = camera?.supportsZoom && !isDestroyed;
+    // Auto-track state is server-authoritative: driven purely by the published
+    // trackMode (absent -> none), never local click. While tracking, the aim
+    // loop owns the gimbal + FoV, so the manual pan/zoom controls are disabled
+    // (they jitter against the track and are no-ops in practice).
+    const trackMode = camera?.trackMode ?? TrackMode.None;
+    const tracking = trackMode !== TrackMode.None;
+    const manualDisabled = tracking;
     const supportsPitch = !!camera && camera.panPitchMax - camera.panPitchMin > 0;
     // -------------------------------------------------------------------------
     // Camera selection callbacks (Next/Prev, picker)
@@ -334,7 +259,7 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
             onSelectCamera?.(nextId);
     }, [cameras, currentIndex, onSelectCamera]);
     // -------------------------------------------------------------------------
-    // PanZoomController -- one per displayed camera
+    // PanZoomController: one per displayed camera
     // -------------------------------------------------------------------------
     const controllerRef = useRef(null);
     const [sliderFov, setSliderFov] = useState(60);
@@ -349,8 +274,8 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
         controllerRef.current?.dispose();
         controllerRef.current = ctrl;
         const unsubSlider = ctrl.onSliderFov(setSliderFov);
-        // Seed the slider from the controller's initial (0) -- will be overwritten
-        // immediately by syncFromState in the camera-state effect below.
+        // Seed the slider from the controller's initial (0). It will be
+        // overwritten immediately by syncFromState in the camera-state effect below.
         setSliderFov(ctrl.sliderFov);
         return () => {
             unsubSlider();
@@ -441,36 +366,12 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
         },
     }), [stepCamera, showZoom, showPan, supportsPitch]);
     // -------------------------------------------------------------------------
-    // Render-size feedback (ResizeObserver, 500 ms debounce, 16:9 crop)
+    // Display-size reporting (auto-resolution). The feed self-measures its
+    // rendered box and reports it per-consumer; the sidecar maxes across
+    // consumers. Reports the real w x h (part cams are not square). Disabled by
+    // `renderSize="none"`. See useReportDisplaySize for debounce / bucketing.
     // -------------------------------------------------------------------------
-    const resizeTimerRef = useRef(null);
-    useEffect(() => {
-        if (renderSize !== "auto" || flightId === null)
-            return;
-        const el = wrapRef.current;
-        if (!el)
-            return;
-        const cam = client.camera(flightId);
-        const observer = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (!entry)
-                return;
-            const { width } = entry.contentRect;
-            if (resizeTimerRef.current !== null)
-                clearTimeout(resizeTimerRef.current);
-            resizeTimerRef.current = setTimeout(() => {
-                const w = toEvenPx(width);
-                const h = toEvenPx((width * 9) / 16);
-                void cam.setRenderSize(w, h);
-            }, 500);
-        });
-        observer.observe(el);
-        return () => {
-            observer.disconnect();
-            if (resizeTimerRef.current !== null)
-                clearTimeout(resizeTimerRef.current);
-        };
-    }, [client, flightId, renderSize]);
+    useReportDisplaySize(flightId, wrapRef, { enabled: renderSize === "auto" });
     // -------------------------------------------------------------------------
     // UI state
     // -------------------------------------------------------------------------
@@ -512,7 +413,81 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
         void client.camera(flightId).setQuality(preset);
         closeQualityMenu();
     }, [client, flightId, closeQualityMenu]);
-    const topOverlay = (_jsxs(TopOverlay, { children: [_jsx(TitleRow, { children: _jsx(TopTitle, { children: hasCameras ? (_jsxs(TitleButton, { ref: cameraMenu.triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": cameraMenu.open, "aria-controls": menuId, onClick: cameraMenu.toggle, children: [_jsx(TitleButton__Text, { children: title }), _jsx(ChevronDownIcon, { "aria-hidden": "true" })] })) : (title) }) }), cameraMenu.open &&
+    // -------------------------------------------------------------------------
+    // Auto-track control (opt-in, pan+zoom cameras only). A crosshair button +
+    // menu with the two modes. Sends the intent; the highlight follows the
+    // server-published trackMode (above), so two browsers agree.
+    // -------------------------------------------------------------------------
+    const trackingAvailable = enableTracking &&
+        flightId !== null &&
+        camera !== null &&
+        camera.supportsPan === true &&
+        camera.supportsZoom === true &&
+        !isDestroyed;
+    const trackingMenuId = useId();
+    const trackingMenu = usePortalMenu({
+        maxWidth: QUALITY_MENU_MAX_WIDTH,
+        maxHeight: QUALITY_MENU_MAX_HEIGHT,
+        align: "end",
+    });
+    const closeTrackingMenu = trackingMenu.close;
+    const selectTrack = useCallback((mode) => {
+        if (flightId === null)
+            return;
+        // Tri-state: clicking the already-active mode hands aiming back (none).
+        // Decision reads the server-confirmed trackMode, not a local toggle.
+        const next = trackMode === mode ? TrackMode.None : mode;
+        void client.setTrackTarget(flightId, next);
+        closeTrackingMenu();
+    }, [client, flightId, trackMode, closeTrackingMenu]);
+    // -------------------------------------------------------------------------
+    // REC control (opt-in). A stateful toggle that starts/stops a client-side
+    // recording of this feed via the recordings store; state is read from the
+    // store (isRecording), never held locally, so it stays correct if the
+    // recording was started elsewhere (e.g. a REC+ grouped recording).
+    // -------------------------------------------------------------------------
+    const recordingActive = enableRecording && flightId !== null && recordings.isRecording(flightId);
+    const activeRecording = recordingActive
+        ? recordings.active.find((a) => a.flightId === flightId)
+        : undefined;
+    /* True while a single forced recording is armed (force sent, waiting for
+       the feed to reach full resolution) but the recorder has not started
+       yet (see ActiveRecordingInfo.arming). Drives the ARMING pill below in
+       place of the REC badge. */
+    const armingActive = activeRecording?.arming === true;
+    // Ticks once a second while recording so the elapsed timer stays live;
+    // the timer itself is derived from activeRecording.startedAt each render.
+    const [, tickRecordingTimer] = useReducer((c) => c + 1, 0);
+    useEffect(() => {
+        if (!recordingActive)
+            return;
+        const interval = setInterval(tickRecordingTimer, 1000);
+        return () => clearInterval(interval);
+    }, [recordingActive]);
+    const recordingElapsedMs = activeRecording ? nowMs() - activeRecording.startedAt : 0;
+    const toggleRecording = useCallback(() => {
+        if (flightId === null)
+            return;
+        if (recordingActive) {
+            const active = recordings.active.find((a) => a.flightId === flightId);
+            if (active) {
+                void recordings.stop(active.recordingId).catch(() => {
+                    /* A rejected stop shouldn't leave the REC toggle wedged; the
+                       store's own state (active/recordings) is the source of truth
+                       for whether it's still "recording", not this call's outcome. */
+                });
+            }
+            return;
+        }
+        try {
+            recordings.start(flightId, { forceFullResolution: recordFullResolution });
+        }
+        catch {
+            /* no live track yet, or a race with a recording already in progress
+               elsewhere on this feed; the operator can retry once live. */
+        }
+    }, [flightId, recordingActive, recordings, recordFullResolution]);
+    const topOverlay = (_jsxs(TopOverlay, { children: [_jsx(TitleRow, { children: _jsx(TopTitle, { children: hasCameras ? (_jsxs(TitleButton, { ref: cameraMenu.triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": cameraMenu.open, "aria-controls": menuId, disabled: recordingActive, title: recordingActive ? "Stop recording to change camera" : undefined, onClick: recordingActive ? undefined : cameraMenu.toggle, children: [_jsx(TitleButton__Text, { children: title }), _jsx(ChevronDownIcon, { "aria-hidden": "true" })] })) : (title) }) }), cameraMenu.open &&
                 hasCameras &&
                 cameraMenu.position &&
                 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: () => {
@@ -520,23 +495,117 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                             cameraMenu.close();
                         }, children: [cameraLabel(c), " (", c.vesselName, ")", isCameraDestroyed(c) ? " - signal lost" : ""] }, c.flightId))) }), document.body), showDebugInfo &&
                 (camera ? (_jsxs(TopMeta, { children: [camera.vesselName, " \u00B7 ", camera.renderWidth, "\u00D7", camera.renderHeight, bitrateLabel, adaptiveLabel] })) : (_jsx(TopMeta, { children: "no cameras on this vessel" })))] }));
-    const renderAction = (a) => (_jsx(OverlayIconButton, { type: "button", "aria-label": a.label, "aria-pressed": a.active ?? undefined, title: a.label, "$active": a.active ?? false, onClick: a.onClick, children: a.icon }, a.id));
-    const builtInActions = flightId !== null && (pipAvailable || fullscreenAvailable || qualityAvailable);
-    const hasActionBar = hasCameras ||
-        (actions && actions.length > 0) ||
-        (trailingActions && trailingActions.length > 0) ||
-        builtInActions;
-    const actionBar = hasActionBar ? (_jsxs(ActionBar, { children: [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" })] })), actions?.map(renderAction), qualityAvailable && (_jsxs(OverlayIconButton, { ref: qualityMenu.triggerRef, type: "button", "aria-label": "Quality", "aria-haspopup": "menu", "aria-expanded": qualityMenu.open, "aria-controls": qualityMenuId, title: qualityThrottled
-                    ? "Quality (throttled by adaptive performance)"
-                    : "Quality", "$active": qualityMenu.open, onClick: qualityMenu.toggle, children: [_jsx(QualityIcon, {}), qualityThrottled && _jsx(ThrottledDot, { "aria-hidden": "true" })] })), flightId !== null && pipAvailable && (_jsx(OverlayIconButton, { type: "button", "aria-label": isPip ? "Exit picture in picture" : "Picture in picture", "aria-pressed": isPip, title: isPip ? "Exit picture in picture" : "Picture in picture", "$active": isPip, onClick: togglePip, children: _jsx(PictureInPictureIcon, {}) })), flightId !== null && fullscreenAvailable && (_jsx(OverlayIconButton, { type: "button", "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "aria-pressed": isFullscreen, title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen", "$active": isFullscreen, onClick: toggleFullscreen, children: isFullscreen ? _jsx(FullscreenExitIcon, {}) : _jsx(FullscreenEnterIcon, {}) })), trailingActions?.map(renderAction)] })) : null;
+    /*
+     * Built-in action-bar entries, in the bar's natural (fallback) order:
+     * consumer actions, quality, tracking, PiP, fullscreen, trailing actions.
+     * FeedActionBar partitions these into primary/overflow (see its own
+     * doc-comment); tracking is the only built-in marked `stateful` today,
+     * per #6's "stateful toggles stay primary" rule (REC joins it the same
+     * way).
+     */
+    const trackingLabel = tracking
+        ? trackMode === TrackMode.Target
+            ? "Auto-tracking target"
+            : "Auto-tracking active vessel"
+        : "Auto-track a vessel";
+    const pipLabel = isPip ? "Exit picture in picture" : "Picture in picture";
+    const fullscreenLabel = isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
+    const recordingLabel = recordingActive ? "Stop recording" : "Start recording";
+    const entries = [
+        ...(actions?.map(feedActionToEntry) ?? []),
+        ...(qualityAvailable
+            ? [
+                {
+                    id: "quality",
+                    label: "Quality",
+                    stateful: false,
+                    render: () => (_jsxs(OverlayIconButton, { ref: qualityMenu.triggerRef, type: "button", "aria-label": "Quality", "aria-haspopup": "menu", "aria-expanded": qualityMenu.open, "aria-controls": qualityMenuId, title: qualityThrottled
+                            ? "Quality (throttled by adaptive performance)"
+                            : "Quality", "$active": qualityMenu.open, onClick: qualityMenu.toggle, children: [_jsx(QualityIcon, {}), qualityThrottled && _jsx(ThrottledDot, { "aria-hidden": "true" })] })),
+                },
+            ]
+            : []),
+        ...(enableRecording && flightId !== null
+            ? [
+                {
+                    id: "record",
+                    label: recordingLabel,
+                    stateful: true,
+                    render: () => (_jsx(RecordActionButton, { type: "button", "aria-label": recordingLabel, "aria-pressed": recordingActive, title: recordingLabel, "$active": recordingActive, onClick: toggleRecording, children: _jsx(RecordIcon, {}) })),
+                },
+            ]
+            : []),
+        ...(trackingAvailable
+            ? [
+                {
+                    id: "tracking",
+                    label: trackingLabel,
+                    stateful: true,
+                    render: () => (_jsx(OverlayIconButton, { ref: trackingMenu.triggerRef, type: "button", "aria-label": "Auto-track", "aria-haspopup": "menu", "aria-expanded": trackingMenu.open, "aria-controls": trackingMenuId, "aria-pressed": tracking, title: trackingLabel, "$active": tracking || trackingMenu.open, onClick: trackingMenu.toggle, children: _jsx(CrosshairIcon, {}) })),
+                },
+            ]
+            : []),
+        ...(flightId !== null && pipAvailable
+            ? [
+                {
+                    id: "pip",
+                    label: pipLabel,
+                    stateful: false,
+                    render: () => (_jsx(OverlayIconButton, { type: "button", "aria-label": pipLabel, "aria-pressed": isPip, title: pipLabel, "$active": isPip, onClick: togglePip, children: _jsx(PictureInPictureIcon, {}) })),
+                },
+            ]
+            : []),
+        ...(flightId !== null && fullscreenAvailable
+            ? [
+                {
+                    id: "fullscreen",
+                    label: fullscreenLabel,
+                    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, {}) })),
+                },
+            ]
+            : []),
+        /* trailingActions is always the pinned-trailing (close/remove) slot,
+           regardless of what the consumer's FeedAction sets. See its own
+           doc-comment on CameraFeedProps. While a recording is active, closing
+           the feed would lose it, so the control stays visible but disabled
+           and inert rather than disappearing. */
+        ...(trailingActions?.map((a) => {
+            const entry = feedActionToEntry(a);
+            if (!recordingActive)
+                return { ...entry, pinnedTrailing: true };
+            return {
+                ...entry,
+                pinnedTrailing: true,
+                render: () => (_jsx(OverlayIconButton, { type: "button", "aria-label": a.label, title: "Stop recording to close this feed", disabled: true, "$active": a.active ?? false, children: a.icon }, a.id)),
+            };
+        }) ?? []),
+    ];
+    const builtInActions = flightId !== null &&
+        (pipAvailable ||
+            fullscreenAvailable ||
+            qualityAvailable ||
+            trackingAvailable ||
+            enableRecording);
+    const hasActionBar = showActions &&
+        (hasCameras ||
+            (actions && actions.length > 0) ||
+            (trailingActions && trailingActions.length > 0) ||
+            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(Stage, { ref: wrapRef, "$pinned": chromePinned, children: flightId === null ? (_jsxs(_Fragment, { children: [_jsx(Empty, { children: emptyMessage }), topOverlay, actionBar] })) : (_jsxs(_Fragment, { children: [_jsx(StyledVideo, { ref: videoRef, 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), 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"] })] })), showZoom && (_jsxs(ZoomControlsWrap, { children: [_jsx(ZoomButton, { type: "button", "aria-label": "Zoom in", "$pos": "top", onPointerDown: () => controllerRef.current?.setZoomRate(1), onPointerUp: () => controllerRef.current?.setZoomRate(0), onPointerLeave: () => controllerRef.current?.setZoomRate(0), onPointerCancel: () => controllerRef.current?.setZoomRate(0), onClick: (e) => {
+                    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 &&
+                    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), 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 && (_jsxs(RecBadge, { role: "status", "aria-label": "Recording", children: [_jsx(RecDot, { "aria-hidden": "true" }), "REC ", formatElapsed(recordingElapsedMs)] })), 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)
                                     controllerRef.current?.nudgeZoom(-1);
-                            }, children: "+" }), _jsx(FovSlider, { type: "range", "aria-label": "Zoom", min: camera.fovMin, max: camera.fovMax, step: 0.5, value: sliderFov, onChange: (e) => {
+                            }, children: "+" }), _jsx(FovSlider, { type: "range", "aria-label": "Zoom", min: camera.fovMin, max: camera.fovMax, step: 0.5, value: sliderFov, disabled: manualDisabled, onChange: (e) => {
                                 const v = Number(e.target.value);
                                 controllerRef.current?.fovSliderInput(v);
                             }, onPointerDown: () => {
@@ -545,10 +614,10 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                                 controllerRef.current?.setFovSliderDragging(false);
                             }, onPointerCancel: () => {
                                 controllerRef.current?.setFovSliderDragging(false);
-                            } }), _jsx(ZoomButton, { type: "button", "aria-label": "Zoom out", "$pos": "bottom", onPointerDown: () => controllerRef.current?.setZoomRate(-1), onPointerUp: () => controllerRef.current?.setZoomRate(0), onPointerLeave: () => controllerRef.current?.setZoomRate(0), onPointerCancel: () => controllerRef.current?.setZoomRate(0), onClick: (e) => {
+                            } }), _jsx(ZoomButton, { type: "button", "aria-label": "Zoom out", "$pos": "bottom", 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)
                                     controllerRef.current?.nudgeZoom(1);
-                            }, children: "\u2212" })] })), showPan && (_jsxs(PanControl, { role: "group", "aria-label": "Pan camera", children: [_jsx(PanArrow, { type: "button", "$dir": "up", "aria-label": "Pan up", disabled: !supportsPitch, onClick: () => controllerRef.current?.nudgePan(0, 1), children: "\u25B2" }), _jsx(PanArrow, { type: "button", "$dir": "down", "aria-label": "Pan down", disabled: !supportsPitch, onClick: () => controllerRef.current?.nudgePan(0, -1), children: "\u25BC" }), _jsx(PanArrow, { type: "button", "$dir": "left", "aria-label": "Pan left", onClick: () => controllerRef.current?.nudgePan(-1, 0), children: "\u25C0" }), _jsx(PanArrow, { type: "button", "$dir": "right", "aria-label": "Pan right", onClick: () => controllerRef.current?.nudgePan(1, 0), children: "\u25B6" }), _jsx(PanBall, { "aria-hidden": "true", title: "Drag to pan", onPointerDown: handleBallDown, onPointerMove: handleBallMove, onPointerUp: handleBallUp, onPointerCancel: handleBallUp, style: {
+                            }, children: "\u2212" })] })), showPan && (_jsxs(PanControl, { role: "group", "aria-label": "Pan camera", "$disabled": manualDisabled, "aria-hidden": manualDisabled, children: [_jsx(PanArrow, { type: "button", "$dir": "up", "aria-label": "Pan up", disabled: manualDisabled || !supportsPitch, onClick: () => controllerRef.current?.nudgePan(0, 1), children: "\u25B2" }), _jsx(PanArrow, { type: "button", "$dir": "down", "aria-label": "Pan down", disabled: manualDisabled || !supportsPitch, onClick: () => controllerRef.current?.nudgePan(0, -1), children: "\u25BC" }), _jsx(PanArrow, { type: "button", "$dir": "left", "aria-label": "Pan left", disabled: manualDisabled, onClick: () => controllerRef.current?.nudgePan(-1, 0), children: "\u25C0" }), _jsx(PanArrow, { type: "button", "$dir": "right", "aria-label": "Pan right", disabled: manualDisabled, onClick: () => controllerRef.current?.nudgePan(1, 0), children: "\u25B6" }), _jsx(PanBall, { "aria-hidden": "true", title: "Drag to pan", onPointerDown: manualDisabled ? undefined : handleBallDown, onPointerMove: manualDisabled ? undefined : handleBallMove, onPointerUp: manualDisabled ? undefined : handleBallUp, onPointerCancel: manualDisabled ? undefined : handleBallUp, style: {
                                 transform: `translate(${ballPos.x}px, ${ballPos.y}px)`,
                             } })] }))] })) }));
 });
@@ -593,6 +662,10 @@ function FullscreenExitIcon() {
 function QualityIcon() {
     return (_jsxs("svg", { ...iconProps, children: [_jsx("path", { d: "M2 4.5h12M2 8h12M2 11.5h12" }), _jsx("circle", { cx: "10.5", cy: "4.5", r: "1.6", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "5.5", cy: "8", r: "1.6", fill: "currentColor", stroke: "none" }), _jsx("circle", { cx: "8.5", cy: "11.5", r: "1.6", fill: "currentColor", stroke: "none" })] }));
 }
+/* Auto-track: a crosshair / reticle. */
+function CrosshairIcon() {
+    return (_jsxs("svg", { ...iconProps, children: [_jsx("circle", { cx: "8", cy: "8", r: "4.5" }), _jsx("path", { d: "M8 1v2.5M8 12.5V15M1 8h2.5M12.5 8H15" })] }));
+}
 /* Stale badge: fading signal bars (tallest dimmed). */
 function StaleIcon() {
     return (_jsxs("svg", { viewBox: "0 0 16 16", width: 10, height: 10, fill: "currentColor", stroke: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "2", y: "9", width: "2.5", height: "5" }), _jsx("rect", { x: "6.5", y: "6", width: "2.5", height: "8" }), _jsx("rect", { x: "11", y: "3", width: "2.5", height: "11", opacity: "0.35" })] }));
@@ -600,6 +673,10 @@ function StaleIcon() {
 function PictureInPictureIcon() {
     return (_jsxs("svg", { ...iconProps, children: [_jsx("rect", { x: "2", y: "3", width: "12", height: "10", rx: "1" }), _jsx("rect", { x: "8", y: "8", width: "5", height: "4", rx: "0.5", fill: "currentColor", stroke: "none" })] }));
 }
+/* REC: a plain filled dot, coloured by RecordActionButton's own $active state. */
+function RecordIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", width: 14, height: 14, fill: "currentColor", stroke: "none", "aria-hidden": "true", children: _jsx("circle", { cx: "8", cy: "8", r: "5" }) }));
+}
 // ---------------------------------------------------------------------------
 // Styled components
 // ---------------------------------------------------------------------------
@@ -613,6 +690,9 @@ const PanControl = styled.div `
   transition: opacity 0.15s;
   touch-action: none;
 
+  /* Greyed + inert while auto-tracking owns the gimbal. */
+  ${(p) => p.$disabled && "pointer-events: none; filter: grayscale(1) opacity(0.4);"}
+
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
@@ -692,6 +772,9 @@ const ZoomControlsWrap = styled.div `
   opacity: 0;
   transition: opacity 0.15s;
 
+  /* Greyed + inert while auto-tracking owns the FoV. */
+  ${(p) => p.$disabled && "pointer-events: none; filter: grayscale(1) opacity(0.4);"}
+
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
@@ -901,21 +984,107 @@ const ThrottledDot = styled.span `
   background: #ffb347;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
 `;
-/* Top-right cluster of overlay controls (custom actions + fullscreen/PiP). */
-const ActionBar = styled.div `
+/* REC action-bar button: same shape as OverlayIconButton, its own red
+   $active colour (a coming-recording toggle should never read as the
+   green "on" of tracking/quality) via its own token so a consumer can
+   recolour it without touching --kerbcast-action-active. */
+const RecordActionButton = styled(OverlayIconButton) `
+  background: ${(p) => p.$active ? "var(--kerbcast-rec-active, #ff3b30)" : "rgba(0, 0, 0, 0.5)"};
+  border-color: ${(p) => p.$active ? "var(--kerbcast-rec-active, #ff3b30)" : "rgba(255, 255, 255, 0.3)"};
+  color: #fff;
+
+  @media (hover: hover) {
+    &:hover {
+      background: ${(p) => p.$active ? "var(--kerbcast-rec-active, #ff3b30)" : "rgba(0, 0, 0, 0.7)"};
+    }
+  }
+`;
+/* Persistent recording badge: red dot + elapsed timer, always visible while
+   recording (not hover chrome), same convention as StaleBadge. */
+const RecBadge = styled.div `
   position: absolute;
-  top: 6px;
-  right: 8px;
-  z-index: 3;
+  /* Sits just under the hover-gated title/source dropdown (both are top-left)
+     so an active recording stays visible without displacing that control. */
+  top: 28px;
+  left: 8px;
+  z-index: 2;
   display: flex;
   align-items: center;
-  gap: 4px;
-  opacity: 0;
+  gap: 5px;
+  padding: 2px 6px;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid var(--kerbcast-rec-active, #ff3b30);
+  border-radius: 3px;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
   pointer-events: none;
-  transition: opacity 0.15s;
+`;
+const RecDot = styled.span `
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--kerbcast-rec-active, #ff3b30);
+  flex-shrink: 0;
 
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: rec-dot-pulse 1.6s ease-in-out infinite;
+  }
+
+  @keyframes rec-dot-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+`;
+/* Arming pill: same slot as RecBadge (a single forced recording shows one or
+   the other, never both), a muted amber so it never reads as the red
+   "recording is live" state: the feed hasn't actually started capturing
+   yet, it's waiting for the resolution bump. */
+const ArmingBadge = styled.div `
+  position: absolute;
+  top: 28px;
+  left: 8px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 6px;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid var(--kerbcast-arming-active, #d9a441);
+  border-radius: 3px;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+  pointer-events: none;
+`;
+const ArmingDot = styled.span `
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--kerbcast-arming-active, #d9a441);
+  flex-shrink: 0;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: arming-dot-pulse 0.9s ease-in-out infinite;
+  }
+
+  @keyframes arming-dot-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
   }
 `;
 /*
@@ -948,14 +1117,14 @@ const Stage = styled(Panel) `
   &:focus-within ${ZoomControlsWrap},
   &:hover ${PanControl},
   &:focus-within ${PanControl},
-  &:hover ${ActionBar},
-  &:focus-within ${ActionBar} {
+  &:hover ${ActionBarRow},
+  &:focus-within ${ActionBarRow} {
     opacity: 1;
   }
   &:hover ${TopOverlay},
   &:focus-within ${TopOverlay},
-  &:hover ${ActionBar},
-  &:focus-within ${ActionBar} {
+  &:hover ${ActionBarRow},
+  &:focus-within ${ActionBarRow} {
     pointer-events: auto;
   }
 
@@ -965,7 +1134,7 @@ const Stage = styled(Panel) `
         opacity: 1;
         pointer-events: auto;
       }
-      ${ActionBar} {
+      ${ActionBarRow} {
         opacity: 1;
         pointer-events: auto;
       }
@@ -982,48 +1151,6 @@ const Empty = styled.div `
   padding: 1rem;
   text-align: center;
 `;
-const OverlayIconButton = styled.button `
-  position: relative;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: ${(p) => p.$active
-    ? "var(--kerbcast-accent, #00ff88)"
-    : "rgba(0, 0, 0, 0.5)"};
-  border: 1px solid
-    ${(p) => p.$active
-    ? "var(--kerbcast-accent, #00ff88)"
-    : "rgba(255, 255, 255, 0.3)"};
-  border-radius: 3px;
-  color: ${(p) => (p.$active ? "#000" : "#fff")};
-  cursor: pointer;
-  transition: background 0.12s, border-color 0.12s, color 0.12s;
-
-  @media (hover: hover) {
-    &:hover {
-      background: ${(p) => p.$active
-    ? "var(--kerbcast-accent, #00ff88)"
-    : "rgba(0, 0, 0, 0.7)"};
-      border-color: rgba(255, 255, 255, 0.6);
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--kerbcast-accent, #00ff88);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.4;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`;
 const StyledVideo = styled.video `
   position: absolute;
   inset: 0;