@fundar/data-chart-telling 1.17.0 → 1.19.0

package/dist/markers/band/Bands.js

@@ -0,0 +1,48 @@
+import { resolveAccessor } from '../../utils/accessors';
+/** The bands a `band` marker draws, one per category its rows (or its `value`) name, in the order they first come. */
+export class Bands {
+    static #WHOLE = { start: 0, end: 0 };
+    /** The marker's bands. Rows that share a category share one band, which fills what all of their slices do. */
+    static of(marker) {
+        const { rows, categoryOf } = Bands.#rowsOf(marker);
+        const sliceOf = Bands.#sliceOf(marker.slice);
+        const bands = new Map();
+        rows.forEach((row, index) => {
+            const category = categoryOf(row);
+            if (category == null)
+                return;
+            const key = category instanceof Date ? +category : category;
+            const slice = sliceOf(row);
+            const band = bands.get(key);
+            if (!band) {
+                bands.set(key, { category, slice, row, index });
+                return;
+            }
+            // What either one fills: the least left out at each end.
+            band.slice = {
+                start: Math.min(band.slice.start, slice.start),
+                end: Math.min(band.slice.end, slice.end)
+            };
+        });
+        return [...bands.values()];
+    }
+    /** The rows a marker draws from, and the category of each: its `data` and `value`, or its `value`'s own. */
+    static #rowsOf(marker) {
+        const { value, data } = marker;
+        if (data) {
+            const read = resolveAccessor(value);
+            return { rows: data, categoryOf: read };
+        }
+        const values = (Array.isArray(value) ? value : [value]);
+        return { rows: values, categoryOf: (row) => row };
+    }
+    /** Each row's slice: the marker's own, or a function of the row's; the whole band when it gives none. */
+    static #sliceOf(slice) {
+        const whole = Bands.#WHOLE;
+        const read = typeof slice === 'function' ? slice : () => slice;
+        return (row) => {
+            const own = read(row);
+            return own ? { start: own.start ?? 0, end: own.end ?? 0 } : whole;
+        };
+    }
+}

package/dist/markers/bar/BarMarker.svelte

@@ -9,19 +9,19 @@
 
 	/**
 	 * Renders one `'bar'` marker: `role: 'segment'` (visible bar via
-	 * `<BarX>`/`<BarY>`), `role: 'hitArea'` (invisible hover hit region for
-	 * one segment), or `role: 'highlight'` (visible area highlight).
+	 * `<BarX>`/`<BarY>`) or `role: 'hitArea'` (invisible hover hit region for
+	 * one segment).
 	 */
 	let { marker }: { marker: BarMarkerConfig } = $props();
 	const events = MarkerEvents.use(() => marker);
-	/** The hover band stands for no row, so a style that is a function of one does not apply to it. */
-	const flatStyles = $derived(RowStyle.flat(marker.styles));
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
 	const channelFill = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
 
-	const plot = usePlot().svelteplot;
+	const context = usePlot();
+	const plot = context.svelteplot;
+	const isHorizontal = $derived(marker.isHorizontal ?? context.axes?.isHorizontal ?? false);
 	function categoryScaleFor(isHorizontal: boolean) {
 		return isHorizontal ? plot.scales.y : plot.scales.x;
 	}
@@ -38,11 +38,11 @@
 </script>
 
 {#if marker.role === 'segment'}
-	{@const categoryScale = categoryScaleFor(marker.isHorizontal)}
+	{@const categoryScale = categoryScaleFor(isHorizontal)}
 	{@const bandwidth = categoryScale?.type === 'band' ? categoryScale.fn.bandwidth() : 0}
 	{@const centered =
 		marker.thickness != null ? Math.max(0, (bandwidth - marker.thickness) / 2) : undefined}
-	{#if marker.isHorizontal}
+	{#if isHorizontal}
 		<BarX
 			{...events.props}
 			{data}
@@ -82,7 +82,7 @@
 		/>
 	{/if}
 {:else}
-	{@const categoryScale = categoryScaleFor(marker.isHorizontal)}
+	{@const categoryScale = categoryScaleFor(isHorizontal)}
 	{#if categoryScale?.type === 'band'}
 		{@const bandwidth = categoryScale.fn.bandwidth()}
 		{@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
@@ -90,69 +90,28 @@
 		{@const insetRight = (marker.styles?.insetRight ?? 0) * bandwidth}
 		{@const insetTop = (marker.styles?.insetTop ?? 0) * bandwidth}
 		{@const insetBottom = (marker.styles?.insetBottom ?? 0) * bandwidth}
-		{#if marker.role === 'hitArea'}
-			<!-- The band runs the plot's whole value axis, so the pointer needn't be over the bar. -->
-			{@const [rangeMin, rangeMax] = valueExtentFor(marker.isHorizontal)}
-			{#if marker.isHorizontal}
-				<rect
-					class="dct-hit-area"
-					x={rangeMin + insetLeft}
-					y={bandStart + insetBottom}
-					width={Math.max(0, rangeMax - rangeMin - insetLeft - insetRight)}
-					height={Math.max(0, bandwidth - insetTop - insetBottom)}
-					fill="transparent"
-					{...events.forRow(data[0], 0)}
-				/>
-			{:else}
-				<rect
-					class="dct-hit-area"
-					x={bandStart + insetLeft}
-					y={rangeMin + insetBottom}
-					width={Math.max(0, bandwidth - insetLeft - insetRight)}
-					height={Math.max(0, rangeMax - rangeMin - insetTop - insetBottom)}
-					fill="transparent"
-					{...events.forRow(data[0], 0)}
-				/>
-			{/if}
+		<!-- The band runs the plot's whole value axis, so the pointer needn't be over the bar. -->
+		{@const [rangeMin, rangeMax] = valueExtentFor(isHorizontal)}
+		{#if isHorizontal}
+			<rect
+				class="dct-hit-area"
+				x={rangeMin + insetLeft}
+				y={bandStart + insetBottom}
+				width={Math.max(0, rangeMax - rangeMin - insetLeft - insetRight)}
+				height={Math.max(0, bandwidth - insetTop - insetBottom)}
+				fill="transparent"
+				{...events.forRow(data[0], 0)}
+			/>
 		{:else}
-			{@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
-			{#if marker.isHorizontal}
-				{@const thickness = Math.max(0, bandwidth - insetTop - insetBottom) + 2}
-				{@const center = bandStart + insetBottom + (bandwidth - insetTop - insetBottom) / 2}
-				<rect
-					class="hover-area"
-					x={valueMin}
-					y={center - thickness / 2}
-					width={Math.max(0, valueMax - valueMin)}
-					height={thickness}
-					fill={flatStyles.fill}
-					fill-opacity={flatStyles.fillOpacity}
-					stroke={flatStyles.stroke}
-					stroke-width={flatStyles.strokeWidth}
-					stroke-opacity={flatStyles.strokeOpacity}
-					stroke-dasharray={flatStyles.strokeDasharray}
-					rx={flatStyles.borderRadius}
-					pointer-events="none"
-				/>
-			{:else}
-				{@const thickness = Math.max(0, bandwidth - insetLeft - insetRight) + 2}
-				{@const center = bandStart + insetLeft + (bandwidth - insetLeft - insetRight) / 2}
-				<rect
-					class="hover-area"
-					x={center - thickness / 2}
-					y={valueMin}
-					width={thickness}
-					height={Math.max(0, valueMax - valueMin)}
-					fill={flatStyles.fill}
-					fill-opacity={flatStyles.fillOpacity}
-					stroke={flatStyles.stroke}
-					stroke-width={flatStyles.strokeWidth}
-					stroke-opacity={flatStyles.strokeOpacity}
-					stroke-dasharray={flatStyles.strokeDasharray}
-					ry={flatStyles.borderRadius}
-					pointer-events="none"
-				/>
-			{/if}
+			<rect
+				class="dct-hit-area"
+				x={bandStart + insetLeft}
+				y={rangeMin + insetBottom}
+				width={Math.max(0, bandwidth - insetLeft - insetRight)}
+				height={Math.max(0, rangeMax - rangeMin - insetTop - insetBottom)}
+				fill="transparent"
+				{...events.forRow(data[0], 0)}
+			/>
 		{/if}
 	{/if}
 {/if}

package/dist/markers/bollinger/BollingerMarker.svelte

@@ -22,7 +22,7 @@
 	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
-	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const isHorizontal = $derived(marker.isHorizontal ?? plot.axes?.isHorizontal ?? false);
 	const BollingerMark = $derived(isHorizontal ? BollingerX : BollingerY);
 
 	const cfg = $derived(getConfiguration());

package/dist/markers/box/BoxMarker.svelte

@@ -19,7 +19,7 @@
 	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
-	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const isHorizontal = $derived(marker.isHorizontal ?? plot.axes?.isHorizontal ?? false);
 	const BoxMark = $derived(isHorizontal ? BoxX : BoxY);
 
 	/**

package/dist/markers/dot/DotRadius.d.ts

@@ -0,0 +1,11 @@
+import type { BoxScales } from '../../types/markers/labels/box';
+type Dotted = {
+    r?: unknown;
+    styles?: object;
+};
+/** A dot's radius in pixels, as its marker draws it. */
+export declare class DotRadius {
+    /** Its `r`: a number as it is, a channel through the plot's `r` scale; else its `dotRadius`, else `fallback`. */
+    static of(marker: Dotted, row: unknown, scales: BoxScales, fallback?: number): number;
+}
+export {};

package/dist/markers/dot/DotRadius.js

@@ -0,0 +1,21 @@
+const read = (channel, row) => typeof channel === 'function'
+    ? channel(row)
+    : typeof channel === 'string' || typeof channel === 'symbol'
+        ? row?.[channel]
+        : channel;
+/** A dot's radius in pixels, as its marker draws it. */
+export class DotRadius {
+    /** Its `r`: a number as it is, a channel through the plot's `r` scale; else its `dotRadius`, else `fallback`. */
+    static of(marker, row, scales, fallback = 5) {
+        const { r } = marker;
+        if (typeof r === 'number')
+            return r;
+        if (r !== undefined && scales.r) {
+            const value = Number(scales.r.fn(read(r, row)));
+            if (Number.isFinite(value))
+                return value;
+        }
+        const own = marker.styles?.dotRadius;
+        return typeof own === 'number' ? own : fallback;
+    }
+}

package/dist/markers/hover/HoverMarker.svelte

@@ -1,283 +1,25 @@
 <script lang="ts">
 	import { usePlot } from '../../layout/plot/usePlot';
-	import DotMarker from '../dot/DotMarker.svelte';
-	import TextMarker from '../text/TextMarker.svelte';
-	import RuleMarker from '../rule/RuleMarker.svelte';
-	import BarMarker from '../bar/BarMarker.svelte';
-	import { getConfiguration } from '../../configuration/config.svelte';
-	import { NumberFormat } from '../../utils/NumberFormat';
-	import { BandNudge } from '../utils/BandNudge';
-	import type { BandSlice } from '../../types/layout/hover';
-	import type { HoverMarkerConfig } from '../../types/markers/common';
+	import { PointPixel } from '../utils/PointPixel';
 	import type { HoverDisplayPoint } from '../../types/layout/hover';
 
 	/**
-	 * In-SVG hover highlight, rendered *inside* a `<Plot>`. Because it positions
-	 * itself through the host plot's scales, it places the same coordinate
-	 * correctly in every facet - that is what makes cross-facet sync work without
-	 * any pixel math. Draws optional x/y crosshair rules plus a dot + value label
-	 * for each matched point.
-	 *
-	 * Takes the raw `marker` config plus the couple of things it can't know on
-	 * its own - `activePoint` (the specific matched point actually under the
-	 * cursor, for the crosshair position; see `controller.svelte.ts`'s own doc
-	 * comment) and whether the active hover strategy implies a crosshair on
-	 * each axis by default - the same "component owns its own rendering"
-	 * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
-	 * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
-	 * "no crosshair".
-	 *
-	 * `areaX`/`areaY` are a separate, always-explicit opt-in (no implied
-	 * default) for a thickened area highlight in place of the thin crosshair -
-	 * see `HoverMarkerConfig`'s own doc comment. Rendered via `BarMarker`'s
-	 * `role: 'highlight'`, so it renders nothing on an axis without a band
-	 * scale (e.g. a line/scatter plot's continuous axis).
+	 * Where the hover is, rendered *inside* a `<Plot>`: it reports the pixel position of the point under the pointer,
+	 * through the host plot's scales, so a synced plot's tooltip can sit on it. It draws nothing itself - the
+	 * `hover` marker's `back` and `front` markers are drawn by `GeometryLayout`, as every other marker.
 	 */
 	interface Props {
-		data?: HoverDisplayPoint[];
-		/** Narrowed to just the fields this component reads - `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
-		marker: Pick<
-			HoverMarkerConfig,
-			| 'ruleX'
-			| 'ruleY'
-			| 'areaX'
-			| 'areaY'
-			| 'showLabels'
-			| 'format'
-			| 'rule'
-			| 'area'
-			| 'dot'
-			| 'text'
-			| 'decimals'
-			| 'prefix'
-			| 'suffix'
-			| 'signDisplay'
-		>;
 		activePoint?: HoverDisplayPoint | null;
-		impliesCrosshairX?: boolean;
-		impliesCrosshairY?: boolean;
-		/** Reports `activePoint`'s real pixel position within this facet's own box, or `null` when nothing's matched. */
+		/** Reports `activePoint`'s pixel position within this facet's own box, or `null` when nothing's matched. */
 		onActivePointPixel?: (pos: { x: number; y: number } | null) => void;
 	}
 
-	let {
-		data = [],
-		marker,
-		activePoint = null,
-		impliesCrosshairX = false,
-		impliesCrosshairY = false,
-		onActivePointPixel
-	}: Props = $props();
-
-	const cfg = $derived(getConfiguration());
+	let { activePoint = null, onActivePointPixel }: Props = $props();
 	const plot = usePlot().svelteplot;
 
-	/** Scaled pixel position of `value`, centered within its band for a band scale. */
-	function scaledPixel(
-		scale: { type?: string; fn?: (v: never) => unknown } | undefined,
-		value: unknown
-	): number | null {
-		if (!scale?.fn || value == null) return null;
-		const raw = Number(scale.fn(value as never));
-		if (!Number.isFinite(raw)) return null;
-		if (scale.type === 'band') {
-			const bandwidth = (scale.fn as { bandwidth?: () => number }).bandwidth?.() ?? 0;
-			return raw + bandwidth / 2;
-		}
-		return raw;
-	}
-
-	const nudgeOf = (point: { areaInset?: BandSlice } | null | undefined) =>
-		BandNudge.of(plot.scales, point?.areaInset);
-
-	const activePixel = $derived.by((): { x: number; y: number } | null => {
-		if (!activePoint) return null;
-		const x = scaledPixel(plot.scales.x, activePoint.x);
-		const y = scaledPixel(plot.scales.y, activePoint.y);
-		if (x == null || y == null) return null;
-		const nudge = nudgeOf(activePoint);
-		return { x: x + nudge.dx, y: y + nudge.dy };
-	});
+	const activePixel = $derived(activePoint ? PointPixel.of(plot.scales, activePoint) : null);
 
 	$effect(() => {
 		onActivePointPixel?.(activePixel);
 	});
-
-	const showCrosshairX = $derived(
-		marker.ruleX !== false && (impliesCrosshairX || marker.ruleX === true)
-	);
-	const showCrosshairY = $derived(
-		marker.ruleY !== false && (impliesCrosshairY || marker.ruleY === true)
-	);
-	const ruleX = $derived(showCrosshairX ? (activePoint?.x ?? null) : null);
-	const ruleY = $derived(showCrosshairY ? (activePoint?.y ?? null) : null);
-	// areaX/areaY have no implied default - always off unless explicitly set.
-	const areaX = $derived(marker.areaX === true ? (activePoint?.x ?? null) : null);
-	const areaY = $derived(marker.areaY === true ? (activePoint?.y ?? null) : null);
-	/**
-	 * The part of the band an area covers: the active point's own slice (a grouped bar's series), or the whole
-	 * band while the hover matches more than one point in that category, as its dots do.
-	 */
-	const areaInsetOf = (axis: 'x' | 'y'): BandSlice | undefined => {
-		const at = activePoint?.[axis];
-		const key = (value: unknown) => (value instanceof Date ? +value : value);
-		const shared = data.filter((point) => key(point[axis]) === key(at)).length > 1;
-		return shared ? undefined : activePoint?.areaInset;
-	};
-	const areaInsetX = $derived(areaX != null ? areaInsetOf('x') : undefined);
-	const areaInsetY = $derived(areaY != null ? areaInsetOf('y') : undefined);
-	const showLabels = $derived(marker.showLabels ?? true);
-	const format = $derived(marker.format);
-	/** The hovered value as the marker's display fields ask; `undefined` while nothing does, so the plot's own label stays. */
-	const numberOf = $derived(NumberFormat.maybe(NumberFormat.displayOf(marker), cfg));
-	const number = $derived(numberOf ?? NumberFormat.of(undefined, cfg));
-	const labelOf = (d: HoverDisplayPoint): string => {
-		if (format) return format(d, number);
-		const value = Number(d.label);
-		return numberOf && d.label !== undefined && d.label !== '' && Number.isFinite(value)
-			? numberOf(value)
-			: (d.label ?? '');
-	};
-	const ruleStyle = $derived(marker.rule);
-	const areaStyle = $derived({ ...cfg.hover.area, ...marker.area });
-	const dotStyle = $derived(marker.dot);
-	const fontStyle = $derived(marker.text);
-
-	/** Explicit style wins; otherwise fall back to the point's own resolved color. */
-	const resolveColor = (explicit: string | undefined, point: HoverDisplayPoint) =>
-		explicit ?? point.color;
-
-	// Horizontal gap between the dot's edge and an 'outside'-anchored label -
-	// scales with the dot's own resolved radius so the label clears it.
-	const dotRadius = $derived(dotStyle?.dotRadius ?? cfg.hover.dot.dotRadius ?? 5);
-
-	/**
-	 * Resolves `text.textAnchor: 'outside'` into a per-point anchor +
-	 * offset, mirroring the value-label `'outside'` anchor's own left/right
-	 * split (see pyramid/bar's own `ValueAnchor` handling): a positive `x`
-	 * anchors `'start'` and nudges right, a negative `x` anchors `'end'` and
-	 * nudges left - so a diverging mark's label sits on the side of the dot
-	 * away from zero, on whichever side that dot itself landed. Only
-	 * meaningful when the point's `x` is numeric (e.g. pyramid's magnitude
-	 * axis); anything else falls through to the plain `text` style unchanged.
-	 *
-	 * Also overrides `cfg.hover.font`'s default `dy: -18` (meant for a label
-	 * floating *above* the dot) back to vertically centered, and clears the
-	 * dot's own radius horizontally instead of the flat default nudge, so the
-	 * label doesn't collide with the dot it's labeling.
-	 */
-	function resolveFontStyle(point: HoverDisplayPoint) {
-		if (fontStyle?.textAnchor !== 'outside' || typeof point.x !== 'number') {
-			return { ...cfg.hover.font, ...fontStyle, fill: resolveColor(fontStyle?.fill, point) };
-		}
-		const outward = point.x >= 0;
-		const gap = dotRadius + 5;
-		return {
-			...cfg.hover.font,
-			...fontStyle,
-			fill: resolveColor(fontStyle?.fill, point),
-			textAnchor: outward ? ('start' as const) : ('end' as const),
-			lineAnchor: fontStyle?.lineAnchor ?? ('middle' as const),
-			dx: fontStyle?.dx ?? (outward ? gap : -gap),
-			dy: fontStyle?.dy ?? 0
-		};
-	}
 </script>
-
-{#if areaX != null}
-	<BarMarker
-		marker={{
-			type: 'bar',
-			role: 'highlight',
-			isHorizontal: false,
-			data: [],
-			category: areaX,
-			styles: {
-				...areaStyle,
-				insetLeft: areaInsetX?.start,
-				insetRight: areaInsetX?.end
-			}
-		}}
-	/>
-{/if}
-
-{#if areaY != null}
-	<BarMarker
-		marker={{
-			type: 'bar',
-			role: 'highlight',
-			isHorizontal: true,
-			data: [],
-			category: areaY,
-			styles: {
-				...areaStyle,
-				insetTop: areaInsetY?.start,
-				insetBottom: areaInsetY?.end
-			}
-		}}
-	/>
-{/if}
-
-{#if ruleX != null}
-	<g transform="translate({nudgeOf(activePoint).dx}, {nudgeOf(activePoint).dy})">
-		<RuleMarker
-			marker={{
-				type: 'rule',
-				axis: 'x',
-				value: ruleX,
-				styles: { ...cfg.hover.rule, ...ruleStyle }
-			}}
-		/>
-	</g>
-{/if}
-
-{#if ruleY != null}
-	<g transform="translate({nudgeOf(activePoint).dx}, {nudgeOf(activePoint).dy})">
-		<RuleMarker
-			marker={{
-				type: 'rule',
-				axis: 'y',
-				value: ruleY,
-				styles: { ...cfg.hover.rule, ...ruleStyle }
-			}}
-		/>
-	</g>
-{/if}
-
-{#if data.length > 0}
-	{#each data as point (`${point.series ?? ''}_${point.x}_${point.y}`)}
-		<!-- A grouped bar's point sits in its series' slice of the band (`areaInset`), not at the band's middle. -->
-		<g transform="translate({nudgeOf(point).dx}, {nudgeOf(point).dy})">
-			<DotMarker
-				marker={{
-					type: 'dot',
-					data: [point],
-					x: (d) => d.x,
-					y: (d) => d.y,
-					styles: {
-						...cfg.hover.dot,
-						...dotStyle,
-						dotFill: resolveColor(dotStyle?.dotFill, point),
-						dotStroke: resolveColor(dotStyle?.dotStroke, point)
-					}
-				}}
-			/>
-		</g>
-	{/each}
-	{#if showLabels}
-		{#each data as point (`${point.series ?? ''}_${point.x}_${point.y}`)}
-			<g transform="translate({nudgeOf(point).dx}, {nudgeOf(point).dy})">
-				<TextMarker
-					marker={{
-						type: 'text',
-						data: [point],
-						x: (d: HoverDisplayPoint) => d.x,
-						y: (d: HoverDisplayPoint) => d.y,
-						text: labelOf,
-						styles: resolveFontStyle(point)
-					}}
-				/>
-			</g>
-		{/each}
-	{/if}
-{/if}

package/dist/markers/hover/HoverMarker.svelte.d.ts

@@ -1,35 +1,12 @@
-import type { HoverMarkerConfig } from '../../types/markers/common';
 import type { HoverDisplayPoint } from '../../types/layout/hover';
 /**
- * In-SVG hover highlight, rendered *inside* a `<Plot>`. Because it positions
- * itself through the host plot's scales, it places the same coordinate
- * correctly in every facet - that is what makes cross-facet sync work without
- * any pixel math. Draws optional x/y crosshair rules plus a dot + value label
- * for each matched point.
- *
- * Takes the raw `marker` config plus the couple of things it can't know on
- * its own - `activePoint` (the specific matched point actually under the
- * cursor, for the crosshair position; see `controller.svelte.ts`'s own doc
- * comment) and whether the active hover strategy implies a crosshair on
- * each axis by default - the same "component owns its own rendering"
- * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
- * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
- * "no crosshair".
- *
- * `areaX`/`areaY` are a separate, always-explicit opt-in (no implied
- * default) for a thickened area highlight in place of the thin crosshair -
- * see `HoverMarkerConfig`'s own doc comment. Rendered via `BarMarker`'s
- * `role: 'highlight'`, so it renders nothing on an axis without a band
- * scale (e.g. a line/scatter plot's continuous axis).
+ * Where the hover is, rendered *inside* a `<Plot>`: it reports the pixel position of the point under the pointer,
+ * through the host plot's scales, so a synced plot's tooltip can sit on it. It draws nothing itself - the
+ * `hover` marker's `back` and `front` markers are drawn by `GeometryLayout`, as every other marker.
  */
 interface Props {
-    data?: HoverDisplayPoint[];
-    /** Narrowed to just the fields this component reads - `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
-    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'areaX' | 'areaY' | 'showLabels' | 'format' | 'rule' | 'area' | 'dot' | 'text' | 'decimals' | 'prefix' | 'suffix' | 'signDisplay'>;
     activePoint?: HoverDisplayPoint | null;
-    impliesCrosshairX?: boolean;
-    impliesCrosshairY?: boolean;
-    /** Reports `activePoint`'s real pixel position within this facet's own box, or `null` when nothing's matched. */
+    /** Reports `activePoint`'s pixel position within this facet's own box, or `null` when nothing's matched. */
     onActivePointPixel?: (pos: {
         x: number;
         y: number;

package/dist/markers/labels/CurveLabel.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { CurveGeometry } from './geometry/CurveGeometry';
+	import { Box } from '../../layout/margins/Box';
+	import type { PathLabelConfig, PathShape } from '../../types/markers/labels/path';
+	import type { BoxScales } from '../../types/markers/labels/box';
+
+	/** Writes one `'path'` label along the curves of a marker: its lines, an area's edge or each dot's rim. */
+	const {
+		marker,
+		label,
+		shape
+	}: {
+		marker: Record<string, unknown>;
+		label: PathLabelConfig<string, string>;
+		shape: Exclude<PathShape, 'box'>;
+	} = $props();
+	const plot = usePlot();
+	const cfg = $derived(getConfiguration());
+	const id = $props.id();
+
+	const styles = $derived(label.styles ?? {});
+	const curves = $derived(
+		CurveGeometry.build(shape, marker, label, {
+			scales: plot.svelteplot.scales as unknown as BoxScales,
+			gap: cfg.text.label.gap,
+			measure: (text) => Box.ofText(text, Number(styles.fontSize ?? 11), cfg).width
+		})
+	);
+	// Centred on its curve, a label is drawn over a halo of the background so the curve does not cross it.
+	const halo = $derived((label.side ?? '') === 'on' && styles.stroke === undefined);
+	/** A style's value for a curve's row: a function of the row, or the value itself. */
+	const of = (value: unknown, row: unknown) =>
+		(typeof value === 'function' ? value(row) : value) as string | number | undefined;
+</script>
+
+{#each curves as curve, i (i)}
+	<path id="{id}-{i}" d={curve.d} fill="none" stroke="none" />
+	<text
+		dy={curve.dy}
+		dominant-baseline={curve.baseline}
+		text-anchor={curve.textAnchor}
+		fill={String(of(styles.fill, curve.row) ?? curve.fill ?? 'currentColor')}
+		fill-opacity={of(styles.fillOpacity, curve.row)}
+		font-size={styles.fontSize ?? 11}
+		font-weight={of(styles.fontWeight, curve.row)}
+		font-style={of(styles.fontStyle, curve.row)}
+		stroke={halo ? cfg.background : (of(styles.stroke, curve.row) as string | undefined)}
+		stroke-width={halo ? 3 : of(styles.strokeWidth, curve.row)}
+		paint-order={halo ? 'stroke' : styles.paintOrder}
+		pointer-events="none"
+	>
+		<textPath href="#{id}-{i}" startOffset={curve.startOffset}>{curve.text}</textPath>
+	</text>
+{/each}

package/dist/markers/labels/CurveLabel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { PathLabelConfig, PathShape } from '../../types/markers/labels/path';
+type $$ComponentProps = {
+    marker: Record<string, unknown>;
+    label: PathLabelConfig<string, string>;
+    shape: Exclude<PathShape, 'box'>;
+};
+declare const CurveLabel: import("svelte").Component<$$ComponentProps, {}, "">;
+type CurveLabel = ReturnType<typeof CurveLabel>;
+export default CurveLabel;

package/dist/markers/labels/LabelMerge.d.ts

@@ -0,0 +1,11 @@
+import type { TextMarkerConfig } from '../../types/markers/basic/text';
+/** The label a merged row was written by. */
+export declare const LABEL_SOURCE: unique symbol;
+/**
+ * Labels drawn as one `text` marker: those whose other options are alike merge, each row tagged with the label
+ * it comes from, so labels from several markers declutter together and draw as one.
+ */
+export declare class LabelMerge {
+    #private;
+    static merge(markers: TextMarkerConfig[]): TextMarkerConfig[];
+}