@fundar/data-chart-telling 1.17.0 → 1.18.0

package/dist/plots/map/geo/defaults.d.ts

@@ -1,4 +1,4 @@
-import type { GeoPlotState, GeoPlotCtx } from '../../../types/plots/map/geo/state';
+import type { GeoPlotState, GeoPlotEnv } from '../../../types/plots/map/geo/state';
 import { Pipeline } from '../../../phases/Pipeline';
 /** GeoPlot's own pipeline (data, scales, markers, tooltip, hover), run over the state its core seeds, hovering one feature at a time. */
-export declare function buildGeoDefaults<TProps extends Record<string, unknown>>(): Pipeline<GeoPlotState<TProps>, GeoPlotCtx<TProps>>;
+export declare function buildGeoDefaults<TProps extends Record<string, unknown>>(): Pipeline<GeoPlotState<TProps>, GeoPlotEnv<TProps>>;

package/dist/plots/map/geo/phases/data.d.ts

@@ -1,6 +1,6 @@
 import type { GeoPlotState } from '../../../../types/plots/map/geo/state';
 /**
  * GeoPlot's "data" phase: every feature tagged with its resolved id/centroid,
- * then reduced by `excludeParts`. Reads no ctx.
+ * then reduced by `excludeParts`. Reads no env.
  */
 export declare function buildData<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>): GeoPlotState<TProps>;

package/dist/plots/map/geo/phases/data.js

@@ -3,7 +3,7 @@ import { GeoGeometry } from '../GeoGeometry';
 import { GeoFeatures } from '../GeoFeatures.svelte';
 /**
  * GeoPlot's "data" phase: every feature tagged with its resolved id/centroid,
- * then reduced by `excludeParts`. Reads no ctx.
+ * then reduced by `excludeParts`. Reads no env.
  */
 export function buildData(state) {
     const { rawFeatures, featureId, excludeParts } = state;

package/dist/plots/map/geo/phases/hover.d.ts

@@ -1,4 +1,4 @@
-import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/state';
+import type { GeoPlotState, GeoPlotEnv } from '../../../../types/plots/map/geo/state';
 /** Whether a pointer event is over an `inset` marker's panel, which has its own hover. */
 export declare function isOverInset(e: PointerEvent): boolean;
 /**
@@ -6,4 +6,4 @@ export declare function isOverInset(e: PointerEvent): boolean;
  * feature under the cursor and read as its id. A feature outside the active
  * legend range stays drawn, dimmed, but is never a candidate.
  */
-export declare function buildHover<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, ctx: GeoPlotCtx<TProps>): GeoPlotState<TProps>;
+export declare function buildHover<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, env: GeoPlotEnv<TProps>): GeoPlotState<TProps>;

package/dist/plots/map/geo/phases/hover.js

@@ -10,9 +10,9 @@ export function isOverInset(e) {
  * feature under the cursor and read as its id. A feature outside the active
  * legend range stays drawn, dimmed, but is never a candidate.
  */
-export function buildHover(state, ctx) {
+export function buildHover(state, env) {
     const { color, tooltip, authoredMarkers } = state;
-    const { range } = ctx;
+    const { range } = env;
     const features = state.features;
     const label = (f) => f.__id;
     const points = features
@@ -28,7 +28,7 @@ export function buildHover(state, ctx) {
             defaultStrategy: 'punctual',
             // Match the feature under the cursor, not the nearest centroid.
             pointMatching: 'contains',
-            number: NumberFormat.of(NumberFormat.displayOf(tooltip), ctx.cfg)
+            number: NumberFormat.of(NumberFormat.displayOf(tooltip), env.cfg)
         }),
         // A map has no axes for a crosshair: 'punctual' only means an exact match.
         strategy: 'punctual',

package/dist/plots/map/geo/phases/markers.d.ts

@@ -1,4 +1,4 @@
-import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/state';
+import type { GeoPlotState, GeoPlotEnv } from '../../../../types/plots/map/geo/state';
 /**
  * GeoPlot's "markers" phase: per-feature style resolution/grouping, the base
  * `'geo'` marker(s), and the full draw order - any authored marker with
@@ -6,4 +6,4 @@ import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/s
  * with any `hover` marker moved last. The base marker(s) match the pointer
  * themselves, over the features inside the legend's range.
  */
-export declare function buildMarkers<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, ctx: GeoPlotCtx<TProps>): GeoPlotState<TProps>;
+export declare function buildMarkers<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, env: GeoPlotEnv<TProps>): GeoPlotState<TProps>;

package/dist/plots/map/geo/phases/markers.js

@@ -19,9 +19,9 @@ function isBehindMarker(marker) {
  * with any `hover` marker moved last. The base marker(s) match the pointer
  * themselves, over the features inside the legend's range.
  */
-export function buildMarkers(state, ctx) {
+export function buildMarkers(state, env) {
     const { features, segments, authoredMarkers, color, grouping, resolveColor, resolveOpacity } = state;
-    const { range, fill, fillOpacity, stroke, strokeWidth, cfg, onFeatureClick } = ctx;
+    const { range, fill, fillOpacity, stroke, strokeWidth, cfg, onFeatureClick } = env;
     const OPACITY_STEPS = 32;
     function rangeFilteredStyle(base, f) {
         if (range == null || !color)
@@ -67,6 +67,6 @@ export function buildMarkers(state, ctx) {
     const behindMarkers = authoredMarkers.filter(isBehindMarker);
     const frontMarkers = authoredMarkers.filter((m) => !isBehindMarker(m) && m.type !== 'geo-hover');
     const hoverMarker = authoredMarkers.find((m) => m.type === 'geo-hover');
-    const markers = MarkerStyles.resolveAll(MarkerChannels.inheritAll([...behindMarkers, ...featureMarkers, ...frontMarkers, ...(hoverMarker ? [hoverMarker] : [])], state.scales), { cfg: ctx.cfg });
+    const markers = MarkerStyles.resolveAll(MarkerChannels.inheritAll([...behindMarkers, ...featureMarkers, ...frontMarkers, ...(hoverMarker ? [hoverMarker] : [])], state.scales), { cfg: env.cfg });
     return { ...state, markers, styleGroups };
 }

package/dist/plots/map/geo/phases/scales.d.ts

@@ -1,4 +1,4 @@
-import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/state';
+import type { GeoPlotState, GeoPlotEnv } from '../../../../types/plots/map/geo/state';
 /**
  * GeoPlot's "scales" phase: each feature's own resolved color (mirrors
  * HeatmapPlot's own), with a per-feature override for whichever segment
@@ -7,4 +7,4 @@ import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/s
  * the features that share its own key, so e.g. two grouping buckets each
  * get a ramp scaled to their own value range, not the whole dataset's.
  */
-export declare function buildScales<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, ctx: GeoPlotCtx<TProps>): GeoPlotState<TProps>;
+export declare function buildScales<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, env: GeoPlotEnv<TProps>): GeoPlotState<TProps>;

package/dist/plots/map/geo/phases/scales.js

@@ -10,9 +10,9 @@ import { GeoSegments } from '../GeoSegments';
  * the features that share its own key, so e.g. two grouping buckets each
  * get a ramp scaled to their own value range, not the whole dataset's.
  */
-export function buildScales(state, ctx) {
+export function buildScales(state, env) {
     const { scales, features, color, grouping, opacity, segments } = state;
-    const { range, cfg } = ctx;
+    const { range, cfg } = env;
     const colorValues = color
         ? features.map((f) => color(f)).filter((v) => v != null)
         : [];

package/dist/plots/part-of-a-whole/treemap/defaults.d.ts

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { TreemapPlotState, TreemapPlotCtx } from '../../../types/plots/part-of-a-whole/treemap/state';
+import type { TreemapPlotState, TreemapPlotEnv } from '../../../types/plots/part-of-a-whole/treemap/state';
 /**
  * TreemapPlot on the shared pipeline: its rows are the tiles of the `treemap` transform, laid out in a unit square
  * the plot's two continuous axes span (hidden). Its series are the outermost level of its `grouping`, which colors
@@ -7,4 +7,4 @@ import type { TreemapPlotState, TreemapPlotCtx } from '../../../types/plots/part
  * hovering its row: an invisible `rect` over each one drives the plot's hover, and its tooltip names the tile and
  * gives its share.
  */
-export declare function buildTreemapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<TreemapPlotState<TData>, TreemapPlotCtx>;
+export declare function buildTreemapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<TreemapPlotState<TData>, TreemapPlotEnv>;

package/dist/plots/part-of-a-whole/treemap/defaults.js

@@ -1,4 +1,6 @@
 import { TREEMAP_ROW } from '../../../phases/transforms/methods/TreemapTransform';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
+import { RowContext } from '../../../phases/context/RowContext';
 import { NumberFormat } from '../../../utils/NumberFormat';
 import { Grouping } from '../../../utils/grouping';
 import { getConfiguration } from '../../../configuration/config.svelte';
@@ -13,14 +15,22 @@ const DEFAULT_ASPECT = 1.6;
 function shareDisplay(values) {
     return { ...NumberFormat.displayOf(values), suffix: values?.suffix ?? '%' };
 }
-/** A tile's name, path and share (from `0` to `100`), as the transform left them on its row. */
+/**
+ * What a treemap knows of a tile, as the transform left it on its row: its name, path, summed value and share
+ * (from `0` to `100`). The tiles sit in a unit square, so they have no `x` or `y` to read.
+ */
 function tileOf(row) {
     return {
         name: String(row[TREEMAP_ROW.name] ?? ''),
         path: row[TREEMAP_ROW.path] ?? [],
-        share: Number(row[TREEMAP_ROW.share]) * 100
+        value: Number(row[TREEMAP_ROW.value]),
+        share: Number(row[TREEMAP_ROW.share]) * 100,
+        x: undefined,
+        y: undefined
     };
 }
+/** A tile's context, as the "context" phase left it on its row. */
+const contextOf = (row) => RowContext.of(row);
 /**
  * The plot's tiles: a `treemap` of its `value`, nested by the levels of its `grouping` (its `color` when unset,
  * as every plot groups by it then) and shaped for its box,
@@ -50,7 +60,7 @@ function edgesOf(state) {
  * (`'Tertiary.Finance'`), outermost first, so the more specific wins. The series' own are in its style already.
  */
 function pathKeysOf(state, row) {
-    const { path } = tileOf(row);
+    const { path } = contextOf(row);
     return path
         .slice(1)
         .map((_, i) => path.slice(0, i + 2).join(Grouping.SEPARATOR))
@@ -60,35 +70,37 @@ function pathKeysOf(state, row) {
  * The tiles as `rect` markers, each with a `label`: the name of the tile over its share, fitted to it. A series'
  * tiles take its style - its color, under `styles.area` and the segments keyed by it (and `default`) - and the
  * segments keyed by a tile's path restyle it, so the tiles split into one marker per style. The legend's dimming
- * goes over all of them.
+ * goes over all of them, and the hover marker's `active` and `others` over the tiles it reaches.
  */
-function buildMarks(state, ctx) {
+function buildMarks(state, env) {
     if (!state.processedData?.data.length)
         return [];
-    const look = ctx.cfg.treemap;
+    const look = env.cfg.treemap;
     const edges = edgesOf(state);
     const labels = state.valueLabels?.show ? state.valueLabels : undefined;
-    const number = NumberFormat.of(shareDisplay(state.values), ctx.cfg, SHARE_DECIMALS);
-    const shareText = (row, series) => {
-        const { share } = tileOf(row);
-        return state.values?.format ? state.values.format(share, series, row, number) : number(share);
+    const number = NumberFormat.of(shareDisplay(state.values), env.cfg, SHARE_DECIMALS);
+    const shareText = (row) => {
+        const context = contextOf(row);
+        return state.values?.format
+            ? state.values.format(context.share, number, context)
+            : number(context.share);
     };
     /** The label of a series' tiles: the name over the share, fitted - or the share alone where the name does not fit. */
-    const labelOf = (labels, series) => {
-        const shape = labels.shapeLabel(ctx, (row) => `${tileOf(row).name}
-${shareText(row, series)}`, { fontSize: look.fontSize });
+    const labelOf = (labels) => {
+        const shape = labels.shapeLabel(env, (row) => `${contextOf(row).name}
+${shareText(row)}`, { fontSize: look.fontSize });
         return {
             ...shape,
             styles: { lineHeight: look.lineHeight, ...shape.styles },
-            fit: { padding: look.padding, fallback: (row) => shareText(row, series) }
+            fit: { padding: look.padding, fallback: (row) => shareText(row) }
         };
     };
     return (state.processedGroups ?? []).flatMap((group) => {
         const series = group.series.name;
-        const dimmed = ctx.interaction?.fillFor(series);
+        const dimmed = env.interaction?.fillFor(series);
         const seriesColor = state.colorForSeries(series);
         /** A tile's color: its series', or a tone of it by its path while `scales.color.depth` asks for one. */
-        const colorOf = (row) => state.colorForPath ? state.colorForPath(tileOf(row).path) : seriesColor;
+        const colorOf = (row) => state.colorForPath ? state.colorForPath(contextOf(row).path) : seriesColor;
         return group.visualSegments.flatMap((segment) => {
             const styled = new Map();
             for (const row of segment.data) {
@@ -111,7 +123,8 @@ ${shareText(row, series)}`, { fontSize: look.fontSize });
                         stroke: style.stroke ?? look.stroke,
                         strokeWidth: style.strokeWidth ?? look.strokeWidth
                     },
-                    label: labels && labelOf(labels, series)
+                    label: labels && labelOf(labels),
+                    hover: 'style'
                 };
             });
         });
@@ -133,6 +146,8 @@ export function buildTreemapDefaults() {
         },
         // An omitted sector keeps its tiles' room, and every other tile its share; a rescaled one does not.
         transforms: { transforms: buildTransforms, keepsOmitted: true },
+        // A tile's name, path, value and share, for its label, its tooltip and its hover.
+        context: () => tileOf,
         scales: {
             defaults: () => ({
                 x: { axisDisplay: 'none', grid: false },
@@ -146,22 +161,23 @@ export function buildTreemapDefaults() {
             strategy: 'punctual',
             // A tile is hovered through its own hit area, not through whichever point the pointer is nearest.
             pointMatching: 'contains',
+            // A tile has no axes for a crosshair, and writes its own label: its hover only restyles the tiles.
+            marker: (_state, env) => HoverDefaults.shapes(env.cfg),
             hitAreas: (state, hover) => hover.points.map(({ row }) => ({
                 type: 'rect',
                 data: [row],
                 ...edgesOf(state),
                 styles: { fill: 'transparent' },
-                hover: hover.active
+                hover: hover.active && 'trigger'
             })),
             format: (state) => {
                 const number = NumberFormat.of(shareDisplay(state.values), getConfiguration(), SHARE_DECIMALS);
                 return ((row) => {
-                    const tile = tileOf(row);
+                    const tile = contextOf(row);
                     return `${tile.name}: ${number(tile.share)}`;
                 });
             },
-            label: () => ((row) => tileOf(row).name),
-            context: () => ((row) => ({ share: tileOf(row).share }))
+            label: () => ((row) => contextOf(row).name)
         }
     };
 }

package/dist/plots/ranking/bar/defaults.d.ts

@@ -1,6 +1,6 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
 import type { AxisScale } from '../../../types/layout/scales';
-import type { BarPlotState, BarPlotCtx } from '../../../types/plots/ranking/bar/state';
+import type { BarPlotState, BarPlotEnv } from '../../../types/plots/ranking/bar/state';
 /**
  * The domain a bar plot fits to its own bars on its value axis: from zero to
  * the tallest span (and the `extra` values a plot draws beyond its bars), niced to as many ticks as fit the plot. Left out when the
@@ -13,4 +13,4 @@ export declare function fitValueDomain<TData extends Record<string, unknown>>(st
  * it off the values - its own scales (padding, bar layout) and markers.
  * Its plot defaults to: hover along the category axis, timeline tweens matched per category and group.
  */
-export declare function buildBarDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BarPlotState<TData>, BarPlotCtx>;
+export declare function buildBarDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BarPlotState<TData>, BarPlotEnv>;

package/dist/plots/ranking/bar/defaults.js

@@ -3,6 +3,7 @@ import { buildMarks, buildHitAreas, buildBarGeometry } from './markers';
 import { NiceTicks } from '../../../layout/scales/NiceTicks';
 import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 /**
  * The domain a bar plot fits to its own bars on its value axis: from zero to
  * the tallest span (and the `extra` values a plot draws beyond its bars), niced to as many ticks as fit the plot. Left out when the
@@ -53,8 +54,8 @@ export function buildBarDefaults() {
         },
         scales: {
             zero: ['value'],
-            defaults: (_state, ctx) => ({
-                category: { paddingInner: ctx.cfg.bar.paddingInner, paddingOuter: ctx.cfg.bar.paddingOuter }
+            defaults: (_state, env) => ({
+                category: { paddingInner: env.cfg.bar.paddingInner, paddingOuter: env.cfg.bar.paddingOuter }
             }),
             fit: (state) => fitValueDomain(state)
         },
@@ -85,8 +86,8 @@ export function buildBarDefaults() {
                     return labels
                         .extremes(state.resolvedSeries ?? [], PlotAxes.valueOf(state), 'both')
                         .map(({ series, value }) => value < 0
-                        ? labels.edgeBox(labels.format(value, series.name), { x: 'before', y: 'middle' }, { x: -offset }, ['left'])
-                        : labels.edgeBox(labels.format(value, series.name), { x: 'after', y: 'middle' }, { x: offset }, ['right']));
+                        ? labels.edgeBox(labels.format(value, undefined, series.name), { x: 'before', y: 'middle' }, { x: -offset }, ['left'])
+                        : labels.edgeBox(labels.format(value, undefined, series.name), { x: 'after', y: 'middle' }, { x: offset }, ['right']));
                 }
             }
         },
@@ -95,13 +96,18 @@ export function buildBarDefaults() {
             // Each bar matched by its own band (see `buildHitAreas`); a grouped bar's dot is
             // drawn in its series' slice of the band.
             pointMatching: 'contains',
-            decorate: (state, ctx) => {
-                const { sliceOf } = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+            decorate: (state, env) => {
+                const { sliceOf } = buildBarGeometry(state, env.cfg.bar.seriesPadding);
                 return (row) => ({
                     areaInset: sliceOf(String(row[SERIES_KEY]))
                 });
             },
-            hitAreas: buildHitAreas
+            hitAreas: buildHitAreas,
+            // The hovered category's band behind its bars - its series' slice of it, when that bar alone is hovered.
+            marker: (state) => ({
+                back: [HoverDefaults.band(state.axes?.isHorizontal ? 'y' : 'x')],
+                front: []
+            })
         },
         timeline: { interpolation: { value: 'value', key: ['category', 'grouping'] } }
     };

package/dist/plots/ranking/bar/markers.d.ts

@@ -1,5 +1,5 @@
 import type { BarMarkerConfig } from '../../../types/markers/common';
-import type { BarPlotState, BarPlotCtx } from '../../../types/plots/ranking/bar/state';
+import type { BarPlotState, BarPlotEnv } from '../../../types/plots/ranking/bar/state';
 import type { ProcessedRow } from '../../../types/phases';
 import type { AxisValue } from '../../../types/layout/mapping';
 import type { BandSlice } from '../../../types/layout/hover';
@@ -25,11 +25,11 @@ export declare function buildBarGeometry<TData extends Record<string, unknown>>(
  * slice of it. The pointer needn't be over the visible bar. They drive the
  * plot's hover when it is active.
  */
-export declare function buildHitAreas<TData extends Record<string, unknown>>(state: BarPlotState<TData>, hover: HoverConfig<any>, ctx: BarPlotCtx): BarMarkerConfig[];
+export declare function buildHitAreas<TData extends Record<string, unknown>>(state: BarPlotState<TData>, hover: HoverConfig<any>, env: BarPlotEnv): BarMarkerConfig[];
 /**
  * BarPlot's "markers" phase: visible `role: 'segment'` bars - real data plus
  * gap fills - drawing the rows the "transforms" phase left, prepended onto
  * whatever the "statistics" phase already put in `state.markers`, and its
  * value labels on top of everything.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: BarPlotState<TData>, ctx: BarPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: BarPlotState<TData>, env: BarPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/ranking/bar/markers.js

@@ -46,8 +46,8 @@ export function buildBarGeometry(state, seriesPadding) {
  */
 export function buildHitAreas(state, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-hover, ctx) {
-    const { categoryOf, sliceOf } = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+hover, env) {
+    const { categoryOf, sliceOf } = buildBarGeometry(state, env.cfg.bar.seriesPadding);
     const isHorizontal = state.axes?.isHorizontal ?? false;
     return hover.points.map(({ row, series }) => {
         const slice = series === undefined ? undefined : sliceOf(series);
@@ -57,7 +57,7 @@ hover, ctx) {
             isHorizontal,
             data: [row],
             category: categoryOf(row),
-            hover: hover.active,
+            hover: hover.active && 'trigger',
             ...(slice
                 ? isHorizontal
                     ? { insetTop: slice.start, insetBottom: slice.end }
@@ -72,11 +72,11 @@ hover, ctx) {
  * whatever the "statistics" phase already put in `state.markers`, and its
  * value labels on top of everything.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { gapFillMaps, colorForSeries, processedData } = state;
     const isHorizontal = state.axes?.isHorizontal ?? false;
     const [categoryAxis, valueAxis] = isHorizontal ? ['y', 'x'] : ['x', 'y'];
-    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+    const geometry = buildBarGeometry(state, env.cfg.bar.seriesPadding);
     const { channels } = processedData;
     const gapDefaults = getConfiguration().bar.gap;
     // Forwarded raw when the transforms left a plain channel (a field key keeps
@@ -101,7 +101,7 @@ export function buildMarks(state, ctx) {
         stacked: geometry.stacked
     });
     const labelFor = (name, slice, negative) => labels && {
-        ...labels.shapeLabel(ctx, (d) => labels.format(Number(valueRead(d)), name, d), {
+        ...labels.shapeLabel(env, (d) => labels.format(Number(valueRead(d)), d, name), {
             fill: 'currentColor',
             ...labelAnchor(negative)
         }),
@@ -117,6 +117,7 @@ export function buildMarks(state, ctx) {
             isHorizontal,
             data,
             styles,
+            hover: 'style',
             ...(label ? { label } : {}),
             ...(isHorizontal
                 ? { y: category, x1: from, x2: value }
@@ -138,7 +139,7 @@ export function buildMarks(state, ctx) {
         const name = group.series.name;
         const slice = geometry.sliceOf(name);
         const defaultColor = colorForSeries(name);
-        const disabledFill = ctx.interaction?.fillFor(name);
+        const disabledFill = env.interaction?.fillFor(name);
         for (const seg of group.visualSegments) {
             const fill = disabledFill?.fill ?? seg.styles.fill ?? defaultColor;
             const styles = {

package/dist/plots/ranking/bullet/defaults.d.ts

@@ -1,8 +1,8 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { BulletPlotState, BulletPlotCtx } from '../../../types/plots/ranking/bullet/state';
+import type { BulletPlotState, BulletPlotEnv } from '../../../types/plots/ranking/bullet/state';
 /**
  * BulletPlot on the shared pipeline: a BarPlot whose bars are drawn thinner
  * over `ranges` - bands that grade the value - with a tick at each `target`.
  * Its value axis fits them along with the bars.
  */
-export declare function buildBulletDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BulletPlotState<TData>, BulletPlotCtx>;
+export declare function buildBulletDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BulletPlotState<TData>, BulletPlotEnv>;

package/dist/plots/ranking/bullet/defaults.js

@@ -11,13 +11,13 @@ export function buildBulletDefaults() {
         ...bar,
         scales: {
             ...bar.scales,
-            defaults: (_state, ctx) => ({
+            defaults: (_state, env) => ({
                 category: {
-                    paddingInner: ctx.cfg.bullet.paddingInner,
-                    paddingOuter: ctx.cfg.bullet.paddingOuter
+                    paddingInner: env.cfg.bullet.paddingInner,
+                    paddingOuter: env.cfg.bullet.paddingOuter
                 }
             }),
-            fit: (state, ctx) => fitValueDomain(state, buildReach(state, ctx))
+            fit: (state, env) => fitValueDomain(state, buildReach(state, env))
         },
         markers: { ...bar.markers, marks: buildMarks }
     };

package/dist/plots/ranking/bullet/markers.d.ts

@@ -1,10 +1,10 @@
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-import type { BulletPlotState, BulletPlotCtx } from '../../../types/plots/ranking/bullet/state';
+import type { BulletPlotState, BulletPlotEnv } from '../../../types/plots/ranking/bullet/state';
 /** Every value the axis has to reach beyond the bars. */
-export declare function buildReach<TData extends Record<string, unknown>>(state: BulletPlotState<TData>, ctx: BulletPlotCtx): number[];
+export declare function buildReach<TData extends Record<string, unknown>>(state: BulletPlotState<TData>, env: BulletPlotEnv): number[];
 /**
  * BulletPlot's "markers" phase, back to front: a rule per range, the bars of a
  * bar plot - thinner, so the ranges show around them - and a tick at each
  * target.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: BulletPlotState<TData>, ctx: BulletPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: BulletPlotState<TData>, env: BulletPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/ranking/bullet/markers.js

@@ -2,8 +2,8 @@ import { buildMarks as buildBarMarks, buildBarGeometry } from '../bar/markers';
 import { GAP_VALUE } from '../../../phases/transforms/TransformsPhase';
 import { RowNumbers } from '../../utils/RowNumbers';
 /** Each category's target and range bounds, read off the rows the bars draw. */
-function buildMeasures(state, ctx) {
-    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+function buildMeasures(state, env) {
+    const geometry = buildBarGeometry(state, env.cfg.bar.seriesPadding);
     return (state.processedData?.data ?? [])
         .filter((row) => row[GAP_VALUE] === undefined && geometry.spanOf(row) !== undefined)
         .map((row) => ({
@@ -16,8 +16,8 @@ function buildMeasures(state, ctx) {
     }));
 }
 /** Every value the axis has to reach beyond the bars. */
-export function buildReach(state, ctx) {
-    return buildMeasures(state, ctx).flatMap(({ target, bounds }) => [
+export function buildReach(state, env) {
+    return buildMeasures(state, env).flatMap(({ target, bounds }) => [
         ...(target === undefined ? [] : [target]),
         ...bounds
     ]);
@@ -27,8 +27,8 @@ export function buildReach(state, ctx) {
  * bar plot - thinner, so the ranges show around them - and a tick at each
  * target.
  */
-export function buildMarks(state, ctx) {
-    const configured = ctx.cfg.bullet;
+export function buildMarks(state, env) {
+    const configured = env.cfg.bullet;
     const own = (state.styles ?? {});
     const rangeColors = own.ranges?.colors ?? configured.rangeColors;
     const rangeWidth = own.ranges?.width ?? configured.rangeWidth;
@@ -38,8 +38,8 @@ export function buildMarks(state, ctx) {
         length: own.target?.length ?? configured.targetLength
     };
     const isHorizontal = state.axes?.isHorizontal ?? false;
-    const baseline = buildBarGeometry(state, ctx.cfg.bar.seriesPadding).baseline;
-    const measures = buildMeasures(state, ctx);
+    const baseline = buildBarGeometry(state, env.cfg.bar.seriesPadding).baseline;
+    const measures = buildMeasures(state, env);
     // Each bound is a band from the baseline, drawn widest first so the narrower ones lie over it.
     const rows = measures.flatMap(({ category, bounds }) => bounds
         .map((bound, rank) => ({
@@ -63,7 +63,7 @@ export function buildMarks(state, ctx) {
             }
         ];
     // The bars narrowed to a thickness of their own, centered in their band.
-    const bars = buildBarMarks(state, ctx).map((marker) => marker.type === 'bar' && marker.role === 'segment'
+    const bars = buildBarMarks(state, env).map((marker) => marker.type === 'bar' && marker.role === 'segment'
         ? {
             ...marker,
             thickness: own.bar?.thickness ?? configured.barThickness

package/dist/plots/ranking/cleveland/ClevelandMarkers.d.ts

@@ -1,5 +1,5 @@
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
-import type { ClevelandPlotState, ClevelandPlotCtx, ClevelandOptions } from '../../../types/plots/ranking/cleveland/state';
+import type { ClevelandPlotState, ClevelandPlotEnv, ClevelandOptions } from '../../../types/plots/ranking/cleveland/state';
 import type { AxisBasedMarkersConfig, TextMarkerConfig } from '../../../types/markers/common';
 import type { EdgeBox } from '../../../types/layout/box';
 /**
@@ -16,14 +16,14 @@ export declare class ClevelandMarkers {
     /** Forgets what was warned about; for tests. */
     static resetWarnings(): void;
     /** The plot's connectors, then its dots, which draw on top of them. */
-    marks: <TData extends Record<string, unknown>>(state: ClevelandPlotState<TData>, ctx: ClevelandPlotCtx) => AxisBasedMarkersConfig[];
+    marks: <TData extends Record<string, unknown>>(state: ClevelandPlotState<TData>, env: ClevelandPlotEnv) => AxisBasedMarkersConfig[];
     /**
      * The value labels of the dots `styles.values.of` picks, one `'text'` marker
      * per place a dot can hold in its range - past the top end (above, or right
      * of it), past the bottom end (below, or left of it) and, for the dots
      * between, beside it - and per series, when they take their series' color.
      */
-    valueLabels: <TData extends Record<string, unknown>>(labels: ValueLabels, state: ClevelandPlotState<TData>, ctx: ClevelandPlotCtx) => TextMarkerConfig[];
+    valueLabels: <TData extends Record<string, unknown>>(labels: ValueLabels, state: ClevelandPlotState<TData>, env: ClevelandPlotEnv) => TextMarkerConfig[];
     /**
      * Room for the labels past the dots at the end of the value axis, so the
      * farthest one fits inside the figure instead of crossing its edge. Only the