@lavalogic/scoria 0.37.44 → 0.37.45

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

@@ -1,480 +1,457 @@
-<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, used to
-	 * drive the disabled state of the "move up" / "move down" buttons
-	 * (and to know which target index to pass `moveColumnTo`). The
-	 * underlying `index` property is a stable identity for layout
-	 * pinning, so we sort by it rather than relying on iteration
-	 * order from the `columnDefs` array.
-	 */
-	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);
-		});
-	}
-
-	function moveDown(): void {
-		if (columnDef == null || isAtBottom) {
-			return;
-		}
-		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: HTMLLIElement | undefined = $state();
-
-	function disableDragVisual() {
-		isBeingTargeted = false;
-	}
-
-	function makeKVPairs(item: string, index: number): readonly [string, number] {
-		return [item, index];
-	}
-
-	/**
-	 * Pre-click scroll snapshot. The key insight: when the user
-	 * clicks a checkbox label, the browser fires a synthetic click
-	 * on the associated hidden `<input>` *before* `onchange` fires.
-	 * The synthetic click focuses the input, and the focus side
-	 * effect already scrolls the column-list (and sometimes the
-	 * window) to bring the 1x1px, `clip-path`-ed input's bounding
-	 * box into view. By the time our `onchange` handler runs, the
-	 * scroll has already happened, so reading `scrollTop` at that
-	 * point gives us the *post-jump* position - "restoring" to it
-	 * just freezes the list at the wrong spot.
-	 *
-	 * Snapshotting on `mousedown` (which fires before the focus
-	 * step) captures the genuine pre-click position. We then use
-	 * that snapshot to restore at multiple time points after the
-	 * mutation so any further 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();
-	}
-
-	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);
-		}
-	}
-
-	/**
-	 * 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 itself is taken in capture phase from the row's
-	 * `{@attach}` listener below, *before* the focus side effect has
-	 * a chance to scroll us. If `preserveListScroll` is invoked
-	 * without a recent mousedown (keyboard toggle, programmatic
-	 * call) we take a fresh snapshot here.
-	 *
-	 * In addition to the discrete `rAF` / `setTimeout` restores, a
-	 * temporary scroll listener installed on the list and the
-	 * window forcibly reverts any scroll event during the lock
-	 * window. The listener short-circuits when `scrollTop` is
-	 * already at the snapshot value, so it doesn't loop.
-	 *
-	 * The active hidden input is also 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 inside this window that scrolls the list
-		// or the page (focus auto-scroll, scrollIntoView from a
-		// deferred reactive effect, etc.) is snapped back to the
-		// pre-click snapshot. The handler is a no-op when the value
-		// is already at the snapshot, so the restore call inside it
-		// does not retrigger.
-		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);
-		}
-	}
-
-	/**
-	 * 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` to keep the
-	 * column-list scroll position pinned across 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)),
-				};
-			});
-		});
-	}
-
-	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;
-			});
-		});
-	};
-
-	/**
-	 * Keyboard reorder support for power users. Arrow keys nudge the
-	 * column up / down, Home / End jump to the ends. Bound on the row
-	 * itself so any focusable child (eye, pin selector, move buttons)
-	 * lets the user reorder without having to seek out a dedicated
-	 * "drag handle" - the affordance is now the explicit up / down
-	 * buttons in the row's right gutter.
-	 *
-	 * `Alt` is required as the modifier so plain arrow keys still
-	 * navigate radio groups inside the row (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;
-		}
-
-		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 of which the user activates by
-		clicking the `<li>` itself. The `onkeydown` here only captures
-		Alt+ArrowUp / Alt+ArrowDown / Alt+Home / Alt+End bubbling up from
-		whichever inner control has focus, to drive the reorder shortcut;
-		it never makes the `<li>` itself a focusable interactive widget.
-		Giving the row a `role` like `treeitem` or `option` would
-		mis-describe the structure (this is a free-form list of cards,
-		not a tree or listbox), so the right call is to silence the
-		warning here rather than fake the semantics.
-	-->
-	<!-- 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 listeners for `mousedown` and
-			// `pointerdown`. Both must fire BEFORE the synthetic
-			// click on the visibility / pin checkbox focuses its
-			// hidden input (which is what causes the browser to
-			// auto-scroll the column list to bring that input's
-			// 1x1px clip-pathed box into view). Capture phase runs
-			// before target / bubble phases, so this listener
-			// reliably snapshots the user's actual pre-click scroll
-			// position before any focus side effect lands.
-			//
-			// Both event types are wired because some browsers
-			// dispatch `pointerdown` before `mousedown` and others
-			// the reverse; whichever fires first wins (the second
-			// is a cheap no-op snapshot of the same state).
-			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 (instead of competing
-			horizontally with the controls). `.reorder-buttons` stays
-			as a sibling outside `.row-main` so the up / down arrows
-			remain 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 rendered via `ThreeStateRadio`,
-						matching the visual segmented-control used elsewhere in
-						the table (filter Active state, etc.). 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, so the group goes
-						fully disabled for them.
-					-->
-					<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 row remains draggable too (whole row
-				is the drag target now that the dedicated handle is
-				gone), so power users keep the drag-and-drop path.
-				Buttons disable at the list boundaries so we never
-				dispatch a no-op `moveColumnTo`.
-			-->
-			<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}
-
+<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);
+		});
+	}
+
+	function moveDown(): void {
+		if (columnDef == null || isAtBottom) {
+			return;
+		}
+		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: HTMLLIElement | undefined = $state();
+
+	function disableDragVisual() {
+		isBeingTargeted = false;
+	}
+
+	function makeKVPairs(item: string, index: number): readonly [string, number] {
+		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(): 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();
+	}
+
+	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);
+		}
+	}
+
+	/**
+	 * 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);
+		}
+	}
+
+	/**
+	 * 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)),
+				};
+			});
+		});
+	}
+
+	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;
+			});
+		});
+	};
+
+	/**
+	 * 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;
+		}
+
+		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;
 }
@@ -552,6 +529,7 @@ li.single-column:not(.anchor):last-of-type {
   color: #3a4952;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -570,4 +548,4 @@ li.single-column:not(.anchor):last-of-type {
   --colour: #1f81a0;
   color: #1f81a0;
   background-color: transparent;
-}</style>
+}</style>