@fundar/data-chart-telling 0.0.63 → 1.0.0

package/dist/markers/density/DensityMarker.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { Density } from 'svelteplot';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { DensityMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'density'` marker as one `<Density>` per group - 2D KDE
+	 * contour bands. A grouped marker (its `color`, or its `grouping`, which
+	 * a plot's own grouping is inherited into) is split here, not through
+	 * svelteplot's own `z`: svelteplot would color an accessor stroke with its
+	 * own scale, which doesn't match the plot's series colors. Each group gets
+	 * its own literal stroke from the same color channel the dots use.
+	 * svelteplot's own `Density` puts no class on its rendered group unless
+	 * given one, so this wrapper sets `class="density"` for the same
+	 * class-based scoping every other marker kind gets from svelteplot itself.
+	 */
+	let { marker }: { marker: DensityMarkerConfig } = $props();
+
+	const data = $derived(marker.data ?? []);
+	const cfg = $derived(getConfiguration());
+	const groupKey = $derived(marker.color ?? marker.grouping);
+	const channelFill = $derived(MarkerChannels.buildFill(data, groupKey, marker.scales, cfg));
+
+	const groups = $derived.by(() => {
+		if (groupKey === undefined) return [{ rows: data, stroke: undefined as string | undefined }];
+		const valueOf =
+			typeof groupKey === 'function'
+				? groupKey
+				: (d: Record<string, unknown>) => d[groupKey as string];
+		const buckets = new SvelteMap<string, Record<string, unknown>[]>();
+		for (const row of data) {
+			const value = valueOf(row);
+			if (value == null) continue;
+			const key = String(value);
+			const bucket = buckets.get(key);
+			if (bucket) bucket.push(row);
+			else buckets.set(key, [row]);
+		}
+		return [...buckets.values()].map((rows) => ({
+			rows,
+			stroke: channelFill?.(rows[0]) as string | undefined
+		}));
+	});
+</script>
+
+{#each groups as group, i (i)}
+	<Density
+		data={group.rows}
+		class="density"
+		x={marker.x}
+		y={marker.y}
+		weight={marker.weight}
+		bandwidth={marker.bandwidth}
+		thresholds={marker.thresholds}
+		fill={marker.styles?.fill}
+		fillOpacity={marker.styles?.fillOpacity}
+		stroke={marker.styles?.stroke ?? group.stroke}
+		strokeWidth={marker.styles?.strokeWidth}
+		strokeOpacity={marker.styles?.strokeOpacity}
+	/>
+{/each}

package/dist/markers/density/DensityMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DensityMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: DensityMarkerConfig;
+};
+declare const DensityMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type DensityMarker = ReturnType<typeof DensityMarker>;
+export default DensityMarker;

package/dist/markers/difference/DifferenceMarker.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { DifferenceY } from 'svelteplot';
+	import type { DifferenceMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'difference'` marker as `<DifferenceY>` - no horizontal
+	 * counterpart exists in svelteplot, so this always renders vertically.
+	 * svelteplot spreads its props over its defaults, so an explicit `undefined`
+	 * would erase them - each default is restated here instead.
+	 */
+	let { marker }: { marker: DifferenceMarkerConfig } = $props();
+
+	const data = $derived(marker.data ?? []);
+</script>
+
+<DifferenceY
+	{data}
+	x={marker.x}
+	x1={marker.x1}
+	x2={marker.x2}
+	y={marker.y}
+	y1={marker.y1}
+	y2={marker.y2}
+	curve={marker.curve ?? 'linear'}
+	tension={marker.tension ?? 0}
+	positiveFill={marker.positiveFill ?? 'red'}
+	positiveFillOpacity={marker.positiveFillOpacity ?? 1}
+	negativeFill={marker.negativeFill ?? 'blue'}
+	negativeFillOpacity={marker.negativeFillOpacity ?? 1}
+/>

package/dist/markers/difference/DifferenceMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DifferenceMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: DifferenceMarkerConfig;
+};
+declare const DifferenceMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type DifferenceMarker = ReturnType<typeof DifferenceMarker>;
+export default DifferenceMarker;

package/dist/markers/dot/DotMarker.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" generics="TData = Record<string, unknown>">
+	import { Dot } from 'svelteplot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { resolveAccessor } from '../../plots/utils/accessors';
+	import type { DotMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'dot'` marker. `x`/`y` also accept a literal number/Date
+	 * (every row draws at that fixed position) - used by markers like
+	 * `DeltaMarker` that place a dot at a computed point.
+	 */
+	const { marker }: { marker: DotMarkerConfig } = $props();
+
+	const data = $derived((marker.data ?? []) as TData[]);
+	const x = $derived(marker.x);
+	const y = $derived(marker.y);
+	const rProp = $derived(marker.r);
+	const fillProp = $derived(marker.fill);
+	const color = $derived(marker.color ? resolveAccessor(marker.color) : undefined);
+	const opacityProp = $derived(marker.opacity ? resolveAccessor(marker.opacity) : undefined);
+	const symbolProp = $derived(marker.symbol ? resolveAccessor(marker.symbol) : undefined);
+	const scales = $derived(marker.scales);
+	const styles = $derived(marker.styles);
+
+	const cfg = $derived(getConfiguration());
+
+	/**
+	 * A per-row accessor (a field key string, now that it's forwarded raw, or
+	 * a function) reads its position per row and needs real `data` to do
+	 * that - an empty `data` legitimately means "nothing to plot", not "draw
+	 * one anyway". Only a true literal (a number/Date, or unset) draws one
+	 * dot at a fixed point regardless of `data`.
+	 */
+	const isAccessor = (v: unknown) => typeof v === 'function' || typeof v === 'string';
+	const displayData = $derived(
+		data.length > 0 || isAccessor(x) || isAccessor(y) ? data : [{} as TData]
+	);
+
+	const resolvedFill = $derived(MarkerChannels.buildFill(displayData, color, scales, cfg));
+	const resolvedSymbolFn = $derived(
+		MarkerChannels.buildSymbol(displayData, symbolProp, scales, cfg)
+	);
+	/**
+	 * `opacity` can't be a live per-row function the way `color`/`symbol` are -
+	 * svelteplot re-derives its own domain from whatever a `fillOpacity`
+	 * accessor returns and re-normalizes it (no "already resolved" escape
+	 * hatch for a bare number, unlike a recognized CSS color/shape string) -
+	 * so an active `opacity` channel splits `displayData` into buckets,
+	 * each rendered as its own `<Dot>` call with one literal opacity value.
+	 */
+	const opacityBuckets = $derived(
+		MarkerChannels.buildOpacityBuckets(displayData, opacityProp, scales, cfg)
+	);
+
+	const r = $derived(rProp ?? styles?.dotRadius ?? 5);
+	/**
+	 * svelteplot reads a literal `'none'` as a value for its color scale (it
+	 * isn't a CSS color to it) and paints it with the scale's first color, so
+	 * `'none'` is handed over as unset, which svelteplot draws as no paint.
+	 */
+	const paint = <T,>(value: T): T | undefined => (value === 'none' ? undefined : value);
+	const fill = $derived(paint(resolvedFill ?? fillProp ?? styles?.dotFill ?? 'currentColor'));
+	const flatFillOpacity = $derived(styles?.dotFillOpacity ?? 1);
+	const symbol = $derived(resolvedSymbolFn ?? styles?.dotSymbol ?? 'circle');
+	const stroke = $derived(paint(styles?.dotStroke ?? 'currentColor'));
+	const strokeWidth = $derived(styles?.dotStrokeWidth ?? 1);
+	const strokeOpacity = $derived(styles?.dotStrokeOpacity ?? 1);
+	const strokeDasharray = $derived(styles?.dotStrokeDasharray);
+</script>
+
+{#if opacityBuckets}
+	{#each opacityBuckets as bucket (bucket.value)}
+		<Dot
+			data={bucket.data}
+			x={x ?? 0}
+			y={y ?? 0}
+			{r}
+			{fill}
+			fillOpacity={bucket.value}
+			{stroke}
+			{strokeWidth}
+			{strokeOpacity}
+			{strokeDasharray}
+			{symbol}
+		/>
+	{/each}
+{:else}
+	<Dot
+		data={displayData}
+		x={x ?? 0}
+		y={y ?? 0}
+		{r}
+		{fill}
+		fillOpacity={flatFillOpacity}
+		{stroke}
+		{strokeWidth}
+		{strokeOpacity}
+		{strokeDasharray}
+		{symbol}
+	/>
+{/if}

package/dist/markers/{DotMarker.svelte.d.ts → dot/DotMarker.svelte.d.ts}

@@ -1,21 +1,9 @@
-import type { MarkerProps } from '../types/markers/props';
-import type { AxisValue } from '../types/layout/scales';
-import type { DotStyle } from '../types/plots/styling';
-import type { ColorsStyle } from '../types/layout/styles';
+import type { DotMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: DotMarkerConfig;
+};
 declare function $$render<TData = Record<string, unknown>>(): {
-    props: MarkerProps<TData> & {
-        x?: AxisValue | ((d: TData) => AxisValue);
-        y?: AxisValue | ((d: TData) => AxisValue);
-        /** Per-row radius, or a constant — overrides `style.dotRadius` when set. */
-        r?: number | ((d: TData) => number);
-        /** Per-row fill, overriding `style.dotFill` — ignored when `value` is set. */
-        fill?: (d: TData) => string;
-        /** Continuous value driving a per-dot color ramp through `style.colors` — takes priority over `fill`/`style.dotFill` when set. */
-        value?: (d: TData) => number;
-        style?: DotStyle & {
-            colors?: ColorsStyle;
-        };
-    };
+    props: $$ComponentProps;
     exports: {};
     bindings: "";
     slots: {};

package/dist/markers/geo/GeoFeaturesMarker.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Geo } from 'svelteplot';
+	import { PlotContext } from '../../layout/plot/PlotContext';
+	import type { GeoFeaturesMarkerConfig } from '../../types/markers/geo';
+
+	/** Renders one `'geo'` marker - one resolved-style bucket of the base map's own features, as a single `<Geo>` call. */
+	let { marker }: { marker: GeoFeaturesMarkerConfig } = $props();
+
+	const hover = PlotContext.current()?.hover;
+	// An `inset` marker's panel has its own hover.
+	const overInset = (e: Event) => (e.target as Element | null)?.closest?.('.dct-geo-inset') != null;
+	const enter = $derived(
+		marker.hover
+			? (e: Event, d: Record<string, unknown>) => {
+					const row = marker.hover?.get(d.__id as string);
+					if (row && !overInset(e)) hover?.onPointer([row as never]);
+				}
+			: undefined
+	);
+	const leave = $derived(
+		marker.hover
+			? (e: Event) => {
+					if (!overInset(e)) hover?.onLeave();
+				}
+			: undefined
+	);
+</script>
+
+<Geo
+	data={marker.data}
+	fill={marker.fill}
+	fillOpacity={marker.fillOpacity ?? 1}
+	stroke={marker.stroke ?? 'currentColor'}
+	strokeWidth={marker.strokeWidth ?? 0.5}
+	style="vector-effect: non-scaling-stroke"
+	onclick={marker.onclick}
+	onpointerenter={enter}
+	onpointerleave={leave}
+/>

package/dist/markers/{GeoFeaturesMarker.svelte.d.ts → geo/GeoFeaturesMarker.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { GeoFeaturesMarkerConfig } from '../types/markers/geo';
+import type { GeoFeaturesMarkerConfig } from '../../types/markers/geo';
 type $$ComponentProps = {
     marker: GeoFeaturesMarkerConfig;
 };

package/dist/markers/geo/GeoHoverMarker.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Geo } from 'svelteplot';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { GeoHoverMarkerConfig } from '../../types/markers/geo';
+	import type { HoverPoint } from '../../types/layout/hover';
+
+	/** Renders the hovered feature restyled in place - no dot, no label. `pointer-events: none` so it never steals hover from the base map underneath it. */
+	let {
+		marker,
+		data
+	}: { marker: GeoHoverMarkerConfig; data: HoverPoint<Record<string, unknown>>[] } = $props();
+
+	const cfg = $derived(getConfiguration());
+	const style = $derived({ ...cfg.hover.area, ...marker.styles });
+</script>
+
+{#if data.length > 0}
+	<Geo
+		data={data.map((p) => p.row)}
+		fill={style.fill}
+		fillOpacity={style.fillOpacity}
+		stroke={style.stroke}
+		strokeWidth={style.strokeWidth}
+		strokeOpacity={style.strokeOpacity}
+		strokeDasharray={style.strokeDasharray}
+		style="vector-effect: non-scaling-stroke; pointer-events: none;"
+	/>
+{/if}

package/dist/markers/{GeoHoverMarker.svelte.d.ts → geo/GeoHoverMarker.svelte.d.ts}

@@ -1,5 +1,5 @@
-import type { GeoHoverMarkerConfig } from '../types/markers/geo';
-import type { HoverPoint } from '../types/layout/tooltip';
+import type { GeoHoverMarkerConfig } from '../../types/markers/geo';
+import type { HoverPoint } from '../../types/layout/hover';
 type $$ComponentProps = {
     marker: GeoHoverMarkerConfig;
     data: HoverPoint<Record<string, unknown>>[];

package/dist/markers/geo/GraticuleMarker.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Graticule } from 'svelteplot';
+	import type { GeoGraticuleMarkerConfig } from '../../types/markers/geo';
+
+	/** Renders one `'graticule'` marker - longitude/latitude gridlines. */
+	let { marker }: { marker: GeoGraticuleMarkerConfig } = $props();
+</script>
+
+<Graticule
+	step={marker.step}
+	stepX={marker.stepX}
+	stepY={marker.stepY}
+	stroke={marker.styles?.stroke ?? 'currentColor'}
+	strokeWidth={marker.styles?.strokeWidth ?? 0.5}
+	strokeOpacity={marker.styles?.strokeOpacity ?? 0.3}
+	strokeDasharray={marker.styles?.strokeDasharray}
+	style="vector-effect: non-scaling-stroke"
+/>

package/dist/markers/{GraticuleMarker.svelte.d.ts → geo/GraticuleMarker.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { GeoGraticuleMarkerConfig } from '../types/markers/geo';
+import type { GeoGraticuleMarkerConfig } from '../../types/markers/geo';
 type $$ComponentProps = {
     marker: GeoGraticuleMarkerConfig;
 };

package/dist/markers/geo/SphereMarker.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Sphere } from 'svelteplot';
+	import type { GeoSphereMarkerConfig } from '../../types/markers/geo';
+
+	/** Renders one `'sphere'` marker - the outer globe outline. */
+	let { marker }: { marker: GeoSphereMarkerConfig } = $props();
+</script>
+
+<Sphere
+	fill={marker.styles?.fill}
+	fillOpacity={marker.styles?.fillOpacity}
+	stroke={marker.styles?.stroke ?? 'currentColor'}
+	strokeWidth={marker.styles?.strokeWidth ?? 1}
+	style="vector-effect: non-scaling-stroke"
+/>

package/dist/markers/{SphereMarker.svelte.d.ts → geo/SphereMarker.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { GeoSphereMarkerConfig } from '../types/markers/geo';
+import type { GeoSphereMarkerConfig } from '../../types/markers/geo';
 type $$ComponentProps = {
     marker: GeoSphereMarkerConfig;
 };

package/dist/markers/hover/HoverMarker.svelte

@@ -0,0 +1,252 @@
+<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 { BandNudge } from '../utils/BandNudge';
+	import type { BandSlice } from '../../types/layout/hover';
+	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).
+	 */
+	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'
+		>;
+		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. */
+		onActivePointPixel?: (pos: { x: number; y: number } | null) => void;
+	}
+
+	let {
+		data = [],
+		marker,
+		activePoint = null,
+		impliesCrosshairX = false,
+		impliesCrosshairY = false,
+		onActivePointPixel
+	}: Props = $props();
+
+	const cfg = $derived(getConfiguration());
+	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 };
+	});
+
+	$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);
+	const showLabels = $derived(marker.showLabels ?? true);
+	const format = $derived(marker.format);
+	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,
+			insetLeft: activePoint?.areaInset?.start,
+			insetRight: activePoint?.areaInset?.end,
+			styles: areaStyle
+		}}
+	/>
+{/if}
+
+{#if areaY != null}
+	<BarMarker
+		marker={{
+			type: 'bar',
+			role: 'highlight',
+			isHorizontal: true,
+			data: [],
+			category: areaY,
+			insetTop: activePoint?.areaInset?.start,
+			insetBottom: activePoint?.areaInset?.end,
+			styles: areaStyle
+		}}
+	/>
+{/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: (d: HoverDisplayPoint) => (format ? format(d) : (d.label ?? '')),
+						styles: resolveFontStyle(point)
+					}}
+				/>
+			</g>
+		{/each}
+	{/if}
+{/if}

package/dist/markers/{HoverMarker.svelte.d.ts → hover/HoverMarker.svelte.d.ts}

@@ -1,31 +1,31 @@
-import type { MarkerProps } from '../types/markers/props';
-import type { HoverMarkerConfig } from '../types/markers/common';
-import type { HoverDisplayPoint } from '../types/layout/tooltip';
+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
+ * 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
+ * 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"
+ * 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 —
+ * 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).
  */
-interface Props extends MarkerProps<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' | 'ruleStyle' | 'areaStyle' | 'dotStyle' | 'fontStyle'>;
+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'>;
     activePoint?: HoverDisplayPoint | null;
     impliesCrosshairX?: boolean;
     impliesCrosshairY?: boolean;