@ksp-gonogo/kerbcast-react 1.10.3 → 1.11.0-rc.10

package/README.md

@@ -68,6 +68,19 @@ comments):
   feed, and whether it draws its own standby icon (set `false` when a
   container renders a single shared out-of-flight overlay).
 - `useStream`. Override how the stream is sourced. See below.
+- `renderSize`. `"auto"` (the default) measures the feed and asks the
+  sidecar for a matching resolution; `"none"` leaves resolution alone.
+
+`renderSize="auto"` picks the resolution, never the shape. The feed takes
+the camera's configured capture aspect (`CameraState.maxWidth` x
+`maxHeight`, from settings.cfg; 16:9 when unknown), centres itself at that
+aspect inside whatever box you give it, and asks for the size of that
+picture: width rounded up to a multiple of 16, height at the aspect. A
+resize that only follows the incoming stream is never reported back, so a
+frame you size from the video (or from `renderWidth`/`renderHeight`)
+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.
 
 An imperative `CameraFeedHandle` (via `ref`) exposes `stepCamera`,
 `setPanAxis`, `setZoomRate`, `nudgePan`, and `nudgeZoom` for wiring feeds
@@ -89,10 +102,12 @@ quality follows how large it is shown (pass `reportSize={false}` to opt out).
 
 ## Hooks
 
-- `useReportDisplaySize(flightId, ref)`. Self-measure an element and drive the
-  client's per-consumer `reportDisplaySize` (auto-resolution). The feed
-  primitives use it internally; multiple views of one camera from a client
-  collapse to a single MAX report.
+- `useReportDisplaySize(flightId, ref, options)`. Self-measure an element and
+  drive the client's per-consumer `reportDisplaySize` (auto-resolution). The
+  feed primitives use it internally; multiple views of one camera from a
+  client collapse to a single MAX report. Pass `aspect` for the shape to ask
+  for (default 16:9), and `videoRef` / `streamSize` so a resize that follows
+  the stream is not reported.
 
 - `useKerbcastCameras(): CameraState[]`. The live camera registry,
   re-rendering as cameras appear, change, or are destroyed.

package/dist/CameraFeed.d.ts

@@ -1,5 +1,6 @@
 import type { CameraState, KerbcastClient } from "@ksp-gonogo/kerbcast";
 import { type FeedAction } from "./FeedActionBar";
+import { type CommandBracketOverlay } from "./CommandBrackets";
 /**
  * The consumer-supplied action shape, and the shared top-right action bar
  * both `CameraFeed` and `KerbalFaceFeed` render, live in `FeedActionBar`.
@@ -186,6 +187,26 @@ export interface CameraFeedProps {
      * {@link CameraStreamHook}.
      */
     useStream?: CameraStreamHook;
+    /**
+     * Draw target brackets and their readout over command camera feeds, with a
+     * per-feed "Target brackets" toggle in the action bar (on by default,
+     * remembered per camera in this browser). Default true. A blanked command
+     * feed shows its reason whatever this is set to.
+     */
+    enableTargetBrackets?: boolean;
+    /**
+     * Extra drawing, corner styling and readout text for this feed's target
+     * brackets. See {@link CommandBracketOverlay}.
+     */
+    targetBracketOverlay?: CommandBracketOverlay;
+    /**
+     * Mission UT the displayed video was captured at, for a host running its
+     * own delayed playout. Picks which command-track transition is in force and
+     * ages the readout. Defaults to the displayed frame's own capture UT where
+     * the browser reports frame RTP timestamps, else the client's capture
+     * clock interpolated to now.
+     */
+    displayUt?: number;
 }
 export interface CameraFeedHandle {
     stepCamera(delta: number): void;

package/dist/CameraFeed.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PanZoomController, QualityPreset, TrackMode } from "@ksp-gonogo/kerbcast";
+import { CameraKind, CommandAimKind, CommandTargetEligibility, PanZoomController, QualityPreset, TrackMode, effectiveCommandTrack, formatCommandRange, } 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 { CommandBlank, CommandBrackets } from "./CommandBrackets";
+import { useCommandDisplayUt } from "./hooks/useCommandDisplayUt";
 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 { DEFAULT_FEED_ASPECT, useReportDisplaySize } from "./hooks/useReportDisplaySize";
+import { useTargetBracketsPreference } from "./hooks/useTargetBracketsPreference";
 import { StandbyIcon } from "./StandbyIcon";
 import { isCameraDestroyed } from "./lifecycle";
 import { usePortalMenu } from "./menuPositioning";
@@ -59,7 +62,7 @@ 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, disableManualControls = false, enableRecording = false, recordFullResolution = 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, disableManualControls = false, enableRecording = false, recordFullResolution = false, actions, trailingActions, showActions = true, useStream, enableTargetBrackets = true, targetBracketOverlay, displayUt: displayUtProp, }, ref) {
     const client = useKerbcastClient();
     // Always called (rules of hooks); `enableRecording` only gates whether the
     // REC entry/badge render, not whether the store is subscribed.
@@ -146,6 +149,13 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     const resolveStream = useStream ?? useKerbcastStream;
     const stream = resolveStream(flightId);
     const videoRef = useRef(null);
+    /* Mirrors videoRef as state so the bracket overlay can measure the element
+       once it mounts. Setting a ref never remounts the video. */
+    const [videoEl, setVideoEl] = useState(null);
+    const attachVideo = useCallback((el) => {
+        videoRef.current = el;
+        setVideoEl(el);
+    }, []);
     // The feed frame; fullscreen targets this and ResizeObserver measures it.
     const wrapRef = useRef(null);
     useEffect(() => {
@@ -245,6 +255,16 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     const tracking = trackMode !== TrackMode.None;
     const manualDisabled = tracking;
     const supportsPitch = !!camera && camera.panPitchMax - camera.panPitchMin > 0;
+    /* Command camera feeds: target brackets, readout and blank label. */
+    const commandCamera = camera?.kind === CameraKind.Command && !isDestroyed ? camera : null;
+    const isCommandFeed = commandCamera !== null;
+    const commandTrack = commandCamera?.commandTrack ?? null;
+    const commandDisplayUt = useCommandDisplayUt(commandTrack !== null, displayUtProp, commandTrack?.events, commandCamera?.flightId ?? null, videoEl);
+    const commandState = commandTrack
+        ? effectiveCommandTrack(commandTrack, commandDisplayUt?.ut)
+        : null;
+    const [bracketsOn, toggleBrackets] = useTargetBracketsPreference(commandCamera ? (commandCamera.commandCentre?.stationId ?? String(commandCamera.flightId)) : null);
+    const targetBracketsAvailable = enableTargetBrackets && isCommandFeed;
     // -------------------------------------------------------------------------
     // Camera selection callbacks (Next/Prev, picker)
     // onSelectCamera is ONLY called on explicit user picks, never on auto-latch.
@@ -371,10 +391,29 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     // -------------------------------------------------------------------------
     // 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.
+    // consumers. Auto picks the resolution, never the shape: the request and
+    // the feed's own box keep the camera's configured capture aspect (16:9
+    // when unknown). Disabled by `renderSize="none"`. The video and the
+    // sidecar's render size let it ignore a resize that only follows the
+    // stream. See useReportDisplaySize for debounce / bucketing / the guard.
     // -------------------------------------------------------------------------
-    useReportDisplaySize(flightId, wrapRef, { enabled: renderSize === "auto" });
+    const baseW = camera?.maxWidth ?? 0;
+    const baseH = camera?.maxHeight ?? 0;
+    const hasBase = baseW > 0 && baseH > 0;
+    const feedAspect = hasBase ? baseW / baseH : DEFAULT_FEED_ASPECT;
+    const feedShape = useMemo(() => ({
+        "--kc-feed-w": hasBase ? baseW : 16,
+        "--kc-feed-h": hasBase ? baseH : 9,
+    }), [hasBase, baseW, baseH]);
+    const renderedW = camera?.renderWidth ?? 0;
+    const renderedH = camera?.renderHeight ?? 0;
+    const renderedSize = useMemo(() => ({ width: renderedW, height: renderedH }), [renderedW, renderedH]);
+    useReportDisplaySize(flightId, wrapRef, {
+        enabled: renderSize === "auto",
+        aspect: feedAspect,
+        videoRef,
+        streamSize: renderedSize,
+    });
     // -------------------------------------------------------------------------
     // UI state
     // -------------------------------------------------------------------------
@@ -444,6 +483,32 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
         closeTrackingMenu();
     }, [client, flightId, trackMode, closeTrackingMenu]);
     // -------------------------------------------------------------------------
+    // Command camera target picker. Lists every craft the game offers; the
+    // ineligible ones stay visible but disabled with the game's reason, and
+    // the current target follows the published subjectPersistentId. Picking
+    // one aims the camera at it. Hidden while a command authority holds the
+    // aim lock, since only it can aim then.
+    // -------------------------------------------------------------------------
+    const commandTargets = commandCamera?.commandCentre?.targets ?? [];
+    const commandTargetId = commandCamera?.commandCentre?.subjectPersistentId ?? 0;
+    const commandLocked = commandCamera?.commandTrack?.authority != null;
+    const commandTargetAvailable = isCommandFeed && !disableManualControls && !commandLocked && commandTargets.length > 0;
+    const commandTargetMenuId = useId();
+    const commandTargetMenu = usePortalMenu({
+        maxWidth: MENU_MAX_WIDTH,
+        maxHeight: MENU_MAX_HEIGHT,
+        align: "end",
+    });
+    const closeCommandTargetMenu = commandTargetMenu.close;
+    const selectCommandTarget = useCallback((persistentId) => {
+        if (flightId === null)
+            return;
+        client
+            .setCommandAim(flightId, { kind: CommandAimKind.Vessel, persistentId })
+            .catch(() => { });
+        closeCommandTargetMenu();
+    }, [client, flightId, closeCommandTargetMenu]);
+    // -------------------------------------------------------------------------
     // 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
@@ -514,6 +579,11 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
     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 bracketsLabel = "Target brackets";
+    const commandTargetName = commandTargets.find((t) => t.persistentId === commandTargetId)?.vesselName;
+    const commandTargetLabel = commandTargetName
+        ? `Watching ${commandTargetName}`
+        : "Choose target";
     const entries = [
         ...(actions?.map(feedActionToEntry) ?? []),
         ...(qualityAvailable
@@ -521,7 +591,8 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                 {
                     id: "quality",
                     label: "Quality",
-                    stateful: false,
+                    /* Stays inline: its menu anchors on this button, which the overflow menu unmounts on click. */
+                    stateful: true,
                     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" })] })),
@@ -538,6 +609,27 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
                 },
             ]
             : []),
+        ...(targetBracketsAvailable
+            ? [
+                {
+                    id: "target-brackets",
+                    label: bracketsLabel,
+                    stateful: true,
+                    render: () => (_jsx(OverlayIconButton, { type: "button", "aria-label": bracketsLabel, "aria-pressed": bracketsOn, title: bracketsLabel, "$active": bracketsOn, onClick: toggleBrackets, children: _jsx(TargetBracketsIcon, {}) })),
+                },
+            ]
+            : []),
+        ...(commandTargetAvailable
+            ? [
+                {
+                    id: "command-target",
+                    label: commandTargetLabel,
+                    /* Stays inline: its menu anchors on this button, which the overflow menu unmounts on click. */
+                    stateful: true,
+                    render: () => (_jsx(OverlayIconButton, { ref: commandTargetMenu.triggerRef, type: "button", "aria-label": "Choose target", "aria-haspopup": "menu", "aria-expanded": commandTargetMenu.open, "aria-controls": commandTargetMenuId, title: commandTargetLabel, "$active": commandTargetMenu.open, onClick: commandTargetMenu.toggle, children: _jsx(CommandTargetIcon, {}) })),
+                },
+            ]
+            : []),
         ...(trackingAvailable
             ? [
                 {
@@ -589,6 +681,8 @@ const CameraFeedInner = forwardRef(function CameraFeedInner({ flightId: requeste
             fullscreenAvailable ||
             qualityAvailable ||
             trackingAvailable ||
+            targetBracketsAvailable ||
+            commandTargetAvailable ||
             enableRecording);
     const hasActionBar = showActions &&
         (hasCameras ||
@@ -597,32 +691,41 @@ 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(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), 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, disabled: manualDisabled, onChange: (e) => {
-                                const v = Number(e.target.value);
-                                controllerRef.current?.fovSliderInput(v);
-                            }, onPointerDown: () => {
-                                controllerRef.current?.setFovSliderDragging(true);
-                            }, onPointerUp: () => {
-                                controllerRef.current?.setFovSliderDragging(false);
-                            }, onPointerCancel: () => {
-                                controllerRef.current?.setFovSliderDragging(false);
-                            } }), _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", "$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)`,
-                            } })] }))] })) }));
+    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 &&
+                        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 &&
+                        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 &&
+                        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 &&
+                        !outOfFlight &&
+                        (_jsxs(_Fragment, { children: [commandState.blank && _jsx(CommandBlank, { reason: commandState.blank }), targetBracketsAvailable && bracketsOn && (_jsx(CommandBrackets, { state: commandState, displayUt: commandDisplayUt?.ut ?? commandTrack.ut, utSource: commandDisplayUt?.source ?? null, video: videoEl, fallbackSize: camera ? { width: camera.renderWidth, height: camera.renderHeight } : null, overlay: targetBracketOverlay }))] })), 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) => {
+                                    const v = Number(e.target.value);
+                                    controllerRef.current?.fovSliderInput(v);
+                                }, onPointerDown: () => {
+                                    controllerRef.current?.setFovSliderDragging(true);
+                                }, onPointerUp: () => {
+                                    controllerRef.current?.setFovSliderDragging(false);
+                                }, onPointerCancel: () => {
+                                    controllerRef.current?.setFovSliderDragging(false);
+                                } }), _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", "$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)`,
+                                } })] }))] })) }) }));
 });
 // ---------------------------------------------------------------------------
 // Public CameraFeed - wraps inner in a nested provider when client prop given
@@ -665,6 +768,14 @@ 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" })] }));
 }
+/* Target brackets: the top-left and bottom-right corners around a centre dot. */
+function TargetBracketsIcon() {
+    return (_jsxs("svg", { ...iconProps, children: [_jsx("path", { d: "M2.5 7V2.5H7M13.5 9v4.5H9" }), _jsx("circle", { cx: "8", cy: "8", r: "1.2", fill: "currentColor", stroke: "none" })] }));
+}
+/* Command camera target: a craft silhouette inside a selection ring. */
+function CommandTargetIcon() {
+    return (_jsxs("svg", { ...iconProps, children: [_jsx("circle", { cx: "8", cy: "8", r: "6" }), _jsx("path", { d: "M8 4.5l1.6 4H6.4zM6.6 8.5l-.9 2.5M9.4 8.5l.9 2.5" })] }));
+}
 /* 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" })] }));
@@ -941,6 +1052,15 @@ const CameraMenuItem = styled.button `
     outline: 2px solid var(--kerbcast-accent, #00ff88);
     outline-offset: -2px;
   }
+
+  &:disabled {
+    cursor: default;
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  &:disabled:not([aria-checked="true"]) {
+    background: transparent;
+  }
 `;
 const TopMeta = styled.div `
   font-size: 11px;
@@ -1106,7 +1226,26 @@ const Panel = styled.div `
   border-radius: 4px;
   overflow: hidden;
 `;
+/*
+ * Fills the host and centres the Stage at the camera's configured aspect
+ * (--kc-feed-w / --kc-feed-h), so the picture fills the Stage and the host's
+ * spare room sits outside it.
+ */
+const FeedBox = styled.div `
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  container-type: size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
 const Stage = styled(Panel) `
+  width: min(100cqw, 100cqh * var(--kc-feed-w) / var(--kc-feed-h));
+  height: auto;
+  aspect-ratio: var(--kc-feed-w) / var(--kc-feed-h);
+  flex: none;
   padding: 0;
   gap: 0;
   position: relative;

package/dist/CommandBrackets.d.ts

@@ -0,0 +1,110 @@
+import { type EffectiveCommandTrack, type FrameUtSource } from "@ksp-gonogo/kerbcast";
+import { type ReactNode } from "react";
+/** Default colours; each is overridable through the named CSS custom property. */
+export declare const COMMAND_BRACKET_COLOURS: {
+    readonly clear: "var(--kerbcast-bracket-clear, #4caf50)";
+    readonly occluded: "var(--kerbcast-bracket-occluded, #f44336)";
+};
+export interface ContentRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Where `object-fit: contain` media actually lands inside its box. Falls back
+ * to the whole box while the media size is unknown.
+ */
+export declare function containedContentRect(boxWidth: number, boxHeight: number, mediaWidth: number, mediaHeight: number): ContentRect;
+export interface BracketPoint {
+    x: number;
+    y: number;
+}
+/** The bracket box, in the pixel space of the bracket SVG (the video element's box). */
+export interface BracketGeometry {
+    /** Box centre, which is the aim point. */
+    cx: number;
+    cy: number;
+    /** Half the box side in display px. */
+    half: number;
+    /** Length of each corner stroke. */
+    arm: number;
+    stroke: number;
+    /** The box's top-left and bottom-right corner points. */
+    topLeft: BracketPoint;
+    bottomRight: BracketPoint;
+}
+/**
+ * The bracket box centred on the displayed frame. `bracketHalfPx` is in
+ * capture px of a `frameHeightPx`-tall frame, so it scales by the displayed
+ * height; a missing half-size draws the minimum box.
+ */
+export declare function bracketGeometry(rect: ContentRect, bracketHalfPx: number | null, frameHeightPx: number): BracketGeometry;
+export type CommandBracketCorner = "topLeft" | "bottomRight";
+export interface CommandBracketCornerStyle {
+    colour: string;
+    dashed: boolean;
+}
+/** Changes to one default corner; unset fields keep the default. */
+export interface CommandBracketCornerOverride {
+    colour?: string;
+    dashed?: boolean;
+    hidden?: boolean;
+}
+export type CommandBracketCornerOverrides = Partial<Record<CommandBracketCorner, CommandBracketCornerOverride>>;
+/** Everything a bracket overlay needs to line up with the drawn brackets. */
+export interface CommandBracketContext {
+    geometry: BracketGeometry;
+    /** Size of the bracket SVG, the video element's box. */
+    width: number;
+    height: number;
+    /** Frame UT the brackets describe. */
+    displayUt: number;
+    utSource: FrameUtSource | "override" | null;
+    state: EffectiveCommandTrack;
+}
+/**
+ * Consumer additions to a command feed's brackets. Each part is optional and
+ * is called on every render with the context for the displayed frame.
+ */
+export interface CommandBracketOverlay {
+    /**
+     * SVG content drawn inside the bracket SVG above the default corners, in
+     * the same pixel space. Runs in every state, with or without a fix and
+     * over a blanked feed; `ctx.state` says which.
+     */
+    render?: (ctx: CommandBracketContext) => ReactNode;
+    /** Restyle or hide the default corners. */
+    corners?: CommandBracketCornerOverrides | ((ctx: CommandBracketContext) => CommandBracketCornerOverrides | null | undefined);
+    /**
+     * The readout text under the box. Receives the default text, which is
+     * empty while the feed is blanked; return a replacement (append to keep
+     * it), or null to hide the readout. Runs in every state.
+     */
+    readout?: (defaultText: string, ctx: CommandBracketContext) => string | null;
+}
+export interface CommandBracketsProps {
+    state: EffectiveCommandTrack;
+    displayUt: number;
+    /** Where `displayUt` came from, mirrored to the readout as `data-ut-source`. */
+    utSource?: FrameUtSource | "override" | null;
+    video: HTMLVideoElement | null;
+    /** Frame aspect to assume until the video reports its own size. */
+    fallbackSize?: {
+        width: number;
+        height: number;
+    } | null;
+    overlay?: CommandBracketOverlay | null;
+}
+/**
+ * Target brackets for a command camera feed: the aim point sits at frame
+ * centre, so the box is always centred on the displayed video. Both corners
+ * show the camera axis by default; an overlay can restyle either and draw
+ * its own marks. Without a fix, or over a blanked feed, the default corners
+ * are left out but the overlay and readout still run.
+ */
+export declare function CommandBrackets({ state, displayUt, utSource, video, fallbackSize, overlay, }: CommandBracketsProps): import("react").JSX.Element;
+/** Reason a command feed is blanked, centred on black over the feed. */
+export declare function CommandBlank({ reason }: {
+    reason: string;
+}): import("react").JSX.Element;