@fundar/data-chart-telling 0.0.25 → 0.0.27

package/dist/plots/geo/buildGeoMarkers.js

@@ -0,0 +1,47 @@
+/**
+ * `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);
+}
+/**
+ * Every marker for one `GeoPlot` render, in final draw order: any authored
+ * marker with `behind: true`, then the base map itself (one `'geo'` marker
+ * per resolved feature style), then the rest of the authored markers in
+ * order, with any `hover` marker moved last.
+ */
+export function buildGeoMarkers(args) {
+    const { styleGroups, resolveBaseFill, fillOpacity, stroke, strokeWidth, axisColor, onFeatureClick, markers, hoverActive, hoverPointById, isOverInset, setHoverMatch, clearHoverMatch, } = args;
+    const featureMarkers = styleGroups.map((group) => ({
+        type: 'geo',
+        data: group.data,
+        fill: (d) => group.style.fill ?? resolveBaseFill(d),
+        fillOpacity: group.style.fillOpacity ?? fillOpacity ?? 1,
+        stroke: group.style.stroke ?? stroke ?? axisColor,
+        strokeWidth: group.style.strokeWidth ?? strokeWidth ?? 0.5,
+        onclick: onFeatureClick ? (e, d) => onFeatureClick(d, e) : undefined,
+        onpointerenter: hoverActive
+            ? (e, d) => {
+                if (isOverInset(e))
+                    return;
+                const hp = hoverPointById.get(d.__id);
+                if (hp)
+                    setHoverMatch([hp.row]);
+            }
+            : undefined,
+        onpointerleave: hoverActive
+            ? (e) => {
+                if (isOverInset(e))
+                    return;
+                clearHoverMatch();
+            }
+            : undefined,
+    }));
+    const behindMarkers = markers.filter(isBehindMarker);
+    const frontMarkers = markers.filter((m) => !isBehindMarker(m) && m.type !== 'geo-hover');
+    const hoverMarker = markers.find((m) => m.type === 'geo-hover');
+    return [...behindMarkers, ...featureMarkers, ...frontMarkers, ...(hoverMarker ? [hoverMarker] : [])];
+}

package/dist/plots/heatmap/Plot.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { Cell } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { validateSegments } from '../utils/segments';
   import { buildSeries } from '../../utils/grouping';
@@ -7,19 +6,16 @@
   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 AxisLayout from '../../layout/plot/AxisLayout.svelte';
-  import GridLayout from '../../layout/plot/GridLayout.svelte';
-  import RuleLayout from '../../layout/plot/RuleLayout.svelte';
   import ValueLabels from './ValueLabels.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 { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   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 { BasePlotStylesConfig } from '../../types/layout/styles';
   import type { CellSegmentStyle } from '../../types/plots/segments/common';
-  import type { Marker } from '../../types/markers/common';
+  import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 
   /**
    * A categorical grid of value-coloured cells. Accepts either a pre-built
@@ -33,9 +29,9 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStyles,
+    BasePlotStylesConfig,
     CellSegmentStyle,
-    Marker,
+    AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>
   >;
 
@@ -77,7 +73,7 @@
   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 fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  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));
@@ -131,7 +127,7 @@
         x: getX(d) as AxisValue,
         y: getY(d) as AxisValue,
         row: d,
-        label: fmtVal(Number(getZ(d)), ''),
+        label: formatValue(Number(getZ(d)), ''),
       })),
   );
 
@@ -185,17 +181,10 @@
   );
 
   /**
-   * 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.
+   * 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[] => {
@@ -224,54 +213,40 @@
     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));
+  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 }));
 </script>
 
 <BasePlotLayout
   {width}
   {height}
+  {styles}
   data={flat}
   {getX}
   {getY}
-  {hoverPoints}
-  label={(d) => fmtVal(Number(getZ(d)), '')}
-  {tooltip}
-  {hoverActive}
-  {hoverStrategy}
-  {hoverSync}
+  {hover}
   scales={resolvedScales}
   {margins}
+  markers={[...cellMarkers, ...markers]}
+  seriesData={resolvedSeries}
 >
-  {#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}
     <ValueLabels
       data={flat}
       {getX}
       {getY}
       {getZ}
-      {fmtVal}
+      {formatValue}
       values={styles.values}
       defaultColor={cfg.continuous.labelColor}
     />
   {/if}
-  </RuleLayout>
-  {/snippet}
 </BasePlotLayout>

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

@@ -1,11 +1,10 @@
 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 { 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';
+import type { BasePlotStylesConfig } from '../../types/layout/styles';
+import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStyles, CellSegmentStyle, Marker, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/heatmap/ValueLabels.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
   import { Text } from 'svelteplot';
-  import type { AxisValue } from '../../types/plots/axis';
-  import type { ValuesStyle } from '../../types/plots/styles/common';
+  import type { AxisValue } from '../../types/layout/scales';
+  import type { ValuesStyle } from '../../types/layout/styles';
 
   /**
    * Renders every cell's value label in one mark — heatmaps have no
@@ -14,7 +14,7 @@
     getX,
     getY,
     getZ,
-    fmtVal,
+    formatValue,
     values,
     defaultColor,
   }: {
@@ -22,7 +22,7 @@
     getX: (d: TData) => AxisValue;
     getY: (d: TData) => AxisValue;
     getZ: (d: TData) => unknown;
-    fmtVal: (value: number, seriesName: string) => string;
+    formatValue: (value: number, seriesName: string) => string;
     values: ValuesStyle | undefined;
     defaultColor: string;
   } = $props();
@@ -37,7 +37,7 @@
   {data}
   x={getX}
   y={getY}
-  text={(d: TData) => fmtVal(Number(getZ(d)), '')}
+  text={(d: TData) => formatValue(Number(getZ(d)), '')}
   fill={font?.fill ?? defaultColor}
   fontSize={font?.fontSize ?? 12}
   fontWeight={font?.fontWeight ?? 600}

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

@@ -1,12 +1,12 @@
-import type { AxisValue } from '../../types/plots/axis';
-import type { ValuesStyle } from '../../types/plots/styles/common';
+import type { AxisValue } from '../../types/layout/scales';
+import type { ValuesStyle } from '../../types/layout/styles';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
         data: TData[];
         getX: (d: TData) => AxisValue;
         getY: (d: TData) => AxisValue;
         getZ: (d: TData) => unknown;
-        fmtVal: (value: number, seriesName: string) => string;
+        formatValue: (value: number, seriesName: string) => string;
         values: ValuesStyle | undefined;
         defaultColor: string;
     };

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

@@ -0,0 +1,21 @@
+import type { AxisValue } from '../../types/layout/scales';
+import type { CellSegmentStyle } from '../../types/plots/segments/common';
+import type { CellMarkerConfig } from '../../types/markers/common';
+/** One resolved-style bucket of cells, as grouped by `HeatmapPlot`'s own `styleGroups`. */
+export type CellStyleGroup<TData> = {
+    style: CellSegmentStyle;
+    data: TData[];
+};
+/**
+ * Every `'cell'` marker for one HeatmapPlot render: one marker per
+ * resolved-style bucket in `styleGroups`. `fill` stays a per-row accessor,
+ * falling back to `colorScale` wherever a segment doesn't set a literal
+ * `fill`.
+ */
+export declare function buildCellMarkers<TData extends Record<string, unknown>>(args: {
+    styleGroups: CellStyleGroup<TData>[];
+    getX: (d: TData) => AxisValue;
+    getY: (d: TData) => AxisValue;
+    getZ: (d: TData) => AxisValue;
+    colorScale: (value: number) => string;
+}): CellMarkerConfig[];

package/dist/plots/heatmap/buildCellMarkers.js

@@ -0,0 +1,25 @@
+/**
+ * Every `'cell'` marker for one HeatmapPlot render: one marker per
+ * resolved-style bucket in `styleGroups`. `fill` stays a per-row accessor,
+ * falling back to `colorScale` wherever a segment doesn't set a literal
+ * `fill`.
+ */
+export function buildCellMarkers(args) {
+    const { styleGroups, getX, getY, getZ, colorScale } = args;
+    return styleGroups.map((group) => ({
+        type: 'cell',
+        data: group.data,
+        x: getX,
+        y: getY,
+        fill: (d) => group.style.fill ?? colorScale(Number(getZ(d))),
+        style: {
+            fillOpacity: group.style.fillOpacity ?? 1,
+            stroke: group.style.stroke,
+            strokeWidth: group.style.strokeWidth ?? 0,
+            strokeOpacity: group.style.strokeOpacity,
+            strokeDasharray: group.style.strokeDasharray,
+            borderRadius: group.style.borderRadius,
+        },
+        inset: 0.5,
+    }));
+}

package/dist/plots/line/Plot.svelte

@@ -2,36 +2,32 @@
   lang="ts"
   generics="TData extends Record<string, unknown>"
 >
-  import { SvelteMap } from 'svelte/reactivity';
-  import { Line, Dot } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
   import { buildSeries } from '../../utils/grouping';
   import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
   import { disabledStrokeOverride, disabledDotsOverride } from '../utils/legendDisabled';
+  import { buildLineMarkers } from './buildLineMarkers';
+  import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
   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 HoverMarker from '../../markers/HoverMarker.svelte';
   import ValueLabels from './ValueLabels.svelte';
   import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
-  import { buildGroupedSeries, validateSegments, resolveSegmentsForSeries, matchesSegmentX, getDataForSegments } from '../utils/segments';
+  import { buildGroupedSeries, validateSegments, buildScopedMarkerGroups } from '../utils/segments';
   import type { BasePlotProps } from '../../types/plots/props';
-  import type { AxisValue } from '../../types/plots/axis';
+  import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { AxisBasedScalesConfig } from '../../types/plots/props';
-  import type { BasePlotStyles } from '../../types/plots/styles/common';
+  import type { BasePlotStylesConfig } from '../../types/layout/styles';
   import type { LineSegmentStyle } from '../../types/plots/segments/common';
-  import type { Marker } from '../../types/markers/common';
+  import type { LineMarkersConfig } from '../../types/markers/line';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
 
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStyles,
+    BasePlotStylesConfig,
     LineSegmentStyle,
-    Marker,
+    LineMarkersConfig,
     AxisBasedScalesConfig<TData>
   >;
 
@@ -60,19 +56,24 @@
     buildGroupedSeries<Series<TData>, LineSegmentStyle>(resolvedSeries, segments),
   );
 
-  const seriesMarkers = $derived.by(() => {
-    const map = new SvelteMap<string, Marker[]>();
-    for (const marker of markers) {
-      if ((marker.type === 'component' || marker.type === 'hover') && marker.series) {
-        if (!map.has(marker.series)) map.set(marker.series, []);
-        map.get(marker.series)!.push(marker);
-      }
-    }
-    return map;
-  });
-
   const cfg = $derived(getConfiguration());
   const showVals = $derived(styles.values?.show ?? false);
+  const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
+
+  // A value label hovered while `styles.values.hoverIsolate` is on dims
+  // every other series exactly like a legend toggle would — local to this
+  // one `<Plot>` instance (not the shared HoverStore) so the gesture can't
+  // leak into unrelated tooltip/crosshair behavior.
+  let hoverIsolatedSeries = $state<string | null>(null);
+
+  function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
+    return (
+      legendInteraction?.disabledSeries.get(name) ??
+      (hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
+        ? { opacity: cfg.legend.disabledOpacity }
+        : undefined)
+    );
+  }
 
   const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
   const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
@@ -102,134 +103,65 @@
       .filter(({ lastRow }) => lastRow !== undefined),
   );
 
-  const hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
-  const hoverStrategy = $derived(resolveHoverStrategy(tooltip?.strategy, markers, 'x'));
-  const hoverSync = $derived(resolveHoverSync(tooltip?.sync, markers));
+  const hover = $derived({
+    active: tooltip != null || hasHoverMarker(markers),
+    points: hoverPoints,
+    label: (r: TData) => String(yAcc(r)),
+    strategy: resolveHoverStrategy(tooltip?.strategy, markers, 'x'),
+    sync: resolveHoverSync(tooltip?.sync, markers),
+    tooltip,
+  });
+
+  const lineMarkers = $derived(
+    buildLineMarkers({
+      groupedSeries,
+      disabledStrokeFor: (name) => disabledStrokeOverride(effectiveDisabledFor(name)),
+      disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name)),
+    }),
+  );
+
+  const scopedGroups = $derived(
+    buildScopedMarkerGroups<TData, Series<TData>, LineSegmentStyle>({
+      groupedSeries,
+      segments,
+      colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+      segmentColorFor: (style, defaultColor) => style?.stroke?.stroke ?? defaultColor,
+    }),
+  );
+
+  // End-of-line labels can grow past the plot's own content box, into its
+  // margin — reserving real space there (rather than padding the domain,
+  // which would falsely imply data exists past the last real point) is
+  // what ValueLabels's own overflow measurement feeds into here, via a
+  // tracker local to this one `<Plot>` instance — see ValueLabels.svelte's
+  // own doc comment for why that locality (vs. svelteplot's shared margin
+  // context) matters.
+  const labelMargin = createLabelMarginTracker(() => margins);
 </script>
 
 <BasePlotLayout
   {width}
   {height}
+  {styles}
   data={flat}
   getX={xAcc}
   getY={(d) => Number(yAcc(d))}
-  {hoverPoints}
-  label={(r) => String(yAcc(r))}
-  {tooltip}
-  {hoverActive}
-  {hoverStrategy}
-  {hoverSync}
+  {hover}
   {scales}
-  {margins}
+  margins={labelMargin.resolvedMargins}
   xTickRotate={scales?.x?.tickRotate}
+  markers={[...lineMarkers, ...markers]}
+  seriesData={resolvedSeries}
+  {scopedGroups}
 >
-  {#snippet children({ matchedPoints, ruleX, ruleY, impliesRuleX, impliesRuleY, numericMargins })}
-  <AxisLayout data={flat} getX={xAcc} getY={(d) => Number(yAcc(d))} {width} {height} {numericMargins} {scales} />
-  <GridLayout {scales} />
-  <RuleLayout {markers} seriesData={resolvedSeries} {matchedPoints} {ruleX} {ruleY} {impliesRuleX} {impliesRuleY}>
-  {#each groupedSeries as group, seriesIndex (group.series.name)}
-    {@const defaultColor = paletteColor(seriesIndex, cfg.palette)}
-    {@const disabledOverride = legendInteraction?.disabledSeries.get(group.series.name)}
-    {@const disabledStroke = disabledStrokeOverride(disabledOverride)}
-    {@const disabledDots = disabledDotsOverride(disabledOverride)}
-    {#each group.visualSegments as seg, i (`${group.series.name}-${i}`)}
-      {@const strokeStyle = seg.style.stroke}
-      {@const lineData = seg.data as unknown as Record<string | symbol, never>[]}
-      <Line
-        data={lineData}
-        x={resolveAccessor(group.series.x)}
-        y={resolveAccessor(group.series.y)}
-        stroke={disabledStroke?.stroke ?? strokeStyle?.stroke ?? defaultColor}
-        strokeWidth={disabledStroke?.strokeWidth ?? strokeStyle?.strokeWidth ?? cfg.line.strokeWidth}
-        strokeOpacity={disabledStroke?.strokeOpacity ?? strokeStyle?.strokeOpacity ?? 1}
-        strokeDasharray={disabledStroke?.strokeDasharray ?? strokeStyle?.strokeDasharray}
-        strokeLinejoin={disabledStroke?.strokeLinejoin ?? strokeStyle?.strokeLinejoin}
-        strokeLinecap={disabledStroke?.strokeLinecap ?? strokeStyle?.strokeLinecap}
-      />
-      {#if seg.style.dots}
-        {@const dotStyle = seg.style.dots}
-        <Dot
-          data={seg.data}
-          x={resolveAccessor(group.series.x)}
-          y={resolveAccessor(group.series.y)}
-          r={disabledDots?.dotRadius ?? dotStyle.dotRadius ?? cfg.line.dotRadius}
-          fill={disabledDots?.dotFill ?? dotStyle.dotFill ?? strokeStyle?.stroke ?? defaultColor}
-          symbol={disabledDots?.dotSymbol ?? dotStyle.dotSymbol ?? 'circle'}
-          stroke={disabledDots?.dotStroke ?? dotStyle.dotStroke ?? strokeStyle?.stroke ?? defaultColor}
-          strokeWidth={disabledDots?.dotStrokeWidth ?? dotStyle.dotStrokeWidth ?? 1}
-          fillOpacity={disabledDots?.dotFillOpacity ?? dotStyle.dotFillOpacity ?? strokeStyle?.strokeOpacity ?? 1}
-          strokeOpacity={disabledDots?.dotStrokeOpacity ?? dotStyle.dotStrokeOpacity ?? strokeStyle?.strokeOpacity ?? 1}
-          strokeDasharray={disabledDots?.dotStrokeDasharray ?? dotStyle.dotStrokeDasharray}
-        />
-      {/if}
-    {/each}
-
-    {#each seriesMarkers.get(group.series.name) ?? [] as marker, i (`series-${group.series.name}-${marker.type}-${i}`)}
-      {#if marker.type === 'component'}
-        {#if marker.scope === 'segment'}
-          {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
-          {@const xAccessor = resolveAccessor(group.series.x)}
-          {@const segmentDataArrays = getDataForSegments(group.series.data, xAccessor, segs)}
-          {#each segmentDataArrays as segmentData, segIdx (`${group.series.name}-marker-segment-${segIdx}`)}
-            {#if segmentData.length > 0}
-              {@const segmentColor = segs[segIdx]?.style?.stroke?.stroke ?? defaultColor}
-              <marker.component
-                {...marker.props}
-                series={group.series.name}
-                data={segmentData}
-                seriesColor={segmentColor}
-              />
-            {/if}
-          {/each}
-        {:else}
-          {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
-          {@const seriesColor = segs[0]?.style?.stroke?.stroke ?? defaultColor}
-          <marker.component
-            {...marker.props}
-            series={group.series.name}
-            data={group.series.data}
-            seriesColor={seriesColor}
-          />
-        {/if}
-      {:else if marker.type === 'hover'}
-        {@const seriesPoints = matchedPoints.filter((p) => p.series === group.series.name)}
-        {#if marker.scope === 'segment'}
-          {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
-          {#each segs as seg, segIdx (`${group.series.name}-hover-segment-${segIdx}`)}
-            {@const segPoints = seriesPoints.filter((p) => matchesSegmentX(p.x, seg))}
-            {#if segPoints.length > 0}
-              <HoverMarker
-                data={segPoints}
-                ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
-                ruleY={marker.ruleY !== false && (impliesRuleY || marker.ruleY === true) ? ruleY : null}
-                showLabels={marker.showLabels}
-                ruleStyle={marker.ruleStyle}
-                dotStyle={marker.dotStyle}
-                fontStyle={marker.fontStyle}
-                seriesColor={seg.style?.stroke?.stroke ?? defaultColor}
-              />
-            {/if}
-          {/each}
-        {:else}
-          {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
-          <HoverMarker
-            data={seriesPoints}
-            ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
-            ruleY={marker.ruleY !== false && (impliesRuleY || marker.ruleY === true) ? ruleY : null}
-            showLabels={marker.showLabels}
-            ruleStyle={marker.ruleStyle}
-            dotStyle={marker.dotStyle}
-            fontStyle={marker.fontStyle}
-            seriesColor={segs[0]?.style?.stroke?.stroke ?? defaultColor}
-          />
-        {/if}
-      {/if}
-    {/each}
-  {/each}
-
   {#if showVals}
-    <ValueLabels {lastPoints} values={styles.values} />
+    <ValueLabels
+      {lastPoints}
+      values={styles.values}
+      onOverflow={labelMargin.report}
+      disabledFor={effectiveDisabledFor}
+      onHoverSeries={hoverIsolate ? (name) => { hoverIsolatedSeries = name; } : undefined}
+      onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
+    />
   {/if}
-  </RuleLayout>
-  {/snippet}
 </BasePlotLayout>

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

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