@fundar/data-chart-telling 0.0.14 → 0.0.16

package/dist/plots/geo/TileLayer.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { GeoTileLayerConfig } from '../../types/plots/styles/geo';
+type $$ComponentProps = {
+    config: GeoTileLayerConfig;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+declare const TileLayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type TileLayer = ReturnType<typeof TileLayer>;
+export default TileLayer;

package/dist/plots/geo/projections/argentina.d.ts

@@ -0,0 +1,8 @@
+import type { GeoCustomProjectionFactory } from '../../../types/plots/scales/geo';
+/**
+ * Argentina's territory in one unbroken frame: the mainland and the
+ * Antarctic/South Atlantic sector both visible, related to each other at
+ * true scale (azimuthal-equidistant, rotated so the split falls to the
+ * sides rather than through the middle of either half).
+ */
+export declare const argentinaBicontinental: GeoCustomProjectionFactory;

package/dist/plots/geo/projections/argentina.js

@@ -0,0 +1,35 @@
+import { geoAzimuthalEquidistant } from 'd3-geo';
+import { pointsToFitFeature } from './fit';
+// Representative extremity points — not real border geometry (which stays
+// out of `src/lib`, see stories/plots/geo/data.ts), just enough for
+// `fitSize` to frame Argentina's full territorial claim sensibly. These are
+// plain real-world coordinates, not derived from any particular dataset, so
+// they work the same way regardless of which Argentina GeoJSON actually
+// gets drawn through this projection.
+const MAINLAND_POINTS = [
+    [-65.3, -21.8], // La Quiaca (north)
+    [-68.3, -54.8], // Ushuaia / Tierra del Fuego (south)
+    [-53.7, -25.6], // Puerto Iguazú (east)
+    [-73.4, -50.3], // Los Glaciares, Santa Cruz (west)
+    [-71.8, -41.1], // Bariloche (west, mid-latitude bulge)
+];
+const ANTARCTIC_POINTS = [
+    [-61.2, -51.0], // Malvinas (north tip)
+    [-57.8, -52.3], // Malvinas (east tip)
+    [-38.0, -53.9], // Georgias del Sur
+    [-26.5, -59.5], // Sandwich del Sur
+    [-74, -60], // Antarctic sector, western meridian (60°S treaty boundary)
+    [-25, -60], // Antarctic sector, eastern meridian (60°S treaty boundary)
+    [-49.5, -89.9], // South Pole, on the sector's central meridian
+];
+/**
+ * Argentina's territory in one unbroken frame: the mainland and the
+ * Antarctic/South Atlantic sector both visible, related to each other at
+ * true scale (azimuthal-equidistant, rotated so the split falls to the
+ * sides rather than through the middle of either half).
+ */
+export const argentinaBicontinental = ({ width, height }) => {
+    const projection = geoAzimuthalEquidistant().rotate([60, 70]);
+    projection.fitSize([width, height], pointsToFitFeature([...MAINLAND_POINTS, ...ANTARCTIC_POINTS]));
+    return projection;
+};

package/dist/plots/geo/projections/fit.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wraps a handful of representative `[lon, lat]` points as a `MultiPoint`
+ * Feature, just so `projection.fitExtent`/`fitSize` has something to
+ * measure. Custom projections built on these live in `src/lib` (see
+ * `stories/plots/geo/data.ts` for why real border geometry doesn't), so a
+ * few hand-picked extremity points stand in for a region's true extent.
+ */
+export declare function pointsToFitFeature(points: [number, number][]): GeoJSON.Feature;

package/dist/plots/geo/projections/fit.js

@@ -0,0 +1,14 @@
+/**
+ * Wraps a handful of representative `[lon, lat]` points as a `MultiPoint`
+ * Feature, just so `projection.fitExtent`/`fitSize` has something to
+ * measure. Custom projections built on these live in `src/lib` (see
+ * `stories/plots/geo/data.ts` for why real border geometry doesn't), so a
+ * few hand-picked extremity points stand in for a region's true extent.
+ */
+export function pointsToFitFeature(points) {
+    return {
+        type: 'Feature',
+        properties: null,
+        geometry: { type: 'MultiPoint', coordinates: points },
+    };
+}

package/dist/plots/geo/rotate.svelte.d.ts

@@ -0,0 +1,26 @@
+export type GeoRotate = [number, number, number];
+/**
+ * Wires drag-to-rotate onto a DOM node for orthographic-style projections,
+ * exposing the resulting `[lambda, phi, gamma]` as reactive Svelte state —
+ * the caller feeds it back into the projection's own `rotate` config (see
+ * `GeoPlot`'s own `Plot.svelte`). Plain pointer events rather than d3-drag: a
+ * single-pointer drag-delta-to-rotation-delta conversion doesn't need
+ * d3-drag's multi-touch gesture machinery, and this package doesn't
+ * otherwise depend on it.
+ *
+ * Sensitivity is a fixed degrees-per-pixel constant scaled by the current
+ * pan/zoom `scale` (so dragging feels consistent whether zoomed in or out)
+ * — not derived from the projection's own fitted scale, which isn't
+ * exposed back up to this layer. Known v1 simplification, in the same
+ * spirit as `createGeoZoom`'s own "v1 limitation" — good enough to spin
+ * the globe, not tuned to feel identical across wildly different
+ * width/height/domain combinations.
+ */
+export declare function createGeoRotate(args: {
+    enabled: () => boolean;
+    baseRotate: () => GeoRotate;
+    scale: () => number;
+    node: () => HTMLElement | null;
+}): {
+    readonly rotate: GeoRotate;
+};

package/dist/plots/geo/rotate.svelte.js

@@ -0,0 +1,79 @@
+/**
+ * Wires drag-to-rotate onto a DOM node for orthographic-style projections,
+ * exposing the resulting `[lambda, phi, gamma]` as reactive Svelte state —
+ * the caller feeds it back into the projection's own `rotate` config (see
+ * `GeoPlot`'s own `Plot.svelte`). Plain pointer events rather than d3-drag: a
+ * single-pointer drag-delta-to-rotation-delta conversion doesn't need
+ * d3-drag's multi-touch gesture machinery, and this package doesn't
+ * otherwise depend on it.
+ *
+ * Sensitivity is a fixed degrees-per-pixel constant scaled by the current
+ * pan/zoom `scale` (so dragging feels consistent whether zoomed in or out)
+ * — not derived from the projection's own fitted scale, which isn't
+ * exposed back up to this layer. Known v1 simplification, in the same
+ * spirit as `createGeoZoom`'s own "v1 limitation" — good enough to spin
+ * the globe, not tuned to feel identical across wildly different
+ * width/height/domain combinations.
+ */
+export function createGeoRotate(args) {
+    let rotate = $state(args.baseRotate());
+    // Reset to the configured base rotation whenever it changes (e.g. a
+    // Storybook control edit) — but only while not actively enabled, so this
+    // doesn't fight the user's own in-progress drag.
+    $effect(() => {
+        if (!args.enabled())
+            rotate = args.baseRotate();
+    });
+    $effect(() => {
+        const el = args.node();
+        if (!args.enabled() || !el)
+            return;
+        // `dragging`/`start`/`startRotate` are deliberately plain closure
+        // variables, not `$state` — this effect must NOT read the reactive
+        // `rotate` value anywhere in its own synchronous body (only inside the
+        // event-handler closures below, which aren't part of dependency
+        // tracking). Reading it here would make every `rotate` write from
+        // `onPointerMove` re-trigger this very effect mid-drag, tearing down
+        // and rebuilding the listeners — and losing `dragging`'s `true` state
+        // — on every pixel of movement.
+        let dragging = false;
+        let start = { x: 0, y: 0 };
+        let startRotate = [0, 0, 0];
+        function onPointerDown(event) {
+            if (event.button !== 0)
+                return;
+            dragging = true;
+            start = { x: event.clientX, y: event.clientY };
+            startRotate = rotate;
+            el.setPointerCapture(event.pointerId);
+        }
+        function onPointerMove(event) {
+            if (!dragging)
+                return;
+            const degPerPixel = 0.3 / Math.max(args.scale(), 0.1);
+            const dLambda = (event.clientX - start.x) * degPerPixel;
+            const dPhi = (event.clientY - start.y) * degPerPixel;
+            const [lambda0, phi0, gamma0] = startRotate;
+            rotate = [lambda0 + dLambda, Math.max(-90, Math.min(90, phi0 - dPhi)), gamma0];
+        }
+        function onPointerUp(event) {
+            dragging = false;
+            el.releasePointerCapture(event.pointerId);
+        }
+        el.addEventListener('pointerdown', onPointerDown);
+        el.addEventListener('pointermove', onPointerMove);
+        el.addEventListener('pointerup', onPointerUp);
+        el.addEventListener('pointercancel', onPointerUp);
+        return () => {
+            el.removeEventListener('pointerdown', onPointerDown);
+            el.removeEventListener('pointermove', onPointerMove);
+            el.removeEventListener('pointerup', onPointerUp);
+            el.removeEventListener('pointercancel', onPointerUp);
+        };
+    });
+    return {
+        get rotate() {
+            return rotate;
+        },
+    };
+}

package/dist/plots/geo/zoom.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { GeoZoomConfig } from '../../types/plots/styles/geo';
+export type GeoZoomTransform = {
+    x: number;
+    y: number;
+    k: number;
+};
+/**
+ * Wires drag-pan + scroll-zoom onto a DOM node via d3-zoom, exposing the
+ * resulting transform as reactive Svelte state. The caller applies it as an
+ * SVG `<g transform="translate(x,y) scale(k)">` wrapper — cheap, since the
+ * underlying `d3-geo` projection is computed once by svelteplot and never
+ * recomputed per zoom tick.
+ *
+ * Known v1 limitation: svelteplot's own `<Pointer>` hit-tests in the plot's
+ * pre-zoom projected coordinate space, so hover/tooltip matching does not
+ * compensate for an active pan/zoom transform — it still works, but targets
+ * a shape's un-zoomed position rather than its currently-visible one.
+ */
+export declare function createGeoZoom(args: {
+    enabled: () => boolean;
+    config: () => GeoZoomConfig | undefined;
+    node: () => HTMLElement | null;
+    /**
+     * When true, drag/touch gestures are left for something else to handle
+     * (see `createGeoRotate`) — only wheel/pinch scaling stays wired to this
+     * behavior. Checked per-event, so toggling it doesn't need to tear down
+     * and recreate the underlying d3-zoom behavior.
+     */
+    disableDrag?: () => boolean;
+}): {
+    readonly transform: GeoZoomTransform;
+};

package/dist/plots/geo/zoom.svelte.js

@@ -0,0 +1,50 @@
+import { select } from 'd3-selection';
+import { zoom as d3zoom, zoomIdentity } from 'd3-zoom';
+/**
+ * Wires drag-pan + scroll-zoom onto a DOM node via d3-zoom, exposing the
+ * resulting transform as reactive Svelte state. The caller applies it as an
+ * SVG `<g transform="translate(x,y) scale(k)">` wrapper — cheap, since the
+ * underlying `d3-geo` projection is computed once by svelteplot and never
+ * recomputed per zoom tick.
+ *
+ * Known v1 limitation: svelteplot's own `<Pointer>` hit-tests in the plot's
+ * pre-zoom projected coordinate space, so hover/tooltip matching does not
+ * compensate for an active pan/zoom transform — it still works, but targets
+ * a shape's un-zoomed position rather than its currently-visible one.
+ */
+export function createGeoZoom(args) {
+    let transform = $state({ x: 0, y: 0, k: 1 });
+    $effect(() => {
+        const el = args.node();
+        if (!args.enabled() || !el)
+            return;
+        const cfg = args.config();
+        const behavior = d3zoom()
+            .scaleExtent([cfg?.min ?? 1, cfg?.max ?? 8])
+            .filter((event) => {
+            if (args.disableDrag?.() && event.type !== 'wheel')
+                return false;
+            // d3-zoom's own default filter, minus the part this replaces.
+            return (!event.ctrlKey || event.type === 'wheel') && !event.button;
+        })
+            .on('zoom', (event) => {
+            transform = { x: event.transform.x, y: event.transform.y, k: event.transform.k };
+        });
+        const selection = select(el).call(behavior);
+        const initial = cfg?.initial;
+        if (initial) {
+            behavior.transform(selection, zoomIdentity.translate(initial.x ?? 0, initial.y ?? 0).scale(initial.k ?? 1));
+        }
+        else {
+            transform = { x: 0, y: 0, k: 1 };
+        }
+        return () => {
+            selection.on('.zoom', null);
+        };
+    });
+    return {
+        get transform() {
+            return transform;
+        },
+    };
+}

package/dist/plots/heatmap/Plot.svelte

@@ -1,13 +1,24 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
   import { Cell, Text } from 'svelteplot';
   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 PlotLayout from '../../layout/plot/PlotLayout.svelte';
-  import type { PlotProps } from '../../types/plots/props';
-  import type { AxisValue } from '../../types/plots/common';
-  import type { CellSegmentStyle } from '../../types/plots/styles';
+  import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
+  import { disabledFillOverride } from '../utils/legendDisabled';
+  import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
+  import AxisLayout from '../../layout/plot/AxisLayout.svelte';
+  import GridLayout from '../../layout/plot/GridLayout.svelte';
+  import RuleLayout from '../../layout/plot/RuleLayout.svelte';
+  import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
+  import type { BasePlotProps } from '../../types/plots/props';
+  import type { AxisValue } from '../../types/plots/axis';
+  import type { SeriesProps, DataProps } from '../../types/plots/data/common';
+  import type { AxisBasedScalesConfig } from '../../types/plots/props';
+  import type { BasePlotStyles } from '../../types/plots/styles/common';
+  import type { CellSegmentStyle } from '../../types/plots/segments/common';
+  import type { Marker } from '../../types/markers/common';
 
   /**
    * A categorical grid of value-coloured cells. Accepts either a pre-built
@@ -18,6 +29,15 @@
    * 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,
+    BasePlotStyles,
+    CellSegmentStyle,
+    Marker,
+    AxisBasedScalesConfig<TData>
+  >;
+
   let {
     width,
     height,
@@ -32,9 +52,10 @@
     margins,
     markers = [],
     tooltip = undefined,
-  }: PlotProps<TData, CellSegmentStyle> = $props();
+  }: Props = $props();
 
   $effect(() => {
+    validateSegments(segments);
     const scoped = markers.filter(
       (m) => (m.type === 'hover' || m.type === 'component') && m.series,
     );
@@ -43,12 +64,10 @@
         'HeatmapPlot: markers scoped to a `series` are ignored — heatmaps have no series concept.',
       );
     }
-    const seriesKeys = segments.flatMap((g) =>
-      Object.keys(g as Record<string, unknown>).filter((k) => k !== 'default'),
-    );
+    const seriesKeys = Object.keys(segments).filter((k) => k !== 'default');
     if (seriesKeys.length > 0) {
       console.warn(
-        `HeatmapPlot: segment groups have series-specific keys (${[...new Set(seriesKeys)].join(', ')}) — heatmaps have no named series. Use the 'default' key instead.`,
+        `HeatmapPlot: segment groups have series-specific keys (${seriesKeys.join(', ')}) — heatmaps have no named series. Use the 'default' key instead.`,
       );
     }
   });
@@ -58,6 +77,9 @@
   const maxColor = $derived(styles.colors?.max ?? cfg.continuous.max);
   const showVals = $derived(styles.values?.show ?? true);
   const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  // 'outside' is a per-point escape hatch resolved by HoverMarker; heatmaps
+  // have no signed axis to resolve it against, so treat it as unset.
+  const resolvedTextAnchor = $derived(styles.values?.textAnchor === 'outside' ? undefined : styles.values?.textAnchor);
 
   const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, undefined));
   const flat = $derived(resolvedSeries.flatMap((s) => s.data));
@@ -66,15 +88,6 @@
   const getY = $derived(resolveAccessor<TData>(resolvedSeries[0]?.y ?? y!));
   const getZ = $derived(resolveAccessor<TData>(resolvedSeries[0]?.z ?? z!));
 
-  const hoverPoints = $derived(
-    flat.map((d) => ({
-      x: getX(d) as AxisValue,
-      y: getY(d) as AxisValue,
-      row: d,
-      label: fmtVal(Number(getZ(d)), ''),
-    })),
-  );
-
   const xDomain = $derived([...new Set(flat.map((d) => getX(d) as AxisValue))]);
   const yDomain = $derived([...new Set(flat.map((d) => getY(d) as AxisValue))]);
 
@@ -86,33 +99,77 @@
     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(valueDomain[0], valueDomain[1], minColor, maxColor),
+    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: fmtVal(Number(getZ(d)), ''),
+      })),
   );
 
-  const segList = $derived(segments.flatMap((g) => (g as Record<string, CellSegmentStyle[]>)['default'] ?? []));
+  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 = {};
-        for (const seg of segList) {
-          const areas = seg.areas;
-          const matches =
-            !areas || areas.length === 0
-              ? true
-              : 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;
-                });
+        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);
@@ -122,39 +179,89 @@
   });
 
   const getCellStyle = $derived(
-    (d: TData) => segStyleMap.get(`${String(getX(d))}::${String(getY(d))}`) ?? {},
+    (d: TData) =>
+      rangeFilteredStyle(
+        segStyleMap.get(`${String(getX(d))}::${String(getY(d))}`) ?? {},
+        Number(getZ(d)),
+      ),
   );
+
+  /**
+   * One `<Cell>` call per *distinct resolved style*, not one call for the
+   * whole dataset. svelteplot registers `fillOpacity`/`strokeWidth` under
+   * its shared "opacity"/numeric scale machinery — passed as a per-row
+   * accessor that genuinely varies within a single mark instance, that
+   * scale collapses every row to the same (wrong) value instead of the
+   * literal numbers set on each segment. A literal, per-call constant (one
+   * call per style bucket) bypasses that entirely, which is exactly how
+   * bar/line avoid the same trap (one mark per visual segment). `fill`
+   * stays a per-cell accessor within each group — unlike fillOpacity, it
+   * must keep varying continuously with the underlying value wherever a
+   * segment doesn't explicitly override it.
+   */
+  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 hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
+  const hoverStrategy = $derived(resolveHoverStrategy(tooltip?.strategy, markers, 'punctual'));
+  const hoverSync = $derived(resolveHoverSync(tooltip?.sync, markers));
 </script>
 
-<PlotLayout
+<BasePlotLayout
   {width}
   {height}
-  x={{ type: 'band', labelAnchor: 'right', domain: xDomain, ...(scales.x ?? {}) }}
-  y={{ type: 'band', domain: yDomain, ...(scales.y ?? {}) }}
   data={flat}
   {getX}
   {getY}
-  matchY={getY}
   {hoverPoints}
   label={(d) => fmtVal(Number(getZ(d)), '')}
   {tooltip}
-  {markers}
-  seriesData={resolvedSeries}
-  scales={scales}
+  {hoverActive}
+  {hoverStrategy}
+  {hoverSync}
+  scales={resolvedScales}
   {margins}
-  showHoverLabels={false}
-  defaultStrategy="punctual"
 >
-  <Cell
-    data={flat as unknown as Record<string | symbol, never>[]}
-    x={getX}
-    y={getY}
-    fill={(d) => getCellStyle(d as TData).fill ?? colorScale(Number(getZ(d as TData)))}
-    fillOpacity={(d) => getCellStyle(d as TData).fillOpacity ?? 1}
-    stroke={(d) => getCellStyle(d as TData).stroke}
-    strokeWidth={(d) => getCellStyle(d as TData).strokeWidth ?? 0}
-    inset={0.5}
-  />
+  {#snippet children({ matchedPoints, ruleX, ruleY, impliesRuleX, impliesRuleY, numericMargins })}
+  <AxisLayout data={flat} {getX} {getY} {width} {height} {numericMargins} scales={resolvedScales} />
+  <GridLayout scales={resolvedScales} />
+  <RuleLayout {markers} seriesData={resolvedSeries} {matchedPoints} {ruleX} {ruleY} {impliesRuleX} {impliesRuleY} showHoverLabels={false}>
+  {#each styleGroups as group, i (i)}
+    <Cell
+      data={group.data as unknown as Record<string | symbol, never>[]}
+      x={getX}
+      y={getY}
+      fill={(d) => group.style.fill ?? colorScale(Number(getZ(d as TData)))}
+      fillOpacity={group.style.fillOpacity ?? 1}
+      stroke={group.style.stroke}
+      strokeWidth={group.style.strokeWidth ?? 0}
+      inset={0.5}
+    />
+  {/each}
 
   {#if showVals}
     <Text
@@ -162,17 +269,23 @@
       x={getX}
       y={getY}
       text={(d) => fmtVal(Number(getZ(d)), '')}
-      fill={cfg.continuous.labelColor}
-      fontSize={12}
-      fontWeight={600}
-      textAnchor={styles.values?.textAnchor ?? 'middle'}
+      fill={styles.values?.fill ?? cfg.continuous.labelColor}
+      fontSize={styles.values?.fontSize ?? 12}
+      fontWeight={styles.values?.fontWeight ?? 600}
+      fontStyle={styles.values?.fontStyle}
+      textAnchor={resolvedTextAnchor ?? 'middle'}
       lineAnchor={styles.values?.lineAnchor ?? 'middle'}
       dx={styles.values?.dx ?? 0}
       dy={styles.values?.dy ?? 0}
       lineHeight={styles.values?.lineHeight}
       rotate={styles.values?.rotate}
+      stroke={styles.values?.stroke}
+      strokeWidth={styles.values?.strokeWidth}
+      paintOrder={styles.values?.paintOrder}
       class={styles.values?.class}
       textClass={styles.values?.textClass}
     />
   {/if}
-</PlotLayout>
+  </RuleLayout>
+  {/snippet}
+</BasePlotLayout>

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

@@ -1,7 +1,11 @@
-import type { PlotProps } from '../../types/plots/props';
-import type { CellSegmentStyle } from '../../types/plots/styles';
+import type { BasePlotProps } from '../../types/plots/props';
+import type { SeriesProps, DataProps } from '../../types/plots/data/common';
+import type { AxisBasedScalesConfig } from '../../types/plots/props';
+import type { BasePlotStyles } from '../../types/plots/styles/common';
+import type { CellSegmentStyle } from '../../types/plots/segments/common';
+import type { Marker } from '../../types/markers/common';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: PlotProps<TData, CellSegmentStyle>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStyles, CellSegmentStyle, Marker, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};