@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/markers/rect/RectMarker.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Rect } from 'svelteplot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { RectMarkerConfig } from '../../types/markers/common';
+
+	/** Renders one `'rect'` marker as a `<Rect>` call - an arbitrary rectangle, unlike `BarMarker`'s category-band-anchored bar. */
+	let { marker }: { marker: RectMarkerConfig } = $props();
+
+	const cfg = $derived(getConfiguration());
+	const data = $derived(marker.data ?? []);
+	const channelFill = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
+	const opacityBuckets = $derived(
+		MarkerChannels.buildOpacityBuckets(data, marker.opacity, marker.scales, cfg)
+	);
+</script>
+
+{#if opacityBuckets}
+	{#each opacityBuckets as bucket (bucket.value)}
+		<Rect
+			data={bucket.data}
+			x={marker.x}
+			y={marker.y}
+			x1={marker.x1}
+			x2={marker.x2}
+			y1={marker.y1}
+			y2={marker.y2}
+			interval={marker.interval}
+			insetLeft={marker.insetLeft}
+			insetRight={marker.insetRight}
+			insetTop={marker.insetTop}
+			insetBottom={marker.insetBottom}
+			fill={channelFill ?? marker.styles?.fill}
+			fillOpacity={bucket.value}
+			stroke={marker.styles?.stroke}
+			strokeWidth={marker.styles?.strokeWidth}
+			strokeOpacity={marker.styles?.strokeOpacity}
+			strokeDasharray={marker.styles?.strokeDasharray}
+		/>
+	{/each}
+{:else}
+	<Rect
+		{data}
+		x={marker.x}
+		y={marker.y}
+		x1={marker.x1}
+		x2={marker.x2}
+		y1={marker.y1}
+		y2={marker.y2}
+		interval={marker.interval}
+		insetLeft={marker.insetLeft}
+		insetRight={marker.insetRight}
+		insetTop={marker.insetTop}
+		insetBottom={marker.insetBottom}
+		fill={channelFill ?? marker.styles?.fill}
+		fillOpacity={marker.styles?.fillOpacity ?? 1}
+		stroke={marker.styles?.stroke}
+		strokeWidth={marker.styles?.strokeWidth}
+		strokeOpacity={marker.styles?.strokeOpacity}
+		strokeDasharray={marker.styles?.strokeDasharray}
+	/>
+{/if}

package/dist/markers/rect/RectMarker.svelte.d.ts

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

package/dist/markers/regression/RegressionMarker.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { RegressionX, RegressionY } from 'svelteplot';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import type { RegressionMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'regression'` marker - a fitted curve (svelteplot's
+	 * `RegressionX`/`RegressionY`), with a confidence band shown by default
+	 * (svelteplot's own default `confidence` is `0.99`; set `confidence:
+	 * false` to omit it). `RegressionX` or `RegressionY` is picked from the way
+	 * the plot runs (`usePlot().axes`).
+	 *
+	 * Confirmed empirically: the band always renders in the same color as
+	 * `stroke`, at a fixed low opacity - its own `fill` prop takes no
+	 * author-supplied value (any literal or per-row function alike renders
+	 * identically); passing it at all is only what turns the band on, so
+	 * it's set here as a fixed placeholder gated on `confidence` being
+	 * active, never exposed as its own style option.
+	 */
+	let { marker }: { marker: RegressionMarkerConfig } = $props();
+
+	const plot = usePlot();
+	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+
+	const data = $derived(marker.data ?? []);
+</script>
+
+{#if isHorizontal}
+	<RegressionX
+		{data}
+		x={marker.x}
+		y={marker.y}
+		type={marker.regressionType}
+		order={marker.order}
+		base={marker.base}
+		span={marker.span}
+		confidence={marker.confidence}
+		stroke={marker.styles?.stroke ?? 'currentColor'}
+		strokeWidth={marker.styles?.strokeWidth}
+		strokeOpacity={marker.styles?.strokeOpacity}
+		strokeDasharray={marker.styles?.strokeDasharray}
+		fill={marker.confidence !== false ? 'currentColor' : undefined}
+	/>
+{:else}
+	<RegressionY
+		{data}
+		x={marker.x}
+		y={marker.y}
+		type={marker.regressionType}
+		order={marker.order}
+		base={marker.base}
+		span={marker.span}
+		confidence={marker.confidence}
+		stroke={marker.styles?.stroke ?? 'currentColor'}
+		strokeWidth={marker.styles?.strokeWidth}
+		strokeOpacity={marker.styles?.strokeOpacity}
+		strokeDasharray={marker.styles?.strokeDasharray}
+		fill={marker.confidence !== false ? 'currentColor' : undefined}
+	/>
+{/if}

package/dist/markers/regression/RegressionMarker.svelte.d.ts

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

package/dist/markers/rule/RuleMarker.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { RuleX, RuleY } from 'svelteplot';
+	import type { AxisValue } from '../../types/layout/mapping';
+	import type { RuleMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * A single vertical (`axis: 'x'`) or horizontal (`axis: 'y'`) reference
+	 * line - or, with `data`, one line per row. Shared by author-configured
+	 * `'rule'` markers and `HoverMarker`'s crosshair (which always calls it
+	 * with a literal `value` and no `data`). Falls back to `'currentColor'`/`1`
+	 * when the caller supplies no style. See `RuleMarkerConfig`'s own doc
+	 * comment for `value`/`x1`/`x2`/`y1`/`y2`/inset semantics - forwarded here
+	 * straight through to svelteplot's own `RuleX`/`RuleY`.
+	 */
+	const { marker }: { marker: RuleMarkerConfig } = $props();
+
+	const axis = $derived(marker.axis);
+	const data = $derived(marker.data);
+	const value = $derived(marker.value);
+	const styles = $derived(marker.styles);
+
+	const RuleMark = $derived(axis === 'x' ? RuleX : RuleY);
+	const rows = $derived(data ?? [{ v: value }]);
+	/**
+	 * With `data`, `value` is forwarded raw (a field key resolves per row via
+	 * svelteplot's own `resolve()`, same as every other mark, and lets its
+	 * axis-title auto-inference see the field name - a pre-resolved closure
+	 * would defeat both). Without `data`, `value` is a literal against the
+	 * single synthetic `{v: value}` row.
+	 */
+	const position = $derived(data ? value : (d: { v: AxisValue }) => d.v);
+</script>
+
+<RuleMark
+	data={rows}
+	{...axis === 'x'
+		? { x: position, y1: marker.y1, y2: marker.y2 }
+		: { y: position, x1: marker.x1, x2: marker.x2 }}
+	inset={marker.inset}
+	{...axis === 'x'
+		? { insetTop: marker.insetTop, insetBottom: marker.insetBottom }
+		: { insetLeft: marker.insetLeft, insetRight: marker.insetRight }}
+	stroke={styles?.stroke ?? 'currentColor'}
+	strokeWidth={styles?.strokeWidth ?? 1}
+	strokeOpacity={styles?.strokeOpacity ?? 1}
+	strokeDasharray={styles?.strokeDasharray}
+/>

package/dist/markers/{RuleMarker.svelte.d.ts → rule/RuleMarker.svelte.d.ts}

@@ -1,9 +1,6 @@
-import type { AxisValue } from '../types/layout/scales';
-import type { StrokeStyle } from '../types/plots/styling';
+import type { RuleMarkerConfig } from '../../types/markers/common';
 type $$ComponentProps = {
-    axis: 'x' | 'y';
-    value: AxisValue;
-    style?: StrokeStyle;
+    marker: RuleMarkerConfig;
 };
 declare const RuleMarker: import("svelte").Component<$$ComponentProps, {}, "">;
 type RuleMarker = ReturnType<typeof RuleMarker>;

package/dist/markers/text/Declutter.d.ts

@@ -0,0 +1,35 @@
+import type { LabelLane } from '../../types/markers/basic/text';
+/**
+ * Lays out point labels that would overlap: spreads their pixel `y` apart,
+ * gives each moved label its own lane for its leader line, and lines every
+ * label up on one shared column once any of them clusters.
+ */
+export declare class Declutter {
+    #private;
+    /**
+     * Lays out labels keyed by each item's `key`; fewer than two need none. A
+     * leftward fan with no room before the content box's left edge (the Y
+     * axis's tick labels sit there) flips right instead.
+     */
+    static buildLanes<K>(args: {
+        items: {
+            key: K;
+            px?: number;
+            py: number;
+        }[];
+        /** The labels' own horizontal offset (px); its sign is the side they fan toward. */
+        dx: number;
+        fontSize: number;
+        geometry: {
+            elbowGap: number;
+            laneStep: number;
+            labelGap: number;
+        };
+        /** The content box's left/top/bottom edges (px). */
+        bounds: {
+            left: number;
+            top: number;
+            bottom: number;
+        };
+    }): Map<K, LabelLane>;
+}

package/dist/markers/text/Declutter.js

@@ -0,0 +1,157 @@
+const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+/**
+ * Lays out point labels that would overlap: spreads their pixel `y` apart,
+ * gives each moved label its own lane for its leader line, and lines every
+ * label up on one shared column once any of them clusters.
+ */
+export class Declutter {
+    /**
+     * Lays out labels keyed by each item's `key`; fewer than two need none. A
+     * leftward fan with no room before the content box's left edge (the Y
+     * axis's tick labels sit there) flips right instead.
+     */
+    static buildLanes(args) {
+        const { items, dx, fontSize, geometry, bounds } = args;
+        const lanes = new Map();
+        if (items.length < 2)
+            return lanes;
+        const sorted = [...items].sort((a, b) => a.py - b.py);
+        const originals = sorted.map((item) => item.py);
+        const minGap = Math.max(16, fontSize * 1.4);
+        const { finals, connected } = Declutter.#spread(originals, minGap, [bounds.top, bounds.bottom]);
+        const ranks = Declutter.#assignLanes(originals, finals, connected);
+        const aligned = ranks.some((r) => r.runSize > 1);
+        const lanesUsed = aligned ? Math.max(...ranks.map((r) => r.runSize)) : 1;
+        const reach = geometry.elbowGap + (lanesUsed - 1) * geometry.laneStep + geometry.labelGap;
+        let dir = Math.sign(dx) || 1;
+        if (aligned && dir === -1) {
+            // Unknown room (no x position yet) counts as none: flipping right is never wrong.
+            const rooms = sorted.flatMap((item) => (item.px == null ? [] : [item.px - bounds.left]));
+            if ((rooms.length > 0 ? Math.min(...rooms) : -Infinity) < reach)
+                dir = 1;
+        }
+        sorted.forEach((item, i) => {
+            lanes.set(item.key, {
+                extraDy: finals[i] - originals[i],
+                aligned,
+                reach,
+                laneReach: geometry.elbowGap + ranks[i].rank * geometry.laneStep,
+                dir
+            });
+        });
+        return lanes;
+    }
+    /** The runs of `connected` pairs over `connected.length + 1` positions. */
+    static #runs(connected) {
+        const runs = [];
+        for (let i = 0; i <= connected.length;) {
+            let j = i;
+            while (j < connected.length && connected[j])
+                j++;
+            runs.push([i, j]);
+            i = j + 1;
+        }
+        return runs;
+    }
+    /**
+     * Spreads sorted `positions` so no two end up closer than `minGap`, keeping
+     * the block centered on the originals: a pass pushing items down and one
+     * pulling them up, each valid alone, averaged per item (chaining them would
+     * be a no-op). `connected[i]` is whether either pass had to push `i` and
+     * `i + 1` apart. Each run is then kept inside `bounds`.
+     */
+    static #spread(positions, minGap, bounds) {
+        const n = positions.length;
+        const connected = new Array(n - 1).fill(false);
+        const down = [...positions];
+        for (let i = 1; i < n; i++) {
+            if (down[i - 1] + minGap > down[i]) {
+                down[i] = down[i - 1] + minGap;
+                connected[i - 1] = true;
+            }
+        }
+        const up = [...positions];
+        for (let i = n - 2; i >= 0; i--) {
+            if (up[i + 1] - minGap < up[i]) {
+                up[i] = up[i + 1] - minGap;
+                connected[i] = true;
+            }
+        }
+        const weights = Declutter.#biasWeights(down, up, connected, bounds);
+        const averaged = positions.map((_, i) => down[i] * weights[i] + up[i] * (1 - weights[i]));
+        return { finals: Declutter.#fit(averaged, connected, bounds), connected };
+    }
+    /**
+     * Per-item weight of the down pass (the up pass gets the rest). A run near
+     * an edge leans on the pass that grows away from it, so it expands the way
+     * there is room instead of reaching for room it lacks; `0.5` with equal room
+     * on both sides. Every member of a run shares one weight.
+     */
+    static #biasWeights(down, up, connected, [lo, hi]) {
+        const weights = down.map(() => 0.5);
+        for (const [i, j] of Declutter.#runs(connected)) {
+            if (j === i)
+                continue;
+            const center = ((down[i] + up[i]) / 2 + (down[j] + up[j]) / 2) / 2;
+            const roomAbove = Math.max(0, center - lo);
+            const roomBelow = Math.max(0, hi - center);
+            const total = roomAbove + roomBelow;
+            weights.fill(total > 0 ? roomBelow / total : 0.5, i, j + 1);
+        }
+        return weights;
+    }
+    /**
+     * Shifts each run inside `[lo, hi]`, shrinking it uniformly around its
+     * center only if it is wider than the room. A lone position is clamped.
+     */
+    static #fit(positions, connected, [lo, hi]) {
+        const out = [...positions];
+        for (const [i, j] of Declutter.#runs(connected)) {
+            if (j === i) {
+                out[i] = clamp(out[i], lo, hi);
+                continue;
+            }
+            const [min, max] = [out[i], out[j]];
+            if (min >= lo && max <= hi)
+                continue;
+            const span = max - min;
+            const scale = span > 0 ? Math.min(1, (hi - lo) / span) : 1;
+            const center = (min + max) / 2;
+            const newCenter = clamp(center, lo + (span * scale) / 2, hi - (span * scale) / 2);
+            for (let k = i; k <= j; k++)
+                out[k] = newCenter + (out[k] - center) * scale;
+        }
+        return out;
+    }
+    /**
+     * Gives every member of a run its own lane (`rank` 0 bends nearest the
+     * point), so no two leader lines touch or cross. Each leader is an elbow:
+     * a stub out from the point to its lane, a vertical run to the label's
+     * height, then a run in to the shared column. A pair is ordered by which
+     * member can sit in the nearer lane without crossing the other's elbow;
+     * when the geometry doesn't decide, the member that traveled furthest
+     * takes the nearer lane.
+     */
+    static #assignLanes(originals, finals, connected) {
+        const out = originals.map(() => ({ rank: 0, runSize: 1 }));
+        const within = (v, k) => v >= Math.min(originals[k], finals[k]) && v <= Math.max(originals[k], finals[k]);
+        const distance = (k) => Math.abs(finals[k] - originals[k]);
+        /** Whether `i` in the nearer lane than `j` provably crosses nothing. */
+        const saferNearer = (i, j) => !within(originals[j], i) && !within(finals[i], j);
+        for (const [start, end] of Declutter.#runs(connected)) {
+            const runSize = end - start + 1;
+            if (runSize < 2)
+                continue;
+            const order = Array.from({ length: runSize }, (_, k) => start + k).sort((a, b) => {
+                const aNearer = saferNearer(a, b);
+                if (aNearer !== saferNearer(b, a))
+                    return aNearer ? -1 : 1;
+                return distance(b) - distance(a);
+            });
+            order.forEach((k, rank) => {
+                out[k] = { rank, runSize };
+            });
+        }
+        return out;
+    }
+}

package/dist/markers/text/TextMarker.svelte

@@ -0,0 +1,244 @@
+<script lang="ts" generics="TData = Record<string, unknown>">
+	import { Text } from 'svelteplot';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { BandNudge } from '../utils/BandNudge';
+	import { Declutter } from './Declutter';
+	import { PlotMargins } from '../../layout/margins/PlotMargins.svelte';
+	import { Box } from '../../layout/margins/Box';
+	import type { TextMarkerConfig } from '../../types/markers/common';
+	import type { TextAnchor } from '../../types/plots/constants';
+
+	/**
+	 * Renders one `'text'` marker. `x`/`y` also accept a literal number or Date.
+	 * A marker that declutters, flips at the edges or listens to the pointer
+	 * draws one label per row, inside the plot's content box. With
+	 * `fitMargins`, the plot's margins grow until the labels fit.
+	 */
+	const { marker }: { marker: TextMarkerConfig } = $props();
+
+	// A text's anchors as the side of its point it sits on, and back.
+	const TEXT_SIDES = { start: 'after', middle: 'middle', end: 'before' } as const;
+	const TEXT_ANCHORS = { after: 'start', middle: 'middle', before: 'end' } as const;
+	const LINE_SIDES = { top: 'after', middle: 'middle', bottom: 'before' } as const;
+	const LINE_ANCHORS = { after: 'top', middle: 'middle', before: 'bottom' } as const;
+
+	const cfg = $derived(getConfiguration());
+	const plot = usePlot().svelteplot;
+	const plotMargins = PlotMargins.current();
+	const bounds = $derived(plotMargins?.contentBox);
+
+	const data = $derived((marker.data ?? []) as TData[]);
+	const x = $derived(marker.x);
+	const y = $derived(marker.y);
+	const text = $derived(marker.text ?? '');
+	const styles = $derived(marker.styles);
+
+	const displayData = $derived(data.length > 0 ? data : [{} as TData]);
+	// Per-row accessors give literal values; an empty one takes the flat default.
+	const flatFill = $derived(styles?.fill ?? 'currentColor');
+	const fill = $derived.by(() => {
+		const own = marker.fill;
+		if (typeof own !== 'function') return own ?? flatFill;
+		return { value: (d: TData) => own(d) ?? flatFill, scale: null };
+	});
+	const fillOpacity = $derived.by(() => {
+		const own = marker.fillOpacity;
+		return typeof own === 'function' ? { value: (d: TData) => own(d) ?? 1, scale: null } : own;
+	});
+	const fontSize = $derived(styles?.fontSize ?? 12);
+	const fontWeight = $derived(styles?.fontWeight ?? 'normal');
+	const fontStyleProp = $derived(styles?.fontStyle ?? 'normal');
+	// An unresolved `'outside'` falls back to `'start'`.
+	const textAnchor = $derived<Exclude<TextAnchor, 'outside'>>(
+		styles?.textAnchor === 'outside' ? 'start' : (styles?.textAnchor ?? 'middle')
+	);
+	const lineAnchor = $derived(styles?.lineAnchor ?? 'middle');
+	// A label in a slice of its band sits off the band's middle, at its drawn width.
+	const nudge = $derived(BandNudge.of(plot.scales, marker.bandSlice));
+	const dx = $derived((styles?.dx ?? 0) + nudge.dx);
+	const dy = $derived((styles?.dy ?? 0) + nudge.dy);
+
+	const declutter = $derived.by(() => {
+		if (!marker.declutter) return undefined;
+		const own = marker.declutter === true ? {} : marker.declutter;
+		const defaults = cfg.text.declutter;
+		return {
+			elbowGap: own.elbowGap ?? defaults.elbowGap,
+			laneStep: own.laneStep ?? defaults.laneStep,
+			labelGap: own.labelGap ?? defaults.labelGap,
+			connector: { ...defaults.connector, ...own.connector }
+		};
+	});
+	const perRow = $derived(
+		!!declutter || !!marker.edgeAware || !!marker.onPointerEnter || !!marker.onPointerLeave
+	);
+	const dir = $derived(Math.sign(dx) || 1);
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function channel(value: unknown): (d: any) => unknown {
+		if (typeof value === 'function') return value as (d: unknown) => unknown;
+		// A field key: a name, or the symbol a transform keyed its output channel by.
+		if (typeof value === 'string' || typeof value === 'symbol') return (d) => d?.[value];
+		return () => value;
+	}
+
+	function textOf(d: TData): string {
+		return typeof text === 'function' ? text(d) : text;
+	}
+
+	function opacityOf(d: TData): number | undefined {
+		const value = marker.fillOpacity;
+		return typeof value === 'function' ? value(d) : value;
+	}
+
+	/** Each row's pixel position, once both scales resolve. */
+	const points = $derived.by(() => {
+		const xScale = plot.scales.x?.fn;
+		const yScale = plot.scales.y?.fn;
+		if ((!declutter && !marker.edgeAware) || !xScale || !yScale) return undefined;
+		const xOf = channel(x ?? 0);
+		const yOf = channel(y ?? 0);
+		return displayData.map((d) => ({
+			px: Number(xScale(xOf(d) as never)),
+			py: Number(yScale(yOf(d) as never))
+		}));
+	});
+
+	const lanes = $derived(
+		declutter && points && bounds
+			? Declutter.buildLanes({
+					items: points.map((p, key) => ({ key, ...p })),
+					dx,
+					fontSize,
+					geometry: declutter,
+					bounds
+				})
+			: undefined
+	);
+
+	/** Each row's anchor and offset, flipped where its text would cross the content box's edge. */
+	const placements = $derived.by(() => {
+		if (!marker.edgeAware || !points) return undefined;
+		const within = bounds ?? Box.size(plot.plotWidth, plot.plotHeight);
+		const anchor = { x: TEXT_SIDES[textAnchor], y: LINE_SIDES[lineAnchor] };
+		const gap = { x: Math.abs(dx), y: Math.abs(dy) };
+		return displayData.map((d, i) => {
+			const point = { x: points[i].px, y: points[i].py };
+			const flip = Box.ofText(textOf(d), fontSize, cfg).flipNear(point, anchor, within, gap);
+			return {
+				dx: flip.dx,
+				dy: flip.dy,
+				textAnchor: TEXT_ANCHORS[flip.anchor.x],
+				lineAnchor: LINE_ANCHORS[flip.anchor.y]
+			};
+		});
+	});
+
+	const flipAnchor = (anchor: typeof textAnchor) =>
+		anchor === 'start' ? 'end' : anchor === 'end' ? 'start' : anchor;
+
+	let groupEl: SVGGElement | undefined = $state();
+
+	// The plot measures what it draws: how far it reaches out, and with `fitMargins` its margins grow to fit it.
+	const measured = $derived(!!plotMargins && (!!marker.onOverflow || !!marker.fitMargins));
+	plotMargins?.watch(() => (measured ? groupEl : undefined), {
+		grow: () => !!marker.fitMargins,
+		onOverflow: (overflow) => marker.onOverflow?.(overflow),
+		// The box isn't tracked reactively: a new layout measures again.
+		deps: () => [marker, points]
+	});
+</script>
+
+{#snippet label(
+	rows: TData[],
+	rowDx: number,
+	rowDy: number,
+	rowAnchor: typeof textAnchor,
+	rowLineAnchor: typeof lineAnchor
+)}
+	<Text
+		data={rows}
+		x={x ?? 0}
+		y={y ?? 0}
+		text={text ?? ''}
+		dx={rowDx}
+		dy={rowDy}
+		fill={fill as never}
+		fillOpacity={fillOpacity as never}
+		{fontSize}
+		{fontWeight}
+		textAnchor={rowAnchor}
+		lineAnchor={rowLineAnchor}
+		fontStyle={fontStyleProp}
+		lineHeight={styles?.lineHeight}
+		rotate={styles?.rotate}
+		stroke={styles?.stroke}
+		strokeWidth={styles?.strokeWidth}
+		paintOrder={styles?.paintOrder}
+		class={styles?.class}
+		textClass={styles?.textClass}
+	/>
+{/snippet}
+
+{#snippet labels()}
+	{#if !perRow}
+		{@render label(displayData, dx, dy, textAnchor, lineAnchor)}
+	{:else if (!declutter && !marker.edgeAware) || points}
+		<!-- A decluttered or edge-aware label waits for both scales. -->
+		{#each displayData as d, i (i)}
+			{@const lane = lanes?.get(i)}
+			{@const placement = placements?.[i]}
+			{@const extraDy = lane?.extraDy ?? 0}
+			{@const laneDir = lane?.aligned ? lane.dir : dir}
+			{@const labelDx = lane?.aligned ? laneDir * lane.reach : dx}
+			{#if declutter && points && (lane?.aligned || extraDy !== 0)}
+				{@const { px, py } = points[i]}
+				{@const laneX = lane?.aligned ? px + laneDir * lane.laneReach : px + labelDx}
+				{@const connector = declutter.connector}
+				<path
+					d={`M ${px} ${py} H ${laneX} V ${py + extraDy} H ${px + labelDx}`}
+					fill="none"
+					stroke={connector.stroke}
+					stroke-width={connector.strokeWidth}
+					stroke-opacity={connector.strokeOpacity ?? opacityOf(d) ?? 1}
+					stroke-dasharray={connector.strokeDasharray}
+					stroke-linecap={connector.strokeLinecap ?? 'square'}
+					stroke-linejoin={connector.strokeLinejoin ?? 'miter'}
+				/>
+			{/if}
+			<!-- svelteplot's Text never wires pointer handlers to its DOM node; a wrapping <g> catches them. -->
+			<g
+				role="presentation"
+				onpointerenter={marker.onPointerEnter && (() => marker.onPointerEnter?.(d))}
+				onpointerleave={marker.onPointerLeave && (() => marker.onPointerLeave?.(d))}
+			>
+				{#if placement}
+					{@render label(
+						[d],
+						placement.dx,
+						placement.dy + extraDy,
+						placement.textAnchor,
+						placement.lineAnchor
+					)}
+				{:else}
+					{@render label(
+						[d],
+						labelDx,
+						dy + extraDy,
+						lane?.aligned && laneDir !== dir ? flipAnchor(textAnchor) : textAnchor,
+						lineAnchor
+					)}
+				{/if}
+			</g>
+		{/each}
+	{/if}
+{/snippet}
+
+{#if text}
+	{#if measured}
+		<g bind:this={groupEl}>{@render labels()}</g>
+	{:else}
+		{@render labels()}
+	{/if}
+{/if}

package/dist/markers/{TextMarker.svelte.d.ts → text/TextMarker.svelte.d.ts}

@@ -1,13 +1,9 @@
-import type { MarkerProps } from '../types/markers/props';
-import type { AxisValue } from '../types/layout/scales';
-import type { FontStyle } from '../types/plots/styling';
+import type { TextMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: TextMarkerConfig;
+};
 declare function $$render<TData = Record<string, unknown>>(): {
-    props: MarkerProps<TData> & {
-        x?: AxisValue | ((d: TData) => AxisValue);
-        y?: AxisValue | ((d: TData) => AxisValue);
-        text?: string | ((d: TData) => string);
-        style?: FontStyle;
-    };
+    props: $$ComponentProps;
     exports: {};
     bindings: "";
     slots: {};