@fjader/svelte 0.2.4 → 0.2.5

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';
@@ -85,6 +88,12 @@
 		 * 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 {
@@ -101,6 +110,7 @@
 		interactors = undefined,
 		legend = undefined,
 		legendPosition = 'top',
+		entrance = 'auto',
 		wheelInteraction = {
 			dwellTimeMs: 250,
 			momentumThreshold: 150,
@@ -212,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
@@ -247,7 +270,8 @@
 			xDisableZoom,
 			yDisableZoom,
 			useXSelection,
-			useYSelection
+			useYSelection,
+			entranceGate: chartConfig.entrance
 		});
 
 		// Replay any scale registrations that were queued before scales existed
@@ -274,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,
@@ -373,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;
 		},
@@ -493,6 +529,9 @@
 						facetLabel={String(categoryLabel(cat))}
 						margin={{ top: 20, right: 10, bottom: 35, left: 55 }}
 						{scales}
+						{scaleGeneration}
+						{chartVisibility}
+						{chartHover}
 						{chartConfig}
 						{facetingProps}
 						{gpuCoordinator}
@@ -515,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;
@@ -76,6 +76,12 @@ interface Props {
      * 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;
+}

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

@@ -0,0 +1,67 @@
+import { untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+/**
+ * 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 class ChartVisibility {
+    #cells = new SvelteMap();
+    #peers;
+    constructor(peers = null) {
+        this.#peers = peers;
+    }
+    /** A cell's visibility changed. */
+    set(cellId, visible) {
+        this.#cells.set(cellId, visible);
+    }
+    /** A cell unmounted. */
+    remove(cellId) {
+        this.#cells.delete(cellId);
+    }
+    /**
+     * 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() {
+        if (this.#cells.size === 0)
+            return true;
+        for (const v of this.#cells.values())
+            if (v)
+                return true;
+        return false;
+    }
+    /**
+     * 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) {
+        const peers = this.#peers;
+        if (!peers)
+            return false;
+        return untrack(() => {
+            for (const chartId of peers.chartsUsing(scale)) {
+                if (this.#cells.has(chartId))
+                    continue;
+                if (peers.isChartVisible(chartId))
+                    return true;
+            }
+            return false;
+        });
+    }
+}

package/dist/components/guides/Grid.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { hasEntered } from '../../scales/entered';
 	import { getContext } from 'svelte';
 	import { GridLine } from '../rendering';
 	import type { ChartContext, ScaleStateInstance } from '../../types';
@@ -38,7 +39,9 @@
 	let yBuffer = new Float32Array(64);
 
 	function ticksOf(scale: ScaleStateInstance | null, which: 'x' | 'y'): Float32Array | null {
-		const ticks = scale?.getTicks ? (scale.getTicks() as ArrayLike<number>) : null;
+		// None until the scale has entered: its domain is a placeholder before that.
+		const ticks =
+			scale?.getTicks && hasEntered(scale) ? (scale.getTicks() as ArrayLike<number>) : null;
 		if (!ticks || ticks.length === 0) return null;
 		let buffer = which === 'x' ? xBuffer : yBuffer;
 		if (buffer.length < ticks.length) {
@@ -58,6 +61,12 @@
 	const yTickValues = $derived(ticksOf(yScale, 'y'));
 	const xAlpha = $derived(visibilityOf(xScale, xBand));
 	const yAlpha = $derived(visibilityOf(yScale, yBand));
+	// A band axis's line opacity follows its layout: when that landed at once
+	// (a catch-up result), the opacity lands with it.
+	const landedOf = (scale: ScaleStateInstance | null, band: boolean) =>
+		band && scale ? (scale as BandScaleState).slotsLandedLayout : 0;
+	const xLands = $derived(landedOf(xScale, xBand));
+	const yLands = $derived(landedOf(yScale, yBand));
 </script>
 
 {#if xTickValues}
@@ -65,6 +74,7 @@
 		axis="x"
 		positions={xTickValues}
 		alpha={xAlpha}
+		landsFor={xLands}
 		bandAxis={xBand ? 'x' : null}
 		{color}
 		{lineWidth}
@@ -76,6 +86,7 @@
 		axis="y"
 		positions={yTickValues}
 		alpha={yAlpha}
+		landsFor={yLands}
 		bandAxis={yBand ? 'y' : null}
 		{color}
 		{lineWidth}

package/dist/components/marks/AreaMarkX.svelte

@@ -49,6 +49,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		y,
 		x,
 		x1: x1Prop,
@@ -103,6 +104,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -148,7 +150,8 @@
 		seriesChannelKey,
 		() => setup,
 		scaleRegistry,
-		chartContext
+		chartContext,
+		() => markColor.scaleState
 	);
 
 	// Color: fill determines area color — reads from entry
@@ -239,8 +242,8 @@
 		resolveFitDomain: () => resolvedFitAxis
 	});
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, entry.y, x2));
 
@@ -307,7 +310,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -375,6 +378,8 @@
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
 			groupIndex={setup?.groupIndex ?? 0}
+			activitySeriesMode={markSeries.activityMode}
+			activitySeriesScaleIndex={markSeries.activityScaleIndex}
 			constantColor={markColor.constantColor}
 			fillOpacity={entry.fillOpacity ?? 0.5}
 			dotRadius={effectiveDotRadius}
@@ -383,6 +388,7 @@
 			orientation="horizontal"
 			facetData={setup?.facetData}
 			dataVersion={setup?.dataVersion || 0}
+			grow={!hasExplicitBounds}
 		/>
 		{#if (entry.strokeWidth ?? 0) > 0}
 			<Lines
@@ -396,11 +402,14 @@
 				activityColorMode={outline.activityColorMode}
 				activityColorScaleIndex={outline.activityColorScaleIndex}
 				groupIndex={setup?.groupIndex ?? 0}
+				activitySeriesMode={markSeries.activityMode}
+				activitySeriesScaleIndex={markSeries.activityScaleIndex}
 				constantColor={strokeConstantColor}
 				strokeWidth={entry.strokeWidth ?? 0}
 				zIndex={1}
 				facetData={setup?.facetData}
 				dataVersion={setup?.dataVersion || 0}
+				grow={hasExplicitBounds ? null : 'x'}
 			/>
 			{#if showBothBoundaries}
 				<Lines
@@ -414,11 +423,14 @@
 					activityColorMode={outline.activityColorMode}
 					activityColorScaleIndex={outline.activityColorScaleIndex}
 					groupIndex={setup?.groupIndex ?? 0}
+					activitySeriesMode={markSeries.activityMode}
+					activitySeriesScaleIndex={markSeries.activityScaleIndex}
 					constantColor={strokeConstantColor}
 					strokeWidth={entry.strokeWidth ?? 0}
 					zIndex={1}
 					facetData={setup?.facetData}
 					dataVersion={setup?.dataVersion || 0}
+					grow={hasExplicitBounds ? null : 'x'}
 				/>
 			{/if}
 		{/if}

package/dist/components/marks/AreaMarkY.svelte

@@ -49,6 +49,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y,
 		y1: y1Prop,
@@ -103,6 +104,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -148,7 +150,8 @@
 		seriesChannelKey,
 		() => setup,
 		scaleRegistry,
-		chartContext
+		chartContext,
+		() => markColor.scaleState
 	);
 
 	// Color: fill determines area color — reads from entry
@@ -239,8 +242,8 @@
 		resolveFitDomain: () => resolvedFitAxis
 	});
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, entry.x, y2));
 
@@ -306,7 +309,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -375,6 +378,8 @@
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
 			groupIndex={setup?.groupIndex ?? 0}
+			activitySeriesMode={markSeries.activityMode}
+			activitySeriesScaleIndex={markSeries.activityScaleIndex}
 			constantColor={markColor.constantColor}
 			fillOpacity={entry.fillOpacity ?? 0.5}
 			dotRadius={effectiveDotRadius}
@@ -383,6 +388,7 @@
 			orientation="vertical"
 			facetData={setup?.facetData}
 			dataVersion={setup?.dataVersion || 0}
+			grow={!hasExplicitBounds}
 		/>
 		{#if (entry.strokeWidth ?? 0) > 0}
 			<Lines
@@ -396,11 +402,14 @@
 				activityColorMode={outline.activityColorMode}
 				activityColorScaleIndex={outline.activityColorScaleIndex}
 				groupIndex={setup?.groupIndex ?? 0}
+				activitySeriesMode={markSeries.activityMode}
+				activitySeriesScaleIndex={markSeries.activityScaleIndex}
 				constantColor={strokeConstantColor}
 				strokeWidth={entry.strokeWidth ?? 0}
 				zIndex={1}
 				facetData={setup?.facetData}
 				dataVersion={setup?.dataVersion || 0}
+				grow={hasExplicitBounds ? null : 'y'}
 			/>
 			{#if showBothBoundaries}
 				<Lines
@@ -414,11 +423,14 @@
 					activityColorMode={outline.activityColorMode}
 					activityColorScaleIndex={outline.activityColorScaleIndex}
 					groupIndex={setup?.groupIndex ?? 0}
+					activitySeriesMode={markSeries.activityMode}
+					activitySeriesScaleIndex={markSeries.activityScaleIndex}
 					constantColor={strokeConstantColor}
 					strokeWidth={entry.strokeWidth ?? 0}
 					zIndex={1}
 					facetData={setup?.facetData}
 					dataVersion={setup?.dataVersion || 0}
+					grow={hasExplicitBounds ? null : 'y'}
 				/>
 			{/if}
 		{/if}

package/dist/components/marks/BarMarkX.svelte

@@ -42,6 +42,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		contributeDomain = undefined,
 		x,
 		x1: x1Prop,
@@ -86,6 +87,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		contributeDomain: () => contributeDomain,
 		limit: () => limit,
 		padding: () => padding,
@@ -178,8 +180,8 @@
 
 	const reactiveConfig = buildReactiveConfig(entry);
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, x2, entry.y));
 
@@ -242,7 +244,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -321,7 +323,9 @@
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}
+		landsFor={setup?.landsFor ?? 0}
 		bandAxis={setup?.alignedBand ?? null}
+		grow={hasExplicitBounds ? null : 'x'}
 		inset={entry.inset ?? 0}
 		dx={entry.dx ?? 0}
 		dy={entry.dy ?? 0}

package/dist/components/marks/BarMarkY.svelte

@@ -41,6 +41,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		contributeDomain = undefined,
 		x,
 		y,
@@ -85,6 +86,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		contributeDomain: () => contributeDomain,
 		limit: () => limit,
 		padding: () => padding,
@@ -179,8 +181,8 @@
 
 	const reactiveConfig = buildReactiveConfig(entry);
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, y2, entry.x));
 
@@ -243,7 +245,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -322,7 +324,9 @@
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}
+		landsFor={setup?.landsFor ?? 0}
 		bandAxis={setup?.alignedBand ?? null}
+		grow={hasExplicitBounds ? null : 'y'}
 		inset={entry.inset ?? 0}
 		dx={entry.dx ?? 0}
 		dy={entry.dy ?? 0}

package/dist/components/marks/DotsMark.svelte

@@ -44,6 +44,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y,
 		fill = null,
@@ -84,6 +85,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -177,8 +179,8 @@
 		resolveFitDomain: () => resolvedFitAxis
 	});
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, entry.x, entry.y));
 
@@ -246,7 +248,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -316,6 +318,7 @@
 		sizeScaleIndex={markSize.sizeScaleIndex}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}
+		landsFor={setup?.landsFor ?? 0}
 		bandAxis={setup?.alignedBand ?? null}
 	/>
 {/if}