@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/markers/box/BoxMarker.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { BoxX, BoxY } from 'svelteplot';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { contrastTextColor } from '../../utils/color';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { BoxMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'box'` marker as `<BoxX>` or `<BoxY>`, picked from the
+	 * way the plot runs (`usePlot().axes`) - `marker.x`/`marker.y`
+	 * map straight onto the plot's axes either way.
+	 * `bar`/`rule`/`dot`/`tickMedian`/`tickMinMax` forward straight through to
+	 * svelteplot's own same-named options - see `BoxMarkerConfig`'s own doc
+	 * comment for the default styling this wrapper adds on top, inherited
+	 * from `bar`.
+	 */
+	let { marker }: { marker: BoxMarkerConfig } = $props();
+
+	const plot = usePlot();
+	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const data = $derived((marker.data ?? []) as any[]);
+
+	const cfg = $derived(getConfiguration());
+
+	/**
+	 * The bar's own fully-resolved options - the author's own `bar`, with
+	 * `fill` defaulted to this package's own `cfg.palette[0]` when unset
+	 * (svelteplot's own bare default, `currentColor`, can't be resolved to a
+	 * real color at this layer). Every other sub-mark's own default styling
+	 * (below) is derived from this one object, so a change to `bar` (e.g. its
+	 * `fillOpacity`) cascades to `rule`/`dot`/both ticks unless that sub-mark's
+	 * own options object overrides the specific field.
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const bar: Record<string, any> = $derived({
+		fill:
+			(typeof marker.bar === 'object' && marker.bar.fill != null
+				? (marker.bar.fill as string)
+				: undefined) ?? cfg.palette[0],
+		...(typeof marker.bar === 'object' ? marker.bar : {})
+	});
+	const barFill = $derived(bar.fill as string);
+
+	/** `bar.insetLeft`/`insetRight` averaged into one symmetric value - a tick's own `inset` is a single number/percentage, not independent left/right. */
+	const tickInset = $derived.by(() => {
+		const l = typeof bar.insetLeft === 'number' ? bar.insetLeft : undefined;
+		const r = typeof bar.insetRight === 'number' ? bar.insetRight : undefined;
+		if (l === undefined && r === undefined) return undefined;
+		return ((l ?? 0) + (r ?? 0)) / 2;
+	});
+
+	/**
+	 * The style fields a line-shaped sub-mark (`rule`, `tickMedian`,
+	 * `tickMinMax` - stroke, no fill) inherits from `bar` by default, besides
+	 * its own `stroke` color (passed in separately: contrasting for
+	 * `tickMedian`, matching for `rule`/`tickMinMax`).
+	 */
+	function lineStyleDefaults(strokeColor: string): Record<string, unknown> {
+		const out: Record<string, unknown> = { stroke: strokeColor };
+		if (bar.strokeWidth !== undefined) out.strokeWidth = bar.strokeWidth;
+		const strokeOpacity = bar.fillOpacity ?? bar.opacity;
+		if (strokeOpacity !== undefined) out.strokeOpacity = strokeOpacity;
+		if (bar.opacity !== undefined) out.opacity = bar.opacity;
+		return out;
+	}
+
+	/** The style fields `dot` (fill + stroke, like `bar` itself) inherits from `bar` by default. */
+	function fillStyleDefaults(): Record<string, unknown> {
+		const out: Record<string, unknown> = { fill: barFill };
+		if (bar.fillOpacity !== undefined) out.fillOpacity = bar.fillOpacity;
+		if (bar.stroke !== undefined) out.stroke = bar.stroke;
+		if (bar.strokeWidth !== undefined) out.strokeWidth = bar.strokeWidth;
+		if (bar.strokeOpacity !== undefined) out.strokeOpacity = bar.strokeOpacity;
+		if (bar.opacity !== undefined) out.opacity = bar.opacity;
+		return out;
+	}
+
+	const ruleDefault = $derived(lineStyleDefaults(barFill));
+	const dotDefault = $derived(fillStyleDefaults());
+	const tickMedianDefault = $derived({
+		...lineStyleDefaults(contrastTextColor(barFill)),
+		...(tickInset !== undefined ? { inset: tickInset } : {})
+	});
+	const tickMinMaxDefault = $derived({
+		...lineStyleDefaults(barFill),
+		...(tickInset !== undefined ? { inset: tickInset } : {})
+	});
+
+	/**
+	 * Resolves a `tickMedian`/`tickMinMax` value against this package's own
+	 * default (enabled, with `defaultStyle`) - `false` hides it; `true` or
+	 * unset shows it at just the default style; an options object shows it
+	 * with the default style as a base, overridden by whatever the object
+	 * itself sets.
+	 */
+	function resolveTick(
+		value: boolean | Record<string, unknown> | undefined,
+		defaultStyle: Record<string, unknown>
+	): Record<string, unknown> | false {
+		if (value === false) return false;
+		if (value === undefined || value === true) return defaultStyle;
+		return { ...defaultStyle, ...value };
+	}
+
+	const tickMedian = $derived(resolveTick(marker.tickMedian, tickMedianDefault));
+	const tickMinMax = $derived(resolveTick(marker.tickMinMax, tickMinMaxDefault));
+	const rule = $derived({
+		...ruleDefault,
+		...(typeof marker.rule === 'object' ? marker.rule : {})
+	});
+	/**
+	 * `dot.fill: true` is svelteplot's own `currentColor` shorthand, which would
+	 * paint the outliers in the text color. Here it means the box's own fill,
+	 * so outliers take the series color like the box does.
+	 */
+	const dot = $derived.by(() => {
+		const own = typeof marker.dot === 'object' ? marker.dot : {};
+		const fill = own.fill === true ? barFill : 'fill' in own ? own.fill : dotDefault.fill;
+		return { ...dotDefault, ...own, fill };
+	});
+
+	/**
+	 * Cast once here (rather than at each call site) since this package's own
+	 * `Record<string, unknown>` is looser than svelteplot's own
+	 * `Record<string, ChannelAccessor>`.
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const passthrough: Record<string, any> = $derived({
+		bar,
+		rule,
+		dot,
+		tickMedian,
+		tickMinMax
+	});
+</script>
+
+{#if isHorizontal}
+	<BoxX {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />
+{:else}
+	<BoxY {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />
+{/if}

package/dist/markers/box/BoxMarker.svelte.d.ts

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

package/dist/markers/brush/BrushMarker.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Brush } from 'svelteplot';
+	import type { BrushMarkerConfig, BrushSelection } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'brush'` marker as `<Brush>`. svelteplot's `Brush` binds its
+	 * selection, so this wrapper owns that state (seeded once from
+	 * `marker.brush`) and surfaces changes through the `onbrush*` callbacks.
+	 * svelteplot's `Brush` spreads its props over its defaults, so an explicit
+	 * `undefined` would erase them - each default is restated here instead.
+	 */
+	let { marker }: { marker: BrushMarkerConfig } = $props();
+
+	// svelte-ignore state_referenced_locally
+	let brush = $state<BrushSelection>(marker.brush ?? { enabled: false });
+</script>
+
+<Brush
+	bind:brush
+	limitDimension={marker.limitDimension ?? false}
+	constrainToDomain={marker.constrainToDomain ?? false}
+	resizeHandleSize={marker.resizeHandleSize ?? 10}
+	onbrushstart={marker.onbrushstart}
+	onbrush={marker.onbrush}
+	onbrushend={marker.onbrushend}
+	stroke={marker.styles?.stroke ?? 'currentColor'}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity ?? 0.6}
+	strokeDasharray={marker.styles?.strokeDasharray ?? '2,3'}
+	strokeLinecap={marker.styles?.strokeLinecap}
+	strokeLinejoin={marker.styles?.strokeLinejoin}
+/>

package/dist/markers/brush/BrushMarker.svelte.d.ts

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

package/dist/markers/cell/CellMarker.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Cell } from 'svelteplot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { CellMarkerConfig } from '../../types/markers/common';
+
+	/** Renders one `'cell'` marker as a `<Cell>` call. */
+	let { marker }: { marker: CellMarkerConfig } = $props();
+
+	const cfg = $derived(getConfiguration());
+	const data = $derived(marker.data ?? []);
+	const channelFill = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
+</script>
+
+<Cell
+	{data}
+	x={marker.x}
+	y={marker.y}
+	fill={channelFill ?? marker.fill}
+	fillOpacity={marker.styles?.fillOpacity ?? 1}
+	stroke={marker.styles?.stroke}
+	strokeWidth={marker.styles?.strokeWidth ?? 0}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+	borderRadius={marker.styles?.borderRadius}
+	inset={marker.inset ?? 0.5}
+/>

package/dist/markers/{CellMarker.svelte.d.ts → cell/CellMarker.svelte.d.ts}

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

package/dist/markers/contour/ContourClipMarker.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { geoPath, type GeoPath } from 'd3-geo';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import type { Snippet } from 'svelte';
+	import type { GeoFeature } from '../../types/plots/data/geo';
+
+	/**
+	 * Masks a `contour` marker to just the landmass (`'land'`) or just the
+	 * water (`'ocean'`) of the plot's own base map, via an SVG `clipPath` -
+	 * lets a filled contour read as "temperature over land" without also
+	 * painting straight across the ocean, or vice versa. A no-op passthrough
+	 * when `mode` is unset, so this can unconditionally wrap every `contour`
+	 * marker without an extra branch at each call site.
+	 *
+	 * Builds the clip path from the plot's own shared, already-fitted
+	 * projection (`usePlot()` - the same hook `TileLayer.svelte` uses) rather
+	 * than an independent one, so it lines up with the rest of the map
+	 * regardless of projection/zoom. `'ocean'` unions the sphere and land
+	 * paths into one `clip-rule: evenodd` shape - the sphere covers
+	 * everything, then every land ring toggles back out, leaving only water.
+	 */
+	let {
+		mode,
+		features,
+		children
+	}: {
+		mode: 'land' | 'ocean' | undefined;
+		features: GeoFeature<Record<string, unknown>>[];
+		children: Snippet;
+	} = $props();
+
+	const plot = usePlot().svelteplot;
+	const clipId = `geo-contour-clip-${Math.random().toString(36).slice(2, 9)}`;
+
+	// Same runtime shape TileLayer.svelte relies on - svelteplot's own
+	// `PlotScale` type doesn't reflect it, but `plot.scales.projection` is a
+	// real `d3-geo`-compatible stream source at runtime.
+	const path: GeoPath = $derived(
+		geoPath(plot.scales.projection as unknown as Parameters<typeof geoPath>[0])
+	);
+	// Some real-world datasets carry exact-duplicate features for the same
+	// territory (seen in this repo's own `WORLD_COUNTRIES` fixture, for every
+	// South American country) - harmless for an ordinary filled `<Geo>` (the
+	// duplicate just redraws the same shape), but fatal here: two identical,
+	// oppositely-would-be-redundant copies of the same ring toggle each other
+	// back out under `clip-rule: evenodd`, silently punching a hole exactly
+	// where the duplicated territory is. Deduping by geometry keeps this
+	// correct regardless of whether the caller's data happens to be clean.
+	const uniqueGeometries = $derived(
+		Array.from(
+			new Map(
+				features.map((f) => [JSON.stringify(f.geometry), f as unknown as GeoJSON.Feature])
+			).values()
+		)
+	);
+	const landPath = $derived(
+		uniqueGeometries
+			.map((f) => path(f))
+			.filter((d): d is string => !!d)
+			.join(' ')
+	);
+	// `{type: 'Sphere'}` is d3-geo's own pseudo-geometry for "the whole
+	// globe" - not part of the GeoJSON spec, so `@types/geojson` has no type
+	// for it either.
+	const spherePath = $derived(path({ type: 'Sphere' } as unknown as GeoJSON.Feature) ?? '');
+</script>
+
+{#if mode}
+	<defs>
+		<clipPath id={clipId}>
+			{#if mode === 'land'}
+				<path d={landPath} clip-rule="evenodd" />
+			{:else}
+				<path d="{spherePath} {landPath}" clip-rule="evenodd" />
+			{/if}
+		</clipPath>
+	</defs>
+	<g clip-path="url(#{clipId})">
+		{@render children()}
+	</g>
+{:else}
+	{@render children()}
+{/if}

package/dist/markers/{ContourClipMarker.svelte.d.ts → contour/ContourClipMarker.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { GeoFeature } from '../types/plots/data/geo';
+import type { GeoFeature } from '../../types/plots/data/geo';
 type $$ComponentProps = {
     mode: 'land' | 'ocean' | undefined;
     features: GeoFeature<Record<string, unknown>>[];

package/dist/markers/contour/ContourMarker.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Contour } from 'svelteplot';
+	import type { GeoContourMarkerConfig } from '../../types/markers/geo';
+
+	/**
+	 * Renders one `'contour'` marker's `<Contour>` mark. `marker.clip` is
+	 * handled by the caller (`GeometryLayout` wraps this in `ContourClipMarker`)
+	 * - this component only draws the contour itself.
+	 */
+	let { marker }: { marker: GeoContourMarkerConfig } = $props();
+</script>
+
+<!-- No `?? 'none'` fallback: an unset `fill` should leave svelteplot's own default (`fill="none"`) in place, not run the literal string `'none'` through the color scale. -->
+<Contour
+	class="contour"
+	data={marker.data}
+	x={marker.x}
+	y={marker.y}
+	value={marker.value}
+	thresholds={marker.thresholds}
+	fill={marker.fill}
+	stroke={marker.stroke ?? 'currentColor'}
+	strokeWidth={marker.styles?.strokeWidth}
+	fillOpacity={marker.styles?.fillOpacity}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	blur={marker.blur}
+	interpolate={marker.interpolate}
+/>

package/dist/markers/{ContourMarker.svelte.d.ts → contour/ContourMarker.svelte.d.ts}

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

package/dist/markers/delaunay/DelaunayLinkMarker.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { DelaunayLink } from 'svelteplot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { DelaunayLinkMarkerConfig } from '../../types/markers/common';
+
+	/** Renders one `'delaunayLink'` marker as `<DelaunayLink>` - one line per Delaunay triangulation edge. */
+	let { marker }: { marker: DelaunayLinkMarkerConfig } = $props();
+
+	const cfg = $derived(getConfiguration());
+	const data = $derived(marker.data ?? []);
+	const channelColor = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
+</script>
+
+<DelaunayLink
+	{data}
+	x={marker.x}
+	y={marker.y}
+	z={marker.grouping}
+	fill={marker.styles?.fill}
+	fillOpacity={marker.styles?.fillOpacity}
+	stroke={marker.styles?.stroke ?? channelColor}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+/>

package/dist/markers/delaunay/DelaunayLinkMarker.svelte.d.ts

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

package/dist/markers/delaunay/DelaunayMeshMarker.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { DelaunayMesh } from 'svelteplot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { DelaunayMeshMarkerConfig } from '../../types/markers/common';
+
+	/** Renders one `'delaunayMesh'` marker as `<DelaunayMesh>` - the Delaunay triangulation as a single mesh. */
+	let { marker }: { marker: DelaunayMeshMarkerConfig } = $props();
+
+	const cfg = $derived(getConfiguration());
+	const data = $derived(marker.data ?? []);
+	const channelColor = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
+</script>
+
+<DelaunayMesh
+	{data}
+	x={marker.x}
+	y={marker.y}
+	z={marker.grouping}
+	fill={marker.styles?.fill}
+	fillOpacity={marker.styles?.fillOpacity}
+	stroke={marker.styles?.stroke ?? channelColor}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+/>

package/dist/markers/delaunay/DelaunayMeshMarker.svelte.d.ts

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

package/dist/markers/delta/Delta.d.ts

@@ -0,0 +1,21 @@
+import type { Series } from '../../types/plots/data/common';
+import type { DeltaConfig } from '../../types/markers/axis/delta';
+/** A delta, measured: where it sits (`at`), its two ends and what lies between. */
+export type ResolvedDelta = {
+    cfg: DeltaConfig;
+    at: number;
+    from: number;
+    to: number;
+    diff: number;
+    mid: number;
+};
+/**
+ * A delta marker's measure: the gap, at one position along `axis`, between
+ * the two curves (or axis lines) it compares. A target series is read where
+ * it crosses that position, interpolated linearly between its two nearest points.
+ */
+export declare class Delta {
+    #private;
+    /** The delta `config` asks for over `allSeries`, or `undefined` while an end has no value there. */
+    static build<T extends Record<string, unknown>>(axis: 'x' | 'y', allSeries: Series<T>[], config: DeltaConfig): ResolvedDelta | undefined;
+}

package/dist/markers/delta/Delta.js

@@ -0,0 +1,60 @@
+import { resolveAccessor } from '../../plots/utils/accessors';
+/**
+ * A delta marker's measure: the gap, at one position along `axis`, between
+ * the two curves (or axis lines) it compares. A target series is read where
+ * it crosses that position, interpolated linearly between its two nearest points.
+ */
+export class Delta {
+    /** The delta `config` asks for over `allSeries`, or `undefined` while an end has no value there. */
+    static build(axis, allSeries, config) {
+        const at = Number(config.at);
+        const from = Delta.#endpoint(axis, allSeries, config.from, at);
+        const to = config.to ? Delta.#endpoint(axis, allSeries, config.to, at) : 0;
+        if (from === null || to === null)
+            return undefined;
+        return {
+            cfg: config,
+            at,
+            from,
+            to,
+            diff: Math.abs(from - to),
+            mid: (from + to) / 2
+        };
+    }
+    /**
+     * Where `target` stands at `at` along `axis`: its value on the other axis,
+     * or an axis line's own. For `y`, the series' first crossing of that value.
+     */
+    static #endpoint(axis, allSeries, target, at) {
+        if (target.type === 'axis')
+            return target.value ?? 0;
+        const series = allSeries.find((s) => s.name === target.series);
+        if (!series)
+            return null;
+        const getX = (d) => Number(resolveAccessor(series.x)(d));
+        const getY = (d) => Number(resolveAccessor(series.y)(d));
+        return axis === 'x'
+            ? Delta.#interpolate(series.data, getX, getX, getY, at)
+            : Delta.#interpolate(series.data, getX, getY, getX, at);
+    }
+    /**
+     * Sorts `data` by `sortBy`, then finds the first adjacent pair where `scanBy`
+     * brackets `target` and linearly interpolates `measureBy` at that crossing.
+     */
+    static #interpolate(data, sortBy, scanBy, measureBy, target) {
+        const sorted = [...data].sort((a, b) => sortBy(a) - sortBy(b));
+        for (let i = 0; i < sorted.length; i++) {
+            if (scanBy(sorted[i]) === target)
+                return measureBy(sorted[i]);
+        }
+        for (let i = 0; i < sorted.length - 1; i++) {
+            const s0 = scanBy(sorted[i]);
+            const s1 = scanBy(sorted[i + 1]);
+            if ((s0 <= target && target <= s1) || (s1 <= target && target <= s0)) {
+                const t = (target - s0) / (s1 - s0);
+                return measureBy(sorted[i]) + t * (measureBy(sorted[i + 1]) - measureBy(sorted[i]));
+            }
+        }
+        return null;
+    }
+}

package/dist/markers/delta/DeltaMarker.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import { Line } from 'svelteplot';
+	import DotMarker from '../dot/DotMarker.svelte';
+	import TextMarker from '../text/TextMarker.svelte';
+	import { Delta } from './Delta';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { Series } from '../../types/plots/data/common';
+	import type { DeltaMarkerConfig } from '../../types/markers/axis/delta';
+
+	let { marker, data = [] }: { marker: DeltaMarkerConfig; data?: Series<TData>[] } = $props();
+
+	const resolved = $derived(Delta.build(marker.axis, data, marker));
+	const label = $derived(getConfiguration().delta.text[marker.axis]);
+	const lineAnchor = $derived(marker.text?.lineAnchor ?? label.lineAnchor);
+
+	const clampRange = $derived.by((): [number, number] | undefined => {
+		const domain = marker.axis === 'x' ? marker.yDomain : marker.xDomain;
+		if (!domain || domain.length < 2) return undefined;
+		const lo = Number(domain[0]);
+		const hi = Number(domain[domain.length - 1]);
+		return isNaN(lo) || isNaN(hi) ? undefined : [Math.min(lo, hi), Math.max(lo, hi)];
+	});
+
+	function clamp(v: number): number {
+		return clampRange ? Math.max(clampRange[0], Math.min(clampRange[1], v)) : v;
+	}
+
+	function pt(fixed: number, varying: number) {
+		return marker.axis === 'x' ? { x: fixed, y: varying } : { x: varying, y: fixed };
+	}
+
+	function textVaryCoord(fromVis: number, toVis: number) {
+		return lineAnchor === 'top'
+			? Math.max(fromVis, toVis)
+			: lineAnchor === 'bottom'
+				? Math.min(fromVis, toVis)
+				: (fromVis + toVis) / 2;
+	}
+
+	// Pre-derive all coordinates as script-level signals so prop getters read safe
+	// values during Svelte 5 teardown, before the {#if} guard finishes unmounting.
+	const coords = $derived.by(() => {
+		if (!resolved) return null;
+		const fromVis = clamp(resolved.from ?? 0);
+		const toVis = clamp(resolved.to ?? 0);
+		const at = resolved.at ?? 0;
+		return {
+			fromPt: pt(at, fromVis),
+			toPt: pt(at, toVis),
+			textPt: pt(at, textVaryCoord(fromVis, toVis)),
+			lineData: [pt(at, fromVis), pt(at, toVis)],
+			diff: resolved.diff ?? 0
+		};
+	});
+
+	const dotStyles = $derived({
+		dotRadius: 4,
+		dotFill: marker.line?.stroke,
+		dotStroke: marker.line?.stroke,
+		dotStrokeWidth: 2,
+		...marker.dot
+	});
+</script>
+
+{#if coords}
+	<Line
+		data={coords.lineData}
+		x={(p) => p.x}
+		y={(p) => p.y}
+		stroke={marker.line?.stroke ?? 'currentColor'}
+		strokeWidth={marker.line?.strokeWidth ?? 2}
+		strokeOpacity={marker.line?.strokeOpacity ?? 0.8}
+		strokeDasharray={marker.line?.strokeDasharray ?? '6 6'}
+		strokeLinecap={marker.line?.strokeLinecap ?? 'round'}
+	/>
+	<DotMarker marker={{ type: 'dot', x: coords.fromPt.x, y: coords.fromPt.y, styles: dotStyles }} />
+	<DotMarker marker={{ type: 'dot', x: coords.toPt.x, y: coords.toPt.y, styles: dotStyles }} />
+	<TextMarker
+		marker={{
+			type: 'text',
+			x: coords.textPt.x,
+			y: coords.textPt.y,
+			text: (marker.formatDiff ?? ((v: number) => v.toFixed(1)))(coords.diff),
+			styles: {
+				fontWeight: 'bold',
+				fontSize: 14,
+				textAnchor: label.textAnchor,
+				fill: marker.line?.stroke ?? 'currentColor',
+				...marker.text,
+				dx: marker.text?.dx ?? label.dx,
+				dy: marker.text?.dy ?? label.dy,
+				lineAnchor
+			}
+		}}
+	/>
+{/if}

package/dist/markers/{DeltaMarker.svelte.d.ts → delta/DeltaMarker.svelte.d.ts}

@@ -1,5 +1,5 @@
-import type { Series } from '../types/plots/data/common';
-import type { DeltaMarkerConfig } from '../types/markers/line';
+import type { Series } from '../../types/plots/data/common';
+import type { DeltaMarkerConfig } from '../../types/markers/axis/delta';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
         marker: DeltaMarkerConfig;