@fjader/svelte 0.2.3 → 0.2.5

package/dist/components/axes/AxisLeft.svelte

@@ -1,16 +1,42 @@
 <script lang="ts">
+	import { hasEntered } from '../../scales/entered';
 	import { getContext } from 'svelte';
 	import type { ChartContext } from '../../types';
 	import type { BandScaleState } from '../../scales/BandScaleState.svelte';
 	import BandAxisTicks from './BandAxisTicks.svelte';
 	import type { ContinuousScaleState } from '../../types';
+	import { categoryLabel } from '../../query-engine/categorical-identity';
+	import { clearTitleOffset, sameTicks, textWidth } from './axis-title';
 
 	interface Props {
 		ticksNumber?: number;
 		tickFormat?: ((value: unknown) => string) | null;
+		/**
+		 * Draw the scale's label as the axis title (default). `false` draws none; the
+		 * label still names the scale, so charts sharing it still link their zoom.
+		 */
+		title?: boolean;
+		/**
+		 * How far left of the axis the title sits, in px (default 32), or `'auto'`:
+		 * clear of the widest tick label, as far as the chart's left margin allows.
+		 */
+		titleOffset?: number | 'auto';
+		/**
+		 * Where the title goes: `'side'` (default), rotated beside the tick labels, or
+		 * `'top'`, horizontal above the plot at the axis. `'top'` cannot meet the tick
+		 * labels, so it needs no `titleOffset` and no room in the left margin; it takes
+		 * the space above the plot (the chart's top margin).
+		 */
+		titlePlacement?: 'side' | 'top';
 	}
 
-	let { ticksNumber = 5, tickFormat = null }: Props = $props();
+	let {
+		ticksNumber = 5,
+		tickFormat = null,
+		title = true,
+		titleOffset = 32,
+		titlePlacement = 'side'
+	}: Props = $props();
 	const c = getContext<ChartContext>('chart');
 
 	// Propagate custom format to scale state once it exists (for MarginLabel, tooltips, etc.)
@@ -20,9 +46,10 @@
 			(s as ContinuousScaleState).setCustomFormat(tickFormat);
 	});
 
-	// Continuous scales (linear, time): use scaleState.getTicks()
+	// Continuous scales (linear, time): use scaleState.getTicks(). None until the
+	// scale has entered: before that its domain is a placeholder.
 	const continuousTicks = $derived(
-		c.yScaleState?.getTicks ? c.yScaleState.getTicks(ticksNumber) : []
+		c.yScaleState?.getTicks && hasEntered(c.yScaleState) ? c.yScaleState.getTicks(ticksNumber) : []
 	);
 
 	// Band scales: the categories on screen NOW, at their current fractional slots,
@@ -34,6 +61,43 @@
 
 	// Unified formatter interface - all scale states have tickFormat()
 	const tickFormatter = $derived(c.yScaleState?.tickFormat ? c.yScaleState.tickFormat() : String);
+
+	// The title's distance from the axis. Measured only for 'auto', from the labels
+	// drawn (each distinct string once, then cached). It follows the widest label
+	// seen on this scale and never moves back in: pan and zoom change the ticks
+	// all the time, and a title that followed them would jitter. Taking the
+	// maximum is idempotent, so re-evaluating this changes nothing.
+	let widestSeen = 0;
+	let widestScale: unknown = null;
+	// The ticks and formatter the widest was last taken from: a pan that only moves
+	// the same ticks measures (and formats) nothing.
+	let measuredTicks: ArrayLike<unknown> | null = null;
+	let measuredFormatter: unknown = null;
+	const titleX = $derived.by(() => {
+		if (titleOffset !== 'auto') return titleOffset;
+		const scale = c.yScaleState;
+		if (scale !== widestScale) {
+			widestScale = scale;
+			widestSeen = 0;
+			measuredTicks = null;
+		}
+		const band = c.scaleTypes?.y === 'band';
+		const ticks: ArrayLike<unknown> = band ? bandTicks : continuousTicks;
+		if (!sameTicks(measuredTicks, ticks) || (!band && measuredFormatter !== tickFormatter)) {
+			if (band) {
+				for (const tick of bandTicks) {
+					widestSeen = Math.max(widestSeen, textWidth(String(categoryLabel(tick.value))));
+				}
+			} else {
+				for (const tick of continuousTicks) {
+					widestSeen = Math.max(widestSeen, textWidth(String(tickFormatter(tick))));
+				}
+			}
+			measuredTicks = ticks;
+			measuredFormatter = tickFormatter;
+		}
+		return clearTitleOffset(widestSeen, c.margin.left);
+	});
 </script>
 
 {#if c.isReady && c.scaleTypes}
@@ -47,10 +111,6 @@
 					{tickFormatter(tick)}
 				</text>
 			{/each}
-
-			<text text-anchor="middle" transform={`translate(-32, ${c.innerHeight / 2}) rotate(-90)`}>
-				{c.yLabel}
-			</text>
 		{:else if c.scaleTypes.y === 'band' && c.yScale}
 			<BandAxisTicks
 				scale={c.yScaleState as BandScaleState}
@@ -60,10 +120,21 @@
 				dir={-1}
 				textAnchor="end"
 			/>
+		{/if}
 
-			<text text-anchor="middle" transform={`translate(-32, ${c.innerHeight / 2}) rotate(-90)`}>
-				{c.yLabel}
-			</text>
+		{#if title && c.yScale}
+			{#if titlePlacement === 'top'}
+				<text text-anchor="start" x={0} y={-18}>
+					{c.yLabel}
+				</text>
+			{:else}
+				<text
+					text-anchor="middle"
+					transform={`translate(${-titleX}, ${c.innerHeight / 2}) rotate(-90)`}
+				>
+					{c.yLabel}
+				</text>
+			{/if}
 		{/if}
 	</g>
 {/if}

package/dist/components/axes/AxisLeft.svelte.d.ts

@@ -1,6 +1,23 @@
 interface Props {
     ticksNumber?: number;
     tickFormat?: ((value: unknown) => string) | null;
+    /**
+     * Draw the scale's label as the axis title (default). `false` draws none; the
+     * label still names the scale, so charts sharing it still link their zoom.
+     */
+    title?: boolean;
+    /**
+     * How far left of the axis the title sits, in px (default 32), or `'auto'`:
+     * clear of the widest tick label, as far as the chart's left margin allows.
+     */
+    titleOffset?: number | 'auto';
+    /**
+     * Where the title goes: `'side'` (default), rotated beside the tick labels, or
+     * `'top'`, horizontal above the plot at the axis. `'top'` cannot meet the tick
+     * labels, so it needs no `titleOffset` and no room in the left margin; it takes
+     * the space above the plot (the chart's top margin).
+     */
+    titlePlacement?: 'side' | 'top';
 }
 declare const AxisLeft: import("svelte").Component<Props, {}, "">;
 type AxisLeft = ReturnType<typeof AxisLeft>;

package/dist/components/axes/BandAxisTicks.svelte

@@ -4,6 +4,7 @@
 	import type { ChartContext } from '../../types';
 	import { categoryLabel } from '../../query-engine/categorical-identity';
 	import type { FilterGroupRegistry } from '../../query-engine/FilterGroupRegistry.svelte';
+	import { dimsBySelection } from '../rendering/activity-reads';
 
 	/**
 	 * The labels on a band axis, wherever that axis is drawn.
@@ -71,8 +72,8 @@
 		if (!chart || !filterGroups) return [];
 		const indices: number[] = [];
 		for (const entry of chart.config.entries.values()) {
-			// A 'filter' mark never dims; its labels follow it.
-			if (entry.selectionResponse === 'filter') continue;
+			// A 'filter' or 'ignore' mark never dims; its labels follow it.
+			if (!dimsBySelection(entry.selectionResponse)) continue;
 			const index = filterGroups.get(entry.selection).index;
 			if (!indices.includes(index)) indices.push(index);
 		}
@@ -105,7 +106,7 @@
 </script>
 
 {#each ticks as tick (tick.key)}
-	{@const pos = scale.tickPosition(tick.key, rangeSize, axis)}
+	{@const pos = scale.tickPosition(tick.key, rangeSize)}
 	<g opacity={opacityOf(tick)}>
 		{#if axis === 'x'}
 			<line x1={pos} x2={pos} y1={base} y2={tickEnd} />

package/dist/components/axes/axis-title.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Where an axis title sits relative to its tick labels.
+ *
+ * The left axis puts its tick labels right-anchored 9px from the axis line and
+ * its title, rotated, to the left of them. A fixed offset is right for short
+ * labels and runs into wide ones (`40,000`, a band name). `'auto'` places the
+ * title clear of the widest label, within the margin the chart gave it.
+ */
+/** The title's offset when nothing says otherwise, and the least `'auto'` uses. */
+export declare const DEFAULT_TITLE_OFFSET = 32;
+/**
+ * The width of a tick label in px. Measured on a canvas, once per distinct
+ * string (a band axis has the same labels frame after frame); 6px a character
+ * where there is no document. An estimate by design: the page's own font can
+ * differ a little, and CLEARANCE covers that.
+ */
+export declare function textWidth(text: string): number;
+/**
+ * How far left of the axis line the title's baseline goes, clear of a label
+ * `widest` px wide: never less than the default, and never so far that its body
+ * leaves the margin. A margin too narrow for the labels leaves them overlapping,
+ * and only a wider margin fixes that.
+ */
+export declare function clearTitleOffset(widest: number, marginLeft: number): number;
+/**
+ * Whether two tick lists are the same ticks: equal values, or band ticks of the
+ * same key. A loop with no allocation, to skip re-measuring labels when a pan
+ * moved the ticks but did not change them.
+ */
+export declare function sameTicks(a: ArrayLike<unknown> | null, b: ArrayLike<unknown>): boolean;

package/dist/components/axes/axis-title.js

@@ -0,0 +1,77 @@
+/**
+ * Where an axis title sits relative to its tick labels.
+ *
+ * The left axis puts its tick labels right-anchored 9px from the axis line and
+ * its title, rotated, to the left of them. A fixed offset is right for short
+ * labels and runs into wide ones (`40,000`, a band name). `'auto'` places the
+ * title clear of the widest label, within the margin the chart gave it.
+ */
+/** Where the tick labels end, from the axis line: AxisLeft's text x and BandAxisTicks' labelGap. */
+const TICK_GAP = 9;
+/** Between the widest label and the title's baseline; the title's descenders reach into it. */
+const CLEARANCE = 12;
+/** A rotated title's glyphs sit on the far side of its baseline, away from the axis. */
+const TITLE_BODY = 10;
+/** The title's offset when nothing says otherwise, and the least `'auto'` uses. */
+export const DEFAULT_TITLE_OFFSET = 32;
+const FONT = '10px system-ui, sans-serif';
+const FALLBACK_CHAR_WIDTH = 6;
+const CACHE_LIMIT = 2000;
+let context;
+const widths = new Map();
+/**
+ * The width of a tick label in px. Measured on a canvas, once per distinct
+ * string (a band axis has the same labels frame after frame); 6px a character
+ * where there is no document. An estimate by design: the page's own font can
+ * differ a little, and CLEARANCE covers that.
+ */
+export function textWidth(text) {
+    const known = widths.get(text);
+    if (known !== undefined)
+        return known;
+    if (context === undefined) {
+        context =
+            typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d');
+        if (context)
+            context.font = FONT;
+    }
+    const width = context ? context.measureText(text).width : text.length * FALLBACK_CHAR_WIDTH;
+    if (widths.size >= CACHE_LIMIT)
+        widths.clear();
+    widths.set(text, width);
+    return width;
+}
+/**
+ * How far left of the axis line the title's baseline goes, clear of a label
+ * `widest` px wide: never less than the default, and never so far that its body
+ * leaves the margin. A margin too narrow for the labels leaves them overlapping,
+ * and only a wider margin fixes that.
+ */
+export function clearTitleOffset(widest, marginLeft) {
+    const wanted = Math.max(TICK_GAP + widest + CLEARANCE, DEFAULT_TITLE_OFFSET);
+    return Math.max(0, Math.min(wanted, marginLeft - TITLE_BODY));
+}
+/**
+ * Whether two tick lists are the same ticks: equal values, or band ticks of the
+ * same key. A loop with no allocation, to skip re-measuring labels when a pan
+ * moved the ticks but did not change them.
+ */
+export function sameTicks(a, b) {
+    if (!a || a.length !== b.length)
+        return false;
+    for (let i = 0; i < b.length; i++) {
+        const x = a[i];
+        const y = b[i];
+        if (x === y)
+            continue;
+        if (typeof x === 'object' &&
+            typeof y === 'object' &&
+            x !== null &&
+            y !== null &&
+            x.key !== undefined &&
+            x.key === y.key)
+            continue;
+        return false;
+    }
+    return true;
+}

package/dist/components/charts/ChartCell.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import type { ScaleGeneration } from '../../scales/ScaleGeneration.svelte';
+	import type { ChartVisibility } from './ChartVisibility.svelte';
+	import type { ChartHover } from './ChartHover.svelte';
 	import { setContext, getContext, onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { ChartLayout } from '../../layout/ChartLayout.svelte';
@@ -43,6 +46,12 @@
 		height?: number;
 		clipPadding?: number;
 		scales: ChartScales;
+		/** The chart's scale replacements; owned by the container, which outlives its ChartScales. */
+		scaleGeneration: ScaleGeneration;
+		/** Whether any of the chart's cells is on screen; this cell reports into it. */
+		chartVisibility: ChartVisibility;
+		/** Whether the pointer is over any of the chart's cells; this cell reports into it. */
+		chartHover: ChartHover;
 		chartConfig: ChartConfig;
 		facetingProps?: FacetingProps;
 		gpuCoordinator: GPUCoordinator;
@@ -63,6 +72,9 @@
 		height = 250,
 		clipPadding = 0,
 		scales,
+		scaleGeneration,
+		chartVisibility,
+		chartHover,
 		chartConfig,
 		facetingProps = {
 			fx: null,
@@ -222,12 +234,15 @@
 		};
 	});
 
-	// --- Viewport visibility callback (reserved for future use) ---
-	const removeVisibilityCallback = gpuCoordinator.setVisibilityCallback(
-		layout.chartId,
-		(_visible) => {}
+	// --- Viewport visibility: this cell reports into the chart's ---
+	const removeVisibilityCallback = gpuCoordinator.setVisibilityCallback(layout.chartId, (visible) =>
+		chartVisibility.set(layout.chartId, visible)
 	);
-	onMount(() => removeVisibilityCallback);
+	onMount(() => () => {
+		removeVisibilityCallback();
+		chartVisibility.remove(layout.chartId);
+		chartHover.set(layout.chartId, false);
+	});
 	onMount(() => () => hoverSettle.leave());
 
 	// --- Scale readiness effect ---
@@ -358,6 +373,16 @@
 		get xScaleState() {
 			return scales?.xScaleState;
 		},
+		get scaleGeneration() {
+			return scaleGeneration.value;
+		},
+		get visible() {
+			return chartVisibility.visible;
+		},
+		shownElsewhere: (scale) => chartVisibility.shownElsewhere(scale),
+		get hovered() {
+			return chartHover.hovered;
+		},
 		get yScaleState() {
 			return scales?.yScaleState;
 		},
@@ -546,6 +571,7 @@
 	}
 
 	function handleChartPointerEnter(event: PointerEvent) {
+		chartHover.set(layout.chartId, true);
 		activateSources();
 		hoverSettle.enter();
 		refreshSvgOrigin();
@@ -564,6 +590,7 @@
 	}
 
 	function handleChartPointerLeave() {
+		chartHover.set(layout.chartId, false);
 		pointerInside = false;
 		pointerOverSvg = false;
 		hoverSettle.leave();
@@ -897,7 +924,7 @@
 			if (overBrush) {
 				tooltipManager?.updatePosition(null, null);
 			} else {
-				tooltipManager?.updatePointerScreen(x, y);
+				tooltipManager?.updatePointerClient(x + svgLeft, y + svgTop);
 				tooltipManager?.updatePosition(
 					scales.xScaleState?.currentDataPoint,
 					scales.yScaleState?.currentDataPoint

package/dist/components/charts/ChartCell.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { ScaleGeneration } from '../../scales/ScaleGeneration.svelte';
+import type { ChartVisibility } from './ChartVisibility.svelte';
+import type { ChartHover } from './ChartHover.svelte';
 import type { Snippet } from 'svelte';
 import type { Margin } from '../../types';
 import type { FieldRef } from '../../types';
@@ -27,6 +30,12 @@ interface Props {
     height?: number;
     clipPadding?: number;
     scales: ChartScales;
+    /** The chart's scale replacements; owned by the container, which outlives its ChartScales. */
+    scaleGeneration: ScaleGeneration;
+    /** Whether any of the chart's cells is on screen; this cell reports into it. */
+    chartVisibility: ChartVisibility;
+    /** Whether the pointer is over any of the chart's cells; this cell reports into it. */
+    chartHover: ChartHover;
     chartConfig: ChartConfig;
     facetingProps?: FacetingProps;
     gpuCoordinator: GPUCoordinator;

package/dist/components/charts/ChartContainer.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { ScaleGeneration } from '../../scales/ScaleGeneration.svelte';
+	import { ChartVisibility } from './ChartVisibility.svelte';
+	import { ChartHover } from './ChartHover.svelte';
 	import { setContext, getContext, onDestroy } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { ChartLayout } from '../../layout/ChartLayout.svelte';
@@ -6,8 +9,8 @@
 	import { ChartScales } from '../../scales/ChartScales.svelte';
 	import { ChartConfig } from '../../config';
 	import { getGPUContext } from '../../gpu';
-	import type { ScaleRegistry } from '../../scales/ScaleRegistry.svelte';
-	import type { ChartContext, FieldRef } from '../../types';
+	import type { ScaleRegistry, AnyScaleState } from '../../scales/ScaleRegistry.svelte';
+	import type { ChartContext, EntranceMode, FieldRef } from '../../types';
 	import type { BandScaleState } from '../../scales/BandScaleState.svelte';
 	import type { DimValue } from '../../query-engine/categorical-identity';
 	import { identityKeyFor } from '../../query-engine/identity-key';
@@ -78,6 +81,19 @@
 		clipPadding?: number;
 		useXSelection?: boolean;
 		useYSelection?: boolean;
+		/**
+		 * The tooltip's colours against the color-scheme the chart inherits:
+		 * `contrast` is the opposite scheme (dark on a light page), `follow` the
+		 * same. Unset, the nearest `data-fjader-tooltip` ancestor decides, else
+		 * contrast. `--fjader-tooltip-bg`/`-text` set by the app override both.
+		 */
+		tooltipScheme?: 'contrast' | 'follow';
+		/**
+		 * How the marks enter when data first draws: 'auto' grows bars and
+		 * areas from 0 and fades the rest, 'fade' fades everything, 'none'
+		 * shows them at once. Reduced motion turns 'auto' into 'fade'.
+		 */
+		entrance?: EntranceMode;
 	}
 
 	let {
@@ -94,6 +110,7 @@
 		interactors = undefined,
 		legend = undefined,
 		legendPosition = 'top',
+		entrance = 'auto',
 		wheelInteraction = {
 			dwellTimeMs: 250,
 			momentumThreshold: 150,
@@ -108,7 +125,8 @@
 		margin: marginOverride = {},
 		clipPadding = 0,
 		useXSelection = false,
-		useYSelection = false
+		useYSelection = false,
+		tooltipScheme = undefined
 	}: Props = $props();
 
 	const defaultMargin = { top: 30, right: 50, bottom: 35, left: 75 };
@@ -204,6 +222,19 @@
 
 	// --- ChartScales ---
 	let scales = $state<ChartScales | null>(null);
+	// Survives `scales` being recreated: see ScaleGeneration.
+	const scaleGeneration = new ScaleGeneration(() => scales);
+	// Whether any cell is on screen; the cells report into it.
+	const chartVisibility = new ChartVisibility(
+		gpuCoordinator
+			? {
+					chartsUsing: (scale) => scaleRegistry.chartsUsing(scale as AnyScaleState),
+					isChartVisible: (chartId) => gpuCoordinator.isChartVisible(chartId)
+				}
+			: null
+	);
+	// Whether the pointer is over any cell; the cells report into it.
+	const chartHover = new ChartHover();
 
 	// Queue for scale registrations that arrive before ChartScales is created.
 	// Marks mount synchronously during render, but ChartScales is created in an
@@ -239,7 +270,8 @@
 			xDisableZoom,
 			yDisableZoom,
 			useXSelection,
-			useYSelection
+			useYSelection,
+			entranceGate: chartConfig.entrance
 		});
 
 		// Replay any scale registrations that were queued before scales existed
@@ -266,9 +298,11 @@
 
 	// --- ChartConfig (reactive configuration store) ---
 	const chartConfig = new ChartConfig();
+	onDestroy(() => chartConfig.entrance.destroy());
 
 	// Register chart-level props for palette overrides
 	chartConfig.registerChart({
+		entrance: () => entrance,
 		marginTop: () => cellMargin.top,
 		marginRight: () => cellMargin.right,
 		marginBottom: () => cellMargin.bottom,
@@ -365,6 +399,16 @@
 		get xScaleState() {
 			return scales?.xScaleState;
 		},
+		get scaleGeneration() {
+			return scaleGeneration.value;
+		},
+		get visible() {
+			return chartVisibility.visible;
+		},
+		shownElsewhere: (scale) => chartVisibility.shownElsewhere(scale),
+		get hovered() {
+			return chartHover.hovered;
+		},
 		get yScaleState() {
 			return scales?.yScaleState;
 		},
@@ -452,7 +496,7 @@
 	setContext('legend-position', () => legendPosition);
 </script>
 
-<div class="figure-container" bind:clientWidth={layout.width}>
+<div class="figure-container" bind:clientWidth={layout.width} data-fjader-tooltip={tooltipScheme}>
 	{#if legend && legendPosition === 'top'}
 		<div
 			class="legend-container legend-top"
@@ -485,6 +529,9 @@
 						facetLabel={String(categoryLabel(cat))}
 						margin={{ top: 20, right: 10, bottom: 35, left: 55 }}
 						{scales}
+						{scaleGeneration}
+						{chartVisibility}
+						{chartHover}
 						{chartConfig}
 						{facetingProps}
 						{gpuCoordinator}
@@ -507,6 +554,9 @@
 			margin={cellMargin}
 			{clipPadding}
 			{scales}
+			{scaleGeneration}
+			{chartVisibility}
+			{chartHover}
 			{chartConfig}
 			{facetingProps}
 			{gpuCoordinator}

package/dist/components/charts/ChartContainer.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { Margin } from '../../types';
-import type { FieldRef } from '../../types';
+import type { EntranceMode, FieldRef } from '../../types';
 import type { DimValue } from '../../query-engine/categorical-identity';
 interface Props {
     xLabel?: string | null;
@@ -69,6 +69,19 @@ interface Props {
     clipPadding?: number;
     useXSelection?: boolean;
     useYSelection?: boolean;
+    /**
+     * The tooltip's colours against the color-scheme the chart inherits:
+     * `contrast` is the opposite scheme (dark on a light page), `follow` the
+     * same. Unset, the nearest `data-fjader-tooltip` ancestor decides, else
+     * contrast. `--fjader-tooltip-bg`/`-text` set by the app override both.
+     */
+    tooltipScheme?: 'contrast' | 'follow';
+    /**
+     * How the marks enter when data first draws: 'auto' grows bars and
+     * areas from 0 and fades the rest, 'fade' fades everything, 'none'
+     * shows them at once. Reduced motion turns 'auto' into 'fade'.
+     */
+    entrance?: EntranceMode;
 }
 declare const ChartContainer: import("svelte").Component<Props, {}, "">;
 type ChartContainer = ReturnType<typeof ChartContainer>;

package/dist/components/charts/ChartHover.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Whether the pointer is over any of a chart's cells: hover intent, for work
+ * worth doing only when someone is about to hover a mark, such as writing its
+ * tooltip table.
+ *
+ * Owned by the chart container, which in facet mode holds the marks for many
+ * cells, as ChartVisibility is. Cells report pointer enter and leave.
+ */
+export declare class ChartHover {
+    #private;
+    set(cellId: string, hovered: boolean): void;
+    /** True while the pointer is over any cell. Reactive. */
+    get hovered(): boolean;
+}

package/dist/components/charts/ChartHover.svelte.js

@@ -0,0 +1,22 @@
+import { SvelteSet } from 'svelte/reactivity';
+/**
+ * Whether the pointer is over any of a chart's cells: hover intent, for work
+ * worth doing only when someone is about to hover a mark, such as writing its
+ * tooltip table.
+ *
+ * Owned by the chart container, which in facet mode holds the marks for many
+ * cells, as ChartVisibility is. Cells report pointer enter and leave.
+ */
+export class ChartHover {
+    #cells = new SvelteSet();
+    set(cellId, hovered) {
+        if (hovered)
+            this.#cells.add(cellId);
+        else
+            this.#cells.delete(cellId);
+    }
+    /** True while the pointer is over any cell. Reactive. */
+    get hovered() {
+        return this.#cells.size > 0;
+    }
+}

package/dist/components/charts/ChartVisibility.svelte.d.ts

@@ -0,0 +1,43 @@
+/** What `shownElsewhere` asks: which charts draw a scale, and which are visible. */
+export interface ChartVisibilityPeers {
+    chartsUsing(scale: object): readonly string[];
+    isChartVisible(chartId: string): boolean;
+}
+/**
+ * Whether any of a chart's cells is on screen, for its marks to stop
+ * re-querying while it is not (see MarkHandle.active).
+ *
+ * Owned by the chart container, which in facet mode holds the marks for many
+ * cells: the marks stay active while any cell is visible. Each cell reports
+ * what the GPU coordinator's IntersectionObserver and page visibility say
+ * about it; the observer has a 200 px margin, so a chart counts as visible
+ * just before it scrolls in. A cell that has not reported counts as visible,
+ * as it does for the coordinator, so nothing is held back before the first
+ * report.
+ */
+export declare class ChartVisibility {
+    #private;
+    constructor(peers?: ChartVisibilityPeers | null);
+    /** A cell's visibility changed. */
+    set(cellId: string, visible: boolean): void;
+    /** A cell unmounted. */
+    remove(cellId: string): void;
+    /**
+     * True while any cell is visible, or none has reported. Reactive: it reads
+     * the SvelteMap. A getter, not a derived, since a chart has few cells.
+     */
+    get visible(): boolean;
+    /**
+     * Whether a chart other than this one is visible and draws `scale`, so
+     * that changing the scale moves something in view. A chart catching up on
+     * its return snaps its own parts but springs a scale like this: the chart
+     * being watched moves through the scale, as it would for any change.
+     *
+     * Asked when a result lands, not when it was sent: visibility changes
+     * during a scroll. "Visible" is the coordinator's: it includes the 200 px
+     * margin, so a chart in the margin, which nobody sees yet, still counts and
+     * keeps the spring. Untracked: a point-in-time answer, asked from inside
+     * effects that must not re-run when a cell scrolls.
+     */
+    shownElsewhere(scale: object): boolean;
+}