@ksp-gonogo/ui-kit 1.0.0-rc.21 → 1.0.0-rc.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -2
- package/dist/{chunk-GGJES6XH.js → chunk-A3QYFQAV.js} +330 -280
- package/dist/chunk-A3QYFQAV.js.map +1 -0
- package/dist/{chunk-IZZF25H2.js → chunk-SPBHQUHI.js} +1 -1
- package/dist/chunk-SPBHQUHI.js.map +1 -0
- package/dist/gridUnits.d.ts +4 -4
- package/dist/gridUnits.js +1 -1
- package/dist/guards.d.ts +2 -1
- package/dist/guards.js.map +1 -1
- package/dist/index.d.ts +1069 -394
- package/dist/index.js +1391 -801
- package/dist/index.js.map +1 -1
- package/dist/reads-index.json +1559 -0
- package/dist/testing.d.ts +13 -2
- package/dist/testing.js +2 -2
- package/dist/testing.js.map +1 -1
- package/dist/tokens.css +2 -0
- package/dist/{units-Cl-8ZdJc.d.ts → units-Bd3X3vsA.d.ts} +47 -21
- package/package.json +5 -12
- package/dist/chunk-GGJES6XH.js.map +0 -1
- package/dist/chunk-IZZF25H2.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { AugmentDefinition, NamespacedAugmentSettings, SlotProps, Tone, Value, Reading, UncertaintyBand,
|
|
2
|
-
export { AlertTone, AugmentDefinition, AugmentSettingField, BadgeEntry, ComponentSlotRegistry, ComponentSlotSegment, Contributed, ContributionEntry, ContributionRegistry, ContributionSlotId, KspCalendar, NamespacedAugmentSettings, Quantityish,
|
|
1
|
+
import { AugmentDefinition, NamespacedAugmentSettings, SlotProps, Tone, Value, Reading, UncertaintyBand, HeldGrade, BadgeEntry, RailTags, RailDirection, SampleKind, RailDelivery, CommandErrorCode, LimitBreach, ContributionSlotId, Contributed, ContributionEntry, ComponentSlotSegment, ComponentSlotRegistry, SystemPoses, CelestialBody, SeriesReckonedSpan, LockedValue, StreamStatusValue, ReckoningBasis, ComponentDefinition, TinyEssential, ComponentProps, PointUnit, WidgetScope } from '@ksp-gonogo/sitrep-sdk';
|
|
2
|
+
export { AlertTone, AugmentDefinition, AugmentSettingField, BadgeEntry, ComponentSlotRegistry, ComponentSlotSegment, Contributed, ContributionEntry, ContributionRegistry, ContributionSlotId, KspCalendar, NamespacedAugmentSettings, Quantityish, RailDelivery, RailDirection, RailTags, STANDARD_GRAVITY, STOCK_KERBIN_CALENDAR, SlotId, SlotProps, SlotRegistry, TINY_SIZE, Tone, UplinkClientIdentity, WidgetScope, WidgetScopeRegistry, asQuantityish, kspCalendar, kspYearDays, magnitudeOf, magnitudeOr, setKspCalendar } from '@ksp-gonogo/sitrep-sdk';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import * as react from 'react';
|
|
5
5
|
import { ReactNode, CSSProperties, ComponentType, ReactElement, HTMLAttributes, ButtonHTMLAttributes, ComponentPropsWithoutRef, RefAttributes, SVGProps, ElementType, InputHTMLAttributes, FocusEvent, RefObject } from 'react';
|
|
6
|
-
import { F as FormatQuantityOptions, a as FormatsFor, P as PresentableAs, U as UnitGroupKey, b as FormatsForKind, K as KindOfGroup, c as PresentableAsKind } from './units-
|
|
7
|
-
export { d as KnownQuantityKind, L as LadderName, Q as QuantityKind,
|
|
6
|
+
import { F as FormatQuantityOptions, a as FormatsFor, P as PresentableAs, U as UnitGroupKey, b as FormatsForKind, K as KindOfGroup, c as PresentableAsKind } from './units-Bd3X3vsA.js';
|
|
7
|
+
export { C as ConversionTargetsOfKind, d as KindOfSymbol, e as KnownQuantityKind, L as LadderName, f as LadderOfSymbol, Q as QuantityKind, g as QuantityScale, R as Rung, S as SymbolsOfKind, q as quantityScale, s as setQuantityLocale, h as speakQuantity, w as writeQuantity } from './units-Bd3X3vsA.js';
|
|
8
8
|
import * as styled_components_dist_types from 'styled-components/dist/types.js';
|
|
9
9
|
import * as styled_components from 'styled-components';
|
|
10
10
|
export { COL_WIDTH, GRID_MARGIN, ROW_HEIGHT, gridToPixels } from './gridUnits.js';
|
|
@@ -201,14 +201,14 @@ declare module "styled-components" {
|
|
|
201
201
|
interface ActionMenuItem {
|
|
202
202
|
/** Stable id handed back to `onSelect`. */
|
|
203
203
|
key: string;
|
|
204
|
-
/** The item's visible text, and its accessible name unless `
|
|
204
|
+
/** The item's visible text, and its accessible name unless `aria-label` is set. */
|
|
205
205
|
label: string;
|
|
206
206
|
/** Optional grouping header; ungrouped items collapse into one flat list. */
|
|
207
207
|
group?: string;
|
|
208
208
|
/** Present but not currently firable: rendered dimmed and inert, still reachable. */
|
|
209
209
|
disabled?: boolean;
|
|
210
210
|
/** Overrides the accessible name when `label` alone is ambiguous out of context. */
|
|
211
|
-
|
|
211
|
+
"aria-label"?: string;
|
|
212
212
|
}
|
|
213
213
|
/**
|
|
214
214
|
* Props for {@link ActionMenu}.
|
|
@@ -223,7 +223,7 @@ interface ActionMenuProps {
|
|
|
223
223
|
/** Escape, Tab, or an outside pointer press. The caller restores trigger focus. */
|
|
224
224
|
onDismiss: () => void;
|
|
225
225
|
/** Accessible name for the menu itself: `role="menu"` needs one. */
|
|
226
|
-
|
|
226
|
+
"aria-label": string;
|
|
227
227
|
/** Positioning (the caller owns anchoring); merged over the menu's own frame styles. */
|
|
228
228
|
style?: CSSProperties;
|
|
229
229
|
/** Rendered above the items: a title row, a pending indicator, a delay readout. */
|
|
@@ -262,7 +262,7 @@ interface ActionMenuProps {
|
|
|
262
262
|
* { key: "deploy", label: "Deploy chute" },
|
|
263
263
|
* { key: "cut", label: "Cut chute", disabled: !deployed },
|
|
264
264
|
* ]}
|
|
265
|
-
*
|
|
265
|
+
* aria-label="Parachute actions"
|
|
266
266
|
* style={{ position: "static" }}
|
|
267
267
|
* onSelect={(key) => {
|
|
268
268
|
* fire(key);
|
|
@@ -276,7 +276,7 @@ interface ActionMenuProps {
|
|
|
276
276
|
*
|
|
277
277
|
* @category Floating
|
|
278
278
|
*/
|
|
279
|
-
declare function ActionMenu({ items, onSelect, onDismiss, ariaLabel, style, header, footer, emptyLabel, otherLabel, }: Readonly<ActionMenuProps>): react_jsx_runtime.JSX.Element;
|
|
279
|
+
declare function ActionMenu({ items, onSelect, onDismiss, "aria-label": ariaLabel, style, header, footer, emptyLabel, otherLabel, }: Readonly<ActionMenuProps>): react_jsx_runtime.JSX.Element;
|
|
280
280
|
|
|
281
281
|
/**
|
|
282
282
|
* One selectable capture device.
|
|
@@ -548,6 +548,7 @@ type AugmentSegmentProps<Segment extends string> = Segment extends keyof Augment
|
|
|
548
548
|
* @category Extensions
|
|
549
549
|
*/
|
|
550
550
|
type AnyAugment = Omit<AugmentDefinition<string>, "component"> & {
|
|
551
|
+
/** The augment's component, with its slot props erased to a plain record. */
|
|
551
552
|
component: ComponentType<Record<string, unknown>>;
|
|
552
553
|
};
|
|
553
554
|
/**
|
|
@@ -747,25 +748,34 @@ declare function useAugmentAvailable(augment: AnyAugment): boolean;
|
|
|
747
748
|
* accepts. Each names what the space is for, and resolves to the `--gap-*`
|
|
748
749
|
* CSS variable of the same name.
|
|
749
750
|
*
|
|
750
|
-
* - `related` and `section`: between related items, and between sections
|
|
751
|
-
*
|
|
752
|
-
* - `related-comfortable
|
|
753
|
-
* `related-packed
|
|
754
|
-
* two spacings at one fixed density,
|
|
755
|
-
*
|
|
756
|
-
* - `
|
|
757
|
-
* - `
|
|
758
|
-
*
|
|
751
|
+
* - `related` and `section`: between related items, and between sections:
|
|
752
|
+
* 8px and 16px on a panel, 6px and 12px inside a {@link Card}
|
|
753
|
+
* - `related-comfortable` (8px), `related-compact` (6px), `related-dense`
|
|
754
|
+
* (4px), `related-packed` (2px), `section-comfortable` (16px) and
|
|
755
|
+
* `section-compact` (12px): the same two spacings at one fixed density,
|
|
756
|
+
* whatever the container
|
|
757
|
+
* - `rows` (2px): between stacked rows that carry their own padding
|
|
758
|
+
* - `caption` (2px): under the line a caption belongs to
|
|
759
|
+
* - `readout-row` (2px) and `label-value` (8px): between the rows and between
|
|
760
|
+
* the columns of a label/value grid
|
|
761
|
+
*
|
|
762
|
+
* The pixel values are the default sheet's; a host that mounts its own sheet
|
|
763
|
+
* may change them.
|
|
759
764
|
*
|
|
760
765
|
* @category Layout
|
|
761
766
|
*/
|
|
762
767
|
type GapToken = "related" | "section" | "related-comfortable" | "related-compact" | "related-dense" | "related-packed" | "section-comfortable" | "section-compact" | "rows" | "caption" | "readout-row" | "label-value";
|
|
763
768
|
/**
|
|
764
769
|
* The padding names {@link Box}'s `pad` prop accepts, each resolving to the
|
|
765
|
-
* `--inset-*` CSS variable of the same name
|
|
766
|
-
*
|
|
767
|
-
*
|
|
768
|
-
*
|
|
770
|
+
* `--inset-*` CSS variable of the same name, given here as vertical then
|
|
771
|
+
* horizontal padding in the default sheet:
|
|
772
|
+
*
|
|
773
|
+
* - `chip` (1px 6px), `chip-roomy` (1px 8px) and `chip-readout` (2px 8px):
|
|
774
|
+
* small pills
|
|
775
|
+
* - `pill` (6px 12px): a stadium
|
|
776
|
+
* - `surface` (6px 8px) and `surface-standalone` (10px 12px): a block's own
|
|
777
|
+
* padding
|
|
778
|
+
* - `popover` (8px all round): a floating card
|
|
769
779
|
*
|
|
770
780
|
* @category Layout
|
|
771
781
|
*/
|
|
@@ -786,6 +796,7 @@ interface AutoEmptyStateProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
786
796
|
fallback: ReactNode;
|
|
787
797
|
/** Gap between rendered children. Defaults to `related-dense`. */
|
|
788
798
|
gap?: GapToken;
|
|
799
|
+
/** The content that may render nothing; when every child renders nothing, `fallback` shows instead. */
|
|
789
800
|
children?: ReactNode;
|
|
790
801
|
}
|
|
791
802
|
/**
|
|
@@ -796,18 +807,94 @@ interface AutoEmptyStateProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
796
807
|
*
|
|
797
808
|
* @example
|
|
798
809
|
* ```tsx
|
|
799
|
-
*
|
|
800
|
-
*
|
|
801
|
-
*
|
|
802
|
-
*
|
|
803
|
-
*
|
|
804
|
-
*
|
|
810
|
+
* import { AutoEmptyState, EmptyState, Text } from "@ksp-gonogo/ui-kit";
|
|
811
|
+
*
|
|
812
|
+
* interface Sensor {
|
|
813
|
+
* id: string;
|
|
814
|
+
* name: string;
|
|
815
|
+
* on: boolean;
|
|
816
|
+
* }
|
|
817
|
+
*
|
|
818
|
+
* // Renders nothing for a sensor that is switched off.
|
|
819
|
+
* function SensorRow({ sensor }: { sensor: Sensor }) {
|
|
820
|
+
* return sensor.on ? <Text>{sensor.name}</Text> : null;
|
|
821
|
+
* }
|
|
822
|
+
*
|
|
823
|
+
* function Sensors({ sensors }: { sensors: readonly Sensor[] }) {
|
|
824
|
+
* return (
|
|
825
|
+
* <AutoEmptyState fallback={<EmptyState>No sensors active</EmptyState>}>
|
|
826
|
+
* {sensors.map((s) => (
|
|
827
|
+
* <SensorRow key={s.id} sensor={s} />
|
|
828
|
+
* ))}
|
|
829
|
+
* </AutoEmptyState>
|
|
830
|
+
* );
|
|
831
|
+
* }
|
|
805
832
|
* ```
|
|
806
833
|
*
|
|
807
834
|
* @category EmptyState
|
|
808
835
|
*/
|
|
809
836
|
declare function AutoEmptyState({ fallback, gap, children, ...rest }: AutoEmptyStateProps): react_jsx_runtime.JSX.Element;
|
|
810
837
|
|
|
838
|
+
/**
|
|
839
|
+
* One person in an {@link AvatarStack}.
|
|
840
|
+
*
|
|
841
|
+
* @category Badge
|
|
842
|
+
*/
|
|
843
|
+
interface AvatarStackItem {
|
|
844
|
+
/** Stable key. */
|
|
845
|
+
id: string;
|
|
846
|
+
/** The full name: the avatar's tooltip and accessible name. The initials are drawn from it. */
|
|
847
|
+
name: string;
|
|
848
|
+
/** Colours the avatar's edge and initials. Absent, neutral. */
|
|
849
|
+
tone?: Tone;
|
|
850
|
+
/** Makes this avatar a button that calls this when pressed. Absent, the avatar is not a control. */
|
|
851
|
+
onSelect?: () => void;
|
|
852
|
+
}
|
|
853
|
+
/**
|
|
854
|
+
* Props for {@link AvatarStack}.
|
|
855
|
+
*
|
|
856
|
+
* @category Badge
|
|
857
|
+
*/
|
|
858
|
+
interface AvatarStackProps {
|
|
859
|
+
/** Everyone to show, in order. The first ones are drawn and the rest fold into the overflow count. */
|
|
860
|
+
items: readonly AvatarStackItem[];
|
|
861
|
+
/**
|
|
862
|
+
* How many places the stack has, the overflow count included. The stack
|
|
863
|
+
* reserves this many places whatever `items` holds, so it never changes size.
|
|
864
|
+
* Absent, 3.
|
|
865
|
+
*/
|
|
866
|
+
max?: number;
|
|
867
|
+
/** Names the group for assistive technology, when it is not already labelled by its surroundings. */
|
|
868
|
+
label?: string;
|
|
869
|
+
}
|
|
870
|
+
/**
|
|
871
|
+
* Up to two letters standing for a name: the first letters of its first two
|
|
872
|
+
* words, or the first two letters of a single word.
|
|
873
|
+
*
|
|
874
|
+
* @category Badge
|
|
875
|
+
*/
|
|
876
|
+
declare function initialsOf(name: string): string;
|
|
877
|
+
/**
|
|
878
|
+
* A row of small round initials badges, overlapped, for showing who is
|
|
879
|
+
* involved in something without room for their names. Each avatar's tooltip
|
|
880
|
+
* and accessible name is the full name.
|
|
881
|
+
*
|
|
882
|
+
* Its footprint is fixed by `max` and never by the number of items: with more
|
|
883
|
+
* people than places, the last place becomes a "+k" count whose tooltip lists
|
|
884
|
+
* the names it hides, and with fewer the unused places stay empty.
|
|
885
|
+
*
|
|
886
|
+
* @example
|
|
887
|
+
* ```tsx
|
|
888
|
+
* <AvatarStack
|
|
889
|
+
* label="Speaking"
|
|
890
|
+
* items={[{ id: "a", name: "Ares 4" }, { id: "w", name: "Woomera Range" }]}
|
|
891
|
+
* />
|
|
892
|
+
* ```
|
|
893
|
+
*
|
|
894
|
+
* @category Badge
|
|
895
|
+
*/
|
|
896
|
+
declare function AvatarStack({ items, max, label, }: AvatarStackProps): react_jsx_runtime.JSX.Element;
|
|
897
|
+
|
|
811
898
|
/**
|
|
812
899
|
* A point in viewport (client) coordinates.
|
|
813
900
|
*
|
|
@@ -861,9 +948,12 @@ type AudioCaptureUnsupportedReason = "insecure-origin" | "no-media-devices";
|
|
|
861
948
|
* @category AudioInputPicker
|
|
862
949
|
*/
|
|
863
950
|
type AudioCaptureSupport = {
|
|
951
|
+
/** The page can open a microphone. */
|
|
864
952
|
supported: true;
|
|
865
953
|
} | {
|
|
954
|
+
/** The page cannot open a microphone. */
|
|
866
955
|
supported: false;
|
|
956
|
+
/** Why it cannot. */
|
|
867
957
|
reason: AudioCaptureUnsupportedReason;
|
|
868
958
|
};
|
|
869
959
|
/**
|
|
@@ -909,7 +999,9 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
909
999
|
* can summarise it. `id` must be stable for the badge's lifetime. `label`
|
|
910
1000
|
* defaults to the badge's text content when `children` is a plain string; pass
|
|
911
1001
|
* it explicitly otherwise. A `go` badge with `report` still registers, but
|
|
912
|
-
* any worse state in the panel wins the summary over it.
|
|
1002
|
+
* any worse state in the panel wins the summary over it. Outside a panel
|
|
1003
|
+
* there is no store to register into, so `report` does nothing and the badge
|
|
1004
|
+
* draws as usual.
|
|
913
1005
|
*/
|
|
914
1006
|
report?: {
|
|
915
1007
|
id: string;
|
|
@@ -920,7 +1012,8 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
920
1012
|
}
|
|
921
1013
|
/**
|
|
922
1014
|
* A compact uppercase pill that shows a label in one `Tone`. A stateful tone
|
|
923
|
-
* (`info`, `go`, `caution`, `warn`, `nogo` or `offline`
|
|
1015
|
+
* (`info`, `go`, `caution`, `warn`, `nogo` or `offline`; `Tone` has the full
|
|
1016
|
+
* set and `Button` takes a narrower one) draws an outlined
|
|
924
1017
|
* pill in that tone's colour, with a glow that grows with severity; no tone, or `neutral`, draws
|
|
925
1018
|
* a grey rounded chip for a kind tag or a count. The panel's summary badge and
|
|
926
1019
|
* {@link StreamStatusBadge} are both drawn with it.
|
|
@@ -1063,13 +1156,14 @@ interface Resolved<Unit extends string> {
|
|
|
1063
1156
|
*/
|
|
1064
1157
|
mark: ReckoningKind | null;
|
|
1065
1158
|
/**
|
|
1066
|
-
* Whether the number is a fact the contract declares static
|
|
1159
|
+
* Whether the number is a fact the contract declares static (one that never
|
|
1160
|
+
* changes, such as a body's radius), which is never
|
|
1067
1161
|
* old and so is never marked held, whatever the reading's state.
|
|
1068
1162
|
*/
|
|
1069
1163
|
isStatic: boolean;
|
|
1070
1164
|
/**
|
|
1071
1165
|
* Whether the number is exact at any instant: computed from fixed inputs and
|
|
1072
|
-
* the clock, as a figure between two bodies on fixed conics is. It moves, so
|
|
1166
|
+
* the clock, as a figure between two bodies on fixed conics (orbits that never change) is. It moves, so
|
|
1073
1167
|
* it is not static, and it is never a guess, so it takes no held or modelled
|
|
1074
1168
|
* mark whatever the reading's state.
|
|
1075
1169
|
*/
|
|
@@ -1098,7 +1192,8 @@ interface CurrencyOptions {
|
|
|
1098
1192
|
* than its observation: a countdown, or a figure a widget solves forward.
|
|
1099
1193
|
* The modelled figure is then marked wherever it is not a reading of now,
|
|
1100
1194
|
* which under signal delay includes a current reading carried forward to the
|
|
1101
|
-
* craft's own present (SCET, spacecraft event time
|
|
1195
|
+
* craft's own present (SCET, spacecraft event time: when the event happens
|
|
1196
|
+
* at the craft, rather than when its telemetry reaches the command centre).
|
|
1102
1197
|
*/
|
|
1103
1198
|
readonly drawsReckoning?: boolean;
|
|
1104
1199
|
}
|
|
@@ -1143,9 +1238,38 @@ interface ReckoningMarking {
|
|
|
1143
1238
|
*
|
|
1144
1239
|
* @category Unit
|
|
1145
1240
|
*/
|
|
1146
|
-
declare function derivedMarking(
|
|
1241
|
+
declare function derivedMarking(
|
|
1242
|
+
/** The reading the figure was computed from. Null or undefined gives no mark. */
|
|
1243
|
+
reading: Reading<unknown> | null | undefined,
|
|
1147
1244
|
/** The figure is carried by a model that the reading itself does not name, such as a position the map models from the orbit. */
|
|
1148
1245
|
carried?: boolean): ReckoningMarking | null;
|
|
1246
|
+
/**
|
|
1247
|
+
* How a figure is marked from a `held` field: the reading the figure was drawn
|
|
1248
|
+
* from, or just its grade, as a contributed entry or an augment slot's props
|
|
1249
|
+
* carry it. `null` unless that reading is held or modelled, so the reading can
|
|
1250
|
+
* be passed unconditionally. The same marking {@link derivedMarking} gives.
|
|
1251
|
+
*
|
|
1252
|
+
* @category Unit
|
|
1253
|
+
*/
|
|
1254
|
+
declare function heldMarking(held: HeldGrade | Reading<unknown> | undefined): ReckoningMarking | null;
|
|
1255
|
+
/**
|
|
1256
|
+
* The held grade of a `held` field, for something drawn as a verdict (a tone,
|
|
1257
|
+
* a badge) rather than a figure: `undefined` unless the reading it names is
|
|
1258
|
+
* held. A held reading derived from several, which may carry no single grade,
|
|
1259
|
+
* reads as plain `"held"`.
|
|
1260
|
+
*
|
|
1261
|
+
* @category Unit
|
|
1262
|
+
*/
|
|
1263
|
+
declare function heldGradeOf(held: HeldGrade | Reading<unknown> | undefined): HeldGrade | undefined;
|
|
1264
|
+
/**
|
|
1265
|
+
* A figure as the reading its `held` field says it came from: the figure
|
|
1266
|
+
* itself while that reading is current, and a held reading of it, dated by the
|
|
1267
|
+
* reading's `asOfUt` where it has one, while it is held. Hand the result to
|
|
1268
|
+
* any primitive that takes a {@link UnitValue}.
|
|
1269
|
+
*
|
|
1270
|
+
* @category Unit
|
|
1271
|
+
*/
|
|
1272
|
+
declare function heldFigureOf<Unit extends string>(figure: Value<Unit>, held: HeldGrade | Reading<unknown> | undefined): UnitValue<Unit>;
|
|
1149
1273
|
|
|
1150
1274
|
/**
|
|
1151
1275
|
* Props for {@link Unit}. The formatter options it extends (`decimals`, `scale` and the rest) apply to the number drawn.
|
|
@@ -1205,6 +1329,7 @@ interface UnitProps<UnitSymbol extends string = string> extends Omit<FormatQuant
|
|
|
1205
1329
|
elsewhere?: string | null;
|
|
1206
1330
|
/** A bare unit token, rendered as a symbol with no number. Used only when `value` is not passed; prefer passing a value. */
|
|
1207
1331
|
children?: ReactNode;
|
|
1332
|
+
/** A class for the outer element, so a styled-component can extend it. */
|
|
1208
1333
|
className?: string;
|
|
1209
1334
|
}
|
|
1210
1335
|
/**
|
|
@@ -1219,13 +1344,13 @@ interface UnitProps<UnitSymbol extends string = string> extends Omit<FormatQuant
|
|
|
1219
1344
|
*
|
|
1220
1345
|
* With `reckoned`, a reading with a model draws the model's figure and marks it modelled (a blue triangle) wherever it is not a reading of now.
|
|
1221
1346
|
*
|
|
1222
|
-
* The mark is out of flow, so a column never reflows when a channel goes quiet, and it is not a live region: a widget that wants the change announced wraps its readout in `role="status"`. Without `reckoned` it never draws a reckoned figure
|
|
1347
|
+
* The mark is out of flow, so a column never reflows when a channel goes quiet, and it is not a live region: a widget that wants the change announced wraps its readout in `role="status"`. Without `reckoned` it never draws a reckoned figure, so a modelled value never passes for an observed one; do not pull a figure out of a reading's reckoning and hand it to a plain `Unit`.
|
|
1223
1348
|
*
|
|
1224
1349
|
* A held reading whose model publishes an {@link UncertaintyBand} also shows the interval (`1 km ± 0.025 km`, `1 km (0.97 to 1.03 km)`, `1 km (~1.2 km)`). A current reading shows none, and a band in another unit draws nothing.
|
|
1225
1350
|
*
|
|
1226
|
-
* The symbol is sized relative to the text around it (never below 10px) and takes its colour, so it needs no size or tone prop and keeps the value's tone at the value's contrast.
|
|
1351
|
+
* The symbol is sized relative to the text around it (never below 10px) and takes its colour, so it needs no size or tone prop and keeps the value's tone at the value's contrast. A symbol that attaches to the number (`22°`, but `22 °C`) is set with no space and keeps full size: the plane-angle marks and the currency marks. Every symbol is replaced in the accessibility tree by its spoken word.
|
|
1227
1352
|
*
|
|
1228
|
-
* `<Unit>` is the
|
|
1353
|
+
* `<Unit>` is the way to put a quantity on screen as a React node. Where only text is accepted (an SVG `<text>`, a tooltip, a canvas), write it with {@link writeQuantity} instead. Hand it the value as it arrived (SI, never pre-scaled) and let it choose the unit; pin one with `format` or convert with `as` only where convention calls for it.
|
|
1229
1354
|
*
|
|
1230
1355
|
* @example
|
|
1231
1356
|
* ```tsx
|
|
@@ -1250,10 +1375,12 @@ interface UnitProps<UnitSymbol extends string = string> extends Omit<FormatQuant
|
|
|
1250
1375
|
*
|
|
1251
1376
|
* @category Unit
|
|
1252
1377
|
* @categoryDescription Unit
|
|
1253
|
-
* Drawing a quantity
|
|
1254
|
-
*
|
|
1255
|
-
*
|
|
1256
|
-
*
|
|
1378
|
+
* Drawing a quantity. A {@link Unit} puts a value with its unit on screen,
|
|
1379
|
+
* formatted the same way everywhere, and every number with a unit is drawn
|
|
1380
|
+
* through one. Around it sit the marks for a figure that is held or modelled
|
|
1381
|
+
* instead of current, the bands for a figure known only within limits, the
|
|
1382
|
+
* null token for no value, and the helpers that write a quantity as text where
|
|
1383
|
+
* a node will not do.
|
|
1257
1384
|
*/
|
|
1258
1385
|
declare function Unit<UnitSymbol extends string = string>({ value, children, className, hideUnitInGroup, reckoned, marked, elsewhere, ...opts }: UnitProps<UnitSymbol>): react_jsx_runtime.JSX.Element;
|
|
1259
1386
|
|
|
@@ -1281,15 +1408,17 @@ interface BandProps<UnitSymbol extends string = string> extends Pick<UnitProps<U
|
|
|
1281
1408
|
* the way round instead of printing a meaningless width.
|
|
1282
1409
|
*/
|
|
1283
1410
|
wrapsAt?: number;
|
|
1411
|
+
/** A class for the outer element, so a styled-component can extend it. */
|
|
1284
1412
|
className?: string;
|
|
1285
1413
|
}
|
|
1286
1414
|
/**
|
|
1287
|
-
* A closed interval
|
|
1288
|
-
*
|
|
1289
|
-
* says whether the orbit
|
|
1415
|
+
* A closed interval drawn as its two ends, such as the range a mean orbital
|
|
1416
|
+
* element moves over. Useful where the width of the range matters as much as
|
|
1417
|
+
* where it sits: the width of a mean orbital element says whether the orbit
|
|
1418
|
+
* is stable. It is never reduced to a midpoint.
|
|
1290
1419
|
*
|
|
1291
|
-
* -
|
|
1292
|
-
*
|
|
1420
|
+
* - With either end missing it draws the null token, since one end alone
|
|
1421
|
+
* would read as a single value
|
|
1293
1422
|
* - The precision follows the width: digits widen until the ends read
|
|
1294
1423
|
* differently, so 6 700 km to 6 710 km never prints as `6.7 Mm` twice
|
|
1295
1424
|
* - Both ends are one {@link UnitSharedFormat} group, which settles the unit
|
|
@@ -1390,9 +1519,14 @@ declare function BlockRoot({ ...props }: BlockProps): ReactNode;
|
|
|
1390
1519
|
*
|
|
1391
1520
|
* `titleRight` is not `right`: `titleRight` holds badges on the name's line and
|
|
1392
1521
|
* wraps under the name when narrow, while `right` sits beside the whole body
|
|
1393
|
-
* and drops below it when narrow. The parts
|
|
1394
|
-
*
|
|
1395
|
-
*
|
|
1522
|
+
* and drops below it when narrow. The parts are there for a record that needs
|
|
1523
|
+
* its own composition but the same type and spacing:
|
|
1524
|
+
*
|
|
1525
|
+
* - `Block.Title`: the heading text, sized and weighted as the `title` prop is
|
|
1526
|
+
* - `Block.TitleRow`: the title's line, holding `left`, the title and `right` badges
|
|
1527
|
+
* - `Block.Body`: the figures under the title
|
|
1528
|
+
* - `Block.Aside`: content beside or below the body (the `left`, `right`, `top` and `bottom` props)
|
|
1529
|
+
* - `Block.Footer`: the line of actions at the foot
|
|
1396
1530
|
*
|
|
1397
1531
|
* @example
|
|
1398
1532
|
* ```tsx
|
|
@@ -1431,8 +1565,8 @@ type BoxSurface = "app" | "panel" | "raised" | "sunken";
|
|
|
1431
1565
|
/**
|
|
1432
1566
|
* The corner radii {@link Box} accepts: `regular` for ordinary controls, rows
|
|
1433
1567
|
* and cards, `floating` for something that sits above the app (a dialog, a
|
|
1434
|
-
* menu), and `pill` for a fully rounded stadium.
|
|
1435
|
-
*
|
|
1568
|
+
* menu), and `pill` for a fully rounded stadium. {@link FramedDisplay} has a corner
|
|
1569
|
+
* of its own that a `Box` cannot take.
|
|
1436
1570
|
*
|
|
1437
1571
|
* @category Layout
|
|
1438
1572
|
*/
|
|
@@ -1458,6 +1592,7 @@ interface BoxProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1458
1592
|
bordered?: boolean;
|
|
1459
1593
|
/** Corner radius. Omit for square corners. */
|
|
1460
1594
|
radius?: BoxRadius;
|
|
1595
|
+
/** The content inside the padding and border. */
|
|
1461
1596
|
children?: ReactNode;
|
|
1462
1597
|
}
|
|
1463
1598
|
/**
|
|
@@ -1549,17 +1684,29 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
1549
1684
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1550
1685
|
/**
|
|
1551
1686
|
* A subtle, underlined link-style `button` for a tertiary action inside copy
|
|
1552
|
-
* (such as "Clear all" in a list row).
|
|
1553
|
-
*
|
|
1687
|
+
* (such as "Clear all" in a list row). It renders a native `button` and takes
|
|
1688
|
+
* every prop that element does. For a paired Cancel and Confirm row, use a
|
|
1689
|
+
* ghost {@link Button} beside a primary one. For words that are themselves the
|
|
1690
|
+
* control and should keep the surrounding text's colour and type, use a
|
|
1691
|
+
* {@link Button} with `variant="text"` instead.
|
|
1554
1692
|
*
|
|
1555
1693
|
* @category Button
|
|
1556
1694
|
*/
|
|
1557
1695
|
declare const TextButton: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<react.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
1696
|
+
/**
|
|
1697
|
+
* Props for {@link IconButton}. Any other `button` attribute passes through.
|
|
1698
|
+
*
|
|
1699
|
+
* @category Button
|
|
1700
|
+
*/
|
|
1701
|
+
interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
1702
|
+
/** Makes the button a toggle: sets `aria-pressed` and, while true, draws the pressed look. */
|
|
1703
|
+
pressed?: boolean;
|
|
1704
|
+
}
|
|
1558
1705
|
/**
|
|
1559
1706
|
* An icon-only `button` with no chrome, just the glyph. Give it an
|
|
1560
1707
|
* `aria-label`, since the icon inside is decorative. As a toggle, with
|
|
1561
|
-
* `
|
|
1562
|
-
* coarse pointer it grows to a 44px touch target.
|
|
1708
|
+
* `pressed`, it sets `aria-pressed` and takes the filled pressed look while
|
|
1709
|
+
* pressed. The ref reaches the `button` element. Under a coarse pointer it grows to a 44px touch target.
|
|
1563
1710
|
*
|
|
1564
1711
|
* @example
|
|
1565
1712
|
* ```tsx
|
|
@@ -1576,7 +1723,7 @@ declare const TextButton: styled_components_dist_types.IStyledComponentBase<"web
|
|
|
1576
1723
|
*
|
|
1577
1724
|
* @category Button
|
|
1578
1725
|
*/
|
|
1579
|
-
declare const IconButton:
|
|
1726
|
+
declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1580
1727
|
|
|
1581
1728
|
/**
|
|
1582
1729
|
* Props for {@link ButtonGroup}. Any other `div` attribute passes through, and
|
|
@@ -1593,6 +1740,7 @@ interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1593
1740
|
equalWidth?: boolean;
|
|
1594
1741
|
/** Gap between buttons, one of the {@link GapToken} names. Omitted, it is the container's `related` gap. */
|
|
1595
1742
|
gap?: GapToken;
|
|
1743
|
+
/** The buttons to lay out together. */
|
|
1596
1744
|
children?: ReactNode;
|
|
1597
1745
|
}
|
|
1598
1746
|
/**
|
|
@@ -1641,20 +1789,6 @@ declare function badgeFace(entry: BadgeEntry & {
|
|
|
1641
1789
|
title?: string;
|
|
1642
1790
|
}): BadgeFace;
|
|
1643
1791
|
|
|
1644
|
-
/**
|
|
1645
|
-
* What a band claims, in plain language, for a surface that speaks it rather
|
|
1646
|
-
* than draws it. A hard bound and a one-sigma interval are both said as plain
|
|
1647
|
-
* containment, with no statistics vocabulary, so `claimed` is returned
|
|
1648
|
-
* unchanged for every `kind`.
|
|
1649
|
-
*
|
|
1650
|
-
* `claimed` is the containment statement in the calling surface's own grammar:
|
|
1651
|
-
* an interval for a meter (`"with bands at 30 percent and 44 percent"`), a
|
|
1652
|
-
* whole clause for a chart whose shaded region varies per sample.
|
|
1653
|
-
*
|
|
1654
|
-
* @category Unit
|
|
1655
|
-
*/
|
|
1656
|
-
declare function bandClaim(_kind: BandKind, claimed: string): string;
|
|
1657
|
-
|
|
1658
1792
|
/**
|
|
1659
1793
|
* Props for {@link Card}: everything {@link BlockProps} takes, plus the
|
|
1660
1794
|
* surface's own marks.
|
|
@@ -1688,6 +1822,7 @@ interface CardProps extends BlockProps {
|
|
|
1688
1822
|
* this card's padding changes, not the spacing of what it holds.
|
|
1689
1823
|
*/
|
|
1690
1824
|
standalone?: boolean;
|
|
1825
|
+
/** What the card holds. */
|
|
1691
1826
|
children?: ReactNode;
|
|
1692
1827
|
}
|
|
1693
1828
|
declare function CardRoot({ tone, dimmed, identityColor, standalone, ...props }: CardProps): ReactNode;
|
|
@@ -1767,6 +1902,7 @@ interface ClusterProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1767
1902
|
* never silently turns into a ragged block; chip strips and tag lists opt in.
|
|
1768
1903
|
*/
|
|
1769
1904
|
wrap?: boolean;
|
|
1905
|
+
/** The items, laid out in a row. */
|
|
1770
1906
|
children?: ReactNode;
|
|
1771
1907
|
}
|
|
1772
1908
|
/**
|
|
@@ -1852,7 +1988,7 @@ interface ComboboxListboxProps<Option extends ComboboxOption> {
|
|
|
1852
1988
|
* control is not a literal `<input role="combobox">`, since an unnamed
|
|
1853
1989
|
* `role="listbox"` is an accessibility violation.
|
|
1854
1990
|
*/
|
|
1855
|
-
|
|
1991
|
+
"aria-label"?: string;
|
|
1856
1992
|
/**
|
|
1857
1993
|
* Which side of the control the list opens on. Defaults to `"below"`.
|
|
1858
1994
|
* `"above"` is for a control at the foot of a clipping container, such as a
|
|
@@ -1909,6 +2045,7 @@ interface ComboboxListboxProps<Option extends ComboboxOption> {
|
|
|
1909
2045
|
* aria-activedescendant={activeOption ? optionId(activeOption.key) : undefined}
|
|
1910
2046
|
* value={query}
|
|
1911
2047
|
* onFocus={() => setOpen(true)}
|
|
2048
|
+
* // Safe to close on blur: pressing an option does not take focus from the input.
|
|
1912
2049
|
* onBlur={() => setOpen(false)}
|
|
1913
2050
|
* onChange={(e) => {
|
|
1914
2051
|
* setQuery(e.target.value);
|
|
@@ -1940,7 +2077,7 @@ interface ComboboxListboxProps<Option extends ComboboxOption> {
|
|
|
1940
2077
|
*
|
|
1941
2078
|
* @category Form
|
|
1942
2079
|
*/
|
|
1943
|
-
declare function ComboboxListbox<Option extends ComboboxOption>({ id, groups, flatOptions, activeIndex, selectedKey, getOptionId, onHoverIndex, onSelectKey, renderItem, emptyLabel, ariaLabel, placement, }: Readonly<ComboboxListboxProps<Option>>): react_jsx_runtime.JSX.Element;
|
|
2080
|
+
declare function ComboboxListbox<Option extends ComboboxOption>({ id, groups, flatOptions, activeIndex, selectedKey, getOptionId, onHoverIndex, onSelectKey, renderItem, emptyLabel, "aria-label": ariaLabel, placement, }: Readonly<ComboboxListboxProps<Option>>): react_jsx_runtime.JSX.Element;
|
|
1944
2081
|
|
|
1945
2082
|
/**
|
|
1946
2083
|
* How the rail DRAWS an entry, given what the entry says it is.
|
|
@@ -1950,12 +2087,14 @@ declare function ComboboxListbox<Option extends ComboboxOption>({ id, groups, fl
|
|
|
1950
2087
|
* the mod declares. This file is the other half: one accessor per axis, and a
|
|
1951
2088
|
* TABLE saying which combination each renderer draws.
|
|
1952
2089
|
*
|
|
1953
|
-
* | direction |
|
|
2090
|
+
* | direction | kind | delivery | a real example | drawn by |
|
|
1954
2091
|
* |-----------|------------|------------------|---------------------------------|--------------------|
|
|
1955
|
-
* | command |
|
|
2092
|
+
* | command | event | acked | staging, an action group | `in-flight-row` |
|
|
2093
|
+
* | command | discrete | acked | a mode held until changed | `in-flight-row` |
|
|
1956
2094
|
* | command | continuous | acked | fly-by-wire, ack = the readback | `continuous-strip` |
|
|
1957
2095
|
* | telemetry | continuous | fire-and-forget | radio voice | `continuous-strip` |
|
|
1958
|
-
* | telemetry |
|
|
2096
|
+
* | telemetry | event | fire-and-forget | a science result sent home | `in-flight-row` |
|
|
2097
|
+
* | telemetry | discrete | fire-and-forget | a state reported as it changes | `in-flight-row` |
|
|
1959
2098
|
*
|
|
1960
2099
|
* The table names a RENDERER (a component). WHICH MARK it draws follows from
|
|
1961
2100
|
* the data: both continuous rows share one strip, lines for a value against a
|
|
@@ -1969,10 +2108,11 @@ declare function ComboboxListbox<Option extends ComboboxOption>({ id, groups, fl
|
|
|
1969
2108
|
*/
|
|
1970
2109
|
|
|
1971
2110
|
/** One combination, spelled as the table's key; a template-literal type, so the table cannot hold a typo. */
|
|
1972
|
-
type RailTagKey = `${RailDirection}/${
|
|
2111
|
+
type RailTagKey = `${RailDirection}/${SampleKind}/${RailDelivery}`;
|
|
1973
2112
|
/**
|
|
1974
|
-
* A handle's three rail axes as one `direction/
|
|
2113
|
+
* A handle's three rail axes as one `direction/kind/delivery` string, e.g. `command/event/acked`.
|
|
1975
2114
|
*
|
|
2115
|
+
* @intent Published so a representation of the rail of a third party can key its entries by the same tag combination the kit does.
|
|
1976
2116
|
* @category CommandDelay
|
|
1977
2117
|
*/
|
|
1978
2118
|
declare function railTagKey(tags: RailTags): RailTagKey;
|
|
@@ -1995,6 +2135,7 @@ interface ControlStreamSample {
|
|
|
1995
2135
|
* @category CommandDelay
|
|
1996
2136
|
*/
|
|
1997
2137
|
interface ControlStreamDatum {
|
|
2138
|
+
/** Identifies the axis. */
|
|
1998
2139
|
id: string;
|
|
1999
2140
|
/** The axis's name, e.g. "Throttle". */
|
|
2000
2141
|
label: string;
|
|
@@ -2015,14 +2156,17 @@ interface ControlStreamDatum {
|
|
|
2015
2156
|
tags: RailTags;
|
|
2016
2157
|
}
|
|
2017
2158
|
/**
|
|
2018
|
-
*
|
|
2019
|
-
*
|
|
2020
|
-
*
|
|
2021
|
-
*
|
|
2159
|
+
* One continuous transmission on its way from the command centre to a vessel,
|
|
2160
|
+
* such as the operator's voice: its loudness per chunk, with no value and no
|
|
2161
|
+
* echo back. Useful for showing how far a transmission has travelled. Used by
|
|
2162
|
+
* {@link ControlDelayStream}, which draws it as the ribbon mark in the
|
|
2163
|
+
* outgoing zone. A {@link ControlStreamDatum} carries a commanded value and
|
|
2164
|
+
* its echo instead.
|
|
2022
2165
|
*
|
|
2023
2166
|
* @category CommandDelay
|
|
2024
2167
|
*/
|
|
2025
2168
|
interface ControlRibbonDatum {
|
|
2169
|
+
/** Identifies the ribbon. */
|
|
2026
2170
|
id: string;
|
|
2027
2171
|
/** What the ribbon IS, in a sentence, e.g. "Your transmission crossing to Odyssey". */
|
|
2028
2172
|
label: string;
|
|
@@ -2043,7 +2187,7 @@ interface ControlRibbonDatum {
|
|
|
2043
2187
|
/**
|
|
2044
2188
|
* What this entry IS on the three axes, in full, and NOT optional. A
|
|
2045
2189
|
* producer builds them with {@link railTagsForTelemetry}, passing its
|
|
2046
|
-
*
|
|
2190
|
+
* sample kind.
|
|
2047
2191
|
*/
|
|
2048
2192
|
tags: RailTags;
|
|
2049
2193
|
}
|
|
@@ -2067,7 +2211,7 @@ interface ControlDelayStreamProps {
|
|
|
2067
2211
|
*/
|
|
2068
2212
|
ribbons?: ControlRibbonDatum[];
|
|
2069
2213
|
/** Accessible label for the graph. Defaults to "Controls in flight". */
|
|
2070
|
-
|
|
2214
|
+
"aria-label"?: string;
|
|
2071
2215
|
/**
|
|
2072
2216
|
* `"inline"` (default, 40px) is the in-widget rendering; `"rail"` (16px, no
|
|
2073
2217
|
* labels) is the collapsed drag-bar strip; `"expanded"` is the full-bleed,
|
|
@@ -2084,6 +2228,7 @@ interface ControlDelayStreamProps {
|
|
|
2084
2228
|
* The one-way delay, in seconds, under which {@link ControlDelayStream} draws no
|
|
2085
2229
|
* command streams. Ribbons draw at any positive delay.
|
|
2086
2230
|
*
|
|
2231
|
+
* @intent Published so a representation of the rail of a third party can agree with ControlDelayStream on when streams are drawn.
|
|
2087
2232
|
* @category CommandDelay
|
|
2088
2233
|
*/
|
|
2089
2234
|
declare const STREAM_MIN_DELAY_SECONDS = 0.05;
|
|
@@ -2092,12 +2237,13 @@ declare const STREAM_MIN_DELAY_SECONDS = 0.05;
|
|
|
2092
2237
|
* wide): the T divider, a third of the plot. It never moves with delivery;
|
|
2093
2238
|
* delivery only decides whether anything is drawn past it.
|
|
2094
2239
|
*
|
|
2240
|
+
* @intent Published so a representation of the rail of a third party can place its divider where ControlDelayStream places the T.
|
|
2095
2241
|
* @category CommandDelay
|
|
2096
2242
|
*/
|
|
2097
2243
|
declare function ribbonBoundaryX(variant?: ControlDelayStreamVariant): number;
|
|
2098
2244
|
/**
|
|
2099
2245
|
* The continuous sibling of {@link InFlightList}: one three-zone sparkline for
|
|
2100
|
-
*
|
|
2246
|
+
* all of a widget's control axes. Now on the left, age to the right; outgoing, echo
|
|
2101
2247
|
* and confirmed zones split by dividers at T and 2T; a muted-to-clear
|
|
2102
2248
|
* confidence ramp; deviation in the confirmed zone as the expected path dashed
|
|
2103
2249
|
* plus the actual path in the warning token; zone and delay labels on hover.
|
|
@@ -2111,7 +2257,7 @@ declare function ribbonBoundaryX(variant?: ControlDelayStreamVariant): number;
|
|
|
2111
2257
|
*
|
|
2112
2258
|
* @category CommandDelay
|
|
2113
2259
|
*/
|
|
2114
|
-
declare function ControlDelayStream({ streams, ribbons, ariaLabel, variant, delayReading, }: ControlDelayStreamProps): react_jsx_runtime.JSX.Element | null;
|
|
2260
|
+
declare function ControlDelayStream({ streams, ribbons, "aria-label": ariaLabel, variant, delayReading, }: ControlDelayStreamProps): react_jsx_runtime.JSX.Element | null;
|
|
2115
2261
|
|
|
2116
2262
|
/**
|
|
2117
2263
|
* One dispatch that got no reply, as much of it as the sentence needs. The entries in `useCommand`'s `losses` satisfy it.
|
|
@@ -2132,6 +2278,7 @@ interface CommandLossLike {
|
|
|
2132
2278
|
* @category CommandDelay
|
|
2133
2279
|
*/
|
|
2134
2280
|
interface CommandLossEntry extends CommandLossLike {
|
|
2281
|
+
/** The dispatch's `requestId`, which keys the box and is what `dismiss` takes. */
|
|
2135
2282
|
id: string;
|
|
2136
2283
|
}
|
|
2137
2284
|
/**
|
|
@@ -2140,6 +2287,7 @@ interface CommandLossEntry extends CommandLossLike {
|
|
|
2140
2287
|
* @category CommandDelay
|
|
2141
2288
|
*/
|
|
2142
2289
|
interface RailLoss extends CommandLossEntry {
|
|
2290
|
+
/** The command's rail axes. */
|
|
2143
2291
|
tags: RailTags;
|
|
2144
2292
|
}
|
|
2145
2293
|
/**
|
|
@@ -2168,6 +2316,7 @@ interface CommandFailedLike extends CommandLossLike {
|
|
|
2168
2316
|
* @category CommandDelay
|
|
2169
2317
|
*/
|
|
2170
2318
|
interface CommandFailedEntry extends CommandFailedLike {
|
|
2319
|
+
/** The dispatch's `requestId`, which keys the box and is what `dismiss` takes. */
|
|
2171
2320
|
id: string;
|
|
2172
2321
|
}
|
|
2173
2322
|
/**
|
|
@@ -2176,6 +2325,7 @@ interface CommandFailedEntry extends CommandFailedLike {
|
|
|
2176
2325
|
* @category CommandDelay
|
|
2177
2326
|
*/
|
|
2178
2327
|
interface RailFailed extends CommandFailedEntry {
|
|
2328
|
+
/** The command's rail axes. */
|
|
2179
2329
|
tags: RailTags;
|
|
2180
2330
|
}
|
|
2181
2331
|
/**
|
|
@@ -2229,6 +2379,7 @@ interface CommandFoundLike {
|
|
|
2229
2379
|
* @category CommandDelay
|
|
2230
2380
|
*/
|
|
2231
2381
|
interface CommandFoundEntry extends CommandFoundLike {
|
|
2382
|
+
/** The dispatch's `requestId`, which keys the box and is what `dismiss` takes. */
|
|
2232
2383
|
id: string;
|
|
2233
2384
|
}
|
|
2234
2385
|
/**
|
|
@@ -2237,6 +2388,7 @@ interface CommandFoundEntry extends CommandFoundLike {
|
|
|
2237
2388
|
* @category CommandDelay
|
|
2238
2389
|
*/
|
|
2239
2390
|
interface RailFound extends CommandFoundEntry {
|
|
2391
|
+
/** The command's rail axes. */
|
|
2240
2392
|
tags: RailTags;
|
|
2241
2393
|
}
|
|
2242
2394
|
/**
|
|
@@ -2263,8 +2415,16 @@ declare function commandFoundSentence(found: CommandFoundLike): string;
|
|
|
2263
2415
|
* @category CommandDelay
|
|
2264
2416
|
*/
|
|
2265
2417
|
interface CommandRefusalLike {
|
|
2418
|
+
/** Why the command was refused, as one of the root codes every Uplink shares, such as
|
|
2419
|
+
* `CommandErrorCode.InsufficientFunds`, whose string value (the one on the
|
|
2420
|
+
* wire) is `"insufficientFunds"`. */
|
|
2266
2421
|
errorCode: CommandErrorCode;
|
|
2267
|
-
/**
|
|
2422
|
+
/**
|
|
2423
|
+
* The refinement's id, when the refusal was more specific than its root
|
|
2424
|
+
* `errorCode`. A refinement is a narrower reason an Uplink declares under a
|
|
2425
|
+
* root code, such as a particular kind of `wrongState`; a client that does
|
|
2426
|
+
* not know it still reads the root.
|
|
2427
|
+
*/
|
|
2268
2428
|
reason?: string;
|
|
2269
2429
|
/** The command id that was dispatched, e.g. `career.facility.upgrade`. */
|
|
2270
2430
|
command?: string;
|
|
@@ -2288,6 +2448,7 @@ interface CommandRefusalLike {
|
|
|
2288
2448
|
* @category CommandDelay
|
|
2289
2449
|
*/
|
|
2290
2450
|
interface CommandRefusalEntry extends CommandRefusalLike {
|
|
2451
|
+
/** The dispatch's `requestId`, which keys the box and is what `dismiss` takes. */
|
|
2291
2452
|
id: string;
|
|
2292
2453
|
}
|
|
2293
2454
|
/**
|
|
@@ -2305,18 +2466,20 @@ interface RailRefusal extends CommandRefusalEntry {
|
|
|
2305
2466
|
tags: RailTags;
|
|
2306
2467
|
}
|
|
2307
2468
|
/**
|
|
2308
|
-
*
|
|
2469
|
+
* The sentence shown when the game refuses a command:
|
|
2309
2470
|
*
|
|
2310
2471
|
* Hire Valentina Kerman refused: the Astronaut Complex holds 16 of 16 active crew.
|
|
2311
2472
|
* Upgrade Launch Pad refused: it is already at tier 3 of 3.
|
|
2312
2473
|
* Upgrade Launch Pad refused: it costs 253,000f and funds are 189,412f.
|
|
2313
2474
|
*
|
|
2314
|
-
* The command and args name the
|
|
2315
|
-
* refinement's own sentence ahead of its root's), and the
|
|
2316
|
-
* supplies the
|
|
2475
|
+
* The command and its args name the subject, the refusal code picks the
|
|
2476
|
+
* clause (a refinement's own sentence ahead of its root's), and the
|
|
2477
|
+
* `LimitBreach` supplies the numbers, written as {@link Unit} writes them.
|
|
2478
|
+
* Used by {@link CommandButton} and {@link CommandList}, which show it when a
|
|
2479
|
+
* command of theirs is refused.
|
|
2317
2480
|
*
|
|
2318
|
-
* Names are user-supplied and unbounded, so
|
|
2319
|
-
*
|
|
2481
|
+
* Names are user-supplied and unbounded, so render the sentence where it can
|
|
2482
|
+
* wrap: truncating it cuts the numbers off the end.
|
|
2320
2483
|
*
|
|
2321
2484
|
* @category CommandDelay
|
|
2322
2485
|
*/
|
|
@@ -2371,9 +2534,13 @@ declare function commandUndeliveredSentence(undelivered: CommandUndeliveredLike)
|
|
|
2371
2534
|
* @category CommandDelay
|
|
2372
2535
|
*/
|
|
2373
2536
|
interface InFlightListItem {
|
|
2537
|
+
/** Identifies the command. */
|
|
2374
2538
|
id: string;
|
|
2539
|
+
/** What the command is called in the list. */
|
|
2375
2540
|
label: string;
|
|
2541
|
+
/** Seconds until it reaches the craft or is answered, or `null` for none. */
|
|
2376
2542
|
etaSeconds: number | null;
|
|
2543
|
+
/** Where the command is on its way. */
|
|
2377
2544
|
phase: "in-transit" | "awaiting-reply" | "due" | "overdue" | "lost";
|
|
2378
2545
|
/**
|
|
2379
2546
|
* True position along the 3-stage delay axis, 0 (just sent) to 1 (end of the
|
|
@@ -2402,16 +2569,16 @@ interface InFlightListItem {
|
|
|
2402
2569
|
*/
|
|
2403
2570
|
type InFlightListMode = "live" | "staged" | "no-path";
|
|
2404
2571
|
/**
|
|
2405
|
-
* How much
|
|
2406
|
-
*
|
|
2407
|
-
* to count it in.
|
|
2408
|
-
*
|
|
2409
|
-
* - `full` arrow, label and countdown per command, one per line
|
|
2410
|
-
* - `compact` arrow and countdown only; the label moves to the accessible
|
|
2411
|
-
* name and tooltip
|
|
2412
|
-
* - `badge` one chip for the whole set: count plus the nearest arrival
|
|
2572
|
+
* How much of each in-flight command {@link InFlightList} draws, by the room
|
|
2573
|
+
* it has. Independent of `mode`, which describes the link.
|
|
2413
2574
|
*
|
|
2414
|
-
* `
|
|
2575
|
+
* - `full`: arrow, label and countdown per command, one per line
|
|
2576
|
+
* - `compact`: arrow and countdown only; the label moves to the accessible
|
|
2577
|
+
* name and tooltip
|
|
2578
|
+
* - `badge`: one chip for the whole set, with the count and the nearest
|
|
2579
|
+
* arrival
|
|
2580
|
+
* - `auto` (the default): measures the rendered width and picks one of the
|
|
2581
|
+
* three
|
|
2415
2582
|
*
|
|
2416
2583
|
* @category CommandDelay
|
|
2417
2584
|
*/
|
|
@@ -2435,7 +2602,7 @@ interface InFlightListProps {
|
|
|
2435
2602
|
*/
|
|
2436
2603
|
orientation?: "column" | "row";
|
|
2437
2604
|
/** Accessible label for the list region. Defaults to "In-flight commands". */
|
|
2438
|
-
|
|
2605
|
+
"aria-label"?: string;
|
|
2439
2606
|
/**
|
|
2440
2607
|
* `"inline"` (default) is the monospace row/badge list. `"rail"` is the
|
|
2441
2608
|
* Panel rail's 16px strip: each command is a soft glow grazing the top edge,
|
|
@@ -2458,9 +2625,13 @@ interface InFlightListProps {
|
|
|
2458
2625
|
*
|
|
2459
2626
|
* @category CommandDelay
|
|
2460
2627
|
*/
|
|
2461
|
-
declare function InFlightList({ items, mode, density, orientation, ariaLabel, variant, onDismiss, }: InFlightListProps): react_jsx_runtime.JSX.Element | null;
|
|
2628
|
+
declare function InFlightList({ items, mode, density, orientation, "aria-label": ariaLabel, variant, onDismiss, }: InFlightListProps): react_jsx_runtime.JSX.Element | null;
|
|
2462
2629
|
|
|
2463
|
-
/**
|
|
2630
|
+
/**
|
|
2631
|
+
* The structural subset of an in-flight command that this mapping reads.
|
|
2632
|
+
*
|
|
2633
|
+
* @category CommandDelay
|
|
2634
|
+
*/
|
|
2464
2635
|
interface InFlightCommandLike {
|
|
2465
2636
|
/** Stable for the entry's lifetime, so the list keeps its row as it moves. */
|
|
2466
2637
|
id: string;
|
|
@@ -2484,7 +2655,7 @@ interface InFlightCommandLike {
|
|
|
2484
2655
|
/**
|
|
2485
2656
|
* Maps a handle's in-flight commands (`useCommand().inFlight`) to
|
|
2486
2657
|
* {@link InFlightListItem}s for {@link InFlightList}. While `in-transit` a row
|
|
2487
|
-
* counts down to the command
|
|
2658
|
+
* counts down to the command reaching the craft; after that, to the
|
|
2488
2659
|
* acknowledgement coming back. `label` falls back to the command id.
|
|
2489
2660
|
*
|
|
2490
2661
|
* @category CommandDelay
|
|
@@ -2492,7 +2663,8 @@ interface InFlightCommandLike {
|
|
|
2492
2663
|
declare function toInFlightListItems(items: readonly InFlightCommandLike[]): InFlightListItem[];
|
|
2493
2664
|
|
|
2494
2665
|
/**
|
|
2495
|
-
* What {@link CommandDelay} and the Panel delay rail
|
|
2666
|
+
* What {@link CommandDelay} and the Panel delay rail (the strip at the top of a
|
|
2667
|
+
* panel showing commands still crossing to the craft) read from a command: its
|
|
2496
2668
|
* in-flight rows, its delay, and what became of its dispatches. Declared
|
|
2497
2669
|
* structurally; {@link useCommand}'s return value satisfies it.
|
|
2498
2670
|
*
|
|
@@ -2505,7 +2677,11 @@ interface CommandDelayHandle {
|
|
|
2505
2677
|
*/
|
|
2506
2678
|
inFlight: InFlightCommandLike[];
|
|
2507
2679
|
/**
|
|
2508
|
-
* What this entry IS on the rail's three axes, in full
|
|
2680
|
+
* What this entry IS on the delay rail's three axes, in full: `direction`
|
|
2681
|
+
* (a `command` leaving or `telemetry` arriving), `kind` (`event` or
|
|
2682
|
+
* `discrete`, one point, or `continuous`, a span) and `delivery` (`acked`, answered, or
|
|
2683
|
+
* `fire-and-forget`). The delay rail is the strip a panel draws above its
|
|
2684
|
+
* header to show what is crossing the signal delay. The renderer follows
|
|
2509
2685
|
* from these, so no consumer branches on what kind of command this is. A
|
|
2510
2686
|
* command handle gets them from {@link useCommand}; a producer that is not a
|
|
2511
2687
|
* command (an open microphone) states them with {@link railTagsForTelemetry}.
|
|
@@ -2540,7 +2716,7 @@ interface CommandDelayHandle {
|
|
|
2540
2716
|
* what it is. A voice ribbon names the transmission it is drawing; a control
|
|
2541
2717
|
* axis is happy with the default.
|
|
2542
2718
|
*/
|
|
2543
|
-
|
|
2719
|
+
"aria-label"?: string;
|
|
2544
2720
|
/**
|
|
2545
2721
|
* Dispatches from this command the GAME REFUSED, until dismissed. Rendered by
|
|
2546
2722
|
* the Panel rail under both queues, never by `<CommandDelay>`: a refusal is
|
|
@@ -2597,7 +2773,7 @@ interface CommandDelayProps {
|
|
|
2597
2773
|
* Accessible label for the rendered region. Left undefined, each branch
|
|
2598
2774
|
* keeps its own default ("In-flight commands" / "Controls in flight").
|
|
2599
2775
|
*/
|
|
2600
|
-
|
|
2776
|
+
"aria-label"?: string;
|
|
2601
2777
|
/** Discrete-branch passthrough to `InFlightList`. Ignored for stream. */
|
|
2602
2778
|
mode?: InFlightListMode;
|
|
2603
2779
|
/** Discrete-branch passthrough to `InFlightList`. Ignored for stream. */
|
|
@@ -2636,7 +2812,7 @@ interface CommandDelayProps {
|
|
|
2636
2812
|
* sentence for a command that failed. The panel's delay rail already shows the
|
|
2637
2813
|
* same commands above the widget.
|
|
2638
2814
|
*/
|
|
2639
|
-
declare function CommandDelay({ handle, handles, ariaLabel, mode, density, orientation, variant, }: Readonly<CommandDelayProps>): react_jsx_runtime.JSX.Element | null;
|
|
2815
|
+
declare function CommandDelay({ handle, handles, "aria-label": ariaLabel, mode, density, orientation, variant, }: Readonly<CommandDelayProps>): react_jsx_runtime.JSX.Element | null;
|
|
2640
2816
|
|
|
2641
2817
|
/**
|
|
2642
2818
|
* How long, in milliseconds, an armed {@link CommandButton} waits for its confirming press before it returns to rest.
|
|
@@ -2653,14 +2829,15 @@ interface CommandGateLike extends CommandRefusalLike {
|
|
|
2653
2829
|
/** The game EVALUATED this and said no. */
|
|
2654
2830
|
blocked: boolean;
|
|
2655
2831
|
/**
|
|
2656
|
-
* The mod could not evaluate this command's gates
|
|
2657
|
-
*
|
|
2832
|
+
* The mod could not evaluate this command's gates (the checks it runs
|
|
2833
|
+
* before a command is pressed) at all, as in a sandbox save, which has no
|
|
2834
|
+
* career to check against. The control is drawn as ordinary, not darkened, and carries
|
|
2658
2835
|
* `data-gate` to say so.
|
|
2659
2836
|
*/
|
|
2660
2837
|
undetermined?: boolean;
|
|
2661
2838
|
}
|
|
2662
2839
|
/**
|
|
2663
|
-
* What a command reply is known to be
|
|
2840
|
+
* What a command reply is known to be before you know which command produced
|
|
2664
2841
|
* it: the result envelope, carrying the command's own value on `payload`. The
|
|
2665
2842
|
* default {@link CommandButtonHandle} reply, so a reader cannot treat the
|
|
2666
2843
|
* envelope as the payload; `payload` stays `unknown` until narrowed.
|
|
@@ -2683,7 +2860,9 @@ interface CommandButtonHandle<Result = CommandReplyLike, Args = unknown> extends
|
|
|
2683
2860
|
/**
|
|
2684
2861
|
* Dispatch. The promise resolves when the command is confirmed and rejects
|
|
2685
2862
|
* when it is refused, lost, or the machinery failed, so the control clears its
|
|
2686
|
-
* own pending state with no per-command telemetry predicate.
|
|
2863
|
+
* own pending state with no per-command telemetry predicate. A refusal
|
|
2864
|
+
* rejects with an error carrying its `CommandErrorCode`: read it with
|
|
2865
|
+
* `classifyCommandRejection` from `@ksp-gonogo/sitrep-sdk`.
|
|
2687
2866
|
*
|
|
2688
2867
|
* `Result` carries the reply's real type to
|
|
2689
2868
|
* {@link CommandButtonProps.onConfirmed}; a handle from `useCommand("...")`
|
|
@@ -2720,7 +2899,7 @@ interface CommandButtonHandle<Result = CommandReplyLike, Args = unknown> extends
|
|
|
2720
2899
|
* - `found`: this control lost a command, and that command has since replied.
|
|
2721
2900
|
* Not a confirmation: the operator may already have re-sent it
|
|
2722
2901
|
* - `blocked`: the game will refuse this, and said so before anyone pressed.
|
|
2723
|
-
* The control is dark but
|
|
2902
|
+
* The control is dark but not `disabled`: it carries `aria-disabled`, stays
|
|
2724
2903
|
* focusable, and responds to a press by showing why. A gate verdict is
|
|
2725
2904
|
* advice, sampled and possibly a beat behind, and the dispatch is evaluated
|
|
2726
2905
|
* again by the game anyway
|
|
@@ -2823,6 +3002,9 @@ interface CommandButtonState {
|
|
|
2823
3002
|
*
|
|
2824
3003
|
* @example
|
|
2825
3004
|
* ```tsx
|
|
3005
|
+
* import { useCommand } from "@ksp-gonogo/sitrep-sdk";
|
|
3006
|
+
* import { useCommandButton } from "@ksp-gonogo/ui-kit";
|
|
3007
|
+
*
|
|
2826
3008
|
* function RecoverButton() {
|
|
2827
3009
|
* const recover = useCommand("ksp.recover");
|
|
2828
3010
|
* const { isArmed, isPending, isRefused, refusalText, press } =
|
|
@@ -2839,6 +3021,7 @@ interface CommandButtonState {
|
|
|
2839
3021
|
* type="button"
|
|
2840
3022
|
* aria-busy={isPending || undefined}
|
|
2841
3023
|
* title={refusalText ?? undefined}
|
|
3024
|
+
* // `true` asks for a confirm step: the first press arms, the second sends.
|
|
2842
3025
|
* onClick={() => press(true)}
|
|
2843
3026
|
* >
|
|
2844
3027
|
* {word}
|
|
@@ -2928,18 +3111,19 @@ interface CommandButtonProps<Result = CommandReplyLike, Args = unknown> extends
|
|
|
2928
3111
|
/**
|
|
2929
3112
|
* Whether this control's command is CURRENTLY IN EFFECT, for a control that
|
|
2930
3113
|
* represents state as well as acting on it: a SAS toggle, an action group, an
|
|
2931
|
-
* activated strategy. Sets `aria-pressed` and the
|
|
3114
|
+
* activated strategy. Sets `aria-pressed` and the pressed fill, the same
|
|
3115
|
+
* state {@link Button} and {@link ToggleButton} call `pressed`. Leave it
|
|
2932
3116
|
* undefined for a control that only acts.
|
|
2933
3117
|
*/
|
|
2934
|
-
|
|
3118
|
+
pressed?: boolean;
|
|
2935
3119
|
/**
|
|
2936
3120
|
* How much the control asks to be pressed at rest. `ghost` (default) is the
|
|
2937
|
-
* quiet outline that fills only while
|
|
3121
|
+
* quiet outline that fills only while pressed, armed or refused; `primary`
|
|
2938
3122
|
* is filled in `tone` at rest, for the one verb of a group that commits.
|
|
2939
3123
|
*/
|
|
2940
3124
|
variant?: "ghost" | "primary";
|
|
2941
3125
|
/**
|
|
2942
|
-
* The tone of the fill while `
|
|
3126
|
+
* The tone of the fill while `pressed`, and of the resting fill for a
|
|
2943
3127
|
* `primary` control. Defaults to `neutral`.
|
|
2944
3128
|
*/
|
|
2945
3129
|
tone?: CommandButtonTone;
|
|
@@ -2955,7 +3139,8 @@ interface CommandButtonProps<Result = CommandReplyLike, Args = unknown> extends
|
|
|
2955
3139
|
/**
|
|
2956
3140
|
* Called with the control's press while a click on it would do something
|
|
2957
3141
|
* (not while it is in flight) and with `null` when it would not, for a
|
|
2958
|
-
* caller that lets an input
|
|
3142
|
+
* caller that lets an input (a key, a gamepad button or a serial device
|
|
3143
|
+
* bound to this control) press it from elsewhere. The press
|
|
2959
3144
|
* takes whether the control has a confirm step.
|
|
2960
3145
|
*/
|
|
2961
3146
|
onPressReady?: (press: ((armable: boolean) => void) | null) => void;
|
|
@@ -2969,7 +3154,8 @@ interface CommandButtonProps<Result = CommandReplyLike, Args = unknown> extends
|
|
|
2969
3154
|
*
|
|
2970
3155
|
* Receives what the dispatch resolved with, typed off the handle. A confirmed
|
|
2971
3156
|
* command did not necessarily do something: a mod that de-duplicates on
|
|
2972
|
-
* request id replies to a repeat
|
|
3157
|
+
* request id (the id each dispatch carries) replies to a repeat of the same
|
|
3158
|
+
* dispatch with the receipt it stored the first time. The
|
|
2973
3159
|
* value is the reply envelope; the command's own value is on `payload`.
|
|
2974
3160
|
*/
|
|
2975
3161
|
onConfirmed?: (result: Result) => void;
|
|
@@ -2984,7 +3170,7 @@ interface CommandButtonProps<Result = CommandReplyLike, Args = unknown> extends
|
|
|
2984
3170
|
* it.
|
|
2985
3171
|
*
|
|
2986
3172
|
* Pending ends when the promise `send()` returned settles, whether or not any
|
|
2987
|
-
* telemetry changes as a result. Pending is per
|
|
3173
|
+
* telemetry changes as a result. Pending is per rendered control, not
|
|
2988
3174
|
* per handle, so one handle serving a list gives each row its own pending
|
|
2989
3175
|
* state. Outcomes are announced through a polite live region.
|
|
2990
3176
|
*
|
|
@@ -3009,7 +3195,7 @@ interface CommandButtonProps<Result = CommandReplyLike, Args = unknown> extends
|
|
|
3009
3195
|
* refused, lost, found again or blocked, with the outcome announced. Every control that
|
|
3010
3196
|
* dispatches a command handle is one of these.
|
|
3011
3197
|
*/
|
|
3012
|
-
declare function CommandButton<Result = CommandReplyLike, Args = unknown>({ handle, args, commandLabel, label, confirmLabel, pendingLabel, refusedLabel, lostLabel, foundLabel, confirmAriaLabel, pendingAriaLabel, blockedAriaLabel,
|
|
3198
|
+
declare function CommandButton<Result = CommandReplyLike, Args = unknown>({ handle, args, commandLabel, label, confirmLabel, pendingLabel, refusedLabel, lostLabel, foundLabel, confirmAriaLabel, pendingAriaLabel, blockedAriaLabel, pressed, variant, tone, icon, confirmIcon, onPressReady, size, confirmTone, onConfirmed, disabled, title, "aria-label": ariaLabel, ...rest }: Readonly<CommandButtonProps<Result, Args>>): react_jsx_runtime.JSX.Element;
|
|
3013
3199
|
|
|
3014
3200
|
/**
|
|
3015
3201
|
* The props of {@link InFlightFace}.
|
|
@@ -3121,7 +3307,7 @@ interface CommandListCommonProps {
|
|
|
3121
3307
|
*/
|
|
3122
3308
|
live?: boolean;
|
|
3123
3309
|
/** Names the list for assistive tech. Each kind has its own default. */
|
|
3124
|
-
|
|
3310
|
+
"aria-label"?: string;
|
|
3125
3311
|
}
|
|
3126
3312
|
/**
|
|
3127
3313
|
* Props for {@link CommandList}: the entries it draws, keyed by what became of them. Each entry
|
|
@@ -3132,19 +3318,29 @@ interface CommandListCommonProps {
|
|
|
3132
3318
|
* @category CommandDelay
|
|
3133
3319
|
*/
|
|
3134
3320
|
type CommandListProps = CommandListCommonProps & ({
|
|
3321
|
+
/** The commands that were refused. */
|
|
3135
3322
|
kind: "refused";
|
|
3323
|
+
/** The refused commands, one box each. */
|
|
3136
3324
|
entries: readonly RailRefusal[];
|
|
3137
3325
|
} | {
|
|
3326
|
+
/** The commands that were lost with no answer. */
|
|
3138
3327
|
kind: "lost";
|
|
3328
|
+
/** The lost commands, one box each. */
|
|
3139
3329
|
entries: readonly RailLoss[];
|
|
3140
3330
|
} | {
|
|
3331
|
+
/** The commands that never left. */
|
|
3141
3332
|
kind: "undelivered";
|
|
3333
|
+
/** The undelivered commands, one box each. */
|
|
3142
3334
|
entries: readonly RailUndelivered[];
|
|
3143
3335
|
} | {
|
|
3336
|
+
/** The lost commands that answered after all. */
|
|
3144
3337
|
kind: "found";
|
|
3338
|
+
/** The found commands, one box each. */
|
|
3145
3339
|
entries: readonly RailFound[];
|
|
3146
3340
|
} | {
|
|
3341
|
+
/** The commands that came back with a fault. */
|
|
3147
3342
|
kind: "failed";
|
|
3343
|
+
/** The failed commands, one box each. */
|
|
3148
3344
|
entries: readonly RailFailed[];
|
|
3149
3345
|
});
|
|
3150
3346
|
/**
|
|
@@ -3237,14 +3433,16 @@ interface DelayRailStore {
|
|
|
3237
3433
|
/**
|
|
3238
3434
|
* Create an empty delay-rail store, for a caller that owns its lifetime and provides it through {@link DelayRailContext}.
|
|
3239
3435
|
*
|
|
3436
|
+
* @intent Published so a third party can own the lifetime of a rail store behind a representation of its own, as Console does.
|
|
3240
3437
|
* @category CommandDelay
|
|
3241
3438
|
*/
|
|
3242
3439
|
declare function createDelayRailStore(): DelayRailStore;
|
|
3243
3440
|
/**
|
|
3244
|
-
* Carries only the store
|
|
3441
|
+
* Carries only the store handle, never the live registrations. `null` outside
|
|
3245
3442
|
* a `Panel`, where `useRailEntry` and `useActiveHandles` degrade to no-ops.
|
|
3246
3443
|
* Exported raw for a caller that owns the store's lifetime.
|
|
3247
3444
|
*
|
|
3445
|
+
* @intent Published so a third party can provide a rail store it owns to a representation of its own, as Console does.
|
|
3248
3446
|
* @category CommandDelay
|
|
3249
3447
|
*/
|
|
3250
3448
|
declare const DelayRailContext: react.Context<DelayRailStore | null>;
|
|
@@ -3272,6 +3470,7 @@ declare const useDelayRailStore: () => DelayRailStore | null;
|
|
|
3272
3470
|
* is no store in the tree. A subscriber (`Panel.Delay`) re-renders only when
|
|
3273
3471
|
* the active handle set changes.
|
|
3274
3472
|
*
|
|
3473
|
+
* @intent Published so a third party can read the active handles to draw a representation of the rail of its own, as Console does.
|
|
3275
3474
|
* @category CommandDelay
|
|
3276
3475
|
*/
|
|
3277
3476
|
declare function useActiveHandles(): readonly CommandHandle[];
|
|
@@ -3282,7 +3481,7 @@ declare function useActiveHandles(): readonly CommandHandle[];
|
|
|
3282
3481
|
* @category CommandDelay
|
|
3283
3482
|
*/
|
|
3284
3483
|
interface SignalDelayBadgeProps {
|
|
3285
|
-
/**
|
|
3484
|
+
/** The one-way delay in seconds, drawn as given: the caller decides whether to render the badge at all. Under a minute it is written with one decimal. */
|
|
3286
3485
|
oneWaySeconds: number;
|
|
3287
3486
|
/** The delay as the reading it arrived in, so a quiet `comms.delay` draws the figure held. */
|
|
3288
3487
|
delayReading?: Reading<Value<"s">> | null;
|
|
@@ -3290,12 +3489,12 @@ interface SignalDelayBadgeProps {
|
|
|
3290
3489
|
className?: string;
|
|
3291
3490
|
}
|
|
3292
3491
|
/**
|
|
3293
|
-
*
|
|
3294
|
-
*
|
|
3295
|
-
*
|
|
3296
|
-
*
|
|
3297
|
-
*
|
|
3298
|
-
*
|
|
3492
|
+
* The one-way delay between the active command centre and the vessel or device
|
|
3493
|
+
* a control sends to, as a small chip ("one-way ~4.2 s"). The figure is the
|
|
3494
|
+
* one its caller passes in `oneWaySeconds`. Useful for showing the operator
|
|
3495
|
+
* the expected time for a command to reach the target. Used alongside
|
|
3496
|
+
* time-sensitive controls like {@link Console} to help the operator
|
|
3497
|
+
* understand when a command is likely to happen.
|
|
3299
3498
|
*
|
|
3300
3499
|
* @category CommandDelay
|
|
3301
3500
|
*/
|
|
@@ -3323,17 +3522,19 @@ declare function useRailEntry(entry: RailEntry | null): void;
|
|
|
3323
3522
|
/**
|
|
3324
3523
|
* The centre line of the ribbon mark's box, in box units.
|
|
3325
3524
|
*
|
|
3525
|
+
* @intent Published so a caller can read the trace waveformPath draws back against its centre line.
|
|
3326
3526
|
* @category CommandDelay
|
|
3327
3527
|
*/
|
|
3328
3528
|
declare const WAVE_MID_Y: number;
|
|
3329
3529
|
/**
|
|
3330
3530
|
* How far a full-scale sample reaches either side of the centre line, in box units. Short: the rail is a band, not a meter.
|
|
3331
3531
|
*
|
|
3532
|
+
* @intent Published so a caller can read the trace waveformPath draws back as an amplitude.
|
|
3332
3533
|
* @category CommandDelay
|
|
3333
3534
|
*/
|
|
3334
3535
|
declare const WAVE_HALF_H = 5.5;
|
|
3335
3536
|
/**
|
|
3336
|
-
* Turn a newest-last amplitude ring into an open waveform
|
|
3537
|
+
* Turn a newest-last amplitude ring into an open waveform trace crossing the
|
|
3337
3538
|
* band's centre, each turning point's height a sample's amplitude, at a fixed
|
|
3338
3539
|
* pitch so the period stays visible. Silence is a flat line down the middle:
|
|
3339
3540
|
* the key is open and nobody is speaking.
|
|
@@ -3358,10 +3559,10 @@ interface ComposerBarProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
3358
3559
|
*/
|
|
3359
3560
|
blocked?: boolean;
|
|
3360
3561
|
/**
|
|
3361
|
-
* A short
|
|
3562
|
+
* A short label straddling the LEFT end of the row's top border, saying WHY
|
|
3362
3563
|
* the outline turned red. The right end belongs to the console's delay
|
|
3363
|
-
* reading. A few upper-case words, pinned so it never
|
|
3364
|
-
* height.
|
|
3564
|
+
* reading. A few upper-case words, such as `READ ONLY`, pinned so it never
|
|
3565
|
+
* changes the row's height.
|
|
3365
3566
|
*/
|
|
3366
3567
|
flag?: string;
|
|
3367
3568
|
/**
|
|
@@ -3404,6 +3605,7 @@ interface ComposerBarProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
3404
3605
|
* operator's choice.
|
|
3405
3606
|
*/
|
|
3406
3607
|
sendTooltip?: string;
|
|
3608
|
+
/** The input the operator types into, drawn between the prompt and the send button. */
|
|
3407
3609
|
children?: ReactNode;
|
|
3408
3610
|
}
|
|
3409
3611
|
/**
|
|
@@ -3443,13 +3645,14 @@ interface ConsoleProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
3443
3645
|
*/
|
|
3444
3646
|
tone?: ConsoleTone;
|
|
3445
3647
|
/**
|
|
3446
|
-
*
|
|
3447
|
-
*
|
|
3648
|
+
* The one-way delay between the command centre and the craft or device the
|
|
3649
|
+
* console talks to, in seconds. `null` when there is no measurable path.
|
|
3650
|
+
* Neither `null` nor zero gets a {@link SignalDelayBadge}.
|
|
3448
3651
|
*/
|
|
3449
3652
|
oneWaySeconds?: number | null;
|
|
3450
3653
|
/**
|
|
3451
3654
|
* The same delay as the reading it arrived in (`useCommand`'s
|
|
3452
|
-
* `delayReading`), so the
|
|
3655
|
+
* `delayReading`), so the badge's figure draws held while `comms.delay` is
|
|
3453
3656
|
* quiet. Omitted, it draws as current.
|
|
3454
3657
|
*/
|
|
3455
3658
|
delayReading?: Reading<Value<"s">> | null;
|
|
@@ -3459,8 +3662,9 @@ interface ConsoleProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
3459
3662
|
*/
|
|
3460
3663
|
canQueue?: boolean;
|
|
3461
3664
|
/**
|
|
3462
|
-
* Force the
|
|
3463
|
-
* which has no composed
|
|
3665
|
+
* Force the {@link SignalDelayBadge} whatever the separation, for a terminal in
|
|
3666
|
+
* character mode (every keystroke goes on its own), which has no composed
|
|
3667
|
+
* line to queue.
|
|
3464
3668
|
*/
|
|
3465
3669
|
alwaysBadge?: boolean;
|
|
3466
3670
|
/**
|
|
@@ -3471,7 +3675,7 @@ interface ConsoleProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
3471
3675
|
/**
|
|
3472
3676
|
* Set when each `inFlight` entry carries the delay it was sent under, so the
|
|
3473
3677
|
* queue stays after the live delay reading is gone: words sent at four
|
|
3474
|
-
* light-minutes are still crossing after the path drops. The
|
|
3678
|
+
* light-minutes are still crossing after the path drops. The badge and the
|
|
3475
3679
|
* queue are still never drawn together.
|
|
3476
3680
|
*/
|
|
3477
3681
|
inFlightFrozenAtDispatch?: boolean;
|
|
@@ -3479,31 +3683,34 @@ interface ConsoleProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
3479
3683
|
* The line the operator types on, at the foot and inside the frame. Omitted,
|
|
3480
3684
|
* the console grows no foot. Given but currently absent (a terminal in
|
|
3481
3685
|
* character mode), the foot stays, so the surface does not change height
|
|
3482
|
-
* with the mode. A standing
|
|
3686
|
+
* with the mode. A standing badge grows a foot for itself either way.
|
|
3483
3687
|
*/
|
|
3484
3688
|
composer?: ReactNode;
|
|
3485
3689
|
/** The scrollback: an emulator screen, a log, a list of rows. */
|
|
3486
3690
|
children?: ReactNode;
|
|
3487
3691
|
}
|
|
3488
3692
|
/**
|
|
3489
|
-
* A console
|
|
3490
|
-
* the
|
|
3693
|
+
* A two-way text console for a craft or device that may be a signal delay
|
|
3694
|
+
* away: the scrollback, the lines still in transit, the line being typed, and
|
|
3695
|
+
* one reading of the one-way delay between the command centre and that craft
|
|
3696
|
+
* or device (`oneWaySeconds`). Used by widgets that send typed lines, such as
|
|
3697
|
+
* a script terminal or a message thread.
|
|
3491
3698
|
*
|
|
3492
|
-
* The delay reading
|
|
3493
|
-
* {@link SignalDelayBadge}
|
|
3494
|
-
* would
|
|
3495
|
-
*
|
|
3496
|
-
*
|
|
3497
|
-
* (`canQueue`) and what is queued (`inFlight`).
|
|
3699
|
+
* The console picks the delay reading. While the one-way delay is a second or
|
|
3700
|
+
* less it draws a standing {@link SignalDelayBadge}, since a countdown that
|
|
3701
|
+
* short would end before it could be read. Above that it draws an
|
|
3702
|
+
* {@link InFlightList} of what is in transit. It never draws both, and both
|
|
3703
|
+
* sit at the foot. The widget supplies the delay (`oneWaySeconds`), whether
|
|
3704
|
+
* its lines can queue (`canQueue`) and what is queued (`inFlight`).
|
|
3498
3705
|
*
|
|
3499
3706
|
* The composer (usually a {@link ComposerBar}) and the scrollback are the
|
|
3500
|
-
* widget's;
|
|
3707
|
+
* widget's; the console places them and draws the frame around them.
|
|
3501
3708
|
*
|
|
3502
3709
|
* @category Console
|
|
3503
3710
|
* @categoryDescription Console
|
|
3504
3711
|
* A two-way text console over a delayed link: the scrollback, the line being
|
|
3505
|
-
* typed, and
|
|
3506
|
-
* the
|
|
3712
|
+
* typed, and the lines still in transit, framed with one reading of the
|
|
3713
|
+
* one-way delay to the craft the console talks to.
|
|
3507
3714
|
*/
|
|
3508
3715
|
declare function Console({ tone, oneWaySeconds, delayReading, canQueue, alwaysBadge, inFlight, inFlightFrozenAtDispatch, composer, children, ...rest }: ConsoleProps): react_jsx_runtime.JSX.Element;
|
|
3509
3716
|
|
|
@@ -3519,6 +3726,7 @@ interface ContainerBreakProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
3519
3726
|
narrow?: CSSProperties;
|
|
3520
3727
|
/** Styles applied once the container is at least `at` px wide, layered over `narrow`. */
|
|
3521
3728
|
wide?: CSSProperties;
|
|
3729
|
+
/** The content the styles lay out. */
|
|
3522
3730
|
children?: ReactNode;
|
|
3523
3731
|
}
|
|
3524
3732
|
/**
|
|
@@ -3575,8 +3783,10 @@ interface CountdownProps {
|
|
|
3575
3783
|
precise?: boolean;
|
|
3576
3784
|
}
|
|
3577
3785
|
/**
|
|
3578
|
-
* A duration
|
|
3579
|
-
*
|
|
3786
|
+
* A duration drawn as a clock: `1m 20s`, or `T−1m 20s` on a launch clock.
|
|
3787
|
+
* Useful for showing the time left until an event. Used by
|
|
3788
|
+
* {@link InFlightList} for each command's arrival. A `Value<"s">` has three
|
|
3789
|
+
* renderers, chosen by what the value is:
|
|
3580
3790
|
*
|
|
3581
3791
|
* - {@link Unit} for a magnitude: a burn lasting 90 seconds
|
|
3582
3792
|
* - `Countdown` for a clock, with the opt-in `T−` / `T+` prefix and
|
|
@@ -3597,7 +3807,8 @@ declare function Countdown({ value, clock, precise, }: CountdownProps): react_js
|
|
|
3597
3807
|
|
|
3598
3808
|
/**
|
|
3599
3809
|
* Value equality for widget config objects, as {@link useModalSaveBar} uses
|
|
3600
|
-
* it to decide whether a draft differs from the saved config.
|
|
3810
|
+
* it to decide whether a draft differs from the saved config. Call it yourself
|
|
3811
|
+
* only to build a dirty check of your own.
|
|
3601
3812
|
*
|
|
3602
3813
|
* - `undefined` and a missing key are treated the same
|
|
3603
3814
|
* - object key order is ignored
|
|
@@ -3683,6 +3894,7 @@ declare const FRAMEWORK_CONTRIBUTION_SEGMENTS: readonly ["badges"];
|
|
|
3683
3894
|
* ({@link useContributions}, {@link useContributionsBySlotId}) read it. A
|
|
3684
3895
|
* widget reads through those hooks rather than the store.
|
|
3685
3896
|
*
|
|
3897
|
+
* @intent Published so a test, or a host of its own, can mount the per-widget contribution store a widget reads through useContributions.
|
|
3686
3898
|
* @category Extensions
|
|
3687
3899
|
*/
|
|
3688
3900
|
declare const ContributionsPanelStore: PanelStore<Store<ContributionSlotEntry>>;
|
|
@@ -3838,6 +4050,11 @@ interface DataLineProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
3838
4050
|
*/
|
|
3839
4051
|
declare function DataLine({ label, lead, children, tone, aligned, ...rest }: DataLineProps): react_jsx_runtime.JSX.Element;
|
|
3840
4052
|
|
|
4053
|
+
/**
|
|
4054
|
+
* The fields every {@link DataTable} column carries, whatever it draws.
|
|
4055
|
+
*
|
|
4056
|
+
* @category DataTable
|
|
4057
|
+
*/
|
|
3841
4058
|
interface DataTableColumnBase {
|
|
3842
4059
|
/** Stable identity for the column, and its React key. */
|
|
3843
4060
|
key: string;
|
|
@@ -3875,9 +4092,14 @@ interface DataTableColumnBase {
|
|
|
3875
4092
|
* @category DataTable
|
|
3876
4093
|
*/
|
|
3877
4094
|
type DataTableColumn<Row> = DataTableColumnBase & ({
|
|
4095
|
+
/** Draws the cell yourself. Give this or `value`, never both. */
|
|
3878
4096
|
render: (row: Row) => ReactNode;
|
|
3879
4097
|
value?: never;
|
|
3880
4098
|
} | {
|
|
4099
|
+
/**
|
|
4100
|
+
* The cell's figure, drawn through {@link Unit}: a whole `Reading`, or
|
|
4101
|
+
* a `value()` of a unit and a number. Give this or `render`, never both.
|
|
4102
|
+
*/
|
|
3881
4103
|
value: (row: Row) => UnitValue | null | undefined;
|
|
3882
4104
|
render?: never;
|
|
3883
4105
|
});
|
|
@@ -3921,6 +4143,7 @@ interface DataTableProps<Row> {
|
|
|
3921
4143
|
* where per-row controls and augment slots go, so the columns stay aligned.
|
|
3922
4144
|
*/
|
|
3923
4145
|
rowDetail?: (row: Row) => ReactNode;
|
|
4146
|
+
/** A class for the table's outer wrapper, so a styled-component can extend it. */
|
|
3924
4147
|
className?: string;
|
|
3925
4148
|
}
|
|
3926
4149
|
/**
|
|
@@ -3934,6 +4157,18 @@ interface DataTableProps<Row> {
|
|
|
3934
4157
|
*
|
|
3935
4158
|
* @example
|
|
3936
4159
|
* ```tsx
|
|
4160
|
+
* // `"Mit"` is the unit KSP measures science data in, and `"science"` is
|
|
4161
|
+
* // science points; any unit symbol `value()` accepts works the same way.
|
|
4162
|
+
* import { type DataTableColumn, DataTable } from "@ksp-gonogo/ui-kit";
|
|
4163
|
+
* import { value } from "@ksp-gonogo/sitrep-sdk";
|
|
4164
|
+
*
|
|
4165
|
+
* interface Subject {
|
|
4166
|
+
* subjectId: string;
|
|
4167
|
+
* title: string;
|
|
4168
|
+
* dataMits: number;
|
|
4169
|
+
* remaining: number;
|
|
4170
|
+
* }
|
|
4171
|
+
*
|
|
3937
4172
|
* const columns: ReadonlyArray<DataTableColumn<Subject>> = [
|
|
3938
4173
|
* { key: "subject", header: "Subject", rowHeader: true, width: "1fr", minWidth: "22ch", render: (s) => s.title },
|
|
3939
4174
|
* { key: "data", header: "Data", align: "end", width: "9ch", value: (s) => value("Mit", s.dataMits) },
|
|
@@ -4045,8 +4280,8 @@ interface DialProps<Unit extends string = string> {
|
|
|
4045
4280
|
needleColor?: string;
|
|
4046
4281
|
/** Arc track colour. Defaults to `var(--color-border-subtle)`. */
|
|
4047
4282
|
trackColor?: string;
|
|
4048
|
-
/** Accessible name
|
|
4049
|
-
|
|
4283
|
+
/** Accessible name naming what the dial measures; the value is spoken as `aria-valuetext`. */
|
|
4284
|
+
"aria-label": string;
|
|
4050
4285
|
}
|
|
4051
4286
|
/**
|
|
4052
4287
|
* A round instrument whose needle sweeps a configurable arc (by default a full
|
|
@@ -4059,7 +4294,8 @@ interface DialProps<Unit extends string = string> {
|
|
|
4059
4294
|
* The whole axis is one kind: `value`, `min`, `max`, every zone bound and
|
|
4060
4295
|
* every tick are `Value<Unit>` of the same unit, and the centre readout writes
|
|
4061
4296
|
* that unit itself. Handed a whole `Reading`, a held figure is marked as held
|
|
4062
|
-
* and
|
|
4297
|
+
* and the {@link UncertaintyBand} of a figure a model carried forward (see
|
|
4298
|
+
* {@link TopicReckoning}) puts two bounds on the arc.
|
|
4063
4299
|
*
|
|
4064
4300
|
* The dial is a `role="meter"` with the value as `aria-valuetext`. With no
|
|
4065
4301
|
* value it draws no needle and is announced as an image naming the missing
|
|
@@ -4084,7 +4320,7 @@ interface DialProps<Unit extends string = string> {
|
|
|
4084
4320
|
* { value: value("°", 180), label: "S" },
|
|
4085
4321
|
* { value: value("°", 270), label: "W" },
|
|
4086
4322
|
* ]}
|
|
4087
|
-
*
|
|
4323
|
+
* aria-label="Heading"
|
|
4088
4324
|
* />
|
|
4089
4325
|
* );
|
|
4090
4326
|
* }
|
|
@@ -4095,7 +4331,7 @@ interface DialProps<Unit extends string = string> {
|
|
|
4095
4331
|
* Instruments for a value against a scale: a dial and a tape, each with ticks
|
|
4096
4332
|
* and coloured zones.
|
|
4097
4333
|
*/
|
|
4098
|
-
declare function Dial<Unit extends string = string>({ value, min, max, width, height, startAngle, sweep, wrap, zones, ticks, valueLabel, readout, format, needleColor, trackColor, ariaLabel, }: Readonly<DialProps<Unit>>): react_jsx_runtime.JSX.Element;
|
|
4334
|
+
declare function Dial<Unit extends string = string>({ value, min, max, width, height, startAngle, sweep, wrap, zones, ticks, valueLabel, readout, format, needleColor, trackColor, "aria-label": ariaLabel, }: Readonly<DialProps<Unit>>): react_jsx_runtime.JSX.Element;
|
|
4099
4335
|
|
|
4100
4336
|
/**
|
|
4101
4337
|
* Props for {@link Disclosure}.
|
|
@@ -4115,7 +4351,7 @@ interface DisclosureProps {
|
|
|
4115
4351
|
* Accessible name for the trigger. Required when `label` is a non-text node
|
|
4116
4352
|
* (an icon or glyph) so the button is not unlabelled to a screen reader.
|
|
4117
4353
|
*/
|
|
4118
|
-
|
|
4354
|
+
"aria-label"?: string;
|
|
4119
4355
|
/** A class for the outer element, so a styled-component can extend it. */
|
|
4120
4356
|
className?: string;
|
|
4121
4357
|
/**
|
|
@@ -4168,12 +4404,19 @@ interface DisclosureProps {
|
|
|
4168
4404
|
*
|
|
4169
4405
|
* @example
|
|
4170
4406
|
* ```tsx
|
|
4171
|
-
*
|
|
4172
|
-
*
|
|
4173
|
-
*
|
|
4174
|
-
*
|
|
4175
|
-
* >
|
|
4176
|
-
* <
|
|
4407
|
+
* import { value } from "@ksp-gonogo/sitrep-sdk";
|
|
4408
|
+
* import { Disclosure, Text, Unit } from "@ksp-gonogo/ui-kit";
|
|
4409
|
+
*
|
|
4410
|
+
* // The default: the detail pops out over what follows.
|
|
4411
|
+
* <Disclosure label="Why held?">
|
|
4412
|
+
* <Text>
|
|
4413
|
+
* The last update arrived <Unit value={value("s", 40)} /> ago.
|
|
4414
|
+
* </Text>
|
|
4415
|
+
* </Disclosure>
|
|
4416
|
+
*
|
|
4417
|
+
* // Inline: the detail opens in the flow of the page, with no chevron.
|
|
4418
|
+
* <Disclosure label="Details" variant="inline" chevron={false}>
|
|
4419
|
+
* <Text>Fuel is drawn from the lowest stage first.</Text>
|
|
4177
4420
|
* </Disclosure>
|
|
4178
4421
|
* ```
|
|
4179
4422
|
*
|
|
@@ -4182,7 +4425,7 @@ interface DisclosureProps {
|
|
|
4182
4425
|
* Detail on demand: a button that shows and hides a panel, reachable from the
|
|
4183
4426
|
* keyboard where a hover reveal would not be.
|
|
4184
4427
|
*/
|
|
4185
|
-
declare function Disclosure({ label, children, ariaLabel, className, variant, panelHeight, chevron, asButton, buttonSize, defaultOpen, }: DisclosureProps): react_jsx_runtime.JSX.Element;
|
|
4428
|
+
declare function Disclosure({ label, children, "aria-label": ariaLabel, className, variant, panelHeight, chevron, asButton, buttonSize, defaultOpen, }: DisclosureProps): react_jsx_runtime.JSX.Element;
|
|
4186
4429
|
|
|
4187
4430
|
/**
|
|
4188
4431
|
* Props for {@link DivergingBar}.
|
|
@@ -4203,18 +4446,21 @@ interface DivergingBarProps<Unit extends string = string> {
|
|
|
4203
4446
|
* an empty track.
|
|
4204
4447
|
*/
|
|
4205
4448
|
maxAbs: Value<Unit>;
|
|
4449
|
+
/** A class for the outer element, so a styled-component can extend it. */
|
|
4206
4450
|
className?: string;
|
|
4207
4451
|
}
|
|
4208
4452
|
/**
|
|
4209
|
-
* A small bar centred on zero, for a signed quantity whose
|
|
4453
|
+
* A small bar centred on zero, for a signed quantity whose direction matters
|
|
4210
4454
|
* as much as its size (a ledger term that produces or consumes). Decorative
|
|
4211
4455
|
* and `aria-hidden`: pair it with the number, which carries the reading.
|
|
4212
4456
|
*
|
|
4213
4457
|
* A held figure fades the bar and nothing more; the number beside it says how
|
|
4214
4458
|
* current it is.
|
|
4215
4459
|
*
|
|
4216
|
-
* Hides itself when the nearest `inline-size` container
|
|
4217
|
-
*
|
|
4460
|
+
* Hides itself when the nearest `inline-size` container is narrower than 300px,
|
|
4461
|
+
* where the number alone is the reading that matters. A {@link Panel} is such a
|
|
4462
|
+
* container, so a bar inside a widget needs none of its own; outside a panel,
|
|
4463
|
+
* wrap it in an element with `container-type: inline-size`.
|
|
4218
4464
|
*
|
|
4219
4465
|
* @category Meter
|
|
4220
4466
|
*/
|
|
@@ -4270,6 +4516,7 @@ declare function createDomainAvailabilityStore(): DomainAvailabilityStore;
|
|
|
4270
4516
|
* from {@link createDomainAvailabilityStore} through it to seed presence in a
|
|
4271
4517
|
* test; otherwise use {@link DomainAvailabilityProvider}.
|
|
4272
4518
|
*
|
|
4519
|
+
* @intent Published so a test can seed which Domains are present for the widget under test.
|
|
4273
4520
|
* @category Extensions
|
|
4274
4521
|
*/
|
|
4275
4522
|
declare const DomainAvailabilityContext: react.Context<DomainAvailabilityStore | null>;
|
|
@@ -4305,7 +4552,10 @@ type EmptyStateLayout = "inline" | "fill";
|
|
|
4305
4552
|
interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
|
|
4306
4553
|
/** The placeholder text. */
|
|
4307
4554
|
children?: ReactNode;
|
|
4308
|
-
/**
|
|
4555
|
+
/**
|
|
4556
|
+
* `inline`, the default, sits where it is mounted with no inset of its own;
|
|
4557
|
+
* `fill` centres the text in all the space its container gives it.
|
|
4558
|
+
*/
|
|
4309
4559
|
layout?: EmptyStateLayout;
|
|
4310
4560
|
}
|
|
4311
4561
|
/**
|
|
@@ -4316,20 +4566,11 @@ interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
4316
4566
|
* with the content it stands in for. `fill` centres in the available space and
|
|
4317
4567
|
* suits a panel's sole child.
|
|
4318
4568
|
*
|
|
4319
|
-
* @example
|
|
4320
|
-
* ```tsx
|
|
4321
|
-
* function VesselsBody({ vessels }: { vessels: readonly string[] }) {
|
|
4322
|
-
* if (vessels.length === 0) {
|
|
4323
|
-
* return <EmptyState layout="fill">No vessels in flight</EmptyState>;
|
|
4324
|
-
* }
|
|
4325
|
-
* return <VesselList vessels={vessels} />;
|
|
4326
|
-
* }
|
|
4327
|
-
* ```
|
|
4328
|
-
*
|
|
4329
4569
|
* @category EmptyState
|
|
4330
4570
|
* @categoryDescription EmptyState
|
|
4331
|
-
* What a widget shows
|
|
4332
|
-
* while it waits, and the note for a
|
|
4571
|
+
* What a widget shows where there is no content to draw: a placeholder for an
|
|
4572
|
+
* empty panel or list, a notice, a spinner while it waits, and the note for a
|
|
4573
|
+
* trajectory that is withheld.
|
|
4333
4574
|
*/
|
|
4334
4575
|
declare function EmptyState({ children, layout, ...rest }: EmptyStateProps): react_jsx_runtime.JSX.Element;
|
|
4335
4576
|
|
|
@@ -4352,7 +4593,8 @@ interface ExpandableTextProps {
|
|
|
4352
4593
|
className?: string;
|
|
4353
4594
|
}
|
|
4354
4595
|
/**
|
|
4355
|
-
*
|
|
4596
|
+
* Prose written by the game or a mod (a contract's description, a part's
|
|
4597
|
+
* blurb), cut to a readable length with the rest behind a
|
|
4356
4598
|
* "Show more" button.
|
|
4357
4599
|
*
|
|
4358
4600
|
* The cut is a prefix of the string ending on a whole word, followed by
|
|
@@ -4375,15 +4617,16 @@ type EphemerisFigure = <Unit extends string>(figure: Value<Unit>) => UnitValue<U
|
|
|
4375
4617
|
/**
|
|
4376
4618
|
* The figure-maker for quantities computed from `bodies`' orbits and the clock
|
|
4377
4619
|
* alone: a phase angle between two planets, a transfer window between them, a
|
|
4378
|
-
* pair's separation. Pass the
|
|
4379
|
-
* on.
|
|
4620
|
+
* pair's separation. Pass the poses `useSystemInstant` returns and the bodies
|
|
4621
|
+
* the figure rests on.
|
|
4380
4622
|
*
|
|
4381
|
-
*
|
|
4382
|
-
*
|
|
4383
|
-
*
|
|
4384
|
-
*
|
|
4385
|
-
*
|
|
4386
|
-
*
|
|
4623
|
+
* The figure is as current as the least current pose it rests on. Where every
|
|
4624
|
+
* one of those poses is `exact` (on a fixed conic, an orbit that never changes, as every body of a stock
|
|
4625
|
+
* install is) the figure is stamped deterministic and takes no mark, however long
|
|
4626
|
+
* ago the catalogue last arrived. Where any is `held`, because the instant is
|
|
4627
|
+
* past its provider's horizon or the catalogue stopped arriving under a body
|
|
4628
|
+
* that drifts, the figure comes back held as of the oldest of them. A `modelled`
|
|
4629
|
+
* pose claims no exactness and takes no mark.
|
|
4387
4630
|
*
|
|
4388
4631
|
* A figure that also rests on the craft does not come through here: give it
|
|
4389
4632
|
* the craft's mark with {@link derivedMarking}, since one inexact input makes
|
|
@@ -4391,7 +4634,7 @@ type EphemerisFigure = <Unit extends string>(figure: Value<Unit>) => UnitValue<U
|
|
|
4391
4634
|
*
|
|
4392
4635
|
* @category Unit
|
|
4393
4636
|
*/
|
|
4394
|
-
declare function ephemerisFigureOf(
|
|
4637
|
+
declare function ephemerisFigureOf(poses: SystemPoses | undefined, bodies: readonly (CelestialBody | null | undefined)[]): EphemerisFigure;
|
|
4395
4638
|
|
|
4396
4639
|
/**
|
|
4397
4640
|
* Props for {@link Fill}.
|
|
@@ -4406,6 +4649,7 @@ interface FillProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
4406
4649
|
* fills the dashboard grid cell.
|
|
4407
4650
|
*/
|
|
4408
4651
|
grow?: boolean;
|
|
4652
|
+
/** The content that takes the space. */
|
|
4409
4653
|
children?: ReactNode;
|
|
4410
4654
|
}
|
|
4411
4655
|
/**
|
|
@@ -4442,17 +4686,33 @@ interface FilterChipProps {
|
|
|
4442
4686
|
*
|
|
4443
4687
|
* @example
|
|
4444
4688
|
* ```tsx
|
|
4445
|
-
*
|
|
4446
|
-
*
|
|
4447
|
-
*
|
|
4448
|
-
*
|
|
4449
|
-
*
|
|
4450
|
-
*
|
|
4451
|
-
*
|
|
4452
|
-
*
|
|
4453
|
-
*
|
|
4454
|
-
*
|
|
4455
|
-
*
|
|
4689
|
+
* import { useState } from "react";
|
|
4690
|
+
* import { Cluster, FilterChip } from "@ksp-gonogo/ui-kit";
|
|
4691
|
+
*
|
|
4692
|
+
* const BODIES = ["Kerbin", "Mun", "Minmus"] as const;
|
|
4693
|
+
*
|
|
4694
|
+
* function BodyFilter({ countFor }: { countFor: (body: string) => number }) {
|
|
4695
|
+
* const [shown, setShown] = useState<ReadonlySet<string>>(new Set());
|
|
4696
|
+
* const toggle = (body: string) =>
|
|
4697
|
+
* setShown((prev) => {
|
|
4698
|
+
* const next = new Set(prev);
|
|
4699
|
+
* if (!next.delete(body)) next.add(body);
|
|
4700
|
+
* return next;
|
|
4701
|
+
* });
|
|
4702
|
+
* return (
|
|
4703
|
+
* <Cluster justify="start" wrap role="group" aria-label="Filters">
|
|
4704
|
+
* {BODIES.map((body) => (
|
|
4705
|
+
* <FilterChip
|
|
4706
|
+
* key={body}
|
|
4707
|
+
* label={body}
|
|
4708
|
+
* selected={shown.has(body)}
|
|
4709
|
+
* count={countFor(body)}
|
|
4710
|
+
* onToggle={() => toggle(body)}
|
|
4711
|
+
* />
|
|
4712
|
+
* ))}
|
|
4713
|
+
* </Cluster>
|
|
4714
|
+
* );
|
|
4715
|
+
* }
|
|
4456
4716
|
* ```
|
|
4457
4717
|
*
|
|
4458
4718
|
* @category FilterList
|
|
@@ -4510,20 +4770,42 @@ interface UseRowFilterOptions {
|
|
|
4510
4770
|
*
|
|
4511
4771
|
* @example
|
|
4512
4772
|
* ```tsx
|
|
4513
|
-
*
|
|
4514
|
-
*
|
|
4515
|
-
*
|
|
4516
|
-
*
|
|
4517
|
-
*
|
|
4518
|
-
*
|
|
4519
|
-
*
|
|
4520
|
-
*
|
|
4521
|
-
*
|
|
4522
|
-
*
|
|
4523
|
-
*
|
|
4524
|
-
*
|
|
4525
|
-
*
|
|
4526
|
-
*
|
|
4773
|
+
* import {
|
|
4774
|
+
* EmptyState,
|
|
4775
|
+
* FilterRegion,
|
|
4776
|
+
* Stack,
|
|
4777
|
+
* Text,
|
|
4778
|
+
* useRowFilter,
|
|
4779
|
+
* } from "@ksp-gonogo/ui-kit";
|
|
4780
|
+
*
|
|
4781
|
+
* interface Subject {
|
|
4782
|
+
* id: string;
|
|
4783
|
+
* title: string;
|
|
4784
|
+
* biome: string;
|
|
4785
|
+
* }
|
|
4786
|
+
*
|
|
4787
|
+
* function SubjectList({ subjects }: { subjects: readonly Subject[] }) {
|
|
4788
|
+
* const filter = useRowFilter({ placeholder: "Filter subjects..." });
|
|
4789
|
+
* const shown = subjects.filter((s) =>
|
|
4790
|
+
* filter.matches(`${s.title} ${s.biome}`),
|
|
4791
|
+
* );
|
|
4792
|
+
*
|
|
4793
|
+
* return (
|
|
4794
|
+
* <FilterRegion filter={filter} fill>
|
|
4795
|
+
* {shown.length > 0 ? (
|
|
4796
|
+
* <Stack>
|
|
4797
|
+
* {shown.map((s) => (
|
|
4798
|
+
* <Text key={s.id}>{s.title}</Text>
|
|
4799
|
+
* ))}
|
|
4800
|
+
* </Stack>
|
|
4801
|
+
* ) : (
|
|
4802
|
+
* <EmptyState>
|
|
4803
|
+
* {filter.active ? "Nothing matches the filter" : "No subjects yet"}
|
|
4804
|
+
* </EmptyState>
|
|
4805
|
+
* )}
|
|
4806
|
+
* </FilterRegion>
|
|
4807
|
+
* );
|
|
4808
|
+
* }
|
|
4527
4809
|
* ```
|
|
4528
4810
|
*
|
|
4529
4811
|
* @category FilterList
|
|
@@ -4628,7 +4910,8 @@ interface FitLabelButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "
|
|
|
4628
4910
|
* A `button` that shows its label while the label fits and its icon when it
|
|
4629
4911
|
* does not. The switch is measured against the button's own width, not a
|
|
4630
4912
|
* breakpoint, and follows resizes. It is an unstyled native button
|
|
4631
|
-
* (`type="button"` by default), so
|
|
4913
|
+
* (`type="button"` by default), so it has no border, fill or padding until you give it some: style it with
|
|
4914
|
+
* `styled(FitLabelButton)` or wrap it as the layout needs.
|
|
4632
4915
|
*
|
|
4633
4916
|
* The accessible name is always `label`, carried in `aria-label` in both
|
|
4634
4917
|
* states. Put anything explaining a disabled state in `title`, since it is the
|
|
@@ -4754,14 +5037,19 @@ declare function Floating({ anchor, style, children, ...rest }: FloatingProps):
|
|
|
4754
5037
|
* jog wheel and read-only fields. A widget's config form is built from these.
|
|
4755
5038
|
*/
|
|
4756
5039
|
declare const ConfigForm: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$boxed"> & {
|
|
5040
|
+
/** Puts the form on a bordered panel surface with its own padding and a tighter gap. */
|
|
4757
5041
|
$boxed?: boolean;
|
|
4758
5042
|
}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$boxed"> & {
|
|
5043
|
+
/** Puts the form on a bordered panel surface with its own padding and a tighter gap. */
|
|
4759
5044
|
$boxed?: boolean;
|
|
4760
5045
|
}, never>>> & string;
|
|
4761
5046
|
/**
|
|
4762
5047
|
* One labelled control in a {@link ConfigForm}, stacked: {@link FieldLabel} on
|
|
4763
5048
|
* top, the control below, an optional {@link FieldHint} under it. Tie the label
|
|
4764
|
-
* to the control with `htmlFor` and `id`.
|
|
5049
|
+
* to the control with `htmlFor` and `id`. For a single line of text with no hint,
|
|
5050
|
+
* prefer {@link TextField}, which does all of this in one; build with `Field`
|
|
5051
|
+
* and {@link Input} for a control it does not cover or a field that needs a
|
|
5052
|
+
* {@link FieldHint}.
|
|
4765
5053
|
*
|
|
4766
5054
|
* @example
|
|
4767
5055
|
* ```tsx
|
|
@@ -4824,6 +5112,7 @@ declare const Textarea: styled_components_dist_types.IStyledComponentBase<"web",
|
|
|
4824
5112
|
* @category Layout
|
|
4825
5113
|
*/
|
|
4826
5114
|
interface FramedDisplayProps extends ComponentPropsWithoutRef<"div"> {
|
|
5115
|
+
/** The drawing the frame surrounds. */
|
|
4827
5116
|
children?: ReactNode;
|
|
4828
5117
|
/**
|
|
4829
5118
|
* Adds an inner gutter between the frame and its contents, for content that
|
|
@@ -4924,6 +5213,7 @@ declare function placeGraphNotice({ width, height, plotHasData, }: GraphNoticeSp
|
|
|
4924
5213
|
* @category LineGraph
|
|
4925
5214
|
*/
|
|
4926
5215
|
interface GraphNoticeProps extends HTMLAttributes<HTMLDivElement> {
|
|
5216
|
+
/** The notice's words. */
|
|
4927
5217
|
children?: ReactNode;
|
|
4928
5218
|
/**
|
|
4929
5219
|
* `overlay` pins the pill to the bottom-left corner over the graph (pair with
|
|
@@ -4944,7 +5234,7 @@ interface GraphNoticeProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
4944
5234
|
* @example Over a graph in a `Fill`
|
|
4945
5235
|
* ```tsx
|
|
4946
5236
|
* <Fill>
|
|
4947
|
-
* <LineGraph series={series}
|
|
5237
|
+
* <LineGraph series={series} aria-label="Altitude trend" />
|
|
4948
5238
|
* {series.length === 0 && (
|
|
4949
5239
|
* <GraphNotice placement="overlay">no reference data</GraphNotice>
|
|
4950
5240
|
* )}
|
|
@@ -4998,6 +5288,7 @@ interface GridProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
4998
5288
|
* wants its rows tighter than its columns.
|
|
4999
5289
|
*/
|
|
5000
5290
|
rowGap?: GapToken;
|
|
5291
|
+
/** The cells, filled in reading order. */
|
|
5001
5292
|
children?: ReactNode;
|
|
5002
5293
|
}
|
|
5003
5294
|
/**
|
|
@@ -5015,7 +5306,11 @@ declare function Grid({ cols, minColWidth, fit, gap, rowGap, align, children, ..
|
|
|
5015
5306
|
* @category Badge
|
|
5016
5307
|
*/
|
|
5017
5308
|
interface HeldBadgeProps {
|
|
5018
|
-
/**
|
|
5309
|
+
/**
|
|
5310
|
+
* Why the reading behind this part of the widget stopped updating: `held`,
|
|
5311
|
+
* `disconnected`, `last-before-blackout`, `recorded`, `loading` or `no-game`.
|
|
5312
|
+
* Its word is the one {@link formatStreamStatus} gives the status of that name.
|
|
5313
|
+
*/
|
|
5019
5314
|
grade: HeldGrade;
|
|
5020
5315
|
/** What is held, in the operator's terms, for the hover text: "Contract board", a part's title. */
|
|
5021
5316
|
subject?: string;
|
|
@@ -5023,7 +5318,7 @@ interface HeldBadgeProps {
|
|
|
5023
5318
|
size?: BadgeSize;
|
|
5024
5319
|
}
|
|
5025
5320
|
/**
|
|
5026
|
-
* The
|
|
5321
|
+
* The badge a widget draws beside one part of itself whose reading is held: a
|
|
5027
5322
|
* row, a card, a totals cell. It prints the grade's word and severity, so it
|
|
5028
5323
|
* always agrees with the panel's own badge.
|
|
5029
5324
|
*
|
|
@@ -5061,6 +5356,7 @@ interface HeldFigureProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
5061
5356
|
kind?: MarkKind;
|
|
5062
5357
|
/** The figure is of something other than what its label names, so its mark is drawn hollow: a ring for a current figure, the square or triangle emptied otherwise. */
|
|
5063
5358
|
elsewhere?: boolean;
|
|
5359
|
+
/** The figure the mark follows. */
|
|
5064
5360
|
children: ReactNode;
|
|
5065
5361
|
}
|
|
5066
5362
|
/**
|
|
@@ -5081,7 +5377,7 @@ interface HoverCardProps {
|
|
|
5081
5377
|
/** The always-visible trigger content: a glyph, a tag, a short label. */
|
|
5082
5378
|
trigger: ReactNode;
|
|
5083
5379
|
/** Accessible name for the trigger, required since the trigger is usually a glyph. */
|
|
5084
|
-
|
|
5380
|
+
"aria-label": string;
|
|
5085
5381
|
/** What the card says. Read-only facts: a hover card holds no controls. */
|
|
5086
5382
|
children: ReactNode;
|
|
5087
5383
|
}
|
|
@@ -5094,14 +5390,14 @@ interface HoverCardProps {
|
|
|
5094
5390
|
*
|
|
5095
5391
|
* @example
|
|
5096
5392
|
* ```tsx
|
|
5097
|
-
* <HoverCard trigger={<InfoIcon />}
|
|
5393
|
+
* <HoverCard trigger={<InfoIcon />} aria-label="Signal path">
|
|
5098
5394
|
* <Text>Relayed through {relayName}</Text>
|
|
5099
5395
|
* </HoverCard>
|
|
5100
5396
|
* ```
|
|
5101
5397
|
*
|
|
5102
5398
|
* @category Floating
|
|
5103
5399
|
*/
|
|
5104
|
-
declare function HoverCard({ trigger, ariaLabel, children }: HoverCardProps): react_jsx_runtime.JSX.Element;
|
|
5400
|
+
declare function HoverCard({ trigger, "aria-label": ariaLabel, children, }: HoverCardProps): react_jsx_runtime.JSX.Element;
|
|
5105
5401
|
|
|
5106
5402
|
type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
|
|
5107
5403
|
type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
|
|
@@ -5418,6 +5714,7 @@ interface InlineProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
5418
5714
|
* that cannot break overflows a narrow column.
|
|
5419
5715
|
*/
|
|
5420
5716
|
wrap?: boolean;
|
|
5717
|
+
/** The runs of text and inline items, laid out in a line. */
|
|
5421
5718
|
children?: ReactNode;
|
|
5422
5719
|
}
|
|
5423
5720
|
/**
|
|
@@ -5456,31 +5753,41 @@ declare function InstrumentHeldMark({ size, kind, figureSize, }: {
|
|
|
5456
5753
|
*/
|
|
5457
5754
|
declare function sayHeld(name: string, caption: string | null): string;
|
|
5458
5755
|
|
|
5756
|
+
/**
|
|
5757
|
+
* The props every {@link JogWheel} takes, whichever its mode.
|
|
5758
|
+
*
|
|
5759
|
+
* @category Form
|
|
5760
|
+
*/
|
|
5459
5761
|
interface JogWheelCommon {
|
|
5762
|
+
/** The current value. */
|
|
5460
5763
|
value: number;
|
|
5764
|
+
/** How far one step moves the value. */
|
|
5461
5765
|
step: number;
|
|
5462
5766
|
/** Drag/keyboard axis. Default "horizontal". */
|
|
5463
5767
|
orientation?: "horizontal" | "vertical";
|
|
5768
|
+
/** Called with the new value as the wheel is dragged or keyed. */
|
|
5464
5769
|
onChange: (next: number) => void;
|
|
5465
5770
|
/** Caret label formatter, also used as `aria-valuetext`. Default `String(Math.round(v))`; for a quantity, write it with {@link writeQuantity}. */
|
|
5466
5771
|
format?: (v: number) => string;
|
|
5467
|
-
|
|
5772
|
+
/** The wheel's accessible name. */
|
|
5773
|
+
"aria-label": string;
|
|
5468
5774
|
/**
|
|
5469
|
-
* The name drawn above the wheel. Defaults to `
|
|
5775
|
+
* The name drawn above the wheel. Defaults to `aria-label`; `false` draws
|
|
5470
5776
|
* none, for a wheel the caller already names beside it.
|
|
5471
5777
|
*/
|
|
5472
5778
|
label?: string | false;
|
|
5779
|
+
/** Stops the wheel responding to input. */
|
|
5473
5780
|
disabled?: boolean;
|
|
5474
5781
|
/**
|
|
5475
5782
|
* Box width in CSS px. Defaults to 56 horizontal / 24 vertical. Clamped up
|
|
5476
|
-
* to
|
|
5783
|
+
* to the smallest touch target. A `format` longer than a few
|
|
5477
5784
|
* characters needs more than the default, as the caret label is clipped to
|
|
5478
5785
|
* the box.
|
|
5479
5786
|
*/
|
|
5480
5787
|
width?: number;
|
|
5481
5788
|
/**
|
|
5482
5789
|
* Box height in CSS px. Defaults to 24 horizontal / 56 vertical. Clamped up
|
|
5483
|
-
* to
|
|
5790
|
+
* to the smallest touch target.
|
|
5484
5791
|
*/
|
|
5485
5792
|
height?: number;
|
|
5486
5793
|
}
|
|
@@ -5491,13 +5798,18 @@ interface JogWheelCommon {
|
|
|
5491
5798
|
* @category Form
|
|
5492
5799
|
*/
|
|
5493
5800
|
type JogWheelProps = (JogWheelCommon & {
|
|
5801
|
+
/** Dragging moves the value by an amount (the default). */
|
|
5494
5802
|
mode?: "offset";
|
|
5803
|
+
/** The lowest value. */
|
|
5495
5804
|
min: number;
|
|
5805
|
+
/** The highest value. */
|
|
5496
5806
|
max: number;
|
|
5497
5807
|
}) | (JogWheelCommon & {
|
|
5808
|
+
/** Holding the wheel off centre changes the value continuously. */
|
|
5498
5809
|
mode: "rate";
|
|
5499
5810
|
/** Optional here: a rate control does not need somewhere to stop. */
|
|
5500
5811
|
min?: number;
|
|
5812
|
+
/** The highest value, when the control has one. */
|
|
5501
5813
|
max?: number;
|
|
5502
5814
|
/**
|
|
5503
5815
|
* How many `step`s per second at FULL displacement. The travel between
|
|
@@ -5523,7 +5835,7 @@ type JogWheelProps = (JogWheelCommon & {
|
|
|
5523
5835
|
* @example
|
|
5524
5836
|
* ```tsx
|
|
5525
5837
|
* <JogWheel
|
|
5526
|
-
*
|
|
5838
|
+
* aria-label="Gain"
|
|
5527
5839
|
* value={gain}
|
|
5528
5840
|
* min={0}
|
|
5529
5841
|
* max={100}
|
|
@@ -5603,6 +5915,14 @@ interface LineGraphSeries {
|
|
|
5603
5915
|
* grows to include the bounds.
|
|
5604
5916
|
*/
|
|
5605
5917
|
reckoned?: readonly SeriesReckonedSpan[];
|
|
5918
|
+
/**
|
|
5919
|
+
* How to draw between two points, from the plotted value's sample kind:
|
|
5920
|
+
* `"linear"` (the default) joins them with a line, `"step"` holds each value
|
|
5921
|
+
* until the next point and then steps, for a value that stands until it
|
|
5922
|
+
* changes, and `"none"` marks each point on its own and joins nothing, for a
|
|
5923
|
+
* series of separate occurrences.
|
|
5924
|
+
*/
|
|
5925
|
+
interpolation?: "linear" | "step" | "none";
|
|
5606
5926
|
}
|
|
5607
5927
|
/**
|
|
5608
5928
|
* A horizontal reference level on a {@link LineGraph}, such as a safe limit.
|
|
@@ -5651,7 +5971,7 @@ interface LineGraphProps {
|
|
|
5651
5971
|
* decorative beside a readout that already carries the reading, and the chart
|
|
5652
5972
|
* renders `aria-hidden`.
|
|
5653
5973
|
*/
|
|
5654
|
-
|
|
5974
|
+
"aria-label"?: string;
|
|
5655
5975
|
/** Placed on the chart's root element, for a caller's own sizing or layout. */
|
|
5656
5976
|
className?: string;
|
|
5657
5977
|
/**
|
|
@@ -5683,7 +6003,7 @@ interface LineGraphProps {
|
|
|
5683
6003
|
* <LineGraph
|
|
5684
6004
|
* variant="sparkline"
|
|
5685
6005
|
* height={96}
|
|
5686
|
-
*
|
|
6006
|
+
* aria-label="Radiation dose rate, last 10 minutes"
|
|
5687
6007
|
* series={[
|
|
5688
6008
|
* {
|
|
5689
6009
|
* id: "ambient",
|
|
@@ -5702,7 +6022,7 @@ interface LineGraphProps {
|
|
|
5702
6022
|
* A value over time: a line graph with series and thresholds, and the notice a
|
|
5703
6023
|
* graph shows when it has nothing, or not enough, to draw.
|
|
5704
6024
|
*/
|
|
5705
|
-
declare function LineGraph({ series, thresholds, yDomain, height, ariaLabel, className, variant, thresholdStyle, }: LineGraphProps): react_jsx_runtime.JSX.Element;
|
|
6025
|
+
declare function LineGraph({ series, thresholds, yDomain, height, "aria-label": ariaLabel, className, variant, thresholdStyle, }: LineGraphProps): react_jsx_runtime.JSX.Element;
|
|
5706
6026
|
|
|
5707
6027
|
/**
|
|
5708
6028
|
* Props of {@link LiveRegion}.
|
|
@@ -5727,7 +6047,8 @@ interface LiveRegionProps {
|
|
|
5727
6047
|
additionsOnly?: boolean;
|
|
5728
6048
|
/**
|
|
5729
6049
|
* Interrupt rather than announce: `aria-live="assertive"`, and `role="alert"`
|
|
5730
|
-
* where the region is on screen.
|
|
6050
|
+
* where the region is on screen. Only for states that must interrupt
|
|
6051
|
+
* whatever the operator is doing, such as a mission abort, and nothing softer.
|
|
5731
6052
|
*/
|
|
5732
6053
|
assertive?: boolean;
|
|
5733
6054
|
/** The element the region renders as. */
|
|
@@ -5742,7 +6063,8 @@ interface LiveRegionProps {
|
|
|
5742
6063
|
* its message is often never announced. Mount this for as long as the thing it
|
|
5743
6064
|
* reports on is on screen, and put the words in when there is something to say.
|
|
5744
6065
|
*
|
|
5745
|
-
* Polite unless `assertive`, which interrupts and is kept for
|
|
6066
|
+
* Polite unless `assertive`, which interrupts and is kept for states that must
|
|
6067
|
+
* interrupt, such as a mission abort.
|
|
5746
6068
|
*
|
|
5747
6069
|
* @example Mounted with the control, empty until there is an outcome to say
|
|
5748
6070
|
* ```tsx
|
|
@@ -5789,6 +6111,7 @@ interface LockSummary {
|
|
|
5789
6111
|
* @category Panel
|
|
5790
6112
|
*/
|
|
5791
6113
|
interface LockScopeProps {
|
|
6114
|
+
/** The content the scope guards, drawn while nothing used inside it is locked. */
|
|
5792
6115
|
children?: ReactNode;
|
|
5793
6116
|
/**
|
|
5794
6117
|
* What draws in place of `children` while something used inside the scope
|
|
@@ -5801,8 +6124,9 @@ interface LockScopeProps {
|
|
|
5801
6124
|
/**
|
|
5802
6125
|
* Marks a part of the tree that stands or falls together. When anything
|
|
5803
6126
|
* inside it reads a Topic (with `useTelemetry` or `useStream`) or uses a
|
|
5804
|
-
* command (with `useCommand`) that this save has not unlocked
|
|
5805
|
-
*
|
|
6127
|
+
* command (with `useCommand`) that this save has not unlocked (a technology
|
|
6128
|
+
* not yet researched, or a building not yet upgraded, in a career save), the
|
|
6129
|
+
* whole scope is replaced by its `fallback`. The innermost scope wins, so a scope inside a
|
|
5806
6130
|
* section is replaced while the section stays.
|
|
5807
6131
|
*
|
|
5808
6132
|
* It draws no element of its own. A {@link Section}, each augment an
|
|
@@ -6156,10 +6480,11 @@ interface MeterProps<UnitSymbol extends string = string> extends MeterCommonProp
|
|
|
6156
6480
|
*
|
|
6157
6481
|
* ## Bands
|
|
6158
6482
|
*
|
|
6159
|
-
* Where a reading carries an
|
|
6160
|
-
*
|
|
6161
|
-
*
|
|
6162
|
-
*
|
|
6483
|
+
* Where a reading carries an {@link UncertaintyBand} (how far its forward
|
|
6484
|
+
* model, see {@link TopicReckoning}, would defend the figure), the meter draws
|
|
6485
|
+
* a tick at each end of it on the track: two marks, never a shaded interval.
|
|
6486
|
+
* The bar still shows the observed value, and the ticks sit where the model
|
|
6487
|
+
* puts the value now. A band on the capacity is ticked near the track's end, as a
|
|
6163
6488
|
* fraction of the capacity drawn. A band in a different unit from the value or
|
|
6164
6489
|
* capacity it belongs to draws nothing.
|
|
6165
6490
|
*
|
|
@@ -6210,16 +6535,17 @@ declare function Meter<UnitSymbol extends string = string>({ label, value, capac
|
|
|
6210
6535
|
*/
|
|
6211
6536
|
declare function MeterStack({ children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
6212
6537
|
/**
|
|
6213
|
-
* Keeps a row meter on its `MeterStack`'s columns while it shares
|
|
6214
|
-
* other lines, such as a caption under the bar.
|
|
6538
|
+
* Keeps a row meter on its `MeterStack`'s columns while it shares one cell of
|
|
6539
|
+
* the stack with other lines, such as a caption under the bar. Wrap the meter
|
|
6540
|
+
* and the extra lines in one group.
|
|
6215
6541
|
*
|
|
6216
6542
|
* @category Meter
|
|
6217
6543
|
*/
|
|
6218
|
-
declare const MeterRowGroup: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "
|
|
6544
|
+
declare const MeterRowGroup: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | "ref" | keyof HTMLAttributes<HTMLDivElement>> & Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
6219
6545
|
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;
|
|
6220
|
-
}, "id" | "title" | "about" | "resource" | "nonce" | "
|
|
6546
|
+
}, "id" | "title" | "about" | "resource" | "nonce" | "prefix" | "results" | "children" | "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" | "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>, "key" | "ref" | keyof HTMLAttributes<HTMLDivElement>> & Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
6221
6547
|
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;
|
|
6222
|
-
}, "id" | "title" | "about" | "resource" | "nonce" | "
|
|
6548
|
+
}, "id" | "title" | "about" | "resource" | "nonce" | "prefix" | "results" | "children" | "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" | "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;
|
|
6223
6549
|
|
|
6224
6550
|
/**
|
|
6225
6551
|
* Which clock an instant is on. Under signal delay they differ for the same
|
|
@@ -6235,6 +6561,7 @@ declare const MeterRowGroup: styled_components_dist_types.IStyledComponentBase<"
|
|
|
6235
6561
|
type TimeContext =
|
|
6236
6562
|
/** The craft's own clock: when the event happens, or happened, out there. */
|
|
6237
6563
|
{
|
|
6564
|
+
/** Names the clock the time is on. */
|
|
6238
6565
|
frame: "scet";
|
|
6239
6566
|
}
|
|
6240
6567
|
/**
|
|
@@ -6243,7 +6570,9 @@ type TimeContext =
|
|
|
6243
6570
|
* is optional because a frame can arrive before the roster naming it does.
|
|
6244
6571
|
*/
|
|
6245
6572
|
| {
|
|
6573
|
+
/** Names the clock the time is on. */
|
|
6246
6574
|
frame: "received";
|
|
6575
|
+
/** The command centre the arrival is observed at. */
|
|
6247
6576
|
vantage?: string;
|
|
6248
6577
|
};
|
|
6249
6578
|
/**
|
|
@@ -6314,6 +6643,7 @@ interface MissionDateFieldProps {
|
|
|
6314
6643
|
onChange: (ut: number) => void;
|
|
6315
6644
|
/** Names the whole group for a screen reader: "Ignition", "Plan end". */
|
|
6316
6645
|
label: string;
|
|
6646
|
+
/** Greys the field and its buttons out and ignores input. */
|
|
6317
6647
|
disabled?: boolean;
|
|
6318
6648
|
/**
|
|
6319
6649
|
* The coarse steps offered, in seconds, smallest first. Rendered as a minus
|
|
@@ -6352,7 +6682,7 @@ interface MissionDateParts {
|
|
|
6352
6682
|
*/
|
|
6353
6683
|
declare function utOfParts(parts: MissionDateParts): number;
|
|
6354
6684
|
/**
|
|
6355
|
-
* A universal time
|
|
6685
|
+
* A universal time entered as a calendar instant: year, day, hour, minute,
|
|
6356
6686
|
* second, each its own field, plus coarse steps. The fields are for an instant
|
|
6357
6687
|
* you know; the steps are the tuning loop for one you are looking for.
|
|
6358
6688
|
*
|
|
@@ -6360,8 +6690,9 @@ declare function utOfParts(parts: MissionDateParts): number;
|
|
|
6360
6690
|
* what the game's own clock calls day 300. Edits round to the second, so the
|
|
6361
6691
|
* field never shows one instant and holds another.
|
|
6362
6692
|
*
|
|
6363
|
-
* An instant nobody stated is not the epoch
|
|
6364
|
-
*
|
|
6693
|
+
* An instant nobody stated is not the epoch (UT 0, the start of the game's
|
|
6694
|
+
* calendar): `null` comes up empty with {@link NULL_DISPLAY}, the dash that
|
|
6695
|
+
* stands for no value, and nothing is committed until a component is typed.
|
|
6365
6696
|
*
|
|
6366
6697
|
* {@link UnitInput} with a `ut` unit renders this for you and emits a `Value`;
|
|
6367
6698
|
* use this directly when you hold the instant as a bare number of seconds.
|
|
@@ -6370,13 +6701,24 @@ declare function utOfParts(parts: MissionDateParts): number;
|
|
|
6370
6701
|
*/
|
|
6371
6702
|
declare function MissionDateField({ value, onChange, label, disabled, steps, }: MissionDateFieldProps): react_jsx_runtime.JSX.Element;
|
|
6372
6703
|
|
|
6704
|
+
/**
|
|
6705
|
+
* What {@link useModal}'s `open` takes beside the content.
|
|
6706
|
+
*
|
|
6707
|
+
* @category Modal
|
|
6708
|
+
*/
|
|
6373
6709
|
interface ModalOpenOptions {
|
|
6710
|
+
/** The dialog's visible heading, which also names it for assistive technology. Without one, give `aria-label`. */
|
|
6374
6711
|
title?: string;
|
|
6375
6712
|
/** Names a dialog that has no visible `title`. Ignored when `title` is given. */
|
|
6376
|
-
|
|
6713
|
+
"aria-label"?: string;
|
|
6377
6714
|
/** CSS length for the dialog max-width. Defaults to 560px. */
|
|
6378
6715
|
width?: string;
|
|
6379
6716
|
}
|
|
6717
|
+
/**
|
|
6718
|
+
* What {@link useModal} returns: open and close dialogs.
|
|
6719
|
+
*
|
|
6720
|
+
* @category Modal
|
|
6721
|
+
*/
|
|
6380
6722
|
interface ModalContextValue {
|
|
6381
6723
|
/** Opens a dialog showing `content` on top of any already open, and returns its id. */
|
|
6382
6724
|
open: (content: ReactNode, options?: ModalOpenOptions) => string;
|
|
@@ -6386,8 +6728,8 @@ interface ModalContextValue {
|
|
|
6386
6728
|
/**
|
|
6387
6729
|
* Holds the stack of open modal dialogs and renders them into `document.body`.
|
|
6388
6730
|
* The dashboard mounts one at its root, so a widget on the dashboard calls
|
|
6389
|
-
* {@link useModal} without mounting its own. Anywhere else, such as a test
|
|
6390
|
-
* a
|
|
6731
|
+
* {@link useModal} without mounting its own. Anywhere else, such as a test that
|
|
6732
|
+
* renders a widget with a config form, wrap the tree in one: `useModal` needs it above it.
|
|
6391
6733
|
*
|
|
6392
6734
|
* Each dialog has a title bar with a close button, a scrolling body, and an
|
|
6393
6735
|
* optional sticky footer set with {@link useModalSaveBar} or
|
|
@@ -6407,7 +6749,7 @@ declare function ModalProvider({ children }: Readonly<{
|
|
|
6407
6749
|
/**
|
|
6408
6750
|
* Opens and closes modal dialogs. `open(content, options)` pushes a dialog
|
|
6409
6751
|
* showing `content` and returns its id; `options` takes a `title`, an
|
|
6410
|
-
* `
|
|
6752
|
+
* `aria-label` for a dialog with no visible title, and a CSS `width` for the
|
|
6411
6753
|
* dialog's max-width (560px by default). `close(id)` removes that dialog.
|
|
6412
6754
|
* Throws when called outside a {@link ModalProvider}.
|
|
6413
6755
|
*
|
|
@@ -6441,6 +6783,7 @@ interface ModalChromeValue {
|
|
|
6441
6783
|
* a modal. Content uses {@link useModalChrome} or {@link useModalSaveBar}
|
|
6442
6784
|
* rather than reading it.
|
|
6443
6785
|
*
|
|
6786
|
+
* @intent Published so content that calls useModalChrome can be rendered under a stand-in modal in a test.
|
|
6444
6787
|
* @category Modal
|
|
6445
6788
|
*/
|
|
6446
6789
|
declare const ModalChromeContext: react.Context<ModalChromeValue | null>;
|
|
@@ -6493,6 +6836,10 @@ interface ModalSaveBarOptions<Draft> {
|
|
|
6493
6836
|
* from both its value when the modal opened and `saved`. The hook renders
|
|
6494
6837
|
* nothing where it is called and does nothing outside a modal.
|
|
6495
6838
|
*
|
|
6839
|
+
* The form is a widget's `configComponent`: register it beside the widget with
|
|
6840
|
+
* `registerComponent({ ..., configComponent: NavballConfigForm })`, and the
|
|
6841
|
+
* dashboard opens it in a modal with the saved `config` and an `onSave`.
|
|
6842
|
+
*
|
|
6496
6843
|
* @example
|
|
6497
6844
|
* ```tsx
|
|
6498
6845
|
* import { useMemo, useState } from "react";
|
|
@@ -6533,6 +6880,7 @@ interface ModelledQuantityAlongsideProps<UnitSymbol extends string> {
|
|
|
6533
6880
|
observed: Value<UnitSymbol> | null | undefined;
|
|
6534
6881
|
/** The model's figure; nothing is drawn without one. */
|
|
6535
6882
|
modelled: Value<UnitSymbol> | null | undefined;
|
|
6883
|
+
/** Absent in this form: a `Value` pair is written by {@link Unit}, so no writer is given. */
|
|
6536
6884
|
write?: undefined;
|
|
6537
6885
|
}
|
|
6538
6886
|
/**
|
|
@@ -6587,8 +6935,8 @@ interface NoticeProps extends BlockProps {
|
|
|
6587
6935
|
tone?: Tone;
|
|
6588
6936
|
/**
|
|
6589
6937
|
* Interrupt rather than announce politely: the banner becomes
|
|
6590
|
-
* `role="alert"` with `aria-live="assertive"`. Keep it for
|
|
6591
|
-
* nothing softer.
|
|
6938
|
+
* `role="alert"` with `aria-live="assertive"`. Keep it for a state that
|
|
6939
|
+
* must interrupt, such as a mission abort, and nothing softer.
|
|
6592
6940
|
*/
|
|
6593
6941
|
assertive?: boolean;
|
|
6594
6942
|
/** What the banner says. */
|
|
@@ -6597,7 +6945,9 @@ interface NoticeProps extends BlockProps {
|
|
|
6597
6945
|
/**
|
|
6598
6946
|
* A banner stating something about the widget rather than a record inside it,
|
|
6599
6947
|
* such as what is limiting the ship. It takes {@link Block}'s anatomy (title,
|
|
6600
|
-
* asides, footer) on a sunken surface bordered in its tone.
|
|
6948
|
+
* asides, footer) on a sunken surface bordered in its tone. Most banners need
|
|
6949
|
+
* only `title`, `tone` and their text; the other anatomy props are for a banner
|
|
6950
|
+
* that also carries a figure beside it or a footer of actions.
|
|
6601
6951
|
*
|
|
6602
6952
|
* Unlike a toned {@link Card}, a notice is announced to screen readers. By
|
|
6603
6953
|
* default it is `role="note"` and its text is read out politely when it
|
|
@@ -6674,7 +7024,9 @@ declare function PanelDelayRail({ tiny }?: {
|
|
|
6674
7024
|
* @category Panel
|
|
6675
7025
|
*/
|
|
6676
7026
|
type PanelInactiveReason = string | {
|
|
7027
|
+
/** Why the panel is inactive. */
|
|
6677
7028
|
reason: string;
|
|
7029
|
+
/** What would make it active, drawn under the reason. */
|
|
6678
7030
|
hint?: string;
|
|
6679
7031
|
};
|
|
6680
7032
|
|
|
@@ -6716,12 +7068,14 @@ interface SectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
|
6716
7068
|
* Take the panel body's leftover height rather than the section's natural
|
|
6717
7069
|
* one, for a section that is a drawing (a map, a plot, a dial).
|
|
6718
7070
|
*
|
|
6719
|
-
* A filling section is lifted out of the section grid
|
|
6720
|
-
* panel
|
|
6721
|
-
*
|
|
6722
|
-
*
|
|
7071
|
+
* A filling section is lifted out of the section grid (the columns a wide
|
|
7072
|
+
* panel lays its sections out in), so it always spans the panel's full
|
|
7073
|
+
* width; ordinary sections around it still form columns. Two filling sections
|
|
7074
|
+
* each keep their content height and share the leftover equally. Ignored
|
|
7075
|
+
* when the panel's `fitToSize` prop is set, and inert outside a panel body.
|
|
6723
7076
|
*/
|
|
6724
7077
|
fill?: boolean;
|
|
7078
|
+
/** The section's content, under its title. */
|
|
6725
7079
|
children?: ReactNode;
|
|
6726
7080
|
}
|
|
6727
7081
|
/**
|
|
@@ -6731,8 +7085,8 @@ interface SectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
|
6731
7085
|
* leftover height.
|
|
6732
7086
|
*
|
|
6733
7087
|
* A section is also a {@link LockScope}: when anything inside it reads a Topic
|
|
6734
|
-
* or uses a command this save has not unlocked
|
|
6735
|
-
* and shows what is missing in place of its content.
|
|
7088
|
+
* or uses a command this save has not unlocked (see {@link LockScope}), the
|
|
7089
|
+
* section keeps its title and shows what is missing in place of its content.
|
|
6736
7090
|
*
|
|
6737
7091
|
* @category Layout
|
|
6738
7092
|
*/
|
|
@@ -6745,8 +7099,10 @@ declare function Section({ children, gap, title, titleAs, full, fill, ...rest }:
|
|
|
6745
7099
|
* @category Layout
|
|
6746
7100
|
*/
|
|
6747
7101
|
declare const SectionTitle: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$rule"> & {
|
|
7102
|
+
/** Draws a hairline under the heading. */
|
|
6748
7103
|
$rule?: boolean;
|
|
6749
7104
|
}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$rule"> & {
|
|
7105
|
+
/** Draws a hairline under the heading. */
|
|
6750
7106
|
$rule?: boolean;
|
|
6751
7107
|
}, never>>> & string;
|
|
6752
7108
|
|
|
@@ -6824,26 +7180,6 @@ declare const ScrollArea: react.ForwardRefExoticComponent<Omit<react.DetailedHTM
|
|
|
6824
7180
|
* @category Panel
|
|
6825
7181
|
*/
|
|
6826
7182
|
type PanelSidebarSide = "start" | "end";
|
|
6827
|
-
/**
|
|
6828
|
-
* Props for the grid that holds a panel's body and sidebar. {@link Panel}
|
|
6829
|
-
* draws this grid itself when `panelSidebar` is set, taking `sidebarSide` and
|
|
6830
|
-
* `sidebarSize` as `side` and `size`.
|
|
6831
|
-
*
|
|
6832
|
-
* @category Panel
|
|
6833
|
-
*/
|
|
6834
|
-
interface PanelSplitProps extends ComponentPropsWithoutRef<"div"> {
|
|
6835
|
-
/** Which edge the sidebar sits against. See {@link PanelSidebarSide}. Defaults to `end`. */
|
|
6836
|
-
side?: PanelSidebarSide;
|
|
6837
|
-
/**
|
|
6838
|
-
* Size of the sidebar track: a width on the inline axis, a height on the
|
|
6839
|
-
* block axis. Defaults to `14rem`, and to a fixed five grid rows under the
|
|
6840
|
-
* body (capped at 45% of a very short tile), so the body takes the rest and
|
|
6841
|
-
* content never grows the sidebar. Overflow scrolls inside it.
|
|
6842
|
-
*/
|
|
6843
|
-
size?: string;
|
|
6844
|
-
/** Gives the sidebar a top inset matching the delay rail's band, which the body track holds inside its scroller. */
|
|
6845
|
-
railBand?: boolean;
|
|
6846
|
-
}
|
|
6847
7183
|
/**
|
|
6848
7184
|
* Secondary content beside or below the body: an almanac for the diagram, a
|
|
6849
7185
|
* legend for the plot, a detail pane for the selected row.
|
|
@@ -6901,8 +7237,8 @@ interface PanelProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
6901
7237
|
sections?: Exclude<ReactNode, boolean> | readonly ReactNode[];
|
|
6902
7238
|
/**
|
|
6903
7239
|
* Narrowest a section column may be before the panel stops offering a
|
|
6904
|
-
* second one. Defaults to `13rem
|
|
6905
|
-
* 470px wide.
|
|
7240
|
+
* second one. Defaults to `13rem` (208px at the default font size), which gives two
|
|
7241
|
+
* columns in a panel about 470px wide.
|
|
6906
7242
|
*
|
|
6907
7243
|
* Raise it for a widget whose sections carry long rows and read badly at the
|
|
6908
7244
|
* default width; set it to `100%` for one that should never columnise at all.
|
|
@@ -6934,8 +7270,11 @@ interface PanelProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
6934
7270
|
* announced when it changes. `live` shows nothing, and `"none"` suppresses
|
|
6935
7271
|
* the badge.
|
|
6936
7272
|
*
|
|
6937
|
-
* The dashboard sets the blackout grades
|
|
6938
|
-
*
|
|
7273
|
+
* The dashboard sets the blackout grades itself, from the widget's declared
|
|
7274
|
+
* channels (the Topics it reads). A blackout is a stretch when the craft's
|
|
7275
|
+
* signal cannot reach the command centre: the last value sent before it is
|
|
7276
|
+
* `last-before-blackout`, and a value the craft sent once contact came back
|
|
7277
|
+
* is `recorded`. The grades are listed on {@link StreamStatusValue}. Any
|
|
6939
7278
|
* other grade shows only when set here, so set it for a panel that reads one
|
|
6940
7279
|
* specific Topic. It is merged, worst first, with the dashboard's status and
|
|
6941
7280
|
* any badge drawn with `report`.
|
|
@@ -7134,7 +7473,8 @@ declare function PanelRoot(props: PanelProps): ReactElement;
|
|
|
7134
7473
|
* a widget can compose a variant by hand from them:
|
|
7135
7474
|
*
|
|
7136
7475
|
* - `Panel.Container`: the bordered frame
|
|
7137
|
-
* - `Panel.Context`: links the body's scroller to the glow
|
|
7476
|
+
* - `Panel.Context`: the provider that links the body's scroller to the glow;
|
|
7477
|
+
* take no props but `children`
|
|
7138
7478
|
* - `Panel.Delay`: the delay rail above the header
|
|
7139
7479
|
* - `Panel.Header`: the title and its aside on one row, collapsing the aside
|
|
7140
7480
|
* to status dots when they no longer fit
|
|
@@ -7185,6 +7525,9 @@ declare function PanelRoot(props: PanelProps): ReactElement;
|
|
|
7185
7525
|
* } from "@ksp-gonogo/sitrep-sdk";
|
|
7186
7526
|
* import { Section, Text, Unit } from "@ksp-gonogo/ui-kit";
|
|
7187
7527
|
*
|
|
7528
|
+
* // In a real Uplink this block is in `src/topics.ts`, with the payload type
|
|
7529
|
+
* // `uplink-tools codegen` writes from the contract; it is spelled out here so
|
|
7530
|
+
* // the example stands alone.
|
|
7188
7531
|
* declare module "@ksp-gonogo/sitrep-sdk" {
|
|
7189
7532
|
* interface TopicPayloadMap {
|
|
7190
7533
|
* "example.heartbeat": { ut: Value<"ut"> };
|
|
@@ -7195,15 +7538,17 @@ declare function PanelRoot(props: PanelProps): ReactElement;
|
|
|
7195
7538
|
* id: "example",
|
|
7196
7539
|
* version: "0.0.1",
|
|
7197
7540
|
* name: "Example",
|
|
7541
|
+
* description: "Shows an example section in a widget panel.",
|
|
7198
7542
|
* });
|
|
7199
7543
|
*
|
|
7200
7544
|
* function CadenceSection() {
|
|
7201
7545
|
* const heartbeat = useTelemetry("example.heartbeat");
|
|
7202
|
-
*
|
|
7546
|
+
* // A held heartbeat is still drawn: `Unit` marks the figure as held.
|
|
7547
|
+
* if (heartbeat.state !== "observed" && heartbeat.state !== "held") return null;
|
|
7203
7548
|
* return (
|
|
7204
7549
|
* <Section title="Example">
|
|
7205
7550
|
* <Text>
|
|
7206
|
-
* Last beat at UT <Unit value={heartbeat.
|
|
7551
|
+
* Last beat at UT <Unit value={heartbeat.ut} />
|
|
7207
7552
|
* </Text>
|
|
7208
7553
|
* </Section>
|
|
7209
7554
|
* );
|
|
@@ -7221,10 +7566,20 @@ declare function PanelRoot(props: PanelProps): ReactElement;
|
|
|
7221
7566
|
* id: "cadence-badge",
|
|
7222
7567
|
* contributes: "space-center-status.badges",
|
|
7223
7568
|
* deps: ["example.heartbeat"],
|
|
7224
|
-
*
|
|
7225
|
-
*
|
|
7226
|
-
*
|
|
7227
|
-
*
|
|
7569
|
+
* // A held heartbeat still draws the badge, carrying its reading so the panel shows it as held.
|
|
7570
|
+
* compute: (topics) => {
|
|
7571
|
+
* const heartbeat = topics["example.heartbeat"];
|
|
7572
|
+
* return heartbeat.state === "observed" || heartbeat.state === "held"
|
|
7573
|
+
* ? [
|
|
7574
|
+
* {
|
|
7575
|
+
* id: "cadence",
|
|
7576
|
+
* label: "Publishing",
|
|
7577
|
+
* tone: "info" as const,
|
|
7578
|
+
* held: heartbeat,
|
|
7579
|
+
* },
|
|
7580
|
+
* ]
|
|
7581
|
+
* : null;
|
|
7582
|
+
* },
|
|
7228
7583
|
* });
|
|
7229
7584
|
* ```
|
|
7230
7585
|
*
|
|
@@ -7255,13 +7610,142 @@ declare const Panel: typeof PanelRoot & {
|
|
|
7255
7610
|
Sidebar: typeof PanelSidebar;
|
|
7256
7611
|
};
|
|
7257
7612
|
|
|
7613
|
+
/**
|
|
7614
|
+
* One line of a {@link PlotCrosshair} readout.
|
|
7615
|
+
*
|
|
7616
|
+
* @category LineGraph
|
|
7617
|
+
*/
|
|
7618
|
+
interface PlotCrosshairRow {
|
|
7619
|
+
/** Identifies the row. */
|
|
7620
|
+
id: string;
|
|
7621
|
+
/** What the row reads, such as the trace's name. */
|
|
7622
|
+
label: string;
|
|
7623
|
+
/** The colour of the thing the row reads, so the row ties back to its trace. */
|
|
7624
|
+
color: string;
|
|
7625
|
+
/** The reading, unit included. `null` is an absent sample and is drawn as the null token, never as a number. */
|
|
7626
|
+
value: string | null;
|
|
7627
|
+
/** How current the reading is ("measured", "modelled"), written after the value when there is room. */
|
|
7628
|
+
currency?: string;
|
|
7629
|
+
/** A model's figure: drawn with the kit's modelled mark. */
|
|
7630
|
+
modelled?: boolean;
|
|
7631
|
+
/** Dropped from the compact card of a small plot, where only the figures on the traces fit. */
|
|
7632
|
+
detail?: boolean;
|
|
7633
|
+
/** Where the row's marker stands on the plot, in pixels. Omitted for a row with no point on the plot, such as a limit. */
|
|
7634
|
+
y?: number | null;
|
|
7635
|
+
}
|
|
7636
|
+
/**
|
|
7637
|
+
* What a {@link PlotCrosshair} draws: where the line stands, the plot it
|
|
7638
|
+
* spans, the instant it names and the rows it reads.
|
|
7639
|
+
*
|
|
7640
|
+
* @category LineGraph
|
|
7641
|
+
*/
|
|
7642
|
+
interface PlotCrosshairProps {
|
|
7643
|
+
/** Where the line stands, in pixels. */
|
|
7644
|
+
x: number;
|
|
7645
|
+
/** The plot's box, in pixels. The line spans it and the readout stays inside it. */
|
|
7646
|
+
plot: {
|
|
7647
|
+
x0: number;
|
|
7648
|
+
y0: number;
|
|
7649
|
+
x1: number;
|
|
7650
|
+
y1: number;
|
|
7651
|
+
};
|
|
7652
|
+
/** Names the instant, written once above the rows. */
|
|
7653
|
+
heading: string;
|
|
7654
|
+
/** One line per trace or limit the crosshair reads at the instant. */
|
|
7655
|
+
rows: readonly PlotCrosshairRow[];
|
|
7656
|
+
/**
|
|
7657
|
+
* A column outside the plot where the readout stands, when the chart has
|
|
7658
|
+
* given the card one (see `placePlotReadouts`). The card then sits at the
|
|
7659
|
+
* column's top and names the instant even when compact, and nothing it draws
|
|
7660
|
+
* covers the plot. Omitted, the card is drawn over the plot where it covers no dot.
|
|
7661
|
+
*/
|
|
7662
|
+
column?: {
|
|
7663
|
+
x0: number;
|
|
7664
|
+
y0: number;
|
|
7665
|
+
x1: number;
|
|
7666
|
+
y1: number;
|
|
7667
|
+
};
|
|
7668
|
+
/** The traces as drawn, one pixel point per sample with a non-finite `cy` for a hole. Over the plot, the card prefers a corner none of them crosses. */
|
|
7669
|
+
traces?: ReadonlyArray<{
|
|
7670
|
+
cx: readonly number[];
|
|
7671
|
+
cy: readonly number[];
|
|
7672
|
+
}>;
|
|
7673
|
+
}
|
|
7674
|
+
/**
|
|
7675
|
+
* Whether {@link PlotCrosshair} draws its readout card for these props: the
|
|
7676
|
+
* card fits, and over the plot there is a corner that covers no dot. A chart
|
|
7677
|
+
* that drew a legend in the same place hides it while the card is up, since
|
|
7678
|
+
* each row names its series in its colour.
|
|
7679
|
+
*
|
|
7680
|
+
* @category LineGraph
|
|
7681
|
+
*/
|
|
7682
|
+
declare function plotCrosshairShowsCard(props: Pick<PlotCrosshairProps, "x" | "plot" | "heading" | "rows" | "column" | "traces">): boolean;
|
|
7683
|
+
/**
|
|
7684
|
+
* A crosshair for an SVG plot: a vertical line at an instant, a dot on each
|
|
7685
|
+
* trace where it is read, and a readout of every row's exact value.
|
|
7686
|
+
*
|
|
7687
|
+
* The readout is drawn over the plot at a fixed corner on whichever side of
|
|
7688
|
+
* the line has room, so moving the line never resizes or reflows the chart. A
|
|
7689
|
+
* plot too small for the full card gets a compact one: a swatch, as much of
|
|
7690
|
+
* the label as fits, and the value, so an absent row still says whose it is.
|
|
7691
|
+
* An absent reading is the null token. Place it as the last child of the
|
|
7692
|
+
* plot's `<svg>`; it takes no pointer events, so the plot keeps them.
|
|
7693
|
+
*
|
|
7694
|
+
* @category LineGraph
|
|
7695
|
+
*/
|
|
7696
|
+
declare function PlotCrosshair({ x, plot, heading, rows: allRows, column, }: PlotCrosshairProps): react_jsx_runtime.JSX.Element;
|
|
7697
|
+
|
|
7698
|
+
/**
|
|
7699
|
+
* What {@link placePlotReadouts} reads: the chart's measured size.
|
|
7700
|
+
*
|
|
7701
|
+
* @category LineGraph
|
|
7702
|
+
*/
|
|
7703
|
+
interface PlotReadoutSpace {
|
|
7704
|
+
/** Width of the whole chart, in CSS pixels. */
|
|
7705
|
+
width: number;
|
|
7706
|
+
/** Height of the whole chart, in CSS pixels. */
|
|
7707
|
+
height: number;
|
|
7708
|
+
/** Width the column's widest line needs to be read whole: a legend chip, a caption, a card row, in CSS pixels. */
|
|
7709
|
+
contentWidth: number;
|
|
7710
|
+
}
|
|
7711
|
+
/**
|
|
7712
|
+
* Where a chart's reading furniture stands: the crosshair card, the legend and
|
|
7713
|
+
* the limit or target captions.
|
|
7714
|
+
*
|
|
7715
|
+
* `beside` gives them a column to the right of the plot, so none covers a
|
|
7716
|
+
* trace or a dot. `overlay` keeps them inside the plot, drawn only where they
|
|
7717
|
+
* cover no data.
|
|
7718
|
+
*
|
|
7719
|
+
* @category LineGraph
|
|
7720
|
+
*/
|
|
7721
|
+
type PlotReadoutPlacement = {
|
|
7722
|
+
/** The card, legend and captions sit over the plot. */
|
|
7723
|
+
placement: "overlay";
|
|
7724
|
+
} | {
|
|
7725
|
+
/** The card, legend and captions sit in a column beside the plot. */
|
|
7726
|
+
placement: "beside";
|
|
7727
|
+
/** The column's width, in CSS px. */
|
|
7728
|
+
columnWidth: number;
|
|
7729
|
+
};
|
|
7730
|
+
/**
|
|
7731
|
+
* Where the kit puts a chart's card, legend and captions, decided from
|
|
7732
|
+
* measured space. A chart with room gives them a column beside the plot, as
|
|
7733
|
+
* wide as its widest line needs so nothing is cut; one that cannot spare that
|
|
7734
|
+
* width, or is smaller, keeps them over the plot.
|
|
7735
|
+
*
|
|
7736
|
+
* @category LineGraph
|
|
7737
|
+
*/
|
|
7738
|
+
declare function placePlotReadouts({ width, height, contentWidth, }: PlotReadoutSpace): PlotReadoutPlacement;
|
|
7739
|
+
|
|
7258
7740
|
/**
|
|
7259
7741
|
* One frame a {@link ReadFrameControl} can offer, and what an operator calls it.
|
|
7260
7742
|
*
|
|
7261
7743
|
* @category Form
|
|
7262
7744
|
*/
|
|
7263
7745
|
interface ReadFrameOption {
|
|
7746
|
+
/** The frame this option selects. */
|
|
7264
7747
|
choice: ReadFrameChoice;
|
|
7748
|
+
/** The option's text in the list, as the operator reads it. */
|
|
7265
7749
|
label: string;
|
|
7266
7750
|
}
|
|
7267
7751
|
/**
|
|
@@ -7272,16 +7756,23 @@ interface ReadFrameOption {
|
|
|
7272
7756
|
interface ReadFrameControlProps {
|
|
7273
7757
|
/** Put on the `<select>`, so `label` (as `htmlFor`) names it. */
|
|
7274
7758
|
id: string;
|
|
7759
|
+
/** The control's visible label, such as "Frame". */
|
|
7275
7760
|
label: string;
|
|
7276
7761
|
/** The widget's current read frame. Shown as a blank, disabled placeholder when it matches nothing on `options`, e.g. before the widget's catalogue has arrived. */
|
|
7277
7762
|
value: ReadFrameChoice;
|
|
7763
|
+
/** The frames offered, in the order listed. */
|
|
7278
7764
|
options: readonly ReadFrameOption[];
|
|
7765
|
+
/** Called with the frame the operator picked. */
|
|
7279
7766
|
onChange: (choice: ReadFrameChoice) => void;
|
|
7767
|
+
/** A line of help under the control. Omit for none. */
|
|
7280
7768
|
hint?: string;
|
|
7281
7769
|
}
|
|
7282
7770
|
/**
|
|
7283
7771
|
* The control a frame-dependent widget picks its read frame with: a labelled,
|
|
7284
|
-
* keyboard-operable `<select>` over `options`, with an optional hint below.
|
|
7772
|
+
* keyboard-operable `<select>` over `options`, with an optional hint below. A
|
|
7773
|
+
* read frame is the frame of reference a widget draws positions in, such as
|
|
7774
|
+
* centred on a body; it changes only the drawing. The Control Frame is the
|
|
7775
|
+
* frame the game itself is set to, reported on the `system.frame` Topic.
|
|
7285
7776
|
* The selected option is found by frame equality with `value`
|
|
7286
7777
|
* (`readFrameChoicesEqual` from `@ksp-gonogo/sitrep-sdk/frames`), so options
|
|
7287
7778
|
* need no ids of their own.
|
|
@@ -7301,7 +7792,8 @@ declare function ReadFrameControl({ id, label, value, options, onChange, hint, }
|
|
|
7301
7792
|
* A quantity, or the whole `Reading` it arrived in, goes through {@link Unit},
|
|
7302
7793
|
* so a held reading keeps its held mark. Not a bare number, which has lost the
|
|
7303
7794
|
* unit that says how to write it: hand over `value("m", 1)`,
|
|
7304
|
-
* `value("count", 3)`, or `value("1", x)` for a dimensionless reading
|
|
7795
|
+
* `value("count", 3)`, or `value("1", x)` for a dimensionless reading (`"1"`
|
|
7796
|
+
* is the unit of a plain ratio or factor).
|
|
7305
7797
|
*
|
|
7306
7798
|
* @category Form
|
|
7307
7799
|
*/
|
|
@@ -7316,7 +7808,9 @@ interface ReadOnlyFieldProps {
|
|
|
7316
7808
|
label: ReactNode;
|
|
7317
7809
|
/** Why it matters, or where it comes from. Announced with the label. */
|
|
7318
7810
|
description?: ReactNode;
|
|
7811
|
+
/** The value shown. See {@link ReadOnlyFieldValue} for what it can be. */
|
|
7319
7812
|
value: ReadOnlyFieldValue;
|
|
7813
|
+
/** A class for the outer element, so a styled-component can extend it. */
|
|
7320
7814
|
className?: string;
|
|
7321
7815
|
}
|
|
7322
7816
|
/**
|
|
@@ -7337,11 +7831,27 @@ declare function ReadOnlyField({ label, description, value, className, }: ReadOn
|
|
|
7337
7831
|
* @category Readout
|
|
7338
7832
|
*/
|
|
7339
7833
|
type ReadoutSize = "hero" | "inline";
|
|
7834
|
+
/**
|
|
7835
|
+
* Props for {@link Readout}. Any other `div` attribute passes through.
|
|
7836
|
+
*
|
|
7837
|
+
* @category Readout
|
|
7838
|
+
*/
|
|
7839
|
+
interface ReadoutProps extends ComponentPropsWithoutRef<"div"> {
|
|
7840
|
+
/** Where it sits: `hero` fills the remaining panel space, `inline` sits beside other content. Defaults to `inline`. */
|
|
7841
|
+
size?: ReadoutSize;
|
|
7842
|
+
/**
|
|
7843
|
+
* Colours the figure with a {@link Tone}: `go`, `caution`, `warn` or `nogo`
|
|
7844
|
+
* for a state from best to worst, `offline` for data that is gone, `info` for
|
|
7845
|
+
* a note and `neutral` for a figure with no verdict. Defaults to `neutral`.
|
|
7846
|
+
* Set it from the state the figure reports, never for decoration.
|
|
7847
|
+
*/
|
|
7848
|
+
tone?: Tone;
|
|
7849
|
+
}
|
|
7340
7850
|
/**
|
|
7341
7851
|
* The display-tier figure: bold, tracked, coloured by tone.
|
|
7342
7852
|
*
|
|
7343
|
-
* `size="hero"` is the dominant value of a widget's tiny form (
|
|
7344
|
-
*
|
|
7853
|
+
* `size="hero"` is the dominant value of a widget's tiny form (see
|
|
7854
|
+
* {@link TinyEssentials}; ΔV, time to impact and warp rate are examples): it fills the remaining panel space and centres. The
|
|
7345
7855
|
* default `size="inline"` is the same treatment smaller, sitting beside other
|
|
7346
7856
|
* content.
|
|
7347
7857
|
*
|
|
@@ -7352,15 +7862,11 @@ type ReadoutSize = "hero" | "inline";
|
|
|
7352
7862
|
* Figures that stand on their own: the bold display readout, a labelled stat, a
|
|
7353
7863
|
* data line, and the stats contributed to a widget.
|
|
7354
7864
|
*/
|
|
7355
|
-
declare function Readout({ size, tone, ...rest }:
|
|
7356
|
-
/** Where it sits. Defaults to `inline`. */
|
|
7357
|
-
size?: ReadoutSize;
|
|
7358
|
-
/** Colour-codes the figure for state-driven widgets. Defaults to `neutral`. */
|
|
7359
|
-
tone?: Tone;
|
|
7360
|
-
}): react_jsx_runtime.JSX.Element;
|
|
7865
|
+
declare function Readout({ size, tone, ...rest }: ReadoutProps): react_jsx_runtime.JSX.Element;
|
|
7361
7866
|
/**
|
|
7362
7867
|
* Muted uppercase secondary line for a {@link Readout}
|
|
7363
|
-
* (e.g. a mode tag).
|
|
7868
|
+
* (e.g. a mode tag), placed inside it after the figure. It renders a `span` and
|
|
7869
|
+
* takes every prop that element does.
|
|
7364
7870
|
*
|
|
7365
7871
|
* @category Readout
|
|
7366
7872
|
*/
|
|
@@ -7403,6 +7909,7 @@ interface RowProps extends HTMLAttributes<HTMLElement> {
|
|
|
7403
7909
|
* one level of nesting.
|
|
7404
7910
|
*/
|
|
7405
7911
|
nested?: boolean;
|
|
7912
|
+
/** The row's content: its label and value, or whatever the row lays out. */
|
|
7406
7913
|
children?: ReactNode;
|
|
7407
7914
|
}
|
|
7408
7915
|
/**
|
|
@@ -7540,7 +8047,9 @@ declare function resourceColor(name: string): string;
|
|
|
7540
8047
|
* @category Form
|
|
7541
8048
|
*/
|
|
7542
8049
|
interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
|
|
8050
|
+
/** The text in the box. */
|
|
7543
8051
|
value: string;
|
|
8052
|
+
/** Called with the new text on each keystroke, and with `""` when cleared. */
|
|
7544
8053
|
onChange: (next: string) => void;
|
|
7545
8054
|
/** The clear control's accessible name. Defaults to "Clear search". */
|
|
7546
8055
|
clearLabel?: string;
|
|
@@ -7595,18 +8104,34 @@ interface SelectableRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
|
|
|
7595
8104
|
*
|
|
7596
8105
|
* @example
|
|
7597
8106
|
* ```tsx
|
|
7598
|
-
*
|
|
7599
|
-
*
|
|
7600
|
-
*
|
|
7601
|
-
*
|
|
7602
|
-
*
|
|
7603
|
-
*
|
|
7604
|
-
*
|
|
7605
|
-
*
|
|
7606
|
-
*
|
|
7607
|
-
*
|
|
7608
|
-
*
|
|
7609
|
-
*
|
|
8107
|
+
* import { SelectableRow, Stack, Text } from "@ksp-gonogo/ui-kit";
|
|
8108
|
+
*
|
|
8109
|
+
* interface Servo {
|
|
8110
|
+
* id: string;
|
|
8111
|
+
* name: string;
|
|
8112
|
+
* group: string;
|
|
8113
|
+
* }
|
|
8114
|
+
*
|
|
8115
|
+
* function ServoList(props: {
|
|
8116
|
+
* servos: readonly Servo[];
|
|
8117
|
+
* selectedId: string | null;
|
|
8118
|
+
* select: (id: string) => void;
|
|
8119
|
+
* }) {
|
|
8120
|
+
* return (
|
|
8121
|
+
* <Stack gap="rows">
|
|
8122
|
+
* {props.servos.map((s) => (
|
|
8123
|
+
* <SelectableRow
|
|
8124
|
+
* key={s.id}
|
|
8125
|
+
* selected={s.id === props.selectedId}
|
|
8126
|
+
* onClick={() => props.select(s.id)}
|
|
8127
|
+
* >
|
|
8128
|
+
* <span>{s.name}</span>
|
|
8129
|
+
* <Text level="muted" size="xs">{s.group}</Text>
|
|
8130
|
+
* </SelectableRow>
|
|
8131
|
+
* ))}
|
|
8132
|
+
* </Stack>
|
|
8133
|
+
* );
|
|
8134
|
+
* }
|
|
7610
8135
|
* ```
|
|
7611
8136
|
*
|
|
7612
8137
|
* @category FilterList
|
|
@@ -7643,7 +8168,7 @@ interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color" | "
|
|
|
7643
8168
|
/** Active arc colour. Defaults to the accent foreground. */
|
|
7644
8169
|
color?: string;
|
|
7645
8170
|
/** Accessible name for screen readers. Defaults to "Loading". */
|
|
7646
|
-
|
|
8171
|
+
"aria-label"?: string;
|
|
7647
8172
|
}
|
|
7648
8173
|
/**
|
|
7649
8174
|
* A small inline pending indicator: a ring with a coloured arc, sized to sit
|
|
@@ -7653,7 +8178,7 @@ interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color" | "
|
|
|
7653
8178
|
*
|
|
7654
8179
|
* @category EmptyState
|
|
7655
8180
|
*/
|
|
7656
|
-
declare function Spinner({ size, thickness, color, ariaLabel, ...rest }: Readonly<SpinnerProps>): react_jsx_runtime.JSX.Element;
|
|
8181
|
+
declare function Spinner({ size, thickness, color, "aria-label": ariaLabel, ...rest }: Readonly<SpinnerProps>): react_jsx_runtime.JSX.Element;
|
|
7657
8182
|
|
|
7658
8183
|
/**
|
|
7659
8184
|
* Props for {@link Stack}. Any other `div` attribute passes through.
|
|
@@ -7676,12 +8201,15 @@ interface StackProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
7676
8201
|
* rather than growing the whole column.
|
|
7677
8202
|
*/
|
|
7678
8203
|
fill?: boolean;
|
|
8204
|
+
/** The items, laid out top to bottom. */
|
|
7679
8205
|
children?: ReactNode;
|
|
7680
8206
|
}
|
|
7681
8207
|
/**
|
|
7682
8208
|
* A vertical flex column, the most common container shape in a widget body.
|
|
7683
8209
|
* Children sit one above the other with the container's related gap between
|
|
7684
|
-
* them unless `gap` names another.
|
|
8210
|
+
* them unless `gap` names another. A row that spans the container is a
|
|
8211
|
+
* {@link Cluster}; a compact run of badges or buttons that sits within a line is
|
|
8212
|
+
* an {@link Inline}.
|
|
7685
8213
|
*
|
|
7686
8214
|
* The layout primitives compose: a {@link Stack} of sections, a
|
|
7687
8215
|
* {@link Cluster} for a label beside its controls, a {@link Grid} for a
|
|
@@ -7743,11 +8271,11 @@ interface StatProps extends Omit<HTMLAttributes<HTMLDListElement>, "title"> {
|
|
|
7743
8271
|
tone?: Tone;
|
|
7744
8272
|
}
|
|
7745
8273
|
/**
|
|
7746
|
-
* One cell of a
|
|
8274
|
+
* One cell of a stat strip, the row of key figures a widget keeps at the top of its body: a label, a figure, and at most one line under
|
|
7747
8275
|
* it. A `<dl>` per cell, so the label is associated with the figure
|
|
7748
8276
|
* programmatically and a cell stays valid wherever it is dropped.
|
|
7749
8277
|
*
|
|
7750
|
-
*
|
|
8278
|
+
* The strip is a {@link Grid} with `minColWidth="7rem" fit align="stretch"
|
|
7751
8279
|
* gap="related-compact"`, so every stat gets the same room and the row reflows
|
|
7752
8280
|
* to fewer columns as the tile narrows. The strip is not a live region: add
|
|
7753
8281
|
* `role="status"` yourself only when its figures change rarely, since figures
|
|
@@ -7787,7 +8315,8 @@ interface StatContributionsProps {
|
|
|
7787
8315
|
* A fragment, not a wrapper: the cells land in the host's own `Grid` of stats
|
|
7788
8316
|
* as siblings of its built-in ones. Renders nothing when
|
|
7789
8317
|
* nothing is contributed, so a host can place it unconditionally. An entry's
|
|
7790
|
-
* quantity is drawn through {@link Unit}, else its text, else the null token
|
|
8318
|
+
* quantity is drawn through {@link Unit}, else its text, else the null token;
|
|
8319
|
+
* a held figure is drawn with the held mark either way.
|
|
7791
8320
|
*
|
|
7792
8321
|
* @example
|
|
7793
8322
|
* ```tsx
|
|
@@ -7877,15 +8406,14 @@ interface StepperProps<Option> {
|
|
|
7877
8406
|
"data-testid"?: string;
|
|
7878
8407
|
}
|
|
7879
8408
|
/**
|
|
7880
|
-
* A stepper over a
|
|
7881
|
-
* quality levels. For a free quantity with a unit use
|
|
7882
|
-
* one tuned by feel use {@link JogWheel}.
|
|
8409
|
+
* A stepper over a fixed, ordered set of options, such as eight step counts,
|
|
8410
|
+
* four tolerances or five quality levels. For a free quantity with a unit use
|
|
8411
|
+
* {@link UnitInput}; for one tuned by feel use {@link JogWheel}.
|
|
7883
8412
|
*
|
|
7884
|
-
* Rendered as the ARIA spinbutton pattern.
|
|
7885
|
-
*
|
|
7886
|
-
*
|
|
7887
|
-
*
|
|
7888
|
-
* ends.
|
|
8413
|
+
* Rendered as the ARIA spinbutton pattern. The members need not be evenly
|
|
8414
|
+
* spaced, so `aria-valuenow` carries the member's index and `aria-valuetext`
|
|
8415
|
+
* the formatted member, which is what gets announced. Up and right step
|
|
8416
|
+
* forward, down and left step back, Home and End go to the ends.
|
|
7889
8417
|
*
|
|
7890
8418
|
* @category Form
|
|
7891
8419
|
*/
|
|
@@ -7950,12 +8478,14 @@ interface SubjectHeadingProps {
|
|
|
7950
8478
|
*
|
|
7951
8479
|
* @example
|
|
7952
8480
|
* ```tsx
|
|
8481
|
+
* import { Badge, SubjectHeading, Text } from "@ksp-gonogo/ui-kit";
|
|
8482
|
+
*
|
|
7953
8483
|
* <SubjectHeading
|
|
7954
8484
|
* status={
|
|
7955
8485
|
* <Badge tone="go">Active</Badge>
|
|
7956
8486
|
* }
|
|
7957
8487
|
* >
|
|
7958
|
-
* <Text weight="semibold">
|
|
8488
|
+
* <Text weight="semibold">Kerbin Science Program</Text>
|
|
7959
8489
|
* </SubjectHeading>
|
|
7960
8490
|
* ```
|
|
7961
8491
|
*
|
|
@@ -7963,8 +8493,15 @@ interface SubjectHeadingProps {
|
|
|
7963
8493
|
*/
|
|
7964
8494
|
declare function SubjectHeading({ children, status, gap, align, }: Readonly<SubjectHeadingProps>): react_jsx_runtime.JSX.Element;
|
|
7965
8495
|
|
|
8496
|
+
/**
|
|
8497
|
+
* The props every {@link Switch} takes.
|
|
8498
|
+
*
|
|
8499
|
+
* @category Form
|
|
8500
|
+
*/
|
|
7966
8501
|
interface SwitchBaseProps {
|
|
8502
|
+
/** Whether the switch is on. The switch is controlled: it shows this value and changes only when the caller changes it. */
|
|
7967
8503
|
checked: boolean;
|
|
8504
|
+
/** Called with the new state when the operator flips the switch. */
|
|
7968
8505
|
onChange: (value: boolean) => void;
|
|
7969
8506
|
/** Renders dimmed and non-interactive; `onChange` never fires. For a toggle whose effective state is controlled elsewhere, such as a sub-setting inert while its parent setting is off. */
|
|
7970
8507
|
disabled?: boolean;
|
|
@@ -7980,16 +8517,19 @@ interface SwitchBaseProps {
|
|
|
7980
8517
|
* @category Form
|
|
7981
8518
|
*/
|
|
7982
8519
|
type SwitchProps = SwitchBaseProps & ({
|
|
8520
|
+
/** The visible name, drawn beside the track. Give this or `aria-label`, never both. */
|
|
7983
8521
|
label: string;
|
|
7984
8522
|
"aria-label"?: never;
|
|
7985
8523
|
} | {
|
|
7986
8524
|
label?: never;
|
|
8525
|
+
/** The accessible name, for a switch whose row already shows its label text. Give this or `label`, never both. */
|
|
7987
8526
|
"aria-label": string;
|
|
7988
8527
|
});
|
|
7989
8528
|
/**
|
|
7990
|
-
* An on/off toggle for
|
|
7991
|
-
*
|
|
7992
|
-
*
|
|
8529
|
+
* An on/off toggle for one setting, which takes effect as it is flipped; inside
|
|
8530
|
+
* a form with a save bar the change waits for Save like any other field. It is
|
|
8531
|
+
* a native checkbox drawn as a sliding track, keyboard-operable with Space and
|
|
8532
|
+
* with the focus ring drawn on the track.
|
|
7993
8533
|
*
|
|
7994
8534
|
* @category Form
|
|
7995
8535
|
*/
|
|
@@ -8179,7 +8719,8 @@ interface PanelStatusStore {
|
|
|
8179
8719
|
/**
|
|
8180
8720
|
* Creates one {@link PanelStatusStore} and provides it for as long as it is
|
|
8181
8721
|
* mounted, so the widget body and the tile's chrome share it. The dashboard
|
|
8182
|
-
* mounts one per tile
|
|
8722
|
+
* mounts one per tile, so a widget does not mount this itself; it is for a
|
|
8723
|
+
* test or a harness that renders a {@link Panel} outside the dashboard.
|
|
8183
8724
|
*
|
|
8184
8725
|
* @category Panel
|
|
8185
8726
|
*/
|
|
@@ -8188,6 +8729,8 @@ declare const PanelStatusStoreProvider: (props: {
|
|
|
8188
8729
|
}) => react.ReactNode;
|
|
8189
8730
|
/**
|
|
8190
8731
|
* The nearest {@link PanelStatusStore}, or `null` outside a dashboard tile.
|
|
8732
|
+
* {@link Badge}'s `report` and {@link Panel} read it for you, so a widget
|
|
8733
|
+
* rarely calls this directly.
|
|
8191
8734
|
*
|
|
8192
8735
|
* @category Panel
|
|
8193
8736
|
*/
|
|
@@ -8199,7 +8742,9 @@ declare const usePanelStatusStore: () => PanelStatusStore | null;
|
|
|
8199
8742
|
*
|
|
8200
8743
|
* - `"held"`: HELD
|
|
8201
8744
|
* - `"disconnected"`: OFFLINE
|
|
8202
|
-
* - `"last-before-blackout"`: BLACKOUT
|
|
8745
|
+
* - `"last-before-blackout"`: BLACKOUT, the last value sent before a known
|
|
8746
|
+
* loss of signal (a blackout is a stretch when the craft's signal cannot
|
|
8747
|
+
* reach the command centre)
|
|
8203
8748
|
* - `"recorded"`: RECORDED
|
|
8204
8749
|
* - `"loading"`: LOADING
|
|
8205
8750
|
* - `"no-game"`: NO GAME
|
|
@@ -8267,7 +8812,12 @@ declare function useStatusSummary(): StatusSummary | null;
|
|
|
8267
8812
|
* @category Tabs
|
|
8268
8813
|
*/
|
|
8269
8814
|
interface TabDescriptor {
|
|
8270
|
-
/**
|
|
8815
|
+
/**
|
|
8816
|
+
* Stable identity for the tab, the value `activeId` and `onChange` carry.
|
|
8817
|
+
* Falls back to `tab-` and the tab's position in the array (`tab-0`), which
|
|
8818
|
+
* moves if the tabs are reordered, so give every tab an `id` when the
|
|
8819
|
+
* selection is controlled.
|
|
8820
|
+
*/
|
|
8271
8821
|
id?: string;
|
|
8272
8822
|
/** The tab's name in the strip, and its panel's accessible name. */
|
|
8273
8823
|
label: string;
|
|
@@ -8318,27 +8868,29 @@ interface TabsProps {
|
|
|
8318
8868
|
*/
|
|
8319
8869
|
declare const TABS_PANEL_MIN_WIDTH = 240;
|
|
8320
8870
|
/**
|
|
8321
|
-
* True when a container `containerWidth` pixels wide fits `panelCount` panels side by side at {@link TABS_PANEL_MIN_WIDTH} each, with
|
|
8871
|
+
* True when a container `containerWidth` pixels wide fits `panelCount` panels side by side at {@link TABS_PANEL_MIN_WIDTH} each, with an 8px gap between neighbours: two panels need 2 × 240 + 8 = 488px. Always false for fewer than two panels.
|
|
8322
8872
|
*
|
|
8323
8873
|
* @category Tabs
|
|
8324
8874
|
*/
|
|
8325
8875
|
declare function shouldExpandTabs(containerWidth: number, panelCount: number): boolean;
|
|
8326
8876
|
/**
|
|
8327
|
-
* A tab strip with one panel shown below it, following the
|
|
8877
|
+
* A tab strip with one panel shown below it, following the
|
|
8878
|
+
* [WAI-ARIA Authoring Practices (APG) tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/):
|
|
8328
8879
|
* arrow keys move between tabs, Home and End jump to the ends, and disabled
|
|
8329
8880
|
* tabs are skipped. The strip tightens its spacing, then scrolls, when the
|
|
8330
8881
|
* labels do not fit. With `expandWhenRoomy`, a container wide enough for every
|
|
8331
8882
|
* enabled tab drops the strip and shows each panel side by side under its own
|
|
8332
|
-
* heading.
|
|
8883
|
+
* `h3` heading.
|
|
8333
8884
|
*
|
|
8334
8885
|
* @example
|
|
8335
8886
|
* ```tsx
|
|
8887
|
+
* // Side by side when the tile is wide enough for both, tabs otherwise.
|
|
8336
8888
|
* <Tabs
|
|
8337
8889
|
* aria-label="Vessel systems"
|
|
8890
|
+
* expandWhenRoomy
|
|
8338
8891
|
* tabs={[
|
|
8339
8892
|
* { id: "power", label: "Power", content: <PowerView /> },
|
|
8340
|
-
* { id: "comms", label: "Comms", content: <CommsView
|
|
8341
|
-
* { id: "target", label: "Target", content: <TargetView />, disabled: !hasTarget },
|
|
8893
|
+
* { id: "comms", label: "Comms", content: <CommsView /> },
|
|
8342
8894
|
* ]}
|
|
8343
8895
|
* />
|
|
8344
8896
|
* ```
|
|
@@ -8376,7 +8928,7 @@ interface TapeMarker<Unit extends string = string> {
|
|
|
8376
8928
|
color?: string;
|
|
8377
8929
|
/** Names the marker in the meter's spoken value. Never drawn, so a marker never competes with the scale for room. */
|
|
8378
8930
|
label?: string;
|
|
8379
|
-
/** The
|
|
8931
|
+
/** The low and high ends of an {@link UncertaintyBand} around `value`, drawn as the same two ticks a {@link Meter} draws. */
|
|
8380
8932
|
bounds?: {
|
|
8381
8933
|
lo: Value<Unit>;
|
|
8382
8934
|
hi: Value<Unit>;
|
|
@@ -8435,7 +8987,7 @@ interface TapeProps<Unit extends string = string> {
|
|
|
8435
8987
|
*/
|
|
8436
8988
|
format?: FormatsFor<Unit>;
|
|
8437
8989
|
/** Accessible label naming what the scale measures (e.g. "Altitude above terrain"). */
|
|
8438
|
-
|
|
8990
|
+
"aria-label": string;
|
|
8439
8991
|
}
|
|
8440
8992
|
/**
|
|
8441
8993
|
* A vertical linear scale with a moving pointer, the altimeter or airspeed
|
|
@@ -8453,7 +9005,7 @@ interface TapeProps<Unit extends string = string> {
|
|
|
8453
9005
|
*
|
|
8454
9006
|
* @category Gauge
|
|
8455
9007
|
*/
|
|
8456
|
-
declare function Tape<Unit extends string = string>({ labelSide, value, min, max, width, height, fillHeight, tickStep, zones, markers, groundLine, seaLevel, format, ariaLabel, }: Readonly<TapeProps<Unit>>): react_jsx_runtime.JSX.Element;
|
|
9008
|
+
declare function Tape<Unit extends string = string>({ labelSide, value, min, max, width, height, fillHeight, tickStep, zones, markers, groundLine, seaLevel, format, "aria-label": ariaLabel, }: Readonly<TapeProps<Unit>>): react_jsx_runtime.JSX.Element;
|
|
8457
9009
|
|
|
8458
9010
|
/**
|
|
8459
9011
|
* How far plain text recedes: `muted` for secondary text, `faint` the quietest
|
|
@@ -8508,8 +9060,9 @@ interface TextProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
8508
9060
|
}
|
|
8509
9061
|
/**
|
|
8510
9062
|
* Inline style declarations that recede every neutral word inside a box to the
|
|
8511
|
-
* faint text level, which still meets WCAG AA contrast on a panel.
|
|
8512
|
-
*
|
|
9063
|
+
* faint text level, which still meets WCAG AA contrast on a panel. It sets `color` and the
|
|
9064
|
+
* neutral, primary, muted and dim text variables to that faint colour, so
|
|
9065
|
+
* nested kit text recedes with it. Use it to quiet a block of words; opacity would drop them below contrast, so keep
|
|
8513
9066
|
* opacity for marks that carry no text. A word in a tone keeps its tone. The
|
|
8514
9067
|
* same declarations as {@link faintText}, for a `style` prop.
|
|
8515
9068
|
*
|
|
@@ -8517,8 +9070,8 @@ interface TextProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
8517
9070
|
*/
|
|
8518
9071
|
declare const FAINT_TEXT_STYLE: Readonly<Record<string, string>>;
|
|
8519
9072
|
/**
|
|
8520
|
-
* {@link FAINT_TEXT_STYLE}
|
|
8521
|
-
* rule.
|
|
9073
|
+
* The same declarations as {@link FAINT_TEXT_STYLE}, written as
|
|
9074
|
+
* `property: value;` lines for a styled-components rule.
|
|
8522
9075
|
*
|
|
8523
9076
|
* @category Typography
|
|
8524
9077
|
*/
|
|
@@ -8534,12 +9087,20 @@ declare function faintText(): string;
|
|
|
8534
9087
|
*
|
|
8535
9088
|
* @example
|
|
8536
9089
|
* ```tsx
|
|
8537
|
-
*
|
|
8538
|
-
*
|
|
8539
|
-
*
|
|
8540
|
-
*
|
|
8541
|
-
*
|
|
8542
|
-
*
|
|
9090
|
+
* import { useTelemetry } from "@ksp-gonogo/sitrep-sdk";
|
|
9091
|
+
* import { Cluster, Text, Unit } from "@ksp-gonogo/ui-kit";
|
|
9092
|
+
*
|
|
9093
|
+
* function AltitudeLine() {
|
|
9094
|
+
* const flight = useTelemetry("vessel.flight");
|
|
9095
|
+
* return (
|
|
9096
|
+
* <Cluster>
|
|
9097
|
+
* <Text level="muted" size="xs">Altitude</Text>
|
|
9098
|
+
* <Text weight="semibold">
|
|
9099
|
+
* <Unit value={flight.altitudeAsl} />
|
|
9100
|
+
* </Text>
|
|
9101
|
+
* </Cluster>
|
|
9102
|
+
* );
|
|
9103
|
+
* }
|
|
8543
9104
|
* ```
|
|
8544
9105
|
*
|
|
8545
9106
|
* @category Typography
|
|
@@ -8602,7 +9163,9 @@ declare function TextField({ label, value, onChange, invalid, placeholder, maxLe
|
|
|
8602
9163
|
* @category TinyEssentials
|
|
8603
9164
|
*/
|
|
8604
9165
|
interface TinyEssentialsProps {
|
|
9166
|
+
/** A short name for the widget, drawn with its figures. */
|
|
8605
9167
|
title: string;
|
|
9168
|
+
/** The figures the widget cannot do without, in the order drawn. */
|
|
8606
9169
|
essentials: readonly TinyEssential[];
|
|
8607
9170
|
}
|
|
8608
9171
|
/**
|
|
@@ -8614,7 +9177,9 @@ interface TinyEssentialsProps {
|
|
|
8614
9177
|
* essential declares it urgent, through an assertive one that interrupts.
|
|
8615
9178
|
*
|
|
8616
9179
|
* Rows are drawn in order while they fit the tile and the ones that do not
|
|
8617
|
-
* are dropped from the end, so every figure the tile shows is whole.
|
|
9180
|
+
* are dropped from the end, so every figure the tile shows is whole. A dropped
|
|
9181
|
+
* row stays in the accessibility tree, in a screen-reader-only block after the
|
|
9182
|
+
* drawn ones.
|
|
8618
9183
|
*
|
|
8619
9184
|
* @category TinyEssentials
|
|
8620
9185
|
* @categoryDescription TinyEssentials
|
|
@@ -8656,7 +9221,7 @@ declare function gridFloor(def: Pick<ComponentDefinition, "tiny" | "minSize">):
|
|
|
8656
9221
|
} | undefined;
|
|
8657
9222
|
|
|
8658
9223
|
/**
|
|
8659
|
-
* The fill
|
|
9224
|
+
* The fill a pressed {@link ToggleButton} takes: `go`, or `nogo` / `warn` when
|
|
8660
9225
|
* being on is destructive or needs attention.
|
|
8661
9226
|
*
|
|
8662
9227
|
* @category Button
|
|
@@ -8675,16 +9240,16 @@ type ToggleButtonSize = "sm" | "md";
|
|
|
8675
9240
|
*/
|
|
8676
9241
|
interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
8677
9242
|
/** Whether the toggle is on. Drives `aria-pressed` and the filled look. Defaults to `false`. */
|
|
8678
|
-
|
|
8679
|
-
/** The fill while
|
|
9243
|
+
pressed?: boolean;
|
|
9244
|
+
/** The fill while pressed. Defaults to `go`. */
|
|
8680
9245
|
tone?: ToggleButtonTone;
|
|
8681
9246
|
/** Defaults to `md`. */
|
|
8682
9247
|
size?: ToggleButtonSize;
|
|
8683
9248
|
}
|
|
8684
9249
|
/**
|
|
8685
|
-
* A two-state toggle: a real `<button>` whose `aria-pressed` follows `
|
|
9250
|
+
* A two-state toggle: a real `<button>` whose `aria-pressed` follows `pressed`,
|
|
8686
9251
|
* for controls that switch between on and off (mode pickers, filter toggles,
|
|
8687
|
-
* rate pickers). It draws as a {@link Button}, filled in `tone` while
|
|
9252
|
+
* rate pickers). It draws as a {@link Button}, filled in `tone` while pressed
|
|
8688
9253
|
* and plain while not.
|
|
8689
9254
|
*
|
|
8690
9255
|
* ToggleButton or {@link Switch}? They are different ARIA patterns:
|
|
@@ -8700,18 +9265,29 @@ interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
8700
9265
|
*
|
|
8701
9266
|
* @example
|
|
8702
9267
|
* ```tsx
|
|
8703
|
-
*
|
|
8704
|
-
*
|
|
8705
|
-
*
|
|
8706
|
-
*
|
|
8707
|
-
*
|
|
8708
|
-
*
|
|
8709
|
-
*
|
|
8710
|
-
*
|
|
8711
|
-
*
|
|
8712
|
-
*
|
|
8713
|
-
*
|
|
8714
|
-
*
|
|
9268
|
+
* import { Inline, ToggleButton } from "@ksp-gonogo/ui-kit";
|
|
9269
|
+
*
|
|
9270
|
+
* const RATES = [1, 2, 3, 4] as const;
|
|
9271
|
+
*
|
|
9272
|
+
* function RatePicker(props: {
|
|
9273
|
+
* current: number;
|
|
9274
|
+
* setRate: (rate: number) => void;
|
|
9275
|
+
* }) {
|
|
9276
|
+
* return (
|
|
9277
|
+
* <Inline>
|
|
9278
|
+
* {RATES.map((rate) => (
|
|
9279
|
+
* <ToggleButton
|
|
9280
|
+
* key={rate}
|
|
9281
|
+
* size="sm"
|
|
9282
|
+
* pressed={rate === props.current}
|
|
9283
|
+
* onClick={() => props.setRate(rate)}
|
|
9284
|
+
* >
|
|
9285
|
+
* {rate}x
|
|
9286
|
+
* </ToggleButton>
|
|
9287
|
+
* ))}
|
|
9288
|
+
* </Inline>
|
|
9289
|
+
* );
|
|
9290
|
+
* }
|
|
8715
9291
|
* ```
|
|
8716
9292
|
*
|
|
8717
9293
|
* @category Button
|
|
@@ -8747,6 +9323,7 @@ interface TooltipAnchorProps {
|
|
|
8747
9323
|
* @category Floating
|
|
8748
9324
|
*/
|
|
8749
9325
|
interface UseTooltipResult {
|
|
9326
|
+
/** Props to spread on the element the tip belongs to. */
|
|
8750
9327
|
anchor: TooltipAnchorProps;
|
|
8751
9328
|
/** The tip itself, portalled to the document body; render it anywhere beside the anchor. */
|
|
8752
9329
|
tip: ReactNode;
|
|
@@ -8827,9 +9404,13 @@ interface TooltipProps {
|
|
|
8827
9404
|
declare function Tooltip({ text, children, focusable, announce, }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
8828
9405
|
|
|
8829
9406
|
/**
|
|
8830
|
-
* An orbit path that may not be drawn, and the reason
|
|
8831
|
-
*
|
|
8832
|
-
*
|
|
9407
|
+
* An orbit path that may not be drawn, and the reason. An orbit's elements are
|
|
9408
|
+
* the numbers that define its curve, and its horizon is how far ahead in game
|
|
9409
|
+
* time they can be trusted. The path is withheld when no horizon was stated for
|
|
9410
|
+
* it, the instant on screen is past its horizon, its shape (a conic drawn from
|
|
9411
|
+
* the elements, or an arc sampled by the provider) was not stated, the frame
|
|
9412
|
+
* asked for cannot be built (a body not yet received, say), or it could not be
|
|
9413
|
+
* sampled. It is the
|
|
8833
9414
|
* `withheld` member of `OrbitTrajectory`, which `useOrbitTrajectory` from
|
|
8834
9415
|
* `@ksp-gonogo/sitrep-sdk/frames` returns.
|
|
8835
9416
|
*
|
|
@@ -8914,7 +9495,7 @@ declare const TONE_LABEL: Readonly<Record<Tone, string>>;
|
|
|
8914
9495
|
declare function toneEdge(tone: Tone): string;
|
|
8915
9496
|
|
|
8916
9497
|
/**
|
|
8917
|
-
* Bounds for a
|
|
9498
|
+
* Bounds for a position slider, refused on a point-like unit: an instant can be
|
|
8918
9499
|
* years out, and no range wide enough to reach it leaves useful precision. Use
|
|
8919
9500
|
* {@link RateControl} for instants.
|
|
8920
9501
|
*
|
|
@@ -8926,7 +9507,7 @@ type SlidableRange<Unit extends string> = Unit extends PointUnit ? never : {
|
|
|
8926
9507
|
step?: number;
|
|
8927
9508
|
};
|
|
8928
9509
|
/**
|
|
8929
|
-
* A
|
|
9510
|
+
* A rate wheel beside the field, on any unit. The handle's displacement is the
|
|
8930
9511
|
* speed the value changes at, and it springs back to centre on release, so it
|
|
8931
9512
|
* needs no bounds.
|
|
8932
9513
|
*
|
|
@@ -8966,6 +9547,7 @@ interface UnitInputProps<Unit extends string = string> {
|
|
|
8966
9547
|
range?: SlidableRange<Unit>;
|
|
8967
9548
|
/** Supplying a notch size adds a rate wheel beside the field. See {@link RateControl}. */
|
|
8968
9549
|
rate?: RateControl;
|
|
9550
|
+
/** Greys the field, and any slider or wheel, out and ignores input. */
|
|
8969
9551
|
disabled?: boolean;
|
|
8970
9552
|
}
|
|
8971
9553
|
/**
|
|
@@ -9075,6 +9657,7 @@ type UnitPinsByGroup = {
|
|
|
9075
9657
|
};
|
|
9076
9658
|
/** What every spelling of the props below shares. */
|
|
9077
9659
|
interface UnitSharedFormatBaseProps {
|
|
9660
|
+
/** The tree whose figures share the format. */
|
|
9078
9661
|
children?: ReactNode;
|
|
9079
9662
|
/**
|
|
9080
9663
|
* Widen the digit count until the members stop printing the same figure as each other. What an interval wants (6 700 km and 6 710 km both print `6.7 Mm` otherwise) and a column does not. Applies to the whole scope.
|
|
@@ -9382,6 +9965,7 @@ interface WidgetMetaContextValue {
|
|
|
9382
9965
|
* `null` outside one. The dashboard provides it for every widget; a test
|
|
9383
9966
|
* rendering a widget bare provides it to get the widget's slots working.
|
|
9384
9967
|
*
|
|
9968
|
+
* @intent Published so a test or a host of its own can give a widget the identity and slots the dashboard provides.
|
|
9385
9969
|
* @category Extensions
|
|
9386
9970
|
*/
|
|
9387
9971
|
declare const WidgetMetaContext: react.Context<WidgetMetaContextValue | null>;
|
|
@@ -9480,36 +10064,62 @@ declare function useWidgetScope<Widget extends string>(componentId: Widget): Wid
|
|
|
9480
10064
|
* @category Extensions
|
|
9481
10065
|
*/
|
|
9482
10066
|
interface WidgetTopicDeclaration {
|
|
10067
|
+
/** The Topics the widget cannot draw without. */
|
|
9483
10068
|
channels?: readonly string[];
|
|
10069
|
+
/** The Topics the widget reads when they are published. */
|
|
9484
10070
|
optionalChannels?: readonly string[];
|
|
10071
|
+
/** Families of Topics the widget cannot draw without, as patterns such as `fleet.<vessel>.contact`. */
|
|
10072
|
+
channelFamilies?: readonly string[];
|
|
10073
|
+
/** Families of Topics the widget reads when they are published. */
|
|
10074
|
+
optionalChannelFamilies?: readonly string[];
|
|
10075
|
+
/** The Topics a widget reads that depend on its settings. */
|
|
10076
|
+
channelsFromConfig?: (config: never) => readonly string[];
|
|
10077
|
+
/** The fields the widget draws, when that is fewer than its Topics carry. */
|
|
9485
10078
|
fields?: readonly string[];
|
|
10079
|
+
/** The legacy flat keys the widget reads. */
|
|
9486
10080
|
dataRequirements?: readonly string[];
|
|
9487
10081
|
}
|
|
9488
10082
|
/**
|
|
9489
|
-
* Every channel a widget declares it mounts on: its `channels`,
|
|
9490
|
-
* `optionalChannels` and `dataRequirements` joined,
|
|
9491
|
-
*
|
|
9492
|
-
*
|
|
10083
|
+
* Every concrete channel a widget declares it mounts on: its `channels`,
|
|
10084
|
+
* `optionalChannels` and `dataRequirements` joined, plus the Topics its
|
|
10085
|
+
* `channelsFromConfig` names for `config`, without duplicates. The dashboard
|
|
10086
|
+
* derives a widget's blackout badge from these. Empty for an undefined
|
|
10087
|
+
* definition.
|
|
10088
|
+
*
|
|
10089
|
+
* Families (`channelFamilies`, `optionalChannelFamilies`) are left out on
|
|
10090
|
+
* purpose: blackout is per craft and a family has no single craft, so see
|
|
10091
|
+
* {@link widgetDrawnFamilies} for them.
|
|
9493
10092
|
*
|
|
9494
10093
|
* @category Extensions
|
|
9495
10094
|
*/
|
|
9496
|
-
declare function widgetDeclaredTopics(def: WidgetTopicDeclaration | undefined): readonly string[];
|
|
10095
|
+
declare function widgetDeclaredTopics(def: WidgetTopicDeclaration | undefined, config?: unknown): readonly string[];
|
|
9497
10096
|
/**
|
|
9498
10097
|
* Every field a widget declares it draws, as opposed to the channels it needs
|
|
9499
10098
|
* live to render at all: its `fields` without duplicates, or, when it
|
|
9500
|
-
* declares none, its {@link widgetDeclaredTopics}.
|
|
9501
|
-
*
|
|
10099
|
+
* declares none, its {@link widgetDeclaredTopics}. Topics from
|
|
10100
|
+
* `channelsFromConfig` are always included. The dashboard matches alarms to
|
|
10101
|
+
* widgets against this list.
|
|
9502
10102
|
*
|
|
9503
10103
|
* @category Extensions
|
|
9504
10104
|
*/
|
|
9505
|
-
declare function widgetDrawnFields(def: WidgetTopicDeclaration | undefined): readonly string[];
|
|
10105
|
+
declare function widgetDrawnFields(def: WidgetTopicDeclaration | undefined, config?: unknown): readonly string[];
|
|
10106
|
+
/**
|
|
10107
|
+
* Every family of runtime-built Topic ids a widget declares, required and
|
|
10108
|
+
* optional joined, without duplicates, such as `"fleet.<vessel>.contact"`. The
|
|
10109
|
+
* dashboard matches alarms against these with `topicMatchesFamily`.
|
|
10110
|
+
*
|
|
10111
|
+
* @category Extensions
|
|
10112
|
+
*/
|
|
10113
|
+
declare function widgetDrawnFamilies(def: WidgetTopicDeclaration | undefined): readonly string[];
|
|
9506
10114
|
|
|
9507
10115
|
/**
|
|
9508
10116
|
* How much room a widget tile has, derived from its `w` and `h` grid units by
|
|
9509
10117
|
* {@link getSizeBucket} so every widget uses the same boundaries.
|
|
9510
10118
|
*
|
|
9511
|
-
* - `tiny`: a single-glance status or one key readout
|
|
9512
|
-
*
|
|
10119
|
+
* - `tiny`: a single-glance status or one key readout; under 5 columns wide or
|
|
10120
|
+
* 4 rows tall
|
|
10121
|
+
* - `small`: essential numbers, minimal chrome; under 8 columns wide or 7 rows
|
|
10122
|
+
* tall
|
|
9513
10123
|
* - `normal`: the full widget UI
|
|
9514
10124
|
*
|
|
9515
10125
|
* A widget that declares a tiny mode is drawn by the kit in `tiny`; every other
|
|
@@ -9526,12 +10136,14 @@ type SizeBucket = "tiny" | "small" | "normal";
|
|
|
9526
10136
|
* @category Layout
|
|
9527
10137
|
*/
|
|
9528
10138
|
declare const TINY_BELOW: {
|
|
10139
|
+
/** Width in grid columns: a tile under 5 columns wide is `tiny`. */
|
|
9529
10140
|
readonly w: 5;
|
|
10141
|
+
/** Height in grid rows: a tile under 4 rows tall is `tiny`. */
|
|
9530
10142
|
readonly h: 4;
|
|
9531
10143
|
};
|
|
9532
10144
|
/**
|
|
9533
10145
|
* The {@link SizeBucket} a `w` by `h` tile falls in: `tiny` below
|
|
9534
|
-
* {@link TINY_BELOW} on either axis, `small` below 8 wide or 7 tall, `normal`
|
|
10146
|
+
* {@link TINY_BELOW} on either axis, `small` below 8 columns wide or 7 rows tall, `normal`
|
|
9535
10147
|
* otherwise. Returns `normal` while either dimension is `undefined`.
|
|
9536
10148
|
*
|
|
9537
10149
|
* This is the bucket by size alone, for a widget arranging its own body.
|
|
@@ -9562,6 +10174,7 @@ type WidgetShape = "portrait" | "landscape" | "square";
|
|
|
9562
10174
|
* @category Layout
|
|
9563
10175
|
*/
|
|
9564
10176
|
interface WidgetShapeInfo {
|
|
10177
|
+
/** Whether the tile is tall, wide or roughly square. */
|
|
9565
10178
|
shape: WidgetShape;
|
|
9566
10179
|
/**
|
|
9567
10180
|
* Raw grid aspect ratio, `w / h`. > 1 is wider-than-tall, < 1 is
|
|
@@ -9581,4 +10194,66 @@ interface WidgetShapeInfo {
|
|
|
9581
10194
|
*/
|
|
9582
10195
|
declare function getWidgetShape(w: number | undefined, h: number | undefined): WidgetShapeInfo;
|
|
9583
10196
|
|
|
9584
|
-
|
|
10197
|
+
/**
|
|
10198
|
+
* Geometry for a flat map that repeats east and west: a ground track drawn as
|
|
10199
|
+
* one continuous line however often it crosses the antimeridian, and every
|
|
10200
|
+
* mark drawn in whichever copy of the world is in view.
|
|
10201
|
+
*/
|
|
10202
|
+
/**
|
|
10203
|
+
* A point on the body, in degrees.
|
|
10204
|
+
*
|
|
10205
|
+
* @category Extensions
|
|
10206
|
+
*/
|
|
10207
|
+
interface GroundPoint {
|
|
10208
|
+
/** Degrees north, from -90 at the south pole to 90 at the north. */
|
|
10209
|
+
lat: number;
|
|
10210
|
+
/** Degrees east. */
|
|
10211
|
+
lon: number;
|
|
10212
|
+
}
|
|
10213
|
+
/**
|
|
10214
|
+
* Break a ground track wherever it flies over a pole, where its longitude
|
|
10215
|
+
* flips by half a turn and a line joining the pair would run along the map's
|
|
10216
|
+
* top or bottom edge. Crossing the antimeridian is not a break: draw each run
|
|
10217
|
+
* with {@link wrapPath}, which carries it on into the next copy of the world.
|
|
10218
|
+
*
|
|
10219
|
+
* Geometric, not a tuned constant: a pair straddles a pole when the shorter
|
|
10220
|
+
* great-circle arc between them passes closer to it than the samples are to
|
|
10221
|
+
* each other. "Passes" means the arc's closest point to the pole lies between
|
|
10222
|
+
* them, which rules out a pair climbing on one leg; "closer than each other"
|
|
10223
|
+
* ties the test to the sampling, so a near miss the sampling resolves still
|
|
10224
|
+
* draws its jog.
|
|
10225
|
+
*
|
|
10226
|
+
* @category Extensions
|
|
10227
|
+
*/
|
|
10228
|
+
declare function splitAtPoleCrossings<Point extends GroundPoint>(points: readonly Point[]): Point[][];
|
|
10229
|
+
/**
|
|
10230
|
+
* The copies of a projected path that cross a view of a map repeating every
|
|
10231
|
+
* `period` pixels across. The path is first made continuous, each point moved
|
|
10232
|
+
* by whole periods to lie within half a period of the one before, so a track
|
|
10233
|
+
* that leaves one edge of the world carries on past it rather than jumping
|
|
10234
|
+
* back across the map. Then it is shifted by every whole period that brings
|
|
10235
|
+
* some of it between `viewMin` and `viewMax`.
|
|
10236
|
+
*
|
|
10237
|
+
* Points may come from any copy of the world, such as a projection that wraps
|
|
10238
|
+
* longitude. The path must already be split where it crosses a pole (see
|
|
10239
|
+
* {@link splitAtPoleCrossings}), since half a turn of longitude is no jump a
|
|
10240
|
+
* continuous line can be told apart from.
|
|
10241
|
+
*
|
|
10242
|
+
* @category Extensions
|
|
10243
|
+
*/
|
|
10244
|
+
declare function wrapPath<Point extends {
|
|
10245
|
+
x: number;
|
|
10246
|
+
}>(points: readonly Point[], period: number, viewMin: number, viewMax: number): Point[][];
|
|
10247
|
+
/**
|
|
10248
|
+
* Every whole multiple of `period` that, added to the span `min` to `max`,
|
|
10249
|
+
* puts some of it between `viewMin` and `viewMax`, west to east. On a
|
|
10250
|
+
* map repeating every `period` pixels, these are the shifts at which to draw
|
|
10251
|
+
* a mark or a region so it appears in every copy of the world in view. A
|
|
10252
|
+
* single point is a span with `min` equal to `max`; widen the view by the
|
|
10253
|
+
* mark's own size so one straddling the edge is not dropped.
|
|
10254
|
+
*
|
|
10255
|
+
* @category Extensions
|
|
10256
|
+
*/
|
|
10257
|
+
declare function repeatsInView(min: number, max: number, viewMin: number, viewMax: number, period: number): number[];
|
|
10258
|
+
|
|
10259
|
+
export { ARM_TIMEOUT_MS, ActionMenu, type ActionMenuItem, type ActionMenuProps, type AnchorPoint, type AnchoredPosition, AntiNormalIcon, AntiTargetIcon, type AnyAugment, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, type AudioCaptureSupport, type AudioCaptureUnsupportedReason, type AudioInputControls, type AudioInputDevice, type AudioInputFailure, AudioInputPicker, type AudioInputPickerProps, type AudioInputState, type AudioInputStatus, type AugmentSegmentProps, type AugmentSegmentRegistry, type AugmentSettingsContextValue, AugmentSettingsPanel, type AugmentSettingsPanelProps, AugmentSettingsProvider, AugmentSlot, AutoEmptyState, type AutoEmptyStateProps, AvatarStack, type AvatarStackItem, type AvatarStackProps, Badge, type BadgeFace, type BadgeProps, type BadgeSize, Band, type BandProps, BellIcon, BinormalIcon, Block, type BlockProps, type BlockTitleRowProps, Box, type BoxPad, type BoxProps, type BoxRadius, type BoxSurface, BroadcastIcon, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, Cluster, type ClusterAlign, type ClusterJustify, type ClusterProps, ComboboxListbox, type ComboboxListboxProps, type ComboboxOption, CommandButton, type CommandButtonHandle, type CommandButtonPhase, type CommandButtonProps, type CommandButtonSize, type CommandButtonState, type CommandButtonTone, CommandDelay, type CommandDelayHandle, type CommandDelayProps, type CommandFailedEntry, type CommandFailedLike, type CommandFoundEntry, type CommandFoundLike, type CommandGateLike, CommandGroup, type CommandGroupProps, type CommandHandle, CommandList, type CommandListKind, type CommandListProps, type CommandLossEntry, type CommandLossLike, type CommandOutcomes, type CommandRefusalEntry, type CommandRefusalLike, type CommandReplyLike, type CommandUndeliveredEntry, type CommandUndeliveredLike, ComposerBar, type ComposerBarProps, ComputerIcon, ConfigForm, Console, type ConsoleProps, type ConsoleTone, ContainerBreak, type ContainerBreakProps, type ContributionSlotEntry, ContributionsPanelStore, ContributionsProvider, ControlDelayStream, type ControlDelayStreamProps, type ControlDelayStreamVariant, type ControlRibbonDatum, type ControlStreamDatum, type ControlStreamSample, Countdown, type CountdownProps, type CurrencyOptions, DataKeyPicker, type DataKeyPickerProps, DataLine, type DataLineProps, DataTable, type DataTableColumn, type DataTableColumnBase, type DataTableProps, type DataTableSection, DatabaseIcon, DefaultThemeProvider, DelayRailContext, DelayRailProvider, DiagnosticsIcon, Dial, type DialProps, type DialTick, type DialZone, Disclosure, type DisclosureProps, DivergingBar, type DivergingBarProps, Divider, type DividerProps, DomainAvailabilityContext, DomainAvailabilityProvider, type DomainAvailabilityStore, type DrawnPrecision, type ElementSize, EmptyState, type EmptyStateLayout, type EmptyStateProps, type EphemerisFigure, ExpandableText, type ExpandableTextProps, FAINT_TEXT_STYLE, FRAMEWORK_AUGMENT_SEGMENTS, FRAMEWORK_CONTRIBUTION_SEGMENTS, Field, FieldHint, FieldLabel, FieldRow, Fill, type FillProps, type FillQuantity, FilterChip, type FilterChipProps, FilterList, type FilterListProps, FilterRegion, type FilterRegionProps, type FilterRow, FitLabelButton, type FitLabelButtonProps, Floating, type FloatingProps, FormActions, FormatQuantityOptions, FormatsFor, FormatsForKind, FramedDisplay, type FramedDisplayProps, FrenetNormalIcon, FullHeightIcon, FullWidthIcon, FullscreenEnterIcon, FullscreenExitIcon, type GapToken, GraphNotice, type GraphNoticePlacement, type GraphNoticeProps, type GraphNoticeSpace, Grid, type GridAlign, type GridProps, type GroundPoint, HalfHeightIcon, HalfWidthIcon, HeartIcon, HeldBadge, type HeldBadgeProps, HeldFigure, type HeldFigureProps, HistoryIcon, HomeIcon, HoverCard, type HoverCardProps, INTERVAL_DASH, IconButton, type IconButtonProps, type IconProps, type InFlightCommandLike, InFlightFace, type InFlightFaceProps, InFlightList, type InFlightListDensity, type InFlightListItem, type InFlightListMode, type InFlightListProps, InfoIcon, Inline, type InlineProps, Input, type InsetToken, InstrumentHeldMark, JogWheel, type JogWheelCommon, type JogWheelProps, JoystickIcon, type KeyOption, KindOfGroup, LayersIcon, LevelBars, type LevelBarsProps, LineGraph, type LineGraphProps, type LineGraphSeries, type LineGraphThreshold, type LineGraphThresholdStyle, LiveRegion, type LiveRegionProps, LockIcon, LockMark, type LockMarkProps, LockScope, type LockScopeProps, type LockSummary, MARKER_ICONS, MARKER_IDS, ManeuverIcon, type MarkKind, type MarkerIconProps, type MarkerId, Meter, type MeterLayout, type MeterProps, MeterRowGroup, MeterStack, MicroscopeIcon, MissionDate, MissionDateField, type MissionDateFieldProps, type MissionDateParts, type MissionDateProps, ModalChromeContext, type ModalChromeValue, type ModalContextValue, type ModalOpenOptions, ModalProvider, type ModalSaveBarOptions, ModelledAlongside, type ModelledFigureAlongsideProps, type ModelledQuantityAlongsideProps, MutedIcon, NULL_DISPLAY, NormalIcon, Notice, type NoticeProps, NullValue, type PaintReckoningMarkOptions, type PaintVesselMarkOptions, Panel, type PanelAsideSize, type PanelBadge, PanelBadgesProvider, type PanelInactiveReason, type PanelProps, type PanelSidebarSide, type PanelStatusStore, PanelStatusStoreProvider, type PanelTitleProps, ParallelMinusIcon, ParallelPlusIcon, PauseIcon, PencilIcon, PlayIcon, PlotCrosshair, type PlotCrosshairProps, type PlotCrosshairRow, type PlotReadoutPlacement, type PlotReadoutSpace, PlusIcon, PresentableAs, PresentableAsKind, ProgradeIcon, PushUpIcon, RECKONING_MARK, RETIRED_SLOT_IDS, RadialInIcon, RadialOutIcon, type RailEntry, type RailFailed, type RailFound, type RailLoss, type RailRefusal, type RailUndelivered, type RateControl, ReadFrameControl, type ReadFrameControlProps, type ReadFrameOption, ReadOnlyField, type ReadOnlyFieldProps, type ReadOnlyFieldValue, Readout, ReadoutCaption, type ReadoutProps, type ReadoutSize, RecallIcon, type ReckonedPosition, ReckonedUnit, type ReckoningKind, ReckoningMark, ReckoningMarkSvg, type ReckoningMarking, RelativeMinusIcon, RelativePlusIcon, type Resolved, RetrogradeIcon, Row, type RowFilter, RowName, type RowProps, STREAM_MIN_DELAY_SECONDS, SatelliteIcon, ScrollArea, SearchBox, type SearchBoxProps, Section, type SectionProps, SectionTitle, Select, SelectableRow, type SelectableRowProps, SendIcon, SettingsIcon, type Severity, type SharedFormat, SignalDelayBadge, type SignalDelayBadgeProps, type SizeBucket, type SlidableRange, Slider, type SliderProps, SpeakerIcon, Spinner, type SpinnerProps, Stack, type StackProps, StarIcon, Stat, StatContributions, type StatContributionsProps, type StatProps, type StaticElement, type StatusBreakdownEntry, type StatusContribution, StatusIndicator, type StatusIndicatorProps, type StatusSummary, Stepper, type StepperProps, StopIcon, StreamStatusBadge, type StreamStatusBadgeProps, SubjectHeading, type SubjectHeadingProps, Switch, type SwitchBaseProps, type SwitchProps, TABS_PANEL_MIN_WIDTH, TINY_BELOW, TONE_LABEL, TONE_MARK, TONE_ON_STATUS, TONE_STATUS, TONE_TEXT, type TabDescriptor, Tabs, type TabsProps, TangentIcon, Tape, type TapeMarker, type TapeProps, type TapeZone, TargetIcon, Text, TextButton, TextField, type TextFieldProps, type TextLevel, type TextProps, type TextSize, type TextWeight, Textarea, type ThemeBorders, type ThemeColors, type ThemeTypography, type TimeContext, TinyEssentials, type TinyEssentialsProps, ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonTone, Tooltip, type TooltipAnchorProps, type TooltipProps, TrajectoryWithheldNote, Truncate, type UiKitTheme, Unit, UnitGroupKey, type UnitGroupPins, UnitInput, type UnitInputProps, type UnitPins, type UnitPinsByGroup, type UnitProps, UnitSharedFormat, type UnitSharedFormatMixedProps, type UnitSharedFormatProps, type UnitValue, type UseAudioInputOptions, type UseCommandButtonOptions, type UseRowFilterOptions, type UseTooltipResult, VESSEL_MARK, type VesselMarkState, VesselMarkSvg, type VesselMarkSvgProps, type VesselPositions, VisuallyHidden, WAVE_HALF_H, WAVE_MID_Y, WidgetBody, WidgetMetaContext, type WidgetMetaContextValue, WidgetMeters, type WidgetMetersProps, WidgetScopeProvider, WidgetSections, type WidgetShape, type WidgetShapeInfo, type WidgetTopicDeclaration, type WithheldTrajectory, anchoredPosition, audioCaptureSupport, badgeFace, clearAugments, commandFailedSentence, commandFoundSentence, commandGateSentence, commandLossSentence, commandOutcomes, commandRefusalSentence, commandUndeliveredSentence, configEqual, createDelayRailStore, createDomainAvailabilityStore, defaultDarkTheme, derivedMarking, describeAudioInput, ephemerisFigureOf, faintText, filterComboboxOptions, flattenComboboxGroups, formatStreamStatus, getAugmentSettings, getAugments, getAugmentsForSlot, getSizeBucket, getWidgetShape, gridFloor, groupComboboxOptions, heldFigureOf, heldGradeOf, heldMarking, heldWord, initialsOf, modelledBeyondReceived, moveComboboxActiveIndex, onAugmentsChange, paintReckonedPosition, paintReckoningMark, paintVesselMark, paintVesselPositions, placeGraphNotice, placePlotReadouts, placedOnScale, plotCrosshairShowsCard, railTagKey, reckoningBasisPhrase, registerAugment, repeatsInView, resolveCurrency, resourceColor, ribbonBoundaryX, sayHeld, severityFromStreamStatus, shouldExpandTabs, showsTiny, sizeDeltaFor, splitAtPoleCrossings, standsApart, toInFlightListItems, toneEdge, trajectoryWithheldCopy, useActiveHandles, useAllAugmentSettings, useAudioInput, useAugmentAvailable, useAugmentSettings, useCommandButton, useContributions, useContributionsBySlotId, useDelayRailStore, useDomainAvailabilityStore, useElementSize, useModal, useModalChrome, useModalSaveBar, usePanelAsideSize, usePanelStatusStore, usePrefersReducedMotion, useRailEntry, useRowFilter, useSizeDeltaFor, useSlotBound, useSlotLabel, useStatusBreakdown, useStatusContribution, useStatusSummary, useTooltip, useWidgetBadges, useWidgetMeta, useWidgetScope, useWidgetSegmentBound, utOfParts, waveformPath, widgetDeclaredTopics, widgetDrawnFamilies, widgetDrawnFields, withSizeDelta, worstSeverity, wrapPath, writtenAs, writtenQuantity };
|