@fundar/data-chart-telling 1.17.0 → 1.19.0

package/dist/plots/distribution/box/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildBoxDefaults } from './defaults';
 	import type { BoxPlotProps, BoxPlotCoreProps } from '../../../types/plots/distribution/box/props';
 
@@ -25,7 +25,7 @@
 	}: BoxPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as BoxPlotCoreProps<TData>}
 	defaults={buildBoxDefaults}
 	bind:margins

package/dist/plots/distribution/box/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { BoxPlotProps } from '../../../types/plots/distribution/box/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: BoxPlotProps<TData>;

package/dist/plots/distribution/box/defaults.d.ts

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { BoxPlotState, BoxPlotCtx } from '../../../types/plots/distribution/box/state';
+import type { BoxPlotState, BoxPlotEnv } from '../../../types/plots/distribution/box/state';
 /**
  * BoxPlot on the shared pipeline: one box per category of each series along
  * one category axis - `x`, or `y` for horizontal boxes, as the "data" phase
@@ -9,4 +9,4 @@ import type { BoxPlotState, BoxPlotCtx } from '../../../types/plots/distribution
  * hover along the category axis, over one summary per box rather than every
  * value inside it.
  */
-export declare function buildBoxDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BoxPlotState<TData>, BoxPlotCtx>;
+export declare function buildBoxDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BoxPlotState<TData>, BoxPlotEnv>;

package/dist/plots/distribution/box/defaults.js

@@ -1,6 +1,7 @@
 import { buildMarks } from './markers';
+import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { BoxSummaries } from './BoxSummaries';
-import { TooltipState } from '../../../layout/tooltip/TooltipState.svelte';
 /**
  * BoxPlot on the shared pipeline: one box per category of each series along
  * one category axis - `x`, or `y` for horizontal boxes, as the "data" phase
@@ -22,17 +23,30 @@ export function buildBoxDefaults() {
         },
         scales: {
             bandOrder: 'data',
-            defaults: (_state, ctx) => ({
-                category: { paddingInner: ctx.cfg.box.paddingInner, paddingOuter: ctx.cfg.box.paddingOuter }
+            defaults: (_state, env) => ({
+                category: { paddingInner: env.cfg.box.paddingInner, paddingOuter: env.cfg.box.paddingOuter }
             })
         },
+        // Each value's box: its quartiles and whiskers, worked out once for its tooltip and hover to read.
+        context: (state) => BoxSummaries.context(state),
+        styles: {
+            values: {
+                layout: 'point',
+                // A quartile is worked out, not read: at most two decimals, as the tooltip writes it.
+                format: (value, number) => number(Math.round(value * 100) / 100),
+                parts: {
+                    placements: BoxSummaries.partPlacements,
+                    default: ['min', 'median', 'max']
+                }
+            }
+        },
         markers: { marks: buildMarks },
         hover: {
+            // The hovered category's band behind its shape.
+            marker: (state) => HoverDefaults.behindBand(PlotAxes.other(PlotAxes.valueOf(state))),
             rows: BoxSummaries.of,
             position: BoxSummaries.position,
-            label: () => ((row) => String(row.median)),
-            format: (state) => BoxSummaries.format(state),
-            sort: () => TooltipState.descending((row) => row.median)
+            format: (state) => BoxSummaries.format(state)
         }
     };
 }

package/dist/plots/distribution/box/markers.d.ts

@@ -1,4 +1,4 @@
-import type { BoxPlotState, BoxPlotCtx } from '../../../types/plots/distribution/box/state';
+import type { BoxPlotState, BoxPlotEnv } from '../../../types/plots/distribution/box/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * BoxPlot's "markers" phase: one `box` per visual segment of each series,
@@ -9,4 +9,4 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * A series toggled off in the legend (style mode), or dimmed by hovering
  * another one, takes the legend's disabled fill.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: BoxPlotState<TData>, ctx: BoxPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: BoxPlotState<TData>, env: BoxPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/distribution/box/markers.js

@@ -1,3 +1,5 @@
+import { BoxSummaries } from './BoxSummaries';
+import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 /**
  * BoxPlot's "markers" phase: one `box` per visual segment of each series,
  * one box per category of its rows, filled with its series' color (or its
@@ -7,12 +9,12 @@
  * A series toggled off in the legend (style mode), or dimmed by hovering
  * another one, takes the legend's disabled fill.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { channels } = state.processedData;
-    const { cfg } = ctx;
-    return (state.processedGroups ?? []).flatMap((group) => {
+    const { cfg } = env;
+    const boxes = (state.processedGroups ?? []).flatMap((group) => {
         const name = group.series.name;
-        const disabled = ctx.interaction?.fillFor(name);
+        const disabled = env.interaction?.fillFor(name);
         return group.visualSegments.map((seg) => {
             const { stroke, strokeWidth, strokeOpacity, borderRadius } = seg.styles;
             const fill = disabled?.fill ?? seg.styles.fill ?? state.colorForSeries(name);
@@ -38,4 +40,11 @@ export function buildMarks(state, ctx) {
             };
         });
     });
+    // The parts of each box `styles.values` labels: its whiskers' ends and its median by default, beside it.
+    const labels = state.valueLabels?.show
+        ? state.valueLabels.partMarkers(env, BoxSummaries.of(state), BoxSummaries.labelPoint(state), {
+            seriesColor: (row) => state.colorForSeries(String(row[SERIES_KEY]))
+        })
+        : [];
+    return [...boxes, ...labels];
 }

package/dist/plots/distribution/density/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildDensityDefaults } from './defaults';
 	import type {
 		DensityPlotProps,
@@ -28,7 +28,7 @@
 	}: DensityPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as DensityPlotCoreProps<TData>}
 	defaults={buildDensityDefaults}
 	bind:margins

package/dist/plots/distribution/density/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { DensityPlotProps } from '../../../types/plots/distribution/density/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: DensityPlotProps<TData>;

package/dist/plots/distribution/density/defaults.d.ts

@@ -1,9 +1,9 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { DensityPlotState, DensityPlotCtx } from '../../../types/plots/distribution/density/state';
+import type { DensityPlotState, DensityPlotEnv } from '../../../types/plots/distribution/density/state';
 /**
  * DensityPlot on the shared pipeline: series read one position channel - `x`,
  * or `y` for a horizontal curve - estimated by the plot's transforms merged
  * over the default density of that axis, drawn from a zero baseline as an area
  * or a line, and its own markers. Its plot defaults to: hover along the estimated axis.
  */
-export declare function buildDensityDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<DensityPlotState<TData>, DensityPlotCtx>;
+export declare function buildDensityDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<DensityPlotState<TData>, DensityPlotEnv>;

package/dist/plots/distribution/density/defaults.js

@@ -1,4 +1,11 @@
+import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { buildMarks } from './markers';
+import { RowContext } from '../../../phases/context/RowContext';
+import { TooltipState } from '../../../layout/tooltip/TooltipState.svelte';
+import { NumberFormat } from '../../../utils/NumberFormat';
+import { getConfiguration } from '../../../configuration/config.svelte';
+/** A density is a small number: three decimals tell its points apart. */
+const DENSITY_DECIMALS = 3;
 /**
  * The plot's own density along its axis merged over the default one, the
  * author's props winning, and every other transform kept after it in order. A
@@ -27,9 +34,34 @@ export function buildDensityDefaults() {
             }
         },
         transforms: {
+            // A curve is labelled at its peak.
+            labels: { select: 'max' },
             transforms: (state) => mergeDensity(state.transforms ?? [], state.axes?.isHorizontal ?? false)
         },
+        styles: {
+            values: {
+                layout: 'point',
+                layouts: { point: { side: 'above' }, path: { side: 'above', offset: 'max' } },
+                // The estimate tells a reader little: a label names the curve it is on, or a lone curve's peak position.
+                formatFor: (state) => {
+                    const position = PlotAxes.other(PlotAxes.valueOf(state));
+                    return (state.resolvedSeries?.length ?? 0) > 1
+                        ? (value, number, { series }) => series ?? number(value)
+                        : (_value, number, context) => number(Number(context[position]));
+                }
+            }
+        },
         scales: { zero: ['value'] },
-        markers: { marks: buildMarks }
+        markers: { marks: buildMarks },
+        hover: {
+            // A hovered point reads as its estimate, the value its context gives it - a small number, written with
+            // three decimals unless the author asks otherwise.
+            label: (state) => {
+                const number = NumberFormat.of(NumberFormat.displayOf(state.values), getConfiguration(), DENSITY_DECIMALS);
+                return ((row) => number(Number(RowContext.of(row).value)));
+            },
+            // Its tooltip writes the estimate the same way.
+            format: (state) => TooltipState.default(state, NumberFormat.of(NumberFormat.displayOf(state.tooltip), getConfiguration(), DENSITY_DECIMALS))
+        }
     };
 }

package/dist/plots/distribution/density/markers.d.ts

@@ -1,4 +1,4 @@
-import type { DensityPlotState, DensityPlotCtx } from '../../../types/plots/distribution/density/state';
+import type { DensityPlotState, DensityPlotEnv } from '../../../types/plots/distribution/density/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * DensityPlot's "markers" phase: one `area` - or `line`, by `styles.mark` - per
@@ -6,4 +6,4 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * its series. The markers the "statistics" phase already put in `state.markers`
  * come after.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: DensityPlotState<TData>, ctx: DensityPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: DensityPlotState<TData>, env: DensityPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/distribution/density/markers.js

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { Transforms } from '../../../phases/transforms/Transforms';
 /**
  * DensityPlot's "markers" phase: one `area` - or `line`, by `styles.mark` - per
@@ -5,15 +6,15 @@ import { Transforms } from '../../../phases/transforms/Transforms';
  * its series. The markers the "statistics" phase already put in `state.markers`
  * come after.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { channels, options, transforms } = state.processedData;
-    const { cfg } = ctx;
+    const { cfg } = env;
     const styles = state.styles;
     const asLine = styles?.mark === 'line';
-    return (state.processedGroups ?? []).flatMap((group) => {
+    const marks = (state.processedGroups ?? []).flatMap((group) => {
         const name = group.series.name;
-        const disabledFill = ctx.interaction?.fillFor(name);
-        const disabledStroke = ctx.interaction?.strokeFor(name);
+        const disabledFill = env.interaction?.fillFor(name);
+        const disabledStroke = env.interaction?.strokeFor(name);
         return group.visualSegments.map((seg) => {
             const color = seg.styles.fill ?? state.colorForSeries(name);
             const style = asLine
@@ -43,4 +44,7 @@ export function buildMarks(state, ctx) {
             }, transforms);
         });
     });
+    // `styles.values` labels each curve: its name at its peak by default, or along it.
+    const labels = state.valueLabels?.show ? state.valueLabels.forSeries(state, env) : undefined;
+    return ValueLabels.onMarkers(marks, asLine ? 'line' : 'area', labels);
 }

package/dist/plots/distribution/histogram/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildHistogramDefaults } from './defaults';
 	import type {
 		HistogramPlotProps,
@@ -28,7 +28,7 @@
 	}: HistogramPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as HistogramPlotCoreProps<TData>}
 	defaults={buildHistogramDefaults}
 	bind:margins

package/dist/plots/distribution/histogram/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { HistogramPlotProps } from '../../../types/plots/distribution/histogram/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: HistogramPlotProps<TData>;

package/dist/plots/distribution/histogram/defaults.d.ts

@@ -1,9 +1,9 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { HistogramPlotState, HistogramPlotCtx } from '../../../types/plots/distribution/histogram/state';
+import type { HistogramPlotState, HistogramPlotEnv } from '../../../types/plots/distribution/histogram/state';
 /**
  * HistogramPlot on the shared pipeline: series read one position channel -
  * `x`, or `y` for a horizontal histogram - binned by the plot's transforms
  * merged over the default bin of that axis, bars from a zero baseline, and its
  * own markers. Its plot defaults to: hover along the binned axis.
  */
-export declare function buildHistogramDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<HistogramPlotState<TData>, HistogramPlotCtx>;
+export declare function buildHistogramDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<HistogramPlotState<TData>, HistogramPlotEnv>;

package/dist/plots/distribution/histogram/defaults.js

@@ -1,5 +1,5 @@
 import { buildMarks } from './markers';
-import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { resolveAccessor } from '../../../utils/accessors';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 /** One processed channel's value on a row - `undefined` for a channel the transforms didn't set. */
@@ -40,54 +40,54 @@ export function buildHistogramDefaults() {
             }
         },
         transforms: {
-            transforms: (state, ctx) => mergeBin(state.transforms ?? [], ctx.cfg, state.axes?.isHorizontal ?? false)
+            labels: {},
+            transforms: (state, env) => mergeBin(state.transforms ?? [], env.cfg, state.axes?.isHorizontal ?? false)
+        },
+        // A bin's count and the edges it spans, for its label, its tooltip and its hover.
+        context: (state) => {
+            const { channels } = state.processedData;
+            const value = PlotAxes.valueOf(state);
+            const binned = PlotAxes.other(value);
+            const [count, from, to] = [
+                channels[value],
+                channels[`${binned}1`],
+                channels[`${binned}2`]
+            ].map(readChannel);
+            return ((row) => ({
+                count: Number(count(row)),
+                from: Number(from(row)),
+                to: Number(to(row))
+            }));
         },
         scales: { zero: ['value'] },
         styles: {
             values: {
+                layout: 'path',
+                // A bin's value runs up, or right on a horizontal histogram: its end is that edge.
+                layouts: (state) => {
+                    const end = state.axes?.isHorizontal ? 'right' : 'top';
+                    return {
+                        path: { edge: end, side: 'outside' },
+                        box: { anchor: 'middle' },
+                        point: { anchor: end, side: state.axes?.isHorizontal ? 'after' : 'above' }
+                    };
+                },
                 // An `'outside'` label sits past its bin's end, which the longest bin takes to the edge.
                 reach: (labels, state) => {
-                    if (labels.anchor !== 'outside')
+                    const end = state.axes?.isHorizontal ? 'right' : 'top';
+                    const { edge, side = 'outside' } = labels.placement;
+                    if (labels.layout !== 'path' || edge !== end || side !== 'outside')
                         return [];
                     return state.axes?.isHorizontal
-                        ? [
-                            labels.edgeBox('0', { x: 'after', y: 'middle' }, { x: labels.offset('x') }, [
-                                'right'
-                            ])
-                        ]
-                        : [
-                            labels.edgeBox('0', { x: 'middle', y: 'before' }, { y: -labels.offset('y') }, [
-                                'top'
-                            ])
-                        ];
+                        ? [labels.edgeBox('0', { x: 'after', y: 'middle' }, { x: labels.offset() }, ['right'])]
+                        : [labels.edgeBox('0', { x: 'middle', y: 'before' }, { y: -labels.offset() }, ['top'])];
                 }
             }
         },
         markers: { marks: buildMarks },
         hover: {
-            // A hovered bin is labelled with its count, and reads as its row plus its count,
-            // the edges it spans and its series.
-            label: (state) => {
-                const count = readChannel(state.processedData.channels[PlotAxes.valueOf(state)]);
-                return ((row) => String(Number(count(row))));
-            },
-            row: (state) => {
-                const { channels } = state.processedData;
-                const value = PlotAxes.valueOf(state);
-                const binned = PlotAxes.other(value);
-                const [count, from, to] = [
-                    channels[value],
-                    channels[`${binned}1`],
-                    channels[`${binned}2`]
-                ].map(readChannel);
-                return ((row) => ({
-                    ...row,
-                    count: Number(count(row)),
-                    from: Number(from(row)),
-                    to: Number(to(row)),
-                    group: row[SERIES_KEY]
-                }));
-            }
+            // The hovered bin's span behind its bar, the whole height of the plot: a bin is no band of a category.
+            marker: (state) => HoverDefaults.behindSpan(PlotAxes.other(PlotAxes.valueOf(state)), 'from', 'to')
         }
     };
 }

package/dist/plots/distribution/histogram/markers.d.ts

@@ -1,4 +1,4 @@
-import type { HistogramPlotState, HistogramPlotCtx } from '../../../types/plots/distribution/histogram/state';
+import type { HistogramPlotState, HistogramPlotEnv } from '../../../types/plots/distribution/histogram/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * HistogramPlot's "markers" phase: one `rect` per visual segment of each
@@ -6,4 +6,4 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * the "statistics" phase already put in `state.markers` come after, and its
  * value labels last.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: HistogramPlotState<TData>, ctx: HistogramPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: HistogramPlotState<TData>, env: HistogramPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/distribution/histogram/markers.js

@@ -1,5 +1,4 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
-import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { Transforms } from '../../../phases/transforms/Transforms';
 import { resolveAccessor } from '../../../utils/accessors';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
@@ -9,9 +8,9 @@ import { PlotAxes } from '../../../phases/data/PlotAxes';
  * the "statistics" phase already put in `state.markers` come after, and its
  * value labels last.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { channels, options, transforms } = state.processedData;
-    const fillOpacity = ctx.cfg.histogram.fillOpacity;
+    const fillOpacity = env.cfg.histogram.fillOpacity;
     // Each bin writes its own count, along its bar: past its top (`'outside'`), against an edge, at its tip or its
     // base - upward, or rightward on a horizontal histogram. A bin with nothing in it writes nothing.
     const labels = state.valueLabels?.show ? state.valueLabels : undefined;
@@ -23,18 +22,20 @@ export function buildMarks(state, ctx) {
     const bottomOf = read(channels[`${value}1`]) ?? (() => 0);
     const countRead = read(channels[value]);
     const countOf = (d) => countRead ? Number(countRead(d)) : Number(position[value](d)) - Number(bottomOf(d));
-    const labelFor = (name) => labels?.shapeLabel(ctx, (d) => (countOf(d) > 0 ? labels.format(countOf(d), name, d) : ''), {
+    const labelFor = (name) => labels?.label(env, (d) => (countOf(d) > 0 ? labels.text(d) : ''), {
         fill: 'currentColor',
-        ...ValueLabels.boxAnchor(labels.anchor, { isHorizontal: value === 'x' })
+        labelled: state.labelled,
+        seriesColor: () => state.colorForSeries(name)
     });
     const rects = (state.processedGroups ?? []).flatMap((group) => {
-        const disabled = ctx.interaction?.fillFor(group.series.name);
+        const disabled = env.interaction?.fillFor(group.series.name);
         // A stroke the segment sets is not a reason to lose the series' fill, as the marker would take it for the color.
         const color = state.colorForSeries(group.series.name);
         return group.visualSegments.map((seg) => Transforms.finish({
             type: 'rect',
             series: group.series.name,
             data: seg.data,
+            hover: 'style',
             ...(labels ? { label: labelFor(group.series.name) } : {}),
             ...channels,
             ...options,

package/dist/plots/distribution/pyramid/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildPyramidDefaults } from './defaults';
 	import type {
 		PyramidPlotProps,
@@ -27,7 +27,7 @@
 	}: PyramidPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as PyramidPlotCoreProps<TData>}
 	defaults={buildPyramidDefaults}
 	bind:margins

package/dist/plots/distribution/pyramid/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { PyramidPlotProps } from '../../../types/plots/distribution/pyramid/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: PyramidPlotProps<TData>;

package/dist/plots/distribution/pyramid/defaults.d.ts

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { PyramidPlotState, PyramidPlotCtx } from '../../../types/plots/distribution/pyramid/state';
+import type { PyramidPlotState, PyramidPlotEnv } from '../../../types/plots/distribution/pyramid/state';
 /**
  * PyramidPlot on the shared pipeline. Its `x`/`y` are the visual axes: the one
  * holding categories (read off the values by the "data" phase) runs the bars,
@@ -10,4 +10,4 @@ import type { PyramidPlotState, PyramidPlotCtx } from '../../../types/plots/dist
  * category and magnitude.
  * Its plot defaults to: hover along the category axis; the tween is of the magnitude, keyed by category and side.
  */
-export declare function buildPyramidDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<PyramidPlotState<TData>, PyramidPlotCtx>;
+export declare function buildPyramidDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<PyramidPlotState<TData>, PyramidPlotEnv>;

package/dist/plots/distribution/pyramid/defaults.js

@@ -1,4 +1,5 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { buildMarks } from './markers';
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
@@ -44,18 +45,25 @@ export function buildPyramidDefaults() {
                 value: { tickFormat: (v) => String(Math.abs(Number(v))) }
             })
         },
+        transforms: { labels: {} },
         styles: {
             values: {
+                layout: 'path',
+                layouts: {
+                    path: { edge: 'tip', side: 'outside' },
+                    box: { anchor: 'middle' },
+                    point: { anchor: 'top', side: 'above' }
+                },
                 // A label past its bar's end reaches out on its own side, the longest bar's to the edge.
                 reach: (labels, state) => {
-                    if (labels.anchor !== 'outside')
+                    if (!labels.pastTip)
                         return [];
                     const axis = PlotAxes.valueOf(state);
                     const isHorizontal = state.axes?.isHorizontal ?? true;
-                    const offset = labels.offset(axis);
+                    const offset = labels.offset();
                     return labels.extremes(state.resolvedSeries ?? [], axis).map(({ series, value }) => {
                         const left = series.side === 'left';
-                        const text = labels.format(Math.abs(value), series.name);
+                        const text = labels.format(Math.abs(value), undefined, series.name);
                         return isHorizontal
                             ? labels.edgeBox(text, { x: left ? 'before' : 'after', y: 'middle' }, { x: left ? -offset : offset }, [left ? 'left' : 'right'])
                             : labels.edgeBox(text, { x: 'middle', y: left ? 'after' : 'before' }, { y: left ? offset : -offset }, [left ? 'bottom' : 'top']);
@@ -65,6 +73,8 @@ export function buildPyramidDefaults() {
         },
         markers: { marks: buildMarks },
         hover: {
+            // The hovered age group's band behind its bars, across both sides.
+            marker: (state) => HoverDefaults.behindBand(PlotAxes.other(PlotAxes.valueOf(state))),
             // A bar sits at its signed magnitude - below or left of the baseline on the first
             // side - and its category, and reads as its magnitude.
             position: (state) => {

package/dist/plots/distribution/pyramid/markers.d.ts

@@ -1,11 +1,3 @@
-import type { PyramidPlotState, PyramidPlotCtx } from '../../../types/plots/distribution/pyramid/state';
+import type { PyramidPlotState, PyramidPlotEnv } from '../../../types/plots/distribution/pyramid/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * PyramidPlot's "markers" phase: one `role: 'segment'` bar per visual
- * segment, along the category axis the "data" phase read (horizontal bars for
- * categories on y, signed magnitude on x; vertical ones the other way) and with
- * no insets - prepended onto whatever the "statistics" phase already put in
- * `state.markers`. Emits no `role: 'hitArea'` markers - PyramidPlot's hover
- * matches nearest points rather than hit-testing category bands.
- */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: PyramidPlotState<TData>, ctx: PyramidPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: PyramidPlotState<TData>, env: PyramidPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/distribution/pyramid/markers.js

@@ -1,4 +1,3 @@
-import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { resolveAccessor } from '../../../utils/accessors';
 import { seriesIdOf } from '../../../utils/grouping';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
@@ -8,26 +7,13 @@ const GAP_KINDS = ['start', 'middle', 'end'];
 function signFor(s, magnitude) {
     return s.side === 'left' ? -magnitude : magnitude;
 }
-/**
- * PyramidPlot's "markers" phase: one `role: 'segment'` bar per visual
- * segment, along the category axis the "data" phase read (horizontal bars for
- * categories on y, signed magnitude on x; vertical ones the other way) and with
- * no insets - prepended onto whatever the "statistics" phase already put in
- * `state.markers`. Emits no `role: 'hitArea'` markers - PyramidPlot's hover
- * matches nearest points rather than hit-testing category bands.
- */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { groupedSeries, gapFillMaps } = state;
     const gapDefaults = getConfiguration().pyramid.gap;
     const categoryAxis = PlotAxes.categoryOf(state);
     const valueAxis = PlotAxes.valueOf(state);
     const isHorizontal = state.axes?.isHorizontal ?? true;
     const labels = state.valueLabels?.show ? state.valueLabels : undefined;
-    /**
-     * Where a series' labels sit on its bars, which run out from the shared baseline to its own side: left and right
-     * of it on a horizontal pyramid, down and up on a vertical one.
-     */
-    const anchorOf = (side) => ValueLabels.boxAnchor(labels?.anchor ?? 'outside', { isHorizontal, negative: side === 'left' });
     /** One bar's own channels: its category, and its span from the baseline to its signed value. */
     const span = (category, to) => ({
         isHorizontal,
@@ -47,7 +33,7 @@ export function buildMarks(state, ctx) {
         // practice, just not provably so to TypeScript here.
         const category = group.series[categoryAxis];
         const defaultColor = state.colorForSeries(group.series.name);
-        const disabledFill = ctx.interaction?.fillFor(group.series.name);
+        const disabledFill = env.interaction?.fillFor(group.series.name);
         const processed = processedGroups.get(seriesIdOf(group.series));
         const processedCategory = processed?.series[categoryAxis];
         const getMagnitude = resolveAccessor((processed?.series[valueAxis] ?? group.series[valueAxis]));
@@ -60,11 +46,16 @@ export function buildMarks(state, ctx) {
                 type: 'bar',
                 role: 'segment',
                 data: realData,
+                hover: 'style',
                 ...span(processedCategory, signed),
-                // Each bar writes its own magnitude, on its side of the baseline.
+                // Each bar writes its own magnitude; a bar's tip is on its own side of the baseline.
                 ...(labels
                     ? {
-                        label: labels.shapeLabel(ctx, (d) => labels.format(Math.abs(Number(getMagnitude(d))), group.series.name, d), { fill: 'currentColor', ...anchorOf(group.series.side) })
+                        label: labels.label(env, (d) => labels.format(Math.abs(Number(getMagnitude(d))), d, group.series.name), {
+                            fill: 'currentColor',
+                            labelled: state.labelled,
+                            seriesColor: () => state.colorForSeries(group.series.name)
+                        })
                     }
                     : {}),
                 styles: {

package/dist/plots/distribution/violin/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildViolinDefaults } from './defaults';
 	import type {
 		ViolinPlotProps,
@@ -28,7 +28,7 @@
 	}: ViolinPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as ViolinPlotCoreProps<TData>}
 	defaults={buildViolinDefaults}
 	bind:margins

package/dist/plots/distribution/violin/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { ViolinPlotProps } from '../../../types/plots/distribution/violin/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: ViolinPlotProps<TData>;