@fundar/data-chart-telling 0.0.28 → 0.0.30

package/dist/charts/bar/Chart.svelte

@@ -10,7 +10,7 @@
   import { resolveAccessor } from '../../plots/utils/accessors';
   import { resolveTimelineInterpolation } from '../../utils/interpolate';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
-  import type { ChartProps } from '../../types/charts/props';
+  import type { GapsAwareChartProps } from '../../types/charts/props';
 
   /**
    * High-level bar chart. Groups flat rows by `z` into one series per group
@@ -39,7 +39,7 @@
     facet,
     timeline,
     tooltip,
-  }: ChartProps<TRow, BarSegmentStyle> = $props();
+  }: GapsAwareChartProps<TRow, BarSegmentStyle> = $props();
 
   const tip = $derived(resolveTooltip(tooltip, 'x'));
   const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));

package/dist/charts/bar/Chart.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { BarSegmentStyle } from '../../types/plots/segments/common';
-import type { ChartProps } from '../../types/charts/props';
+import type { GapsAwareChartProps } from '../../types/charts/props';
 declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: ChartProps<TRow, BarSegmentStyle>;
+    props: GapsAwareChartProps<TRow, BarSegmentStyle>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/charts/line/Chart.svelte

@@ -10,7 +10,7 @@
   import { resolveAccessor } from '../../plots/utils/accessors';
   import { resolveTimelineInterpolation } from '../../utils/interpolate';
   import type { LineSegmentStyle } from '../../types/plots/segments/common';
-  import type { ChartProps } from '../../types/charts/props';
+  import type { GapsAwareChartProps } from '../../types/charts/props';
 
   /**
    * High-level line chart. It takes flat rows plus `x`/`y`/`z` encodings, groups
@@ -39,7 +39,7 @@
     facet,
     timeline,
     tooltip,
-  }: ChartProps<TRow, LineSegmentStyle> = $props();
+  }: GapsAwareChartProps<TRow, LineSegmentStyle> = $props();
 
   // A line should grow into its full extent over time, not snap to a single
   // year's point — so default to a cumulative reveal unless the caller wants

package/dist/charts/line/Chart.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { LineSegmentStyle } from '../../types/plots/segments/common';
-import type { ChartProps } from '../../types/charts/props';
+import type { GapsAwareChartProps } from '../../types/charts/props';
 declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: ChartProps<TRow, LineSegmentStyle>;
+    props: GapsAwareChartProps<TRow, LineSegmentStyle>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/charts/pyramid/Chart.svelte

@@ -12,7 +12,7 @@
   import type { AxisValue } from '../../types/layout/scales';
   import type { Accessor } from '../../types/plots/data/common';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
-  import type { ChartProps } from '../../types/charts/props';
+  import type { GapsAwareChartProps } from '../../types/charts/props';
 
   /**
    * High-level population-pyramid-style chart. Forwards flat rows and the
@@ -43,7 +43,7 @@
     facet,
     timeline,
     tooltip,
-  }: ChartProps<TRow, BarSegmentStyle> & { x: Accessor<TRow, number>; z: Accessor<TRow, unknown> } = $props();
+  }: GapsAwareChartProps<TRow, BarSegmentStyle> & { x: Accessor<TRow, number>; z: Accessor<TRow, unknown> } = $props();
 
   const getMagnitude = $derived(resolveAccessor<TRow>(magnitude));
   const getCategory = $derived(resolveAccessor<TRow>(category));

package/dist/charts/pyramid/Chart.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Accessor } from '../../types/plots/data/common';
-import type { ChartProps } from '../../types/charts/props';
 declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: ChartProps<TRow, import("../..").AreaStyle> & {
+    props: Omit<import("../../types/charts/props").ChartProps<TRow, import("../..").AreaStyle>, "styles"> & {
+        styles?: import("../..").GapsAwarePlotStylesConfig<import("../..").AreaStyle> | undefined;
+    } & {
         x: Accessor<TRow, number>;
         z: Accessor<TRow, unknown>;
     };

package/dist/configuration/config.svelte.js

@@ -73,6 +73,10 @@ export const DEFAULT_CONFIG = {
     line: {
         strokeWidth: 3,
         dotRadius: 4,
+        gap: {
+            stroke: { strokeOpacity: 0.6, strokeDasharray: '4 4' },
+            dots: {},
+        },
         valueLabels: {
             elbowGap: 10,
             laneStep: 7,
@@ -81,6 +85,8 @@ export const DEFAULT_CONFIG = {
             connectorWidth: 0.5,
         },
     },
+    bar: { gap: { fillOpacity: 0.5 } },
+    pyramid: { gap: { fillOpacity: 0.5 } },
     scatter: { dotRadius: 5 },
     timeline: { axisColor: 'currentColor', activeColor: '#e6580d', thickness: 60 },
     hover: {

package/dist/configuration/themes/index.d.ts

@@ -84,6 +84,26 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            gap?: {
+                stroke?: {
+                    stroke?: string | undefined;
+                    strokeWidth?: number | undefined;
+                    strokeOpacity?: number | undefined;
+                    strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                    strokeLinecap?: import("../..").LineCap | undefined;
+                    strokeLinejoin?: import("../..").LineJoin | undefined;
+                } | undefined;
+                dots?: {
+                    dotRadius?: number | undefined;
+                    dotFill?: string | undefined;
+                    dotFillOpacity?: number | undefined;
+                    dotSymbol?: import("../..").SymbolType | undefined;
+                    dotStroke?: string | undefined;
+                    dotStrokeWidth?: number | undefined;
+                    dotStrokeOpacity?: number | undefined;
+                    dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                } | undefined;
+            } | undefined;
             valueLabels?: {
                 elbowGap?: number | undefined;
                 laneStep?: number | undefined;
@@ -92,6 +112,28 @@ export declare const THEMES: {
                 connectorWidth?: number | undefined;
             } | undefined;
         } | undefined;
+        bar?: {
+            gap?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
+        } | undefined;
+        pyramid?: {
+            gap?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
+        } | undefined;
         scatter?: {
             dotRadius?: number | undefined;
         } | undefined;
@@ -242,6 +284,26 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            gap?: {
+                stroke?: {
+                    stroke?: string | undefined;
+                    strokeWidth?: number | undefined;
+                    strokeOpacity?: number | undefined;
+                    strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                    strokeLinecap?: import("../..").LineCap | undefined;
+                    strokeLinejoin?: import("../..").LineJoin | undefined;
+                } | undefined;
+                dots?: {
+                    dotRadius?: number | undefined;
+                    dotFill?: string | undefined;
+                    dotFillOpacity?: number | undefined;
+                    dotSymbol?: import("../..").SymbolType | undefined;
+                    dotStroke?: string | undefined;
+                    dotStrokeWidth?: number | undefined;
+                    dotStrokeOpacity?: number | undefined;
+                    dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                } | undefined;
+            } | undefined;
             valueLabels?: {
                 elbowGap?: number | undefined;
                 laneStep?: number | undefined;
@@ -250,6 +312,28 @@ export declare const THEMES: {
                 connectorWidth?: number | undefined;
             } | undefined;
         } | undefined;
+        bar?: {
+            gap?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
+        } | undefined;
+        pyramid?: {
+            gap?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
+        } | undefined;
         scatter?: {
             dotRadius?: number | undefined;
         } | undefined;
@@ -400,6 +484,26 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            gap?: {
+                stroke?: {
+                    stroke?: string | undefined;
+                    strokeWidth?: number | undefined;
+                    strokeOpacity?: number | undefined;
+                    strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                    strokeLinecap?: import("../..").LineCap | undefined;
+                    strokeLinejoin?: import("../..").LineJoin | undefined;
+                } | undefined;
+                dots?: {
+                    dotRadius?: number | undefined;
+                    dotFill?: string | undefined;
+                    dotFillOpacity?: number | undefined;
+                    dotSymbol?: import("../..").SymbolType | undefined;
+                    dotStroke?: string | undefined;
+                    dotStrokeWidth?: number | undefined;
+                    dotStrokeOpacity?: number | undefined;
+                    dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                } | undefined;
+            } | undefined;
             valueLabels?: {
                 elbowGap?: number | undefined;
                 laneStep?: number | undefined;
@@ -408,6 +512,28 @@ export declare const THEMES: {
                 connectorWidth?: number | undefined;
             } | undefined;
         } | undefined;
+        bar?: {
+            gap?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
+        } | undefined;
+        pyramid?: {
+            gap?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
+        } | undefined;
         scatter?: {
             dotRadius?: number | undefined;
         } | undefined;
@@ -558,6 +684,26 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            gap?: {
+                stroke?: {
+                    stroke?: string | undefined;
+                    strokeWidth?: number | undefined;
+                    strokeOpacity?: number | undefined;
+                    strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                    strokeLinecap?: import("../..").LineCap | undefined;
+                    strokeLinejoin?: import("../..").LineJoin | undefined;
+                } | undefined;
+                dots?: {
+                    dotRadius?: number | undefined;
+                    dotFill?: string | undefined;
+                    dotFillOpacity?: number | undefined;
+                    dotSymbol?: import("../..").SymbolType | undefined;
+                    dotStroke?: string | undefined;
+                    dotStrokeWidth?: number | undefined;
+                    dotStrokeOpacity?: number | undefined;
+                    dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                } | undefined;
+            } | undefined;
             valueLabels?: {
                 elbowGap?: number | undefined;
                 laneStep?: number | undefined;
@@ -566,6 +712,28 @@ export declare const THEMES: {
                 connectorWidth?: number | undefined;
             } | undefined;
         } | undefined;
+        bar?: {
+            gap?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
+        } | undefined;
+        pyramid?: {
+            gap?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
+        } | undefined;
         scatter?: {
             dotRadius?: number | undefined;
         } | undefined;

package/dist/index.d.ts

@@ -39,7 +39,8 @@ export { makeColorScale, normalize, resolveCssColor, paletteColor } from './util
 export type { AxisValue, AxisScale, AxisBasedScalesConfig } from './types/layout/scales';
 export type { Accessor, Series, SeriesProps, DataProps } from './types/plots/data/common';
 export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig, PointMatchingStrategy, } from './types/plots/props';
-export type { ValuesStyle, ColorsStyle, FrameStyle, FrameProp, BasePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig, } from './types/layout/styles';
+export type { ValuesStyle, ColorsStyle, FrameStyle, FrameProp, BasePlotStylesConfig, AxisBasedStylesConfig, GapsAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig, } from './types/layout/styles';
+export type { GapsConfig, GapZonesConfig, GapZoneConfig, OpenGapZoneConfig, } from './types/plots/gaps';
 export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentStyle, ScatterSegmentStyle } from './types/plots/segments/common';
 export type { Range, Area, Segment } from './types/plots/segments/config';
 export type { ValueAnchor, SymbolType, LineStyle, LineCap, LineJoin, FontWeight, FontStyleKeyword, TextAnchor, LineAnchor, } from './types/plots/constants';
@@ -53,8 +54,8 @@ export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCu
 export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig, } from './types/markers/geo';
 export type { ChartPlotContext, ChartPlotSnippet, } from './types/charts/common';
 export type { TimeValue, Orientation, TimelineConfig, } from './types/layout/timeline';
-export type { Responsive, FacetColumns, FacetMode, FacetConfig, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet, } from './types/layout/facet';
+export type { Responsive, FacetColumns, FacetMode, FacetNavLayout, FacetConfig, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet, } from './types/layout/facet';
 export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendInteractionStore, LegendPlotContext, } from './types/layout/legend';
 export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipAnchorX, TooltipAnchorY, } from './types/layout/tooltip';
 export type { ChartConfig, ChartConfigInput, TextStyle } from './types/configuration/styling';
-export type { ChartProps } from './types/charts/props';
+export type { ChartProps, GapsAwareChartProps } from './types/charts/props';

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -27,6 +27,7 @@
     coordinates = undefined,
     data,
     containerEl,
+    remountKey = undefined,
     children,
   }: {
     width: number;
@@ -38,6 +39,8 @@
     /** Fed to `resolveProjection`'s `domain: 'data'` sentinel — the same rows `BasePlotLayout` uses for hover matching. */
     data: TData[];
     containerEl?: HTMLDivElement;
+    /** See `BasePlotLayout`'s own `remountKey` doc comment — forwarded verbatim to key svelteplot's `<Plot>` itself. */
+    remountKey?: string | number;
     children: Snippet;
   } = $props();
 
@@ -88,8 +91,10 @@
   });
 </script>
 
-<Plot {width} {height} {margin} {x} {y} projection={finalProjection as SveltePlotProps['projection']}>
-  <g transform="translate({geoZoom.transform.x}, {geoZoom.transform.y}) scale({geoZoom.transform.k})">
-    {@render children()}
-  </g>
-</Plot>
+{#key remountKey}
+  <Plot {width} {height} {margin} {x} {y} projection={finalProjection as SveltePlotProps['projection']}>
+    <g transform="translate({geoZoom.transform.x}, {geoZoom.transform.y}) scale({geoZoom.transform.k})">
+      {@render children()}
+    </g>
+  </Plot>
+{/key}

package/dist/layout/coordinates/CoordinatesLayout.svelte.d.ts

@@ -11,6 +11,8 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         /** Fed to `resolveProjection`'s `domain: 'data'` sentinel — the same rows `BasePlotLayout` uses for hover matching. */
         data: TData[];
         containerEl?: HTMLDivElement;
+        /** See `BasePlotLayout`'s own `remountKey` doc comment — forwarded verbatim to key svelteplot's `<Plot>` itself. */
+        remountKey?: string | number;
         children: Snippet;
     };
     exports: {};

package/dist/layout/facet/FacetLayout.svelte

@@ -5,6 +5,7 @@
   import type {
     FacetColumns,
     FacetMode,
+    FacetNavLayout,
     Responsive,
     FacetCellSnippet,
     FacetIndicatorSnippet,
@@ -32,6 +33,7 @@
     mode = 'grid',
     visible = 1,
     pageSize,
+    navLayout = 'overlay',
     formatIndicator,
     indicator,
     navButton,
@@ -47,6 +49,7 @@
     mode?: Responsive<FacetMode>;
     visible?: number;
     pageSize?: number;
+    navLayout?: FacetNavLayout;
     formatIndicator?: (current: number, total: number) => string;
     indicator?: FacetIndicatorSnippet;
     navButton?: FacetNavSnippet;
@@ -73,20 +76,16 @@
 
   const resolvedMode = $derived(resolveResponsive(mode, $isMobile));
 
-  const cols = $derived.by(() => {
+  // Columns/rows for a "full" grid of every entry — used for plain grid-mode
+  // layout, and as the default `pageSize` (one page = one full screen).
+  const gridCols = $derived.by(() => {
     const desired = resolveResponsive(columns, $isMobile);
     return Math.max(1, Math.min(desired, entries.length || 1));
   });
-
-  const rows = $derived(Math.ceil((entries.length || 1) / cols));
-  const cellWidth = $derived(Math.max(0, Math.floor((width - (cols - 1) * gap) / cols)));
-  const TITLE_H = 24;
-  const cellHeight = $derived(
-    Math.max(0, Math.floor((height - (rows - 1) * gap) / rows) - TITLE_H),
-  );
+  const gridRows = $derived(Math.ceil((entries.length || 1) / gridCols));
 
   // ── paginated ────────────────────────────────────────────────────────────
-  const resolvedPageSize = $derived(Math.max(1, pageSize ?? cols * rows));
+  const resolvedPageSize = $derived(Math.max(1, pageSize ?? gridCols * gridRows));
   let page = $state(0);
   const totalPages = $derived(Math.max(1, Math.ceil(entries.length / resolvedPageSize)));
   const pageEntries = $derived(
@@ -104,6 +103,37 @@
     page = Math.min(totalPages - 1, page + 1);
   }
 
+  const showNav = $derived(resolvedMode === 'paginated' && totalPages > 1);
+  const NAV_BELOW_H = 44;
+
+  // Columns/rows actually used to size each rendered cell. `grid` mode always
+  // renders every entry, so it sizes off `gridCols`/`gridRows` as before. In
+  // `paginated` mode only `pageEntries` (at most `pageSize`, possibly fewer
+  // on the last page) are ever on screen at once — sizing off the *total*
+  // entry count instead (as `gridCols`/`gridRows` do) left a page with fewer
+  // entries than a full grid mostly blank, e.g. `pageSize: 1` still reserved
+  // room for every other page's rows instead of filling the chart area with
+  // its one cell.
+  const cols = $derived(
+    resolvedMode === 'paginated' ? Math.max(1, Math.min(gridCols, pageEntries.length || 1)) : gridCols,
+  );
+  const rows = $derived(
+    resolvedMode === 'paginated' ? Math.ceil((pageEntries.length || 1) / cols) : gridRows,
+  );
+  // In `navLayout: 'below'`, the nav row sits in normal flow beneath the
+  // grid rather than floating over it, so the cells must be measured against
+  // the height left over after reserving space for that row.
+  const contentHeight = $derived(
+    resolvedMode === 'paginated' && navLayout === 'below' && showNav
+      ? Math.max(0, height - NAV_BELOW_H)
+      : height,
+  );
+  const cellWidth = $derived(Math.max(0, Math.floor((width - (cols - 1) * gap) / cols)));
+  const TITLE_H = 24;
+  const cellHeight = $derived(
+    Math.max(0, Math.floor((contentHeight - (rows - 1) * gap) / rows) - TITLE_H),
+  );
+
   // ── carousel ─────────────────────────────────────────────────────────────
   const visibleCount = $derived(Math.max(1, Math.min(visible, entries.length || 1)));
   const carouselCellWidth = $derived(
@@ -152,13 +182,17 @@
   }
 </script>
 
+{#snippet indicatorContent(current: number, total: number)}
+  {#if indicator}
+    {@render indicator({ current, total })}
+  {:else}
+    <FacetIndicator {current} {total} format={formatIndicator} />
+  {/if}
+{/snippet}
+
 {#snippet indicatorSlot(current: number, total: number)}
   <div class="dct-facet-indicator-slot">
-    {#if indicator}
-      {@render indicator({ current, total })}
-    {:else}
-      <FacetIndicator {current} {total} format={formatIndicator} />
-    {/if}
+    {@render indicatorContent(current, total)}
   </div>
 {/snippet}
 
@@ -196,12 +230,20 @@
 {#if resolvedMode === 'paginated'}
   <div class="dct-facet-paginated" style:width="{width}px" style:height="{height}px">
     {@render grid(pageEntries)}
-    {#if totalPages > 1}
-      <div class="dct-facet-paginated__nav">
-        {@render navButtons('prev', page === 0, prevPage, 'Previous page', '‹')}
-        {@render navButtons('next', page >= totalPages - 1, nextPage, 'Next page', '›')}
-      </div>
-      {@render indicatorSlot(page + 1, totalPages)}
+    {#if showNav}
+      {#if navLayout === 'below'}
+        <div class="dct-facet-paginated__nav-below" style:height="{NAV_BELOW_H}px">
+          {@render navButtons('prev', page === 0, prevPage, 'Previous page', '‹')}
+          {@render indicatorContent(page + 1, totalPages)}
+          {@render navButtons('next', page >= totalPages - 1, nextPage, 'Next page', '›')}
+        </div>
+      {:else}
+        <div class="dct-facet-paginated__nav">
+          {@render navButtons('prev', page === 0, prevPage, 'Previous page', '‹')}
+          {@render navButtons('next', page >= totalPages - 1, nextPage, 'Next page', '›')}
+        </div>
+        {@render indicatorSlot(page + 1, totalPages)}
+      {/if}
     {/if}
   </div>
 {:else if resolvedMode === 'carousel'}
@@ -248,6 +290,14 @@
     display: grid;
     width: 100%;
     height: 100%;
+    /* Only takes effect when `.dct-facet` is itself a flex item (inside
+       `.dct-facet-paginated`): lets it shrink to the space left over after
+       a `flex: 0 0 auto` sibling (the below-layout nav row) claims its
+       fixed height, instead of overflowing past the fixed-height parent
+       the way a bare `height: 100%` would. No-op outside a flex parent
+       (e.g. plain `grid` mode), where `width/height: 100%` alone applies. */
+    flex: 1 1 auto;
+    min-height: 0;
   }
   .dct-facet__cell {
     display: flex;
@@ -281,6 +331,13 @@
   .dct-facet-nav-slot {
     pointer-events: auto;
   }
+  .dct-facet-paginated__nav-below {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dct-facet-nav-below-gap, 0.75rem);
+  }
   .dct-facet-paginated__btn {
     border: none;
     border-radius: 999px;

package/dist/layout/facet/FacetLayout.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FacetColumns, FacetMode, Responsive, FacetCellSnippet, FacetIndicatorSnippet, FacetNavSnippet } from '../../types/layout/facet';
+import type { FacetColumns, FacetMode, FacetNavLayout, Responsive, FacetCellSnippet, FacetIndicatorSnippet, FacetNavSnippet } from '../../types/layout/facet';
 import type { Accessor } from '../../types/plots/data/common';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {
@@ -10,6 +10,7 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         mode?: Responsive<FacetMode>;
         visible?: number;
         pageSize?: number;
+        navLayout?: FacetNavLayout;
         formatIndicator?: (current: number, total: number) => string;
         indicator?: FacetIndicatorSnippet;
         navButton?: FacetNavSnippet;

package/dist/layout/plot/BasePlotLayout.svelte

@@ -47,6 +47,7 @@
     coordinates = undefined,
     margins,
     marginEstimate = AUTO_MARGIN_ESTIMATE,
+    marginRemountKey = undefined,
     xTickRotate = undefined,
     styles = undefined,
     markers = undefined,
@@ -76,6 +77,23 @@
     margins?: MarginConfig;
     /** Numeric fallback for a margin side that resolved to `'auto'` — see `numericMargin`'s doc comment. */
     marginEstimate?: Record<'top' | 'right' | 'bottom' | 'left', number>;
+    /**
+     * Forces svelteplot's own `<Plot>` to fully unmount/remount (via
+     * `{#key}`) whenever this changes, instead of reacting to a `margins`
+     * prop change on an already-mounted instance. Only needed by a caller
+     * (line's own `Plot.svelte`) whose `margins` grows *after* mount, from
+     * measuring rendered content (see `createLabelMarginTracker`) — handing
+     * svelteplot's `<Plot>` a live post-mount margin change (rather than the
+     * same final value from its very first mount) was observed to send its
+     * own internal auto-margin sizing into a permanent one-pixel
+     * bottom-margin oscillation for line's end-point value labels
+     * specifically, which in turn kept re-triggering the overflow watcher
+     * that grew the margin in the first place — an infinite effect loop
+     * that tripped Svelte's `effect_update_depth_exceeded` guard. A static
+     * `margins` prop (the common case — every other plot kind) never needs
+     * this; leave it unset there.
+     */
+    marginRemountKey?: string | number;
     /** Boosts the bottom margin for a rotated x tick label — axis-having plot kinds only. */
     xTickRotate?: number;
     /** This plot kind's own `styles` prop, forwarded to the Styles layer. */
@@ -229,6 +247,7 @@
     {coordinates}
     {data}
     {containerEl}
+    remountKey={marginRemountKey}
   >
     <StylesLayout {styles} {width} {height} {numericMargins} />
     {#if scales !== undefined}

package/dist/layout/plot/BasePlotLayout.svelte.d.ts

@@ -30,6 +30,23 @@ declare function $$render<TData extends Record<string, unknown>, TSeries extends
         margins?: MarginConfig;
         /** Numeric fallback for a margin side that resolved to `'auto'` — see `numericMargin`'s doc comment. */
         marginEstimate?: Record<"top" | "right" | "bottom" | "left", number>;
+        /**
+         * Forces svelteplot's own `<Plot>` to fully unmount/remount (via
+         * `{#key}`) whenever this changes, instead of reacting to a `margins`
+         * prop change on an already-mounted instance. Only needed by a caller
+         * (line's own `Plot.svelte`) whose `margins` grows *after* mount, from
+         * measuring rendered content (see `createLabelMarginTracker`) — handing
+         * svelteplot's `<Plot>` a live post-mount margin change (rather than the
+         * same final value from its very first mount) was observed to send its
+         * own internal auto-margin sizing into a permanent one-pixel
+         * bottom-margin oscillation for line's end-point value labels
+         * specifically, which in turn kept re-triggering the overflow watcher
+         * that grew the margin in the first place — an infinite effect loop
+         * that tripped Svelte's `effect_update_depth_exceeded` guard. A static
+         * `margins` prop (the common case — every other plot kind) never needs
+         * this; leave it unset there.
+         */
+        marginRemountKey?: string | number;
         /** Boosts the bottom margin for a rotated x tick label — axis-having plot kinds only. */
         xTickRotate?: number;
         /** This plot kind's own `styles` prop, forwarded to the Styles layer. */