@vitavision/ui 0.11.0 → 0.13.0

package/src/components/ui/Toaster.tsx

@@ -64,34 +64,18 @@ export function Toaster({ store = defaultToastStore, limit = 5, className }: Toa
       onPointerLeave={() => setHovered(false)}
       onFocus={() => setFocused(true)}
       onBlur={onBlur}
-      className={cn(
-        "pointer-events-none fixed right-4 bottom-4 z-50 w-80 max-w-[calc(100vw-2rem)]",
-        className,
-      )}
+      className={cn("pointer-events-none fixed right-4 bottom-4 z-50 w-80 max-w-[calc(100vw-2rem)]", className)}
     >
       <ol aria-live="polite" className="flex flex-col gap-2">
         {shown.map((record) => (
-          <ToastItem
-            key={record.id}
-            record={record}
-            paused={hovered || focused}
-            onDismiss={() => store.dismiss(record.id)}
-          />
+          <ToastItem key={record.id} record={record} paused={hovered || focused} onDismiss={() => store.dismiss(record.id)} />
         ))}
       </ol>
     </section>
   );
 }
 
-function ToastItem({
-  record,
-  paused,
-  onDismiss,
-}: {
-  record: ToastRecord;
-  paused: boolean;
-  onDismiss: () => void;
-}) {
+function ToastItem({ record, paused, onDismiss }: { record: ToastRecord; paused: boolean; onDismiss: () => void }) {
   const { border, icon, Icon } = TONE[record.tone];
   // What is left of the countdown, carried across pauses; restarted when the toast is
   // replaced in place (a new record under the same id).

package/src/components/ui/Toggle.tsx

@@ -136,11 +136,7 @@ export function Checkbox({
       )}
     >
       <RadixCheckbox.Indicator className="text-signal-fg">
-        {checked === "indeterminate" ? (
-          <Minus className="size-3" strokeWidth={3} />
-        ) : (
-          <Check className="size-3" strokeWidth={3} />
-        )}
+        {checked === "indeterminate" ? <Minus className="size-3" strokeWidth={3} /> : <Check className="size-3" strokeWidth={3} />}
       </RadixCheckbox.Indicator>
     </RadixCheckbox.Root>
   );

package/src/components/ui/ToggleChip.tsx

@@ -87,9 +87,7 @@ export function ToggleChip({
         "inline-flex items-center gap-1.5 rounded-control border",
         SIZE_CLASSES[size],
         "whitespace-nowrap transition-colors",
-        checked
-          ? "border-line-strong bg-raised text-fg"
-          : "border-line bg-transparent text-fg-muted hover:text-fg",
+        checked ? "border-line-strong bg-raised text-fg" : "border-line bg-transparent text-fg-muted hover:text-fg",
         "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-fg-muted",
         focusRing,
         className,

package/src/components/ui/Tooltip.tsx

@@ -87,11 +87,7 @@ export function InfoHint({
 }) {
   return (
     <Tooltip content={children}>
-      <button
-        type="button"
-        aria-label={label}
-        className={cn("rounded-full text-fg-subtle transition-colors hover:text-fg", focusRing)}
-      >
+      <button type="button" aria-label={label} className={cn("rounded-full text-fg-subtle transition-colors hover:text-fg", focusRing)}>
         <Icon className="size-3.5" />
       </button>
     </Tooltip>

package/src/components/ui/VectorInput.tsx

@@ -102,7 +102,7 @@ export function VectorInput({
     >
       {value.map((component, index) => (
         // The components are positional: index is their identity.
-        // eslint-disable-next-line @eslint-react/no-array-index-key -- see above
+        // oxlint-disable-next-line react/no-array-index-key -- see above
         <label key={index} className="flex min-w-0 flex-1 items-center gap-1">
           <span className="shrink-0 font-mono text-[11px] text-fg-subtle">{labelOf(index)}</span>
           <ComponentField

package/src/components/ui/cn.ts

@@ -31,8 +31,7 @@ export function cn(...inputs: ClassValue[]): string {
  *
  * `focus-visible` rather than `focus`, so a mouse click does not leave a ring behind.
  */
-export const focusRing =
-  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-signal";
+export const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-signal";
 
 /**
  * The focus treatment for controls whose own box is the hit target, where an offset ring

package/src/components/ui/highlightSpans.ts

@@ -0,0 +1,110 @@
+/*
+ * The model behind `HighlightedText`: spans over a string, cut into the runs that render
+ * alike, and spans found by regular expressions. Pure, so it is tested without a DOM.
+ *
+ * Offsets are UTF-16 code-unit indices, as `String.prototype.slice` and `RegExp` use them.
+ */
+
+/** What a highlighted span is. Each kind has its own shape on screen, not only its own colour. */
+export type HighlightKind = "placeholder" | "tag" | "protected-term" | "mismatch";
+
+/** A highlighted range of the text: `[start, end)` in UTF-16 code units. */
+export interface HighlightSpan {
+  /** The offset of the span's first code unit. */
+  start: number;
+  /** The offset just past the span's last code unit. */
+  end: number;
+  /** What the span is; it decides the span's shape and its default label. */
+  kind: HighlightKind;
+  /**
+   * What a screen reader hears after the span, instead of the kind's default label: say
+   * *why* it is marked ("missing from the translation").
+   */
+  label?: string | undefined;
+}
+
+/** A run of the text covered by one set of spans; two spans side by side are two runs. */
+export interface TextSegment {
+  /** The run's characters. */
+  text: string;
+  /** Where the run starts in the whole text. */
+  start: number;
+  /** Where it ends. */
+  end: number;
+  /** The spans covering the run, in their order in the input. Empty for plain text. */
+  spans: HighlightSpan[];
+}
+
+/** The kinds in the order their styles stack: a later one wins where two would clash. */
+export const HIGHLIGHT_KINDS: readonly HighlightKind[] = ["tag", "protected-term", "placeholder", "mismatch"];
+
+/**
+ * Cuts `text` into runs that are each covered by one fixed set of spans. Spans are clamped
+ * to the text; empty, inverted and non-finite ones are dropped. Overlapping spans are kept:
+ * the overlap is a run covered by both.
+ *
+ * @param text - The string, shown as text.
+ * @param spans - The highlights, in any order.
+ * @returns The runs, in order, together covering the whole text.
+ */
+export function segmentText(text: string, spans: readonly HighlightSpan[]): TextSegment[] {
+  const length = text.length;
+  const clamp = (offset: number) => Math.floor(Math.max(0, Math.min(length, offset)));
+  const valid = spans
+    .map((span) => ({ span, start: clamp(span.start), end: clamp(span.end) }))
+    .filter(({ start, end }) => Number.isFinite(start) && Number.isFinite(end) && end > start);
+  const cuts = new Set<number>([0, length]);
+  for (const { start, end } of valid) {
+    cuts.add(start);
+    cuts.add(end);
+  }
+  const points = [...cuts].sort((a, b) => a - b);
+  const segments: TextSegment[] = [];
+  for (let i = 0; i + 1 < points.length; i++) {
+    const start = points[i]!;
+    const end = points[i + 1]!;
+    const covering = valid.filter((v) => v.start <= start && v.end >= end).map((v) => v.span);
+    segments.push({ text: text.slice(start, end), start, end, spans: covering });
+  }
+  return segments;
+}
+
+/** A pattern whose matches become spans of one kind. */
+export interface HighlightRule {
+  /** Matched against the whole text, every match (the `g` flag is added if missing). */
+  pattern: RegExp;
+  /** The kind every match gets. */
+  kind: HighlightKind;
+  /** The spans' `label`, if they need one. */
+  label?: string | undefined;
+}
+
+/**
+ * Spans for every match of every rule: `%1`, `<b>`, a glossary term. Empty matches are
+ * skipped. The result is sorted by start, then longest first.
+ *
+ * @param text - The string to search.
+ * @param rules - Each pattern and the kind its matches get.
+ * @returns The spans, ready for `HighlightedText`.
+ *
+ * @example
+ * ```ts
+ * findSpans("Open %1 in <b>ParamsManager</b>", [
+ *   { pattern: /%\d+/, kind: "placeholder" },
+ *   { pattern: /<\/?[a-z][^>]*>/i, kind: "tag" },
+ *   { pattern: /\bParamsManager\b/, kind: "protected-term" },
+ * ]);
+ * ```
+ */
+export function findSpans(text: string, rules: readonly HighlightRule[]): HighlightSpan[] {
+  const spans: HighlightSpan[] = [];
+  for (const rule of rules) {
+    const flags = rule.pattern.flags.includes("g") ? rule.pattern.flags : `${rule.pattern.flags}g`;
+    for (const match of text.matchAll(new RegExp(rule.pattern.source, flags))) {
+      if (match[0] === "") continue;
+      const start = match.index;
+      spans.push({ start, end: start + match[0].length, kind: rule.kind, ...(rule.label === undefined ? {} : { label: rule.label }) });
+    }
+  }
+  return spans.sort((a, b) => a.start - b.start || b.end - a.end);
+}

package/src/components/ui/index.ts

@@ -22,54 +22,24 @@ export {
   type MenuCheckboxItemProps,
   type MenuItemProps,
 } from "./DropdownMenu";
-export {
-  Callout,
-  type CalloutTone,
-  Empty,
-  ErrorBox,
-  ProgressBar,
-  Skeleton,
-  SkeletonRows,
-} from "./Feedback";
+export { Callout, type CalloutTone, Empty, ErrorBox, ProgressBar, Skeleton, SkeletonRows } from "./Feedback";
 export { Field } from "./Field";
-export {
-  Input,
-  NumberInput,
-  Textarea,
-  controlClasses,
-  inputClasses,
-  useControlHeight,
-  type NumberInputProps,
-} from "./Input";
+export { HighlightedText, type HighlightedTextProps } from "./HighlightedText";
+export { findSpans, type HighlightKind, type HighlightRule, type HighlightSpan } from "./highlightSpans";
+export { Input, NumberInput, controlClasses, inputClasses, useControlHeight, type NumberInputProps } from "./Input";
 export { Kbd } from "./Kbd";
-export {
-  Listbox,
-  type ListboxOption,
-  type ListboxOptionState,
-  type ListboxProps,
-} from "./Listbox";
+export { Listbox, type ListboxOption, type ListboxOptionState, type ListboxProps } from "./Listbox";
 export { formatNumber, parseNumber } from "./numberText";
-export {
-  PageHeader,
-  type BackLink,
-  Panel,
-  ReadoutStrip,
-  Section,
-  type ReadoutItem,
-} from "./Panel";
+export { PageHeader, type BackLink, Panel, ReadoutStrip, Section, type ReadoutItem } from "./Panel";
+export { Progress, progressText, type ProgressProps } from "./Progress";
 export { Popover, PopoverClose, type PopoverProps } from "./Popover";
-export {
-  PoseInput,
-  type PoseInputProps,
-  type PoseValue,
-  type Quaternion,
-  type RotationView,
-  type Vec3,
-} from "./PoseInput";
+export { PoseInput, type PoseInputProps, type PoseValue, type Quaternion, type RotationView, type Vec3 } from "./PoseInput";
 export { SegmentedControl } from "./SegmentedControl";
 export { Select, type SelectOption } from "./Select";
 export { Slider } from "./Slider";
-export { Table, type Column } from "./Table";
+export { Table, type Column, type TableWindowing } from "./Table";
+export { sortRows, type SortDirection, type TableSort } from "./tableSort";
+export { Textarea, type TextareaProps } from "./Textarea";
 export { Checkbox, Switch } from "./Toggle";
 export { ToggleChip } from "./ToggleChip";
 export { Toaster, type ToasterProps } from "./Toaster";

package/src/components/ui/listboxModel.ts

@@ -21,12 +21,7 @@ export type ListboxKey = "ArrowDown" | "ArrowUp" | "Home" | "End" | "PageDown" |
  * @returns The new active index; `from` when there is nowhere to go; -1 when every option is
  *   disabled.
  */
-export function moveActive(
-  disabled: readonly boolean[],
-  from: number,
-  key: ListboxKey,
-  page = 10,
-): number {
+export function moveActive(disabled: readonly boolean[], from: number, key: ListboxKey, page = 10): number {
   const enabled = disabled.flatMap((off, index) => (off ? [] : [index]));
   if (enabled.length === 0) return -1;
   const first = enabled[0]!;

package/src/components/ui/tableSort.ts

@@ -0,0 +1,114 @@
+/*
+ * The order of a sorted `Table`, as pure functions so it is tested without a DOM, and so an app
+ * can reproduce the table's order (next/previous navigation, an export, a server that sorts the
+ * same way) with `sortRows`.
+ *
+ * The order is deterministic across machines: strings go through one collator with a fixed
+ * locale, so a server render and the browser that hydrates it put the rows in the same order.
+ * A `Collator` is not DOM, so building it once at module scope keeps the package SSR-safe.
+ */
+
+import type { Column } from "./Table";
+
+/** Which way a column is sorted. Named as `aria-sort` names them: `"ascending"` puts the smallest first. */
+export type SortDirection = "ascending" | "descending";
+
+/** The column a table is sorted by, and which way. Where a sort is expected, `null` means the rows' own order. */
+export interface TableSort {
+  /** The sorted column's `key`. */
+  key: string;
+  /** Which way. */
+  direction: SortDirection;
+}
+
+/** The column fields that decide the order. */
+type SortColumn<Row> = Pick<Column<Row>, "key" | "sortable" | "sortValue" | "compare">;
+
+/** Strings by a fixed English collation that reads digit runs as numbers: "frame 9" before "frame 10". */
+const collator = new Intl.Collator("en", { numeric: true });
+
+/**
+ * Whether a column's header sorts the table: `sortable` if given, otherwise whether the column
+ * says how to order (`sortValue` or `compare`).
+ */
+export function isSortable<Row>(column: Pick<Column<Row>, "sortable" | "sortValue" | "compare">): boolean {
+  return column.sortable ?? (column.sortValue !== undefined || column.compare !== undefined);
+}
+
+/** The sort after a click on `column`'s header: its first direction, then the other, then none. */
+export function nextSort<Row>(current: TableSort | null, column: Pick<Column<Row>, "key" | "firstSort">): TableSort | null {
+  const first = column.firstSort ?? "ascending";
+  if (current?.key !== column.key) return { key: column.key, direction: first };
+  if (current.direction !== first) return null;
+  return { key: column.key, direction: first === "ascending" ? "descending" : "ascending" };
+}
+
+/** A value with no place in the order: `null`, `undefined` or `NaN`. */
+function missing(value: number | string | null | undefined): boolean {
+  return value === null || value === undefined || Number.isNaN(value);
+}
+
+/**
+ * Two present values in ascending order: numbers by value (compared, not subtracted, so two
+ * infinities tie), strings by the collator, and every number before every string.
+ */
+function compareValues(a: number | string, b: number | string): number {
+  if (typeof a === "number" && typeof b === "number") return a < b ? -1 : a > b ? 1 : 0;
+  if (typeof a === "string" && typeof b === "string") return collator.compare(a, b);
+  return typeof a === "number" ? -1 : 1;
+}
+
+/**
+ * The display order of `rows` under `sort`, as indices into `rows`. `Table` renders through it
+ * so each row keeps its original index for the row callbacks.
+ */
+export function sortOrder<Row>(rows: readonly Row[], columns: readonly SortColumn<Row>[], sort: TableSort | null | undefined): number[] {
+  const order = rows.map((_, index) => index);
+  if (!sort) return order;
+  const column = columns.find((candidate) => candidate.key === sort.key);
+  if (!column || !isSortable(column)) return order;
+  const sign = sort.direction === "descending" ? -1 : 1;
+
+  // Every comparison falls back to the original index, so equal rows keep their order in both
+  // directions: descending is not ascending reversed, it is ascending with each run of ties kept.
+  const { compare, sortValue } = column;
+  if (compare) return order.sort((a, b) => sign * compare(rows[a]!, rows[b]!) || a - b);
+  if (!sortValue) return order;
+
+  // One call per row, not two per comparison: a `sortValue` may parse or look something up.
+  const values = rows.map((row) => sortValue(row));
+  return order.sort((a, b) => {
+    const left = values[a];
+    const right = values[b];
+    const leftMissing = missing(left);
+    const rightMissing = missing(right);
+    // Missing values go last whichever way the column is sorted: a reader sorting by score in
+    // either direction wants the rows that have one.
+    if (leftMissing || rightMissing) return leftMissing === rightMissing ? a - b : leftMissing ? 1 : -1;
+    return sign * compareValues(left!, right!) || a - b;
+  });
+}
+
+/**
+ * The rows in the order a `Table` with these columns shows them under `sort`.
+ *
+ * The sort is stable in both directions: rows that compare equal keep their order in `rows`.
+ * With the column's `compare`, that function decides (reversed for `"descending"`). With its
+ * `sortValue`, numbers compare by value and strings by a fixed English collation that reads
+ * digit runs as numbers ("frame 9" before "frame 10"), the same on a server as in any
+ * browser; numbers come before strings; and `null`, `undefined` and `NaN` go last in both
+ * directions. A `null` sort, a `key` that names no column, and a column that is not sortable or
+ * has neither function leave the order as given.
+ *
+ * @param rows - The rows, in their own order. Not modified.
+ * @param columns - The table's columns; only `key`, `sortable`, `sortValue` and `compare` are read.
+ * @param sort - The column and direction, or `null` for the rows' own order.
+ * @returns A new array of the same rows, sorted.
+ */
+export function sortRows<Row>(
+  rows: readonly Row[],
+  columns: readonly Pick<Column<Row>, "key" | "sortable" | "sortValue" | "compare">[],
+  sort: TableSort | null | undefined,
+): Row[] {
+  return sortOrder(rows, columns, sort).map((index) => rows[index]!);
+}

package/src/components/ui/tableWindow.ts

@@ -0,0 +1,96 @@
+/*
+ * The arithmetic of a windowed table: which rows to render for a scroll position, and where
+ * to scroll to bring a row into view. Pure, so it is tested on its own (`tableWindow.test.ts`,
+ * `tableWindow.property.test.ts`) rather than through layout.
+ *
+ * Every row is `rowHeight` tall. The body starts below a sticky header `headerHeight` tall, and
+ * the scroll container shows `viewportHeight` of the whole (header included).
+ */
+
+/** The rows to render, as a half-open range of positions, and the space around them. */
+export interface RowWindow {
+  /** The first rendered position. */
+  start: number;
+  /** One past the last rendered position. */
+  end: number;
+  /** The height, in px, of the rows before `start`. */
+  before: number;
+  /** The height, in px, of the rows from `end` on. */
+  after: number;
+}
+
+/** What the window depends on. Lengths in px. */
+export interface WindowInput {
+  rowCount: number;
+  rowHeight: number;
+  /** The scroll container's `scrollTop`. */
+  scrollTop: number;
+  /** The scroll container's visible height, header included. */
+  viewportHeight: number;
+  /** The sticky header's height. */
+  headerHeight: number;
+  /** Rows rendered beyond each edge of the visible ones. */
+  overscan: number;
+}
+
+/**
+ * The rows that intersect the visible part of the body, plus `overscan` on each side.
+ * Degenerate input (no rows, a row height ≤ 0, NaN) gives an empty window.
+ */
+export function rowWindow({ rowCount, rowHeight, scrollTop, viewportHeight, headerHeight, overscan }: WindowInput): RowWindow {
+  const count = Number.isFinite(rowCount) ? Math.max(0, Math.floor(rowCount)) : 0;
+  if (count === 0 || !(rowHeight > 0)) return { start: 0, end: 0, before: 0, after: 0 };
+  const extra = Math.max(0, Math.floor(overscan) || 0);
+  // In the body's own coordinates the visible part is [scrollTop, scrollTop + viewport − header]:
+  // the sticky header covers the top of the container.
+  const top = Math.max(0, scrollTop || 0);
+  const bottom = Math.max(top, top + Math.max(0, viewportHeight || 0) - Math.max(0, headerHeight || 0));
+  const first = Math.min(count, Math.floor(top / rowHeight));
+  const last = Math.min(count, Math.max(first + 1, Math.ceil(bottom / rowHeight)));
+  const start = Math.max(0, first - extra);
+  const end = Math.min(count, last + extra);
+  return { start, end, before: start * rowHeight, after: (count - end) * rowHeight };
+}
+
+/**
+ * The `scrollTop` that shows the row at `position` in full below the sticky header, moving
+ * as little as possible: unchanged when it is already in view, else aligned to the nearer
+ * edge. A viewport shorter than one row aligns the row's top.
+ */
+export function scrollTopFor(
+  position: number,
+  { rowHeight, scrollTop, viewportHeight, headerHeight }: Pick<WindowInput, "rowHeight" | "scrollTop" | "viewportHeight" | "headerHeight">,
+): number {
+  const rowTop = position * rowHeight;
+  const visible = viewportHeight - headerHeight;
+  if (rowTop < scrollTop || visible < rowHeight) return rowTop;
+  if (rowTop + rowHeight > scrollTop + visible) return rowTop + rowHeight - visible;
+  return scrollTop;
+}
+
+/**
+ * The position a navigation key moves to from `position`, among `rowCount` rows, `page` rows
+ * to a screen; `null` for a key that does not navigate.
+ */
+export function navigate(key: string, position: number, rowCount: number, page: number): number | null {
+  const last = rowCount - 1;
+  if (last < 0) return null;
+  const step = Math.max(1, Math.floor(page));
+  const clamp = (p: number) => Math.min(last, Math.max(0, p));
+  switch (key) {
+    case "ArrowDown":
+      return clamp(position + 1);
+    case "ArrowUp":
+      return clamp(position - 1);
+    case "PageDown":
+      return clamp(position + step);
+    case "PageUp":
+      return clamp(position - step);
+    case "Home":
+      return 0;
+    case "End":
+      return last;
+    default:
+      return null;
+  }
+}

package/src/fonts/fonts.css

@@ -1,5 +1,5 @@
 /*
- * IBM Plex for the @vitavision packages (ADR-0003): import once, next to styles.css.
+ * IBM Plex for the @vitavision packages: import once, next to styles.css.
  *
  *   @import "@vitavision/ui/fonts.css";
  *

package/src/index.ts

@@ -7,14 +7,7 @@
  * @packageDocumentation
  */
 
-export {
-  DEFAULT_THEME_STORAGE_KEY,
-  initTheme,
-  readThemeChoice,
-  resolveTheme,
-  setThemeChoice,
-  type ThemeChoice,
-} from "./theme";
+export { DEFAULT_THEME_STORAGE_KEY, initTheme, readThemeChoice, resolveTheme, setThemeChoice, type ThemeChoice } from "./theme";
 
 export { toneColor, type MeasureTone } from "./tone";
 

package/src/styles.css

@@ -5,12 +5,8 @@
 @source "./";
 
 /*
- * The design token layer.
- *
- * Extracted from visual-anomaly-lab's own token layer (its ADR-0021), where it was written
- * to close a real gap: eleven screens with every colour inlined as a raw `slate-*` utility
- * at 250-odd call sites — the same palette restated 250 times rather than defined once.
- * This file is that definition, shared now by every lab app rather than owned by one.
+ * The design token layer: every colour, radius and font the components use, defined once
+ * here rather than restated as raw palette utilities at each call site.
  *
  * The direction is *instrument*: the chrome is grey so the data can be loud. Anomaly maps,
  * colormaps, grayscale sensor images and vector measurement overlays are what these
@@ -62,6 +58,20 @@
   --radius-panel: 0.625rem;
 }
 
+/* `Progress` while the amount is unknown: a third of the track sweeping across it. */
+@theme {
+  --animate-progress-sweep: progress-sweep 1.4s ease-in-out infinite;
+
+  @keyframes progress-sweep {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(300%);
+    }
+  }
+}
+
 /*
  * Light is the default so a document with no class still renders legibly -- a consumer's
  * own no-flash script sets `.dark` before first paint (see `theme.ts` and the README), but
@@ -70,7 +80,7 @@
  * Every value below is held by `contrast.test.ts` (WCAG 2.2 AA, both themes): text ≥ 4.5:1
  * on every surface, including each verdict colour and `signal` on its own /12 tint, and the
  * control boundary `line-strong` and `signal` (focus, checked) ≥ 3:1. `signal` and `normal`
- * are also kept apart for a tritanope (docs/visual-language.md §1) — the reason the light
+ * are also kept apart for a tritanope — the reason the light
  * accent is a deep slate-teal rather than a brighter one. Change a value only with the tests.
  */
 :root {

package/src/theme.ts

@@ -36,9 +36,7 @@ export const DEFAULT_THEME_STORAGE_KEY = "vitavision-theme";
 // Every DOM access here is inside a function, and guarded: this module is imported on the
 // server too.
 const query = () =>
-  typeof window !== "undefined" && typeof window.matchMedia === "function"
-    ? window.matchMedia("(prefers-color-scheme: dark)")
-    : null;
+  typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
 
 /**
  * The stored preference.
@@ -81,10 +79,7 @@ function paint(choice: ThemeChoice): void {
  * @param choice - The new preference.
  * @param storageKey - The `localStorage` key. Defaults to `DEFAULT_THEME_STORAGE_KEY`.
  */
-export function setThemeChoice(
-  choice: ThemeChoice,
-  storageKey: string = DEFAULT_THEME_STORAGE_KEY,
-): void {
+export function setThemeChoice(choice: ThemeChoice, storageKey: string = DEFAULT_THEME_STORAGE_KEY): void {
   try {
     window.localStorage.setItem(storageKey, choice);
   } catch {