@ksp-gonogo/ui-kit 1.0.0-rc.21 → 1.0.0-rc.27

package/dist/index.js

@@ -128,7 +128,6 @@ import {
   WidgetSections,
   asQuantityish,
   badgeFace,
-  bandClaim,
   clearAugments,
   commandFailedSentence,
   commandFoundSentence,
@@ -151,6 +150,9 @@ import {
   getSizeBucket,
   getWidgetShape,
   gridFloor,
+  heldFigureOf,
+  heldGradeOf,
+  heldMarking,
   heldNameMarker,
   heldWord,
   kspCalendar,
@@ -209,13 +211,13 @@ import {
   writeQuantity,
   writtenAs,
   writtenQuantity
-} from "./chunk-GGJES6XH.js";
+} from "./chunk-A3QYFQAV.js";
 import {
   COL_WIDTH,
   GRID_MARGIN,
   ROW_HEIGHT,
   gridToPixels
-} from "./chunk-IZZF25H2.js";
+} from "./chunk-SPBHQUHI.js";
 import "./chunk-G3PMV62Z.js";
 
 // ../theme/dist/DefaultThemeProvider.js
@@ -361,7 +363,7 @@ function ComboboxListbox({
   onSelectKey,
   renderItem,
   emptyLabel = "No matches",
-  ariaLabel,
+  "aria-label": ariaLabel,
   placement = "below"
 }) {
   return /* @__PURE__ */ jsx2(
@@ -456,7 +458,7 @@ function ActionMenu({
   items,
   onSelect,
   onDismiss,
-  ariaLabel,
+  "aria-label": ariaLabel,
   style,
   header,
   footer,
@@ -556,7 +558,7 @@ function ActionMenu({
                   {
                     type: "button",
                     role: "menuitem",
-                    "aria-label": item.ariaLabel,
+                    "aria-label": item["aria-label"],
                     "aria-disabled": item.disabled,
                     $disabled: item.disabled,
                     tabIndex: index === activeIndex ? 0 : -1,
@@ -1083,7 +1085,7 @@ function AugmentSettingsPanel({
           Switch,
           {
             checked: Boolean(current),
-            onChange: (value4) => onChange(block.namespace, field.key, value4),
+            onChange: (value5) => onChange(block.namespace, field.key, value5),
             label
           }
         ) }, `${block.namespace}.${field.key}`);
@@ -1142,6 +1144,133 @@ var AutoEmptyState__Fallback = styled6.div`
   }
 `;
 
+// src/AvatarStack.tsx
+import styled7 from "styled-components";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function initialsOf(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const letters = parts.length === 1 ? Array.from(parts[0] ?? "").slice(0, 2) : parts.slice(0, 2).map((word) => Array.from(word)[0] ?? "");
+  return letters.join("").toUpperCase();
+}
+var DEFAULT_MAX = 3;
+function AvatarStack({
+  items,
+  max = DEFAULT_MAX,
+  label
+}) {
+  const places = Math.max(1, Math.floor(max));
+  const overflowing = items.length > places;
+  const shown = overflowing ? items.slice(0, places - 1) : items;
+  const hidden = overflowing ? items.slice(places - 1) : [];
+  return /* @__PURE__ */ jsxs8(
+    AvatarStack__Row,
+    {
+      $places: places,
+      role: "group",
+      ...label === void 0 ? {} : { "aria-label": label },
+      children: [
+        shown.map((item) => /* @__PURE__ */ jsx9(
+          Tooltip,
+          {
+            text: item.name,
+            announce: false,
+            focusable: item.onSelect === void 0,
+            children: item.onSelect === void 0 ? /* @__PURE__ */ jsx9(
+              AvatarStack__Face,
+              {
+                $tone: item.tone,
+                role: "img",
+                "aria-label": item.name,
+                children: initialsOf(item.name)
+              }
+            ) : /* @__PURE__ */ jsx9(
+              AvatarStack__Face,
+              {
+                as: "button",
+                type: "button",
+                $tone: item.tone,
+                "aria-label": item.name,
+                onClick: item.onSelect,
+                children: initialsOf(item.name)
+              }
+            )
+          },
+          item.id
+        )),
+        hidden.length > 0 && /* @__PURE__ */ jsx9(
+          Tooltip,
+          {
+            text: hidden.map((item) => item.name).join(", "),
+            announce: false,
+            focusable: true,
+            children: /* @__PURE__ */ jsxs8(
+              AvatarStack__Face,
+              {
+                $tone: void 0,
+                role: "img",
+                "aria-label": `${hidden.length} more: ${hidden.map((item) => item.name).join(", ")}`,
+                children: [
+                  "+",
+                  hidden.length
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var AvatarStack__Row = styled7.div`
+  /* Two insets short of a control, so a stack in a bordered control of that height always fits inside it. */
+  --avatar-size: calc(var(--control-height) - 2 * var(--inset-avatar));
+  /*
+   * Initials are centred, so the later badge must leave the earlier one's
+   * letters clear: the step is nearly the whole badge and only a sliver of
+   * edge is covered.
+   */
+  --avatar-step: calc(var(--avatar-size) * 0.92);
+  display: flex;
+  align-items: center;
+  flex: none;
+  block-size: var(--avatar-size);
+  /* One place is a whole avatar and every further one only its uncovered part. */
+  inline-size: calc(
+    var(--avatar-size) + (${({ $places }) => $places} - 1) * var(--avatar-step)
+  );
+`;
+var AvatarStack__Face = styled7.span`
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--avatar-size);
+  block-size: var(--avatar-size);
+  margin: 0;
+  padding: 0;
+  border: 1px solid ${({ $tone }) => TONE_MARK[$tone ?? "neutral"]};
+  border-radius: var(--radius-circle);
+  background: var(--color-surface-raised);
+  color: ${({ $tone }) => TONE_TEXT[$tone ?? "neutral"]};
+  font: inherit;
+  font-size: var(--font-size-caption);
+  font-weight: 600;
+  line-height: var(--line-height-flush);
+  white-space: nowrap;
+  /* Each avatar overlaps the one before it, which stays on top. */
+  &:not(:first-child) {
+    margin-inline-start: calc(var(--avatar-step) - var(--avatar-size));
+  }
+  &:is(button) {
+    cursor: pointer;
+  }
+  ${focusRing}
+  &:focus-visible {
+    position: relative;
+  }
+`;
+
 // src/anchoredPosition.ts
 var GAP = 12;
 var EDGE = 8;
@@ -1160,8 +1289,8 @@ function place(anchor, extent, bound) {
 }
 
 // src/Band.tsx
-import styled7 from "styled-components";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import styled8 from "styled-components";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var INTERVAL_DASH = "\u2013";
 function Band({
   min,
@@ -1173,12 +1302,12 @@ function Band({
   const low = magnitudeOf(min);
   const high = magnitudeOf(max);
   if (min == null || max == null || low === null || high === null) {
-    return /* @__PURE__ */ jsx9(Band__Body, { className, children: NULL_DISPLAY });
+    return /* @__PURE__ */ jsx10(Band__Body, { className, children: NULL_DISPLAY });
   }
   if (wrapsAt !== void 0 && Math.abs(high - low) >= wrapsAt / 2) {
-    return /* @__PURE__ */ jsx9(Band__Body, { className, children: "(precesses)" });
+    return /* @__PURE__ */ jsx10(Band__Body, { className, children: "(precesses)" });
   }
-  return /* @__PURE__ */ jsx9(UnitSharedFormat, { of: min.unit, separate: true, ...pins, children: /* @__PURE__ */ jsx9(BandEnds, { min, max, className }) });
+  return /* @__PURE__ */ jsx10(UnitSharedFormat, { of: min.unit, separate: true, ...pins, children: /* @__PURE__ */ jsx10(BandEnds, { min, max, className }) });
 }
 function BandEnds({
   min,
@@ -1189,55 +1318,55 @@ function BandEnds({
   useSharedFormat(max);
   const oneFigure = useReadsAsOneFigure(min);
   if (oneFigure) {
-    return /* @__PURE__ */ jsx9(Band__Body, { className, children: /* @__PURE__ */ jsxs8(Band__Approximate, { children: [
-      /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: "~" }),
-      /* @__PURE__ */ jsx9(VisuallyHidden, { children: "approximately " }),
-      /* @__PURE__ */ jsx9(Unit, { value: min })
+    return /* @__PURE__ */ jsx10(Band__Body, { className, children: /* @__PURE__ */ jsxs9(Band__Approximate, { children: [
+      /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", children: "~" }),
+      /* @__PURE__ */ jsx10(VisuallyHidden, { children: "approximately " }),
+      /* @__PURE__ */ jsx10(Unit, { value: min })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs8(Band__Body, { className, children: [
-    /* @__PURE__ */ jsx9(Unit, { value: min }),
-    /* @__PURE__ */ jsx9(Band__Dash, { "aria-hidden": "true", children: INTERVAL_DASH }),
-    /* @__PURE__ */ jsx9(VisuallyHidden, { children: " to " }),
-    /* @__PURE__ */ jsx9(Unit, { value: max })
+  return /* @__PURE__ */ jsxs9(Band__Body, { className, children: [
+    /* @__PURE__ */ jsx10(Unit, { value: min }),
+    /* @__PURE__ */ jsx10(Band__Dash, { "aria-hidden": "true", children: INTERVAL_DASH }),
+    /* @__PURE__ */ jsx10(VisuallyHidden, { children: " to " }),
+    /* @__PURE__ */ jsx10(Unit, { value: max })
   ] });
 }
-var Band__Body = styled7.span`
+var Band__Body = styled8.span`
   display: inline-flex;
   align-items: baseline;
   gap: var(--gap-figure-parts);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 `;
-var Band__Dash = styled7.span`
+var Band__Dash = styled8.span`
   color: var(--color-text-faint);
 `;
-var Band__Approximate = styled7.span`
+var Band__Approximate = styled8.span`
   display: inline-flex;
   align-items: baseline;
   white-space: nowrap;
 `;
 
 // src/Block.tsx
-import styled8 from "styled-components";
+import styled9 from "styled-components";
 
 // src/SubjectHeading.tsx
-import { jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsxs as jsxs10 } from "react/jsx-runtime";
 function SubjectHeading({
   children,
   status,
   gap = "related-packed",
   align = "center"
 }) {
-  return /* @__PURE__ */ jsxs9(Cluster, { align, gap, justify: "between", wrap: true, children: [
+  return /* @__PURE__ */ jsxs10(Cluster, { align, gap, justify: "between", wrap: true, children: [
     children,
     status
   ] });
 }
 
 // src/Block.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-var Block__Title = styled8.div`
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var Block__Title = styled9.div`
   color: var(--color-text-primary);
   font-weight: 600;
   /* One rung above the body the arrangement sets; both halves are declared here, so a site cannot break the step. */
@@ -1247,7 +1376,7 @@ var Block__Title = styled8.div`
   flex: 1 1 auto;
   min-width: 0;
 `;
-var Block__TitleLead = styled8.div`
+var Block__TitleLead = styled9.div`
   display: flex;
   align-items: baseline;
   gap: var(--gap-record-lead);
@@ -1255,37 +1384,37 @@ var Block__TitleLead = styled8.div`
   min-width: 0;
 `;
 function Block__TitleRow({ left, right, children }) {
-  return /* @__PURE__ */ jsx10(SubjectHeading, { align: "baseline", status: right, children: left == null ? children : /* @__PURE__ */ jsxs10(Block__TitleLead, { children: [
+  return /* @__PURE__ */ jsx11(SubjectHeading, { align: "baseline", status: right, children: left == null ? children : /* @__PURE__ */ jsxs11(Block__TitleLead, { children: [
     left,
     children
   ] }) });
 }
-var Block__Middle = styled8.div`
+var Block__Middle = styled9.div`
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: var(--gap-related);
 `;
-var Block__Body = styled8.div`
+var Block__Body = styled9.div`
   display: flex;
   flex-direction: column;
   gap: var(--gap-related);
   flex: 1 1 var(--block-body-floor, 9rem);
   min-width: 0;
 `;
-var Block__Aside = styled8.div`
+var Block__Aside = styled9.div`
   min-width: 0;
   ${({ $side }) => $side ? `flex: 0 0 auto;
     --radius-display-frame: var(--radius-display-frame-aside);` : ""}
 `;
-var Block__Footer = styled8.div`
+var Block__Footer = styled9.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-related);
   flex-wrap: wrap;
 `;
-var Block__Root = styled8.div`
+var Block__Root = styled9.div`
   display: flex;
   flex-direction: column;
   gap: var(--gap-related);
@@ -1308,22 +1437,22 @@ function renderBlockAnatomy(Root, {
 }) {
   const hasTitleRow = title != null || titleLeft != null || titleRight != null;
   const hasSideAside = left != null || right != null;
-  const heading = hasTitleRow && /* @__PURE__ */ jsx10(Block__TitleRow, { left: titleLeft, right: titleRight, children: title != null && /* @__PURE__ */ jsx10(Block__Title, { as: titleAs, children: title }) });
-  return /* @__PURE__ */ jsxs10(Root, { ...rest, children: [
-    top != null && /* @__PURE__ */ jsx10(Block__Aside, { $side: false, children: top }),
-    hasSideAside ? /* @__PURE__ */ jsxs10(Block__Middle, { children: [
-      left != null && /* @__PURE__ */ jsx10(Block__Aside, { $side: true, children: left }),
-      /* @__PURE__ */ jsxs10(Block__Body, { children: [
+  const heading = hasTitleRow && /* @__PURE__ */ jsx11(Block__TitleRow, { left: titleLeft, right: titleRight, children: title != null && /* @__PURE__ */ jsx11(Block__Title, { as: titleAs, children: title }) });
+  return /* @__PURE__ */ jsxs11(Root, { ...rest, children: [
+    top != null && /* @__PURE__ */ jsx11(Block__Aside, { $side: false, children: top }),
+    hasSideAside ? /* @__PURE__ */ jsxs11(Block__Middle, { children: [
+      left != null && /* @__PURE__ */ jsx11(Block__Aside, { $side: true, children: left }),
+      /* @__PURE__ */ jsxs11(Block__Body, { children: [
         heading,
         children
       ] }),
-      right != null && /* @__PURE__ */ jsx10(Block__Aside, { $side: true, children: right })
-    ] }) : /* @__PURE__ */ jsxs10(Fragment3, { children: [
+      right != null && /* @__PURE__ */ jsx11(Block__Aside, { $side: true, children: right })
+    ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
       heading,
       children
     ] }),
-    footer != null && /* @__PURE__ */ jsx10(Block__Footer, { children: footer }),
-    bottom != null && /* @__PURE__ */ jsx10(Block__Aside, { $side: false, children: bottom })
+    footer != null && /* @__PURE__ */ jsx11(Block__Footer, { children: footer }),
+    bottom != null && /* @__PURE__ */ jsx11(Block__Aside, { $side: false, children: bottom })
   ] });
 }
 var BLOCK_PARTS = {
@@ -1339,8 +1468,8 @@ function BlockRoot({ ...props }) {
 var Block = Object.assign(BlockRoot, BLOCK_PARTS);
 
 // src/Box.tsx
-import styled9 from "styled-components";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import styled10 from "styled-components";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var SURFACE_VAR = {
   app: "var(--color-surface-app)",
   panel: "var(--color-surface-panel)",
@@ -1355,7 +1484,7 @@ function Box({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Box__Root,
     {
       $surface: surface,
@@ -1367,7 +1496,7 @@ function Box({
     }
   );
 }
-var Box__Root = styled9.div`
+var Box__Root = styled10.div`
   ${({ $surface }) => $surface && `background: ${SURFACE_VAR[$surface]};`}
   ${({ $bordered }) => $bordered && `border: 1px solid var(--color-border-subtle);`}
   ${({ $radius }) => $radius && `border-radius: ${RADIUS_VAR[$radius]};`}
@@ -1376,11 +1505,11 @@ var Box__Root = styled9.div`
 
 // src/ButtonGroup.tsx
 import { forwardRef } from "react";
-import styled10 from "styled-components";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import styled11 from "styled-components";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var ButtonGroup = forwardRef(
   function ButtonGroup2({ equalWidth = true, gap, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       ButtonGroup__Root,
       {
         ref,
@@ -1392,7 +1521,7 @@ var ButtonGroup = forwardRef(
     );
   }
 );
-var ButtonGroup__Root = styled10.div`
+var ButtonGroup__Root = styled11.div`
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: ${({ $equalWidth }) => $equalWidth ? "1fr" : "auto"};
@@ -1403,9 +1532,9 @@ var ButtonGroup__Root = styled10.div`
 `;
 
 // src/Card.tsx
-import styled11 from "styled-components";
+import styled12 from "styled-components";
 var STRIP_WIDTH = "3px";
-var Card__Root = styled11(Block__Root)`
+var Card__Root = styled12(Block__Root)`
   --gap-related: var(--gap-related-compact);
   --gap-section: var(--gap-section-compact);
   --bleed-inline: 0px;
@@ -1458,7 +1587,7 @@ var Card = Object.assign(CardRoot, BLOCK_PARTS);
 // src/CommandButton/CommandButton.tsx
 import { classifyCommandRejection } from "@ksp-gonogo/sitrep-sdk";
 import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
-import styled15, { css as css3, keyframes as keyframes3 } from "styled-components";
+import styled16, { css as css3, keyframes as keyframes3 } from "styled-components";
 
 // src/CommandDelay/commandOutcomes.ts
 function commandOutcomes(handle) {
@@ -1481,10 +1610,10 @@ import {
   useRef as useRef3,
   useState as useState3
 } from "react";
-import styled12 from "styled-components";
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import styled13 from "styled-components";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var FitLabelButton = forwardRef2(function FitLabelButton2({ label, icon, type, ...rest }, ref) {
-  return /* @__PURE__ */ jsx13("button", { ref, type: type ?? "button", "aria-label": label, ...rest, children: /* @__PURE__ */ jsx13(FitLabel, { label, icon }) });
+  return /* @__PURE__ */ jsx14("button", { ref, type: type ?? "button", "aria-label": label, ...rest, children: /* @__PURE__ */ jsx14(FitLabel, { label, icon }) });
 });
 function FitLabel({ label, icon }) {
   const contentRef = useRef3(null);
@@ -1504,12 +1633,12 @@ function FitLabel({ label, icon }) {
     observer.observe(ghost);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsxs11(FitLabelButton__Content, { ref: contentRef, children: [
-    /* @__PURE__ */ jsx13(FitLabelButton__Ghost, { ref: ghostRef, "aria-hidden": "true", children: label }),
-    fits ? /* @__PURE__ */ jsx13(FitLabelButton__Label, { "aria-hidden": "true", children: label }) : /* @__PURE__ */ jsx13(FitLabelButton__Icon, { "aria-hidden": "true", "data-fit-label-icon": "", children: icon })
+  return /* @__PURE__ */ jsxs12(FitLabelButton__Content, { ref: contentRef, children: [
+    /* @__PURE__ */ jsx14(FitLabelButton__Ghost, { ref: ghostRef, "aria-hidden": "true", children: label }),
+    fits ? /* @__PURE__ */ jsx14(FitLabelButton__Label, { "aria-hidden": "true", children: label }) : /* @__PURE__ */ jsx14(FitLabelButton__Icon, { "aria-hidden": "true", "data-fit-label-icon": "", children: icon })
   ] });
 }
-var FitLabelButton__Content = styled12.span`
+var FitLabelButton__Content = styled13.span`
   position: relative;
   display: flex;
   align-items: center;
@@ -1518,7 +1647,7 @@ var FitLabelButton__Content = styled12.span`
   min-width: 0;
   width: 100%;
 `;
-var FitLabelButton__Ghost = styled12.span`
+var FitLabelButton__Ghost = styled13.span`
   position: absolute;
   left: 0;
   top: 0;
@@ -1526,30 +1655,30 @@ var FitLabelButton__Ghost = styled12.span`
   pointer-events: none;
   white-space: nowrap;
 `;
-var FitLabelButton__Label = styled12.span`
+var FitLabelButton__Label = styled13.span`
   /* nowrap, so a label that does not fit overflows and the measurement stays honest. */
   white-space: nowrap;
 `;
-var FitLabelButton__Icon = styled12.span`
+var FitLabelButton__Icon = styled13.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
 `;
 
 // src/CommandButton/InFlightFace.tsx
-import styled14 from "styled-components";
+import styled15 from "styled-components";
 
 // src/Spinner.tsx
-import styled13, { keyframes as keyframes2 } from "styled-components";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import styled14, { keyframes as keyframes2 } from "styled-components";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Spinner({
   size = 12,
   thickness = 2,
   color = "var(--color-accent-fg)",
-  ariaLabel = "Loading",
+  "aria-label": ariaLabel = "Loading",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SpinnerEl,
     {
       ...rest,
@@ -1564,7 +1693,7 @@ function Spinner({
 var spin = keyframes2`
   to { transform: rotate(360deg); }
 `;
-var SpinnerEl = styled13.span`
+var SpinnerEl = styled14.span`
   display: inline-block;
   width: ${({ $size }) => `${$size}px`};
   height: ${({ $size }) => `${$size}px`};
@@ -1580,34 +1709,34 @@ var SpinnerEl = styled13.span`
 `;
 
 // src/CommandButton/InFlightFace.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function InFlightFace({
   holds,
   label,
   spinnerSize = 12
 }) {
-  return /* @__PURE__ */ jsxs12(InFlightFace__Root, { children: [
-    /* @__PURE__ */ jsx15(InFlightFace__Hold, { "aria-hidden": "true", children: holds }),
-    /* @__PURE__ */ jsx15(InFlightFace__Spinner, { children: /* @__PURE__ */ jsx15(Spinner, { size: spinnerSize, ariaLabel: label }) })
+  return /* @__PURE__ */ jsxs13(InFlightFace__Root, { children: [
+    /* @__PURE__ */ jsx16(InFlightFace__Hold, { "aria-hidden": "true", children: holds }),
+    /* @__PURE__ */ jsx16(InFlightFace__Spinner, { children: /* @__PURE__ */ jsx16(Spinner, { size: spinnerSize, "aria-label": label }) })
   ] });
 }
-var InFlightFace__Root = styled14.span`
+var InFlightFace__Root = styled15.span`
   display: inline-grid;
   & > * {
     grid-area: 1 / 1;
   }
 `;
-var InFlightFace__Hold = styled14.span`
+var InFlightFace__Hold = styled15.span`
   visibility: hidden;
 `;
-var InFlightFace__Spinner = styled14.span`
+var InFlightFace__Spinner = styled15.span`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 
 // src/CommandButton/CommandButton.tsx
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var ARM_TIMEOUT_MS = 4e3;
 var REFUSAL_TIMEOUT_MS = 8e3;
 var PENDING_BACKSTOP_MS = 3e4;
@@ -1774,7 +1903,7 @@ function CommandButton({
   confirmAriaLabel,
   pendingAriaLabel,
   blockedAriaLabel,
-  active,
+  pressed,
   variant = "ghost",
   tone = "neutral",
   icon,
@@ -1811,7 +1940,7 @@ function CommandButton({
   }, [onPressReady, isPending, press]);
   const resolveBody = () => {
     if (isPending)
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         InFlightFace,
         {
           holds: label,
@@ -1828,10 +1957,10 @@ function CommandButton({
   };
   const resolved = resolveBody();
   const fitWord = icon !== void 0 && typeof resolved === "string";
-  const body = fitWord ? /* @__PURE__ */ jsx16(FitLabel, { label: resolved, icon: isArmed ? confirmIcon ?? icon : icon }) : resolved;
+  const body = fitWord ? /* @__PURE__ */ jsx17(FitLabel, { label: resolved, icon: isArmed ? confirmIcon ?? icon : icon }) : resolved;
   const reserve = icon === void 0 && typeof label === "string" && typeof confirmLabel === "string" && !isRefused && !isLost && !isFound && !isShowingReason;
   const outcome = isRefused ? refusalText : isLost ? lossText : isFound ? foundText : null;
-  const filled = active === true || isArmed || isRefused;
+  const filled = pressed === true || isArmed || isRefused;
   const drawnTone = commandTone({
     restTone: variant === "primary" ? tone : "neutral",
     filled,
@@ -1841,12 +1970,12 @@ function CommandButton({
     confirmTone,
     tone
   });
-  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    /* @__PURE__ */ jsx17(
       Tooltip,
       {
         text: foundText ?? refusalText ?? (isPending ? pendingLabel : title),
-        children: /* @__PURE__ */ jsx16(
+        children: /* @__PURE__ */ jsx17(
           CommandButton__Body,
           {
             type: "button",
@@ -1857,7 +1986,7 @@ function CommandButton({
             $pressed: filled,
             $armed: isArmed,
             $blocked: isBlocked,
-            "aria-pressed": active,
+            "aria-pressed": pressed,
             "aria-busy": isPending || void 0,
             "aria-disabled": isBlocked || isPending || void 0,
             disabled,
@@ -1870,12 +1999,12 @@ function CommandButton({
             "data-rest-label": reserve ? label : void 0,
             "data-armed-label": reserve ? confirmLabel : void 0,
             ...rest,
-            children: reserve ? /* @__PURE__ */ jsx16(CommandButton__Face, { children: body }) : body
+            children: reserve ? /* @__PURE__ */ jsx17(CommandButton__Face, { children: body }) : body
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx16(LiveRegion, { visuallyHidden: true, children: outcome })
+    /* @__PURE__ */ jsx17(LiveRegion, { visuallyHidden: true, children: outcome })
   ] });
 }
 function commandTone(p) {
@@ -1889,7 +2018,7 @@ var armedPulse = keyframes3`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.65; }
 `;
-var CommandButton__Face = styled15.span`
+var CommandButton__Face = styled16.span`
   grid-area: 1 / 1;
   /* First in the cell's order, so the button's baseline is the face's and not an invisible sizer's. */
   order: -1;
@@ -1898,7 +2027,7 @@ var CommandButton__Face = styled15.span`
   justify-content: center;
   gap: var(--gap-glyph);
 `;
-var CommandButton__Body = styled15(Button__Body)`
+var CommandButton__Body = styled16(Button__Body)`
   letter-spacing: 0.04em;
 
   /* Shrinks below its word so the word can be measured and give way to the icon. */
@@ -1957,10 +2086,10 @@ var CommandButton__Body = styled15(Button__Body)`
 
 // src/CommandDelay/CommandGroup.tsx
 import { useEffect as useEffect4, useId as useId3 } from "react";
-import styled16, { css as css4 } from "styled-components";
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import styled17, { css as css4 } from "styled-components";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function CommandGroup({
-  value: value4,
+  value: value5,
   onCommit,
   gated = false,
   children,
@@ -1979,10 +2108,10 @@ function CommandGroup({
     );
   }, [named, commitAriaLabel]);
   const reasonId = useId3();
-  return /* @__PURE__ */ jsxs14(CommandGroup__Root, { "data-gated": gated, $orientation: orientation, children: [
-    /* @__PURE__ */ jsx17(CommandGroup__Inputs, { $wrap: wrap, children }),
-    gated && /* @__PURE__ */ jsx17(VisuallyHidden, { id: reasonId, children: gatedReason }),
-    /* @__PURE__ */ jsx17(Tooltip, { text: gated ? gatedReason : void 0, announce: false, children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs15(CommandGroup__Root, { "data-gated": gated, $orientation: orientation, children: [
+    /* @__PURE__ */ jsx18(CommandGroup__Inputs, { $wrap: wrap, children }),
+    gated && /* @__PURE__ */ jsx18(VisuallyHidden, { id: reasonId, children: gatedReason }),
+    /* @__PURE__ */ jsx18(Tooltip, { text: gated ? gatedReason : void 0, announce: false, children: /* @__PURE__ */ jsx18(
       CommandGroup__CommitButton,
       {
         type: "button",
@@ -1994,26 +2123,26 @@ function CommandGroup({
         "aria-label": commitAriaLabel,
         onClick: () => {
           if (gated) return;
-          onCommit(value4);
+          onCommit(value5);
         },
         children: commitLabel
       }
     ) })
   ] });
 }
-var CommandGroup__Root = styled16.div`
+var CommandGroup__Root = styled17.div`
   display: flex;
   flex-direction: ${({ $orientation }) => $orientation};
   ${({ $orientation }) => $orientation === "row" && "align-items: center;"}
   gap: var(--gap-control-row);
 `;
-var CommandGroup__Inputs = styled16.div`
+var CommandGroup__Inputs = styled17.div`
   display: flex;
   flex-wrap: ${({ $wrap }) => $wrap ? "wrap" : "nowrap"};
   gap: var(--gap-control-row);
   align-items: center;
 `;
-var CommandGroup__CommitButton = styled16.button`
+var CommandGroup__CommitButton = styled17.button`
   align-self: ${({ $orientation }) => $orientation === "row" ? "center" : "flex-start"};
   /* A commit control must not be squeezed to nothing by the inputs beside it. */
   ${({ $orientation }) => $orientation === "row" && "flex-shrink: 0;"}
@@ -2051,8 +2180,8 @@ var CommandGroup__CommitButton = styled16.button`
 
 // src/CommandDelay/SignalDelayBadge.tsx
 import { value } from "@ksp-gonogo/sitrep-sdk";
-import styled17 from "styled-components";
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import styled18 from "styled-components";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function SignalDelayBadge({
   oneWaySeconds,
   delayReading,
@@ -2061,7 +2190,7 @@ function SignalDelayBadge({
   const oneWay = value("s", oneWaySeconds);
   return (
     // Not a live region: the delay changes with every sample.
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs16(
       SignalDelayBadge__Chip,
       {
         className,
@@ -2069,7 +2198,7 @@ function SignalDelayBadge({
         "aria-label": "Signal delay",
         children: [
           "one-way ~",
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             Unit,
             {
               value: withDelayCurrency(oneWay, delayReading),
@@ -2081,7 +2210,7 @@ function SignalDelayBadge({
     )
   );
 }
-var SignalDelayBadge__Chip = styled17.div`
+var SignalDelayBadge__Chip = styled18.div`
   /* Non-growing: it shares the console's corner row, and its text is short by construction. */
   flex: 0 0 auto;
   padding: var(--inset-chip-readout);
@@ -2112,8 +2241,8 @@ function useRailEntry(entry) {
 
 // src/ComposerBar.tsx
 import { useId as useId5 } from "react";
-import styled18, { css as css5 } from "styled-components";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import styled19, { css as css5 } from "styled-components";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function ComposerBar({
   blocked = false,
   flag,
@@ -2128,12 +2257,12 @@ function ComposerBar({
 }) {
   const { anchor, tip } = useTooltip(sendTooltip);
   const described = useId5();
-  return /* @__PURE__ */ jsxs16(ComposerBar__Row, { $blocked: blocked, ...rest, children: [
-    prompt !== void 0 && /* @__PURE__ */ jsx19(ComposerBar__Prompt, { "aria-hidden": "true", children: prompt }),
+  return /* @__PURE__ */ jsxs17(ComposerBar__Row, { $blocked: blocked, ...rest, children: [
+    prompt !== void 0 && /* @__PURE__ */ jsx20(ComposerBar__Prompt, { "aria-hidden": "true", children: prompt }),
     children,
     onSend !== void 0 && /* The anchor is the wrapper, not the button: a disabled button raises no pointer events. */
-    /* @__PURE__ */ jsxs16(ComposerBar__SendAnchor, { ...anchor, children: [
-      /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs17(ComposerBar__SendAnchor, { ...anchor, children: [
+      /* @__PURE__ */ jsx20(
         ComposerBar__Send,
         {
           type: "button",
@@ -2142,17 +2271,17 @@ function ComposerBar({
           $icon: sendVariant === "icon",
           ...sendTooltip ? { "aria-describedby": described } : {},
           ...sendVariant === "icon" ? { "aria-label": sendLabel } : {},
-          children: sendVariant === "icon" ? /* @__PURE__ */ jsx19(SendIcon, { size: 16 }) : sendLabel
+          children: sendVariant === "icon" ? /* @__PURE__ */ jsx20(SendIcon, { size: 16 }) : sendLabel
         }
       ),
-      sendTooltip && /* @__PURE__ */ jsx19(VisuallyHidden, { id: described, children: sendTooltip.replace("\n", ". ") }),
+      sendTooltip && /* @__PURE__ */ jsx20(VisuallyHidden, { id: described, children: sendTooltip.replace("\n", ". ") }),
       tip
     ] }),
     flag !== void 0 && // `role="status"`, never `alert`: a lost path is ambient, not an interruption.
-    /* @__PURE__ */ jsx19(ComposerBar__Flag, { $blocked: blocked, role: "status", children: flag })
+    /* @__PURE__ */ jsx20(ComposerBar__Flag, { $blocked: blocked, role: "status", children: flag })
   ] });
 }
-var ComposerBar__Row = styled18.div`
+var ComposerBar__Row = styled19.div`
   position: relative;
   flex: 0 0 auto;
   display: flex;
@@ -2164,13 +2293,13 @@ var ComposerBar__Row = styled18.div`
     ${({ $blocked }) => $blocked ? "var(--color-nogo-text)" : "var(--console-tone-fg, var(--color-accent-fg))"};
   border-radius: var(--radius-regular);
 `;
-var ComposerBar__Prompt = styled18.span`
+var ComposerBar__Prompt = styled19.span`
   flex: 0 0 auto;
   color: var(--console-tone-fg, var(--color-accent-fg));
   font-weight: bold;
   margin-right: var(--gap-prompt-glyph);
 `;
-var ComposerBar__SendAnchor = styled18.span`
+var ComposerBar__SendAnchor = styled19.span`
   display: inline-flex;
 
   /* A disabled button swallows pointer events, so they go to the anchor instead. */
@@ -2178,7 +2307,7 @@ var ComposerBar__SendAnchor = styled18.span`
     pointer-events: none;
   }
 `;
-var ComposerBar__Send = styled18(Button)`
+var ComposerBar__Send = styled19(Button)`
   flex: 0 0 auto;
   margin-left: auto;
   font-size: var(--font-size-compact);
@@ -2197,7 +2326,7 @@ var ComposerBar__Send = styled18(Button)`
       }
     `}
 `;
-var ComposerBar__Flag = styled18.div`
+var ComposerBar__Flag = styled19.div`
   position: absolute;
   /* Straddles the top border by half its own height, which tracks the font size. */
   top: 0;
@@ -2227,8 +2356,8 @@ var ComposerBar__Flag = styled18.div`
 `;
 
 // src/ConsoleFrame.tsx
-import styled19, { css as css6 } from "styled-components";
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import styled20, { css as css6 } from "styled-components";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function ConsoleFrame({
   tone = "accent",
   queue,
@@ -2241,16 +2370,16 @@ function ConsoleFrame({
   const straddles = standing !== void 0 && Boolean(composer);
   return (
     // A stable structural hook, since containment is invisible to a role query.
-    /* @__PURE__ */ jsxs17(ConsoleFrame__Box, { "data-console-frame": "", $tone: tone, ...rest, children: [
-      /* @__PURE__ */ jsx20(ConsoleFrame__Surface, { children }),
-      hasFoot && /* @__PURE__ */ jsxs17(ConsoleFrame__Foot, { $straddled: straddles, children: [
+    /* @__PURE__ */ jsxs18(ConsoleFrame__Box, { "data-console-frame": "", $tone: tone, ...rest, children: [
+      /* @__PURE__ */ jsx21(ConsoleFrame__Surface, { children }),
+      hasFoot && /* @__PURE__ */ jsxs18(ConsoleFrame__Foot, { $straddled: straddles, children: [
         queue,
         standing !== void 0 && /*
           A structural hook for the same reason. BEFORE the composer, so
           in the in-flow case the reading is announced before the control
           it sits above.
         */
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           ConsoleFrame__Standing,
           {
             "data-console-standing": "",
@@ -2263,7 +2392,7 @@ function ConsoleFrame({
     ] })
   );
 }
-var ConsoleFrame__Box = styled19.div`
+var ConsoleFrame__Box = styled20.div`
   flex: 1 1 auto;
   min-height: 0;
   min-width: 0;
@@ -2281,14 +2410,14 @@ var ConsoleFrame__Box = styled19.div`
           --console-tone-fg: var(--color-accent-fg);
         `}
 `;
-var ConsoleFrame__Surface = styled19.div`
+var ConsoleFrame__Surface = styled20.div`
   position: relative;
   flex: 1 1 auto;
   min-height: 0;
   min-width: 0;
   display: flex;
 `;
-var ConsoleFrame__Standing = styled19.div`
+var ConsoleFrame__Standing = styled20.div`
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -2309,7 +2438,7 @@ var ConsoleFrame__Standing = styled19.div`
         `
 )}
 `;
-var ConsoleFrame__Foot = styled19.div`
+var ConsoleFrame__Foot = styled20.div`
   position: relative;
   flex: 0 0 auto;
   min-width: 0;
@@ -2324,7 +2453,7 @@ var ConsoleFrame__Foot = styled19.div`
 `;
 
 // src/Console.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var QUEUE_LABEL = "Uplink queue";
 function Console({
   tone,
@@ -2347,12 +2476,12 @@ function Console({
   const showStrip = inFlight !== void 0 && (presentation === "strip" || inFlightFrozenAtDispatch && presentation !== "badge");
   return (
     // Two slots rather than one `footer`, so the frame knows whether there is a composer to place the reading against.
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       ConsoleFrame,
       {
         ...tone !== void 0 ? { tone } : {},
         ...badgeSeconds !== null ? {
-          standing: /* @__PURE__ */ jsx21(
+          standing: /* @__PURE__ */ jsx22(
             SignalDelayBadge,
             {
               oneWaySeconds: badgeSeconds,
@@ -2360,7 +2489,7 @@ function Console({
             }
           )
         } : {},
-        ...showStrip ? { queue: /* @__PURE__ */ jsx21(InFlightList, { items: inFlight, ariaLabel: QUEUE_LABEL }) } : {},
+        ...showStrip ? { queue: /* @__PURE__ */ jsx22(InFlightList, { items: inFlight, "aria-label": QUEUE_LABEL }) } : {},
         ...composer !== void 0 ? { composer } : {},
         ...rest,
         children
@@ -2370,8 +2499,8 @@ function Console({
 }
 
 // src/ContainerBreak.tsx
-import styled20 from "styled-components";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import styled21 from "styled-components";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function ContainerBreak({
   at,
   narrow,
@@ -2379,9 +2508,9 @@ function ContainerBreak({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx22(ContainerBreak__Root, { $at: at, $narrow: narrow, $wide: wide, ...rest, children });
+  return /* @__PURE__ */ jsx23(ContainerBreak__Root, { $at: at, $narrow: narrow, $wide: wide, ...rest, children });
 }
-var ContainerBreak__Root = styled20.div`
+var ContainerBreak__Root = styled21.div`
   ${({ $narrow }) => $narrow}
   @container (min-width: ${({ $at }) => $at}px) {
     ${({ $wide }) => $wide}
@@ -2442,12 +2571,12 @@ import {
   useRef as useRef5,
   useState as useState5
 } from "react";
-import styled21 from "styled-components";
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import styled22 from "styled-components";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var RETIRED_MESSAGE = "is no longer available";
 function DataKeyPicker({
   keys,
-  value: value4,
+  value: value5,
   onChange,
   clearable = false,
   placeholder = "Search...",
@@ -2464,8 +2593,8 @@ function DataKeyPicker({
   const optionIdPrefix = useId6();
   const retiredId = useId6();
   const optionId = (key) => `${optionIdPrefix}-${key}`;
-  const selectedOption = keys.find((k) => k.key === value4);
-  const retired = value4 !== null && value4 !== "" && selectedOption === void 0 && keys.length > 0;
+  const selectedOption = keys.find((k) => k.key === value5);
+  const retired = value5 !== null && value5 !== "" && selectedOption === void 0 && keys.length > 0;
   const filtered = useMemo(
     () => filterComboboxOptions(keys, query),
     [keys, query]
@@ -2531,18 +2660,18 @@ function DataKeyPicker({
     document.addEventListener("pointerdown", onOutside);
     return () => document.removeEventListener("pointerdown", onOutside);
   }, [open, closePicker]);
-  const displayValue = open ? query : selectedOption?.label ?? value4 ?? "";
+  const displayValue = open ? query : selectedOption?.label ?? value5 ?? "";
   const activeOption = open && activeIndex >= 0 ? flatOptions[activeIndex] : void 0;
-  return /* @__PURE__ */ jsxs18(Container, { ref: containerRef, children: [
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs19(Container, { ref: containerRef, children: [
+    /* @__PURE__ */ jsx24(
       PickerInput,
       {
         ref: inputRef,
         id,
         "aria-label": ariaLabel,
         value: displayValue,
-        placeholder: value4 ? void 0 : placeholder,
-        $hasValue: !!value4 && !open,
+        placeholder: value5 ? void 0 : placeholder,
+        $hasValue: !!value5 && !open,
         $retired: retired && !open,
         "aria-invalid": retired && !open ? true : void 0,
         "aria-describedby": retired && !open ? retiredId : void 0,
@@ -2560,8 +2689,8 @@ function DataKeyPicker({
         "aria-activedescendant": activeOption ? optionId(activeOption.key) : void 0
       }
     ),
-    retired && !open && /* @__PURE__ */ jsx23(RetiredNote, { id: retiredId, children: `This ${subjectNoun} ${RETIRED_MESSAGE}. Pick another.` }),
-    clearable && value4 && !open && /* @__PURE__ */ jsx23(
+    retired && !open && /* @__PURE__ */ jsx24(RetiredNote, { id: retiredId, children: `This ${subjectNoun} ${RETIRED_MESSAGE}. Pick another.` }),
+    clearable && value5 && !open && /* @__PURE__ */ jsx24(
       ClearButton,
       {
         type: "button",
@@ -2573,30 +2702,30 @@ function DataKeyPicker({
         children: "\xD7"
       }
     ),
-    open && /* @__PURE__ */ jsx23(
+    open && /* @__PURE__ */ jsx24(
       ComboboxListbox,
       {
         id: listboxId,
         groups: sortedGroups,
         flatOptions,
         activeIndex,
-        selectedKey: value4,
+        selectedKey: value5,
         getOptionId: optionId,
         onHoverIndex: setActiveIndex,
         onSelectKey: selectOption,
-        ariaLabel: ariaLabel ?? "Data keys",
-        renderItem: (opt) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
-          /* @__PURE__ */ jsx23(ItemLabel, { children: opt.label ?? opt.key }),
-          opt.unit && /* @__PURE__ */ jsx23(ItemUnit, { children: opt.unit })
+        "aria-label": ariaLabel ?? "Data keys",
+        renderItem: (opt) => /* @__PURE__ */ jsxs19(Fragment5, { children: [
+          /* @__PURE__ */ jsx24(ItemLabel, { children: opt.label ?? opt.key }),
+          opt.unit && /* @__PURE__ */ jsx24(ItemUnit, { children: opt.unit })
         ] })
       }
     )
   ] });
 }
-var Container = styled21.div`
+var Container = styled22.div`
   position: relative;
 `;
-var PickerInput = styled21.input`
+var PickerInput = styled22.input`
   background: var(--color-surface-raised);
   border: 1px solid ${({ $retired }) => $retired ? "var(--color-nogo-text)" : "var(--color-border-strong)"};
   border-radius: var(--radius-regular);
@@ -2619,7 +2748,7 @@ var PickerInput = styled21.input`
     color: var(--color-text-faint);
   }
 `;
-var ClearButton = styled21.button`
+var ClearButton = styled22.button`
   position: absolute;
   right: 6px;
   top: 50%;
@@ -2638,24 +2767,24 @@ var ClearButton = styled21.button`
 
   ${focusRing}
 `;
-var RetiredNote = styled21.div`
+var RetiredNote = styled22.div`
   color: var(--color-nogo-text);
   font-size: var(--font-size-compact);
   margin-top: var(--gap-caption);
 `;
-var ItemLabel = styled21.span`
+var ItemLabel = styled22.span`
   font-size: var(--font-size-compact);
   color: var(--color-text-primary);
 `;
-var ItemUnit = styled21.span`
+var ItemUnit = styled22.span`
   font-size: var(--font-size-compact);
   color: var(--color-text-muted);
   margin-left: var(--gap-trailing-mark);
 `;
 
 // src/DataLine.tsx
-import styled22, { css as css7 } from "styled-components";
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import styled23, { css as css7 } from "styled-components";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 function DataLine({
   label,
   lead,
@@ -2664,16 +2793,16 @@ function DataLine({
   aligned = false,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs19(DataLine__Root, { $aligned: aligned, ...rest, children: [
-    /* @__PURE__ */ jsx24(DataLine__Label, { children: label }),
-    /* @__PURE__ */ jsxs19(DataLine__Value, { $tone: tone, children: [
+  return /* @__PURE__ */ jsxs20(DataLine__Root, { $aligned: aligned, ...rest, children: [
+    /* @__PURE__ */ jsx25(DataLine__Label, { children: label }),
+    /* @__PURE__ */ jsxs20(DataLine__Value, { $tone: tone, children: [
       lead,
       children
     ] })
   ] });
 }
 var LABEL_COLUMN = "7ch";
-var DataLine__Root = styled22.div`
+var DataLine__Root = styled23.div`
   display: ${({ $aligned }) => $aligned ? "grid" : "flex"};
   align-items: baseline;
   gap: var(--gap-data-line);
@@ -2684,13 +2813,13 @@ var DataLine__Root = styled22.div`
           flex-wrap: wrap;
         `}
 `;
-var DataLine__Label = styled22.span`
+var DataLine__Label = styled23.span`
   font-size: var(--font-size-caption);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--color-text-muted);
 `;
-var DataLine__Value = styled22.span`
+var DataLine__Value = styled23.span`
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
@@ -2703,11 +2832,11 @@ var DataLine__Value = styled22.span`
 
 // src/DataTable.tsx
 import { Fragment as Fragment6, useState as useState7 } from "react";
-import styled24 from "styled-components";
+import styled25 from "styled-components";
 
 // src/inlineOverflow.tsx
 import { useEffect as useEffect7, useRef as useRef6, useState as useState6 } from "react";
-import styled23 from "styled-components";
+import styled24 from "styled-components";
 var NONE = { left: false, right: false };
 function useInlineOverflow(el) {
   const [overflow, setOverflow] = useState6(NONE);
@@ -2739,7 +2868,7 @@ function useInlineOverflow(el) {
   }, [el]);
   return overflow;
 }
-var InlineOverflowGlow = styled23.div`
+var InlineOverflowGlow = styled24.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2760,9 +2889,9 @@ var InlineOverflowGlow = styled23.div`
 `;
 
 // src/DataTable.tsx
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function cellContent(col, row) {
-  if (col.value !== void 0) return /* @__PURE__ */ jsx25(Unit, { value: col.value(row) ?? null });
+  if (col.value !== void 0) return /* @__PURE__ */ jsx26(Unit, { value: col.value(row) ?? null });
   return col.render(row);
 }
 function DataTable({
@@ -2780,10 +2909,10 @@ function DataTable({
   const [scroller, setScroller] = useState7(null);
   const overflow = useInlineOverflow(scroller);
   const tabIndex = useKeyboardScrollable(scroller);
-  return /* @__PURE__ */ jsxs20(DataTable__Shell, { className, children: [
-    /* @__PURE__ */ jsx25(DataTable__Scroller, { ref: setScroller, tabIndex, children: /* @__PURE__ */ jsxs20(DataTable__Table, { children: [
-      /* @__PURE__ */ jsx25(DataTable__Caption, { children: caption }),
-      /* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsx25("tr", { children: columns.map((col) => /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs21(DataTable__Shell, { className, children: [
+    /* @__PURE__ */ jsx26(DataTable__Scroller, { ref: setScroller, tabIndex, children: /* @__PURE__ */ jsxs21(DataTable__Table, { children: [
+      /* @__PURE__ */ jsx26(DataTable__Caption, { children: caption }),
+      /* @__PURE__ */ jsx26("thead", { children: /* @__PURE__ */ jsx26("tr", { children: columns.map((col) => /* @__PURE__ */ jsx26(
         DataTable__HeaderCell,
         {
           scope: "col",
@@ -2796,9 +2925,9 @@ function DataTable({
         },
         col.key
       )) }) }),
-      total === 0 && empty !== void 0 && /* @__PURE__ */ jsx25("tbody", { children: /* @__PURE__ */ jsx25("tr", { children: /* @__PURE__ */ jsx25(DataTable__EmptyCell, { colSpan: columns.length, children: empty }) }) }),
-      groups.map((group) => /* @__PURE__ */ jsxs20("tbody", { children: [
-        group.title !== null && group.title !== void 0 && /* @__PURE__ */ jsx25("tr", { children: /* @__PURE__ */ jsx25(
+      total === 0 && empty !== void 0 && /* @__PURE__ */ jsx26("tbody", { children: /* @__PURE__ */ jsx26("tr", { children: /* @__PURE__ */ jsx26(DataTable__EmptyCell, { colSpan: columns.length, children: empty }) }) }),
+      groups.map((group) => /* @__PURE__ */ jsxs21("tbody", { children: [
+        group.title !== null && group.title !== void 0 && /* @__PURE__ */ jsx26("tr", { children: /* @__PURE__ */ jsx26(
           DataTable__SectionCell,
           {
             scope: "rowgroup",
@@ -2810,8 +2939,8 @@ function DataTable({
           const key = rowKey(row);
           const detail = rowDetail?.(row);
           const hasDetail = detail !== null && detail !== void 0 && detail !== false && detail !== "";
-          return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-            /* @__PURE__ */ jsx25(DataTable__Row, { $hasDetail: hasDetail, children: columns.map((col) => /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+            /* @__PURE__ */ jsx26(DataTable__Row, { $hasDetail: hasDetail, children: columns.map((col) => /* @__PURE__ */ jsx26(
               DataTable__Cell,
               {
                 as: col.rowHeader ? "th" : void 0,
@@ -2821,21 +2950,21 @@ function DataTable({
               },
               col.key
             )) }),
-            hasDetail ? /* @__PURE__ */ jsx25("tr", { children: /* @__PURE__ */ jsx25(DataTable__DetailCell, { colSpan: columns.length, children: detail }) }) : null
+            hasDetail ? /* @__PURE__ */ jsx26("tr", { children: /* @__PURE__ */ jsx26(DataTable__DetailCell, { colSpan: columns.length, children: detail }) }) : null
           ] }, key);
         })
       ] }, group.id))
     ] }) }),
-    /* @__PURE__ */ jsx25(InlineOverflowGlow, { $position: "left", $visible: overflow.left }),
-    /* @__PURE__ */ jsx25(InlineOverflowGlow, { $position: "right", $visible: overflow.right })
+    /* @__PURE__ */ jsx26(InlineOverflowGlow, { $position: "left", $visible: overflow.left }),
+    /* @__PURE__ */ jsx26(InlineOverflowGlow, { $position: "right", $visible: overflow.right })
   ] });
 }
-var DataTable__Shell = styled24.div`
+var DataTable__Shell = styled25.div`
   position: relative;
   min-width: 0;
   margin-inline: calc(-1 * var(--bleed-inline));
 `;
-var DataTable__Scroller = styled24.div`
+var DataTable__Scroller = styled25.div`
   display: flex;
   padding-inline: var(--bleed-inline);
   overflow-x: auto;
@@ -2846,12 +2975,12 @@ var DataTable__Scroller = styled24.div`
     display: none;
   }
 `;
-var DataTable__Table = styled24.table`
+var DataTable__Table = styled25.table`
   width: 100%;
   border-collapse: collapse;
   font-size: var(--font-size-compact);
 `;
-var DataTable__Caption = styled24.caption`
+var DataTable__Caption = styled25.caption`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2859,7 +2988,7 @@ var DataTable__Caption = styled24.caption`
   clip-path: inset(50%);
   white-space: nowrap;
 `;
-var DataTable__HeaderCell = styled24.th`
+var DataTable__HeaderCell = styled25.th`
   text-align: ${({ $align }) => $align};
   position: sticky;
   top: 0;
@@ -2875,7 +3004,7 @@ var DataTable__HeaderCell = styled24.th`
   padding: var(--inset-table-cell);
   border-bottom: 1px solid var(--color-border-subtle);
 `;
-var DataTable__SectionCell = styled24.th`
+var DataTable__SectionCell = styled25.th`
   text-align: start;
   background: var(--color-surface-raised);
   color: var(--color-text-muted);
@@ -2886,13 +3015,13 @@ var DataTable__SectionCell = styled24.th`
   padding: var(--inset-table-section);
   border-bottom: 1px solid var(--color-border-subtle);
 `;
-var DataTable__Row = styled24.tr`
+var DataTable__Row = styled25.tr`
   &:not(:last-child) > td,
   &:not(:last-child) > th {
     border-bottom: ${({ $hasDetail }) => $hasDetail ? "none" : "1px solid var(--color-border-subtle)"};
   }
 `;
-var DataTable__Cell = styled24.td`
+var DataTable__Cell = styled25.td`
   text-align: ${({ $align }) => $align};
   font-weight: inherit;
   color: var(--color-text-primary);
@@ -2900,11 +3029,11 @@ var DataTable__Cell = styled24.td`
   font-variant-numeric: tabular-nums;
   vertical-align: baseline;
 `;
-var DataTable__DetailCell = styled24.td`
+var DataTable__DetailCell = styled25.td`
   padding: var(--inset-table-detail);
   border-bottom: 1px solid var(--color-border-subtle);
 `;
-var DataTable__EmptyCell = styled24.td`
+var DataTable__EmptyCell = styled25.td`
   color: var(--color-text-faint);
   font-style: italic;
   padding: var(--inset-table-empty);
@@ -2912,8 +3041,8 @@ var DataTable__EmptyCell = styled24.td`
 
 // src/Dial.tsx
 import { bandIn } from "@ksp-gonogo/sitrep-sdk";
-import styled25 from "styled-components";
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import styled26 from "styled-components";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var TRACK_THICKNESS = 6;
 var HUB_RADIUS = 3;
 var RAISED = { track: 8, hub: 4, needle: 0.92 };
@@ -2934,7 +3063,7 @@ function arcPath(cx, cy, r, a0, a1) {
   return `M ${p0.x.toFixed(2)} ${p0.y.toFixed(2)} A ${r} ${r} 0 ${largeArc} ${sweepFlag} ${p1.x.toFixed(2)} ${p1.y.toFixed(2)}`;
 }
 function Dial({
-  value: value4,
+  value: value5,
   min,
   max,
   width = 120,
@@ -2949,9 +3078,9 @@ function Dial({
   format,
   needleColor = "var(--color-text-primary)",
   trackColor = "var(--color-border-subtle)",
-  ariaLabel
+  "aria-label": ariaLabel
 }) {
-  const resolved = resolveCurrency(value4);
+  const resolved = resolveCurrency(value5);
   const { shown, held, caption, band } = resolved;
   const { anchor, tip } = useTooltip(caption);
   const current = shown?.magnitude ?? Number.NaN;
@@ -2997,14 +3126,14 @@ function Dial({
     r * (raised ? RAISED.needle : 0.88),
     angleOf(display)
   );
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     Dial__Meter,
     {
       ...figureAttributes(resolved),
       ...anchor,
       ...hasFigure ? {
         role: "meter",
-        "aria-label": sayHeld(ariaLabel ?? "Dial", caption),
+        "aria-label": sayHeld(ariaLabel, caption),
         ...heldNameMarker(caption),
         "aria-valuenow": display,
         "aria-valuemin": axisMin,
@@ -3013,11 +3142,11 @@ function Dial({
       } : {
         /* With no value to state, the face is an image rather than a meter at its minimum. */
         role: "img",
-        "aria-label": sayHeld(`${ariaLabel ?? "Dial"}: ${spoken}`, caption),
+        "aria-label": sayHeld(`${ariaLabel}: ${spoken}`, caption),
         ...heldNameMarker(caption)
       },
       children: [
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs22(
           "svg",
           {
             width,
@@ -3031,7 +3160,7 @@ function Dial({
               height: "auto"
             },
             children: [
-              r > 0 && (isFullCircle ? /* @__PURE__ */ jsx26(
+              r > 0 && (isFullCircle ? /* @__PURE__ */ jsx27(
                 "circle",
                 {
                   cx,
@@ -3041,7 +3170,7 @@ function Dial({
                   stroke: trackColor,
                   strokeWidth: trackThickness
                 }
-              ) : /* @__PURE__ */ jsx26(
+              ) : /* @__PURE__ */ jsx27(
                 "path",
                 {
                   d: arcPath(cx, cy, r, startAngle, startAngle + sweep),
@@ -3063,7 +3192,7 @@ function Dial({
                   if (angle === null) return [];
                   const end = pointAt(cx, cy, r, angle);
                   return [
-                    /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsx27(
                       "circle",
                       {
                         "data-dial-cap": "",
@@ -3081,7 +3210,7 @@ function Dial({
                 const lo = onAxis(z.from.min(z.to));
                 const hi = onAxis(z.from.max(z.to));
                 if (!hi.greaterThan(lo)) return null;
-                return /* @__PURE__ */ jsx26(
+                return /* @__PURE__ */ jsx27(
                   "path",
                   {
                     d: arcPath(cx, cy, r, onFace(lo), onFace(hi)),
@@ -3099,8 +3228,8 @@ function Dial({
                 const outer = pointAt(cx, cy, r, a);
                 const inner = pointAt(cx, cy, r - trackThickness, a);
                 const labelPt = pointAt(cx, cy, r - trackThickness - 8, a);
-                return /* @__PURE__ */ jsxs21("g", { children: [
-                  /* @__PURE__ */ jsx26(
+                return /* @__PURE__ */ jsxs22("g", { children: [
+                  /* @__PURE__ */ jsx27(
                     "line",
                     {
                       x1: inner.x,
@@ -3111,7 +3240,7 @@ function Dial({
                       strokeWidth: 1
                     }
                   ),
-                  tk.label && /* @__PURE__ */ jsx26(
+                  tk.label && /* @__PURE__ */ jsx27(
                     "text",
                     {
                       x: labelPt.x,
@@ -3129,7 +3258,7 @@ function Dial({
                 const a = onFace(onAxis(drawnInterval[end]));
                 const inner = pointAt(cx, cy, r - trackThickness / 2, a);
                 const outer = pointAt(cx, cy, r + trackThickness / 2, a);
-                return /* @__PURE__ */ jsx26(
+                return /* @__PURE__ */ jsx27(
                   InstrumentBound,
                   {
                     end,
@@ -3141,8 +3270,8 @@ function Dial({
                   end
                 );
               }),
-              r > 0 && hasFigure && /* @__PURE__ */ jsxs21(Fragment7, { children: [
-                /* @__PURE__ */ jsx26(
+              r > 0 && hasFigure && /* @__PURE__ */ jsxs22(Fragment7, { children: [
+                /* @__PURE__ */ jsx27(
                   "line",
                   {
                     x1: cx,
@@ -3154,9 +3283,9 @@ function Dial({
                     strokeLinecap: "round"
                   }
                 ),
-                /* @__PURE__ */ jsx26("circle", { cx, cy, r: hubRadius, fill: needleColor })
+                /* @__PURE__ */ jsx27("circle", { cx, cy, r: hubRadius, fill: needleColor })
               ] }),
-              /* @__PURE__ */ jsxs21(
+              /* @__PURE__ */ jsxs22(
                 "text",
                 {
                   x: cx,
@@ -3167,7 +3296,7 @@ function Dial({
                   fill: centreLabel === null ? "var(--color-text-muted)" : "var(--color-text-primary)",
                   children: [
                     centreLabel ?? NULL_DISPLAY,
-                    held && centreLabel !== null && /* @__PURE__ */ jsx26(
+                    held && centreLabel !== null && /* @__PURE__ */ jsx27(
                       InstrumentHeldMark,
                       {
                         size: raised ? 7 : 6,
@@ -3185,19 +3314,19 @@ function Dial({
     }
   );
 }
-var Dial__Meter = styled25.div`
+var Dial__Meter = styled26.div`
   display: block;
   max-width: 100%;
 `;
 
 // src/Disclosure.tsx
 import { useId as useId7, useRef as useRef7, useState as useState8 } from "react";
-import styled26, { css as css8 } from "styled-components";
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import styled27, { css as css8 } from "styled-components";
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function Disclosure({
   label,
   children,
-  ariaLabel,
+  "aria-label": ariaLabel,
   className,
   variant = "popover",
   panelHeight = "cap",
@@ -3221,11 +3350,11 @@ function Disclosure({
     "aria-label": ariaLabel,
     onClick: () => setOpen((v) => !v)
   };
-  const triggerBody = /* @__PURE__ */ jsxs22(Fragment8, { children: [
+  const triggerBody = /* @__PURE__ */ jsxs23(Fragment8, { children: [
     resolvedLabel,
-    showChevron && /* @__PURE__ */ jsx27(Disclosure__Chevron, { $open: open, children: /* @__PURE__ */ jsx27(ChevronRightIcon, { size: "var(--icon-size-control)" }) })
+    showChevron && /* @__PURE__ */ jsx28(Disclosure__Chevron, { $open: open, children: /* @__PURE__ */ jsx28(ChevronRightIcon, { size: "var(--icon-size-control)" }) })
   ] });
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     Disclosure__Root,
     {
       className,
@@ -3237,7 +3366,7 @@ function Disclosure({
         }
       },
       children: [
-        asButton ? /* @__PURE__ */ jsx27(
+        asButton ? /* @__PURE__ */ jsx28(
           Disclosure__ButtonTrigger,
           {
             ...triggerProps,
@@ -3246,7 +3375,7 @@ function Disclosure({
             $inline: variant === "inline",
             children: triggerBody
           }
-        ) : /* @__PURE__ */ jsx27(
+        ) : /* @__PURE__ */ jsx28(
           Disclosure__Trigger,
           {
             ...triggerProps,
@@ -3255,7 +3384,7 @@ function Disclosure({
             children: triggerBody
           }
         ),
-        open && /* @__PURE__ */ jsx27(
+        open && /* @__PURE__ */ jsx28(
           Disclosure__Panel,
           {
             ref: setPanel,
@@ -3271,13 +3400,13 @@ function Disclosure({
     }
   );
 }
-var Disclosure__Root = styled26.div`
+var Disclosure__Root = styled27.div`
   position: relative;
   display: ${({ $variant }) => $variant === "inline" ? "flex" : "inline-flex"};
   flex-direction: column;
   width: ${({ $variant }) => $variant === "inline" ? "100%" : "auto"};
 `;
-var Disclosure__Trigger = styled26.button`
+var Disclosure__Trigger = styled27.button`
   display: inline-flex;
   align-items: center;
   gap: var(--gap-glyph);
@@ -3296,12 +3425,12 @@ var Disclosure__Trigger = styled26.button`
     `}
   ${focusRing}
 `;
-var Disclosure__ButtonTrigger = styled26(Button)`
+var Disclosure__ButtonTrigger = styled27(Button)`
   ${({ $inline }) => $inline && css8`
       align-self: flex-end;
     `}
 `;
-var Disclosure__Chevron = styled26.span`
+var Disclosure__Chevron = styled27.span`
   display: inline-flex;
   flex-shrink: 0;
   @media (prefers-reduced-motion: no-preference) {
@@ -3309,7 +3438,7 @@ var Disclosure__Chevron = styled26.span`
   }
   transform: rotate(${({ $open }) => $open ? 90 : 0}deg);
 `;
-var Disclosure__Panel = styled26.div`
+var Disclosure__Panel = styled27.div`
   ${({ $variant }) => $variant === "popover" ? css8`
           position: absolute;
           top: 100%;
@@ -3335,17 +3464,17 @@ var Disclosure__Panel = styled26.div`
 `;
 
 // src/DivergingBar.tsx
-import styled27, { css as css9 } from "styled-components";
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import styled28, { css as css9 } from "styled-components";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function DivergingBar({
-  value: value4,
+  value: value5,
   maxAbs,
   className
 }) {
-  const resolved = resolveCurrency(value4);
+  const resolved = resolveCurrency(value5);
   const { shown, held } = resolved;
   const pct = shown != null && maxAbs.isPositive() ? Math.min(50, shown.abs().dividedBy(maxAbs).magnitude * 50) : 0;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     DivergingBar__Track,
     {
       "aria-hidden": "true",
@@ -3353,8 +3482,8 @@ function DivergingBar({
       ...figureAttributes(resolved),
       className,
       children: [
-        /* @__PURE__ */ jsx28(DivergingBar__Zero, {}),
-        shown != null && /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(DivergingBar__Zero, {}),
+        shown != null && /* @__PURE__ */ jsx29(
           DivergingBar__Fill,
           {
             $positive: !shown.isNegative(),
@@ -3367,7 +3496,7 @@ function DivergingBar({
   );
 }
 var DIVERGING_BAR_MIN_CONTAINER = "300px";
-var DivergingBar__Track = styled27.div`
+var DivergingBar__Track = styled28.div`
   position: relative;
   width: 3.5rem;
   height: 4px;
@@ -3381,7 +3510,7 @@ var DivergingBar__Track = styled27.div`
     display: block;
   }
 `;
-var DivergingBar__Zero = styled27.div`
+var DivergingBar__Zero = styled28.div`
   position: absolute;
   left: 50%;
   top: 0;
@@ -3389,7 +3518,7 @@ var DivergingBar__Zero = styled27.div`
   width: 1px;
   background: var(--color-border-strong);
 `;
-var DivergingBar__Fill = styled27.div`
+var DivergingBar__Fill = styled28.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -3406,12 +3535,12 @@ var DivergingBar__Fill = styled27.div`
 `;
 
 // src/Divider.tsx
-import styled28 from "styled-components";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import styled29 from "styled-components";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Divider({ space, ...rest }) {
-  return /* @__PURE__ */ jsx29(Divider__Root, { $space: space, ...rest });
+  return /* @__PURE__ */ jsx30(Divider__Root, { $space: space, ...rest });
 }
-var Divider__Root = styled28.hr`
+var Divider__Root = styled29.hr`
   border: 0;
   border-top: 1px solid var(--color-border-subtle);
   width: 100%;
@@ -3420,8 +3549,8 @@ var Divider__Root = styled28.hr`
 
 // src/ExpandableText.tsx
 import { useId as useId8, useState as useState9 } from "react";
-import styled29 from "styled-components";
-import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import styled30 from "styled-components";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var DEFAULT_LIMIT = 160;
 var WORTH_CUTTING = 24;
 var CUT_MARK = "...";
@@ -3434,12 +3563,12 @@ function ExpandableText({
   const [expanded, setExpanded] = useState9(false);
   const proseId = useId8();
   const head = cut(children, limit);
-  if (head === void 0) return /* @__PURE__ */ jsx30(Fragment9, { children });
+  if (head === void 0) return /* @__PURE__ */ jsx31(Fragment9, { children });
   const verb = expanded ? "Show less" : "Show more";
-  return /* @__PURE__ */ jsxs24(ExpandableText__Root, { className, children: [
-    /* @__PURE__ */ jsx30("span", { id: proseId, children: expanded ? children : `${head}${CUT_MARK}` }),
+  return /* @__PURE__ */ jsxs25(ExpandableText__Root, { className, children: [
+    /* @__PURE__ */ jsx31("span", { id: proseId, children: expanded ? children : `${head}${CUT_MARK}` }),
     " ",
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       ExpandableText__Toggle,
       {
         type: "button",
@@ -3458,41 +3587,50 @@ function cut(text, limit) {
   const boundary = text.lastIndexOf(" ", limit);
   return boundary <= 0 ? text.slice(0, limit) : text.slice(0, boundary);
 }
-var ExpandableText__Root = styled29.span`
+var ExpandableText__Root = styled30.span`
   /* Long prose may carry a word wider than its column, and a broken word beats a sideways scroll. */
   overflow-wrap: break-word;
 `;
-var ExpandableText__Toggle = styled29(TextButton)`
+var ExpandableText__Toggle = styled30(TextButton)`
   /* Sits on the text's baseline as the paragraph's last word, so the cut and its undo read as one. */
   white-space: nowrap;
 `;
 
 // src/ephemerisFigure.ts
 import {
-  asDeterministic
+  asDeterministic,
+  poseAtIndex,
+  value as value2
 } from "@ksp-gonogo/sitrep-sdk";
-function ephemerisFigureOf(catalogue, bodies) {
-  const exact = bodies.length > 0 && bodies.every((body) => body?.deterministic === true);
+function ephemerisFigureOf(poses, bodies) {
+  const resting = bodies.map(
+    (body) => body == null ? null : poseAtIndex(poses, body.index)
+  );
+  const exact = resting.length > 0 && resting.every((pose) => pose?.currency === "exact");
+  const heldAt = resting.reduce((oldest, pose) => {
+    if (pose?.currency !== "held" || pose.asOfUt === null) return oldest;
+    return oldest === null ? pose.asOfUt : Math.min(oldest, pose.asOfUt);
+  }, null);
   return (figure) => {
     const drawn = exact ? asDeterministic(figure) : figure;
-    if (catalogue?.state !== "held") return drawn;
+    if (heldAt === null) return drawn;
     return {
       state: "held",
       value: drawn,
-      asOfUt: catalogue.asOfUt,
-      grade: catalogue.grade,
+      asOfUt: value2("ut", heldAt),
+      grade: "held",
       reckoning: { status: "none" }
     };
   };
 }
 
 // src/Fill.tsx
-import styled30 from "styled-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import styled31 from "styled-components";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Fill({ grow = false, children, ...rest }) {
-  return /* @__PURE__ */ jsx31(Fill__Root, { $grow: grow, ...rest, children });
+  return /* @__PURE__ */ jsx32(Fill__Root, { $grow: grow, ...rest, children });
 }
-var Fill__Root = styled30.div`
+var Fill__Root = styled31.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -3505,7 +3643,7 @@ var Fill__Root = styled30.div`
 `;
 
 // src/FilterList.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function FilterList({
   rows,
   segment = "filters",
@@ -3513,7 +3651,7 @@ function FilterList({
 }) {
   const filter = useRowFilter({ segment });
   const shown = rows.filter((row) => filter.matches(row.searchText));
-  return /* @__PURE__ */ jsx32(FilterRegion, { filter, children: shown.length > 0 ? /* @__PURE__ */ jsx32(Stack, { gap: "related", children: shown.map((row) => /* @__PURE__ */ jsx32("div", { children: row.node }, row.id)) }) : /* @__PURE__ */ jsx32(EmptyState, { children: emptyLabel }) });
+  return /* @__PURE__ */ jsx33(FilterRegion, { filter, children: shown.length > 0 ? /* @__PURE__ */ jsx33(Stack, { gap: "related", children: shown.map((row) => /* @__PURE__ */ jsx33("div", { children: row.node }, row.id)) }) : /* @__PURE__ */ jsx33(EmptyState, { children: emptyLabel }) });
 }
 
 // src/Floating.tsx
@@ -3524,8 +3662,8 @@ import {
   useState as useState10
 } from "react";
 import { createPortal } from "react-dom";
-import styled31 from "styled-components";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import styled32 from "styled-components";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Floating({ anchor, style, children, ...rest }) {
   const [host, setHost] = useState10(null);
   const [pos, setPos] = useState10(null);
@@ -3563,7 +3701,7 @@ function Floating({ anchor, style, children, ...rest }) {
   }, [host, place2]);
   if (typeof document === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(
       Floating__Root,
       {
         ref: setHost,
@@ -3580,14 +3718,14 @@ function Floating({ anchor, style, children, ...rest }) {
     document.body
   );
 }
-var Floating__Root = styled31.div`
+var Floating__Root = styled32.div`
   position: fixed;
   z-index: var(--z-dropdown);
 `;
 
 // src/Grid.tsx
-import styled32 from "styled-components";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import styled33 from "styled-components";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var ALIGN_ITEMS = {
   center: "center",
   start: "start",
@@ -3604,7 +3742,7 @@ function Grid({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     Grid__Root,
     {
       $cols: cols,
@@ -3618,7 +3756,7 @@ function Grid({
     }
   );
 }
-var Grid__Root = styled32.div`
+var Grid__Root = styled33.div`
   display: grid;
   align-items: ${({ $align }) => ALIGN_ITEMS[$align]};
   gap: ${({ $gap, $rowGap }) => $rowGap ? `${GAP_VAR[$rowGap]} ${GAP_VAR[$gap]}` : GAP_VAR[$gap]};
@@ -3631,15 +3769,15 @@ var Grid__Root = styled32.div`
 `;
 
 // src/HeldBadge.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function HeldBadge({ grade, subject, size }) {
   const word = heldWord(grade);
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     Tooltip,
     {
       text: subject === void 0 ? void 0 : `${subject}: ${word}`,
       focusable: true,
-      children: /* @__PURE__ */ jsx35(Badge, { tone: severityFromStreamStatus(grade), size, children: word })
+      children: /* @__PURE__ */ jsx36(Badge, { tone: severityFromStreamStatus(grade), size, children: word })
     }
   );
 }
@@ -3652,10 +3790,14 @@ import {
   useRef as useRef9,
   useState as useState11
 } from "react";
-import styled33 from "styled-components";
-import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import styled34 from "styled-components";
+import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var CLOSE_DELAY_MS = 120;
-function HoverCard({ trigger, ariaLabel, children }) {
+function HoverCard({
+  trigger,
+  "aria-label": ariaLabel,
+  children
+}) {
   const [open, setOpen] = useState11(false);
   const triggerRef = useRef9(null);
   const closeTimer = useRef9(null);
@@ -3690,8 +3832,8 @@ function HoverCard({ trigger, ariaLabel, children }) {
     const rect = triggerRef.current?.getBoundingClientRect();
     return rect ? { x: rect.left, y: rect.bottom } : null;
   };
-  return /* @__PURE__ */ jsxs25(Fragment10, { children: [
-    /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs26(Fragment10, { children: [
+    /* @__PURE__ */ jsx37(
       HoverCard__Trigger,
       {
         ref: triggerRef,
@@ -3705,18 +3847,18 @@ function HoverCard({ trigger, ariaLabel, children }) {
         children: trigger
       }
     ),
-    open && /* @__PURE__ */ jsx36(
+    open && /* @__PURE__ */ jsx37(
       Floating,
       {
         anchor,
         onPointerEnter: cancelClose,
         onPointerLeave: hideSoon,
-        children: /* @__PURE__ */ jsx36(HoverCard__Card, { id: cardId, role: "tooltip", children })
+        children: /* @__PURE__ */ jsx37(HoverCard__Card, { id: cardId, role: "tooltip", children })
       }
     )
   ] });
 }
-var HoverCard__Trigger = styled33.button`
+var HoverCard__Trigger = styled34.button`
   display: inline-flex;
   align-items: center;
   padding: 0;
@@ -3724,11 +3866,11 @@ var HoverCard__Trigger = styled33.button`
   background: none;
   color: inherit;
   font: inherit;
-  cursor: help;
+  cursor: default;
 
   ${focusRing}
 `;
-var HoverCard__Card = styled33.div`
+var HoverCard__Card = styled34.div`
   padding: var(--inset-popover);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-regular);
@@ -3737,8 +3879,8 @@ var HoverCard__Card = styled33.div`
 `;
 
 // src/Inline.tsx
-import styled34 from "styled-components";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import styled35 from "styled-components";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Inline({
   gap,
   inset = false,
@@ -3746,9 +3888,9 @@ function Inline({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx37(Inline__Root, { $gap: gap, $inset: inset, $wrap: wrap, ...rest, children });
+  return /* @__PURE__ */ jsx38(Inline__Root, { $gap: gap, $inset: inset, $wrap: wrap, ...rest, children });
 }
-var Inline__Root = styled34.span`
+var Inline__Root = styled35.span`
   display: inline-flex;
   gap: ${({ $gap }) => $gap ? GAP_VAR[$gap] : "var(--gap-related)"};
   flex-shrink: ${({ $wrap }) => $wrap ? 1 : 0};
@@ -3758,8 +3900,8 @@ var Inline__Root = styled34.span`
 
 // src/JogWheel.tsx
 import { useEffect as useEffect9, useRef as useRef10, useState as useState12 } from "react";
-import styled35 from "styled-components";
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import styled36 from "styled-components";
+import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
 var SENSITIVITY_PX_PER_STEP = 4;
 var RATE_TRAVEL_PX = 80;
 var RATE_TICK_MS = 60;
@@ -3768,9 +3910,9 @@ var JOG_WHEEL_MIN_TARGET_PX = 24;
 var COMPACT_CROSS_AXIS_PX = 32;
 var DEFAULT_LONG_PX = 56;
 var DEFAULT_SHORT_PX = JOG_WHEEL_MIN_TARGET_PX;
-function applyDelta(value4, bounds, deltaSteps) {
+function applyDelta(value5, bounds, deltaSteps) {
   const { min, max, step } = bounds;
-  const raw = value4 + deltaSteps * step;
+  const raw = value5 + deltaSteps * step;
   const clamped = Math.min(max, Math.max(min, raw));
   if (!Number.isFinite(min)) return clamped;
   const snapped = min + Math.round((clamped - min) / step) * step;
@@ -3778,14 +3920,14 @@ function applyDelta(value4, bounds, deltaSteps) {
 }
 function JogWheel(props) {
   const {
-    value: value4,
+    value: value5,
     min,
     max,
     step,
     orientation = "horizontal",
     onChange,
     format,
-    ariaLabel,
+    "aria-label": ariaLabel,
     label: caption = ariaLabel,
     disabled = false,
     width,
@@ -3805,14 +3947,14 @@ function JogWheel(props) {
   const hi = max ?? Number.POSITIVE_INFINITY;
   const bounds = { min: lo, max: hi, step };
   const drag = useRef10(null);
-  const latest = useRef10(value4);
-  latest.current = value4;
+  const latest = useRef10(value5);
+  latest.current = value5;
   const [displacement, setDisplacement] = useState12(0);
-  const label = format ? format(value4) : String(Math.round(value4));
-  const fraction = hi > lo && Number.isFinite(hi - lo) ? (value4 - lo) / (hi - lo) : 0.5;
+  const label = format ? format(value5) : String(Math.round(value5));
+  const fraction = hi > lo && Number.isFinite(hi - lo) ? (value5 - lo) / (hi - lo) : 0.5;
   const emit = (next) => {
     if (disabled) return;
-    if (next !== value4) onChange(next);
+    if (next !== value5) onChange(next);
   };
   useEffect9(() => {
     if (!rate || displacement === 0 || disabled) return;
@@ -3829,11 +3971,11 @@ function JogWheel(props) {
     switch (e.key) {
       case "ArrowRight":
       case "ArrowUp":
-        next = applyDelta(value4, bounds, 1);
+        next = applyDelta(value5, bounds, 1);
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        next = applyDelta(value4, bounds, -1);
+        next = applyDelta(value5, bounds, -1);
         break;
       case "Home":
         if (!Number.isFinite(lo)) return;
@@ -3852,7 +3994,7 @@ function JogWheel(props) {
   const axisPos = (e) => orientation === "vertical" ? e.clientY : e.clientX;
   const handlePointerDown = (e) => {
     if (disabled) return;
-    drag.current = { start: axisPos(e), startValue: value4 };
+    drag.current = { start: axisPos(e), startValue: value5 };
     e.currentTarget.setPointerCapture(e.pointerId);
   };
   const handlePointerMove = (e) => {
@@ -3874,15 +4016,15 @@ function JogWheel(props) {
       e.currentTarget.releasePointerCapture(e.pointerId);
     }
   };
-  return /* @__PURE__ */ jsxs26(JogWheel__Frame, { children: [
-    caption !== false && /* @__PURE__ */ jsx38(JogWheel__Caption, { "aria-hidden": "true", children: caption }),
-    /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(JogWheel__Frame, { children: [
+    caption !== false && /* @__PURE__ */ jsx39(JogWheel__Caption, { "aria-hidden": "true", children: caption }),
+    /* @__PURE__ */ jsxs27(
       JogWheel__Root,
       {
         role: "slider",
         "aria-label": ariaLabel,
         "aria-orientation": orientation,
-        "aria-valuenow": Number.isFinite(value4) ? value4 : void 0,
+        "aria-valuenow": Number.isFinite(value5) ? value5 : void 0,
         "aria-valuemin": min,
         "aria-valuemax": max,
         "aria-valuetext": label,
@@ -3899,7 +4041,7 @@ function JogWheel(props) {
         onPointerUp: endDrag,
         onPointerCancel: endDrag,
         children: [
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             JogWheel__Tape,
             {
               $orientation: orientation,
@@ -3907,25 +4049,25 @@ function JogWheel(props) {
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsx38(JogWheel__Caret, { $orientation: orientation, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx38(JogWheel__Label, { "aria-hidden": "true", children: label })
+          /* @__PURE__ */ jsx39(JogWheel__Caret, { $orientation: orientation, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx39(JogWheel__Label, { "aria-hidden": "true", children: label })
         ]
       }
     )
   ] });
 }
-var JogWheel__Frame = styled35.div`
+var JogWheel__Frame = styled36.div`
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   gap: var(--gap-related-packed);
 `;
-var JogWheel__Caption = styled35.span`
+var JogWheel__Caption = styled36.span`
   font-size: var(--font-size-caption);
   color: var(--color-text-muted);
   white-space: nowrap;
 `;
-var JogWheel__Root = styled35.div`
+var JogWheel__Root = styled36.div`
   position: relative;
   overflow: hidden;
   display: flex;
@@ -3945,7 +4087,7 @@ var JogWheel__Root = styled35.div`
 
   ${focusRing}
 `;
-var JogWheel__Tape = styled35.div`
+var JogWheel__Tape = styled36.div`
   position: absolute;
   inset: 0;
   background-image: repeating-linear-gradient(
@@ -3956,13 +4098,13 @@ var JogWheel__Tape = styled35.div`
   opacity: 0.6;
   pointer-events: none;
 `;
-var JogWheel__Caret = styled35.div`
+var JogWheel__Caret = styled36.div`
   position: absolute;
   background: var(--color-accent-fg);
   pointer-events: none;
   ${(p) => p.$orientation === "vertical" ? "left: 0; right: 0; height: 2px; top: 50%;" : "top: 0; bottom: 0; width: 2px; left: 50%;"}
 `;
-var JogWheel__Label = styled35.span`
+var JogWheel__Label = styled36.span`
   /* Last DOM sibling, so it paints over the absolute tape and caret without a z-index. */
   position: relative;
   font-family: var(--font-family-mono);
@@ -3974,7 +4116,7 @@ var JogWheel__Label = styled35.span`
 `;
 
 // src/LineGraph.tsx
-import styled36 from "styled-components";
+import styled37 from "styled-components";
 
 // src/reckoningBasisPhrase.ts
 var PHRASE = {
@@ -3990,7 +4132,7 @@ function reckoningBasisPhrase(basis) {
 }
 
 // src/LineGraph.tsx
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
 var VIEW_W = 100;
 var VIEW_H = 40;
 function computeDomain(series, thresholds) {
@@ -4079,6 +4221,14 @@ function splitAtBreaks(points, breaks) {
   runs.push(points.slice(start));
   return runs;
 }
+function stepped(run) {
+  const out = [];
+  for (const [i, point] of run.entries()) {
+    if (i > 0) out.push({ ...point, y: run[i - 1].y });
+    out.push(point);
+  }
+  return out;
+}
 function computeXDomain(series) {
   const xs = [];
   for (const s of series)
@@ -4097,7 +4247,7 @@ function LineGraph({
   thresholds = [],
   yDomain,
   height = 120,
-  ariaLabel,
+  "aria-label": ariaLabel,
   className,
   variant = "chart",
   thresholdStyle = "full"
@@ -4115,23 +4265,16 @@ function LineGraph({
     ...series.flatMap((s) => {
       const name = s.label ?? s.id;
       const runs = s.reckoned ?? [];
-      const kinds = new Set(
-        runs.map(
-          (run) => run.bandLo && run.bandHi ? run.bandKind : void 0
-        ).filter((kind) => kind !== void 0)
-      );
       return [
         ...[...new Set(runs.map((run) => run.basis))].map(
           (basis) => `${name}: part of this trace is reckoned, ${reckoningBasisPhrase(basis)}, not measured`
         ),
-        ...[...kinds].map(
-          (kind) => `${name}: ${bandClaim(kind, "the value is inside the shaded region")}`
-        )
+        ...runs.some((run) => run.bandLo && run.bandHi) ? [`${name}: the value is inside the shaded region`] : []
       ];
     })
   ].join("; ") : void 0;
-  return /* @__PURE__ */ jsxs27(LineGraph__Root, { className, style: { height }, children: [
-    /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(LineGraph__Root, { className, style: { height }, children: [
+    /* @__PURE__ */ jsxs28(
       "svg",
       {
         viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
@@ -4142,7 +4285,7 @@ function LineGraph({
         "aria-label": chartLabel,
         "aria-hidden": ariaLabel ? void 0 : "true",
         children: [
-          !isSparkline && [0.25, 0.5, 0.75].map((f) => /* @__PURE__ */ jsx39(
+          !isSparkline && [0.25, 0.5, 0.75].map((f) => /* @__PURE__ */ jsx40(
             "line",
             {
               x1: 0,
@@ -4156,8 +4299,9 @@ function LineGraph({
             f
           )),
           isSparkline && series.map((s, si) => {
-            if (s.points.length < 2) return null;
-            return splitAtBreaks(tagged[si], s.breaks).map((run) => {
+            if (s.points.length < 2 || s.interpolation === "none") return null;
+            return splitAtBreaks(tagged[si], s.breaks).map((unstepped) => {
+              const run = s.interpolation === "step" ? stepped(unstepped) : unstepped;
               if (run.length < 2) return null;
               const first = run[0];
               const last = run[run.length - 1];
@@ -4166,7 +4310,7 @@ function LineGraph({
                 `${toX(last.x)},${VIEW_H}`,
                 `${toX(first.x)},${VIEW_H}`
               ].join(" ");
-              return /* @__PURE__ */ jsx39(
+              return /* @__PURE__ */ jsx40(
                 "polygon",
                 {
                   points: areaPoints,
@@ -4182,7 +4326,7 @@ function LineGraph({
             (s) => (s.reckoned ?? []).map((run, ri) => {
               const corners = bandCorners(s, run, toX, toY);
               if (corners === null) return null;
-              return /* @__PURE__ */ jsx39(
+              return /* @__PURE__ */ jsx40(
                 "polygon",
                 {
                   points: corners,
@@ -4195,7 +4339,7 @@ function LineGraph({
               );
             })
           ),
-          thresholdStyle === "full" && thresholds.map((t) => /* @__PURE__ */ jsx39(
+          thresholdStyle === "full" && thresholds.map((t) => /* @__PURE__ */ jsx40(
             "line",
             {
               x1: 0,
@@ -4209,13 +4353,31 @@ function LineGraph({
             },
             t.id
           )),
+          series.map((s) => {
+            if (s.interpolation !== "none") return null;
+            return s.points.map((p) => /* @__PURE__ */ jsx40(
+              "line",
+              {
+                x1: toX(p.x),
+                x2: toX(p.x),
+                y1: toY(p.y),
+                y2: toY(p.y),
+                stroke: s.color,
+                strokeWidth: isSparkline ? 3 : 4,
+                strokeLinecap: "round",
+                vectorEffect: "non-scaling-stroke"
+              },
+              `${s.id}-mark-${p.x}`
+            ));
+          }),
           series.map((s, si) => {
-            if (s.points.length < 2) return null;
+            if (s.points.length < 2 || s.interpolation === "none") return null;
             return splitAtBreaks(tagged[si], s.breaks).flatMap(
               (run) => splitAtBasis(run).map((piece) => {
                 if (piece.points.length < 2) return null;
-                const points = piece.points.map((p) => `${toX(p.x)},${toY(p.y)}`).join(" ");
-                return /* @__PURE__ */ jsx39(
+                const drawn = s.interpolation === "step" ? stepped(piece.points) : piece.points;
+                const points = drawn.map((p) => `${toX(p.x)},${toY(p.y)}`).join(" ");
+                return /* @__PURE__ */ jsx40(
                   "polyline",
                   {
                     points,
@@ -4240,7 +4402,7 @@ function LineGraph({
     thresholdStyle === "marker" && thresholds.map((t) => {
       const topPct = (yMax - t.value) / ySpan * 100;
       if (topPct < 0 || topPct > 100) return null;
-      return /* @__PURE__ */ jsxs27(
+      return /* @__PURE__ */ jsxs28(
         LineGraph__ThresholdMarker,
         {
           "aria-hidden": "true",
@@ -4250,8 +4412,8 @@ function LineGraph({
             color: t.color ?? "var(--color-warn-text)"
           },
           children: [
-            /* @__PURE__ */ jsx39(LineGraph__ThresholdTick, {}),
-            t.valueText !== void 0 && /* @__PURE__ */ jsx39("span", { children: t.valueText })
+            /* @__PURE__ */ jsx40(LineGraph__ThresholdTick, {}),
+            t.valueText !== void 0 && /* @__PURE__ */ jsx40("span", { children: t.valueText })
           ]
         },
         t.id
@@ -4259,7 +4421,7 @@ function LineGraph({
     })
   ] });
 }
-var LineGraph__ThresholdMarker = styled36.div`
+var LineGraph__ThresholdMarker = styled37.div`
   position: absolute;
   left: 0;
   transform: translateY(-50%);
@@ -4272,14 +4434,14 @@ var LineGraph__ThresholdMarker = styled36.div`
   /* Single-glyph chrome text centring against a 2px tick: the flush rung. */
   line-height: var(--line-height-flush);
 `;
-var LineGraph__ThresholdTick = styled36.span`
+var LineGraph__ThresholdTick = styled37.span`
   display: inline-block;
   width: var(--size-mark);
   height: 2px;
   border-radius: var(--radius-pill);
   background: currentColor;
 `;
-var LineGraph__Root = styled36.div`
+var LineGraph__Root = styled37.div`
   position: relative;
   width: 100%;
   min-height: 0;
@@ -4292,19 +4454,19 @@ var LineGraph__Root = styled36.div`
 // src/LockMark.tsx
 import { isLocked } from "@ksp-gonogo/sitrep-sdk";
 import { lockSentence } from "@ksp-gonogo/sitrep-sdk/spine";
-import styled37 from "styled-components";
-import { jsx as jsx40, jsxs as jsxs28 } from "react/jsx-runtime";
+import styled38 from "styled-components";
+import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
 function LockMark({ lock: given }) {
   const lock = isLocked(given) ? summaryOf(given) : given;
   const sentence = lock.hint === void 0 ? lock.reason : `${lock.reason}. ${lock.hint}`;
-  return /* @__PURE__ */ jsx40(Tooltip, { text: sentence, focusable: true, children: /* @__PURE__ */ jsxs28(LockMark__Body, { role: "status", "aria-label": sentence, children: [
-    /* @__PURE__ */ jsx40(LockIcon, {}),
-    /* @__PURE__ */ jsx40(LockMark__Name, { children: missingNames(lock) })
+  return /* @__PURE__ */ jsx41(Tooltip, { text: sentence, focusable: true, children: /* @__PURE__ */ jsxs29(LockMark__Body, { role: "status", "aria-label": sentence, children: [
+    /* @__PURE__ */ jsx41(LockIcon, {}),
+    /* @__PURE__ */ jsx41(LockMark__Name, { children: missingNames(lock) })
   ] }) });
 }
-function summaryOf(value4) {
+function summaryOf(value5) {
   const locks = [
-    { capability: { kind: "topic", id: "" }, missing: value4.locked }
+    { capability: { kind: "topic", id: "" }, missing: value5.locked }
   ];
   return { ...lockSentence(locks, writeLockQuantity), locks };
 }
@@ -4314,7 +4476,7 @@ function missingNames(lock) {
   ];
   return names.length > 0 ? names.join(", ") : lock.reason;
 }
-var LockMark__Body = styled37.span`
+var LockMark__Body = styled38.span`
   display: inline-flex;
   align-items: center;
   gap: var(--gap-figure-parts);
@@ -4326,7 +4488,7 @@ var LockMark__Body = styled37.span`
   letter-spacing: 0.06em;
   text-transform: uppercase;
 `;
-var LockMark__Name = styled37.span`
+var LockMark__Name = styled38.span`
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -4335,7 +4497,7 @@ var LockMark__Name = styled37.span`
 
 // src/MarkerIcons.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 var KEYLINE_EXTRA = 1.4;
 var DOT_RADIUS = 1.7;
 var DEFAULT_SIZE = "var(--icon-size-standalone)";
@@ -4431,7 +4593,7 @@ function Layer({
   strokeWidth,
   dotRadius
 }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "g",
     {
       fill: "none",
@@ -4440,8 +4602,8 @@ function Layer({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        shape.paths.map((d) => /* @__PURE__ */ jsx41("path", { d }, d)),
-        shape.dot && /* @__PURE__ */ jsx41(
+        shape.paths.map((d) => /* @__PURE__ */ jsx42("path", { d }, d)),
+        shape.dot && /* @__PURE__ */ jsx42(
           "circle",
           {
             cx: shape.dot[0],
@@ -4473,8 +4635,8 @@ function makeMarker(id, displayName) {
         viewBox: "0 0 24 24",
         "data-marker": id
       };
-      const layers = /* @__PURE__ */ jsxs29(Fragment11, { children: [
-        /* @__PURE__ */ jsx41(
+      const layers = /* @__PURE__ */ jsxs30(Fragment11, { children: [
+        /* @__PURE__ */ jsx42(
           Layer,
           {
             shape,
@@ -4483,7 +4645,7 @@ function makeMarker(id, displayName) {
             dotRadius: DOT_RADIUS + KEYLINE_EXTRA / 2
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           Layer,
           {
             shape,
@@ -4493,7 +4655,7 @@ function makeMarker(id, displayName) {
           }
         )
       ] });
-      return label ? /* @__PURE__ */ jsx41("svg", { ...frame, role: "img", "aria-label": label, ...rest, children: layers }) : /* @__PURE__ */ jsx41("svg", { ...frame, "aria-hidden": "true", ...rest, children: layers });
+      return label ? /* @__PURE__ */ jsx42("svg", { ...frame, role: "img", "aria-label": label, ...rest, children: layers }) : /* @__PURE__ */ jsx42("svg", { ...frame, "aria-hidden": "true", ...rest, children: layers });
     }
   );
   Marker.displayName = displayName;
@@ -4546,11 +4708,11 @@ import {
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef11
 } from "react";
-import styled39, { css as css10 } from "styled-components";
+import styled40, { css as css10 } from "styled-components";
 
 // src/BarTrack.tsx
-import styled38 from "styled-components";
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import styled39 from "styled-components";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 var TRACK_HEIGHT = "8px";
 function BarTrack({
   percent,
@@ -4561,8 +4723,8 @@ function BarTrack({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs30(BarTrack__Track, { "data-track-held": trackHeld ? "" : void 0, ...rest, children: [
-    percent !== null && /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs31(BarTrack__Track, { "data-track-held": trackHeld ? "" : void 0, ...rest, children: [
+    percent !== null && /* @__PURE__ */ jsx43(
       BarTrack__Fill,
       {
         $tone: tone,
@@ -4572,7 +4734,7 @@ function BarTrack({
         style: { width: `${percent}%` }
       }
     ),
-    trackHeld && /* @__PURE__ */ jsx42(
+    trackHeld && /* @__PURE__ */ jsx43(
       BarTrack__Hatch,
       {
         "data-track-hatch": "",
@@ -4582,7 +4744,7 @@ function BarTrack({
     children
   ] });
 }
-var BarTrack__Track = styled38.div`
+var BarTrack__Track = styled39.div`
   width: 100%;
   border-radius: var(--radius-pill);
   background: var(--color-surface-raised);
@@ -4592,7 +4754,7 @@ var BarTrack__Track = styled38.div`
   position: relative;
   height: ${TRACK_HEIGHT};
 `;
-var BarTrack__Hatch = styled38.div`
+var BarTrack__Hatch = styled39.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -4605,7 +4767,7 @@ var BarTrack__Hatch = styled38.div`
   opacity: 0.55;
   pointer-events: none;
 `;
-var BarTrack__Fill = styled38.div`
+var BarTrack__Fill = styled39.div`
   height: 100%;
   border-radius: var(--radius-pill);
   transition: width var(--duration-slow) var(--ease-standard);
@@ -4619,10 +4781,10 @@ var BarTrack__Fill = styled38.div`
 `;
 
 // src/Meter.tsx
-import { Fragment as Fragment12, jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
 function Meter({
   label,
-  value: value4,
+  value: value5,
   capacity,
   format,
   tone = "neutral",
@@ -4634,7 +4796,7 @@ function Meter({
   statement = false,
   ...rest
 }) {
-  const shown = unwrap(value4);
+  const shown = unwrap(value5);
   const held = unwrap(capacity);
   const fraction = fillFraction(
     shown.figure,
@@ -4642,14 +4804,14 @@ function Meter({
   );
   if (fraction === null || !Number.isFinite(fraction)) {
     if (hideLabel) return null;
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx44(
       MeterFrame,
       {
         layout,
         label,
-        display: /* @__PURE__ */ jsx43(NullValue, {}),
+        display: /* @__PURE__ */ jsx44(NullValue, {}),
         ...rest,
-        children: /* @__PURE__ */ jsx43(BarTrack, { percent: null, tone, "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx44(BarTrack, { percent: null, tone, "aria-hidden": "true" })
       }
     );
   }
@@ -4672,11 +4834,11 @@ function Meter({
     boundsOn(held.reading, held.figure, held.figure)
   );
   if (capacity !== void 0) {
-    return /* @__PURE__ */ jsx43(UnitSharedFormat, { of: shown.figure?.unit, format, children: /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx44(UnitSharedFormat, { of: shown.figure?.unit, format, children: /* @__PURE__ */ jsx44(
       MeterPairBar,
       {
         ...bar,
-        value: value4,
+        value: value5,
         capacity,
         shown,
         held,
@@ -4691,15 +4853,15 @@ function Meter({
     clamped,
     boundsOn(shown.reading, shown.figure, null)
   );
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     MeterBar,
     {
       ...bar,
       bounds,
       endBounds,
-      display: valueLabelNode ?? (valueLabel === void 0 ? /* @__PURE__ */ jsx43(Unit, { value: value4, format }) : /* @__PURE__ */ jsx43(HeldLabel, { caption: heldCaption(value4), children: valueLabel })),
+      display: valueLabelNode ?? (valueLabel === void 0 ? /* @__PURE__ */ jsx44(Unit, { value: value5, format }) : /* @__PURE__ */ jsx44(HeldLabel, { caption: heldCaption(value5), children: valueLabel })),
       spoken: withBands(
-        valueLabel === void 0 ? speakQuantity(shown.figure, { format }) : sayCaption(valueLabel, heldCaption(value4)),
+        valueLabel === void 0 ? speakQuantity(shown.figure, { format }) : sayCaption(valueLabel, heldCaption(value5)),
         bounds,
         endBounds
       )
@@ -4717,8 +4879,8 @@ function HeldLabel({
   caption,
   children
 }) {
-  if (caption === null) return /* @__PURE__ */ jsx43(Fragment12, { children });
-  return /* @__PURE__ */ jsx43(HeldFigure, { caption, children });
+  if (caption === null) return /* @__PURE__ */ jsx44(Fragment12, { children });
+  return /* @__PURE__ */ jsx44(HeldFigure, { caption, children });
 }
 function unwrap(input) {
   if (typeof input !== "object" || input === null || !("state" in input)) {
@@ -4760,7 +4922,7 @@ function withBands(spoken, bounds, endBounds, shared) {
   const said = (bound, lead) => {
     const lo = speakQuantity(bound.loSaid, shared);
     const hi = speakQuantity(bound.hiSaid, shared);
-    return bandClaim(bound.kind, `${lead}with bands at ${lo} and ${hi}`);
+    return `${lead}with bands at ${lo} and ${hi}`;
   };
   const clauses = [
     bounds === null ? null : said(bounds, ""),
@@ -4794,7 +4956,7 @@ function MeterBar({
   endBounds,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     MeterFrame,
     {
       layout,
@@ -4804,7 +4966,7 @@ function MeterBar({
       statement,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           BarTrack,
           {
             percent: pct,
@@ -4820,14 +4982,14 @@ function MeterBar({
             "aria-valuetext": spoken
           }
         ),
-        (bounds !== null || endBounds !== null) && /* @__PURE__ */ jsxs31(Meter__Marks, { "aria-hidden": "true", children: [
-          bounds !== null && /* @__PURE__ */ jsxs31(Fragment12, { children: [
-            /* @__PURE__ */ jsx43(Meter__Bound, { "data-bound": "lo", ...markAt(bounds.lo) }),
-            /* @__PURE__ */ jsx43(Meter__Bound, { "data-bound": "hi", ...markAt(bounds.hi) })
+        (bounds !== null || endBounds !== null) && /* @__PURE__ */ jsxs32(Meter__Marks, { "aria-hidden": "true", children: [
+          bounds !== null && /* @__PURE__ */ jsxs32(Fragment12, { children: [
+            /* @__PURE__ */ jsx44(Meter__Bound, { "data-bound": "lo", ...markAt(bounds.lo) }),
+            /* @__PURE__ */ jsx44(Meter__Bound, { "data-bound": "hi", ...markAt(bounds.hi) })
           ] }),
-          endBounds !== null && /* @__PURE__ */ jsxs31(Fragment12, { children: [
-            /* @__PURE__ */ jsx43(Meter__Bound, { "data-end-bound": "lo", ...markAt(endBounds.lo) }),
-            /* @__PURE__ */ jsx43(Meter__Bound, { "data-end-bound": "hi", ...markAt(endBounds.hi) })
+          endBounds !== null && /* @__PURE__ */ jsxs32(Fragment12, { children: [
+            /* @__PURE__ */ jsx44(Meter__Bound, { "data-end-bound": "lo", ...markAt(endBounds.lo) }),
+            /* @__PURE__ */ jsx44(Meter__Bound, { "data-end-bound": "hi", ...markAt(endBounds.hi) })
           ] })
         ] })
       ]
@@ -4844,28 +5006,28 @@ function MeterFrame({
   ...rest
 }) {
   if (hideHead) {
-    return /* @__PURE__ */ jsxs31(Meter__Root, { $row: false, ...rest, children: [
-      /* @__PURE__ */ jsx43(Meter__Bar, { $row: false, children }),
-      statement && /* @__PURE__ */ jsx43(Meter__Statement, { "data-meter-part": "statement", children: display })
+    return /* @__PURE__ */ jsxs32(Meter__Root, { $row: false, ...rest, children: [
+      /* @__PURE__ */ jsx44(Meter__Bar, { $row: false, children }),
+      statement && /* @__PURE__ */ jsx44(Meter__Statement, { "data-meter-part": "statement", children: display })
     ] });
   }
   if (layout === "row") {
-    return /* @__PURE__ */ jsxs31(Meter__Root, { $row: true, "data-meter-row": "", ...rest, children: [
-      /* @__PURE__ */ jsx43(Meter__Label, { "data-meter-part": "label", children: label }),
-      /* @__PURE__ */ jsx43(Meter__Bar, { $row: true, "data-meter-part": "bar", children }),
-      /* @__PURE__ */ jsx43(Meter__Value, { $row: true, "data-meter-part": "figure", children: display })
+    return /* @__PURE__ */ jsxs32(Meter__Root, { $row: true, "data-meter-row": "", ...rest, children: [
+      /* @__PURE__ */ jsx44(Meter__Label, { "data-meter-part": "label", children: label }),
+      /* @__PURE__ */ jsx44(Meter__Bar, { $row: true, "data-meter-part": "bar", children }),
+      /* @__PURE__ */ jsx44(Meter__Value, { $row: true, "data-meter-part": "figure", children: display })
     ] });
   }
-  return /* @__PURE__ */ jsxs31(Meter__Root, { $row: false, ...rest, children: [
-    /* @__PURE__ */ jsxs31(Meter__Head, { children: [
-      /* @__PURE__ */ jsx43(Meter__Label, { children: label }),
-      /* @__PURE__ */ jsx43(Meter__Value, { $row: false, children: display })
+  return /* @__PURE__ */ jsxs32(Meter__Root, { $row: false, ...rest, children: [
+    /* @__PURE__ */ jsxs32(Meter__Head, { children: [
+      /* @__PURE__ */ jsx44(Meter__Label, { children: label }),
+      /* @__PURE__ */ jsx44(Meter__Value, { $row: false, children: display })
     ] }),
-    /* @__PURE__ */ jsx43(Meter__Bar, { $row: false, children })
+    /* @__PURE__ */ jsx44(Meter__Bar, { $row: false, children })
   ] });
 }
 function MeterPairBar({
-  value: value4,
+  value: value5,
   capacity,
   shown,
   held,
@@ -4878,23 +5040,23 @@ function MeterPairBar({
   const fromValue = useSharedFormat(reporting ? shown.figure : void 0);
   const fromCapacity = useSharedFormat(reporting ? held.figure : void 0);
   const shared = fromValue ?? fromCapacity ?? {};
-  const caption = heldCaption(value4) ?? heldCaption(capacity);
-  const display = valueLabelNode ?? (valueLabel !== void 0 ? /* @__PURE__ */ jsx43(HeldLabel, { caption, children: valueLabel }) : bar.layout === "row" ? /* @__PURE__ */ jsxs31(Meter__Pair, { $marked: bar.fillHeld || bar.trackHeld, children: [
-    /* @__PURE__ */ jsx43(Unit, { value: value4, hideUnitInGroup: true }),
+  const caption = heldCaption(value5) ?? heldCaption(capacity);
+  const display = valueLabelNode ?? (valueLabel !== void 0 ? /* @__PURE__ */ jsx44(HeldLabel, { caption, children: valueLabel }) : bar.layout === "row" ? /* @__PURE__ */ jsxs32(Meter__Pair, { $marked: bar.fillHeld || bar.trackHeld, children: [
+    /* @__PURE__ */ jsx44(Unit, { value: value5, hideUnitInGroup: true }),
     " / ",
-    /* @__PURE__ */ jsx43(Unit, { value: capacity }),
-    (bar.fillHeld || bar.trackHeld) && /* @__PURE__ */ jsx43(HeldMark, { "aria-hidden": "true", "data-held-mark": "" })
-  ] }) : /* @__PURE__ */ jsxs31(Fragment12, { children: [
-    /* @__PURE__ */ jsx43(Unit, { value: value4 }),
+    /* @__PURE__ */ jsx44(Unit, { value: capacity }),
+    (bar.fillHeld || bar.trackHeld) && /* @__PURE__ */ jsx44(HeldMark, { "aria-hidden": "true", "data-held-mark": "" })
+  ] }) : /* @__PURE__ */ jsxs32(Fragment12, { children: [
+    /* @__PURE__ */ jsx44(Unit, { value: value5 }),
     " / ",
-    /* @__PURE__ */ jsx43(Unit, { value: capacity })
+    /* @__PURE__ */ jsx44(Unit, { value: capacity })
   ] }));
   const spoken = valueLabel === void 0 ? `${speakQuantity(shown.figure, shared)} of ${speakQuantity(held.figure, shared)}` : sayCaption(valueLabel, caption);
   const bounds = apartFrom(
     at,
     boundsOn(shown.reading, shown.figure, held.figure)
   );
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     MeterBar,
     {
       ...bar,
@@ -4917,7 +5079,12 @@ function MeterStack({
       if (stack.clientWidth === 0) return;
       stack.toggleAttribute("data-figures-below", !figuresFitBeside(stack));
     };
-    const resize = new ResizeObserver(place2);
+    let frame = 0;
+    const placeNextFrame = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(place2);
+    };
+    const resize = new ResizeObserver(placeNextFrame);
     const watch = () => {
       resize.disconnect();
       resize.observe(stack);
@@ -4928,13 +5095,14 @@ function MeterStack({
     watch();
     place2();
     return () => {
+      cancelAnimationFrame(frame);
       resize.disconnect();
       rows.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx43(Meter__Stack, { ref, ...rest, children });
+  return /* @__PURE__ */ jsx44(Meter__Stack, { ref, ...rest, children });
 }
-var MeterRowGroup = styled39.div.attrs({
+var MeterRowGroup = styled40.div.attrs({
   "data-meter-row-group": ""
 })`
   grid-column: 1 / -1;
@@ -4980,7 +5148,7 @@ function unwrappedWidth(label) {
   label.style.whiteSpace = before;
   return width;
 }
-var Meter__Stack = styled39.div`
+var Meter__Stack = styled40.div`
   display: grid;
   grid-template-columns:
     minmax(min-content, max-content)
@@ -5029,7 +5197,7 @@ var Meter__Stack = styled39.div`
   }
 `;
 var MARK_INSET = "1px";
-var Meter__Root = styled39.div`
+var Meter__Root = styled40.div`
   display: flex;
   width: 100%;
   min-width: 0;
@@ -5044,7 +5212,7 @@ var Meter__Root = styled39.div`
           gap: var(--gap-caption);
         `}
 `;
-var Meter__Head = styled39.div`
+var Meter__Head = styled40.div`
   display: flex;
   justify-content: space-between;
   align-items: baseline;
@@ -5053,7 +5221,7 @@ var Meter__Head = styled39.div`
   /* The value may drop to its own line at narrow widths rather than crushing the label. */
   flex-wrap: wrap;
 `;
-var Meter__Label = styled39.span`
+var Meter__Label = styled40.span`
   font-size: var(--font-size-caption);
   color: var(--color-text-muted);
   text-transform: uppercase;
@@ -5065,7 +5233,7 @@ var Meter__Label = styled39.span`
   flex: 0 0 auto;
   max-width: 100%;
 `;
-var Meter__Value = styled39.span`
+var Meter__Value = styled40.span`
   font-size: ${({ $row }) => $row ? "var(--font-size-compact)" : "var(--font-size-value)"};
   color: var(--color-text-primary);
   font-variant-numeric: tabular-nums;
@@ -5079,7 +5247,7 @@ var Meter__Value = styled39.span`
   /* Room for the held mark Unit draws outside this box, reserved unconditionally so a quiet channel causes no reflow. */
   padding-right: max(0.44em, var(--inset-meter-mark));
 `;
-var Meter__Statement = styled39.span`
+var Meter__Statement = styled40.span`
   font-size: var(--font-size-compact);
   color: var(--color-text-primary);
   font-variant-numeric: tabular-nums;
@@ -5088,19 +5256,19 @@ var Meter__Statement = styled39.span`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var Meter__Marks = styled39.div`
+var Meter__Marks = styled40.div`
   position: absolute;
   inset: 0;
   pointer-events: none;
 `;
-var Meter__Bar = styled39.div`
+var Meter__Bar = styled40.div`
   position: relative;
   ${({ $row }) => $row ? css10`
           flex: 1 1 28px;
           min-width: 28px;
         ` : ""}
 `;
-var Meter__Pair = styled39(HeldHost)`
+var Meter__Pair = styled40(HeldHost)`
   /* The pair's own mark reserves the room; the figures inside it carry none. */
   &::after {
     content: ${({ $marked }) => $marked ? '""' : "none"};
@@ -5112,7 +5280,7 @@ var Meter__Pair = styled39(HeldHost)`
     content: none;
   }
 `;
-var Meter__Bound = styled39.div`
+var Meter__Bound = styled40.div`
   position: absolute;
   top: ${MARK_INSET};
   bottom: ${MARK_INSET};
@@ -5127,8 +5295,8 @@ var Meter__Bound = styled39.div`
 `;
 
 // src/MissionDate.tsx
-import styled40 from "styled-components";
-import { Fragment as Fragment13, jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+import styled41 from "styled-components";
+import { Fragment as Fragment13, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
 function describeContext(context) {
   if (context.frame === "scet") {
     return {
@@ -5148,39 +5316,39 @@ function describeContext(context) {
     title: `When the telemetry showing this arrives at ${vantage}`
   };
 }
-var MissionDate__Context = styled40.span`
+var MissionDate__Context = styled41.span`
   font-size: max(0.72em, 10px);
   opacity: 0.72;
   white-space: nowrap;
   text-transform: none;
 `;
-function MissionDate({ value: value4, context }) {
-  const carried = typeof value4 === "number" ? void 0 : value4;
+function MissionDate({ value: value5, context }) {
+  const carried = typeof value5 === "number" ? void 0 : value5;
   const currency = resolveCurrency(carried);
   const { shown, held, caption } = currency;
-  const ut = typeof value4 === "number" ? value4 : shown?.magnitude;
+  const ut = typeof value5 === "number" ? value5 : shown?.magnitude;
   const figure = figureAttributes({ ...currency, shown: ut });
   const qualifier = context && describeContext(context);
   const date = formatKspDate(ut ?? Number.NaN);
-  return /* @__PURE__ */ jsxs32(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment13, { children: [
     held ? (
       /* The component otherwise renders bare text, so the mark needs a box to hang off. */
-      /* @__PURE__ */ jsx44(HeldFigure, { ...figure, caption, children: date })
-    ) : /* @__PURE__ */ jsx44("span", { "data-figure": figure["data-figure"], children: date }),
-    qualifier && /* @__PURE__ */ jsxs32(Fragment13, { children: [
+      /* @__PURE__ */ jsx45(HeldFigure, { ...figure, caption, children: date })
+    ) : /* @__PURE__ */ jsx45("span", { "data-figure": figure["data-figure"], children: date }),
+    qualifier && /* @__PURE__ */ jsxs33(Fragment13, { children: [
       " ",
-      /* @__PURE__ */ jsx44(Tooltip, { text: qualifier.title, focusable: true, children: /* @__PURE__ */ jsxs32(MissionDate__Context, { children: [
-        /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", children: qualifier.token }),
-        /* @__PURE__ */ jsx44(VisuallyHidden, { children: qualifier.spoken })
+      /* @__PURE__ */ jsx45(Tooltip, { text: qualifier.title, focusable: true, children: /* @__PURE__ */ jsxs33(MissionDate__Context, { children: [
+        /* @__PURE__ */ jsx45("span", { "aria-hidden": "true", children: qualifier.token }),
+        /* @__PURE__ */ jsx45(VisuallyHidden, { children: qualifier.spoken })
       ] }) })
     ] })
   ] });
 }
 
 // src/MissionDateField.tsx
-import { value as value2 } from "@ksp-gonogo/sitrep-sdk";
+import { value as value3 } from "@ksp-gonogo/sitrep-sdk";
 import { useId as useId10, useState as useState13 } from "react";
-import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
 function partsOfUt(ut) {
   const { year: YEAR, day: DAY, hour: HOUR, minute: MINUTE } = kspCalendar();
   const clamped = Number.isFinite(ut) ? Math.max(0, ut) : 0;
@@ -5208,10 +5376,10 @@ function utOfParts(parts) {
   return (parts.year - 1) * YEAR + (parts.day - 1) * DAY + parts.hour * HOUR + parts.minute * MINUTE + parts.second;
 }
 function stepLabel(seconds) {
-  return writeQuantity(value2("s", seconds));
+  return writeQuantity(value3("s", seconds));
 }
 function MissionDateField({
-  value: value4,
+  value: value5,
   onChange,
   label,
   disabled,
@@ -5219,7 +5387,7 @@ function MissionDateField({
 }) {
   const groupId = useId10();
   const absentId = `${groupId}-absent`;
-  const instant = value4 !== null && Number.isFinite(value4) ? value4 : null;
+  const instant = value5 !== null && Number.isFinite(value5) ? value5 : null;
   const parts = instant === null ? null : partsOfUt(instant);
   const calendar = kspCalendar();
   const coarse = steps ?? [
@@ -5229,9 +5397,9 @@ function MissionDateField({
     calendar.day
   ];
   const [draft, setDraft] = useState13(null);
-  const field = (key, text, min, width) => /* @__PURE__ */ jsxs33(Stack, { gap: "caption", children: [
-    /* @__PURE__ */ jsx45(FieldLabel, { htmlFor: `${groupId}-${key}`, children: text }),
-    /* @__PURE__ */ jsx45(
+  const field = (key, text, min, width) => /* @__PURE__ */ jsxs34(Stack, { gap: "caption", children: [
+    /* @__PURE__ */ jsx46(FieldLabel, { htmlFor: `${groupId}-${key}`, children: text }),
+    /* @__PURE__ */ jsx46(
       Input,
       {
         id: `${groupId}-${key}`,
@@ -5257,18 +5425,18 @@ function MissionDateField({
       }
     )
   ] }, key);
-  return /* @__PURE__ */ jsxs33(Stack, { gap: "related-dense", role: "group", "aria-label": label, children: [
-    /* @__PURE__ */ jsxs33(Cluster, { gap: "related-dense", wrap: true, justify: "start", children: [
+  return /* @__PURE__ */ jsxs34(Stack, { gap: "related-dense", role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsxs34(Cluster, { gap: "related-dense", wrap: true, justify: "start", children: [
       field("year", "YEAR", 1, "5rem"),
       field("day", "DAY", 1, "5rem"),
       field("hour", "HR", 0, "4rem"),
       field("minute", "MIN", 0, "4rem"),
       field("second", "SEC", 0, "4rem")
     ] }),
-    parts === null && /* @__PURE__ */ jsx45(Text, { id: absentId, level: "muted", size: "sm", children: `${NULL_DISPLAY} no ${label.toLowerCase()} to show. Type one to state it.` }),
-    coarse.length === 0 ? null : /* @__PURE__ */ jsxs33(Cluster, { gap: "related-packed", wrap: true, justify: "start", children: [
-      /* @__PURE__ */ jsx45(Text, { level: "faint", size: "sm", children: "NUDGE" }),
-      coarse.map((step) => /* @__PURE__ */ jsx45(
+    parts === null && /* @__PURE__ */ jsx46(Text, { id: absentId, level: "muted", size: "sm", children: `${NULL_DISPLAY} no ${label.toLowerCase()} to show. Type one to state it.` }),
+    coarse.length === 0 ? null : /* @__PURE__ */ jsxs34(Cluster, { gap: "related-packed", wrap: true, justify: "start", children: [
+      /* @__PURE__ */ jsx46(Text, { level: "faint", size: "sm", children: "NUDGE" }),
+      coarse.map((step) => /* @__PURE__ */ jsx46(
         Button,
         {
           variant: "ghost",
@@ -5280,7 +5448,7 @@ function MissionDateField({
         },
         `minus-${step}`
       )),
-      coarse.map((step) => /* @__PURE__ */ jsx45(
+      coarse.map((step) => /* @__PURE__ */ jsx46(
         Button,
         {
           variant: "ghost",
@@ -5308,11 +5476,11 @@ import {
   useState as useState14
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import styled41 from "styled-components";
+import styled42 from "styled-components";
 
 // src/ModalSaveBar.tsx
 import { createContext, useContext, useEffect as useEffect10, useMemo as useMemo2, useRef as useRef12 } from "react";
-import { Fragment as Fragment14, jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 var ModalChromeContext = createContext(null);
 function useModalChrome(footer, dirty) {
   const ctx = useContext(ModalChromeContext);
@@ -5328,14 +5496,14 @@ function useModalChrome(footer, dirty) {
   }, [setDirty, dirty]);
 }
 function useModalSaveBar(options) {
-  const { onSave, value: value4, saved, saveLabel = "Save", extra, disabled } = options;
+  const { onSave, value: value5, saved, saveLabel = "Save", extra, disabled } = options;
   const baselineRef = useRef12(null);
-  if (baselineRef.current === null) baselineRef.current = { v: value4 };
-  const dirty = !configEqual(value4, baselineRef.current.v) && !configEqual(value4, saved);
+  if (baselineRef.current === null) baselineRef.current = { v: value5 };
+  const dirty = !configEqual(value5, baselineRef.current.v) && !configEqual(value5, saved);
   const footer = useMemo2(
-    () => /* @__PURE__ */ jsxs34(Fragment14, { children: [
+    () => /* @__PURE__ */ jsxs35(Fragment14, { children: [
       extra,
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47(
         Button,
         {
           variant: "primary",
@@ -5352,7 +5520,7 @@ function useModalSaveBar(options) {
 }
 
 // src/Modal.tsx
-import { Fragment as Fragment15, jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
 var ModalContext = createContext2(null);
 var modalSeq = 0;
 function ModalProvider({ children }) {
@@ -5365,7 +5533,7 @@ function ModalProvider({ children }) {
         {
           id,
           title: options?.title,
-          ariaLabel: options?.ariaLabel,
+          "aria-label": options?.["aria-label"],
           width: options?.width,
           content
         }
@@ -5377,10 +5545,10 @@ function ModalProvider({ children }) {
   const close = useCallback7((id) => {
     setModals((prev) => prev.filter((m) => m.id !== id));
   }, []);
-  const value4 = useMemo3(() => ({ open, close }), [open, close]);
-  return /* @__PURE__ */ jsxs35(ModalContext.Provider, { value: value4, children: [
+  const value5 = useMemo3(() => ({ open, close }), [open, close]);
+  return /* @__PURE__ */ jsxs36(ModalContext.Provider, { value: value5, children: [
     children,
-    modals.map((m, i) => /* @__PURE__ */ jsx47(
+    modals.map((m, i) => /* @__PURE__ */ jsx48(
       ModalDialog,
       {
         entry: m,
@@ -5471,9 +5639,9 @@ function ModalDialog({ entry, isTop, onClose }) {
     if (!confirming) el.querySelector(FOCUSABLE)?.focus();
     return () => document.removeEventListener("keydown", handleTab);
   }, [confirming, footer]);
-  return /* @__PURE__ */ jsx47(Fragment15, { children: createPortal2(
+  return /* @__PURE__ */ jsx48(Fragment15, { children: createPortal2(
     // Interactive, so it cannot also be role="presentation"; keyboard users close with Escape.
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx48(
       Backdrop,
       {
         onMouseDown: (e) => {
@@ -5485,30 +5653,30 @@ function ModalDialog({ entry, isTop, onClose }) {
           }
           downOnBackdropRef.current = false;
         },
-        children: /* @__PURE__ */ jsxs35(
+        children: /* @__PURE__ */ jsxs36(
           Dialog,
           {
             ref: dialogRef,
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": entry.title ? titleId : void 0,
-            "aria-label": entry.title ? void 0 : entry.ariaLabel,
+            "aria-label": entry.title ? void 0 : entry["aria-label"],
             $width: entry.width,
             children: [
-              /* @__PURE__ */ jsxs35(DialogHeader, { children: [
-                entry.title && /* @__PURE__ */ jsx47(DialogTitle, { id: titleId, children: entry.title }),
-                /* @__PURE__ */ jsx47(CloseButton, { onClick: requestClose, "aria-label": "Close", children: /* @__PURE__ */ jsx47(CloseIcon, { size: 16 }) })
+              /* @__PURE__ */ jsxs36(DialogHeader, { children: [
+                entry.title && /* @__PURE__ */ jsx48(DialogTitle, { id: titleId, children: entry.title }),
+                /* @__PURE__ */ jsx48(CloseButton, { onClick: requestClose, "aria-label": "Close", children: /* @__PURE__ */ jsx48(CloseIcon, { size: 16 }) })
               ] }),
-              /* @__PURE__ */ jsx47(DialogBody, { ref: setBody, tabIndex: bodyTabIndex, children: /* @__PURE__ */ jsx47(ModalChromeContext.Provider, { value: chrome, children: entry.content }) }),
-              footer && !confirming && /* @__PURE__ */ jsx47(DialogFooter, { children: footer }),
-              confirming && /* @__PURE__ */ jsxs35(
+              /* @__PURE__ */ jsx48(DialogBody, { ref: setBody, tabIndex: bodyTabIndex, children: /* @__PURE__ */ jsx48(ModalChromeContext.Provider, { value: chrome, children: entry.content }) }),
+              footer && !confirming && /* @__PURE__ */ jsx48(DialogFooter, { children: footer }),
+              confirming && /* @__PURE__ */ jsxs36(
                 DialogFooter,
                 {
                   role: "alertdialog",
                   "aria-label": "Discard unsaved changes?",
                   children: [
-                    /* @__PURE__ */ jsx47(DiscardPrompt, { children: "Discard unsaved changes?" }),
-                    /* @__PURE__ */ jsx47(
+                    /* @__PURE__ */ jsx48(DiscardPrompt, { children: "Discard unsaved changes?" }),
+                    /* @__PURE__ */ jsx48(
                       Button,
                       {
                         variant: "ghost",
@@ -5517,7 +5685,7 @@ function ModalDialog({ entry, isTop, onClose }) {
                         children: "Keep editing"
                       }
                     ),
-                    /* @__PURE__ */ jsx47(
+                    /* @__PURE__ */ jsx48(
                       Button,
                       {
                         variant: "primary",
@@ -5541,7 +5709,7 @@ function ModalDialog({ entry, isTop, onClose }) {
     document.body
   ) });
 }
-var Backdrop = styled41.div`
+var Backdrop = styled42.div`
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.72);
@@ -5550,7 +5718,7 @@ var Backdrop = styled41.div`
   justify-content: center;
   z-index: var(--z-modal);
 `;
-var Dialog = styled41.div`
+var Dialog = styled42.div`
   background: var(--color-surface-panel);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-floating);
@@ -5562,7 +5730,7 @@ var Dialog = styled41.div`
   flex-direction: column;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
 `;
-var DialogHeader = styled41.div`
+var DialogHeader = styled42.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5570,11 +5738,11 @@ var DialogHeader = styled41.div`
   border-bottom: 1px solid var(--color-border-subtle);
   flex-shrink: 0;
 `;
-var DialogTitle = styled41.h2`
+var DialogTitle = styled42.h2`
   margin: 0;
   ${titleText}
 `;
-var CloseButton = styled41.button`
+var CloseButton = styled42.button`
   background: none;
   border: none;
   color: var(--color-text-faint);
@@ -5595,14 +5763,14 @@ var CloseButton = styled41.button`
     justify-content: center;
   }
 `;
-var DialogBody = styled41.div`
+var DialogBody = styled42.div`
   padding: var(--inset-modal-body);
   overflow-y: auto;
   ${focusRingInset}
   -webkit-overflow-scrolling: touch;
   flex: 1;
 `;
-var DialogFooter = styled41.div`
+var DialogFooter = styled42.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -5611,7 +5779,7 @@ var DialogFooter = styled41.div`
   border-top: 1px solid var(--color-border-subtle);
   flex-shrink: 0;
 `;
-var DiscardPrompt = styled41.span`
+var DiscardPrompt = styled42.span`
   margin-right: auto;
   font-size: var(--font-size-compact);
   color: var(--color-text-primary);
@@ -5619,9 +5787,9 @@ var DiscardPrompt = styled41.span`
 
 // src/Notice.tsx
 import { useEffect as useEffect12, useRef as useRef14, useState as useState15 } from "react";
-import styled42 from "styled-components";
-import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
-var Notice__Root = styled42(Block__Root)`
+import styled43 from "styled-components";
+import { Fragment as Fragment16, jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+var Notice__Root = styled43(Block__Root)`
   --gap-related: var(--gap-related-comfortable);
   --bleed-inline: 0px;
 
@@ -5664,9 +5832,9 @@ function Notice({
     $tone: tone
   });
   if (role !== void 0) return block;
-  return /* @__PURE__ */ jsxs36(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment16, { children: [
     block,
-    /* @__PURE__ */ jsx48(LiveRegion, { visuallyHidden: true, children: said })
+    /* @__PURE__ */ jsx49(LiveRegion, { visuallyHidden: true, children: said })
   ] });
 }
 function spokenText(root) {
@@ -5678,25 +5846,407 @@ function spokenText(root) {
   return runs.join(" ").replace(/\s+/g, " ").trim();
 }
 
+// src/reckoningMarkDraw.tsx
+import { jsx as jsx50 } from "react/jsx-runtime";
+var HELD_SQUARE_HALF = 0.89;
+var GHOST_OPACITY = 0.45;
+function ReckoningMarkSvg({
+  kind,
+  x,
+  y,
+  scale = 1,
+  ghost = false
+}) {
+  const spec = RECKONING_MARK[kind];
+  const r = spec.canvasRadius * scale;
+  const common = {
+    fill: spec.color,
+    opacity: ghost ? GHOST_OPACITY : void 0,
+    "data-reckoning-mark": kind,
+    "aria-hidden": true
+  };
+  if (kind === "held") {
+    const half = r * HELD_SQUARE_HALF;
+    return /* @__PURE__ */ jsx50(
+      "rect",
+      {
+        x: x - half,
+        y: y - half,
+        width: 2 * half,
+        height: 2 * half,
+        ...common
+      }
+    );
+  }
+  const points = `${x},${y - r} ${x + r},${y + r * 0.8} ${x - r},${y + r * 0.8}`;
+  return /* @__PURE__ */ jsx50("polygon", { points, ...common });
+}
+function resolvedColor(canvas, cssVar, fallback) {
+  const v = getComputedStyle(canvas).getPropertyValue(cssVar).trim();
+  return v || fallback;
+}
+function paintReckoningMark(canvas, ctx, kind, x, y, { ghost = false, scale = 1 } = {}) {
+  const spec = RECKONING_MARK[kind];
+  const r = spec.canvasRadius * scale;
+  ctx.save();
+  ctx.globalAlpha = ghost ? GHOST_OPACITY : 1;
+  ctx.fillStyle = resolvedColor(canvas, spec.cssVar, spec.fallback);
+  ctx.beginPath();
+  if (kind === "held") {
+    const half = r * HELD_SQUARE_HALF;
+    ctx.rect(x - half, y - half, 2 * half, 2 * half);
+  } else {
+    ctx.moveTo(x, y - r);
+    ctx.lineTo(x + r, y + r * 0.8);
+    ctx.lineTo(x - r, y + r * 0.8);
+    ctx.closePath();
+  }
+  ctx.fill();
+  ctx.restore();
+}
+function paintReckonedPosition(canvas, ctx, { held, modelled }, options = {}) {
+  if (held !== void 0 && modelled !== void 0) {
+    ctx.save();
+    ctx.globalAlpha = GHOST_OPACITY;
+    ctx.strokeStyle = resolvedColor(
+      canvas,
+      RECKONING_MARK.modelled.cssVar,
+      RECKONING_MARK.modelled.fallback
+    );
+    ctx.lineWidth = 1;
+    ctx.setLineDash([2, 3]);
+    ctx.beginPath();
+    ctx.moveTo(held.x, held.y);
+    ctx.lineTo(modelled.x, modelled.y);
+    ctx.stroke();
+    ctx.restore();
+  }
+  if (held !== void 0) {
+    paintReckoningMark(canvas, ctx, "held", held.x, held.y, {
+      ...options,
+      ghost: modelled !== void 0
+    });
+  }
+  if (modelled !== void 0) {
+    paintReckoningMark(
+      canvas,
+      ctx,
+      "modelled",
+      modelled.x,
+      modelled.y,
+      options
+    );
+  }
+}
+
+// src/PlotCrosshair.tsx
+import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+var ROW_PX = 14;
+var PAD_PX = 5;
+var CHAR_PX = 6.2;
+var GAP_PX = 10;
+var MARK_PX = 12;
+var EDGE_PX = 6;
+var SWATCH_PX = 8;
+var DOT_PX = 4.5;
+var SWATCH_GAP_PX = 4;
+var MAX_COMPACT_LABEL_CHARS = 12;
+var FULL_MIN_PLOT_W = 190;
+var FULL_MIN_PLOT_H = 80;
+function shortened(label, chars) {
+  if (chars < 1) return "";
+  return label.length <= chars ? label : `${label.slice(0, Math.max(1, chars - 1))}\u2026`;
+}
+function layoutCard(plot, heading, allRows, column) {
+  const room = column ?? plot;
+  const plotW = room.x1 - room.x0;
+  const plotH = plot.y1 - plot.y0;
+  const full = plotW >= FULL_MIN_PLOT_W && plotH >= FULL_MIN_PLOT_H;
+  const named = full || column !== void 0;
+  const rows = full || column ? allRows : allRows.filter((row) => !row.detail);
+  const compactRoom = plotW - EDGE_PX * 2 - PAD_PX * 2 - SWATCH_PX - SWATCH_GAP_PX;
+  const stacked = column !== void 0;
+  const stackedChars = Math.floor(compactRoom / CHAR_PX);
+  const valueText = (row) => shortened(
+    row.value ?? NULL_DISPLAY,
+    stackedChars - (row.currency ? row.currency.length + 2 : 0)
+  );
+  const text = (row) => {
+    const value5 = row.value ?? NULL_DISPLAY;
+    if (stacked) return shortened(row.label, stackedChars);
+    if (full) return `${row.label}  ${value5}`;
+    const room2 = Math.floor((compactRoom - value5.length * CHAR_PX) / CHAR_PX) - 1 - (row.modelled ? 2 : 0);
+    const label = shortened(row.label, Math.min(room2, MAX_COMPACT_LABEL_CHARS));
+    if (label !== "") return `${label} ${value5}`;
+    const chars = Math.floor(compactRoom / CHAR_PX) - (row.modelled ? 2 : 0);
+    return shortened(value5, chars);
+  };
+  const currencyText = (row) => (full || stacked) && row.currency ? row.currency : "";
+  const currencyW = (row) => currencyText(row) ? GAP_PX + currencyText(row).length * CHAR_PX + (row.modelled ? MARK_PX : 0) : row.modelled ? MARK_PX : 0;
+  const swatchW = full ? 0 : SWATCH_PX + SWATCH_GAP_PX;
+  const headingChars = Math.floor((plotW - EDGE_PX * 2 - PAD_PX * 2) / CHAR_PX);
+  const textW = Math.max(
+    ...rows.map(
+      (row) => stacked ? swatchW + Math.max(
+        text(row).length * CHAR_PX,
+        valueText(row).length * CHAR_PX + currencyW(row)
+      ) : swatchW + text(row).length * CHAR_PX + currencyW(row)
+    ),
+    named ? Math.min(heading.length, headingChars) * CHAR_PX : 0
+  );
+  const headRows = named ? 1 : 0;
+  const cardH = (rows.length * (stacked ? 2 : 1) + headRows) * ROW_PX + PAD_PX * 2;
+  return {
+    full,
+    named,
+    headingChars,
+    stacked,
+    rows,
+    text,
+    valueText,
+    currencyText,
+    // A column card spans its column, so the captions standing under it line up with it.
+    cardW: stacked ? plotW : Math.min(textW + PAD_PX * 2, plotW - EDGE_PX * 2),
+    cardH,
+    headRows,
+    fits: cardH <= plotH - EDGE_PX * 2
+  };
+}
+function crossesBox(trace, x, y, w, h) {
+  const inside = (px, py) => px >= x && px <= x + w && py >= y && py <= y + h;
+  for (let i = 1; i < trace.cx.length; i++) {
+    const [ax, ay, bx, by] = [
+      trace.cx[i - 1],
+      trace.cy[i - 1],
+      trace.cx[i],
+      trace.cy[i]
+    ];
+    if (![ax, ay, bx, by].every(Number.isFinite)) continue;
+    const steps = Math.max(1, Math.ceil(Math.hypot(bx - ax, by - ay) / ROW_PX));
+    for (let k = 0; k <= steps; k++) {
+      if (inside(ax + (bx - ax) * k / steps, ay + (by - ay) * k / steps)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function resolveCard({
+  x,
+  plot,
+  heading,
+  rows: allRows,
+  column,
+  traces = []
+}) {
+  const layout = layoutCard(plot, heading, allRows, column);
+  const { rows, cardW, cardH, fits } = layout;
+  const cardY0 = plot.y0 + EDGE_PX;
+  const dots = rows.flatMap(
+    (row) => row.y === void 0 || row.y === null ? [] : [row.y]
+  );
+  const clearOfDots = (cardX, cardY) => dots.every(
+    (dy) => x + DOT_PX < cardX || x - DOT_PX > cardX + cardW || dy + DOT_PX < cardY || dy - DOT_PX > cardY + cardH
+  );
+  const roomRight = plot.x1 - x - EDGE_PX;
+  const rightFirst = roomRight >= cardW || roomRight >= x - plot.x0;
+  const clampX = (v) => Math.max(plot.x0 + EDGE_PX, Math.min(plot.x1 - EDGE_PX - cardW, v));
+  const sideXs = rightFirst ? [x + EDGE_PX, x - EDGE_PX - cardW] : [x - EDGE_PX - cardW, x + EDGE_PX];
+  const corners = [cardY0, plot.y1 - EDGE_PX - cardH].flatMap(
+    (cy) => sideXs.map((cx) => ({ cardX: clampX(cx), cardY: cy }))
+  );
+  const clearOfTraces = (cardX, cardY) => traces.every((t) => !crossesBox(t, cardX, cardY, cardW, cardH));
+  const overPlot = corners.find(
+    (c) => clearOfDots(c.cardX, c.cardY) && clearOfTraces(c.cardX, c.cardY)
+  ) ?? corners.find((c) => clearOfDots(c.cardX, c.cardY));
+  const place2 = !fits ? void 0 : column ? { cardX: column.x0, cardY: column.y0 + EDGE_PX } : overPlot;
+  return { layout, place: place2 };
+}
+function plotCrosshairShowsCard(props) {
+  return resolveCard(props).place !== void 0;
+}
+function PlotCrosshair({
+  x,
+  plot,
+  heading,
+  rows: allRows,
+  column
+}) {
+  const { layout, place: place2 } = resolveCard({
+    x,
+    plot,
+    heading,
+    rows: allRows,
+    column
+  });
+  const {
+    full,
+    named,
+    headingChars,
+    stacked,
+    rows,
+    text,
+    valueText,
+    currencyText,
+    cardW,
+    cardH,
+    headRows
+  } = layout;
+  const drawn = place2 !== void 0;
+  const cardX = place2?.cardX ?? 0;
+  const cardY = place2?.cardY ?? 0;
+  const textX = (cx) => cx + PAD_PX + (full ? 0 : SWATCH_PX + SWATCH_GAP_PX);
+  return /* @__PURE__ */ jsxs38("g", { pointerEvents: "none", "data-plot-crosshair": "", children: [
+    /* @__PURE__ */ jsx51(
+      "line",
+      {
+        x1: x,
+        y1: plot.y0,
+        x2: x,
+        y2: plot.y1,
+        stroke: "var(--color-text-primary)",
+        strokeWidth: 1,
+        opacity: 0.7
+      }
+    ),
+    rows.map(
+      (row) => row.y === void 0 || row.y === null ? null : /* @__PURE__ */ jsx51(
+        "circle",
+        {
+          cx: x,
+          cy: row.y,
+          r: 3.5,
+          fill: row.color,
+          stroke: "var(--color-text-primary)",
+          strokeWidth: 1
+        },
+        row.id
+      )
+    ),
+    drawn && /* @__PURE__ */ jsxs38("g", { "data-plot-crosshair-card": "", children: [
+      /* @__PURE__ */ jsx51(
+        "rect",
+        {
+          x: cardX,
+          y: cardY,
+          width: cardW,
+          height: cardH,
+          rx: 3,
+          fill: "var(--color-surface-panel)",
+          stroke: "var(--color-border-strong)"
+        }
+      ),
+      named && /* @__PURE__ */ jsx51(
+        "text",
+        {
+          x: cardX + PAD_PX,
+          y: cardY + PAD_PX + 10,
+          fill: "var(--color-text-muted)",
+          fontSize: 10,
+          children: shortened(heading, headingChars)
+        }
+      ),
+      rows.map((row, i) => {
+        const lines = stacked ? 2 : 1;
+        const labelBaseline = cardY + PAD_PX + (i * lines + headRows) * ROW_PX + 10;
+        const baseline = labelBaseline + (stacked ? ROW_PX : 0);
+        return /* @__PURE__ */ jsxs38("g", { "data-plot-crosshair-row": row.id, children: [
+          !full && /* @__PURE__ */ jsx51(
+            "rect",
+            {
+              x: cardX + PAD_PX,
+              y: labelBaseline - 8,
+              width: SWATCH_PX,
+              height: SWATCH_PX,
+              fill: row.color,
+              "data-plot-crosshair-swatch": ""
+            }
+          ),
+          /* @__PURE__ */ jsx51(
+            "text",
+            {
+              x: textX(cardX),
+              y: labelBaseline,
+              fill: row.value === null || stacked ? "var(--color-text-faint)" : row.color,
+              fontSize: 10,
+              style: { whiteSpace: "pre" },
+              children: text(row)
+            }
+          ),
+          stacked && /* @__PURE__ */ jsx51(
+            "text",
+            {
+              x: textX(cardX),
+              y: baseline,
+              fill: row.value === null ? "var(--color-text-faint)" : row.color,
+              fontSize: 10,
+              style: { whiteSpace: "pre" },
+              children: valueText(row)
+            }
+          ),
+          row.modelled && /* @__PURE__ */ jsx51(
+            ReckoningMarkSvg,
+            {
+              kind: "modelled",
+              x: cardX + cardW - PAD_PX - currencyText(row).length * CHAR_PX - (currencyText(row) ? 8 : 4),
+              y: baseline - 3
+            }
+          ),
+          currencyText(row) && /* @__PURE__ */ jsx51(
+            "text",
+            {
+              x: cardX + cardW - PAD_PX,
+              y: baseline,
+              textAnchor: "end",
+              fill: "var(--color-text-faint)",
+              fontSize: 10,
+              children: currencyText(row)
+            }
+          )
+        ] }, row.id);
+      })
+    ] })
+  ] });
+}
+
+// src/plotReadoutPlacement.ts
+var BESIDE_MIN_WIDTH = 480;
+var BESIDE_MIN_HEIGHT = 110;
+var COLUMN_MIN_PX = 112;
+var COLUMN_MAX_PX = 260;
+var COLUMN_MAX_SHARE = 0.4;
+var PLOT_KEEPS_PX = 300;
+function placePlotReadouts({
+  width,
+  height,
+  contentWidth
+}) {
+  const columnWidth = Math.max(COLUMN_MIN_PX, Math.ceil(contentWidth));
+  if (width < BESIDE_MIN_WIDTH || height < BESIDE_MIN_HEIGHT || columnWidth > Math.min(COLUMN_MAX_PX, width * COLUMN_MAX_SHARE) || width - columnWidth < PLOT_KEEPS_PX) {
+    return { placement: "overlay" };
+  }
+  return { placement: "beside", columnWidth };
+}
+
 // src/ReadFrameControl.tsx
 import {
   readFrameChoicesEqual
 } from "@ksp-gonogo/sitrep-sdk/frames";
-import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
 function ReadFrameControl({
   id,
   label,
-  value: value4,
+  value: value5,
   options,
   onChange,
   hint
 }) {
   const selectedIndex = options.findIndex(
-    (option) => readFrameChoicesEqual(option.choice, value4)
+    (option) => readFrameChoicesEqual(option.choice, value5)
   );
-  return /* @__PURE__ */ jsxs37(Field, { children: [
-    /* @__PURE__ */ jsx49(FieldLabel, { htmlFor: id, children: label }),
-    /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39(Field, { children: [
+    /* @__PURE__ */ jsx52(FieldLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs39(
       Select,
       {
         id,
@@ -5706,8 +6256,8 @@ function ReadFrameControl({
           if (option !== void 0) onChange(option.choice);
         },
         children: [
-          selectedIndex === -1 && /* @__PURE__ */ jsx49("option", { value: "", disabled: true }),
-          options.map((option, index) => /* @__PURE__ */ jsx49(
+          selectedIndex === -1 && /* @__PURE__ */ jsx52("option", { value: "", disabled: true }),
+          options.map((option, index) => /* @__PURE__ */ jsx52(
             "option",
             {
               value: index,
@@ -5718,43 +6268,43 @@ function ReadFrameControl({
         ]
       }
     ),
-    hint !== void 0 && /* @__PURE__ */ jsx49(FieldHint, { children: hint })
+    hint !== void 0 && /* @__PURE__ */ jsx52(FieldHint, { children: hint })
   ] });
 }
 
 // src/ReadOnlyField.tsx
-import styled43 from "styled-components";
-import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+import styled44 from "styled-components";
+import { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
 function ReadOnlyField({
   label,
   description,
-  value: value4,
+  value: value5,
   className
 }) {
-  return /* @__PURE__ */ jsxs38(ReadOnlyField__List, { className, children: [
-    /* @__PURE__ */ jsxs38(ReadOnlyField__Term, { children: [
-      /* @__PURE__ */ jsx50(ReadOnlyField__Label, { children: label }),
-      description !== void 0 && description !== null && /* @__PURE__ */ jsx50(ReadOnlyField__Description, { children: description })
+  return /* @__PURE__ */ jsxs40(ReadOnlyField__List, { className, children: [
+    /* @__PURE__ */ jsxs40(ReadOnlyField__Term, { children: [
+      /* @__PURE__ */ jsx53(ReadOnlyField__Label, { children: label }),
+      description !== void 0 && description !== null && /* @__PURE__ */ jsx53(ReadOnlyField__Description, { children: description })
     ] }),
-    /* @__PURE__ */ jsx50(ReadOnlyField__Value, { $prose: typeof value4 === "string", children: /* @__PURE__ */ jsx50(ReadOnlyFieldContent, { value: value4 }) })
+    /* @__PURE__ */ jsx53(ReadOnlyField__Value, { $prose: typeof value5 === "string", children: /* @__PURE__ */ jsx53(ReadOnlyFieldContent, { value: value5 }) })
   ] });
 }
 function ReadOnlyFieldContent({
-  value: value4
+  value: value5
 }) {
-  if (value4 === null || value4 === void 0) return /* @__PURE__ */ jsx50(NullValue, {});
-  if (typeof value4 === "object") return /* @__PURE__ */ jsx50(Unit, { value: value4 });
-  if (typeof value4 === "boolean") return value4 ? "On" : "Off";
-  return value4;
+  if (value5 === null || value5 === void 0) return /* @__PURE__ */ jsx53(NullValue, {});
+  if (typeof value5 === "object") return /* @__PURE__ */ jsx53(Unit, { value: value5 });
+  if (typeof value5 === "boolean") return value5 ? "On" : "Off";
+  return value5;
 }
-var ReadOnlyField__List = styled43.dl`
+var ReadOnlyField__List = styled44.dl`
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: var(--gap-field-term);
   margin: 0;
 `;
-var ReadOnlyField__Term = styled43.dt`
+var ReadOnlyField__Term = styled44.dt`
   display: flex;
   flex-direction: column;
   gap: var(--gap-caption);
@@ -5762,16 +6312,16 @@ var ReadOnlyField__Term = styled43.dt`
   /* Grows into the space a short value leaves and yields to a long one. */
   flex: 1 1 auto;
 `;
-var ReadOnlyField__Label = styled43.span`
+var ReadOnlyField__Label = styled44.span`
   font-size: var(--font-size-value);
   color: var(--color-text-primary);
 `;
-var ReadOnlyField__Description = styled43.span`
+var ReadOnlyField__Description = styled44.span`
   font-size: var(--font-size-compact);
   color: var(--color-text-dim);
   max-width: 32em;
 `;
-var ReadOnlyField__Value = styled43.dd`
+var ReadOnlyField__Value = styled44.dd`
   margin: 0;
   min-width: 0;
   text-align: right;
@@ -5788,9 +6338,9 @@ var ReadOnlyField__Value = styled43.dd`
 `;
 
 // src/Readout.tsx
-import styled44, { css as css11 } from "styled-components";
-import { jsx as jsx51 } from "react/jsx-runtime";
-var Readout__Box = styled44.div`
+import styled45, { css as css11 } from "styled-components";
+import { jsx as jsx54 } from "react/jsx-runtime";
+var Readout__Box = styled45.div`
   display: ${({ $size }) => $size === "hero" ? "flex" : "inline-flex"};
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -5818,9 +6368,9 @@ function Readout({
   tone = "neutral",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx51(Readout__Box, { $size: size, $tone: tone, ...rest });
+  return /* @__PURE__ */ jsx54(Readout__Box, { $size: size, $tone: tone, ...rest });
 }
-var ReadoutCaption = styled44.span`
+var ReadoutCaption = styled45.span`
   font-size: var(--font-size-caption);
   font-weight: 400;
   letter-spacing: 0.05em;
@@ -5829,8 +6379,8 @@ var ReadoutCaption = styled44.span`
 `;
 
 // src/Row.tsx
-import styled45, { css as css12 } from "styled-components";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import styled46, { css as css12 } from "styled-components";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function RowBase({
   as,
   interactive = false,
@@ -5841,7 +6391,7 @@ function RowBase({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx55(
     Row__Root,
     {
       as: as ?? "li",
@@ -5855,7 +6405,7 @@ function RowBase({
     }
   );
 }
-var RowName = styled45.span`
+var RowName = styled46.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5864,7 +6414,7 @@ var RowName = styled45.span`
   color: var(--color-text-primary);
 `;
 var WRAPPED_NAME_FLOOR = "min(12ch, 100%)";
-var Row__Root = styled45.li`
+var Row__Root = styled46.li`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -5908,99 +6458,6 @@ var Row__Root = styled45.li`
 `;
 var Row = Object.assign(RowBase, { Name: RowName });
 
-// src/reckoningMarkDraw.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
-var HELD_SQUARE_HALF = 0.89;
-var GHOST_OPACITY = 0.45;
-function ReckoningMarkSvg({
-  kind,
-  x,
-  y,
-  scale = 1,
-  ghost = false
-}) {
-  const spec = RECKONING_MARK[kind];
-  const r = spec.canvasRadius * scale;
-  const common = {
-    fill: spec.color,
-    opacity: ghost ? GHOST_OPACITY : void 0,
-    "data-reckoning-mark": kind,
-    "aria-hidden": true
-  };
-  if (kind === "held") {
-    const half = r * HELD_SQUARE_HALF;
-    return /* @__PURE__ */ jsx53(
-      "rect",
-      {
-        x: x - half,
-        y: y - half,
-        width: 2 * half,
-        height: 2 * half,
-        ...common
-      }
-    );
-  }
-  const points = `${x},${y - r} ${x + r},${y + r * 0.8} ${x - r},${y + r * 0.8}`;
-  return /* @__PURE__ */ jsx53("polygon", { points, ...common });
-}
-function resolvedColor(canvas, cssVar, fallback) {
-  const v = getComputedStyle(canvas).getPropertyValue(cssVar).trim();
-  return v || fallback;
-}
-function paintReckoningMark(canvas, ctx, kind, x, y, { ghost = false, scale = 1 } = {}) {
-  const spec = RECKONING_MARK[kind];
-  const r = spec.canvasRadius * scale;
-  ctx.save();
-  ctx.globalAlpha = ghost ? GHOST_OPACITY : 1;
-  ctx.fillStyle = resolvedColor(canvas, spec.cssVar, spec.fallback);
-  ctx.beginPath();
-  if (kind === "held") {
-    const half = r * HELD_SQUARE_HALF;
-    ctx.rect(x - half, y - half, 2 * half, 2 * half);
-  } else {
-    ctx.moveTo(x, y - r);
-    ctx.lineTo(x + r, y + r * 0.8);
-    ctx.lineTo(x - r, y + r * 0.8);
-    ctx.closePath();
-  }
-  ctx.fill();
-  ctx.restore();
-}
-function paintReckonedPosition(canvas, ctx, { held, modelled }, options = {}) {
-  if (held !== void 0 && modelled !== void 0) {
-    ctx.save();
-    ctx.globalAlpha = GHOST_OPACITY;
-    ctx.strokeStyle = resolvedColor(
-      canvas,
-      RECKONING_MARK.modelled.cssVar,
-      RECKONING_MARK.modelled.fallback
-    );
-    ctx.lineWidth = 1;
-    ctx.setLineDash([2, 3]);
-    ctx.beginPath();
-    ctx.moveTo(held.x, held.y);
-    ctx.lineTo(modelled.x, modelled.y);
-    ctx.stroke();
-    ctx.restore();
-  }
-  if (held !== void 0) {
-    paintReckoningMark(canvas, ctx, "held", held.x, held.y, {
-      ...options,
-      ghost: modelled !== void 0
-    });
-  }
-  if (modelled !== void 0) {
-    paintReckoningMark(
-      canvas,
-      ctx,
-      "modelled",
-      modelled.x,
-      modelled.y,
-      options
-    );
-  }
-}
-
 // src/resourceColor.ts
 var SATURATION_PCT = 65;
 var LIGHTNESS_MIN_PCT = 38;
@@ -6079,8 +6536,8 @@ function fnv1a(str) {
   }
   return hash >>> 0;
 }
-function positiveMod(value4, modulus) {
-  return (value4 % modulus + modulus) % modulus;
+function positiveMod(value5, modulus) {
+  return (value5 % modulus + modulus) % modulus;
 }
 function memberLightness(key) {
   const hash = fnv1a(`light:${key}`);
@@ -6118,8 +6575,8 @@ function resourceColor(name) {
 }
 
 // src/SelectableRow.tsx
-import styled46, { css as css13 } from "styled-components";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import styled47, { css as css13 } from "styled-components";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function SelectableRow({
   selected,
   gap = "caption",
@@ -6128,7 +6585,7 @@ function SelectableRow({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     SelectableRow__Root,
     {
       type: "button",
@@ -6142,7 +6599,7 @@ function SelectableRow({
     }
   );
 }
-var SelectableRow__Root = styled46.button`
+var SelectableRow__Root = styled47.button`
   display: flex;
   ${({ $layout }) => $layout === "split" ? css13`
           justify-content: space-between;
@@ -6184,14 +6641,14 @@ var SelectableRow__Root = styled46.button`
 
 // src/Slider.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled47 from "styled-components";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import styled48 from "styled-components";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var Slider = forwardRef4(
   function Slider2(props, ref) {
-    return /* @__PURE__ */ jsx55(Slider__Input, { ref, type: "range", ...props });
+    return /* @__PURE__ */ jsx57(Slider__Input, { ref, type: "range", ...props });
   }
 );
-var Slider__Input = styled47.input`
+var Slider__Input = styled48.input`
   width: 100%;
   min-width: 0;
   margin: 0;
@@ -6208,8 +6665,8 @@ var Slider__Input = styled47.input`
 `;
 
 // src/Stat.tsx
-import styled48 from "styled-components";
-import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import styled49 from "styled-components";
+import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
 function Stat({
   label,
   children,
@@ -6217,13 +6674,13 @@ function Stat({
   tone = "neutral",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs39(Stat__Root, { ...rest, children: [
-    /* @__PURE__ */ jsx56(Stat__Label, { children: label }),
-    /* @__PURE__ */ jsx56(Stat__Figure, { $tone: tone, children }),
-    detail !== void 0 && detail !== null && /* @__PURE__ */ jsx56(Stat__Detail, { children: detail })
+  return /* @__PURE__ */ jsxs41(Stat__Root, { ...rest, children: [
+    /* @__PURE__ */ jsx58(Stat__Label, { children: label }),
+    /* @__PURE__ */ jsx58(Stat__Figure, { $tone: tone, children }),
+    detail !== void 0 && detail !== null && /* @__PURE__ */ jsx58(Stat__Detail, { children: detail })
   ] });
 }
-var Stat__Root = styled48.dl`
+var Stat__Root = styled49.dl`
   display: flex;
   flex-direction: column;
   gap: var(--gap-caption);
@@ -6234,13 +6691,13 @@ var Stat__Root = styled48.dl`
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-regular);
 `;
-var Stat__Label = styled48.dt`
+var Stat__Label = styled49.dt`
   font-size: var(--font-size-caption);
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--color-text-muted);
 `;
-var Stat__Figure = styled48.dd`
+var Stat__Figure = styled49.dd`
   margin: 0;
   min-width: 0;
   /* Bottom-aligned, so figures line up across the strip even where one label wraps. */
@@ -6255,7 +6712,7 @@ var Stat__Figure = styled48.dd`
   font-variant-numeric: tabular-nums;
   color: ${({ $tone }) => TONE_TEXT[$tone]};
 `;
-var Stat__Detail = styled48.dd`
+var Stat__Detail = styled49.dd`
   margin: 0;
   min-width: 0;
   font-size: var(--font-size-compact);
@@ -6263,34 +6720,36 @@ var Stat__Detail = styled48.dd`
 `;
 
 // src/StatContributions.tsx
-import { Fragment as Fragment17, jsx as jsx57 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx59 } from "react/jsx-runtime";
 function StatContributions({ slot }) {
   const entries = useContributionsBySlotId(slot);
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsx57(Fragment17, { children: entries.map((entry) => /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(Fragment17, { children: entries.map((entry) => /* @__PURE__ */ jsx59(
     Stat,
     {
       label: entry.label,
       detail: entry.detail,
       tone: entry.tone ?? "neutral",
-      children: /* @__PURE__ */ jsx57(StatFigure, { entry })
+      children: /* @__PURE__ */ jsx59(StatFigure, { entry })
     },
     entry.id
   )) });
 }
 function StatFigure({ entry }) {
-  if (entry.value !== void 0) return /* @__PURE__ */ jsx57(Unit, { value: entry.value });
-  if (entry.text !== void 0) return /* @__PURE__ */ jsx57(Fragment17, { children: entry.text });
-  return /* @__PURE__ */ jsx57(NullValue, {});
+  if (entry.value !== void 0) return /* @__PURE__ */ jsx59(Unit, { value: entry.value });
+  if (entry.text === void 0) return /* @__PURE__ */ jsx59(NullValue, {});
+  const marking = heldMarking(entry.held);
+  if (marking === null) return /* @__PURE__ */ jsx59(Fragment17, { children: entry.text });
+  return /* @__PURE__ */ jsx59(HeldFigure, { kind: marking.kind, caption: marking.caption, children: entry.text });
 }
 
 // src/Stepper.tsx
 import { useCallback as useCallback8, useId as useId12 } from "react";
-import styled49 from "styled-components";
-import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
+import styled50 from "styled-components";
+import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
 function Stepper({
   options,
-  value: value4,
+  value: value5,
   onChange,
   label,
   format = String,
@@ -6299,7 +6758,7 @@ function Stepper({
   "data-testid": testId
 }) {
   const describedBy = useId12();
-  const index = options.indexOf(value4);
+  const index = options.indexOf(value5);
   const atStart = index <= 0;
   const atEnd = index >= options.length - 1;
   const step = useCallback8(
@@ -6309,16 +6768,16 @@ function Stepper({
       }
       const clamped = Math.min(Math.max(to, 0), options.length - 1);
       const next = options[clamped];
-      if (next !== value4) {
+      if (next !== value5) {
         onChange(next);
       }
     },
-    [disabled, onChange, options, value4]
+    [disabled, onChange, options, value5]
   );
   const back = () => step(index < 0 ? 0 : index - 1);
   const forward = () => step(index < 0 ? options.length - 1 : index + 1);
-  return /* @__PURE__ */ jsxs40(Stepper__Body, { "data-testid": testId, children: [
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs42(Stepper__Body, { "data-testid": testId, children: [
+    /* @__PURE__ */ jsx60(
       Stepper__Step,
       {
         type: "button",
@@ -6328,7 +6787,7 @@ function Stepper({
         children: "\u2212"
       }
     ),
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx60(
       Stepper__Value,
       {
         role: "spinbutton",
@@ -6337,7 +6796,7 @@ function Stepper({
         "aria-valuenow": index < 0 ? void 0 : index,
         "aria-valuemin": 0,
         "aria-valuemax": Math.max(options.length - 1, 0),
-        "aria-valuetext": format(value4),
+        "aria-valuetext": format(value5),
         "aria-disabled": disabled || void 0,
         "aria-describedby": children == null ? void 0 : describedBy,
         onKeyDown: (event) => {
@@ -6364,10 +6823,10 @@ function Stepper({
               break;
           }
         },
-        children: format(value4)
+        children: format(value5)
       }
     ),
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx60(
       Stepper__Step,
       {
         type: "button",
@@ -6377,16 +6836,16 @@ function Stepper({
         children: "+"
       }
     ),
-    children != null && /* @__PURE__ */ jsx58(Stepper__Note, { id: describedBy, children })
+    children != null && /* @__PURE__ */ jsx60(Stepper__Note, { id: describedBy, children })
   ] });
 }
-var Stepper__Body = styled49.div`
+var Stepper__Body = styled50.div`
   display: inline-grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: var(--gap-stepper);
 `;
-var Stepper__Step = styled49.button`
+var Stepper__Step = styled50.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6421,7 +6880,7 @@ var Stepper__Step = styled49.button`
     min-width: 44px;
   }
 `;
-var Stepper__Value = styled49.div`
+var Stepper__Value = styled50.div`
   text-align: center;
   font-family: var(--font-family-mono);
   font-size: var(--font-size-value);
@@ -6438,17 +6897,17 @@ var Stepper__Value = styled49.div`
     opacity: 0.4;
   }
 `;
-var Stepper__Note = styled49.div`
+var Stepper__Note = styled50.div`
   grid-column: 1 / -1;
   font-size: var(--font-size-compact);
   color: var(--color-text-muted);
 `;
 
 // src/StreamStatusBadge.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 function StreamStatusBadge({ status }) {
   const label = formatStreamStatus(status);
-  return /* @__PURE__ */ jsx59(LiveRegion, { children: label !== null && /* @__PURE__ */ jsx59(Badge, { tone: severityFromStreamStatus(status), size: "sm", children: label }) });
+  return /* @__PURE__ */ jsx61(LiveRegion, { children: label !== null && /* @__PURE__ */ jsx61(Badge, { tone: severityFromStreamStatus(status), size: "sm", children: label }) });
 }
 
 // src/sizeDelta.ts
@@ -6522,8 +6981,8 @@ import {
   useRef as useRef15,
   useState as useState16
 } from "react";
-import styled50 from "styled-components";
-import { Fragment as Fragment18, jsx as jsx60, jsxs as jsxs41 } from "react/jsx-runtime";
+import styled51 from "styled-components";
+import { Fragment as Fragment18, jsx as jsx62, jsxs as jsxs43 } from "react/jsx-runtime";
 var TABS_PANEL_MIN_WIDTH = 240;
 var TABS_PANEL_GAP = 8;
 function shouldExpandTabs(containerWidth, panelCount) {
@@ -6655,18 +7114,18 @@ function Tabs({
     [resolved, active?.id, activateByIndex]
   );
   if (expanded) {
-    return /* @__PURE__ */ jsx60(Tabs__Root, { ref: sizeRef, "data-tabs-root": "", className, children: /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx62(Tabs__Root, { ref: sizeRef, "data-tabs-root": "", className, children: /* @__PURE__ */ jsx62(
       Grid,
       {
         minColWidth: `${TABS_PANEL_MIN_WIDTH}px`,
         align: "start",
         gap: "related-comfortable",
-        children: selectable.map((tab) => /* @__PURE__ */ jsxs41(Section, { children: [
-          /* @__PURE__ */ jsxs41(SectionTitle, { as: "h3", $rule: true, children: [
+        children: selectable.map((tab) => /* @__PURE__ */ jsxs43(Section, { children: [
+          /* @__PURE__ */ jsxs43(SectionTitle, { as: "h3", $rule: true, children: [
             tab.label,
-            tab.indicator && /* @__PURE__ */ jsxs41(Fragment18, { children: [
-              /* @__PURE__ */ jsx60(Tabs__Dot, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx60(VisuallyHidden, { children: ", needs attention" })
+            tab.indicator && /* @__PURE__ */ jsxs43(Fragment18, { children: [
+              /* @__PURE__ */ jsx62(Tabs__Dot, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx62(VisuallyHidden, { children: ", needs attention" })
             ] })
           ] }),
           tab.content
@@ -6674,16 +7133,16 @@ function Tabs({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs41(Tabs__Root, { ref: sizeRef, "data-tabs-root": "", className, children: [
-    /* @__PURE__ */ jsxs41(Tabs__BarShell, { children: [
-      /* @__PURE__ */ jsx60(Tabs__Scroller, { ref: scrollerRef, children: /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs43(Tabs__Root, { ref: sizeRef, "data-tabs-root": "", className, children: [
+    /* @__PURE__ */ jsxs43(Tabs__BarShell, { children: [
+      /* @__PURE__ */ jsx62(Tabs__Scroller, { ref: scrollerRef, children: /* @__PURE__ */ jsxs43(
         Tabs__Bar,
         {
           role: "tablist",
           "aria-label": ariaLabel,
           "aria-labelledby": ariaLabelledBy,
           children: [
-            blob && /* @__PURE__ */ jsx60(
+            blob && /* @__PURE__ */ jsx62(
               Tabs__Blob,
               {
                 "aria-hidden": "true",
@@ -6692,7 +7151,7 @@ function Tabs({
             ),
             resolved.map((tab) => {
               const isActive = tab.id === active?.id;
-              return /* @__PURE__ */ jsxs41(
+              return /* @__PURE__ */ jsxs43(
                 Tabs__Button,
                 {
                   ref: (el) => {
@@ -6713,9 +7172,9 @@ function Tabs({
                   $compact: compact,
                   children: [
                     tab.label,
-                    tab.indicator && /* @__PURE__ */ jsxs41(Fragment18, { children: [
-                      /* @__PURE__ */ jsx60(Tabs__Dot, { "aria-hidden": "true" }),
-                      /* @__PURE__ */ jsx60("span", { id: `${uid}${tab.id}-attention`, hidden: true, children: "Needs attention" })
+                    tab.indicator && /* @__PURE__ */ jsxs43(Fragment18, { children: [
+                      /* @__PURE__ */ jsx62(Tabs__Dot, { "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx62("span", { id: `${uid}${tab.id}-attention`, hidden: true, children: "Needs attention" })
                     ] })
                   ]
                 },
@@ -6725,10 +7184,10 @@ function Tabs({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx60(InlineOverflowGlow, { $position: "left", $visible: overflow.left }),
-      /* @__PURE__ */ jsx60(InlineOverflowGlow, { $position: "right", $visible: overflow.right })
+      /* @__PURE__ */ jsx62(InlineOverflowGlow, { $position: "left", $visible: overflow.left }),
+      /* @__PURE__ */ jsx62(InlineOverflowGlow, { $position: "right", $visible: overflow.right })
     ] }),
-    active && /* @__PURE__ */ jsx60(
+    active && /* @__PURE__ */ jsx62(
       Tabs__Panel,
       {
         role: "tabpanel",
@@ -6739,7 +7198,7 @@ function Tabs({
     )
   ] });
 }
-var Tabs__Root = styled50.div`
+var Tabs__Root = styled51.div`
   display: flex;
   flex-direction: column;
   gap: var(--gap-tabs-panel);
@@ -6747,11 +7206,11 @@ var Tabs__Root = styled50.div`
   flex: 1;
   min-height: 0;
 `;
-var Tabs__BarShell = styled50.div`
+var Tabs__BarShell = styled51.div`
   position: relative;
   margin-inline: calc(-1 * var(--bleed-inline));
 `;
-var Tabs__Scroller = styled50.div`
+var Tabs__Scroller = styled51.div`
   display: flex;
   padding-inline: var(--bleed-inline);
   overflow-x: auto;
@@ -6765,7 +7224,7 @@ var Tabs__Scroller = styled50.div`
     display: none;
   }
 `;
-var Tabs__Bar = styled50.div`
+var Tabs__Bar = styled51.div`
   position: relative;
   flex: 1 0 auto;
   display: flex;
@@ -6775,7 +7234,7 @@ var Tabs__Bar = styled50.div`
   padding: var(--inset-tab-track);
   flex-wrap: nowrap;
 `;
-var Tabs__Blob = styled50.span`
+var Tabs__Blob = styled51.span`
   position: absolute;
   top: var(--inset-tab-track);
   bottom: var(--inset-tab-track);
@@ -6791,7 +7250,7 @@ var Tabs__Blob = styled50.span`
     transition: none;
   }
 `;
-var Tabs__Dot = styled50.span`
+var Tabs__Dot = styled51.span`
   display: inline-block;
   width: 7px;
   height: 7px;
@@ -6800,7 +7259,7 @@ var Tabs__Dot = styled50.span`
   border-radius: var(--radius-circle);
   background: var(--color-warn-mark);
 `;
-var Tabs__Button = styled50.button`
+var Tabs__Button = styled51.button`
   /* Transparent: the blob behind it is the selected background. */
   background: transparent;
   border: none;
@@ -6852,7 +7311,7 @@ var Tabs__Button = styled50.button`
     ${({ $compact }) => $compact ? "padding: var(--inset-tab-compact-touch);" : "padding: var(--inset-control-touch);"}
   }
 `;
-var Tabs__Panel = styled50.div`
+var Tabs__Panel = styled51.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -6862,15 +7321,28 @@ var Tabs__Panel = styled50.div`
 // src/Tape.tsx
 import { bandIn as bandIn3 } from "@ksp-gonogo/sitrep-sdk";
 import { useEffect as useEffect14, useRef as useRef16, useState as useState17 } from "react";
-import styled51 from "styled-components";
-import { Fragment as Fragment19, jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
+import styled52 from "styled-components";
+import { Fragment as Fragment19, jsx as jsx63, jsxs as jsxs44 } from "react/jsx-runtime";
+var FIGURE_CLEARANCE_PX = 9;
 var PAD_TOP = 12;
 var PAD_BOTTOM = 12;
 var TRACK_X = 52;
 var TRACK_W = 10;
+var MAX_TICK_DECIMALS = 4;
+function exactMarks(ticks, scale, withDecimals) {
+  const figures = (s) => ticks.map((t) => Number.parseFloat(s.mark(t).replace(/[^\d.-]/g, "")));
+  const exact = figures(withDecimals(MAX_TICK_DECIMALS));
+  const isExact = (s) => figures(s).every((figure, i) => figure === exact[i]);
+  if (isExact(scale)) return scale;
+  for (let decimals = 0; decimals < MAX_TICK_DECIMALS; decimals++) {
+    const candidate = withDecimals(decimals);
+    if (isExact(candidate)) return candidate;
+  }
+  return withDecimals(MAX_TICK_DECIMALS);
+}
 function Tape({
   labelSide = "left",
-  value: value4,
+  value: value5,
   min,
   max,
   width = 92,
@@ -6882,7 +7354,7 @@ function Tape({
   groundLine,
   seaLevel,
   format,
-  ariaLabel
+  "aria-label": ariaLabel
 }) {
   const wrapRef = useRef16(null);
   const [measured, setMeasured] = useState17(height);
@@ -6900,7 +7372,7 @@ function Tape({
     return () => ro.disconnect();
   }, [fillHeight]);
   const h = fillHeight ? measured : height;
-  const resolved = resolveCurrency(value4);
+  const resolved = resolveCurrency(value5);
   const { shown, held, caption, band } = resolved;
   const { anchor, tip } = useTooltip(caption);
   const current = shown?.magnitude ?? Number.NaN;
@@ -6950,8 +7422,8 @@ function Tape({
     const x1 = trackX - 4;
     const x2 = trackX + TRACK_W + 4;
     const mid = trackX + TRACK_W / 2;
-    return /* @__PURE__ */ jsxs42("g", { "data-level": dashed ? "sea" : "ground", children: [
-      /* @__PURE__ */ jsx61(
+    return /* @__PURE__ */ jsxs44("g", { "data-level": dashed ? "sea" : "ground", children: [
+      /* @__PURE__ */ jsx63(
         "line",
         {
           x1,
@@ -6963,7 +7435,7 @@ function Tape({
           strokeDasharray: dashed ? "3 2" : void 0
         }
       ),
-      beyond !== 0 && /* @__PURE__ */ jsx61(
+      beyond !== 0 && /* @__PURE__ */ jsx63(
         "polygon",
         {
           "data-off-scale": "true",
@@ -6976,9 +7448,16 @@ function Tape({
   const ticks = [];
   const step = tickStep?.magnitude ?? 0;
   if (step > 0 && span > 0) {
-    const first = Math.ceil(axisMin / step) * step;
-    for (let t = first; t <= axisMax + 1e-9; t += step) ticks.push(t);
+    const firstIndex = Math.ceil(axisMin / step);
+    const lastIndex = Math.floor(axisMax / step + 1e-9);
+    for (let i = firstIndex; i <= lastIndex; i++)
+      ticks.push(i === 0 ? 0 : i * step);
   }
+  const tickScale = exactMarks(
+    ticks,
+    scale,
+    (decimals) => quantityScale(max, { format, decimals })
+  );
   const pointerY = yOf(clamped);
   const onScale = (y) => usable > 0 ? (PAD_TOP + usable - y) / usable : 0;
   const drawnInterval = interval !== null && standsApart(
@@ -6986,7 +7465,7 @@ function Tape({
     [onScale(onRail(interval.lo)), onScale(onRail(interval.hi))],
     placedOnScale()
   ) ? interval : null;
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs44(
     Tape__Meter,
     {
       ref: wrapRef,
@@ -7008,7 +7487,7 @@ function Tape({
       },
       style: fillHeight ? { height: "100%" } : void 0,
       children: [
-        /* @__PURE__ */ jsxs42(
+        /* @__PURE__ */ jsxs44(
           "svg",
           {
             width,
@@ -7022,7 +7501,7 @@ function Tape({
               height: "auto"
             },
             children: [
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx63(
                 "rect",
                 {
                   x: trackX,
@@ -7037,7 +7516,7 @@ function Tape({
                 const yHi = onRail(z.from.max(z.to));
                 const yLo = onRail(z.from.min(z.to));
                 const h2 = Math.max(0, yLo - yHi);
-                return /* @__PURE__ */ jsx61("g", { children: /* @__PURE__ */ jsx61(
+                return /* @__PURE__ */ jsx63("g", { children: /* @__PURE__ */ jsx63(
                   "rect",
                   {
                     x: trackX,
@@ -7053,8 +7532,11 @@ function Tape({
               groundLine !== void 0 && span > 0 && drawLevel(groundLine, false),
               ticks.map((t) => {
                 const y = yOf(t);
-                return /* @__PURE__ */ jsxs42("g", { children: [
-                  /* @__PURE__ */ jsx61(
+                const underFigure = hasFigure && Math.abs(
+                  y - Math.max(trackTop + 4, Math.min(trackBottom - 4, pointerY))
+                ) < FIGURE_CLEARANCE_PX;
+                return /* @__PURE__ */ jsxs44("g", { children: [
+                  /* @__PURE__ */ jsx63(
                     "line",
                     {
                       x1: mirrored ? trackX + TRACK_W + 4 : trackX - 4,
@@ -7065,7 +7547,7 @@ function Tape({
                       strokeWidth: 1
                     }
                   ),
-                  /* @__PURE__ */ jsx61(
+                  !underFigure && /* @__PURE__ */ jsx63(
                     "text",
                     {
                       x: labelX,
@@ -7074,7 +7556,7 @@ function Tape({
                       dominantBaseline: "middle",
                       fontSize: 8,
                       fill: "var(--color-text-faint)",
-                      children: scale.mark(t)
+                      children: tickScale.mark(t)
                     }
                   )
                 ] }, `tick-${t}`);
@@ -7083,8 +7565,8 @@ function Tape({
                 const { bounds } = m;
                 const y = onRail(m.value);
                 const color = m.color ?? "var(--color-accent-fg)";
-                return /* @__PURE__ */ jsxs42("g", { "data-marker": m.label, children: [
-                  /* @__PURE__ */ jsx61(
+                return /* @__PURE__ */ jsxs44("g", { "data-marker": m.label, children: [
+                  /* @__PURE__ */ jsx63(
                     "line",
                     {
                       x1: trackX,
@@ -7096,7 +7578,7 @@ function Tape({
                       strokeDasharray: "2 2"
                     }
                   ),
-                  /* @__PURE__ */ jsx61(
+                  /* @__PURE__ */ jsx63(
                     "polygon",
                     {
                       points: mirrored ? `${trackX},${y} ${trackX - 5},${y - 3} ${trackX - 5},${y + 3}` : `${trackX + TRACK_W},${y} ${trackX + TRACK_W + 5},${y - 3} ${trackX + TRACK_W + 5},${y + 3}`,
@@ -7107,7 +7589,7 @@ function Tape({
                   ),
                   bounds !== void 0 && ["lo", "hi"].map((end) => {
                     const by = onRail(bounds[end]);
-                    return /* @__PURE__ */ jsx61(
+                    return /* @__PURE__ */ jsx63(
                       InstrumentBound,
                       {
                         end,
@@ -7123,7 +7605,7 @@ function Tape({
               }),
               drawnInterval !== null && ["lo", "hi"].map((end) => {
                 const y = onRail(drawnInterval[end]);
-                return /* @__PURE__ */ jsx61(
+                return /* @__PURE__ */ jsx63(
                   InstrumentBound,
                   {
                     end,
@@ -7135,8 +7617,8 @@ function Tape({
                   end
                 );
               }),
-              hasFigure && /* @__PURE__ */ jsxs42(Fragment19, { children: [
-                /* @__PURE__ */ jsx61(
+              hasFigure && /* @__PURE__ */ jsxs44(Fragment19, { children: [
+                /* @__PURE__ */ jsx63(
                   "line",
                   {
                     x1: trackX - 6,
@@ -7147,7 +7629,7 @@ function Tape({
                     strokeWidth: 2
                   }
                 ),
-                /* @__PURE__ */ jsxs42(
+                /* @__PURE__ */ jsxs44(
                   "text",
                   {
                     x: mirrored ? labelX + 2 : labelX - 2,
@@ -7159,12 +7641,12 @@ function Tape({
                     fill: "var(--color-accent-fg)",
                     children: [
                       scale.mark(safe),
-                      held && /* @__PURE__ */ jsx61(InstrumentHeldMark, { size: 5 })
+                      held && /* @__PURE__ */ jsx63(InstrumentHeldMark, { size: 5 })
                     ]
                   }
                 )
               ] }),
-              !hasFigure && /* @__PURE__ */ jsx61(
+              !hasFigure && /* @__PURE__ */ jsx63(
                 InstrumentNoFigure,
                 {
                   x: mirrored ? labelX + 8 : labelX - 8,
@@ -7173,7 +7655,7 @@ function Tape({
                   children: NULL_DISPLAY
                 }
               ),
-              scale.symbol !== "" && /* @__PURE__ */ jsx61(
+              scale.symbol !== "" && /* @__PURE__ */ jsx63(
                 "text",
                 {
                   x: trackX + TRACK_W / 2,
@@ -7192,17 +7674,17 @@ function Tape({
     }
   );
 }
-var Tape__Meter = styled51.div`
+var Tape__Meter = styled52.div`
   display: block;
   max-width: 100%;
 `;
 
 // src/TextField.tsx
 import { useId as useId14 } from "react";
-import { jsx as jsx62, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
 function TextField({
   label,
-  value: value4,
+  value: value5,
   onChange,
   invalid,
   placeholder,
@@ -7212,9 +7694,9 @@ function TextField({
 }) {
   const id = useId14();
   const errorId = `${id}-invalid`;
-  return /* @__PURE__ */ jsxs43(Field, { children: [
-    /* @__PURE__ */ jsx62(FieldLabel, { htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs45(Field, { children: [
+    /* @__PURE__ */ jsx64(FieldLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx64(
       Input,
       {
         "aria-describedby": invalid == null ? void 0 : errorId,
@@ -7226,10 +7708,10 @@ function TextField({
         onChange: (e) => onChange(e.target.value),
         placeholder,
         type: "text",
-        value: value4
+        value: value5
       }
     ),
-    invalid != null && /* @__PURE__ */ jsx62(FieldHint, { id: errorId, children: /* @__PURE__ */ jsx62(Text, { size: "xs", tone: "warn", children: invalid }) })
+    invalid != null && /* @__PURE__ */ jsx64(FieldHint, { id: errorId, children: /* @__PURE__ */ jsx64(Text, { size: "xs", tone: "warn", children: invalid }) })
   ] });
 }
 
@@ -7237,13 +7719,13 @@ function TextField({
 import {
   TrajectoryKindLike
 } from "@ksp-gonogo/sitrep-sdk/spine";
-import { jsx as jsx63, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
 function trajectoryWithheldCopy(withheld) {
   switch (withheld.reason) {
     case "no-horizon-stated":
       return {
         heading: "NO HORIZON STATED",
-        detail: "Nothing has said how far these elements answer for."
+        detail: "Nothing says how far ahead these orbital elements can be trusted."
       };
     case "past-horizon":
       return withheld.trajectoryKind === TrajectoryKindLike.Integrated ? {
@@ -7251,7 +7733,7 @@ function trajectoryWithheldCopy(withheld) {
         detail: "The trajectory is not computed this far ahead yet."
       } : {
         heading: "PAST HORIZON",
-        detail: "These elements do not answer for the instant on screen."
+        detail: "These orbital elements cannot be trusted this far ahead."
       };
     case "shape-not-stated":
       return {
@@ -7275,15 +7757,15 @@ function TrajectoryWithheldNote({
   compact = false
 }) {
   const { heading, detail } = trajectoryWithheldCopy(withheld);
-  return /* @__PURE__ */ jsx63(Tooltip, { text: compact ? detail : void 0, focusable: true, children: /* @__PURE__ */ jsxs44(Stack, { role: "status", children: [
-    /* @__PURE__ */ jsx63(Text, { size: "xs", children: heading }),
-    !compact && /* @__PURE__ */ jsx63(Text, { level: "muted", size: "xs", children: detail })
+  return /* @__PURE__ */ jsx65(Tooltip, { text: compact ? detail : void 0, focusable: true, children: /* @__PURE__ */ jsxs46(Stack, { role: "status", children: [
+    /* @__PURE__ */ jsx65(Text, { size: "xs", children: heading }),
+    !compact && /* @__PURE__ */ jsx65(Text, { level: "muted", size: "xs", children: detail })
   ] }) });
 }
 
 // src/Truncate.tsx
-import styled52 from "styled-components";
-var Truncate = styled52.span`
+import styled53 from "styled-components";
+var Truncate = styled53.span`
   /* Its own theme colour rather than whatever the nearest element gives it, so no ancestor's default can reach the words. */
   color: var(--color-neutral-text);
   overflow: hidden;
@@ -7296,15 +7778,15 @@ var Truncate = styled52.span`
 // src/UnitInput.tsx
 import {
   affineVectorUnitFor,
-  value as value3
+  value as value4
 } from "@ksp-gonogo/sitrep-sdk";
 import { useId as useId15, useState as useState18 } from "react";
-import styled53 from "styled-components";
-import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
+import styled54 from "styled-components";
+import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
 var INSTANT_WHEEL_PX = 112;
 function worth(symbol, unit) {
   try {
-    return value3(symbol, 1).in(unit).magnitude;
+    return value4(symbol, 1).in(unit).magnitude;
   } catch {
     return Number.NaN;
   }
@@ -7330,28 +7812,28 @@ function UnitInput({
 }) {
   const id = useId15();
   const { shown: current, held, caption } = resolveCurrency(input);
-  const name = held ? /* @__PURE__ */ jsx64(HeldFigure, { caption, children: label }) : label;
+  const name = held ? /* @__PURE__ */ jsx66(HeldFigure, { caption, children: label }) : label;
   const bounds = range;
   const magnitude = current ? current.magnitude : Number.NaN;
   const [typing, setTyping] = useState18({});
   const typed = (index) => typing[index] ?? null;
   const type = (index, next) => setTyping((held2) => ({ ...held2, [index]: next }));
-  const wheel = rate ? /* @__PURE__ */ jsxs45(Stack, { gap: "related-packed", children: [
-    /* @__PURE__ */ jsx64(
+  const wheel = rate ? /* @__PURE__ */ jsxs47(Stack, { gap: "related-packed", children: [
+    /* @__PURE__ */ jsx66(
       JogWheel,
       {
         mode: "rate",
-        ariaLabel: `${label} rate`,
+        "aria-label": `${label} rate`,
         value: magnitude,
         step: rate.step,
         stepsPerSecond: rate.stepsPerSecond,
         disabled: disabled || !Number.isFinite(magnitude),
         format: isInstant(unit) ? caretDate : void 0,
         width: isInstant(unit) ? INSTANT_WHEEL_PX : void 0,
-        onChange: (next) => onChange(value3(unit, next))
+        onChange: (next) => onChange(value4(unit, next))
       }
     ),
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx66(
       Text,
       {
         level: "faint",
@@ -7361,17 +7843,17 @@ function UnitInput({
     )
   ] }) : null;
   if (isInstant(unit)) {
-    return /* @__PURE__ */ jsxs45(Control, { children: [
-      /* @__PURE__ */ jsx64(GroupName, { "aria-hidden": "true", children: name }),
-      /* @__PURE__ */ jsxs45(Stack, { gap: "related-dense", children: [
-        /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsxs47(Control, { children: [
+      /* @__PURE__ */ jsx66(GroupName, { "aria-hidden": "true", children: name }),
+      /* @__PURE__ */ jsxs47(Stack, { gap: "related-dense", children: [
+        /* @__PURE__ */ jsx66(
           MissionDateField,
           {
             label: held && caption !== null ? `${label}, ${caption}` : label,
             value: Number.isFinite(magnitude) ? magnitude : null,
             disabled,
             steps: rate ? [] : void 0,
-            onChange: (ut) => onChange(value3(unit, ut))
+            onChange: (ut) => onChange(value4(unit, ut))
           }
         ),
         wheel
@@ -7394,12 +7876,12 @@ function UnitInput({
         0
       );
       type(index, { text, against: amount });
-      onChange(value3(unit, total));
+      onChange(value4(unit, total));
     };
-    return /* @__PURE__ */ jsxs45(Control, { children: [
-      /* @__PURE__ */ jsx64(GroupName, { id: `${id}-label`, children: name }),
-      /* @__PURE__ */ jsx64(RungRow, { role: "group", "aria-labelledby": `${id}-label`, children: rungs.map((symbol, index) => /* @__PURE__ */ jsxs45(RungCell, { children: [
-        /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsxs47(Control, { children: [
+      /* @__PURE__ */ jsx66(GroupName, { id: `${id}-label`, children: name }),
+      /* @__PURE__ */ jsx66(RungRow, { role: "group", "aria-labelledby": `${id}-label`, children: rungs.map((symbol, index) => /* @__PURE__ */ jsxs47(RungCell, { children: [
+        /* @__PURE__ */ jsx66(
           RungField,
           {
             type: "number",
@@ -7409,7 +7891,7 @@ function UnitInput({
             onChange: (event) => emit2(index, event.target.value)
           }
         ),
-        /* @__PURE__ */ jsx64(UnitSymbol, { "aria-hidden": "true", children: String(symbol) })
+        /* @__PURE__ */ jsx66(UnitSymbol, { "aria-hidden": "true", children: String(symbol) })
       ] }, String(symbol))) }),
       wheel
     ] });
@@ -7418,13 +7900,13 @@ function UnitInput({
     const amount = readNumber(text);
     type(0, { text, against: amount ?? magnitude });
     if (amount !== void 0) {
-      onChange(value3(unit, amount));
+      onChange(value4(unit, amount));
     }
   };
-  return /* @__PURE__ */ jsxs45(Control, { children: [
-    /* @__PURE__ */ jsx64(FieldName, { htmlFor: id, children: name }),
-    /* @__PURE__ */ jsxs45(ValueRow, { children: [
-      /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsxs47(Control, { children: [
+    /* @__PURE__ */ jsx66(FieldName, { htmlFor: id, children: name }),
+    /* @__PURE__ */ jsxs47(ValueRow, { children: [
+      /* @__PURE__ */ jsx66(
         SingleField,
         {
           id,
@@ -7437,9 +7919,9 @@ function UnitInput({
           onChange: (event) => emit(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsx64(UnitSymbol, { "aria-hidden": "true", children: unit })
+      /* @__PURE__ */ jsx66(UnitSymbol, { "aria-hidden": "true", children: unit })
     ] }),
-    bounds ? /* @__PURE__ */ jsx64(
+    bounds ? /* @__PURE__ */ jsx66(
       Slider,
       {
         disabled,
@@ -7448,7 +7930,7 @@ function UnitInput({
         max: bounds.max,
         step: bounds.step ?? (bounds.max - bounds.min) / 100,
         value: Number.isFinite(magnitude) ? magnitude : bounds.min,
-        onChange: (event) => onChange(value3(unit, readNumber(event.target.value) ?? bounds.min))
+        onChange: (event) => onChange(value4(unit, readNumber(event.target.value) ?? bounds.min))
       }
     ) : null,
     wheel
@@ -7479,7 +7961,7 @@ function readNumber(text) {
 function round(n) {
   return Number.isFinite(n) ? Math.round(n * 1e6) / 1e6 : 0;
 }
-var Control = styled53.div`
+var Control = styled54.div`
   display: flex;
   flex-direction: column;
   gap: var(--gap-field-label-compact);
@@ -7490,19 +7972,19 @@ var nameStyles = `
   letter-spacing: 0.06em;
   text-transform: uppercase;
 `;
-var FieldName = styled53.label`
+var FieldName = styled54.label`
   ${nameStyles}
 `;
-var GroupName = styled53.span`
+var GroupName = styled54.span`
   ${nameStyles}
 `;
-var ValueRow = styled53.div`
+var ValueRow = styled54.div`
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: var(--gap-value-tag);
 `;
-var SingleField = styled53.input`
+var SingleField = styled54.input`
   background: var(--color-surface-panel);
   border: 1px solid var(--color-border-subtle);
   color: var(--color-text-primary);
@@ -7515,21 +7997,21 @@ var SingleField = styled53.input`
 
   ${focusRing}
 `;
-var UnitSymbol = styled53.span`
+var UnitSymbol = styled54.span`
   font-size: var(--font-size-compact);
   color: var(--color-text-faint);
 `;
-var RungRow = styled53.div`
+var RungRow = styled54.div`
   display: flex;
   gap: var(--gap-unit-parts);
 `;
-var RungCell = styled53.div`
+var RungCell = styled54.div`
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: var(--gap-unit-suffix);
 `;
-var RungField = styled53(SingleField)`
+var RungField = styled54(SingleField)`
   width: 4.5em;
 `;
 
@@ -7553,7 +8035,7 @@ function usePrefersReducedMotion() {
 }
 
 // src/vesselMark.tsx
-import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
 var SQUARE_HALF = 0.86;
 var TRIANGLE = [
   [0, -1.15],
@@ -7627,7 +8109,7 @@ function VesselMarkSvg({
   keyline = false
 }) {
   const corners = state === "current" ? "" : cornersOf(state, 0, 0, r).map(([px, py]) => `${px},${py}`).join(" ");
-  return /* @__PURE__ */ jsxs46("g", { "data-vessel-mark": state, transform: `translate(${x} ${y})`, ...HIDDEN, children: [
+  return /* @__PURE__ */ jsxs48("g", { "data-vessel-mark": state, transform: `translate(${x} ${y})`, ...HIDDEN, children: [
     keyline && KEYLINE_RINGS.map(({ ring, color, widths }) => {
       const border = {
         "data-vessel-keyline": ring,
@@ -7636,9 +8118,9 @@ function VesselMarkSvg({
         strokeWidth: keylineStroke(state, r, widths),
         strokeLinejoin: "round"
       };
-      return state === "current" ? /* @__PURE__ */ jsx65("circle", { r, ...border }, ring) : /* @__PURE__ */ jsx65("polygon", { points: corners, ...border }, ring);
+      return state === "current" ? /* @__PURE__ */ jsx67("circle", { r, ...border }, ring) : /* @__PURE__ */ jsx67("polygon", { points: corners, ...border }, ring);
     }),
-    state === "current" ? /* @__PURE__ */ jsx65("circle", { r, fill: VESSEL_MARK.color }) : /* @__PURE__ */ jsx65(
+    state === "current" ? /* @__PURE__ */ jsx67("circle", { r, fill: VESSEL_MARK.color }) : /* @__PURE__ */ jsx67(
       "polygon",
       {
         points: corners,
@@ -7728,12 +8210,12 @@ function paintVesselPositions(canvas, ctx, positions, radius = 4, options = {})
 }
 
 // src/WidgetMeters.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function WidgetMeters({ row, style }) {
   const entries = useContributions("meters");
   const mine = entries.filter((entry) => entry.row === row);
   if (mine.length === 0) return null;
-  return /* @__PURE__ */ jsx66(MeterStack, { style, role: "group", "aria-label": "meters", children: mine.map((entry) => /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx68(MeterStack, { style, role: "group", "aria-label": "meters", children: mine.map((entry) => /* @__PURE__ */ jsx68(
     Meter,
     {
       label: entry.label,
@@ -7747,15 +8229,15 @@ function WidgetMeters({ row, style }) {
 
 // src/WidgetScope.tsx
 import { createContext as createContext3, useContext as useContext3, useMemo as useMemo5 } from "react";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var WidgetScopeContext = createContext3(null);
 function WidgetScopeProvider({
   widget,
   scope,
   children
 }) {
-  const value4 = useMemo5(() => ({ widget, scope }), [widget, scope]);
-  return /* @__PURE__ */ jsx67(WidgetScopeContext.Provider, { value: value4, children });
+  const value5 = useMemo5(() => ({ widget, scope }), [widget, scope]);
+  return /* @__PURE__ */ jsx69(WidgetScopeContext.Provider, { value: value5, children });
 }
 function useWidgetScope(componentId) {
   const published = useContext3(WidgetScopeContext);
@@ -7764,22 +8246,119 @@ function useWidgetScope(componentId) {
 }
 
 // src/widgetDeclaredTopics.ts
-function widgetDeclaredTopics(def) {
+function widgetDeclaredTopics(def, config) {
   if (!def) return [];
   return dedupe([
     ...def.channels ?? [],
     ...def.optionalChannels ?? [],
-    ...def.dataRequirements ?? []
+    ...def.dataRequirements ?? [],
+    ...configTopics(def, config)
   ]);
 }
-function widgetDrawnFields(def) {
+function widgetDrawnFields(def, config) {
+  if (!def) return [];
+  if (def.fields && def.fields.length > 0) {
+    return dedupe([...def.fields, ...configTopics(def, config)]);
+  }
+  return widgetDeclaredTopics(def, config);
+}
+function widgetDrawnFamilies(def) {
   if (!def) return [];
-  if (def.fields && def.fields.length > 0) return dedupe(def.fields);
-  return widgetDeclaredTopics(def);
+  return dedupe([
+    ...def.channelFamilies ?? [],
+    ...def.optionalChannelFamilies ?? []
+  ]);
+}
+function configTopics(def, config) {
+  if (!def.channelsFromConfig || config === void 0) return [];
+  return def.channelsFromConfig(config);
 }
 function dedupe(values) {
   return [...new Set(values)];
 }
+
+// src/wrappedMap.ts
+function splitAtPoleCrossings(points) {
+  if (points.length === 0) return [];
+  const runs = [[points[0]]];
+  for (let i = 1; i < points.length; i++) {
+    if (crossesAPole(points[i - 1], points[i])) runs.push([points[i]]);
+    else runs[runs.length - 1].push(points[i]);
+  }
+  return runs;
+}
+function wrapPath(points, period, viewMin, viewMax) {
+  if (points.length === 0 || !(period > 0)) return [];
+  const xs = [points[0].x];
+  let min = xs[0];
+  let max = xs[0];
+  for (let i = 1; i < points.length; i++) {
+    const previous = xs[i - 1];
+    const x = previous + wrapToHalfPeriod(points[i].x - previous, period);
+    xs.push(x);
+    if (x < min) min = x;
+    if (x > max) max = x;
+  }
+  return repeatsInView(min, max, viewMin, viewMax, period).map(
+    (shift) => points.map((point, i) => ({ ...point, x: xs[i] + shift }))
+  );
+}
+function repeatsInView(min, max, viewMin, viewMax, period) {
+  if (!(period > 0) || !Number.isFinite(min) || !Number.isFinite(max))
+    return [];
+  const first = Math.ceil((viewMin - max) / period);
+  const last = Math.floor((viewMax - min) / period);
+  const shifts = [];
+  for (let k = first; k <= last; k++) shifts.push(k * period + 0);
+  return shifts;
+}
+function wrapToHalfPeriod(delta, period) {
+  const half = period / 2;
+  return ((delta + half) % period + period) % period - half;
+}
+function crossesAPole(a, b) {
+  const u = unitVector(a);
+  const v = unitVector(b);
+  const separation = angleBetween(u, v);
+  if (separation === 0) return false;
+  const normal = normalise(cross2(u, v));
+  if (normal === null) return false;
+  const missDistance = Math.asin(Math.min(1, Math.abs(normal[2])));
+  if (missDistance >= separation) return false;
+  const pole = [0, 0, a.lat + b.lat >= 0 ? 1 : -1];
+  const closest = normalise(subtractProjection(pole, normal));
+  if (closest === null) return false;
+  const span = dot(u, v);
+  return dot(u, closest) > span && dot(v, closest) > span;
+}
+function unitVector({ lat, lon }) {
+  const phi = lat * Math.PI / 180;
+  const lambda = lon * Math.PI / 180;
+  const c = Math.cos(phi);
+  return [c * Math.cos(lambda), c * Math.sin(lambda), Math.sin(phi)];
+}
+function dot(a, b) {
+  return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+}
+function cross2(a, b) {
+  return [
+    a[1] * b[2] - a[2] * b[1],
+    a[2] * b[0] - a[0] * b[2],
+    a[0] * b[1] - a[1] * b[0]
+  ];
+}
+function angleBetween(a, b) {
+  return Math.acos(Math.max(-1, Math.min(1, dot(a, b))));
+}
+function subtractProjection(v, n) {
+  const k = dot(v, n);
+  return [v[0] - k * n[0], v[1] - k * n[1], v[2] - k * n[2]];
+}
+function normalise(v) {
+  const length = Math.hypot(v[0], v[1], v[2]);
+  if (length < 1e-12) return null;
+  return [v[0] / length, v[1] / length, v[2] / length];
+}
 export {
   ARM_TIMEOUT_MS,
   ActionMenu,
@@ -7794,6 +8373,7 @@ export {
   AugmentSettingsProvider,
   AugmentSlot,
   AutoEmptyState,
+  AvatarStack,
   Badge,
   Band,
   BellIcon,
@@ -7915,6 +8495,7 @@ export {
   PauseIcon,
   PencilIcon,
   PlayIcon,
+  PlotCrosshair,
   PlusIcon,
   ProgradeIcon,
   PushUpIcon,
@@ -8000,7 +8581,6 @@ export {
   asQuantityish,
   audioCaptureSupport,
   badgeFace,
-  bandClaim,
   clearAugments,
   commandFailedSentence,
   commandFoundSentence,
@@ -8028,7 +8608,11 @@ export {
   gridFloor,
   gridToPixels,
   groupComboboxOptions,
+  heldFigureOf,
+  heldGradeOf,
+  heldMarking,
   heldWord,
+  initialsOf,
   kspCalendar,
   kspYearDays,
   magnitudeOf,
@@ -8041,11 +8625,14 @@ export {
   paintVesselMark,
   paintVesselPositions,
   placeGraphNotice,
+  placePlotReadouts,
   placedOnScale,
+  plotCrosshairShowsCard,
   quantityScale,
   railTagKey,
   reckoningBasisPhrase,
   registerAugment,
+  repeatsInView,
   resolveCurrency,
   resourceColor,
   ribbonBoundaryX,
@@ -8057,6 +8644,7 @@ export {
   showsTiny,
   sizeDeltaFor,
   speakQuantity,
+  splitAtPoleCrossings,
   standsApart,
   toInFlightListItems,
   toneEdge,
@@ -8094,9 +8682,11 @@ export {
   utOfParts,
   waveformPath,
   widgetDeclaredTopics,
+  widgetDrawnFamilies,
   widgetDrawnFields,
   withSizeDelta,
   worstSeverity,
+  wrapPath,
   writeQuantity,
   writtenAs,
   writtenQuantity