@fundar/data-chart-telling 0.0.29 → 0.0.30

package/dist/plots/bar/buildBarMarkers.js

@@ -1,89 +1,112 @@
 import { resolveAccessor } from '../utils/accessors';
 import { paletteColor } from '../../utils/color';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { isGapValue, resolveGapAreaStyle } from '../utils/gaps';
+const GAP_KINDS = ['start', 'middle', 'end'];
 /**
  * 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.
+ * per series (stacked) or per visual segment (grouped/overlap), one
+ * additional `role: 'segment'` marker per series per gap zone kind for any
+ * row `styles.gaps` fills (distinctly styled, drawn at its interpolated
+ * value — see `resolveDiscreteGapFills`), plus one `role: 'hitArea'` marker
+ * per category, so a chart never gets segment markers without their hit
+ * areas. A row whose value is missing and *not* filled by a gap zone is
+ * skipped entirely — no bar drawn, rather than the broken zero/`NaN`
+ * geometry a raw missing value would otherwise produce.
  *
  * `'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 { groupedSeries, barLayout, isHorizontal, hoverPoints, palette, disabledFillFor, active, setHoverMatch, clearHoverMatch, gapFillMaps } = args;
+    const gapDefaults = getConfiguration().bar.gap;
     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));
-            // Mirrors the grouped/overlap branch below: a series-scoped `segments`
-            // catch-all style (e.g. an explicit `fill`) must win over the
-            // index-derived `defaultColor`, same as it already does there. Stacked
-            // bars were previously drawn straight from `group.series.data`, which
-            // skipped `group.visualSegments` entirely and silently dropped any such
-            // override.
-            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,
-                    },
-                };
+        // Places one series' bar(s) — real or gap-fill — using whichever
+        // layout mode (stacked baseline, or flat baseline + grouped insets) is
+        // active, so a gap-fill bar always lands in exactly the same slot a
+        // real bar for that row would.
+        function makeMarker(data, valueFn, style) {
+            if (data.length === 0)
+                return null;
+            const marker = { type: 'bar', role: 'segment', isHorizontal, data, style };
+            if (barLayout.layout === 'stacked') {
+                const baselineFn = (d) => barLayout.stackedBaseline(xFn(d), seriesIndex);
+                const topFn = (d) => baselineFn(d) + valueFn(d);
                 if (isHorizontal) {
                     marker.y = xFn;
-                    marker.x1 = stackedBaselineFn;
-                    marker.x2 = stackedTopFn;
+                    marker.x1 = baselineFn;
+                    marker.x2 = topFn;
                 }
                 else {
                     marker.x = xFn;
-                    marker.y1 = stackedBaselineFn;
-                    marker.y2 = stackedTopFn;
+                    marker.y1 = baselineFn;
+                    marker.y2 = topFn;
                 }
-                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;
+                    marker.y = xFn;
+                    marker.x1 = barLayout.valueBaseline;
+                    marker.x2 = valueFn;
                 }
                 else {
-                    marker.insetLeft = seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2;
-                    marker.insetRight = (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2;
+                    marker.x = xFn;
+                    marker.y1 = barLayout.valueBaseline;
+                    marker.y2 = valueFn;
+                }
+                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);
+            return marker;
+        }
+        // Mirrors the pre-existing behavior for both branches: a series-scoped
+        // `segments` catch-all style (e.g. an explicit `fill`) wins over the
+        // index-derived `defaultColor`.
+        for (const seg of group.visualSegments) {
+            const realData = seg.data.filter((d) => !isGapValue(yFn(d)));
+            const style = {
+                fill: disabledFill?.fill ?? seg.style.fill ?? defaultColor,
+                fillOpacity: disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1,
+            };
+            const valueFn = barLayout.layout === 'stacked' ? (d) => Number(yFn(d)) : yFn;
+            const marker = makeMarker(realData, valueFn, style);
+            if (marker)
+                segmentMarkers.push(marker);
+        }
+        const fillMap = gapFillMaps.get(group.series.name) ?? new Map();
+        for (const kind of GAP_KINDS) {
+            const filledRows = group.series.data.filter((d) => fillMap.get(d)?.kind === kind);
+            if (filledRows.length === 0)
+                continue;
+            const base = resolveGapAreaStyle(fillMap.get(filledRows[0]).style, defaultColor, gapDefaults);
+            const gapStyle = {
+                ...base,
+                fill: disabledFill?.fill ?? base.fill,
+                fillOpacity: disabledFill?.fillOpacity ?? base.fillOpacity,
+            };
+            // svelteplot shallow-clones each row before invoking a mark's own
+            // geometry accessors (same reason PyramidPlot's `flat` tags rows
+            // instead of relying on identity) — a `fillMap.get(d)` lookup inside
+            // `valueFn` would see a clone, not the original key. Tagging the
+            // resolved value onto the row as a plain field survives that clone.
+            const taggedData = filledRows.map((d) => ({ ...d, __gapValue: fillMap.get(d).value }));
+            const marker = makeMarker(taggedData, (d) => d.__gapValue, gapStyle);
+            if (marker)
+                segmentMarkers.push(marker);
         }
     });
     const byCategory = new Map();

package/dist/plots/bar/hoverPoints.js

@@ -1,5 +1,6 @@
 import { resolveAccessor } from '../utils/accessors';
 import { paletteColor } from '../../utils/color';
+import { isGapValue } from '../utils/gaps';
 /**
  * Builds hover-marker candidate points for every row across every series.
  *
@@ -15,7 +16,7 @@ export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, palette
     return resolvedSeries.flatMap((s, idx) => {
         const sx = resolveAccessor(s.x);
         const sy = resolveAccessor(s.y);
-        return s.data.map((d) => {
+        return s.data.filter((d) => !isGapValue(sy(d))).map((d) => {
             const category = sx(d);
             const rawValue = Number(sy(d));
             const value = geometry.layout === 'stacked' ? geometry.stackedBaseline(category, idx) + rawValue : rawValue;

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

@@ -3,6 +3,7 @@ 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 { MarginConfig } from '../../types/plots/props';
+import type { DiscreteGapFill } from '../utils/gaps';
 export type BarSeriesLayout = 'overlap' | 'grouped' | 'stacked';
 /**
  * Reactive geometry for BarPlot's series-layout modes — the single source of
@@ -20,6 +21,7 @@ export declare function createBarLayout<TData extends Record<string, unknown>>(a
     flat: () => TData[];
     xAcc: () => (d: TData) => AxisValue;
     groupedSeries: () => VisualGroup<Series<TData>, BarSegmentStyle>[];
+    gapFillMaps: () => Map<string, Map<TData, DiscreteGapFill<BarSegmentStyle>>>;
 }): {
     readonly layout: BarSeriesLayout;
     readonly valueBaseline: number;

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

@@ -2,6 +2,7 @@ import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { getConfiguration } from '../../configuration/config.svelte';
 import { resolveAccessor } from '../utils/accessors';
 import { numericMargin } from '../../layout/plot/margins';
+import { isGapValue } from '../utils/gaps';
 /**
  * Reactive geometry for BarPlot's series-layout modes — the single source of
  * truth for "where does series N's bar actually sit," shared by bar-segment
@@ -98,7 +99,11 @@ export function createBarLayout(args) {
                 const seriesXFn = resolveAccessor(group.series.x);
                 const seriesYFn = resolveAccessor(group.series.y);
                 const row = group.series.data.find((d) => seriesXFn(d) === category);
-                running += row ? Number(seriesYFn(row)) : 0;
+                if (row) {
+                    const raw = seriesYFn(row);
+                    const fill = args.gapFillMaps().get(group.series.name)?.get(row);
+                    running += fill ? fill.value : isGapValue(raw) ? 0 : Number(raw);
+                }
             }
             sums.set(category, prefix);
         }

package/dist/plots/heatmap/Plot.svelte

@@ -13,7 +13,7 @@
   import type { BasePlotProps } from '../../types/plots/props';
   import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { BasePlotStylesConfig } from '../../types/layout/styles';
+  import type { AxisBasedStylesConfig } from '../../types/layout/styles';
   import type { CellSegmentStyle } from '../../types/plots/segments/common';
   import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 
@@ -29,7 +29,7 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStylesConfig,
+    AxisBasedStylesConfig,
     CellSegmentStyle,
     AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>

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

@@ -1,10 +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 { BasePlotStylesConfig } from '../../types/layout/styles';
+import type { AxisBasedStylesConfig } 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, BasePlotStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, AxisBasedStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/line/Plot.svelte

@@ -19,23 +19,19 @@
   import type { BasePlotProps } from '../../types/plots/props';
   import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { BasePlotStylesConfig } from '../../types/layout/styles';
+  import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
   import type { LineSegmentStyle } from '../../types/plots/segments/common';
   import type { LineMarkersConfig } from '../../types/markers/line';
-  import type { GapsConfig } from '../../types/plots/props';
   import type { LegendDisabledStyle } from '../../types/layout/legend';
 
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStylesConfig,
+    GapsAwarePlotStylesConfig<LineSegmentStyle>,
     LineSegmentStyle,
     LineMarkersConfig,
     AxisBasedScalesConfig<TData>
-  > & {
-    /** Fills leading/internal/trailing missing-data holes with an interpolated, distinctly-styled bridge, resolved per series like `segments` — see {@link GapsConfig}. */
-    gaps?: GapsConfig<LineSegmentStyle>;
-  };
+  >;
 
   let {
     width,
@@ -48,12 +44,16 @@
     styles = {},
     segments = {},
     markers = [],
-    gaps = {},
     scales = {},
     margins,
     tooltip = undefined,
   }: Props = $props();
 
+  // Fills leading/internal/trailing missing-data holes with an
+  // interpolated, distinctly-styled bridge, resolved per series like
+  // `segments` — see `GapsAwarePlotStylesConfig` (`types/layout/styles.ts`).
+  const gaps = $derived(styles.gaps ?? {});
+
   const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
   const legendInteraction = $derived(getLegendInteraction());
 
@@ -172,7 +172,7 @@
   getY={(d) => Number(yAcc(d))}
   {hover}
   {scales}
-  margins={labelMargin.resolvedMargins}
+  {...labelMargin.plotProps}
   xTickRotate={scales?.x?.tickRotate}
   markers={[...gapMarkers, ...lineMarkers, ...markers]}
   seriesData={resolvedSeries}

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

@@ -1,15 +1,11 @@
 import type { BasePlotProps } from '../../types/plots/props';
 import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 import type { SeriesProps, DataProps } from '../../types/plots/data/common';
-import type { BasePlotStylesConfig } from '../../types/layout/styles';
+import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
 import type { LineSegmentStyle } from '../../types/plots/segments/common';
 import type { LineMarkersConfig } from '../../types/markers/line';
-import type { GapsConfig } from '../../types/plots/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStylesConfig, LineSegmentStyle, LineMarkersConfig, AxisBasedScalesConfig<TData>> & {
-        /** Fills leading/internal/trailing missing-data holes with an interpolated, distinctly-styled bridge, resolved per series like `segments` — see {@link GapsConfig}. */
-        gaps?: GapsConfig<LineSegmentStyle>;
-    };
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, GapsAwarePlotStylesConfig<LineSegmentStyle>, LineSegmentStyle, LineMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/line/ValueLabels.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
+  import { untrack } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { Text, usePlot } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
@@ -97,8 +98,22 @@
       // changes the rendered label layout so this re-measures.
       void lastPoints;
       void values;
-      const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
-      const yRange = plot.scales.y?.fn?.range?.()?.map(Number);
+      // The scale range itself is read `untrack`ed on purpose: this margin
+      // watcher's own report (see labelOverflow.svelte.ts) grows the plot's
+      // margin to fit the labels, which feeds back into svelteplot's own
+      // auto-margin sizing and nudges this same range — occasionally by a
+      // permanent, never-settling ±1px each render. Treating the range as a
+      // tracked dependency here reran the whole watcher every single time it
+      // twitched, which (when it never settles) never let the watcher's own
+      // "poll until stable" loop finish — an infinite effect-restart loop
+      // that tripped Svelte's effect_update_depth_exceeded guard. Reading it
+      // untracked still measures against the *current* range on every
+      // re-run triggered by `lastPoints`/`values` above; it just stops the
+      // range's own fluctuations from being what triggers those re-runs.
+      const { xRange, yRange } = untrack(() => ({
+        xRange: plot.scales.x?.fn?.range?.()?.map(Number),
+        yRange: plot.scales.y?.fn?.range?.()?.map(Number),
+      }));
       if (!xRange || !yRange) return undefined;
       return {
         left: Math.min(xRange[0], xRange[1]),

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

@@ -1,5 +1,5 @@
 import type { Series } from '../../types/plots/data/common';
-import type { GapsConfig } from '../../types/plots/props';
+import type { GapsConfig } from '../../types/plots/gaps';
 import type { LineSegmentStyle } from '../../types/plots/segments/common';
 import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/common';
 /**

package/dist/plots/pyramid/Plot.svelte

@@ -8,13 +8,14 @@
   import { buildPyramidBarMarkers } from './buildPyramidBarMarkers';
   import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
   import { buildGroupedSeries, validateSegments, buildScopedMarkerGroups } from '../utils/segments';
+  import { isGapValue, resolveGapsForSeries, resolveDiscreteGapFills } from '../utils/gaps';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
   import ValueLabels from './ValueLabels.svelte';
   import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
   import type { BasePlotProps } from '../../types/plots/props';
   import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { BasePlotStylesConfig } from '../../types/layout/styles';
+  import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
   import type { AxisBasedMarkersConfig } from '../../types/markers/common';
@@ -39,7 +40,7 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStylesConfig,
+    GapsAwarePlotStylesConfig<BarSegmentStyle>,
     BarSegmentStyle,
     AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>
@@ -112,6 +113,20 @@
     return s.side === 'left' ? -v : v;
   }
 
+  // Signs an already-resolved magnitude (e.g. a gap-fill's interpolated
+  // value, which has no row of its own to read via `signedValue`).
+  function signFor(s: InternalSeries, magnitude: number): number {
+    return s.side === 'left' ? -magnitude : magnitude;
+  }
+
+  // Fills leading/internal/trailing missing-data holes with an
+  // interpolated, distinctly-styled bar, resolved per series like
+  // `segments` — see `GapsAwarePlotStylesConfig` (`types/layout/styles.ts`).
+  const gaps = $derived(styles.gaps ?? {});
+  const gapFillMaps = $derived(
+    new Map(resolvedSeries.map((s) => [s.name, resolveDiscreteGapFills(s, resolveGapsForSeries(gaps, s.name))])),
+  );
+
   // svelteplot's `Pointer` rebuilds its quadtree from shallow-cloned rows
   // (`{ ...d }`), never the original references, so a row's owning series
   // can't be recovered by identity once hover is active. Pre-compute
@@ -129,17 +144,19 @@
     resolvedSeries.flatMap((s) => {
       const getCategory = resolveAccessor(s.x);
       const getMagnitude = resolveAccessor(s.y);
-      return s.data.map((d) => {
-        const v = Math.abs(Number(getMagnitude(d)));
-        return {
-          ...d,
-          __side: s.side,
-          __x: s.side === 'left' ? -v : v,
-          __y: getCategory(d) as AxisValue,
-          __label: formatValue(v, s.name),
-          __series: s.name,
-        } as TaggedRow;
-      });
+      return s.data
+        .filter((d) => !isGapValue(getMagnitude(d)))
+        .map((d) => {
+          const v = Math.abs(Number(getMagnitude(d)));
+          return {
+            ...d,
+            __side: s.side,
+            __x: s.side === 'left' ? -v : v,
+            __y: getCategory(d) as AxisValue,
+            __label: formatValue(v, s.name),
+            __series: s.name,
+          } as TaggedRow;
+        });
     }),
   );
 
@@ -174,7 +191,13 @@
   const maxMagnitude = $derived.by(() => {
     const vals = resolvedSeries.flatMap((s) => {
       const getMagnitude = resolveAccessor(s.y);
-      return s.data.map((d) => Math.abs(Number(getMagnitude(d))));
+      const fillMap = gapFillMaps.get(s.name);
+      return s.data.flatMap((d) => {
+        const raw = getMagnitude(d);
+        if (!isGapValue(raw)) return [Math.abs(Number(raw))];
+        const fill = fillMap?.get(d);
+        return fill ? [Math.abs(fill.value)] : [];
+      });
     });
     return vals.length ? Math.max(...vals) : 1;
   });
@@ -207,8 +230,10 @@
     buildPyramidBarMarkers({
       groupedSeries,
       valueFor: signedValue,
+      signFor,
       colorFor: (s) => (s.side === 'left' ? leftColor : rightColor),
       disabledFillFor: (name) => disabledFillOverride(effectiveDisabledFor(name)),
+      gapFillMaps,
     }),
   );
 

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

@@ -1,10 +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 { BasePlotStylesConfig } from '../../types/layout/styles';
+import type { GapsAwarePlotStylesConfig } 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, BasePlotStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, GapsAwarePlotStylesConfig<import("../..").AreaStyle>, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/pyramid/ValueLabels.svelte

@@ -3,6 +3,7 @@
   import { resolveAccessor } from '../utils/accessors';
   import { disabledFillOverride } from '../utils/legendDisabled';
   import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
+  import { isGapValue } from '../utils/gaps';
   import type { Series } from '../../types/plots/data/common';
   import type { ValuesStyle } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
@@ -70,6 +71,9 @@
   const isLeft = $derived(group.series.side === 'left');
   const getCategory = $derived(resolveAccessor(group.series.x));
   const getMagnitude = $derived(resolveAccessor(group.series.y));
+  // A gap row — missing data, whether or not `styles.gaps` fills it with a
+  // synthetic bar — never gets a value label, same as LinePlot's `lastPoints`.
+  const labelData = $derived(group.series.data.filter((d) => !isGapValue(getMagnitude(d))));
   const signedValue = $derived((d: TData) => {
     const v = Math.abs(Number(getMagnitude(d)));
     return isLeft ? -v : v;
@@ -102,7 +106,7 @@
      boundary crossing instead (pointerenter/leave fire on every ancestor). -->
 <g bind:this={groupEl} role="presentation" onpointerenter={onHoverSeries} onpointerleave={onHoverEnd}>
   <Text
-    data={group.series.data}
+    data={labelData}
     x={xFn}
     y={getCategory}
     text={(d: TData) => formatValue(Math.abs(Number(getMagnitude(d))), group.series.name)}

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

@@ -2,18 +2,25 @@ 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';
+import type { DiscreteGapFill } from '../utils/gaps';
 /**
  * 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.
+ * hover matches nearest points rather than hit-testing category bands. A
+ * row whose value is missing and *not* filled by a `styles.gaps` zone is
+ * skipped entirely; a filled one gets one additional, distinctly-styled
+ * marker per zone kind, at its interpolated value.
  */
 export declare function buildPyramidBarMarkers<TData extends Record<string, unknown>, S extends Series<TData>>(args: {
     groupedSeries: VisualGroup<S, BarSegmentStyle>[];
     valueFor: (series: S, d: TData) => number;
+    /** Signs an already-resolved magnitude (e.g. a gap-fill's interpolated value, which has no row of its own to read via `valueFor`). */
+    signFor: (series: S, magnitude: number) => number;
     colorFor: (series: S) => string;
     disabledFillFor: (seriesName: string) => {
         fill?: string;
         fillOpacity?: number;
     } | undefined;
+    gapFillMaps: Map<string, Map<TData, DiscreteGapFill<BarSegmentStyle>>>;
 }): BarMarkerConfig[];

package/dist/plots/pyramid/buildPyramidBarMarkers.js

@@ -1,23 +1,34 @@
 import { resolveAccessor } from '../utils/accessors';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { isGapValue, resolveGapAreaStyle } from '../utils/gaps';
+const GAP_KINDS = ['start', 'middle', 'end'];
 /**
  * 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.
+ * hover matches nearest points rather than hit-testing category bands. A
+ * row whose value is missing and *not* filled by a `styles.gaps` zone is
+ * skipped entirely; a filled one gets one additional, distinctly-styled
+ * marker per zone kind, at its interpolated value.
  */
 export function buildPyramidBarMarkers(args) {
-    const { groupedSeries, valueFor, colorFor, disabledFillFor } = args;
+    const { groupedSeries, valueFor, signFor, colorFor, disabledFillFor, gapFillMaps } = args;
+    const gapDefaults = getConfiguration().pyramid.gap;
     const markers = [];
     for (const group of groupedSeries) {
         const getCategory = resolveAccessor(group.series.x);
+        const getMagnitude = resolveAccessor(group.series.y);
         const defaultColor = colorFor(group.series);
         const disabledFill = disabledFillFor(group.series.name);
         for (const seg of group.visualSegments) {
+            const realData = seg.data.filter((d) => !isGapValue(getMagnitude(d)));
+            if (realData.length === 0)
+                continue;
             markers.push({
                 type: 'bar',
                 role: 'segment',
                 isHorizontal: true,
-                data: seg.data,
+                data: realData,
                 y: getCategory,
                 x1: 0,
                 x2: (d) => valueFor(group.series, d),
@@ -27,6 +38,35 @@ export function buildPyramidBarMarkers(args) {
                 },
             });
         }
+        const fillMap = gapFillMaps.get(group.series.name) ?? new Map();
+        for (const kind of GAP_KINDS) {
+            const filledRows = group.series.data.filter((d) => fillMap.get(d)?.kind === kind);
+            if (filledRows.length === 0)
+                continue;
+            const base = resolveGapAreaStyle(fillMap.get(filledRows[0]).style, defaultColor, gapDefaults);
+            // svelteplot shallow-clones each row before invoking a mark's own
+            // geometry accessors, so a `fillMap.get(d)` lookup inside `x2` would
+            // see a clone, not the original key — tag the resolved value onto the
+            // row as a plain field instead, which survives that clone.
+            const taggedData = filledRows.map((d) => ({
+                ...d,
+                __gapValue: signFor(group.series, Math.abs(fillMap.get(d).value)),
+            }));
+            markers.push({
+                type: 'bar',
+                role: 'segment',
+                isHorizontal: true,
+                data: taggedData,
+                y: getCategory,
+                x1: 0,
+                x2: (d) => d.__gapValue,
+                style: {
+                    ...base,
+                    fill: disabledFill?.fill ?? base.fill,
+                    fillOpacity: disabledFill?.fillOpacity ?? base.fillOpacity,
+                },
+            });
+        }
     }
     return markers;
 }

package/dist/plots/scatter/Plot.svelte

@@ -20,7 +20,7 @@
   import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { Series } from '../../types/plots/data/common';
   import type { ScatterDataProps } from '../../types/plots/data/scatter';
-  import type { BasePlotStylesConfig } from '../../types/layout/styles';
+  import type { AxisBasedStylesConfig } from '../../types/layout/styles';
   import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
   import type { AxisBasedMarkersConfig } from '../../types/markers/common';
   import type { LegendDisabledStyle } from '../../types/layout/legend';
@@ -36,7 +36,7 @@
   type Props = BasePlotProps<
     ScatterDataProps<TData>,
     TData,
-    BasePlotStylesConfig,
+    AxisBasedStylesConfig,
     ScatterSegmentStyle,
     AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>