@ksp-gonogo/ui-kit 0.2.0-rc.12 → 0.2.0-rc.8

package/dist/index.d.ts

@@ -25,17 +25,10 @@ interface DefaultThemeProviderProps {
  *
  * Kit components read `theme.colors` and throw without a theme in scope, so
  * wrap anything that renders them outside the app (a test, a story, a
- * standalone page) in this. The theme's values are CSS variables, which
- * `@ksp-gonogo/ui-kit/tokens.css` defines: import that sheet once, or every
- * colour and size is unset.
+ * standalone page) in this.
  *
  * @example
  * ```tsx
- * import "@ksp-gonogo/ui-kit/tokens.css";
- * import { value } from "@ksp-gonogo/sitrep-sdk";
- * import { DefaultThemeProvider, Meter } from "@ksp-gonogo/ui-kit";
- * import { render } from "@testing-library/react";
- *
  * render(
  *   <DefaultThemeProvider>
  *     <Meter label="Charge" value={value("ratio", 0.4)} />
@@ -153,9 +146,7 @@ interface UiKitTheme {
  * `default-dark`: the built-in mission-control theme, and the one the app
  * mounts. Every colour and size is a CSS variable string (such as
  * `var(--color-text-primary)`), so responsive overrides such as larger type on
- * a touch screen still apply when a component reads the theme. The variables
- * are defined by `@ksp-gonogo/ui-kit/tokens.css`, which has to be imported
- * once for any of them to have a value.
+ * a touch screen still apply when a component reads the theme.
  *
  * @category Theme
  */
@@ -927,16 +918,17 @@ type ReckoningKind = "held" | "modelled";
  */
 type MarkKind = "current" | ReckoningKind;
 /**
- * The spec for each kind. `held` is a square in the warning hue; `modelled`
- * is a triangle, point up, in the modelled hue and about a pixel larger, so
- * the two weigh alike at small sizes.
+ * The spec for each kind. `held` is a square in the warning hue, a stop sign
+ * for data that has stopped; `modelled` is a
+ * triangle, point up, in the modelled hue and about a pixel larger, so the two
+ * weigh alike at small sizes.
  *
  * Each also has a hollow form, drawn where the figure is `elsewhere`: of
  * something other than what its label names. Hollow says that and nothing
  * else; the shape and the hue go on saying how current the figure is. A hollow
- * mark is drawn larger than its filled twin, at `hollowDomSize`. `current` has
- * only the hollow form, a ring: a current figure of the thing its label names
- * carries no mark at all.
+ * mark is larger than its filled twin (`hollowDomSize`), because at the filled
+ * size the hole closes up. `current` has only the hollow form, a ring: a
+ * current figure of the thing its label names carries no mark at all.
  *
  * @category Unit
  */
@@ -1169,23 +1161,15 @@ interface UnitProps<UnitSymbol extends string = string> extends Omit<FormatQuant
  *
  * @example
  * ```tsx
- * import { useTelemetry, value } from "@ksp-gonogo/sitrep-sdk";
- * import { Stack, Unit } from "@ksp-gonogo/ui-kit";
- *
- * function Readouts(props: { bodyRadiusMetres: number }) {
- *   const flight = useTelemetry("vessel.flight");
- *   // The first three are fields of a Topic, each a whole Reading, so each
- *   // draws the held mark when the Topic goes quiet. The last is a bare
- *   // number, wrapped with its SI unit.
- *   return (
- *     <Stack>
- *       <Unit value={flight.altitudeAsl} />
- *       <Unit value={flight.verticalSpeed} decimals={1} />
- *       <Unit value={flight.surfaceSpeed} format="km/h" />
- *       <Unit value={value("m", props.bodyRadiusMetres)} />
- *     </Stack>
- *   );
- * }
+ * import { value } from "@ksp-gonogo/sitrep-sdk";
+ * import { Unit } from "@ksp-gonogo/ui-kit";
+ *
+ * // A whole Reading: draws the held mark when the channel goes quiet.
+ * <Unit value={rangeReading} />
+ * // A bare number off a payload, wrapped with its SI unit.
+ * <Unit value={value("m", body.radius)} />
+ * <Unit value={value("m/s", closingSpeed)} decimals={1} />
+ * <Unit value={value("m/s", surfaceSpeed)} format="km/h" />
  * ```
  *
  * @category Unit
@@ -1456,19 +1440,13 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  *
  * @example
  * ```tsx
- * import { Button, CheckIcon, Cluster } from "@ksp-gonogo/ui-kit";
- *
- * function SaveBar(props: { onCancel: () => void; onSave: () => void }) {
- *   return (
- *     <Cluster justify="end">
- *       <Button variant="ghost" onClick={props.onCancel}>Cancel</Button>
- *       <Button variant="primary" onClick={props.onSave}>
- *         <CheckIcon />
- *         Save
- *       </Button>
- *     </Cluster>
- *   );
- * }
+ * <Cluster justify="end">
+ *   <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+ *   <Button variant="primary" onClick={onSave}>
+ *     <CheckIcon />
+ *     Save
+ *   </Button>
+ * </Cluster>
  * ```
  *
  * @category Button
@@ -1490,15 +1468,9 @@ declare const TextButton: styled_components_dist_types.IStyledComponentBase<"web
  *
  * @example
  * ```tsx
- * import { CloseIcon, IconButton } from "@ksp-gonogo/ui-kit";
- *
- * function CloseButton(props: { onClose: () => void }) {
- *   return (
- *     <IconButton aria-label="Close" onClick={props.onClose}>
- *       <CloseIcon />
- *     </IconButton>
- *   );
- * }
+ * <IconButton aria-label="Close" onClick={onClose}>
+ *   <CloseIcon />
+ * </IconButton>
  * ```
  *
  * @category Button
@@ -1602,8 +1574,8 @@ interface CardProps extends BlockProps {
      * resource's own colour, a category's hue. Not a status, which is `tone`;
      * a card can have both.
      *
-     * A CSS colour, not a resource name: resolve a name first with
-     * {@link resourceColor}, as in `identityColor={resourceColor(name)}`.
+     * A CSS colour, not a resource name: resolve a name first, e.g.
+     * `identityColor={resourceColor(name)}`.
      */
     identityColor?: string;
     /**
@@ -1796,70 +1768,49 @@ interface ComboboxListboxProps<Option extends ComboboxOption> {
  *
  * @example
  * ```tsx
- * import { useId, useState } from "react";
- * import {
- *   type ComboboxOption,
- *   ComboboxListbox,
- *   filterComboboxOptions,
- *   flattenComboboxGroups,
- *   groupComboboxOptions,
- *   Input,
- *   moveComboboxActiveIndex,
- * } from "@ksp-gonogo/ui-kit";
- *
- * function BodyPicker(props: {
- *   options: readonly ComboboxOption[];
- *   selected: string | undefined;
- *   onPick: (key: string) => void;
- * }) {
- *   const [query, setQuery] = useState("");
- *   const [open, setOpen] = useState(false);
- *   const [active, setActive] = useState(-1);
- *   const listId = useId();
- *   const optionId = (key: string) => `${listId}-${key}`;
- *   const groups = groupComboboxOptions(filterComboboxOptions(props.options, query));
- *   const flat = flattenComboboxGroups(groups);
- *   // The list can shrink under the highlighted row, so it is looked up, never assumed.
- *   const activeOption = flat[active];
- *
- *   return (
- *     <div style={{ position: "relative" }}>
- *       <Input
- *         role="combobox"
- *         aria-label="Body"
- *         aria-expanded={open}
- *         aria-controls={listId}
- *         aria-autocomplete="list"
- *         aria-activedescendant={activeOption ? optionId(activeOption.key) : undefined}
- *         value={query}
- *         onFocus={() => setOpen(true)}
- *         onBlur={() => setOpen(false)}
- *         onChange={(e) => {
- *           setQuery(e.target.value);
- *           setActive(-1);
- *         }}
- *         onKeyDown={(e) => {
- *           if (e.key === "ArrowDown") setActive((i) => moveComboboxActiveIndex(i, 1, flat.length));
- *           if (e.key === "ArrowUp") setActive((i) => moveComboboxActiveIndex(i, -1, flat.length));
- *           if (e.key === "Enter" && activeOption) props.onPick(activeOption.key);
- *           if (e.key === "Escape") setOpen(false);
- *         }}
- *       />
- *       {open && (
- *         <ComboboxListbox
- *           id={listId}
- *           groups={groups}
- *           flatOptions={flat}
- *           activeIndex={active}
- *           selectedKey={props.selected}
- *           getOptionId={optionId}
- *           onHoverIndex={setActive}
- *           onSelectKey={props.onPick}
- *         />
- *       )}
- *     </div>
- *   );
- * }
+ * const [query, setQuery] = useState("");
+ * const [open, setOpen] = useState(false);
+ * const [active, setActive] = useState(-1);
+ * const listId = useId();
+ * const optionId = (key: string) => `${listId}-${key}`;
+ * const groups = groupComboboxOptions(filterComboboxOptions(options, query));
+ * const flat = flattenComboboxGroups(groups);
+ *
+ * <div style={{ position: "relative" }}>
+ *   <Input
+ *     role="combobox"
+ *     aria-label="Body"
+ *     aria-expanded={open}
+ *     aria-controls={listId}
+ *     aria-autocomplete="list"
+ *     aria-activedescendant={active >= 0 ? optionId(flat[active].key) : undefined}
+ *     value={query}
+ *     onFocus={() => setOpen(true)}
+ *     onBlur={() => setOpen(false)}
+ *     onChange={(e) => {
+ *       setQuery(e.target.value);
+ *       setActive(-1);
+ *     }}
+ *     onKeyDown={(e) => {
+ *       if (e.key === "ArrowDown") setActive((i) => moveComboboxActiveIndex(i, 1, flat.length));
+ *       if (e.key === "ArrowUp") setActive((i) => moveComboboxActiveIndex(i, -1, flat.length));
+ *       if (e.key === "Enter" && flat[active]) onPick(flat[active].key);
+ *       if (e.key === "Escape") setOpen(false);
+ *     }}
+ *   />
+ *   {open && (
+ *     <ComboboxListbox
+ *       id={listId}
+ *       groups={groups}
+ *       flatOptions={flat}
+ *       activeIndex={active}
+ *       selectedKey={selected}
+ *       getOptionId={optionId}
+ *       onHoverIndex={setActive}
+ *       onSelectKey={onPick}
+ *     />
+ *   )}
+ * </div>
  * ```
  *
  * @category Form
@@ -3572,8 +3523,21 @@ interface ContributionSlotEntry {
  * Uplink fills any widget's header badges by contributing to
  * `"<widget-id>.badges"` with its handle's `registerContribution`, without the
  * widget declaring the slot. `compute` returns {@link BadgeEntry} items. How
- * the panel draws them, and a whole example, are under Standard slots on
- * {@link Panel}.
+ * the panel draws them is under Standard slots on {@link Panel}.
+ *
+ * @example
+ * ```ts
+ * EXAMPLE.registerContribution({
+ *   id: "cadence-badge",
+ *   contributes: "space-center-status.badges",
+ *   deps: ["example.heartbeat"],
+ *   requires: "example",
+ *   compute: (topics) =>
+ *     topics["example.heartbeat"]
+ *       ? [{ id: "cadence", label: "Publishing", tone: "info" as const }]
+ *       : null,
+ * });
+ * ```
  *
  * @category Panel
  */
@@ -3957,27 +3921,21 @@ interface DialProps<Unit extends string = string> {
  *
  * @example A heading compass
  * ```tsx
- * import { useTelemetry, value } from "@ksp-gonogo/sitrep-sdk";
- * import { Dial } from "@ksp-gonogo/ui-kit";
+ * import { value } from "@ksp-gonogo/sitrep-sdk";
  *
- * function HeadingCompass() {
- *   const attitude = useTelemetry("vessel.attitude");
- *   return (
- *     <Dial
- *       value={attitude.heading}
- *       min={value("°", 0)}
- *       max={value("°", 360)}
- *       wrap
- *       ticks={[
- *         { value: value("°", 0), label: "N" },
- *         { value: value("°", 90), label: "E" },
- *         { value: value("°", 180), label: "S" },
- *         { value: value("°", 270), label: "W" },
- *       ]}
- *       ariaLabel="Heading"
- *     />
- *   );
- * }
+ * <Dial
+ *   value={headingReading}
+ *   min={value("°", 0)}
+ *   max={value("°", 360)}
+ *   wrap
+ *   ticks={[
+ *     { value: value("°", 0), label: "N" },
+ *     { value: value("°", 90), label: "E" },
+ *     { value: value("°", 180), label: "S" },
+ *     { value: value("°", 270), label: "W" },
+ *   ]}
+ *   ariaLabel="Heading"
+ * />
  * ```
  *
  * @category Gauge
@@ -4510,11 +4468,7 @@ interface FitLabelButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "
  *
  * @example
  * ```tsx
- * import { FitLabelButton, SettingsIcon } from "@ksp-gonogo/ui-kit";
- *
- * function SettingsButton(props: { onOpen: () => void }) {
- *   return <FitLabelButton label="Settings" icon={<SettingsIcon />} onClick={props.onOpen} />;
- * }
+ * <FitLabelButton label="Settings" icon={<SettingsIcon />} onClick={onOpen} />
  * ```
  *
  * @category Button
@@ -4806,7 +4760,7 @@ interface GraphNoticeProps extends HTMLAttributes<HTMLDivElement> {
  * "unknown body"). `pointer-events: none`, so it never intercepts the graph's
  * clicks. `role="status"` by default; override via `role`.
  *
- * @example Over a graph in a `Fill`
+ * @example Over a graph in a {@link Fill}
  * ```tsx
  * <Fill>
  *   <LineGraph series={series} ariaLabel="Altitude trend" />
@@ -5436,13 +5390,7 @@ interface LineGraphSeries {
     label?: string;
     /** CSS colour for the stroke, e.g. `var(--color-nogo-mark)`. */
     color: string;
-    /**
-     * The line's points, ascending by `x`. Fewer than two renders no line for
-     * this series. `x` and `y` are bare numbers in whatever unit the caller
-     * chose, the same for every series: the chart scales each axis linearly
-     * across the range it is given and labels neither. For a trend over time
-     * pass seconds as `x`, a UT or seconds ago.
-     */
+    /** Ascending by `x`. Fewer than two points renders no line for this series. */
     points: ReadonlyArray<{
         x: number;
         y: number;
@@ -5512,7 +5460,6 @@ interface LineGraphProps {
      * renders `aria-hidden`.
      */
     ariaLabel?: string;
-    /** Placed on the chart's root element, for a caller's own sizing or layout. */
     className?: string;
     /**
      * `"chart"` (default): quarter gridlines and bare strokes. `"sparkline"`: no
@@ -5600,25 +5547,9 @@ interface LiveRegionProps {
  *
  * Polite unless `assertive`, which interrupts and is kept for ABORT-class states.
  *
- * @example Mounted with the control, empty until there is an outcome to say
+ * @example
  * ```tsx
- * import { Button, LiveRegion } from "@ksp-gonogo/ui-kit";
- * import { useState } from "react";
- *
- * function Deploy(props: { onDeploy: () => Promise<void> }) {
- *   const [outcome, setOutcome] = useState("");
- *   const deploy = () =>
- *     props.onDeploy().then(
- *       () => setOutcome("Deployed"),
- *       () => setOutcome("Deploy refused"),
- *     );
- *   return (
- *     <>
- *       <Button onClick={() => void deploy()}>Deploy</Button>
- *       <LiveRegion>{outcome}</LiveRegion>
- *     </>
- *   );
- * }
+ * <LiveRegion>{outcome}</LiveRegion>
  * ```
  *
  * @category Typography
@@ -5636,7 +5567,6 @@ interface LockSummary {
     reason: string;
     /** "45 science to research", or "Needs Building level 2". */
     hint?: string;
-    /** Every lock the summary was made from. Each is `{ capability, missing, detail? }`: the capability that is locked, the unlocks it still needs, and a sentence for when it names none. */
     locks: readonly CapabilityLock[];
 }
 /**
@@ -5931,9 +5861,9 @@ interface MeterCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, "childre
      */
     tone?: Tone;
     /**
-     * Arbitrary CSS colour for the fill, such as a resource's own from
-     * {@link resourceColor}, for meters whose fill carries an identity rather than
-     * a status. Wins over `tone` for the fill colour only.
+     * Arbitrary CSS colour for the fill (e.g. `resourceColor(name)`), for meters
+     * whose fill carries an identity rather than a status. Wins over `tone` for
+     * the fill colour only.
      */
     fillColor?: string;
     /**
@@ -6021,9 +5951,6 @@ interface MeterProps<UnitSymbol extends string = string> extends MeterCommonProp
  *
  * @example A fraction on its own, which must be a `ratio`
  * ```tsx
- * import { value } from "@ksp-gonogo/sitrep-sdk";
- * import { Meter } from "@ksp-gonogo/ui-kit";
- *
  * <Meter label="Shielding" value={value("ratio", 0.72)} tone="go" />
  * ```
  *
@@ -6034,20 +5961,14 @@ interface MeterProps<UnitSymbol extends string = string> extends MeterCommonProp
  *
  * @example A bar alone with its statement under it, as work advances toward a total that can move
  * ```tsx
- * <Meter
- *   hideLabel
- *   statement
- *   label="Nodes researched"
- *   value={value("count", 3)}
- *   capacity={value("count", 8)}
- * />
+ * <Meter hideLabel statement label="Nodes researched" value={done} capacity={queued} />
  * ```
  *
  * @example Row meters in a stack, sharing columns so every bar lines up
  * ```tsx
  * <MeterStack>
- *   <Meter label="LF" layout="row" value={value("units", 320)} capacity={value("units", 400)} />
- *   <Meter label="Ox" layout="row" value={value("units", 391)} capacity={value("units", 489)} />
+ *   <Meter label="LF" layout="row" value={liquidFuel} capacity={liquidFuelMax} />
+ *   <Meter label="Ox" layout="row" value={oxidizer} capacity={oxidizerMax} />
  * </MeterStack>
  * ```
  *
@@ -6070,9 +5991,9 @@ declare function MeterStack({ children, ...rest }: HTMLAttributes<HTMLDivElement
  */
 declare const MeterRowGroup: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof HTMLAttributes<HTMLDivElement>> & Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
-}, "id" | "title" | "about" | "resource" | "nonce" | "children" | "results" | "slot" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof HTMLAttributes<HTMLDivElement>> & Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+}, "slot" | "style" | "title" | "dir" | "id" | "about" | "resource" | "nonce" | "children" | "results" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof HTMLAttributes<HTMLDivElement>> & Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLDivElement> | null | undefined;
-}, "id" | "title" | "about" | "resource" | "nonce" | "children" | "results" | "slot" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>> & string;
+}, "slot" | "style" | "title" | "dir" | "id" | "about" | "resource" | "nonce" | "children" | "results" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>> & string;
 
 /**
  * Which clock an instant is on. Under signal delay they differ for the same
@@ -6107,9 +6028,8 @@ type TimeContext =
 interface MissionDateProps {
     /**
      * Universal time: seconds since the game's epoch, not a duration. A plain
-     * number is accepted for the client-interpolated view clock. A `Value<"s">`
-     * is accepted too and is read the same way, as seconds since the epoch: it
-     * is never drawn as a length of time here. For a length of time use `Unit`.
+     * number is accepted for the client-interpolated view clock, and a
+     * `Value<"s">` renders a date measured from the epoch.
      */
     value: Value<"ut"> | Value<"s"> | Reading<Value<"ut">> | Reading<Value<"s">> | number | null | undefined;
     /**
@@ -6228,9 +6148,8 @@ interface ModalContextValue {
 }
 /**
  * Holds the stack of open modal dialogs and renders them into `document.body`.
- * The dashboard mounts one at its root, so a widget on the dashboard calls
- * {@link useModal} without mounting its own. Anywhere else, such as a test or
- * a page of your own, wrap the tree in one: `useModal` needs it above it.
+ * The dashboard mounts one at its root, so a widget calls {@link useModal}
+ * without mounting its own.
  *
  * Each dialog has a title bar with a close button, a scrolling body, and an
  * optional sticky footer set with {@link useModalSaveBar} or
@@ -6335,27 +6254,15 @@ interface ModalSaveBarOptions<Draft> {
  *
  * @example
  * ```tsx
- * import { useMemo, useState } from "react";
- * import type { ConfigComponentProps } from "@ksp-gonogo/sitrep-sdk";
- * import { ConfigForm, Switch, useModalSaveBar } from "@ksp-gonogo/ui-kit";
- *
- * interface NavballConfig {
- *   controlMode?: boolean;
- * }
- *
  * function NavballConfigForm({ config, onSave }: ConfigComponentProps<NavballConfig>) {
- *   const [controlMode, setControlMode] = useState(config.controlMode === true);
+ *   const [controlMode, setControlMode] = useState(config?.controlMode === true);
  *   const candidate = useMemo(() => ({ controlMode }), [controlMode]);
  *   useModalSaveBar({
  *     onSave: () => onSave(candidate),
  *     value: candidate,
- *     saved: config,
+ *     saved: config ?? {},
  *   });
- *   return (
- *     <ConfigForm>
- *       <Switch label="Control mode" checked={controlMode} onChange={setControlMode} />
- *     </ConfigForm>
- *   );
+ *   return <ConfigForm>...</ConfigForm>;
  * }
  * ```
  *
@@ -6708,8 +6615,8 @@ declare function PanelGlow({ children, railBandAbove, ...rest }: ComponentPropsW
 interface PanelProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * The panel's heading. With it set, the panel draws its own header and pads
-     * its body. It is not `title`: that is the HTML tooltip attribute, which
-     * goes through to the panel's element like any other.
+     * its body. Named `panelTitle` so it does not clash with the HTML `title`
+     * tooltip attribute.
      */
     panelTitle?: ReactNode;
     /**
@@ -6730,9 +6637,8 @@ interface PanelProps extends ComponentPropsWithoutRef<"div"> {
      *
      * A widget that is wholly a drawing (a map, a globe) passes one
      * `<Section fill>` holding it. Not to be confused with the boolean
-     * `panelSections`, which is about the augment slot. A bare boolean is a
-     * type error: for a section that is sometimes absent, pass `null` in its
-     * place, as in `cond ? <Section /> : null`.
+     * `panelSections`, which is about the augment slot. A bare boolean is
+     * rejected so `sections={false}` cannot render an empty panel.
      */
     sections?: Exclude<ReactNode, boolean> | readonly ReactNode[];
     /**
@@ -6965,8 +6871,8 @@ declare function PanelRoot(props: PanelProps): ReactElement;
  *
  * ## Parts
  *
- * `Panel` is built entirely from the parts below and draws nothing they do
- * not, so a widget can compose a variant by hand from `Panel.Container` (the bordered frame),
+ * `Panel` renders its parts and draws no markup of its own, so a widget can
+ * compose a variant by hand from `Panel.Container` (the bordered frame),
  * `Panel.Context` (links the body's scroller to the glow), `Panel.Delay` (the
  * delay rail), `Panel.Header`, `Panel.Title`, `Panel.Toolbar`, `Panel.Glow`,
  * `Panel.Body` (the scrolling, inset content box), `Panel.Section`,
@@ -7499,39 +7405,25 @@ interface StackProps extends HTMLAttributes<HTMLDivElement> {
  * label/value table, and a {@link Box} for an inset well.
  *
  * @example
- * `gap="section"` sets the three blocks further apart than the default
- * `related` gap would.
  * ```tsx
- * import { Box, Button, Cluster, Grid, Inline, Stack, Text } from "@ksp-gonogo/ui-kit";
- *
- * function TargetBody(props: {
- *   apoapsis: string;
- *   periapsis: string;
- *   notes: string;
- *   onSet: () => void;
- *   onClear: () => void;
- * }) {
- *   return (
- *     <Stack gap="section">
- *       <Cluster>
- *         <Text>Target</Text>
- *         <Inline>
- *           <Button onClick={props.onSet}>Set</Button>
- *           <Button onClick={props.onClear}>Clear</Button>
- *         </Inline>
- *       </Cluster>
- *       <Grid cols="auto 1fr" gap="label-value" rowGap="readout-row" align="baseline">
- *         <Text level="muted">Apoapsis</Text>
- *         <Text>{props.apoapsis}</Text>
- *         <Text level="muted">Periapsis</Text>
- *         <Text>{props.periapsis}</Text>
- *       </Grid>
- *       <Box surface="sunken" pad="surface" radius="regular">
- *         {props.notes}
- *       </Box>
- *     </Stack>
- *   );
- * }
+ * <Stack gap="section">
+ *   <Cluster>
+ *     <Text>Target</Text>
+ *     <Inline>
+ *       <Button onClick={onSet}>Set</Button>
+ *       <Button onClick={onClear}>Clear</Button>
+ *     </Inline>
+ *   </Cluster>
+ *   <Grid cols="auto 1fr" gap="label-value" rowGap="readout-row" align="baseline">
+ *     <Text level="muted">Apoapsis</Text>
+ *     <Text>{apoapsis}</Text>
+ *     <Text level="muted">Periapsis</Text>
+ *     <Text>{periapsis}</Text>
+ *   </Grid>
+ *   <Box surface="sunken" pad="surface" radius="regular">
+ *     {notes}
+ *   </Box>
+ * </Stack>
  * ```
  *
  * @category Layout
@@ -7994,25 +7886,16 @@ declare const PanelStatusStoreProvider: (props: {
 declare const usePanelStatusStore: () => PanelStatusStore | null;
 
 /**
- * The short uppercase word a badge or caption prints for a `StreamStatusValue`,
- * or `null` for `"live"`, which shows nothing:
- *
- * - `"held"`: HELD
- * - `"disconnected"`: OFFLINE
- * - `"last-before-blackout"`: BLACKOUT
- * - `"recorded"`: RECORDED
- * - `"loading"`: LOADING
- * - `"no-game"`: NO GAME
- * - `"resyncing"`: SYNCING
- * - `"absent"`: NO DATA
+ * The short uppercase word a badge or caption prints for a `StreamStatusValue`
+ * (HELD, OFFLINE, BLACKOUT, RECORDED, LOADING, NO GAME, SYNCING, NO DATA), or `null` for `"live"`,
+ * which shows nothing.
  *
  * @category Badge
  */
 declare function formatStreamStatus(status: StreamStatusValue): string | null;
 /**
- * The word for a held reading's grade, the same word {@link formatStreamStatus}
- * gives the status of that name, or HELD when no grade is given, as for a
- * value combined from several readings.
+ * The word for a held reading's grade (HELD, OFFLINE, BLACKOUT, RECORDED, LOADING or NO GAME), or
+ * HELD when no grade is given, as for a value combined from several readings.
  *
  * @category Badge
  */
@@ -8602,9 +8485,7 @@ declare function Tooltip({ text, children, focusable, announce, }: TooltipProps)
 /**
  * An orbit path that may not be drawn, and the reason: no horizon was stated
  * for it, the instant on screen is past its horizon, its shape was not stated,
- * the frame asked for cannot be built, or it could not be sampled. It is the
- * `withheld` member of `OrbitTrajectory`, which `useOrbitTrajectory` from
- * `@ksp-gonogo/sitrep-sdk/frames` returns.
+ * the frame asked for cannot be built, or it could not be sampled.
  *
  * @category EmptyState
  */
@@ -8757,40 +8638,34 @@ interface UnitInputProps<Unit extends string = string> {
  * @example
  * ```tsx
  * import { value } from "@ksp-gonogo/sitrep-sdk";
- * import { Stack, UnitInput } from "@ksp-gonogo/ui-kit";
- * import { useState } from "react";
+ * import { UnitInput } from "@ksp-gonogo/ui-kit";
  *
- * function NodeEditor() {
- *   const [prograde, setPrograde] = useState(value("m/s", 0));
- *   const [burn, setBurn] = useState(value("s", 0));
- *   const [nodeUt, setNodeUt] = useState(value("ut", 0));
- *   return (
- *     <Stack>
- *       <UnitInput
- *         label="Prograde"
- *         unit="m/s"
- *         value={prograde}
- *         onChange={setPrograde}
- *       />
- *       <UnitInput
- *         // A duration typed as hours, minutes and seconds, emitted in seconds.
- *         label="Burn time"
- *         unit="s"
- *         rungs={["h", "min", "s"]}
- *         value={burn}
- *         onChange={setBurn}
- *       />
- *       <UnitInput
- *         // A node time on the game calendar, nudged with a rate wheel.
- *         label="Node UT"
- *         unit="ut"
- *         value={nodeUt}
- *         rate={{ step: 60 }}
- *         onChange={setNodeUt}
- *       />
- *     </Stack>
- *   );
- * }
+ * const [prograde, setPrograde] = useState(value("m/s", 0));
+ *
+ * <UnitInput
+ *   label="Prograde"
+ *   unit="m/s"
+ *   value={prograde}
+ *   onChange={setPrograde}
+ * />
+ *
+ * // A duration typed as hours, minutes and seconds, emitted in seconds.
+ * <UnitInput
+ *   label="Burn time"
+ *   unit="s"
+ *   rungs={["h", "min", "s"]}
+ *   value={burn}
+ *   onChange={setBurn}
+ * />
+ *
+ * // A node time on the game calendar, nudged with a rate wheel.
+ * <UnitInput
+ *   label="Node UT"
+ *   unit="ut"
+ *   value={nodeUt}
+ *   rate={{ step: 60 }}
+ *   onChange={setNodeUt}
+ * />
  * ```
  *
  * @category Form