@fjader/svelte 0.2.3 → 0.2.4

package/dist/interactors/Toggle.svelte

@@ -70,7 +70,7 @@
 	function bandCategoryAt(
 		axis: 'x' | 'y',
 		innerPos: number
-	): { field: string; value: unknown } | null {
+	): { field: string; value: unknown; otherId: number | null } | null {
 		if (chart.scaleTypes?.[axis] !== 'band') return null;
 		const bandState = chart[`${axis}ScaleState`] as BandScaleState;
 		const extent = axis === 'x' ? chart.innerWidth : chart.innerHeight;
@@ -79,7 +79,28 @@
 		const id = bandState.idAtSlot(slot);
 		// undefined is "no category here"; null is the NULL category, a real one.
 		const value = id == null ? undefined : bandState.categoryAt(id);
-		return value === undefined ? null : { field: bandState.sourceField, value };
+		if (value === undefined) return null;
+		// The axis's Other bucket: its label is no value, so the click selects
+		// what it holds instead.
+		const otherId = id != null && id === bandState.otherId ? id : null;
+		return { field: bandState.sourceField, value, otherId };
+	}
+
+	/**
+	 * The Other bucket an inner click hit, or null: the hit row's band id on an
+	 * axis of the declared field, when it is that axis's Other. The label in
+	 * the row can't say, so the tooltip keeps the raw id beside it.
+	 */
+	function otherHit(point: Record<string, unknown>): number | null {
+		if (!declaredField) return null;
+		for (const axis of ['x', 'y'] as const) {
+			if (chart.scaleTypes?.[axis] !== 'band') continue;
+			const bandState = chart[`${axis}ScaleState`] as BandScaleState;
+			if (bandState.sourceField !== declaredField) continue;
+			const id = point[axis === 'x' ? '__bandIdX' : '__bandIdY'];
+			if (typeof id === 'number' && id === bandState.otherId) return id;
+		}
+		return null;
 	}
 
 	chart.onChartClick = (event) => {
@@ -91,6 +112,12 @@
 		// Path 1: Inner area click — use tooltip hit data (don't require visible —
 		// pointer micro-movement during click hides tooltip but data stays valid)
 		if (xInBounds && yInBounds && tm?.currentPoint) {
+			const otherId = otherHit(tm.currentPoint);
+			if (otherId !== null) {
+				const facetId = tm.currentPoint.__facetId;
+				declared.toggleOther(otherId, typeof facetId === 'number' ? facetId : null, isMulti);
+				return;
+			}
 			const tuple = fields.map((f) => tm.currentPoint![f]);
 			// A missing field is undefined; null is the NULL category, selectable.
 			if (tuple.some((v) => v === undefined)) return;
@@ -106,7 +133,9 @@
 					? bandCategoryAt('x', innerPoint.x)
 					: null;
 		if (hit) {
-			toggleFor(hit.field)?.toggle([hit.value], isMulti);
+			const toggle = toggleFor(hit.field);
+			if (hit.otherId !== null) toggle?.toggleOther(hit.otherId, null, isMulti);
+			else toggle?.toggle([hit.value], isMulti);
 			return;
 		}
 

package/dist/interactors/Tooltip.svelte

@@ -2,8 +2,12 @@
   Tooltip.svelte - Display component for data tooltips.
 
   Reads from TooltipManager (via context) and renders a floating tooltip
-  at the cursor position. Uses CSS anchor positioning for automatic
-  edge-aware placement.
+  at the cursor. It is a manual popover, so it paints in the top layer and no
+  overflow, scroll area, stacking context or transformed ancestor clips it. It
+  stays in the chart's DOM, so inherited theme variables and scoped styles still
+  apply. Placed in viewport pixels with the `translate` property (no layout per
+  move), flipped and clamped against the viewport, and measured by a
+  ResizeObserver rather than by reading its size.
 
   Always renders one point at a time (stable layout). When multiple
   points match, colored dots appear at the bottom and the user can
@@ -14,6 +18,7 @@
 	import { format as d3format } from 'd3-format';
 	import { categoryLabel } from '../query-engine/categorical-identity';
 	import type { ChartContext, ContinuousScaleState } from '../types';
+	import { otherTooltipRows } from './other-tooltip';
 
 	const commaFormat = d3format(',.4~g');
 
@@ -36,40 +41,76 @@
 	let colorField = $derived(tm?.currentColorField ?? null);
 	let channelFields = $derived(tm?.currentChannelFields ?? null);
 	let displayFields = $derived(tm?.currentDisplayFields ?? null);
-	let px = $derived(tm?.pointerScreenX ?? 0);
-	let py = $derived(tm?.pointerScreenY ?? 0);
+	let px = $derived(tm?.pointerClientX ?? 0);
+	let py = $derived(tm?.pointerClientY ?? 0);
 
-	// High-water mark for tooltip width — grows but never shrinks.
-	let tooltipEl: HTMLDivElement;
+	// The tooltip's size, from a ResizeObserver: read after the browser's own
+	// layout, so measuring forces none. Its width is a high-water mark (grows,
+	// never shrinks) so it does not jitter between points: content wider than
+	// min-width makes the observed width exceed it, and min-width follows.
 	let minWidth = $state(0);
 	let tooltipW = $state(0);
 	let tooltipH = $state(0);
 
-	$effect(() => {
-		// Dependencies: re-measure when focused point or index changes
-		void point;
-		void focusedIndex;
-		if (!visible || !tooltipEl) return;
-		const prev = tooltipEl.style.minWidth;
-		tooltipEl.style.minWidth = '0px';
-		const natural = tooltipEl.offsetWidth;
-		tooltipEl.style.minWidth = prev;
-		if (natural > minWidth) minWidth = natural;
-		tooltipW = tooltipEl.offsetWidth;
-		tooltipH = tooltipEl.offsetHeight;
-	});
+	function measure(el: HTMLElement) {
+		const observer = new ResizeObserver((entries) => {
+			const box = entries[entries.length - 1].borderBoxSize[0];
+			// A closed popover is display: none and reports 0: keep the last size.
+			if (box.inlineSize === 0) return;
+			tooltipW = box.inlineSize;
+			tooltipH = box.blockSize;
+			if (box.inlineSize > minWidth) minWidth = box.inlineSize;
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}
+
+	// The viewport, without the scrollbars. Read when the tooltip opens and on
+	// resize, never per move.
+	let viewW = $state(0);
+	let viewH = $state(0);
+	function readViewport() {
+		const root = document.documentElement;
+		viewW = root.clientWidth;
+		viewH = root.clientHeight;
+	}
+
+	// Open in the top layer while shown; closed again once it has faded out, so a
+	// page of charts keeps at most the hovered one's tooltip there.
+	function popover(el: HTMLElement) {
+		if (visible && !el.matches(':popover-open')) {
+			readViewport();
+			el.showPopover();
+		}
+	}
+	function handleTransitionEnd(event: TransitionEvent) {
+		const el = event.currentTarget as HTMLElement;
+		if (event.propertyName === 'opacity' && !visible && el.matches(':popover-open')) {
+			el.hidePopover();
+		}
+	}
 
-	// Flip when tooltip would overflow chart bounds, with hysteresis to prevent jitter
+	// Left of the cursor when it fits, else right; below it, else above. With
+	// hysteresis so it does not jitter at the edge. Then clamped into the viewport,
+	// for a tooltip that fits on neither side.
 	const GAP = 12;
 	const HYSTERESIS = 40;
-	let flippedX = $state(true);
-	let flippedY = $state(false);
-	$effect(() => {
+	const MARGIN = 8;
+	let leftOfCursor = true;
+	let aboveCursor = false;
+	const flippedX = $derived.by(() => {
 		const spaceLeft = px - tooltipW - GAP;
-		flippedX = spaceLeft >= 0 && (!flippedX ? spaceLeft >= HYSTERESIS : true);
-		const spaceY = chart.height - py - tooltipH;
-		flippedY = spaceY < 0 || (flippedY && spaceY < HYSTERESIS);
+		leftOfCursor = spaceLeft >= 0 && (leftOfCursor || spaceLeft >= HYSTERESIS);
+		return leftOfCursor;
 	});
+	const flippedY = $derived.by(() => {
+		const spaceBelow = viewH - py - tooltipH;
+		aboveCursor = spaceBelow < 0 || (aboveCursor && spaceBelow < HYSTERESIS);
+		return aboveCursor;
+	});
+	const clamp = (v: number, max: number) => Math.max(MARGIN, Math.min(v, max - MARGIN));
+	const left = $derived(clamp(flippedX ? px - tooltipW - GAP : px + GAP, viewW - tooltipW));
+	const top = $derived(clamp(flippedY ? py - tooltipH + 4 : py - 4, viewH - tooltipH));
 
 	// Transform origin: corner nearest the anchor point
 	let originX = $derived(flippedX ? '100%' : '0%');
@@ -95,7 +136,8 @@
 		if (!point) return [];
 		if (displayFields) return displayFields.filter((k) => k in point);
 		if (fields) return fields.filter((k) => k in point);
-		return Object.keys(point);
+		// Keys starting with `_` are kept for clicks (a band's raw id), never shown.
+		return Object.keys(point).filter((k) => !k.startsWith('_'));
 	});
 
 	// Scale-aware formatters for numeric values (same as MarginLabel)
@@ -110,6 +152,14 @@
 			: null
 	);
 
+	// An Other bar's rows, after the point's own: written with the value axis's format.
+	let otherRows = $derived.by(() => {
+		const stats = tm?.focusedOtherStats;
+		if (!stats || !point) return [];
+		const format = ('__bandIdX' in point ? yFormat : xFormat) ?? commaFormat;
+		return otherTooltipRows(stats, format);
+	});
+
 	function formatValue(key: string, value: unknown) {
 		if (formatters[key]) return formatters[key](value);
 		if (typeof value === 'number') {
@@ -123,20 +173,23 @@
 
 	const channelIcons: Record<string, string> = { x: '\u2192', y: '\u2191' };
 
-	// Computed style values — kept here so Prettier can't break them by line-wrapping
-	const translateX = $derived(flippedX ? 'calc(-100% - 12px)' : '12px');
-	const translateY = $derived(flippedY ? 'calc(-100% + 4px)' : '-4px');
-	const translate = $derived(`${translateX} ${translateY}`);
+	// Computed style values — kept here so Prettier can't break them by line-wrapping.
+	// `translate`, not `transform` or left/top: it moves the box without layout, and
+	// it applies after `scale`, so the pop-in scales about the box's own corner.
+	const translate = $derived(`${left}px ${top}px`);
 	const transformOrigin = $derived(`${originX} ${originY}`);
 </script>
 
-<!-- Tooltip positioned via JS with flip detection -->
+<svelte:window onresize={readViewport} />
+
+<!-- In the top layer, placed in viewport pixels with flip detection -->
 <div
 	class="tooltip"
 	class:visible
-	bind:this={tooltipEl}
-	style:left="{px}px"
-	style:top="{py}px"
+	popover="manual"
+	{@attach measure}
+	{@attach popover}
+	ontransitionend={handleTransitionEnd}
 	style:translate
 	style:transform-origin={transformOrigin}
 	style:min-width="{minWidth}px"
@@ -155,6 +208,12 @@
 			</span>
 		</div>
 	{/each}
+	{#each otherRows as row (row.key)}
+		<div class="row">
+			<span class="key">{row.key}</span>
+			<span class="value">{row.value}</span>
+		</div>
+	{/each}
 	<div class="dots" class:show={isMulti}>
 		{#each matched as m, i (i)}
 			<span
@@ -168,24 +227,53 @@
 
 <style>
 	.tooltip {
-		position: absolute;
-		background: var(--fjader-tooltip-bg, rgba(0, 0, 0, 0.88));
-		color: var(--fjader-tooltip-text, #ffffff);
+		/* A popover in the top layer: fixed to the viewport at its origin, placed by
+		   translate. Resets the UA popover box (inset, margin, border, overflow). */
+		position: fixed;
+		inset: 0 auto auto 0;
+		margin: 0;
+		border: 0;
+		overflow: visible;
+		/* Colours, highest first: the app's --fjader-tooltip-bg/-text; the mode a
+		   data-fjader-tooltip ancestor picks; contrast. light-dark() resolves against
+		   the color-scheme the tooltip inherits from the chart's DOM ancestors. */
+		background: var(
+			--fjader-tooltip-bg,
+			var(--_fjader-tooltip-bg, light-dark(rgba(0, 0, 0, 0.88), rgba(255, 255, 255, 0.92)))
+		);
+		color: var(--fjader-tooltip-text, var(--_fjader-tooltip-text, light-dark(#ffffff, #111827)));
 		padding: 6px 10px;
 		border-radius: 4px;
 		font-family: var(--fjader-font, system-ui, sans-serif);
 		font-size: 12px;
 		line-height: 1.4;
 		pointer-events: none;
-		z-index: 1000;
 		white-space: nowrap;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+		box-shadow:
+			0 0 0 1px var(--_fjader-tooltip-ring, transparent),
+			0 2px 8px rgba(0, 0, 0, 0.25);
 		opacity: 0;
 		scale: 0.78;
 		transition:
 			opacity 100ms ease-out,
 			scale 200ms cubic-bezier(0.34, 1.3, 0.64, 1);
-		will-change: opacity, scale;
+		will-change: opacity, scale, translate;
+	}
+
+	/* The mode, set on any ancestor (the page, a panel, a chart through ChartContainer's
+	   tooltipScheme): custom properties inherit, so the nearest one wins. `contrast` is
+	   the opposite of the scheme, `follow` the same, with a ring to separate it from a
+	   background of its own colour. */
+	:global([data-fjader-tooltip='contrast']) {
+		--_fjader-tooltip-bg: light-dark(rgba(0, 0, 0, 0.88), rgba(255, 255, 255, 0.92));
+		--_fjader-tooltip-text: light-dark(#ffffff, #111827);
+		--_fjader-tooltip-ring: transparent;
+	}
+
+	:global([data-fjader-tooltip='follow']) {
+		--_fjader-tooltip-bg: light-dark(rgba(255, 255, 255, 0.96), rgba(31, 41, 55, 0.96));
+		--_fjader-tooltip-text: light-dark(#111827, #f9fafb);
+		--_fjader-tooltip-ring: light-dark(rgba(17, 24, 39, 0.1), rgba(255, 255, 255, 0.12));
 	}
 
 	.tooltip.visible {
@@ -193,6 +281,15 @@
 		scale: 1;
 	}
 
+	/* Opening the popover takes it out of display: none, which runs no transition:
+	   start the pop-in from the hidden look. */
+	@starting-style {
+		.tooltip.visible {
+			opacity: 0;
+			scale: 0.78;
+		}
+	}
+
 	.row {
 		display: flex;
 		gap: 8px;

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

@@ -1,3 +1,4 @@
+import type { OtherRowStats } from '../components/marks/lifecycle/other-rows.svelte';
 import type { QueryEngine } from '../query-engine/QueryEngine';
 import type { D3Scale, ScaleStateInstance } from '../types';
 import type { DimValue } from '../query-engine/categorical-identity';
@@ -50,6 +51,11 @@ interface TooltipMarkRegistration {
     };
     constantRadius?: number;
     displayFields?: string[] | null;
+    /**
+     * What an Other bar's point holds, for the tooltip to add its rows; read at
+     * display time, so a selection that changes under the pointer shows at once.
+     */
+    otherStats?: (point: DataRow) => OtherRowStats | null;
     proximityAxis: 'x' | 'y' | 'xy';
     enabled: boolean;
 }
@@ -83,11 +89,13 @@ export declare class TooltipManager {
     currentChannelFields: Record<string, string> | null;
     currentDisplayFields: string[] | null;
     visible: boolean;
-    pointerScreenX: number;
-    pointerScreenY: number;
+    pointerClientX: number;
+    pointerClientY: number;
     matchedRadius: number | null;
     get focusedPoint(): DataRow | null;
     get focusedMatch(): MatchedPoint | null;
+    /** The focused point's Other numbers, or null where it is not an Other bar. */
+    get focusedOtherStats(): OtherRowStats | null;
     get currentPoint(): DataRow | null;
     get currentColor(): string | null;
     get matchedScreenX(): number | null;
@@ -97,6 +105,12 @@ export declare class TooltipManager {
      * Update the cursor's data-space position. Called directly from pointer move handler.
      */
     updatePosition(xData: number | null, yData: number | null): void;
+    /**
+     * Run the hover query again at the last position, if the pointer is still
+     * in the chart: a mark's tooltip table was rewritten under a still pointer,
+     * so the row it shows is the old data's. The next frame runs it.
+     */
+    refresh(): void;
     /**
      * Cycle the focused point index by delta. Wraps around.
      * Remembers the focused category so it persists across cursor moves.
@@ -121,10 +135,11 @@ export declare class TooltipManager {
      */
     get currentMarkLOD(): MarkLODSurface | null;
     /**
-     * Update raw screen position for tooltip positioning.
-     * Called from chart container's pointer move handler.
+     * The pointer's viewport (client) position, where the tooltip is placed: it
+     * renders in the top layer, outside the chart's clipping ancestors. Called from
+     * the chart's pointer move handler.
      */
-    updatePointerScreen(x: number, y: number): void;
+    updatePointerClient(x: number, y: number): void;
     /**
      * Called once per animation frame by GPUCoordinator's render loop.
      */

package/dist/interactors/TooltipManager.svelte.js

@@ -35,8 +35,8 @@ export class TooltipManager {
     currentChannelFields = $state(null);
     currentDisplayFields = $state(null);
     visible = $state(false);
-    pointerScreenX = $state(0);
-    pointerScreenY = $state(0);
+    pointerClientX = $state(0);
+    pointerClientY = $state(0);
     matchedRadius = $state(null);
     // Focused point getters — used by Tooltip and HoverIndicator
     get focusedPoint() {
@@ -45,6 +45,12 @@ export class TooltipManager {
     get focusedMatch() {
         return this.matchedPoints[this.focusedIndex] ?? null;
     }
+    /** The focused point's Other numbers, or null where it is not an Other bar. */
+    get focusedOtherStats() {
+        const point = this.focusedPoint;
+        const stats = this.currentMarkId ? this.#marks.get(this.currentMarkId)?.otherStats : null;
+        return point && stats ? stats(point) : null;
+    }
     // Backwards-compat getters
     get currentPoint() {
         return this.currentPoints[0] ?? null;
@@ -81,6 +87,15 @@ export class TooltipManager {
         this.#pendingY = yData;
         this.#hasPending = true;
     }
+    /**
+     * Run the hover query again at the last position, if the pointer is still
+     * in the chart: a mark's tooltip table was rewritten under a still pointer,
+     * so the row it shows is the old data's. The next frame runs it.
+     */
+    refresh() {
+        if (this.#cursorActive)
+            this.#hasPending = true;
+    }
     /**
      * Cycle the focused point index by delta. Wraps around.
      * Remembers the focused category so it persists across cursor moves.
@@ -129,12 +144,13 @@ export class TooltipManager {
         return this.#chartConfig.getMarkLOD(this.currentMarkId) ?? null;
     }
     /**
-     * Update raw screen position for tooltip positioning.
-     * Called from chart container's pointer move handler.
+     * The pointer's viewport (client) position, where the tooltip is placed: it
+     * renders in the top layer, outside the chart's clipping ancestors. Called from
+     * the chart's pointer move handler.
      */
-    updatePointerScreen(x, y) {
-        this.pointerScreenX = x;
-        this.pointerScreenY = y;
+    updatePointerClient(x, y) {
+        this.pointerClientX = x;
+        this.pointerClientY = y;
     }
     // =========================================================================
     // QUERY SCHEDULING (driven by animation loop)
@@ -562,6 +578,12 @@ export class TooltipManager {
         let rangeInsertIndex = -1;
         for (let i = 0; i < entries.length; i++) {
             const [key, value] = entries[i];
+            // The facet cell's dim id, kept for a click (Toggle reads it to pick the
+            // clicked cell's Other); not displayed: `_` keys never are.
+            if (key === '__facet') {
+                point.__facetId = value;
+                continue;
+            }
             // Skip internal columns
             if (key.startsWith('_') || key.startsWith('__dplot_'))
                 continue;
@@ -583,6 +605,9 @@ export class TooltipManager {
                 // (Toggle selects it) rather than fall back to the raw id.
                 const category = this.#bandScale(key)?.categoryAt(value);
                 point[fieldName] = category === undefined ? value : category;
+                // The raw id beside it: a label can't name an Other bucket (several
+                // share one, and it is no value), so a click on Other reads this.
+                point[key === 'x' ? '__bandIdX' : '__bandIdY'] = value;
                 continue;
             }
             // Resolve time offset to formatted datetime string

package/dist/interactors/other-tooltip.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The rows an Other bar's tooltip adds: how many categories it holds, and,
+ * while a selection reaches into it, how much of it is selected.
+ */
+import type { OtherRowStats } from '../components/marks/lifecycle/other-rows.svelte';
+export interface OtherTooltipRow {
+    key: string;
+    value: string;
+}
+/**
+ * `format` writes a sum the way the chart writes its value axis. Rows:
+ * - categories: "41", or "3 of 41" while a selection is active;
+ * - selected: "1,234 of 5,678 (22%)", only while a selection is active.
+ * A share that rounds to 0 but is not 0 reads "<1%", so a sliver is not "0%".
+ */
+export declare function otherTooltipRows(stats: OtherRowStats, format: (value: number) => string): OtherTooltipRow[];

package/dist/interactors/other-tooltip.js

@@ -0,0 +1,22 @@
+/**
+ * The rows an Other bar's tooltip adds: how many categories it holds, and,
+ * while a selection reaches into it, how much of it is selected.
+ */
+/**
+ * `format` writes a sum the way the chart writes its value axis. Rows:
+ * - categories: "41", or "3 of 41" while a selection is active;
+ * - selected: "1,234 of 5,678 (22%)", only while a selection is active.
+ * A share that rounds to 0 but is not 0 reads "<1%", so a sliver is not "0%".
+ */
+export function otherTooltipRows(stats, format) {
+    const count = String(stats.memberCount);
+    if (!stats.active)
+        return [{ key: 'categories', value: count }];
+    const percent = stats.total === 0 ? 0 : (100 * stats.picked) / stats.total;
+    const rounded = Math.round(percent);
+    const share = rounded === 0 && stats.picked > 0 ? '<1%' : `${rounded}%`;
+    return [
+        { key: 'categories', value: `${stats.pickedCount} of ${count}` },
+        { key: 'selected', value: `${format(stats.picked)} of ${format(stats.total)} (${share})` }
+    ];
+}

package/dist/query-engine/FieldActivity.svelte.d.ts

@@ -2,6 +2,21 @@ import type { ClockLoop } from '../animation';
 import { ActivityTable } from '../scales/ActivityTable';
 import type { FieldIdentity } from './categorical-identity';
 /** What a FieldActivity needs from the page around it. */
+/** One mark's Other rows for one bucket: what a click on it selects. */
+export interface OtherEntry {
+    /** The mark's filter group, or null when it is filtered by the selection (`'filter'`). */
+    group: number | null;
+    /** One per Other row: a facet cell (null without facets) and its folded ids. */
+    rows: {
+        facetId: number | null;
+        ids: ArrayLike<number>;
+    }[];
+}
+/** What a click on Other does to a selection: values to set, add or remove. */
+export interface OtherClick {
+    action: 'replace' | 'add' | 'remove';
+    values: unknown[];
+}
 export interface FieldActivityHost {
     /** Drives the fades; null in unit tests and before a coordinator exists, and fades land at once. */
     readonly loop: ClockLoop | null;
@@ -35,12 +50,28 @@ export declare const DETACHED_HOST: FieldActivityHost;
  * `reconcile` runs from the packer and from `set`, never from a reader, so
  * nothing is resized or retargeted while a template renders.
  */
+/**
+ * THE FREE SLOT. Each group's table holds one slot past the field's ids: 1 while
+ * the group selects nothing on the field, 0 while it selects anything, faded on
+ * the same clock as every id. The shader reads it as the last slot of the
+ * group's run (identityFreeActivity): an Other bar's unselected part dims by it,
+ * so clearing a selection fades it back in with the other bars, rather than its
+ * split sliding.
+ */
 export declare class FieldActivity {
     #private;
     readonly key: string;
     constructor(key: string, host?: FieldActivityHost);
-    /** How many ids the tables cover: the applied identity's, 0 without one. */
+    /**
+     * How many slots the tables cover: one per id of the applied identity, and
+     * one past them (FREE_SLOT); 0 without an identity.
+     */
     get count(): number;
+    /**
+     * Group `index`'s selected values, or null when it selects nothing on this
+     * field. Reactive: a reader re-runs when the selection changes.
+     */
+    selectedValues(index: number): ReadonlySet<unknown> | null;
     /** Group `index`'s fade, or null when that group never selected on this field. */
     fadeOf(index: number): ActivityTable | null;
     /**
@@ -76,4 +107,22 @@ export declare class FieldActivity {
      * live: a label is never dimmed on a guess.
      */
     opacityOfId(index: number, id: number, inactiveOpacity?: number): number;
+    /** Register `markId`'s Other rows under `otherId`; null removes them. */
+    setOther(otherId: number, markId: string, entry: OtherEntry | null): void;
+    /**
+     * What a click on Other `otherId` does to group `group`'s selection, given
+     * the values it holds now (`current`), and records it. Null when nothing is
+     * registered under the id (no result yet) or it holds no members.
+     *
+     * - The members: every registered row under the id, or only facet cell
+     *   `facetId`'s when the click came from a cell.
+     * - Shift-click adds them, or takes back what this Other added before if it
+     *   is still selected.
+     * - A plain click on an Other whose marks all filter by the selection (no
+     *   group: `'filter'`) drills down, replacing the selection: such an Other is
+     *   computed inside the selection, so a second click means "the rest of it".
+     * - Otherwise a plain click toggles: it takes back what this Other added if
+     *   that is still selected, and replaces the selection with the members if not.
+     */
+    otherClick(group: number, otherId: number, facetId: number | null, current: ReadonlySet<unknown>, multi: boolean): OtherClick | null;
 }