@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -1,456 +1,417 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Action from '../../../Action.svelte';
-	import Checkbox from '../../../Checkbox.svelte';
-	import ThreeStateRadio from '../../../ThreeStateRadio.svelte';
-	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../../Types/Context/TableInitOptions.js';
-	import { Size } from '../../../../Types/Internal/Size.js';
-	import { Ternary } from '../../../../Types/Internal/Ternary.js';
-	import { getContext } from 'svelte';
-	import type { ColumnListRowProps } from './ColumnListRowProps.js';
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const { columnDef }: ColumnListRowProps<T> = $props();
-
-	/**
-	 * Position of this column inside the sorted column list. Drives the
-	 * disabled state of the "move up" / "move down" buttons and supplies
-	 * the target index to `moveColumnTo`. Sort by `index` (the stable
-	 * layout identity) rather than relying on `columnDefs` iteration order.
-	 */
-	const sortedColumns = $derived(tableContext.columnDefs.slice().sort((a, b) => a.index - b.index));
-	const currentIndex = $derived(
-		columnDef == null ? -1 : sortedColumns.findIndex((it) => it.id === columnDef.id)
-	);
-	const isAtTop = $derived(currentIndex <= 0);
-	const isAtBottom = $derived(currentIndex === -1 || currentIndex >= sortedColumns.length - 1);
-
-	function moveUp(): void {
-		if (columnDef == null || isAtTop) {
-			return;
-		}
-		preserveListScroll(() => {
-			tableContext.moveColumnTo(currentIndex, currentIndex - 1);
-		});
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>import Action from "../../../Action.svelte";
+import Checkbox from "../../../Checkbox.svelte";
+import ThreeStateRadio from "../../../ThreeStateRadio.svelte";
+import { TableContext } from "../../Types/Context/TableContext.svelte.js";
+import { Size } from "../../../../Types/Internal/Size.js";
+import { Ternary } from "../../../../Types/Internal/Ternary.js";
+import { getContext } from "svelte";
+const tableContext = getContext(TableContext.identifier);
+const { columnDef } = $props();
+/**
+* Position of this column inside the sorted column list. Drives the
+* disabled state of the "move up" / "move down" buttons and supplies
+* the target index to `moveColumnTo`. Sort by `index` (the stable
+* layout identity) rather than relying on `columnDefs` iteration order.
+*/
+const sortedColumns = $derived(tableContext.columnDefs.slice().sort((a, b) => a.index - b.index));
+const currentIndex = $derived(columnDef == null ? -1 : sortedColumns.findIndex((it) => it.id === columnDef.id));
+const isAtTop = $derived(currentIndex <= 0);
+const isAtBottom = $derived(currentIndex === -1 || currentIndex >= sortedColumns.length - 1);
+function moveUp() {
+	if (columnDef == null || isAtTop) {
+		return;
 	}
-
-	function moveDown(): void {
-		if (columnDef == null || isAtBottom) {
-			return;
-		}
-		preserveListScroll(() => {
-			tableContext.moveColumnTo(currentIndex, currentIndex + 1);
-		});
+	preserveListScroll(() => {
+		tableContext.moveColumnTo(currentIndex, currentIndex - 1);
+	});
+}
+function moveDown() {
+	if (columnDef == null || isAtBottom) {
+		return;
 	}
-
-	let isBeingTargeted = $state(false);
-	/** Bound `<li>` element used by `preserveListScroll` to find the
-	 *  enclosing `.column-list` even when the event target is the
-	 *  visibility checkbox's hidden `<input>` (which is
-	 *  `position: absolute` with no positioned ancestor and therefore
-	 *  drifts away from the row in the layout tree). */
-	let rowEl: HTMLLIElement | undefined = $state();
-
-	function disableDragVisual() {
-		isBeingTargeted = false;
+	preserveListScroll(() => {
+		tableContext.moveColumnTo(currentIndex, currentIndex + 1);
+	});
+}
+let isBeingTargeted = $state(false);
+/** Bound `<li>` element used by `preserveListScroll` to find the
+*  enclosing `.column-list` even when the event target is the
+*  visibility checkbox's hidden `<input>` (which is
+*  `position: absolute` with no positioned ancestor and therefore
+*  drifts away from the row in the layout tree). */
+let rowEl = $state();
+function disableDragVisual() {
+	isBeingTargeted = false;
+}
+function makeKVPairs(item, index) {
+	return [item, index];
+}
+/**
+* Pre-click scroll snapshot.
+*
+* When the user clicks a checkbox label, the browser fires a synthetic
+* click on the hidden `<input>` BEFORE `onchange` fires. That synthetic
+* click focuses the input, and the focus side effect scrolls the
+* column-list (and sometimes the window) to bring the 1x1px,
+* `clip-path`-ed input's bounding box into view. Reading `scrollTop`
+* inside `onchange` therefore captures the post-jump position and
+* "restoring" to it freezes the list at the wrong spot.
+*
+* Snapshotting on `mousedown` (which fires before the focus step)
+* captures the genuine pre-click position. The snapshot is re-applied
+* at multiple time points after the mutation so any later focus /
+* layout shift gets undone.
+*/
+let preClickListScroll = 0;
+let preClickWindowScrollX = 0;
+let preClickWindowScrollY = 0;
+/** Milliseconds `Date.now()` stamp of the last `snapshotScrollPosition`
+*  call. Lets `preserveListScroll` tell apart "click triggered toggle
+*  whose mousedown just snapshotted real pre-click state" from
+*  "keyboard or other path where the mousedown snapshot is stale". */
+let lastSnapshotAt = 0;
+/** Stale snapshots more than this many ms old are ignored. Tuned
+*  loose enough to survive any focus / click latency the browser
+*  might insert, but tight enough that an old click from minutes
+*  ago can't poison a later keyboard toggle. */
+const SNAPSHOT_FRESHNESS_MS = 500;
+function snapshotScrollPosition() {
+	const list = rowEl?.closest(".column-list");
+	preClickListScroll = list?.scrollTop ?? 0;
+	preClickWindowScrollX = typeof window !== "undefined" ? window.scrollX : 0;
+	preClickWindowScrollY = typeof window !== "undefined" ? window.scrollY : 0;
+	lastSnapshotAt = Date.now();
+}
+function restoreScrollPosition() {
+	const list = rowEl?.closest(".column-list");
+	if (list != null) {
+		list.scrollTop = preClickListScroll;
 	}
-
-	function makeKVPairs(item: string, index: number): readonly [string, number] {
-		return [item, index];
+	if (typeof window !== "undefined") {
+		window.scrollTo(preClickWindowScrollX, preClickWindowScrollY);
 	}
-
-	/**
-	 * Pre-click scroll snapshot.
-	 *
-	 * When the user clicks a checkbox label, the browser fires a synthetic
-	 * click on the hidden `<input>` BEFORE `onchange` fires. That synthetic
-	 * click focuses the input, and the focus side effect scrolls the
-	 * column-list (and sometimes the window) to bring the 1x1px,
-	 * `clip-path`-ed input's bounding box into view. Reading `scrollTop`
-	 * inside `onchange` therefore captures the post-jump position and
-	 * "restoring" to it freezes the list at the wrong spot.
-	 *
-	 * Snapshotting on `mousedown` (which fires before the focus step)
-	 * captures the genuine pre-click position. The snapshot is re-applied
-	 * at multiple time points after the mutation so any later focus /
-	 * layout shift gets undone.
-	 */
-	let preClickListScroll = 0;
-	let preClickWindowScrollX = 0;
-	let preClickWindowScrollY = 0;
-	/** Milliseconds `Date.now()` stamp of the last `snapshotScrollPosition`
-	 *  call. Lets `preserveListScroll` tell apart "click triggered toggle
-	 *  whose mousedown just snapshotted real pre-click state" from
-	 *  "keyboard or other path where the mousedown snapshot is stale". */
-	let lastSnapshotAt = 0;
-
-	/** Stale snapshots more than this many ms old are ignored. Tuned
-	 *  loose enough to survive any focus / click latency the browser
-	 *  might insert, but tight enough that an old click from minutes
-	 *  ago can't poison a later keyboard toggle. */
-	const SNAPSHOT_FRESHNESS_MS = 500;
-
-	function snapshotScrollPosition(): void {
-		const list = rowEl?.closest('.column-list') as HTMLElement | null;
-		preClickListScroll = list?.scrollTop ?? 0;
-		preClickWindowScrollX = typeof window !== 'undefined' ? window.scrollX : 0;
-		preClickWindowScrollY = typeof window !== 'undefined' ? window.scrollY : 0;
-		lastSnapshotAt = Date.now();
+}
+/**
+* Run `mutate` and then re-apply the pre-click scroll snapshot
+* aggressively across the next ~400ms so any deferred focus / layout
+* work that fights us at the tail of the event loop still ends up at
+* the user's original scroll position.
+*
+* The snapshot is taken in capture phase from the row's `{@attach}`
+* listener below, before the focus side effect can scroll. If invoked
+* without a recent mousedown (keyboard toggle, programmatic call) a
+* fresh snapshot is taken here.
+*
+* A temporary scroll listener on list + window forcibly reverts any
+* scroll event during the lock window, complementing the discrete
+* `rAF` / `setTimeout` restores. The listener no-ops when already at
+* the snapshot, so the restore call inside it does not re-trigger.
+*
+* The active hidden input is blurred immediately after the mutation
+* so the browser stops treating it as the "currently focused element
+* to keep visible" on subsequent layout passes.
+*/
+function preserveListScroll(mutate) {
+	if (Date.now() - lastSnapshotAt > SNAPSHOT_FRESHNESS_MS) {
+		snapshotScrollPosition();
 	}
-
-	function restoreScrollPosition(): void {
-		const list = rowEl?.closest('.column-list') as HTMLElement | null;
-		if (list != null) {
-			list.scrollTop = preClickListScroll;
-		}
-		if (typeof window !== 'undefined') {
-			window.scrollTo(preClickWindowScrollX, preClickWindowScrollY);
-		}
+	const focused = typeof document !== "undefined" && document.activeElement instanceof HTMLElement ? document.activeElement : null;
+	const list = rowEl?.closest(".column-list");
+	mutate();
+	if (focused != null && rowEl?.contains(focused) === true) {
+		focused.blur();
 	}
-
-	/**
-	 * Run `mutate` and then re-apply the pre-click scroll snapshot
-	 * aggressively across the next ~400ms so any deferred focus / layout
-	 * work that fights us at the tail of the event loop still ends up at
-	 * the user's original scroll position.
-	 *
-	 * The snapshot is taken in capture phase from the row's `{@attach}`
-	 * listener below, before the focus side effect can scroll. If invoked
-	 * without a recent mousedown (keyboard toggle, programmatic call) a
-	 * fresh snapshot is taken here.
-	 *
-	 * A temporary scroll listener on list + window forcibly reverts any
-	 * scroll event during the lock window, complementing the discrete
-	 * `rAF` / `setTimeout` restores. The listener no-ops when already at
-	 * the snapshot, so the restore call inside it does not re-trigger.
-	 *
-	 * The active hidden input is blurred immediately after the mutation
-	 * so the browser stops treating it as the "currently focused element
-	 * to keep visible" on subsequent layout passes.
-	 */
-	function preserveListScroll(mutate: () => void): void {
-		if (Date.now() - lastSnapshotAt > SNAPSHOT_FRESHNESS_MS) {
-			snapshotScrollPosition();
-		}
-		const focused =
-			typeof document !== 'undefined' && document.activeElement instanceof HTMLElement
-				? document.activeElement
-				: null;
-		const list = rowEl?.closest('.column-list') as HTMLElement | null;
-		mutate();
-		if (focused != null && rowEl?.contains(focused) === true) {
-			focused.blur();
-		}
-		if (typeof requestAnimationFrame !== 'undefined') {
-			requestAnimationFrame(restoreScrollPosition);
-		}
-		setTimeout(restoreScrollPosition, 0);
-		setTimeout(restoreScrollPosition, 60);
-		setTimeout(restoreScrollPosition, 120);
-		setTimeout(restoreScrollPosition, 240);
-
-		// Scroll-lock: forcibly revert any rogue scroll for the next ~400ms.
-		// Anything in this window that scrolls the list or page (focus
-		// auto-scroll, scrollIntoView from a deferred reactive effect,
-		// etc.) is snapped back to the pre-click snapshot. The handler
-		// no-ops when already at the snapshot, so the restore inside it
-		// does not re-trigger.
-		if (list != null && typeof window !== 'undefined') {
-			const lockListHandler = (): void => {
-				if (list.scrollTop !== preClickListScroll) {
-					list.scrollTop = preClickListScroll;
-				}
-			};
-			const lockWindowHandler = (): void => {
-				if (window.scrollX !== preClickWindowScrollX || window.scrollY !== preClickWindowScrollY) {
-					window.scrollTo(preClickWindowScrollX, preClickWindowScrollY);
-				}
-			};
-			list.addEventListener('scroll', lockListHandler, { passive: true });
-			window.addEventListener('scroll', lockWindowHandler, { passive: true });
-			setTimeout(() => {
-				list.removeEventListener('scroll', lockListHandler);
-				window.removeEventListener('scroll', lockWindowHandler);
-			}, 400);
-		}
+	if (typeof requestAnimationFrame !== "undefined") {
+		requestAnimationFrame(restoreScrollPosition);
 	}
-
-	/**
-	 * Current pin state of this column expressed as a `Ternary` so the
-	 * three states (`pinned-left` / `unpinned` / `pinned-right`) map
-	 * cleanly onto `ThreeStateRadio`:
-	 *
-	 *   - `Ternary.False`   → pinned to the LEFT side  (leftmost segment)
-	 *   - `Ternary.Neutral` → unpinned                 (middle segment)
-	 *   - `Ternary.True`    → pinned to the RIGHT side (rightmost segment)
-	 */
-	const pinSide: Ternary = $derived(
-		columnDef == null
-			? Ternary.Neutral
-			: tableContext.columnPinning.left?.has(columnDef.id)
-				? Ternary.False
-				: tableContext.columnPinning.right?.has(columnDef.id)
-					? Ternary.True
-					: Ternary.Neutral
-	);
-
-	/**
-	 * Set this column's pin state from a `Ternary`. The previous side (if
-	 * any) is removed first so the column is never pinned to both sides.
-	 * Wrapped in `preserveListScroll` so the column-list scroll position
-	 * survives any focus side effect inside the ThreeStateRadio's hidden
-	 * inputs.
-	 */
-	function setPin(next: Ternary): void {
-		if (columnDef == null) {
-			return;
-		}
-		preserveListScroll(() => {
-			tableContext.setColumnPinning((pinning) => {
-				const leftKeys = [...(pinning.left?.keys() ?? [])].filter((id) => id !== columnDef.id);
-				const rightKeys = [...(pinning.right?.keys() ?? [])].filter((id) => id !== columnDef.id);
-				if (next === Ternary.False) {
-					leftKeys.push(columnDef.id);
-				} else if (next === Ternary.True) {
-					rightKeys.push(columnDef.id);
-				}
-				return {
-					...pinning,
-					left: new Map(leftKeys.map(makeKVPairs)),
-					right: new Map(rightKeys.map(makeKVPairs)),
-				};
-			});
+	setTimeout(restoreScrollPosition, 0);
+	setTimeout(restoreScrollPosition, 60);
+	setTimeout(restoreScrollPosition, 120);
+	setTimeout(restoreScrollPosition, 240);
+	// Scroll-lock: forcibly revert any rogue scroll for the next ~400ms.
+	// Anything in this window that scrolls the list or page (focus
+	// auto-scroll, scrollIntoView from a deferred reactive effect,
+	// etc.) is snapped back to the pre-click snapshot. The handler
+	// no-ops when already at the snapshot, so the restore inside it
+	// does not re-trigger.
+	if (list != null && typeof window !== "undefined") {
+		const lockListHandler = () => {
+			if (list.scrollTop !== preClickListScroll) {
+				list.scrollTop = preClickListScroll;
+			}
+		};
+		const lockWindowHandler = () => {
+			if (window.scrollX !== preClickWindowScrollX || window.scrollY !== preClickWindowScrollY) {
+				window.scrollTo(preClickWindowScrollX, preClickWindowScrollY);
+			}
+		};
+		list.addEventListener("scroll", lockListHandler, { passive: true });
+		window.addEventListener("scroll", lockWindowHandler, { passive: true });
+		setTimeout(() => {
+			list.removeEventListener("scroll", lockListHandler);
+			window.removeEventListener("scroll", lockWindowHandler);
+		}, 400);
+	}
+}
+/**
+* Current pin state of this column expressed as a `Ternary` so the
+* three states (`pinned-left` / `unpinned` / `pinned-right`) map
+* cleanly onto `ThreeStateRadio`:
+*
+*   - `Ternary.False`   → pinned to the LEFT side  (leftmost segment)
+*   - `Ternary.Neutral` → unpinned                 (middle segment)
+*   - `Ternary.True`    → pinned to the RIGHT side (rightmost segment)
+*/
+const pinSide = $derived(columnDef == null ? Ternary.Neutral : tableContext.columnPinning.left?.has(columnDef.id) ? Ternary.False : tableContext.columnPinning.right?.has(columnDef.id) ? Ternary.True : Ternary.Neutral);
+/**
+* Set this column's pin state from a `Ternary`. The previous side (if
+* any) is removed first so the column is never pinned to both sides.
+* Wrapped in `preserveListScroll` so the column-list scroll position
+* survives any focus side effect inside the ThreeStateRadio's hidden
+* inputs.
+*/
+function setPin(next) {
+	if (columnDef == null) {
+		return;
+	}
+	preserveListScroll(() => {
+		tableContext.setColumnPinning((pinning) => {
+			const leftKeys = [...pinning.left?.keys() ?? []].filter((id) => id !== columnDef.id);
+			const rightKeys = [...pinning.right?.keys() ?? []].filter((id) => id !== columnDef.id);
+			if (next === Ternary.False) {
+				leftKeys.push(columnDef.id);
+			} else if (next === Ternary.True) {
+				rightKeys.push(columnDef.id);
+			}
+			return {
+				...pinning,
+				left: new Map(leftKeys.map(makeKVPairs)),
+				right: new Map(rightKeys.map(makeKVPairs))
+			};
 		});
+	});
+}
+const onVisibilityChange = (e) => {
+	if (!columnDef) {
+		console.warn("no def found", e);
+		return;
 	}
-
-	const onVisibilityChange = (e: Event) => {
-		if (!columnDef) {
-			console.warn('no def found', e);
-
-			return;
-		}
-		const checked = (e.target as HTMLInputElement).checked;
-		preserveListScroll(() => {
-			tableContext.updateVisibility((defs) => {
-				defs[columnDef.id] = checked;
-				return defs;
-			});
+	const checked = e.target.checked;
+	preserveListScroll(() => {
+		tableContext.updateVisibility((defs) => {
+			defs[columnDef.id] = checked;
+			return defs;
 		});
-	};
-
-	/**
-	 * Keyboard reorder support. Alt+ArrowUp/Down nudges the column,
-	 * Alt+Home/End jumps to the ends. Bound on the row so any focusable
-	 * child (eye, pin selector, move buttons) can trigger it.
-	 *
-	 * `Alt` is required so plain arrow keys still navigate radio groups
-	 * (ThreeStateRadio) and the row's own scroll container.
-	 */
-	function onRowKeydown(e: KeyboardEvent) {
-		if (!columnDef || !tableContext.allowColumnReordering) {
-			return;
-		}
-		if (!e.altKey) {
-			return;
-		}
-		if (currentIndex === -1) {
-			return;
-		}
-
-		const lastIndex = sortedColumns.length - 1;
-		let targetIndex: number;
-
-		switch (e.key) {
-			case 'ArrowUp':
-				targetIndex = Math.max(0, currentIndex - 1);
-				break;
-			case 'ArrowDown':
-				targetIndex = Math.min(lastIndex, currentIndex + 1);
-				break;
-			case 'Home':
-				targetIndex = 0;
-				break;
-			case 'End':
-				targetIndex = lastIndex;
-				break;
-			default:
-				return;
-		}
-
-		if (targetIndex === currentIndex) {
-			e.preventDefault();
-			return;
-		}
-
+	});
+};
+/**
+* Keyboard reorder support. Alt+ArrowUp/Down nudges the column,
+* Alt+Home/End jumps to the ends. Bound on the row so any focusable
+* child (eye, pin selector, move buttons) can trigger it.
+*
+* `Alt` is required so plain arrow keys still navigate radio groups
+* (ThreeStateRadio) and the row's own scroll container.
+*/
+function onRowKeydown(e) {
+	if (!columnDef || !tableContext.allowColumnReordering) {
+		return;
+	}
+	if (!e.altKey) {
+		return;
+	}
+	if (currentIndex === -1) {
+		return;
+	}
+	const lastIndex = sortedColumns.length - 1;
+	let targetIndex;
+	switch (e.key) {
+		case "ArrowUp":
+			targetIndex = Math.max(0, currentIndex - 1);
+			break;
+		case "ArrowDown":
+			targetIndex = Math.min(lastIndex, currentIndex + 1);
+			break;
+		case "Home":
+			targetIndex = 0;
+			break;
+		case "End":
+			targetIndex = lastIndex;
+			break;
+		default: return;
+	}
+	if (targetIndex === currentIndex) {
 		e.preventDefault();
-		preserveListScroll(() => {
-			tableContext.moveColumnTo(currentIndex, targetIndex);
-		});
+		return;
 	}
-</script>
-
-{#if columnDef}
-	{@const reorderLabel = typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
-	<!--
-		The `<li>` is a structural container for the eye, pin selector,
-		label, and reorder buttons - none activated by clicking the `<li>`
-		itself. The `onkeydown` here only captures Alt+Arrow / Alt+Home /
-		Alt+End bubbling up from whichever inner control has focus to
-		drive the reorder shortcut; the `<li>` is not an interactive
-		widget. The structure is a free-form list of cards (not a tree
-		or listbox), so the right call is to silence the warning rather
-		than fake `role="treeitem"` / `role="option"`.
-	-->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<li
-		bind:this={rowEl}
-		class="single-column"
-		class:targeted={isBeingTargeted}
-		class:draggable={tableContext.allowColumnReordering}
-		id="{tableContext.tableName}-column-settings-{columnDef.id}"
-		draggable={tableContext.allowColumnReordering}
-		onkeydown={onRowKeydown}
-		{@attach (node: HTMLLIElement) => {
-			// Capture-phase `mousedown` and `pointerdown` listeners. Both
-			// must fire BEFORE the synthetic click on the visibility /
-			// pin checkbox focuses its hidden input, because that focus
-			// triggers an auto-scroll to bring the 1x1px clip-pathed
-			// input into view. Capture phase runs before target / bubble,
-			// so this listener reliably snapshots the user's true
-			// pre-click scroll position.
-			//
-			// Both event types are wired because browsers differ on which
-			// fires first; the second is a cheap no-op snapshot.
-			const snapshot = (): void => {
-				snapshotScrollPosition();
-			};
-			node.addEventListener('pointerdown', snapshot, { capture: true });
-			node.addEventListener('mousedown', snapshot, { capture: true });
-			return () => {
-				node.removeEventListener('pointerdown', snapshot, { capture: true });
-				node.removeEventListener('mousedown', snapshot, { capture: true });
-			};
-		}}
-		ondragstart={() => {
-			tableContext.dragTarget = columnDef;
-		}}
-		ondragend={disableDragVisual}
-		ondragover={(e) => {
-			e.preventDefault();
-			if (tableContext.dragTarget?.id !== columnDef.id) {
-				isBeingTargeted = true;
-			}
-		}}
-		ondragleave={disableDragVisual}
-		ondrop={disableDragVisual}
-	>
-		<!--
-			`.row-main` stacks the column label on top and the visibility /
-			pin controls underneath so the label gets the full card width
-			to wrap into. `.reorder-buttons` is a sibling outside
-			`.row-main` so the up / down arrows stay vertically centred on
-			the right edge of the card.
-		-->
-		<div class="row-main">
-			<span
-				class="column-label"
-				title={typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
-			>
-				{#if typeof columnDef.header === 'function'}
-					<!-- FIXME this needs testing -->
-					{@render columnDef.header()}
-				{:else}
-					{columnDef.header}
-				{/if}
-			</span>
-
-			<div class="row-controls">
-				<div class="visibility-wrapper">
-					<Checkbox
-						icon={{ name: 'assessment', size: Size.MediumSmall }}
-						size={Size.FillWidth}
-						id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
-						value={tableContext.columnVisibility[columnDef.id] !== false}
-						onchange={onVisibilityChange}
-					/>
-				</div>
-
-				{#if tableContext.allowColumnReordering}
-					<!--
-						Tri-state pin selector. The three `Ternary` slots map to:
-						  False   -> pinned LEFT  (pin-left icon, leftmost)
-						  Neutral -> unpinned     (circle-cross icon, middle)
-						  True    -> pinned RIGHT (pin-right icon, rightmost)
-						Expand columns can never be pinned and disable the group.
-					-->
-					<div class="pin-selector">
-						<ThreeStateRadio
-							value={pinSide}
-							noLabel="Pin to left"
-							neutralLabel="Unpinned"
-							yesLabel="Pin to right"
-							noIcon={{ name: 'pin-left', size: Size.MediumSmall }}
-							neutralIcon={{ name: 'circle-cross', size: Size.MediumSmall }}
-							yesIcon={{ name: 'pin-right', size: Size.MediumSmall }}
-							onchange={(next: Ternary) => {
-								setPin(next);
-							}}
-						/>
-					</div>
-				{/if}
-			</div>
-		</div>
-
-		{#if tableContext.allowColumnReordering}
-			<!--
-				Up / down "move" buttons make column reordering
-				discoverable without relying on the user noticing a
-				drag-cursor. The whole row remains draggable for power
-				users. Buttons disable at the list boundaries so a no-op
-				`moveColumnTo` is never dispatched.
-			-->
-			<div class="reorder-buttons">
-				<Action
-					icon={{ name: 'chevron-up', size: Size.Medium }}
-					size={Size.Medium}
-					paddingSize={Size.Small}
-					label="Move {reorderLabel} up"
-					disabled={isAtTop}
-					onclick={moveUp}
-				/>
-				<Action
-					icon={{ name: 'chevron-down', size: Size.Medium }}
-					size={Size.Medium}
-					paddingSize={Size.Small}
-					label="Move {reorderLabel} down"
-					disabled={isAtBottom}
-					onclick={moveDown}
-				/>
-			</div>
-		{/if}
-	</li>
-{:else}
-	<li
-		id="{tableContext.tableName}-column-settings-top-anchor"
-		class="single-column anchor"
-		class:targeted={isBeingTargeted}
-		ondragover={(e) => {
-			e.preventDefault();
-
-			if (tableContext.dragTarget?.id !== undefined) {
-				isBeingTargeted = true;
-			}
-		}}
-		ondragleave={disableDragVisual}
-		ondrop={disableDragVisual}
-	></li>
-{/if}
-
+	e.preventDefault();
+	preserveListScroll(() => {
+		tableContext.moveColumnTo(currentIndex, targetIndex);
+	});
+}
+</script>
+
+{#if columnDef}
+	{@const reorderLabel = typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
+	<!--
+		The `<li>` is a structural container for the eye, pin selector,
+		label, and reorder buttons - none activated by clicking the `<li>`
+		itself. The `onkeydown` here only captures Alt+Arrow / Alt+Home /
+		Alt+End bubbling up from whichever inner control has focus to
+		drive the reorder shortcut; the `<li>` is not an interactive
+		widget. The structure is a free-form list of cards (not a tree
+		or listbox), so the right call is to silence the warning rather
+		than fake `role="treeitem"` / `role="option"`.
+	-->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<li
+		bind:this={rowEl}
+		class="single-column"
+		class:targeted={isBeingTargeted}
+		class:draggable={tableContext.allowColumnReordering}
+		id="{tableContext.tableName}-column-settings-{columnDef.id}"
+		draggable={tableContext.allowColumnReordering}
+		onkeydown={onRowKeydown}
+		{@attach (node: HTMLLIElement) => {
+			// Capture-phase `mousedown` and `pointerdown` listeners. Both
+			// must fire BEFORE the synthetic click on the visibility /
+			// pin checkbox focuses its hidden input, because that focus
+			// triggers an auto-scroll to bring the 1x1px clip-pathed
+			// input into view. Capture phase runs before target / bubble,
+			// so this listener reliably snapshots the user's true
+			// pre-click scroll position.
+			//
+			// Both event types are wired because browsers differ on which
+			// fires first; the second is a cheap no-op snapshot.
+			const snapshot = (): void => {
+				snapshotScrollPosition();
+			};
+			node.addEventListener('pointerdown', snapshot, { capture: true });
+			node.addEventListener('mousedown', snapshot, { capture: true });
+			return () => {
+				node.removeEventListener('pointerdown', snapshot, { capture: true });
+				node.removeEventListener('mousedown', snapshot, { capture: true });
+			};
+		}}
+		ondragstart={() => {
+			tableContext.dragTarget = columnDef;
+		}}
+		ondragend={disableDragVisual}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (tableContext.dragTarget?.id !== columnDef.id) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	>
+		<!--
+			`.row-main` stacks the column label on top and the visibility /
+			pin controls underneath so the label gets the full card width
+			to wrap into. `.reorder-buttons` is a sibling outside
+			`.row-main` so the up / down arrows stay vertically centred on
+			the right edge of the card.
+		-->
+		<div class="row-main">
+			<span
+				class="column-label"
+				title={typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
+			>
+				{#if typeof columnDef.header === 'function'}
+					<!-- FIXME this needs testing -->
+					{@render columnDef.header()}
+				{:else}
+					{columnDef.header}
+				{/if}
+			</span>
+
+			<div class="row-controls">
+				<div class="visibility-wrapper">
+					<Checkbox
+						icon={{ name: 'assessment', size: Size.MediumSmall }}
+						size={Size.FillWidth}
+						id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
+						value={tableContext.columnVisibility[columnDef.id] !== false}
+						onchange={onVisibilityChange}
+					/>
+				</div>
+
+				{#if tableContext.allowColumnReordering}
+					<!--
+						Tri-state pin selector. The three `Ternary` slots map to:
+						  False   -> pinned LEFT  (pin-left icon, leftmost)
+						  Neutral -> unpinned     (circle-cross icon, middle)
+						  True    -> pinned RIGHT (pin-right icon, rightmost)
+						Expand columns can never be pinned and disable the group.
+					-->
+					<div class="pin-selector">
+						<ThreeStateRadio
+							value={pinSide}
+							noLabel="Pin to left"
+							neutralLabel="Unpinned"
+							yesLabel="Pin to right"
+							noIcon={{ name: 'pin-left', size: Size.MediumSmall }}
+							neutralIcon={{ name: 'circle-cross', size: Size.MediumSmall }}
+							yesIcon={{ name: 'pin-right', size: Size.MediumSmall }}
+							onchange={(next: Ternary) => {
+								setPin(next);
+							}}
+						/>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		{#if tableContext.allowColumnReordering}
+			<!--
+				Up / down "move" buttons make column reordering
+				discoverable without relying on the user noticing a
+				drag-cursor. The whole row remains draggable for power
+				users. Buttons disable at the list boundaries so a no-op
+				`moveColumnTo` is never dispatched.
+			-->
+			<div class="reorder-buttons">
+				<Action
+					icon={{ name: 'chevron-up', size: Size.Medium }}
+					size={Size.Medium}
+					paddingSize={Size.Small}
+					label="Move {reorderLabel} up"
+					disabled={isAtTop}
+					onclick={moveUp}
+				/>
+				<Action
+					icon={{ name: 'chevron-down', size: Size.Medium }}
+					size={Size.Medium}
+					paddingSize={Size.Small}
+					label="Move {reorderLabel} down"
+					disabled={isAtBottom}
+					onclick={moveDown}
+				/>
+			</div>
+		{/if}
+	</li>
+{:else}
+	<li
+		id="{tableContext.tableName}-column-settings-top-anchor"
+		class="single-column anchor"
+		class:targeted={isBeingTargeted}
+		ondragover={(e) => {
+			e.preventDefault();
+
+			if (tableContext.dragTarget?.id !== undefined) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	></li>
+{/if}
+
 <style>li {
   box-sizing: border-box;
 }
@@ -561,4 +522,4 @@ li.single-column:not(.anchor):last-of-type {
   --colour: #1f81a0;
   color: #1f81a0;
   background-color: transparent;
-}</style>
+}</style>