@fundar/data-chart-telling 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.3.0] - 2026-10-30
+
+### Added
+
+- `legend.icon` in the configuration sets the icon a discrete legend item draws for its series: `rounded` softens its corners, and `marks` picks the shape by how the series draws (`line`, `dot`, `area`, `bar`, `cell`, `rect` or `geo`), unless the series sets its own `symbol`. A legend item can name its `mark` to choose from it.
+- A `rule` marker takes a list as its `value`, and a `delta` marker a list as its `at`: one line, or one delta, at each position, all with the same style, instead of one marker for each. A delta's `line`, `text` and `dot` can be functions of the position, to style each one on its own.
+- `facet` on a marker or a segment limits it to some facet panels, on every plot kind: a `by` value, a list of them, or `{ row, col }` in a `rows`/`cols` grid. Without it a marker or a segment is drawn in every panel, as before, and a plot with no facet leaves out whatever names one.
+
+### Fixed
+
+- Automatic margins reserve what a plot needs without taking its drawing area: the label of the top y tick is no longer cut off, since an `'auto'` top margin now leaves room for half its height, and margins that grow to fit labels stop growing once they would leave the plot less than a quarter of its box, which kept svelteplot from drawing marks with negative sizes on small plots.
+
 ## [1.2.0] - 2026-10-24
 
 ### Added
@@ -28,6 +40,7 @@ All notable changes to this project are documented here. The format follows [Kee
 ### Changed
 
 - The default palette is Tableau 10, and the default continuous ramp, the timeline and player accents and the connector colors follow it.
+- Plots draw faster: a plot in a facet, a grid or a composer no longer remounts its svelteplot chart each time the margins its labels need settle after mount. `pnpm test:perf` checks that every plot kind draws all the panels of a facet grid within a time budget; it runs before a push but not in CI, where the speed of the machine makes a time limit flaky.
 
 ### Fixed
 

package/README.md

@@ -10,6 +10,7 @@
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/datos-Fundar/data-chart-telling?label=Latest%20Release&display_name=tag&logo=github&logoColor=white)](https://github.com/datos-Fundar/data-chart-telling/releases/latest)
 ![GitHub License](https://img.shields.io/github/license/datos-Fundar/data-chart-telling?label=License&logo=github&logoColor=white)
 [![CI](https://img.shields.io/github/actions/workflow/status/datos-Fundar/data-chart-telling/ci.yml?branch=main&label=CI&logo=githubactions&logoColor=white)](https://github.com/datos-Fundar/data-chart-telling/actions/workflows/ci.yml)
+[![Storybook](https://img.shields.io/badge/Storybook-live-FF4785?logo=storybook&logoColor=white)](https://datos-fundar.github.io/data-chart-telling/)
 [![CodeQL](https://img.shields.io/github/actions/workflow/status/datos-Fundar/data-chart-telling/codeql.yml?branch=main&label=CodeQL&logo=github&logoColor=white)](https://github.com/datos-Fundar/data-chart-telling/actions/workflows/codeql.yml)
 
 ## Introduction
@@ -150,7 +151,7 @@ Start with the concepts; the rest is organised by what you want a plot to do.
 | [Architecture](docs/architecture.md)                           | How a plot is assembled, for contributors                                                    |
 | [Development](docs/development.md)                             | Building, testing, Storybook and publishing                                                  |
 
-Working examples live in [examples/](examples/); the Storybook (`pnpm storybook`) shows every option live.
+Working examples live in [examples/](examples/); the [online Storybook](https://datos-fundar.github.io/data-chart-telling/) (or `pnpm storybook` locally) shows every option live.
 
 ## For LLMs and coding agents
 

package/dist/configuration/config.svelte.js

@@ -92,6 +92,18 @@ export const DEFAULT_CONFIG = {
         titleWeight: 500,
         gap: '0.5rem 2rem',
         swatchSize: '0.9rem',
+        icon: {
+            rounded: false,
+            marks: {
+                line: 'line',
+                dot: 'circle',
+                area: 'square',
+                bar: 'square',
+                cell: 'square',
+                rect: 'square',
+                geo: 'square'
+            }
+        },
         disabledOpacity: 0.12,
         pretty: true,
         seriesTitle: { enabled: true, text: 'Series' },

package/dist/layout/facet/scope.d.ts

@@ -0,0 +1,40 @@
+import type { FacetTarget } from '../../types/layout/facet';
+import type { SlicePlace } from '../../types/layout/plot';
+import type { FacetPanel } from '../../types/phases';
+/** Where a facet panel sits, as a segment's or a marker's `facet` names it. */
+type PanelPlace = SlicePlace['facet'];
+/**
+ * Limiting a plot's segments and markers to some facet panels: which panels a `facet` names, and each
+ * panel's share of a list of them. A plot with no facet has no panel, so what names one is left out.
+ */
+export declare class FacetScope {
+    /** Where a panel the "facet" phase laid out sits. */
+    static placeOf(panel: FacetPanel): NonNullable<PanelPlace>;
+    /**
+     * Whether something limited to `target` applies at the facet panel `place`. Without a target it
+     * applies everywhere; with one, only to the panels it names, and to no plot that has no facet.
+     */
+    static targets(target: FacetTarget | undefined, place: PanelPlace): boolean;
+    /**
+     * `items` as the facet panel `place` sees them: those that name no facet, or name this one, with
+     * their `facet` taken off. The same list comes back when none names a facet.
+     */
+    static scope<T extends object>(items: T[] | undefined, place: PanelPlace): T[] | undefined;
+    /** A `segments` config as the facet panel `place` sees it: each series' segments, {@link FacetScope.scope}d. */
+    static scopeSegments<T extends object>(segments: Record<string, T[]> | undefined, place: PanelPlace): Record<string, T[]> | undefined;
+    /**
+     * `segments` for a plot whose series are split by facet panel: each segment that names a facet moves
+     * under the key of its series in every panel it names - the id of that series' part there, as
+     * {@link FacetPanels.buildSeriesId} writes it, or `default` for the panel's series without their own -
+     * and loses its `facet`. Segments that name none stay where they were. The same config comes back
+     * when none names a facet.
+     */
+    static distributeSegments<T extends object>(segments: Record<string, T[]> | undefined, panels: FacetPanel[]): Record<string, T[]> | undefined;
+    /**
+     * `markers` for a plot split by facet panel: each marker that names a facet becomes one copy per
+     * panel it names, tagged with that panel ({@link PANEL_KEY}) and without its `facet`, in the marker's
+     * own place in the list. Markers that name none stay as they are, for every panel.
+     */
+    static distributeMarkers<T extends object>(markers: T[] | undefined, panels: FacetPanel[]): T[] | undefined;
+}
+export {};

package/dist/layout/facet/scope.js

@@ -0,0 +1,104 @@
+import { FacetPanels, PANEL_KEY } from '../../phases/facet/FacetPanels';
+/**
+ * Limiting a plot's segments and markers to some facet panels: which panels a `facet` names, and each
+ * panel's share of a list of them. A plot with no facet has no panel, so what names one is left out.
+ */
+export class FacetScope {
+    /** Where a panel the "facet" phase laid out sits. */
+    static placeOf(panel) {
+        return {
+            facetValue: panel.label,
+            ...(panel.row !== undefined ? { row: panel.row } : {}),
+            ...(panel.col !== undefined ? { col: panel.col } : {})
+        };
+    }
+    /**
+     * Whether something limited to `target` applies at the facet panel `place`. Without a target it
+     * applies everywhere; with one, only to the panels it names, and to no plot that has no facet.
+     */
+    static targets(target, place) {
+        if (target === undefined)
+            return true;
+        if (!place)
+            return false;
+        const names = (value) => (Array.isArray(value) ? value : [value]).map(String);
+        if (typeof target === 'object' && !Array.isArray(target)) {
+            const matches = (wanted, actual) => wanted === undefined || (actual !== undefined && names(wanted).includes(actual));
+            return matches(target.row, place.row) && matches(target.col, place.col);
+        }
+        return names(target).includes(place.facetValue);
+    }
+    /**
+     * `items` as the facet panel `place` sees them: those that name no facet, or name this one, with
+     * their `facet` taken off. The same list comes back when none names a facet.
+     */
+    static scope(items, place) {
+        const facetOf = (item) => item.facet;
+        if (!items || items.every((item) => facetOf(item) === undefined))
+            return items;
+        return items
+            .filter((item) => FacetScope.targets(facetOf(item), place))
+            .map((item) => {
+            const rest = { ...item };
+            delete rest.facet;
+            return rest;
+        });
+    }
+    /** A `segments` config as the facet panel `place` sees it: each series' segments, {@link FacetScope.scope}d. */
+    static scopeSegments(segments, place) {
+        if (!segments)
+            return segments;
+        const scoped = Object.entries(segments).map(([series, list]) => [series, FacetScope.scope(list, place) ?? list]);
+        if (scoped.every(([series, list]) => list === segments[series]))
+            return segments;
+        return Object.fromEntries(scoped);
+    }
+    /**
+     * `segments` for a plot whose series are split by facet panel: each segment that names a facet moves
+     * under the key of its series in every panel it names - the id of that series' part there, as
+     * {@link FacetPanels.buildSeriesId} writes it, or `default` for the panel's series without their own -
+     * and loses its `facet`. Segments that name none stay where they were. The same config comes back
+     * when none names a facet.
+     */
+    static distributeSegments(segments, panels) {
+        if (!segments)
+            return segments;
+        const named = Object.values(segments).some((list) => list.some((item) => item.facet !== undefined));
+        if (!named)
+            return segments;
+        const distributed = {};
+        for (const [series, list] of Object.entries(segments)) {
+            for (const item of list) {
+                const { facet, ...rest } = item;
+                if (facet === undefined) {
+                    (distributed[series] ??= []).push(item);
+                    continue;
+                }
+                for (const panel of panels) {
+                    if (!FacetScope.targets(facet, FacetScope.placeOf(panel)))
+                        continue;
+                    (distributed[FacetPanels.buildSeriesId(panel.key, series)] ??= []).push(rest);
+                }
+            }
+        }
+        return distributed;
+    }
+    /**
+     * `markers` for a plot split by facet panel: each marker that names a facet becomes one copy per
+     * panel it names, tagged with that panel ({@link PANEL_KEY}) and without its `facet`, in the marker's
+     * own place in the list. Markers that name none stay as they are, for every panel.
+     */
+    static distributeMarkers(markers, panels) {
+        if (!markers || markers.every((marker) => marker.facet === undefined)) {
+            return markers;
+        }
+        return markers.flatMap((marker) => {
+            const { facet, ...rest } = marker;
+            if (facet === undefined)
+                return [marker];
+            return panels
+                .filter((panel) => FacetScope.targets(facet, FacetScope.placeOf(panel)))
+                .map((panel) => ({ ...rest, [PANEL_KEY]: panel.key }));
+        });
+    }
+}

package/dist/layout/legend/DiscreteSymbolIcon.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { LegendItem } from '../../types/layout/legend';
-	import type { LineStyle } from '../../types/plots/constants';
+	import type { LineStyle, SymbolType } from '../../types/plots/constants';
 	import { SymbolPath } from '../../utils/SymbolPath';
 
 	/**
@@ -8,16 +9,35 @@
 	 * (`DiscreteSwatchItem` and `DiscreteBadgeItem`) so the two stay in sync.
 	 * `color` is caller-supplied rather than read off `item` - the swatch look
 	 * fills it with the series color, the badge look with its own label color.
-	 * A shape draws as the plot's dot does, fitted to the icon.
+	 * The shape is the item's own `symbol`, or the one `legend.icon.marks` gives
+	 * the way it draws. A shape draws as the plot's dot does, fitted to the icon;
+	 * `legend.icon.rounded` softens its corners.
 	 */
 	let { item, color }: { item: LegendItem; color: string } = $props();
 
+	const cfg = $derived(getConfiguration());
+	const icon = $derived(cfg.legend.icon);
+	const shape = $derived<SymbolType>(
+		item.symbol ?? (item.mark ? icon.marks[item.mark] : undefined) ?? 'square'
+	);
+	const rounded = $derived(icon.rounded);
 	const filled = $derived(item.filled ?? true);
-	const paint = $derived(
-		filled
-			? { fill: color }
-			: { fill: 'none', stroke: color, 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke' }
+	// A rounded filled shape grows a same-colored stroke with round joins, so it is drawn smaller by that much.
+	const paint = $derived<Record<string, string | number>>(
+		!filled
+			? {
+					fill: 'none',
+					stroke: color,
+					'stroke-width': 1.5,
+					...(rounded ? { 'stroke-linejoin': 'round' } : {}),
+					'vector-effect': 'non-scaling-stroke'
+				}
+			: rounded
+				? { fill: color, stroke: color, 'stroke-width': 1.5, 'stroke-linejoin': 'round' }
+				: { fill: color }
 	);
+	const size = $derived(filled ? (rounded ? 6.5 : 8) : 7);
+	const offset = $derived(!filled ? 1.5 : rounded ? 1.75 : 1);
 
 	function dashArray(style?: LineStyle): string | undefined {
 		switch (style) {
@@ -34,13 +54,7 @@
 </script>
 
 <svg class="dct-discrete__swatch" viewBox="0 0 15 10">
-	{#if item.symbol && item.symbol !== 'line'}
-		<path
-			d={SymbolPath.fitted(item.symbol, filled ? 8 : 7)}
-			transform={filled ? 'translate(1,1)' : 'translate(1.5,1.5)'}
-			{...paint}
-		/>
-	{:else if item.symbol === 'line'}
+	{#if shape === 'line'}
 		<line
 			x1="2"
 			y1="5"
@@ -51,8 +65,18 @@
 			stroke-linecap="round"
 			stroke-dasharray={dashArray(item.lineStyle)}
 		/>
-	{:else}
+	{:else if rounded && filled && shape === 'square'}
+		<rect x="1" y="1" width="8" height="8" rx="2" fill={color} />
+	{:else if rounded && filled && shape === 'triangle'}
+		<path
+			d="M 6 2 L 9 7.5 A 1.5 1.5 0 0 1 7.8 10 L 2.2 10 A 1.5 1.5 0 0 1 1 7.5 L 4 2 A 1.5 1.5 0 0 1 6 2"
+			fill={color}
+			transform="translate(0,-1)"
+		/>
+	{:else if shape === 'square' && filled && !rounded}
 		<rect x="1" y="1" width="8" height="8" fill={color} />
+	{:else}
+		<path d={SymbolPath.fitted(shape, size)} transform="translate({offset},{offset})" {...paint} />
 	{/if}
 </svg>
 

package/dist/layout/legend/LegendState.svelte.js

@@ -340,11 +340,9 @@ export class LegendState {
             ...(entry.label ? { label: entry.label } : {}),
             color: entry.color,
             ...(entry.filled === false ? { filled: false } : {}),
-            ...(entry.symbol || entry.mark === 'dot'
-                ? { symbol: entry.symbol ?? 'circle' }
-                : entry.mark === 'line'
-                    ? { symbol: 'line', lineStyle: entry.lineStyle ?? 'solid' }
-                    : {})
+            ...(entry.mark ? { mark: entry.mark } : {}),
+            ...(entry.symbol ? { symbol: entry.symbol } : {}),
+            ...(entry.mark === 'line' ? { lineStyle: entry.lineStyle ?? 'solid' } : {})
         };
     }
 }

package/dist/layout/margins/PlotMargins.svelte.js

@@ -148,8 +148,39 @@ export class PlotMargins {
             if (held !== undefined || grown !== undefined)
                 out[side] = Math.max(held ?? 0, grown ?? 0);
         }
+        for (const [a, b, extent] of [
+            ['left', 'right', width],
+            ['top', 'bottom', height]
+        ]) {
+            PlotMargins.#keepContent(out, [a, b], extent, author, estimate);
+        }
         return out;
     });
+    /** The share of a box's extent its margins always leave to the plot's own area. */
+    static #MIN_CONTENT = 0.25;
+    /**
+     * Cuts the growth of two opposite sides of `out`, in proportion, until they
+     * leave the plot's area its minimum share of `extent` - a negative area makes
+     * svelteplot draw marks with negative sizes. A side never goes below the
+     * estimate, and a side the author fixed is left alone.
+     */
+    static #keepContent(out, sides, extent, author, estimate) {
+        const fixed = (side) => {
+            const own = author?.[side];
+            return typeof own === 'number' ? own : estimate[side];
+        };
+        const used = (side) => out[side] ?? fixed(side);
+        const over = used(sides[0]) + used(sides[1]) - extent * (1 - PlotMargins.#MIN_CONTENT);
+        const room = sides.map((side) => out[side] === undefined ? 0 : Math.max(0, out[side] - estimate[side]));
+        const total = room[0] + room[1];
+        if (over <= 0 || total <= 0)
+            return;
+        const cut = Math.min(over, total);
+        sides.forEach((side, i) => {
+            if (out[side] !== undefined)
+                out[side] -= (cut * room[i]) / total;
+        });
+    }
     /** The author's margins, with the room labels need. */
     #labels = $derived.by(() => {
         const author = this.#inputs.author();

package/dist/layout/plot/Plot.svelte

@@ -18,6 +18,7 @@
 	import { merge } from '../../utils/merge';
 	import { Pipeline } from '../../phases/Pipeline';
 	import { Slice } from './Slice';
+	import { FacetScope } from '../facet/scope';
 	import type { TooltipProp } from '../../types/layout/tooltip';
 	import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';
 	import type { PlotCellContext, PlotCellSnippet, PlotCoreBase } from '../../types/layout/plot';
@@ -153,6 +154,24 @@
 		return rest;
 	}
 
+	/**
+	 * The props of the core that draws the slice `ctx`: the kind's `slice`, or the plot's own, with the
+	 * `markers` and `segments` that name a facet left to the panels they name. The data phases already
+	 * handed them to their panels; this is for the cores that read them from their own props.
+	 */
+	function coreProps(ctx: PlotCellContext<TRow, TScales>) {
+		const props = (slice ?? buildSliceProps)(ctx) as Record<string, unknown>;
+		const { markers, segments } = props as {
+			markers?: object[];
+			segments?: Record<string, object[]>;
+		};
+		return {
+			...props,
+			...(markers ? { markers: FacetScope.scope(markers, ctx.facet) } : {}),
+			...(segments ? { segments: FacetScope.scopeSegments(segments, ctx.facet) } : {})
+		};
+	}
+
 	function buildSliceProps(ctx: PlotCellContext<TRow, TScales>) {
 		return {
 			...core,
@@ -172,9 +191,9 @@
 	{#if cell}
 		{@render cell(ctx)}
 	{:else if Core && sliced}
-		<Core {...(slice ?? buildSliceProps)(ctx)} {pipeline} />
+		<Core {...coreProps(ctx)} {pipeline} />
 	{:else if Core}
-		<Core {...withoutMargins((slice ?? buildSliceProps)(ctx))} bind:margins {pipeline} />
+		<Core {...withoutMargins(coreProps(ctx))} bind:margins {pipeline} />
 	{/if}
 {/snippet}
 
@@ -194,6 +213,7 @@
 			panel: panels
 				? FacetPanels.buildPanelState(panels, slicing.panelKey(place) ?? '')
 				: undefined,
+			facet: place,
 			keep: slicing.keep({ time, facet: place })
 		})}
 	</HoverScope>

package/dist/layout/scales/ScalesLayout.svelte

@@ -243,6 +243,27 @@
 		$autoMarginLeft.delete(marginId);
 	});
 
+	// The top y tick's label is centered on the plot's top edge, so it reaches
+	// half its height above it - more than svelteplot's own 5px `'auto'` top margin.
+	const { autoMarginTop } = getContext<{ autoMarginTop: Writable<Map<string, number>> }>(
+		'svelteplot/autoMargins'
+	);
+	const tickMarginId = `dct-y-tick-${Math.random().toString(36).slice(2)}`;
+	$effect(() => {
+		const wanted =
+			(scales?.y?.axisDisplay ?? 'visible') === 'visible'
+				? Math.ceil(cfg.axis.fontSize / 2) + 2
+				: undefined;
+		untrack(() => {
+			if (wanted === undefined) $autoMarginTop.delete(tickMarginId);
+			else if ($autoMarginTop.get(tickMarginId) !== wanted)
+				$autoMarginTop.set(tickMarginId, wanted);
+		});
+	});
+	$effect(() => () => {
+		$autoMarginTop.delete(tickMarginId);
+	});
+
 	// An x label centred on the domain's end reaches past the plot's right side; an `'auto'` right margin takes that much room.
 	let xAxisEl: SVGGElement | undefined = $state();
 	const { autoMarginRight } = getContext<{ autoMarginRight: Writable<Map<string, number>> }>(

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

@@ -1,5 +1,5 @@
 import type { Series } from '../../types/plots/data/common';
-import type { DeltaConfig } from '../../types/markers/axis/delta';
+import type { DeltaConfig, DeltaMarkerConfig, DeltaPointConfig } from '../../types/markers/axis/delta';
 /** A delta, measured: where it sits (`at`), its two ends and what lies between. */
 export type ResolvedDelta = {
     cfg: DeltaConfig;
@@ -16,6 +16,11 @@ export type ResolvedDelta = {
  */
 export declare class Delta {
     #private;
+    /**
+     * The deltas a marker draws: one for its `at`, or one for each position of a list, each with the
+     * `line`, `text` and `dot` its style functions give for that position.
+     */
+    static points(marker: DeltaMarkerConfig): DeltaPointConfig[];
     /** 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

@@ -5,6 +5,21 @@ import { resolveAccessor } from '../../utils/accessors';
  * it crosses that position, interpolated linearly between its two nearest points.
  */
 export class Delta {
+    /**
+     * The deltas a marker draws: one for its `at`, or one for each position of a list, each with the
+     * `line`, `text` and `dot` its style functions give for that position.
+     */
+    static points(marker) {
+        const positions = Array.isArray(marker.at) ? marker.at : [marker.at];
+        const own = (style, at) => typeof style === 'function' ? style(at) : style;
+        return positions.map((at) => ({
+            ...marker,
+            at,
+            line: own(marker.line, at),
+            text: own(marker.text, at),
+            dot: own(marker.dot, at)
+        }));
+    }
     /** 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);

package/dist/markers/delta/DeltaMarker.svelte

@@ -1,96 +1,18 @@
 <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 DeltaPoint from './DeltaPoint.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';
 
+	/**
+	 * A delta annotation: one at `marker.at`, or, when it is a list, one at each position - all with the
+	 * same ends. `line`, `text` and `dot` can be functions of the position.
+	 */
 	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
-	});
+	const points = $derived(Delta.points(marker));
 </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}
+{#each points as point (String(point.at))}
+	<DeltaPoint marker={point} {data} />
+{/each}