@fjader/svelte 0.2.0 → 0.2.1

package/dist/components/charts/ChartCell.svelte

@@ -426,6 +426,8 @@
 		onInteractorPointerDown: null,
 		onInteractorPointerMove: null,
 		onInteractorPointerUp: null,
+		onInteractorDragEnd: null,
+		reroutePress: () => reroutePress(),
 		activators: new Set()
 	};
 
@@ -469,10 +471,87 @@
 		}
 	}
 
+	// The origin is read on pointer enter, but the chart can move under a pointer
+	// already inside it: a scroll that carries on after the pointer arrives (the
+	// wheel passes through to the page for a moment, see WheelInteractionControl),
+	// a resize, or content above it changing height. Scroll and resize mark it
+	// stale; layout shifts fire no event, so it is also re-read every
+	// ORIGIN_CHECK_MS while hovered. Re-reading every frame instead cost a forced
+	// layout on most frames, for a chart that almost never moves.
+	const ORIGIN_CHECK_MS = 250;
+	let pointerInside = false;
+	let originStale = false;
+	let originCheckedAt = 0;
+	// Whether the pointer is over the SVG and its last position there, to
+	// re-apply the hover when the chart moves under a still pointer. The position
+	// is current only while pointerOverSvg holds: moves over the facet label or
+	// palette are not tracked.
+	let pointerOverSvg = false;
+	let lastClientX = 0;
+	let lastClientY = 0;
+
+	/**
+	 * The element of the SVG at a viewport position, or null outside it. A fresh
+	 * hit test on the chart's root (a shadow root, if the host renders into one),
+	 * for when an event's target cannot say: during pointer capture it is the
+	 * capturing element, and a chart moving under a still pointer fires no event.
+	 */
+	function svgElementAt(clientX: number, clientY: number): Element | null {
+		const root = chartCellEl?.getRootNode() as Document | ShadowRoot | undefined;
+		const hit = root?.elementFromPoint?.(clientX, clientY) ?? null;
+		return hit && svg?.contains(hit) ? hit : null;
+	}
+
+	function markOriginStale(): void {
+		originStale = true;
+	}
+
+	/** Re-read the origin when stale or due, from the frame callback while hovered. */
+	function checkSvgOrigin(): void {
+		const now = performance.now();
+		if (!originStale && now - originCheckedAt < ORIGIN_CHECK_MS) return;
+		originStale = false;
+		originCheckedAt = now;
+
+		const left = svgLeft;
+		const top = svgTop;
+		refreshSvgOrigin();
+		if (svgLeft === left && svgTop === top) return;
+		// The chart moved under a still pointer: move the crosshair with it. A
+		// drag or pan in progress gets its next position from the next move.
+		if (!pointerOverSvg || pressPointerId != null) return;
+		// Something else may be under the pointer now. Layout was just flushed by
+		// the origin read, so the hit test is cheap, and this runs only on a move.
+		const overBrush = !!svgElementAt(lastClientX, lastClientY)?.closest('.brush-overlay');
+		updateHover(lastClientX - svgLeft, lastClientY - svgTop, overBrush);
+	}
+
+	// Its own callback rather than the tooltip's, which faceted cells do not have.
+	onMount(() => {
+		const originCallback = () => {
+			if (pointerInside) checkSvgOrigin();
+		};
+		gpuCoordinator.addFrameCallback(originCallback);
+		return () => gpuCoordinator.removeFrameCallback(originCallback);
+	});
+
+	function handleSvgPointerEnter(event: PointerEvent) {
+		pointerOverSvg = true;
+		lastClientX = event.clientX;
+		lastClientY = event.clientY;
+	}
+
+	function handleSvgPointerLeave() {
+		pointerOverSvg = false;
+	}
+
 	function handleChartPointerEnter(event: PointerEvent) {
 		activateSources();
 		hoverSettle.enter();
 		refreshSvgOrigin();
+		pointerInside = true;
+		originStale = false;
+		originCheckedAt = performance.now();
 		gpuCoordinator.setChartHovered(layout.chartId);
 		wheelControl.handlePointerEnter();
 		// Focus so [ / ] keyboard shortcuts work for tooltip cycling.
@@ -485,6 +564,8 @@
 	}
 
 	function handleChartPointerLeave() {
+		pointerInside = false;
+		pointerOverSvg = false;
 		hoverSettle.leave();
 		gpuCoordinator.setChartUnhovered(layout.chartId);
 		wheelControl.handlePointerLeave();
@@ -557,7 +638,20 @@
 		paletteOpen = !paletteOpen;
 	}
 
+	/** Whether a key event's target takes text: an input, a textarea, or contenteditable. */
+	function isEditable(target: EventTarget | null): boolean {
+		const el = target as HTMLElement | null;
+		return !!el && (el.isContentEditable || el.tagName === 'INPUT' || el.tagName === 'TEXTAREA');
+	}
+
 	function handleKeyDown(event: KeyboardEvent) {
+		// Space over a chart is the brushes' pan key, so it must not scroll the
+		// page, which is what the browser does with Space on the focused cell.
+		// Only while the pointer is inside: the cell keeps focus after it leaves.
+		// Not in a text field, such as the command palette's input.
+		if (event.code === 'Space' && pointerInside && !isEditable(event.target)) {
+			event.preventDefault();
+		}
 		if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
 			event.preventDefault();
 			paletteOpen = !paletteOpen;
@@ -643,22 +737,59 @@
 		activePanY = false;
 	}
 
+	// The press under way, for reroutePress: its pointer, where it is now, and
+	// whether it was re-routed (then never a click, which would clear a brush).
+	let pressPointerId: number | null = null;
+	let pressClientX = 0;
+	let pressClientY = 0;
+	let pressRerouted = false;
+
 	function handlePointerDown(event: PointerEvent) {
 		hoverSettle.hold(true);
 		event.preventDefault();
 		chartCellEl?.focus({ preventScroll: true });
 
-		pointerBuffer.x = ptrX(event);
-		pointerBuffer.y = ptrY(event);
+		pressPointerId = event.pointerId;
+		pressRerouted = false;
+		pressClientX = event.clientX;
+		pressClientY = event.clientY;
+		routePress(event.target as Element, event.pointerId, event.clientX, event.clientY);
+	}
+
+	/**
+	 * Route the press under way again where the pointer is now, ending what it
+	 * was doing first. The element under the pointer comes from a fresh hit
+	 * test, since during pointer capture the events' target is the capturing
+	 * element.
+	 */
+	function reroutePress() {
+		if (pressPointerId == null || isReordering) return;
+		if (isPanning) stopPan();
+		else chartContext.onInteractorDragEnd?.();
+		pressRerouted = true;
+
+		const target = svgElementAt(pressClientX, pressClientY) ?? svg;
+		if (target) routePress(target, pressPointerId, pressClientX, pressClientY);
+	}
+
+	/**
+	 * Offer a press to the interactor, and pan if it declines. `target` is the
+	 * element under the pointer: a press on a brush's overlay goes to the brush
+	 * even just outside the plot area, where its edge handles reach.
+	 */
+	function routePress(target: Element, pointerId: number, clientX: number, clientY: number) {
+		pointerBuffer.x = clientX - svgLeft;
+		pointerBuffer.y = clientY - svgTop;
 		const { xInBounds, yInBounds, innerPoint } = layout.getActiveAxes(pointerBuffer);
 
 		// Parallel axes are vertical — yInBounds is sufficient, nearestParallelAxis handles x-proximity.
 		// This mirrors how regular charts let margin interactions target the in-bounds axis.
 		const parallelInBounds = yInBounds && !!scales.parallelScales;
 
+		const onBrush = !!target.closest?.('[data-brush-handle]');
 		if (
-			((xInBounds && yInBounds) || parallelInBounds) &&
-			chartContext.onInteractorPointerDown?.(event, innerPoint)
+			((xInBounds && yInBounds) || parallelInBounds || onBrush) &&
+			chartContext.onInteractorPointerDown?.(target, pointerId, innerPoint)
 		) {
 			currentInnerX = null;
 			currentInnerY = null;
@@ -676,7 +807,7 @@
 			scales.clearCurrentDataPoints();
 			currentInnerX = null;
 			currentInnerY = null;
-			(event.target as Element | null)?.setPointerCapture?.(event.pointerId);
+			target.setPointerCapture?.(pointerId);
 			return;
 		}
 
@@ -688,7 +819,7 @@
 			scales.startParallelReorder(innerPoint.x, layout.innerWidth)
 		) {
 			isReordering = true;
-			(event.target as Element | null)?.setPointerCapture?.(event.pointerId);
+			target.setPointerCapture?.(pointerId);
 			return;
 		}
 
@@ -708,7 +839,7 @@
 		scales.clearCurrentDataPoints();
 		currentInnerX = null;
 		currentInnerY = null;
-		(event.target as Element | null)?.setPointerCapture?.(event.pointerId);
+		target.setPointerCapture?.(pointerId);
 	}
 
 	/** The pointer buffer set to an SVG-root position, for layout methods that read a Point. */
@@ -719,6 +850,12 @@
 	}
 
 	function processPointerMove(event: PointerEvent) {
+		if (event.pointerId === pressPointerId) {
+			pressClientX = event.clientX;
+			pressClientY = event.clientY;
+		}
+		lastClientX = event.clientX;
+		lastClientY = event.clientY;
 		const x = ptrX(event);
 		const y = ptrY(event);
 		if (isReordering) {
@@ -732,8 +869,8 @@
 		} else if (
 			chartContext.onInteractorPointerMove?.(event, layout.toInnerCoordinates(setPointer(x, y)))
 		) {
-			// Brush move/resize use stopPropagation, bypassing handlePointerDown cleanup.
-			// Guard ensures this only runs once on the first captured move.
+			// Clear the hover point once per drag. A press clears it when the
+			// interactor takes it, but a press re-routed mid-drag can start one too.
 			if (currentInnerX != null) {
 				currentInnerX = null;
 				currentInnerY = null;
@@ -741,31 +878,36 @@
 				tooltipManager?.updatePosition(null, null);
 			}
 		} else {
-			pointerBuffer.x = x;
-			pointerBuffer.y = y;
-
-			if (layout.isWithinInnerBounds(pointerBuffer)) {
-				const innerPoint = layout.toInnerCoordinates(pointerBuffer);
-				currentInnerX = innerPoint.x;
-				currentInnerY = innerPoint.y;
-				scales.updateCurrentDataPoints(innerPoint, layout.innerWidth, layout.innerHeight);
-				// Suppress tooltip over brush overlays — crosshair/margin labels stay active
-				const overBrush = (event.target as Element)?.closest?.('.brush-overlay');
-				if (overBrush) {
-					tooltipManager?.updatePosition(null, null);
-				} else {
-					tooltipManager?.updatePointerScreen(x, y);
-					tooltipManager?.updatePosition(
-						scales.xScaleState?.currentDataPoint,
-						scales.yScaleState?.currentDataPoint
-					);
-				}
-			} else {
-				currentInnerX = null;
-				currentInnerY = null;
-				scales.clearCurrentDataPoints();
+			const overBrush = !!(event.target as Element)?.closest?.('.brush-overlay');
+			updateHover(x, y, overBrush);
+		}
+	}
+
+	/** Crosshair, hover points and tooltip for the pointer at an SVG-root position. */
+	function updateHover(x: number, y: number, overBrush: boolean): void {
+		pointerBuffer.x = x;
+		pointerBuffer.y = y;
+
+		if (layout.isWithinInnerBounds(pointerBuffer)) {
+			const innerPoint = layout.toInnerCoordinates(pointerBuffer);
+			currentInnerX = innerPoint.x;
+			currentInnerY = innerPoint.y;
+			scales.updateCurrentDataPoints(innerPoint, layout.innerWidth, layout.innerHeight);
+			// Suppress tooltip over brush overlays — crosshair/margin labels stay active
+			if (overBrush) {
 				tooltipManager?.updatePosition(null, null);
+			} else {
+				tooltipManager?.updatePointerScreen(x, y);
+				tooltipManager?.updatePosition(
+					scales.xScaleState?.currentDataPoint,
+					scales.yScaleState?.currentDataPoint
+				);
 			}
+		} else {
+			currentInnerX = null;
+			currentInnerY = null;
+			scales.clearCurrentDataPoints();
+			tooltipManager?.updatePosition(null, null);
 		}
 	}
 
@@ -780,6 +922,11 @@
 	}
 
 	function handlePointerUp(event: PointerEvent) {
+		const rerouted = pressRerouted && event.pointerId === pressPointerId;
+		if (event.pointerId === pressPointerId) {
+			pressPointerId = null;
+			pressRerouted = false;
+		}
 		hoverSettle.hold(false);
 		if (isReordering) {
 			isReordering = false;
@@ -787,11 +934,17 @@
 			scales.endParallelReorder();
 			return;
 		}
-		if (chartContext.onInteractorPointerUp?.(event)) return;
+		// A re-routed press ends as a drag even if it never moved: it is no click.
+		if (rerouted) chartContext.onInteractorDragEnd?.();
+		else if (chartContext.onInteractorPointerUp?.(event)) return;
+		(event.target as Element | null)?.releasePointerCapture?.(event.pointerId);
+		stopPan();
+	}
+
+	function stopPan() {
 		isPanning = false;
 		activePanX = false;
 		activePanY = false;
-		(event.target as Element | null)?.releasePointerCapture?.(event.pointerId);
 		scales.endPan();
 		scales.endParallelPan();
 	}
@@ -872,6 +1025,8 @@
 	const cellReady = $derived(layout.isReady);
 </script>
 
+<svelte:window onscrollcapture={markOriginStale} onresize={markOriginStale} />
+
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="chart-cell"
@@ -912,6 +1067,8 @@
 				width={layout.width}
 				height={layout.height}
 				onwheel={handleWheel}
+				onpointerenter={handleSvgPointerEnter}
+				onpointerleave={handleSvgPointerLeave}
 				onpointerdown={handlePointerDown}
 				onpointermove={handlePointerMove}
 				onpointerrawupdate={handlePointerRawUpdate}

package/dist/components/charts/ChartContainer.svelte

@@ -441,6 +441,9 @@
 		onInteractorPointerDown: null,
 		onInteractorPointerMove: null,
 		onInteractorPointerUp: null,
+		onInteractorDragEnd: null,
+		// Presses belong to the chart cells, whose context the brushes get.
+		reroutePress: () => {},
 		activators: new Set()
 	};
 

package/dist/components/marks/RectYMark.svelte

@@ -366,5 +366,4 @@
 		dx={entry.dx ?? 0}
 		dy={entry.dy ?? 0}
 	/>
-	>
 {/if}

package/dist/interactors/BrushOverlay.svelte

@@ -5,12 +5,19 @@
 		width: number;
 		height: number;
 		orientation: 'x' | 'y' | '2d';
-		onMoveStart: (event: PointerEvent) => void;
-		onResizeStart: (edge: string, event: PointerEvent) => void;
 		onWheel: (event: WheelEvent) => void;
+		/** Which brush this is, when a chart has several (a parallel axis's column). */
+		owner?: string;
 	}
 
-	let { x, y, width, height, orientation, onMoveStart, onResizeStart, onWheel }: Props = $props();
+	/*
+	 * The overlay only draws the brush and labels its parts with
+	 * data-brush-handle. Presses bubble to the chart, which hands them to the
+	 * brush's handlePointerDown; it reads the label (brushHandleAt) to move,
+	 * resize or draw. Routing lives there alone, so the chart can route a press
+	 * again mid-drag, at the element under the pointer then (reroutePress).
+	 */
+	let { x, y, width, height, orientation, onWheel, owner }: Props = $props();
 
 	// Normalize to ensure positive dimensions (avoid GC by using primitives)
 	const nx = $derived(width < 0 ? x + width : x);
@@ -19,7 +26,7 @@
 	const nh = $derived(Math.abs(height));
 </script>
 
-<g class="brush-overlay" onwheel={onWheel}>
+<g class="brush-overlay" data-brush-owner={owner} onwheel={onWheel}>
 	<!-- Selection box - minimal style like D3 defaults -->
 	<rect
 		class="brush-selection"
@@ -30,7 +37,7 @@
 		fill="rgba(128, 128, 128, 0.1)"
 		stroke="rgba(96, 96, 96, 0.8)"
 		stroke-width="1"
-		onpointerdown={onMoveStart}
+		data-brush-handle="move"
 		style="cursor: move;"
 	/>
 
@@ -44,7 +51,7 @@
 			height={nh}
 			fill="transparent"
 			style="cursor: ew-resize;"
-			onpointerdown={(e) => onResizeStart('left', e)}
+			data-brush-handle="left"
 		/>
 		<!-- Right edge -->
 		<rect
@@ -54,7 +61,7 @@
 			height={nh}
 			fill="transparent"
 			style="cursor: ew-resize;"
-			onpointerdown={(e) => onResizeStart('right', e)}
+			data-brush-handle="right"
 		/>
 	{/if}
 
@@ -67,7 +74,7 @@
 			height={10}
 			fill="transparent"
 			style="cursor: ns-resize;"
-			onpointerdown={(e) => onResizeStart('top', e)}
+			data-brush-handle="top"
 		/>
 		<!-- Bottom edge -->
 		<rect
@@ -77,7 +84,7 @@
 			height={10}
 			fill="transparent"
 			style="cursor: ns-resize;"
-			onpointerdown={(e) => onResizeStart('bottom', e)}
+			data-brush-handle="bottom"
 		/>
 	{/if}
 
@@ -90,7 +97,7 @@
 				r={8}
 				fill="transparent"
 				style="cursor: {corner === 'nw' || corner === 'se' ? 'nwse' : 'nesw'}-resize;"
-				onpointerdown={(e) => onResizeStart(corner, e)}
+				data-brush-handle={corner}
 			/>
 		{/each}
 	{/if}

package/dist/interactors/BrushOverlay.svelte.d.ts

@@ -4,9 +4,9 @@ interface Props {
     width: number;
     height: number;
     orientation: 'x' | 'y' | '2d';
-    onMoveStart: (event: PointerEvent) => void;
-    onResizeStart: (edge: string, event: PointerEvent) => void;
     onWheel: (event: WheelEvent) => void;
+    /** Which brush this is, when a chart has several (a parallel axis's column). */
+    owner?: string;
 }
 declare const BrushOverlay: import("svelte").Component<Props, {}, "">;
 type BrushOverlay = ReturnType<typeof BrushOverlay>;

package/dist/interactors/DerivedInterval1D.svelte

@@ -7,7 +7,7 @@
 	 * selection → target group. Marks declare which group they belong to via
 	 * their own `selection` prop.
 	 */
-	import { getContext, onMount } from 'svelte';
+	import { getContext, onMount, untrack } from 'svelte';
 	import { isBetween, column as sqlColumn } from '@uwdata/mosaic-sql';
 	import GhostBrushOverlay from './GhostBrushOverlay.svelte';
 	import { buildColumnRef } from './brush-utils';
@@ -111,8 +111,18 @@
 	let lastEmittedMin: number | null = null;
 	let lastEmittedMax: number | null = null;
 
+	// Tracks only the derived extent and the column it filters. The rest runs
+	// untracked: writing to the target group reads state it then writes, which
+	// would make the effect re-run itself without end.
 	$effect(() => {
-		if (!derivedExtent) {
+		const extent = derivedExtent;
+		const ref = columnRef;
+		const fieldStr = resolvedField ?? '';
+		untrack(() => emitDerived(extent, ref, fieldStr));
+	});
+
+	function emitDerived(extent: [number, number] | null, ref: typeof columnRef, fieldStr: string) {
+		if (!extent) {
 			// Clear derived filter when primary is cleared
 			if (lastEmittedMin != null) {
 				lastEmittedMin = null;
@@ -122,8 +132,8 @@
 			return;
 		}
 
-		const dataMin = Math.min(derivedExtent[0], derivedExtent[1]);
-		const dataMax = Math.max(derivedExtent[0], derivedExtent[1]);
+		const dataMin = Math.min(extent[0], extent[1]);
+		const dataMax = Math.max(extent[0], extent[1]);
 
 		// Skip if unchanged
 		if (
@@ -137,13 +147,11 @@
 		lastEmittedMin = dataMin;
 		lastEmittedMax = dataMax;
 
-		if (!columnRef) return;
-
-		const fieldStr = resolvedField ?? '';
+		if (!ref) return;
 
 		targetGroup.upsertManual(
 			sourceKey,
-			isBetween(columnRef, [dataMin, dataMax]),
+			isBetween(ref, [dataMin, dataMax]),
 			[dataMin, dataMax],
 			new Set<string>(), // No excludeMarkIds — target group only has comparison marks
 			{
@@ -153,7 +161,7 @@
 				values: [dataMin, dataMax]
 			}
 		);
-	});
+	}
 
 	// =========================================================================
 	// Relay non-axis clauses from source → target
@@ -161,18 +169,21 @@
 
 	let relayedKeys = new Set<string>();
 
+	// Tracks only the source group's clauses and what decides which to relay.
+	// The writes to the target group run untracked, as above: tracked, they
+	// made this effect re-run itself without end once the source had a clause
+	// to relay (a day-of-week toggle beside the brush).
 	$effect(() => {
-		if (!relayClauses) {
-			for (const key of relayedKeys) targetGroup.removeManual(key);
-			relayedKeys = new Set();
-			return;
-		}
-
+		const relay = relayClauses;
 		const items = sourceGroup.items;
 		const fieldStr = resolvedField ?? '';
+		untrack(() => relayItems(relay ? items : null, fieldStr));
+	});
 
+	/** Mirror the source's clauses, but the axis range, into the target group. */
+	function relayItems(items: typeof sourceGroup.items | null, fieldStr: string) {
 		const currentKeys = new Set<string>();
-		for (const item of items) {
+		for (const item of items ?? []) {
 			// Skip the range clause on the axis column — we replace it with the shifted version
 			if (item.schema?.kind === 'range' && item.schema?.column === fieldStr) continue;
 
@@ -194,7 +205,7 @@
 			if (!currentKeys.has(key)) targetGroup.removeManual(key);
 		}
 		relayedKeys = currentKeys;
-	});
+	}
 
 	onMount(() => {
 		return () => {

package/dist/interactors/Interval1D.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte';
+	import { getContext, onMount, untrack } from 'svelte';
 	import { isBetween } from '@uwdata/mosaic-sql';
 	import { BrushState1D } from './brush-state.svelte';
 	import BrushOverlay from './BrushOverlay.svelte';
@@ -9,6 +9,7 @@
 		isDragging,
 		scaleBrushExtent1D,
 		createPanModeHandlers,
+		brushHandleAt,
 		WHEEL_SENSITIVITY
 	} from './brush-utils';
 	import type { ChartContext, FieldRef, Point, D3Scale } from '../types';
@@ -103,7 +104,7 @@
 	let current = 0;
 	let isCapturing = false;
 	let hasDragged = false;
-	let isPanModeActive = $state(false);
+	let isPanModeActive = false;
 
 	// Reusable point object to reduce GC pressure
 	const point = { x: 0, y: 0 };
@@ -113,9 +114,12 @@
 	let lastEmittedMax: number | null = null;
 
 	// Keyboard handlers for Space key pan mode
-	const { handleKeyDown, handleKeyUp } = createPanModeHandlers((active) => {
-		isPanModeActive = active;
-	});
+	const { handleKeyDown, handleKeyUp, handleBlur } = createPanModeHandlers(
+		(active) => {
+			isPanModeActive = active;
+		},
+		() => chart.reroutePress()
+	);
 
 	// Scale validation
 	// Always validate as 'linear': Fjader time scales use float offsets, not Dates,
@@ -128,19 +132,26 @@
 	});
 
 	// Watch for external selection changes (from detail chart pan/zoom)
-	// to keep brush visual in sync and update Mosaic filter
+	// to keep brush visual in sync and update Mosaic filter.
+	// Tracks only the selection extent and its source. The rest runs untracked:
+	// emitting the clause reads state it then writes (the filter group's
+	// selection, the scales' active values), which made this effect re-run
+	// itself without end while a detail chart was panned.
 	$effect(() => {
 		if (!(scaleState instanceof LinearScaleState)) return;
 		const extent = scaleState.selectionExtent;
-		if (extent && scaleState.selectionSource === 'external') {
-			brush.setExtent(extent[0], extent[1]);
-			lastEmittedMin = extent[0];
-			lastEmittedMax = extent[1];
-			emitFilterClause(extent[0], extent[1]);
-		} else if (!extent && brush.active) {
-			// Selection was cleared externally (e.g. detail chart reset) — clear brush
-			clearBrush();
-		}
+		const source = scaleState.selectionSource;
+		untrack(() => {
+			if (extent && source === 'external') {
+				brush.setExtent(extent[0], extent[1]);
+				lastEmittedMin = extent[0];
+				lastEmittedMax = extent[1];
+				emitFilterClause(extent[0], extent[1]);
+			} else if (!extent && brush.active) {
+				// Selection was cleared externally (e.g. detail chart reset) — clear brush
+				clearBrush();
+			}
+		});
 	});
 
 	// Derived screen coordinates — read chart.xScale/yScale directly so the
@@ -223,16 +234,25 @@
 
 	// --- Pointer Event Handlers (registered as chart context callbacks) ---
 
-	function handlePointerDown(event: PointerEvent, innerPoint: Point) {
+	/** A press: move or resize on the brush's handles, else draw; decline in pan mode. */
+	function handlePointerDown(target: Element, pointerId: number, innerPoint: Point) {
 		if (brush.phase !== 'idle') return false;
 		if (isPanModeActive) return false;
 
-		(event.target as Element).setPointerCapture(event.pointerId);
+		target.setPointerCapture(pointerId);
 		isCapturing = true;
 		hasDragged = false;
 
 		anchor = innerCoord(innerPoint);
 		current = anchor;
+
+		const hit = brushHandleAt(target);
+		if (hit?.handle === 'move') {
+			brush.phase = 'moving';
+		} else if (hit) {
+			brush.phase = 'resizing';
+			brush.resizeEdge = hit.handle === edgeStart ? 'start' : 'end';
+		}
 		return true;
 	}
 
@@ -280,44 +300,30 @@
 		(event.target as Element).releasePointerCapture(event.pointerId);
 		isCapturing = false;
 
+		// A press that never moved is a click, which clears the brush.
 		if (!hasDragged && brush.active && (brush.phase === 'idle' || brush.phase === 'moving')) {
 			clearBrush();
 			return true;
 		}
 
+		endDrag();
+		return true;
+	}
+
+	/** Keep what the drag did and go idle. */
+	function endDrag() {
 		if (brush.phase !== 'idle') {
 			emitUpdate();
 			brush.phase = 'idle';
 		}
-
 		hasDragged = false;
-		return true;
 	}
 
-	function handleMoveStart(event: PointerEvent) {
-		event.stopPropagation();
-		(event.target as Element).setPointerCapture(event.pointerId);
-		isCapturing = true;
-		hasDragged = false;
-
-		point.x = event.offsetX;
-		point.y = event.offsetY;
-		const innerCoords = chart.toInnerCoordinates(point);
-		anchor = innerCoord(innerCoords);
-		brush.phase = 'moving';
-	}
-
-	function handleResizeStart(edge: string, event: PointerEvent) {
-		event.stopPropagation();
-		(event.target as Element).setPointerCapture(event.pointerId);
-		isCapturing = true;
-
-		point.x = event.offsetX;
-		point.y = event.offsetY;
-		const innerCoords = chart.toInnerCoordinates(point);
-		anchor = innerCoord(innerCoords);
-		brush.phase = 'resizing';
-		brush.resizeEdge = edge === edgeStart ? 'start' : 'end';
+	/** The chart re-routes the press: end the drag as it stands, never as a click. */
+	function handleDragEnd() {
+		if (!isCapturing) return;
+		isCapturing = false;
+		endDrag();
 	}
 
 	// Register pointer callbacks; the keys are on <svelte:window> below.
@@ -325,19 +331,21 @@
 		chart.onInteractorPointerDown = handlePointerDown;
 		chart.onInteractorPointerMove = handlePointerMove;
 		chart.onInteractorPointerUp = handlePointerUp;
+		chart.onInteractorDragEnd = handleDragEnd;
 		chart.activators.add(brushHandle.activate);
 
 		return () => {
 			chart.onInteractorPointerDown = null;
 			chart.onInteractorPointerMove = null;
 			chart.onInteractorPointerUp = null;
+			chart.onInteractorDragEnd = null;
 			chart.activators.delete(brushHandle.activate);
 			brushHandle.destroy();
 		};
 	});
 </script>
 
-<svelte:window onkeydown={handleKeyDown} onkeyup={handleKeyUp} />
+<svelte:window onkeydown={handleKeyDown} onkeyup={handleKeyUp} onblur={handleBlur} />
 
 {#if brush.active && brushScreen}
 	<BrushOverlay
@@ -346,8 +354,6 @@
 		width={isX ? brushScreen.size : chart.innerWidth}
 		height={isX ? chart.innerHeight : brushScreen.size}
 		orientation={axis}
-		onMoveStart={handleMoveStart}
-		onResizeStart={handleResizeStart}
 		onWheel={handleWheel}
 	/>
 {/if}

package/dist/interactors/Interval2D.svelte

@@ -8,6 +8,8 @@
 		closeTo,
 		isDragging,
 		scaleBrushExtent2D,
+		createPanModeHandlers,
+		brushHandleAt,
 		WHEEL_SENSITIVITY
 	} from './brush-utils';
 	import type { ChartContext, FieldRef, Point } from '../types';
@@ -104,6 +106,15 @@
 	let currentY = 0;
 	let isCapturing = false;
 	let hasDragged = false;
+	let isPanModeActive = false;
+
+	// Space held: presses pan the chart instead of brushing
+	const { handleKeyDown, handleKeyUp, handleBlur } = createPanModeHandlers(
+		(active) => {
+			isPanModeActive = active;
+		},
+		() => chart.reroutePress()
+	);
 
 	// Reusable point object to reduce GC pressure
 	const point = { x: 0, y: 0 };
@@ -218,10 +229,12 @@
 
 	// --- Pointer Event Handlers (registered as chart context callbacks) ---
 
-	function handlePointerDown(event: PointerEvent, innerPoint: Point) {
+	/** A press: move or resize on the brush's handles, else draw; decline in pan mode. */
+	function handlePointerDown(target: Element, pointerId: number, innerPoint: Point) {
 		if (brush.phase !== 'idle') return false;
+		if (isPanModeActive) return false;
 
-		(event.target as Element).setPointerCapture(event.pointerId);
+		target.setPointerCapture(pointerId);
 		isCapturing = true;
 		hasDragged = false;
 
@@ -229,6 +242,23 @@
 		anchorY = innerPoint.y;
 		currentX = innerPoint.x;
 		currentY = innerPoint.y;
+
+		const hit = brushHandleAt(target);
+		if (hit?.handle === 'move') {
+			brush.phase = 'moving';
+		} else if (hit) {
+			brush.phase = 'resizing';
+			const edge = hit.handle;
+			if (edge === 'nw' || edge === 'ne' || edge === 'sw' || edge === 'se') {
+				brush.resizeCorner = edge;
+				brush.x.resizeEdge = null;
+				brush.y.resizeEdge = null;
+			} else {
+				brush.resizeCorner = null;
+				brush.x.resizeEdge = edge === 'left' || edge === 'right' ? edge : null;
+				brush.y.resizeEdge = edge === 'top' || edge === 'bottom' ? edge : null;
+			}
+		}
 		return true;
 	}
 
@@ -302,11 +332,18 @@
 		(event.target as Element).releasePointerCapture(event.pointerId);
 		isCapturing = false;
 
+		// A press that never moved is a click, which clears the brush.
 		if (!hasDragged && brush.active && (brush.phase === 'idle' || brush.phase === 'moving')) {
 			clearBrush();
 			return true;
 		}
 
+		endDrag();
+		return true;
+	}
+
+	/** Keep what the drag did and go idle. */
+	function endDrag() {
 		if (brush.phase !== 'idle') {
 			emitClause();
 			brush.phase = 'idle';
@@ -314,58 +351,14 @@
 			brush.x.resizeEdge = null;
 			brush.y.resizeEdge = null;
 		}
-
 		hasDragged = false;
-		return true;
-	}
-
-	function handleMoveStart(event: PointerEvent) {
-		event.stopPropagation();
-		(event.target as Element).setPointerCapture(event.pointerId);
-		isCapturing = true;
-		hasDragged = false;
-
-		point.x = event.offsetX;
-		point.y = event.offsetY;
-		const innerCoords = chart.toInnerCoordinates(point);
-		anchorX = innerCoords.x;
-		anchorY = innerCoords.y;
-		currentX = innerCoords.x;
-		currentY = innerCoords.y;
-		brush.phase = 'moving';
 	}
 
-	function handleResizeStart(
-		edge: 'left' | 'right' | 'top' | 'bottom' | 'nw' | 'ne' | 'sw' | 'se',
-		event: PointerEvent
-	) {
-		event.stopPropagation();
-		(event.target as HTMLElement).setPointerCapture(event.pointerId);
-		isCapturing = true;
-
-		point.x = event.offsetX;
-		point.y = event.offsetY;
-		const innerCoords = chart.toInnerCoordinates(point);
-		anchorX = innerCoords.x;
-		anchorY = innerCoords.y;
-		currentX = innerCoords.x;
-		currentY = innerCoords.y;
-		brush.phase = 'resizing';
-
-		if (edge === 'nw' || edge === 'ne' || edge === 'sw' || edge === 'se') {
-			brush.resizeCorner = edge;
-			brush.x.resizeEdge = null;
-			brush.y.resizeEdge = null;
-		} else {
-			brush.resizeCorner = null;
-			if (edge === 'left' || edge === 'right') {
-				brush.x.resizeEdge = edge;
-				brush.y.resizeEdge = null;
-			} else {
-				brush.x.resizeEdge = null;
-				brush.y.resizeEdge = edge;
-			}
-		}
+	/** The chart re-routes the press: end the drag as it stands, never as a click. */
+	function handleDragEnd() {
+		if (!isCapturing) return;
+		isCapturing = false;
+		endDrag();
 	}
 
 	// Register callbacks
@@ -373,18 +366,22 @@
 		chart.onInteractorPointerDown = handlePointerDown;
 		chart.onInteractorPointerMove = handlePointerMove;
 		chart.onInteractorPointerUp = handlePointerUp;
+		chart.onInteractorDragEnd = handleDragEnd;
 		chart.activators.add(brushHandle.activate);
 
 		return () => {
 			chart.onInteractorPointerDown = null;
 			chart.onInteractorPointerMove = null;
 			chart.onInteractorPointerUp = null;
+			chart.onInteractorDragEnd = null;
 			chart.activators.delete(brushHandle.activate);
 			brushHandle.destroy();
 		};
 	});
 </script>
 
+<svelte:window onkeydown={handleKeyDown} onkeyup={handleKeyUp} onblur={handleBlur} />
+
 {#if brush.active && brushScreen}
 	<BrushOverlay
 		x={brushScreen.x}
@@ -392,8 +389,6 @@
 		width={brushScreen.width}
 		height={brushScreen.height}
 		orientation="2d"
-		onMoveStart={handleMoveStart}
-		onResizeStart={handleResizeStart}
 		onWheel={handleWheel}
 	/>
 {/if}

package/dist/interactors/ParallelBrushes.svelte

@@ -4,7 +4,7 @@
 	import { SvelteMap } from 'svelte/reactivity';
 	import BrushOverlay from './BrushOverlay.svelte';
 	import ParallelAxisSource, { type ParallelAxis } from './ParallelAxisSource.svelte';
-	import { closeTo, isDragging, createPanModeHandlers } from './brush-utils';
+	import { closeTo, isDragging, createPanModeHandlers, brushHandleAt } from './brush-utils';
 	import { LinearScaleState } from '../scales/LinearScaleState.svelte';
 	import type { ChartContext, Point } from '../types';
 	import type { FilterGroupRegistry } from '../query-engine/FilterGroupRegistry.svelte';
@@ -62,10 +62,13 @@
 	}
 
 	// Pan mode (Space key) — when active, pointer events fall through to ChartCell for pan
-	let isPanModeActive = $state(false);
-	const { handleKeyDown, handleKeyUp } = createPanModeHandlers((active) => {
-		isPanModeActive = active;
-	});
+	let isPanModeActive = false;
+	const { handleKeyDown, handleKeyUp, handleBlur } = createPanModeHandlers(
+		(active) => {
+			isPanModeActive = active;
+		},
+		() => chart.reroutePress()
+	);
 
 	// The axis the user is dragging on, by column
 	let activeAxis: string | null = null;
@@ -166,19 +169,35 @@
 
 	// --- Pointer handlers ---
 
-	function handlePointerDown(event: PointerEvent, innerPoint: Point) {
+	/**
+	 * A press: move or resize on an axis's brush handles (that axis, from the
+	 * overlay's owner), else draw on the nearest axis; decline in pan mode.
+	 */
+	function handlePointerDown(target: Element, pointerId: number, innerPoint: Point) {
 		if (!ps) return false;
 		if (isPanModeActive) return false; // Fall through to ChartCell for parallel axis pan
 
-		const col = nearestAxis(innerPoint.x);
+		const hit = brushHandleAt(target);
+		const col = hit?.owner ?? nearestAxis(innerPoint.x);
 		if (col == null || !axes.has(col)) return false;
+		// A drag that starts on a brush overlay hovers its axis, even without a
+		// pointer move over the axis first.
+		if (hit) hoverAxis(col);
 
-		(event.target as Element).setPointerCapture(event.pointerId);
+		target.setPointerCapture(pointerId);
 		activeAxis = col;
 		isCapturing = true;
 		hasDragged = false;
 		anchor = innerPoint.y;
 		current = anchor;
+
+		const brush = axes.get(col)!.brush;
+		if (hit?.handle === 'move') {
+			brush.phase = 'moving';
+		} else if (hit) {
+			brush.phase = 'resizing';
+			brush.resizeEdge = hit.handle === 'top' ? 'start' : 'end';
+		}
 		return true;
 	}
 
@@ -240,59 +259,39 @@
 		const col = activeAxis;
 		activeAxis = null;
 		const brush = axes.get(col)?.brush;
-		if (!brush) {
-			hasDragged = false;
-			return true;
-		}
 
-		if (!hasDragged && brush.active && (brush.phase === 'idle' || brush.phase === 'moving')) {
+		// A press that never moved is a click, which clears the brush.
+		if (
+			brush &&
+			!hasDragged &&
+			brush.active &&
+			(brush.phase === 'idle' || brush.phase === 'moving')
+		) {
 			clearBrush(col);
 			return true;
 		}
 
-		if (brush.phase !== 'idle') {
-			emitUpdate(col);
-			brush.phase = 'idle';
-		}
-
-		hasDragged = false;
+		endDrag(col);
 		return true;
 	}
 
-	function handleMoveStart(col: string, event: PointerEvent) {
+	/** Keep what the drag on an axis did and go idle. */
+	function endDrag(col: string) {
 		const brush = axes.get(col)?.brush;
-		if (!brush) return;
-		event.stopPropagation();
-		// A drag that starts on a brush overlay hovers its axis, even without a
-		// pointer move over the axis first.
-		hoverAxis(col);
-		(event.target as Element).setPointerCapture(event.pointerId);
-		activeAxis = col;
-		isCapturing = true;
+		if (brush && brush.phase !== 'idle') {
+			emitUpdate(col);
+			brush.phase = 'idle';
+		}
 		hasDragged = false;
-
-		point.x = event.offsetX;
-		point.y = event.offsetY;
-		const innerCoords = chart.toInnerCoordinates(point);
-		anchor = innerCoords.y;
-		brush.phase = 'moving';
 	}
 
-	function handleResizeStart(col: string, edge: string, event: PointerEvent) {
-		const brush = axes.get(col)?.brush;
-		if (!brush) return;
-		event.stopPropagation();
-		hoverAxis(col);
-		(event.target as Element).setPointerCapture(event.pointerId);
-		activeAxis = col;
-		isCapturing = true;
-
-		point.x = event.offsetX;
-		point.y = event.offsetY;
-		const innerCoords = chart.toInnerCoordinates(point);
-		anchor = innerCoords.y;
-		brush.phase = 'resizing';
-		brush.resizeEdge = edge === 'top' ? 'start' : 'end';
+	/** The chart re-routes the press: end the drag as it stands, never as a click. */
+	function handleDragEnd() {
+		if (!isCapturing || activeAxis == null) return;
+		isCapturing = false;
+		const col = activeAxis;
+		activeAxis = null;
+		endDrag(col);
 	}
 
 	// Brush screen extents, one per active brush, at its axis's x-position —
@@ -324,18 +323,20 @@
 		chart.onInteractorPointerDown = handlePointerDown;
 		chart.onInteractorPointerMove = handlePointerMove;
 		chart.onInteractorPointerUp = handlePointerUp;
+		chart.onInteractorDragEnd = handleDragEnd;
 		chart.activators.add(activateHoveredAxis);
 
 		return () => {
 			chart.onInteractorPointerDown = null;
 			chart.onInteractorPointerMove = null;
 			chart.onInteractorPointerUp = null;
+			chart.onInteractorDragEnd = null;
 			chart.activators.delete(activateHoveredAxis);
 		};
 	});
 </script>
 
-<svelte:window onkeydown={handleKeyDown} onkeyup={handleKeyUp} />
+<svelte:window onkeydown={handleKeyDown} onkeyup={handleKeyUp} onblur={handleBlur} />
 
 {#if ps}
 	{#each ps.columns as col (col)}
@@ -356,8 +357,7 @@
 			width={brushHalfWidth * 2}
 			height={screen.size}
 			orientation="y"
-			onMoveStart={(e) => handleMoveStart(screen.col, e)}
-			onResizeStart={(edge, e) => handleResizeStart(screen.col, edge, e)}
+			owner={screen.col}
 			onWheel={() => {}}
 		/>
 	{/each}

package/dist/interactors/brush-utils.d.ts

@@ -4,10 +4,30 @@ export declare const EPS_ABSOLUTE = 1e-12;
 export declare const DRAG_THRESHOLD = 3;
 export declare const WHEEL_SENSITIVITY = 0.001;
 export declare function closeTo(a: number | null | undefined, b: number | null | undefined): boolean;
-export declare function createPanModeHandlers(setActive: (active: boolean) => void): {
+/**
+ * Space-held pan mode for brushes, wired to <svelte:window> keydown, keyup and
+ * blur. Each change calls `reroutePress` (the chart's), so a press already
+ * under way switches between panning and brushing where the pointer is now:
+ * with three-finger drag on a trackpad, one press can last seconds after the
+ * fingers lift. Key repeats while Space is held change nothing. Blur ends pan
+ * mode: a Space released while the window is unfocused sends no keyup.
+ */
+export declare function createPanModeHandlers(setActive: (active: boolean) => void, reroutePress: () => void): {
     handleKeyDown: (event: KeyboardEvent) => void;
     handleKeyUp: (event: KeyboardEvent) => void;
+    handleBlur: () => void;
 };
+/** The parts of a brush overlay a press can land on, from its `data-brush-handle`. */
+export type BrushHandle = 'move' | 'left' | 'right' | 'top' | 'bottom' | 'nw' | 'ne' | 'sw' | 'se';
+/**
+ * The brush handle under a press, read from the overlay's DOM: its element's
+ * `data-brush-handle`, and the `data-brush-owner` of its overlay (a parallel
+ * axis's column), or null when the press is not on a brush.
+ */
+export declare function brushHandleAt(target: Element | null): {
+    handle: BrushHandle;
+    owner: string | null;
+} | null;
 export declare function scaleBrushExtent1D(min: number, max: number, scaleFactor: number): [number, number];
 export declare function scaleBrushExtent2D(xMin: number, xMax: number, yMin: number, yMax: number, scaleFactor: number): {
     x: [number, number];

package/dist/interactors/brush-utils.js

@@ -15,18 +15,46 @@ export function closeTo(a, b) {
     }
     return diff < EPS_ABSOLUTE;
 }
-export function createPanModeHandlers(setActive) {
+/**
+ * Space-held pan mode for brushes, wired to <svelte:window> keydown, keyup and
+ * blur. Each change calls `reroutePress` (the chart's), so a press already
+ * under way switches between panning and brushing where the pointer is now:
+ * with three-finger drag on a trackpad, one press can last seconds after the
+ * fingers lift. Key repeats while Space is held change nothing. Blur ends pan
+ * mode: a Space released while the window is unfocused sends no keyup.
+ */
+export function createPanModeHandlers(setActive, reroutePress) {
+    let active = false;
+    const set = (next) => {
+        if (next === active)
+            return;
+        active = next;
+        setActive(next);
+        reroutePress();
+    };
     const handleKeyDown = (event) => {
-        if (event.code === 'Space') {
-            setActive(true);
-        }
+        if (event.code === 'Space')
+            set(true);
     };
     const handleKeyUp = (event) => {
-        if (event.code === 'Space') {
-            setActive(false);
-        }
+        if (event.code === 'Space')
+            set(false);
+    };
+    return { handleKeyDown, handleKeyUp, handleBlur: () => set(false) };
+}
+/**
+ * The brush handle under a press, read from the overlay's DOM: its element's
+ * `data-brush-handle`, and the `data-brush-owner` of its overlay (a parallel
+ * axis's column), or null when the press is not on a brush.
+ */
+export function brushHandleAt(target) {
+    const el = target?.closest?.('[data-brush-handle]');
+    if (!el)
+        return null;
+    return {
+        handle: el.getAttribute('data-brush-handle'),
+        owner: el.closest('[data-brush-owner]')?.getAttribute('data-brush-owner') ?? null
     };
-    return { handleKeyDown, handleKeyUp };
 }
 export function scaleBrushExtent1D(min, max, scaleFactor) {
     const center = (min + max) / 2;

package/dist/query-engine/index.d.ts

@@ -5,13 +5,23 @@
  *   import { setQueryContext } from './';
  *   setQueryContext(wasm.getConnection());  // Promise OK — resolves lazily
  *
- * Usage in spec renderer:
- *   context.set('query-engine', new QueryEngine(connection));
- *   context.set('filter-groups', new FilterGroupRegistry());
+ * Usage outside a component (the spec renderer), passing contexts to mount():
+ *   const { filterGroups } = createQueryServices(queryEngine);
+ *   context.set('query-engine', queryEngine);
+ *   context.set('filter-groups', filterGroups);
  */
 import { QueryEngine } from './QueryEngine';
 import type { DuckDBConnection } from './QueryEngine';
 import { FilterGroupRegistry } from './FilterGroupRegistry.svelte';
+/**
+ * Create the FilterGroupRegistry for an engine and wire both to the schema
+ * service. Brushes and toggles reach the engine only through this wiring:
+ * a FilterGroup without an engine updates its selection but never re-queries.
+ */
+export declare function createQueryServices(queryEngine: QueryEngine): {
+    queryEngine: QueryEngine;
+    filterGroups: FilterGroupRegistry;
+};
 /**
  * Create QueryEngine + FilterGroupRegistry and set Svelte contexts.
  * Call this synchronously in a component's <script> block.

package/dist/query-engine/index.js

@@ -5,24 +5,33 @@
  *   import { setQueryContext } from './';
  *   setQueryContext(wasm.getConnection());  // Promise OK — resolves lazily
  *
- * Usage in spec renderer:
- *   context.set('query-engine', new QueryEngine(connection));
- *   context.set('filter-groups', new FilterGroupRegistry());
+ * Usage outside a component (the spec renderer), passing contexts to mount():
+ *   const { filterGroups } = createQueryServices(queryEngine);
+ *   context.set('query-engine', queryEngine);
+ *   context.set('filter-groups', filterGroups);
  */
 import { setContext, getContext } from 'svelte';
 import { QueryEngine } from './QueryEngine';
 import { FilterGroupRegistry } from './FilterGroupRegistry.svelte';
 import { tableSchemaService } from '../data/TableSchemaService.svelte';
+/**
+ * Create the FilterGroupRegistry for an engine and wire both to the schema
+ * service. Brushes and toggles reach the engine only through this wiring:
+ * a FilterGroup without an engine updates its selection but never re-queries.
+ */
+export function createQueryServices(queryEngine) {
+    const filterGroups = new FilterGroupRegistry();
+    filterGroups.setEngine(queryEngine);
+    tableSchemaService.setQueryEngine(queryEngine);
+    return { queryEngine, filterGroups };
+}
 /**
  * Create QueryEngine + FilterGroupRegistry and set Svelte contexts.
  * Call this synchronously in a component's <script> block.
  * Accepts a Promise<DuckDBConnection> — queries defer until it resolves.
  */
 export function setQueryContext(connection) {
-    const queryEngine = new QueryEngine(connection);
-    const filterGroups = new FilterGroupRegistry();
-    filterGroups.setEngine(queryEngine);
-    tableSchemaService.setQueryEngine(queryEngine);
+    const { queryEngine, filterGroups } = createQueryServices(new QueryEngine(connection));
     setContext('query-engine', queryEngine);
     setContext('filter-groups', filterGroups);
     return { queryEngine, filterGroups };

package/dist/spec/index.js

@@ -17,8 +17,7 @@
 import { mount, unmount } from 'svelte';
 import { ScaleRegistry } from '../scales/ScaleRegistry.svelte';
 import { GPUCoordinator } from '../gpu/GPUCoordinator.svelte';
-import { FilterGroupRegistry } from '../query-engine/FilterGroupRegistry.svelte';
-import { tableSchemaService } from '../data/TableSchemaService.svelte';
+import { createQueryServices } from '../query-engine';
 import { getOrCreateQueryEngine, loadData } from './LazyQueryEngine';
 import LayoutFromSpec from './LayoutFromSpec.svelte';
 /**
@@ -47,8 +46,7 @@ export async function render(target, spec, options = {}) {
     }
     // 4. Build context map — injected into Svelte mount() so child components
     //    find these via getContext() calls (same keys as initFjader())
-    const filterGroups = new FilterGroupRegistry();
-    tableSchemaService.setQueryEngine(queryEngine);
+    const { filterGroups } = createQueryServices(queryEngine);
     const context = new Map();
     context.set('query-engine', queryEngine);
     context.set('filter-groups', filterGroups);

package/dist/types.d.ts

@@ -338,12 +338,34 @@ export interface ChartContext {
     readonly fxDomain?: DimValue[] | null;
     readonly config: ChartConfig;
     onChartClick: ((event: PointerEvent) => void) | null;
-    onInteractorPointerDown: ((event: PointerEvent, innerPoint: Point) => boolean) | null;
+    /**
+     * A press, offered to the interactor before the chart pans. `target` is the
+     * element under the pointer, which a brush reads for the handle it is on
+     * (brushHandleAt); `innerPoint` is in plot-area coordinates. Returns true when
+     * the interactor takes the press. Called again when the chart re-routes a
+     * press under way (reroutePress).
+     */
+    onInteractorPointerDown: ((target: Element, pointerId: number, innerPoint: Point) => boolean) | null;
     /** Every pointer move but a pan; `innerPoint` is the pointer in plot-area coordinates (a
      *  shared buffer: read it before calling back into the layout). Returns true when the
      *  interactor handled the move (a drag it captured). */
     onInteractorPointerMove: ((event: PointerEvent, innerPoint: Point) => boolean) | null;
     onInteractorPointerUp: ((event: PointerEvent) => boolean) | null;
+    /**
+     * End the interactor's drag where it is, as a pointer up would but without
+     * treating a drag that never moved as a click (which clears a brush). The
+     * chart calls it when it re-routes the press.
+     */
+    onInteractorDragEnd: (() => void) | null;
+    /**
+     * Route the press under way again, as if it began now where the pointer is:
+     * end what it is doing (a pan, or the interactor's drag), then offer it to
+     * the interactor and pan if declined, as a new press would be. Brushes call
+     * it when Space changes, since one press can outlast that: with three-finger
+     * drag on a trackpad it goes on for seconds after the fingers lift. Without a
+     * press under way it does nothing.
+     */
+    reroutePress: () => void;
     /**
      * Selection sources to activate when the pointer enters the chart, so their
      * preagg tables exist before the first gesture. Interactors add their

package/package.json

@@ -18,7 +18,7 @@
 		"type": "git",
 		"url": "git+https://github.com/dlyngman/fjader.git"
 	},
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"exports": {