@fundar/data-chart-telling 0.0.28 → 0.0.30

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>

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

@@ -1,10 +1,10 @@
 import type { BasePlotProps } from '../../types/plots/props';
 import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 import type { ScatterDataProps } from '../../types/plots/data/scatter';
-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<ScatterDataProps<TData>, TData, BasePlotStylesConfig, import("../..").DotStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<ScatterDataProps<TData>, TData, AxisBasedStylesConfig, import("../..").DotStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/utils/gaps.d.ts

@@ -0,0 +1,52 @@
+import type { Series } from '../../types/plots/data/common';
+import type { GapZonesConfig, GapZoneConfig } from '../../types/plots/gaps';
+import type { AreaStyle } from '../../types/plots/styling';
+/**
+ * Resolves one series' zone config out of `LinePlot`'s full `gaps` prop: a
+ * named entry (keyed by the series' own `name`) applies only to that
+ * series; `'default'` fills in whichever zone the named entry itself leaves
+ * unset. Unlike `segments`' own specific/default resolution (which
+ * concatenates two rule lists), this merges at zone granularity — there's
+ * no list to concatenate, just three independent slots.
+ */
+export declare function resolveGapsForSeries<TStyle>(gaps: Record<string, GapZonesConfig<TStyle>>, seriesName: string): GapZonesConfig<TStyle>;
+/** A point sampled along a gap-fill bridge, already resolved to plot data-space numbers. */
+export type GapPoint = {
+    x: number;
+    y: number;
+};
+export type GapRun<TStyle> = {
+    kind: 'start' | 'middle' | 'end';
+    zone: GapZoneConfig<TStyle>;
+    points: GapPoint[];
+};
+/** A row counts as a gap when its resolved value is `null`, `undefined`, or `NaN`. */
+export declare function isGapValue(v: unknown): boolean;
+/**
+ * Detects a series' missing-data runs (see {@link GapZonesConfig}'s doc
+ * comment for what counts as missing) and, for every run whose zone is
+ * configured, builds the eased bridge points that visually fill it. Rows
+ * are sorted by `x` first, so an out-of-order series is handled the same as
+ * a sorted one. A series with no valid (non-missing) rows at all produces
+ * no runs — there's nothing to bridge from or to.
+ */
+export declare function resolveGapRuns<T extends Record<string, unknown>, TStyle>(series: Series<T>, gaps: GapZonesConfig<TStyle>): GapRun<TStyle>[];
+/** One gap row's resolved fill — the interpolated value to render instead of the missing one, and which zone produced it. */
+export type DiscreteGapFill<TStyle> = {
+    value: number;
+    kind: 'start' | 'middle' | 'end';
+    style?: TStyle;
+};
+/**
+ * Bar/pyramid analog of `resolveGapRuns`: a category axis has no continuous
+ * bridge to sample, so this returns one interpolated value per *individual*
+ * gap row instead. Runs are detected by `series.data`'s own array order
+ * (not a numeric `x` sort like `resolveGapRuns` — a category axis is often
+ * nominal, so there's no meaningful numeric ordering to sort by). Keyed by
+ * row object reference rather than category, since a series' `y` accessor
+ * may be an arbitrary function — there's no general way to write the
+ * interpolated value back onto a row, so callers look it up here instead.
+ */
+export declare function resolveDiscreteGapFills<T extends Record<string, unknown>, TStyle>(series: Series<T>, gaps: GapZonesConfig<TStyle>): Map<T, DiscreteGapFill<TStyle>>;
+/** Field-by-field style fallback for a discrete gap-fill marker — mirrors how `buildGapMarkers.ts` merges a line gap zone's style under `cfg.line.gap`. */
+export declare function resolveGapAreaStyle(zoneStyle: AreaStyle | undefined, defaultColor: string, gapDefaults: AreaStyle): AreaStyle;

package/dist/plots/utils/gaps.js

@@ -0,0 +1,156 @@
+import { resolveAccessor } from './accessors';
+import { resolveEasing } from '../../utils/interpolate';
+const DEFAULT_KEY = 'default';
+/**
+ * Resolves one series' zone config out of `LinePlot`'s full `gaps` prop: a
+ * named entry (keyed by the series' own `name`) applies only to that
+ * series; `'default'` fills in whichever zone the named entry itself leaves
+ * unset. Unlike `segments`' own specific/default resolution (which
+ * concatenates two rule lists), this merges at zone granularity — there's
+ * no list to concatenate, just three independent slots.
+ */
+export function resolveGapsForSeries(gaps, seriesName) {
+    const specific = gaps[seriesName];
+    const defaults = gaps[DEFAULT_KEY];
+    if (!specific)
+        return defaults ?? {};
+    if (!defaults)
+        return specific;
+    return {
+        start: specific.start ?? defaults.start,
+        middle: specific.middle ?? defaults.middle,
+        end: specific.end ?? defaults.end,
+    };
+}
+const BRIDGE_STEPS = 24;
+/** A row counts as a gap when its resolved value is `null`, `undefined`, or `NaN`. */
+export function isGapValue(v) {
+    return v === null || v === undefined || (typeof v === 'number' && Number.isNaN(v));
+}
+/** Samples `BRIDGE_STEPS + 1` points between two endpoints, x moving linearly and y eased by the zone's `interpolate`. */
+function buildBridge(from, to, zone) {
+    const ease = resolveEasing(zone.interpolate);
+    const points = [];
+    for (let i = 0; i <= BRIDGE_STEPS; i++) {
+        const t = i / BRIDGE_STEPS;
+        points.push({ x: from.x + (to.x - from.x) * t, y: from.y + (to.y - from.y) * ease(t) });
+    }
+    return points;
+}
+/**
+ * Detects a series' missing-data runs (see {@link GapZonesConfig}'s doc
+ * comment for what counts as missing) and, for every run whose zone is
+ * configured, builds the eased bridge points that visually fill it. Rows
+ * are sorted by `x` first, so an out-of-order series is handled the same as
+ * a sorted one. A series with no valid (non-missing) rows at all produces
+ * no runs — there's nothing to bridge from or to.
+ */
+export function resolveGapRuns(series, gaps) {
+    if (!gaps.start && !gaps.middle && !gaps.end)
+        return [];
+    const xFn = resolveAccessor(series.x);
+    const yFn = resolveAccessor(series.y);
+    const sorted = [...series.data].sort((a, b) => Number(xFn(a)) - Number(xFn(b)));
+    const pt = (row) => ({ x: Number(xFn(row)), y: Number(yFn(row)) });
+    const validIdx = sorted.reduce((acc, row, idx) => {
+        if (!isGapValue(yFn(row)))
+            acc.push(idx);
+        return acc;
+    }, []);
+    if (validIdx.length === 0)
+        return [];
+    const runs = [];
+    const firstValid = validIdx[0];
+    if (firstValid > 0 && gaps.start) {
+        const to = pt(sorted[firstValid]);
+        const from = { x: Number(gaps.start.x), y: gaps.start.y != null ? Number(gaps.start.y) : to.y };
+        runs.push({ kind: 'start', zone: gaps.start, points: buildBridge(from, to, gaps.start) });
+    }
+    if (gaps.middle) {
+        for (let k = 0; k < validIdx.length - 1; k++) {
+            const a = validIdx[k];
+            const b = validIdx[k + 1];
+            if (b - a > 1) {
+                runs.push({
+                    kind: 'middle',
+                    zone: gaps.middle,
+                    points: buildBridge(pt(sorted[a]), pt(sorted[b]), gaps.middle),
+                });
+            }
+        }
+    }
+    const lastValid = validIdx[validIdx.length - 1];
+    if (lastValid < sorted.length - 1 && gaps.end) {
+        const from = pt(sorted[lastValid]);
+        const to = { x: Number(gaps.end.x), y: gaps.end.y != null ? Number(gaps.end.y) : from.y };
+        runs.push({ kind: 'end', zone: gaps.end, points: buildBridge(from, to, gaps.end) });
+    }
+    return runs;
+}
+/**
+ * Bar/pyramid analog of `resolveGapRuns`: a category axis has no continuous
+ * bridge to sample, so this returns one interpolated value per *individual*
+ * gap row instead. Runs are detected by `series.data`'s own array order
+ * (not a numeric `x` sort like `resolveGapRuns` — a category axis is often
+ * nominal, so there's no meaningful numeric ordering to sort by). Keyed by
+ * row object reference rather than category, since a series' `y` accessor
+ * may be an arbitrary function — there's no general way to write the
+ * interpolated value back onto a row, so callers look it up here instead.
+ */
+export function resolveDiscreteGapFills(series, gaps) {
+    const result = new Map();
+    if (!gaps.start && !gaps.middle && !gaps.end)
+        return result;
+    const yFn = resolveAccessor(series.y);
+    const rows = series.data;
+    const valueAt = (i) => Number(yFn(rows[i]));
+    const validIdx = rows.reduce((acc, row, i) => {
+        if (!isGapValue(yFn(row)))
+            acc.push(i);
+        return acc;
+    }, []);
+    if (validIdx.length === 0)
+        return result;
+    function fillRun(indices, from, to, zone, kind) {
+        const ease = resolveEasing(zone.interpolate);
+        const span = indices.length + 1;
+        indices.forEach((idx, i) => {
+            const t = (i + 1) / span;
+            result.set(rows[idx], { value: from + (to - from) * ease(t), kind, style: zone.style });
+        });
+    }
+    const firstValid = validIdx[0];
+    if (firstValid > 0 && gaps.start) {
+        const to = valueAt(firstValid);
+        const from = gaps.start.y != null ? Number(gaps.start.y) : to;
+        fillRun(Array.from({ length: firstValid }, (_, i) => i), from, to, gaps.start, 'start');
+    }
+    if (gaps.middle) {
+        for (let k = 0; k < validIdx.length - 1; k++) {
+            const a = validIdx[k];
+            const b = validIdx[k + 1];
+            if (b - a > 1) {
+                fillRun(Array.from({ length: b - a - 1 }, (_, i) => a + 1 + i), valueAt(a), valueAt(b), gaps.middle, 'middle');
+            }
+        }
+    }
+    const lastValid = validIdx[validIdx.length - 1];
+    if (lastValid < rows.length - 1 && gaps.end) {
+        const from = valueAt(lastValid);
+        const to = gaps.end.y != null ? Number(gaps.end.y) : from;
+        fillRun(Array.from({ length: rows.length - 1 - lastValid }, (_, i) => lastValid + 1 + i), from, to, gaps.end, 'end');
+    }
+    return result;
+}
+/** Field-by-field style fallback for a discrete gap-fill marker — mirrors how `buildGapMarkers.ts` merges a line gap zone's style under `cfg.line.gap`. */
+export function resolveGapAreaStyle(zoneStyle, defaultColor, gapDefaults) {
+    return {
+        fill: zoneStyle?.fill ?? gapDefaults.fill ?? defaultColor,
+        fillOpacity: zoneStyle?.fillOpacity ?? gapDefaults.fillOpacity ?? 1,
+        stroke: zoneStyle?.stroke ?? gapDefaults.stroke,
+        strokeWidth: zoneStyle?.strokeWidth ?? gapDefaults.strokeWidth,
+        strokeOpacity: zoneStyle?.strokeOpacity ?? gapDefaults.strokeOpacity,
+        strokeDasharray: zoneStyle?.strokeDasharray ?? gapDefaults.strokeDasharray,
+        borderRadius: zoneStyle?.borderRadius ?? gapDefaults.borderRadius,
+    };
+}

package/dist/plots/utils/labelOverflow.svelte.d.ts

@@ -48,4 +48,13 @@ export declare function createLabelMarginTracker(margins: () => MarginConfig | u
         bottom: number | "auto";
         left: number | "auto";
     }> | undefined;
+    readonly plotProps: {
+        margins: Partial<{
+            top: number | "auto";
+            right: number | "auto";
+            bottom: number | "auto";
+            left: number | "auto";
+        }> | undefined;
+        marginRemountKey: string;
+    };
 };

package/dist/plots/utils/labelOverflow.svelte.js

@@ -109,8 +109,19 @@ export function createLabelMarginTracker(margins) {
             out.bottom = measured.bottom;
         return out;
     });
+    // Bundles `resolvedMargins` with a remount key derived from `measured`,
+    // ready to spread straight onto `<BasePlotLayout>` as its `margins`/
+    // `marginRemountKey` props (see that prop's doc comment for *why* a
+    // remount key is needed here at all) — keeps the caller from re-deriving
+    // the same key by hand, and from having to know it's `measured` that key
+    // must track.
+    const plotProps = $derived.by(() => ({
+        margins: resolvedMargins,
+        marginRemountKey: JSON.stringify(measured),
+    }));
     return {
         report,
         get resolvedMargins() { return resolvedMargins; },
+        get plotProps() { return plotProps; },
     };
 }

package/dist/types/charts/props.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { AxisValue, AxisBasedScalesConfig } from '../layout/scales';
 import type { Accessor } from '../plots/data/common';
-import type { BasePlotStylesConfig } from '../layout/styles';
+import type { AxisBasedStylesConfig, GapsAwarePlotStylesConfig } from '../layout/styles';
 import type { SegmentsConfig, MarginConfig } from '../plots/props';
 import type { AxisBasedMarkersConfig } from '../markers/common';
 import type { TooltipProp } from '../layout/tooltip';
@@ -30,7 +30,7 @@ export type ChartProps<TRow extends Record<string, unknown>, TSegmentStyle exten
     x: Accessor<TRow, AxisValue>;
     y: Accessor<TRow, AxisValue>;
     z?: Accessor<TRow, unknown>;
-    styles?: BasePlotStylesConfig;
+    styles?: AxisBasedStylesConfig;
     segments?: SegmentsConfig<TSegmentStyle>;
     markers?: AxisBasedMarkersConfig[];
     scales?: AxisBasedScalesConfig<TRow>;
@@ -39,3 +39,12 @@ export type ChartProps<TRow extends Record<string, unknown>, TSegmentStyle exten
     timeline?: TimelineConfig<TRow>;
     tooltip?: TooltipProp<TRow>;
 };
+/**
+ * `ChartProps` for the chart kinds with gap-fill (`BarChart`/`LineChart`/
+ * `PyramidChart`) — identical shape, but `styles` accepts
+ * `GapsAwarePlotStylesConfig<TSegmentStyle>` (adds `styles.gaps`) instead of
+ * the plain `AxisBasedStylesConfig` every other chart kind uses.
+ */
+export type GapsAwareChartProps<TRow extends Record<string, unknown>, TSegmentStyle extends object = object> = Omit<ChartProps<TRow, TSegmentStyle>, 'styles'> & {
+    styles?: GapsAwarePlotStylesConfig<TSegmentStyle>;
+};

package/dist/types/configuration/styling.d.ts

@@ -83,6 +83,15 @@ export type ChartConfig = {
     line: {
         strokeWidth: number;
         dotRadius: number;
+        /**
+         * Default gap-fill bridge styling (`LinePlot`'s `styles.gaps`) — the
+         * fallback merged under whatever a gap zone's own `style` sets, the
+         * same way `hover.rule`/`hover.dot` back every hover marker's style.
+         */
+        gap: {
+            stroke: StrokeStyle;
+            dots: DotStyle;
+        };
         /**
          * End-of-line value-label declutter geometry and connector styling —
          * `LinePlot`-specific, since only line charts spread colliding
@@ -101,6 +110,16 @@ export type ChartConfig = {
             connectorWidth: number;
         };
     };
+    /** Default bar-mark styling. */
+    bar: {
+        /** Default gap-fill styling (`BarPlot`'s `styles.gaps`) — the fallback merged under whatever a gap zone's own `style` sets. */
+        gap: AreaStyle;
+    };
+    /** Default pyramid-bar styling. */
+    pyramid: {
+        /** Default gap-fill styling (`PyramidPlot`'s `styles.gaps`) — the fallback merged under whatever a gap zone's own `style` sets. */
+        gap: AreaStyle;
+    };
     /** Default scatter point geometry. */
     scatter: {
         dotRadius: number;

package/dist/types/layout/facet.d.ts

@@ -6,6 +6,7 @@ export type Responsive<T> = T | {
 };
 export type FacetColumns = Responsive<number>;
 export type FacetMode = 'grid' | 'carousel' | 'paginated';
+export type FacetNavLayout = 'overlay' | 'below';
 export type FacetCellContext<TRow extends Record<string, unknown>> = {
     facetValue: string;
     data: TRow[];
@@ -35,6 +36,7 @@ export type FacetConfig<TRow extends Record<string, unknown>> = {
     mode?: Responsive<FacetMode>;
     visible?: number;
     pageSize?: number;
+    navLayout?: FacetNavLayout;
     formatIndicator?: (current: number, total: number) => string;
     indicator?: FacetIndicatorSnippet;
     navButton?: FacetNavSnippet;