@fundar/data-chart-telling 1.16.0 → 1.18.0

package/dist/markers/hover/HoverMarker.svelte

@@ -1,267 +1,25 @@
 <script lang="ts">
 	import { usePlot } from '../../layout/plot/usePlot';
-	import DotMarker from '../dot/DotMarker.svelte';
-	import TextMarker from '../text/TextMarker.svelte';
-	import RuleMarker from '../rule/RuleMarker.svelte';
-	import BarMarker from '../bar/BarMarker.svelte';
-	import { getConfiguration } from '../../configuration/config.svelte';
-	import { NumberFormat } from '../../utils/NumberFormat';
-	import { BandNudge } from '../utils/BandNudge';
-	import type { BandSlice } from '../../types/layout/hover';
-	import type { HoverMarkerConfig } from '../../types/markers/common';
+	import { PointPixel } from '../utils/PointPixel';
 	import type { HoverDisplayPoint } from '../../types/layout/hover';
 
 	/**
-	 * In-SVG hover highlight, rendered *inside* a `<Plot>`. Because it positions
-	 * itself through the host plot's scales, it places the same coordinate
-	 * correctly in every facet - that is what makes cross-facet sync work without
-	 * any pixel math. Draws optional x/y crosshair rules plus a dot + value label
-	 * for each matched point.
-	 *
-	 * Takes the raw `marker` config plus the couple of things it can't know on
-	 * its own - `activePoint` (the specific matched point actually under the
-	 * cursor, for the crosshair position; see `controller.svelte.ts`'s own doc
-	 * comment) and whether the active hover strategy implies a crosshair on
-	 * each axis by default - the same "component owns its own rendering"
-	 * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
-	 * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
-	 * "no crosshair".
-	 *
-	 * `areaX`/`areaY` are a separate, always-explicit opt-in (no implied
-	 * default) for a thickened area highlight in place of the thin crosshair -
-	 * see `HoverMarkerConfig`'s own doc comment. Rendered via `BarMarker`'s
-	 * `role: 'highlight'`, so it renders nothing on an axis without a band
-	 * scale (e.g. a line/scatter plot's continuous axis).
+	 * Where the hover is, rendered *inside* a `<Plot>`: it reports the pixel position of the point under the pointer,
+	 * through the host plot's scales, so a synced plot's tooltip can sit on it. It draws nothing itself - the
+	 * `hover` marker's `back` and `front` markers are drawn by `GeometryLayout`, as every other marker.
 	 */
 	interface Props {
-		data?: HoverDisplayPoint[];
-		/** Narrowed to just the fields this component reads - `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
-		marker: Pick<
-			HoverMarkerConfig,
-			| 'ruleX'
-			| 'ruleY'
-			| 'areaX'
-			| 'areaY'
-			| 'showLabels'
-			| 'format'
-			| 'rule'
-			| 'area'
-			| 'dot'
-			| 'text'
-			| 'decimals'
-			| 'prefix'
-			| 'suffix'
-			| 'signDisplay'
-		>;
 		activePoint?: HoverDisplayPoint | null;
-		impliesCrosshairX?: boolean;
-		impliesCrosshairY?: boolean;
-		/** Reports `activePoint`'s real pixel position within this facet's own box, or `null` when nothing's matched. */
+		/** Reports `activePoint`'s pixel position within this facet's own box, or `null` when nothing's matched. */
 		onActivePointPixel?: (pos: { x: number; y: number } | null) => void;
 	}
 
-	let {
-		data = [],
-		marker,
-		activePoint = null,
-		impliesCrosshairX = false,
-		impliesCrosshairY = false,
-		onActivePointPixel
-	}: Props = $props();
-
-	const cfg = $derived(getConfiguration());
+	let { activePoint = null, onActivePointPixel }: Props = $props();
 	const plot = usePlot().svelteplot;
 
-	/** Scaled pixel position of `value`, centered within its band for a band scale. */
-	function scaledPixel(
-		scale: { type?: string; fn?: (v: never) => unknown } | undefined,
-		value: unknown
-	): number | null {
-		if (!scale?.fn || value == null) return null;
-		const raw = Number(scale.fn(value as never));
-		if (!Number.isFinite(raw)) return null;
-		if (scale.type === 'band') {
-			const bandwidth = (scale.fn as { bandwidth?: () => number }).bandwidth?.() ?? 0;
-			return raw + bandwidth / 2;
-		}
-		return raw;
-	}
-
-	const nudgeOf = (point: { areaInset?: BandSlice } | null | undefined) =>
-		BandNudge.of(plot.scales, point?.areaInset);
-
-	const activePixel = $derived.by((): { x: number; y: number } | null => {
-		if (!activePoint) return null;
-		const x = scaledPixel(plot.scales.x, activePoint.x);
-		const y = scaledPixel(plot.scales.y, activePoint.y);
-		if (x == null || y == null) return null;
-		const nudge = nudgeOf(activePoint);
-		return { x: x + nudge.dx, y: y + nudge.dy };
-	});
+	const activePixel = $derived(activePoint ? PointPixel.of(plot.scales, activePoint) : null);
 
 	$effect(() => {
 		onActivePointPixel?.(activePixel);
 	});
-
-	const showCrosshairX = $derived(
-		marker.ruleX !== false && (impliesCrosshairX || marker.ruleX === true)
-	);
-	const showCrosshairY = $derived(
-		marker.ruleY !== false && (impliesCrosshairY || marker.ruleY === true)
-	);
-	const ruleX = $derived(showCrosshairX ? (activePoint?.x ?? null) : null);
-	const ruleY = $derived(showCrosshairY ? (activePoint?.y ?? null) : null);
-	// areaX/areaY have no implied default - always off unless explicitly set.
-	const areaX = $derived(marker.areaX === true ? (activePoint?.x ?? null) : null);
-	const areaY = $derived(marker.areaY === true ? (activePoint?.y ?? null) : null);
-	const showLabels = $derived(marker.showLabels ?? true);
-	const format = $derived(marker.format);
-	/** The hovered value as the marker's display fields ask; `undefined` while nothing does, so the plot's own label stays. */
-	const numberOf = $derived(NumberFormat.maybe(NumberFormat.displayOf(marker), cfg));
-	const number = $derived(numberOf ?? NumberFormat.of(undefined, cfg));
-	const labelOf = (d: HoverDisplayPoint): string => {
-		if (format) return format(d, number);
-		const value = Number(d.label);
-		return numberOf && d.label !== undefined && d.label !== '' && Number.isFinite(value)
-			? numberOf(value)
-			: (d.label ?? '');
-	};
-	const ruleStyle = $derived(marker.rule);
-	const areaStyle = $derived({ ...cfg.hover.area, ...marker.area });
-	const dotStyle = $derived(marker.dot);
-	const fontStyle = $derived(marker.text);
-
-	/** Explicit style wins; otherwise fall back to the point's own resolved color. */
-	const resolveColor = (explicit: string | undefined, point: HoverDisplayPoint) =>
-		explicit ?? point.color;
-
-	// Horizontal gap between the dot's edge and an 'outside'-anchored label -
-	// scales with the dot's own resolved radius so the label clears it.
-	const dotRadius = $derived(dotStyle?.dotRadius ?? cfg.hover.dot.dotRadius ?? 5);
-
-	/**
-	 * Resolves `text.textAnchor: 'outside'` into a per-point anchor +
-	 * offset, mirroring the value-label `'outside'` anchor's own left/right
-	 * split (see pyramid/bar's own `ValueAnchor` handling): a positive `x`
-	 * anchors `'start'` and nudges right, a negative `x` anchors `'end'` and
-	 * nudges left - so a diverging mark's label sits on the side of the dot
-	 * away from zero, on whichever side that dot itself landed. Only
-	 * meaningful when the point's `x` is numeric (e.g. pyramid's magnitude
-	 * axis); anything else falls through to the plain `text` style unchanged.
-	 *
-	 * Also overrides `cfg.hover.font`'s default `dy: -18` (meant for a label
-	 * floating *above* the dot) back to vertically centered, and clears the
-	 * dot's own radius horizontally instead of the flat default nudge, so the
-	 * label doesn't collide with the dot it's labeling.
-	 */
-	function resolveFontStyle(point: HoverDisplayPoint) {
-		if (fontStyle?.textAnchor !== 'outside' || typeof point.x !== 'number') {
-			return { ...cfg.hover.font, ...fontStyle, fill: resolveColor(fontStyle?.fill, point) };
-		}
-		const outward = point.x >= 0;
-		const gap = dotRadius + 5;
-		return {
-			...cfg.hover.font,
-			...fontStyle,
-			fill: resolveColor(fontStyle?.fill, point),
-			textAnchor: outward ? ('start' as const) : ('end' as const),
-			lineAnchor: fontStyle?.lineAnchor ?? ('middle' as const),
-			dx: fontStyle?.dx ?? (outward ? gap : -gap),
-			dy: fontStyle?.dy ?? 0
-		};
-	}
 </script>
-
-{#if areaX != null}
-	<BarMarker
-		marker={{
-			type: 'bar',
-			role: 'highlight',
-			isHorizontal: false,
-			data: [],
-			category: areaX,
-			insetLeft: activePoint?.areaInset?.start,
-			insetRight: activePoint?.areaInset?.end,
-			styles: areaStyle
-		}}
-	/>
-{/if}
-
-{#if areaY != null}
-	<BarMarker
-		marker={{
-			type: 'bar',
-			role: 'highlight',
-			isHorizontal: true,
-			data: [],
-			category: areaY,
-			insetTop: activePoint?.areaInset?.start,
-			insetBottom: activePoint?.areaInset?.end,
-			styles: areaStyle
-		}}
-	/>
-{/if}
-
-{#if ruleX != null}
-	<g transform="translate({nudgeOf(activePoint).dx}, {nudgeOf(activePoint).dy})">
-		<RuleMarker
-			marker={{
-				type: 'rule',
-				axis: 'x',
-				value: ruleX,
-				styles: { ...cfg.hover.rule, ...ruleStyle }
-			}}
-		/>
-	</g>
-{/if}
-
-{#if ruleY != null}
-	<g transform="translate({nudgeOf(activePoint).dx}, {nudgeOf(activePoint).dy})">
-		<RuleMarker
-			marker={{
-				type: 'rule',
-				axis: 'y',
-				value: ruleY,
-				styles: { ...cfg.hover.rule, ...ruleStyle }
-			}}
-		/>
-	</g>
-{/if}
-
-{#if data.length > 0}
-	{#each data as point (`${point.series ?? ''}_${point.x}_${point.y}`)}
-		<!-- A grouped bar's point sits in its series' slice of the band (`areaInset`), not at the band's middle. -->
-		<g transform="translate({nudgeOf(point).dx}, {nudgeOf(point).dy})">
-			<DotMarker
-				marker={{
-					type: 'dot',
-					data: [point],
-					x: (d) => d.x,
-					y: (d) => d.y,
-					styles: {
-						...cfg.hover.dot,
-						...dotStyle,
-						dotFill: resolveColor(dotStyle?.dotFill, point),
-						dotStroke: resolveColor(dotStyle?.dotStroke, point)
-					}
-				}}
-			/>
-		</g>
-	{/each}
-	{#if showLabels}
-		{#each data as point (`${point.series ?? ''}_${point.x}_${point.y}`)}
-			<g transform="translate({nudgeOf(point).dx}, {nudgeOf(point).dy})">
-				<TextMarker
-					marker={{
-						type: 'text',
-						data: [point],
-						x: (d: HoverDisplayPoint) => d.x,
-						y: (d: HoverDisplayPoint) => d.y,
-						text: labelOf,
-						styles: resolveFontStyle(point)
-					}}
-				/>
-			</g>
-		{/each}
-	{/if}
-{/if}

package/dist/markers/hover/HoverMarker.svelte.d.ts

@@ -1,35 +1,12 @@
-import type { HoverMarkerConfig } from '../../types/markers/common';
 import type { HoverDisplayPoint } from '../../types/layout/hover';
 /**
- * In-SVG hover highlight, rendered *inside* a `<Plot>`. Because it positions
- * itself through the host plot's scales, it places the same coordinate
- * correctly in every facet - that is what makes cross-facet sync work without
- * any pixel math. Draws optional x/y crosshair rules plus a dot + value label
- * for each matched point.
- *
- * Takes the raw `marker` config plus the couple of things it can't know on
- * its own - `activePoint` (the specific matched point actually under the
- * cursor, for the crosshair position; see `controller.svelte.ts`'s own doc
- * comment) and whether the active hover strategy implies a crosshair on
- * each axis by default - the same "component owns its own rendering"
- * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
- * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
- * "no crosshair".
- *
- * `areaX`/`areaY` are a separate, always-explicit opt-in (no implied
- * default) for a thickened area highlight in place of the thin crosshair -
- * see `HoverMarkerConfig`'s own doc comment. Rendered via `BarMarker`'s
- * `role: 'highlight'`, so it renders nothing on an axis without a band
- * scale (e.g. a line/scatter plot's continuous axis).
+ * Where the hover is, rendered *inside* a `<Plot>`: it reports the pixel position of the point under the pointer,
+ * through the host plot's scales, so a synced plot's tooltip can sit on it. It draws nothing itself - the
+ * `hover` marker's `back` and `front` markers are drawn by `GeometryLayout`, as every other marker.
  */
 interface Props {
-    data?: HoverDisplayPoint[];
-    /** Narrowed to just the fields this component reads - `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
-    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'areaX' | 'areaY' | 'showLabels' | 'format' | 'rule' | 'area' | 'dot' | 'text' | 'decimals' | 'prefix' | 'suffix' | 'signDisplay'>;
     activePoint?: HoverDisplayPoint | null;
-    impliesCrosshairX?: boolean;
-    impliesCrosshairY?: boolean;
-    /** Reports `activePoint`'s real pixel position within this facet's own box, or `null` when nothing's matched. */
+    /** Reports `activePoint`'s pixel position within this facet's own box, or `null` when nothing's matched. */
     onActivePointPixel?: (pos: {
         x: number;
         y: number;

package/dist/markers/hull/HullMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Hull } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +7,7 @@
 
 	/** Renders one `'hull'` marker as `<Hull>` - the convex hull around a cluster of points. */
 	let { marker }: { marker: HullMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,6 +15,7 @@
 </script>
 
 <Hull
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/image/ImageMarker.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Image } from 'svelteplot';
 	import RowOffsetMarks from '../utils/RowOffsetMarks.svelte';
 	import type { ImageMarkerConfig } from '../../types/markers/common';
 
 	/** Renders one `'image'` marker as `<Image>` - an image centered on each row's `x`/`y`. */
 	let { marker }: { marker: ImageMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const data = $derived(marker.data ?? []);
 </script>
@@ -12,6 +14,7 @@
 <RowOffsetMarks {marker} rows={data}>
 	{#snippet mark(rows)}
 		<Image
+			{...events.props}
 			data={rows}
 			x={marker.x}
 			y={marker.y}

package/dist/markers/line/LineMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Line } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -10,6 +11,7 @@
 	 * its color, so each `grouping`'s line takes its group's color.
 	 */
 	let { marker }: { marker: LineMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -17,6 +19,7 @@
 </script>
 
 <Line
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/link/LinkMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Geo } from 'svelteplot';
 	import { geoPath } from 'd3-geo';
 	import { resolveAccessor } from '../../utils/accessors';
@@ -14,6 +15,7 @@
 	 * projected positions.
 	 */
 	let { marker }: { marker: GeoLinkMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	type Point = [number, number];
 	const STEPS = 64;
@@ -181,6 +183,7 @@
 {:else}
 	<!-- No `fill` prop: svelteplot treats any string as scale-worthy unless it's a real CSS color, so a literal `'none'` would run through the color scale instead of staying unfilled. Omitting it leaves svelteplot's own unfilled default in place. -->
 	<Geo
+		{...events.props}
 		class="link"
 		data={arcFeatures}
 		stroke={marker.styles?.stroke ?? 'currentColor'}

package/dist/markers/raster/RasterMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Raster } from 'svelteplot';
 	import type { RasterMarkerConfig } from '../../types/markers/common';
 
@@ -8,11 +9,13 @@
 	 * so it is forwarded as `null` rather than an empty array.
 	 */
 	let { marker }: { marker: RasterMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const data = $derived(marker.data?.length ? marker.data : null);
 </script>
 
 <Raster
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/rect/RectMarker.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
 	import { Rect } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import type { RectMarkerConfig } from '../../types/markers/common';
 
 	/** Renders one `'rect'` marker as a `<Rect>` call - an arbitrary rectangle, unlike `BarMarker`'s category-band-anchored bar. */
@@ -13,6 +15,8 @@
 	const opacityBuckets = $derived(
 		MarkerChannels.buildOpacityBuckets(data, marker.opacity, marker.scales, cfg)
 	);
+
+	const events = MarkerEvents.use(() => marker);
 </script>
 
 {#if opacityBuckets}
@@ -26,16 +30,18 @@
 			y1={marker.y1}
 			y2={marker.y2}
 			interval={marker.interval}
-			insetLeft={marker.insetLeft}
-			insetRight={marker.insetRight}
-			insetTop={marker.insetTop}
-			insetBottom={marker.insetBottom}
-			fill={channelFill ?? marker.styles?.fill}
+			insetLeft={RowStyle.field(marker.styles?.insetLeft)}
+			insetRight={RowStyle.field(marker.styles?.insetRight)}
+			insetTop={RowStyle.field(marker.styles?.insetTop)}
+			insetBottom={RowStyle.field(marker.styles?.insetBottom)}
+			fill={channelFill ?? RowStyle.of(marker.styles?.fill, data)}
 			fillOpacity={bucket.value}
-			stroke={marker.styles?.stroke}
-			strokeWidth={marker.styles?.strokeWidth}
-			strokeOpacity={marker.styles?.strokeOpacity}
+			stroke={RowStyle.of(marker.styles?.stroke, data)}
+			strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+			strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 			strokeDasharray={marker.styles?.strokeDasharray}
+			borderRadius={RowStyle.field(marker.styles?.borderRadius)}
+			{...events.props}
 		/>
 	{/each}
 {:else}
@@ -48,15 +54,17 @@
 		y1={marker.y1}
 		y2={marker.y2}
 		interval={marker.interval}
-		insetLeft={marker.insetLeft}
-		insetRight={marker.insetRight}
-		insetTop={marker.insetTop}
-		insetBottom={marker.insetBottom}
-		fill={channelFill ?? marker.styles?.fill}
-		fillOpacity={marker.styles?.fillOpacity ?? 1}
-		stroke={marker.styles?.stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
+		insetLeft={RowStyle.field(marker.styles?.insetLeft)}
+		insetRight={RowStyle.field(marker.styles?.insetRight)}
+		insetTop={RowStyle.field(marker.styles?.insetTop)}
+		insetBottom={RowStyle.field(marker.styles?.insetBottom)}
+		fill={channelFill ?? RowStyle.of(marker.styles?.fill, data)}
+		fillOpacity={RowStyle.opacity(marker.styles?.fillOpacity) ?? 1}
+		stroke={RowStyle.of(marker.styles?.stroke, data)}
+		strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+		strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 		strokeDasharray={marker.styles?.strokeDasharray}
+		borderRadius={RowStyle.field(marker.styles?.borderRadius)}
+		{...events.props}
 	/>
 {/if}

package/dist/markers/regression/RegressionMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { RegressionX, RegressionY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import type { RegressionMarkerConfig } from '../../types/markers/common';
@@ -18,6 +19,7 @@
 	 * active, never exposed as its own style option.
 	 */
 	let { marker }: { marker: RegressionMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -27,6 +29,7 @@
 </script>
 
 <RegressionMark
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/rule/RuleMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { RuleX, RuleY } from 'svelteplot';
 	import type { AxisValue } from '../../types/layout/mapping';
 	import { RowStroke } from '../utils/RowStroke';
@@ -14,6 +16,7 @@
 	 * straight through to svelteplot's own `RuleX`/`RuleY`.
 	 */
 	const { marker }: { marker: RuleMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const axis = $derived(marker.axis);
 	const data = $derived(marker.data);
@@ -34,21 +37,28 @@
 	 */
 	const position = $derived(data ? value : (d: { v: AxisValue }) => d.v);
 
-	/** Each row's own stroke, over the marker's `styles`. */
+	/** Each row's stroke: the marker's `styles`, which can be functions of the row. */
 	const row = $derived(
-		RowStroke.of(marker, styles, { stroke: 'currentColor', strokeWidth: 1, strokeOpacity: 1 })
+		RowStroke.of(styles, rows, { stroke: 'currentColor', strokeWidth: 1, strokeOpacity: 1 })
 	);
 </script>
 
 <RuleMark
+	{...events.props}
 	data={rows}
 	{...axis === 'x'
 		? { x: position, y1: marker.y1, y2: marker.y2 }
 		: { y: position, x1: marker.x1, x2: marker.x2 }}
-	inset={marker.inset}
+	inset={RowStyle.field(marker.styles?.inset)}
 	{...axis === 'x'
-		? { insetTop: marker.insetTop, insetBottom: marker.insetBottom }
-		: { insetLeft: marker.insetLeft, insetRight: marker.insetRight }}
+		? {
+				insetTop: RowStyle.field(marker.styles?.insetTop),
+				insetBottom: RowStyle.field(marker.styles?.insetBottom)
+			}
+		: {
+				insetLeft: RowStyle.field(marker.styles?.insetLeft),
+				insetRight: RowStyle.field(marker.styles?.insetRight)
+			}}
 	stroke={row.stroke}
 	strokeWidth={row.strokeWidth}
 	strokeOpacity={row.strokeOpacity}

package/dist/markers/text/TextFit.d.ts

@@ -0,0 +1,44 @@
+/** What a label is once it is fitted: the text to write, on as many lines as it takes, and the size to write it at. */
+export type FittedText = {
+    text: string;
+    fontSize: number;
+};
+/** What a label is fitted to. */
+export type TextFitOptions = {
+    text: string;
+    /** What to write instead when `text` does not fit even cut short: a value alone, say. Hidden if that does not fit either. */
+    fallback?: string;
+    /** The room the label has, in px. */
+    width: number;
+    height: number;
+    /** The size the label is written at when it has the room for it. */
+    fontSize: number;
+    /** The smallest size it is written at, shrunk one px at a time down to it. */
+    minFontSize: number;
+    /** The height of a line, as a multiple of the font size. */
+    lineHeight: number;
+    /** How wide `text` writes at `fontSize`, in px. */
+    measure: (text: string, fontSize: number) => number;
+    /** The fewest letters of a text worth writing when it is cut short. */
+    minLetters: number;
+};
+/**
+ * How a label that may be too big for its box is written: a smaller size first; failing that the text cut short
+ * with an ellipsis on its last line, at the smallest size; failing that its `fallback`; failing that nothing.
+ */
+export declare class TextFit {
+    #private;
+    static fit(options: TextFitOptions): FittedText | undefined;
+    /**
+     * `text` on at most `room.lines` lines of `room.width`: whole words per line, a new line after each newline. With `cut`,
+     * what does not fit is cut short - the rest of the text on the last line, or a word wider than any line - with an
+     * ellipsis; without it, a text that does not fit comes to `undefined`, and so does one whose first line shows
+     * under `minLetters` letters.
+     */
+    static wrap(text: string, room: {
+        width: number;
+        lines: number;
+    }, cut: boolean, minLetters: number, measure: (text: string) => number): string[] | undefined;
+    /** `text` as it fits `width`: as it is, or cut short with an ellipsis. */
+    static cut(text: string, width: number, measure: (text: string) => number): string;
+}