@fjader/svelte 0.2.2 → 0.2.4

package/dist/components/marks/utils/reactive-config.d.ts

@@ -12,6 +12,6 @@ import type { MarkEntry } from '../../../config/ChartConfig.svelte';
  * @param entry - The mark entry (reactive props from ChartConfig)
  * @param opts.resolveFitDomain - Getter for resolved fitDomain (deferred read)
  */
-export declare function buildReactiveConfig(entry: Partial<Pick<MarkEntry, 'sort' | 'limit' | 'domain' | 'tooltip' | 'tip' | 'fitDomain'>>, opts?: {
+export declare function buildReactiveConfig(entry: Partial<Pick<MarkEntry, 'sort' | 'limit' | 'domain' | 'tooltip' | 'tip' | 'fitDomain' | 'selectionResponse' | 'nulls' | 'contributeDomain'>>, opts?: {
     resolveFitDomain?: () => 'x' | 'y' | boolean | undefined;
 }): ReactiveConfig;

package/dist/components/marks/utils/reactive-config.js

@@ -30,6 +30,15 @@ export function buildReactiveConfig(entry, opts) {
         },
         get tip() {
             return entry.tip;
+        },
+        get selectionResponse() {
+            return entry.selectionResponse;
+        },
+        get nulls() {
+            return entry.nulls;
+        },
+        get contributeDomain() {
+            return entry.contributeDomain;
         }
     };
 }

package/dist/components/marks/utils/tooltip-helpers.d.ts

@@ -1,3 +1,4 @@
+import type { OtherRowStats } from '../lifecycle/other-rows.svelte';
 import type { ChartContext } from '../../../types';
 import type { ColorScaleState } from '../../../scales/ColorScaleState.svelte';
 import type { DimValue } from '../../../query-engine/categorical-identity';
@@ -34,6 +35,7 @@ interface TooltipConfigParams {
     constantRadius?: number;
     sizeScaleState?: SizeScaleState | null;
     displayFields?: string[] | null;
+    otherStats?: TooltipConfig['otherStats'];
 }
 interface TooltipConfig {
     tempTable: string;
@@ -61,7 +63,8 @@ interface TooltipConfig {
     constantRadius?: number;
     sizeScaleState?: SizeScaleState | null;
     displayFields?: string[] | null;
+    otherStats?: (point: Record<string, unknown>) => OtherRowStats | null;
     enabled: boolean;
 }
-export declare function buildTooltipConfig({ tempTable, markType, chartContext, channelFields, columns, bandAxes, colorColumn, markColor, seriesColumn, markSeries, proximityAxis, constantRadius, sizeScaleState, displayFields }: TooltipConfigParams): TooltipConfig;
+export declare function buildTooltipConfig({ tempTable, markType, chartContext, channelFields, columns, bandAxes, colorColumn, markColor, seriesColumn, markSeries, proximityAxis, constantRadius, sizeScaleState, displayFields, otherStats }: TooltipConfigParams): TooltipConfig;
 export {};

package/dist/components/marks/utils/tooltip-helpers.js

@@ -1,4 +1,4 @@
-export function buildTooltipConfig({ tempTable, markType, chartContext, channelFields, columns, bandAxes, colorColumn, markColor, seriesColumn, markSeries, proximityAxis, constantRadius, sizeScaleState, displayFields }) {
+export function buildTooltipConfig({ tempTable, markType, chartContext, channelFields, columns, bandAxes, colorColumn, markColor, seriesColumn, markSeries, proximityAxis, constantRadius, sizeScaleState, displayFields, otherStats }) {
     const colorScaleState = markColor.scaleState;
     const constantColor = markColor.constantCssColor;
     return {
@@ -33,6 +33,7 @@ export function buildTooltipConfig({ tempTable, markType, chartContext, channelF
         ...(constantRadius != null && { constantRadius }),
         ...(sizeScaleState && { sizeScaleState }),
         ...(displayFields && { displayFields }),
+        ...(otherStats && { otherStats }),
         enabled: true
     };
 }

package/dist/components/rendering/Areas.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { activityReads, colorActivityWGSL } from './activity-reads';
+	import { UNIFORM_BYTES } from './uniform-sizes';
 	import { getContext, onMount, onDestroy } from 'svelte';
 	import { RendererHost } from './RendererHost.svelte';
 	import { getGPUContext } from '../../gpu';
@@ -25,7 +27,7 @@
 		FACET: 6
 	};
 
-	// Uniform struct offsets (matching WGSL MarkConstants layout, 48 bytes)
+	// Uniform struct offsets (matching WGSL MarkConstants; size in uniform-sizes.ts)
 	const UNIFORM_OFFSETS = {
 		POINT_COUNT: 0, // u32
 		COLOR_MODE: 4, // u32
@@ -35,7 +37,8 @@
 		FILL_OPACITY: 32, // f32
 		DOT_RADIUS: 36, // f32
 		SHOW_BOTTOM_DOTS: 40, // u32 (0 or 1)
-		FULL_DOMAIN_SPAN: 44 // f32
+		FULL_DOMAIN_SPAN: 44, // f32
+		GROUP_INDEX: 48 // u32
 	};
 
 	interface Props {
@@ -55,6 +58,8 @@
 		orientation?: 'vertical' | 'horizontal';
 		colorMode?: number;
 		colorScaleIndex?: number;
+		/** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
+		groupIndex?: number;
 		constantColor?: [number, number, number, number];
 		markId?: string;
 	}
@@ -76,6 +81,7 @@
 		orientation = 'vertical',
 		colorMode = 0,
 		colorScaleIndex = 0,
+		groupIndex = 0,
 		constantColor = DEFAULT_FILL_COLOR,
 		markId = ''
 	}: Props = $props();
@@ -87,6 +93,9 @@
 	const baseMarkType = curve === 'linear' ? 'areas' : `areas-${curve}`;
 	const effectiveMarkType = faceted ? `${baseMarkType}-faceted` : baseMarkType;
 
+	/** The selection activity this shader reads; routing reads the same table. */
+	const ACTIVITY_READS = activityReads('areas');
+
 	// --- Facet compile-time specialization ---
 	// Areas uses a storage buffer (not a vertex attribute) for facet indices because
 	// the boundary check needs random access: facetIndices[nextIdx] to detect when
@@ -141,7 +150,11 @@
     fillOpacity: f32,
     dotRadius: f32,
     showBottomDots: u32,
-    fullDomainSpan: f32
+    fullDomainSpan: f32,
+    groupIndex: u32, // Page-wide filter group index, for activity reads
+    _pad0: u32,
+    _pad1: u32,
+    _pad2: u32
   };
   @group(1) @binding(5) var<uniform> markConstants: MarkConstants;
 
@@ -241,7 +254,12 @@
       var output: VertexOutput;
       output.position = pixelsToClip(pos);
       output.colorValue = colorValues[instanceIdx];
-      output.alpha = 1.0;
+      output.alpha = selectionDim(
+        ${colorActivityWGSL(ACTIVITY_READS, {
+					color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValues[instanceIdx]',
+					group: 'markConstants.groupIndex'
+				})}
+      );
       output.circleUV = quadCorner;
       output.circleRadius = circleR;
       return output;
@@ -341,7 +359,12 @@
     var output: VertexOutput;
     output.position = pixelsToClip(finalPos);
     output.colorValue = colorValues[currIdx];
-    output.alpha = markConstants.fillOpacity;
+    output.alpha = markConstants.fillOpacity * selectionDim(
+      ${colorActivityWGSL(ACTIVITY_READS, {
+				color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValues[currIdx]',
+				group: 'markConstants.groupIndex'
+			})}
+    );
     output.circleUV = vec2<f32>(-2.0, -2.0);
     output.circleRadius = 0.0;
     return output;
@@ -440,13 +463,14 @@
 			// re-fires once data loads.
 			if (colorMode === 1 && !colorValueData) return;
 
-			const buffer = new ArrayBuffer(48);
+			const buffer = new ArrayBuffer(UNIFORM_BYTES.areasMarkConstants);
 			const view = new DataView(buffer);
 			const LE = true;
 
 			view.setUint32(UNIFORM_OFFSETS.POINT_COUNT, dimData ? dimData.length : 0, LE);
 			view.setUint32(UNIFORM_OFFSETS.COLOR_MODE, colorMode, LE);
 			view.setUint32(UNIFORM_OFFSETS.COLOR_SCALE_INDEX, colorScaleIndex, LE);
+			view.setUint32(UNIFORM_OFFSETS.GROUP_INDEX, groupIndex, LE);
 			view.setUint32(UNIFORM_OFFSETS.ORIENTATION, orientation === 'horizontal' ? 1 : 0, LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 0, constantColor[0], LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 4, constantColor[1], LE);

package/dist/components/rendering/Areas.svelte.d.ts

@@ -16,6 +16,8 @@ interface Props {
     orientation?: 'vertical' | 'horizontal';
     colorMode?: number;
     colorScaleIndex?: number;
+    /** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
+    groupIndex?: number;
     constantColor?: [number, number, number, number];
     markId?: string;
 }

package/dist/components/rendering/BaseGPURenderer.svelte.d.ts

@@ -57,7 +57,9 @@ export declare class BaseGPURenderer {
      * the band axis's scale is whose clock these channels adopt. See
      * MorphedChannels for the fold, the snap and the clock.
      */
-    writeMorphed(bandAxis: 'x' | 'y', bandIds: ArrayLike<number>, channels: readonly (readonly [number, AllowSharedBufferSource])[]): void;
+    writeMorphed(bandAxis: 'x' | 'y', bandIds: ArrayLike<number>, channels: readonly (readonly [number, AllowSharedBufferSource])[], 
+    /** Bindings that land at once rather than travel (see MorphedChannels.write). */
+    land?: readonly number[]): void;
     /**
      * Write data to a uniform binding.
      */

package/dist/components/rendering/BaseGPURenderer.svelte.js

@@ -1,3 +1,4 @@
+import { UNIFORM_STAND_IN_BYTES } from './uniform-sizes';
 import { MorphedChannels } from '../../gpu/MorphedChannels';
 /** Warned once per page, not per mark. */
 let warnedMorphUnsupported = false;
@@ -241,7 +242,9 @@ export class BaseGPURenderer {
      * the band axis's scale is whose clock these channels adopt. See
      * MorphedChannels for the fold, the snap and the clock.
      */
-    writeMorphed(bandAxis, bandIds, channels) {
+    writeMorphed(bandAxis, bandIds, channels, 
+    /** Bindings that land at once rather than travel (see MorphedChannels.write). */
+    land) {
         if (!this.#device)
             return;
         if (!MorphedChannels.supported) {
@@ -282,7 +285,7 @@ export class BaseGPURenderer {
             }
         }
         this.#morphAxis = bandAxis;
-        if (this.#morphed.write(bandIds, channels) || rebind) {
+        if (this.#morphed.write(bandIds, channels, land) || rebind) {
             this.#scheduleBindGroupUpdate();
         }
         else if (!this.#bindGroupUpdateScheduled) {
@@ -385,7 +388,9 @@ export class BaseGPURenderer {
     get #sharedDummyBuffer() {
         if (!this.#dummyBuffer) {
             this.#dummyBuffer = this.#device.createBuffer({
-                size: 48, // Must fit the largest uniform struct (e.g. Rects MarkConstants = 48 bytes)
+                // Bound to any binding not written yet, uniforms included: as large as
+                // the largest uniform struct, or a draw before the first write fails.
+                size: UNIFORM_STAND_IN_BYTES,
                 usage: GPUBufferUsage.STORAGE | GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
                 label: `${this.#markType}-dummy`
             });

package/dist/components/rendering/Dots.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+	import { UNIFORM_BYTES } from './uniform-sizes';
 	import { getContext, onMount, onDestroy } from 'svelte';
 	import { RendererHost } from './RendererHost.svelte';
 	import { getGPUContext } from '../../gpu';
 	import { DEFAULT_STROKE_COLOR } from '../../scales/color-utils';
 	import type { ChartContext, WebGPUCanvasContext } from '../../types';
+	import { activityReads, markActivityWGSL } from './activity-reads';
 
 	const dotRendererDefinition = {
 		x: { concept: 'position', channels: ['x'] },
@@ -29,7 +31,8 @@
 		COLOR_SCALE_INDEX: 4,
 		SIZE_MODE: 8,
 		SIZE_SCALE_INDEX: 12,
-		CONSTANT_COLOR: 16
+		CONSTANT_COLOR: 16,
+		GROUP_INDEX: 32
 	};
 
 	interface Props {
@@ -43,6 +46,8 @@
 		zIndex?: number;
 		colorMode?: number;
 		colorScaleIndex?: number;
+		/** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
+		groupIndex?: number;
 		constantColor?: [number, number, number, number];
 		sizeMode?: number;
 		sizeScaleIndex?: number;
@@ -72,6 +77,7 @@
 		zIndex = 0,
 		colorMode = 0,
 		colorScaleIndex = 0,
+		groupIndex = 0,
 		constantColor = DEFAULT_STROKE_COLOR,
 		sizeMode = 0,
 		sizeScaleIndex = 0,
@@ -112,6 +118,9 @@
         return degen;
       }`;
 
+	/** The selection activities this shader reads; routing reads the same table. */
+	const ACTIVITY_READS = activityReads('dots');
+
 	const dotsShaderCode = `
     // MarkConstants uniform for per-mark configuration
     struct MarkConstants {
@@ -120,6 +129,10 @@
       sizeMode: u32,            // 0 = raw value, 1 = scale
       sizeScaleIndex: u32,      // Index into sizeConfigs
       constantColor: vec4<f32>, // Used when colorMode = 0
+      groupIndex: u32,          // Page-wide filter group index, for activity reads
+      _pad0: u32,
+      _pad1: u32,
+      _pad2: u32,
     };
     @group(1) @binding(5) var<uniform> markConstants: MarkConstants;
 
@@ -175,7 +188,14 @@
       output.colorValue = colorValue;
       output.uv = quadPosition;
       output.radius = displayRadius;
-      output.alpha = alpha;
+      output.alpha = alpha * selectionDim(
+        ${markActivityWGSL(ACTIVITY_READS, {
+					color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValue',
+					x: 'x',
+					y: 'y',
+					group: 'markConstants.groupIndex'
+				})}
+      );
       return output;
     }
 
@@ -283,12 +303,13 @@
 			// which re-triggers the guard and avoids stale-buffer flashes.
 			if (colorMode === 1 && !colorValueData) return;
 
-			const buffer = new ArrayBuffer(32);
+			const buffer = new ArrayBuffer(UNIFORM_BYTES.dotsMarkConstants);
 			const view = new DataView(buffer);
 			const LE = true;
 
 			view.setUint32(UNIFORM_OFFSETS.COLOR_MODE, colorMode, LE);
 			view.setUint32(UNIFORM_OFFSETS.COLOR_SCALE_INDEX, colorScaleIndex, LE);
+			view.setUint32(UNIFORM_OFFSETS.GROUP_INDEX, groupIndex, LE);
 			view.setUint32(UNIFORM_OFFSETS.SIZE_MODE, sizeMode, LE);
 			view.setUint32(UNIFORM_OFFSETS.SIZE_SCALE_INDEX, sizeScaleIndex, LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 0, constantColor[0], LE);

package/dist/components/rendering/Dots.svelte.d.ts

@@ -9,6 +9,8 @@ interface Props {
     zIndex?: number;
     colorMode?: number;
     colorScaleIndex?: number;
+    /** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
+    groupIndex?: number;
     constantColor?: [number, number, number, number];
     sizeMode?: number;
     sizeScaleIndex?: number;

package/dist/components/rendering/GridLine.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { UNIFORM_BYTES } from './uniform-sizes';
 	import { getContext, onMount, onDestroy } from 'svelte';
 	import { RendererHost } from './RendererHost.svelte';
 	import { getGPUContext } from '../../gpu';
@@ -194,7 +195,7 @@ ${placement}
 	// Update uniform constants
 	$effect(() => {
 		if (renderer?.resourcesCreated) {
-			const buffer = new ArrayBuffer(32);
+			const buffer = new ArrayBuffer(UNIFORM_BYTES.gridLineRuleConstants);
 			const view = new DataView(buffer);
 			const LE = true;
 

package/dist/components/rendering/Lines.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { activityReads, colorActivityWGSL } from './activity-reads';
+	import { UNIFORM_BYTES } from './uniform-sizes';
 	import { getContext, onMount, onDestroy } from 'svelte';
 	import { RendererHost } from './RendererHost.svelte';
 	import { getGPUContext } from '../../gpu';
@@ -25,7 +27,7 @@
 		FACET: 5
 	};
 
-	// Uniform struct offsets (matching WGSL MarkConstants layout, 48 bytes)
+	// Uniform struct offsets (matching WGSL MarkConstants; size in uniform-sizes.ts)
 	const UNIFORM_OFFSETS = {
 		STROKE_WIDTH: 0, // f32
 		POINT_COUNT: 4, // u32
@@ -33,7 +35,10 @@
 		COLOR_SCALE_INDEX: 12, // u32
 		CONSTANT_COLOR: 16, // vec4<f32>
 		DOT_RADIUS: 32, // f32
-		GLOBAL_ALPHA: 36 // f32
+		GLOBAL_ALPHA: 36, // f32
+		GROUP_INDEX: 40, // u32
+		ACTIVITY_COLOR_MODE: 44, // u32
+		ACTIVITY_COLOR_SCALE_INDEX: 48 // u32
 	};
 
 	interface Props {
@@ -49,6 +54,15 @@
 		dotRadius?: number;
 		colorMode?: number;
 		colorScaleIndex?: number;
+		/** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
+		groupIndex?: number;
+		/**
+		 * The colour mode and scale index selection activity is read through,
+		 * from `colorValueData`; null for the line's own colour. An area's
+		 * outline in a constant stroke passes its fill's, with the fill's values.
+		 */
+		activityColorMode?: number | null;
+		activityColorScaleIndex?: number | null;
 		constantColor?: [number, number, number, number];
 		m4Decimator?: M4Decimator | null;
 		dotsRung?: import('../../lod/DotsRung.svelte').DotsRung | null;
@@ -69,6 +83,9 @@
 		dotRadius = 0,
 		colorMode = 0,
 		colorScaleIndex = 0,
+		groupIndex = 0,
+		activityColorMode = null,
+		activityColorScaleIndex = null,
 		constantColor = DEFAULT_STROKE_COLOR,
 		m4Decimator = null,
 		dotsRung = null,
@@ -83,6 +100,9 @@
 	const baseMarkType = curve === 'linear' ? 'lines' : `lines-${curve}`;
 	const effectiveMarkType = faceted ? `${baseMarkType}-faceted` : baseMarkType;
 
+	/** The selection activity this shader reads; routing reads the same table. */
+	const ACTIVITY_READS = activityReads('lines');
+
 	// --- Facet compile-time specialization ---
 	// Lines uses a storage buffer (not a vertex attribute) for facet indices because
 	// the boundary check needs random access: facetIndices[nextIdx] to detect when
@@ -139,7 +159,12 @@
     constantColor: vec4<f32>,
     dotRadius: f32,
     globalAlpha: f32,
-    _pad1: u32
+    groupIndex: u32, // Page-wide filter group index, for activity reads
+    // Which colour scale this line's selection activity is read through. Its
+    // own colour by default; an area's outline, drawn in a constant stroke,
+    // reads its fill's so it dims with the fill.
+    activityColorMode: u32,
+    activityColorScaleIndex: u32
   };
   @group(1) @binding(4) var<uniform> markConstants: MarkConstants;
 
@@ -196,7 +221,13 @@
       var output: VertexOutput;
       output.position = pixelsToClip(pos);
       output.colorValue = colorValues[instanceIdx];
-      output.alpha = markConstants.globalAlpha;
+      output.alpha = markConstants.globalAlpha * selectionDim(
+        ${colorActivityWGSL(ACTIVITY_READS, {
+					color:
+						'markConstants.activityColorMode, markConstants.activityColorScaleIndex, colorValues[instanceIdx]',
+					group: 'markConstants.groupIndex'
+				})}
+      );
       output.circleUV = quadPosition;
       output.circleRadius = circleR;
       return output;
@@ -291,7 +322,13 @@
     var output: VertexOutput;
     output.position = pixelsToClip(finalPos);
     output.colorValue = colorValues[currIdx];
-    output.alpha = markConstants.globalAlpha;
+    output.alpha = markConstants.globalAlpha * selectionDim(
+      ${colorActivityWGSL(ACTIVITY_READS, {
+				color:
+					'markConstants.activityColorMode, markConstants.activityColorScaleIndex, colorValues[currIdx]',
+				group: 'markConstants.groupIndex'
+			})}
+    );
     output.circleUV = vec2<f32>(-2.0, -2.0);
     output.circleRadius = 0.0;
     return output;
@@ -385,9 +422,11 @@
 			// Guard: skip uniform write when colorMode=1 but color data hasn't
 			// arrived yet. colorValueData is tracked reactively so the effect
 			// re-fires once data loads.
-			if (colorMode === 1 && !colorValueData) return;
+			const activityMode = activityColorMode ?? colorMode;
+			const activityScale = activityColorScaleIndex ?? colorScaleIndex;
+			if ((colorMode === 1 || activityMode === 1) && !colorValueData) return;
 
-			const buffer = new ArrayBuffer(48);
+			const buffer = new ArrayBuffer(UNIFORM_BYTES.linesMarkConstants);
 			const view = new DataView(buffer);
 			const LE = true;
 
@@ -401,6 +440,9 @@
 			view.setUint32(UNIFORM_OFFSETS.POINT_COUNT, pointCount, LE);
 			view.setUint32(UNIFORM_OFFSETS.COLOR_MODE, colorMode, LE);
 			view.setUint32(UNIFORM_OFFSETS.COLOR_SCALE_INDEX, colorScaleIndex, LE);
+			view.setUint32(UNIFORM_OFFSETS.GROUP_INDEX, groupIndex, LE);
+			view.setUint32(UNIFORM_OFFSETS.ACTIVITY_COLOR_MODE, activityMode, LE);
+			view.setUint32(UNIFORM_OFFSETS.ACTIVITY_COLOR_SCALE_INDEX, activityScale, LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 0, constantColor[0], LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 4, constantColor[1], LE);
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 8, constantColor[2], LE);

package/dist/components/rendering/Lines.svelte.d.ts

@@ -13,6 +13,15 @@ interface Props {
     dotRadius?: number;
     colorMode?: number;
     colorScaleIndex?: number;
+    /** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
+    groupIndex?: number;
+    /**
+     * The colour mode and scale index selection activity is read through,
+     * from `colorValueData`; null for the line's own colour. An area's
+     * outline in a constant stroke passes its fill's, with the fill's values.
+     */
+    activityColorMode?: number | null;
+    activityColorScaleIndex?: number | null;
     constantColor?: [number, number, number, number];
     m4Decimator?: M4Decimator | null;
     dotsRung?: import('../../lod/DotsRung.svelte').DotsRung | null;

package/dist/components/rendering/ParallelLines.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { activityReads, colorActivityWGSL } from './activity-reads';
+	import { PARALLEL_MAX_AXES, UNIFORM_BYTES } from './uniform-sizes';
 	import { getContext, onMount, onDestroy } from 'svelte';
 	import { RendererHost } from './RendererHost.svelte';
 	import { getGPUContext } from '../../gpu';
@@ -7,10 +9,10 @@
 	import { DEFAULT_STROKE_COLOR } from '../../scales/color-utils';
 	import type { ChartContext, CurveType, WebGPUCanvasContext } from '../../types';
 
-	const MAX_AXES = 16;
-	const UNIFORM_SIZE = 176; // bytes, must match WGSL struct layout
+	const MAX_AXES = PARALLEL_MAX_AXES;
+	const UNIFORM_SIZE = UNIFORM_BYTES.parallelConfig;
 	// One ScaleParam (16 bytes) per axis, filled by the coordinator.
-	const AXIS_SCALES_SIZE = MAX_AXES * 16;
+	const AXIS_SCALES_SIZE = UNIFORM_BYTES.parallelAxisScales;
 
 	// Both x and y so ScaleTemplateSystem generates scaleX(), scaleLinearY(), pixelsToClip()
 	const rendererDefinition = {
@@ -32,6 +34,8 @@
 		colorValueData?: Float32Array | null;
 		colorMode?: number;
 		colorScaleIndex?: number;
+		/** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
+		groupIndex?: number;
 		constantColor?: [number, number, number, number];
 		axisOrder: number[];
 		/** Each axis's scale id, in data (not visual) order. */
@@ -51,6 +55,7 @@
 		colorValueData = null,
 		colorMode = 0,
 		colorScaleIndex = 0,
+		groupIndex = 0,
 		constantColor = DEFAULT_STROKE_COLOR,
 		axisOrder,
 		axisScaleIds,
@@ -87,6 +92,9 @@
 	// (N-1) segments × resolution sub-quads × 6 verts + N circles × 6 verts
 	const vertexCount = $derived((axisCount - 1) * 6 * resolution + axisCount * 6);
 
+	/** The selection activity this shader reads; routing reads the same table. */
+	const ACTIVITY_READS = activityReads('parallel');
+
 	// evaluateCurve() and CURVE_RESOLUTION are prepended from CurveShaderLib.
 	// With linear (resolution=1): single quad per segment, identical to original.
 	// With bump-x (resolution=128): smooth S-curves between axes, adaptive.
@@ -101,7 +109,7 @@
     opacity: f32,
     colorMode: u32,
     colorScaleIndex: u32,
-    _pad0: u32,
+    groupIndex: u32,
     _pad1: u32,
     constantColor: vec4<f32>,
     axisOrder: array<vec4<u32>, 4>,
@@ -191,7 +199,12 @@
       var output: VertexOutput;
       output.position = pixelsToClip(pos);
       output.colorValue = colorValues[rowIdx];
-      output.alpha = config.opacity;
+      output.alpha = config.opacity * selectionDim(
+        ${colorActivityWGSL(ACTIVITY_READS, {
+					color: 'config.colorMode, config.colorScaleIndex, colorValues[rowIdx]',
+					group: 'config.groupIndex'
+				})}
+      );
       output.circleUV = quadPosition;
       output.circleRadius = halfWidth;
       return output;
@@ -270,7 +283,12 @@
     var output: VertexOutput;
     output.position = pixelsToClip(finalPos);
     output.colorValue = colorValues[rowIdx];
-    output.alpha = config.opacity;
+    output.alpha = config.opacity * selectionDim(
+      ${colorActivityWGSL(ACTIVITY_READS, {
+				color: 'config.colorMode, config.colorScaleIndex, colorValues[rowIdx]',
+				group: 'config.groupIndex'
+			})}
+    );
     output.circleUV = vec2<f32>(-2.0, -2.0);
     output.circleRadius = 0.0;
     return output;
@@ -361,7 +379,8 @@
 		f32[3] = opacity;
 		u32[4] = colorMode;
 		u32[5] = colorScaleIndex;
-		// u32[6], u32[7] = padding
+		u32[6] = groupIndex;
+		// u32[7] = padding
 		f32[8] = constantColor[0];
 		f32[9] = constantColor[1];
 		f32[10] = constantColor[2];

package/dist/components/rendering/ParallelLines.svelte.d.ts

@@ -6,6 +6,8 @@ interface Props {
     colorValueData?: Float32Array | null;
     colorMode?: number;
     colorScaleIndex?: number;
+    /** The page-wide index of this mark's filter group: which run of a field's activity block it reads. */
+    groupIndex?: number;
     constantColor?: [number, number, number, number];
     axisOrder: number[];
     /** Each axis's scale id, in data (not visual) order. */