@fjader/svelte 0.2.3 → 0.2.5

package/dist/components/marks/RectMark.svelte

@@ -48,6 +48,8 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		x = null,
 		x1: x1Prop = null,
 		x2: x2Prop = null,
@@ -97,6 +99,8 @@
 		transforms: () => transforms,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -211,8 +215,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));
 
@@ -297,7 +301,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -366,6 +370,7 @@
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}
+		landsFor={setup?.landsFor ?? 0}
 		bandAxis={null}
 		inset={entry.inset ?? 0.5}
 		dx={entry.dx ?? 0}

package/dist/components/marks/RectXMark.svelte

@@ -48,6 +48,8 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		x1: x1Prop,
 		x2: x2Prop,
@@ -92,6 +94,8 @@
 		transforms: () => transforms,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredYScaleType: () => preferredYScaleType,
 		fitDomain: () => fitDomain,
@@ -203,8 +207,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, x2));
 
@@ -281,7 +285,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -357,7 +361,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.5}
 		dx={entry.dx ?? 0}
 		dy={entry.dy ?? 0}

package/dist/components/marks/RectYMark.svelte

@@ -49,6 +49,8 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		x = null,
 		x1: x1Prop = null,
 		x2: x2Prop = null,
@@ -94,6 +96,8 @@
 		transforms: () => transforms,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		fitDomain: () => fitDomain,
@@ -209,8 +213,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, y2));
 
@@ -287,7 +291,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -364,7 +368,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.5}
 		dx={entry.dx ?? 0}
 		dy={entry.dy ?? 0}

package/dist/components/marks/RuleMarkX.svelte

@@ -36,6 +36,8 @@
 		table = undefined,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y: yShorthand = undefined,
 		y1: y1Prop = undefined,
@@ -111,27 +113,31 @@
 	);
 
 	// --- ChartConfig registration (data-driven only) ---
-	const entry = $derived.by(() => {
-		if (!table) return null;
-		return chartContext.config.registerMark(markId, 'rulex', {
-			table: () => table,
-			x: () => x,
-			y1: () => y1,
-			y2: () => y2,
-			stroke: () => stroke,
-			scheme: () => scheme,
-			opacity: () => opacity,
-			transforms: () => transforms,
-			selection: () => selection,
-			selectionResponse: () => selectionResponse,
-			limit: () => limit,
-			sort: () => sort,
-			domain: () => domain,
-			tooltip: () => tooltip,
-			tip: () => tip,
-			fitDomain: () => fitDomain
-		});
-	});
+	// Registered once, at mount, like every other mark. Not in a $derived:
+	// registering writes the config's map, and a derived must not write state.
+	// A rule without a table draws constants and has no config entry.
+	const entry = untrack(() => table)
+		? chartContext.config.registerMark(markId, 'rulex', {
+				table: () => table,
+				x: () => x,
+				y1: () => y1,
+				y2: () => y2,
+				stroke: () => stroke,
+				scheme: () => scheme,
+				opacity: () => opacity,
+				transforms: () => transforms,
+				selection: () => selection,
+				selectionResponse: () => selectionResponse,
+				nulls: () => nulls,
+				holdsEntrance: () => holdsEntrance,
+				limit: () => limit,
+				sort: () => sort,
+				domain: () => domain,
+				tooltip: () => tooltip,
+				tip: () => tip,
+				fitDomain: () => fitDomain
+			})
+		: null;
 
 	// Config for MarkLifecycle
 	const channelSelect = $derived.by(() => {
@@ -189,8 +195,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, x));
 
@@ -240,7 +246,7 @@
 
 	$effect(() => {
 		if (!config) return;
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -289,7 +295,7 @@
 
 	onDestroy(() => {
 		setup?.destroy();
-		if (table) chartContext.config.unregisterMark(markId);
+		if (entry) chartContext.config.unregisterMark(markId);
 		gpuCoordinator?.releaseRetained(markId);
 	});
 </script>

package/dist/components/marks/RuleMarkY.svelte

@@ -36,6 +36,8 @@
 		table = undefined,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		y,
 		x: xShorthand = undefined,
 		x1: x1Prop = undefined,
@@ -109,27 +111,31 @@
 	);
 
 	// --- ChartConfig registration (data-driven only) ---
-	const entry = $derived.by(() => {
-		if (!table) return null;
-		return chartContext.config.registerMark(markId, 'ruley', {
-			table: () => table,
-			y: () => y,
-			x1: () => x1,
-			x2: () => x2,
-			stroke: () => stroke,
-			scheme: () => scheme,
-			opacity: () => opacity,
-			transforms: () => transforms,
-			selection: () => selection,
-			selectionResponse: () => selectionResponse,
-			limit: () => limit,
-			sort: () => sort,
-			domain: () => domain,
-			tooltip: () => tooltip,
-			tip: () => tip,
-			fitDomain: () => fitDomain
-		});
-	});
+	// Registered once, at mount, like every other mark. Not in a $derived:
+	// registering writes the config's map, and a derived must not write state.
+	// A rule without a table draws constants and has no config entry.
+	const entry = untrack(() => table)
+		? chartContext.config.registerMark(markId, 'ruley', {
+				table: () => table,
+				y: () => y,
+				x1: () => x1,
+				x2: () => x2,
+				stroke: () => stroke,
+				scheme: () => scheme,
+				opacity: () => opacity,
+				transforms: () => transforms,
+				selection: () => selection,
+				selectionResponse: () => selectionResponse,
+				nulls: () => nulls,
+				holdsEntrance: () => holdsEntrance,
+				limit: () => limit,
+				sort: () => sort,
+				domain: () => domain,
+				tooltip: () => tooltip,
+				tip: () => tip,
+				fitDomain: () => fitDomain
+			})
+		: null;
 
 	const channelSelect = $derived.by(() => {
 		if (!entry) return {};
@@ -185,8 +191,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, y));
 
@@ -236,7 +242,7 @@
 
 	$effect(() => {
 		if (!config) return;
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -285,7 +291,7 @@
 
 	onDestroy(() => {
 		setup?.destroy();
-		if (table) chartContext.config.unregisterMark(markId);
+		if (entry) chartContext.config.unregisterMark(markId);
 		gpuCoordinator?.releaseRetained(markId);
 	});
 </script>

package/dist/components/marks/TextMark.svelte

@@ -15,7 +15,13 @@
 		resolveTip
 	} from './utils';
 	import { buildReactiveConfig } from './utils/reactive-config';
-	import type { FieldRef, BaseMarkProps, ContinuousScaleTypeProps, ChartContext } from '../../types';
+	import type {
+		FieldRef,
+		BaseMarkProps,
+		ContinuousScaleTypeProps,
+		ChartContext,
+		EntranceMode
+	} from '../../types';
 	import type { ScaleRegistry } from '../../scales/ScaleRegistry.svelte';
 	import type { QueryEngine } from '../../query-engine/QueryEngine';
 	import type { FilterGroupRegistry } from '../../query-engine/FilterGroupRegistry.svelte';
@@ -43,6 +49,8 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y,
 		text,
@@ -69,8 +77,15 @@
 	}: Props = $props();
 
 	const markId = generateMarkId('text');
+	// Held from mount, as other marks do in ChartConfig.registerMark: TextMark
+	// has no config entry, and its lifecycle is built later.
+	if (untrack(() => table) && untrack(() => holdsEntrance) !== false) {
+		getContext<ChartContext>('chart').config?.entrance.hold(markId);
+	}
 	const queryEngine = getContext<QueryEngine>('query-engine');
 	const chartContext = getContext<ChartContext>('chart');
+	// Read once: the entrance happens when the labels first mount.
+	const entrance = chartContext.config?.chartProps?.entrance as EntranceMode | undefined;
 	const filterGroups = getContext<FilterGroupRegistry>('filter-groups');
 	const scaleRegistry = getContext<ScaleRegistry>('scale-registry');
 
@@ -131,6 +146,12 @@
 		get selectionResponse() {
 			return selectionResponse;
 		},
+		get nulls() {
+			return nulls;
+		},
+		get holdsEntrance() {
+			return holdsEntrance;
+		},
 		get limit() {
 			return limit;
 		},
@@ -145,8 +166,8 @@
 		}
 	});
 
-	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, x, y));
 
@@ -387,17 +408,12 @@
 		// range: a label off the left edge, or below the axis, where the shader
 		// discards the bar it belongs to. The GPU states this discard explicitly
 		// rather than leaving it to the scissor rect, and so does this.
-		const slotted = (
-			band: BandScaleState,
-			raw: string | number,
-			range: number,
-			axis: 'x' | 'y'
-		) => {
+		const slotted = (band: BandScaleState, raw: string | number, range: number) => {
 			const key = bandSlotKey(band, raw);
 			if (key == null) return null;
 			// Asked once and handed on: tickPosition would look it up again.
 			const slot = band.tickSlot(key);
-			return slot < 0 ? null : band.slotPosition(slot, range, axis);
+			return slot < 0 ? null : band.slotPosition(slot, range);
 		};
 
 		const newPos = new Array(items.length);
@@ -406,13 +422,13 @@
 			let px, py;
 
 			if (xBand) {
-				px = slotted(xBand, xRaw[dataIdx], rangeX, 'x');
+				px = slotted(xBand, xRaw[dataIdx], rangeX);
 			} else {
 				px = xScale(xRaw[dataIdx]);
 			}
 
 			if (yBand) {
-				py = slotted(yBand, yRaw[dataIdx], rangeY, 'y');
+				py = slotted(yBand, yRaw[dataIdx], rangeY);
 			} else {
 				py = yScale(yRaw[dataIdx]);
 			}
@@ -430,7 +446,7 @@
 	// --- Setup Lifecycle ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			setup?.destroy();
 			setup = null;
@@ -474,11 +490,17 @@
 
 	onDestroy(() => {
 		setup?.destroy();
+		// No config entry to unregister, which is where other marks release it.
+		chartContext.config?.entrance.release(markId);
 	});
 </script>
 
 {#if (setup?.gpuReady || !table) && markColor.ready && labelItems.length > 0}
-	<g class="text-mark" class:text-mark-hidden={useFadeMode && scalesAnimating}>
+	<g
+		class="text-mark"
+		class:text-mark-hidden={useFadeMode && scalesAnimating}
+		class:text-mark-enter={entrance !== 'none'}
+	>
 		{#each labelItems as item, i (item.idx)}
 			{@const pos = positions[i]}
 			<!--
@@ -514,4 +536,20 @@
 	.text-mark-hidden {
 		opacity: 0;
 	}
+
+	/*
+	 * The chart's entrance, for SVG labels: a fade, never motion, so it is the
+	 * same under reduced motion. Labels sit at their final positions, so on
+	 * growing bars they arrive as the bars reach them rather than ahead.
+	 */
+	.text-mark-enter {
+		/* The chart's fade: a soft S-curve over about 0.45s (ENTRANCE_FADE_STIFFNESS). */
+		animation: text-mark-enter 450ms ease-in-out;
+	}
+
+	@keyframes text-mark-enter {
+		from {
+			opacity: 0;
+		}
+	}
 </style>

package/dist/components/marks/lifecycle/MarkLifecycleV2.svelte.d.ts

@@ -19,7 +19,7 @@
  */
 import type { ScaleRequirement } from '../../../scales/ScalePriorities';
 import type { DataAccessor } from '../../../data/DataAccessor';
-import type { FieldRef, NormalizedSortConfig, Transform, ChartContext } from '../../../types';
+import type { FieldRef, NormalizedSortConfig, Transform, ChartContext, NullsResponse } from '../../../types';
 import type { ColorScaleState } from '../../../scales/ColorScaleState.svelte';
 import type { SizeScaleState } from '../../../scales/SizeScaleState.svelte';
 import type { QueryEngine } from '../../../query-engine/QueryEngine';
@@ -27,6 +27,7 @@ import type { FilterGroup } from '../../../query-engine/FilterGroup.svelte';
 import { type SelectionResponse } from '../../rendering/activity-reads';
 import type { MarkLODSurface } from '../../../lod/rung-types';
 import type { GPUCoordinator } from '../../../gpu/GPUCoordinator.svelte';
+import { OtherRows } from './other-rows.svelte';
 export interface MarkLifecycleV2Config {
     markType: string;
     supportedScaleTypes: {
@@ -93,6 +94,9 @@ export interface ReactiveConfig {
     readonly fitDomain: 'x' | 'y' | boolean | undefined;
     readonly tip: (unknown | '*')[] | false | undefined;
     readonly selectionResponse: SelectionResponse | undefined;
+    readonly nulls: NullsResponse | undefined;
+    readonly contributeDomain: boolean | undefined;
+    readonly holdsEntrance: boolean | undefined;
 }
 export declare class MarkLifecycleV2 {
     #private;
@@ -101,6 +105,8 @@ export declare class MarkLifecycleV2 {
         gpuCoordinator?: GPUCoordinator | null;
         onMarkLOD?: ((surface: MarkLODSurface | null) => void) | null;
     });
+    /** What this mark's Other rows hold, and what is done with it. */
+    readonly otherRows: OtherRows;
     /**
      * The axis whose rows are one per category, in category order — or null.
      *
@@ -115,6 +121,11 @@ export declare class MarkLifecycleV2 {
      * never mixed, the other axis's channels morph, and the band scale owns the
      * clock both run on.
      *
+     * A histogram's binned axis aligns too: one row per bin, in bin order. Its
+     * channels are bin edges rather than ids, still never mixed, and with no
+     * slot clock on a linear scale the mark's channels run on a clock of their
+     * own.
+     *
      * The first channel of the transforms' alignment — `dense()`'s plan, over the
      * same select and facts its `apply()` sees — so the conditions are written
      * once. Derived rather than recorded at apply time: apply runs for every
@@ -139,6 +150,16 @@ export declare class MarkLifecycleV2 {
      * MarkConstants to read its group's run of each field's activity block.
      */
     get groupIndex(): number;
+    /**
+     * The data version that lands without animating, or 0: a catch-up result
+     * (the chart came back into view stale), a change nobody just made. A
+     * version, not a flag: the cause stays set until the next result, and a
+     * renderer lands only its FIRST write of this version. Later writes of the
+     * same data (an Other split on a click, a JS transform's parameter) are
+     * changes someone just made, and animate. Reactive through `dataVersion`,
+     * which the cause is set with.
+     */
+    get landsFor(): number;
     get dataVersion(): number;
     get hasCategoryReducingTransforms(): boolean;
     data: DataAccessor | null;