@fundar/data-chart-telling 1.16.0 → 1.18.0

package/CHANGELOG.md

@@ -2,6 +2,62 @@
 
 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.18.0] - 2026-11-09
+
+### Added
+
+- A `band` marker: the band of a category on a band scale, across the whole of the other axis - `{ type: 'band', axis: 'x', value: 'Salta' }`. `value` is a category or a list of them, or with `data` a field key or a function of the row; rows that name the same category draw one band. `slice` fills part of it, as the fractions of its width left out at each end (a grouped bar's series), and a band several rows share fills what all of their slices do. `styles` take `AreaStyle`, each field a value or a function of the row, over the configuration's new `band` (`{ fill: '#94a3b8', fillOpacity: 0.25 }`). It takes the pointer only with a handler of its own, and draws nothing on an axis that is not a band scale.
+- The `hover` marker's `active` and `others` restyle the shapes themselves: the ones the hover matches (by its `strategy`) take `active`, every other one `others`, while the hover is on - `fill`, `fillOpacity`, `stroke`, `strokeWidth`, `strokeOpacity` and `strokeDasharray`, each a value or a function of the row. `markers={[{ type: 'hover', active: { fillOpacity: 1 }, others: { fillOpacity: 0.3 } }]}` lightens the hovered tile of a `TreemapPlot` and fades the rest, and does the same on the cells of a `HeatmapPlot`, the bars of a `BarPlot`, a `BulletPlot` and a `PyramidPlot`, a `HistogramPlot`'s bins, a `ScatterPlot`'s dots and the dots of the Cleveland family, whose own shapes are linked to the hover. On a dot they are its `dotFill`, `dotStroke`... The shape is restyled, not covered: its label stays on top, and one with no `fill` of its own is written in the color that reads best on the new one. They go over `styles` and `segments`; a series the legend dims keeps its dimmed fill and opacities.
+- The `hover` marker's `back` and `front`: the markers it draws behind the plot's shapes and in front of them - any marker but another `hover`, a `component` too, with its styles and events. They draw the hovered points, each a row with its `x`, `y`, `label` (written as the marker's number fields or `format` ask), `series`, `color`, `areaInset` and `row`, unless they have `data` of their own, and what they leave unset comes from the hover: `x` and `y`, a `rule`'s and a `band`'s `value` (and a band's `slice`), a `text`'s `text`, the configuration's `hover` look (`rule`, `dot`, `font`, `area`) and the series color of a `dot` and a `text`. `points: 'active'` draws only the point under the pointer, and a function of the point some of them. On a grouped bar plot each is drawn in its series' slice of the band.
+- Each plot kind has a hover of its own that an author's `hover` marker is laid over: `active` and `others` field by field, `back` and `front` replaced when set (`back: []` draws nothing behind). `LinePlot`, `AreaPlot` and `DensityPlot` draw a crosshair along each axis their strategy matches along, and a dot and the value on each point, as the marker did; `ScatterPlot` a crosshair through the point and its value; `SlopePlot` and the Cleveland family (`ClevelandPlot`, `DumbbellPlot`, `ForestPlot`, `LollipopPlot`) a rule along the value axis, a dot and the value; `BarPlot`, `BulletPlot`, `BoxPlot`, `ViolinPlot` and `PyramidPlot` the hovered category's band behind their shapes; `HistogramPlot` the hovered bin's span; `SparklinePlot` a dot; `TreemapPlot` and `HeatmapPlot` only outline the hovered tile or cell, in the configuration's new `hover.active` (`{ stroke: '#111827', strokeWidth: 2 }`).
+- The hover's point under the pointer is the one nearest it of those the hover reaches: a crosshair at it, and `points: 'active'`, follow the pointer up and down a category from one series' point to another's.
+- A row context: what a plot knows of each row it draws, worked out once as it reads its data and kept on the row - its `series`, its `x` and `y` (its own values, not a stack's running total, else where the transforms put it), the `value` it shows, the `row` itself, and what the plot kind works out for it: a `TreemapPlot` tile's `name`, `path` and `share`; a `HistogramPlot` bin's `count`, `from` and `to`; a `BoxPlot` or `ViolinPlot` value's box (`category`, `min`, `p25`, `median`, `p75`, `max`, `count`, `outliers`); a `DensityPlot` point's estimate as its `value`; a `HeatmapPlot` cell's color value. `tooltip.format`, `styles.values.format`, the `hover` marker's points (`point.context`, in its `format` and its `back` and `front` markers) and `usePlot().contextOf(row)` all read it, and `RowContext.of(row)` reads it anywhere, from a row or a copy of it. A plot kind adds its own with a `context` function in its defaults. `PlotRowContext`, `KindRowContext`, `TreemapRowContext`, `HistogramRowContext` and `BoxRowContext` are exported.
+- A `DensityPlot`'s hovered point and its tooltip read as its estimated density, with three decimals.
+- What a plot's hover draws follows the strategy in force as it is shown: a composer's `hover.strategy` changed while the plot is on screen (a scrolly step) changes the crosshair it draws.
+- A marker's `hover` takes `'trigger'` (a hit area of the plot's hover, what `true` was) and `'style'` (its shapes take the hover marker's `active` and `others`); `true` does both. `HoverMarkerConfig`, `HoverShapeStyle` and `HoverLayerMarker` are exported.
+- `examples/TreemapHover.svelte`, a _Configuration / State_ story reading a histogram's row context, and a `Layout/Hover` section of stories: each plot kind's own hover, the strategies (one changed while a plot is shown), the number fields, the scope, `active` and `others`, `back` and `front`.
+
+### Changed
+
+- **Breaking:** `styles.values.format` is `(value, number, context)`, as a tooltip's `format`: the series is `context.series`, the labelled row `context.row`. `format: (v, name) => `${name}: ${v}`` is `format: (v, _number, { series }) => `${series}: ${v}``.
+- **Breaking:** a `HistogramPlot`'s tooltip rows are its bins as they are, without the `count`, `from`, `to` and `group` they had: those are in the `context`, a `tooltip.format`'s third argument (`group` is `series`).
+- A tooltip's `context` holds the row's `x`, `y`, `value` and `row` along with its `series`, and a `TreemapPlot`'s the tile's `name`, `path` and `value` along with its `share`. `TreemapTooltipContext` is `TreemapRowContext`.
+- **Breaking:** the `hover` marker's `ruleX`, `ruleY`, `areaX`, `areaY`, `showLabels`, `rule`, `area`, `dot` and `text` are gone: what it draws is its `back` and `front` markers. `ruleX: false` is `back: []`; `ruleY: true` a `{ type: 'rule', axis: 'y', points: 'active' }` in `back`; `areaX: true` a `{ type: 'band', axis: 'x' }` in `back`; `showLabels: false` is `front: [{ type: 'dot' }]`; `rule`, `area`, `dot` and `text` are the `styles` of those markers. `text.textAnchor: 'outside'` is two `text` markers, each kept to one side of zero by `points`. On every plot but `LinePlot`, `AreaPlot` and `DensityPlot`, `{ type: 'hover' }` draws something else than the crosshair, dot and label it drew: see the hover each plot kind has of its own, above.
+- A marker with `hover: true` (or `'trigger'`) hovers the row of the shape under the pointer, not the first of its rows.
+- A series the legend dims (`mode: 'dim'`) stays hoverable: it is matched and shows in the tooltip. Only one it hides, omits or rescales away is out of the hover.
+
+## [1.17.0] - 2026-11-06
+
+### Added
+
+- A `rect`, `cell`, `bar` or `waffle` marker takes a `label`: a text in the middle of each shape, with every option of a `text` marker, fitted to the shape - written smaller, down to `minFontSize`; then cut short with an ellipsis on as many lines as it holds; then as its `fallback`, a value alone, say; and left out when nothing fits. It takes no pointer from the shape, unless it has a handler of its own. `anchor` puts it against an edge or in a corner, and `outside` beyond the edge, where `fitMargins` makes room for it. A `text` marker takes the same `fit`, with a box of its own.
+- A `treemap` transform, for a `rect` marker on any plot kind: it lays the rows out as tiles in the unit square with d3-hierarchy - a tile per distinct path of `levels`, its area the sum of its rows' `value` - and gives `x1`/`x2`/`y1`/`y2` (and `x`/`y` at each tile's centre for a `text`). `tile` picks how a rectangle is split (`'squarify'`, `'binary'`, `'slice'`, `'dice'`, `'sliceDice'`) and `aspect` the shape of the box the tiles fill.
+- Every marker takes handlers for the pointer (`onclick`, `onpointerenter`, `onpointerleave`, `onpointermove`...), called with the event and the row of the shape. They are the props svelteplot documents on all its marks, passed on by every marker that draws one (not `brush`, `hover`, `inset`, `delta` or the map's `features`); svelteplot's code wires them up on `Rect`, `Bar`, `Cell`, `Area`, `Arrow`, `Dot`, `Trail`, `Vector`, `Line`, `Link`, `DelaunayLink` and `Voronoi` so far, and the rest will follow it. `rect`'s `styles.borderRadius` rounds its corners.
+- A `text` marker takes the pointer handlers every marker takes (`onclick`, `onpointerenter`...) in place of its own `onPointerEnter` and `onPointerLeave`, which are gone.
+- The `styles` of the markers that draw a shape per row - `rect`, `bar`, `cell`, `waffle`, `dot`, `tick`, `rule`, `arrow`, `voronoi` and `delaunayLink`, and `text` for `fill`, `fillOpacity`, `stroke`, `strokeWidth`, `fontWeight` and `fontStyle` - take a function of the row in place of a value: `styles: { fillOpacity: (row) => (row.selected ? 0.55 : 0.12) }`. A string names a field of the rows instead: a number such as `strokeWidth` or `fillOpacity` always, a color when the rows have a field of that name. A color or an opacity a function returns is drawn as it is.
+- `TreemapPlot`: a tile per row, its area its `value`, nested by `grouping` and laid out with `d3-hierarchy` (a `treemap` entry in `transforms` sets `tile`: `'squarify'`, `'binary'`, `'slice'`, `'dice'` or `'sliceDice'`). `grouping` is the whole path of a tile (`'sector.branch'`) (the last level names it, rows with the same path are one tile, so `grouping: 'sector'` alone is a tile per sector) and its outermost level colors the tiles and fills the legend. The tiles are the `treemap` transform drawn as `rect` markers with a `label`. `segments` can be keyed by the path of a tile (`'Tertiary.Finance'`), the most specific winning, and `tooltip.format(row, number, context)` gets the tile's `share` (0 to 100) in its `context`. A tile is labelled with its name over its share of the whole, as `styles.values` asks, and the label is fitted to the tile: at a smaller font size first, then the name cut short with an ellipsis, then the share alone, then nothing. Hovering a tile matches it alone. `treemap` in the configuration sets the line between tiles and the label's color, size and room.
+- `grouping` takes fields joined by dots (`'region.sex'`): the levels of one grouping, outermost first. A plot that nests its rows (`TreemapPlot`) nests by them; any other splits its rows by the combination of the levels, a series named `'CABA.F'`. A dotted name is a field when the rows have one by that name.
+- `DataProps` is now `DualAxisDataProps`, one of a family by the axes a plot has: `SingleAxisDataProps` (`x` or `y` alone, a histogram's or a density's) and `NonAxisDataProps` (no position channels, a treemap's), which the other two extend. Each takes the channels a plot cannot draw without as a second parameter.
+- `scales.color.depth`: with a `grouping` of several levels, the level the colors reach - each outermost value keeps its categorical color and the values under it, down to that level, take tones of it. A treemap colors its tiles so, and any other plot the series it splits by every level. `ColorTones` (`colorTones`, `hierarchicalColors`) builds the tones, for any plot of a hierarchy.
+- A legend's `disabled: { mode: 'rescale' }`: the series is removed and the parts left of a whole are the new 100% - a stack's categories are scaled back up to their totals, a treemap's tiles laid out and given their shares anew. `'omit'` now leaves a treemap's other tiles in their place and with their share of the whole.
+- The legend makes words of each level of a series grouped by several (`'Americas.Argentina'`).
+- A `value` channel: what a row amounts to as a part of a whole. `TreemapPlot` sizes its tiles by it; the other plots ignore it.
+- `tooltip.format` gets a third argument, `context`: what the plot knows of the row beyond its fields - its `series`, and what its kind adds (a treemap's `share`).
+- A marker's `strokeDasharray` takes a named line style - `'solid'`, `'dashed'`, `'dotted'`, `'dashdot'` - as well as an SVG dash pattern.
+- Every marker takes `hover: true`, which makes it a hit area of the plot's hover: the pointer over any of its shapes hovers its rows.
+- A label inside its shape (`rect`, `cell`, `bar`, `waffle`, and the value labels of every plot written in a shape) with no `fill` of its own is written in the color that reads best on the shape, as it is seen - blended with the plot's background as far as its `fillOpacity` lets it through. It picks from the configuration's new `text.label.contrast` (`['#ffffff', '#111827']`), and takes white or black instead when neither reaches WCAG AA (4.5:1).
+- `CssColor.alpha` and `CssColor.composite`: a color's opacity, and the opaque color it is seen as over a backdrop. `CssColor.contrastText` (and `contrastTextColor`) takes a `minRatio`, WCAG AA by default.
+
+### Changed
+
+- **Breaking:** `continuous.labelColor` and the `--dct-heat-text`, `--dct-heat-min` and `--dct-heat-max` CSS variables are gone: a heatmap's value labels contrast with each cell (`text.label.contrast`), and its ramp is the default continuous one, `continuous.min`/`max` or `continuous.scheme`, set with `setConfiguration`. No style read the variables.
+- The configuration's `--dct-*` CSS variables are set once on the document root (`:where(:root)`), not on each figure, so a variable set on a wrapping element overrides them, as the theming docs say. `cssVarsRule` writes them as that rule.
+- The axes, and what a plot writes in their ink (value labels outside their shape, a violin's box, a bullet's target, a Cleveland connector, a map's outlines), take `--dct-axis-color`; the timeline's current step takes `--dct-timeline-active`. Both fall back to the configuration.
+- `CssColor.contrastText` never returns a candidate under its `minRatio` (WCAG AA, 4.5:1) when white or black does better, and its luminance follows sRGB's own threshold (0.04045).
+- The value labels of `BarPlot`, `BulletPlot`, `PyramidPlot`, `HistogramPlot` and `HeatmapPlot` are the `label` of their own shapes (`bar`, `rect`, `cell`), so they fit them: a label that does not fit is written smaller, cut short, or left out. On those plots `styles.values.anchor` takes the anchors of a shape's label - `'middle'`, `'top'`, `'bottom'`, `'left'`, `'right'`, the corners (`'top-left'`...), and `'tip'` and `'base'`, the end of a bar away from zero and the one on it, on either side of zero - and `'outside'`, beyond the tip, which stays the default. `'start'` and `'end'` are gone from them (they were the top and bottom of the page, or the left and right, whatever the sign); the plots that label a point or the end of a line keep them. `fontStyle.dx` and `dy` now push a label from its anchor rather than replace its gap. A label with `hoverIsolate` still dims the other series and a dimmed series dims its labels. `LabelAnchor` is one type for the anchors of a text marker's `frameAnchor`, a shape's `label` and the plots' `anchor`.
+
+- Everything a marker is drawn with now goes in its `styles`, which takes a function of the row for any field: the `stroke`, `strokeWidth` and `strokeOpacity` of `rule` and `arrow` (they took a field key or a function beside `styles`), the `fill` and `fillOpacity` of `text` and the `fill` of `cell`, and the insets - `inset`, `insetLeft`, `insetRight`, `insetTop` and `insetBottom` of `rect`, `bar`, `cell` and `rule`, `inset`, `insetStart` and `insetEnd` of `arrow`. The field keys they took stay, now in `styles`: `styles: { stroke: 'color' }`.
+
 ## [1.16.0] - 2026-11-04
 
 ### Fixed

package/dist/configuration/ConfigVars.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { getConfiguration, configToCssVars, cssVarsRule } from './config.svelte';
+
+	/**
+	 * The configuration's `--dct-*` custom properties, as one rule on the document root rather than on each element
+	 * that reads them: an author's own rule - on a wrapping element too - overrides them.
+	 */
+	const rule = $derived(cssVarsRule(configToCssVars(getConfiguration())));
+</script>
+
+<svelte:head>
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html `<style data-dct-config>${rule}</style>`}
+</svelte:head>

package/dist/configuration/ConfigVars.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ConfigVars: import("svelte").Component<Record<string, never>, {}, "">;
+type ConfigVars = ReturnType<typeof ConfigVars>;
+export default ConfigVars;

package/dist/configuration/config.svelte.d.ts

@@ -8,5 +8,10 @@ export declare function setConfiguration(patch: PlotStylesConfigInput): PlotStyl
 export declare function resetConfiguration(): void;
 /** Flatten a config into the `--dct-*` custom properties used by the styles. */
 export declare function configToCssVars(c: PlotStylesConfig): Record<string, string>;
+/**
+ * A CSS-vars record as one rule on the document root, with no specificity (`:where(:root)`): every element inherits
+ * them, and any rule of the author's that sets one - on a wrapping element too - wins over it.
+ */
+export declare function cssVarsRule(vars: Record<string, string>): string;
 /** Serialize a CSS-vars record into a `style` attribute string. */
 export declare function cssVarsStyle(vars: Record<string, string>): string;

package/dist/configuration/config.svelte.js

@@ -61,7 +61,7 @@ export const DEFAULT_CONFIG = {
     palette: Palette.resolve('tableau10'),
     symbols: ['circle', 'square', 'triangle', 'diamond', 'star', 'cross'],
     // A light tint of the palette's first color up to the color itself.
-    continuous: { min: '#eaf0f6', max: '#4e79a7', labelColor: '#111827', opacityRange: [0.2, 1] },
+    continuous: { min: '#eaf0f6', max: '#4e79a7', opacityRange: [0.2, 1] },
     margins: { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' },
     frameClip: { tolerance: 2 },
     // ── Features ────────────────────────────────────────────────────────────────
@@ -161,7 +161,8 @@ export const DEFAULT_CONFIG = {
         rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
         dot: { dotRadius: 5, dotFill: 'currentColor' },
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
-        area: { fill: '#94a3b8', fillOpacity: 0.4 }
+        area: { fill: '#94a3b8', fillOpacity: 0.4 },
+        active: { stroke: '#111827', strokeWidth: 2 }
     },
     facet: {
         indicator: {
@@ -179,6 +180,13 @@ export const DEFAULT_CONFIG = {
             disabledOpacity: 0.3
         }
     },
+    treemap: {
+        stroke: '#ffffff',
+        strokeWidth: 1.5,
+        fontSize: 12,
+        padding: 4,
+        lineHeight: 1.2
+    },
     timeline: {
         axisColor: 'currentColor',
         activeColor: '#4e79a7',
@@ -240,7 +248,7 @@ export const DEFAULT_CONFIG = {
         labelFontSize: 11,
         labelGap: 4
     },
-    // Beside a vertical delta (taken on x), above a horizontal one (on y).
+    band: { fill: '#94a3b8', fillOpacity: 0.25 },
     delta: {
         text: {
             x: { dx: 12, dy: 0, lineAnchor: 'middle', textAnchor: 'start' },
@@ -248,6 +256,7 @@ export const DEFAULT_CONFIG = {
         }
     },
     text: {
+        label: { gap: 4, padding: 4, minFontSize: 8, minLetters: 3, contrast: ['#ffffff', '#111827'] },
         declutter: {
             elbowGap: 10,
             laneStep: 7,
@@ -363,9 +372,6 @@ export function configToCssVars(c) {
         '--dct-divider-style': c.divider.style,
         '--dct-divider-margin': c.divider.margin,
         '--dct-row-gap': c.chrome.rowGap,
-        '--dct-heat-min': c.continuous.min,
-        '--dct-heat-max': c.continuous.max,
-        '--dct-heat-text': c.continuous.labelColor,
         '--dct-axis-color': c.axis.color,
         '--dct-legend-font': c.legend.font,
         '--dct-legend-size': c.legend.size,
@@ -440,6 +446,14 @@ export function configToCssVars(c) {
         '--dct-player-toggle-pad': c.timeline.player.toggle.padding
     };
 }
+/**
+ * A CSS-vars record as one rule on the document root, with no specificity (`:where(:root)`): every element inherits
+ * them, and any rule of the author's that sets one - on a wrapping element too - wins over it.
+ */
+export function cssVarsRule(vars) {
+    // A value never closes the `<style>` it is written in.
+    return `:where(:root){${cssVarsStyle(vars).replace(/</g, '')}}`;
+}
 /** Serialize a CSS-vars record into a `style` attribute string. */
 export function cssVarsStyle(vars) {
     return Object.entries(vars)

package/dist/configuration/themes/dark.js

@@ -9,7 +9,7 @@ export const DARK_THEME = {
     caption: { color: '#94a3b8' },
     legend: { gap: '0.5rem 1.5rem', swatchSize: '1rem' },
     palette: ['#38bdf8', '#f472b6', '#a3e635', '#fbbf24', '#c084fc'],
-    continuous: { min: '#1e293b', max: '#38bdf8', labelColor: '#e5e7eb' },
+    continuous: { min: '#1e293b', max: '#38bdf8' },
     axis: { color: '#94a3b8', fontSize: 13, xTickSize: 6, yTickSize: 6 },
     tooltip: { background: '#e5e7eb', color: '#0f172a' },
     facet: {

package/dist/configuration/themes/editorial.js

@@ -6,7 +6,7 @@ export const EDITORIAL_THEME = {
     subtitle: { color: '#8a6d3b', size: '1.05rem' },
     caption: { color: '#8a6d3b' },
     palette: ['#9b2226', '#606c38', '#6a4c93', '#ee9b00', '#005f73'],
-    continuous: { min: '#fff3e0', max: '#bb3e03', labelColor: '#2b2118' },
+    continuous: { min: '#fff3e0', max: '#bb3e03' },
     axis: { color: '#8a6d3b', fontSize: 13, xTickSize: 6, yTickSize: 6 },
     line: { strokeWidth: 5, dotRadius: 5 },
     timeline: { activeColor: '#bb3e03', axisColor: '#8a6d3b', thickness: 60 },

package/dist/index.d.ts

@@ -15,15 +15,21 @@ export { default as PyramidPlot } from './plots/distribution/pyramid/Plot.svelte
 export { default as ScatterPlot } from './plots/correlation/scatter/Plot.svelte';
 export { default as SlopePlot } from './plots/evolution/slope/Plot.svelte';
 export { default as SparklinePlot } from './plots/evolution/sparkline/Plot.svelte';
+export { default as TreemapPlot } from './plots/part-of-a-whole/treemap/Plot.svelte';
 export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 export { default as PlotComposer } from './layout/composer/PlotComposer.svelte';
 export { default as GridCell } from './layout/grid/GridCell.svelte';
 export { default as Plot } from './layout/plot/Plot.svelte';
 export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
+export { RowContext } from './phases/context/RowContext';
+export type { PlotRowContext, KindRowContext } from './types/layout/context';
+export type { ContextStageOptions } from './types/phases/context/phase';
+export type { BoxRowContext, BoxSummary } from './types/plots/distribution/box/props';
+export type { HistogramRowContext } from './types/plots/distribution/histogram/props';
 export type { PublicPlotContext, PublicFigureContext, PublicHover, PublicPlotHover, PublicLegend, PublicTimeline } from './layout/plot/PublicPlotContext';
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
-export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
+export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, cssVarsRule, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 export { SYSTEM_FONT } from './configuration/fonts';
 export type { ThemeName } from './configuration/themes';
@@ -33,10 +39,12 @@ export { Margins } from './layout/margins/Margins';
 export { resolveOpacityScale } from './utils/OpacityScale';
 export { resolveSymbolScale } from './utils/SymbolScale';
 export { Statistics } from './phases/statistics/Statistics';
-export type { AxisValue, ChannelValue, ChannelName, AxisChannelName, IndependentChannelName, SizeChannelName, ChannelAccessors } from './types/layout/mapping';
+export type { AxisValue, ChannelValue, ChannelName, AxisChannelName, IndependentChannelName, SizeChannelName, ChannelAccessors, GroupingAccessor } from './types/layout/mapping';
 export type { AxisScale, AxisBasedScalesConfig, ChannelScalesConfig } from './types/layout/scales';
 export type { NumberDisplay } from './types/layout/numbers';
-export type { Accessor, Series, SeriesProps, DataProps } from './types/plots/data/common';
+export type { TreemapPlotProps, TreemapRowContext, TreemapTooltipContext } from './types/plots/part-of-a-whole/treemap/props';
+export type { TreemapTile } from './types/transforms/treemap';
+export type { Accessor, Series, SeriesProps, NonAxisDataProps, SingleAxisDataProps, DualAxisDataProps } from './types/plots/data/common';
 export type { BasePlotProps, PlotCoreProps, PlotChromeProps, FigureBoxProps, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig } from './types/plots/props';
 export type { AxisBasedStylesConfig, ConnectorBasedStylesConfig, BulletStylesConfig, GapsAwarePlotStylesConfig, CurveAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';
 export type { GapsConfig } from './types/plots/gaps';
@@ -44,7 +52,7 @@ export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentSty
 export type { Range, Area, Segment } from './types/plots/segments/config';
 export type { SymbolType } from './types/plots/constants';
 export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/styling';
-export type { AxisBasedMarkersConfig, BrushSelection } from './types/markers/common';
+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';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as PyramidPlot } from './plots/distribution/pyramid/Plot.svelte
 export { default as ScatterPlot } from './plots/correlation/scatter/Plot.svelte';
 export { default as SlopePlot } from './plots/evolution/slope/Plot.svelte';
 export { default as SparklinePlot } from './plots/evolution/sparkline/Plot.svelte';
+export { default as TreemapPlot } from './plots/part-of-a-whole/treemap/Plot.svelte';
 export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 // ── Composition ─────────────────────────────────────────────────────────────
 // Separate plots combined into one figure, with chrome of its own.
@@ -27,9 +28,11 @@ export { default as GridCell } from './layout/grid/GridCell.svelte';
 export { default as Plot } from './layout/plot/Plot.svelte';
 export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
+// What a plot knows of each row it draws, which every format reads.
+export { RowContext } from './phases/context/RowContext';
 // Custom geo projections - usable as `scales.projection.type`.
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
-export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
+export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, cssVarsRule, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 export { SYSTEM_FONT } from './configuration/fonts';
 // ── Utils ─────────────────────────────────────────────────────────────────────

package/dist/layout/base/BasePlotLayout.svelte

@@ -317,7 +317,7 @@
 <div
 	class="dct-plot"
 	bind:this={containerEl}
-	style:color={cfg.axis.color}
+	style:color={`var(--dct-axis-color, ${cfg.axis.color})`}
 	style:touch-action={touchAction}
 	onpointermove={hover.active ? onMove : undefined}
 	onpointerleave={hover.active ? ctrl.onLeave : undefined}

package/dist/layout/figure/Figure.svelte

@@ -6,11 +6,8 @@
 	import TimelineRule from '../timeline/TimelineRule.svelte';
 	import { TimelineState } from '../timeline/TimelineState.svelte';
 	import { GridCellsRegistry } from '../grid/GridCellsRegistry.svelte';
-	import {
-		getConfiguration,
-		configToCssVars,
-		cssVarsStyle
-	} from '../../configuration/config.svelte';
+	import ConfigVars from '../../configuration/ConfigVars.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
 	import { HoverState } from '../hover/HoverState.svelte';
 	import { LegendState } from '../legend/LegendState.svelte';
 	import { LegendLabels } from '../legend/LegendLabels';
@@ -165,18 +162,14 @@
 			plot={body}
 		/>
 	{:else}
-		<!-- No chrome means no container to stamp the `--dct-*` vars that facet and timeline chrome read. -->
-		<div
-			style={cssVarsStyle(configToCssVars(cfg))}
-			style:font-family="var(--dct-font, inherit)"
-			style:width="{w}px"
-			style:height="{h}px"
-		>
+		<div style:font-family="var(--dct-font, inherit)" style:width="{w}px" style:height="{h}px">
 			{@render body({ width: w, height: h })}
 		</div>
 	{/if}
 {/snippet}
 
+<ConfigVars />
+
 {#if grid}
 	<GridCell class="dct-grid-cell--figure" {area} {inset}>
 		{#snippet children(cell)}

package/dist/layout/figure/FigureChrome.svelte

@@ -2,11 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { PlotBoxSnippet } from '../../types/layout/figure';
 	import type { PlotChromeEntry, PlotChromeItem } from '../../types/plots/props';
-	import {
-		getConfiguration,
-		configToCssVars,
-		cssVarsStyle
-	} from '../../configuration/config.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
 
 	/**
 	 * A figure's chrome - a plot's or a composer's - drawn by its `Figure`. It owns the fixed footprint (`width`/`height`),
@@ -175,10 +171,6 @@
 
 	let bodyWidth = $state(0);
 	let bodyHeight = $state(0);
-
-	// Stamp every `--dct-*` custom property on the root so the scoped styles below
-	// (and any nested plot/legend/timeline) resolve them from the live config.
-	const themeStyle = $derived(cssVarsStyle(configToCssVars(getConfiguration())));
 </script>
 
 {#snippet cell(block: Cell)}
@@ -217,7 +209,7 @@
 	{/if}
 {/snippet}
 
-<div class="dct-figure-chrome" style={themeStyle} style:width="{width}px" style:height="{height}px">
+<div class="dct-figure-chrome" style:width="{width}px" style:height="{height}px">
 	{#each blocks as block (block.key)}
 		{#if block.type === 'divider'}
 			<hr class="dct-figure-chrome__divider" />