@fundar/data-chart-telling 0.0.25 → 0.0.27

package/dist/plots/bar/Plot.svelte

@@ -2,33 +2,28 @@
   lang="ts"
   generics="TData extends Record<string, unknown>"
 >
-  import { SvelteMap } from 'svelte/reactivity';
   import { paletteColor } from '../../utils/color';
   import { buildSeries } from '../../utils/grouping';
   import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
   import { disabledFillOverride } from '../utils/legendDisabled';
-  import { BarX, BarY } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { getConfiguration } from '../../configuration/config.svelte';
-  import { buildGroupedSeries, validateSegments, resolveSegmentsForSeries, matchesSegmentX } from '../utils/segments';
+  import { buildGroupedSeries, validateSegments, buildScopedMarkerGroups } from '../utils/segments';
   import { createBarLayout } from './layout.svelte';
+  import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
   import { buildHoverPoints } from './hoverPoints';
-  import BarSegments from './BarSegments.svelte';
+  import { buildBarMarkers } from './buildBarMarkers';
   import ValueLabels from './ValueLabels.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 { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
-  import type { Marker } from '../../types/markers/common';
+  import type { AxisBasedMarkersConfig } from '../../types/markers/common';
   import type { BasePlotProps } from '../../types/plots/props';
-  import type { AxisScale } from '../../types/plots/axis';
+  import type { AxisScale, 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 { 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`
@@ -38,9 +33,9 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStyles,
+    BasePlotStylesConfig,
     BarSegmentStyle,
-    Marker,
+    AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>
   >;
 
@@ -70,26 +65,24 @@
     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');
 
-  const seriesMarkers = $derived.by(() => {
-    const map = new SvelteMap<string, Marker[]>();
-    for (const marker of markers) {
-      if (marker.type === 'hover' && marker.series) {
-        if (!map.has(marker.series)) map.set(marker.series, []);
-        map.get(marker.series)!.push(marker);
-      }
-    }
-    return map;
-  });
-
   // `xAcc`/`yAcc` are always data-semantic (category/value) — independent of
   // which *visual* axis ends up drawing them, decided by `categoricalAxis`.
   const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
   const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
   const flat = $derived(resolvedSeries.flatMap((s) => s.data));
 
+  const scopedGroups = $derived(
+    buildScopedMarkerGroups<TData, Series<TData>, BarSegmentStyle>({
+      groupedSeries,
+      segments,
+      colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+      segmentColorFor: (style, defaultColor) => style?.fill ?? defaultColor,
+    }),
+  );
+
   /**
    * Which visual axis draws the category, and therefore whether this renders
    * as vertical bars (`BarY`, category on X) or horizontal bars (`BarX`,
@@ -112,7 +105,6 @@
     return yCategorical ? 'y' : 'x';
   });
   const isHorizontal = $derived(categoricalAxis === 'y');
-  const BarMark = $derived(isHorizontal ? BarX : BarY);
 
   /**
    * `'categorical'` is our own sentinel (BarPlot-only), not a real svelteplot
@@ -163,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(
@@ -171,76 +180,76 @@
     ),
   );
 
-  const hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
-  const hoverStrategy = $derived(resolveHoverStrategy(tooltip?.strategy, markers, categoricalAxis));
-  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, categoricalAxis),
+    sync: resolveHoverSync(tooltip?.sync, markers),
+    tooltip,
+    // The category axis is a band scale — `<Pointer>`'s nearest-point-by-
+    // distance match (svelteplot's own projection of each candidate's band
+    // centre) can disagree by a couple of pixels with where `<BarX>`/`<BarY>`
+    // (via svelteplot's `RectPath`) actually render that band, which is
+    // enough to mismatch the neighbouring category once bands get thin
+    // (many categories). The `role: 'hitArea'` bar markers `buildBarMarkers`
+    // emits hit-test the category bands directly instead — see its own doc
+    // 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
   {width}
   {height}
+  {styles}
   data={flat}
   getX={plotGetX}
   getY={plotGetY}
-  {hoverPoints}
-  label={(r) => String(yAcc(r))}
-  {tooltip}
-  {hoverActive}
-  {hoverStrategy}
-  {hoverSync}
+  {hover}
   scales={resolvedScales}
-  {margins}
+  margins={labelMargin.resolvedMargins}
   xTickRotate={resolvedScales?.x?.tickRotate}
+  markers={({ setHoverMatch, clearHoverMatch }) => [
+    ...buildBarMarkers({
+      groupedSeries,
+      barLayout,
+      isHorizontal,
+      hoverPoints,
+      palette: cfg.palette,
+      disabledFillFor: (name) => disabledFillOverride(effectiveDisabledFor(name)),
+      active: hover.active,
+      setHoverMatch,
+      clearHoverMatch,
+    }),
+    ...markers,
+  ]}
+  seriesData={resolvedSeries}
+  {scopedGroups}
 >
-  {#snippet children({ matchedPoints, ruleX, ruleY, impliesRuleX, impliesRuleY, numericMargins })}
-  <AxisLayout data={flat} getX={plotGetX} getY={plotGetY} {width} {height} {numericMargins} scales={resolvedScales} />
-  <GridLayout scales={resolvedScales} />
-  <RuleLayout {markers} seriesData={resolvedSeries} {matchedPoints} {ruleX} {ruleY} {impliesRuleX} {impliesRuleY}>
-  {#each groupedSeries as group, seriesIndex (group.series.name)}
-    {@const defaultColor = paletteColor(seriesIndex, cfg.palette)}
-    {@const disabledFill = disabledFillOverride(legendInteraction?.disabledSeries.get(group.series.name))}
-    <BarSegments {group} {seriesIndex} {barLayout} {isHorizontal} {BarMark} {defaultColor} {disabledFill} />
-
-    {#if showVals}
-      <ValueLabels {group} {seriesIndex} {barLayout} {isHorizontal} {valAnchor} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />
-    {/if}
-
-    {#each seriesMarkers.get(group.series.name) ?? [] as marker, i (`series-${group.series.name}-hover-${i}`)}
-      {#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(xAcc(p.row), 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?.fill ?? 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?.fill ?? defaultColor}
-          />
-        {/if}
-      {/if}
+  {#if showVals}
+    {#each groupedSeries as group, seriesIndex (group.series.name)}
+      <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}
-  {/each}
-  </RuleLayout>
-  {/snippet}
+  {/if}
 </BasePlotLayout>

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

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

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/plots/styles/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

@@ -1,8 +1,10 @@
 import type { Series } from '../../types/plots/data/common';
-import type { ValuesStyle } from '../../types/plots/styles/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';
 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/bar/buildBarMarkers.d.ts

@@ -0,0 +1,30 @@
+import type { Series } from '../../types/plots/data/common';
+import type { BarSegmentStyle } from '../../types/plots/segments/common';
+import type { VisualGroup } from '../../types/plots/segments/config';
+import type { HoverPoint } from '../../types/layout/tooltip';
+import type { BarMarkerConfig } from '../../types/markers/common';
+import type { BarLayout } from './layout.svelte';
+/**
+ * Every `'bar'` marker for one BarPlot render: one `role: 'segment'` marker
+ * per series (stacked) or per visual segment (grouped/overlap), plus one
+ * `role: 'hitArea'` marker per category, so a chart never gets segment
+ * markers without their hit areas.
+ *
+ * `'hitArea'` geometry is left unresolved (just `category` + `data`) —
+ * resolving it to pixels needs svelteplot's live scale, only available
+ * where the marker actually renders.
+ */
+export declare function buildBarMarkers<TData extends Record<string, unknown>>(args: {
+    groupedSeries: VisualGroup<Series<TData>, BarSegmentStyle>[];
+    barLayout: BarLayout<TData>;
+    isHorizontal: boolean;
+    hoverPoints: HoverPoint<TData>[];
+    palette: string[];
+    disabledFillFor: (seriesName: string) => {
+        fill?: string;
+        fillOpacity?: number;
+    } | undefined;
+    active: boolean;
+    setHoverMatch: (rows: TData[]) => void;
+    clearHoverMatch: () => void;
+}): BarMarkerConfig[];

package/dist/plots/bar/buildBarMarkers.js

@@ -0,0 +1,100 @@
+import { resolveAccessor } from '../utils/accessors';
+import { paletteColor } from '../../utils/color';
+/**
+ * Every `'bar'` marker for one BarPlot render: one `role: 'segment'` marker
+ * per series (stacked) or per visual segment (grouped/overlap), plus one
+ * `role: 'hitArea'` marker per category, so a chart never gets segment
+ * markers without their hit areas.
+ *
+ * `'hitArea'` geometry is left unresolved (just `category` + `data`) —
+ * resolving it to pixels needs svelteplot's live scale, only available
+ * where the marker actually renders.
+ */
+export function buildBarMarkers(args) {
+    const { groupedSeries, barLayout, isHorizontal, hoverPoints, palette, disabledFillFor, active, setHoverMatch, clearHoverMatch } = args;
+    const segmentMarkers = [];
+    groupedSeries.forEach((group, seriesIndex) => {
+        const xFn = resolveAccessor(group.series.x);
+        const yFn = resolveAccessor(group.series.y);
+        const defaultColor = paletteColor(seriesIndex, palette);
+        const disabledFill = disabledFillFor(group.series.name);
+        if (barLayout.layout === 'stacked') {
+            const stackedBaselineFn = (d) => barLayout.stackedBaseline(xFn(d), seriesIndex);
+            const stackedTopFn = (d) => barLayout.stackedBaseline(xFn(d), seriesIndex) + Number(yFn(d));
+            const marker = {
+                type: 'bar',
+                role: 'segment',
+                isHorizontal,
+                data: group.series.data,
+                style: {
+                    fill: disabledFill?.fill ?? defaultColor,
+                    fillOpacity: disabledFill?.fillOpacity ?? 1,
+                },
+            };
+            if (isHorizontal) {
+                marker.y = xFn;
+                marker.x1 = stackedBaselineFn;
+                marker.x2 = stackedTopFn;
+            }
+            else {
+                marker.x = xFn;
+                marker.y1 = stackedBaselineFn;
+                marker.y2 = stackedTopFn;
+            }
+            segmentMarkers.push(marker);
+            return;
+        }
+        for (const seg of group.visualSegments) {
+            const marker = {
+                type: 'bar',
+                role: 'segment',
+                isHorizontal,
+                data: seg.data,
+                style: {
+                    fill: disabledFill?.fill ?? seg.style.fill ?? defaultColor,
+                    fillOpacity: disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1,
+                },
+            };
+            if (isHorizontal) {
+                marker.y = xFn;
+                marker.x1 = barLayout.valueBaseline;
+                marker.x2 = yFn;
+            }
+            else {
+                marker.x = xFn;
+                marker.y1 = barLayout.valueBaseline;
+                marker.y2 = yFn;
+            }
+            if (barLayout.layout === 'grouped') {
+                if (isHorizontal) {
+                    marker.insetTop = seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2;
+                    marker.insetBottom = (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2;
+                }
+                else {
+                    marker.insetLeft = seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2;
+                    marker.insetRight = (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2;
+                }
+            }
+            segmentMarkers.push(marker);
+        }
+    });
+    const byCategory = new Map();
+    for (const p of hoverPoints) {
+        const key = isHorizontal ? p.y : p.x;
+        const list = byCategory.get(key);
+        if (list)
+            list.push(p);
+        else
+            byCategory.set(key, [p]);
+    }
+    const hitAreaMarkers = [...byCategory.entries()].map(([category, points]) => ({
+        type: 'bar',
+        role: 'hitArea',
+        isHorizontal,
+        category,
+        data: points.map((p) => p.row),
+        onpointerenter: active ? () => setHoverMatch(points.map((p) => p.row)) : undefined,
+        onpointerleave: active ? clearHoverMatch : undefined,
+    }));
+    return [...segmentMarkers, ...hitAreaMarkers];
+}

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

@@ -1,6 +1,5 @@
-import type { AxisValue } from '../../types/plots/axis';
+import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
 import type { Series } from '../../types/plots/data/common';
-import type { AxisBasedScalesConfig } from '../../types/plots/props';
 import type { BarSegmentStyle } from '../../types/plots/segments/common';
 import type { VisualGroup } from '../../types/plots/segments/config';
 import type { MarginConfig } from '../../types/plots/props';

package/dist/plots/bar/layout.svelte.js

@@ -13,7 +13,7 @@ export function createBarLayout(args) {
     const cfg = $derived(getConfiguration());
     /**
      * How series sharing the same category are arranged — see
-     * {@link import('../../types/plots/axis').AxisScale.seriesLayout}. Read
+     * {@link import('../../types/layout/scales').AxisScale.seriesLayout}. Read
      * off `scales.z` since it's the grouping axis, not the category axis itself.
      */
     const layout = $derived(args.scales().z?.seriesLayout ?? 'overlap');