@fundar/data-chart-telling 0.0.24 → 0.0.26

package/dist/markers/HoverMarker.svelte.d.ts

@@ -1,6 +1,5 @@
 import type { MarkerProps } from '../types/markers/props';
-import type { AxisValue } from '../types/plots/axis';
-import type { DotStyle, FontStyle, StrokeStyle } from '../types/plots/styling';
+import type { HoverMarkerConfig } from '../types/markers/common';
 import type { HoverDisplayPoint } from '../types/layout/tooltip';
 /**
  * In-SVG hover highlight, rendered *inside* a `<Plot>`. Because it positions
@@ -8,15 +7,22 @@ import type { HoverDisplayPoint } from '../types/layout/tooltip';
  * correctly in every facet — that is what makes cross-facet sync work without
  * any pixel math. Draws optional x/y crosshair rules plus a dot + value label
  * for each matched point.
+ *
+ * Takes the raw `marker` config plus the couple of things it can't know on
+ * its own — `activePoint` (the specific matched point actually under the
+ * cursor, for the crosshair position; see `controller.svelte.ts`'s own doc
+ * comment) and whether the active hover strategy implies a crosshair on
+ * each axis by default — the same "component owns its own rendering"
+ * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
+ * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
+ * "no crosshair".
  */
 interface Props extends MarkerProps<HoverDisplayPoint> {
-    ruleX?: AxisValue | null;
-    ruleY?: AxisValue | null;
-    showLabels?: boolean;
-    format?: (point: HoverDisplayPoint) => string;
-    ruleStyle?: StrokeStyle;
-    dotStyle?: DotStyle;
-    fontStyle?: FontStyle;
+    /** Narrowed to just the fields this component reads — `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
+    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'showLabels' | 'format' | 'ruleStyle' | 'dotStyle' | 'fontStyle'>;
+    activePoint?: HoverDisplayPoint | null;
+    impliesCrosshairX?: boolean;
+    impliesCrosshairY?: boolean;
 }
 declare const HoverMarker: import("svelte").Component<Props, {}, "">;
 type HoverMarker = ReturnType<typeof HoverMarker>;

package/dist/markers/LineMarker.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Line } from 'svelteplot';
+  import type { LineMarkerConfig } from '../types/markers/common';
+
+  /** Renders one `'line'` marker as a `<Line>` call — just the stroke. Endpoint dots are a separate `'dot'` marker. */
+  let { marker }: { marker: LineMarkerConfig } = $props();
+</script>
+
+<Line
+  data={marker.data}
+  x={marker.x}
+  y={marker.y}
+  stroke={marker.style?.stroke}
+  strokeWidth={marker.style?.strokeWidth}
+  strokeOpacity={marker.style?.strokeOpacity}
+  strokeDasharray={marker.style?.strokeDasharray}
+  strokeLinejoin={marker.style?.strokeLinejoin}
+  strokeLinecap={marker.style?.strokeLinecap}
+/>

package/dist/markers/LineMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LineMarkerConfig } from '../types/markers/common';
+type $$ComponentProps = {
+    marker: LineMarkerConfig;
+};
+declare const LineMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type LineMarker = ReturnType<typeof LineMarker>;
+export default LineMarker;

package/dist/markers/LinkMarker.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Geo } from 'svelteplot';
+  import { resolveAccessor } from '../plots/utils/accessors';
+  import { greatCircleInterpolate } from '../plots/utils/geoAccessors';
+  import type { GeoLinkMarkerConfig } from '../types/markers/geo';
+
+  /** Renders one `'link'` marker — geodesic-aware lines between point pairs, as a synthetic `LineString` fed through `<Geo>`. */
+  let { marker }: { marker: GeoLinkMarkerConfig } = $props();
+
+  const getX1 = $derived(resolveAccessor(marker.x1));
+  const getY1 = $derived(resolveAccessor(marker.y1));
+  const getX2 = $derived(resolveAccessor(marker.x2));
+  const getY2 = $derived(resolveAccessor(marker.y2));
+
+  const linkFeatures = $derived(
+    marker.data.map((d) => ({
+      type: 'Feature' as const,
+      properties: {},
+      geometry: {
+        type: 'LineString' as const,
+        coordinates:
+          marker.curve === 'linear'
+            ? [
+                [Number(getX1(d)), Number(getY1(d))],
+                [Number(getX2(d)), Number(getY2(d))],
+              ]
+            : greatCircleInterpolate(Number(getX1(d)), Number(getY1(d)), Number(getX2(d)), Number(getY2(d))),
+      },
+    })),
+  );
+</script>
+
+<!-- No `fill` prop: svelteplot treats any string as scale-worthy unless it's a real CSS color, so a literal `'none'` would run through the color scale instead of staying unfilled. Omitting it leaves svelteplot's own unfilled default in place. -->
+<Geo
+  class="link"
+  data={linkFeatures}
+  stroke={marker.style?.stroke ?? 'currentColor'}
+  strokeWidth={marker.style?.strokeWidth ?? 1}
+  strokeOpacity={marker.style?.strokeOpacity}
+  strokeDasharray={marker.style?.strokeDasharray}
+  style="vector-effect: non-scaling-stroke"
+/>

package/dist/markers/LinkMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { GeoLinkMarkerConfig } from '../types/markers/geo';
+type $$ComponentProps = {
+    marker: GeoLinkMarkerConfig;
+};
+declare const LinkMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinkMarker = ReturnType<typeof LinkMarker>;
+export default LinkMarker;

package/dist/markers/RuleMarker.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { RuleX, RuleY } from 'svelteplot';
+  import type { AxisValue } from '../types/layout/scales';
+  import type { StrokeStyle } from '../types/plots/styling';
+
+  /**
+   * A single vertical (`axis: 'x'`) or horizontal (`axis: 'y'`) reference
+   * line at `value` — shared by author-configured `'rule'` markers and
+   * `HoverMarker`'s crosshair. Falls back to `'currentColor'`/`1` when the
+   * caller supplies no style.
+   */
+  let { axis, value, style }: { axis: 'x' | 'y'; value: AxisValue; style?: StrokeStyle } = $props();
+
+  const RuleMark = $derived(axis === 'x' ? RuleX : RuleY);
+</script>
+
+<RuleMark
+  data={[{ v: value }]}
+  {...axis === 'x' ? { x: (d: { v: AxisValue }) => d.v } : { y: (d: { v: AxisValue }) => d.v }}
+  stroke={style?.stroke ?? 'currentColor'}
+  strokeWidth={style?.strokeWidth ?? 1}
+  strokeOpacity={style?.strokeOpacity ?? 1}
+  strokeDasharray={style?.strokeDasharray}
+/>

package/dist/markers/RuleMarker.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { AxisValue } from '../types/layout/scales';
+import type { StrokeStyle } from '../types/plots/styling';
+type $$ComponentProps = {
+    axis: 'x' | 'y';
+    value: AxisValue;
+    style?: StrokeStyle;
+};
+declare const RuleMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type RuleMarker = ReturnType<typeof RuleMarker>;
+export default RuleMarker;

package/dist/markers/SphereMarker.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Sphere } from 'svelteplot';
+  import type { GeoSphereMarkerConfig } from '../types/markers/geo';
+
+  /** Renders one `'sphere'` marker — the outer globe outline. */
+  let { marker }: { marker: GeoSphereMarkerConfig } = $props();
+</script>
+
+<Sphere
+  fill={marker.style?.fill}
+  fillOpacity={marker.style?.fillOpacity}
+  stroke={marker.style?.stroke ?? 'currentColor'}
+  strokeWidth={marker.style?.strokeWidth ?? 1}
+  style="vector-effect: non-scaling-stroke"
+/>

package/dist/markers/SphereMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { GeoSphereMarkerConfig } from '../types/markers/geo';
+type $$ComponentProps = {
+    marker: GeoSphereMarkerConfig;
+};
+declare const SphereMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type SphereMarker = ReturnType<typeof SphereMarker>;
+export default SphereMarker;

package/dist/markers/TextMarker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="TData = Record<string, unknown>">
   import { Text } from 'svelteplot';
   import type { MarkerProps } from '../types/markers/props';
-  import type { AxisValue } from '../types/plots/axis';
+  import type { AxisValue } from '../types/layout/scales';
   import type { FontStyle } from '../types/plots/styling';
 
   interface Props extends MarkerProps<TData> {

package/dist/markers/TextMarker.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { MarkerProps } from '../types/markers/props';
-import type { AxisValue } from '../types/plots/axis';
+import type { AxisValue } from '../types/layout/scales';
 import type { FontStyle } from '../types/plots/styling';
 declare function $$render<TData = Record<string, unknown>>(): {
     props: MarkerProps<TData> & {

package/dist/markers/VectorMarker.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Vector } from 'svelteplot';
+  import type { GeoVectorMarkerConfig } from '../types/markers/geo';
+
+  /** Renders one `'vector'` marker — arrows/spikes at points. */
+  let { marker }: { marker: GeoVectorMarkerConfig } = $props();
+</script>
+
+<Vector
+  data={marker.data}
+  x={marker.x}
+  y={marker.y}
+  length={marker.length}
+  rotate={marker.rotate}
+  shape={marker.shape ?? 'arrow'}
+  anchor={marker.anchor}
+  fill={marker.style?.fill ?? 'currentColor'}
+  stroke={marker.style?.stroke}
+  strokeWidth={marker.style?.strokeWidth}
+/>

package/dist/markers/VectorMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { GeoVectorMarkerConfig } from '../types/markers/geo';
+type $$ComponentProps = {
+    marker: GeoVectorMarkerConfig;
+};
+declare const VectorMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type VectorMarker = ReturnType<typeof VectorMarker>;
+export default VectorMarker;

package/dist/markers/inset/InsetMarker.svelte

@@ -4,12 +4,13 @@
   import { insetBox } from './insetLayout';
   import { filterGeometryParts } from '../../plots/utils/geoAccessors';
   import TooltipLayout from '../../layout/tooltip/TooltipLayout.svelte';
-  import type { GeoInsetMarker } from '../../types/markers/geo';
+  import type { GeoInsetMarkerConfig } from '../../types/markers/geo';
   import type { GeoFeature } from '../../types/plots/data/geo';
+  import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
 
   /**
    * A small, independently-projected map panel anchored to a corner/edge of
-   * the plot — see `GeoInsetMarker`'s doc comment. Renders raw `<path>`s via
+   * the plot — see `GeoInsetMarkerConfig`'s doc comment. Renders raw `<path>`s via
    * its own `d3-geo` `geoPath`, deliberately not svelteplot's `<Geo>` mark:
    * that mark is bound to the plot's *shared* projection scale, but an inset
    * needs its own, independently fit to just what it's showing.
@@ -22,8 +23,10 @@
     left = 0,
     top = 0,
     defaultFill,
+    tooltipAnchorX,
+    tooltipAnchorY,
   }: {
-    marker: GeoInsetMarker<TProps>;
+    marker: GeoInsetMarkerConfig<TProps>;
     /**
      * The plot's own already-tagged features (`__id` set), with full,
      * unreduced geometry regardless of the plot's own `excludeParts` — used
@@ -45,6 +48,9 @@
     left?: number;
     top?: number;
     defaultFill: string;
+    /** The plot's own top-level `tooltip.anchorX`/`anchorY` — the fallback this inset's own tooltip inherits when its own is unset, before the system default. */
+    tooltipAnchorX?: TooltipAnchorX;
+    tooltipAnchorY?: TooltipAnchorY;
   } = $props();
 
   const insetFeatures = $derived.by((): GeoFeature<Record<string, unknown>>[] => {
@@ -84,44 +90,33 @@
     return geoPath(projection);
   });
 
-  /**
-   * Nearest-feature hover, local to this inset only — mirrors the main
-   * map's own "always nearest feature centroid" behaviour (see `Plot.svelte`),
-   * but computed against this inset's own fitted `path`/projection instead
-   * of the plot's shared one, since svelteplot's `<Pointer>` (which drives
-   * the main map's hover) only ever matches the main projection's own
-   * feature positions — it has no way to reach content an inset draws at a
-   * wholly different scale/location.
-   */
-  const centroids = $derived.by(() => {
-    if (!path) return [];
-    return insetFeatures.map((f) => ({ feature: f, centroid: path.centroid(f as GeoJSON.Feature) }));
-  });
-
   let hovered = $state<{ feature: GeoFeature<Record<string, unknown>>; x: number; y: number } | null>(null);
 
-  // Any point within the inset box always matches its nearest feature —
-  // there's no reason for a hover inside a small, self-contained panel to
-  // ever come up empty, so the threshold is just the box's own diagonal.
-  const maxDistance = $derived(Math.hypot(box.width, box.height));
+  /**
+   * Purely a coordinate reference (`pointer-events: none` — never itself a
+   * hover target) sized exactly to the inset's own box, so `onInsetPointer*`
+   * below can convert a screen-space pointer event into the same box-local
+   * `x`/`y` space `TooltipLayout`'s `bounds` expects, the same way
+   * `BasePlotLayout`'s own cursor tracking does for the main map.
+   */
+  let boxRectEl = $state<SVGRectElement>();
 
-  function onInsetPointerMove(e: PointerEvent) {
-    const rect = (e.currentTarget as SVGRectElement).getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    let nearest: (typeof centroids)[number] | null = null;
-    let nearestDist = Infinity;
-    for (const c of centroids) {
-      const d = Math.hypot(c.centroid[0] - x, c.centroid[1] - y);
-      if (d < nearestDist) {
-        nearestDist = d;
-        nearest = c;
-      }
-    }
-    hovered = nearest && nearestDist <= maxDistance ? { feature: nearest.feature, x, y } : null;
+  /**
+   * Which exact feature `<path>` the browser's own SVG hit-testing resolved
+   * the event to — mirrors the main map's own `<Geo onpointerenter>` (see
+   * `Plot.svelte`) rather than approximating it by nearest centroid
+   * distance, which used to make hover pick the wrong (if geometrically
+   * nearer-by-centroid) neighboring feature, exactly the bug that fix
+   * addressed for the main map.
+   */
+  function onInsetFeaturePointer(e: PointerEvent, f: GeoFeature<Record<string, unknown>>) {
+    const rect = boxRectEl?.getBoundingClientRect();
+    const x = e.clientX - (rect?.left ?? 0);
+    const y = e.clientY - (rect?.top ?? 0);
+    hovered = { feature: f, x, y };
   }
 
-  function onInsetPointerLeave() {
+  function onInsetFeatureLeave() {
     hovered = null;
   }
 </script>
@@ -129,6 +124,7 @@
 {#if path}
   <g class="dct-geo-inset" transform="translate({box.left + left}, {box.top + top})">
     {#each insetFeatures as f, i (i)}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <path
         d={path(f as GeoJSON.Feature) ?? undefined}
         fill={marker.style?.fill ?? defaultFill}
@@ -136,19 +132,14 @@
         stroke={marker.style?.stroke ?? 'currentColor'}
         stroke-width={marker.style?.strokeWidth ?? 0.5}
         style="vector-effect: non-scaling-stroke"
+        onpointerenter={marker.tooltip ? (e: PointerEvent) => onInsetFeaturePointer(e, f) : undefined}
+        onpointermove={marker.tooltip ? (e: PointerEvent) => onInsetFeaturePointer(e, f) : undefined}
+        onpointerleave={marker.tooltip ? onInsetFeatureLeave : undefined}
       />
     {/each}
     {#if marker.tooltip}
       <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <rect
-        x={0}
-        y={0}
-        width={box.width}
-        height={box.height}
-        fill="transparent"
-        onpointermove={onInsetPointerMove}
-        onpointerleave={onInsetPointerLeave}
-      />
+      <rect x={0} y={0} width={box.width} height={box.height} fill="transparent" pointer-events="none" bind:this={boxRectEl} />
     {/if}
     {#if marker.tooltip}
       {@const tooltip = marker.tooltip}
@@ -162,6 +153,8 @@
             rows={hovered ? [hovered.feature] : []}
             format={tooltip.format}
             content={tooltip.content}
+            anchorX={tooltip.anchorX ?? tooltipAnchorX}
+            anchorY={tooltip.anchorY ?? tooltipAnchorY}
           />
         </div>
       </foreignObject>

package/dist/markers/inset/InsetMarker.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { GeoInsetMarker } from '../../types/markers/geo';
+import type { GeoInsetMarkerConfig } from '../../types/markers/geo';
 import type { GeoFeature } from '../../types/plots/data/geo';
+import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
 declare function $$render<TProps extends Record<string, unknown>>(): {
     props: {
-        marker: GeoInsetMarker<TProps>;
+        marker: GeoInsetMarkerConfig<TProps>;
         /**
          * The plot's own already-tagged features (`__id` set), with full,
          * unreduced geometry regardless of the plot's own `excludeParts` — used
@@ -26,6 +27,9 @@ declare function $$render<TProps extends Record<string, unknown>>(): {
         left?: number;
         top?: number;
         defaultFill: string;
+        /** The plot's own top-level `tooltip.anchorX`/`anchorY` — the fallback this inset's own tooltip inherits when its own is unset, before the system default. */
+        tooltipAnchorX?: TooltipAnchorX;
+        tooltipAnchorY?: TooltipAnchorY;
     };
     exports: {};
     bindings: "";

package/dist/plots/bar/Plot.svelte

@@ -2,31 +2,24 @@
   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 { 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';
 
@@ -38,9 +31,9 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStyles,
+    BasePlotStylesConfig,
     BarSegmentStyle,
-    Marker,
+    AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>
   >;
 
@@ -73,23 +66,21 @@
   const fmtVal = $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 +103,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
@@ -171,76 +161,56 @@
     ),
   );
 
-  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,
+  });
 </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}
   xTickRotate={resolvedScales?.x?.tickRotate}
+  markers={({ setHoverMatch, clearHoverMatch }) => [
+    ...buildBarMarkers({
+      groupedSeries,
+      barLayout,
+      isHorizontal,
+      hoverPoints,
+      palette: cfg.palette,
+      disabledFillFor: (name) => disabledFillOverride(legendInteraction?.disabledSeries.get(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}
+  {#if showVals}
+    {#each groupedSeries as group, seriesIndex (group.series.name)}
       <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}
     {/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

@@ -2,7 +2,7 @@
   import { Text } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   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';

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

@@ -1,5 +1,5 @@
 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';