@ixfx/components 0.13.3 → 0.13.4

package/dist/data-grid-FHr7wZ_k.js

@@ -0,0 +1,2108 @@
+import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./icon-1gpwtPx8.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-JIhwB49y.js";
+import { t as handleStyles } from "./handle-DAXs7kbJ.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
+import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
+import "./interaction-ZTh4htzr.js";
+import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
+import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
+import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
+import "./menu-CwcXXeLM.js";
+import "./pan-text-CqtvjPyK.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { createCommandRegistry } from "@clinth/ui-commands";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/data-grid/shift-wheel.ts
+/**
+* Shift + vertical mouse wheel → horizontal scroll.
+*
+* Browsers usually leave this translation to the OS (macOS turns Shift+wheel
+* into a horizontal delta itself), but some mice, mouse utilities and
+* platforms deliver it as a plain vertical delta with `shiftKey` set — which
+* a two-axis scroller then scrolls vertically.
+*
+* Handling that needs a non-passive `wheel` listener, and a non-passive
+* listener makes the compositor wait on the main thread before every wheel
+* scroll, and not waiting is what keeps a busy virtualised grid's scrolling smooth.
+* So the listener is only attached while Shift is held.
+*
+* @param getScroller Returns the element to scroll horizontally (and listen on).
+* @returns Detach function.
+*/
+function attachShiftWheel(getScroller) {
+	let attachedTo;
+	const onWheel = (e) => {
+		const el = e.currentTarget;
+		if (!e.shiftKey || e.deltaX !== 0 || e.deltaY === 0 || el.scrollWidth <= el.clientWidth) return;
+		const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? el.clientWidth : 1;
+		el.scrollLeft += e.deltaY * scale;
+		e.preventDefault();
+	};
+	const detachWheel = () => {
+		attachedTo?.removeEventListener(`wheel`, onWheel);
+		attachedTo = void 0;
+	};
+	const onKey = (e) => {
+		if (e.key !== `Shift`) return;
+		detachWheel();
+		if (e.type === `keydown`) {
+			attachedTo = getScroller();
+			attachedTo?.addEventListener(`wheel`, onWheel, { passive: false });
+		}
+	};
+	window.addEventListener(`keydown`, onKey);
+	window.addEventListener(`keyup`, onKey);
+	window.addEventListener(`blur`, detachWheel);
+	return () => {
+		window.removeEventListener(`keydown`, onKey);
+		window.removeEventListener(`keyup`, onKey);
+		window.removeEventListener(`blur`, detachWheel);
+		detachWheel();
+	};
+}
+//#endregion
+//#region src/data-grid/data-grid.ts
+const EMPTY_CELL_LOOK = {
+	textColor: void 0,
+	icon: void 0,
+	iconColor: void 0,
+	badge: void 0
+};
+/** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
+function sameKeys(a, b) {
+	if (a === void 0 || a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+/** Element-wise reference equality, treating `undefined` (never computed) as different. */
+function sameRefs(a, b) {
+	return a !== void 0 && a.length === b.length && a.every((v, i) => v === b[i]);
+}
+let DataGridElement = class DataGridElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.columns = [];
+		this.rows = [];
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this.sortState = null;
+		this.rowHeight = 28;
+		this.getRowKey = (r, i) => r.key ?? r.id ?? String(i);
+		this.editable = false;
+		this.editability = `user`;
+		this.cellOverflow = `ellipsis`;
+		this.zebraStripes = false;
+		this.groupBy = null;
+		this.allowGrouping = false;
+		this.crossGroupSelection = false;
+		this.columnMenu = `none`;
+		this.textColorColumn = ``;
+		this.iconColumn = ``;
+		this.badgeColumn = ``;
+		this.itemsDraggable = false;
+		this.columnButtonIcon = `ellipsis`;
+		this._columnFormatters = /* @__PURE__ */ new Map();
+		this._resizingColKey = void 0;
+		this._animatingColKeys = /* @__PURE__ */ new Set();
+		this._selectedKeys = /* @__PURE__ */ new Set();
+		this._scrollTop = 0;
+		this._scrollLeft = 0;
+		this._viewportH = 300;
+		this._viewportW = 600;
+		this._collapsedGroups = /* @__PURE__ */ new Set();
+		this._editing = null;
+		this._editingRow = null;
+		this._lastClick = null;
+		this._lastClickedCell = null;
+		this._editValue = ``;
+		this._tickled = new TickledController(this, {
+			getItems: () => this.#tickledItems ??= this._flat.map((f) => ({
+				id: f.key,
+				enabled: f.type === `row`
+			})),
+			onStateChange: () => this.requestUpdate(),
+			hoverDisabled: () => this.#nativeDrag.isDragging
+		});
+		this.#nativeDragging = false;
+		this.#postDragSuppressTimer = 0;
+		this.#pointerEventSuppressess = /* @__PURE__ */ new WeakMap();
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `data-grid`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._flat.some((f) => f.type === `row`),
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				if (target.closest?.(`.header-cell`)) return void 0;
+				return (target.closest?.(`.row`))?.dataset.key;
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({ rowHeight: this.rowHeight }),
+			getRenderer: () => this.dragPreviewRenderer,
+			getDragPreviewSourceResolver: () => this.dragPreviewSource,
+			dispatch: (detail) => this.dispatchEvent(new CustomEvent(`list-native-drag-start`, {
+				detail,
+				bubbles: true,
+				composed: true,
+				cancelable: true
+			})),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.#dragOriginKey = active ? originKey : void 0;
+				this.toggleAttribute(`data-native-dragging`, active);
+				if (active) {
+					const count = this._selectedKeys.size;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#nativeDragging = false;
+				this.#dragOriginKey = void 0;
+				this.toggleAttribute(`data-native-dragging`, false);
+				this.removeAttribute(`aria-label`);
+				this.#startPostDragSuppressTimer();
+			}
+		});
+		this._sortedRows = [];
+		this._flat = [];
+		this._flatKeys = [];
+		this.#flatIndexByKey = /* @__PURE__ */ new Map();
+		this.#flatVersion = 0;
+		this.#notedFlatVersion = -1;
+		this.#searchKeyByRow = /* @__PURE__ */ new Map();
+		this.search = new ListSearchController(this, { adapter: this.#createSearchAdapter() });
+		this.#prevFlatKeys = [];
+		this.#enteringRowKeys = /* @__PURE__ */ new Set();
+		this.#rowReflowTimer = 0;
+		this.#dataGridRenderedOnce = false;
+		this._visibleColumns = [];
+		this._colOffsets = [];
+		this._colWidthSum = 0;
+		this._raf = 0;
+		this.#viewportChangeRaf = 0;
+		this.#resortRaf = 0;
+		this._drag = null;
+		this._onFocusOut = (e) => {
+			if (this._suppressBlurCommit) return;
+			if (this.editability === `immediate`) return;
+			if (!this._editing && !this._editingRow) return;
+			const next = e.relatedTarget;
+			if (next && this.contains(next)) return;
+			this._editing = null;
+			this._editingRow = null;
+			this.requestUpdate();
+		};
+		this._onScroll = (e) => {
+			const el = e.target;
+			cancelAnimationFrame(this._raf);
+			this._raf = requestAnimationFrame(() => {
+				const before = this.#windowRows(2);
+				this._scrollTop = el.scrollTop;
+				this._scrollLeft = el.scrollLeft;
+				const after = this.#windowRows(2);
+				if (before.start !== after.start || before.end !== after.end) this.requestUpdate();
+				cancelAnimationFrame(this.#viewportChangeRaf);
+				this.#viewportChangeRaf = 0;
+				this.#emitViewportChangeIfChanged();
+			});
+		};
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === `a`) {
+				if (this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode` || this.interactionMode === `standard`) {
+					e.preventDefault();
+					const prev = new Set(this._selectedKeys);
+					if (this.groupBy && !this.crossGroupSelection && this._anchorKey) {
+						const g = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
+						this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row` && this._getGroupKey(f.row) === g).map((f) => f.key));
+					} else this._selectedKeys = new Set(this._flat.filter((f) => f.type === `row`).map((f) => f.key));
+					this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+						detail: {
+							selectedKeys: new Set(this._selectedKeys),
+							previous: prev
+						},
+						bubbles: true,
+						composed: true
+					}));
+				}
+				return;
+			}
+			if (this._editing && (e.key === `ArrowDown` || e.key === `ArrowUp`)) {
+				if ((this.shadowRoot?.activeElement)?.tagName === `SELECT`) return;
+				e.preventDefault();
+				const cur = this._editing;
+				const dir = e.key === `ArrowDown` ? 1 : -1;
+				const colKey = cur.colKey;
+				this._suppressBlurCommit = true;
+				this._commitEdit();
+				const rowKeys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
+				const idx = rowKeys.indexOf(cur.rowKey);
+				let nextIdx = idx + dir;
+				while (nextIdx >= 0 && nextIdx < rowKeys.length) {
+					const nk = rowKeys[nextIdx];
+					const row = this.#rowEntry(nk)?.row;
+					const col = this._visibleColumns.find((c) => c.key === colKey);
+					if (row && col && this._isEditable(row, col)) {
+						this._startEdit(nk, colKey);
+						this._tickled.handleKeyboardNavigation(nextIdx > idx ? `next` : `previous`);
+						this._scrollRowIntoView(nk);
+						break;
+					}
+					nextIdx += dir;
+				}
+				if (nextIdx < 0 || nextIdx >= rowKeys.length) {
+					this._tickled.handleKeyboardNavigation(dir > 0 ? `next` : `previous`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+				}
+				requestAnimationFrame(() => {
+					this._suppressBlurCommit = false;
+				});
+				return;
+			}
+			if (e.key === `ArrowDown` || e.key === `ArrowUp` || e.key === `Home` || e.key === `End`) {
+				e.preventDefault();
+				this._tickled.setInputMode(`keyboard`);
+			}
+			switch (e.key) {
+				case `ArrowDown`:
+					this._tickled.handleKeyboardNavigation(`next`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+					if (this.interactionMode === `implicit` && this._tickled.tickledId) this._replaceSelection(this._tickled.tickledId);
+					if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this._rangeSelectTo(this._tickled.tickledId);
+					break;
+				case `ArrowUp`:
+					this._tickled.handleKeyboardNavigation(`previous`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+					if (this.interactionMode === `implicit` && this._tickled.tickledId) this._replaceSelection(this._tickled.tickledId);
+					if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this._rangeSelectTo(this._tickled.tickledId);
+					break;
+				case `Home`:
+					this._tickled.handleKeyboardNavigation(`first`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+					break;
+				case `End`:
+					this._tickled.handleKeyboardNavigation(`last`);
+					if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
+					break;
+				case `Enter`: {
+					const key = this._tickled.tickledId;
+					if (!key) break;
+					e.preventDefault();
+					if (!this._editing && this.editability === `user`) {
+						const entry = this.#rowEntry(key);
+						if (entry) {
+							const row = entry.row;
+							if (this._lastClickedCell?.rowKey === key) {
+								const col = this._visibleColumns.find((c) => c.key === this._lastClickedCell.colKey);
+								if (col && this._isEditable(row, col)) {
+									this._startEdit(key, col.key);
+									break;
+								}
+							}
+							const firstEditable = this._visibleColumns.find((c) => this._isEditable(row, c));
+							if (firstEditable) {
+								this._startEdit(key, firstEditable.key);
+								break;
+							}
+						}
+					}
+					if (!this._editing) {
+						const entry = this.#rowEntry(key);
+						const idx = entry?.idx ?? -1;
+						if (this._selectedKeys.has(key)) {
+							this._activateRow(key, entry?.row, idx);
+							break;
+						}
+						if (this.interactionMode !== `manual` && this.interactionMode !== `checked`) this._replaceSelection(key);
+						this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
+							detail: {
+								rowKey: key,
+								colKey: ``,
+								rowIndex: idx,
+								colIndex: -1
+							},
+							bubbles: true,
+							composed: true
+						}));
+					}
+					break;
+				}
+				case ` `: {
+					if (this._editing) {
+						if ((this.columns.find((c) => c.key === this._editing.colKey)?.dataType ?? `text`) === `boolean`) {
+							e.preventDefault();
+							const isImmediate = this.editability === `immediate`;
+							const rowKey = this._editing.rowKey;
+							const colKey = this._editing.colKey;
+							const active = this.shadowRoot?.activeElement;
+							let next;
+							if (active?.type === `checkbox`) {
+								next = !active.checked;
+								active.checked = next;
+							} else {
+								const row = this.#rowEntry(rowKey)?.row;
+								next = !(this._editValue !== `` ? Boolean(this._editValue) : Boolean(row?.[colKey]));
+							}
+							if (isImmediate) this._commitImmediate(rowKey, colKey, next);
+							else {
+								this._editValue = next;
+								this._commitEdit();
+							}
+						}
+						break;
+					}
+					const key = this._tickled.tickledId;
+					if (!key) break;
+					e.preventDefault();
+					if (this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this._toggleSelection(key);
+					else this._replaceSelection(key);
+					break;
+				}
+				case `Escape`: if (this._editing || this._editingRow) {
+					e.preventDefault();
+					this._editing = null;
+					this._editingRow = null;
+					this.requestUpdate();
+				} else if (this._selectedKeys.size) {
+					e.preventDefault();
+					const prev = new Set(this._selectedKeys);
+					this._selectedKeys = /* @__PURE__ */ new Set();
+					this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+						detail: {
+							selectedKeys: /* @__PURE__ */ new Set(),
+							previous: prev
+						},
+						bubbles: true,
+						composed: true
+					}));
+				}
+			}
+		};
+		this._suppressBlurCommit = false;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			tickledStyles,
+			tickledItemStyles,
+			listItemFadeKeyframes,
+			listSearchStyles,
+			scrollFadeStyles(`x`),
+			scrollFadeStyles(`y`),
+			css`
+    :host {
+      --data-grid-row-height: 28px;
+      --data-grid-header-height: 32px;
+      --data-grid-bg: var(--surface-3);
+      --data-grid-header-bg: var(--surface-2);
+      --data-grid-border: var(--border);
+      --data-grid-header-text: var(--surface-3-text);
+      --data-grid-reorder-handle-width: 4px;
+      /* How strongly the alternate ("zebra") row stands out from the base row
+         background when [zebra-stripes] is set - a color-mix() percentage. */
+      --data-grid-zebra-intensity: 6%;
+      /* Duration of the width transition when a column is auto-sized via
+         autoSizeColumn(). Read back in JS (_columnResizeAnimationMs) to know
+         when the animation has finished, so keep it a plain time value. */
+      --data-grid-column-resize-duration: 180ms;
+      /* Dense 28px rows read badly under the global 30px full-strength fade,
+         so default to a shorter, shallower edge hint. Consumers can override
+         --scroll-fade-width / --scroll-fade-strength per instance. */
+      --scroll-fade-width: 20px;
+      --scroll-fade-strength: 0.8;
+      position: relative;
+      display: block;
+      overflow: hidden;
+      border: var(--data-grid-border);
+      border-radius: var(--radius-m);
+      background: var(--data-grid-bg);
+      color: var(--surface-3-text);
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+    }
+    :host(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
+    .grid { display: flex; flex-direction: column; height: 100%; min-height: 200px; position: relative; }
+    /* The header row lives inside .viewport and is sticky to its top, so it
+       scrolls horizontally with the rows on the compositor. Syncing a
+       separate header's scrollLeft from JS lags behind whenever the main
+       thread is busy rendering rows. */
+    .header-row {
+      position: sticky; top: 0; z-index: 3;
+      display: flex; align-items: stretch; height: var(--data-grid-header-height);
+      min-width: 100%; width: max-content; box-sizing: border-box;
+      background: var(--data-grid-header-bg); border-bottom: var(--data-grid-border);
+      /* Room for the last column to scroll out from under the column menu. */
+      padding-inline-end: var(--data-grid-actions-width, 0px);
+    }
+    /* Horizontal edge fade. The header row is not itself a scroller, so the
+       shared .scroll-fade-x animation reads the viewport's timeline instead,
+       and a second animation slides a viewport-wide mask along the
+       (full-width) row so the fade stays on the visible edges. */
+    .header-row.scroll-fade-x {
+      --scroll-fade-inset-start: 0px;
+      --scroll-fade-inset-end: var(--data-grid-actions-width, 0px);
+      scroll-timeline: none;
+      animation: scroll-fade-x-fade, data-grid-header-mask-track;
+      animation-timing-function: linear;
+      animation-timeline: scroll(nearest x), scroll(nearest x);
+      mask-size: var(--data-grid-viewport-width, 100%) 100%;
+      mask-repeat: no-repeat;
+    }
+    @keyframes data-grid-header-mask-track {
+      from { mask-position: 0 0; }
+      to { mask-position: 100% 0; }
+    }
+    .header-actions {
+      position: absolute; top: 0; z-index: 4;
+      right: var(--data-grid-scrollbar-width, 0px);
+      width: var(--data-grid-actions-width); height: var(--data-grid-header-height);
+      display: flex; box-sizing: border-box; border-bottom: var(--data-grid-border);
+    }
+    .header-cell {
+      display: flex; align-items: center; gap: var(--space-xs);
+      padding: 0 var(--space-s); border-right: var(--border-subtle);
+      flex-shrink: 0; user-select: none; cursor: pointer; position: relative;
+      background: var(--data-grid-header-bg);
+      box-sizing: border-box;
+    }
+    .header-cell[data-tickled] { background: var(--surface-5); }
+    /* Applied to a header-cell / cell while its column is animating towards
+       an autoSizeColumn() target width. */
+    .header-cell.width-animating, .cell.width-animating {
+      transition: width var(--data-grid-column-resize-duration, 180ms) ease-out;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .header-cell.width-animating, .cell.width-animating { transition: none; }
+    }
+    .header-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .sort-icon { display: inline-flex; align-items: center; opacity: 0.7; }
+    .resize-handle {
+      position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1;
+      display: flex; align-items: stretch; justify-content: center;
+    }
+    .resize-handle::before {
+      content: ''; width: 2px; margin: 2px 0; border-radius: 1px; background: var(--split-gutter-color, transparent);
+      transition: background-color var(--transition, 0.15s ease-out);
+    }
+    .resize-handle:hover::before { background: var(--split-gutter-hover-color, var(--surface-6)); }
+    .resize-handle[data-active]::before { background: var(--split-gutter-active-color, var(--accent)); }
+    .reorder-handle { cursor: grab; opacity: 0; display: inline-flex; align-items: center; transition: opacity var(--transition, 0.15s ease-out); }
+    .header-cell:hover .reorder-handle, .header-cell:focus-within .reorder-handle, .header-cell[drag-source] .reorder-handle { opacity: var(--ixfx-handle-opacity, 0.5); }
+    .col-button { opacity: 0; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-s); cursor: pointer; flex-shrink: 0; margin-left: var(--space-xs); transition: opacity var(--transition, 0.15s ease-out), background var(--transition, 0.15s ease-out); }
+    .col-button ixfx-icon { width: 14px; height: 14px; }
+    .header-cell:hover .col-button, .header-cell:focus-within .col-button { opacity: 1; pointer-events: auto; }
+    .col-button:hover { background: var(--surface-4); }
+    .reorder-handle .ixfx-handle { --ixfx-handle-length: 14px; --ixfx-handle-thickness: var(--data-grid-reorder-handle-width, 10px); --ixfx-handle-dot-size: 3px; }
+    .flyout-trigger { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-left: var(--border-subtle); background: var(--data-grid-header-bg); }
+    .grid.has-actions { --data-grid-actions-width: 44px; }
+    .viewport {
+      flex: 1; overflow: auto; position: relative;
+      /* Keyboard / focus scrolling must not park rows under the sticky header. */
+      scroll-padding-top: var(--data-grid-header-height);
+      --scroll-fade-inset-start: var(--data-grid-header-height);
+    }
+    /* Vertical edge fade from the shared .scroll-fade-y class
+       (see ../styles/scroll-fade.ts). The mask is on the viewport, inset by
+       the header height so the top fade starts below the sticky column
+       headers. Reach/strength tune via --scroll-fade-width /
+       --scroll-fade-strength (defaults set on :host above). */
+    .spacer { position: relative; }
+    .row.item {
+      position: absolute; left: 0; right: 0; display: flex; align-items: stretch;
+      gap: 0;
+      height: var(--data-grid-row-height);
+      /* Border width is always 1px, even when not visually shown (transparent),
+         so hover/selection never changes the box size and shifts content. */
+      border: 1px solid transparent;
+      background: var(--item-bg);
+      border-radius: var(--item-border-radius);
+      padding: 0;
+      box-sizing: border-box;
+      /* Only background transitions - hover ("tickled") no longer changes
+         border, so there is nothing else to animate. */
+      transition: background var(--transition, 0.1s ease-out);
+    }
+    /* Zebra striping: alternate rows tint towards the text colour, which
+       lightens in dark themes and darkens in light themes - so it reads as
+       "more contrast" either way. The zebra-odd class is only applied when
+       zebraStripes is set (see render()). Declared before .tickled /
+       .selected so those states (same specificity) still win when a striped
+       row is also hovered or selected. */
+    .row.item.zebra-odd {
+      background: color-mix(in oklch, transparent calc(100% - var(--data-grid-zebra-intensity, 6%)), var(--surface-3-text) var(--data-grid-zebra-intensity, 6%));
+    }
+    /* Hover: background only, no border change (avoids layout shift + colour flash). */
+    .row.item.tickled { background: var(--item-bg-tickled); color: var(--item-text-tickled); }
+    .row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
+    .row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
+    .row.item.dragging-origin { opacity: 0.6; }
+
+    /* Insertion / removal animation. Only while [reflowing] — the ~0.3s after
+       the row set changes — do rows slide (their top transitions) to make or
+       close a gap; a freshly inserted row also fades in. Kept scoped so it
+       never fires while scrolling the virtualised list. */
+    :host([reflowing]) .row.item,
+    :host([reflowing]) .group-row {
+      transition: top var(--data-grid-row-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1);
+    }
+    .row.item.entering {
+      animation: ixfx-list-item-in var(--data-grid-row-move-duration, 200ms) ease both;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([reflowing]) .row.item, :host([reflowing]) .group-row { transition: none; }
+      .row.item.entering { animation: none; }
+    }
+    .cell {
+      flex-shrink: 0; display: flex; align-items: center; padding: 0 var(--space-s);
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: var(--border-subtle);
+      box-sizing: border-box;
+      font-variant-numeric: tabular-nums;
+    }
+    .cell.editable-text { cursor: text; }
+    .cell input, .cell select { width: 100%; font: inherit; }
+    /* Per-row icon / badge, enabled by nominating iconColumn / badgeColumn.
+       The badge self-justifies to the cell's trailing edge; the value text
+       keeps its own flex sizing so the cell still ellipsises. */
+    .cell-icon {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-inline-end: var(--data-grid-cell-icon-gap, 6px);
+      width: var(--data-grid-cell-icon-size, 1em);
+      height: var(--data-grid-cell-icon-size, 1em);
+    }
+    .cell-badge {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      margin-inline-start: auto;
+      padding-inline-start: var(--data-grid-badge-gap, 6px);
+    }
+    .checkbox-col { width: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    ixfx-menu-trigger { flex: 1; border-left: var(--border-subtle); background: var(--data-grid-header-bg); display: flex; align-items: center; --ixfx-button-padding: var(--space-s) var(--space-m); min-height: var(--data-grid-header-height); justify-content: center; }
+    .header-cell[drag-source] { opacity: 0.4; }
+    .drop-caret {
+      position: absolute; top: 0; bottom: 0; width: 2px;
+      background: var(--accent); border-radius: 1px; pointer-events: none; z-index: 2;
+    }
+    .group-row {
+      position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: var(--space-s);
+      height: var(--data-grid-row-height); background: transparent; color: var(--surface-3-text);
+      border-bottom: 1px solid var(--border); font-weight: 600; padding: 0 var(--space-s);
+      cursor: pointer; user-select: none;
+    }
+    .group-row .caret { transition: transform 0.15s; display: inline-flex; }
+    .group-row.collapsed .caret { transform: rotate(-90deg); }
+    .group-row .divider { flex: 1; height: 1px; background: var(--border); margin-left: var(--space-s); }
+    .group-row .count { opacity: 0.6; font-weight: 400; font-size: 0.9em; }
+
+  `
+		];
+	}
+	#viewportResizeObserver;
+	#nativeDragging;
+	#dragOriginKey;
+	#postDragSuppressTimer;
+	#pointerEventSuppressess;
+	#nativeDrag;
+	#prepareNativeDrag(originKey) {
+		const rows = this._flat.filter((f) => f.type === `row`);
+		if (!rows.some((f) => f.key === originKey)) return void 0;
+		if (!this._selectedKeys.has(originKey)) this._replaceSelection(originKey);
+		const selected = [];
+		let displayIndex = 0;
+		for (const entry of rows) {
+			if (!this._selectedKeys.has(entry.key)) {
+				displayIndex++;
+				continue;
+			}
+			const rowEl = this.renderRoot.querySelector(`.row[data-key="${CSS.escape(entry.key)}"]`) ?? void 0;
+			selected.push({
+				key: entry.key,
+				index: displayIndex,
+				item: entry.row,
+				...rowEl ? { element: rowEl } : {}
+			});
+			displayIndex++;
+		}
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
+	#flatIndexByKey;
+	/** Bumped whenever `_flat` changes; drives `#noteFlatMutation`. */
+	#flatVersion;
+	#notedFlatVersion;
+	/** Inputs `_sortedRows` / `_flat` were last derived from — see `#syncDerivedRows`. */
+	#sortInputs;
+	#flatInputs;
+	/** `_flat` projected for the tickled controller, cached until `_flat` changes. */
+	#tickledItems;
+	#searchRegistry;
+	#unregisterSearchCommands;
+	#searchKeyByRow;
+	/** Command registry carrying this grid's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	#rowSearchText(row) {
+		if (this.rowSearchText) return this.rowSearchText(row);
+		const rec = row;
+		return this._visibleColumns.map((c) => String(rec[c.key] ?? ``)).join(` `);
+	}
+	#createSearchAdapter() {
+		return {
+			getItems: () => {
+				this.#searchKeyByRow.clear();
+				this._sortedRows.forEach((r, i) => this.#searchKeyByRow.set(r, this.getRowKey(r, i)));
+				return this._sortedRows;
+			},
+			getLabel: (row) => this.#rowSearchText(row),
+			getKey: (row) => this.#searchKeyByRow.get(row) ?? String(this._sortedRows.indexOf(row)),
+			focusItem: (row) => {
+				if (row === void 0) return;
+				const key = this.#searchKeyByRow.get(row);
+				if (key !== void 0) this.tickleRow(key);
+			},
+			selectItems: (rows) => {
+				this.selectKeys(rows.map((r) => this.#searchKeyByRow.get(r)).filter((k) => k !== void 0));
+			},
+			applyFilter: (matched) => {
+				this.filterPredicate = matched === void 0 ? void 0 : (row) => {
+					const k = this.#searchKeyByRow.get(row);
+					return k === void 0 || matched.has(k);
+				};
+			}
+		};
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
+	/** Row-key snapshot from the previous update, for the insertion / removal animation. */
+	#prevFlatKeys;
+	#enteringRowKeys;
+	#rowReflowTimer;
+	#dataGridRenderedOnce;
+	#viewportChangeRaf;
+	/** Key sets as of the last `datagrid-viewport-change` dispatch, for dedupe. */
+	#lastViewportRenderedKeys;
+	#lastViewportVisibleKeys;
+	#resortRaf;
+	#detachShiftWheel;
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.addEventListener(`focusout`, this._onFocusOut);
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
+		this.#detachShiftWheel = attachShiftWheel(() => this._viewportEl ?? void 0);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.removeEventListener(`focusout`, this._onFocusOut);
+		cancelAnimationFrame(this._raf);
+		cancelAnimationFrame(this.#viewportChangeRaf);
+		this.#viewportChangeRaf = 0;
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
+		if (this.#rowReflowTimer) {
+			clearTimeout(this.#rowReflowTimer);
+			this.#rowReflowTimer = 0;
+		}
+		if (this.#postDragSuppressTimer) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = 0;
+		}
+		this.#viewportResizeObserver?.disconnect();
+		this.#viewportResizeObserver = void 0;
+		this.#detachShiftWheel?.();
+		this.#detachShiftWheel = void 0;
+	}
+	/**
+	* Dispatch a command to this grid — routes through the command registry so
+	* `list.search.*` (and any other registered commands) work.
+	*/
+	dispatch(commandId, args) {
+		this.#searchRegistry?.invoke(commandId, args);
+	}
+	firstUpdated() {
+		this.#viewportResizeObserver = new ResizeObserver(() => this.#measureViewport());
+		this.#viewportResizeObserver.observe(this._viewportEl);
+		this.#measureViewport();
+	}
+	/**
+	* Re-read the viewport's size and update `_viewportH`/`_viewportW` if it
+	* changed. A zero-sized read (e.g. while hosted in a hidden/inactive dock
+	* tab) is ignored so it never clobbers the last known-good geometry — the
+	* observer fires again with the real size once the host becomes visible.
+	*/
+	#measureViewport() {
+		if (!this._viewportEl) return;
+		const vp = this._viewportEl;
+		const w = vp.clientWidth;
+		const h = this.#bodyHeight();
+		if (w <= 0 || h <= 0) return;
+		const grid = vp.parentElement;
+		grid.style.setProperty(`--data-grid-scrollbar-width`, `${vp.offsetWidth - w}px`);
+		grid.style.setProperty(`--data-grid-viewport-width`, `${w}px`);
+		if (w === this._viewportW && h === this._viewportH) return;
+		this._viewportW = w;
+		this._viewportH = h;
+		this.#scheduleViewportChangeEmit();
+	}
+	/**
+	* Force a fresh re-measure of the viewport and re-render. Normally
+	* unnecessary — a `ResizeObserver` tracks the viewport automatically — but
+	* gives a consumer an escape hatch to recover if an ancestor's
+	* layout/visibility changes without the observer noticing (matches
+	* `ixfx-grid-list`'s `refreshLayout()`).
+	*/
+	refreshLayout() {
+		this.#measureViewport();
+		this.requestUpdate();
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`) || changed.has(`filterPredicate`) || changed.has(`rowHeight`)) this.#scheduleViewportChangeEmit();
+		if (changed.has(`_editing`) || changed.has(`_editingRow`)) this.updateComplete.then(() => {
+			let sel = null;
+			if (this._editing) sel = `.row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] input, .row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] select`;
+			else if (this._editingRow) sel = `.row[data-key="${this._editingRow}"] .cell input, .row[data-key="${this._editingRow}"] .cell select`;
+			if (!sel) return;
+			const el = this.renderRoot.querySelector(sel);
+			el?.focus();
+			if (el instanceof HTMLInputElement && el.type === `text`) el.select();
+		});
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
+		this.#syncDerivedRows();
+		this._visibleColumns = this.columns.filter((c) => c.visible !== false);
+		let off = 0;
+		this._colOffsets = this._visibleColumns.map((c) => {
+			const o = off;
+			off += c.width ?? 150;
+			return o;
+		});
+		this._colWidthSum = off;
+		if (this.interactionMode === `checked`) this._colWidthSum += 28;
+		if (this.#flatVersion !== this.#notedFlatVersion) {
+			this.#notedFlatVersion = this.#flatVersion;
+			this.#noteFlatMutation();
+		}
+	}
+	/**
+	* Re-derive `_sortedRows` / `_flat` only when one of their inputs changed
+	* identity. Scroll, hover, selection and edit-state updates touch none of
+	* them, so those frames cost O(window) instead of O(rows).
+	*/
+	#syncDerivedRows() {
+		const sortInputs = [
+			this.rows,
+			this.sortState,
+			this.columns
+		];
+		const flatInputs = [
+			this.filterPredicate,
+			this.groupBy,
+			this.groupLabel,
+			this._collapsedGroups,
+			this.getRowKey
+		];
+		const resort = !sameRefs(this.#sortInputs, sortInputs);
+		if (resort) {
+			this.#sortInputs = sortInputs;
+			this._sortedRows = this._applySort([...this.rows]);
+		}
+		if (resort || !sameRefs(this.#flatInputs, flatInputs)) {
+			this.#flatInputs = flatInputs;
+			this._rebuildFlat();
+		}
+	}
+	/** Mark the derived rows as matching the current inputs (after an incremental update). */
+	#markDerivedRowsSynced() {
+		this.#sortInputs = [
+			this.rows,
+			this.sortState,
+			this.columns
+		];
+		this.#flatInputs = [
+			this.filterPredicate,
+			this.groupBy,
+			this.groupLabel,
+			this._collapsedGroups,
+			this.getRowKey
+		];
+	}
+	/**
+	* Diff the row-key list against the previous update. Rows that appeared get an
+	* enter fade; any add/remove opens a short `[reflowing]` window so the rows
+	* that shift slide (their `top` transitions) instead of snapping. Bounded in
+	* time so it never bleeds into scroll virtualisation.
+	*/
+	#noteFlatMutation() {
+		const now = this._flatKeys;
+		const prev = this.#prevFlatKeys;
+		this.#prevFlatKeys = now.slice();
+		if (!this.#dataGridRenderedOnce) {
+			this.#dataGridRenderedOnce = true;
+			return;
+		}
+		if (prev.length === 0 || now.length === 0) {
+			this.#enteringRowKeys.clear();
+			return;
+		}
+		const before = new Set(prev);
+		const added = now.filter((k) => !before.has(k));
+		const removedCount = prev.length - (now.length - added.length);
+		if (added.length === now.length || added.length === 0 && removedCount === 0) return;
+		this.#enteringRowKeys = new Set(added);
+		this.toggleAttribute(`reflowing`, true);
+		if (this.#rowReflowTimer) clearTimeout(this.#rowReflowTimer);
+		this.#rowReflowTimer = window.setTimeout(() => {
+			this.#rowReflowTimer = 0;
+			this.#enteringRowKeys.clear();
+			this.toggleAttribute(`reflowing`, false);
+			this.requestUpdate();
+		}, 320);
+	}
+	_getGroupKey(row) {
+		if (!this.groupBy) return null;
+		if (typeof this.groupBy === `string`) return String(row[this.groupBy] ?? ``);
+		return String(this.groupBy(row));
+	}
+	_rebuildFlat() {
+		const pred = this.filterPredicate;
+		const sourceIdx = [];
+		for (let i = 0; i < this._sortedRows.length; i++) if (!pred || pred(this._sortedRows[i])) sourceIdx.push(i);
+		const flat = [];
+		const keys = [];
+		const pushRow = (idx) => {
+			const row = this._sortedRows[idx];
+			const key = this.getRowKey(row, idx);
+			flat.push({
+				type: `row`,
+				key,
+				row,
+				idx
+			});
+			keys.push(key);
+		};
+		if (!this.groupBy) sourceIdx.forEach(pushRow);
+		else {
+			const groups = /* @__PURE__ */ new Map();
+			for (const idx of sourceIdx) {
+				const k = this._getGroupKey(this._sortedRows[idx]) ?? ``;
+				const arr = groups.get(k);
+				if (arr) arr.push(idx);
+				else groups.set(k, [idx]);
+			}
+			for (const [gKey, idxs] of groups) {
+				const label = this.groupLabel ? this.groupLabel(gKey, idxs.map((i) => this._sortedRows[i])) : gKey;
+				const gId = `__group__${gKey}`;
+				flat.push({
+					type: `group`,
+					key: gId,
+					label,
+					count: idxs.length
+				});
+				keys.push(gId);
+				if (!this._collapsedGroups.has(gKey)) idxs.forEach(pushRow);
+			}
+		}
+		this._flat = flat;
+		this._flatKeys = keys;
+		this.#rebuildFlatIndex();
+	}
+	#rebuildFlatIndex() {
+		this.#flatIndexByKey.clear();
+		this._flat.forEach((f, i) => this.#flatIndexByKey.set(f.key, i));
+		this.#flatVersion++;
+		this.#tickledItems = void 0;
+	}
+	/** Flat entry for a row key, or `undefined` for unknown keys and group headers. */
+	#rowEntry(key) {
+		const i = this.#flatIndexByKey.get(key);
+		const entry = i === void 0 ? void 0 : this._flat[i];
+		if (entry?.type === `row`) return entry;
+		const idx = this._sortedRows.findIndex((r, j) => this.getRowKey(r, j) === key);
+		return idx < 0 ? void 0 : {
+			row: this._sortedRows[idx],
+			idx
+		};
+	}
+	_toggleGroup(gKey) {
+		const next = new Set(this._collapsedGroups);
+		if (next.has(gKey)) next.delete(gKey);
+		else next.add(gKey);
+		this._collapsedGroups = next;
+	}
+	_applySort(rows) {
+		if (!this.sortState) return rows;
+		const col = this.columns.find((c) => c.key === this.sortState.key);
+		if (!col) return rows;
+		const dir = this.sortState.direction === `asc` ? 1 : -1;
+		if (col.sortFn) return rows.sort((a, b) => dir * col.sortFn(a, b));
+		const dataType = col.dataType ?? `text`;
+		return rows.sort((a, b) => {
+			const av = a[col.key];
+			const bv = b[col.key];
+			if (av === bv) return 0;
+			if (dataType === `number`) return dir * (av - bv);
+			if (dataType === `boolean`) return dir * (Boolean(av) === Boolean(bv) ? 0 : av ? 1 : -1);
+			return dir * String(av).localeCompare(String(bv));
+		});
+	}
+	_onHeaderClick(col, e) {
+		if (col.sortable === false) return;
+		if (e) {
+			const pointerEvent = e.composedPath()[0];
+			if (pointerEvent && this.#pointerEventSuppressess.get(pointerEvent)) {
+				this.#pointerEventSuppressess.delete(pointerEvent);
+				return;
+			}
+		}
+		const prev = this.sortState;
+		let next = null;
+		if (!prev || prev.key !== col.key) next = {
+			key: col.key,
+			direction: `asc`
+		};
+		else if (prev.direction === `asc`) next = {
+			key: col.key,
+			direction: `desc`
+		};
+		else next = null;
+		this.sortState = next;
+		this.dispatchEvent(new CustomEvent(`datagrid-sort`, {
+			detail: {
+				sort: next,
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onHeaderPointerUp(col, e) {
+		let stopped = false;
+		const customEvent = new CustomEvent(`datagrid-header-pointerup`, {
+			detail: {
+				key: col.key,
+				column: col
+			},
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		this.dispatchEvent(customEvent);
+		if (customEvent.defaultPrevented) stopped = true;
+		if (stopped) this.#pointerEventSuppressess.set(e, true);
+	}
+	_onColButtonClick(col, e) {
+		e.stopPropagation();
+		const icon = col.button === false ? this.columnButtonIcon : typeof col.button === `object` && col.button.icon ? col.button.icon : this.columnButtonIcon;
+		const target = e.currentTarget;
+		const customEvent = new CustomEvent(`datagrid-header-button-click`, {
+			detail: {
+				key: col.key,
+				column: col,
+				icon,
+				clientX: e.clientX,
+				clientY: e.clientY,
+				anchorElement: target
+			},
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		this.dispatchEvent(customEvent);
+		if (customEvent.defaultPrevented) this.#pointerEventSuppressess.set(e, true);
+	}
+	_onRowClick(rowKey, col, e) {
+		if (this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
+		if (col && col.selectable === false) return;
+		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
+		if (this.interactionMode === `manual`) return;
+		if (this.interactionMode === `implicit`) {
+			this._replaceSelection(rowKey);
+			return;
+		}
+		if (this.interactionMode === `checked`) return;
+		if (this.interactionMode === `sticky`) {
+			this._toggleSelection(rowKey);
+			return;
+		}
+		if (e.ctrlKey || e.metaKey) {
+			if (this.selectionMode === `multiple` || this.interactionMode === `vscode`) this._toggleSelection(rowKey);
+		} else if (e.shiftKey && (this.selectionMode === `multiple` || this.interactionMode === `vscode`)) this._rangeSelectTo(rowKey);
+		else this._replaceSelection(rowKey);
+	}
+	_onCheckboxClick(rowKey, e) {
+		e.stopPropagation();
+		this._onRowClick(rowKey, null, e);
+	}
+	_onVisibilityToggle(col, checked) {
+		col.visible = checked;
+		this.columns = [...this.columns];
+		this.dispatchEvent(new CustomEvent(`datagrid-column-visibility`, {
+			detail: {
+				key: col.key,
+				visible: checked
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_beginHeaderDrag(e, col, idx) {
+		e.stopPropagation();
+		const anchor = e.currentTarget.closest(`.header-cell`) ?? e.currentTarget;
+		this._drag = {
+			pointerId: e.pointerId,
+			from: idx,
+			startX: e.clientX,
+			startY: e.clientY,
+			active: false,
+			ghost: null,
+			gap: void 0,
+			sourceCol: col
+		};
+		const onMove = (ev) => {
+			if (!this._drag || ev.pointerId !== this._drag.pointerId) return;
+			const dx = ev.clientX - this._drag.startX;
+			const dy = ev.clientY - this._drag.startY;
+			if (!this._drag.active) {
+				if (Math.hypot(dx, dy) < 5) return;
+				this._drag.active = true;
+				const content = document.createElement(`span`);
+				content.textContent = col.label;
+				try {
+					this._drag.ghost = createDragGhost({
+						anchor,
+						content
+					});
+					this._drag.ghost.move(ev.clientX, ev.clientY);
+				} catch {}
+				try {
+					this._headerRowEl?.setPointerCapture(ev.pointerId);
+				} catch {}
+			}
+			this._drag.ghost?.move(ev.clientX, ev.clientY);
+			const x = ev.clientX - (this._headerRowEl?.getBoundingClientRect().left ?? 0);
+			let gap = this._drag.from;
+			let bestDist = Infinity;
+			for (let i = 0; i < this._visibleColumns.length; i++) {
+				if (i === this._drag.from) continue;
+				const rectLeft = this._colOffsets[i];
+				const rectRight = rectLeft + (this._visibleColumns[i].width ?? 150);
+				const mid = (rectLeft + rectRight) / 2;
+				const gapPos = x < mid ? rectLeft : rectRight;
+				const gapIdx = x < mid ? i : i + 1;
+				const d = Math.abs(x - gapPos);
+				if (d < bestDist) {
+					bestDist = d;
+					gap = gapIdx > this._drag.from ? gapIdx - 1 : gapIdx;
+				}
+			}
+			if (this._visibleColumns.length > 0) {
+				const lastOff = this._colOffsets[this._colOffsets.length - 1] + (this._visibleColumns[this._visibleColumns.length - 1].width ?? 150);
+				const d = Math.abs(x - lastOff);
+				if (d < bestDist) {
+					bestDist = d;
+					gap = this._visibleColumns.length - 1;
+					if (this._drag.from === this._visibleColumns.length - 1) gap = this._drag.from;
+					else if (gap >= this._drag.from) gap = this._visibleColumns.length - 1;
+				}
+			}
+			const siblings = this._visibleColumns.length - 1;
+			let normalizedGap = gap;
+			if (normalizedGap < 0) normalizedGap = 0;
+			if (normalizedGap > siblings) normalizedGap = siblings;
+			this._drag.gap = normalizedGap;
+			this.requestUpdate();
+		};
+		const onUp = (ev) => {
+			if (!this._drag || ev.pointerId !== this._drag.pointerId) return;
+			const active = this._drag.active;
+			const from = this._drag.from;
+			const gap = this._drag.gap;
+			this._drag.ghost?.destroy();
+			try {
+				this._headerRowEl?.releasePointerCapture(ev.pointerId);
+			} catch {}
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, onUp);
+			window.removeEventListener(`pointercancel`, onUp);
+			this._drag = null;
+			this.requestUpdate();
+			if (active && gap !== void 0 && gap !== from) this._onReorderDrag(from, gap);
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, onUp);
+		window.addEventListener(`pointercancel`, onUp);
+	}
+	_onReorderDrag(fromIdx, toIdx) {
+		if (fromIdx === toIdx) return;
+		const cols = [...this.columns];
+		const vis = cols.filter((c) => c.visible !== false);
+		const hidden = cols.filter((c) => c.visible === false);
+		const [moved] = vis.splice(fromIdx, 1);
+		vis.splice(toIdx, 0, moved);
+		this.columns = [...vis, ...hidden];
+		this.dispatchEvent(new CustomEvent(`datagrid-column-reorder`, {
+			detail: {
+				from: fromIdx,
+				to: toIdx,
+				columns: [...this.columns]
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_scrollRowIntoView(key) {
+		const idx = this.#flatIndexByKey.get(key);
+		if (idx === void 0 || !this._viewportEl) return;
+		const rh = this.rowHeight;
+		const top = (idx > 0 && this._flat[idx - 1].type === `group` ? idx - 1 : idx) * rh;
+		const bottom = (idx + 1) * rh;
+		const vt = this._viewportEl.scrollTop;
+		const vh = this.#bodyHeight();
+		let next = vt;
+		if (top < vt) next = top;
+		else if (bottom > vt + vh) next = bottom - vh;
+		if (next !== vt) {
+			this._viewportEl.scrollTop = next;
+			this._scrollTop = next;
+			this.requestUpdate();
+		}
+	}
+	_getRowForKey(key) {
+		const i = this.#flatIndexByKey.get(key);
+		const entry = i === void 0 ? void 0 : this._flat[i];
+		return entry?.type === `row` ? entry.row : void 0;
+	}
+	/** The selected row keys (read-only). */
+	get selectedKeys() {
+		return this._selectedKeys;
+	}
+	/** Replace the selection with these row keys (clamped to known rows). */
+	set selectedKeys(keys) {
+		this.selectKeys(keys);
+	}
+	/**
+	* Replace the selection with the given row keys. Unknown keys are dropped;
+	* in a single-select mode only the last surviving key is kept;
+	* `selectionMode="none"` clears. Fires `datagrid-select` with the previous
+	* set when the selection actually changes.
+	*/
+	selectKeys(keys) {
+		let next = new Set([...keys].filter((k) => this._getRowForKey(k) !== void 0));
+		const multi = this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode`;
+		if (this.selectionMode === `none`) next = /* @__PURE__ */ new Set();
+		else if (!multi && next.size > 1) {
+			const last = [...next].at(-1);
+			next = last === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([last]);
+		}
+		const prev = new Set(this._selectedKeys);
+		if (prev.size === next.size && [...next].every((k) => prev.has(k))) return;
+		this._selectedKeys = next;
+		this._anchorKey = [...next].at(-1);
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(next),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** The row key under the cursor, or `undefined`. */
+	get tickledKey() {
+		return this._tickled.tickledId;
+	}
+	/** Move the cursor to this row key and scroll it into view. */
+	tickleRow(key) {
+		if (!this.#flatIndexByKey.has(key) || key.startsWith(`__group__`)) return;
+		this._tickled.focus(key);
+		this._scrollRowIntoView(key);
+	}
+	/**
+	* Append rows without the full O(n log n) rebuild that reassigning `rows`
+	* incurs. `rows` still gets a new array reference (reactivity is preserved),
+	* but the derived arrays are extended over the appended slice only. When a
+	* sort is active the new rows show unsorted for one frame, then a single
+	* coalesced re-sort runs. Scroll position, selection and cursor are kept.
+	*/
+	appendRows(rows) {
+		if (rows.length === 0) return;
+		const startIdx = this.rows.length;
+		const inSync = this._sortedRows.length === startIdx && sameRefs(this.#sortInputs, [
+			this.rows,
+			this.sortState,
+			this.columns
+		]);
+		this.rows = [...this.rows, ...rows];
+		if (!inSync) return;
+		const appended = this.rows.slice(startIdx);
+		this._sortedRows = [...this._sortedRows, ...appended];
+		this.#appendToFlat(appended, startIdx);
+		this.#markDerivedRowsSynced();
+		if (this.sortState != null) {
+			cancelAnimationFrame(this.#resortRaf);
+			this.#resortRaf = requestAnimationFrame(() => {
+				this.#sortInputs = void 0;
+				this.requestUpdate();
+			});
+		}
+	}
+	#appendToFlat(appended, startIdx) {
+		if (this.groupBy) {
+			this._rebuildFlat();
+			return;
+		}
+		for (let j = 0; j < appended.length; j++) {
+			const idx = startIdx + j;
+			if (this.filterPredicate && !this.filterPredicate(appended[j])) continue;
+			const key = this.getRowKey(appended[j], idx);
+			this._flat.push({
+				type: `row`,
+				key,
+				row: appended[j],
+				idx
+			});
+			this._flatKeys.push(key);
+			this.#flatIndexByKey.set(key, this._flat.length - 1);
+		}
+		this.#flatVersion++;
+		this.#tickledItems = void 0;
+	}
+	_replaceSelection(key) {
+		if (this.selectionMode === `none`) return;
+		const prev = new Set(this._selectedKeys);
+		if (this.groupBy && !this.crossGroupSelection) {
+			const g = this._getGroupKey(this._getRowForKey(key) ?? { key });
+			[...prev].filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === g);
+			this._selectedKeys = /* @__PURE__ */ new Set([key]);
+		} else this._selectedKeys = /* @__PURE__ */ new Set([key]);
+		this._anchorKey = key;
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(this._selectedKeys),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_toggleSelection(key) {
+		const prev = new Set(this._selectedKeys);
+		const next = new Set(this._selectedKeys);
+		if (next.has(key)) next.delete(key);
+		else {
+			if (this.groupBy && !this.crossGroupSelection) {
+				const g = this._getGroupKey(this._getRowForKey(key) ?? { key });
+				for (const k of [...next]) if (this._getGroupKey(this._getRowForKey(k) ?? { key: k }) !== g) next.delete(k);
+			}
+			if (this.selectionMode !== `multiple` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) next.clear();
+			next.add(key);
+		}
+		this._selectedKeys = next;
+		this._anchorKey = key;
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(this._selectedKeys),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_rangeSelectTo(key) {
+		if (!this._anchorKey) {
+			this._replaceSelection(key);
+			return;
+		}
+		const keys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
+		const a = keys.indexOf(this._anchorKey);
+		const b = keys.indexOf(key);
+		if (a < 0 || b < 0) {
+			this._replaceSelection(key);
+			return;
+		}
+		if (this.groupBy && !this.crossGroupSelection) {
+			const anchorGroup = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
+			if (anchorGroup !== this._getGroupKey(this._getRowForKey(key) ?? { key })) {
+				this._replaceSelection(key);
+				return;
+			}
+			const groupKeys = keys.filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === anchorGroup);
+			const ga = groupKeys.indexOf(this._anchorKey);
+			const gb = groupKeys.indexOf(key);
+			if (ga < 0 || gb < 0) {
+				this._replaceSelection(key);
+				return;
+			}
+			const lo = Math.min(ga, gb);
+			const hi = Math.max(ga, gb);
+			const prev = new Set(this._selectedKeys);
+			this._selectedKeys = new Set(groupKeys.slice(lo, hi + 1));
+			this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+				detail: {
+					selectedKeys: new Set(this._selectedKeys),
+					previous: prev
+				},
+				bubbles: true,
+				composed: true
+			}));
+			return;
+		}
+		const lo = Math.min(a, b);
+		const hi = Math.max(a, b);
+		const prev = new Set(this._selectedKeys);
+		this._selectedKeys = new Set(keys.slice(lo, hi + 1));
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(this._selectedKeys),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_isEditable(row, col) {
+		if (this.editability === `disabled`) return false;
+		if (typeof this.editable === `function`) return this.editable(row, col);
+		if (this.editable === true) return col.editable !== false;
+		return !!col.editable;
+	}
+	_isTextEditor(col) {
+		const e = col.editor;
+		return !e || e === `auto`;
+	}
+	_isCellEditing(rowKey, colKey) {
+		if (this.editability === `immediate` && this._isEditable(this.#rowEntry(rowKey)?.row ?? {}, this.columns.find((c) => c.key === colKey))) return true;
+		if (this._editingRow === rowKey) return this._isEditable(this.#rowEntry(rowKey)?.row ?? {}, this.columns.find((c) => c.key === colKey));
+		return this._editing?.rowKey === rowKey && this._editing?.colKey === colKey;
+	}
+	_activateRow(rowKey, row, rowIndex) {
+		this.dispatchEvent(new CustomEvent(`datagrid-row-activate`, {
+			detail: {
+				rowKey,
+				row,
+				rowIndex
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_startEdit(rowKey, colKey) {
+		if (this.editability === `disabled`) return;
+		const row = this.#rowEntry(rowKey)?.row;
+		if (!row) return;
+		const col = this.columns.find((c) => c.key === colKey);
+		if (!col || !this._isEditable(row, col)) return;
+		this._editing = {
+			rowKey,
+			colKey
+		};
+		this._editingRow = null;
+		this._editValue = row[colKey];
+	}
+	/** Programmatic: put a single cell in edit mode. Works in manual/user/immediate (no-op if disabled or not editable). */
+	startEdit(rowKey, colKey) {
+		this._startEdit(rowKey, colKey);
+	}
+	/** Programmatic: put all editable cells of a row in edit mode. */
+	startRowEdit(rowKey) {
+		if (this.editability === `disabled`) return;
+		if (!this.#rowEntry(rowKey)?.row) return;
+		this._editing = null;
+		this._editingRow = rowKey;
+		this.requestUpdate();
+	}
+	stopEdit() {
+		this._editing = null;
+		this._editingRow = null;
+	}
+	setColumnFormatter(columnKey, formatter, options) {
+		if (!formatter) {
+			this._columnFormatters.delete(columnKey);
+			this.requestUpdate();
+			return;
+		}
+		if (typeof formatter === `string`) {
+			const digits = options?.digits ?? (formatter === `integer` ? 0 : 2);
+			if (formatter === `fixed`) this._columnFormatters.set(columnKey, (v) => typeof v === `number` && Number.isFinite(v) ? v.toFixed(digits) : String(v ?? ``));
+			else if (formatter === `percentage`) this._columnFormatters.set(columnKey, (v) => typeof v === `number` && Number.isFinite(v) ? `${v.toFixed(digits)}%` : String(v ?? ``));
+			else if (formatter === `integer`) this._columnFormatters.set(columnKey, (v) => typeof v === `number` && Number.isFinite(v) ? Math.round(v).toString() : String(v ?? ``));
+		} else this._columnFormatters.set(columnKey, formatter);
+		this.requestUpdate();
+	}
+	_formatValue(value, col, row) {
+		const perCol = this._columnFormatters.get(col.key);
+		if (perCol) return perCol(value);
+		if (col.formatter) return col.formatter(value, row, col);
+		if (this.globalFormatter) return this.globalFormatter(value, col.key, row);
+		return value;
+	}
+	/**
+	* Resolve the per-row appearance for the cell at `colKey`, honouring the
+	* nominated columns. Additive — `col.renderer` / `col.formatter` still own
+	* the cell's value; this only decorates it. Returns all-`undefined` for
+	* every cell when nothing is nominated (the common case).
+	*/
+	_cellLook(row, colKey) {
+		if (this.textColorColumn === `` && this.iconColumn === `` && this.badgeColumn === ``) return EMPTY_CELL_LOOK;
+		const rec = typeof row === `object` && row !== null ? row : {};
+		const textColor = colKey === this.textColorColumn ? appearanceColor(rec.textColor) : void 0;
+		const icon = colKey === this.iconColumn && !appearanceAbsent(rec.icon) ? rec.icon : void 0;
+		const iconColor = icon === void 0 ? void 0 : appearanceColor(rec.iconColor);
+		const badge = colKey === this.badgeColumn && !appearanceAbsent(rec.badge) ? rec.badge : void 0;
+		if (textColor === void 0 && icon === void 0 && badge === void 0) return EMPTY_CELL_LOOK;
+		return {
+			textColor,
+			icon,
+			iconColor,
+			badge
+		};
+	}
+	_handleCellSecondClick(rowKey, col) {
+		if (this.editability !== `user`) return;
+		const now = Date.now();
+		if (this._lastClick && this._lastClick.key === rowKey && this._lastClick.col === col.key && now - this._lastClick.time < 700 && now - this._lastClick.time > 150) {
+			this._startEdit(rowKey, col.key);
+			this._lastClick = null;
+		} else this._lastClick = {
+			key: rowKey,
+			col: col.key,
+			time: now
+		};
+	}
+	_commitEdit(fromImmediate = false) {
+		if (!this._editing && !fromImmediate) return;
+		const target = this._editing;
+		if (!target) return;
+		const { rowKey, colKey } = target;
+		const row = this.#rowEntry(rowKey)?.row;
+		if (!row) {
+			this._editing = null;
+			return;
+		}
+		const oldValue = row[colKey];
+		const newValue = this._editValue;
+		const col = this.columns.find((c) => c.key === colKey);
+		if (col?.editor && typeof col.editor === `function`) {} else {
+			row[colKey] = newValue;
+			this.rows = [...this.rows];
+		}
+		this._editing = null;
+		this.dispatchEvent(new CustomEvent(`datagrid-cell-edit`, {
+			detail: {
+				rowKey,
+				colKey,
+				oldValue,
+				newValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_tabToNext(rowKey, curColKey, dir) {
+		const row = this.#rowEntry(rowKey)?.row;
+		if (!row) return;
+		const cols = this._visibleColumns;
+		let next = cols.findIndex((c) => c.key === curColKey) + dir;
+		while (next >= 0 && next < cols.length) {
+			if (this._isEditable(row, cols[next])) {
+				if (this._editing) this._commitEdit();
+				this._suppressBlurCommit = true;
+				this._startEdit(rowKey, cols[next].key);
+				requestAnimationFrame(() => {
+					this._suppressBlurCommit = false;
+				});
+				return;
+			}
+			next += dir;
+		}
+		if (this._editing) this._commitEdit();
+		this._editing = null;
+		this.requestUpdate();
+	}
+	_commitImmediate(rowKey, colKey, value) {
+		const row = this.#rowEntry(rowKey)?.row;
+		if (!row) return;
+		const oldValue = row[colKey];
+		if (oldValue === value) return;
+		row[colKey] = value;
+		this.rows = [...this.rows];
+		this.dispatchEvent(new CustomEvent(`datagrid-cell-edit`, {
+			detail: {
+				rowKey,
+				colKey,
+				oldValue,
+				newValue: value
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Measure the width a column would need to show its header label and every
+	* row's (formatted) value without truncation, clamped to `minWidth`/`maxWidth`.
+	* Values are measured from their formatted string via canvas `measureText` -
+	* accurate for plain text, an estimate for anything else.
+	*/
+	_measureAutoWidth(col) {
+		const cs = getComputedStyle(this);
+		const font = `${cs.fontSize} ${cs.fontFamily}`;
+		const ctx = document.createElement(`canvas`).getContext(`2d`);
+		const cellPad = 24;
+		const headerExtra = 40;
+		const measure = (text) => {
+			if (!ctx) return text.length * 8;
+			ctx.font = font;
+			return Math.ceil(ctx.measureText(text).width);
+		};
+		let maxW = measure(col.label) + headerExtra;
+		for (const r of this.rows) {
+			const v = r[col.key];
+			if (v === null || v === void 0 || v === ``) continue;
+			const w = measure(String(this._formatValue(v, col, r))) + cellPad;
+			if (w > maxW) maxW = w;
+		}
+		const min = col.minWidth ?? 40;
+		const max = col.maxWidth ?? 600;
+		return Math.max(min, Math.min(max, maxW));
+	}
+	_autoSizeColumn(col) {
+		const w = this._measureAutoWidth(col);
+		col.width = w;
+		this.requestUpdate();
+		this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
+			detail: {
+				key: col.key,
+				width: w
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Resize a single column, by key, to fit its contents (header label + every
+	* row's formatted value), animating the width change smoothly. Only works
+	* for plain columns - one with a custom `renderer` can't be measured
+	* reliably from its raw value, so it's left untouched. Returns `false` (and
+	* does nothing) if the column doesn't exist, isn't resizable, or has a
+	* `renderer`.
+	*/
+	autoSizeColumn(key) {
+		const col = this.columns.find((c) => c.key === key);
+		if (!col || col.resizable === false || col.renderer) return false;
+		const target = this._measureAutoWidth(col);
+		if ((col.width ?? 150) === target) return true;
+		this._animatingColKeys = new Set(this._animatingColKeys).add(key);
+		requestAnimationFrame(() => {
+			col.width = target;
+			this.requestUpdate();
+			this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
+				detail: {
+					key,
+					width: target
+				},
+				bubbles: true,
+				composed: true
+			}));
+			window.setTimeout(() => {
+				const next = new Set(this._animatingColKeys);
+				next.delete(key);
+				this._animatingColKeys = next;
+			}, this._columnResizeAnimationMs());
+		});
+		return true;
+	}
+	_columnResizeAnimationMs() {
+		const raw = getComputedStyle(this).getPropertyValue(`--data-grid-column-resize-duration`).trim();
+		const ms = raw.endsWith(`ms`) ? Number.parseFloat(raw) : raw.endsWith(`s`) ? Number.parseFloat(raw) * 1e3 : Number.parseFloat(raw);
+		return (Number.isFinite(ms) && ms > 0 ? ms : 180) + 30;
+	}
+	_onResizePointerDown(e, col) {
+		e.preventDefault();
+		e.stopPropagation();
+		const startX = e.clientX;
+		const startW = col.width ?? 150;
+		this._resizingColKey = col.key;
+		const onMove = (ev) => {
+			col.width = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
+			this.requestUpdate();
+		};
+		const onUp = (ev) => {
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, onUp);
+			this._resizingColKey = void 0;
+			const w = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
+			this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
+				detail: {
+					key: col.key,
+					width: w
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, onUp);
+	}
+	/** Height of the row area: the viewport minus the sticky header row inside it. */
+	#bodyHeight() {
+		return this._viewportEl.clientHeight - (this._headerRowEl?.offsetHeight ?? 0);
+	}
+	/** Flat-index window `[start, end)` intersecting the viewport, widened by `overscan` rows each side. */
+	#windowRows(overscan) {
+		const rh = this.rowHeight;
+		return {
+			start: Math.max(0, Math.floor(this._scrollTop / rh) - overscan),
+			end: Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh) + overscan)
+		};
+	}
+	getVisibleRange() {
+		const { start: startRow, end: endRow } = this.#windowRows(2);
+		return {
+			startRow,
+			endRow,
+			startCol: this._findFirstVisibleCol(this._scrollLeft),
+			endCol: this._findLastVisibleCol(this._scrollLeft + this._viewportW)
+		};
+	}
+	/** Row keys currently within the windowed/visible range, in display order. */
+	renderedKeys() {
+		const { startRow, endRow } = this.getVisibleRange();
+		return this._flat.slice(startRow, endRow).filter((f) => f.type === `row`).map((f) => f.key);
+	}
+	/**
+	* Row keys strictly intersecting the viewport (no overscan), mirroring
+	* `ixfx-grid-list.visibleKeys()` for the `datagrid-viewport-change` detail.
+	*/
+	#visibleKeys() {
+		const { start, end } = this.#windowRows(0);
+		return this._flat.slice(start, end).filter((f) => f.type === `row`).map((f) => f.key);
+	}
+	/** Coalesce viewport-change dispatches to at most one per animation frame. */
+	#scheduleViewportChangeEmit() {
+		if (this.#viewportChangeRaf !== 0) return;
+		this.#viewportChangeRaf = requestAnimationFrame(() => {
+			this.#viewportChangeRaf = 0;
+			this.#emitViewportChangeIfChanged();
+		});
+	}
+	/**
+	* Dispatch `datagrid-viewport-change` with the current key sets — unless
+	* neither set changed since the last dispatch, so coalesced frames and
+	* no-op scrolls stay silent.
+	*/
+	#emitViewportChangeIfChanged() {
+		const renderedKeys = this.renderedKeys();
+		const visibleKeys = this.#visibleKeys();
+		if (sameKeys(this.#lastViewportRenderedKeys, renderedKeys) && sameKeys(this.#lastViewportVisibleKeys, visibleKeys)) return;
+		this.#lastViewportRenderedKeys = renderedKeys;
+		this.#lastViewportVisibleKeys = visibleKeys;
+		this.dispatchEvent(new CustomEvent(`datagrid-viewport-change`, {
+			detail: {
+				renderedKeys,
+				visibleKeys
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_findFirstVisibleCol(scrollLeft) {
+		let lo = 0;
+		let hi = this._colOffsets.length - 1;
+		let ans = 0;
+		while (lo <= hi) {
+			const mid = lo + hi >> 1;
+			if (this._colOffsets[mid] <= scrollLeft) {
+				ans = mid;
+				lo = mid + 1;
+			} else hi = mid - 1;
+		}
+		return ans;
+	}
+	_findLastVisibleCol(right) {
+		for (let i = 0; i < this._colOffsets.length; i++) if (this._colOffsets[i] > right) return i;
+		return this._colOffsets.length;
+	}
+	render() {
+		const rh = this.rowHeight;
+		const { start: startRow, end: endRow } = this.#windowRows(2);
+		const visibleFlat = this._flat.slice(startRow, endRow).map((entry, i) => ({
+			entry,
+			absIdx: startRow + i
+		}));
+		const pinnedKey = this._editing?.rowKey ?? this._editingRow;
+		const pinnedIdx = pinnedKey ? this.#flatIndexByKey.get(pinnedKey) : void 0;
+		if (pinnedIdx !== void 0) {
+			if (pinnedIdx >= startRow && pinnedIdx < endRow) visibleFlat.splice(pinnedIdx - startRow, 1);
+			visibleFlat.unshift({
+				entry: this._flat[pinnedIdx],
+				absIdx: pinnedIdx
+			});
+		}
+		const showCheckbox = this.interactionMode === `checked`;
+		return html`
+      <div class="grid ${this.columnMenu === `auto` ? `has-actions` : ``}" role="grid" aria-rowcount=${this._flat.length + 1} aria-colcount=${this._visibleColumns.length} aria-multiselectable=${this.selectionMode === `multiple` ? `true` : `false`}>
+        <div class="viewport scroll-fade-y" @scroll=${this._onScroll}>
+          <div class="header-row scroll-fade-x" role="row" aria-rowindex="1">
+            ${showCheckbox ? html`<div class="header-cell checkbox-col" role="columnheader"></div>` : nothing}
+            ${repeat(this._visibleColumns, (c) => c.key, (col, idx) => html`
+              <div class="header-cell ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" role="columnheader" aria-sort=${this.sortState?.key === col.key ? this.sortState.direction === `asc` ? `ascending` : `descending` : `none`} style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
+                @click=${(e) => this._onHeaderClick(col, e)}
+                @pointerenter=${() => this._tickled.handlePointerEnter(col.key)}>
+                ${col.reorderable !== false ? html`<span class="reorder-handle" draggable="false"
+                  @pointerdown=${(e) => this._beginHeaderDrag(e, col, idx)}
+                ><span class="ixfx-handle" data-handle="dotted" data-shape="vertical" part="reorder-handle"></span></span>` : nothing}
+                <span class="header-label" @pointerup=${(e) => this._onHeaderPointerUp(col, e)}>${col.label}</span>
+                ${this.sortState?.key === col.key ? html`<span class="sort-icon"><ixfx-icon name=${this.sortState.direction === `asc` ? `chevron-up` : `chevron-down`} size="12"></ixfx-icon></span>` : nothing}
+                ${col.button !== false ? html`<span class="col-button" @click=${(e) => this._onColButtonClick(col, e)}><ixfx-icon name=${col.button && typeof col.button === `object` && col.button.icon ? col.button.icon : this.columnButtonIcon} size="14"></ixfx-icon></span>` : nothing}
+                ${col.resizable !== false ? html`<span class="resize-handle" ?data-active=${this._resizingColKey === col.key} @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this._autoSizeColumn(col);
+		}}></span>` : nothing}
+              </div>
+            `)}
+            ${this._drag?.active && this._drag.gap !== void 0 ? html`<div class="drop-caret" style="left:${(() => {
+			const gap = this._drag.gap;
+			if (gap < this._colOffsets.length) return this._colOffsets[gap];
+			const last = this._colOffsets.length - 1;
+			return last >= 0 ? this._colOffsets[last] + (this._visibleColumns[last].width ?? 150) : 0;
+		})()}px"></div>` : nothing}
+          </div>
+          <div class="spacer" style="height:${this._flat.length * rh}px; width:${this._colWidthSum}px">
+            ${repeat(visibleFlat, (f) => f.entry.key, ({ entry, absIdx }) => {
+			if (entry.type === `group`) {
+				const gKey = entry.key.replace(/^__group__/, ``);
+				const collapsed = this._collapsedGroups.has(gKey);
+				return html`<div class="group-row ${collapsed ? `collapsed` : ``}" role="row" aria-rowindex=${absIdx + 2} style="top:${absIdx * rh}px; height:${rh}px" @click=${() => this._toggleGroup(gKey)}><span class="caret"><ixfx-icon name="chevron-down" size="12"></ixfx-icon></span><span role="rowheader" aria-expanded=${collapsed ? `false` : `true`}>${entry.label}</span><span class="count">(${entry.count})</span><span class="divider"></span></div>`;
+			}
+			const row = entry.row;
+			const absIdx2 = entry.idx;
+			const rowKey = entry.key;
+			const selected = this._selectedKeys.has(rowKey);
+			const tickled = this._tickled.isTickled(rowKey);
+			return html`
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" role="row" aria-rowindex=${absIdx + 2} aria-selected=${selected ? `true` : `false`} style="top:${absIdx * rh}px; height:${rh}px"
+                  data-key=${rowKey}
+                  draggable=${this.#nativeDrag.draggableAttr}
+                  @click=${(e) => {
+				this._onRowClick(rowKey, null, e);
+				this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
+					detail: {
+						rowKey,
+						colKey: ``,
+						rowIndex: absIdx2,
+						colIndex: -1
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}}
+                  @pointerenter=${() => this._tickled.handlePointerEnter(rowKey)}
+                  @pointerleave=${() => this._tickled.clearTickled()}
+                  @dblclick=${() => {
+				if (this._visibleColumns[0] && this._isEditable(row, this._visibleColumns[0])) this._startEdit(rowKey, this._visibleColumns[0].key);
+				else this._activateRow(rowKey, row, absIdx2);
+			}}>
+                  ${showCheckbox ? html`<div class="checkbox-col"><input type="checkbox" .checked=${selected} @click=${(e) => this._onCheckboxClick(rowKey, e)} /></div>` : nothing}
+                  ${repeat(this._visibleColumns, (c) => c.key, (col) => {
+				const val = row[col.key];
+				if (this._isCellEditing(rowKey, col.key)) {
+					const immediate = this.editability === `immediate` || this._editingRow === rowKey;
+					const curVal = immediate ? val : this._editValue ?? val;
+					const effectiveDataType = col.dataType ?? `text`;
+					if (effectiveDataType === `boolean` && (col.editor === `auto` || col.editor === `select` || !col.editor)) return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
+						const v = e.target.checked;
+						if (immediate) this._commitImmediate(rowKey, col.key, v);
+						else {
+							this._editValue = v;
+							this._commitEdit();
+						}
+					}} /></div>`;
+					if (col.editor === `select`) {
+						const opts = col.editorOptions ?? [];
+						return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px"><select @change=${(e) => {
+							const v = e.target.value;
+							if (immediate) this._commitImmediate(rowKey, col.key, v);
+							else {
+								this._editValue = v;
+								this._commitEdit();
+							}
+						}} @keydown=${(e) => {
+							if (e.key === `Tab`) {
+								e.preventDefault();
+								e.stopPropagation();
+								this._tabToNext(rowKey, col.key, e.shiftKey ? -1 : 1);
+							}
+							if (e.key === `Escape`) {
+								this._editing = null;
+								this._editingRow = null;
+							}
+						}} @blur=${() => {
+							if (this._suppressBlurCommit) return;
+							if (!immediate) this._commitEdit();
+						}}><option value=""></option>${opts.map((o) => {
+							const v = typeof o === `string` ? o : o.value;
+							const l = typeof o === `string` ? o : o.label;
+							return html`<option value=${v} ?selected=${String(curVal) === v}>${l}</option>`;
+						})}</select></div>`;
+					}
+					if (typeof col.editor === `function`) {
+						const factory = col.editor;
+						const ctx = {
+							row,
+							column: col,
+							rowIndex: absIdx2,
+							colIndex: 0,
+							value: curVal,
+							commit: (v) => {
+								if (immediate) this._commitImmediate(rowKey, col.key, v);
+								else {
+									this._editValue = v;
+									this._commitEdit();
+								}
+							},
+							cancel: () => {
+								this._editing = null;
+								this._editingRow = null;
+							}
+						};
+						return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px">${factory(ctx)}</div>`;
+					}
+					const inputType = effectiveDataType === `number` ? `number` : `text`;
+					const inputValue = effectiveDataType === `number` ? String(curVal ?? ``) : String(curVal ?? ``);
+					return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px"><input type=${inputType} .value=${inputValue} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
+						if (e.key === `Enter`) this._commitEdit();
+						if (e.key === `Escape`) {
+							this._editing = null;
+							this._editingRow = null;
+						}
+						if (e.key === `Tab`) {
+							e.preventDefault();
+							e.stopPropagation();
+							this._tabToNext(rowKey, col.key, e.shiftKey ? -1 : 1);
+						}
+					}} @blur=${() => {
+						if (this._suppressBlurCommit) return;
+						if (!immediate) this._commitEdit();
+					}} autofocus /></div>`;
+				}
+				const displayVal = this._formatValue(val, col, row);
+				const rendered = col.renderer ? col.renderer(row, col, absIdx2) : displayVal;
+				const cellContent = col.renderer ? rendered : displayVal;
+				const textEditable = this._isEditable(row, col) && this._isTextEditor(col);
+				const indent = col.align !== `right` && col.align !== `center` && col.reorderable !== false ? `padding-left:calc(var(--space-s) + var(--data-grid-reorder-handle-width, 10px) + var(--space-xs));` : ``;
+				const canPan = this.cellOverflow === `pan-text` && !col.renderer && (selected || tickled);
+				const look = this._cellLook(row, col.key);
+				const cellStyle = look.textColor === void 0 ? `` : `color:${look.textColor};`;
+				return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent} ${cellStyle}"
+                      @click=${(e) => {
+					this._lastClickedCell = {
+						rowKey,
+						colKey: col.key
+					};
+					if (col.selectable !== false) {
+						e.stopPropagation();
+						this._onRowClick(rowKey, col, e);
+						this._handleCellSecondClick(rowKey, col);
+					}
+					this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
+						detail: {
+							rowKey,
+							colKey: col.key,
+							rowIndex: absIdx2,
+							colIndex: this.columns.indexOf(col)
+						},
+						bubbles: true,
+						composed: true
+					}));
+				}}
+                    >${look.icon === void 0 ? nothing : html`<span class="cell-icon" part="icon" style=${look.iconColor === void 0 ? nothing : `color:${look.iconColor}`}>${look.icon}</span>`}${canPan ? html`<ixfx-pan-text mode="loop">${cellContent}</ixfx-pan-text>` : cellContent}${look.badge === void 0 ? nothing : html`<span class="cell-badge" part="badge">${look.badge}</span>`}</div>`;
+			})}
+                </div>
+              `;
+		})}
+          </div>
+        </div>
+        ${this.#renderColumnMenu()}
+        ${this.search.renderField()}
+      </div>
+    `;
+	}
+	/** Built-in column/group menu, pinned over the header row's end. Only for `columnMenu: auto`. */
+	#renderColumnMenu() {
+		if (this.columnMenu !== `auto`) return nothing;
+		return html`
+      <div class="header-actions">
+        <ixfx-menu-trigger label="⚙" placement="bottom-end" @menu-command=${(e) => {
+			const cmd = e.detail.command;
+			const checked = e.detail.checked;
+			const value = e.detail.value;
+			if (cmd?.startsWith(`col:`)) {
+				const key = cmd.slice(4);
+				const col = this.columns.find((c) => c.key === key);
+				if (col) this._onVisibilityToggle(col, !!checked);
+				e.stopPropagation();
+				return;
+			}
+			if (cmd === `groupBy`) {
+				const v = value ?? ``;
+				this.groupBy = v || null;
+				this._collapsedGroups = /* @__PURE__ */ new Set();
+				this.dispatchEvent(new CustomEvent(`datagrid-group-change`, {
+					detail: { groupBy: this.groupBy },
+					bubbles: true,
+					composed: true
+				}));
+				e.stopPropagation();
+			}
+		}}>
+          <ixfx-menu-container slot="menu">
+            <ixfx-menu-header label="Columns"></ixfx-menu-header>
+            ${repeat(this.columns, (c) => c.key, (col) => html`
+              <ixfx-menu-check-item command="col:${col.key}" label=${col.label} ?checked=${col.visible !== false}></ixfx-menu-check-item>
+            `)}
+            ${this.allowGrouping ? html`
+              <ixfx-menu-separator></ixfx-menu-separator>
+              <ixfx-menu-header label="Group by"></ixfx-menu-header>
+              <ixfx-menu-radio-group name="groupBy" value=${typeof this.groupBy === `string` ? this.groupBy : ``}>
+                <ixfx-menu-radio-item value="" label="None"></ixfx-menu-radio-item>
+                ${this.columns.filter((c) => c.groupable !== false && (!this.groupableColumns || this.groupableColumns.includes(c.key))).map((col) => html`
+                  <ixfx-menu-radio-item value=${col.key} label=${col.label}></ixfx-menu-radio-item>
+                `)}
+              </ixfx-menu-radio-group>
+            ` : nothing}
+          </ixfx-menu-container>
+        </ixfx-menu-trigger>
+      </div>`;
+	}
+};
+__decorate([property({ type: Array })], DataGridElement.prototype, "columns", void 0);
+__decorate([property({ type: Array })], DataGridElement.prototype, "rows", void 0);
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], DataGridElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], DataGridElement.prototype, "interactionMode", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "sortState", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `row-height`
+})], DataGridElement.prototype, "rowHeight", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "getRowKey", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "checkboxRenderer", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "editable", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], DataGridElement.prototype, "editability", void 0);
+__decorate([property({
+	type: String,
+	attribute: `cell-overflow`
+})], DataGridElement.prototype, "cellOverflow", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `zebra-stripes`,
+	reflect: true
+})], DataGridElement.prototype, "zebraStripes", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "groupBy", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `allow-grouping`
+})], DataGridElement.prototype, "allowGrouping", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "groupLabel", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "groupableColumns", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `cross-group-selection`,
+	reflect: true
+})], DataGridElement.prototype, "crossGroupSelection", void 0);
+__decorate([property({
+	type: String,
+	attribute: `column-menu`
+})], DataGridElement.prototype, "columnMenu", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "globalFormatter", void 0);
+__decorate([property({
+	type: String,
+	attribute: `text-color-column`
+})], DataGridElement.prototype, "textColorColumn", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-column`
+})], DataGridElement.prototype, "iconColumn", void 0);
+__decorate([property({
+	type: String,
+	attribute: `badge-column`
+})], DataGridElement.prototype, "badgeColumn", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "filterPredicate", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "rowSearchText", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], DataGridElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], DataGridElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewRenderer", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewSource", void 0);
+__decorate([property({
+	type: String,
+	attribute: `column-button-icon`
+})], DataGridElement.prototype, "columnButtonIcon", void 0);
+__decorate([state()], DataGridElement.prototype, "_resizingColKey", void 0);
+__decorate([state()], DataGridElement.prototype, "_animatingColKeys", void 0);
+__decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
+__decorate([state()], DataGridElement.prototype, "_viewportH", void 0);
+__decorate([state()], DataGridElement.prototype, "_viewportW", void 0);
+__decorate([state()], DataGridElement.prototype, "_collapsedGroups", void 0);
+__decorate([state()], DataGridElement.prototype, "_editing", void 0);
+__decorate([state()], DataGridElement.prototype, "_editingRow", void 0);
+__decorate([state()], DataGridElement.prototype, "_lastClick", void 0);
+__decorate([state()], DataGridElement.prototype, "_lastClickedCell", void 0);
+__decorate([state()], DataGridElement.prototype, "_editValue", void 0);
+__decorate([query(`.viewport`)], DataGridElement.prototype, "_viewportEl", void 0);
+__decorate([query(`.header-row`)], DataGridElement.prototype, "_headerRowEl", void 0);
+DataGridElement = __decorate([safeCustomElement(`ixfx-data-grid`)], DataGridElement);
+//#endregion
+export { DataGridElement as t };