@fundar/data-chart-telling 0.0.24 → 0.0.26

package/dist/plots/line/ValueLabels.svelte

@@ -4,31 +4,11 @@
   import { resolveAccessor } from '../utils/accessors';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
-  import { declutter1D, mirrorRanks } from '../utils/declutter';
+  import { declutter1D, laneAssignment } from '../utils/declutter';
   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';
 
-  // Elbow-routed leader line geometry (pixels) — a run's top/bottom pair
-  // share the shortest lane, its next-in pair the next lane out, and so on
-  // (see `mirrorRanks`'s doc comment for why sharing a lane is safe). Each
-  // lane is `LANE_STEP` further out than the last; `ELBOW_GAP` is the
-  // shortest lane (rank 0, right off the data point); `LABEL_GAP` is the
-  // small clearance between the outermost lane and the label text it feeds
-  // into.
-  const ELBOW_GAP = 10;
-  const LANE_STEP = 7;
-  const LABEL_GAP = 6;
-
-  // Default connector look — deliberately *not* each series' own colour or
-  // stroke weight: a leader line only needs to be traceable back to its
-  // label, and matching the data line's own styling reads as if it were
-  // more data, which is confusing right where several lines already
-  // converge. Neutral, thin, and solid keeps it legible as a leader — the
-  // colour and weight are still fully overridable via `values.strokeStyle`.
-  const DEFAULT_CONNECTOR_COLOR = '#94a3b8';
-  const DEFAULT_CONNECTOR_WIDTH = 0.5;
-
   /**
    * End-point value labels for `LinePlot` — one label per series at its last
    * data point, with automatic collision resolution whenever several series
@@ -40,12 +20,33 @@
   let {
     lastPoints,
     values,
+    onOverflow,
   }: {
     lastPoints: { series: Series<TData>; lastRow: TData; seriesIndex: number }[];
     values: ValuesStyle | undefined;
+    /** Reports how far the rendered labels overflow the plot's own content box, in pixels, on each side (0 = no overflow). */
+    onOverflow?: (overflow: { left: number; right: number }) => void;
   } = $props();
 
   const cfg = $derived(getConfiguration());
+
+  // Elbow-routed leader line geometry (pixels), configurable project-wide
+  // via `setConfiguration({ line: { valueLabels: {...} } })` — each lane a
+  // run's members get spread across (see `laneAssignment`'s doc comment for
+  // how lanes are picked without crossing) is `laneStep` further out than
+  // the last; `elbowGap` is the shortest lane (rank 0, right off the data
+  // point); `labelGap` is the small clearance between the outermost lane and
+  // the label text it feeds into. `connectorColor`/`connectorWidth` are the
+  // leader line's own default look — deliberately *not* each series' own
+  // colour or stroke weight (matching the data line reads as more data, not
+  // as a leader, right where several lines are already converging) — both
+  // still overridable per-plot via `values.strokeStyle`.
+  const elbowGap = $derived(cfg.line.valueLabels.elbowGap);
+  const laneStep = $derived(cfg.line.valueLabels.laneStep);
+  const labelGap = $derived(cfg.line.valueLabels.labelGap);
+  const defaultConnectorColor = $derived(cfg.line.valueLabels.connectorColor);
+  const defaultConnectorWidth = $derived(cfg.line.valueLabels.connectorWidth);
+
   const font = $derived(values?.fontStyle);
   const connector = $derived(values?.strokeStyle);
   const fmtVal = $derived(values?.format ?? ((v: number, name: string) => `${name} - ${v}`));
@@ -61,9 +62,45 @@
     valAnchor === 'start' ? ('start' as const) : valAnchor === 'end' ? ('end' as const) : ('middle' as const),
   );
   const defaultLA = $derived(valAnchor === 'outside' ? ('bottom' as const) : ('middle' as const));
+  const fontSize = $derived(typeof font?.fontSize === 'number' ? font.fontSize : 12);
 
   const plot = usePlot();
 
+  // ── Overflow measurement ─────────────────────────────────────────────────
+  // Measures how far the rendered labels extend past the plot's own content
+  // box and reports it to the caller (`Plot.svelte`), which grows its own
+  // local margin state to fit — real `getBBox()` measurement, same as the
+  // approach this used to register directly into svelteplot's *shared*
+  // margin-auto-sizing context. Reporting through a plain callback instead
+  // keeps this entirely local to one `<Plot>` instance: nothing here is
+  // shared across instances, which is what made the old approach spike
+  // CPU/memory into unresponsiveness when many instances mounted/unmounted
+  // together (e.g. a multi-story docs page → single story).
+  let groupEl: SVGGElement | undefined = $state();
+
+  $effect(() => {
+    // getBBox() below is a plain DOM read, not itself tracked — depend on
+    // whatever actually changes the rendered label layout so this re-runs.
+    void lastPoints;
+    void values;
+    const el = groupEl;
+    if (!el || !onOverflow) return;
+    const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
+    if (!xRange) return;
+    const plotLeft = Math.min(xRange[0], xRange[1]);
+    const plotRight = Math.max(xRange[0], xRange[1]);
+    let box: { x: number; width: number };
+    try {
+      box = el.getBBox();
+    } catch {
+      return;
+    }
+    onOverflow({
+      left: Math.ceil(Math.max(0, plotLeft - box.x)),
+      right: Math.ceil(Math.max(0, box.x + box.width - plotRight)),
+    });
+  });
+
   /**
    * Pixel-space collision fix-up for end-point labels: resolves each label's
    * true pixel Y through the plot's own live y-scale, then runs the shared
@@ -74,45 +111,49 @@
    * which would extend the y-scale's own domain and provoke an infinite
    * autoscale ↔ declutter feedback loop.
    *
-   * `inGroup`/`rank`/`depth` come from `mirrorRanks`, fed by `declutter1D`'s
-   * own `connected` record rather than re-inferred from positions — see
-   * both functions' doc comments for why that's the only reliable source:
-   * position-based heuristics either miss a series that only had to move
-   * because a neighbour got pushed into it, or wrongly bridge two unrelated
-   * clusters that each happened to need decluttering on their own. The
-   * elbow connector below turns `rank` into a lane index — mirrored
-   * top/bottom pairs share a lane, so a run only ever needs `ceil(depth / 2)`
-   * distinct ones. A series with nothing nearby is absent from the map, and
-   * its label renders with no extra offset.
+   * `inGroup`/`rank`/`lanesUsed` come from `laneAssignment`, fed by
+   * `declutter1D`'s own `connected` record rather than re-inferred from
+   * positions — see both functions' doc comments for why that's the only
+   * reliable source: position-based heuristics either miss a series that
+   * only had to move because a neighbour got pushed into it, or wrongly
+   * bridge two unrelated clusters that each happened to need decluttering
+   * on their own. The elbow connector below turns `rank` into a lane index.
+   * A series with nothing nearby is absent from the map, and its label
+   * renders with no extra offset.
    */
   const declutteredOffsets = $derived.by(() => {
-    const map = new SvelteMap<string, { extraDy: number; inGroup: boolean; rank: number; depth: number }>();
+    const map = new SvelteMap<string, { extraDy: number; inGroup: boolean; rank: number; lanesUsed: number }>();
     if (lastPoints.length < 2) return map;
     const yScale = plot.scales.y?.fn;
     if (!yScale) return map;
-    const fontSize = font?.fontSize ?? 12;
     const minGap = Math.max(16, fontSize * 1.4);
     const items = lastPoints.map(({ series: s, lastRow }) => ({
       name: s.name,
       pos: Number(yScale(Number(resolveAccessor(s.y)(lastRow)))),
     }));
     const sorted = [...items].sort((a, b) => a.pos - b.pos);
-    const { positions: spread, connected } = declutter1D(items, minGap);
+    const range = yScale.range?.().map(Number);
+    const bounds: [number, number] | undefined = range
+      ? [Math.min(range[0], range[1]), Math.max(range[0], range[1])]
+      : undefined;
+    const { positions: spread, connected } = declutter1D(items, minGap, bounds);
     const spreadByName = new Map(spread.map((d) => [d.name, d.pos]));
-    const ranks = mirrorRanks(connected);
+    const originals = sorted.map((item) => item.pos);
+    const finals = sorted.map((item) => spreadByName.get(item.name) ?? item.pos);
+    const ranks = laneAssignment(originals, finals, connected);
     sorted.forEach((item, i) => {
-      const final = spreadByName.get(item.name) ?? item.pos;
       map.set(item.name, {
-        extraDy: final - item.pos,
-        inGroup: ranks[i].depth > 1,
+        extraDy: finals[i] - originals[i],
+        inGroup: ranks[i].runSize > 1,
         rank: ranks[i].rank,
-        depth: ranks[i].depth,
+        lanesUsed: ranks[i].lanesUsed,
       });
     });
     return map;
   });
 </script>
 
+<g bind:this={groupEl}>
 {#each lastPoints as { series: s, lastRow, seriesIndex } (s.name)}
   {@const xFn = resolveAccessor(s.x)}
   {@const yFn = resolveAccessor(s.y)}
@@ -121,20 +162,23 @@
   {@const extraDy = offset?.inGroup ? offset.extraDy : 0}
   {@const baseDx = font?.dx ?? defaultDx}
   {@const dir = Math.sign(baseDx) || 1}
-  {@const numLanes = offset?.inGroup ? Math.ceil(offset.depth / 2) : 0}
+  {@const numLanes = offset?.inGroup ? offset.lanesUsed : 0}
   {@const labelDx = offset?.inGroup
-    ? dir * (ELBOW_GAP + (numLanes - 1) * LANE_STEP + LABEL_GAP)
+    ? dir * (elbowGap + (numLanes - 1) * laneStep + labelGap)
     : baseDx}
+  {@const text = fmtVal(Number(yFn(lastRow)), s.name)}
+  {@const preferredTA = resolvedTextAnchor ?? defaultTA}
+  {@const preferredLA = font?.lineAnchor ?? defaultLA}
   {#if offset?.inGroup && plot.scales.x?.fn && plot.scales.y?.fn}
     {@const px = Number(plot.scales.x.fn(xFn(lastRow)))}
     {@const py = Number(plot.scales.y.fn(Number(yFn(lastRow))))}
-    {@const laneX = px + dir * (ELBOW_GAP + offset.rank * LANE_STEP)}
+    {@const laneX = px + dir * (elbowGap + offset.rank * laneStep)}
     {@const targetY = py + extraDy}
     <path
       d={`M ${px} ${py} H ${laneX} V ${targetY} H ${px + labelDx}`}
       fill="none"
-      stroke={connector?.stroke ?? DEFAULT_CONNECTOR_COLOR}
-      stroke-width={connector?.strokeWidth ?? DEFAULT_CONNECTOR_WIDTH}
+      stroke={connector?.stroke ?? defaultConnectorColor}
+      stroke-width={connector?.strokeWidth ?? defaultConnectorWidth}
       stroke-opacity={connector?.strokeOpacity ?? 1}
       stroke-dasharray={connector?.strokeDasharray}
       stroke-linecap={connector?.strokeLinecap ?? 'square'}
@@ -145,17 +189,17 @@
     data={[lastRow]}
     x={xFn}
     y={yFn}
-    text={() => fmtVal(Number(yFn(lastRow)), s.name)}
+    text={() => text}
     dx={labelDx}
     dy={(font?.dy ?? defaultDy) + extraDy}
-    textAnchor={resolvedTextAnchor ?? defaultTA}
-    lineAnchor={font?.lineAnchor ?? defaultLA}
+    textAnchor={preferredTA}
+    lineAnchor={preferredLA}
     lineHeight={font?.lineHeight}
     rotate={font?.rotate}
     class={font?.class}
     textClass={font?.textClass}
     fill={font?.fill ?? seriesColor}
-    fontSize={font?.fontSize ?? 12}
+    {fontSize}
     fontWeight={font?.fontWeight}
     fontStyle={font?.fontStyle}
     stroke={font?.stroke}
@@ -163,3 +207,4 @@
     paintOrder={font?.paintOrder}
   />
 {/each}
+</g>

package/dist/plots/line/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';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
         lastPoints: {
@@ -8,6 +8,11 @@ declare function $$render<TData extends Record<string, unknown>>(): {
             seriesIndex: number;
         }[];
         values: ValuesStyle | undefined;
+        /** Reports how far the rendered labels overflow the plot's own content box, in pixels, on each side (0 = no overflow). */
+        onOverflow?: (overflow: {
+            left: number;
+            right: number;
+        }) => void;
     };
     exports: {};
     bindings: "";

package/dist/plots/line/buildLineMarkers.d.ts

@@ -0,0 +1,15 @@
+import type { Series } from '../../types/plots/data/common';
+import type { LineSegmentStyle } from '../../types/plots/segments/common';
+import type { VisualGroup } from '../../types/plots/segments/config';
+import type { StrokeStyle, DotStyle } from '../../types/plots/styling';
+import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/common';
+/**
+ * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
+ * for one LinePlot render: one `'line'` marker per visual segment, plus a
+ * `'dot'` marker right after it when that segment sets `style.dots`.
+ */
+export declare function buildLineMarkers<TData extends Record<string, unknown>>(args: {
+    groupedSeries: VisualGroup<Series<TData>, LineSegmentStyle>[];
+    disabledStrokeFor: (seriesName: string) => StrokeStyle | undefined;
+    disabledDotsFor: (seriesName: string) => DotStyle | undefined;
+}): (LineMarkerConfig | DotMarkerConfig)[];

package/dist/plots/line/buildLineMarkers.js

@@ -0,0 +1,57 @@
+import { resolveAccessor } from '../utils/accessors';
+import { paletteColor } from '../../utils/color';
+import { getConfiguration } from '../../configuration/config.svelte';
+/**
+ * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
+ * for one LinePlot render: one `'line'` marker per visual segment, plus a
+ * `'dot'` marker right after it when that segment sets `style.dots`.
+ */
+export function buildLineMarkers(args) {
+    const { groupedSeries, disabledStrokeFor, disabledDotsFor } = args;
+    const cfg = getConfiguration();
+    const markers = [];
+    groupedSeries.forEach((group, seriesIndex) => {
+        const defaultColor = paletteColor(seriesIndex, cfg.palette);
+        const disabledStroke = disabledStrokeFor(group.series.name);
+        const disabledDots = disabledDotsFor(group.series.name);
+        const xFn = resolveAccessor(group.series.x);
+        const yFn = resolveAccessor(group.series.y);
+        for (const seg of group.visualSegments) {
+            const strokeStyle = seg.style.stroke;
+            const dotStyle = seg.style.dots;
+            markers.push({
+                type: 'line',
+                data: seg.data,
+                x: xFn,
+                y: yFn,
+                style: {
+                    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 (!dotStyle)
+                continue;
+            markers.push({
+                type: 'dot',
+                data: seg.data,
+                x: xFn,
+                y: yFn,
+                style: {
+                    dotRadius: disabledDots?.dotRadius ?? dotStyle.dotRadius ?? cfg.line.dotRadius,
+                    dotFill: disabledDots?.dotFill ?? dotStyle.dotFill ?? strokeStyle?.stroke ?? defaultColor,
+                    dotSymbol: disabledDots?.dotSymbol ?? dotStyle.dotSymbol ?? 'circle',
+                    dotStroke: disabledDots?.dotStroke ?? dotStyle.dotStroke ?? strokeStyle?.stroke ?? defaultColor,
+                    dotStrokeWidth: disabledDots?.dotStrokeWidth ?? dotStyle.dotStrokeWidth ?? 1,
+                    dotFillOpacity: disabledDots?.dotFillOpacity ?? dotStyle.dotFillOpacity ?? strokeStyle?.strokeOpacity ?? 1,
+                    dotStrokeOpacity: disabledDots?.dotStrokeOpacity ?? dotStyle.dotStrokeOpacity ?? strokeStyle?.strokeOpacity ?? 1,
+                    dotStrokeDasharray: disabledDots?.dotStrokeDasharray ?? dotStyle.dotStrokeDasharray,
+                },
+            });
+        }
+    });
+    return markers;
+}

package/dist/plots/pyramid/Plot.svelte

@@ -1,28 +1,22 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { SvelteMap } from 'svelte/reactivity';
-  import { BarX } 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 { disabledFillOverride } from '../utils/legendDisabled';
-  import { buildGroupedSeries, validateSegments, resolveSegmentsForSeries, matchesSegmentX, getDataForSegments } from '../utils/segments';
+  import { buildPyramidBarMarkers } from './buildPyramidBarMarkers';
+  import { buildGroupedSeries, validateSegments, buildScopedMarkerGroups } from '../utils/segments';
   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 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 { ValueAnchor } from '../../types/plots/constants';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
-  import type { Marker } from '../../types/markers/common';
+  import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 
   /**
    * A population-pyramid-style diverging bar chart: each series is mirrored
@@ -43,9 +37,9 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStyles,
+    BasePlotStylesConfig,
     BarSegmentStyle,
-    Marker,
+    AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>
   >;
 
@@ -166,17 +160,6 @@
     return vals.length ? Math.max(...vals) : 1;
   });
 
-  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;
-  });
-
   // The single, fully-resolved scales object BasePlotLayout reads for
   // everything (ticks, grid, sort, and the real svelteplot scale) — avoids
   // keeping a second, separately-defaulted copy of `scales.x`/`scales.y`
@@ -192,111 +175,52 @@
     y: { type: 'band', padding: 0.2, domain: yDomain, ...(scales.y ?? {}) },
   });
 
-  const hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
-  const hoverStrategy = $derived(resolveHoverStrategy(tooltip?.strategy, markers, 'y'));
-  const hoverSync = $derived(resolveHoverSync(tooltip?.sync, markers));
+  const hover = $derived({
+    active: tooltip != null || hasHoverMarker(markers),
+    points: hoverPoints,
+    label: labelFor,
+    strategy: resolveHoverStrategy(tooltip?.strategy, markers, 'y'),
+    sync: resolveHoverSync(tooltip?.sync, markers),
+    tooltip,
+  });
+
+  const pyramidMarkers = $derived(
+    buildPyramidBarMarkers({
+      groupedSeries,
+      valueFor: signedValue,
+      colorFor: (s) => (s.side === 'left' ? leftColor : rightColor),
+      disabledFillFor: (name) => disabledFillOverride(legendInteraction?.disabledSeries.get(name)),
+    }),
+  );
+
+  const scopedGroups = $derived(
+    buildScopedMarkerGroups<TData, InternalSeries, BarSegmentStyle>({
+      groupedSeries,
+      segments,
+      colorFor: (series) => (series.side === 'left' ? leftColor : rightColor),
+      segmentColorFor: (style, defaultColor) => style?.fill ?? defaultColor,
+    }),
+  );
 </script>
 
 <BasePlotLayout
   {width}
   {height}
+  {styles}
   data={flat}
   {getX}
   {getY}
-  {hoverPoints}
-  label={labelFor}
-  {tooltip}
-  {hoverActive}
-  {hoverStrategy}
-  {hoverSync}
+  {hover}
   scales={resolvedScales}
   {margins}
   xTickRotate={resolvedScales?.x?.tickRotate}
+  markers={[...pyramidMarkers, ...markers]}
+  seriesData={resolvedSeries}
+  {scopedGroups}
 >
-  {#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}>
+  {#if showVals}
     {#each groupedSeries as group (group.series.name)}
-      {@const defaultColor = group.series.side === 'left' ? leftColor : rightColor}
-      {@const getCategory = resolveAccessor(group.series.x)}
-      {@const disabledFill = disabledFillOverride(legendInteraction?.disabledSeries.get(group.series.name))}
-      {#each group.visualSegments as seg, i (`${group.series.name}-${i}`)}
-        <BarX
-          data={seg.data}
-          x1={0}
-          x2={(d: TData) => signedValue(group.series, d)}
-          y={getCategory}
-          fill={disabledFill?.fill ?? seg.style.fill ?? defaultColor}
-          fillOpacity={disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1}
-        />
-      {/each}
-
-      {#if showVals}
-        <ValueLabels {group} {valAnchor} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />
-      {/if}
-
-      {#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 segmentDataArrays = getDataForSegments(group.series.data, getCategory, segs)}
-            {#each segmentDataArrays as segmentData, segIdx (`${group.series.name}-marker-segment-${segIdx}`)}
-              {#if segmentData.length > 0}
-                {@const segmentColor = segs[segIdx]?.style?.fill ?? 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?.fill ?? 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?.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}
+      <ValueLabels {group} {valAnchor} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />
     {/each}
-  </RuleLayout>
-  {/snippet}
+  {/if}
 </BasePlotLayout>

package/dist/plots/pyramid/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 { BarSegmentStyle } 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, BarSegmentStyle, Marker, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/pyramid/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/pyramid/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';

package/dist/plots/pyramid/buildPyramidBarMarkers.d.ts

@@ -0,0 +1,19 @@
+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 { BarMarkerConfig } from '../../types/markers/common';
+/**
+ * Every `'bar'` marker for one PyramidPlot render — reuses `BarMarkerConfig`
+ * directly, always horizontal (category on y, signed magnitude on x) and
+ * with no insets. Emits no `role: 'hitArea'` markers, since PyramidPlot's
+ * hover matches nearest points rather than hit-testing category bands.
+ */
+export declare function buildPyramidBarMarkers<TData extends Record<string, unknown>, S extends Series<TData>>(args: {
+    groupedSeries: VisualGroup<S, BarSegmentStyle>[];
+    valueFor: (series: S, d: TData) => number;
+    colorFor: (series: S) => string;
+    disabledFillFor: (seriesName: string) => {
+        fill?: string;
+        fillOpacity?: number;
+    } | undefined;
+}): BarMarkerConfig[];

package/dist/plots/pyramid/buildPyramidBarMarkers.js

@@ -0,0 +1,32 @@
+import { resolveAccessor } from '../utils/accessors';
+/**
+ * Every `'bar'` marker for one PyramidPlot render — reuses `BarMarkerConfig`
+ * directly, always horizontal (category on y, signed magnitude on x) and
+ * with no insets. Emits no `role: 'hitArea'` markers, since PyramidPlot's
+ * hover matches nearest points rather than hit-testing category bands.
+ */
+export function buildPyramidBarMarkers(args) {
+    const { groupedSeries, valueFor, colorFor, disabledFillFor } = args;
+    const markers = [];
+    for (const group of groupedSeries) {
+        const getCategory = resolveAccessor(group.series.x);
+        const defaultColor = colorFor(group.series);
+        const disabledFill = disabledFillFor(group.series.name);
+        for (const seg of group.visualSegments) {
+            markers.push({
+                type: 'bar',
+                role: 'segment',
+                isHorizontal: true,
+                data: seg.data,
+                y: getCategory,
+                x1: 0,
+                x2: (d) => valueFor(group.series, d),
+                style: {
+                    fill: disabledFill?.fill ?? seg.style.fill ?? defaultColor,
+                    fillOpacity: disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1,
+                },
+            });
+        }
+    }
+    return markers;
+}