bitboss-ui 3.0.0-beta.20 → 3.0.0-beta.21

package/dist/ai/source/BbTable.md

@@ -233,6 +233,7 @@
 							<!-- @vue-ignore -->
 							<slot
 								:classes="header.classes"
+								:hide-column="() => hideColumn(header.key)"
 								:items="internalItems"
 								:label="header.label"
 								:name="header.slotName"
@@ -295,7 +296,7 @@
 							/>
 						</div>
 						<div
-							v-if="actions"
+							v-if="hasActions"
 							class="bb-table-header bb-table-header--actions"
 							:class="thClass"
 							role="columnheader"
@@ -405,7 +406,7 @@
 								/>
 							</div>
 							<div
-								v-if="actions"
+								v-if="hasActions"
 								class="bb-table-skeleton__cell bb-table-skeleton__cell--actions"
 								role="cell"
 							>
@@ -525,12 +526,14 @@ import {
 	getCurrentInstance,
 	nextTick,
 	onBeforeUnmount,
+	onBeforeUpdate,
 	onMounted,
 	reactive,
 	ref,
 	shallowRef,
 	toRef,
 	watch,
+	watchEffect,
 } from 'vue';
 import {
 	defaultRangeExtractor,
@@ -598,6 +601,7 @@ import {
 	readResolvedTracks,
 	sameColumnOrder,
 } from './utils';
+import type { FixedColumnConfig } from './utils';
 import { useBbTableContextHost } from '../../composables/useBbTableContext';
 import { useLogger } from '@/composables/useLogger';
 import {
@@ -643,7 +647,6 @@ const props = withDefaults(defineProps<InternalProps<T>>(), {
 	columns: () => [],
 	dependencies: () => [],
 	depsDebounceTime: 0,
-	fixedColumns: () => [],
 	items: () => [],
 	max: Infinity,
 	multiple: true,
@@ -685,6 +688,7 @@ const slots = defineSlots<
 					sortable?: boolean;
 					sortOrder?: 'asc' | 'desc' | null;
 					toggleSort?: () => void;
+					hideColumn?: () => void;
 				}) => any
 			>
 		> &
@@ -699,6 +703,21 @@ const slots = defineSlots<
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbTable', removedPropsFor('BbTable'));
 
+/**
+ * The actions column exists exactly when the `#actions` slot is provided —
+ * there is no prop. Slot presence is not reactive state (a `computed` reading
+ * `slots.actions` never re-runs when the parent toggles the template with a
+ * `v-if`), so it is sampled into a ref before every update: the parent's
+ * re-render delivers the new slots to this instance before `beforeUpdate`
+ * fires, and a conditional slot makes the child's children dynamic, so the
+ * child does update. The track computeds and the row context read the ref.
+ */
+const hasActions = ref(!!slots.actions);
+onBeforeUpdate(() => {
+	const present = !!slots.actions;
+	if (present !== hasActions.value) hasActions.value = present;
+});
+
 const { getItemValue } = useItemValue();
 
 /** Temporary name for selection inputs; hidden inputs handle real submission. */
@@ -758,7 +777,7 @@ if (process.env.NODE_ENV !== 'production') {
 		useLogger().warn(
 			`BbTable: \`{ key: '${String(column.key)}' }\` is a reserved column and must not appear in \`columns\`. ` +
 				(column.key === 'actions'
-					? 'Set the `actions` prop and fill the `#actions` slot instead.'
+					? 'Fill the `#actions` slot instead — the slot creates the column.'
 					: 'Selection is controlled by the `selectable` prop.')
 		);
 	}
@@ -810,6 +829,81 @@ const headerInstructionsId = computed(
 /** Header cells are keyboard targets when either header interaction is on. */
 const headerKeyboard = computed(() => !!(props.reorderable || props.resizable));
 
+/* --- Column visibility ---------------------------------------------------------
+ * `column.hidden` is the single declared truth (the `width` shape, not the
+ * `sort` one): a hidden column renders nothing and owns no track but stays
+ * DECLARED, so the order write-back completes around it and it returns to its
+ * slot when the flag clears. A header's `hideColumn()` sets a per-mount OVERRIDE the
+ * table keeps until that column's flag changes to anything but `true` — the
+ * consumer persisting the reported key writes `hidden: true`, which matches
+ * the override and keeps it; a panel showing the column writes `false`, which
+ * drops it. There is no "show" path on the table: a hidden column has no
+ * header to call it from. */
+
+/** Keys hidden from their header (`hideColumn()`), pending the definition's word. */
+const hiddenOverrides = ref<ReadonlySet<string>>(new Set());
+
+/** Every key that renders nothing right now: the flag or a live override. */
+const hiddenColumnKeys = computed(() => {
+	const keys = new Set(hiddenOverrides.value);
+	for (const column of props.columns) {
+		if (column.hidden) keys.add(String(column.key));
+	}
+	return keys;
+});
+
+/**
+ * The declared columns that render, in declaration order. Returns
+ * `props.columns` BY IDENTITY when nothing is hidden, so the identity
+ * shortcut in `orderedColumns` (and every "feature off" byte-parity
+ * guarantee behind it) survives untouched.
+ */
+const visibleColumns = computed(() => {
+	const hidden = hiddenColumnKeys.value;
+	if (!hidden.size) return props.columns;
+	return props.columns.filter((column) => !hidden.has(String(column.key)));
+});
+
+/** `hideColumn()` from a header slot: an override, reported once. */
+const hideColumn = (key: string) => {
+	if (hiddenColumnKeys.value.has(key)) return;
+	// A hidden header unmounts under the keyboard user: keep focus on the
+	// header row (the same rendered index, i.e. the column that slides in).
+	const cell = headerCellFor(key);
+	const index = orderedColumnKeys.value.indexOf(key);
+	const refocus =
+		!!cell && cell.contains(document.activeElement) && headerKeyboard.value;
+	hiddenOverrides.value = new Set([...hiddenOverrides.value, key]);
+	emit('hide:column', key);
+	if (refocus) nextTick(() => focusHeaderAt(index));
+};
+
+// The definition wins whenever it changes to something ELSE than the override
+// (the `resizedWidths` rule): `hidden: true` written back is the consumer
+// persisting the hide and keeps the override; any other change drops it.
+watch(
+	() =>
+		props.columns.map(
+			(column) => [String(column.key), !!column.hidden] as const
+		),
+	(now, before) => {
+		if (!before || !hiddenOverrides.value.size) return;
+		const previous = new Map(before);
+		const overridden = hiddenOverrides.value;
+		const cleared = now.filter(
+			([key, hidden]) =>
+				previous.has(key) &&
+				previous.get(key) !== hidden &&
+				overridden.has(key) &&
+				!hidden
+		);
+		if (!cleared.length) return;
+		const rest = new Set(overridden);
+		for (const [key] of cleared) rest.delete(key);
+		hiddenOverrides.value = rest;
+	}
+);
+
 /* --- Column order -----------------------------------------------------------
  * `columns` is the declaration, `order` is the state (the sort split).
  * ONE ordered list feeds every positional computation below; everything keyed
@@ -817,6 +911,12 @@ const headerKeyboard = computed(() => !!(props.reorderable || props.resizable));
  * (`projectedItemAt`) maps `orderedColumns` directly — a reorder drops its memo
  * and re-runs the formatters, but only for the rows on screen. */
 
+/**
+ * EVERY declared key, hidden ones included — the set the order model is
+ * completed against. Built from the declaration and never from the rendered
+ * columns: that is what keeps a hidden key in the write-back even when the
+ * consumer's persisted model never listed it.
+ */
 const declaredKeys = computed(() => props.columns.map((c) => String(c.key)));
 
 /**
@@ -827,18 +927,22 @@ const declaredKeys = computed(() => props.columns.map((c) => String(c.key)));
 const dragOrder = ref<string[] | null>(null);
 
 /**
- * The declared columns in render order. Returns `props.columns` BY IDENTITY
- * whenever the resolved order is the declaration order (no model, or a model
- * that changes nothing): every downstream computed then sees the same
- * reference, which is what keeps the DOM, class strings and publish sequence
- * byte-identical when the feature is off.
+ * The RENDERED columns in render order: the visible declaration, ordered.
+ * Returns `visibleColumns` BY IDENTITY (which is `props.columns` itself when
+ * nothing is hidden) whenever the resolved order is the declaration order
+ * (no model, or a model that changes nothing): every downstream computed
+ * then sees the same reference, which is what keeps the DOM, class strings
+ * and publish sequence byte-identical when the features are off. Ordering
+ * the visible subset is exact: a hidden key in the model is just a key that
+ * matches no rendered column, preserved in place like any other.
  */
 const orderedColumns = computed(() => {
+	const columns = visibleColumns.value;
 	const model = dragOrder.value ?? order.value;
-	if (!model.length) return props.columns;
-	const ordered = orderColumns(props.columns, model);
-	return ordered.every((column, index) => column === props.columns[index])
-		? props.columns
+	if (!model.length) return columns;
+	const ordered = orderColumns(columns, model);
+	return ordered.every((column, index) => column === columns[index])
+		? columns
 		: ordered;
 });
 
@@ -861,7 +965,13 @@ const orderedColumnKeys = computed(() =>
  */
 const nextColumnOrder = (key: string, toIndex: number): string[] | null => {
 	const current = completeColumnOrder(order.value, declaredKeys.value);
-	const next = moveColumnKey(order.value, declaredKeys.value, key, toIndex);
+	const next = moveColumnKey(
+		order.value,
+		declaredKeys.value,
+		key,
+		toIndex,
+		hiddenColumnKeys.value
+	);
 	return sameColumnOrder(next, current) ? null : next;
 };
 
@@ -1054,7 +1164,7 @@ if (process.env.NODE_ENV !== 'production') {
 		(conflict) => {
 			if (conflict) {
 				useLogger().warn(
-					"BbTable: `snap` is positional in the parent's rendered order and does not compose with `order` / `reorderable` on the same table — order the parent (a snap-mapped child follows its slots), or drop the snaps and share the parent's `order` with a same-key child."
+					'BbTable: `snap` names a PARENT column and the child renders in its own order — it does not compose with `order` / `reorderable` / a `hidden` column on the snapped table itself. Order and hide on the parent (a key-snapped child follows it), or drop the snaps.'
 				);
 			}
 		},
@@ -1580,7 +1690,13 @@ const placeDraggedColumn = (rawX: number) => {
 	const after = toIndex > from;
 	if (drag.target?.key === targetKey && drag.target.after === after) return;
 
-	const next = moveColumnKey(drag.base, declaredKeys.value, drag.key, toIndex);
+	const next = moveColumnKey(
+		drag.base,
+		declaredKeys.value,
+		drag.key,
+		toIndex,
+		hiddenColumnKeys.value
+	);
 	const current = dragOrder.value ?? drag.base;
 	if (sameColumnOrder(next, current)) {
 		drag.target = { key: targetKey, after };
@@ -1725,7 +1841,12 @@ const onDragPointerUp = (event: PointerEvent) => {
 	if (!drag || event.pointerId !== drag.pointerId) return;
 	const { key } = drag;
 	const from = drag.base
-		? drag.base.filter((k) => declaredKeys.value.includes(k)).indexOf(key)
+		? drag.base
+				.filter(
+					(k) =>
+						declaredKeys.value.includes(k) && !hiddenColumnKeys.value.has(k)
+				)
+				.indexOf(key)
 		: -1;
 	const committed =
 		dragPhase.value === 'dragging' &&
@@ -2078,7 +2199,7 @@ const fixedLayout = computed(
 	() =>
 		props.fixed ||
 		hasSnap.value ||
-		props.columns.some((column) => column.width != null) ||
+		visibleColumns.value.some((column) => column.width != null) ||
 		hasResizedWidths.value ||
 		(inheritColumnWidths.value && !!parentId.value)
 );
@@ -2088,6 +2209,12 @@ const isInheriting = computed(
 	() => inheritColumnWidths.value && !!parentId.value
 );
 
+// Tell descendants whether THIS table's columns can move at runtime: a child's
+// key snaps are only sound against a parent whose order is static.
+watchEffect(() => {
+	node.ordered = !!props.reorderable || order.value.length > 0;
+});
+
 /**
  * `virtual` windows the body (see "Virtual rows" below). Root tables only —
  * a nested table's scroller is its parent's and it inherits its tracks — and
@@ -2166,37 +2293,28 @@ const toLength = (width: number | string) => {
 	return /^-?\d*\.?\d+$/.test(trimmed) ? `${trimmed}px` : trimmed;
 };
 
-/** Number of data columns the parent renders (numeric track keys). */
-const parentDataColumns = computed(() => {
-	const tracks = parentNode.value?.tracks;
-	return tracks
-		? Object.keys(tracks).filter((key) => /^\d+$/.test(key)).length
-		: 0;
-});
-
 /**
- * The parent's rendered columns in order — `select` (if any), data columns
- * `0…N-1`, then `actions` (if any) — form a gridline coordinate, one cell per
- * column. Cell `c` is the range `[c, c + 1]`. So a no-select parent starts its
- * data at cell 0, while a selectable parent starts it at cell 1.
+ * The parent's rendered columns in order — `select` (if any), its data
+ * columns by KEY, then `actions` (if any) — form a gridline coordinate, one
+ * cell per column. Cell `c` is the range `[c, c + 1]`. So a no-select parent
+ * starts its data at cell 0, while a selectable parent starts it at cell 1.
+ * Published by the parent with its tracks (`node.keys`): a record cannot
+ * carry the order a child relies on.
  */
-const parentColumnKeys = computed(() => {
-	const tracks = parentNode.value?.tracks ?? {};
-	const keys: string[] = [];
-	if ('select' in tracks) keys.push('select');
-	for (let k = 0; k < parentDataColumns.value; k++) keys.push(String(k));
-	if ('actions' in tracks) keys.push('actions');
-	return keys;
-});
+const parentColumnKeys = computed(() => parentNode.value?.keys ?? []);
 
 /** Gridline cells where the parent's data region begins/ends and the table ends. */
 const firstDataCell = computed(() =>
-	'select' in (parentNode.value?.tracks ?? {}) ? 1 : 0
-);
-const dataEndCell = computed(
-	() => firstDataCell.value + parentDataColumns.value
+	parentColumnKeys.value[0] === 'select' ? 1 : 0
 );
 const tableEndCell = computed(() => parentColumnKeys.value.length);
+const dataEndCell = computed(() => {
+	const keys = parentColumnKeys.value;
+	return keys[keys.length - 1] === 'actions' ? keys.length - 1 : keys.length;
+});
+
+/** The parent's gridline cell for a track key, `-1` when it renders none. */
+const parentCellOf = (key: string) => parentColumnKeys.value.indexOf(key);
 
 /** Parent track custom property for the integer cell `[cell, cell + 1]`. */
 const cellTrackVar = (cell: number) => {
@@ -2224,57 +2342,231 @@ const gridRangeWidth = (a: number, b: number): string | null => {
 };
 
 /**
- * Resolved parent snap interval for each data column.
- * - A number snaps to that start point; the column then runs up to the next
- *   column's snap point (or one whole track if the next is unset). So a single
- *   snap that skips ahead widens this column to cover the gap — `snap: 4` on the
- *   second column makes the first effectively `[start, 4]`.
- * - A `[start, end]` pair is taken verbatim (`end` of `-1` runs to the end of
- *   the data region).
- * - Omitted, the column chains from the previous column's end.
- * - The LAST column runs to the end of the parent's data region (as if
- *   `[start, -1]`): a table with fewer columns than its parent widens its last
- *   content cell across the parent's trailing tracks — trailing tracks are
- *   never structural, the actions track inherits only the parent's actions
- *   region. A `width` (the column pins its own extent) or an explicit
- *   `[start, end]` pair declines them; they stay in the end region.
+ * A snap point: a parent column key plus a fraction of that track. The
+ * fraction is a trailing `.digits` on the raw string (`'amount.5'`); the key
+ * part is matched RAW against the parent's published keys, like every other
+ * key-taking field. A raw key that itself ends in `.digits` is ambiguous here
+ * and is written in its slot-name spelling instead (documented).
+ */
+const parseSnapPoint = (raw: string): { key: string; fraction: number } => {
+	const match = /^(.+)\.(\d+)$/.exec(raw);
+	if (match) return { key: match[1], fraction: Number(`0.${match[2]}`) };
+	return { key: raw, fraction: 0 };
+};
+
+/**
+ * A column's explicit `snap`, resolved to a parent gridline interval, or
+ * `null` when any key it names is not a rendered parent column (hidden, or
+ * absent) — the column then flows like an unsnapped one. `explicit` marks a
+ * pair, which declines the trailing tracks the last column would otherwise
+ * run across.
+ */
+const resolveSnap = (
+	snap: string | [string, string]
+): { start: number; end: number; explicit: boolean } | null => {
+	if (Array.isArray(snap)) {
+		const a = parseSnapPoint(snap[0]);
+		const b = parseSnapPoint(snap[1]);
+		const cellA = parentCellOf(a.key);
+		const cellB = parentCellOf(b.key);
+		if (cellA < 0 || cellB < 0) return null;
+		// Inclusive end: a whole key runs THROUGH its track, a fraction stops
+		// partway into it.
+		const start = cellA + a.fraction;
+		const end = b.fraction > 0 ? cellB + b.fraction : cellB + 1;
+		return end > start ? { start, end, explicit: true } : null;
+	}
+	const point = parseSnapPoint(snap);
+	// A fraction on a single key has no second edge to apply to: ignored.
+	const cell = parentCellOf(point.key);
+	if (cell < 0) {
+		// `.digits` may have been part of the key itself.
+		const whole = parentCellOf(snap);
+		return whole < 0 ? null : { start: whole, end: whole + 1, explicit: false };
+	}
+	return { start: cell, end: cell + 1, explicit: false };
+};
+
+/**
+ * True when the parent can reorder its data columns at runtime. A snap names
+ * a parent column, but the child renders its own cells in its own order, so
+ * a parent whose order can change under it can only be inherited by
+ * POSITION — key targets are ignored there (dev builds warn; see the watcher
+ * below). Snaps on the ROOT are a misconfiguration handled by `hasSnap`'s
+ * implicit inherit + no parent → every interval is positional anyway.
+ */
+const parentOrdered = computed(() => !!parentNode.value?.ordered);
+
+/**
+ * Resolved parent interval for each data column, in render order. Every
+ * interval TILES the parent's data region from left to right — cell `i`'s
+ * left edge is the sum of the widths before it, so the intervals must be
+ * contiguous and monotonic or the child drifts off the parent's rails.
+ *
+ *  1. Claims. An explicit `snap` claims its interval (unless the parent is
+ *     ordered, where snaps are ignored). An unsnapped column whose KEY the
+ *     parent renders claims that track (not under an ordered parent either —
+ *     pairing by key needs the parent's order to be stable, so there the
+ *     child inherits by position, exactly as before keys existed).
+ *  2. Flow. Walking the columns in order with a cursor at the previous end,
+ *     an unclaimed column takes the first free parent data cell at or after
+ *     the cursor; with none left it OVERFLOWS (content-sized, past the
+ *     parent's edge). A claim that starts BEFORE the cursor cannot tile — the
+ *     child's order disagrees with the parent's — and is demoted to flow
+ *     (dev builds warn).
+ *  3. Tiling. Each interval then runs up to the next one's start, so a free
+ *     parent cell between two claims widens the column before it rather than
+ *     opening a hole. The LAST column runs to the end of the parent's data
+ *     region — trailing tracks are never structural, the actions track
+ *     inherits only the parent's actions region — unless it declares a
+ *     `width` (the column pins its own extent) or an explicit pair, which
+ *     both decline them; they stay in the end region.
  */
 const columnIntervals = computed(() => {
 	const cols = orderedColumns.value;
-	// Explicit start points; a later column's snap sets the previous column's end.
-	const starts = cols.map((column) =>
-		typeof column.snap === 'number'
-			? column.snap
-			: Array.isArray(column.snap)
-				? column.snap[0]
-				: null
-	);
-	let cursor = firstDataCell.value;
-	return cols.map((column, i) => {
-		const start = starts[i] ?? cursor;
-		let end: number;
-		if (Array.isArray(column.snap)) {
-			end = column.snap[1] === -1 ? dataEndCell.value : column.snap[1];
-		} else {
-			const next = starts[i + 1];
-			end = next != null && next > start ? next : Math.floor(start) + 1;
-			if (i === cols.length - 1 && column.width == null) {
-				end = Math.max(end, dataEndCell.value);
+	const dataStart = firstDataCell.value;
+	const dataEnd = dataEndCell.value;
+	const tableEnd = tableEndCell.value;
+	const ordered = parentOrdered.value;
+
+	type Interval = {
+		start: number;
+		end: number;
+		explicit: boolean;
+		overflow: boolean;
+		/** A claim that could not tile (out of the parent's order), flowed instead. */
+		demoted?: string;
+	};
+	const claims: Array<Interval | null> = cols.map(() => null);
+	const claimed = new Set<number>();
+	const claim = (interval: Interval) => {
+		for (let c = Math.floor(interval.start); c < interval.end - 1e-6; c++) {
+			claimed.add(c);
+		}
+	};
+
+	// 1. Claims — explicit snaps first (they may span several cells), then keys.
+	if (!ordered) {
+		cols.forEach((column, i) => {
+			if (column.snap == null) return;
+			const resolved = resolveSnap(column.snap);
+			if (!resolved) return;
+			claims[i] = { ...resolved, overflow: false };
+			claim(claims[i]!);
+		});
+		cols.forEach((column, i) => {
+			if (claims[i] || column.snap != null) return;
+			const cell = parentCellOf(String(column.key));
+			if (cell < dataStart || cell >= dataEnd || claimed.has(cell)) return;
+			claims[i] = {
+				start: cell,
+				end: cell + 1,
+				explicit: false,
+				overflow: false,
+			};
+			claimed.add(cell);
+		});
+	}
+
+	// 2. Flow. The cursor starts at the TABLE's edge (a `select` target is a
+	// legitimate claim), but a flowing column only ever takes data cells.
+	let cursor = 0;
+	let overflowCount = 0;
+	const intervals: Interval[] = cols.map((column, i) => {
+		let interval = claims[i];
+		let demoted: string | undefined;
+		if (interval && interval.start + 1e-6 < cursor) {
+			// Out of the parent's order: cannot tile. Demoted to flow.
+			claims[i] = null;
+			interval = null;
+			demoted = String(column.key);
+		}
+		if (!interval) {
+			// Chains from the previous column's end — a fraction included, so
+			// the half of a track an explicit pair left behind is picked up
+			// here — up to (never over) the next column's claim.
+			const start = Math.max(cursor, dataStart);
+			let limit = dataEnd;
+			for (let j = i + 1; j < cols.length; j++) {
+				const later = claims[j];
+				if (later) limit = Math.min(limit, later.start);
 			}
+			let cell = Math.max(Math.floor(start), dataStart);
+			while (cell < limit && claimed.has(cell)) cell++;
+			if (cell < limit && cell + 1e-6 >= start) {
+				claimed.add(cell);
+				interval = {
+					start,
+					end: cell + 1,
+					explicit: false,
+					overflow: false,
+				};
+			} else if (cell < limit) {
+				// The free cell is the one the fraction sits in.
+				claimed.add(cell);
+				interval = { start, end: cell + 1, explicit: false, overflow: false };
+			} else {
+				// Past the parent's data region — or a root table, where the region
+				// is empty and every column sits here: sized to its own content.
+				const start = Math.max(tableEnd, dataEnd) + overflowCount++;
+				interval = { start, end: start + 1, explicit: false, overflow: true };
+			}
+			if (demoted) interval.demoted = demoted;
 		}
-		cursor = end;
-		return { start, end };
+		cursor = Math.max(cursor, interval.end);
+		return interval;
 	});
+
+	// 3. Tiling. An explicit pair pins its own extent and is never widened —
+	// a gap after one is the consumer's (the old numeric pairs behaved the
+	// same); everything else runs up to the next column's start.
+	intervals.forEach((interval, i) => {
+		if (interval.overflow || interval.explicit) return;
+		const next = intervals[i + 1];
+		if (next && !next.overflow && next.start > interval.end) {
+			interval.end = next.start;
+		}
+		if (i === cols.length - 1 && cols[i].width == null) {
+			interval.end = Math.max(interval.end, dataEnd);
+		}
+	});
+	return intervals;
 });
 
 /**
- * A column whose interval begins at or beyond the parent's last data cell has no
- * matching parent column to inherit from — the table has more columns than its
- * parent. Such columns are sized to their own measured content and scroll within
- * the expand row instead of inheriting a track.
+ * A column with no matching parent track to inherit from — the table has more
+ * columns than its parent, or nothing free was left for a displaced one. Such
+ * columns are sized to their own measured content and scroll within the
+ * expand row instead of inheriting a track.
  */
-const isOverflowColumn = (interval: { start: number }) =>
-	isInheriting.value && interval.start >= dataEndCell.value;
+const isOverflowColumn = (interval: { overflow: boolean }) =>
+	isInheriting.value && interval.overflow;
+
+if (process.env.NODE_ENV !== 'production') {
+	// A snap under a parent that can reorder: ignored (the child inherits by
+	// position, as it did before keys). Warned once per parent, not per render.
+	watch(
+		() => hasSnap.value && parentOrdered.value,
+		(ignored) => {
+			if (ignored) {
+				useLogger().warn(
+					"BbTable: `snap` targets are ignored under a parent that uses `order` / `reorderable` — the parent's columns can move, so the child inherits by position. Keep the parent's order static (no `reorderable`, an empty `order`) to snap by key."
+				);
+			}
+		},
+		{ immediate: true }
+	);
+	watch(
+		() => columnIntervals.value.find((i) => i.demoted)?.demoted ?? null,
+		(key) => {
+			if (key === null) return;
+			useLogger().warn(
+				`BbTable: column '${key}' snaps to a parent column that sits BEFORE the column preceding it — the child's order disagrees with the parent's, so the snap cannot tile and the column flows into the next free parent track instead. Declare the child's columns in the parent's order.`
+			);
+		},
+		{ immediate: true }
+	);
+}
 
 /** True when any column overflows the parent (more columns than the parent). */
 const overflowsParent = computed(() =>
@@ -2402,8 +2694,8 @@ const offsetEndValue = computed(() =>
 		? null
 		: edgeFold(
 				endRegion.value,
-				props.actions ? ownStructuralTrack('actions') : null,
-				!!props.actions
+				hasActions.value ? ownStructuralTrack('actions') : null,
+				hasActions.value
 			)
 );
 const offsetStartActive = computed(() => offsetStartValue.value !== null);
@@ -2508,10 +2800,10 @@ const columnTracks = computed(() => {
 	// `isResized`); the declared-only columns keep filling around it.
 	const allFrozen =
 		!isInheriting.value &&
-		props.columns.length > 0 &&
-		props.columns.every((column) => column.width != null);
+		columns.length > 0 &&
+		columns.every((column) => column.width != null);
 	columns.forEach((column, index) => {
-		const key = String(index);
+		const key = String(column.key);
 		const declared = effectiveWidth(column);
 		const frozen = declared != null ? toLength(declared) : null;
 		const interval = columnIntervals.value[index];
@@ -2591,7 +2883,7 @@ const columnTracks = computed(() => {
 		tracks.push({ key, width, contentSized: false });
 	});
 
-	if (props.actions) {
+	if (hasActions.value) {
 		tracks.push({
 			key: 'actions',
 			width: structuralTrack(endRegion.value, 'actions'),
@@ -2618,8 +2910,9 @@ const clippedKeyList = computed(() => {
 	const keys: string[] = [];
 	for (const track of columnTracks.value) {
 		if (track.contentSized) continue;
-		const column = columns[Number(track.key)];
-		if (column) keys.push(String(column.key));
+		// Data tracks carry the column key itself; skip the structural two.
+		if (columns.some((column) => String(column.key) === track.key))
+			keys.push(track.key);
 	}
 	return keys.join(' ');
 });
@@ -2864,18 +3157,29 @@ const measureTracks = () => {
 	// published unfolded — the pure content rail — and the region goes out
 	// under the structural key even though no cell renders it, so the next
 	// level reserves it exactly as this one did.
-	const lastKey = String(props.columns.length - 1);
+	// Track keys are COLUMN KEYS in render order, so the edge data tracks are
+	// the first and last RENDERED columns, not the first and last declared.
+	const dataKeys = orderedColumnKeys.value;
+	const firstKey = dataKeys[0];
+	const lastKey = dataKeys[dataKeys.length - 1];
 	const startFold = offsetStartValue.value;
 	const endFold = offsetEndValue.value;
-	if (startFold && tracks['0']) {
-		tracks['0'] = `calc(${tracks['0']} - (${startFold}))`;
+	if (startFold && firstKey && tracks[firstKey]) {
+		tracks[firstKey] = `calc(${tracks[firstKey]} - (${startFold}))`;
 		if (!props.selectable && startRegion.value)
 			tracks.select = startRegion.value;
 	}
-	if (endFold && tracks[lastKey]) {
+	if (endFold && lastKey && tracks[lastKey]) {
 		tracks[lastKey] = `calc(${tracks[lastKey]} - (${endFold}))`;
-		if (!props.actions && endRegion.value) tracks.actions = endRegion.value;
+		if (!hasActions.value && endRegion.value) tracks.actions = endRegion.value;
 	}
+	// The order a child turns keys into gridlines with: `select` region first
+	// (own or reserved), the rendered data keys, the `actions` region last.
+	const publishedKeys = [
+		...('select' in tracks ? ['select'] : []),
+		...dataKeys,
+		...('actions' in tracks ? ['actions'] : []),
+	];
 	freezeVirtualWidths(resolved);
 	syncPlaceholderBars(resolved);
 	// FLAT ROWS: the resolved list IS what a body row uses as its own tracks.
@@ -2883,10 +3187,10 @@ const measureTracks = () => {
 	// (the header cells' observer) carries the body along for free.
 	if (virtualActive.value) virtualRowTracks.value = joined;
 	lastResolvedTracks = resolved;
-	setTracks(tracks);
+	setTracks(tracks, publishedKeys);
 	// Sticky column offsets are prefix sums of these tracks: keep them current.
-	if (props.fixedColumns?.length) {
-		applyFixedTableColumns(root, props.fixedColumns, resolved);
+	if (resolvedPins.value.length) {
+		applyFixedTableColumns(root, resolvedPins.value, resolved);
 	}
 };
 
@@ -3043,7 +3347,9 @@ const containerClass = computed(() => ({
 
 const replacementContentSpan = computed(
 	() =>
-		props.columns.length + Number(!!props.selectable) + Number(!!props.actions)
+		visibleColumns.value.length +
+		Number(!!props.selectable) +
+		Number(hasActions.value)
 );
 
 const slotNamesByKey = computed(() =>
@@ -3278,6 +3584,7 @@ const headerAffixScope = (
 	sortable: header.sortable,
 	sortOrder: header.sortOrder,
 	toggleSort: () => toggleSortFor(header.key),
+	hideColumn: () => hideColumn(header.key),
 });
 
 /**
@@ -4365,7 +4672,7 @@ const freezeVirtualWidths = (resolved: string[]) => {
 				structural;
 			return;
 		}
-		const column = columns[Number(track.key)];
+		const column = columns.find((c) => String(c.key) === track.key);
 		if (!column || column.width != null) return;
 		const key = String(column.key);
 		if (key in virtualWidths.value || key in (next ?? {})) return;
@@ -4786,7 +5093,7 @@ const dataRowContext = computed<DataRowContext>(() => ({
 	selectable: props.selectable,
 	multiple: !!props.multiple,
 	readonly: !!props.readonly,
-	actions: !!props.actions,
+	actions: hasActions.value,
 	keyboardNavigation: !!props.keyboardNavigation,
 	contentInert: contentInert.value,
 	hasRowIndex: hasProvidedAccessibilityData.value,
@@ -4803,23 +5110,49 @@ const dataRowContext = computed<DataRowContext>(() => ({
 }));
 
 /**
- * The pins as a VALUE: `[0, 1, { index: 8, position: 'right' }]` written inline
- * in a template is a fresh array on every render of the parent, and the parent
- * of a table re-renders for reasons of its own all the time. Watching the prop
- * itself made every one of those renders look like "the pins changed" — which
- * ran a full reconcile pass AND, because the reuse guard compared identities,
- * threw away the tracks and read `grid-template-columns` back off the grid
- * root. That read is a forced style+layout of a 5,000-row scrollport (~15ms
- * measured on the bench playground), taken up to once per scrolled frame, for
- * a prop whose VALUE never moved. The signature makes an identity-only change
- * invisible here.
+ * The pins, resolved from keys to RENDERED positions for the sticky pass:
+ * `column.fixed` on each rendered data column (hidden ones pin nothing), plus
+ * `fixed-select` at slot 0 and `fixed-actions` at the last slot when those
+ * structural columns exist. The pass itself stays positional — offsets are
+ * prefix sums of the rendered tracks — but the CONFIG follows the column, so
+ * a reorder moves the pin with it instead of leaving it in the slot.
+ */
+const resolvedPins = computed<FixedColumnConfig[]>(() => {
+	const pins: FixedColumnConfig[] = [];
+	const offset = props.selectable ? 1 : 0;
+	if (props.selectable && props.fixedSelect) {
+		pins.push({ index: 0, position: 'left' });
+	}
+	orderedColumns.value.forEach((column, index) => {
+		if (column.fixed) {
+			pins.push({ index: index + offset, position: column.fixed });
+		}
+	});
+	if (hasActions.value && props.fixedActions) {
+		pins.push({
+			index: orderedColumns.value.length + offset,
+			position: 'right',
+		});
+	}
+	return pins;
+});
+
+/**
+ * The pins as a VALUE. `:columns` written inline in a template is a fresh
+ * array on every render of the parent, and the parent of a table re-renders
+ * for reasons of its own all the time; `resolvedPins` is a fresh array on
+ * every one of those too. Watching it by identity made every such render look
+ * like "the pins changed" — which ran a full reconcile pass AND, because the
+ * reuse guard compared identities, threw away the tracks and read
+ * `grid-template-columns` back off the grid root. That read is a forced
+ * style+layout of a 5,000-row scrollport (~15ms measured on the bench
+ * playground), taken up to once per scrolled frame, for pins whose VALUE
+ * never moved. The signature makes an identity-only change invisible here.
  */
 const fixedColumnsKey = computed(() =>
-	(props.fixedColumns ?? [])
-		.map((column) =>
-			typeof column === 'number'
-				? `${column}:left`
-				: `${column.index}:${column.position}`
+	resolvedPins.value
+		.map((pin) =>
+			typeof pin === 'number' ? `${pin}:left` : `${pin.index}:${pin.position}`
 		)
 		.join(',')
 );
@@ -4842,18 +5175,19 @@ watch(
 	() => [bodyRows.value, fixedColumnsKey.value, trackKeys.value] as const,
 	([, pins, tracks], previous) => {
 		const previousPins = previous?.[1];
-		const fixedColumns = props.fixedColumns;
+		const fixedColumns = resolvedPins.value;
 		if (tableRef.value && (pins.length || previousPins?.length)) {
 			// A `virtual` window move mounts rows but moves no track: reuse the
 			// last publish instead of forcing a style read.
 			//
-			// The reuse test used to also require `fixedColumns === previousFixed`,
-			// which asks a question about the CONSUMER's render rather than about
-			// this table's geometry. `:fixed-columns="[0, 1, { index: n, position:
-			// 'right' }]"` — the documented form, and what the bench playground
-			// writes — allocates a fresh array every time the parent renders, so
-			// the test failed on essentially every window move and the pass fell
-			// back to `getComputedStyle(root).gridTemplateColumns`. That read
+			// The reuse test used to also require the pin config to be the SAME
+			// array as last time, which asks a question about the CONSUMER's render
+			// rather than about this table's geometry. An inline `:columns` array
+			// — the documented form, and what the bench playground writes —
+			// allocates a fresh array every time the parent renders (and so does
+			// `resolvedPins`), so the test failed on essentially every window move
+			// and the pass fell back to `getComputedStyle(root).gridTemplateColumns`.
+			// That read
 			// forces style and layout across the whole subgrid: on the 5,000-row
 			// playground it measured ELEVEN MILLISECONDS each, once per window
 			// move, in the middle of the scroll — the largest single item on a
@@ -4894,7 +5228,7 @@ watch(
 			// just moved onto — ~500 cell touches per window move down to ~50.
 			applyFixedTableColumns(
 				tableRef.value,
-				fixedColumns ?? [],
+				fixedColumns,
 				reuse ? lastResolvedTracks : null,
 				reuse
 			);
@@ -5048,6 +5382,33 @@ export type BbTableColumn<Item = any> = BaseColumn<Item> & {
 	 */
 	thClass?: Classes;
 
+	/**
+	 * Hides the column: it renders no header and no cells and contributes no
+	 * grid track, but stays DECLARED — its key keeps its slot in `order`, the
+	 * header reorder writes the model back complete around it, and it comes
+	 * back exactly where it was when the flag clears. This is how a column
+	 * panel or a narrow-screen breakpoint hides a column; filtering `columns`
+	 * is for a column that does not exist at all (a field this user does not
+	 * have). Like `width`, the definition is the single declared truth: a
+	 * header's `hideColumn()` sets a per-mount override that `hide:column` reports
+	 * and that clears the moment this flag changes to anything but `true`
+	 * (write the reported key back as `hidden: true` to persist it).
+	 */
+	hidden?: boolean;
+
+	/**
+	 * Pins the column: its cells become `position: sticky` on the given side,
+	 * in place — the column keeps its render slot and sticks there as the rest
+	 * scrolls under it (spreadsheet freeze panes, not a pinned region). The
+	 * offset accumulates the pinned columns before it on the same side, so
+	 * pin a contiguous run from the edge: a lone `left` column in the middle
+	 * sticks at `left: 0` and slides over everything before it, by design.
+	 * The pin travels with the column through `order` and `reorderable`, and
+	 * a `hidden` pinned column pins nothing. The structural columns pin
+	 * through `fixed-select` / `fixed-actions` on the table.
+	 */
+	fixed?: 'left' | 'right';
+
 	/**
 	 * Freezes the column to a fixed width (numbers are treated as px). When
 	 * omitted the column syncs its width to the parent table's matching track.
@@ -5055,26 +5416,36 @@ export type BbTableColumn<Item = any> = BaseColumn<Item> & {
 	width?: number | string;
 
 	/**
-	 * For a nested table, where this column snaps onto the parent's grid. The
-	 * parent's columns form snap points where `select` occupies `[0, 1]`, data
-	 * column `k` occupies `[k + 1, k + 2]` and `actions` occupies `[N + 1, N + 2]`.
+	 * For a nested table, which parent column this column snaps onto — by the
+	 * parent's column KEY, as written (`'client'`, not a position), plus the
+	 * reserved names `'select'` and `'actions'` for the parent's structural
+	 * columns.
+	 *
+	 * - A single key takes that parent track: `snap: 'client'`.
+	 * - A `[start, end]` pair spans from the start of `start` through the END
+	 *   of `end`, inclusive: `['client', 'amount']`, or `['name', 'actions']`
+	 *   to run across the parent's actions column too.
+	 * - A trailing `.digits` on a key is a fraction of that track — `'amount.5'`
+	 *   as an end means "through half of `amount`", as a start "from halfway
+	 *   into it". Pairs only; a key that itself ends in `.digits` is written
+	 *   in its slot-name spelling (`line_1`).
 	 *
-	 * - A single number is a start snap point that takes one parent track, e.g.
-	 *   `2` → `[2, 3]`. It may skip ahead (`5` jumps straight to the sixth track),
-	 *   and the next column resumes from where it ends.
-	 * - A `[start, end]` pair snaps between two points; the width is the sum of
-	 *   the fractional parent tracks it covers, so `[3, 4.5]` is the full fourth
-	 *   track plus half of the fifth. `end` of `-1` runs to the end of the data
-	 *   region.
+	 * When omitted the column pairs with the parent column of the SAME key when
+	 * there is one, and otherwise flows into the next parent track no other
+	 * column claimed. A column whose target the parent does not render (a
+	 * `hidden` parent column, a key it lacks) flows the same way; with no free
+	 * track left it content-sizes and overflows. The last column runs to the end
+	 * of the parent's data region unless it declares a `width` or an explicit
+	 * pair, so a table with fewer columns than its parent widens its last
+	 * content cell across the parent's trailing tracks rather than its actions
+	 * cell.
 	 *
-	 * When omitted the column chains from the previous column's end to the next
-	 * whole snap point (a one-to-one inheritance by index). The last column
-	 * always runs to the end of the parent's data region (as if `[start, -1]`)
-	 * unless it declares a `width` or an explicit pair, so a table with fewer
-	 * columns than its parent widens its last content cell across the parent's
-	 * trailing tracks rather than its actions cell.
+	 * Snaps resolve against the parent's RENDERED columns, so they are ignored
+	 * (dev builds warn) under a parent that reorders — `reorderable`, or a
+	 * non-empty `order` model — where the child falls back to positional
+	 * inheritance. Never reorder the snapped child itself.
 	 */
-	snap?: number | [start: number, end: number];
+	snap?: string | [start: string, end: string];
 };
 
 export type BbTableProps<Item = any> = {
@@ -5085,10 +5456,6 @@ export type BbTableProps<Item = any> = {
 	 * label reads like the row) — look a cell up by `key`, never by position.
 	 */
 	accessibleLabel?: (columns: MappedCell[], item: any) => string;
-	/**
-	 * Displays the actions column.
-	 */
-	actions?: boolean;
 	/**
 	 * Label used in the header of the actions column.
 	 */
@@ -5175,22 +5542,27 @@ export type BbTableProps<Item = any> = {
 	 */
 	fixed?: boolean;
 	/**
-	 * Definition for which column should be fixed.
-	 * It can be an array of index of the column to fix on the left side of the table or
-	 * an array of objects indicating the index and the position `left` or `right` where to affix the columns.
+	 * Pins the actions column (the one the `#actions` slot creates) to the
+	 * right edge, `position: sticky`, in place. Data columns pin through
+	 * `column.fixed`; this is the same feature for the structural column that
+	 * has no definition to carry it. No effect without an `#actions` slot.
 	 *
-	 * Indices are POSITIONS in the rendered column list (a selection column is
-	 * index 0), like a spreadsheet's freeze panes — not per-column pins. With
-	 * `order` the pinned slot holds and whichever column lands in it is
-	 * pinned; dragging a column out of a pinned slot unpins it.
-	 *
-	 * @defaultValue `[]`
+	 * @defaultValue `false`
 	 */
-	fixedColumns?: Array<number | { index: number; position: 'left' | 'right' }>;
+	fixedActions?: boolean;
 	/**
 	 * Boolean that sets the headers as sticky to the top of the table.
 	 */
 	fixedHeaders?: boolean;
+	/**
+	 * Pins the selection column to the left edge, `position: sticky`, in
+	 * place. Data columns pin through `column.fixed`; this is the same feature
+	 * for the structural column that has no definition to carry it. No effect
+	 * unless the table is `selectable`.
+	 *
+	 * @defaultValue `false`
+	 */
+	fixedSelect?: boolean;
 	/**
 	 * Defines the classes to be passed to the header row.
 	 */
@@ -5317,16 +5689,15 @@ export type BbTableProps<Item = any> = {
 	 * Used by `v-model:order`. Ordered array of column keys — the render
 	 * order of the data columns. Keys listed here render first, in this order;
 	 * declared columns it omits follow, in declaration order (so a column added
-	 * to `columns` later renders last); keys that match no declared column render
-	 * nothing but are PRESERVED in place on every write — a column you hide by
-	 * removing it from `columns` (a column panel) keeps its slot and comes back
-	 * where it was. The header drag / keyboard reorder of `reorderable`
-	 * writes it back complete (every declared key present, duplicates dropped —
-	 * first occurrence wins) with exactly the moved column relocated: every other
-	 * key, hidden ones included, keeps its relative order, and a drop that
-	 * changes nothing emits nothing. Works uncontrolled when unbound, exactly
-	 * like `sort`. The `select` and `actions` columns are structural and never
-	 * part of it.
+	 * to `columns` later renders last); a `hidden` column keeps its slot
+	 * without rendering, and keys that match no declared column render
+	 * nothing but are PRESERVED in place on every write. The header drag /
+	 * keyboard reorder of `reorderable` writes it back complete (every
+	 * declared key present, hidden ones included, duplicates dropped — first
+	 * occurrence wins) with exactly the moved column relocated: every other
+	 * key keeps its relative order, and a drop that changes nothing emits
+	 * nothing. Works uncontrolled when unbound, exactly like `sort`. The
+	 * `select` and `actions` columns are structural and never part of it.
 	 *
 	 * @defaultValue `[]`
 	 */
@@ -5564,6 +5935,14 @@ export type BbTableEvents = {
 	 * its declared width.
 	 */
 	(e: 'resize:column', key: string, width: number | null): void;
+	/**
+	 * A column was hidden from its header (a `#header:<key>` /
+	 * `#header:<key>:append` control calling the slot's `hideColumn()`). Fired once;
+	 * the table keeps the column hidden for the mount, or until the column's
+	 * `hidden` flag changes — write `hidden: true` into the definition to
+	 * persist it, `hidden: false` (a column panel) to show it again.
+	 */
+	(e: 'hide:column', key: string): void;
 	(e: 'update:expandedItems', value: any[]): void;
 	(e: 'update:unselectedItems', value: any[]): void;
 	(e: 'item:selected', value: any): void;
@@ -5593,6 +5972,12 @@ export type BbTableHeaderAffixSlotProps<Item = any> = {
 	sortOrder?: 'asc' | 'desc' | null;
 	/** Cycles this column's sort: unsorted → asc → desc → unsorted. */
 	toggleSort?: () => void;
+	/**
+	 * Hides this column (fires `hide:column`). One-way by nature — a hidden
+	 * column has no header to call it from; showing it again is the
+	 * definition's job (`hidden: false`).
+	 */
+	hideColumn?: () => void;
 };
 
 export type BbTableSlots<Item = any> = {
@@ -5668,7 +6053,11 @@ export type BbTableSlots<Item = any> = {
 	 */
 	'no-data'?: (props: object) => any;
 	/**
-	 * Content rendered in the actions cell for each row.
+	 * Content rendered in the actions cell for each row. Providing this slot
+	 * is what CREATES the actions column (there is no prop): the header cell
+	 * (labelled by `actions-text`, replaceable through `#header:actions`) and
+	 * one cell per row appear with it, and go away with it. Pin it with
+	 * `fixed-actions`.
 	 * @param expanded - Whether this row is currently expanded.
 	 * @param expandProps - Bind these onto an expand-toggle button to wire up aria attributes and keyboard handling.
 	 * @param toggleExpanded - Toggles the expanded state for this row.
@@ -5752,6 +6141,8 @@ export type BbTableSlots<Item = any> = {
 		sortable?: boolean;
 		sortOrder?: 'asc' | 'desc' | null;
 		toggleSort?: () => void;
+		/** Header slots only: hides this column (fires `hide:column`). */
+		hideColumn?: () => void;
 		/**
 		 * Optional because this catch-all also types the `head:*` /
 		 * `header:*` column slots, which have no row and never receive one.
@@ -5770,7 +6161,7 @@ export type BbTableSlots<Item = any> = {
 .bb-table {
 	/* The table's surface colour. Cells are transparent at rest so the row can
 	   tint them, but anything that sticks over scrolled content — the stuck
-	   head band and `fixed-columns` cells — must be opaque, and paints this.
+	   head band and pinned (`column.fixed`) cells — must be opaque, and paints this.
 	   Set it on the table (`.my-table { --bg: … }`) when the table sits on a
 	   surface that is not `--bb-panel`; a nested table re-declares its own. */
 	--bg: var(--bb-panel);
@@ -6010,7 +6401,7 @@ export type BbTableSlots<Item = any> = {
 	   is bounded by its own grid container — the one-row-tall row). Descendant
 	   form on purpose, so a nested table's head sticks along, as it always did.
 	   The stuck band paints `--bg` so scrolled rows never show through it.
-	   Sticky-column header cells (inline sticky from `fixed-columns`) sit above
+	   Sticky-column header cells (inline sticky from `column.fixed`) sit above
 	   their scrolled siblings within the band. */
 	/* Own head only (`> .bb-table__table >`): a descendant selector would also
 	   stick every NESTED table's head — a nested head then painted over the
@@ -6048,7 +6439,7 @@ export type BbTableSlots<Item = any> = {
 		}
 	}
 
-	/* A `fixed-columns` cell (inline `position: sticky` from the component)
+	/* A pinned cell (`column.fixed`, inline `position: sticky` from the component)
 	   slides over its scrolled siblings, so it cannot stay transparent. It
 	   paints the row's current tint when the row has one (`--row-bg`, set by
 	   the hover / highlighted states below), else the table surface — so a
@@ -6090,7 +6481,7 @@ export type BbTableSlots<Item = any> = {
 		   A child that inherits its parent's tracks is sized to the parent's
 		   CONTENT width, so a scrollport here would have its right edge off in
 		   the overflow where nobody can see it, and `position: sticky` from
-		   `fixed-columns` would affix to that instead of to the visible edge:
+		   `column.fixed` would affix to that instead of to the visible edge:
 		   the parent's actions pin correctly while the child's sit hundreds of
 		   pixels off-screen until you scroll all the way right.
 
@@ -6280,7 +6671,7 @@ export type BbTableSlots<Item = any> = {
 		user-select: none;
 		width: 9px;
 		/* Above the neighbour cell it overhangs (positioned, z auto) and below a
-		   pinned cell (z 2), so a handle scrolled under a `fixed-columns` header
+		   pinned cell (z 2), so a handle scrolled under a pinned header
 		   never slides over it. A pinned header's own handle lives inside that
 		   cell's stacking context and keeps its overhang. */
 		z-index: 1;