@faintshadow/flarecharts 26.3.1

package/dist/components/Bars.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { NormalizedPoint, XValue } from '../core/normalize.js';
+import type { StackOffset, StackOrder } from '../core/stack.js';
+declare function $$render<T>(): {
+    props: {
+        data: readonly T[];
+        x?: (datum: T, index: number) => XValue;
+        y?: (datum: T, index: number) => number | null | undefined;
+        color?: string;
+        /** Per-point color override (wins over color/palette) — end of the precedence chain. */
+        colorFor?: (datum: T, index: number) => string | undefined;
+        name?: string;
+        /** Accessible series description (announced when keyboard focus enters the series). */
+        description?: string;
+        /** Per-point announcement override for keyboard navigation. */
+        describePoint?: (point: NormalizedPoint<T>) => string | undefined;
+        /**
+         * Off (default) → side-by-side grouping with other bar series.
+         * 'normal' → stack values; 'percent' → stack normalized to ±100.
+         * (stream/silhouette also accepted but are intended for areas.)
+         */
+        stacking?: StackOffset;
+        /** Layer ordering within the stack group. */
+        order?: StackOrder;
+        /** Stack group id — series sharing it stack together (default one shared group). */
+        stack?: string;
+        /** Fraction of the slot width trimmed from EACH side of a bar (0–0.5). */
+        barPadding?: number;
+        /** Corner radius. */
+        rx?: number;
+        /** Override the palette slot. */
+        index?: number;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Bars: $$IsomorphicComponent;
+type Bars<T> = InstanceType<typeof Bars<T>>;
+export default Bars;

package/dist/components/Box.svelte

@@ -0,0 +1,287 @@
+<script lang="ts" generics="T">
+	import { onDestroy, onMount } from 'svelte';
+	import { Tween } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+	import { getChartContext } from '../core/context.svelte.js';
+	import type { NormalizedPoint, XValue } from '../core/normalize.js';
+	import { isBandScale } from '../core/scales.js';
+	import { resolveBoxStats } from '../core/stats.js';
+	import type { BoxStats, WhiskerMode } from '../core/stats.js';
+	import { boxEnterPhases, motionDuration } from '../core/motion.svelte.js';
+
+	interface Props {
+		data: readonly T[];
+		x?: (datum: T, index: number) => XValue;
+		low?: (datum: T, index: number) => number | null | undefined;
+		q1?: (datum: T, index: number) => number | null | undefined;
+		median?: (datum: T, index: number) => number | null | undefined;
+		q3?: (datum: T, index: number) => number | null | undefined;
+		high?: (datum: T, index: number) => number | null | undefined;
+		outliers?: (datum: T, index: number) => readonly number[] | undefined;
+		/** Raw samples — the lib computes the five-number summary (wins over the precomputed accessors). */
+		samples?: (datum: T, index: number) => readonly number[] | undefined;
+		whisker?: WhiskerMode;
+		whiskerK?: number;
+		color?: string;
+		colorFor?: (datum: T, index: number) => string | undefined;
+		name?: string;
+		description?: string;
+		describePoint?: (point: NormalizedPoint<T>) => string | undefined;
+		/** Fraction of the slot width trimmed from EACH side (0–0.5). */
+		boxPadding?: number;
+		index?: number;
+		class?: string;
+	}
+
+	let {
+		data,
+		x,
+		low,
+		q1,
+		median,
+		q3,
+		high,
+		outliers,
+		samples,
+		whisker = 'tukey',
+		whiskerK = 1.5,
+		color,
+		colorFor,
+		name,
+		description,
+		describePoint,
+		boxPadding = 0.15,
+		index: indexProp,
+		class: klass = ''
+	}: Props = $props();
+
+	const ctx = getChartContext();
+
+	function asX(v: unknown, fallback: number): XValue {
+		if (typeof v === 'number' || typeof v === 'string' || v instanceof Date) return v;
+		return fallback;
+	}
+
+	function boxX(datum: T, i: number): XValue {
+		if (x) return asX(x(datum, i), i);
+		if (Array.isArray(datum) && datum.length >= 6) return asX(datum[0], i);
+		if (datum && typeof datum === 'object' && !Array.isArray(datum) && 'x' in datum) {
+			return asX((datum as { x: unknown }).x, i);
+		}
+		return i;
+	}
+
+	interface ResolvedBox {
+		x: XValue;
+		stats: BoxStats;
+		point: NormalizedPoint<T>;
+	}
+
+	const boxes = $derived.by((): ResolvedBox[] => {
+		const accessors = { low, q1, median, q3, high, outliers, samples };
+		const out: ResolvedBox[] = [];
+		for (let i = 0; i < data.length; i++) {
+			const datum = data[i];
+			const stats = resolveBoxStats(datum, i, accessors, { whisker, k: whiskerK });
+			if (!stats) continue;
+			const xv = boxX(datum, i);
+			out.push({ x: xv, stats, point: { x: xv, y: stats.median, datum, index: i } });
+		}
+		return out;
+	});
+
+	const points = $derived(boxes.map((b) => b.point));
+	const yExtents = $derived(
+		boxes.map((b): [number, number] => {
+			const all = [b.stats.low, b.stats.high, ...b.stats.outliers];
+			return [Math.min(...all), Math.max(...all)];
+		})
+	);
+	const statsByIndex = $derived(new Map(boxes.map((b) => [b.point.index, b.stats])));
+
+	const round = (n: number) => Math.round(n * 100) / 100;
+	const defaultDescribePoint = (p: NormalizedPoint<unknown>): string | undefined => {
+		const s = statsByIndex.get(p.index);
+		if (!s) return undefined;
+		const n = s.outliers.length;
+		return `${String(p.x)}: median ${round(s.median)}, IQR ${round(s.q1)}–${round(s.q3)}, range ${round(s.low)}–${round(s.high)}${n ? `, ${n} outlier${n > 1 ? 's' : ''}` : ''}`;
+	};
+
+	const registration = ctx.registerSeries(() => ({
+		points,
+		name,
+		color: resolvedColor,
+		isBox: true,
+		yExtents,
+		description,
+		describePoint: (describePoint ?? defaultDescribePoint) as
+			| ((p: NormalizedPoint<unknown>) => string | undefined)
+			| undefined
+	}));
+	onDestroy(registration.unregister);
+
+	const seriesIndex = $derived(indexProp ?? registration.index);
+	const resolvedColor = $derived(ctx.seriesColor(seriesIndex, color));
+	const visible = $derived(ctx.isSeriesVisible(registration.index));
+
+	function continuousStep(centers: number[]): number {
+		if (centers.length < 2) return 24;
+		const sorted = [...centers].sort((a, b) => a - b);
+		let minDiff = Infinity;
+		for (let i = 1; i < sorted.length; i++) {
+			const diff = sorted[i] - sorted[i - 1];
+			if (diff > 0 && diff < minDiff) minDiff = diff;
+		}
+		return Number.isFinite(minDiff) ? minDiff * 0.8 : 24;
+	}
+
+	interface BoxGeom {
+		rectX: number;
+		rectW: number;
+		cx: number;
+		capX1: number;
+		capX2: number;
+		yMedian: number;
+		yLow: number;
+		yHigh: number;
+		yQ1: number;
+		yQ3: number;
+		outliers: number[];
+		point: NormalizedPoint<T>;
+		color: string;
+	}
+
+	const geoms = $derived.by((): BoxGeom[] => {
+		if (!visible) return [];
+		const slot = ctx.barSlots.bySeries.get(registration.index);
+		if (slot === undefined) return [];
+		const slotCount = ctx.barSlots.count;
+		const xScale = ctx.xScale;
+		const band = isBandScale(xScale);
+		const step = band ? 0 : continuousStep(boxes.map((b) => ctx.xPos(b.x)).filter(Number.isFinite));
+
+		const out: BoxGeom[] = [];
+		for (const b of boxes) {
+			let groupStart: number;
+			let groupWidth: number;
+			if (band) {
+				const start = xScale(String(b.x));
+				if (start === undefined) continue;
+				groupStart = start;
+				groupWidth = xScale.bandwidth();
+			} else {
+				const center = ctx.xPos(b.x);
+				if (!Number.isFinite(center)) continue;
+				groupWidth = step;
+				groupStart = center - groupWidth / 2;
+			}
+			const slotWidth = groupWidth / slotCount;
+			const inset = slotWidth * Math.max(0, Math.min(0.5, boxPadding));
+			const rectX = groupStart + slot * slotWidth + inset;
+			const rectW = Math.max(0, slotWidth - 2 * inset);
+			const cx = rectX + rectW / 2;
+
+			out.push({
+				rectX,
+				rectW,
+				cx,
+				capX1: cx - rectW / 4,
+				capX2: cx + rectW / 4,
+				yMedian: ctx.yPos(b.stats.median),
+				yLow: ctx.yPos(b.stats.low),
+				yHigh: ctx.yPos(b.stats.high),
+				yQ1: ctx.yPos(b.stats.q1),
+				yQ3: ctx.yPos(b.stats.q3),
+				outliers: b.stats.outliers,
+				point: b.point,
+				color: colorFor?.(b.point.datum, b.point.index) ?? resolvedColor
+			});
+		}
+		return out;
+	});
+
+	// Staged entrance: progress 0→1 on mount drives the phase factors.
+	let rootEl: SVGGElement | undefined = $state();
+	let dur = $state(0);
+	const progress = new Tween(1, { duration: () => dur, easing: cubicOut });
+	onMount(() => {
+		dur = motionDuration(rootEl);
+		if (dur > 0) {
+			progress.set(0, { duration: 0 });
+			progress.set(1);
+		}
+	});
+	const phase = $derived(boxEnterPhases(progress.current));
+</script>
+
+{#if visible}
+	<g class="fc-series fc-box {klass}" data-name={name} bind:this={rootEl}>
+		{#each geoms as g (g.point.index)}
+			{@const m = g.yMedian}
+			{@const q1 = m + (g.yQ1 - m) * phase.grow}
+			{@const q3 = m + (g.yQ3 - m) * phase.grow}
+			<g class="fc-box-group" style="--fc-box-series-color: {g.color}">
+				<line class="fc-box-whisker" x1={g.cx} x2={g.cx} y1={q3} y2={g.yHigh} opacity={phase.frame} />
+				<line class="fc-box-whisker" x1={g.cx} x2={g.cx} y1={q1} y2={g.yLow} opacity={phase.frame} />
+				<line class="fc-box-cap" x1={g.capX1} x2={g.capX2} y1={g.yHigh} y2={g.yHigh} opacity={phase.frame} />
+				<line class="fc-box-cap" x1={g.capX1} x2={g.capX2} y1={g.yLow} y2={g.yLow} opacity={phase.frame} />
+				<rect
+					class="fc-box-rect"
+					x={g.rectX}
+					y={Math.min(q1, q3)}
+					width={g.rectW}
+					height={Math.abs(q1 - q3)}
+					opacity={phase.frame}
+				/>
+				<line
+					class="fc-box-median"
+					x1={g.rectX}
+					x2={g.rectX + g.rectW}
+					y1={m}
+					y2={m}
+					opacity={phase.median}
+				/>
+				{#each g.outliers as o, oi (oi)}
+					<circle class="fc-box-outlier" cx={g.cx} cy={ctx.yPos(o)} r={2} opacity={phase.median} />
+				{/each}
+			</g>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.fc-box-rect {
+		fill: var(--fc-box-fill, var(--fc-box-series-color));
+		fill-opacity: var(--fc-box-fill-opacity, 0.4);
+		stroke: var(--fc-box-stroke, var(--fc-box-series-color));
+		stroke-width: 1.5;
+	}
+	.fc-box-median {
+		stroke: var(--fc-box-median, var(--fc-box-series-color));
+		stroke-width: 2;
+	}
+	.fc-box-whisker {
+		stroke: var(--fc-box-whisker, var(--fc-box-stroke, var(--fc-box-series-color)));
+		stroke-width: 1.5;
+	}
+	.fc-box-cap {
+		stroke: var(--fc-box-cap, var(--fc-box-stroke, var(--fc-box-series-color)));
+		stroke-width: 1.5;
+	}
+	.fc-box-outlier {
+		fill: none;
+		stroke: var(--fc-box-outlier, var(--fc-box-stroke, var(--fc-box-series-color)));
+		stroke-width: 1;
+	}
+	.fc-box-group {
+		transition: opacity var(--fc-duration-hover, 120ms) var(--fc-ease, ease);
+	}
+	:global(.fc-svg:has(.fc-series:hover)) .fc-series:not(:hover) .fc-box-group {
+		opacity: 0.4;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.fc-box-group {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/Box.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { NormalizedPoint, XValue } from '../core/normalize.js';
+import type { WhiskerMode } from '../core/stats.js';
+declare function $$render<T>(): {
+    props: {
+        data: readonly T[];
+        x?: (datum: T, index: number) => XValue;
+        low?: (datum: T, index: number) => number | null | undefined;
+        q1?: (datum: T, index: number) => number | null | undefined;
+        median?: (datum: T, index: number) => number | null | undefined;
+        q3?: (datum: T, index: number) => number | null | undefined;
+        high?: (datum: T, index: number) => number | null | undefined;
+        outliers?: (datum: T, index: number) => readonly number[] | undefined;
+        /** Raw samples — the lib computes the five-number summary (wins over the precomputed accessors). */
+        samples?: (datum: T, index: number) => readonly number[] | undefined;
+        whisker?: WhiskerMode;
+        whiskerK?: number;
+        color?: string;
+        colorFor?: (datum: T, index: number) => string | undefined;
+        name?: string;
+        description?: string;
+        describePoint?: (point: NormalizedPoint<T>) => string | undefined;
+        /** Fraction of the slot width trimmed from EACH side (0–0.5). */
+        boxPadding?: number;
+        index?: number;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Box: $$IsomorphicComponent;
+type Box<T> = InstanceType<typeof Box<T>>;
+export default Box;

package/dist/components/Chart.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { ChartContext, setChartContext } from '../core/context.svelte.js';
+	import type { AxisOptions, Padding } from '../core/types.js';
+	import type { XValue } from '../core/normalize.js';
+	import { stackKey } from '../core/stack.js';
+
+	interface Props {
+		/** X axis options (type inferred from data when omitted). */
+		x?: AxisOptions;
+		/** Y axis options. */
+		y?: AxisOptions;
+		/** Space reserved around the plot area for axes/labels. */
+		padding?: Padding;
+		/** Accessible name for the chart. */
+		label?: string;
+		/** Longer accessible description (rendered for screen readers). */
+		description?: string;
+		/** Screen-reader data table fallback (opt-out). */
+		dataTable?: boolean;
+		/** Arrow-key point navigation (opt-out). */
+		keyboard?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		x,
+		y,
+		padding,
+		label = 'Chart',
+		description,
+		dataTable = true,
+		keyboard = true,
+		class: klass = '',
+		children
+	}: Props = $props();
+
+	// One context instance for the chart's lifetime; reactivity lives inside it.
+	// The closure keeps options reactive without ever replacing the context.
+	const ctx = setChartContext(new ChartContext(() => ({ x, y, padding })));
+
+	// Pointer position in plot-area coordinates; null outside the plot.
+	// Tooltip/Crosshair derive everything from ctx.hoverPointer.
+	function handlePointerMove(event: PointerEvent) {
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		const px = event.clientX - rect.left - ctx.padding.left;
+		const py = event.clientY - rect.top - ctx.padding.top;
+		ctx.pointer =
+			px >= 0 && px <= ctx.innerWidth && py >= 0 && py <= ctx.innerHeight
+				? { x: px, y: py }
+				: null;
+	}
+
+	function clearPointer() {
+		ctx.pointer = null;
+	}
+
+	// --- Keyboard navigation + announcements -------------------------------
+
+	let announcement = $state('');
+	let lastAnnouncedSeries = -1;
+
+	function formatXText(value: XValue): string {
+		return value instanceof Date
+			? value.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+			: String(value);
+	}
+
+	const KEY_MOVES: Record<string, [number, number]> = {
+		ArrowRight: [1, 0],
+		ArrowLeft: [-1, 0],
+		ArrowDown: [0, 1],
+		ArrowUp: [0, -1],
+		Home: [Number.NEGATIVE_INFINITY, 0],
+		End: [Number.POSITIVE_INFINITY, 0]
+	};
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			ctx.clearFocus();
+			announcement = '';
+			return;
+		}
+		const move = KEY_MOVES[event.key];
+		if (!move) return;
+		event.preventDefault();
+		const focused = ctx.moveFocusBy(move[0], move[1]);
+		if (!focused) return;
+		const { entry, point } = focused;
+		const custom = entry.describePoint?.(point);
+		const seriesName = entry.name ?? `Series ${entry.index + 1}`;
+		let text = custom ?? `${seriesName}, ${formatXText(point.x)}: ${point.y}`;
+		if (entry.index !== lastAnnouncedSeries && entry.description) {
+			text = `${entry.description}. ${text}`;
+		}
+		lastAnnouncedSeries = entry.index;
+		announcement = text;
+	}
+
+	function handleNavBlur() {
+		ctx.clearFocus();
+		lastAnnouncedSeries = -1;
+		announcement = '';
+	}
+
+	// --- Screen-reader data table -------------------------------------------
+
+	const tableData = $derived.by(() => {
+		if (!dataTable) return null;
+		const visible = ctx.seriesEntries.filter((e) => e.visible && e.points.length > 0);
+		if (visible.length === 0) return null;
+		const xKeys: { key: string; label: string }[] = [];
+		const seen = new Set<string>();
+		for (const entry of visible) {
+			for (const p of entry.points) {
+				const key = stackKey(p.x);
+				if (!seen.has(key)) {
+					seen.add(key);
+					xKeys.push({ key, label: formatXText(p.x) });
+				}
+			}
+		}
+		const lookup = visible.map((entry) => {
+			const m = new Map<string, number | null>();
+			for (const p of entry.points) m.set(stackKey(p.x), p.y);
+			return m;
+		});
+		return { visible, xKeys, lookup };
+	});
+
+	const hasSeries = $derived(ctx.seriesEntries.some((e) => e.visible && e.points.length > 0));
+</script>
+
+<div
+	class="fc-chart {klass}"
+	role="group"
+	aria-label={label}
+	bind:clientWidth={ctx.width}
+	bind:clientHeight={ctx.height}
+	onpointermove={handlePointerMove}
+	onpointerleave={clearPointer}
+	onpointercancel={clearPointer}
+>
+	{#if description}
+		<p class="fc-sr-only">{description}</p>
+	{/if}
+
+	{#if keyboard && hasSeries}
+		<button
+			type="button"
+			class="fc-sr-only fc-kbd-nav"
+			aria-label="{label}. Interactive chart: use arrow keys to move between points and series, Home/End for first and last point, Escape to leave."
+			onkeydown={handleKeydown}
+			onblur={handleNavBlur}
+		></button>
+		<div class="fc-sr-only" aria-live="polite" role="status">{announcement}</div>
+	{/if}
+
+	{#if ctx.width > 0 && ctx.height > 0}
+		{@render children?.()}
+	{/if}
+
+	{#if tableData}
+		<table class="fc-sr-only fc-data-table">
+			<caption>{label}{description ? `. ${description}` : ''}</caption>
+			<thead>
+				<tr>
+					<th scope="col">x</th>
+					{#each tableData.visible as entry (entry.index)}
+						<th scope="col">{entry.name ?? `Series ${entry.index + 1}`}</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#each tableData.xKeys as xk (xk.key)}
+					<tr>
+						<th scope="row">{xk.label}</th>
+						{#each tableData.lookup as seriesMap, si (si)}
+							<td>{seriesMap.get(xk.key) ?? '—'}</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/if}
+</div>
+
+<style>
+	.fc-chart {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		font-family: var(--fc-font, ui-sans-serif, system-ui, sans-serif);
+	}
+	.fc-sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		padding: 0;
+		border: 0;
+		clip-path: inset(50%);
+		overflow: hidden;
+		white-space: nowrap;
+	}
+</style>

package/dist/components/Chart.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { AxisOptions, Padding } from '../core/types.js';
+interface Props {
+    /** X axis options (type inferred from data when omitted). */
+    x?: AxisOptions;
+    /** Y axis options. */
+    y?: AxisOptions;
+    /** Space reserved around the plot area for axes/labels. */
+    padding?: Padding;
+    /** Accessible name for the chart. */
+    label?: string;
+    /** Longer accessible description (rendered for screen readers). */
+    description?: string;
+    /** Screen-reader data table fallback (opt-out). */
+    dataTable?: boolean;
+    /** Arrow-key point navigation (opt-out). */
+    keyboard?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Chart: import("svelte").Component<Props, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/components/Crosshair.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { getChartContext } from '../core/context.svelte.js';
+	import { hitBisectX } from '../core/hit.js';
+	import type { HitResult } from '../core/hit.js';
+
+	interface Props {
+		/** Vertical line at the (snapped) x position. */
+		x?: boolean;
+		/** Horizontal line at the pointer y position. */
+		y?: boolean;
+		/** Snap the x line to the nearest data point across visible series. */
+		snap?: boolean;
+		dash?: string;
+		width?: number;
+		class?: string;
+	}
+
+	let { x = true, y = false, snap = true, dash = '3 3', width = 1, class: klass = '' }: Props =
+		$props();
+
+	const ctx = getChartContext();
+
+	const anchor = $derived.by(() => {
+		const ptr = ctx.hoverPointer;
+		if (!ptr) return null;
+		if (!snap) return { px: ptr.x, py: ptr.y };
+		let best: HitResult | null = null;
+		for (const entry of ctx.seriesEntries) {
+			if (!entry.visible) continue;
+			const hit = hitBisectX(entry.points, ctx.xPos, ctx.yPos, ptr.x);
+			if (hit && (!best || hit.distance < best.distance)) best = hit;
+		}
+		return { px: best?.px ?? ptr.x, py: ptr.y };
+	});
+</script>
+
+{#if anchor}
+	<g class="fc-crosshair {klass}">
+		{#if x}
+			<line
+				x1={anchor.px}
+				x2={anchor.px}
+				y1="0"
+				y2={ctx.innerHeight}
+				stroke-dasharray={dash}
+				stroke-width={width}
+			/>
+		{/if}
+		{#if y}
+			<line
+				x1="0"
+				x2={ctx.innerWidth}
+				y1={anchor.py}
+				y2={anchor.py}
+				stroke-dasharray={dash}
+				stroke-width={width}
+			/>
+		{/if}
+	</g>
+{/if}
+
+<style>
+	.fc-crosshair line {
+		stroke: var(--fc-crosshair, #94a3b8);
+		fill: none;
+	}
+</style>