@ksp-gonogo/kerbcast-react 1.7.0 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.8.0 - 2026-07-28
+
+### Added
+
+- `useRecordings`: a reactive recordings store over the SDK's
+  `client.recording` controller. Exposes finished standalone clips
+  (`recordings`), synchronised sets (`groups`), and in-progress recordings
+  (`active`, for a REC dot + elapsed timer), plus `start` / `stop` /
+  `startGroup` / `stopGroup` / `discard` / `discardGroup` / `isRecording`. This
+  is the headless data layer the recordings tray + REC controls sit on; it owns
+  no chrome and keeps grouped clips out of the singles list
+- `RecordingsStore` and `ActiveRecordingInfo` types
+
 ## 1.7.0 - 2026-07-24
 
 Crew face cameras, auto-resolution, and camera targeting.

package/dist/CameraFeed.d.ts

@@ -1,20 +1,11 @@
 import type { CameraState, KerbcastClient } from "@ksp-gonogo/kerbcast";
+import { type FeedAction } from "./FeedActionBar";
 /**
- * A consumer-supplied action rendered into the feed's top-right action bar.
- * Lets a host page (e.g. the sidecar's spotlight toggle) inject controls
- * without the library knowing what they do.
+ * The consumer-supplied action shape, and the shared top-right action bar
+ * both `CameraFeed` and `KerbalFaceFeed` render, live in `FeedActionBar`.
+ * Re-exported here since existing imports reference `./CameraFeed`.
  */
-export interface FeedAction {
-    /** Stable identity for the React key. */
-    id: string;
-    /** Accessible label; used for aria-label and the native tooltip. */
-    label: string;
-    /** Icon node, sized by the action bar (~14px). */
-    icon: React.ReactNode;
-    /** Toggle state: renders the button highlighted and sets aria-pressed. */
-    active?: boolean;
-    onClick: () => void;
-}
+export type { FeedAction } from "./FeedActionBar";
 /**
  * A hook that yields the live `MediaStream` for a resolved flightId. Must be
  * a stable reference (the same function identity every render) and called
@@ -125,6 +116,29 @@ export interface CameraFeedProps {
      * the gimbal + FoV). Default false.
      */
     enableTracking?: boolean;
+    /**
+     * Show a built-in REC control in the action bar: a STATEFUL toggle (never
+     * overflow-eligible, per the #6 spec) that starts/stops a client-side
+     * recording of this feed via `useRecordings()`. Idle -> click starts
+     * (`start(flightId)`); active shows a red dot + a live elapsed timer on the
+     * tile -> click stops (`stop(recordingId)`) and the clip lands in the
+     * recordings store. Recording is purely client-local (this browser's own
+     * MediaRecorder, nothing server-authoritative) and read from the store
+     * (`isRecording(flightId)`), so it stays correct if toggled elsewhere (e.g.
+     * a REC+ grouped recording). Default false.
+     */
+    enableRecording?: boolean;
+    /**
+     * Record this feed at the operator's full render size for the duration of
+     * the built-in REC control's recording (overrides only the display-size
+     * demand; still yields to the adaptive framerate shed). Off by default.
+     * Threaded straight into `start(flightId, { forceFullResolution })`; has
+     * no effect unless `enableRecording` is also set. While the feed is armed
+     * (force sent, waiting for the resolution bump) the tile shows an
+     * "ARMING" pill under the title in place of the REC badge, then switches
+     * to the normal REC badge + elapsed timer once recording actually starts.
+     */
+    recordFullResolution?: boolean;
     /**
      * Consumer-injected action buttons, rendered left of the built-in
      * fullscreen/PiP controls in the top-right action bar.
@@ -132,8 +146,10 @@ export interface CameraFeedProps {
     actions?: FeedAction[];
     /**
      * Consumer-injected action buttons rendered at the far end of the action
-     * bar, right of the built-in controls — the natural home for a close/remove
-     * button so it sits in the corner.
+     * bar: the natural home for a close/remove button. Always pinned trailing
+     * (never overflow-eligible, never counted toward the overflow threshold),
+     * so it sits in the corner as a persistent, single-click control, right of
+     * the ⋮ overflow trigger when one is present.
      */
     trailingActions?: FeedAction[];
     /**

package/dist/CameraFeed.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { PanZoomController, QualityPreset, TrackMode } from "@ksp-gonogo/kerbcast";
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from "react";
+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
 // ---------------------------------------------------------------------------
@@ -19,97 +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 };
-}
 /*
  * Viewer quality presets, in menu order. Scales mirror the sidecar's
  * QualityPreset mapping (fractions of the camera's operator render size);
@@ -146,8 +59,11 @@ function exitFullscreen() {
 // ---------------------------------------------------------------------------
 // Inner component (reads from context)
 // ---------------------------------------------------------------------------
-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, actions, trailingActions, showActions = true, 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();
+    // 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
@@ -343,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);
@@ -358,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();
@@ -524,7 +440,54 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
         void client.setTrackTarget(flightId, next);
         closeTrackingMenu();
     }, [client, flightId, trackMode, closeTrackingMenu]);
-    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 &&
+    // -------------------------------------------------------------------------
+    // 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: () => {
@@ -532,21 +495,105 @@ 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));
+    /*
+     * 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);
+        (pipAvailable ||
+            fullscreenAvailable ||
+            qualityAvailable ||
+            trackingAvailable ||
+            enableRecording);
     const hasActionBar = showActions &&
         (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" })] })), trackingAvailable && (_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: tracking
-                    ? trackMode === TrackMode.Target
-                        ? "Auto-tracking target"
-                        : "Auto-tracking active vessel"
-                    : "Auto-track a vessel", "$active": tracking || trackingMenu.open, onClick: trackingMenu.toggle, children: _jsx(CrosshairIcon, {}) })), 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;
+    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 &&
@@ -555,7 +602,7 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                     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"] })] })), 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) => {
+                    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, disabled: manualDisabled, onChange: (e) => {
@@ -626,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
 // ---------------------------------------------------------------------------
@@ -933,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;
+    }
   }
 `;
 /*
@@ -980,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;
   }
 
@@ -997,7 +1134,7 @@ const Stage = styled(Panel) `
         opacity: 1;
         pointer-events: auto;
       }
-      ${ActionBar} {
+      ${ActionBarRow} {
         opacity: 1;
         pointer-events: auto;
       }
@@ -1014,53 +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;
-  /* Active-toggle fill (quality / tracking / PiP / fullscreen / custom actions
-     all share this button). Its own token so a consumer can recolour just the
-     action-row highlight without touching the general accent; defaults to
-     --kerbcast-accent, so the sidecar web page (which maps its accent onto that)
-     is unchanged. */
-  background: ${(p) => p.$active
-    ? "var(--kerbcast-action-active, var(--kerbcast-accent, #00ff88))"
-    : "rgba(0, 0, 0, 0.5)"};
-  border: 1px solid
-    ${(p) => p.$active
-    ? "var(--kerbcast-action-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-action-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;