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

package/dist/{chunk-GGJES6XH.js → chunk-A3QYFQAV.js}

@@ -1,6 +1,6 @@
 import {
   gridToPixels
-} from "./chunk-IZZF25H2.js";
+} from "./chunk-SPBHQUHI.js";
 
 // src/tone.ts
 var TONE_TEXT = {
@@ -243,7 +243,7 @@ var TextButton = styled.button`
     cursor: not-allowed;
   }
 `;
-var IconButton = styled.button`
+var IconButton__Body = styled.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -275,6 +275,11 @@ var IconButton = styled.button`
     justify-content: center;
   }
 `;
+var IconButton = forwardRef(
+  function IconButton2({ pressed, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(IconButton__Body, { ref, "aria-pressed": pressed, ...rest });
+  }
+);
 
 // src/Form.tsx
 import styled2, { css as css3 } from "styled-components";
@@ -1704,6 +1709,206 @@ function AugmentEntry({
   );
 }
 
+// src/Tooltip.tsx
+import {
+  cloneElement,
+  useCallback,
+  useEffect,
+  useRef as useRef2,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import styled7, { createGlobalStyle } from "styled-components";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var ROOM_BELOW_PX = 120;
+var CROSSING_MS = 120;
+var words = (text) => text.toLowerCase().replace(/[^a-z0-9]+/g, " ").trim();
+function useTooltip(text) {
+  const [at, setAt] = useState(null);
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [tipHovered, setTipHovered] = useState(false);
+  const pressed = useRef2(false);
+  const leaving = useRef2(null);
+  const shown = text != null && text !== "" ? text : null;
+  const open = at !== null && (hovered || focused || tipHovered);
+  const cancelLeave = useCallback(() => {
+    if (leaving.current !== null) clearTimeout(leaving.current);
+    leaving.current = null;
+  }, []);
+  const close = useCallback(() => {
+    cancelLeave();
+    setAt(null);
+    setHovered(false);
+    setFocused(false);
+    setTipHovered(false);
+  }, [cancelLeave]);
+  const leaveSoon = useCallback(() => {
+    cancelLeave();
+    leaving.current = setTimeout(() => {
+      leaving.current = null;
+      setHovered(false);
+      setTipHovered(false);
+    }, CROSSING_MS);
+  }, [cancelLeave]);
+  useEffect(() => cancelLeave, [cancelLeave]);
+  useEffect(() => {
+    if (at === null) return;
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [at, close]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, close]);
+  if (shown === null) return { anchor: {}, tip: null };
+  const place = (element) => {
+    const box = element.getBoundingClientRect();
+    setAt({
+      top: box.bottom,
+      left: box.left,
+      above: window.innerHeight - box.bottom < ROOM_BELOW_PX,
+      anchorTop: box.top
+    });
+  };
+  return {
+    anchor: {
+      "data-tooltip": shown,
+      onPointerEnter: (event) => {
+        cancelLeave();
+        place(event.currentTarget);
+        setHovered(true);
+      },
+      onPointerLeave: leaveSoon,
+      onPointerDown: () => {
+        pressed.current = true;
+        close();
+      },
+      onPointerUp: () => {
+        pressed.current = false;
+      },
+      onFocus: (event) => {
+        if (pressed.current) return;
+        place(event.currentTarget);
+        setFocused(true);
+      },
+      onBlur: () => {
+        setFocused(false);
+        if (!hovered && !tipHovered) setAt(null);
+      }
+    },
+    tip: open ? createPortal(
+      /* @__PURE__ */ jsx11(
+        TipBody,
+        {
+          at,
+          text: shown,
+          onPointerEnter: () => {
+            cancelLeave();
+            setTipHovered(true);
+          },
+          onPointerLeave: leaveSoon
+        }
+      ),
+      document.body
+    ) : null
+  };
+}
+function TipBody({
+  at,
+  text,
+  onPointerEnter,
+  onPointerLeave
+}) {
+  const position = at.above ? { bottom: window.innerHeight - at.anchorTop } : { top: at.top };
+  return /* @__PURE__ */ jsx11(
+    Tooltip__Body,
+    {
+      "aria-hidden": "true",
+      "data-tooltip-tip": "",
+      "data-above": at.above ? "" : void 0,
+      onPointerEnter,
+      onPointerLeave,
+      style: {
+        ...position,
+        left: at.left,
+        "--tip-left": `${at.left}px`
+      },
+      children: text
+    }
+  );
+}
+function joined(own, ours) {
+  return (...args) => {
+    if (typeof own === "function") own(...args);
+    ours?.(...args);
+  };
+}
+function Tooltip({
+  text,
+  children,
+  focusable = false,
+  announce = true
+}) {
+  const { anchor, tip } = useTooltip(text);
+  if (text == null || text === "") return children;
+  const own = children.props;
+  const label = own["aria-label"];
+  const named = !announce || typeof label === "string" && words(label).includes(words(text));
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    cloneElement(children, {
+      "data-tooltip": text,
+      onPointerEnter: joined(own.onPointerEnter, anchor.onPointerEnter),
+      onPointerLeave: joined(own.onPointerLeave, anchor.onPointerLeave),
+      onPointerDown: joined(own.onPointerDown, anchor.onPointerDown),
+      onPointerUp: joined(own.onPointerUp, anchor.onPointerUp),
+      onFocus: joined(own.onFocus, anchor.onFocus),
+      onBlur: joined(own.onBlur, anchor.onBlur),
+      "aria-description": named ? own["aria-description"] : text,
+      tabIndex: focusable ? own.tabIndex ?? 0 : own.tabIndex
+    }),
+    tip,
+    focusable && /* @__PURE__ */ jsx11(TooltipFocusRing, {})
+  ] });
+}
+var TooltipFocusRing = createGlobalStyle`
+  [data-tooltip][tabindex]:not(button, a, input, select, textarea, summary):focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+  }
+`;
+var Tooltip__Body = styled7.div`
+  position: fixed;
+  z-index: var(--z-toast);
+  margin-top: var(--offset-popover);
+  max-width: min(18rem, calc(100vw - 2 * var(--offset-popover)));
+  /* Pulled back inside the viewport when the anchor sits near its right edge. */
+  translate: min(0px, calc(100vw - 100% - var(--offset-popover) - var(--tip-left, 0px)));
+  padding: var(--inset-tooltip);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-floating);
+  box-shadow: var(--shadow-popover-drop) rgba(0, 0, 0, 0.35);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-caption);
+  line-height: var(--line-height-body);
+  letter-spacing: 0.02em;
+  white-space: pre-line;
+
+  &[data-above] {
+    margin-top: 0;
+    margin-bottom: var(--offset-popover);
+  }
+`;
+
 // src/status/severity.ts
 var RANK = {
   go: 0,
@@ -1865,25 +2070,25 @@ var PanelStatusStoreProvider = StatusPanelStore.Provider;
 var usePanelStatusStore = StatusPanelStore.useStore;
 
 // src/status/useStatusContribution.ts
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 function useStatusContribution(c) {
   const store = usePanelStatusStore();
   const id = c?.id;
   const severity = c?.severity;
   const label = c?.label;
-  useEffect(() => {
+  useEffect2(() => {
     if (!store || id === void 0 || severity === void 0) return;
     const deregister = store.register({ id, severity, label: label ?? "" });
     return deregister;
   }, [store, id]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!store || id === void 0 || severity === void 0) return;
     store.update(id, { severity, label: label ?? "" });
   }, [store, id, severity, label]);
 }
 
 // src/Badge.tsx
-import styled7, { css as css6 } from "styled-components";
+import styled8, { css as css6 } from "styled-components";
 
 // src/fitBox.ts
 import { css as css5 } from "styled-components";
@@ -1895,7 +2100,7 @@ var fitMask = (name) => css5`
 `;
 
 // src/Badge.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Badge({
   tone,
   size = "md",
@@ -1915,7 +2120,7 @@ function Badge({
     } : null
   );
   const liveAttrs = live ? { role: "status", "aria-live": "polite" } : {};
-  return /* @__PURE__ */ jsx11(Badge__Body, { $severity: severity, $size: size, ...liveAttrs, ...rest, children });
+  return /* @__PURE__ */ jsx12(Badge__Body, { $severity: severity, $size: size, ...liveAttrs, ...rest, children });
 }
 var DECORATIVE_STYLE = css6`
   background: var(--color-surface-raised);
@@ -1969,7 +2174,7 @@ var SIZE_STYLES2 = {
     padding: var(--inset-chip-roomy);
   `
 };
-var Badge__Body = styled7.span`
+var Badge__Body = styled8.span`
   display: inline-block;
   /* Sized by its own text, never stretched to a taller flex sibling. */
   align-self: center;
@@ -1994,11 +2199,6 @@ import {
   magnitudeOr
 } from "@ksp-gonogo/sitrep-sdk";
 
-// src/bandClaim.ts
-function bandClaim(_kind, claimed) {
-  return claimed;
-}
-
 // src/reckoningMarkSpec.ts
 var HOLLOW_MARK_STROKE = "max(0.075em, 1.25px)";
 var RECKONING_MARK = {
@@ -2059,206 +2259,6 @@ var RECKONING_MARK = {
   }
 };
 
-// src/Tooltip.tsx
-import {
-  cloneElement,
-  useCallback,
-  useEffect as useEffect2,
-  useRef as useRef2,
-  useState
-} from "react";
-import { createPortal } from "react-dom";
-import styled8, { createGlobalStyle } from "styled-components";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
-var ROOM_BELOW_PX = 120;
-var CROSSING_MS = 120;
-var words = (text) => text.toLowerCase().replace(/[^a-z0-9]+/g, " ").trim();
-function useTooltip(text) {
-  const [at, setAt] = useState(null);
-  const [hovered, setHovered] = useState(false);
-  const [focused, setFocused] = useState(false);
-  const [tipHovered, setTipHovered] = useState(false);
-  const pressed = useRef2(false);
-  const leaving = useRef2(null);
-  const shown = text != null && text !== "" ? text : null;
-  const open = at !== null && (hovered || focused || tipHovered);
-  const cancelLeave = useCallback(() => {
-    if (leaving.current !== null) clearTimeout(leaving.current);
-    leaving.current = null;
-  }, []);
-  const close = useCallback(() => {
-    cancelLeave();
-    setAt(null);
-    setHovered(false);
-    setFocused(false);
-    setTipHovered(false);
-  }, [cancelLeave]);
-  const leaveSoon = useCallback(() => {
-    cancelLeave();
-    leaving.current = setTimeout(() => {
-      leaving.current = null;
-      setHovered(false);
-      setTipHovered(false);
-    }, CROSSING_MS);
-  }, [cancelLeave]);
-  useEffect2(() => cancelLeave, [cancelLeave]);
-  useEffect2(() => {
-    if (at === null) return;
-    window.addEventListener("scroll", close, true);
-    window.addEventListener("resize", close);
-    return () => {
-      window.removeEventListener("scroll", close, true);
-      window.removeEventListener("resize", close);
-    };
-  }, [at, close]);
-  useEffect2(() => {
-    if (!open) return;
-    const onKey = (event) => {
-      if (event.key === "Escape") close();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, close]);
-  if (shown === null) return { anchor: {}, tip: null };
-  const place = (element) => {
-    const box = element.getBoundingClientRect();
-    setAt({
-      top: box.bottom,
-      left: box.left,
-      above: window.innerHeight - box.bottom < ROOM_BELOW_PX,
-      anchorTop: box.top
-    });
-  };
-  return {
-    anchor: {
-      "data-tooltip": shown,
-      onPointerEnter: (event) => {
-        cancelLeave();
-        place(event.currentTarget);
-        setHovered(true);
-      },
-      onPointerLeave: leaveSoon,
-      onPointerDown: () => {
-        pressed.current = true;
-        close();
-      },
-      onPointerUp: () => {
-        pressed.current = false;
-      },
-      onFocus: (event) => {
-        if (pressed.current) return;
-        place(event.currentTarget);
-        setFocused(true);
-      },
-      onBlur: () => {
-        setFocused(false);
-        if (!hovered && !tipHovered) setAt(null);
-      }
-    },
-    tip: open ? createPortal(
-      /* @__PURE__ */ jsx12(
-        TipBody,
-        {
-          at,
-          text: shown,
-          onPointerEnter: () => {
-            cancelLeave();
-            setTipHovered(true);
-          },
-          onPointerLeave: leaveSoon
-        }
-      ),
-      document.body
-    ) : null
-  };
-}
-function TipBody({
-  at,
-  text,
-  onPointerEnter,
-  onPointerLeave
-}) {
-  const position = at.above ? { bottom: window.innerHeight - at.anchorTop } : { top: at.top };
-  return /* @__PURE__ */ jsx12(
-    Tooltip__Body,
-    {
-      "aria-hidden": "true",
-      "data-tooltip-tip": "",
-      "data-above": at.above ? "" : void 0,
-      onPointerEnter,
-      onPointerLeave,
-      style: {
-        ...position,
-        left: at.left,
-        "--tip-left": `${at.left}px`
-      },
-      children: text
-    }
-  );
-}
-function joined(own, ours) {
-  return (...args) => {
-    if (typeof own === "function") own(...args);
-    ours?.(...args);
-  };
-}
-function Tooltip({
-  text,
-  children,
-  focusable = false,
-  announce = true
-}) {
-  const { anchor, tip } = useTooltip(text);
-  if (text == null || text === "") return children;
-  const own = children.props;
-  const label = own["aria-label"];
-  const named = !announce || typeof label === "string" && words(label).includes(words(text));
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    cloneElement(children, {
-      "data-tooltip": text,
-      onPointerEnter: joined(own.onPointerEnter, anchor.onPointerEnter),
-      onPointerLeave: joined(own.onPointerLeave, anchor.onPointerLeave),
-      onPointerDown: joined(own.onPointerDown, anchor.onPointerDown),
-      onPointerUp: joined(own.onPointerUp, anchor.onPointerUp),
-      onFocus: joined(own.onFocus, anchor.onFocus),
-      onBlur: joined(own.onBlur, anchor.onBlur),
-      "aria-description": named ? own["aria-description"] : text,
-      tabIndex: focusable ? own.tabIndex ?? 0 : own.tabIndex
-    }),
-    tip,
-    focusable && /* @__PURE__ */ jsx12(TooltipFocusRing, {})
-  ] });
-}
-var TooltipFocusRing = createGlobalStyle`
-  [data-tooltip][tabindex]:not(button, a, input, select, textarea, summary):focus-visible {
-    outline: 2px solid var(--color-focus);
-    outline-offset: 2px;
-  }
-`;
-var Tooltip__Body = styled8.div`
-  position: fixed;
-  z-index: var(--z-toast);
-  margin-top: var(--offset-popover);
-  max-width: min(18rem, calc(100vw - 2 * var(--offset-popover)));
-  /* Pulled back inside the viewport when the anchor sits near its right edge. */
-  translate: min(0px, calc(100vw - 100% - var(--offset-popover) - var(--tip-left, 0px)));
-  padding: var(--inset-tooltip);
-  background: var(--color-surface-raised);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-floating);
-  box-shadow: var(--shadow-popover-drop) rgba(0, 0, 0, 0.35);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-caption);
-  line-height: var(--line-height-body);
-  letter-spacing: 0.02em;
-  white-space: pre-line;
-
-  &[data-above] {
-    margin-top: 0;
-    margin-bottom: var(--offset-popover);
-  }
-`;
-
 // src/VisuallyHidden.tsx
 import styled9 from "styled-components";
 var VisuallyHidden = styled9.span`
@@ -3118,6 +3118,27 @@ function derivedMarking(reading, carried = false) {
   }
   return null;
 }
+function heldMarking(held) {
+  if (held === void 0) return null;
+  if (typeof held !== "string") return derivedMarking(held);
+  return { kind: "held", caption: heldWord(held) };
+}
+function heldGradeOf(held) {
+  if (held === void 0) return void 0;
+  if (typeof held === "string") return held;
+  return held.state === "held" ? held.grade ?? "held" : void 0;
+}
+function heldFigureOf(figure, held) {
+  const grade = heldGradeOf(held);
+  if (grade === void 0) return figure;
+  return {
+    state: "held",
+    value: figure,
+    grade,
+    asOfUt: typeof held === "object" ? held.asOfUt : void 0,
+    reckoning: { status: "none" }
+  };
+}
 
 // src/standsApart.ts
 function writtenAs(write) {
@@ -3434,10 +3455,7 @@ function toInterval(shown, band, opts, rung) {
   };
 }
 function hover(caption, interval) {
-  const said2 = interval === null ? null : bandClaim(
-    interval.kind,
-    `with bands at ${interval.loSaid} and ${interval.hiSaid}`
-  );
+  const said2 = interval === null ? null : `with bands at ${interval.loSaid} and ${interval.hiSaid}`;
   if (caption === null) return said2;
   return said2 === null ? caption : `${caption}, ${said2}`;
 }
@@ -3588,7 +3606,7 @@ var Cluster__Root = styled12.div`
 
 // src/badgeFace.ts
 function badgeFace(entry) {
-  const grade = heldGradeOf(entry);
+  const grade = heldGradeOf(entry.held);
   if (grade === void 0) {
     return { label: entry.label, tone: entry.tone, title: entry.title };
   }
@@ -3599,11 +3617,6 @@ function badgeFace(entry) {
     title: entry.title ?? `${entry.label}: ${label}`
   };
 }
-function heldGradeOf(entry) {
-  const held = entry.held;
-  if (held === void 0) return void 0;
-  return typeof held === "string" ? held : held.grade;
-}
 
 // src/CommandDelay/commandRefusalSentence.ts
 import {
@@ -3792,7 +3805,7 @@ function InstrumentNoFigure({
 // src/CommandDelay/railTags.ts
 import { hasHost as hasHost2, logger as logger2 } from "@ksp-gonogo/sitrep-sdk";
 function railMark(tags) {
-  return tags.continuity === "continuous" ? "ribbon" : "dot";
+  return tags.kind === "continuous" ? "ribbon" : "dot";
 }
 function railDrawsReturnLeg(tags) {
   return tags.delivery === "acked";
@@ -3804,12 +3817,14 @@ function railToneToken(tags) {
   return tags.direction === "command" ? "--color-accent-fg" : "--color-info-mark";
 }
 function railTagKey(tags) {
-  return `${tags.direction}/${tags.continuity}/${tags.delivery}`;
+  return `${tags.direction}/${tags.kind}/${tags.delivery}`;
 }
 var RAIL_RENDERERS = {
+  "command/event/acked": "in-flight-row",
   "command/discrete/acked": "in-flight-row",
   "command/continuous/acked": "continuous-strip",
   "telemetry/continuous/fire-and-forget": "continuous-strip",
+  "telemetry/event/fire-and-forget": "in-flight-row",
   "telemetry/discrete/fire-and-forget": "in-flight-row"
 };
 function railRendererFor(tags) {
@@ -4165,7 +4180,7 @@ function RibbonMark({
 function ControlDelayStream({
   streams,
   ribbons = [],
-  ariaLabel = "Controls in flight",
+  "aria-label": ariaLabel = "Controls in flight",
   variant = "inline",
   delayReading
 }) {
@@ -4671,14 +4686,14 @@ function InFlightList({
   mode,
   density = "auto",
   orientation = "column",
-  ariaLabel = "In-flight commands",
+  "aria-label": ariaLabel = "In-flight commands",
   variant = "inline",
   onDismiss
 }) {
   const { ref, size } = useElementSize({ w: 320, h: 0 });
   if (variant === "rail") {
     if (items.length === 0) return null;
-    return /* @__PURE__ */ jsx23(InFlightRailStrip, { items, ariaLabel });
+    return /* @__PURE__ */ jsx23(InFlightRailStrip, { items, "aria-label": ariaLabel });
   }
   if (variant === "expanded") {
     if (items.length === 0) return null;
@@ -4686,7 +4701,7 @@ function InFlightList({
       InFlightQueue,
       {
         items,
-        ariaLabel,
+        "aria-label": ariaLabel,
         onDismiss
       }
     );
@@ -4700,7 +4715,7 @@ function InFlightList({
         ref,
         items,
         mode,
-        ariaLabel
+        "aria-label": ariaLabel
       }
     );
   }
@@ -4731,7 +4746,7 @@ var GLOW_R = 9;
 var GLOW_PEAK_ALPHA = 0.22;
 function InFlightRailStrip({
   items,
-  ariaLabel
+  "aria-label": ariaLabel
 }) {
   const gradBase = useId3();
   const summary = `${items.length} in flight`;
@@ -4794,7 +4809,7 @@ var InFlightBadge = function InFlightBadge2({
   ref,
   items,
   mode,
-  ariaLabel
+  "aria-label": ariaLabel
 }) {
   const countdown = useCountdown(nearestEta(items));
   const worst = items.some((i) => ERROR_PHASES.has(i.phase));
@@ -4872,7 +4887,7 @@ var QUEUE_COLOUR = {
 };
 function InFlightQueue({
   items,
-  ariaLabel,
+  "aria-label": ariaLabel,
   onDismiss
 }) {
   const { ref, size } = useElementSize({ w: 320, h: QUEUE_THICK });
@@ -5171,7 +5186,7 @@ import { jsx as jsx24 } from "react/jsx-runtime";
 function CommandDelay({
   handle,
   handles,
-  ariaLabel,
+  "aria-label": ariaLabel,
   mode,
   density,
   orientation,
@@ -5181,7 +5196,7 @@ function CommandDelay({
   const lone = all.length === 1 ? all[0] : null;
   const loneRenderer = lone ? railRendererFor(lone.tags) : null;
   if (lone && loneRenderer === null) {
-    return /* @__PURE__ */ jsx24(UnrepresentedRailHandle, { tags: lone.tags, who: lone.ariaLabel });
+    return /* @__PURE__ */ jsx24(UnrepresentedRailHandle, { tags: lone.tags, who: lone["aria-label"] });
   }
   if (lone && loneRenderer !== "in-flight-row") {
     const streamHandle = lone;
@@ -5193,7 +5208,7 @@ function CommandDelay({
         streams: streamHandle.streams ?? [],
         ribbons: streamHandle.ribbons ?? [],
         delayReading: streamHandle.delayReading,
-        ariaLabel: ariaLabel ?? streamHandle.ariaLabel,
+        "aria-label": ariaLabel ?? streamHandle["aria-label"],
         variant
       }
     );
@@ -5205,7 +5220,7 @@ function CommandDelay({
     InFlightList,
     {
       items,
-      ariaLabel,
+      "aria-label": ariaLabel,
       mode,
       density,
       orientation,
@@ -5287,7 +5302,7 @@ function boxesOf(props) {
 }
 function CommandList(props) {
   const { kind, onDismiss, live = true } = props;
-  const ariaLabel = props.ariaLabel ?? DEFAULT_LABEL[kind];
+  const ariaLabel = props["aria-label"] ?? DEFAULT_LABEL[kind];
   const tone = kind === "found" ? "info" : "warn";
   if (!live && props.entries.length === 0) return null;
   const boxes = boxesOf(props).map((box) => /* @__PURE__ */ jsxs10(
@@ -5479,7 +5494,10 @@ function useContributions(slotOrSlots) {
 import {
   hasHost as hasHost3,
   logger as logger3,
-  PerfBudget
+  observedAt,
+  PerfBudget,
+  topicReading,
+  withoutReckoning
 } from "@ksp-gonogo/sitrep-sdk";
 import {
   getContributionsForSlot,
@@ -5514,6 +5532,10 @@ function getSlotPerfBudget(slot) {
   }
   return budget;
 }
+var NEVER_ARRIVED = topicReading({
+  state: "pending",
+  reckoning: { status: "none" }
+});
 var EMPTY_TOPIC_VALUES = Object.freeze({});
 var slotCache2 = /* @__PURE__ */ new Map();
 var cacheValid2 = false;
@@ -5562,6 +5584,18 @@ function shallowEqualValues(a, b) {
   if (keys.length !== Object.keys(b).length) return false;
   return keys.every((k) => Object.hasOwn(b, k) && Object.is(a[k], b[k]));
 }
+function contributionReading(previous, next) {
+  if (previous === void 0 || previous === next) return next;
+  const sameCurrency = previous.state === next.state && Object.is(
+    "value" in previous ? previous.value : void 0,
+    "value" in next ? next.value : void 0
+  ) && sameInstant(observedAt(previous), observedAt(next)) && (previous.state === "held" ? previous.grade : void 0) === (next.state === "held" ? next.grade : void 0);
+  return sameCurrency ? previous : next;
+}
+function sameInstant(a, b) {
+  if (a === void 0 || b === void 0) return a === b;
+  return a.equals(b);
+}
 function isModSettingDep(dep) {
   return "modSetting" in dep;
 }
@@ -5575,10 +5609,6 @@ function declaredTopicsOf(def) {
       topics.add(d);
       continue;
     }
-    if ("reading" in d) {
-      topics.add(d.reading);
-      continue;
-    }
     if (isModSettingDep(d)) {
       topics.add(modSettingKey(d.modSetting));
     }
@@ -5605,10 +5635,6 @@ function SlotAggregator({
           topics.add(d);
           continue;
         }
-        if ("reading" in d) {
-          topics.add(d.reading);
-          continue;
-        }
         if (isModSettingDep(d)) {
           settings.set(modSettingKey(d.modSetting), d.modSetting);
           continue;
@@ -5656,8 +5682,15 @@ function SlotAggregator({
     [client, telemetryStore, processorRuntime, unionDeps]
   );
   const topicCacheRef = useRef5(null);
+  const readingsRef = useRef5(/* @__PURE__ */ new Map());
+  const withoutStoreValues = useMemo3(() => {
+    if (unionDeps.topics.length === 0) return EMPTY_TOPIC_VALUES;
+    return Object.fromEntries(
+      unionDeps.topics.map((topic) => [topic, NEVER_ARRIVED])
+    );
+  }, [unionDeps]);
   const getSnapshot = useCallback3(() => {
-    if (!telemetryStore) return EMPTY_TOPIC_VALUES;
+    if (!telemetryStore) return withoutStoreValues;
     if (unionDeps.topics.length === 0 && unionDeps.processors.length === 0 && unionDeps.settings.length === 0) {
       return EMPTY_TOPIC_VALUES;
     }
@@ -5666,8 +5699,12 @@ function SlotAggregator({
     if (cached && cached.token === token) return cached.values;
     const values = {};
     for (const topic of unionDeps.topics) {
-      const point = telemetryStore.sample(topic, token);
-      values[topic] = point ? point.payload : void 0;
+      const reading = contributionReading(
+        readingsRef.current.get(topic),
+        withoutReckoning(telemetryStore.sampleReading(topic, token))
+      );
+      readingsRef.current.set(topic, reading);
+      values[topic] = reading;
     }
     for (const p of unionDeps.processors) {
       values[p.id] = processorRuntime?.value(p.id);
@@ -5682,7 +5719,7 @@ function SlotAggregator({
     const next = cached && shallowEqualValues(cached.values, values) ? cached.values : values;
     topicCacheRef.current = { token, values: next };
     return next;
-  }, [telemetryStore, processorRuntime, unionDeps]);
+  }, [telemetryStore, processorRuntime, unionDeps, withoutStoreValues]);
   const topicValues = useSyncExternalStore6(subscribe, getSnapshot);
   const availability = useDomainAvailabilityStore();
   const presence = useSyncExternalStore6(
@@ -6486,7 +6523,7 @@ function PanelDelayRail({ tiny } = {}) {
                     {
                       handle: h,
                       variant: grown ? "expanded" : "rail",
-                      ariaLabel: h.ariaLabel ?? (grown ? "Delay detail" : void 0)
+                      "aria-label": h["aria-label"] ?? (grown ? "Delay detail" : void 0)
                     },
                     h.id
                   )),
@@ -7999,7 +8036,7 @@ import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var ToggleButton = forwardRef7(
   function ToggleButton2({
-    active = false,
+    pressed = false,
     tone = "go",
     size = "md",
     type = "button",
@@ -8011,10 +8048,10 @@ var ToggleButton = forwardRef7(
       {
         ref,
         type,
-        tone: active ? tone : void 0,
+        tone: pressed ? tone : void 0,
         size,
-        pressed: active,
-        "aria-pressed": ariaPressed ?? active,
+        pressed,
+        "aria-pressed": ariaPressed ?? pressed,
         ...rest
       }
     );
@@ -8023,7 +8060,12 @@ var ToggleButton = forwardRef7(
 
 // src/widgetSize.ts
 import { TINY_SIZE } from "@ksp-gonogo/sitrep-sdk";
-var TINY_BELOW = { w: 5, h: 4 };
+var TINY_BELOW = {
+  /** Width in grid columns: a tile under 5 columns wide is `tiny`. */
+  w: 5,
+  /** Height in grid rows: a tile under 4 rows tall is `tiny`. */
+  h: 4
+};
 var SMALL_W = 8;
 var SMALL_H = 7;
 function getSizeBucket(w, h) {
@@ -8078,23 +8120,29 @@ function TinyEssentials({ title, essentials }) {
             /* @__PURE__ */ jsx39(CompactGauge, { essential: hero, gauge: hero.gauge })
           ] })
         ] }),
-        rest.length > 0 && /* @__PURE__ */ jsx39(TinyEssentials__Rows, { ref: rowsRef, children: rest.slice(0, drawn).map((essential) => /* @__PURE__ */ jsxs18(
-          TinyEssentials__Row,
-          {
-            "data-tiny-essential": "",
-            children: [
-              /* @__PURE__ */ jsx39(TinyEssentials__Label, { children: essential.label }),
-              /* @__PURE__ */ jsx39(
-                TinyEssentials__RowFigure,
-                {
-                  $tone: essential.tone ?? "neutral",
-                  children: /* @__PURE__ */ jsx39(EssentialFigure, { essential })
-                }
-              )
-            ]
-          },
-          essential.label
-        )) })
+        rest.length > 0 && /* @__PURE__ */ jsxs18(TinyEssentials__Rows, { ref: rowsRef, children: [
+          rest.slice(0, drawn).map((essential) => /* @__PURE__ */ jsxs18(
+            TinyEssentials__Row,
+            {
+              "data-tiny-essential": "",
+              children: [
+                /* @__PURE__ */ jsx39(TinyEssentials__Label, { children: essential.label }),
+                /* @__PURE__ */ jsx39(
+                  TinyEssentials__RowFigure,
+                  {
+                    $tone: essential.tone ?? "neutral",
+                    children: /* @__PURE__ */ jsx39(EssentialFigure, { essential })
+                  }
+                )
+              ]
+            },
+            essential.label
+          )),
+          rest.slice(drawn).map((essential) => /* @__PURE__ */ jsxs18(VisuallyHidden, { as: "div", children: [
+            /* @__PURE__ */ jsx39("dt", { children: essential.label }),
+            /* @__PURE__ */ jsx39("dd", { children: essential.control === void 0 ? /* @__PURE__ */ jsx39(EssentialFigure, { essential }) : essential.control.label })
+          ] }, essential.label))
+        ] })
       ] })
     }
   );
@@ -8154,7 +8202,7 @@ function EssentialFigure({ essential }) {
       ToggleButton,
       {
         size: "sm",
-        active: control.active,
+        pressed: control.active,
         disabled: control.disabled,
         onClick: control.onPress,
         "aria-label": control.title,
@@ -8426,6 +8474,8 @@ export {
   useSlotBound,
   useSlotLabel,
   useAugmentAvailable,
+  useTooltip,
+  Tooltip,
   worstSeverity,
   severityFromStreamStatus,
   PanelStatusStoreProvider,
@@ -8435,10 +8485,7 @@ export {
   asQuantityish,
   magnitudeOf,
   magnitudeOr,
-  bandClaim,
   RECKONING_MARK,
-  useTooltip,
-  Tooltip,
   VisuallyHidden,
   HeldMark,
   ReckoningMark,
@@ -8494,6 +8541,9 @@ export {
   resolveCurrency,
   figureAttributes,
   derivedMarking,
+  heldMarking,
+  heldGradeOf,
+  heldFigureOf,
   writtenAs,
   writtenQuantity,
   placedOnScale,
@@ -8634,4 +8684,4 @@ lucide-react/dist/esm/lucide-react.mjs:
    * See the LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=chunk-GGJES6XH.js.map
+//# sourceMappingURL=chunk-A3QYFQAV.js.map