@fundar/data-chart-telling 1.18.0 → 1.20.0

package/CHANGELOG.md

@@ -2,6 +2,59 @@
 
 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.20.0] - 2026-11-11
+
+### Added
+
+- **`GeoPlot` facets and timeline from one layer of features.** `facet.values` (or a grid's `rowValues` and `colValues`) and `timeline.values` now create their panels and steps though no feature carries the field, so the same features serve every panel with no copy per value. A slice's values are the ones named, in order, then any more found in the features.
+- **The slice reaches the callbacks of a `GeoPlot`.** `color`, `opacity`, `grouping`, `featureId` and `styles.onFeatureClick` get `{ facet?: { value, row?, col? }, time? }` as their last argument (empty without `facet` or `timeline`), and a tooltip's `format` has the same `facet` and `time` in its context: `color={(f, { facet }) => valueFor(f, facet?.value)}`. The color ramp spans every panel and step, each read in its own slice, unless `facet.scales` (or `timeline.scales`, with no facet) is `'free'`: then each slice fits its own, and a `grouping` by panel with a `segments` `scales.color` per panel gives each its own scheme - and the legend leaves out the plot's own ramp when every colored feature has one of its own. New type `GeoSliceContext`. See [Maps](docs/geo.md#facets-and-timeline).
+- **`useFigure().legend.setRange([min, max] | null, mode?)`.** Narrows an interactive continuous legend from code as dragging its handles does: they move and the plots filter or rescale to the range, in the section's own mode unless one is given. `null`, or a span covering the whole ramp, resets it. For a figure that draws its own mini legends, such as one per map panel, to apply a panel's range to the shared legend. See [Legend](docs/legend.md).
+
+### Fixed
+
+- **`BarPlot` hover on grouped series.** Each series' hover zone now covers only its own strip of the category band, so side-by-side bars report the series under the pointer instead of always the last one.
+- **`band` marker on grouped horizontal bars.** A `slice` of a band on `y` is counted from the bottom, as the bars, their hit areas and the hover's dot, text and rule are, so the hover's band lies over the series under the pointer and not the other one.
+- **`GeoPlot` hover no longer lays the map out again.** The hovered province is drawn on the plot's projection without joining its scales, so entering or leaving one no longer works out the scales and projection anew - which, with facets and a synced tooltip, was repeated in every panel.
+- **Facet grids no longer crawl through a timeline.** A step used to give `FacetLayout` new entry objects, which its each blocks wrote into their items from inside their own effect, and Svelte then walked every derived the write reached, in each panel. The blocks now iterate the panels' keys, and each cell reads its entry from a derived.
+- **Shared domains on a stacked, faceted timeline.** With a `timeline` that shows each step's own rows (`filterMode: 'exact'`), a shared value axis was fitted to the rows of every step stacked together. It now reaches the largest total any step stacks in any panel. With `'upTo'` a step shows every row up to it, so the last step's stack still sets it.
+- **Docs: horizontal stacked bars use `stackX`.** The bar plot's page, the transforms page and the LLM notes said stacking is always `stackY`, also for horizontal bars. A stack runs along the value axis: `stackY` with values on `y` (vertical bars), `stackX` with values on `x` (horizontal bars); the other makes the category axis numeric and the bars come out empty.
+- **A faceted plot repaints when only its `segments` change.** The data phases are run again when a prop of the plot, the configuration, the rows or the facet changes - props that are configuration (`segments`, `styles`, `scales`...) compared as they hold, so building the same ones again changes nothing - where before a change of `segments` alone left every panel as it was unless `data` changed too. Moving a timeline or a pointer still runs nothing again.
+
+## [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';
@@ -55,7 +57,7 @@ export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/
 export type { AxisBasedMarkersConfig, BrushSelection, HoverMarkerConfig, HoverShapeStyle, HoverLayerMarker } from './types/markers/common';
 export type { StatisticConfig } from './types/layout/statistics';
 export type * from './types/transforms';
-export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/plots/data/geo';
+export type { GeoFeature, GeoJsonInput, GeoDataProps, GeoSliceContext, Topology } from './types/plots/data/geo';
 export type { GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, CoordinatesConfig } from './types/layout/coordinates';
 export type { GeoCameraConfig } from './types/plots/camera';
 export type { GeoMarkersConfig } from './types/markers/geo';

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/facet/FacetLayout.svelte

@@ -139,6 +139,13 @@
 		});
 	});
 
+	// The panels' keys hold still while their data changes, and each cell reads its own entry by key. A timeline step
+	// gives every entry a new object; an each block over the entries would write each into its item from inside its
+	// own effect, and Svelte then walks every derived that state reaches, panel after panel.
+	const entryByKey = $derived(new Map([...wrapEntries, ...matrixEntries].map((e) => [e.key, e])));
+	const wrapKeys = $derived(wrapEntries.map((e) => e.key));
+	const matrixKeys = $derived(matrixEntries.map((e) => e.key));
+
 	// ── wrapped modes ────────────────────────────────────────────────────────
 	const resolvedMode = $derived(wrap ? resolveResponsive(mode, $isMobile) : 'grid');
 
@@ -150,10 +157,10 @@
 	const resolvedPageSize = $derived(Math.max(1, pageSize ?? gridCols * gridRows));
 	let page = $state(0);
 	const totalPages = $derived(Math.max(1, Math.ceil(wrapEntries.length / resolvedPageSize)));
-	const pageEntries = $derived(
+	const pageKeys = $derived(
 		resolvedMode === 'paginated'
-			? wrapEntries.slice(page * resolvedPageSize, page * resolvedPageSize + resolvedPageSize)
-			: wrapEntries
+			? wrapKeys.slice(page * resolvedPageSize, page * resolvedPageSize + resolvedPageSize)
+			: wrapKeys
 	);
 
 	$effect(() => {
@@ -162,7 +169,7 @@
 
 	const showNav = $derived(resolvedMode === 'paginated' && totalPages > 1);
 	// A page sizes its grid off what it shows, not the full entry count.
-	const pageCols = $derived(Math.max(1, Math.min(gridCols, pageEntries.length || 1)));
+	const pageCols = $derived(Math.max(1, Math.min(gridCols, pageKeys.length || 1)));
 	const gridHeight = $derived(
 		navLayout === 'below' && showNav ? Math.max(0, height - NAV_BELOW_H) : height
 	);
@@ -255,28 +262,31 @@
 	</span>
 {/snippet}
 
-{#snippet facetCells(entries: Entry[], columnCount: number)}
-	{#each entries as entry, i (entry.key)}
-		<GridCell
-			row={entry.r ?? Math.floor(i / columnCount)}
-			col={entry.c ?? i % columnCount}
-			label={wrap ? entry.label : undefined}
-			data-row={entry.row}
-			data-col={entry.col}
-		>
-			{#snippet children(box)}
-				{@render cell({
-					facetValue: entry.label,
-					row: entry.row,
-					col: entry.col,
-					data: entry.data,
-					width: box.width,
-					height: box.height,
-					margins: box.margins,
-					edges: box.edges
-				})}
-			{/snippet}
-		</GridCell>
+{#snippet facetCells(keys: string[], columnCount: number)}
+	{#each keys as key, i (key)}
+		{@const entry = entryByKey.get(key)}
+		{#if entry}
+			<GridCell
+				row={entry.r ?? Math.floor(i / columnCount)}
+				col={entry.c ?? i % columnCount}
+				label={wrap ? entry.label : undefined}
+				data-row={entry.row}
+				data-col={entry.col}
+			>
+				{#snippet children(box)}
+					{@render cell({
+						facetValue: entry.label,
+						row: entry.row,
+						col: entry.col,
+						data: entry.data,
+						width: box.width,
+						height: box.height,
+						margins: box.margins,
+						edges: box.edges
+					})}
+				{/snippet}
+			</GridCell>
+		{/if}
 	{/each}
 {/snippet}
 
@@ -291,7 +301,7 @@
 		colLabels={getCol ? colKeys : undefined}
 		rowLabels={getRow ? rowKeys : undefined}
 	>
-		{@render facetCells(matrixEntries, colKeys.length)}
+		{@render facetCells(matrixKeys, colKeys.length)}
 	</Grid>
 {:else if resolvedMode === 'carousel'}
 	<div
@@ -310,19 +320,22 @@
 			style:gap="{gap}px"
 			style:transform="translateX({translate}px)"
 		>
-			{#each wrapEntries as entry (entry.key)}
-				<div class="dct-facet-carousel__cell" style:width="{carouselCellWidth}px">
-					<div class="dct-facet-carousel__title" style:height="{TITLE_H}px">{entry.label}</div>
-					{#if carouselCellWidth > 0 && carouselCellHeight > 0}
-						{@render cell({
-							facetValue: entry.label,
-							data: entry.data,
-							width: carouselCellWidth,
-							height: carouselCellHeight,
-							edges: CAROUSEL_EDGES
-						})}
-					{/if}
-				</div>
+			{#each wrapKeys as key (key)}
+				{@const entry = entryByKey.get(key)}
+				{#if entry}
+					<div class="dct-facet-carousel__cell" style:width="{carouselCellWidth}px">
+						<div class="dct-facet-carousel__title" style:height="{TITLE_H}px">{entry.label}</div>
+						{#if carouselCellWidth > 0 && carouselCellHeight > 0}
+							{@render cell({
+								facetValue: entry.label,
+								data: entry.data,
+								width: carouselCellWidth,
+								height: carouselCellHeight,
+								edges: CAROUSEL_EDGES
+							})}
+						{/if}
+					</div>
+				{/if}
 			{/each}
 		</div>
 		{#if wrapEntries.length > 1}
@@ -333,7 +346,7 @@
 	<div class="dct-facet-paginated" style:width="{width}px" style:height="{height}px">
 		{#key page}
 			<Grid {width} height={gridHeight} {gap} {align} header={TITLE_H} columns={pageCols}>
-				{@render facetCells(pageEntries, pageCols)}
+				{@render facetCells(pageKeys, pageCols)}
 			</Grid>
 		{/key}
 		{#if showNav}

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);
+            }
+        };
+    }
+};