@fundar/data-chart-telling 0.0.26 → 0.0.27

package/dist/layout/facet/FacetLayout.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FacetColumns, FacetCellSnippet } from '../../types/charts/common';
+import type { FacetColumns, FacetMode, Responsive, FacetCellSnippet, FacetIndicatorSnippet, FacetNavSnippet } from '../../types/layout/facet';
 import type { Accessor } from '../../types/plots/data/common';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {
@@ -7,6 +7,12 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         columns?: FacetColumns;
         values?: string[];
         gap?: number;
+        mode?: Responsive<FacetMode>;
+        visible?: number;
+        pageSize?: number;
+        formatIndicator?: (current: number, total: number) => string;
+        indicator?: FacetIndicatorSnippet;
+        navButton?: FacetNavSnippet;
         width: number;
         height: number;
         cell: FacetCellSnippet<TRow>;

package/dist/layout/legend/ContinuousSection.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
-  import type { ContinuousLegendSection } from '../../types/charts/legend';
+  import type { ContinuousLegendSection } from '../../types/layout/legend';
   import { makeColorScale } from '../../utils/color';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { getLegendInteraction, createLegendInteraction } from './interaction.svelte';

package/dist/layout/legend/ContinuousSection.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ContinuousLegendSection } from '../../types/charts/legend';
+import type { ContinuousLegendSection } from '../../types/layout/legend';
 type $$ComponentProps = {
     section: ContinuousLegendSection;
 };

package/dist/layout/legend/DiscreteSection.svelte

@@ -3,7 +3,7 @@
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
   import { getLegendInteraction, createLegendInteraction } from './interaction.svelte';
-  import type { DiscreteLegendSection, LegendItem } from '../../types/charts/legend';
+  import type { DiscreteLegendSection, LegendItem } from '../../types/layout/legend';
   import type { LineStyle } from '../../types/plots/constants';
 
   let { section }: { section: DiscreteLegendSection } = $props();

package/dist/layout/legend/DiscreteSection.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { DiscreteLegendSection } from '../../types/charts/legend';
+import type { DiscreteLegendSection } from '../../types/layout/legend';
 type $$ComponentProps = {
     section: DiscreteLegendSection;
 };

package/dist/layout/legend/LegendLayout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { LegendSection } from '../../types/charts/legend';
+  import type { LegendSection } from '../../types/layout/legend';
   import DiscreteSection from './DiscreteSection.svelte';
   import ContinuousSection from './ContinuousSection.svelte';
 

package/dist/layout/legend/LegendLayout.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LegendSection } from '../../types/charts/legend';
+import type { LegendSection } from '../../types/layout/legend';
 type $$ComponentProps = {
     sections: LegendSection[];
 };

package/dist/layout/legend/interaction.svelte.d.ts

@@ -1,7 +1,15 @@
 import type { LegendInteractionStore } from '../../types/layout/legend';
 /** Create + register the shared legend-interaction store. Call during component init. */
 export declare function provideLegendInteraction(): LegendInteractionStore;
-/** Read the shared legend-interaction store, or `null` when there is no provider. */
+/**
+ * Read the shared legend-interaction store, or `null` when there is no provider.
+ *
+ * Only resolves correctly when called during a real descendant component's
+ * own `<script>` instantiation, not from inside a `{@render}`ed snippet body
+ * — snippets run in their author's scope rather than as a fresh component
+ * instance. `BaseChart`'s `plot` snippet gets the same data via its `legend`
+ * context field instead, which works from either scope.
+ */
 export declare function getLegendInteraction(): LegendInteractionStore | null;
 /** A private legend-interaction store for a legend/plot used outside of a {@link BaseChart}. */
 export declare function createLegendInteraction(): LegendInteractionStore;

package/dist/layout/legend/interaction.svelte.js

@@ -13,7 +13,15 @@ export function provideLegendInteraction() {
     setContext(LEGEND_INTERACTION_KEY, store);
     return store;
 }
-/** Read the shared legend-interaction store, or `null` when there is no provider. */
+/**
+ * Read the shared legend-interaction store, or `null` when there is no provider.
+ *
+ * Only resolves correctly when called during a real descendant component's
+ * own `<script>` instantiation, not from inside a `{@render}`ed snippet body
+ * — snippets run in their author's scope rather than as a fresh component
+ * instance. `BaseChart`'s `plot` snippet gets the same data via its `legend`
+ * context field instead, which works from either scope.
+ */
 export function getLegendInteraction() {
     return getContext(LEGEND_INTERACTION_KEY) ?? null;
 }

package/dist/layout/timeline/Timeline.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Plot, RuleX, RuleY, Text } from 'svelteplot';
-  import type { Orientation, TimeValue } from '../../types/charts/common';
+  import type { Orientation, TimeValue } from '../../types/layout/timeline';
 
   /**
    * Purely visual time axis: a baseline rule plus the ordered step labels with

package/dist/layout/timeline/Timeline.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Orientation, TimeValue } from '../../types/charts/common';
+import type { Orientation, TimeValue } from '../../types/layout/timeline';
 type $$ComponentProps = {
     currentValue: TimeValue;
     values: TimeValue[];

package/dist/layout/timeline/TimelineLayout.svelte

@@ -7,7 +7,7 @@
     TimeValue,
     TimelineChildSnippet,
     TimelineInterpolation,
-  } from '../../types/charts/common';
+  } from '../../types/layout/timeline';
   import type { Accessor } from '../../types/plots/data/common';
 
   /**

package/dist/layout/timeline/TimelineLayout.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Orientation, TimeValue, TimelineChildSnippet, TimelineInterpolation } from '../../types/charts/common';
+import type { Orientation, TimeValue, TimelineChildSnippet, TimelineInterpolation } from '../../types/layout/timeline';
 import type { Accessor } from '../../types/plots/data/common';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {

package/dist/layout/tooltip/controller.svelte.js

@@ -47,12 +47,26 @@ export function createHoverController(args) {
      * point at the row under the cursor rather than an arbitrary matched
      * sibling. `BasePlotLayout` gates actual display with
      * `impliesCrosshairX`/`Y` + the marker's own `ruleX`/`ruleY` props.
+     *
+     * `activeSeries` alone can't disambiguate two matched rows that share the
+     * same (or absent) series tag — e.g. an ungrouped bar/line chart where two
+     * categories tie on the matched axis value. `onPointer` sets `activeX`/
+     * `activeY` straight from the hit row, so when more than one series-tied
+     * candidate remains, narrowing to the one whose own x/y equals the hit
+     * row's picks the actual row under the cursor instead of an arbitrary tie.
      */
     const activePoint = $derived.by(() => {
         if (matched.length === 0)
             return null;
-        const series = args.hover().activeSeries;
-        return matched.find((p) => p.series === series) ?? matched[0];
+        const h = args.hover();
+        const bySeries = matched.filter((p) => p.series === h.activeSeries);
+        const candidates = bySeries.length > 0 ? bySeries : matched;
+        if (candidates.length === 1)
+            return candidates[0];
+        const { activeX, activeY } = h;
+        if (activeX == null || activeY == null)
+            return candidates[0];
+        return candidates.find((p) => eq(p.x, activeX) && eq(p.y, activeY)) ?? candidates[0];
     });
     // Whether the current strategy implies a crosshair rule on each axis by default.
     const _impliesCrosshairX = $derived(impliesCrosshairX(args.hover().strategy));

package/dist/markers/HoverMarker.svelte

@@ -102,7 +102,7 @@
 {/if}
 
 {#if data.length > 0}
-  {#each data as point (point.series ?? `${point.x}_${point.y}`)}
+  {#each data as point (`${point.series ?? ''}_${point.x}_${point.y}`)}
     <!-- Pixel nudge for plot kinds whose series position isn't fully captured
          by x/y alone (e.g. BarPlot's 'grouped' layout) — see HoverDisplayPoint.dx/dy. -->
     <g transform="translate({point.dx ?? 0}, {point.dy ?? 0})">
@@ -120,7 +120,7 @@
     </g>
   {/each}
   {#if showLabels}
-    {#each data as point (point.series ?? `${point.x}_${point.y}`)}
+    {#each data as point (`${point.series ?? ''}_${point.x}_${point.y}`)}
       <g transform="translate({point.dx ?? 0}, {point.dy ?? 0})">
         <TextMarker
           data={[point]}

package/dist/plots/bar/Plot.svelte

@@ -10,6 +10,7 @@
   import { getConfiguration } from '../../configuration/config.svelte';
   import { buildGroupedSeries, validateSegments, buildScopedMarkerGroups } from '../utils/segments';
   import { createBarLayout } from './layout.svelte';
+  import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
   import { buildHoverPoints } from './hoverPoints';
   import { buildBarMarkers } from './buildBarMarkers';
   import ValueLabels from './ValueLabels.svelte';
@@ -22,6 +23,7 @@
   import type { BasePlotStylesConfig } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
 
   /**
    * A bar chart, vertical by default. Accepts either a pre-built `series`
@@ -63,7 +65,7 @@
     buildGroupedSeries<Series<TData>, BarSegmentStyle>(resolvedSeries, segments, false),
   );
   const showVals = $derived(styles.values?.show ?? false);
-  const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
   const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'outside');
 
   // `xAcc`/`yAcc` are always data-semantic (category/value) — independent of
@@ -153,6 +155,23 @@
   // `row` (see BasePlotLayout/HoverPoint) is what lets the template recover the
   // semantic category regardless of which axis it landed on.
   const legendInteraction = $derived(getLegendInteraction());
+  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)
+    );
+  }
+
   // A legend-disabled series is dimmed on the bar itself, but never surfaces
   // in hover/tooltip — its points are simply absent from the candidate list.
   const hoverPoints = $derived(
@@ -178,6 +197,13 @@
     // comment.
     pointMatching: 'contains' as const,
   });
+
+  // A bar's value label can grow past the plot's own content box (e.g. a
+  // tall bar's `anchor: 'outside'` label pushing past the top margin) —
+  // reserving real space there is what each label's own overflow
+  // measurement feeds into here, via a tracker local to this one `<Plot>`
+  // instance. See `labelOverflow.svelte.ts`.
+  const labelMargin = createLabelMarginTracker(() => margins);
 </script>
 
 <BasePlotLayout
@@ -189,7 +215,7 @@
   getY={plotGetY}
   {hover}
   scales={resolvedScales}
-  {margins}
+  margins={labelMargin.resolvedMargins}
   xTickRotate={resolvedScales?.x?.tickRotate}
   markers={({ setHoverMatch, clearHoverMatch }) => [
     ...buildBarMarkers({
@@ -198,7 +224,7 @@
       isHorizontal,
       hoverPoints,
       palette: cfg.palette,
-      disabledFillFor: (name) => disabledFillOverride(legendInteraction?.disabledSeries.get(name)),
+      disabledFillFor: (name) => disabledFillOverride(effectiveDisabledFor(name)),
       active: hover.active,
       setHoverMatch,
       clearHoverMatch,
@@ -210,7 +236,20 @@
 >
   {#if showVals}
     {#each groupedSeries as group, seriesIndex (group.series.name)}
-      <ValueLabels {group} {seriesIndex} {barLayout} {isHorizontal} {valAnchor} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />
+      <ValueLabels
+        {group}
+        {seriesIndex}
+        {barLayout}
+        {isHorizontal}
+        {valAnchor}
+        {formatValue}
+        values={styles.values}
+        axisColor={cfg.axis.color}
+        disabled={effectiveDisabledFor(group.series.name)}
+        onHoverSeries={hoverIsolate ? () => { hoverIsolatedSeries = group.series.name; } : undefined}
+        onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
+        onOverflow={labelMargin.report}
+      />
     {/each}
   {/if}
 </BasePlotLayout>

package/dist/plots/bar/ValueLabels.svelte

@@ -1,11 +1,15 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { Text } from 'svelteplot';
+  import { Text, usePlot } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
+  import { disabledFillOverride } from '../utils/legendDisabled';
+  import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
   import type { Series } from '../../types/plots/data/common';
   import type { ValuesStyle } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
   import type { VisualGroup } from '../../types/plots/segments/config';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
+  import type { MarginOverflow } from '../utils/labelOverflow.svelte';
   import type { BarLayout } from './layout.svelte';
 
   /**
@@ -21,20 +25,56 @@
     barLayout,
     isHorizontal,
     valAnchor,
-    fmtVal,
+    formatValue,
     values,
     axisColor,
+    disabled,
+    onHoverSeries,
+    onHoverEnd,
+    onOverflow,
   }: {
     group: VisualGroup<Series<TData>, BarSegmentStyle>;
     seriesIndex: number;
     barLayout: BarLayout<TData>;
     isHorizontal: boolean;
     valAnchor: ValueAnchor;
-    fmtVal: (value: number, seriesName: string) => string;
+    formatValue: (value: number, seriesName: string) => string;
     values: ValuesStyle | undefined;
     axisColor: string;
+    /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
+    disabled?: LegendDisabledStyle;
+    /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
+    onHoverSeries?: () => void;
+    onHoverEnd?: () => void;
+    /** Reports how far this label overflows the plot's own content box, in pixels, on each side (0 = no overflow). */
+    onOverflow?: (overflow: MarginOverflow) => void;
   } = $props();
 
+  const fillOverride = $derived(disabledFillOverride(disabled));
+  const plot = usePlot();
+  let groupEl: SVGGElement | undefined = $state();
+
+  watchLabelOverflow({
+    el: () => groupEl,
+    bounds: () => {
+      // getBBox() inside isn't itself tracked — depend on whatever actually
+      // changes the rendered label layout so this re-measures.
+      void group;
+      void values;
+      void valAnchor;
+      const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
+      const yRange = plot.scales.y?.fn?.range?.()?.map(Number);
+      if (!xRange || !yRange) return undefined;
+      return {
+        left: Math.min(xRange[0], xRange[1]),
+        right: Math.max(xRange[0], xRange[1]),
+        top: Math.min(yRange[0], yRange[1]),
+        bottom: Math.max(yRange[0], yRange[1]),
+      };
+    },
+    onOverflow: (overflow) => onOverflow?.(overflow),
+  });
+
   const xFn = $derived(resolveAccessor(group.series.x));
   const yFn = $derived(resolveAccessor(group.series.y));
 
@@ -68,23 +108,29 @@
   const resolvedTextAnchor = $derived(font?.textAnchor === 'outside' ? undefined : font?.textAnchor);
 </script>
 
-<Text
-  data={group.series.data}
-  {...isHorizontal ? { y: xFn, x: valueTextFn } : { x: xFn, y: valueTextFn }}
-  text={(d: TData) => fmtVal(Number(yFn(d)), group.series.name)}
-  dx={font?.dx ?? (isHorizontal ? defaultOffset : groupOffset.dx)}
-  dy={font?.dy ?? (isHorizontal ? groupOffset.dy : defaultOffset)}
-  textAnchor={resolvedTextAnchor ?? (isHorizontal ? (valAnchor === 'outside' || valAnchor === 'end' ? 'start' : valAnchor === 'start' ? 'end' : 'middle') : 'middle')}
-  lineAnchor={font?.lineAnchor ?? (isHorizontal ? 'middle' : defaultLA)}
-  lineHeight={font?.lineHeight}
-  rotate={font?.rotate}
-  class={font?.class}
-  textClass={font?.textClass}
-  fill={font?.fill ?? axisColor}
-  fontSize={font?.fontSize ?? 12}
-  fontWeight={font?.fontWeight}
-  fontStyle={font?.fontStyle}
-  stroke={font?.stroke}
-  strokeWidth={font?.strokeWidth}
-  paintOrder={font?.paintOrder}
-/>
+<!-- svelteplot's Text mark never wires pointer handlers to its DOM node,
+     despite declaring them in its types — a wrapping <g> catches the
+     boundary crossing instead (pointerenter/leave fire on every ancestor). -->
+<g bind:this={groupEl} role="presentation" onpointerenter={onHoverSeries} onpointerleave={onHoverEnd}>
+  <Text
+    data={group.series.data}
+    {...isHorizontal ? { y: xFn, x: valueTextFn } : { x: xFn, y: valueTextFn }}
+    text={(d: TData) => formatValue(Number(yFn(d)), group.series.name)}
+    dx={font?.dx ?? (isHorizontal ? defaultOffset : groupOffset.dx)}
+    dy={font?.dy ?? (isHorizontal ? groupOffset.dy : defaultOffset)}
+    textAnchor={resolvedTextAnchor ?? (isHorizontal ? (valAnchor === 'outside' || valAnchor === 'end' ? 'start' : valAnchor === 'start' ? 'end' : 'middle') : 'middle')}
+    lineAnchor={font?.lineAnchor ?? (isHorizontal ? 'middle' : defaultLA)}
+    lineHeight={font?.lineHeight}
+    rotate={font?.rotate}
+    class={font?.class}
+    textClass={font?.textClass}
+    fill={font?.fill ?? axisColor}
+    fillOpacity={fillOverride?.fillOpacity}
+    fontSize={font?.fontSize ?? 12}
+    fontWeight={font?.fontWeight}
+    fontStyle={font?.fontStyle}
+    stroke={font?.stroke}
+    strokeWidth={font?.strokeWidth}
+    paintOrder={font?.paintOrder}
+  />
+</g>

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

@@ -3,6 +3,8 @@ import type { ValuesStyle } from '../../types/layout/styles';
 import type { ValueAnchor } from '../../types/plots/constants';
 import type { BarSegmentStyle } from '../../types/plots/segments/common';
 import type { VisualGroup } from '../../types/plots/segments/config';
+import type { LegendDisabledStyle } from '../../types/layout/legend';
+import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 import type { BarLayout } from './layout.svelte';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
@@ -11,9 +13,16 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         barLayout: BarLayout<TData>;
         isHorizontal: boolean;
         valAnchor: ValueAnchor;
-        fmtVal: (value: number, seriesName: string) => string;
+        formatValue: (value: number, seriesName: string) => string;
         values: ValuesStyle | undefined;
         axisColor: string;
+        /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
+        disabled?: LegendDisabledStyle;
+        /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
+        onHoverSeries?: () => void;
+        onHoverEnd?: () => void;
+        /** Reports how far this label overflows the plot's own content box, in pixels, on each side (0 = no overflow). */
+        onOverflow?: (overflow: MarginOverflow) => void;
     };
     exports: {};
     bindings: "";

package/dist/plots/heatmap/Plot.svelte

@@ -73,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));
@@ -127,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)), ''),
       })),
   );
 
@@ -216,7 +216,7 @@
   const hover = $derived({
     active: tooltip != null || hasHoverMarker(markers),
     points: hoverPoints,
-    label: (d: TData) => fmtVal(Number(getZ(d)), ''),
+    label: (d: TData) => formatValue(Number(getZ(d)), ''),
     strategy: resolveHoverStrategy(tooltip?.strategy, markers, 'punctual'),
     sync: resolveHoverSync(tooltip?.sync, markers),
     tooltip,
@@ -244,7 +244,7 @@
       {getX}
       {getY}
       {getZ}
-      {fmtVal}
+      {formatValue}
       values={styles.values}
       defaultColor={cfg.continuous.labelColor}
     />

package/dist/plots/heatmap/ValueLabels.svelte

@@ -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

@@ -6,7 +6,7 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         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/line/Plot.svelte

@@ -9,6 +9,7 @@
   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 ValueLabels from './ValueLabels.svelte';
   import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
@@ -19,6 +20,7 @@
   import type { BasePlotStylesConfig } from '../../types/layout/styles';
   import type { LineSegmentStyle } from '../../types/plots/segments/common';
   import type { LineMarkersConfig } from '../../types/markers/line';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
 
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
@@ -56,6 +58,22 @@
 
   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)));
@@ -97,8 +115,8 @@
   const lineMarkers = $derived(
     buildLineMarkers({
       groupedSeries,
-      disabledStrokeFor: (name) => disabledStrokeOverride(legendInteraction?.disabledSeries.get(name)),
-      disabledDotsFor: (name) => disabledDotsOverride(legendInteraction?.disabledSeries.get(name)),
+      disabledStrokeFor: (name) => disabledStrokeOverride(effectiveDisabledFor(name)),
+      disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name)),
     }),
   );
 
@@ -114,31 +132,11 @@
   // 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. Grown
-  // monotonically (never shrunk) from that real `getBBox()` measurement:
-  // once the real overflow reaches ~0 (the margin now fits it), reporting
-  // that same value again is a no-op (`Math.max` of an unchanged value),
-  // which is what keeps this converging instead of oscillating between
-  // "shrink margin → overflow reappears → grow margin → …". Local to this
-  // one `<Plot>` instance — see ValueLabels.svelte's own doc comment for
-  // why that locality (vs. svelteplot's shared margin context) matters.
-  let measuredLabelMargin = $state({ left: 0, right: 0 });
-
-  function handleLabelOverflow(overflow: { left: number; right: number }) {
-    const left = Math.max(measuredLabelMargin.left, overflow.left);
-    const right = Math.max(measuredLabelMargin.right, overflow.right);
-    if (left !== measuredLabelMargin.left || right !== measuredLabelMargin.right) {
-      measuredLabelMargin = { left, right };
-    }
-  }
-
-  const resolvedMargins = $derived.by(() => {
-    if (measuredLabelMargin.left <= 0 && measuredLabelMargin.right <= 0) return margins;
-    const out = { ...margins };
-    if (measuredLabelMargin.right > 0 && margins?.right === undefined) out.right = measuredLabelMargin.right;
-    if (measuredLabelMargin.left > 0 && margins?.left === undefined) out.left = measuredLabelMargin.left;
-    return out;
-  });
+  // 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
@@ -150,13 +148,20 @@
   getY={(d) => Number(yAcc(d))}
   {hover}
   {scales}
-  margins={resolvedMargins}
+  margins={labelMargin.resolvedMargins}
   xTickRotate={scales?.x?.tickRotate}
   markers={[...lineMarkers, ...markers]}
   seriesData={resolvedSeries}
   {scopedGroups}
 >
   {#if showVals}
-    <ValueLabels {lastPoints} values={styles.values} onOverflow={handleLabelOverflow} />
+    <ValueLabels
+      {lastPoints}
+      values={styles.values}
+      onOverflow={labelMargin.report}
+      disabledFor={effectiveDisabledFor}
+      onHoverSeries={hoverIsolate ? (name) => { hoverIsolatedSeries = name; } : undefined}
+      onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
+    />
   {/if}
 </BasePlotLayout>