@fundar/data-chart-telling 1.17.0 → 1.18.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.18.0] - 2026-11-09
+
+### Added
+
+- A `band` marker: the band of a category on a band scale, across the whole of the other axis - `{ type: 'band', axis: 'x', value: 'Salta' }`. `value` is a category or a list of them, or with `data` a field key or a function of the row; rows that name the same category draw one band. `slice` fills part of it, as the fractions of its width left out at each end (a grouped bar's series), and a band several rows share fills what all of their slices do. `styles` take `AreaStyle`, each field a value or a function of the row, over the configuration's new `band` (`{ fill: '#94a3b8', fillOpacity: 0.25 }`). It takes the pointer only with a handler of its own, and draws nothing on an axis that is not a band scale.
+- The `hover` marker's `active` and `others` restyle the shapes themselves: the ones the hover matches (by its `strategy`) take `active`, every other one `others`, while the hover is on - `fill`, `fillOpacity`, `stroke`, `strokeWidth`, `strokeOpacity` and `strokeDasharray`, each a value or a function of the row. `markers={[{ type: 'hover', active: { fillOpacity: 1 }, others: { fillOpacity: 0.3 } }]}` lightens the hovered tile of a `TreemapPlot` and fades the rest, and does the same on the cells of a `HeatmapPlot`, the bars of a `BarPlot`, a `BulletPlot` and a `PyramidPlot`, a `HistogramPlot`'s bins, a `ScatterPlot`'s dots and the dots of the Cleveland family, whose own shapes are linked to the hover. On a dot they are its `dotFill`, `dotStroke`... The shape is restyled, not covered: its label stays on top, and one with no `fill` of its own is written in the color that reads best on the new one. They go over `styles` and `segments`; a series the legend dims keeps its dimmed fill and opacities.
+- The `hover` marker's `back` and `front`: the markers it draws behind the plot's shapes and in front of them - any marker but another `hover`, a `component` too, with its styles and events. They draw the hovered points, each a row with its `x`, `y`, `label` (written as the marker's number fields or `format` ask), `series`, `color`, `areaInset` and `row`, unless they have `data` of their own, and what they leave unset comes from the hover: `x` and `y`, a `rule`'s and a `band`'s `value` (and a band's `slice`), a `text`'s `text`, the configuration's `hover` look (`rule`, `dot`, `font`, `area`) and the series color of a `dot` and a `text`. `points: 'active'` draws only the point under the pointer, and a function of the point some of them. On a grouped bar plot each is drawn in its series' slice of the band.
+- Each plot kind has a hover of its own that an author's `hover` marker is laid over: `active` and `others` field by field, `back` and `front` replaced when set (`back: []` draws nothing behind). `LinePlot`, `AreaPlot` and `DensityPlot` draw a crosshair along each axis their strategy matches along, and a dot and the value on each point, as the marker did; `ScatterPlot` a crosshair through the point and its value; `SlopePlot` and the Cleveland family (`ClevelandPlot`, `DumbbellPlot`, `ForestPlot`, `LollipopPlot`) a rule along the value axis, a dot and the value; `BarPlot`, `BulletPlot`, `BoxPlot`, `ViolinPlot` and `PyramidPlot` the hovered category's band behind their shapes; `HistogramPlot` the hovered bin's span; `SparklinePlot` a dot; `TreemapPlot` and `HeatmapPlot` only outline the hovered tile or cell, in the configuration's new `hover.active` (`{ stroke: '#111827', strokeWidth: 2 }`).
+- The hover's point under the pointer is the one nearest it of those the hover reaches: a crosshair at it, and `points: 'active'`, follow the pointer up and down a category from one series' point to another's.
+- A row context: what a plot knows of each row it draws, worked out once as it reads its data and kept on the row - its `series`, its `x` and `y` (its own values, not a stack's running total, else where the transforms put it), the `value` it shows, the `row` itself, and what the plot kind works out for it: a `TreemapPlot` tile's `name`, `path` and `share`; a `HistogramPlot` bin's `count`, `from` and `to`; a `BoxPlot` or `ViolinPlot` value's box (`category`, `min`, `p25`, `median`, `p75`, `max`, `count`, `outliers`); a `DensityPlot` point's estimate as its `value`; a `HeatmapPlot` cell's color value. `tooltip.format`, `styles.values.format`, the `hover` marker's points (`point.context`, in its `format` and its `back` and `front` markers) and `usePlot().contextOf(row)` all read it, and `RowContext.of(row)` reads it anywhere, from a row or a copy of it. A plot kind adds its own with a `context` function in its defaults. `PlotRowContext`, `KindRowContext`, `TreemapRowContext`, `HistogramRowContext` and `BoxRowContext` are exported.
+- A `DensityPlot`'s hovered point and its tooltip read as its estimated density, with three decimals.
+- What a plot's hover draws follows the strategy in force as it is shown: a composer's `hover.strategy` changed while the plot is on screen (a scrolly step) changes the crosshair it draws.
+- A marker's `hover` takes `'trigger'` (a hit area of the plot's hover, what `true` was) and `'style'` (its shapes take the hover marker's `active` and `others`); `true` does both. `HoverMarkerConfig`, `HoverShapeStyle` and `HoverLayerMarker` are exported.
+- `examples/TreemapHover.svelte`, a _Configuration / State_ story reading a histogram's row context, and a `Layout/Hover` section of stories: each plot kind's own hover, the strategies (one changed while a plot is shown), the number fields, the scope, `active` and `others`, `back` and `front`.
+
+### Changed
+
+- **Breaking:** `styles.values.format` is `(value, number, context)`, as a tooltip's `format`: the series is `context.series`, the labelled row `context.row`. `format: (v, name) => `${name}: ${v}`` is `format: (v, _number, { series }) => `${series}: ${v}``.
+- **Breaking:** a `HistogramPlot`'s tooltip rows are its bins as they are, without the `count`, `from`, `to` and `group` they had: those are in the `context`, a `tooltip.format`'s third argument (`group` is `series`).
+- A tooltip's `context` holds the row's `x`, `y`, `value` and `row` along with its `series`, and a `TreemapPlot`'s the tile's `name`, `path` and `value` along with its `share`. `TreemapTooltipContext` is `TreemapRowContext`.
+- **Breaking:** the `hover` marker's `ruleX`, `ruleY`, `areaX`, `areaY`, `showLabels`, `rule`, `area`, `dot` and `text` are gone: what it draws is its `back` and `front` markers. `ruleX: false` is `back: []`; `ruleY: true` a `{ type: 'rule', axis: 'y', points: 'active' }` in `back`; `areaX: true` a `{ type: 'band', axis: 'x' }` in `back`; `showLabels: false` is `front: [{ type: 'dot' }]`; `rule`, `area`, `dot` and `text` are the `styles` of those markers. `text.textAnchor: 'outside'` is two `text` markers, each kept to one side of zero by `points`. On every plot but `LinePlot`, `AreaPlot` and `DensityPlot`, `{ type: 'hover' }` draws something else than the crosshair, dot and label it drew: see the hover each plot kind has of its own, above.
+- A marker with `hover: true` (or `'trigger'`) hovers the row of the shape under the pointer, not the first of its rows.
+- A series the legend dims (`mode: 'dim'`) stays hoverable: it is matched and shows in the tooltip. Only one it hides, omits or rescales away is out of the hover.
+
 ## [1.17.0] - 2026-11-06
 
 ### Added

package/dist/configuration/config.svelte.js

@@ -161,7 +161,8 @@ export const DEFAULT_CONFIG = {
         rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
         dot: { dotRadius: 5, dotFill: 'currentColor' },
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
-        area: { fill: '#94a3b8', fillOpacity: 0.4 }
+        area: { fill: '#94a3b8', fillOpacity: 0.4 },
+        active: { stroke: '#111827', strokeWidth: 2 }
     },
     facet: {
         indicator: {
@@ -247,7 +248,7 @@ export const DEFAULT_CONFIG = {
         labelFontSize: 11,
         labelGap: 4
     },
-    // Beside a vertical delta (taken on x), above a horizontal one (on y).
+    band: { fill: '#94a3b8', fillOpacity: 0.25 },
     delta: {
         text: {
             x: { dx: 12, dy: 0, lineAnchor: 'middle', textAnchor: 'start' },

package/dist/index.d.ts

@@ -22,6 +22,11 @@ export { default as GridCell } from './layout/grid/GridCell.svelte';
 export { default as Plot } from './layout/plot/Plot.svelte';
 export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
+export { RowContext } from './phases/context/RowContext';
+export type { PlotRowContext, KindRowContext } from './types/layout/context';
+export type { ContextStageOptions } from './types/phases/context/phase';
+export type { BoxRowContext, BoxSummary } from './types/plots/distribution/box/props';
+export type { HistogramRowContext } from './types/plots/distribution/histogram/props';
 export type { PublicPlotContext, PublicFigureContext, PublicHover, PublicPlotHover, PublicLegend, PublicTimeline } from './layout/plot/PublicPlotContext';
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, cssVarsRule, DEFAULT_CONFIG } from './configuration/config.svelte';
@@ -37,7 +42,7 @@ export { Statistics } from './phases/statistics/Statistics';
 export type { AxisValue, ChannelValue, ChannelName, AxisChannelName, IndependentChannelName, SizeChannelName, ChannelAccessors, GroupingAccessor } from './types/layout/mapping';
 export type { AxisScale, AxisBasedScalesConfig, ChannelScalesConfig } from './types/layout/scales';
 export type { NumberDisplay } from './types/layout/numbers';
-export type { TreemapPlotProps, TreemapTooltipContext } from './types/plots/part-of-a-whole/treemap/props';
+export type { TreemapPlotProps, TreemapRowContext, TreemapTooltipContext } from './types/plots/part-of-a-whole/treemap/props';
 export type { TreemapTile } from './types/transforms/treemap';
 export type { Accessor, Series, SeriesProps, NonAxisDataProps, SingleAxisDataProps, DualAxisDataProps } from './types/plots/data/common';
 export type { BasePlotProps, PlotCoreProps, PlotChromeProps, FigureBoxProps, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig } from './types/plots/props';
@@ -47,7 +52,7 @@ export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentSty
 export type { Range, Area, Segment } from './types/plots/segments/config';
 export type { SymbolType } from './types/plots/constants';
 export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/styling';
-export type { AxisBasedMarkersConfig, BrushSelection } from './types/markers/common';
+export type { AxisBasedMarkersConfig, BrushSelection, HoverMarkerConfig, HoverShapeStyle, HoverLayerMarker } from './types/markers/common';
 export type { StatisticConfig } from './types/layout/statistics';
 export type * from './types/transforms';
 export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/plots/data/geo';

package/dist/index.js

@@ -28,6 +28,8 @@ export { default as GridCell } from './layout/grid/GridCell.svelte';
 export { default as Plot } from './layout/plot/Plot.svelte';
 export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
+// What a plot knows of each row it draws, which every format reads.
+export { RowContext } from './phases/context/RowContext';
 // Custom geo projections - usable as `scales.projection.type`.
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, cssVarsRule, DEFAULT_CONFIG } from './configuration/config.svelte';

package/dist/layout/geometry/GeometryLayout.svelte

@@ -28,6 +28,7 @@
 	import DotMarker from '../../markers/dot/DotMarker.svelte';
 	import TextMarker from '../../markers/text/TextMarker.svelte';
 	import RuleMarker from '../../markers/rule/RuleMarker.svelte';
+	import BandMarker from '../../markers/band/BandMarker.svelte';
 	import HoverMarker from '../../markers/hover/HoverMarker.svelte';
 	import GeoHoverMarker from '../../markers/geo/GeoHoverMarker.svelte';
 	import DeltaMarker from '../../markers/delta/DeltaMarker.svelte';
@@ -54,6 +55,14 @@
 	import type { GeoFeature } from '../../types/plots/data/geo';
 	import { MarkerGrouping } from '../../phases/statistics/MarkerGrouping';
 	import { FrameClipping } from './FrameClipping';
+	import { HoverShapes, type HoverShapesReach } from '../hover/HoverShapes';
+	import { PlotInteraction } from '../interaction/PlotInteraction.svelte';
+	import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
+	import { HoverLayers, type HoverPointGroup } from '../hover/HoverLayers';
+	import { BandNudge } from '../../markers/utils/BandNudge';
+	import { PointPixel } from '../../markers/utils/PointPixel';
+	import { HoverDefaults } from '../hover/HoverDefaults';
+	import type { HoverMarkerConfig } from '../../types/markers/common';
 
 	/**
 	 * Renders every marker in `markers`, in array order, each delegated to the
@@ -107,9 +116,137 @@
 	} = $props();
 
 	const cfg = $derived(getConfiguration());
+	const interaction = PlotInteraction.current(() => cfg);
+
+	/**
+	 * The markers, each `hover` one laid over the plot kind's own hover under the strategy in force - read as they
+	 * are drawn, so a strategy changed while the plot is shown changes what the hover draws.
+	 */
+	const drawn = $derived.by(() => {
+		const look = ctrl.look;
+		return markers.map((marker) =>
+			marker.type === 'hover'
+				? (HoverDefaults.merge(look, marker as HoverMarkerConfig) as MarkerConfig)
+				: marker
+		);
+	});
+
+	/** The look the hover markers give the shapes linked to the hover. */
+	const shapes = $derived(new HoverShapes(drawn));
+	const reach: HoverShapesReach = {
+		roleOf: (row, series) => ctrl.roleOf(row as TData, series),
+		dimmed: (row) => {
+			const series = row[SERIES_KEY];
+			return typeof series === 'string' && interaction.fillFor(series) !== undefined;
+		},
+		get cfg() {
+			return cfg;
+		}
+	};
 
 	// Mounted inside svelteplot's `<Plot>`, the one place the margins it settles on can be read.
-	PlotMargins.current()?.follow(usePlot().svelteplot);
+	const svelteplot = usePlot().svelteplot;
+	PlotMargins.current()?.follow(svelteplot);
+
+	/**
+	 * The points a hover marker draws over: every matched one; with `series`, that series' only, in its color -
+	 * or with `scope: 'segment'`, each segment's, in the segment's. The first is the active one of a series.
+	 */
+	function hoverGroupsOf(marker: HoverMarkerConfig): HoverPointGroup[] {
+		const points = ctrl.points;
+		if (points.length === 0) return [];
+		const nearest = JSON.parse(nearestKey || '{}') as {
+			all?: number;
+			bySeries?: Record<string, number>;
+		};
+		const scope = marker.series;
+		if (!scope) {
+			const active = nearest.all !== undefined ? points[nearest.all] : undefined;
+			return [{ key: '', points, active: active ?? ctrl.activePoint }];
+		}
+		const under = nearest.bySeries?.[scope];
+		const activeOf = (list: typeof points) =>
+			(under !== undefined && list.find((p) => p.row === points[under].row)) || list[0] || null;
+		const group = groupByName.get(scope);
+		if (!group) return [];
+		const own = points.filter((p) => p.series === scope);
+		const colored = (list: typeof own, color: string | undefined) =>
+			color ? list.map((p) => ({ ...p, color })) : list;
+		if (marker.scope !== 'segment') {
+			const seriesPoints = colored(own, group.segments[0]?.color ?? group.color);
+			return [{ key: scope, points: seriesPoints, active: activeOf(seriesPoints) }];
+		}
+		return group.segments.map((seg, i) => {
+			// p.row (TData) is always a superset of TSeries in practice, not provable across two independent generics.
+			const segPoints = colored(
+				own.filter((p) => seg.match(p.row as unknown as TSeries)),
+				seg.color
+			);
+			return { key: `${scope}-${i}`, points: segPoints, active: activeOf(segPoints) };
+		});
+	}
+
+	/**
+	 * The hovered point under the pointer: of all of them, and of each series - the nearest to the pointer, not the
+	 * first the strategy matched, so a crosshair at it follows the pointer across the series of a category. Kept as
+	 * text, so the hover's markers are built again only when it changes, not at every move of the pointer.
+	 */
+	const nearestKey = $derived.by(() => {
+		const cursor = ctrl.cursor;
+		const points = ctrl.points;
+		if (!cursor || points.length === 0) return '';
+		const all = PointPixel.nearest(svelteplot.scales, points, cursor);
+		const bySeries: Record<string, number> = {};
+		for (const series of new Set(points.map((p) => p.series))) {
+			if (series == null) continue;
+			const indexes = points.flatMap((p, i) => (p.series === series ? [i] : []));
+			const nearest = PointPixel.nearest(
+				svelteplot.scales,
+				indexes.map((i) => points[i]),
+				cursor
+			);
+			if (nearest >= 0) bySeries[series] = indexes[nearest];
+		}
+		return JSON.stringify({ all: all >= 0 ? all : undefined, bySeries });
+	});
+
+	/** The markers `marker`'s `layer` draws, over each group of the points it draws over. */
+	function hoverPartsOf(marker: HoverMarkerConfig, layer: 'back' | 'front', index: number) {
+		return hoverGroupsOf(marker).flatMap((group) =>
+			HoverLayers.parts(
+				marker,
+				layer,
+				{
+					...group,
+					points: HoverLayers.labelled(group.points, marker, cfg),
+					active: group.active && HoverLayers.labelled([group.active], marker, cfg)[0]
+				},
+				cfg
+			).map((part) => ({ ...part, key: `${index}-${part.key}` }))
+		);
+	}
+
+	/**
+	 * What each hover marker draws, behind and in front, built once per hover - not as it is drawn, where reading
+	 * the scales would build its markers anew whenever svelteplot settles them, and settle them again.
+	 */
+	const hoverLayers = $derived(
+		new Map(
+			drawn.flatMap((marker, index) =>
+				marker.type === 'hover'
+					? [
+							[
+								index,
+								{
+									back: hoverPartsOf(marker as HoverMarkerConfig, 'back', index),
+									front: hoverPartsOf(marker as HoverMarkerConfig, 'front', index)
+								}
+							] as const
+						]
+					: []
+			)
+		)
+	);
 
 	const scopedSeriesOf = (marker: MarkerConfig): string | undefined =>
 		'series' in marker && typeof marker.series === 'string' && marker.series
@@ -131,19 +268,20 @@
 	}
 
 	/**
-	 * A marker with `hover: true`, with the plot's hover added to its own pointer handlers: entering or moving
-	 * over any of its shapes hovers its rows - as they are drawn now, should the plot have been laid out again
-	 * under a resting pointer - and leaving it ends the hover.
+	 * A marker with `hover: true` or `'trigger'`, with the plot's hover added to its own pointer handlers: entering or
+	 * moving over one of its shapes hovers that shape's row, and leaving it ends the hover.
 	 */
 	function withHover(marker: MarkerConfig, rows: TData[] | TSeries[]): MarkerConfig {
-		if (!('hover' in marker) || marker.hover !== true) return marker;
+		if (!('hover' in marker) || (marker.hover !== true && marker.hover !== 'trigger'))
+			return marker;
 		const own = marker as CommonMarkerEvents & { data?: unknown[] };
-		const hovered = (own.data ?? rows) as TData[];
+		// The row of the shape under the pointer - a copy svelteplot hands over, which the hover finds by its place.
+		const hovered = (row: unknown) => [(row ?? (own.data ?? rows)[0]) as TData];
 		return {
 			...marker,
 			onpointerenter: (event: Event, row: unknown, index: number) => {
 				own.onpointerenter?.(event, row, index);
-				ctrl.onPointer(hovered);
+				ctrl.onPointer(hovered(row));
 			},
 			onpointerleave: (event: Event, row: unknown, index: number) => {
 				own.onpointerleave?.(event, row, index);
@@ -151,7 +289,7 @@
 			},
 			onpointermove: (event: Event, row: unknown, index: number) => {
 				own.onpointermove?.(event, row, index);
-				ctrl.onPointer(hovered);
+				ctrl.onPointer(hovered(row));
 			}
 		} as MarkerConfig;
 	}
@@ -210,6 +348,8 @@
 		<TextMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'rule'}
 		<RuleMarker {marker} />
+	{:else if marker.type === 'band'}
+		<BandMarker {marker} />
 	{:else if marker.type === 'geo'}
 		<GeoFeaturesMarker {marker} />
 	{:else if marker.type === 'graticule'}
@@ -247,15 +387,6 @@
 		<marker.component {...marker.props} data={marker.data ?? seriesData} />
 	{:else if marker.type === 'geo-component'}
 		<marker.component {...marker.props} data={marker.data ?? rows} />
-	{:else if marker.type === 'hover'}
-		<HoverMarker
-			{marker}
-			data={ctrl.points}
-			activePoint={ctrl.activePoint}
-			impliesCrosshairX={ctrl.impliesCrosshairX}
-			impliesCrosshairY={ctrl.impliesCrosshairY}
-			onActivePointPixel={ctrl.reportActivePointPixel}
-		/>
 	{:else if marker.type === 'geo-hover'}
 		<GeoHoverMarker {marker} data={ctrl.points} />
 	{:else if marker.type === 'delta'}
@@ -264,41 +395,16 @@
 {/snippet}
 
 {#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
-	<MarkerOffset {marker}>
-		{@render drawMarker(withHover(marker, rows), rows)}
-	</MarkerOffset>
+	<!-- In parts the hover styles alike, while it restyles the marker's shapes. -->
+	{#each shapes.split(withHover(marker, rows), rows, reach) as part (part.key)}
+		<MarkerOffset marker={part.marker}>
+			{@render drawMarker(part.marker, rows)}
+		</MarkerOffset>
+	{/each}
 {/snippet}
 
 {#snippet renderScoped(marker: MarkerConfig, group: ScopedMarkerGroup<TSeries>)}
-	{#if marker.type === 'hover'}
-		{@const seriesPoints = ctrl.points.filter((p) => p.series === group.name)}
-		{#if marker.scope === 'segment'}
-			{#each group.segments as seg, segIdx (`${group.name}-hover-segment-${segIdx}`)}
-				<!-- p.row (TData) is always a superset of TSeries in practice, not provable across two independent generics. -->
-				{@const segPoints = seriesPoints.filter((p) => seg.match(p.row as unknown as TSeries))}
-				{#if segPoints.length > 0}
-					<HoverMarker
-						marker={MarkerGrouping.withHoverSeriesColor(marker, seg.color)}
-						data={segPoints}
-						activePoint={segPoints[0] ?? null}
-						impliesCrosshairX={ctrl.impliesCrosshairX}
-						impliesCrosshairY={ctrl.impliesCrosshairY}
-					/>
-				{/if}
-			{/each}
-		{:else}
-			<HoverMarker
-				marker={MarkerGrouping.withHoverSeriesColor(
-					marker,
-					group.segments[0]?.color ?? group.color
-				)}
-				data={seriesPoints}
-				activePoint={seriesPoints[0] ?? null}
-				impliesCrosshairX={ctrl.impliesCrosshairX}
-				impliesCrosshairY={ctrl.impliesCrosshairY}
-			/>
-		{/if}
-	{:else if marker.type === 'component'}
+	{#if marker.type === 'component'}
 		{#if marker.scope === 'segment'}
 			{#each group.segments as seg, segIdx (`${group.name}-component-segment-${segIdx}`)}
 				{@const segmentData = group.data.filter((row) => seg.match(row))}
@@ -316,10 +422,35 @@
 	{/if}
 {/snippet}
 
-<!-- Every marker in array order, so a later one always draws on top. -->
+{#snippet renderHoverLayer(index: number, layer: 'back' | 'front')}
+	{#each hoverLayers.get(index)?.[layer] ?? [] as part (part.key)}
+		<!-- A point in a slice of its band (a grouped bar's series) is drawn in the middle of it. -->
+		{@const nudge = BandNudge.of(svelteplot.scales, part.slice)}
+		<g transform="translate({nudge.dx}, {nudge.dy})">
+			<FrameClip clip={FrameClipping.isClipped(part.marker)}>
+				{@render renderMarker(part.marker as MarkerConfig, data)}
+			</FrameClip>
+		</g>
+	{/each}
+{/snippet}
+
+<!-- What the hover draws behind the plot's shapes, before any of them. -->
+{#each [...hoverLayers.keys()] as index (index)}
+	{@render renderHoverLayer(index, 'back')}
+{/each}
+
+<!-- Every marker in array order, so a later one always draws on top; a hover marker draws its front markers. -->
 {#each markers as marker, i (markerKey(marker, i))}
 	{@const scope = scopedSeriesOf(marker)}
-	{#if scope === undefined}
+	{#if marker.type === 'hover'}
+		{#if scope === undefined}
+			<HoverMarker
+				activePoint={ctrl.activePoint}
+				onActivePointPixel={ctrl.reportActivePointPixel}
+			/>
+		{/if}
+		{@render renderHoverLayer(i, 'front')}
+	{:else if scope === undefined}
 		<FrameClip clip={FrameClipping.isClipped(marker)}>
 			{@render renderMarker(marker, data)}
 		</FrameClip>
@@ -335,8 +466,11 @@
 {#each markers as marker, i (markerKey(marker, i))}
 	{@const scope = scopedSeriesOf(marker)}
 	{#if 'label' in marker && marker.label && (scope === undefined || groupByName.has(scope))}
-		<MarkerOffset {marker}>
-			<MarkerLabel marker={{ ...marker, data: marker.data ?? data }} />
-		</MarkerOffset>
+		<!-- Split as the shapes are, so a label reads on its shape's color under the hover. -->
+		{#each shapes.split(marker, data, reach) as part (part.key)}
+			<MarkerOffset marker={part.marker}>
+				<MarkerLabel marker={{ ...part.marker, data: part.marker.data ?? data }} />
+			</MarkerOffset>
+		{/each}
 	{/if}
 {/each}

package/dist/layout/hover/HoverDefaults.d.ts

@@ -0,0 +1,52 @@
+import type { HoverDisplayPoint, HoverStrategy } from '../../types/layout/hover';
+import type { HoverLayerMarker, HoverLook, HoverMarkerConfig } from '../../types/markers/common';
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+/** An end of a span: a field of the hovered point's context (else of its row), or a function of the point. */
+type SpanEnd = string | ((point: HoverDisplayPoint) => unknown);
+/**
+ * The hover a plot kind draws, and how an author's `hover` marker is laid over it. Its parts - a crosshair rule, a
+ * band, a dot, a label - are the markers a kind composes its own hover from; each takes the configuration's
+ * `hover` look as it is drawn (see `HoverLayers`).
+ */
+export declare class HoverDefaults {
+    /** A crosshair along `axis`, at the point under the pointer. */
+    static rule(axis: 'x' | 'y'): HoverLayerMarker;
+    /** The band of each hovered category along `axis`, or its series' slice of it when it alone is hovered there. */
+    static band(axis: 'x' | 'y'): HoverLayerMarker;
+    /**
+     * The span of the point under the pointer along `axis`, from `from` to `to`, across the whole of the other axis -
+     * where a band is no category's: a histogram's bin, an interval on a continuous axis. Each end is a field of the
+     * point's context (a bin's `from` and `to`) - else of its row - or a function of the point.
+     */
+    static span(axis: 'x' | 'y', from: SpanEnd, to: SpanEnd): HoverLayerMarker;
+    /** A dot on each hovered point, in its series' color. */
+    static dot(): HoverLayerMarker;
+    /** Each hovered point's label, in its series' color. */
+    static text(): HoverLayerMarker;
+    /**
+     * A hover that only restyles the shapes, with `active` and `others`: a treemap's tiles, a heatmap's cells. The
+     * hovered one is outlined, in the configuration's `hover.active`.
+     */
+    static shapes(cfg: PlotStylesConfig): HoverLook;
+    /** The hovered category's band along `axis`, behind the plot's shapes: a bar's, a box's, a violin's. */
+    static behindBand(axis: 'x' | 'y'): HoverLook;
+    /** The span of the point under the pointer along `axis`, behind the plot's shapes: a histogram's bin. */
+    static behindSpan(axis: 'x' | 'y', from: SpanEnd, to: SpanEnd): HoverLook;
+    /**
+     * A rule along the value axis at the point under the pointer, and a dot and a label on each point - for a plot
+     * whose other axis holds a few positions or categories, where a crosshair along it says little (a slope's, a
+     * Cleveland plot's).
+     */
+    static valueRule(valueAxis: 'x' | 'y'): HoverLook;
+    /**
+     * The hover every plot kind starts from: a crosshair along each axis its `strategy` matches along (unless
+     * `crosshair` is off), and a dot and a label on each hovered point.
+     */
+    static of(strategy: HoverStrategy, crosshair?: boolean | undefined): HoverLook;
+    /**
+     * An author's `hover` marker over its kind's `look`: `active` and `others` field by field, `back` and `front`
+     * the author's when set (an empty list draws nothing), the kind's otherwise.
+     */
+    static merge(look: HoverLook, marker: HoverMarkerConfig): HoverMarkerConfig;
+}
+export {};

package/dist/layout/hover/HoverDefaults.js

@@ -0,0 +1,96 @@
+/**
+ * The hover a plot kind draws, and how an author's `hover` marker is laid over it. Its parts - a crosshair rule, a
+ * band, a dot, a label - are the markers a kind composes its own hover from; each takes the configuration's
+ * `hover` look as it is drawn (see `HoverLayers`).
+ */
+export class HoverDefaults {
+    /** A crosshair along `axis`, at the point under the pointer. */
+    static rule(axis) {
+        return { type: 'rule', axis, points: 'active' };
+    }
+    /** The band of each hovered category along `axis`, or its series' slice of it when it alone is hovered there. */
+    static band(axis) {
+        return { type: 'band', axis };
+    }
+    /**
+     * The span of the point under the pointer along `axis`, from `from` to `to`, across the whole of the other axis -
+     * where a band is no category's: a histogram's bin, an interval on a continuous axis. Each end is a field of the
+     * point's context (a bin's `from` and `to`) - else of its row - or a function of the point.
+     */
+    static span(axis, from, to) {
+        const end = (side) => typeof side === 'function'
+            ? side
+            : (point) => point.context?.[side] ?? point.row?.[side];
+        return {
+            type: 'rect',
+            [`${axis}1`]: end(from),
+            [`${axis}2`]: end(to),
+            points: 'active'
+        };
+    }
+    /** A dot on each hovered point, in its series' color. */
+    static dot() {
+        return { type: 'dot' };
+    }
+    /** Each hovered point's label, in its series' color. */
+    static text() {
+        return { type: 'text' };
+    }
+    /**
+     * A hover that only restyles the shapes, with `active` and `others`: a treemap's tiles, a heatmap's cells. The
+     * hovered one is outlined, in the configuration's `hover.active`.
+     */
+    static shapes(cfg) {
+        return { back: [], front: [], active: { ...cfg.hover.active } };
+    }
+    /** The hovered category's band along `axis`, behind the plot's shapes: a bar's, a box's, a violin's. */
+    static behindBand(axis) {
+        return { back: [HoverDefaults.band(axis)], front: [] };
+    }
+    /** The span of the point under the pointer along `axis`, behind the plot's shapes: a histogram's bin. */
+    static behindSpan(axis, from, to) {
+        return { back: [HoverDefaults.span(axis, from, to)], front: [] };
+    }
+    /**
+     * A rule along the value axis at the point under the pointer, and a dot and a label on each point - for a plot
+     * whose other axis holds a few positions or categories, where a crosshair along it says little (a slope's, a
+     * Cleveland plot's).
+     */
+    static valueRule(valueAxis) {
+        return {
+            back: [HoverDefaults.rule(valueAxis)],
+            front: [HoverDefaults.dot(), HoverDefaults.text()]
+        };
+    }
+    /**
+     * The hover every plot kind starts from: a crosshair along each axis its `strategy` matches along (unless
+     * `crosshair` is off), and a dot and a label on each hovered point.
+     */
+    static of(strategy, crosshair = true) {
+        const axes = strategy === 'x'
+            ? ['x']
+            : strategy === 'y'
+                ? ['y']
+                : strategy === 'punctual'
+                    ? ['x', 'y']
+                    : [];
+        return {
+            back: crosshair === false ? [] : axes.map((axis) => HoverDefaults.rule(axis)),
+            front: [HoverDefaults.dot(), HoverDefaults.text()]
+        };
+    }
+    /**
+     * An author's `hover` marker over its kind's `look`: `active` and `others` field by field, `back` and `front`
+     * the author's when set (an empty list draws nothing), the kind's otherwise.
+     */
+    static merge(look, marker) {
+        const styles = (own, base) => own || base ? { ...base, ...own } : undefined;
+        return {
+            ...marker,
+            active: styles(marker.active, look.active),
+            others: styles(marker.others, look.others),
+            back: marker.back ?? look.back ?? [],
+            front: marker.front ?? look.front ?? []
+        };
+    }
+}

package/dist/layout/hover/HoverLayers.d.ts

@@ -0,0 +1,35 @@
+import type { BandSlice, HoverDisplayPoint } from '../../types/layout/hover';
+import type { HoverLayerMarker, HoverMarkerConfig } from '../../types/markers/common';
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+type Point = HoverDisplayPoint & {
+    row?: unknown;
+};
+/** One marker a hover layer draws, keyed so it keeps its place while the hover moves, and the slice it is moved into. */
+export type HoverLayerPart = {
+    key: string;
+    marker: HoverLayerMarker;
+    slice?: BandSlice;
+};
+/** Some hovered points: of the whole plot, of one series, or of one segment of it, with the one under the pointer. */
+export type HoverPointGroup = {
+    key: string;
+    points: Point[];
+    active: Point | null;
+};
+/**
+ * The markers a `hover` marker draws in its `back` and `front` layers, over the hovered points: each with the
+ * points as its rows, unless it has `data` of its own, placed at them, and split by the slice of the band a point
+ * sits in (a grouped bar's series), to be moved into it - all but a `band`, which takes the slice itself.
+ */
+export declare class HoverLayers {
+    #private;
+    /** `points` with their label written as `marker`'s number fields, or its `format`, ask. */
+    static labelled<T extends Point>(points: readonly T[], marker: HoverMarkerConfig, cfg: PlotStylesConfig): T[];
+    /**
+     * The markers of `marker`'s `layer` over a group of points. A marker over points that sit in a slice of their
+     * band is one part per slice, which `slice` names, to be moved into it as it is drawn - the move is in pixels,
+     * so it is left to the drawing, which knows the band's width.
+     */
+    static parts(marker: HoverMarkerConfig, layer: 'back' | 'front', group: HoverPointGroup, cfg: PlotStylesConfig): HoverLayerPart[];
+}
+export {};