@fundar/data-chart-telling 0.0.64 → 1.1.0

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

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

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

@@ -0,0 +1,75 @@
+import { LegendState } from '../../../layout/legend/LegendState.svelte';
+import { resolveFeatureStyle } from '../../utils/geoSegments';
+import { DisabledStyle } from '../../../layout/legend/DisabledStyle';
+/**
+ * `graticule`/`sphere`/`contour` opt into drawing underneath the base map's
+ * own fill/stroke instead of on top of it - see each config's own `behind`
+ * doc comment.
+ */
+function isBehindMarker(marker) {
+    return ((marker.type === 'graticule' || marker.type === 'sphere' || marker.type === 'contour') &&
+        marker.behind === true);
+}
+/**
+ * GeoPlot's "markers" phase: per-feature style resolution/grouping, the base
+ * `'geo'` marker(s), and the full draw order - any authored marker with
+ * `behind: true`, then the base map, then the rest of the authored markers,
+ * with any `hover` marker moved last. The base marker(s) match the pointer
+ * themselves, over the features inside the legend's range.
+ */
+export function buildMarkers(state, ctx) {
+    const { features, segments, authoredMarkers, color, grouping, resolveColor, resolveOpacity } = state;
+    const { range, fill, fillOpacity, stroke, strokeWidth, cfg, onFeatureClick } = ctx;
+    const OPACITY_STEPS = 32;
+    function rangeFilteredStyle(base, f) {
+        if (range == null || !color)
+            return base;
+        if (LegendState.inRange(color(f), range))
+            return base;
+        return { ...base, ...DisabledStyle.fill(range.disabledStyle) };
+    }
+    function getFeatureStyle(f) {
+        return rangeFilteredStyle(resolveFeatureStyle(segments, f.__id, grouping?.(f)), f);
+    }
+    const groups = new Map();
+    for (const f of features) {
+        const style = getFeatureStyle(f);
+        const rawOpacity = resolveOpacity?.(f);
+        const opacity = rawOpacity != null ? Math.round(rawOpacity * OPACITY_STEPS) / OPACITY_STEPS : undefined;
+        const key = JSON.stringify({ style, opacity });
+        let group = groups.get(key);
+        if (!group) {
+            group = { style, opacity, data: [] };
+            groups.set(key, group);
+        }
+        group.data.push(f);
+    }
+    const styleGroups = [...groups.values()];
+    function resolveBaseFill(f) {
+        return resolveColor?.(f) ?? fill ?? cfg.palette[0];
+    }
+    // What the pointer can match: the features inside the legend's range, by id.
+    const hoverable = new Map(features
+        .filter((f) => !range || !color || LegendState.inRange(color(f), range))
+        .map((f) => [f.__id, f]));
+    const featureMarkers = styleGroups.map((group) => ({
+        type: 'geo',
+        data: group.data,
+        fill: (d) => group.style.fill ?? resolveBaseFill(d),
+        fillOpacity: group.style.fillOpacity ?? group.opacity ?? fillOpacity ?? 1,
+        stroke: group.style.stroke ?? stroke ?? cfg.axis.color,
+        strokeWidth: group.style.strokeWidth ?? strokeWidth ?? 0.5,
+        hover: hoverable,
+        onclick: onFeatureClick ? (e, d) => onFeatureClick(d, e) : undefined
+    }));
+    const behindMarkers = authoredMarkers.filter(isBehindMarker);
+    const frontMarkers = authoredMarkers.filter((m) => !isBehindMarker(m) && m.type !== 'geo-hover');
+    const hoverMarker = authoredMarkers.find((m) => m.type === 'geo-hover');
+    const markers = [
+        ...behindMarkers,
+        ...featureMarkers,
+        ...frontMarkers,
+        ...(hoverMarker ? [hoverMarker] : [])
+    ];
+    return { ...state, markers, styleGroups };
+}

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

@@ -0,0 +1,10 @@
+import type { GeoPlotState, GeoPlotCtx } from '../../../types/plots/geo/state';
+/**
+ * GeoPlot's "scales" phase: each feature's own resolved color (mirrors
+ * HeatmapPlot's own), with a per-feature override for whichever segment
+ * (its `grouping` bucket, or itself by id) sets its own `scales.color` -
+ * see `resolveFeatureScales`. A segment ramp's domain is built from just
+ * the features that share its own key, so e.g. two grouping buckets each
+ * get a ramp scaled to their own value range, not the whole dataset's.
+ */
+export declare function buildScales<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, ctx: GeoPlotCtx<TProps>): GeoPlotState<TProps>;

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

@@ -0,0 +1,85 @@
+import { resolveColorScale } from '../../../utils/color';
+import { resolveOpacityScale } from '../../../utils/opacity';
+import { ContinuousDomain } from '../../../utils/ContinuousDomain';
+import { resolveFeatureScales } from '../../utils/geoSegments';
+/**
+ * GeoPlot's "scales" phase: each feature's own resolved color (mirrors
+ * HeatmapPlot's own), with a per-feature override for whichever segment
+ * (its `grouping` bucket, or itself by id) sets its own `scales.color` -
+ * see `resolveFeatureScales`. A segment ramp's domain is built from just
+ * the features that share its own key, so e.g. two grouping buckets each
+ * get a ramp scaled to their own value range, not the whole dataset's.
+ */
+export function buildScales(state, ctx) {
+    const { scales, features, color, grouping, opacity, segments } = state;
+    const { range, cfg } = ctx;
+    const colorValues = color
+        ? features.map((f) => color(f)).filter((v) => v != null)
+        : [];
+    const valueDomain = ContinuousDomain.build(scales.color?.domain, colorValues);
+    const effectiveDomain = valueDomain ? ContinuousDomain.ramp(valueDomain, range) : null;
+    const colorScale = effectiveDomain
+        ? resolveColorScale({ ...scales.color, domain: effectiveDomain }, effectiveDomain, [
+            cfg.continuous.min,
+            cfg.continuous.max
+        ])
+        : null;
+    // Per-segment-key ramp cache - built lazily, once per distinct grouping
+    // value/feature id that actually has its own `scales.color`.
+    const segmentScaleCache = new Map();
+    function segmentColorScaleFor(key, segScales) {
+        if (segmentScaleCache.has(key))
+            return segmentScaleCache.get(key);
+        const peers = grouping
+            ? features.filter((g) => grouping(g) === key)
+            : features.filter((g) => g.__id === key);
+        const vals = peers.map((g) => color?.(g)).filter((v) => v != null);
+        const scale = vals.length
+            ? resolveColorScale({ ...segScales?.color, domain: [Math.min(...vals), Math.max(...vals)] }, [Math.min(...vals), Math.max(...vals)], [cfg.continuous.min, cfg.continuous.max])
+            : null;
+        segmentScaleCache.set(key, scale);
+        return scale;
+    }
+    const resolveColor = colorScale
+        ? (f) => {
+            const v = color?.(f);
+            if (v == null)
+                return undefined;
+            const groupingValue = grouping?.(f);
+            const featureId = f.__id ?? '';
+            const segScales = resolveFeatureScales(segments, featureId, groupingValue);
+            if (segScales?.color) {
+                const scale = segmentColorScaleFor(groupingValue ?? featureId, segScales);
+                if (scale)
+                    return scale(v);
+            }
+            return colorScale ? colorScale(v) : undefined;
+        }
+        : undefined;
+    // Plot-level only - no segment-scoped opacity ramp (unlike `resolveColor`
+    // above), since there's no concrete use case yet driving that complexity.
+    const opacityDomain = (() => {
+        if (!opacity)
+            return null;
+        const vals = features.map((f) => opacity(f)).filter((v) => v != null);
+        return vals.length ? [Math.min(...vals), Math.max(...vals)] : null;
+    })();
+    const opacityScale = opacityDomain
+        ? resolveOpacityScale(scales.opacity, opacityDomain, cfg.continuous.opacityRange)
+        : null;
+    const resolveOpacity = opacityScale
+        ? (f) => {
+            const v = opacity?.(f);
+            return v != null ? opacityScale(v) : undefined;
+        }
+        : undefined;
+    return {
+        ...state,
+        colorDomain: valueDomain ?? undefined,
+        opacityDomain: opacityDomain && typeof opacityDomain[0] === 'number'
+            ? opacityDomain
+            : undefined,
+        resolveColor,
+        resolveOpacity
+    };
+}

package/dist/plots/geo/phases/tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { GeoPlotState } from '../../../types/plots/geo/state';
+/** GeoPlot's "tooltip" phase: a hovered feature reads as its id. */
+export declare function buildTooltip<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>): GeoPlotState<TProps>;

package/dist/plots/geo/phases/tooltip.js

@@ -0,0 +1,5 @@
+import { defaultFeatureId } from '../../utils/geoAccessors';
+/** GeoPlot's "tooltip" phase: a hovered feature reads as its id. */
+export function buildTooltip(state) {
+    return { ...state, tooltipFormat: (f) => defaultFeatureId(f) };
+}

package/dist/plots/geo/slices.d.ts

@@ -0,0 +1,18 @@
+import type { FacetConfig } from '../../types/layout/facet';
+import type { TimelineConfig } from '../../types/layout/timeline';
+type Row = Record<string, unknown>;
+/**
+ * What a GeoPlot hands `Plot` to slice by: one stand-in row per value
+ * combination found in the features and markers' rows, and timeline/facet
+ * accessors that read a stand-in or a real row.
+ */
+export declare function buildGeoSlicing(args: {
+    rows: Row[];
+    timeline?: TimelineConfig<Row>;
+    facet?: FacetConfig<Row>;
+}): {
+    rows: Row[];
+    timeline?: TimelineConfig<Row>;
+    facet?: FacetConfig<Row>;
+};
+export {};

package/dist/plots/geo/slices.js

@@ -0,0 +1,59 @@
+import { TimelineTime } from '../../layout/timeline/TimelineTime';
+import { isFacetWrap } from '../../layout/facet/config';
+const SLICE = Symbol('dct-geo-slice');
+/** A slicing field's value on a feature (from its `properties`) or on a marker's own row. */
+function readField(field, row) {
+    if (typeof field === 'function')
+        return field(row);
+    if (row.type === 'Feature' && typeof row.properties === 'object' && row.properties !== null) {
+        return row.properties[field];
+    }
+    return row[field];
+}
+/**
+ * What a GeoPlot hands `Plot` to slice by: one stand-in row per value
+ * combination found in the features and markers' rows, and timeline/facet
+ * accessors that read a stand-in or a real row.
+ */
+export function buildGeoSlicing(args) {
+    const { rows, timeline, facet } = args;
+    const fields = {};
+    if (timeline)
+        fields.time = timeline.accessor;
+    if (facet && isFacetWrap(facet))
+        fields.by = facet.by;
+    if (facet && !isFacetWrap(facet)) {
+        if (facet.rows !== undefined)
+            fields.rows = facet.rows;
+        if (facet.cols !== undefined)
+            fields.cols = facet.cols;
+    }
+    const reader = (dimension) => (row) => SLICE in row
+        ? row[SLICE][dimension]
+        : readField(fields[dimension], row);
+    let combos = [{}];
+    for (const dimension of Object.keys(fields)) {
+        const read = rows.map((row) => readField(fields[dimension], row)).filter((v) => v != null);
+        // Dates on the same step are one value.
+        const time = new TimelineTime(timeline?.dateFormat);
+        const keyOf = (value) => dimension === 'time' ? String(time.toTime(value) ?? value) : value;
+        const values = [...new Map(read.map((value) => [keyOf(value), value])).values()];
+        combos = combos.flatMap((combo) => values.map((value) => ({ ...combo, [dimension]: value })));
+    }
+    return {
+        rows: combos.map((combo) => ({ [SLICE]: combo })),
+        timeline: timeline && {
+            ...timeline,
+            accessor: reader('time'),
+            interpolate: undefined
+        },
+        facet: facet &&
+            (isFacetWrap(facet)
+                ? { ...facet, by: reader('by') }
+                : {
+                    ...facet,
+                    rows: facet.rows === undefined ? undefined : reader('rows'),
+                    cols: facet.cols === undefined ? undefined : reader('cols')
+                })
+    };
+}

package/dist/plots/heatmap/Plot.svelte

@@ -1,252 +1,58 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { resolveAccessor } from '../utils/accessors';
-  import { validateSegments } from '../utils/segments';
-  import { buildSeries } from '../../utils/grouping';
-  import { makeColorScale } from '../../utils/color';
-  import { getConfiguration } from '../../configuration/config.svelte';
-  import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-  import { disabledFillOverride } from '../utils/legendDisabled';
-  import { buildCellMarkers } from './buildCellMarkers';
-  import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
-  import ValueLabels from './ValueLabels.svelte';
-  import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
-  import type { BasePlotProps } from '../../types/plots/props';
-  import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
-  import type { SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { AxisBasedStylesConfig } from '../../types/layout/styles';
-  import type { CellSegmentStyle } from '../../types/plots/segments/common';
-  import type { AxisBasedMarkersConfig } from '../../types/markers/common';
-
-  /**
-   * A categorical grid of value-coloured cells. Accepts either a pre-built
-   * `series` array (each {@link Series} may carry `z` as the colour accessor) or
-   * flat `data/x/y/z` props — mirrors the line/bar plot contract so the
-   * chart-level container/timeline/facet/legend wrap it unchanged.
-   *
-   * The colour domain is read from `scales.z.domain`; when absent it is derived
-   * from the visible slice of data.
-   */
-  type Props = BasePlotProps<
-    SeriesProps<TData> | DataProps<TData>,
-    TData,
-    AxisBasedStylesConfig,
-    CellSegmentStyle,
-    AxisBasedMarkersConfig,
-    AxisBasedScalesConfig<TData>
-  >;
-
-  let {
-    width,
-    height,
-    series,
-    data,
-    x,
-    y,
-    z,
-    styles = {},
-    segments = {},
-    scales = {},
-    margins,
-    markers = [],
-    tooltip = undefined,
-  }: Props = $props();
-
-  $effect(() => {
-    validateSegments(segments);
-    const scoped = markers.filter(
-      (m) => (m.type === 'hover' || m.type === 'component') && m.series,
-    );
-    if (scoped.length > 0) {
-      console.warn(
-        'HeatmapPlot: markers scoped to a `series` are ignored — heatmaps have no series concept.',
-      );
-    }
-    const seriesKeys = Object.keys(segments).filter((k) => k !== 'default');
-    if (seriesKeys.length > 0) {
-      console.warn(
-        `HeatmapPlot: segment groups have series-specific keys (${seriesKeys.join(', ')}) — heatmaps have no named series. Use the 'default' key instead.`,
-      );
-    }
-  });
-
-  const cfg = $derived(getConfiguration());
-  const minColor = $derived(styles.colors?.min ?? cfg.continuous.min);
-  const maxColor = $derived(styles.colors?.max ?? cfg.continuous.max);
-  const showVals = $derived(styles.values?.show ?? true);
-  const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
-
-  const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, undefined));
-  const flat = $derived(resolvedSeries.flatMap((s) => s.data));
-
-  const getX = $derived(resolveAccessor<TData>(resolvedSeries[0]?.x ?? x!));
-  const getY = $derived(resolveAccessor<TData>(resolvedSeries[0]?.y ?? y!));
-  const getZ = $derived(resolveAccessor<TData>(resolvedSeries[0]?.z ?? z!));
-
-  const xDomain = $derived([...new Set(flat.map((d) => getX(d) as AxisValue))]);
-  const yDomain = $derived([...new Set(flat.map((d) => getY(d) as AxisValue))]);
-
-  const valueDomain = $derived.by((): [number, number] => {
-    if (scales.z?.domain && scales.z.domain.length >= 2) {
-      return [Number(scales.z.domain[0]), Number(scales.z.domain[1])];
-    }
-    const vals = flat.map((d) => Number(getZ(d)));
-    return vals.length ? [Math.min(...vals, 0), Math.max(...vals)] : [0, 1];
-  });
-
-  // ── Legend-driven range filter ────────────────────────────────────────────
-  const legendInteraction = $derived(getLegendInteraction());
-  const range = $derived(legendInteraction?.continuousRange);
-  // 'rescale' reprojects the ramp onto the narrowed range; 'filter' (and no
-  // active range) keeps the original domain — only which cells are hidden
-  // changes.
-  const effectiveDomain = $derived.by((): [number, number] =>
-    range && range.mode === 'rescale' ? [range.min, range.max] : valueDomain,
-  );
-
-  function rangeFilteredStyle(base: CellSegmentStyle, value: number): CellSegmentStyle {
-    const r = range;
-    if (r == null || (value >= r.min && value <= r.max)) return base;
-    return { ...base, ...disabledFillOverride(r.disabledStyle) };
-  }
-
-  const colorScale = $derived(
-    makeColorScale(effectiveDomain[0], effectiveDomain[1], minColor, maxColor),
-  );
-
-  // A cell outside the active range is dimmed in place, but never surfaces
-  // in hover/tooltip — it's simply absent from the candidate list.
-  const hoverPoints = $derived(
-    flat
-      .filter((d) => {
-        const r = range;
-        if (r == null) return true;
-        const v = Number(getZ(d));
-        return v >= r.min && v <= r.max;
-      })
-      .map((d) => ({
-        x: getX(d) as AxisValue,
-        y: getY(d) as AxisValue,
-        row: d,
-        label: formatValue(Number(getZ(d)), ''),
-      })),
-  );
-
-  const segList = $derived(segments.default ?? []);
-
-  /**
-   * A catch-all (no `areas`) always matches, so evaluating segments in plain
-   * array order and merging every match — as this used to do — makes a
-   * catch-all listed *after* an area-specific one (the documented, and only
-   * demonstrated, convention: baseline first, highlight second) overwrite it
-   * on every cell, since it's applied last unconditionally. Area-specific
-   * segments must always win over the catch-all regardless of list order —
-   * so the catch-all is applied once as the baseline, and only
-   * area-specific segments can override it on top, mirroring the same
-   * catch-all/area-specific priority every other plot kind's segments
-   * already follow (see `resolveSeriesSegments` in `utils/segments.ts`).
-   */
-  const segStyleMap = $derived.by(() => {
-    const map = new Map<string, CellSegmentStyle>();
-    if (!segList.length) return map;
-    const catchAll = segList.find((s) => !s.areas || s.areas.length === 0);
-    const areaSegs = segList.filter((s) => s.areas && s.areas.length > 0);
-    for (const d of flat) {
-      const cx = getX(d) as AxisValue;
-      const cy = getY(d) as AxisValue;
-      const key = `${String(cx)}::${String(cy)}`;
-      if (!map.has(key)) {
-        let style: CellSegmentStyle = catchAll?.style ? { ...catchAll.style } : {};
-        for (const seg of areaSegs) {
-          const matches = seg.areas!.some((area) => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const xOk = !area.x || ((area.x.from === undefined || (cx as any) >= area.x.from) && (area.x.to === undefined || (cx as any) <= area.x.to));
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const yOk = !area.y || ((area.y.from === undefined || (cy as any) >= area.y.from) && (area.y.to === undefined || (cy as any) <= area.y.to));
-            return xOk && yOk;
-          });
-          if (matches) style = { ...style, ...seg.style };
-        }
-        map.set(key, style);
-      }
-    }
-    return map;
-  });
-
-  const getCellStyle = $derived(
-    (d: TData) =>
-      rangeFilteredStyle(
-        segStyleMap.get(`${String(getX(d))}::${String(getY(d))}`) ?? {},
-        Number(getZ(d)),
-      ),
-  );
-
-  /**
-   * One marker per *distinct resolved style*, not one for the whole
-   * dataset — svelteplot's opacity/numeric scale machinery requires
-   * `fillOpacity`/`strokeWidth` to be constant per mark instance, unlike
-   * `fill`, which stays a per-row accessor.
-   */
-  type StyleGroup = { style: CellSegmentStyle; data: TData[] };
-  const styleGroups = $derived.by((): StyleGroup[] => {
-    const groups = new Map<string, StyleGroup>();
-    for (const d of flat) {
-      const style = getCellStyle(d);
-      const key = JSON.stringify(style);
-      let group = groups.get(key);
-      if (!group) {
-        group = { style, data: [] };
-        groups.set(key, group);
-      }
-      group.data.push(d);
-    }
-    return [...groups.values()];
-  });
-
-  // The single, fully-resolved scales object BasePlotLayout reads for
-  // everything (ticks, grid, sort, and the real svelteplot scale) — avoids
-  // keeping a second, separately-defaulted copy of `scales.x`/`scales.y`
-  // (our own band-scale + domain defaults) out of sync with the one
-  // actually forwarded.
-  const resolvedScales = $derived<AxisBasedScalesConfig<TData>>({
-    ...scales,
-    x: { type: 'band', labelAnchor: 'right', domain: xDomain, ...(scales.x ?? {}) },
-    y: { type: 'band', domain: yDomain, ...(scales.y ?? {}) },
-  });
-
-  const hover = $derived({
-    active: tooltip != null || hasHoverMarker(markers),
-    points: hoverPoints,
-    label: (d: TData) => formatValue(Number(getZ(d)), ''),
-    strategy: resolveHoverStrategy(tooltip?.strategy, markers, 'punctual'),
-    sync: resolveHoverSync(tooltip?.sync, markers),
-    tooltip,
-  });
-
-  const cellMarkers = $derived(buildCellMarkers({ styleGroups, getX, getY, getZ, colorScale }));
+	import Plot from '../../layout/plot/Plot.svelte';
+	import { buildHeatmapDefaults } from './defaults';
+	import type { HeatmapPlotProps, HeatmapPlotCoreProps } from '../../types/plots/heatmap/props';
+
+	/**
+	 * A categorical grid of value-colored cells. Draws from pre-built `series` or flat `data` rows.
+	 * Optional chrome (`title`, `subtitle`, `caption`, `header`, `footer`,
+	 * `legend`) frames it; `timeline` and `facet` slice its `data` rows.
+	 */
+	let {
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet,
+		tooltip,
+		margins = $bindable(),
+		...core
+	}: HeatmapPlotProps<TData> = $props();
+
+	$effect(() => {
+		const scoped = (core.markers ?? []).filter(
+			(m) => (m.type === 'hover' || m.type === 'component') && (m as { series?: unknown }).series
+		);
+		if (scoped.length > 0) {
+			console.warn(
+				'HeatmapPlot: markers scoped to a `series` are ignored - heatmaps have no series concept.'
+			);
+		}
+		const seriesKeys = Object.keys(core.segments ?? {}).filter((k) => k !== 'default');
+		if (seriesKeys.length > 0) {
+			console.warn(
+				`HeatmapPlot: segment groups have series-specific keys (${seriesKeys.join(', ')}) - heatmaps have no named series. Use the 'default' key instead.`
+			);
+		}
+	});
 </script>
 
-<BasePlotLayout
-  {width}
-  {height}
-  {styles}
-  data={flat}
-  {getX}
-  {getY}
-  {hover}
-  scales={resolvedScales}
-  {margins}
-  markers={[...cellMarkers, ...markers]}
-  seriesData={resolvedSeries}
->
-  {#if showVals}
-    <ValueLabels
-      data={flat}
-      {getX}
-      {getY}
-      {getZ}
-      {formatValue}
-      values={styles.values}
-      defaultColor={cfg.continuous.labelColor}
-    />
-  {/if}
-</BasePlotLayout>
+<Plot
+	core={core as HeatmapPlotCoreProps<TData>}
+	defaults={buildHeatmapDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

package/dist/plots/heatmap/Plot.svelte.d.ts

@@ -1,12 +1,9 @@
-import type { BasePlotProps } from '../../types/plots/props';
-import type { AxisBasedScalesConfig } from '../../types/layout/scales';
-import type { SeriesProps, DataProps } from '../../types/plots/data/common';
-import type { AxisBasedStylesConfig } from '../../types/layout/styles';
-import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+import Plot from '../../layout/plot/Plot.svelte';
+import type { HeatmapPlotProps } from '../../types/plots/heatmap/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, AxisBasedStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: HeatmapPlotProps<TData>;
     exports: {};
-    bindings: "";
+    bindings: "margins";
     slots: {};
     events: {};
 };
@@ -14,7 +11,7 @@ declare class __sveltets_Render<TData extends Record<string, unknown>> {
     props(): ReturnType<typeof $$render<TData>>['props'];
     events(): ReturnType<typeof $$render<TData>>['events'];
     slots(): ReturnType<typeof $$render<TData>>['slots'];
-    bindings(): "";
+    bindings(): "margins";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plots/heatmap/defaults.d.ts

@@ -0,0 +1,11 @@
+import type { AxisPlotDefaults } from '../../types/phases';
+import type { HeatmapPlotState, HeatmapPlotCtx } from '../../types/plots/heatmap/state';
+/**
+ * HeatmapPlot on the shared pipeline: both axes are categories. A heatmap's
+ * `color` is each cell's numeric value, which the "data" phase reads as a
+ * continuous channel rather than a grouping key: the rows stay one series, and
+ * author markers don't inherit it. Its own band/color scales and markers; a
+ * cell's tooltip names its coordinates and its value.
+ * Its plot defaults to: hover one cell.
+ */
+export declare function buildHeatmapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<HeatmapPlotState<TData>, HeatmapPlotCtx>;