@fundar/data-chart-telling 1.19.0 → 1.20.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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

package/dist/index.d.ts

@@ -57,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/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/legend/ContinuousSection.svelte

@@ -153,6 +153,16 @@
 					};
 	});
 
+	// What a range set from code (`LegendState.setRange`) takes from this section.
+	$effect(() => {
+		if (!isInteractive) return;
+		interaction.narrowing = {
+			mode: section.interactive?.mode ?? 'filter',
+			disabledStyle: section.interactive?.disabledStyle ?? { opacity: cfg.legend.disabledOpacity },
+			domain: [section.min, section.max]
+		};
+	});
+
 	// Mirrors an externally-set `interaction.range` into lo/hi.
 	$effect(() => {
 		if (!isInteractive) return;

package/dist/layout/legend/LegendState.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteMap } from 'svelte/reactivity';
-import type { LegendDisabledAction, LegendEntry, LegendExtension, LegendPlot, LegendRange, LegendSection } from '../../types/layout/legend';
+import type { LegendDisabledAction, LegendDisabledStyle, LegendEntry, LegendExtension, LegendPlot, LegendRange, LegendSection } from '../../types/layout/legend';
 /**
  * A figure's legend, shared by every plot and legend under it: what the
  * reader turned off - each series' {@link LegendDisabledAction}, and the
@@ -14,6 +14,18 @@ export declare class LegendState {
     readonly disabled: SvelteMap<string, LegendDisabledAction>;
     /** The narrowed range of the first interactive continuous section, or `null`. */
     range: LegendRange | null;
+    /** How narrowing the range acts, and the span it narrows, as the interactive continuous section sets them - for a range set from code to act the same. */
+    narrowing: {
+        mode: LegendRange["mode"];
+        disabledStyle: LegendDisabledStyle;
+        domain: [number, number];
+    } | null;
+    /**
+     * Narrows the range as dragging the interactive section's handles would: `[min, max]` in the ramp's own
+     * values, or `null` for the whole of it. Its `mode` is the section's (`'filter'` without one), unless given.
+     * A span that is not a pair of numbers is left alone.
+     */
+    setRange(bounds: [number, number] | null, mode?: LegendRange['mode']): void;
     /** The enclosing figure's legend, or `null` outside one. Call during component init. */
     static current(): LegendState | null;
     /** A new legend, shared with everything below. Call during component init. */

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

@@ -19,9 +19,41 @@ export class LegendState {
     disabled = new SvelteMap();
     /** The narrowed range of the first interactive continuous section, or `null`. */
     range = $state(null);
+    /** How narrowing the range acts, and the span it narrows, as the interactive continuous section sets them - for a range set from code to act the same. */
+    narrowing = $state(null);
     #sources = new SvelteMap();
     /** What {@link setOff} last turned off, to turn back on what it no longer lists. */
     #managed = new SvelteMap();
+    /**
+     * Narrows the range as dragging the interactive section's handles would: `[min, max]` in the ramp's own
+     * values, or `null` for the whole of it. Its `mode` is the section's (`'filter'` without one), unless given.
+     * A span that is not a pair of numbers is left alone.
+     */
+    setRange(bounds, mode) {
+        if (bounds === null) {
+            this.range = null;
+            return;
+        }
+        const [a, b] = bounds;
+        if (!Number.isFinite(a) || !Number.isFinite(b))
+            return;
+        const { narrowing } = this;
+        const min = Math.min(a, b);
+        const max = Math.max(a, b);
+        // What spans the whole ramp is no narrowing: the section resets its handles the same way.
+        if (narrowing && min <= narrowing.domain[0] && max >= narrowing.domain[1]) {
+            this.range = null;
+            return;
+        }
+        this.range = {
+            min,
+            max,
+            mode: mode ?? narrowing?.mode ?? 'filter',
+            disabledStyle: narrowing?.disabledStyle ?? {
+                opacity: getConfiguration().legend.disabledOpacity
+            }
+        };
+    }
     /** The enclosing figure's legend, or `null` outside one. Call during component init. */
     static current() {
         return getContext(LEGEND_KEY) ?? null;

package/dist/layout/plot/AbstractPlot.svelte

@@ -2,7 +2,7 @@
 	lang="ts"
 	generics="TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase"
 >
-	import type { Component } from 'svelte';
+	import { untrack, type Component } from 'svelte';
 	import Figure from '../figure/Figure.svelte';
 	import TimelineLayout from '../timeline/TimelineLayout.svelte';
 	import FacetLayout from '../facet/FacetLayout.svelte';
@@ -18,6 +18,11 @@
 	import { merge } from '../../utils/merge';
 	import { Pipeline } from '../../phases/Pipeline';
 	import { Slice } from './Slice';
+	import { SharedStepScales } from '../../phases/sharedScales/SharedStepScales';
+	import { TimelineTime } from '../timeline/TimelineTime';
+	import { TimelineSteps } from '../timeline/TimelineSteps';
+	import { resolveAccessor } from '../../utils/accessors';
+	import { ConfigEquality } from '../../utils/ConfigEquality';
 	import { FacetScope } from '../facet/scope';
 	import type { TooltipProp } from '../../types/layout/tooltip';
 	import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';
@@ -130,12 +135,82 @@
 		return (r: TRow[], f: FacetConfig<TRow> | undefined, legend: LegendState | null) =>
 			run.runData(core ?? {}, r, f as never, legend, cfg);
 	});
-	// Kept while its inputs are the same objects: a timeline step re-reads them without changing them.
+	// What sets a timeline's steps, as values that change only when they do: a moving `progress` makes a new
+	// `timeline` object, which these do not follow, so the frame is not run again for it.
+	const stepAccessor = $derived(timeline?.accessor);
+	const stepDateFormat = $derived(timeline?.dateFormat);
+	const stepValues = $derived(timeline?.values);
+	const stepMode = $derived(slicing.filterMode);
+
+	// The plot's own props: one array that is the same object while none of them changed. Rows are compared as
+	// the same object, the rest - `segments`, `styles`, `scales` - as they hold, so a parent that builds the
+	// same configuration again does not make the data phases run again.
+	const ROW_PROPS = new Set(['data', 'series']);
+	let propsSeen: unknown[] = [];
+	const propsKey = $derived.by(() => {
+		const now = core
+			? Object.keys(core).flatMap((key) => [key, (core as Record<string, unknown>)[key]])
+			: [];
+		const same =
+			now.length === propsSeen.length &&
+			now.every(
+				(value, i) =>
+					Object.is(value, propsSeen[i]) ||
+					(i % 2 === 1 &&
+						!ROW_PROPS.has(String(now[i - 1])) &&
+						ConfigEquality.same(value, propsSeen[i]))
+			);
+		if (same) return propsSeen;
+		propsSeen = now;
+		return now;
+	});
+
+	/**
+	 * The frame: the run over every row. With a timeline that shows each step's own rows, the domains it
+	 * shares are the widest any step reaches - a step's rows stack, aggregate or bin among themselves, so the
+	 * extent over every row at once would be wider than any step's.
+	 *
+	 * It is run again when what the runs read changes - the plot's props (`segments` among them), the
+	 * configuration, the rows, the facet, what sets the steps - and for nothing else: a moving timeline, or
+	 * a pointer, never makes it run again.
+	 */
 	let frame: { inputs: unknown[]; state: DataRunState | undefined } | undefined;
-	const frameState = $derived.by(() => {
-		const inputs = [dataRun, facet, rows];
-		if (frame?.inputs.every((input, i) => input === inputs[i])) return frame.state;
-		const state = dataRun && rows ? dataRun(rows, facet, null) : undefined;
+	const frameState = $derived.by((): DataRunState | undefined => {
+		const inputs = [
+			propsKey,
+			cfg,
+			dataRun,
+			rows,
+			facet,
+			stepAccessor,
+			stepDateFormat,
+			stepValues,
+			stepMode
+		];
+		// Svelte may ask again with the same inputs: the answer is the one it has.
+		if (frame?.inputs.every((input, i) => Object.is(input, inputs[i]))) return frame.state;
+		const state = untrack(() => {
+			if (!dataRun || !rows) return undefined;
+			const whole = dataRun(rows, facet, null);
+			if (stepAccessor === undefined) return whole;
+			const reader = new TimelineTime(stepDateFormat);
+			const get = resolveAccessor<TRow>(stepAccessor as never) as (row: TRow) => unknown;
+			const timeOf = (row: TRow) => reader.toTime(get(row));
+			const named = stepValues?.map((v) => reader.toTime(v)).filter((t) => t !== undefined);
+			const steps = TimelineSteps.of(named, rows, (row) => timeOf(row) ?? NaN);
+			const perStep = steps.values
+				.filter((step) => !Number.isNaN(step))
+				.map((step) => {
+					// A row without a step shows in every one.
+					const shown = rows.filter((row) => {
+						const at = timeOf(row);
+						return at === undefined || TimelineSteps.matches(at, step, stepMode);
+					});
+					return dataRun(shown, facet, null).sharedScales;
+				});
+			const bands = (whole as { axes?: { bands?: string[] } }).axes?.bands ?? [];
+			return { ...whole, sharedScales: SharedStepScales.over(whole.sharedScales, bands, perStep) };
+		});
 		frame = { inputs, state };
 		return state;
 	});
@@ -216,6 +291,7 @@
 				? FacetPanels.buildPanelState(panels, slicing.panelKey(place) ?? '')
 				: undefined,
 			facet: place,
+			time,
 			keep: slicing.keep({ time, facet: place })
 		})}
 	</HoverScope>
@@ -260,6 +336,7 @@
 			height: h,
 			tooltip: tooltipConfig,
 			scales: slicing.timelineScales<TScales>(sharedScales),
+			time,
 			keep: slicing.keep({ time })
 		})}
 	{/if}

package/dist/layout/plot/AbstractPlot.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'svelte';
+import { type Component } from 'svelte';
 import { Pipeline } from '../../phases/Pipeline';
 import type { TooltipProp } from '../../types/layout/tooltip';
 import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';

package/dist/layout/plot/PublicPlotContext.d.ts

@@ -53,6 +53,11 @@ export declare class PublicLegend {
     get entries(): LegendEntry[];
     /** The range its continuous section narrows to, or `null`. */
     get range(): LegendRange | null;
+    /**
+     * Narrows the continuous section to `[min, max]` as dragging its handles would, or resets it with `null`:
+     * its plots filter or rescale to it. `mode` is the section's own unless given.
+     */
+    setRange(range: [number, number] | null, mode?: LegendRange['mode']): void;
     /** The series that are turned off. */
     get off(): string[];
     isOff(series: string): boolean;

package/dist/layout/plot/PublicPlotContext.js

@@ -73,6 +73,13 @@ export class PublicLegend {
     get range() {
         return this.#state.range;
     }
+    /**
+     * Narrows the continuous section to `[min, max]` as dragging its handles would, or resets it with `null`:
+     * its plots filter or rescale to it. `mode` is the section's own unless given.
+     */
+    setRange(range, mode) {
+        this.#state.setRange(range, mode);
+    }
     /** The series that are turned off. */
     get off() {
         return [...this.#state.disabled.keys()];

package/dist/markers/band/BandMarker.svelte

@@ -34,7 +34,8 @@
 	function boxOf(band: Band) {
 		const bandwidth = scale.fn.bandwidth?.() ?? 0;
 		const start = Number(scale.fn(band.category as never));
-		const from = start + band.slice.start * bandwidth;
+		// Horizontal bars count their slices from the bottom of the band, as `BandNudge` and the bars' hit areas do.
+		const from = start + (marker.axis === 'y' ? band.slice.end : band.slice.start) * bandwidth;
 		const size = Math.max(0, bandwidth * (1 - band.slice.start - band.slice.end));
 		const [low, high] = extent;
 		return marker.axis === 'x'

package/dist/markers/geo/GeoHoverMarker.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { Geo } from 'svelteplot';
+	import ScaleFreeMarks from '../../layout/geometry/ScaleFreeMarks.svelte';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { GeoHoverMarkerConfig } from '../../types/markers/geo';
 	import type { HoverPoint } from '../../types/layout/hover';
 
-	/** Renders the hovered feature restyled in place - no dot, no label. `pointer-events: none` so it never steals hover from the base map underneath it. */
+	/** Renders the hovered feature restyled in place - no dot, no label. `pointer-events: none` so it never steals hover from the base map underneath it. Drawn on the plot's projection and scales without joining them, so a feature entering or leaving it never lays the map out again. */
 	let {
 		marker,
 		data
@@ -15,14 +16,16 @@
 </script>
 
 {#if data.length > 0}
-	<Geo
-		data={data.map((p) => p.row)}
-		fill={style.fill}
-		fillOpacity={style.fillOpacity}
-		stroke={style.stroke}
-		strokeWidth={style.strokeWidth}
-		strokeOpacity={style.strokeOpacity}
-		strokeDasharray={style.strokeDasharray}
-		style="vector-effect: non-scaling-stroke; pointer-events: none;"
-	/>
+	<ScaleFreeMarks>
+		<Geo
+			data={data.map((p) => p.row)}
+			fill={style.fill}
+			fillOpacity={style.fillOpacity}
+			stroke={style.stroke}
+			strokeWidth={style.strokeWidth}
+			strokeOpacity={style.strokeOpacity}
+			strokeDasharray={style.strokeDasharray}
+			style="vector-effect: non-scaling-stroke; pointer-events: none;"
+		/>
+	</ScaleFreeMarks>
 {/if}

package/dist/phases/context/RowContext.js

@@ -1,10 +1,10 @@
+import { ROW_CONTEXT_KEY } from './rowContextKey';
 import { SERIES_ID_KEY, SERIES_KEY } from '../transforms/TransformsPhase';
 import { ProcessedPositions } from '../transforms/ProcessedPositions';
 import { PlotAxes } from '../data/PlotAxes';
 import { resolveAccessor } from '../../utils/accessors';
 import { seriesIdOf } from '../../utils/grouping';
-/** Where a row's context is kept on it: under a symbol, which survives the copies svelteplot makes of a row. */
-const KEY = Symbol('dct-row-context');
+const KEY = ROW_CONTEXT_KEY;
 /**
  * The context of the rows a plot draws ({@link PlotRowContext}): worked out once per row by the "context" phase,
  * kept on the row itself, and read back from it - or from any copy of it - with {@link of}.

package/dist/phases/context/rowContextKey.d.ts

@@ -0,0 +1,2 @@
+/** Where a row's context is kept on it: under a symbol, which survives the copies svelteplot makes of a row. */
+export declare const ROW_CONTEXT_KEY: symbol;

package/dist/phases/context/rowContextKey.js

@@ -0,0 +1,2 @@
+/** Where a row's context is kept on it: under a symbol, which survives the copies svelteplot makes of a row. */
+export const ROW_CONTEXT_KEY = Symbol('dct-row-context');

package/dist/phases/sharedScales/SharedStepScales.d.ts

@@ -0,0 +1,10 @@
+export declare const SharedStepScales: {
+    /**
+     * The domains the slices of a timeline share, when its steps each draw their own rows: a step's rows
+     * stack, aggregate or bin among themselves, so the extent the whole run reads across every step is
+     * wider than any step's. `whole` is the shared scales read over every row, and `steps` the same over each
+     * step's rows. A numeric (or date) extent becomes the widest any step reaches; a band or categorical
+     * domain stays the whole run's, which holds every category.
+     */
+    over(whole: Record<string, object> | undefined, bands: string[], steps: (Record<string, object> | undefined)[]): Record<string, object> | undefined;
+};

package/dist/phases/sharedScales/SharedStepScales.js

@@ -0,0 +1,43 @@
+/** A channel's numeric extent, or a date one - `undefined` for any other domain. */
+function extentOf(domain) {
+    if (domain?.length !== 2)
+        return undefined;
+    const [lo, hi] = domain.map((v) => (v instanceof Date ? +v : v));
+    return typeof lo === 'number' && typeof hi === 'number' ? [lo, hi] : undefined;
+}
+export const SharedStepScales = {
+    /**
+     * The domains the slices of a timeline share, when its steps each draw their own rows: a step's rows
+     * stack, aggregate or bin among themselves, so the extent the whole run reads across every step is
+     * wider than any step's. `whole` is the shared scales read over every row, and `steps` the same over each
+     * step's rows. A numeric (or date) extent becomes the widest any step reaches; a band or categorical
+     * domain stays the whole run's, which holds every category.
+     */
+    over(whole, bands, steps) {
+        if (!whole)
+            return whole;
+        const out = {};
+        for (const [panel, scales] of Object.entries(whole)) {
+            out[panel] = { ...scales };
+            for (const [channel, scale] of Object.entries(scales)) {
+                if (!scale || bands.includes(channel))
+                    continue;
+                const own = extentOf(scale.domain);
+                if (!own)
+                    continue;
+                const extents = steps
+                    .map((step) => extentOf(step?.[panel]?.[channel]?.domain))
+                    .filter((extent) => extent !== undefined);
+                if (!extents.length)
+                    continue;
+                const lo = Math.min(...extents.map(([a]) => a));
+                const hi = Math.max(...extents.map(([, b]) => b));
+                out[panel][channel] = {
+                    ...scale,
+                    domain: scale.domain[0] instanceof Date ? [new Date(lo), new Date(hi)] : [lo, hi]
+                };
+            }
+        }
+        return out;
+    }
+};

package/dist/plots/map/geo/Core.svelte

@@ -7,6 +7,7 @@
 	import BasePlotLayout from '../../../layout/base/BasePlotLayout.svelte';
 	import type { GeoPlotCoreProps } from '../../../types/plots/map/geo/props';
 	import type { CoordinatesConfig } from '../../../types/layout/coordinates';
+	import type { GeoFeature } from '../../../types/plots/data/geo';
 	import type { GeoPlotState, GeoPlotEnv } from '../../../types/plots/map/geo/state';
 
 	/**
@@ -19,10 +20,10 @@
 	let {
 		data,
 		object,
-		featureId,
-		color,
-		grouping,
-		opacity,
+		featureId: featureIdProp,
+		color: colorProp,
+		grouping: groupingProp,
+		opacity: opacityProp,
 		excludeParts,
 		width,
 		height,
@@ -33,11 +34,26 @@
 		coordinates = {},
 		margins = $bindable(),
 		tooltip = undefined,
+		sliceContext = {},
 		pipeline
 	}: Props = $props();
 
 	const cfg = $derived(getConfiguration());
 
+	// The callbacks read a feature in the slice this core draws; the pipeline's phases call them with the feature alone.
+	const color = $derived(colorProp && ((f: GeoFeature<TProps>) => colorProp(f, sliceContext)));
+	const grouping = $derived(
+		groupingProp && ((f: GeoFeature<TProps>) => groupingProp(f, sliceContext))
+	);
+	const opacity = $derived(
+		opacityProp && ((f: GeoFeature<TProps>) => opacityProp(f, sliceContext))
+	);
+	const featureId = $derived(
+		typeof featureIdProp === 'function'
+			? (f: GeoFeature<TProps>) => featureIdProp(f, sliceContext)
+			: featureIdProp
+	);
+
 	// ── Resolve data: GeoJSON is synchronous, TopoJSON is converted async ────
 	const resolved = new GeoFeatures<TProps>(
 		() => data,
@@ -83,7 +99,7 @@
 		fillOpacity: styles.fillOpacity,
 		stroke: styles.stroke,
 		strokeWidth: styles.strokeWidth,
-		onFeatureClick: styles.onFeatureClick
+		onFeatureClick: styles.onFeatureClick && ((d, e) => styles.onFeatureClick!(d, e, sliceContext))
 	});
 	// The kind's pipeline, built once by its plot, over the state this core seeds.
 	const plotState = $derived(
@@ -98,6 +114,7 @@
 				segments,
 				scales,
 				authoredMarkers: markers,
+				slice: sliceContext,
 				tooltip,
 				width,
 				height,
@@ -130,7 +147,13 @@
 		markers: markersOut,
 		scales: layoutScales,
 		channels: {
-			color: { source: ChannelName.of(color, 'color') },
+			// Its own ramps draw every colored feature: the plot's has nothing to show.
+			color: {
+				source:
+					plotState.colorRamps && !plotState.colorDomain
+						? undefined
+						: ChannelName.of(color, 'color')
+			},
 			opacity: { source: ChannelName.of(opacity, 'opacity') }
 		},
 		colorDomain: plotState.colorDomain,