@fjader/svelte 0.2.2 → 0.2.3

package/dist/components/marks/lifecycle/domain-queries.js

@@ -42,10 +42,11 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
         //
         //  - Order. DISTINCT has no ORDER BY, so today's domain is whatever DuckDB
         //    returned, then "first-appearance order" in updateDomainFromExtents.
-        //    Arbitrary. Dim labels are ordered by id, so the domain is
-        //    deterministic — and position-in-domain now EQUALS the dim id, which
-        //    is the invariant that lets the query switch to the view's id column
-        //    without moving a single bar.
+        //    Arbitrary. Dim values are listed in id order, so the domain is
+        //    deterministic. It is the real categories only (`categoryValues`
+        //    leaves out Other buckets), so position-in-domain equals the dim id
+        //    only until a bucket's row: the scale encodes each value to its id
+        //    rather than relying on position.
         //  - Multi-table. The dim spans every table registering the field, so two
         //    marks on one shared scale agree on the category set by construction.
         //
@@ -63,10 +64,11 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
         fetches.push((async () => {
             // Idempotent and coalesced — the mark's own setup calls this too.
             await coordinator.ensureColumns(table, { categorical: [identityField] });
-            const categories = coordinator.identityValues(identityField.key);
-            // The scale adopts this same array in MarkLifecycleV2's
-            // #ensureIdentityColumns, which also covers the explicit-domain axes
-            // that never reach this branch.
+            // This table's categories: the dim spans every table on the field.
+            const categories = coordinator.categoryValues(identityField.key, table);
+            // A snapshot of the real categories. The scale adopts the live
+            // identity itself in MarkLifecycleV2's #ensureIdentityColumns, which
+            // also covers the explicit-domain axes that never reach this branch.
             if (categories.length > 0)
                 scaleState.addMark(categories, markId);
         })());
@@ -121,7 +123,7 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
         fetches.push((async () => {
             // Idempotent and coalesced — the mark's own setup calls this too.
             await coordinator.ensureColumns(table, { categorical: [facetKey] });
-            const categories = coordinator.identityValues(facetKey.key);
+            const categories = coordinator.categoryValues(facetKey.key, table);
             if (categories.length > 0)
                 facetBandScale.addMark(categories, markId);
         })());
@@ -185,7 +187,7 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
                     fetches.push((async () => {
                         // Idempotent and coalesced — the mark's own setup calls this too.
                         await coordinator.ensureColumns(table, { categorical: [colorIdentity] });
-                        const categories = coordinator.identityValues(colorIdentity.key);
+                        const categories = coordinator.categoryValues(colorIdentity.key);
                         if (categories.length > 0) {
                             colorScaleState.setDomain(categories);
                         }
@@ -234,7 +236,7 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
         if (seriesIdentity) {
             fetches.push((async () => {
                 await coordinator.ensureColumns(table, { categorical: [seriesIdentity] });
-                const categories = coordinator.identityValues(seriesIdentity.key);
+                const categories = coordinator.categoryValues(seriesIdentity.key);
                 if (categories.length > 0) {
                     seriesScaleState.setDomain(categories);
                 }

package/dist/components/marks/lifecycle/transform-scale-key.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The `transformKey` a mark with a category-reducing transform (topN) adds to
+ * its band scale's config, which is part of the scale's registry key.
+ *
+ * It names the table, the transform (N included) and the chart. A topN axis
+ * shows the categories its own query returned, and a band scale resolves the
+ * union of every mark registered on it, so two charts may share one only if
+ * they always return the same categories. Two charts with the identical topN
+ * do not: they receive different filters (a brush skips its own chart), and a
+ * shared scale would show each the other's top N as empty slots, and share one
+ * Other bucket between two different sets of members.
+ *
+ * The chart is its ChartConfig object, which a faceted chart's cells share, so
+ * facets keep one axis; a bar and its value labels in one chart share one too.
+ */
+export declare function transformScaleKey(table: string, transformKey: string, chart: object | null | undefined): string;

package/dist/components/marks/lifecycle/transform-scale-key.js

@@ -0,0 +1,27 @@
+/**
+ * The `transformKey` a mark with a category-reducing transform (topN) adds to
+ * its band scale's config, which is part of the scale's registry key.
+ *
+ * It names the table, the transform (N included) and the chart. A topN axis
+ * shows the categories its own query returned, and a band scale resolves the
+ * union of every mark registered on it, so two charts may share one only if
+ * they always return the same categories. Two charts with the identical topN
+ * do not: they receive different filters (a brush skips its own chart), and a
+ * shared scale would show each the other's top N as empty slots, and share one
+ * Other bucket between two different sets of members.
+ *
+ * The chart is its ChartConfig object, which a faceted chart's cells share, so
+ * facets keep one axis; a bar and its value labels in one chart share one too.
+ */
+const chartKeys = new WeakMap();
+let nextChartKey = 0;
+/** A name for a chart, stable while its ChartConfig lives, shared by its cells. */
+function chartKeyOf(chart) {
+    let key = chartKeys.get(chart);
+    if (!key)
+        chartKeys.set(chart, (key = `chart${nextChartKey++}`));
+    return key;
+}
+export function transformScaleKey(table, transformKey, chart) {
+    return chart ? `${table}:${transformKey}@${chartKeyOf(chart)}` : `${table}:${transformKey}`;
+}

package/dist/components/marks/utils/area-outline.d.ts

@@ -0,0 +1,24 @@
+/**
+ * How an area's outline is coloured, and which colour its selection activity
+ * is read through.
+ *
+ * The outline is drawn in the fill's colour, or in a constant `stroke`. Either
+ * way its activity is the fill's: the area dims as one shape when a selection
+ * on its colour field dims the fill, outline included. Before activity was per
+ * field the unselected areas were filtered away, outlines with them; drawn in a
+ * constant colour, an outline reading its own colour would read no activity and
+ * stay opaque over its dimmed fill.
+ */
+export interface OutlineColor {
+    /** The values the outline's colour buffer holds: the fill's, always. */
+    colorValueData: Float32Array | null;
+    colorMode: number;
+    colorScaleIndex: number;
+    activityColorMode: number;
+    activityColorScaleIndex: number;
+}
+export declare function outlineColor(stroke: unknown, fill: {
+    data: Float32Array | null;
+    colorMode: number;
+    colorScaleIndex: number;
+}): OutlineColor;

package/dist/components/marks/utils/area-outline.js

@@ -0,0 +1,10 @@
+export function outlineColor(stroke, fill) {
+    const constant = !!stroke;
+    return {
+        colorValueData: fill.data,
+        colorMode: constant ? 0 : fill.colorMode,
+        colorScaleIndex: constant ? 0 : fill.colorScaleIndex,
+        activityColorMode: fill.colorMode,
+        activityColorScaleIndex: fill.colorScaleIndex
+    };
+}

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'>>, opts?: {
     resolveFitDomain?: () => 'x' | 'y' | boolean | undefined;
 }): ReactiveConfig;

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

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

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.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;
@@ -385,7 +386,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. */