@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/configuration/themes/index.js

@@ -3,14 +3,15 @@ import { EDITORIAL_THEME } from './editorial';
 import { DARK_THEME } from './dark';
 import { COMPACT_THEME } from './compact';
 /**
- * Ready-made theme presets — partial configs deep-merged over
- * `DEFAULT_CONFIG` by `setConfiguration`. `DEFAULT_CONFIG` itself stays an
- * opinion-free no-op (`font: 'inherit'`, `color: 'currentColor'`, …); these
- * are the actual visual identities consumers can opt into.
+ * Ready-made theme presets - partial configs deep-merged over
+ * `DEFAULT_CONFIG` by `setConfiguration`. `DEFAULT_CONFIG` itself stays
+ * opinion-free (`font: 'inherit'`, `color: 'currentColor'`, …), following the
+ * host project's styles; these are the visual identities consumers can opt
+ * into, `Default` being the plain one with a system sans-serif font.
  */
 export const THEMES = {
     Default: DEFAULT_THEME,
     Editorial: EDITORIAL_THEME,
     Dark: DARK_THEME,
-    Compact: COMPACT_THEME,
+    Compact: COMPACT_THEME
 };

package/dist/index.d.ts

@@ -1,64 +1,51 @@
+export { default as AreaPlot } from './plots/area/Plot.svelte';
 export { default as BarPlot } from './plots/bar/Plot.svelte';
+export { default as BoxPlot } from './plots/box/Plot.svelte';
+export { default as HistogramPlot } from './plots/histogram/Plot.svelte';
 export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
 export { default as LinePlot } from './plots/line/Plot.svelte';
 export { default as PyramidPlot } from './plots/pyramid/Plot.svelte';
 export { default as ScatterPlot } from './plots/scatter/Plot.svelte';
 export { default as GeoPlot } from './plots/geo/Plot.svelte';
-export { default as BaseChart } from './charts/BaseChart.svelte';
-export { default as BarChart } from './charts/bar/Chart.svelte';
-export { default as HeatmapChart } from './charts/heatmap/Chart.svelte';
-export { default as LineChart } from './charts/line/Chart.svelte';
-export { default as PyramidChart } from './charts/pyramid/Chart.svelte';
-export { default as ScatterChart } from './charts/scatter/Chart.svelte';
-export { default as ChartContainer } from './charts/container/ChartContainer.svelte';
-export { default as BasePlotLayout } from './layout/plot/BasePlotLayout.svelte';
-export { default as CoordinatesLayout } from './layout/coordinates/CoordinatesLayout.svelte';
-export { default as TileLayer } from './layout/styles/TileLayer.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 type { PublicPlotContext, PublicFigureContext, PublicHover, PublicPlotHover, PublicLegend, PublicTimeline } from './layout/plot/PublicPlotContext';
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
-export { default as Timeline } from './layout/timeline/Timeline.svelte';
-export { default as TimelineLayout } from './layout/timeline/TimelineLayout.svelte';
-export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
-export { default as FacetIndicator } from './layout/facet/FacetIndicator.svelte';
-export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
-export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
-export { getLegendInteraction, provideLegendInteraction, createLegendInteraction } from './layout/legend/interaction.svelte';
-export { default as BarMarker } from './markers/BarMarker.svelte';
-export { default as CellMarker } from './markers/CellMarker.svelte';
-export { default as DeltaMarker } from './markers/DeltaMarker.svelte';
-export { default as DotMarker } from './markers/DotMarker.svelte';
-export { default as HoverMarker } from './markers/HoverMarker.svelte';
-export { default as LineMarker } from './markers/LineMarker.svelte';
-export { default as PeakMarker } from './markers/PeakMarker.svelte';
-export { default as RuleMarker } from './markers/RuleMarker.svelte';
-export { default as TextMarker } from './markers/TextMarker.svelte';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
+export { SYSTEM_FONT } from './configuration/fonts';
 export type { ThemeName } from './configuration/themes';
 export { groupBy, buildSeries } from './utils/grouping';
-export { makeColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
-export { estimateCategoricalAxisMargin } from './plots/utils/categoricalAxisMargin';
-export { estimateLineValueLabelMargin } from './plots/line/valueLabelMargin';
-export type { AxisValue, AxisScale, AxisBasedScalesConfig } from './types/layout/scales';
+export { makeColorScale, resolveColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
+export { Margins } from './layout/margins/Margins';
+export { resolveOpacityScale } from './utils/opacity';
+export { resolveSymbolScale } from './utils/symbol';
+export { Statistics } from './phases/statistics/Statistics';
+export type { AxisValue, ChannelValue, ChannelName, AxisChannelName, IndependentChannelName, SizeChannelName, ChannelAccessors } from './types/layout/mapping';
+export type { AxisScale, AxisBasedScalesConfig, ChannelScalesConfig } from './types/layout/scales';
 export type { Accessor, Series, SeriesProps, DataProps } from './types/plots/data/common';
-export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig, PointMatchingStrategy } from './types/plots/props';
-export type { ValuesStyle, ColorsStyle, FrameStyle, FrameProp, BasePlotStylesConfig, AxisBasedStylesConfig, GapsAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';
-export type { GapsConfig, GapZonesConfig, GapZoneConfig, OpenGapZoneConfig } from './types/plots/gaps';
+export type { BasePlotProps, PlotCoreProps, PlotChromeProps, FigureBoxProps, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig } from './types/plots/props';
+export type { AxisBasedStylesConfig, GapsAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';
+export type { GapsConfig } from './types/plots/gaps';
 export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentStyle, ScatterSegmentStyle } from './types/plots/segments/common';
 export type { Range, Area, Segment } from './types/plots/segments/config';
-export type { ValueAnchor, SymbolType, LineStyle, LineCap, LineJoin, FontWeight, FontStyleKeyword, TextAnchor, LineAnchor } from './types/plots/constants';
+export type { SymbolType } from './types/plots/constants';
 export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/styling';
-export type { AxisBasedMarkersConfig } from './types/markers/common';
-export type { LineMarkersConfig, DeltaMarkerConfig, DeltaConfig, DeltaTarget } from './types/markers/line';
-export type { MarkerProps } from './types/markers/props';
+export type { AxisBasedMarkersConfig, BrushSelection, MarkerCurveName } from './types/markers/common';
+export type { StatisticConfig } from './types/layout/statistics';
+export type * from './types/transforms';
 export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/plots/data/geo';
-export type { ScatterDataProps } from './types/plots/data/scatter';
-export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, GeoZoomConfig, CoordinatesConfig } from './types/layout/coordinates';
-export type { GeoCameraTarget, GeoCameraConfig, GeoCameraTransition } from './types/plots/camera';
-export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig } from './types/markers/geo';
-export type { ChartPlotContext, ChartPlotSnippet } from './types/charts/common';
-export type { TimeValue, Orientation, TimelineConfig } from './types/layout/timeline';
-export type { Responsive, FacetColumns, FacetMode, FacetNavLayout, FacetConfig, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet } from './types/layout/facet';
-export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendDisabledAction, LegendItemsLayout, LegendInteractiveStyle, DiscreteInteractiveConfig, ContinuousInteractiveConfig, LegendNavDirection, LegendNavContext, LegendNavSnippet, LegendInteractionStore, LegendPlotContext } from './types/layout/legend';
-export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipAnchorX, TooltipAnchorY } from './types/layout/tooltip';
-export type { ChartConfig, ChartConfigInput, TextStyle } from './types/configuration/styling';
-export type { ChartProps, GapsAwareChartProps } from './types/charts/props';
+export type { GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, CoordinatesConfig } from './types/layout/coordinates';
+export type { GeoCameraConfig } from './types/plots/camera';
+export type { GeoMarkersConfig } from './types/markers/geo';
+export type { SharedAxisValues } from './types/phases';
+export type { TimelineConfig, TimelineType, TimelineCallbacks, PlayerConfig, PlayerControl } from './types/layout/timeline';
+export type { ComposerLayout, ComposerTags, ComposerTimelineConfig, ComposerHoverConfig } from './types/layout/composer';
+export type { GridPlacement, GridInset, GridCellContext, GridCellSnippet } from './types/layout/grid';
+export type { Responsive, FacetConfig, FacetCellContext, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet } from './types/layout/facet';
+export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendNavDirection, LegendNavContext, LegendNavSnippet, LegendEntry, LegendMark, LegendRange } from './types/layout/legend';
+export type { HoverStrategy, HoverPoint, HoverDisplayPoint } from './types/layout/hover';
+export type { PlotStylesConfig, PlotStylesConfigInput, DividerLineStyle, TextStyle } from './types/configuration/styling';

package/dist/index.js

@@ -1,47 +1,32 @@
 // ── Plots ───────────────────────────────────────────────────────────────────
-// Low-level graphics: one specific mark family each, drawn into a given box.
+// One mark family each, with optional chrome (title, legend, caption),
+// timeline and facets around it.
+export { default as AreaPlot } from './plots/area/Plot.svelte';
 export { default as BarPlot } from './plots/bar/Plot.svelte';
+export { default as BoxPlot } from './plots/box/Plot.svelte';
+export { default as HistogramPlot } from './plots/histogram/Plot.svelte';
 export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
 export { default as LinePlot } from './plots/line/Plot.svelte';
 export { default as PyramidPlot } from './plots/pyramid/Plot.svelte';
 export { default as ScatterPlot } from './plots/scatter/Plot.svelte';
 export { default as GeoPlot } from './plots/geo/Plot.svelte';
-// ── Charts ──────────────────────────────────────────────────────────────────
-// High-level, plot-agnostic chrome plus ready-made chart kinds.
-export { default as BaseChart } from './charts/BaseChart.svelte';
-export { default as BarChart } from './charts/bar/Chart.svelte';
-export { default as HeatmapChart } from './charts/heatmap/Chart.svelte';
-export { default as LineChart } from './charts/line/Chart.svelte';
-export { default as PyramidChart } from './charts/pyramid/Chart.svelte';
-export { default as ScatterChart } from './charts/scatter/Chart.svelte';
-// Interchangeable layout primitives (compose your own chart kinds with these).
-export { default as ChartContainer } from './charts/container/ChartContainer.svelte';
-export { default as BasePlotLayout } from './layout/plot/BasePlotLayout.svelte';
-export { default as CoordinatesLayout } from './layout/coordinates/CoordinatesLayout.svelte';
-export { default as TileLayer } from './layout/styles/TileLayer.svelte';
-// Custom geo projections — usable as `scales.projection.type`.
+// ── Composition ─────────────────────────────────────────────────────────────
+// Separate plots combined into one figure, with chrome of its own.
+export { default as PlotComposer } from './layout/composer/PlotComposer.svelte';
+export { default as GridCell } from './layout/grid/GridCell.svelte';
+// The generic plot, to build your own plot kind: wrap it with your kind's core and defaults.
+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';
+// Custom geo projections - usable as `scales.projection.type`.
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
-export { default as Timeline } from './layout/timeline/Timeline.svelte';
-export { default as TimelineLayout } from './layout/timeline/TimelineLayout.svelte';
-export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
-export { default as FacetIndicator } from './layout/facet/FacetIndicator.svelte';
-export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
-export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
-export { getLegendInteraction, provideLegendInteraction, createLegendInteraction } from './layout/legend/interaction.svelte';
-// Markers
-export { default as BarMarker } from './markers/BarMarker.svelte';
-export { default as CellMarker } from './markers/CellMarker.svelte';
-export { default as DeltaMarker } from './markers/DeltaMarker.svelte';
-export { default as DotMarker } from './markers/DotMarker.svelte';
-export { default as HoverMarker } from './markers/HoverMarker.svelte';
-export { default as LineMarker } from './markers/LineMarker.svelte';
-export { default as PeakMarker } from './markers/PeakMarker.svelte';
-export { default as RuleMarker } from './markers/RuleMarker.svelte';
-export { default as TextMarker } from './markers/TextMarker.svelte';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
+export { SYSTEM_FONT } from './configuration/fonts';
 // ── Utils ─────────────────────────────────────────────────────────────────────
 export { groupBy, buildSeries } from './utils/grouping';
-export { makeColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
-export { estimateCategoricalAxisMargin } from './plots/utils/categoricalAxisMargin';
-export { estimateLineValueLabelMargin } from './plots/line/valueLabelMargin';
+export { makeColorScale, resolveColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
+export { Margins } from './layout/margins/Margins';
+export { resolveOpacityScale } from './utils/opacity';
+export { resolveSymbolScale } from './utils/symbol';
+export { Statistics } from './phases/statistics/Statistics';

package/dist/layout/base/BasePlotLayout.svelte

@@ -0,0 +1,325 @@
+<script module lang="ts">
+	import type { Margins as MarginsType } from '../margins/Margins';
+	import type { EdgeBox } from '../../types/layout/box';
+	import type { StylesLayoutConfig } from '../../types/layout/styles';
+	import type { HoverPosition } from '../../types/phases';
+	import type { HoverConfig as PlotHoverConfig } from '../../types/plots/props';
+
+	/**
+	 * What `BasePlotLayout` draws from: the end of a plot's pipeline. An axis
+	 * kind's state is one as is; GeoPlot builds its own.
+	 */
+	export type PlotLayoutState = {
+		/** What the pointer can match, and how the hover reads. */
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		hover?: PlotHoverConfig<any>;
+		/** Where each row sits, for hover matching and the plot's scales. */
+		hoverPosition?: HoverPosition;
+		/** The rows the plot draws and hovers over. */
+		hoverRows?: unknown[];
+		/** The plot's x/y/r/length scales, and the scales a marker without its own inherits. */
+		scales?: object;
+		/** What the plot's position channels are and which way it runs, for what draws inside it. */
+		axes?: PlotAxes;
+		/** Every marker the pipeline resolved. */
+		markers?: object[];
+		/** All resolved series - axis kinds only. */
+		resolvedSeries?: object[];
+		/** Each series' color, by name - axis kinds only. */
+		colorForSeries?: (name: string) => string;
+		/** Per-series marker groups - axis kinds only. */
+		scopedGroups?: object[];
+		/** The plot's `styles`: its frame and, on a map, its tile layer. */
+		styles?: StylesLayoutConfig;
+		/** What an `'auto'` margin side reads as. Defaults to {@link Margins.AXIS_ESTIMATE}. */
+		marginEstimate?: MarginsType;
+		/** The plot's value labels, whose `reach` is the room the margins start from. */
+		valueLabels?: { reach: EdgeBox[] };
+	};
+</script>
+
+<script
+	lang="ts"
+	generics="TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData"
+>
+	import { Margins } from '../margins/Margins';
+	import { PlotMargins } from '../margins/PlotMargins.svelte';
+	import { LegendState } from '../legend/LegendState.svelte';
+	import { onDestroy, untrack } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import type { ComponentProps, Snippet } from 'svelte';
+	import { Plot, Pointer, setPlotDefaults } from 'svelteplot';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { SveltePlotScale } from '../scales/SveltePlotScale';
+	import ScalesLayout from '../scales/ScalesLayout.svelte';
+	import GeometryLayout from '../geometry/GeometryLayout.svelte';
+	import CoordinatesLayout from '../coordinates/CoordinatesLayout.svelte';
+	import StylesLayout from '../styles/StylesLayout.svelte';
+	import Tooltip from '../tooltip/Tooltip.svelte';
+	import { PlotHover } from '../hover/PlotHover.svelte';
+	import { PlotContext } from '../plot/PlotContext';
+	import { TimelineState } from '../timeline/TimelineState.svelte';
+	import type { PlotAxes } from '../../phases/data/PlotAxes';
+	import type { AxisBasedScalesConfig } from '../../types/layout/scales';
+	import type { AxisValue } from '../../types/layout/mapping';
+	import type { CoordinatesConfig, GeoScalesConfig } from '../../types/layout/coordinates';
+	import type { ScopedMarkerGroup } from '../../types/layout/geometry';
+	import type { HoverPoint } from '../../types/layout/hover';
+	import type { MarginConfig, HoverConfig } from '../../types/plots/props';
+	import type { MarkerConfig } from '../../types/markers/all';
+	import type { Series } from '../../types/plots/data/common';
+	import type { GeoFeature } from '../../types/plots/data/geo';
+
+	type SveltePlotProps = ComponentProps<typeof Plot>;
+
+	/**
+	 * Shared frame around every plot kind's svelteplot markup: the svelteplot
+	 * `<Plot>` with its styles, axes and markers, the pointer and hover/tooltip
+	 * wiring, and the floating tooltip. `children` draws on top of the markers.
+	 */
+	let {
+		width,
+		height,
+		state,
+		coordinates = undefined,
+		margins = $bindable(),
+		markers = undefined,
+		geoAllFeatures = undefined,
+		containerEl = $bindable(undefined),
+		children
+	}: {
+		width: number;
+		height: number;
+		/**
+		 * The end of the plot's pipeline: its hover config, the rows it draws and
+		 * hovers over (fed to svelteplot's `<Pointer>` and to `CoordinatesLayout`
+		 * for a `domain: 'data'` auto-fit) and where each sits, its scales, its
+		 * markers, and an axis kind's series and marker groups.
+		 */
+		state: PlotLayoutState;
+		/** This plot kind's coordinate system config - `GeoPlot` only (a projection + pan/zoom). */
+		coordinates?: CoordinatesConfig;
+		/**
+		 * The author's margins, over the theme's. Bindable: it receives the
+		 * margins the plot's labels settled on - see {@link PlotMargins}.
+		 */
+		margins?: MarginConfig;
+		/** Markers drawn after the state's own. */
+		markers?: MarkerConfig[];
+		/** `GeoPlot`'s own untouched, tagged features, forwarded to `GeometryLayout` - `inset` marker only. */
+		geoAllFeatures?: (GeoFeature<Record<string, unknown>> & { __id: string })[];
+		/** The wrapper div's own element - bind for a nested layout that needs it for its own gesture handling (e.g. `CoordinatesLayout`'s zoom/rotate). */
+		containerEl?: HTMLDivElement;
+		/**
+		 * Draws on top of every marker, given the matched and active hover points,
+		 * the numeric margins and the hover-match callbacks.
+		 */
+		children?: Snippet<
+			[
+				{
+					matchedPoints: HoverPoint<TData>[];
+					activePoint: HoverPoint<TData> | null;
+					impliesCrosshairX: boolean;
+					impliesCrosshairY: boolean;
+					numericMargins: { top: number; right: number; bottom: number; left: number };
+					setHoverMatch: (rows: TData[]) => void;
+					clearHoverMatch: () => void;
+				}
+			]
+		>;
+	} = $props();
+
+	const data = $derived((state.hoverRows ?? []) as TData[]);
+	const getX = $derived(state.hoverPosition!.x as (d: TData) => AxisValue);
+	const getY = $derived(state.hoverPosition!.y as (d: TData) => AxisValue);
+	const hover = $derived(state.hover as HoverConfig<TData>);
+	const scales = $derived(
+		state.scales as (AxisBasedScalesConfig<TData> & GeoScalesConfig) | undefined
+	);
+	const seriesData = $derived(state.resolvedSeries as Series<TSeries>[] | undefined);
+	const scopedGroups = $derived(state.scopedGroups as ScopedMarkerGroup<TSeries>[] | undefined);
+
+	// What this plot draws, on its figure's legend - its series, their colors and marks.
+	const legend = LegendState.current();
+	const legendSource = Symbol('plot');
+	$effect(() => {
+		const entries = LegendState.entriesOf(state as never);
+		untrack(() => legend?.register(legendSource, entries));
+	});
+	onDestroy(() => legend?.unregister(legendSource));
+
+	// Created once, not `$derived`: this plot's hover.
+	const ctrl = new PlotHover<TData>({
+		hover: () => hover,
+		getX: () => getX,
+		getY: () => getY,
+		width: () => width,
+		height: () => height
+	});
+
+	const cfg = $derived(getConfiguration());
+	setPlotDefaults({
+		numberFormat: { useGrouping: 'min2', compactDisplay: untrack(() => cfg.axis.compactDisplay) }
+	});
+
+	// Created once: this plot's margins, grown to fit the labels its markers report.
+	const plotMargins = new PlotMargins({
+		theme: () => cfg.margins,
+		author: () => margins,
+		estimate: () => state.marginEstimate ?? Margins.AXIS_ESTIMATE,
+		reserve: () => state.valueLabels?.reach ?? [],
+		size: () => ({ width, height }),
+		resetKey: () => state.resolvedSeries,
+		scales: () => scales,
+		tickFontSize: () => cfg.axis.fontSize,
+		settle: (settled) => (margins = settled)
+	});
+	const numericMargins = $derived(plotMargins.numeric);
+
+	// What anything drawn inside this plot reads through `usePlot()`.
+	PlotContext.provide<TData>({
+		hover: ctrl,
+		legend,
+		timeline: TimelineState.current(),
+		margins: plotMargins,
+		scales: () => scales,
+		axes: () => state.axes,
+		data: () => data,
+		size: () => ({ width, height })
+	});
+
+	/** The domains `ScalesLayout` widens an axis to, for an edge tick's `'extend'` (see `EdgeTicks`). */
+	const edgeDomains = new SvelteMap<'x' | 'y', [number, number]>();
+
+	// `SveltePlotScale.build` already left only svelteplot's own scale options.
+	const resolvedX = $derived.by(() => {
+		const built = SveltePlotScale.build(scales?.x, data, getX);
+		const domain = edgeDomains.get('x');
+		return (domain ? { ...built, domain, nice: false } : built) as SveltePlotProps['x'];
+	});
+	const resolvedY = $derived.by(() => {
+		const built = SveltePlotScale.build(scales?.y, data, getY);
+		const domain = edgeDomains.get('y');
+		return (domain ? { ...built, domain, nice: false } : built) as SveltePlotProps['y'];
+	});
+	/** Threaded straight into svelteplot's own `r` scale option - see `RScaleConfig`'s own doc comment for why this isn't independently resolved like `color`. */
+	const resolvedR = $derived(scales?.r as SveltePlotProps['r']);
+	/** Threaded straight into svelteplot's own `length` scale option - see `LengthScaleConfig`'s own doc comment. `GeoPlot`-only in practice (see `scales`'s own doc comment), same mechanism as `r`. */
+	const resolvedLength = $derived(scales?.length as SveltePlotProps['length']);
+
+	/** Only ever meaningful for `GeoPlot`. `none` while any interactive gesture (`zoom`/`pan`/`rotate`) is on. */
+	const touchAction = $derived(
+		(coordinates?.zoom !== false && coordinates?.zoom != null) ||
+			coordinates?.pan ||
+			coordinates?.rotate
+			? 'none'
+			: undefined
+	);
+
+	// ── Hover / tooltip ───────────────────────────────────────────────────────
+
+	/** Declared intent, defaulted - see {@link HoverConfig.pointMatching}. */
+	const pointMatchingStrategy = $derived(hover.pointMatching ?? 'nearest');
+
+	/** The axes svelteplot's `<Pointer>` matches along, per hover strategy. */
+	const pointerMatchX = $derived(ctrl.state.strategy === 'y' ? undefined : getX);
+	const pointerMatchY = $derived(ctrl.state.strategy === 'x' ? undefined : getY);
+
+	function onMove(e: PointerEvent) {
+		if (hover.exclude?.(e)) {
+			ctrl.onLeave();
+			return;
+		}
+		ctrl.onMove(e);
+	}
+
+	const resolvedMarkers = $derived([
+		...((state.markers ?? []) as MarkerConfig[]),
+		...(markers ?? [])
+	]);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="dct-plot"
+	bind:this={containerEl}
+	style:color={cfg.axis.color}
+	style:touch-action={touchAction}
+	onpointermove={hover.active ? onMove : undefined}
+	onpointerleave={hover.active ? ctrl.onLeave : undefined}
+>
+	<CoordinatesLayout
+		{width}
+		{height}
+		margin={plotMargins.config}
+		x={resolvedX}
+		y={resolvedY}
+		r={resolvedR}
+		length={resolvedLength}
+		{coordinates}
+		locale={cfg.axis.locale}
+		{data}
+		{containerEl}
+		remountKey={plotMargins.remountKey}
+	>
+		<StylesLayout styles={state.styles} {width} {height} {numericMargins} />
+		<!-- Axes for every kind but GeoPlot. -->
+		{#if scales !== undefined && coordinates === undefined}
+			<ScalesLayout {data} {getX} {getY} {width} {height} {numericMargins} {scales} {edgeDomains} />
+		{/if}
+		<GeometryLayout
+			markers={resolvedMarkers}
+			seriesData={seriesData ?? []}
+			scopedGroups={scopedGroups ?? []}
+			channelScales={scales}
+			{ctrl}
+			{width}
+			{height}
+			{numericMargins}
+			{data}
+			{geoAllFeatures}
+			tooltipAnchorX={hover.tooltip?.anchorX}
+			tooltipAnchorY={hover.tooltip?.anchorY}
+		/>
+		{@render children?.({
+			matchedPoints: ctrl.points,
+			activePoint: ctrl.activePoint,
+			impliesCrosshairX: ctrl.impliesCrosshairX,
+			impliesCrosshairY: ctrl.impliesCrosshairY,
+			numericMargins,
+			setHoverMatch: ctrl.onPointer,
+			clearHoverMatch: ctrl.onLeave
+		})}
+
+		{#if hover.active && pointMatchingStrategy === 'nearest'}
+			<Pointer
+				{data}
+				x={pointerMatchX}
+				y={pointerMatchY}
+				maxDistance={400}
+				onupdate={ctrl.onPointer}
+			/>
+		{/if}
+	</CoordinatesLayout>
+
+	{#if hover.tooltip}
+		<Tooltip
+			visible={ctrl.showTooltip && ctrl.tooltipPosition != null}
+			x={ctrl.tooltipPosition?.x ?? 0}
+			y={ctrl.tooltipPosition?.y ?? 0}
+			rows={ctrl.matchedRows.map((p) => p.row)}
+			format={hover.tooltip.format}
+			sort={hover.tooltip.sort}
+			content={hover.tooltip.content}
+			anchorX={hover.tooltip.anchorX}
+			anchorY={hover.tooltip.anchorY}
+		/>
+	{/if}
+</div>
+
+<style>
+	.dct-plot {
+		position: relative;
+		line-height: 0;
+	}
+</style>

package/dist/layout/base/BasePlotLayout.svelte.d.ts

@@ -0,0 +1,111 @@
+import type { Margins as MarginsType } from '../margins/Margins';
+import type { EdgeBox } from '../../types/layout/box';
+import type { StylesLayoutConfig } from '../../types/layout/styles';
+import type { HoverPosition } from '../../types/phases';
+import type { HoverConfig as PlotHoverConfig } from '../../types/plots/props';
+/**
+ * What `BasePlotLayout` draws from: the end of a plot's pipeline. An axis
+ * kind's state is one as is; GeoPlot builds its own.
+ */
+export type PlotLayoutState = {
+    /** What the pointer can match, and how the hover reads. */
+    hover?: PlotHoverConfig<any>;
+    /** Where each row sits, for hover matching and the plot's scales. */
+    hoverPosition?: HoverPosition;
+    /** The rows the plot draws and hovers over. */
+    hoverRows?: unknown[];
+    /** The plot's x/y/r/length scales, and the scales a marker without its own inherits. */
+    scales?: object;
+    /** What the plot's position channels are and which way it runs, for what draws inside it. */
+    axes?: PlotAxes;
+    /** Every marker the pipeline resolved. */
+    markers?: object[];
+    /** All resolved series - axis kinds only. */
+    resolvedSeries?: object[];
+    /** Each series' color, by name - axis kinds only. */
+    colorForSeries?: (name: string) => string;
+    /** Per-series marker groups - axis kinds only. */
+    scopedGroups?: object[];
+    /** The plot's `styles`: its frame and, on a map, its tile layer. */
+    styles?: StylesLayoutConfig;
+    /** What an `'auto'` margin side reads as. Defaults to {@link Margins.AXIS_ESTIMATE}. */
+    marginEstimate?: MarginsType;
+    /** The plot's value labels, whose `reach` is the room the margins start from. */
+    valueLabels?: {
+        reach: EdgeBox[];
+    };
+};
+import type { Snippet } from 'svelte';
+import type { PlotAxes } from '../../phases/data/PlotAxes';
+import type { CoordinatesConfig } from '../../types/layout/coordinates';
+import type { HoverPoint } from '../../types/layout/hover';
+import type { MarginConfig } from '../../types/plots/props';
+import type { MarkerConfig } from '../../types/markers/all';
+import type { GeoFeature } from '../../types/plots/data/geo';
+declare function $$render<TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData>(): {
+    props: {
+        width: number;
+        height: number;
+        /**
+         * The end of the plot's pipeline: its hover config, the rows it draws and
+         * hovers over (fed to svelteplot's `<Pointer>` and to `CoordinatesLayout`
+         * for a `domain: 'data'` auto-fit) and where each sits, its scales, its
+         * markers, and an axis kind's series and marker groups.
+         */
+        state: PlotLayoutState;
+        /** This plot kind's coordinate system config - `GeoPlot` only (a projection + pan/zoom). */
+        coordinates?: CoordinatesConfig;
+        /**
+         * The author's margins, over the theme's. Bindable: it receives the
+         * margins the plot's labels settled on - see {@link PlotMargins}.
+         */
+        margins?: MarginConfig;
+        /** Markers drawn after the state's own. */
+        markers?: MarkerConfig[];
+        /** `GeoPlot`'s own untouched, tagged features, forwarded to `GeometryLayout` - `inset` marker only. */
+        geoAllFeatures?: (GeoFeature<Record<string, unknown>> & {
+            __id: string;
+        })[];
+        /** The wrapper div's own element - bind for a nested layout that needs it for its own gesture handling (e.g. `CoordinatesLayout`'s zoom/rotate). */
+        containerEl?: HTMLDivElement;
+        /**
+         * Draws on top of every marker, given the matched and active hover points,
+         * the numeric margins and the hover-match callbacks.
+         */
+        children?: Snippet<[{
+            matchedPoints: HoverPoint<TData>[];
+            activePoint: HoverPoint<TData> | null;
+            impliesCrosshairX: boolean;
+            impliesCrosshairY: boolean;
+            numericMargins: {
+                top: number;
+                right: number;
+                bottom: number;
+                left: number;
+            };
+            setHoverMatch: (rows: TData[]) => void;
+            clearHoverMatch: () => void;
+        }]>;
+    };
+    exports: {};
+    bindings: "margins" | "containerEl";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData> {
+    props(): ReturnType<typeof $$render<TData, TSeries>>['props'];
+    events(): ReturnType<typeof $$render<TData, TSeries>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TSeries>>['slots'];
+    bindings(): "margins" | "containerEl";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TSeries>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TSeries>['props']>, ReturnType<__sveltets_Render<TData, TSeries>['events']>, ReturnType<__sveltets_Render<TData, TSeries>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TSeries>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TSeries>['exports']>;
+    <TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TSeries>['props']> & {}): ReturnType<__sveltets_Render<TData, TSeries>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const BasePlotLayout: $$IsomorphicComponent;
+type BasePlotLayout<TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData> = InstanceType<typeof BasePlotLayout<TData, TSeries>>;
+export default BasePlotLayout;