@fjader/svelte 0.2.2 → 0.2.3

package/dist/components/axes/BandAxisTicks.svelte

@@ -1,21 +1,25 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
 	import type { BandScaleState, BandTick } from '../../scales/BandScaleState.svelte';
+	import type { ChartContext } from '../../types';
+	import { categoryLabel } from '../../query-engine/categorical-identity';
+	import type { FilterGroupRegistry } from '../../query-engine/FilterGroupRegistry.svelte';
 
 	/**
 	 * The labels on a band axis, wherever that axis is drawn.
 	 *
 	 * Three components rendered this: AxisBottom, AxisLeft and AxisCenter. The
-	 * arithmetic was already shared — `tickPosition`, `tickOpacity` and
-	 * `isTickDimmed` all live on the scale — so what was actually duplicated
+	 * arithmetic was already shared — `tickPosition` and `tickOpacity` live on
+	 * the scale — so what was actually duplicated
 	 * was the markup around it, and what differs between the three is a handful
 	 * of numbers: which way the ticks point, how long they are, how far the
 	 * label sits, and where it anchors.
 	 *
 	 * Those are props here, so the structure is written once. The structure is
 	 * the part with the reasons attached: the keyed `{#each}` so a reorder
-	 * MOVES a label rather than replacing it, the opacity wrapper the scale
-	 * drives per frame so a label travels and fades with its bar, and the
-	 * dimming class inside it so a selection does not fight the transition.
+	 * MOVES a label rather than replacing it, and the opacity wrapper the scale
+	 * drives per frame so a label travels, enters, leaves and dims for a
+	 * selection with its bar, all on the scale's clocks.
 	 *
 	 * A band label is positioned through `tickPosition`, which reads the
 	 * category's CURRENT fractional slot, not through the d3 scale. The d3
@@ -54,26 +58,66 @@
 		textAnchor = 'middle'
 	}: Props = $props();
 
+	const chart = getContext<ChartContext | undefined>('chart');
+	const filterGroups = getContext<FilterGroupRegistry | undefined>('filter-groups');
+
+	/**
+	 * The filter groups whose selection the labels show: those of the chart's
+	 * marks. A selection dims the axis's marks in their own group, so a label
+	 * dims when any of those groups dims its category; a background mark in a
+	 * group with nothing selected changes nothing.
+	 */
+	const groups = $derived.by(() => {
+		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;
+			const index = filterGroups.get(entry.selection).index;
+			if (!indices.includes(index)) indices.push(index);
+		}
+		return indices;
+	});
+
+	/**
+	 * The field the axis's selection is kept under: its identity key, or its
+	 * column before. As for the legend, the two differ for a computed field,
+	 * so its labels briefly lose their dimming while a reload empties identity.
+	 */
+	const key = $derived(scale.identityKey ?? scale.sourceField);
+
+	/**
+	 * A label's opacity: the scale's own (travel, clipping) times its selection
+	 * fade. Read by id where the tick's key is one — the only way to reach an
+	 * Other bucket, whose label is not a value — and by value before identity.
+	 */
+	function opacityOf(tick: BandTick): number {
+		const selected = !filterGroups
+			? 1
+			: scale.hasIdentity
+				? filterGroups.opacityOfId(key, groups, tick.key)
+				: filterGroups.opacityOfValue(key, groups, tick.value);
+		return scale.tickOpacity(tick.key) * selected;
+	}
+
 	const tickEnd = $derived(base + dir * tickLength);
 	const labelAt = $derived(base + dir * labelGap);
 </script>
 
 {#each ticks as tick (tick.key)}
 	{@const pos = scale.tickPosition(tick.key, rangeSize, axis)}
-	<g opacity={scale.tickOpacity(tick.key)}>
-		<g class:tick-dimmed={scale.isTickDimmed(tick)}>
-			{#if axis === 'x'}
-				<line x1={pos} x2={pos} y1={base} y2={tickEnd} />
-				<text text-anchor={textAnchor} x={pos} y={labelAt}>
-					{tick.value}
-				</text>
-			{:else}
-				<line x1={base} x2={tickEnd} y1={pos} y2={pos} />
-				<text text-anchor={textAnchor} dominant-baseline="middle" x={labelAt} y={pos}>
-					{tick.value}
-				</text>
-			{/if}
-		</g>
+	<g opacity={opacityOf(tick)}>
+		{#if axis === 'x'}
+			<line x1={pos} x2={pos} y1={base} y2={tickEnd} />
+			<text text-anchor={textAnchor} x={pos} y={labelAt}>
+				{categoryLabel(tick.value)}
+			</text>
+		{:else}
+			<line x1={base} x2={tickEnd} y1={pos} y2={pos} />
+			<text text-anchor={textAnchor} dominant-baseline="middle" x={labelAt} y={pos}>
+				{categoryLabel(tick.value)}
+			</text>
+		{/if}
 	</g>
 {/each}
 
@@ -87,9 +131,4 @@
 		font-family: var(--fjader-font, system-ui, sans-serif);
 		font-size: 10px;
 	}
-
-	.tick-dimmed {
-		opacity: 0.25;
-		transition: opacity 0.15s ease;
-	}
 </style>

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

@@ -3,17 +3,17 @@ import type { BandScaleState, BandTick } from '../../scales/BandScaleState.svelt
  * The labels on a band axis, wherever that axis is drawn.
  *
  * Three components rendered this: AxisBottom, AxisLeft and AxisCenter. The
- * arithmetic was already shared — `tickPosition`, `tickOpacity` and
- * `isTickDimmed` all live on the scale — so what was actually duplicated
+ * arithmetic was already shared — `tickPosition` and `tickOpacity` live on
+ * the scale — so what was actually duplicated
  * was the markup around it, and what differs between the three is a handful
  * of numbers: which way the ticks point, how long they are, how far the
  * label sits, and where it anchors.
  *
  * Those are props here, so the structure is written once. The structure is
  * the part with the reasons attached: the keyed `{#each}` so a reorder
- * MOVES a label rather than replacing it, the opacity wrapper the scale
- * drives per frame so a label travels and fades with its bar, and the
- * dimming class inside it so a selection does not fight the transition.
+ * MOVES a label rather than replacing it, and the opacity wrapper the scale
+ * drives per frame so a label travels, enters, leaves and dims for a
+ * selection with its bar, all on the scale's clocks.
  *
  * A band label is positioned through `tickPosition`, which reads the
  * category's CURRENT fractional slot, not through the d3 scale. The d3

package/dist/components/charts/ChartContainer.svelte

@@ -13,6 +13,7 @@
 	import { identityKeyFor } from '../../query-engine/identity-key';
 	import { checkFacetCells } from './facet-limits';
 	import ChartCell from './ChartCell.svelte';
+	import { categoryLabel } from '../../query-engine/categorical-identity';
 
 	interface Props {
 		xLabel?: string | null;
@@ -481,7 +482,7 @@
 					<ChartCell
 						cellChartId={facetChartIds[i]}
 						facetIndex={i}
-						facetLabel={String(cat)}
+						facetLabel={String(categoryLabel(cat))}
 						margin={{ top: 20, right: 10, bottom: 35, left: 55 }}
 						{scales}
 						{chartConfig}

package/dist/components/guides/legend/ContinuousColorLegend.svelte

@@ -166,7 +166,8 @@
 
 	const brushHandle: SourceHandle | null = filterGroup
 		? filterGroup.register(sourceId, {
-				excludeMarkIds: () => new Set<string>(),
+				// No chart: an interval cannot dim, so the chart it sits in filters by
+				// it rather than showing nothing.
 				// The brush maps the bar linearly onto [min, max], whatever the color
 				// transform, so its pixel bins do too: barLength pixels over the domain.
 				activeDims: () =>

package/dist/components/guides/legend/OrdinalColorLegend.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { getContext, onDestroy } from 'svelte';
-	import type { ScaleRegistry } from '../../../scales/ScaleRegistry.svelte';
 	import type { ColorScaleState } from '../../../scales/ColorScaleState.svelte';
-	import type { ActiveValueScale } from '../../../query-engine/FilterGroup.svelte';
 	import type { FilterGroupRegistry } from '../../../query-engine/FilterGroupRegistry.svelte';
+	import type { ChartContext } from '../../../types';
+	import type { BandScaleState } from '../../../scales/BandScaleState.svelte';
+	import type { DimValue } from '../../../query-engine/categorical-identity';
+	import { categoryLabel } from '../../../query-engine/categorical-identity';
 
 	interface Props {
 		scaleState: ColorScaleState;
@@ -31,42 +33,102 @@
 
 	const filterGroups = getContext<FilterGroupRegistry | undefined>('filter-groups');
 	const filterGroup = filterGroups?.get(selection);
-	const scaleRegistry = getContext<ScaleRegistry>('scale-registry');
 
-	// Reactive: re-renders when domain or scheme changes
-	const items = $derived(
-		scaleState.domain.map((value) => ({
+	const chartContext = getContext<ChartContext | undefined>('chart');
+
+	/**
+	 * The chart's band axis on this legend's field, if it has one. The legend then
+	 * lists what that axis shows (a top N and its Other, a table's own categories)
+	 * rather than every category of the field, which is what the colour scale's
+	 * domain holds: it is shared per field across charts.
+	 */
+	const bandOnField = $derived.by(() => {
+		// Neither identityKey is reactive state, and both are null until identity
+		// lands, which is after this first runs: read the signals that change
+		// with them, or this stays null for good.
+		void scaleState.ranksRevision;
+		const key = scaleState.identityKey;
+		if (!chartContext || !key) return null;
+		for (const axis of ['x', 'y'] as const) {
+			const type = chartContext.scaleTypes?.[axis];
+			if (type !== 'band' && type !== 'point') continue;
+			const band = chartContext[`${axis}ScaleState`] as BandScaleState | null;
+			if (!band) continue;
+			void band._version;
+			if (band.identityKey === key) return band;
+		}
+		return null;
+	});
+
+	interface Item {
+		/** The category's dim id, when the legend follows a band axis. */
+		id: number | null;
+		value: DimValue;
+		color: string;
+		/** An Other bucket: shown, not clickable (it names no value). */
+		bucket: boolean;
+	}
+
+	// Reactive: re-renders when the domain, the axis or the palette ranks change.
+	const items = $derived.by((): Item[] => {
+		const band = bandOnField;
+		if (band) {
+			void band._version;
+			const ids = band.displayOrder;
+			const values = band.effectiveDomain;
+			const identity = scaleState.identity;
+			return Array.from(ids, (id, i) => ({
+				id,
+				value: values[i],
+				color: scaleState.getColor(values[i] as string | number | null),
+				bucket: identity?.synthetic.has(id) ?? false
+			}));
+		}
+		return scaleState.domain.map((value) => ({
+			id: null,
 			value,
-			color: scaleState.getColor(value)
-		}))
-	);
+			color: scaleState.getColor(value),
+			bucket: false
+		}));
+	});
 
 	// --- Toggle interaction ---
 	const isInteractive = $derived(filterGroup != null && field != null);
 
-	// Scales to dim: this color scale + any band scale for the same field.
-	// Projection itself is handled by FilterGroup, shared with Toggle/brushes.
-	function getLegendScaleStates(): ActiveValueScale[] {
-		const band = scaleRegistry?.getScaleByField(field!, 'band');
-		return [scaleState, band].filter(Boolean) as unknown as ActiveValueScale[];
+	/**
+	 * The field's identity key: what its selection is kept under. The scale's
+	 * own once it has identity; the field before, as the toggle keys it. For a
+	 * plain column the two are the same. For a computed field (an expression)
+	 * they differ, so while a reload empties the identity the legend reads the
+	 * selection under the field's name and its highlight is briefly lost.
+	 */
+	const key = $derived(scaleState.identityKey ?? field ?? scaleState.field);
+	const groups = $derived(filterGroup ? [filterGroup.index] : []);
+
+	/**
+	 * How visible an entry is now: its group's selection fade on the field, on
+	 * the same clock and with the same floor as the marks.
+	 */
+	function opacityOf(item: Item): number {
+		if (!filterGroups) return 1;
+		// By id where there is one: the only way to reach an Other bucket.
+		return item.id !== null
+			? filterGroups.opacityOfId(key, groups, item.id)
+			: filterGroups.opacityOfValue(key, groups, item.value);
 	}
 
 	// The selection is shared with any Toggle on the same field through its clause.
-	// A legend is not a chart, so it excludes no marks: every chart filters.
+	// A legend inside a chart skips that chart, as a Toggle there does: its marks
+	// keyed by the field dim, the rest keep their data. A standalone legend is in
+	// no chart, so every chart in its group is routed by its marks alone.
 	const toggle =
 		filterGroup && field
-			? filterGroup.registerToggle(field, {
-					excludeMarkIds: () => new Set<string>(),
-					scales: getLegendScaleStates
-				})
+			? filterGroup.registerToggle(field, { chart: chartContext?.config ?? null })
 			: null;
 	onDestroy(() => toggle?.destroy());
 
-	// Derive visual state from the toggle's selection
-	const selectedSet = $derived(toggle?.active ? toggle.values : null);
-
 	// Shift/meta-click adds or removes; selecting every value clears instead.
-	function handleClick(value: string | number, event: MouseEvent) {
+	function handleClick(value: DimValue, event: MouseEvent) {
 		toggle?.toggle([value], event.shiftKey || event.metaKey, scaleState.domain.length);
 	}
 </script>
@@ -85,11 +147,12 @@
 		class:legend-columns={columns}
 		class:legend-vertical={orientation === 'vertical'}
 	>
-		{#each items as { value, color } (value)}
-			{#if isInteractive}
+		{#each items as item (item.id ?? item.value)}
+			{@const { value, color } = item}
+			{#if isInteractive && !item.bucket}
 				<button
 					class="legend-item legend-item-interactive"
-					class:legend-item-dimmed={selectedSet != null && !selectedSet.has(value)}
+					style:opacity={opacityOf(item)}
 					onclick={(e) => handleClick(value, e)}
 				>
 					<span
@@ -99,10 +162,10 @@
 						style:height="{swatchSize}px"
 						style:border-radius="{swatchRadius}px"
 					></span>
-					<span class="legend-label">{value}</span>
+					<span class="legend-label">{categoryLabel(value)}</span>
 				</button>
 			{:else}
-				<span class="legend-item">
+				<span class="legend-item" style:opacity={opacityOf(item)}>
 					<span
 						class="legend-swatch"
 						style:background={color}
@@ -110,7 +173,7 @@
 						style:height="{swatchSize}px"
 						style:border-radius="{swatchRadius}px"
 					></span>
-					<span class="legend-label">{value}</span>
+					<span class="legend-label">{categoryLabel(value)}</span>
 				</span>
 			{/if}
 		{/each}
@@ -157,7 +220,6 @@
 		align-items: center;
 		gap: 4px;
 		white-space: nowrap;
-		transition: opacity 0.15s ease;
 	}
 
 	.legend-item-interactive {
@@ -170,10 +232,6 @@
 		color: inherit;
 	}
 
-	.legend-item-dimmed {
-		opacity: 0.2;
-	}
-
 	.legend-swatch {
 		display: inline-block;
 		flex-shrink: 0;

package/dist/components/marks/AreaMarkX.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { outlineColor } from './utils/area-outline';
 	import { getContext, onDestroy, untrack } from 'svelte';
 	import { MarkLifecycleV2 } from './lifecycle/MarkLifecycleV2.svelte';
 	import { Areas, Lines } from '../rendering';
@@ -46,6 +47,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		y,
 		x,
 		x1: x1Prop,
@@ -98,6 +100,7 @@
 		strokeWidth: () => strokeWidth,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -157,6 +160,9 @@
 		chartContext
 	);
 
+	/** The outline's colour, and the fill's activity it dims by (see area-outline.ts). */
+	const outline = $derived(outlineColor(entry.stroke, markColor));
+
 	// Detect if x2 is an aggregate expression
 	const hasAggregateX = $derived.by(() => {
 		return (
@@ -366,6 +372,7 @@
 			colorValueData={markColor.data}
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
+			groupIndex={setup?.groupIndex ?? 0}
 			constantColor={markColor.constantColor}
 			fillOpacity={entry.fillOpacity ?? 0.5}
 			dotRadius={effectiveDotRadius}
@@ -381,9 +388,12 @@
 				{yData}
 				{seriesData}
 				curve={effectiveCurve}
-				colorValueData={entry.stroke ? null : markColor.data}
-				colorMode={entry.stroke ? 0 : markColor.colorMode}
-				colorScaleIndex={entry.stroke ? 0 : markColor.colorScaleIndex}
+				colorValueData={outline.colorValueData}
+				colorMode={outline.colorMode}
+				colorScaleIndex={outline.colorScaleIndex}
+				activityColorMode={outline.activityColorMode}
+				activityColorScaleIndex={outline.activityColorScaleIndex}
+				groupIndex={setup?.groupIndex ?? 0}
 				constantColor={strokeConstantColor}
 				strokeWidth={entry.strokeWidth ?? 0}
 				zIndex={1}
@@ -396,9 +406,12 @@
 					{yData}
 					{seriesData}
 					curve={effectiveCurve}
-					colorValueData={entry.stroke ? null : markColor.data}
-					colorMode={entry.stroke ? 0 : markColor.colorMode}
-					colorScaleIndex={entry.stroke ? 0 : markColor.colorScaleIndex}
+					colorValueData={outline.colorValueData}
+					colorMode={outline.colorMode}
+					colorScaleIndex={outline.colorScaleIndex}
+					activityColorMode={outline.activityColorMode}
+					activityColorScaleIndex={outline.activityColorScaleIndex}
+					groupIndex={setup?.groupIndex ?? 0}
 					constantColor={strokeConstantColor}
 					strokeWidth={entry.strokeWidth ?? 0}
 					zIndex={1}

package/dist/components/marks/AreaMarkY.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { outlineColor } from './utils/area-outline';
 	import { getContext, onDestroy, untrack } from 'svelte';
 	import { MarkLifecycleV2 } from './lifecycle/MarkLifecycleV2.svelte';
 	import { Areas, Lines } from '../rendering';
@@ -46,6 +47,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		x,
 		y,
 		y1: y1Prop,
@@ -98,6 +100,7 @@
 		strokeWidth: () => strokeWidth,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -157,6 +160,9 @@
 		chartContext
 	);
 
+	/** The outline's colour, and the fill's activity it dims by (see area-outline.ts). */
+	const outline = $derived(outlineColor(entry.stroke, markColor));
+
 	// Detect if y2 is an aggregate expression (count, sum, mean, etc.)
 	const hasAggregateY = $derived.by(() => {
 		return (
@@ -366,6 +372,7 @@
 			colorValueData={markColor.data}
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
+			groupIndex={setup?.groupIndex ?? 0}
 			constantColor={markColor.constantColor}
 			fillOpacity={entry.fillOpacity ?? 0.5}
 			dotRadius={effectiveDotRadius}
@@ -381,9 +388,12 @@
 				yData={yTopData}
 				{seriesData}
 				curve={effectiveCurve}
-				colorValueData={entry.stroke ? null : markColor.data}
-				colorMode={entry.stroke ? 0 : markColor.colorMode}
-				colorScaleIndex={entry.stroke ? 0 : markColor.colorScaleIndex}
+				colorValueData={outline.colorValueData}
+				colorMode={outline.colorMode}
+				colorScaleIndex={outline.colorScaleIndex}
+				activityColorMode={outline.activityColorMode}
+				activityColorScaleIndex={outline.activityColorScaleIndex}
+				groupIndex={setup?.groupIndex ?? 0}
 				constantColor={strokeConstantColor}
 				strokeWidth={entry.strokeWidth ?? 0}
 				zIndex={1}
@@ -396,9 +406,12 @@
 					yData={yBottomData}
 					{seriesData}
 					curve={effectiveCurve}
-					colorValueData={entry.stroke ? null : markColor.data}
-					colorMode={entry.stroke ? 0 : markColor.colorMode}
-					colorScaleIndex={entry.stroke ? 0 : markColor.colorScaleIndex}
+					colorValueData={outline.colorValueData}
+					colorMode={outline.colorMode}
+					colorScaleIndex={outline.colorScaleIndex}
+					activityColorMode={outline.activityColorMode}
+					activityColorScaleIndex={outline.activityColorScaleIndex}
+					groupIndex={setup?.groupIndex ?? 0}
 					constantColor={strokeConstantColor}
 					strokeWidth={entry.strokeWidth ?? 0}
 					zIndex={1}

package/dist/components/marks/BarMarkX.svelte

@@ -40,6 +40,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		x,
 		x1: x1Prop,
 		x2: x2Prop,
@@ -81,6 +82,7 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		limit: () => limit,
 		padding: () => padding,
 		paddingInner: () => paddingInner,
@@ -303,6 +305,7 @@
 		alphaData={opacityData}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}

package/dist/components/marks/BarMarkY.svelte

@@ -39,6 +39,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		x,
 		y,
 		y1: y1Prop,
@@ -80,6 +81,7 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		limit: () => limit,
 		padding: () => padding,
 		paddingInner: () => paddingInner,
@@ -304,6 +306,7 @@
 		alphaData={opacityData}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}

package/dist/components/marks/DotsMark.svelte

@@ -42,6 +42,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		x,
 		y,
 		fill = null,
@@ -80,6 +81,7 @@
 		radiusRange: () => radiusRange,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -306,6 +308,7 @@
 		colorValueData={markColor.data}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		sizeMode={markSize.sizeMode}
 		sizeScaleIndex={markSize.sizeScaleIndex}

package/dist/components/marks/LineMark.svelte

@@ -70,6 +70,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		x,
 		y,
 		stroke = null,
@@ -122,6 +123,7 @@
 		dotRadius: () => dotRadius,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -570,6 +572,7 @@
 			colorValueData={markColor.data}
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
+			groupIndex={setup?.groupIndex ?? 0}
 			constantColor={markColor.constantColor}
 			strokeWidth={entry.strokeWidth ?? 2}
 			dotRadius={effectiveDotRadius}

package/dist/components/marks/ParallelCoordinatesMark.svelte

@@ -11,6 +11,7 @@
 </script>
 
 <script lang="ts">
+	import type { SelectionResponse } from '../rendering/activity-reads';
 	import { getContext, onDestroy, untrack } from 'svelte';
 	import { MarkLifecycleV2 } from './lifecycle/MarkLifecycleV2.svelte';
 	import { ParallelLines } from '../rendering';
@@ -31,6 +32,8 @@
 		strokeWidth?: number;
 		curve?: CurveType;
 		selection?: string;
+		/** How this mark responds to selections in its group (see BaseMarkProps). */
+		selectionResponse?: SelectionResponse;
 		transforms?: Transform[];
 	}
 
@@ -43,6 +46,7 @@
 		strokeWidth = 2,
 		curve = 'linear',
 		selection = undefined,
+		selectionResponse = undefined,
 		transforms = []
 	}: Props = $props();
 
@@ -59,6 +63,7 @@
 		stroke: () => stroke,
 		scheme: () => scheme,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		transforms: () => transforms
 	});
 
@@ -188,6 +193,7 @@
 		colorValueData={markColor.data}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		axisOrder={currentAxisOrder}
 		axisScaleIds={currentScaleIds}

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

@@ -9,6 +9,7 @@
 export declare const parallelParity: {
     reverseScales: boolean;
 };
+import type { SelectionResponse } from '../rendering/activity-reads';
 import type { FieldRef, ColorScheme, CurveType, Transform } from '../../types';
 interface Props {
     table: string;
@@ -19,6 +20,8 @@ interface Props {
     strokeWidth?: number;
     curve?: CurveType;
     selection?: string;
+    /** How this mark responds to selections in its group (see BaseMarkProps). */
+    selectionResponse?: SelectionResponse;
     transforms?: Transform[];
 }
 declare const ParallelCoordinatesMark: import("svelte").Component<Props, {}, "">;