@fjader/svelte 0.2.4 → 0.2.5

package/dist/components/marks/LineMark.svelte

@@ -72,6 +72,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y,
 		stroke = null,
@@ -126,6 +127,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -148,16 +150,16 @@
 		inferMarkScaleType(entry.y, entry.table, entry.preferredYScaleType)
 	);
 
-	// Series grouping: z overrides stroke for grouping. A selection dims a line
-	// by its stroke colour only; dimming by a separate z field is not supported
-	// yet (see activityReads in activity-reads.ts).
+	// Series grouping: z overrides stroke for grouping. A selection on either
+	// field dims the line (see activityReads in activity-reads.ts).
 	const seriesChannelKey = entry.z != null ? 'z' : 'stroke';
 	const markSeries = new MarkSeries(
 		() => entry.z ?? entry.stroke,
 		seriesChannelKey,
 		() => setup,
 		scaleRegistry,
-		chartContext
+		chartContext,
+		() => markColor.scaleState
 	);
 
 	// Color: stroke determines line color — reads from entry
@@ -232,8 +234,8 @@
 		resolveFitDomain: () => (_isOverlay ? undefined : 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));
 
@@ -268,8 +270,7 @@
 		// changes via setRungParam (LOD window size adjustments should re-query,
 		// not recreate the lifecycle).
 		void channelSelect;
-		void xScaleId;
-		void yScaleId;
+		void scaleGeneration;
 		void effectiveXScaleType;
 		void effectiveYScaleType;
 		untrack(() => {
@@ -577,6 +578,8 @@
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
 			groupIndex={setup?.groupIndex ?? 0}
+			activitySeriesMode={markSeries.activityMode}
+			activitySeriesScaleIndex={markSeries.activityScaleIndex}
 			constantColor={markColor.constantColor}
 			strokeWidth={entry.strokeWidth ?? 2}
 			dotRadius={effectiveDotRadius}

package/dist/components/marks/ParallelCoordinatesMark.svelte

@@ -36,6 +36,8 @@
 		/** How this mark responds to selections in its group (see BaseMarkProps). */
 		selectionResponse?: SelectionResponse;
 		nulls?: NullsResponse;
+		/** Whether the chart's entrance waits for this mark (see BaseMarkProps). */
+		holdsEntrance?: boolean;
 		transforms?: Transform[];
 	}
 
@@ -50,6 +52,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		transforms = []
 	}: Props = $props();
 
@@ -68,6 +71,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		transforms: () => transforms
 	});
 
@@ -120,12 +124,13 @@
 
 	const reactiveConfig = buildReactiveConfig(entry);
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	// --- SETUP LIFECYCLE ---
 	$effect(() => {
 		void config;
-		void xScaleId;
+		void scaleGeneration;
 		untrack(() => {
 			setup?.destroy();
 			setup = null;

package/dist/components/marks/ParallelCoordinatesMark.svelte.d.ts

@@ -24,6 +24,8 @@ interface Props {
     /** How this mark responds to selections in its group (see BaseMarkProps). */
     selectionResponse?: SelectionResponse;
     nulls?: NullsResponse;
+    /** Whether the chart's entrance waits for this mark (see BaseMarkProps). */
+    holdsEntrance?: boolean;
     transforms?: Transform[];
 }
 declare const ParallelCoordinatesMark: import("svelte").Component<Props, {}, "">;

package/dist/components/marks/RectMark.svelte

@@ -49,6 +49,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		x = null,
 		x1: x1Prop = null,
 		x2: x2Prop = null,
@@ -99,6 +100,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -213,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));
 
@@ -299,7 +301,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -368,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

@@ -49,6 +49,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		x1: x1Prop,
 		x2: x2Prop,
@@ -94,6 +95,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredYScaleType: () => preferredYScaleType,
 		fitDomain: () => fitDomain,
@@ -205,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));
 
@@ -283,7 +285,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -359,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

@@ -50,6 +50,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		x = null,
 		x1: x1Prop = null,
 		x2: x2Prop = null,
@@ -96,6 +97,7 @@
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
 		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		fitDomain: () => fitDomain,
@@ -211,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));
 
@@ -289,7 +291,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -366,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

@@ -37,6 +37,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y: yShorthand = undefined,
 		y1: y1Prop = undefined,
@@ -112,28 +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,
-			nulls: () => nulls,
-			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(() => {
@@ -191,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));
 
@@ -242,7 +246,7 @@
 
 	$effect(() => {
 		if (!config) return;
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -291,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

@@ -37,6 +37,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		y,
 		x: xShorthand = undefined,
 		x1: x1Prop = undefined,
@@ -110,28 +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,
-			nulls: () => nulls,
-			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 {};
@@ -187,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));
 
@@ -238,7 +242,7 @@
 
 	$effect(() => {
 		if (!config) return;
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -287,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';
@@ -44,6 +50,7 @@
 		selection = undefined,
 		selectionResponse = undefined,
 		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y,
 		text,
@@ -70,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');
 
@@ -135,6 +149,9 @@
 		get nulls() {
 			return nulls;
 		},
+		get holdsEntrance() {
+			return holdsEntrance;
+		},
 		get limit() {
 			return limit;
 		},
@@ -149,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));
 
@@ -429,7 +446,7 @@
 	// --- Setup Lifecycle ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			setup?.destroy();
 			setup = null;
@@ -473,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]}
 			<!--
@@ -513,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

@@ -96,6 +96,7 @@ export interface ReactiveConfig {
     readonly selectionResponse: SelectionResponse | undefined;
     readonly nulls: NullsResponse | undefined;
     readonly contributeDomain: boolean | undefined;
+    readonly holdsEntrance: boolean | undefined;
 }
 export declare class MarkLifecycleV2 {
     #private;
@@ -120,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
@@ -144,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;