@fundar/data-chart-telling 0.0.41 → 0.0.43

package/dist/configuration/config.svelte.js

@@ -57,6 +57,25 @@ export const DEFAULT_CONFIG = {
             size: '1.5rem',
             fontSize: '1rem',
             disabledOpacity: 0.3
+        },
+        continuous: {
+            // A slim vertical bar handle, taller than the 12px gradient track.
+            handle: {
+                width: '6px',
+                height: '20px',
+                radius: '3px',
+                fill: 'currentColor',
+                stroke: 'var(--dct-bg, #fff)',
+                strokeWidth: '1.5px'
+            },
+            tick: {
+                color: 'currentColor',
+                width: '1px',
+                length: '6px'
+            },
+            label: {
+                rotate: '0deg'
+            }
         }
     },
     axis: {
@@ -188,6 +207,16 @@ export function configToCssVars(c) {
         '--dct-legend-nav-size': c.legend.navButton.size,
         '--dct-legend-nav-font-size': c.legend.navButton.fontSize,
         '--dct-legend-nav-disabled-opacity': String(c.legend.navButton.disabledOpacity),
+        '--dct-continuous-handle-width': c.legend.continuous.handle.width,
+        '--dct-continuous-handle-height': c.legend.continuous.handle.height,
+        '--dct-continuous-handle-radius': c.legend.continuous.handle.radius,
+        '--dct-continuous-handle-fill': c.legend.continuous.handle.fill,
+        '--dct-continuous-handle-stroke': c.legend.continuous.handle.stroke,
+        '--dct-continuous-handle-stroke-width': c.legend.continuous.handle.strokeWidth,
+        '--dct-continuous-tick-color': c.legend.continuous.tick.color,
+        '--dct-continuous-tick-width': c.legend.continuous.tick.width,
+        '--dct-continuous-tick-length': c.legend.continuous.tick.length,
+        '--dct-continuous-label-rotate': c.legend.continuous.label.rotate,
         '--dct-axis-color': c.axis.color,
         '--dct-tooltip-bg': c.tooltip.background,
         '--dct-tooltip-color': c.tooltip.color,

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

@@ -56,6 +56,24 @@ export declare const THEMES: {
                 fontSize?: string | undefined;
                 disabledOpacity?: number | undefined;
             } | undefined;
+            continuous?: {
+                handle?: {
+                    width?: string | undefined;
+                    height?: string | undefined;
+                    radius?: string | undefined;
+                    fill?: string | undefined;
+                    stroke?: string | undefined;
+                    strokeWidth?: string | undefined;
+                } | undefined;
+                tick?: {
+                    color?: string | undefined;
+                    width?: string | undefined;
+                    length?: string | undefined;
+                } | undefined;
+                label?: {
+                    rotate?: string | undefined;
+                } | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -263,6 +281,24 @@ export declare const THEMES: {
                 fontSize?: string | undefined;
                 disabledOpacity?: number | undefined;
             } | undefined;
+            continuous?: {
+                handle?: {
+                    width?: string | undefined;
+                    height?: string | undefined;
+                    radius?: string | undefined;
+                    fill?: string | undefined;
+                    stroke?: string | undefined;
+                    strokeWidth?: string | undefined;
+                } | undefined;
+                tick?: {
+                    color?: string | undefined;
+                    width?: string | undefined;
+                    length?: string | undefined;
+                } | undefined;
+                label?: {
+                    rotate?: string | undefined;
+                } | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -470,6 +506,24 @@ export declare const THEMES: {
                 fontSize?: string | undefined;
                 disabledOpacity?: number | undefined;
             } | undefined;
+            continuous?: {
+                handle?: {
+                    width?: string | undefined;
+                    height?: string | undefined;
+                    radius?: string | undefined;
+                    fill?: string | undefined;
+                    stroke?: string | undefined;
+                    strokeWidth?: string | undefined;
+                } | undefined;
+                tick?: {
+                    color?: string | undefined;
+                    width?: string | undefined;
+                    length?: string | undefined;
+                } | undefined;
+                label?: {
+                    rotate?: string | undefined;
+                } | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;
@@ -677,6 +731,24 @@ export declare const THEMES: {
                 fontSize?: string | undefined;
                 disabledOpacity?: number | undefined;
             } | undefined;
+            continuous?: {
+                handle?: {
+                    width?: string | undefined;
+                    height?: string | undefined;
+                    radius?: string | undefined;
+                    fill?: string | undefined;
+                    stroke?: string | undefined;
+                    strokeWidth?: string | undefined;
+                } | undefined;
+                tick?: {
+                    color?: string | undefined;
+                    width?: string | undefined;
+                    length?: string | undefined;
+                } | undefined;
+                label?: {
+                    rotate?: string | undefined;
+                } | undefined;
+            } | undefined;
         } | undefined;
         axis?: {
             color?: string | undefined;

package/dist/layout/facet/FacetLayout.svelte

@@ -2,6 +2,8 @@
   import { isMobile } from '../../stores/device';
   import { groupBy } from '../../utils/grouping';
   import FacetIndicator from './FacetIndicator.svelte';
+  import { getConfiguration } from '../../configuration/config.svelte';
+  import { measureMaxLabelWidth } from '../plot/measureText';
   import type {
     FacetColumns,
     FacetMode,
@@ -13,6 +15,7 @@
     FacetNavDirection,
   } from '../../types/layout/facet';
   import type { Accessor } from '../../types/plots/data/common';
+  import type { MarginConfig } from '../../types/plots/props';
 
   /**
    * Small-multiples layout. It splits the data by `by` and hands each group to
@@ -23,6 +26,10 @@
    * `mode` picks how the groups are arranged: `'grid'` (default) lays them all
    * out at once; `'paginated'` pages through the same grid in fixed chunks;
    * `'carousel'` shows `visible` groups at a time with touch-drag/snap.
+   *
+   * `labelsForMargin`, if given, sizes one shared left margin across every
+   * facet — pass it through `cell`'s own `margins` to a faceted plot's
+   * `margins` prop so they all share the same content box.
    */
   let {
     data,
@@ -40,6 +47,7 @@
     width,
     height,
     cell,
+    labelsForMargin,
   }: {
     data: TRow[];
     by: Accessor<TRow, unknown>;
@@ -56,6 +64,7 @@
     width: number;
     height: number;
     cell: FacetCellSnippet<TRow>;
+    labelsForMargin?: (rows: TRow[]) => string[];
   } = $props();
 
   function resolveResponsive<T>(value: Responsive<T>, mobile: boolean): T {
@@ -74,6 +83,18 @@
       .map((v) => [v, groups.get(v)!] as [string, TRow[]]);
   });
 
+  // One shared left margin, sized to the widest label across every facet —
+  // measured off-DOM (canvas), so it's correct from the very first render
+  // with no mount/remount needed. `undefined` when `labelsForMargin` isn't given.
+  const cfg = $derived(getConfiguration());
+  const axisFont = $derived(`${cfg.axis.fontSize}px ${cfg.font === 'inherit' ? 'sans-serif' : cfg.font}`);
+  const cellMargins = $derived.by((): MarginConfig | undefined => {
+    if (!labelsForMargin) return undefined;
+    const labels = entries.flatMap(([, rows]) => labelsForMargin(rows));
+    const left = Math.ceil(measureMaxLabelWidth(labels, axisFont)) + cfg.axis.yTickSize + cfg.axis.yTickPadding;
+    return { left };
+  });
+
   const resolvedMode = $derived(resolveResponsive(mode, $isMobile));
 
   // Columns/rows for a "full" grid of every entry — used for plain grid-mode
@@ -220,7 +241,7 @@
       <div class="dct-facet__cell">
         <div class="dct-facet__title">{facetValue}</div>
         {#if cellWidth > 0 && cellHeight > 0}
-          {@render cell({ facetValue, data: rowsForCell, width: cellWidth, height: cellHeight })}
+          {@render cell({ facetValue, data: rowsForCell, width: cellWidth, height: cellHeight, margins: cellMargins })}
         {/if}
       </div>
     {/each}
@@ -272,6 +293,7 @@
               data: rowsForCell,
               width: carouselCellWidth,
               height: carouselCellHeight,
+              margins: cellMargins,
             })}
           {/if}
         </div>

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

@@ -17,6 +17,7 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         width: number;
         height: number;
         cell: FacetCellSnippet<TRow>;
+        labelsForMargin?: (rows: TRow[]) => string[];
     };
     exports: {};
     bindings: "";

package/dist/layout/legend/ContinuousSection.svelte

@@ -13,6 +13,13 @@
 
   const fmt = $derived(section.format ?? ((v: number) => String(v)));
 
+  // Fill/opacity for the excluded-margin rects.
+  const excludedStyle = $derived.by((): { fill: string; opacity: number } => {
+    const d = section.disabledStyle;
+    if (d?.fill) return { fill: d.fill, opacity: d.fillOpacity ?? d.opacity ?? 1 };
+    return { fill: 'currentColor', opacity: d?.fillOpacity ?? d?.opacity ?? 0.35 };
+  });
+
   const tickPositions = $derived(
     section.interactive
       ? []
@@ -93,6 +100,26 @@
           };
   });
 
+  // Mirrors an externally-set `interaction.continuousRange` into lo/hi.
+  $effect(() => {
+    if (!section.interactive) return;
+    const range = interaction.continuousRange;
+    if (range === null) {
+      if (untrack(() => loAdjusted || hiAdjusted)) {
+        loAdjusted = false;
+        hiAdjusted = false;
+      }
+      return;
+    }
+    const [currentLo, currentHi] = untrack(() => [lo, hi]);
+    if (range.min !== currentLo || range.max !== currentHi) {
+      lo = range.min;
+      hi = range.max;
+      loAdjusted = true;
+      hiAdjusted = true;
+    }
+  });
+
   function startDrag(which: 'lo' | 'hi') {
     return (event: PointerEvent) => {
       if (!section.interactive) return;
@@ -149,51 +176,59 @@
     </defs>
     <rect width={barWidth} height="12" rx="2" fill="url(#{gradientId})" />
     {#each tickPositions as tick (tick.v)}
-      <line
-        x1={tick.t * barWidth}
-        y1="12"
-        x2={tick.t * barWidth}
-        y2="18"
-        stroke="currentColor"
-        stroke-width="1"
-      />
+      <rect class="dct-continuous__tick-mark" x={tick.t * barWidth} y="12" />
     {/each}
 
     {#if section.interactive}
       {#if loT > 0}
-        <rect x="0" y="0" width={loT * barWidth} height="12" rx="2" fill="currentColor" fill-opacity="0.35" />
+        <rect x="0" y="0" width={loT * barWidth} height="12" rx="2" fill={excludedStyle.fill} fill-opacity={excludedStyle.opacity} />
       {/if}
       {#if hiT < 1}
-        <rect x={hiT * barWidth} y="0" width={barWidth - hiT * barWidth} height="12" rx="2" fill="currentColor" fill-opacity="0.35" />
+        <rect x={hiT * barWidth} y="0" width={barWidth - hiT * barWidth} height="12" rx="2" fill={excludedStyle.fill} fill-opacity={excludedStyle.opacity} />
+      {/if}
+      {#if section.handle}
+        {@render section.handle({
+          which: 'lo',
+          value: lo,
+          position: loT,
+          onpointerdown: startDrag('lo'),
+          ondoubleclick: resetHandle('lo'),
+        })}
+        {@render section.handle({
+          which: 'hi',
+          value: hi,
+          position: hiT,
+          onpointerdown: startDrag('hi'),
+          ondoubleclick: resetHandle('hi'),
+        })}
+      {:else}
+        <rect
+          class="dct-continuous__handle"
+          x={loT * barWidth}
+          y="6"
+          onpointerdown={startDrag('lo')}
+          ondblclick={resetHandle('lo')}
+          role="slider"
+          aria-label="Margen inferior"
+          aria-valuemin={section.min}
+          aria-valuemax={hi}
+          aria-valuenow={lo}
+          tabindex="0"
+        />
+        <rect
+          class="dct-continuous__handle"
+          x={hiT * barWidth}
+          y="6"
+          onpointerdown={startDrag('hi')}
+          ondblclick={resetHandle('hi')}
+          role="slider"
+          aria-label="Margen superior"
+          aria-valuemin={lo}
+          aria-valuemax={section.max}
+          aria-valuenow={hi}
+          tabindex="0"
+        />
       {/if}
-      <circle
-        class="dct-continuous__handle"
-        cx={loT * barWidth}
-        cy="6"
-        r="6"
-        onpointerdown={startDrag('lo')}
-        ondblclick={resetHandle('lo')}
-        role="slider"
-        aria-label="Margen inferior"
-        aria-valuemin={section.min}
-        aria-valuemax={hi}
-        aria-valuenow={lo}
-        tabindex="0"
-      />
-      <circle
-        class="dct-continuous__handle"
-        cx={hiT * barWidth}
-        cy="6"
-        r="6"
-        onpointerdown={startDrag('hi')}
-        ondblclick={resetHandle('hi')}
-        role="slider"
-        aria-label="Margen superior"
-        aria-valuemin={lo}
-        aria-valuemax={section.max}
-        aria-valuenow={hi}
-        tabindex="0"
-      />
     {/if}
   </svg>
 
@@ -225,6 +260,7 @@
   }
   .dct-continuous__edge {
     position: absolute;
+    transform: rotate(var(--dct-continuous-label-rotate, 0deg));
   }
   .dct-continuous__edge--start {
     left: 0;
@@ -234,7 +270,7 @@
   }
   .dct-continuous__tick {
     position: absolute;
-    transform: translateX(-50%);
+    transform: translateX(-50%) rotate(var(--dct-continuous-label-rotate, 0deg));
   }
   /*
    * Anchored outward (not centered, unlike a plain tick) so the label always
@@ -247,15 +283,30 @@
     font-weight: 600;
   }
   .dct-continuous__tick--handle-lo {
-    transform: none;
+    transform: rotate(var(--dct-continuous-label-rotate, 0deg));
   }
   .dct-continuous__tick--handle-hi {
-    transform: translateX(-100%);
+    transform: translateX(-100%) rotate(var(--dct-continuous-label-rotate, 0deg));
+  }
+  /* Tick mark below the bar at each non-interactive tick's position. */
+  .dct-continuous__tick-mark {
+    width: var(--dct-continuous-tick-width, 1px);
+    height: var(--dct-continuous-tick-length, 6px);
+    fill: var(--dct-continuous-tick-color, currentColor);
+    transform-box: fill-box;
+    transform: translateX(-50%);
   }
+  /* Draggable lo/hi handle. */
   .dct-continuous__handle {
-    fill: currentColor;
-    stroke: var(--dct-bg, #fff);
-    stroke-width: 1.5;
+    width: var(--dct-continuous-handle-width, 6px);
+    height: var(--dct-continuous-handle-height, 20px);
+    rx: var(--dct-continuous-handle-radius, 3px);
+    fill: var(--dct-continuous-handle-fill, currentColor);
+    stroke: var(--dct-continuous-handle-stroke, var(--dct-bg, #fff));
+    stroke-width: var(--dct-continuous-handle-stroke-width, 1.5px);
+    transform-box: fill-box;
+    transform-origin: center;
+    transform: translate(-50%, -50%);
     cursor: ew-resize;
     touch-action: none;
   }

package/dist/layout/plot/measureText.d.ts

@@ -0,0 +1,4 @@
+/** Pixel width of `text` set in `font` (a canvas font shorthand, e.g. `"14px sans-serif"`). 0 during SSR. */
+export declare function measureTextWidth(text: string, font: string): number;
+/** Widest of `labels` set in `font`. 0 for an empty list. */
+export declare function measureMaxLabelWidth(labels: string[], font: string): number;

package/dist/layout/plot/measureText.js

@@ -0,0 +1,19 @@
+let measureCtx;
+function getMeasureContext() {
+    if (measureCtx !== undefined)
+        return measureCtx;
+    measureCtx = typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d');
+    return measureCtx;
+}
+/** Pixel width of `text` set in `font` (a canvas font shorthand, e.g. `"14px sans-serif"`). 0 during SSR. */
+export function measureTextWidth(text, font) {
+    const ctx = getMeasureContext();
+    if (!ctx)
+        return 0;
+    ctx.font = font;
+    return ctx.measureText(text).width;
+}
+/** Widest of `labels` set in `font`. 0 for an empty list. */
+export function measureMaxLabelWidth(labels, font) {
+    return labels.reduce((max, label) => Math.max(max, measureTextWidth(label, font)), 0);
+}

package/dist/plots/bar/Plot.svelte

@@ -12,6 +12,7 @@
 	} from '../utils/segments';
 	import { createBarLayout } from './layout.svelte';
 	import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
+	import { measureTextWidth } from '../../layout/plot/measureText';
 	import { buildHoverPoints } from './hoverPoints';
 	import { buildBarMarkers } from './buildBarMarkers';
 	import { resolveGapsForSeries, resolveDiscreteGapFills } from '../utils/gaps';
@@ -30,6 +31,7 @@
 	import type { ValueAnchor } from '../../types/plots/constants';
 	import type { BarSegmentStyle } from '../../types/plots/segments/common';
 	import type { LegendDisabledStyle } from '../../types/layout/legend';
+	import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 
 	/**
 	 * A bar chart, vertical by default. Accepts either a pre-built `series`
@@ -220,17 +222,50 @@
 		pointMatching: 'contains' as const
 	});
 
+	// Estimated overflow for an `'outside'`-anchored value label at the most
+	// extreme value in the whole dataset — not just the current frame, so it
+	// stays stable across a timeline scrubber instead of resetting to zero
+	// and regrowing on every tick. Stacked labels sit at their own segment's
+	// midpoint (see `valueTextFn` above), well inside the bar, so they carry
+	// no such risk; `start`/`end` anchors sit inside the bar too.
+	const valueLabelFloor = $derived.by((): MarginOverflow | undefined => {
+		if (!showVals || valAnchor !== 'outside' || barLayout.layout === 'stacked') return undefined;
+		const font = styles.values?.fontStyle;
+		const fontSize = typeof font?.fontSize === 'number' ? font.fontSize : 12;
+		const canvasFont = `${fontSize}px ${cfg.font === 'inherit' ? 'sans-serif' : cfg.font}`;
+		if (isHorizontal) {
+			const offset = Math.abs(typeof font?.dx === 'number' ? font.dx : 6);
+			let widestLabel = 0;
+			for (const s of resolvedSeries) {
+				const sy = resolveAccessor(s.y);
+				let extremeValue = 0;
+				let extremeRow: TData | undefined;
+				for (const d of s.data) {
+					const v = Number(sy(d));
+					if (Number.isNaN(v)) continue;
+					if (extremeRow === undefined || Math.abs(v) > Math.abs(extremeValue)) {
+						extremeValue = v;
+						extremeRow = d;
+					}
+				}
+				if (extremeRow === undefined) continue;
+				widestLabel = Math.max(widestLabel, measureTextWidth(formatValue(extremeValue, s.name), canvasFont));
+			}
+			return { left: 0, right: Math.ceil(offset + widestLabel), top: 0, bottom: 0 };
+		}
+		const offset = Math.abs(typeof font?.dy === 'number' ? font.dy : 6);
+		return { left: 0, right: 0, top: Math.ceil(offset + fontSize * 1.2), bottom: 0 };
+	});
+
 	// A bar's value label can grow past the plot's own content box (e.g. a
 	// tall bar's `anchor: 'outside'` label pushing past the top margin) —
-	// reserving real space there is what each label's own overflow
-	// measurement feeds into here, via a tracker local to this one `<Plot>`
-	// instance. See `labelOverflow.svelte.ts`. Resets on `resolvedSeries` so
-	// overflow from an earlier, differently-shaped frame (e.g. a timeline
-	// scrubber revealing a different slice of rows) doesn't linger once
-	// that frame is gone.
+	// `valueLabelFloor` covers the common case up front; each label's own
+	// rendered overflow still feeds `labelMargin.report` for whatever that
+	// estimate doesn't cover. See `labelOverflow.svelte.ts`.
 	const labelMargin = createLabelMarginTracker(
 		() => margins,
-		() => resolvedSeries
+		() => resolvedSeries,
+		() => valueLabelFloor ?? { left: 0, right: 0, top: 0, bottom: 0 }
 	);
 </script>
 

package/dist/plots/line/Plot.svelte

@@ -9,6 +9,7 @@
 	import { buildGapMarkers } from './buildGapMarkers';
 	import { isGapValue } from '../utils/gaps';
 	import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
+	import { measureTextWidth } from '../../layout/plot/measureText';
 	import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
 	import ValueLabels from './ValueLabels.svelte';
 	import {
@@ -28,6 +29,8 @@
 	import type { LineSegmentStyle } from '../../types/plots/segments/common';
 	import type { LineMarkersConfig } from '../../types/markers/line';
 	import type { LegendDisabledStyle } from '../../types/layout/legend';
+	import type { ValueAnchor } from '../../types/plots/constants';
+	import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 
 	type Props = BasePlotProps<
 		SeriesProps<TData> | DataProps<TData>,
@@ -72,6 +75,8 @@
 	const cfg = $derived(getConfiguration());
 	const showVals = $derived(styles.values?.show ?? false);
 	const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
+	const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'start');
+	const formatValue = $derived(styles.values?.format ?? ((v: number, name: string) => `${name} - ${v}`));
 
 	// Dims every other series like a legend toggle when a value label is
 	// hovered, local to this `<Plot>` instance.
@@ -129,7 +134,9 @@
 		buildGapMarkers<TData>({
 			seriesList: resolvedSeries,
 			gaps,
-			colorFor: (seriesIndex) => paletteColor(seriesIndex, cfg.palette)
+			colorFor: (seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			disabledStrokeFor: (name) => disabledStrokeOverride(effectiveDisabledFor(name)),
+			disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name))
 		})
 	);
 
@@ -160,14 +167,98 @@
 			.filter((p): p is { series: Series<TData>; lastRow: TData; color: string } => p !== undefined)
 	);
 
+	// Estimated overflow for a rightward-fanning end-of-line label (the
+	// default: `valAnchor: 'start'`, or any anchor whose resolved `dx` isn't
+	// negative). `lanesUsed` (see `declutter1D`/`laneAssignment`) never
+	// exceeds the series count, so that bounds the reach even without
+	// knowing which points will actually end up clustered together. A
+	// leftward fan (negative `dx`) instead flips itself to the right when it
+	// runs out of room — see `ValueLabels.svelte`'s own doc comment — so it
+	// carries no such risk and is left to the DOM-measured fallback below.
+	//
+	// Only the fraction of the label that actually extends to the right of
+	// its own anchor point counts toward the margin — `textAnchor: 'start'`
+	// (the default `'start'`/`'outside'`-less case) puts the whole label
+	// there, but `'middle'` (`valAnchor: 'outside'`, or the shared-anchor
+	// default for anything other than `'start'`/`'end'`) centers it on the
+	// anchor, so only half sticks out; `'end'` puts none of it there at all.
+	// Same `preferredTA` derivation as `ValueLabels.svelte` (`'outside'`
+	// itself is a `dy`/`lineAnchor` shorthand, not a real textAnchor value —
+	// it resolves through `defaultTA` same as an unset one).
+	//
+	// The widest label is measured from `scales.y.domain` when the caller
+	// pins one (e.g. a shared domain covering a whole timeline range) rather
+	// than from `resolvedSeries`'s own values — a timeline scrubber's `data`
+	// is only the currently-revealed slice, so measuring straight off it
+	// would keep changing the floor (and, via `resetKey`, remounting the
+	// plot) on every tick even though the true worst case across the whole
+	// range never changes. Without a pinned domain there's no such stable
+	// source, so this falls back to the current frame's own values, same as
+	// no floor at all for a caller not pinning a domain in the first place.
+	//
+	// This estimate is close but not exact (declutter's real elbow/connector
+	// geometry vs. this reach formula) — with a pinned domain, that gap can
+	// still cost one extra DOM-measured correction (and its remount) on
+	// whichever tick first renders real declutter geometry, but never more
+	// than one across a whole scrub — see `LinePlot.ValueLabelStability`'s
+	// own test for what "settled" means here.
+	const valueLabelFloor = $derived.by((): MarginOverflow | undefined => {
+		if (!showVals) return undefined;
+		const font = styles.values?.fontStyle;
+		const defaultDx = valAnchor === 'start' ? 6 : valAnchor === 'end' ? -6 : 0;
+		const baseDx = typeof font?.dx === 'number' ? font.dx : defaultDx;
+		if ((Math.sign(baseDx) || 1) !== 1) return undefined;
+
+		const defaultTA = valAnchor === 'start' ? 'start' : valAnchor === 'end' ? 'end' : 'middle';
+		const resolvedTextAnchor = font?.textAnchor === 'outside' ? undefined : font?.textAnchor;
+		const preferredTA = resolvedTextAnchor ?? defaultTA;
+		const rightFraction = preferredTA === 'start' ? 1 : preferredTA === 'end' ? 0 : 0.5;
+
+		const fontSize = typeof font?.fontSize === 'number' ? font.fontSize : 12;
+		const canvasFont = `${fontSize}px ${cfg.font === 'inherit' ? 'sans-serif' : cfg.font}`;
+		const lineCfg = cfg.line.valueLabels;
+		const seriesCount = resolvedSeries.length;
+		const reach =
+			seriesCount > 1
+				? lineCfg.elbowGap + (seriesCount - 1) * lineCfg.laneStep + lineCfg.labelGap
+				: Math.abs(baseDx);
+
+		const pinnedDomain = scales.y?.domain;
+		let maxLabelWidth = 0;
+		if (pinnedDomain && pinnedDomain.length >= 2) {
+			const lo = Number(pinnedDomain[0]);
+			const hi = Number(pinnedDomain[pinnedDomain.length - 1]);
+			for (const s of resolvedSeries) {
+				maxLabelWidth = Math.max(
+					maxLabelWidth,
+					measureTextWidth(formatValue(lo, s.name), canvasFont),
+					measureTextWidth(formatValue(hi, s.name), canvasFont)
+				);
+			}
+		} else {
+			for (const s of resolvedSeries) {
+				const sy = resolveAccessor(s.y);
+				for (const d of s.data) {
+					const v = Number(sy(d));
+					if (Number.isNaN(v)) continue;
+					maxLabelWidth = Math.max(maxLabelWidth, measureTextWidth(formatValue(v, s.name), canvasFont));
+				}
+			}
+		}
+		// +2px: canvas text measurement and svelteplot's own rendered SVG text
+		// can disagree by a pixel or so (different rendering engines) — a small
+		// buffer that narrows, but doesn't eliminate, the gap noted above.
+		return { left: 0, right: Math.ceil(reach + rightFraction * maxLabelWidth) + 2, top: 0, bottom: 0 };
+	});
+
 	// Grows the plot's margin to fit value labels that overflow the content
-	// box. Resets on `resolvedSeries` (e.g. a timeline scrubber revealing a
-	// different slice of rows) so overflow measured against an earlier frame's
-	// labels doesn't linger and inflate the margin once that frame is gone —
-	// see `createLabelMarginTracker`'s own doc comment.
+	// box. `valueLabelFloor` covers the common rightward case up front; each
+	// label's own rendered overflow still feeds `labelMargin.report` for
+	// whatever that estimate doesn't cover. See `labelOverflow.svelte.ts`.
 	const labelMargin = createLabelMarginTracker(
 		() => margins,
-		() => resolvedSeries
+		() => resolvedSeries,
+		() => valueLabelFloor ?? { left: 0, right: 0, top: 0, bottom: 0 }
 	);
 
 	// Writes the resolved margin back into the bindable `margins` prop once it

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

@@ -2,6 +2,7 @@ import type { Series } from '../../types/plots/data/common';
 import type { GapsConfig } from '../../types/plots/gaps';
 import type { LineSegmentStyle } from '../../types/plots/segments/common';
 import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/common';
+import type { StrokeStyle, DotStyle } from '../../types/plots/styling';
 /**
  * One `'line'` (+ `'dot'`, when its zone sets `style.dots`) marker per
  * detected, configured gap run across every series — the interpolated
@@ -12,10 +13,16 @@ import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/comm
  * muted out of the box), so a gap-fill reads as estimated rather than real
  * data unless a zone or the global configuration overrides it. Dots (when
  * requested) are drawn only at a run's two endpoints, not along every
- * sampled bridge point.
+ * sampled bridge point. `disabledStrokeFor`/`disabledDotsFor` mirror
+ * `buildLineMarkers`'s own params — a legend-disabled (or hover-isolated)
+ * series must dim its gap bridge exactly like it dims the real line it's
+ * bridging, so both take the same precedence: disabled override, then the
+ * gap zone's own style, then the shared gap default.
  */
 export declare function buildGapMarkers<TData extends Record<string, unknown>>(args: {
     seriesList: Series<TData>[];
     gaps: GapsConfig<LineSegmentStyle>;
     colorFor: (seriesIndex: number) => string;
+    disabledStrokeFor: (seriesName: string) => StrokeStyle | undefined;
+    disabledDotsFor: (seriesName: string) => DotStyle | undefined;
 }): (LineMarkerConfig | DotMarkerConfig)[];

package/dist/plots/line/buildGapMarkers.js

@@ -12,10 +12,14 @@ const gy = (p) => p.y;
  * muted out of the box), so a gap-fill reads as estimated rather than real
  * data unless a zone or the global configuration overrides it. Dots (when
  * requested) are drawn only at a run's two endpoints, not along every
- * sampled bridge point.
+ * sampled bridge point. `disabledStrokeFor`/`disabledDotsFor` mirror
+ * `buildLineMarkers`'s own params — a legend-disabled (or hover-isolated)
+ * series must dim its gap bridge exactly like it dims the real line it's
+ * bridging, so both take the same precedence: disabled override, then the
+ * gap zone's own style, then the shared gap default.
  */
 export function buildGapMarkers(args) {
-    const { seriesList, gaps, colorFor } = args;
+    const { seriesList, gaps, colorFor, disabledStrokeFor, disabledDotsFor } = args;
     const cfg = getConfiguration();
     const gapDefaults = cfg.line.gap;
     const markers = [];
@@ -25,6 +29,8 @@ export function buildGapMarkers(args) {
         if (runs.length === 0)
             return;
         const defaultColor = colorFor(seriesIndex);
+        const disabledStroke = disabledStrokeFor(series.name);
+        const disabledDots = disabledDotsFor(series.name);
         for (const run of runs) {
             const strokeStyle = run.zone.style?.stroke;
             const dotStyle = run.zone.style?.dots;
@@ -34,12 +40,12 @@ export function buildGapMarkers(args) {
                 x: gx,
                 y: gy,
                 style: {
-                    stroke: strokeStyle?.stroke ?? defaultColor,
-                    strokeWidth: strokeStyle?.strokeWidth ?? gapDefaults.stroke.strokeWidth ?? cfg.line.strokeWidth,
-                    strokeOpacity: strokeStyle?.strokeOpacity ?? gapDefaults.stroke.strokeOpacity,
-                    strokeDasharray: strokeStyle?.strokeDasharray ?? gapDefaults.stroke.strokeDasharray,
-                    strokeLinejoin: strokeStyle?.strokeLinejoin ?? gapDefaults.stroke.strokeLinejoin,
-                    strokeLinecap: strokeStyle?.strokeLinecap ?? gapDefaults.stroke.strokeLinecap,
+                    stroke: disabledStroke?.stroke ?? strokeStyle?.stroke ?? defaultColor,
+                    strokeWidth: disabledStroke?.strokeWidth ?? strokeStyle?.strokeWidth ?? gapDefaults.stroke.strokeWidth ?? cfg.line.strokeWidth,
+                    strokeOpacity: disabledStroke?.strokeOpacity ?? strokeStyle?.strokeOpacity ?? gapDefaults.stroke.strokeOpacity,
+                    strokeDasharray: disabledStroke?.strokeDasharray ?? strokeStyle?.strokeDasharray ?? gapDefaults.stroke.strokeDasharray,
+                    strokeLinejoin: disabledStroke?.strokeLinejoin ?? strokeStyle?.strokeLinejoin ?? gapDefaults.stroke.strokeLinejoin,
+                    strokeLinecap: disabledStroke?.strokeLinecap ?? strokeStyle?.strokeLinecap ?? gapDefaults.stroke.strokeLinecap,
                 },
             });
             if (!dotStyle)
@@ -52,14 +58,14 @@ export function buildGapMarkers(args) {
                 x: gx,
                 y: gy,
                 style: {
-                    dotRadius: dotStyle.dotRadius ?? dotDefaults.dotRadius ?? cfg.line.dotRadius,
-                    dotFill: dotStyle.dotFill ?? strokeStyle?.stroke ?? dotDefaults.dotFill ?? defaultColor,
-                    dotSymbol: dotStyle.dotSymbol ?? dotDefaults.dotSymbol ?? 'circle',
-                    dotStroke: dotStyle.dotStroke ?? strokeStyle?.stroke ?? dotDefaults.dotStroke ?? defaultColor,
-                    dotStrokeWidth: dotStyle.dotStrokeWidth ?? dotDefaults.dotStrokeWidth ?? 1,
-                    dotFillOpacity: dotStyle.dotFillOpacity ?? dotDefaults.dotFillOpacity ?? 1,
-                    dotStrokeOpacity: dotStyle.dotStrokeOpacity ?? dotDefaults.dotStrokeOpacity ?? 1,
-                    dotStrokeDasharray: dotStyle.dotStrokeDasharray ?? dotDefaults.dotStrokeDasharray,
+                    dotRadius: disabledDots?.dotRadius ?? dotStyle.dotRadius ?? dotDefaults.dotRadius ?? cfg.line.dotRadius,
+                    dotFill: disabledDots?.dotFill ?? dotStyle.dotFill ?? strokeStyle?.stroke ?? dotDefaults.dotFill ?? defaultColor,
+                    dotSymbol: disabledDots?.dotSymbol ?? dotStyle.dotSymbol ?? dotDefaults.dotSymbol ?? 'circle',
+                    dotStroke: disabledDots?.dotStroke ?? dotStyle.dotStroke ?? strokeStyle?.stroke ?? dotDefaults.dotStroke ?? defaultColor,
+                    dotStrokeWidth: disabledDots?.dotStrokeWidth ?? dotStyle.dotStrokeWidth ?? dotDefaults.dotStrokeWidth ?? 1,
+                    dotFillOpacity: disabledDots?.dotFillOpacity ?? dotStyle.dotFillOpacity ?? dotDefaults.dotFillOpacity ?? 1,
+                    dotStrokeOpacity: disabledDots?.dotStrokeOpacity ?? dotStyle.dotStrokeOpacity ?? dotDefaults.dotStrokeOpacity ?? 1,
+                    dotStrokeDasharray: disabledDots?.dotStrokeDasharray ?? dotStyle.dotStrokeDasharray ?? dotDefaults.dotStrokeDasharray,
                 },
             });
         }

package/dist/plots/pyramid/Plot.svelte

@@ -7,6 +7,7 @@
 	import { disabledFillOverride } from '../utils/legendDisabled';
 	import { buildPyramidBarMarkers } from './buildPyramidBarMarkers';
 	import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
+	import { measureTextWidth } from '../../layout/plot/measureText';
 	import {
 		buildGroupedSeries,
 		validateSegments,
@@ -28,6 +29,7 @@
 	import type { BarSegmentStyle } from '../../types/plots/segments/common';
 	import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 	import type { LegendDisabledStyle } from '../../types/layout/legend';
+	import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 
 	/**
 	 * A population-pyramid-style diverging bar chart: each series is mirrored
@@ -261,15 +263,50 @@
 		})
 	);
 
+	// Estimated overflow for an `'outside'`- or `'start'`-anchored value label
+	// (both anchor at the row's own full magnitude, pushed further outward —
+	// see `ValueLabels.svelte`'s `xFn`) at the most extreme value on each
+	// side of the whole dataset, not just the current frame, so it stays
+	// stable across a timeline scrubber instead of resetting to zero and
+	// regrowing on every tick. `'middle'`/`'end'` anchor inside the bar,
+	// toward its own zero baseline, so they carry no such risk.
+	const valueLabelFloor = $derived.by((): MarginOverflow | undefined => {
+		if (!showVals || valAnchor === 'middle' || valAnchor === 'end') return undefined;
+		const font = styles.values?.fontStyle;
+		const fontSize = typeof font?.fontSize === 'number' ? font.fontSize : 12;
+		const canvasFont = `${fontSize}px ${cfg.font === 'inherit' ? 'sans-serif' : cfg.font}`;
+		const offset = Math.abs(typeof font?.dx === 'number' ? font.dx : 6);
+
+		let leftWidth = 0;
+		let rightWidth = 0;
+		for (const s of resolvedSeries) {
+			const sy = resolveAccessor(s.y);
+			let extreme = 0;
+			let extremeRow: TData | undefined;
+			for (const d of s.data) {
+				const v = Math.abs(Number(sy(d)));
+				if (Number.isNaN(v)) continue;
+				if (extremeRow === undefined || v > extreme) {
+					extreme = v;
+					extremeRow = d;
+				}
+			}
+			if (extremeRow === undefined) continue;
+			const labelWidth = measureTextWidth(formatValue(extreme, s.name), canvasFont);
+			if (s.side === 'left') leftWidth = Math.max(leftWidth, labelWidth);
+			else rightWidth = Math.max(rightWidth, labelWidth);
+		}
+		return { left: Math.ceil(offset + leftWidth), right: Math.ceil(offset + rightWidth), top: 0, bottom: 0 };
+	});
+
 	// A pyramid bar's value label can grow past the plot's own content box —
-	// reserving real space there is what each label's own overflow
-	// measurement feeds into here, via a tracker local to this one `<Plot>`
-	// instance. See `labelOverflow.svelte.ts`. Resets on `resolvedSeries` so
-	// overflow from an earlier, differently-shaped frame doesn't linger once
-	// that frame is gone.
+	// `valueLabelFloor` covers the common case up front; each label's own
+	// rendered overflow still feeds `labelMargin.report` for whatever that
+	// estimate doesn't cover. See `labelOverflow.svelte.ts`.
 	const labelMargin = createLabelMarginTracker(
 		() => margins,
-		() => resolvedSeries
+		() => resolvedSeries,
+		() => valueLabelFloor ?? { left: 0, right: 0, top: 0, bottom: 0 }
 	);
 </script>
 

package/dist/plots/scatter/ValueLabels.svelte

@@ -2,9 +2,11 @@
   import { Text, usePlot } from 'svelteplot';
   import { SvelteMap } from 'svelte/reactivity';
   import { resolveAccessor } from '../utils/accessors';
+  import { getConfiguration } from '../../configuration/config.svelte';
   import { disabledFillOverride } from '../utils/legendDisabled';
   import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
-  import { resolveEdgeAwareAnchor, estimateTextWidth } from '../../utils/edgeAwareAnchor';
+  import { resolveEdgeAwareAnchor } from '../../utils/edgeAwareAnchor';
+  import { measureTextWidth } from '../../layout/plot/measureText';
   import type { Series } from '../../types/plots/data/common';
   import type { ValuesStyle } from '../../types/layout/styles';
   import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
@@ -83,6 +85,7 @@
     onOverflow: (overflow) => onOverflow?.(overflow),
   });
 
+  const cfg = $derived(getConfiguration());
   const font = $derived(values?.fontStyle);
   const preferredTextAnchor = $derived(
     font?.textAnchor === 'outside' || font?.textAnchor === undefined ? 'start' : font.textAnchor,
@@ -91,6 +94,7 @@
   const gapX = $derived(Math.abs(font?.dx ?? 8));
   const gapY = $derived(Math.abs(font?.dy ?? 0));
   const fontSize = $derived(typeof font?.fontSize === 'number' ? font.fontSize : 11);
+  const canvasFont = $derived(`${fontSize}px ${cfg.font === 'inherit' ? 'sans-serif' : cfg.font}`);
   const fillOverride = $derived(disabledFillOverride(disabled));
 
   function textOf(d: TData): string {
@@ -118,8 +122,7 @@
           lineAnchor: preferredLineAnchor,
           gapX,
           gapY,
-          // Rough average glyph width — these labels are short numeric/formatted strings, not measured DOM text.
-          extent: { width: estimateTextWidth(text, fontSize), height: fontSize * 1.2 },
+          extent: { width: measureTextWidth(text, canvasFont), height: fontSize * 1.2 },
         }),
       );
     }

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

@@ -56,7 +56,17 @@ export declare function watchLabelOverflow(args: {
  * series list) — a plain reference/value comparison, not a deep one, so it
  * only need change identity when the rendered content actually does.
  */
-export declare function createLabelMarginTracker(margins: () => MarginConfig | undefined, resetKey?: () => unknown): {
+export declare function createLabelMarginTracker(margins: () => MarginConfig | undefined, resetKey?: () => unknown, 
+/**
+ * A precomputed overflow estimate — from the full dataset, not just the
+ * current frame — used as the reset target instead of zero. Since it's
+ * derived from stable inputs, a `resetKey` change resets `measured` back
+ * to roughly the same value instead of zero, so DOM growth rarely needs
+ * to re-detect and re-grow it (which would otherwise remount the plot on
+ * every reset). DOM measurement can still grow past it for whatever this
+ * estimate doesn't cover.
+ */
+floor?: () => MarginOverflow): {
     report: (overflow: MarginOverflow) => void;
     readonly resolvedMargins: Partial<{
         top: number | "auto";

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

@@ -104,11 +104,22 @@ export function watchLabelOverflow(args) {
  * series list) — a plain reference/value comparison, not a deep one, so it
  * only need change identity when the rendered content actually does.
  */
-export function createLabelMarginTracker(margins, resetKey) {
-    let measured = $state(NO_OVERFLOW);
+export function createLabelMarginTracker(margins, resetKey, 
+/**
+ * A precomputed overflow estimate — from the full dataset, not just the
+ * current frame — used as the reset target instead of zero. Since it's
+ * derived from stable inputs, a `resetKey` change resets `measured` back
+ * to roughly the same value instead of zero, so DOM growth rarely needs
+ * to re-detect and re-grow it (which would otherwise remount the plot on
+ * every reset). DOM measurement can still grow past it for whatever this
+ * estimate doesn't cover.
+ */
+floor) {
+    const floorValue = () => floor?.() ?? NO_OVERFLOW;
+    let measured = $state(floorValue());
     // Skips the reset on the very first run (there's nothing to reset yet,
-    // and `measured` already starts at `NO_OVERFLOW`) so only a later,
-    // genuine change to `resetKey` clears accumulated growth.
+    // and `measured` already starts at the floor) so only a later, genuine
+    // change to `resetKey` clears accumulated growth.
     let resetKeyInitialized = false;
     let lastResetKey;
     $effect(() => {
@@ -120,7 +131,7 @@ export function createLabelMarginTracker(margins, resetKey) {
         }
         if (key !== lastResetKey) {
             lastResetKey = key;
-            measured = NO_OVERFLOW;
+            measured = floorValue();
         }
     });
     function report(overflow) {

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

@@ -47,6 +47,28 @@ export type ChartConfig = {
             fontSize: string;
             disabledOpacity: number;
         };
+        /** Continuous section styling: the draggable lo/hi handles and the tick/edge labels. */
+        continuous: {
+            /** The draggable lo/hi handle. */
+            handle: {
+                width: string;
+                height: string;
+                radius: string;
+                fill: string;
+                stroke: string;
+                strokeWidth: string;
+            };
+            tick: {
+                color: string;
+                width: string;
+                /** Length of the tick mark below the gradient bar. */
+                length: string;
+            };
+            label: {
+                /** Rotation applied to tick/edge label text. */
+                rotate: string;
+            };
+        };
     };
     axis: {
         color: string;

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Accessor } from '../plots/data/common';
+import type { MarginConfig } from '../plots/props';
 export type Responsive<T> = T | {
     desktop: T;
     mobile: T;
@@ -12,6 +13,8 @@ export type FacetCellContext<TRow extends Record<string, unknown>> = {
     data: TRow[];
     width: number;
     height: number;
+    /** Left margin sized to the widest label across every facet — see `labelsForMargin`. Present only when it's given. */
+    margins?: MarginConfig;
 };
 export type FacetCellSnippet<TRow extends Record<string, unknown>> = Snippet<[
     FacetCellContext<TRow>
@@ -40,4 +43,6 @@ export type FacetConfig<TRow extends Record<string, unknown>> = {
     formatIndicator?: (current: number, total: number) => string;
     indicator?: FacetIndicatorSnippet;
     navButton?: FacetNavSnippet;
+    /** Candidate label strings for one facet's own rows — measured across every facet to size a shared left margin (`cell`'s own `margins`). */
+    labelsForMargin?: (rows: TRow[]) => string[];
 };

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

@@ -48,6 +48,18 @@ export type LegendNavContext = {
 };
 /** Custom prev/next button renderer for a paginated horizontal section. Falls back to a small default arrow button. */
 export type LegendNavSnippet = Snippet<[LegendNavContext]>;
+export type LegendHandleWhich = 'lo' | 'hi';
+export type LegendHandleContext = {
+    which: LegendHandleWhich;
+    /** The handle's current data value. */
+    value: number;
+    /** The handle's position along the bar, from 0 to 1. */
+    position: number;
+    onpointerdown: (event: PointerEvent) => void;
+    ondoubleclick: () => void;
+};
+/** Custom drag-handle renderer for an interactive continuous section. */
+export type LegendHandleSnippet = Snippet<[LegendHandleContext]>;
 export type DiscreteLegendSection = {
     type: 'discrete';
     title?: string;
@@ -78,6 +90,8 @@ export type ContinuousLegendSection = {
      */
     mode?: 'rescale' | 'filter';
     disabledStyle?: LegendDisabledStyle;
+    /** Custom renderer for the draggable lo/hi handles. */
+    handle?: LegendHandleSnippet;
 };
 export type LegendSection = DiscreteLegendSection | ContinuousLegendSection;
 /**

package/dist/utils/edgeAwareAnchor.d.ts

@@ -1,7 +1,5 @@
 export type HorizontalAnchor = 'start' | 'middle' | 'end';
 export type VerticalAnchor = 'top' | 'middle' | 'bottom';
-/** Rough estimate of rendered text width in pixels — character count × font size, not a real DOM measurement. Shared so a pre-render space reservation (e.g. domain padding) and this file's own overflow check agree on the same number. */
-export declare function estimateTextWidth(text: string, fontSize: number): number;
 export type AnchorPlacement = {
     textAnchor: HorizontalAnchor;
     lineAnchor: VerticalAnchor;
@@ -11,12 +9,11 @@ export type AnchorPlacement = {
 /**
  * Flips (or nudges) a label's anchor/offset when its default placement
  * would push it past a pixel box — e.g. the plot's own inner content box.
- * `extent` estimates the rendered label size (character count × font size,
- * not a real DOM measurement) deliberately: measuring via `getBBox()` and
- * feeding the result back into anything reactive to the plot's own layout
- * (like svelteplot's shared margin-auto-sizing context) risks a feedback
- * loop between this component's own effect and svelteplot's — this stays
- * self-contained and read-only against the live scale instead.
+ * `extent` should be measured off-DOM (see `measureTextWidth`) rather than
+ * via `getBBox()` on the rendered label — feeding a `getBBox()` reading back
+ * into anything reactive to the plot's own layout (like svelteplot's shared
+ * margin-auto-sizing context) risks a feedback loop between this
+ * component's own effect and svelteplot's.
  */
 export declare function resolveEdgeAwareAnchor(args: {
     /** Pixel position of the anchored point. */

package/dist/utils/edgeAwareAnchor.js

@@ -1,16 +1,11 @@
-/** Rough estimate of rendered text width in pixels — character count × font size, not a real DOM measurement. Shared so a pre-render space reservation (e.g. domain padding) and this file's own overflow check agree on the same number. */
-export function estimateTextWidth(text, fontSize) {
-    return text.length * fontSize * 0.62;
-}
 /**
  * Flips (or nudges) a label's anchor/offset when its default placement
  * would push it past a pixel box — e.g. the plot's own inner content box.
- * `extent` estimates the rendered label size (character count × font size,
- * not a real DOM measurement) deliberately: measuring via `getBBox()` and
- * feeding the result back into anything reactive to the plot's own layout
- * (like svelteplot's shared margin-auto-sizing context) risks a feedback
- * loop between this component's own effect and svelteplot's — this stays
- * self-contained and read-only against the live scale instead.
+ * `extent` should be measured off-DOM (see `measureTextWidth`) rather than
+ * via `getBBox()` on the rendered label — feeding a `getBBox()` reading back
+ * into anything reactive to the plot's own layout (like svelteplot's shared
+ * margin-auto-sizing context) risks a feedback loop between this
+ * component's own effect and svelteplot's.
  */
 export function resolveEdgeAwareAnchor(args) {
     const { px, py, width, height, gapX, gapY, extent } = args;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "type": "module",
   "files": [
     "dist"