@fundar/data-chart-telling 0.0.49 → 0.0.51

package/dist/configuration/config.svelte.js

@@ -115,7 +115,12 @@ export const DEFAULT_CONFIG = {
             connectorWidth: 0.5
         }
     },
-    bar: { gap: { fillOpacity: 0.5 } },
+    bar: {
+        gap: { fillOpacity: 0.5 },
+        seriesPadding: 0.2,
+        paddingInner: 0.15,
+        paddingOuter: 0.15
+    },
     pyramid: { gap: { fillOpacity: 0.5 } },
     scatter: { dotRadius: 5 },
     timeline: { axisColor: 'currentColor', activeColor: '#e6580d', thickness: 60 },
@@ -123,7 +128,7 @@ export const DEFAULT_CONFIG = {
         rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
         dot: { dotRadius: 5, dotFill: 'currentColor' },
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
-        area: { stroke: '#e6580d', strokeWidth: 2, fillOpacity: 0 }
+        area: { fill: '#94a3b8', fillOpacity: 0.25 }
     },
     facet: {
         indicator: {

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

@@ -147,6 +147,9 @@ export declare const THEMES: {
                 strokeDasharray?: (string | import("../..").LineStyle) | undefined;
                 borderRadius?: number | undefined;
             } | undefined;
+            seriesPadding?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
         } | undefined;
         pyramid?: {
             gap?: {
@@ -372,6 +375,9 @@ export declare const THEMES: {
                 strokeDasharray?: (string | import("../..").LineStyle) | undefined;
                 borderRadius?: number | undefined;
             } | undefined;
+            seriesPadding?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
         } | undefined;
         pyramid?: {
             gap?: {
@@ -597,6 +603,9 @@ export declare const THEMES: {
                 strokeDasharray?: (string | import("../..").LineStyle) | undefined;
                 borderRadius?: number | undefined;
             } | undefined;
+            seriesPadding?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
         } | undefined;
         pyramid?: {
             gap?: {
@@ -822,6 +831,9 @@ export declare const THEMES: {
                 strokeDasharray?: (string | import("../..").LineStyle) | undefined;
                 borderRadius?: number | undefined;
             } | undefined;
+            seriesPadding?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
         } | undefined;
         pyramid?: {
             gap?: {

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { default as TextMarker } from './markers/TextMarker.svelte';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 export type { ThemeName } from './configuration/themes';
-export { groupBy, buildSeries } from './utils/grouping';
+export { groupBy } from './utils/grouping';
 export { makeColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
 export { estimateCategoricalAxisMargin } from './plots/utils/categoricalAxisMargin';
 export { estimateLineValueLabelMargin } from './plots/line/valueLabelMargin';
@@ -58,7 +58,7 @@ export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, Geo
 export type { ChartPlotContext, ChartPlotSnippet } from './types/charts/common';
 export type { TimeValue, Orientation, TimelineConfig } from './types/layout/timeline';
 export type { Responsive, FacetColumns, FacetMode, FacetNavLayout, FacetConfig, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet } from './types/layout/facet';
-export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendItemsLayout, LegendInteractiveStyle, DiscreteInteractiveConfig, ContinuousInteractiveConfig, LegendNavDirection, LegendNavContext, LegendNavSnippet, LegendInteractionStore, LegendPlotContext } from './types/layout/legend';
+export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendDisabledAction, LegendItemsLayout, LegendInteractiveStyle, DiscreteInteractiveConfig, ContinuousInteractiveConfig, LegendNavDirection, LegendNavContext, LegendNavSnippet, 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, GapsAwareChartProps } from './types/charts/props';

package/dist/index.js

@@ -41,7 +41,7 @@ export { default as TextMarker } from './markers/TextMarker.svelte';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 // ── Utils ─────────────────────────────────────────────────────────────────────
-export { groupBy, buildSeries } from './utils/grouping';
+export { groupBy } from './utils/grouping';
 export { makeColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
 export { estimateCategoricalAxisMargin } from './plots/utils/categoricalAxisMargin';
 export { estimateLineValueLabelMargin } from './plots/line/valueLabelMargin';

package/dist/layout/legend/DiscreteBadgeItem.svelte

@@ -4,18 +4,23 @@
 	import type { LegendItem } from '../../types/layout/legend';
 
 	/**
-	 * The `interactive.legendStyle: 'badge'` item look: a pill filled with the
-	 * series color, its symbol icon (unless `showIcon` is off) and label
-	 * auto-contrasted against that fill, and an eye icon that's crossed out
-	 * while `disabled`. The toggled-off dim itself is applied by the parent
-	 * `.dct-discrete__item`.
+	 * The `interactive.legendStyle: 'badge'` item look: a pill with the series
+	 * color, symbol icon, label, and a toggle icon — an eye (crossed out when
+	 * `disabled`) for `'style'` mode, or a plus/cross pair for `'omit'`.
 	 */
 	let {
 		item,
 		color,
 		disabled,
-		showIcon = true
-	}: { item: LegendItem; color: string; disabled: boolean; showIcon?: boolean } = $props();
+		showIcon = true,
+		omitMode = false
+	}: {
+		item: LegendItem;
+		color: string;
+		disabled: boolean;
+		showIcon?: boolean;
+		omitMode?: boolean;
+	} = $props();
 	const textColor = $derived(contrastTextColor(color));
 </script>
 
@@ -25,7 +30,15 @@
 	{/if}
 	<span class="dct-discrete__label">{item.label || item.name}</span>
 	<svg class="dct-discrete__eye" viewBox="0 0 24 24" aria-hidden="true">
-		{#if disabled}
+		{#if omitMode}
+			{#if disabled}
+				<line x1="12" y1="5" x2="12" y2="19" />
+				<line x1="5" y1="12" x2="19" y2="12" />
+			{:else}
+				<line x1="6" y1="6" x2="18" y2="18" />
+				<line x1="6" y1="18" x2="18" y2="6" />
+			{/if}
+		{:else if disabled}
 			<path
 				d="M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a18.5 18.5 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
 			/>

package/dist/layout/legend/DiscreteBadgeItem.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     color: string;
     disabled: boolean;
     showIcon?: boolean;
+    omitMode?: boolean;
 };
 declare const DiscreteBadgeItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type DiscreteBadgeItem = ReturnType<typeof DiscreteBadgeItem>;

package/dist/layout/legend/DiscreteSection.svelte

@@ -6,18 +6,25 @@
 		getLegendInteraction,
 		createLegendInteraction
 	} from './interaction.svelte';
+	import { resolveDisabledStyle } from '../../plots/utils/legendDisabled';
 	import DiscreteBadgeItem from './DiscreteBadgeItem.svelte';
 	import DiscreteSwatchItem from './DiscreteSwatchItem.svelte';
 	import type {
 		DiscreteLegendSection,
+		LegendDisabledAction,
 		LegendItem,
+		LegendItemsLayout,
 		LegendNavDirection
 	} from '../../types/layout/legend';
 
-	let { section }: { section: DiscreteLegendSection } = $props();
+	/** `defaultItemsLayout` is the fallback used when `section.layout` isn't set. */
+	let {
+		section,
+		defaultItemsLayout = { type: 'vertical' }
+	}: { section: DiscreteLegendSection; defaultItemsLayout?: LegendItemsLayout } = $props();
 
 	const cfg = $derived(getConfiguration());
-	const layout = $derived(section.layout ?? { type: 'vertical' as const });
+	const layout = $derived(section.layout ?? defaultItemsLayout);
 	const isHorizontal = $derived(layout.type === 'horizontal');
 	const maxRows = $derived(layout.type === 'horizontal' ? Math.max(1, layout.maxRows ?? 1) : 1);
 	const columns = $derived(section.columns ?? 1);
@@ -26,8 +33,8 @@
 		isInteractive && (section.interactive?.legendStyle ?? 'badge') === 'badge'
 	);
 	const showIcon = $derived(section.interactive?.showIcon ?? true);
-	const disabledStyle = $derived(
-		section.interactive?.disabledStyle ?? { opacity: cfg.legend.disabledOpacity }
+	const disabledAction = $derived<LegendDisabledAction>(
+		section.interactive?.disabled ?? { mode: 'style' }
 	);
 	const interaction = getLegendInteraction() ?? createLegendInteraction();
 
@@ -37,7 +44,7 @@
 			if (seeded.has(item.name)) continue;
 			seeded.add(item.name);
 			if (item.disabled) {
-				interaction.disabledSeries.set(item.name, disabledStyle);
+				interaction.disabledSeries.set(item.name, disabledAction);
 			}
 		}
 	});
@@ -47,7 +54,7 @@
 		if (interaction.disabledSeries.has(item.name)) {
 			interaction.disabledSeries.delete(item.name);
 		} else {
-			interaction.disabledSeries.set(item.name, disabledStyle);
+			interaction.disabledSeries.set(item.name, disabledAction);
 		}
 	}
 
@@ -142,8 +149,14 @@
 </script>
 
 {#snippet discreteItem(item: LegendItem, i: number)}
-	{@const disabledStyle = interaction.disabledSeries.get(item.name)}
-	{@const isDisabled = disabledStyle != null}
+	{@const action = interaction.disabledSeries.get(item.name)}
+	{@const isDisabled = action != null}
+	{@const omitMode = disabledAction.mode === 'omit'}
+	{@const disabledStyle = isDisabled
+		? omitMode
+			? { opacity: cfg.legend.disabledOpacity }
+			: resolveDisabledStyle(action, cfg.legend.disabledOpacity)
+		: undefined}
 	{@const color =
 		disabledStyle?.fill ??
 		disabledStyle?.stroke?.stroke ??
@@ -167,7 +180,7 @@
 			: {}}
 	>
 		{#if useBadge}
-			<DiscreteBadgeItem {item} {color} disabled={isDisabled} {showIcon} />
+			<DiscreteBadgeItem {item} {color} disabled={isDisabled} {showIcon} {omitMode} />
 		{:else}
 			<DiscreteSwatchItem {item} {color} />
 		{/if}

package/dist/layout/legend/DiscreteSection.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { DiscreteLegendSection } from '../../types/layout/legend';
+import type { DiscreteLegendSection, LegendItemsLayout } from '../../types/layout/legend';
 type $$ComponentProps = {
     section: DiscreteLegendSection;
+    defaultItemsLayout?: LegendItemsLayout;
 };
 declare const DiscreteSection: import("svelte").Component<$$ComponentProps, {}, "">;
 type DiscreteSection = ReturnType<typeof DiscreteSection>;

package/dist/layout/legend/LegendLayout.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
-  import type { LegendSection } from '../../types/layout/legend';
+  import type { LegendItemsLayout, LegendSection } from '../../types/layout/legend';
   import DiscreteSection from './DiscreteSection.svelte';
   import ContinuousSection from './ContinuousSection.svelte';
 
   /**
    * Renders one or more legend sections side by side, dispatching each to the
    * matching section renderer. Discrete and continuous sections can be mixed.
+   * A lone discrete section's items default to horizontal flow; vertical once
+   * a second section joins. A section's own `layout` always wins.
    */
   let { sections }: { sections: LegendSection[] } = $props();
+  const defaultItemsLayout = $derived<LegendItemsLayout>(
+    sections.length === 1 ? { type: 'horizontal' } : { type: 'vertical' }
+  );
 </script>
 
 <div class="dct-legend">
@@ -17,7 +22,7 @@
         <div class="dct-legend__title">{section.title}</div>
       {/if}
       {#if section.type === 'discrete'}
-        <DiscreteSection {section} />
+        <DiscreteSection {section} {defaultItemsLayout} />
       {:else if section.type === 'continuous'}
         <ContinuousSection {section} />
       {/if}

package/dist/layout/scales/ScalesLayout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { AxisX, AxisY, GridX, GridY } from 'svelteplot';
+  import { AxisX, AxisY, GridX, GridY, usePlot } from 'svelteplot';
   import { getConfiguration } from '../../configuration/config.svelte';
+  import { tickStep, ticksInRange, naturalTickCount } from './niceDomain';
   import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
 
   /**
@@ -28,15 +29,25 @@
   } = $props();
 
   const cfg = $derived(getConfiguration());
+  const plot = usePlot();
 
   const xValues = $derived(data.map(getX));
   const yValues = $derived(data.map(getY));
 
-  function naturalTickCount(span: number, spacing: number, min: number): number {
-    return Math.max(min, Math.round(span / spacing));
-  }
-
-  /** `[min, max]` of a pinned `scale.domain` (if numeric), else the extent of `values`. */
+  /**
+   * `[min, max]` of a pinned `scale.domain` (if numeric), else the extent of
+   * `values`. Deliberately *not* the live, fully-resolved scale off
+   * `usePlot()` (e.g. `plot.scales.x.domain`), even though that would be
+   * more accurate for a bar's implicit zero baseline or a stacked series'
+   * cumulative total: reading it reactively here — inside a `$derived` that
+   * itself feeds back into `<AxisX>`'s rendered tick content, which
+   * `BasePlotLayout`'s own auto-margin sizing measures — closes a
+   * live-scale ⇄ rendered-axis feedback loop that was observed to perturb
+   * margin *settling* (a captured-and-frozen `bind:margins` value gained a
+   * stray extra `left` entry it wasn't tracking before). `edgeInclusiveTicks`
+   * instead sidesteps needing this axis's own real extent at all, by only
+   * running when the *opposite* axis's resolved type says it's safe to.
+   */
   function axisExtent(scale: AxisBasedScalesConfig<TData>['x'], values: AxisValue[]): [number, number] | undefined {
     const domainNumbers = scale?.domain?.filter((d): d is number => typeof d === 'number');
     const source = domainNumbers && domainNumbers.length >= 2 ? domainNumbers : values.filter((v): v is number => typeof v === 'number');
@@ -46,9 +57,30 @@
     return hi > lo ? [lo, hi] : undefined;
   }
 
-  /** Caps tick count to the axis's distinct value count, never above what fits the pixel span. Skipped once the caller sets tick density directly, or pins the domain. */
-  function autoTickCount(scale: AxisBasedScalesConfig<TData>['x'], values: AxisValue[], span: number, spacing: number, min: number): number | undefined {
+  /** Resolved scale types with their own discrete tick semantics — an axis paired with one of these plays the "index" role for the pair, so *this* axis is the plain magnitude/value one (see `autoTickCount`, `edgeInclusiveTicks`). */
+  const DISCRETE_SCALE_TYPES = new Set(['band', 'categorical', 'point', 'ordinal']);
+
+  /**
+   * Caps tick count to the axis's distinct value count, never above what
+   * fits the pixel span — meaningful for an index-like axis (don't show more
+   * ticks than there are actual data points), but not for a magnitude/value
+   * one, where "how many bars there are" has nothing to do with how many
+   * round numbers should label the axis (and can otherwise stop tick
+   * generation short of `nice`'s own widened domain edge — the same
+   * "opposite axis is discrete ⇒ this one's a value axis" signal
+   * `edgeInclusiveTicks` uses). Skipped once the caller sets tick density
+   * directly, or pins the domain.
+   */
+  function autoTickCount(
+    oppositeType: string | undefined,
+    scale: AxisBasedScalesConfig<TData>['x'],
+    values: AxisValue[],
+    span: number,
+    spacing: number,
+    min: number
+  ): number | undefined {
     if (scale?.ticks != null || scale?.tickSpacing != null || scale?.interval != null || scale?.domain != null) return undefined;
+    if (oppositeType != null && DISCRETE_SCALE_TYPES.has(oppositeType)) return undefined;
     const uniqueCount = new Set(values.map(String)).size;
     const natural = naturalTickCount(span, spacing, min);
     return uniqueCount >= 2 && uniqueCount < natural ? uniqueCount : undefined;
@@ -74,12 +106,56 @@
   const xSpan = $derived(Math.max(0, width - numericMargins.left - numericMargins.right));
   const ySpan = $derived(Math.max(0, height - numericMargins.top - numericMargins.bottom));
 
-  const xTickCount = $derived(autoTickCount(scales?.x, xValues, xSpan, 80, 3));
-  const yTickCount = $derived(autoTickCount(scales?.y, yValues, ySpan, 50, 2));
+  const xTickCount = $derived(autoTickCount(plot.scales.y.type, scales?.x, xValues, xSpan, 80, 3));
+  const yTickCount = $derived(autoTickCount(plot.scales.x.type, scales?.y, yValues, ySpan, 50, 2));
 
   const xTickInterval = $derived(integerTickInterval(scales?.x, xValues, xSpan, 80, 3));
   const yTickInterval = $derived(integerTickInterval(scales?.y, yValues, ySpan, 50, 2));
 
+  /**
+   * An axis's own natural "nice" ticks, plus the domain's exact endpoints
+   * whenever a natural tick doesn't already land on them — so the axis
+   * always labels the actual start/end of its real range, not just
+   * whichever round numbers happen to fall inside it (which, per
+   * `axisExtent`, may extend past the raw data — e.g. a bar's implicit zero
+   * baseline).
+   *
+   * Only meaningful for an axis that plays the "series ran from here to
+   * here" role — a time series' x, say — which is exactly the case where the
+   * *opposite* axis is itself continuous (both this codebase's line/scatter
+   * charts). When the opposite axis is discrete instead (a bar/pyramid's
+   * category axis), *this* axis is really the plain magnitude/value one —
+   * `84` isn't meaningfully "where the series ends" the way a last year is,
+   * so forcing it onto the axis just crowds a round `80`/`90` tick for no
+   * benefit. Skipped once the caller sets tick density/domain directly, same
+   * guard as `autoTickCount`, or the axis isn't a plain continuous numeric
+   * one (`integerTickInterval`'s domain check covers the same ground
+   * `axisExtent` needs here).
+   */
+  function edgeInclusiveTicks(
+    oppositeType: string | undefined,
+    scale: AxisBasedScalesConfig<TData>['x'],
+    values: AxisValue[],
+    span: number,
+    spacing: number,
+    min: number
+  ): number[] | undefined {
+    if (scale?.ticks != null || scale?.tickSpacing != null || scale?.interval != null || scale?.domain != null) return undefined;
+    if (oppositeType != null && DISCRETE_SCALE_TYPES.has(oppositeType)) return undefined;
+    if (scale?.type != null && scale.type !== 'linear' && scale.type !== 'auto') return undefined;
+    const extent = axisExtent(scale, values);
+    if (!extent) return undefined;
+    const [lo, hi] = extent;
+    const count = naturalTickCount(span, spacing, min);
+    const step = tickStep(lo, hi, count);
+    const base = ticksInRange(lo, hi, step);
+    const eps = step * 1e-6;
+    const withLo = base.length === 0 || base[0] - lo > eps ? [lo, ...base] : base;
+    return withLo.length === 0 || hi - withLo[withLo.length - 1] > eps ? [...withLo, hi] : withLo;
+  }
+
+  const xTicksExplicit = $derived(edgeInclusiveTicks(plot.scales.y.type, scales?.x, xValues, xSpan, 80, 3));
+
   /** Vertical Y-axis title placement, when `scales.y.labelOrientation === 'vertical'`. */
   const verticalYLabel = $derived.by(() => {
     if (!scales?.y?.label || scales.y.labelOrientation !== 'vertical') return null;
@@ -93,6 +169,7 @@
 </script>
 
 <AxisX
+  ticks={xTicksExplicit}
   tickCount={xTickCount}
   interval={xTickInterval}
   tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize}

package/dist/layout/scales/buildScale.d.ts

@@ -3,6 +3,23 @@ import type { AxisValue, AxisScale } from '../../types/layout/scales';
  * Resolves an author-facing {@link AxisScale} into what svelteplot's
  * `<Plot x>`/`<Plot y>` accepts — strips `grid`/`seriesLayout`/
  * `seriesPadding`/a vertical `label`, since `ScalesLayout` renders those
- * itself.
+ * itself. Also defaults `nice: true` whenever the caller hasn't pinned a
+ * `domain`/`ticks`/`nice`/non-numeric `type` of their own and the axis's own
+ * values are plainly numeric ({@link isNumericAxis}), so an unpinned
+ * continuous axis rounds its domain outward to whole tick steps instead of
+ * stopping exactly at the data's own min/max.
+ *
+ * Deliberately *not* our own `[min, max]` padding: svelteplot computes the
+ * real domain from every mark's own channels — e.g. a bar's implicit zero
+ * baseline, or a stacked series' cumulative total — not just this axis's raw
+ * per-row values, which is all this function has to work with. `nice`'s
+ * domain-widening runs *after* that real domain is resolved, inside
+ * svelteplot itself, so it stays correct for every plot kind for free — at
+ * the cost of only widening up to the nearest round tick step, which can
+ * still land exactly on the data's own min/max rather than strictly beyond
+ * it (e.g. a value of exactly `52` needs no widening to reach the nice tick
+ * `52`). Recomputing the domain ourselves to close that gap would need each
+ * axis's true rendered extent (baseline/stack included), which only the
+ * calling plot kind knows — not attempted here.
  */
 export declare function buildScale<TData>(scale: AxisScale<TData> | undefined, rows: TData[], getAxisValue: (d: TData) => AxisValue): AxisScale<TData> | undefined;

package/dist/layout/scales/buildScale.js

@@ -23,15 +23,60 @@ function sortedScale(scale, rows, getAxisValue) {
     const domain = [...reps].sort(sort).map(getAxisValue);
     return { ...scale, domain };
 }
+/** Scale types {@link buildScale}'s default `nice` only applies to — every other type has its own tick semantics (or isn't numeric at all). */
+const CONTINUOUS_NUMERIC_TYPES = new Set(['auto', 'linear', 'pow', 'sqrt', 'log', 'symlog']);
+/**
+ * Whether this axis's own values are plainly numeric — required before
+ * defaulting `nice: true`. Not just an optimization: svelteplot's own type
+ * *inference* treats a `nice` option as a hint to resolve the scale as
+ * `'linear'` (see its `autoScales.js`), so setting it on a scale whose real
+ * values are strings (a bar/pyramid's category axis) would force a linear
+ * scale onto categorical data and break the mark entirely.
+ */
+function isNumericAxis(rows, getAxisValue) {
+    let numericSeen = 0;
+    for (const row of rows) {
+        const v = getAxisValue(row);
+        if (v == null)
+            continue;
+        if (typeof v !== 'number')
+            return false;
+        if (++numericSeen >= 2)
+            return true;
+    }
+    return numericSeen > 0;
+}
 /**
  * Resolves an author-facing {@link AxisScale} into what svelteplot's
  * `<Plot x>`/`<Plot y>` accepts — strips `grid`/`seriesLayout`/
  * `seriesPadding`/a vertical `label`, since `ScalesLayout` renders those
- * itself.
+ * itself. Also defaults `nice: true` whenever the caller hasn't pinned a
+ * `domain`/`ticks`/`nice`/non-numeric `type` of their own and the axis's own
+ * values are plainly numeric ({@link isNumericAxis}), so an unpinned
+ * continuous axis rounds its domain outward to whole tick steps instead of
+ * stopping exactly at the data's own min/max.
+ *
+ * Deliberately *not* our own `[min, max]` padding: svelteplot computes the
+ * real domain from every mark's own channels — e.g. a bar's implicit zero
+ * baseline, or a stacked series' cumulative total — not just this axis's raw
+ * per-row values, which is all this function has to work with. `nice`'s
+ * domain-widening runs *after* that real domain is resolved, inside
+ * svelteplot itself, so it stays correct for every plot kind for free — at
+ * the cost of only widening up to the nearest round tick step, which can
+ * still land exactly on the data's own min/max rather than strictly beyond
+ * it (e.g. a value of exactly `52` needs no widening to reach the nice tick
+ * `52`). Recomputing the domain ourselves to close that gap would need each
+ * axis's true rendered extent (baseline/stack included), which only the
+ * calling plot kind knows — not attempted here.
  */
 export function buildScale(scale, rows, getAxisValue) {
     const sorted = sortedScale(scale, rows, getAxisValue);
-    if (!sorted)
+    const wantsNice = scale?.domain == null &&
+        scale?.ticks == null &&
+        scale?.nice == null &&
+        (scale?.type == null || CONTINUOUS_NUMERIC_TYPES.has(scale.type)) &&
+        isNumericAxis(rows, getAxisValue);
+    if (!sorted && !wantsNice)
         return sorted;
     const out = { ...sorted };
     delete out.grid;
@@ -39,5 +84,7 @@ export function buildScale(scale, rows, getAxisValue) {
     delete out.seriesPadding;
     if (scale?.labelOrientation === 'vertical')
         delete out.label;
+    if (wantsNice)
+        out.nice = true;
     return out;
 }

package/dist/layout/scales/niceDomain.d.ts

@@ -0,0 +1,6 @@
+/** Step between "nice" (1/2/5×10ⁿ) tick values for an approximate `count` over `[start, stop]`. */
+export declare function tickStep(start: number, stop: number, count: number): number;
+/** Multiples of `step` covering `[start, stop]`, inclusive of either endpoint when it lands exactly on one. */
+export declare function ticksInRange(start: number, stop: number, step: number): number[];
+/** Ticks-per-axis heuristic — used by `ScalesLayout` to pick a target count from an axis's actual pixel span. */
+export declare function naturalTickCount(span: number, spacing: number, min: number): number;

package/dist/layout/scales/niceDomain.js

@@ -0,0 +1,34 @@
+// d3-array-compatible "nice" tick step/generation, reimplemented locally to
+// avoid depending on internals svelteplot itself pulls in (not one of our
+// declared dependencies) — see https://d3js.org/d3-array/ticks.
+/** Step between "nice" (1/2/5×10ⁿ) tick values for an approximate `count` over `[start, stop]`. */
+export function tickStep(start, stop, count) {
+    const e10 = Math.sqrt(50);
+    const e5 = Math.sqrt(10);
+    const e2 = Math.sqrt(2);
+    const step0 = Math.abs(stop - start) / Math.max(0, count);
+    let step1 = 10 ** Math.floor(Math.log10(step0));
+    const error = step0 / step1;
+    if (error >= e10)
+        step1 *= 10;
+    else if (error >= e5)
+        step1 *= 5;
+    else if (error >= e2)
+        step1 *= 2;
+    return step1;
+}
+/** Multiples of `step` covering `[start, stop]`, inclusive of either endpoint when it lands exactly on one. */
+export function ticksInRange(start, stop, step) {
+    if (!(step > 0) || !Number.isFinite(step))
+        return [];
+    const lo = Math.ceil(start / step);
+    const hi = Math.floor(stop / step);
+    const out = [];
+    for (let i = lo; i <= hi; i++)
+        out.push(i * step);
+    return out;
+}
+/** Ticks-per-axis heuristic — used by `ScalesLayout` to pick a target count from an axis's actual pixel span. */
+export function naturalTickCount(span, spacing, min) {
+    return Math.max(min, Math.round(span / spacing));
+}

package/dist/layout/tooltip/controller.svelte.js

@@ -1,4 +1,4 @@
-import { eq, matchByStrategy, impliesCrosshairX, impliesCrosshairY, filterBySeries, } from './utils';
+import { eq, matchByStrategy, impliesCrosshairX, impliesCrosshairY, filterBySeries } from './utils';
 /**
  * The plot-agnostic hover state machine shared by every plot. Given reactive
  * accessors for the current hover store, this facet's id, and the local points,
@@ -11,13 +11,15 @@ import { eq, matchByStrategy, impliesCrosshairX, impliesCrosshairY, filterBySeri
  */
 export function createHoverController(args) {
     let cursor = $state(null);
-    // svelteplot's `Pointer` hands back cloned rows (not the original
-    // references), so a row's series can't be looked up by identity — find it
-    // by value against the locally-known, already-tagged points instead.
-    const seriesForRow = (row) => {
+    // Finds the matching hoverPoint for a hit row — by identity first, then
+    // by x/y value (for svelteplot's `Pointer`, which hands back clones).
+    const pointForRow = (row) => {
+        const byIdentity = args.points().find((p) => p.row === row);
+        if (byIdentity)
+            return byIdentity;
         const x = args.getX()(row);
         const y = args.getY()(row);
-        return args.points().find((p) => eq(p.x, x) && eq(p.y, y))?.series;
+        return args.points().find((p) => eq(p.x, x) && eq(p.y, y));
     };
     // Points matched in THIS facet. Non-source facets only react when sync is
     // enabled. The strategy in the shared store determines how points are found.
@@ -34,7 +36,16 @@ export function createHoverController(args) {
     // Keeps `row` (not just the display fields) so plot-kind templates can
     // resolve a semantic value off the source row directly — e.g. a bar
     // plot's category, regardless of which visual axis it's drawn on.
-    const highlight = $derived(matched.map(({ x, y, label, series, color, dx, dy, row }) => ({ x, y, label, series, color, dx, dy, row })));
+    const highlight = $derived(matched.map(({ x, y, label, series, color, dx, dy, row }) => ({
+        x,
+        y,
+        label,
+        series,
+        color,
+        dx,
+        dy,
+        row
+    })));
     /**
      * The specific matched point that was actually hovered — found by the
      * shared store's `activeSeries` (set from whichever row was hit), falling
@@ -82,9 +93,10 @@ export function createHoverController(args) {
     function onPointer(data) {
         const h = args.hover();
         if (data.length) {
-            h.activeX = args.getX()(data[0]);
-            h.activeY = args.getY()(data[0]);
-            h.activeSeries = seriesForRow(data[0]) ?? null;
+            const point = pointForRow(data[0]);
+            h.activeX = point?.x ?? args.getX()(data[0]);
+            h.activeY = point?.y ?? args.getY()(data[0]);
+            h.activeSeries = point?.series ?? null;
             h.source = args.facetId();
         }
         else if (h.source === args.facetId()) {
@@ -148,6 +160,6 @@ export function createHoverController(args) {
         },
         get cursor() {
             return cursor;
-        },
+        }
     };
 }

package/dist/layout/tooltip/utils.js

@@ -16,6 +16,9 @@ export function matchByStrategy(points, hover) {
     if (strategy === 'y') {
         return activeY == null ? [] : points.filter((p) => eq(p.y, activeY));
     }
+    if (strategy === 'series') {
+        return activeSeries == null ? [] : points.filter((p) => p.series === activeSeries);
+    }
     // 'punctual': exact XY match, respecting series identity when both sides carry it
     if (activeX == null || activeY == null)
         return [];