@fundar/data-chart-telling 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 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.19.0] - 2026-11-11
+
+### Added
+
+- **Value labels, laid out three ways.** Every plot's `styles.values`, and every marker's `label`, takes a `layout`:
+  - `'point'` - beside a point: a line's last value, a scatter's dots, a corner of a bar. `side` (`'after'`, `'before'`, `'above'`, `'below'`, `'on'`) and `gap` place it.
+  - `'path'` - along an edge or a stroke: past a bar's tip (its sign followed per bar), along a line or an area's edge, around a dot's rim. `edge`, `side` and `offset` place it, `offset: 'max'` putting it at each curve's peak.
+  - `'box'` - inside each shape, fitted to it: a heatmap's cells, a stacked bar's segments.
+
+  Each plot kind keeps its own default and takes only the layouts its shapes can write, checked by its types: `<LinePlot styles={{ values: { layout: 'path' } }} />` writes each series' name along its line. See the new [Value labels](docs/value-labels.md) page and the _Layout/Values_ stories.
+
+- **Labels that stay readable.** On a scatter, labels move clockwise around their dot to the first free spot, and are left out where there is none (`declutter: 'around'`, also on a marker's label or a `text` marker). A value written on its own dot is hidden where a later dot covers it.
+- **Several values per row.** `styles.values.parts` picks which values a row writes, typed per plot: a box's or violin's `'min'`, `'p25'`, `'median'`, `'p75'`, `'max'` and `'outliers'`, a bullet's `'target'` and `'ranges'`, a forest's `'lower'` and `'upper'` - as a list, or a record with options for each (`parts: { median: true, max: { format } }`). A label's `format` gets the part in `context.part`.
+- **Value labels on `BoxPlot`, `ViolinPlot` and `DensityPlot`.** A box writes its whisker ends and median, a violin its median, a density each curve's name at its peak.
+- **More on value labels:** a marker's `label` can be a list; any option of `styles.values` turns the labels on, without `show: true`; `select` and `series` now also pick the labelled rows of bar, histogram, heatmap and scatter plots.
+- **A generic `Plot`** that draws only its `markers`, with every option a plot takes, for annotations and custom compositions: `<Plot markers={[{ type: 'density', data, x: 'gdp', y: 'life' }]} />`.
+- **Markers inherit from their plot** the position and channels they leave unset (`x`, `y`, `opacity`, `symbol`, `r`, `length`, with their scales), and run horizontally or vertically by their own channels when the plot has none.
+
+### Changed
+
+- **Breaking:** `styles.values.anchor` is replaced by `layout` and its options. On a line plot, `'start'` is now `side: 'after'` (the default), `'end'` is `side: 'before'`, `'outside'` is `side: 'above'`, `'middle'` is `side: 'on'`. On a bar plot, `'outside'` is the default, `'tip'` and `'base'` are `{ layout: 'path', edge: 'tip' | 'base', side: 'inside' }`, and `'middle'` or a page edge is `{ layout: 'box', anchor }`.
+- **Breaking:** `styles.values.fontStyle` only styles the text: `dx`, `dy`, `textAnchor` and `lineAnchor` are gone, the layout places it (`fontStyle: { dy: -12 }` is `gap: 12`).
+- **Breaking:** a shape label's `outside` is gone: `{ anchor: 'top', outside: true }` is `{ layout: 'path', edge: 'top' }`.
+- **Breaking:** the plot shell exported as `Plot` (to build your own plot kinds) is now `AbstractPlot`; `Plot` is the new generic plot.
+- A scatter's value labels sit above their dots by default, and no longer overlap.
+
+### Fixed
+
+- `styles.values.color` now colors the labels of bar, pyramid, histogram and scatter plots.
+- A violin plot colored by its category draws each violin centered in its band, instead of side by side with empty slots.
+- The x axis title no longer lands on the tick labels when value labels grow the plot's margins.
+- A label along a line, near one of its ends, is no longer cut short.
+- **Hovering no longer lays the whole plot out again at every move of the pointer.** svelteplot works a plot's scales out from every mark's rows, and the hover changed them at each move: its dots, rules and values came and went as marks of the plot, the `active` and `others` styles split a marker's rows anew, and a mark copied its rows whenever one of their styles changed. Each move rebuilt every scale from every row, scaled every mark again and measured the margins again, more so the more series, rows and synced panels a plot has. Now the hover's `back` and `front` markers are drawn on the plot's scales without taking part in them, a marker the hover restyles stays whole with each style read off the row as it is hovered, and the plot works its scales out again only when a mark's rows hold something new. A move of the pointer over a fifteen-line plot settles in about a quarter of the time, and over a treemap or a heatmap that restyles its shapes in a tenth to a quarter.
+- The outline the `hover` marker's `active` gives the hovered shapes (its `stroke`, `strokeWidth`, `strokeOpacity` and `strokeDasharray`, the plot's own `hover.active` by default) is drawn whole, over every shape of the plot. It was drawn on the shape itself, in its marker's order, so the tiles of a treemap, the cells of a heatmap with no gap or the bars of a plot drawn after it covered part of it. The outline never takes the pointer from the shape under it.
+
 ## [1.18.0] - 2026-11-09
 
 ### Added

package/README.md

@@ -136,7 +136,8 @@ Start with the concepts; the rest is organised by what you want a plot to do.
 | [Concepts](docs/concepts.md)                                   | Plots and figures, rows and series, channels, the props every plot shares                    |
 | [Plots](docs/plots.md)                                         | Every plot kind: what it draws and what it needs                                             |
 | [Scales](docs/scales.md)                                       | Axes (`x`, `y`) and channel scales (`color`, `grouping`, `opacity`, `symbol`, `r`, `length`) |
-| [Styles and segments](docs/styles-and-segments.md)             | Value labels, frames, gap filling, and styling ranges of the data                            |
+| [Styles and segments](docs/styles-and-segments.md)             | Value labels in brief, frames, gap filling, and styling ranges of the data                   |
+| [Value labels](docs/value-labels.md)                           | A plot's values on its shapes, and a marker's labels: layouts and their options              |
 | [Markers](docs/markers.md)                                     | Extra marks on a plot: annotations, regions, hover highlights, custom components             |
 | [Transforms and statistics](docs/transforms-and-statistics.md) | Stacking, binning, smoothing, regression and the other data transforms                       |
 | [Tooltip and hover](docs/tooltip-and-hover.md)                 | Floating tooltips, in-plot highlights, syncing hover across plots                            |

package/dist/configuration/config.svelte.js

@@ -158,7 +158,7 @@ export const DEFAULT_CONFIG = {
         border: 'none'
     },
     hover: {
-        rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
+        rule: { stroke: '#64748b', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
         dot: { dotRadius: 5, dotFill: 'currentColor' },
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
         area: { fill: '#94a3b8', fillOpacity: 0.4 },

package/dist/index.d.ts

@@ -19,7 +19,8 @@ export { default as TreemapPlot } from './plots/part-of-a-whole/treemap/Plot.sve
 export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 export { default as PlotComposer } from './layout/composer/PlotComposer.svelte';
 export { default as GridCell } from './layout/grid/GridCell.svelte';
-export { default as Plot } from './layout/plot/Plot.svelte';
+export { default as Plot } from './plots/generic/Plot.svelte';
+export { default as AbstractPlot } from './layout/plot/AbstractPlot.svelte';
 export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
 export { RowContext } from './phases/context/RowContext';
@@ -44,6 +45,7 @@ export type { AxisScale, AxisBasedScalesConfig, ChannelScalesConfig } from './ty
 export type { NumberDisplay } from './types/layout/numbers';
 export type { TreemapPlotProps, TreemapRowContext, TreemapTooltipContext } from './types/plots/part-of-a-whole/treemap/props';
 export type { TreemapTile } from './types/transforms/treemap';
+export type { GenericPlotProps, GenericDataProps } from './types/plots/generic/props';
 export type { Accessor, Series, SeriesProps, NonAxisDataProps, SingleAxisDataProps, DualAxisDataProps } from './types/plots/data/common';
 export type { BasePlotProps, PlotCoreProps, PlotChromeProps, FigureBoxProps, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig } from './types/plots/props';
 export type { AxisBasedStylesConfig, ConnectorBasedStylesConfig, BulletStylesConfig, GapsAwarePlotStylesConfig, CurveAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';

package/dist/index.js

@@ -25,7 +25,8 @@ export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 export { default as PlotComposer } from './layout/composer/PlotComposer.svelte';
 export { default as GridCell } from './layout/grid/GridCell.svelte';
 // The generic plot, to build your own plot kind: wrap it with your kind's core and defaults.
-export { default as Plot } from './layout/plot/Plot.svelte';
+export { default as Plot } from './plots/generic/Plot.svelte';
+export { default as AbstractPlot } from './layout/plot/AbstractPlot.svelte';
 export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
 // What a plot knows of each row it draws, which every format reads.

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -2,6 +2,7 @@
 	import type { ComponentProps, Snippet } from 'svelte';
 	import { geoCentroid, type GeoPermissibleObjects } from 'd3-geo';
 	import { Plot } from 'svelteplot';
+	import ScaleGateMarks from '../geometry/ScaleGateMarks.svelte';
 	import { resolveProjection } from './resolveProjection';
 	import { resolveCameraTarget } from './resolveCameraTarget';
 	import { createGeoZoom, type GeoZoomTransform } from './zoom.svelte';
@@ -182,7 +183,8 @@
 	</defs>
 	<g clip-path="url(#{clipId})">
 		<ProjectionZoom inner={geoZoom.transform} outer={cameraTransform}>
-			{@render children()}
+			<!-- The plot's scales follow what its marks' rows hold, not every copy a mark makes of them. -->
+			<ScaleGateMarks>{@render children()}</ScaleGateMarks>
 		</ProjectionZoom>
 	</g>
 </Plot>

package/dist/layout/geometry/GeometryLayout.svelte

@@ -40,9 +40,10 @@
 	import ContourMarker from '../../markers/contour/ContourMarker.svelte';
 	import ContourClipMarker from '../../markers/contour/ContourClipMarker.svelte';
 	import InsetMarker from '../../markers/inset/InsetMarker.svelte';
-	import MarkerLabel from '../../markers/utils/MarkerLabel.svelte';
+	import MarkerLabel from '../../markers/labels/MarkerLabel.svelte';
 	import FrameClip from './FrameClip.svelte';
 	import MarkerOffset from './MarkerOffset.svelte';
+	import ScaleFreeMarks from './ScaleFreeMarks.svelte';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { usePlot } from '../plot/usePlot';
 	import { PlotMargins } from '../margins/PlotMargins.svelte';
@@ -395,12 +396,11 @@
 {/snippet}
 
 {#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
-	<!-- In parts the hover styles alike, while it restyles the marker's shapes. -->
-	{#each shapes.split(withHover(marker, rows), rows, reach) as part (part.key)}
-		<MarkerOffset marker={part.marker}>
-			{@render drawMarker(part.marker, rows)}
-		</MarkerOffset>
-	{/each}
+	<!-- One marker over all its rows, each style the hover sets read off the row as it is hovered. -->
+	{@const styled = shapes.styled(withHover(marker, rows), rows, reach)}
+	<MarkerOffset marker={styled}>
+		{@render drawMarker(styled, rows)}
+	</MarkerOffset>
 {/snippet}
 
 {#snippet renderScoped(marker: MarkerConfig, group: ScopedMarkerGroup<TSeries>)}
@@ -423,15 +423,18 @@
 {/snippet}
 
 {#snippet renderHoverLayer(index: number, layer: 'back' | 'front')}
-	{#each hoverLayers.get(index)?.[layer] ?? [] as part (part.key)}
-		<!-- A point in a slice of its band (a grouped bar's series) is drawn in the middle of it. -->
-		{@const nudge = BandNudge.of(svelteplot.scales, part.slice)}
-		<g transform="translate({nudge.dx}, {nudge.dy})">
-			<FrameClip clip={FrameClipping.isClipped(part.marker)}>
-				{@render renderMarker(part.marker as MarkerConfig, data)}
-			</FrameClip>
-		</g>
-	{/each}
+	<!-- Drawn on the plot's scales, never shaping them: a hover that moves never lays the plot out again. -->
+	<ScaleFreeMarks>
+		{#each hoverLayers.get(index)?.[layer] ?? [] as part (part.key)}
+			<!-- A point in a slice of its band (a grouped bar's series) is drawn in the middle of it. -->
+			{@const nudge = BandNudge.of(svelteplot.scales, part.slice)}
+			<g transform="translate({nudge.dx}, {nudge.dy})">
+				<FrameClip clip={FrameClipping.isClipped(part.marker)}>
+					{@render renderMarker(part.marker as MarkerConfig, data)}
+				</FrameClip>
+			</g>
+		{/each}
+	</ScaleFreeMarks>
 {/snippet}
 
 <!-- What the hover draws behind the plot's shapes, before any of them. -->
@@ -459,6 +462,39 @@
 	{/if}
 {/each}
 
+{#snippet renderOutline(marker: MarkerConfig, rows: TData[] | TSeries[])}
+	{@const outline = shapes.outline(marker, rows, reach)}
+	{#if outline}
+		<FrameClip clip={FrameClipping.isClipped(outline)}>
+			<MarkerOffset marker={outline}>
+				{@render drawMarker(outline, rows)}
+			</MarkerOffset>
+		</FrameClip>
+	{/if}
+{/snippet}
+
+<!--
+	The hovered shapes' outline, over every shape: a shape is drawn in its marker's order, so a neighbour drawn after
+	it would cover part of its outline. Drawn on the plot's scales, never shaping them, and never taking the pointer.
+-->
+{#if shapes.outlines}
+	<g class="dct-hover-outline" pointer-events="none">
+		<ScaleFreeMarks>
+			{#each markers as marker, i (markerKey(marker, i))}
+				{@const scope = scopedSeriesOf(marker)}
+				{#if marker.type !== 'hover' && marker.type !== 'component'}
+					{#if scope === undefined}
+						{@render renderOutline(marker, data)}
+					{:else if groupByName.has(scope)}
+						{@const group = groupByName.get(scope)!}
+						{@render renderOutline(MarkerGrouping.withSeriesColor(marker, group.color), group.data)}
+					{/if}
+				{/if}
+			{/each}
+		</ScaleFreeMarks>
+	</g>
+{/if}
+
 <!--
 	The labels the shapes write in themselves, after every marker - the hover's hit areas too, which are the last of them -
 	so a label that listens for the pointer is not covered, and one outside its shape is not clipped with it.
@@ -466,11 +502,10 @@
 {#each markers as marker, i (markerKey(marker, i))}
 	{@const scope = scopedSeriesOf(marker)}
 	{#if 'label' in marker && marker.label && (scope === undefined || groupByName.has(scope))}
-		<!-- Split as the shapes are, so a label reads on its shape's color under the hover. -->
-		{#each shapes.split(marker, data, reach) as part (part.key)}
-			<MarkerOffset marker={part.marker}>
-				<MarkerLabel marker={{ ...part.marker, data: part.marker.data ?? data }} />
-			</MarkerOffset>
-		{/each}
+		<!-- Styled as the shapes are, so a label reads on its shape's color under the hover. -->
+		{@const styled = shapes.styled(marker, data, reach)}
+		<MarkerOffset marker={styled}>
+			<MarkerLabel marker={{ ...styled, data: styled.data ?? data }} />
+		</MarkerOffset>
 	{/if}
 {/each}

package/dist/layout/geometry/ScaleFreeContext.d.ts

@@ -0,0 +1,31 @@
+/**
+ * svelteplot's plot context as the marks drawn under a `ScaleFreeMarks` see it: the plot's own state and scales,
+ * but marks that never join the plot's list of marks.
+ *
+ * svelteplot works out a plot's scales from every mark it holds - their data and options - so a mark whose data
+ * changes at every move of the pointer (a hover's dot, its rule, its value) lays the whole plot out again each time:
+ * every scale built anew from every row, every mark scaled again, the margins measured again. A mark that is only
+ * drawn on the plot's scales, never shaping them, can be left out of them.
+ *
+ * Left out, a mark is in none of the scales' `skip` lists either - the marks whose channel values are already
+ * output (a color, a symbol, an opacity) and go through no scale. What these marks draw has no scale of its own to
+ * go through, so every such channel of theirs is taken as it is: a hover's colors are its points' own, resolved.
+ */
+/** The parts of svelteplot's plot context a mark reads. */
+export type SvelteplotContext = {
+    addMark: (mark: {
+        id: symbol;
+    }) => void;
+    removeMark: (mark: {
+        id: symbol;
+    }) => void;
+    updateMark?: (mark: {
+        id: symbol;
+    }) => void;
+    getPlotState: () => object;
+    [key: string]: unknown;
+};
+export declare const ScaleFreeContext: {
+    /** `parent`, the plot's own context, for marks drawn on its scales that never take part in them. */
+    of(parent: SvelteplotContext): SvelteplotContext;
+};

package/dist/layout/geometry/ScaleFreeContext.js

@@ -0,0 +1,65 @@
+/**
+ * svelteplot's plot context as the marks drawn under a `ScaleFreeMarks` see it: the plot's own state and scales,
+ * but marks that never join the plot's list of marks.
+ *
+ * svelteplot works out a plot's scales from every mark it holds - their data and options - so a mark whose data
+ * changes at every move of the pointer (a hover's dot, its rule, its value) lays the whole plot out again each time:
+ * every scale built anew from every row, every mark scaled again, the margins measured again. A mark that is only
+ * drawn on the plot's scales, never shaping them, can be left out of them.
+ *
+ * Left out, a mark is in none of the scales' `skip` lists either - the marks whose channel values are already
+ * output (a color, a symbol, an opacity) and go through no scale. What these marks draw has no scale of its own to
+ * go through, so every such channel of theirs is taken as it is: a hover's colors are its points' own, resolved.
+ */
+/** The scales whose channel values a scale-free mark takes as they are, never through the scale. */
+const OUTPUT_SCALES = new Set(['color', 'opacity', 'symbol']);
+/** A `skip` list holding every mark: each of the channel's values is output already. */
+const EVERY_MARK = { has: () => true };
+const SKIP_ALL = { get: () => EVERY_MARK };
+/** A Proxy's `get` reading `target`'s own property (a class getter runs on the target, its private fields there). */
+const read = (target, key) => {
+    const value = Reflect.get(target, key);
+    return typeof value === 'function' ? value.bind(target) : value;
+};
+const scaleViews = new WeakMap();
+const scalesViews = new WeakMap();
+const stateViews = new WeakMap();
+/** One cached view of `target` per object, so a mark that derives from it sees the same one until it changes. */
+function viewOf(cache, target, make) {
+    let view = cache.get(target);
+    if (!view) {
+        view = make(target);
+        cache.set(target, view);
+    }
+    return view;
+}
+/** A scale whose `skip` holds every mark. */
+const outputScale = (scale) => viewOf(scaleViews, scale, (s) => new Proxy(s, { get: (t, k) => (k === 'skip' ? SKIP_ALL : read(t, k)) }));
+/** The plot's scales, its output scales skipping every mark. */
+const scalesView = (scales) => viewOf(scalesViews, scales, (s) => new Proxy(s, {
+    get: (t, k) => {
+        const scale = read(t, k);
+        return OUTPUT_SCALES.has(k) && scale && typeof scale === 'object'
+            ? outputScale(scale)
+            : scale;
+    }
+}));
+/** The plot's state, read live, with its scales as `scalesView` shows them. */
+const stateView = (state) => viewOf(stateViews, state, (s) => new Proxy(s, {
+    get: (t, k) => {
+        const value = read(t, k);
+        return k === 'scales' && value && typeof value === 'object' ? scalesView(value) : value;
+    }
+}));
+export const ScaleFreeContext = {
+    /** `parent`, the plot's own context, for marks drawn on its scales that never take part in them. */
+    of(parent) {
+        return {
+            ...parent,
+            addMark: () => { },
+            removeMark: () => { },
+            updateMark: () => { },
+            getPlotState: () => stateView(parent.getPlotState())
+        };
+    }
+};

package/dist/layout/geometry/ScaleFreeMarks.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { getContext, setContext, type Snippet } from 'svelte';
+	import { ScaleFreeContext, type SvelteplotContext } from './ScaleFreeContext';
+
+	/**
+	 * Draws its markers on the plot's scales without them taking part in the scales: what changes at every move of
+	 * the pointer - the hover's markers - never makes svelteplot work out the scales again. See `ScaleFreeContext`.
+	 */
+	let { children }: { children: Snippet } = $props();
+
+	setContext('svelteplot', ScaleFreeContext.of(getContext<SvelteplotContext>('svelteplot')));
+</script>
+
+{@render children()}

package/dist/layout/geometry/ScaleFreeMarks.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const ScaleFreeMarks: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScaleFreeMarks = ReturnType<typeof ScaleFreeMarks>;
+export default ScaleFreeMarks;

package/dist/layout/geometry/ScaleGate.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SvelteplotContext } from './ScaleFreeContext';
+export declare const ScaleGate: {
+    /**
+     * `parent`, the plot's own context, with each mark handed to the plot behind a `GatedMark`: the scales are
+     * worked out again when a mark's rows hold something new, not each time the mark copies them.
+     */
+    of(parent: SvelteplotContext): SvelteplotContext;
+};

package/dist/layout/geometry/ScaleGate.svelte.js

@@ -0,0 +1,95 @@
+import { RowContext } from '../../phases/context/RowContext';
+/**
+ * A mark as its plot sees it: the mark itself, but for its rows, which change only when they hold something new.
+ *
+ * svelteplot works a plot's scales out from every mark's rows, again whenever one of them is a new array. A mark
+ * hands it a new array each time it copies its rows (any of its props a new value is enough) and the next time
+ * one row's style changes, even a style that no scale reads - a hover's, at every move of the pointer. The copy
+ * holds the same rows, so the scales would come out the same: the plot is told of it only when a row differs.
+ */
+class GatedMark {
+    #mark;
+    /** The rows the plot last saw, kept while the mark's are a copy of them. */
+    data = $derived.by(() => this.#rows(this.#mark.data));
+    #seen;
+    constructor(mark) {
+        this.#mark = mark;
+    }
+    get id() {
+        return this.#mark.id;
+    }
+    get type() {
+        return this.#mark.type;
+    }
+    get channels() {
+        return this.#mark.channels;
+    }
+    get scales() {
+        return this.#mark.scales;
+    }
+    get options() {
+        return this.#mark.options;
+    }
+    #rows(rows) {
+        const seen = this.#seen;
+        if (seen && GatedMark.#sameRows(seen, rows))
+            return seen;
+        this.#seen = rows;
+        return rows;
+    }
+    /** Whether two lists of rows hold the same values, row by row and field by field. */
+    static #sameRows(a, b) {
+        if (a === b)
+            return true;
+        if (a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; i++) {
+            if (!GatedMark.#sameRow(a[i], b[i]))
+                return false;
+        }
+        return true;
+    }
+    /**
+     * Whether two rows hold the same values, field by field - but for the context the plot keeps on each row, which
+     * no scale reads and which the plot works out anew as it lays its rows out again.
+     */
+    static #sameRow(a, b) {
+        if (a === b)
+            return true;
+        if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null)
+            return false;
+        const keys = Reflect.ownKeys(a);
+        if (keys.length !== Reflect.ownKeys(b).length)
+            return false;
+        return keys.every((key) => key === RowContext.key ||
+            Object.is(a[key], b[key]));
+    }
+}
+export const ScaleGate = {
+    /**
+     * `parent`, the plot's own context, with each mark handed to the plot behind a `GatedMark`: the scales are
+     * worked out again when a mark's rows hold something new, not each time the mark copies them.
+     */
+    of(parent) {
+        // Which gate stands for which mark: bookkeeping no view reads, so nothing has to react to it.
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const gates = new Map();
+        return {
+            ...parent,
+            addMark: (mark) => {
+                if (gates.has(mark.id))
+                    return;
+                const gate = new GatedMark(mark);
+                gates.set(mark.id, gate);
+                parent.addMark(gate);
+            },
+            removeMark: (mark) => {
+                const gate = gates.get(mark.id);
+                if (!gate)
+                    return;
+                gates.delete(mark.id);
+                parent.removeMark(gate);
+            }
+        };
+    }
+};

package/dist/layout/geometry/ScaleGateMarks.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { getContext, setContext, type Snippet } from 'svelte';
+	import { ScaleGate } from './ScaleGate.svelte';
+	import type { SvelteplotContext } from './ScaleFreeContext';
+
+	/**
+	 * Hands every mark drawn under it to svelteplot's plot behind a gate: the plot works its scales out again when a
+	 * mark's rows hold something new, not each time the mark copies them. See `ScaleGate`.
+	 */
+	let { children }: { children: Snippet } = $props();
+
+	setContext('svelteplot', ScaleGate.of(getContext<SvelteplotContext>('svelteplot')));
+</script>
+
+{@render children()}

package/dist/layout/geometry/ScaleGateMarks.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const ScaleGateMarks: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScaleGateMarks = ReturnType<typeof ScaleGateMarks>;
+export default ScaleGateMarks;

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

@@ -16,15 +16,15 @@ export type HoverShapesReach = {
     dimmed: (row: Row) => boolean;
     cfg: PlotStylesConfig;
 };
-/** One part of a marker: its rows that the hover styles alike, keyed by how. */
-export type HoverShapesPart<T> = {
-    key: string;
-    marker: T;
-};
 /**
  * The look the plot's hover markers give the shapes of every marker linked to the hover (`hover: true` or
  * `'style'`): the hovered ones take `active`, the others `others`, each over the shape's own style. A shape
  * the legend dims keeps its own fill and opacities; one the hover cannot reach (hidden, omitted) is untouched.
+ *
+ * The marker stays one marker over all its rows, whatever is hovered: each style the hover sets is a function of
+ * the row that asks the hover how it reaches it. Moving the pointer then only draws the marker's shapes again in
+ * their new look - their rows and options do not change, so svelteplot never works the plot's scales out again
+ * (it does so from every mark's data and options, and a style with no scale is never read for them).
  */
 export declare class HoverShapes {
     #private;
@@ -36,9 +36,21 @@ export declare class HoverShapes {
     /** Whether `marker`'s shapes take the hover's styles. */
     static links(marker: object): boolean;
     /**
-     * `marker` in parts, each drawing the rows the hover styles alike - the shapes it does not style first, the
-     * hovered ones last, so their outline is on top. A marker the hover does not style is one part, as it is.
+     * `marker` with each style the hover sets as a function of the row: the hovered rows take `active`, the others
+     * `others`, and while nothing is hovered every row its own style. A marker the hover does not style is returned
+     * as it is. `rows` are what the marker draws without `data` of its own.
+     *
+     * The outline `active` sets is not the shape's own: {@link outline} draws it over every shape, whole.
+     */
+    styled<T extends object>(marker: T, rows: readonly unknown[], reach: HoverShapesReach): T;
+    /** Whether any rule outlines the hovered shapes: an `active` that sets one of the stroke's fields. */
+    get outlines(): boolean;
+    /**
+     * The outline of `marker`'s hovered shapes, to draw over every shape of the plot: the marker over its hovered
+     * rows only, with no fill, no label and no pointer of its own. A shape is drawn in its marker's order, so its
+     * neighbours drawn after it would cover part of its outline - a treemap's tile, a heatmap's cell with no gap.
+     * `undefined` when no rule outlines the shapes or nothing of the marker is hovered.
      */
-    split<T extends object>(marker: T, rows: readonly unknown[], reach: HoverShapesReach): HoverShapesPart<T>[];
+    outline<T extends object>(marker: T, rows: readonly unknown[], reach: HoverShapesReach): T | undefined;
 }
 export {};