Ping Indicator

1<script lang="ts" module>
2	export type PingStatus = 'excellent' | 'good' | 'fair' | 'poor' | 'offline' | 'idle';
3
4	export type PingThresholds = {
5		/** Below this many ms every bar lights up. */
6		excellent: number;
7		good: number;
8		fair: number;
9	};
10
11	export const PING_SIZES = {
12		sm: { track: 'h-3 w-4', gap: 'gap-[1.5px]', text: 'text-[10px]' },
13		md: { track: 'h-4 w-5', gap: 'gap-[2px]', text: 'text-xs' },
14		lg: { track: 'h-6 w-8', gap: 'gap-[3px]', text: 'text-sm' }
15	} as const;
16
17	export type PingSize = keyof typeof PING_SIZES;
18</script>
19
20<script lang="ts">
21	import { cn } from '$UTILS$';
22	import { onMount, type Snippet } from 'svelte';
23
24	let {
25		url,
26		probe,
27		latency = $bindable<number | null>(null),
28		bars = 4,
29		interval = 3000,
30		timeout = 5000,
31		smoothing = 3,
32		paused = false,
33		pauseWhenHidden = true,
34		thresholds = { excellent: 80, good: 200, fair: 500 },
35		size = 'md',
36		showLatency = false,
37		label,
38		class: className,
39		onsample,
40		children,
41		...rest
42	}: {
43		/** Endpoint to time. Defaults to the current origin. Ignored when `probe` is set. */
44		url?: string;
45		/** Custom probe. Resolve with the round trip in ms, reject to show offline. */
46		probe?: () => Promise<number>;
47		/** Latest round trip, or null when the last probe failed. */
48		latency?: number | null;
49		bars?: number;
50		interval?: number;
51		timeout?: number;
52		/** Number of recent samples to take the median of, so one blip cannot flicker the bars. */
53		smoothing?: number;
54		paused?: boolean;
55		pauseWhenHidden?: boolean;
56		thresholds?: PingThresholds;
57		size?: PingSize;
58		showLatency?: boolean;
59		label?: string;
60		class?: string;
61		onsample?: (ms: number | null) => void;
62		children?: Snippet<[{ status: PingStatus; level: number; latency: number | null }]>;
63		[key: string]: unknown;
64	} = $props();
65
66	// Deliberately not reactive: the polling effect reads it, so tracking it here
67	// would make every probe re-run the effect.
68	let inFlight = false;
69	let hidden = $state(false);
70	let recent = $state<(number | null)[]>([]);
71
72	/** Median of the recent window, ignoring failures unless every sample failed. */
73	const smoothed = $derived.by(() => {
74		const ok = recent.filter((v): v is number => v !== null);
75		if (recent.length === 0) return undefined;
76		if (ok.length === 0) return null;
77
78		const sorted = [...ok].sort((a, b) => a - b);
79		return sorted[Math.floor(sorted.length / 2)];
80	});
81
82// … truncated