@livenetworks/ashlar 1.4.1 → 1.6.0

package/js/ln-data-table/src/ln-data-table.js

@@ -1,1103 +0,0 @@
-import { cloneTemplateScoped, dispatch, fill, fillTemplate, registerComponent } from '../../ln-core';
-
-(function () {
-	const DOM_SELECTOR = 'data-ln-data-table';
-	const DOM_ATTRIBUTE = 'lnDataTable';
-
-	// Tuning constant — duplicated in ln-table for component independence
-	const VIRTUAL_THRESHOLD = 200;
-	const BUFFER_ROWS = 15;
-
-	if (window[DOM_ATTRIBUTE] !== undefined) return;
-
-	// Singleton formatter — same locale for all instances
-	const _numFmt = typeof Intl !== 'undefined'
-		? new Intl.NumberFormat(document.documentElement.lang || undefined)
-		: null;
-
-	function _formatNum(n) {
-		return _numFmt ? _numFmt.format(n) : String(n);
-	}
-
-	// Walk ancestors, find the nearest element that establishes a vertical
-	// scroll context. Returns null if no such ancestor exists (the page
-	// itself is the scroll surface — caller falls back to window).
-	function _findScrollContainer(el) {
-		let p = el.parentElement;
-		while (p && p !== document.body && p !== document.documentElement) {
-			const cs = getComputedStyle(p);
-			const oy = cs.overflowY;
-			if (oy === 'auto' || oy === 'scroll') return p;
-			p = p.parentElement;
-		}
-		return null;
-	}
-
-	// ─── Component ─────────────────────────────────────────────
-
-	function _component(dom) {
-		this.dom = dom;
-		this.name = dom.getAttribute(DOM_SELECTOR) || '';
-		this.table = dom.querySelector('table');
-		this.tbody = dom.querySelector('[data-ln-data-table-body]') || dom.querySelector('tbody');
-		this.thead = dom.querySelector('thead');
-		this.ths = this.thead ? Array.from(this.thead.querySelectorAll('th')) : [];
-
-		// Instance state
-		this.isLoaded = false;
-		this.totalCount = 0;
-		this.visibleCount = 0;
-		this.currentSort = null;
-		this.currentFilters = {};
-		this.currentSearch = '';
-		this.selectedIds = new Set();
-
-		// Internal data cache (last received payload)
-		this._data = [];
-		this._lastTotal = 0;
-		this._lastFiltered = 0;
-
-		// Column filter options cache — grows additively; never shrinks on filtered payloads
-		this._filterOptions = {};
-		this._filterableFields = this.ths
-			.filter(function (th) {
-				return th.getAttribute('data-ln-col') && th.querySelector('[data-ln-col-filter]');
-			})
-			.map(function (th) { return th.getAttribute('data-ln-col'); });
-
-		// Virtual scroll state
-		this._virtual = false;
-		this._rowHeight = 0;
-		this._vStart = -1;
-		this._vEnd = -1;
-		this._rafId = null;
-		this._scrollHandler = null;
-		this._scrollContainer = null;
-
-
-
-		// Footer elements
-		this._totalSpan = dom.querySelector('[data-ln-data-table-total]');
-		this._filteredSpan = dom.querySelector('[data-ln-data-table-filtered]');
-
-		// Filtered separator — the parent that wraps "· X filtered" text
-		// Hide it when there's no active filtering
-		if (this._filteredSpan) {
-			this._filteredWrap = this._filteredSpan.parentElement !== dom
-				? this._filteredSpan.closest('[data-ln-data-table-filtered-wrap]') || this._filteredSpan.parentNode
-				: null;
-		}
-
-		// Selected count — the parent that wraps "· X selected" text
-		// Hidden when nothing is selected
-		this._selectedSpan = dom.querySelector('[data-ln-data-table-selected]');
-		if (this._selectedSpan) {
-			this._selectedWrap = this._selectedSpan.parentElement !== dom
-				? this._selectedSpan.closest('[data-ln-data-table-selected-wrap]') || this._selectedSpan.parentNode
-				: null;
-		}
-
-		const self = this;
-
-		// ─── set-data event ────────────────────────────────────
-		this._onSetData = function (e) {
-			const detail = e.detail || {};
-			self._data = detail.data || [];
-			self._lastTotal = detail.total != null ? detail.total : self._data.length;
-			self._lastFiltered = detail.filtered != null ? detail.filtered : self._data.length;
-
-			self.totalCount = self._lastTotal;
-			self.visibleCount = self._lastFiltered;
-			self.isLoaded = true;
-
-			self._updateFilterOptions(detail.filterOptions);
-
-			// Invalidate virtual-scroll window cache: data changed, so the
-			// cached startRow/endRow in _renderVirtual no longer reflect
-			// the current _data. Without this, sort/filter changes that
-			// preserve the viewport window would early-return and keep
-			// stale rows.
-			self._vStart = -1;
-			self._vEnd = -1;
-
-			self._renderRows();
-			self._updateFooter();
-
-			dispatch(dom, 'ln-data-table:rendered', {
-				table: self.name,
-				total: self.totalCount,
-				visible: self.visibleCount
-			});
-		};
-		dom.addEventListener('ln-data-table:set-data', this._onSetData);
-
-		// ─── set-loading event ─────────────────────────────────
-		this._onSetLoading = function (e) {
-			const loading = e.detail && e.detail.loading;
-			dom.classList.toggle('ln-data-table--loading', !!loading);
-			if (loading) {
-				self.isLoaded = false;
-			}
-		};
-		dom.addEventListener('ln-data-table:set-loading', this._onSetLoading);
-
-		// ─── Sort — click on [data-ln-col-sort] buttons ───────
-		this._sortButtons = Array.from(dom.querySelectorAll('[data-ln-col-sort]'));
-		this._onSortClick = function (e) {
-			const btn = e.target.closest('[data-ln-col-sort]');
-			if (!btn) return;
-			const th = btn.closest('th');
-			if (!th) return;
-			const field = th.getAttribute('data-ln-col');
-			if (!field) return;
-			self._handleSort(field, th);
-		};
-		if (this.thead) {
-			this.thead.addEventListener('click', this._onSortClick);
-		}
-
-		// ─── Filter — click on [data-ln-col-filter] buttons ───
-		this._activeDropdown = null;     // { field, th, el }
-		this._onFilterClick = function (e) {
-			const btn = e.target.closest('[data-ln-col-filter]');
-			if (!btn) return;
-			e.stopPropagation();
-			const th = btn.closest('th');
-			if (!th) return;
-			const field = th.getAttribute('data-ln-col');
-			if (!field) return;
-
-			// Toggle: close if already open for this field
-			if (self._activeDropdown && self._activeDropdown.field === field) {
-				self._closeFilterDropdown();
-				return;
-			}
-			self._openFilterDropdown(field, th, btn);
-		};
-		if (this.thead) {
-			this.thead.addEventListener('click', this._onFilterClick);
-		}
-
-		// Outside click closes filter dropdown
-		this._onDocClick = function () {
-			if (self._activeDropdown) self._closeFilterDropdown();
-		};
-		document.addEventListener('click', this._onDocClick);
-
-		// Clear all filters button
-		this._onClearAll = function (e) {
-			const btn = e.target.closest('[data-ln-data-table-clear-all]');
-			if (!btn) return;
-			self.currentFilters = {};
-			self._updateFilterIndicators();
-			dispatch(dom, 'ln-data-table:clear-filters', { table: self.name });
-			self._requestData();
-		};
-		dom.addEventListener('click', this._onClearAll);
-
-		// ─── Selection — row checkboxes + select-all ──────────
-		this._selectable = dom.hasAttribute('data-ln-data-table-selectable');
-		this._selectableActive = false;
-		if (this._selectable) {
-			this._enableSelection();
-		}
-
-		// ─── Row click + Row actions ───────────────────────────
-		this._onRowClick = function (e) {
-			// Skip if clicking checkbox, action button, link, or button
-			if (e.target.closest('[data-ln-row-select]')) return;
-			if (e.target.closest('[data-ln-row-action]')) return;
-			if (e.target.closest('a') || e.target.closest('button')) return;
-
-			// Allow ctrl/meta/middle-click to pass through
-			if (e.ctrlKey || e.metaKey || e.button === 1) return;
-
-			const tr = e.target.closest('[data-ln-row]');
-			if (!tr) return;
-
-			const id = tr.getAttribute('data-ln-row-id');
-			const record = tr._lnRecord || {};
-
-			dispatch(dom, 'ln-data-table:row-click', {
-				table: self.name,
-				id: id,
-				record: record
-			});
-		};
-		if (this.tbody) this.tbody.addEventListener('click', this._onRowClick);
-
-		// Row action buttons
-		this._onRowAction = function (e) {
-			const btn = e.target.closest('[data-ln-row-action]');
-			if (!btn) return;
-
-			e.stopPropagation();
-			const tr = btn.closest('[data-ln-row]');
-			if (!tr) return;
-
-			const action = btn.getAttribute('data-ln-row-action');
-			const id = tr.getAttribute('data-ln-row-id');
-			const record = tr._lnRecord || {};
-
-			dispatch(dom, 'ln-data-table:row-action', {
-				table: self.name,
-				id: id,
-				action: action,
-				record: record
-			});
-		};
-		if (this.tbody) this.tbody.addEventListener('click', this._onRowAction);
-
-		// ─── Search — input on [data-ln-data-table-search] ────
-		this._searchInput = dom.querySelector('[data-ln-data-table-search]');
-		if (this._searchInput) {
-			this._onSearchInput = function () {
-				self.currentSearch = self._searchInput.value;
-				dispatch(dom, 'ln-data-table:search', {
-					table: self.name,
-					query: self.currentSearch
-				});
-				self._requestData();
-			};
-			this._searchInput.addEventListener('input', this._onSearchInput);
-		}
-
-		// ─── Keyboard navigation ──────────────────────────────
-		this._focusedRowIndex = -1;
-
-		this._onKeydown = function (e) {
-			// Only handle keys when table area has focus
-			if (!dom.contains(document.activeElement) && document.activeElement !== document.body) return;
-			// Don't intercept when typing in search/filter inputs
-			if (document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA')) return;
-
-			// / focuses search (only when no input is active — checked above)
-			if (e.key === '/') {
-				if (self._searchInput) {
-					e.preventDefault();
-					self._searchInput.focus();
-				}
-				return;
-			}
-
-			const rows = self.tbody ? Array.from(self.tbody.querySelectorAll('[data-ln-row]')) : [];
-			if (!rows.length) return;
-
-			switch (e.key) {
-				case 'ArrowDown':
-					e.preventDefault();
-					self._focusedRowIndex = Math.min(self._focusedRowIndex + 1, rows.length - 1);
-					self._focusRow(rows);
-					break;
-				case 'ArrowUp':
-					e.preventDefault();
-					self._focusedRowIndex = Math.max(self._focusedRowIndex - 1, 0);
-					self._focusRow(rows);
-					break;
-				case 'Home':
-					e.preventDefault();
-					self._focusedRowIndex = 0;
-					self._focusRow(rows);
-					break;
-				case 'End':
-					e.preventDefault();
-					self._focusedRowIndex = rows.length - 1;
-					self._focusRow(rows);
-					break;
-				case 'Enter':
-					if (self._focusedRowIndex >= 0 && self._focusedRowIndex < rows.length) {
-						e.preventDefault();
-						const tr = rows[self._focusedRowIndex];
-						dispatch(dom, 'ln-data-table:row-click', {
-							table: self.name,
-							id: tr.getAttribute('data-ln-row-id'),
-							record: tr._lnRecord || {}
-						});
-					}
-					break;
-				case ' ':
-					if (self._selectable && self._focusedRowIndex >= 0 && self._focusedRowIndex < rows.length) {
-						e.preventDefault();
-						const cb = rows[self._focusedRowIndex].querySelector('[data-ln-row-select]');
-						if (cb) {
-							cb.checked = !cb.checked;
-							cb.dispatchEvent(new Event('change', { bubbles: true }));
-						}
-					}
-					break;
-				case 'Escape':
-					if (self._activeDropdown) {
-						self._closeFilterDropdown();
-					}
-					break;
-			}
-		};
-		document.addEventListener('keydown', this._onKeydown);
-
-		// Fire initial request-data so coordinator knows table is ready
-		dispatch(dom, 'ln-data-table:request-data', {
-			table: this.name,
-			sort: this.currentSort,
-			filters: this.currentFilters,
-			search: this.currentSearch
-		});
-
-		return this;
-	}
-
-	// ─── Sort ──────────────────────────────────────────────────
-
-	_component.prototype._handleSort = function (field, th) {
-		let newDir;
-
-		if (!this.currentSort || this.currentSort.field !== field) {
-			newDir = 'asc';
-		} else if (this.currentSort.direction === 'asc') {
-			newDir = 'desc';
-		} else {
-			newDir = null;
-		}
-
-		// Reset all sort classes
-		for (let i = 0; i < this.ths.length; i++) {
-			this.ths[i].classList.remove('ln-sort-asc', 'ln-sort-desc');
-		}
-
-		if (newDir) {
-			this.currentSort = { field: field, direction: newDir };
-			th.classList.add(newDir === 'asc' ? 'ln-sort-asc' : 'ln-sort-desc');
-		} else {
-			this.currentSort = null;
-		}
-
-		dispatch(this.dom, 'ln-data-table:sort', {
-			table: this.name,
-			field: field,
-			direction: newDir
-		});
-
-		this._requestData();
-	};
-
-	// ─── Request data (shared helper) ──────────────────────────
-
-	_component.prototype._requestData = function () {
-		dispatch(this.dom, 'ln-data-table:request-data', {
-			table: this.name,
-			sort: this.currentSort,
-			filters: this.currentFilters,
-			search: this.currentSearch
-		});
-	};
-
-	// ─── Selection helpers ─────────────────────────────────────
-
-	_component.prototype._updateSelectAll = function () {
-		if (!this._selectAllCheckbox || !this.tbody) return;
-		const rows = this.tbody.querySelectorAll('[data-ln-row]');
-		let allSelected = rows.length > 0;
-		for (let i = 0; i < rows.length; i++) {
-			const id = rows[i].getAttribute('data-ln-row-id');
-			if (id != null && !this.selectedIds.has(id)) {
-				allSelected = false;
-				break;
-			}
-		}
-		this._selectAllCheckbox.checked = allSelected;
-	};
-
-	Object.defineProperty(_component.prototype, 'selectedCount', {
-		get: function () { return this.selectedIds.size; },
-		set: function () { /* computed from selectedIds */ }
-	});
-
-	_component.prototype._enableSelection = function () {
-		if (this._selectableActive) return;
-		this._selectableActive = true;
-
-		const self = this;
-		this._onSelectionChange = function (e) {
-			const checkbox = e.target.closest('[data-ln-row-select]');
-			if (!checkbox) return;
-			const tr = checkbox.closest('[data-ln-row]');
-			if (!tr) return;
-			const id = tr.getAttribute('data-ln-row-id');
-			if (id == null) return;
-
-			if (checkbox.checked) {
-				self.selectedIds.add(id);
-				tr.classList.add('ln-row-selected');
-			} else {
-				self.selectedIds.delete(id);
-				tr.classList.remove('ln-row-selected');
-			}
-
-			self.selectedCount = self.selectedIds.size;
-			self._updateSelectAll();
-			self._updateFooter();
-
-			dispatch(self.dom, 'ln-data-table:select', {
-				table: self.name,
-				selectedIds: self.selectedIds,
-				count: self.selectedCount
-			});
-		};
-		if (this.tbody) this.tbody.addEventListener('change', this._onSelectionChange);
-
-		// Select-all checkbox in header
-		this._selectAllCheckbox = this.dom.querySelector('[data-ln-col-select] input[type="checkbox"]')
-			|| this.dom.querySelector('[data-ln-col-select]');
-		if (this._selectAllCheckbox && this._selectAllCheckbox.tagName === 'TH') {
-			// Create a checkbox inside the th if it doesn't have one
-			const cb = document.createElement('input');
-			cb.type = 'checkbox';
-			cb.setAttribute('aria-label', 'Select all');
-			this._selectAllCheckbox.appendChild(cb);
-			this._selectAllCheckbox = cb;
-		}
-
-		if (this._selectAllCheckbox) {
-			this._onSelectAll = function () {
-				const checked = self._selectAllCheckbox.checked;
-				const rows = self.tbody ? self.tbody.querySelectorAll('[data-ln-row]') : [];
-
-				for (let i = 0; i < rows.length; i++) {
-					const id = rows[i].getAttribute('data-ln-row-id');
-					const rowCb = rows[i].querySelector('[data-ln-row-select]');
-					if (id == null) continue;
-
-					if (checked) {
-						self.selectedIds.add(id);
-						rows[i].classList.add('ln-row-selected');
-					} else {
-						self.selectedIds.delete(id);
-						rows[i].classList.remove('ln-row-selected');
-					}
-					if (rowCb) rowCb.checked = checked;
-				}
-
-				self.selectedCount = self.selectedIds.size;
-				dispatch(self.dom, 'ln-data-table:select-all', {
-					table: self.name,
-					selected: checked
-				});
-				dispatch(self.dom, 'ln-data-table:select', {
-					table: self.name,
-					selectedIds: self.selectedIds,
-					count: self.selectedCount
-				});
-				self._updateFooter();
-			};
-			this._selectAllCheckbox.addEventListener('change', this._onSelectAll);
-		}
-
-		// Sync initial checkbox state (browser form restore)
-		if (this.tbody) {
-			const rows = this.tbody.querySelectorAll('[data-ln-row]');
-			for (let i = 0; i < rows.length; i++) {
-				const cb = rows[i].querySelector('[data-ln-row-select]');
-				const id = rows[i].getAttribute('data-ln-row-id');
-				if (cb && cb.checked && id != null) {
-					this.selectedIds.add(id);
-					rows[i].classList.add('ln-row-selected');
-				}
-			}
-			this.selectedCount = this.selectedIds.size;
-			if (this.selectedCount > 0) this._updateSelectAll();
-		}
-	};
-
-	_component.prototype._disableSelection = function () {
-		if (!this._selectableActive) return;
-		this._selectableActive = false;
-
-		if (this.tbody && this._onSelectionChange) {
-			this.tbody.removeEventListener('change', this._onSelectionChange);
-		}
-		if (this._selectAllCheckbox && this._onSelectAll) {
-			this._selectAllCheckbox.removeEventListener('change', this._onSelectAll);
-		}
-
-		// Remove dynamically created checkbox in TH
-		const th = this.dom.querySelector('[data-ln-col-select]');
-		if (th) {
-			const cb = th.querySelector('input[type="checkbox"]');
-			if (cb) {
-				cb.remove();
-			}
-		}
-		this._selectAllCheckbox = null;
-
-		// Clear selections
-		this.selectedIds.clear();
-		this.selectedCount = 0;
-
-		// Clear visual state of rows
-		if (this.tbody) {
-			const rows = this.tbody.querySelectorAll('[data-ln-row]');
-			for (let i = 0; i < rows.length; i++) {
-				rows[i].classList.remove('ln-row-selected');
-				const cb = rows[i].querySelector('[data-ln-row-select]');
-				if (cb) cb.checked = false;
-			}
-		}
-
-		this._updateFooter();
-	};
-
-	// ─── Keyboard focus ───────────────────────────────────────
-
-	_component.prototype._focusRow = function (rows) {
-		// Remove focus from all
-		for (let i = 0; i < rows.length; i++) {
-			rows[i].classList.remove('ln-row-focused');
-			rows[i].removeAttribute('tabindex');
-		}
-
-		if (this._focusedRowIndex >= 0 && this._focusedRowIndex < rows.length) {
-			const row = rows[this._focusedRowIndex];
-			row.classList.add('ln-row-focused');
-			row.setAttribute('tabindex', '0');
-			row.focus();
-			row.scrollIntoView({ block: 'nearest' });
-		}
-	};
-
-	// ─── Filter dropdown ───────────────────────────────────────
-
-	_component.prototype._openFilterDropdown = function (field, th, btn) {
-		this._closeFilterDropdown();
-
-		// Try table-scoped template first, fall back to generic
-		const clone = cloneTemplateScoped(this.dom, this.name + '-column-filter', 'ln-data-table')
-			|| cloneTemplateScoped(this.dom, 'column-filter', 'ln-data-table');
-		if (!clone) return;
-
-		const dropdown = clone.firstElementChild;
-		if (!dropdown) return;
-
-		// Populate checkboxes with unique values from data
-		const uniqueValues = this._getUniqueValues(field);
-		const optionsList = dropdown.querySelector('[data-ln-filter-options]');
-		const searchInput = dropdown.querySelector('[data-ln-filter-search]');
-		const activeValues = this.currentFilters[field] || [];
-		const self = this;
-
-		// Hide search if <=8 values
-		if (searchInput && uniqueValues.length <= 8) {
-			searchInput.classList.add('hidden');
-		}
-
-		// Build checkbox items
-		if (optionsList) {
-			// Update the "All" reset checkbox status if statically present in template
-			const resetCheckbox = optionsList.querySelector('[data-ln-filter-reset]');
-			if (resetCheckbox) {
-				resetCheckbox.checked = activeValues.length === 0;
-			}
-
-			// Get the options item template (scoped first, fall back to generic)
-			const itemTmpl = cloneTemplateScoped(dropdown, this.name + '-column-filter-item', 'ln-data-table')
-				|| cloneTemplateScoped(dropdown, 'column-filter-item', 'ln-data-table');
-
-			if (itemTmpl) {
-				for (let i = 0; i < uniqueValues.length; i++) {
-					const val = uniqueValues[i];
-					const itemClone = itemTmpl.cloneNode(true);
-					fill(itemClone, { value: val });
-
-					const checkbox = itemClone.querySelector('input[type="checkbox"]');
-					if (checkbox) {
-						checkbox.value = val;
-						checkbox.checked = activeValues.length > 0 && activeValues.indexOf(val) !== -1;
-					}
-					optionsList.appendChild(itemClone);
-				}
-			}
-
-			// Checkbox change handler — mutual exclusion + filter update
-			optionsList.addEventListener('change', function (e) {
-				if (e.target.type !== 'checkbox') return;
-				self._applyFilterMutualExclusion(e.target, optionsList);
-				self._onFilterChange(field, optionsList);
-			});
-		}
-
-		// Search within dropdown values
-		if (searchInput) {
-			searchInput.addEventListener('input', function () {
-				const term = searchInput.value.toLowerCase();
-				const items = optionsList.querySelectorAll('li');
-				for (let i = 0; i < items.length; i++) {
-					const text = items[i].textContent.toLowerCase();
-					items[i].classList.toggle('hidden', term && text.indexOf(term) === -1);
-				}
-			});
-		}
-
-		// Clear filter button
-		const clearBtn = dropdown.querySelector('[data-ln-filter-clear]');
-		if (clearBtn) {
-			clearBtn.addEventListener('click', function () {
-				delete self.currentFilters[field];
-				self._closeFilterDropdown();
-				self._updateFilterIndicators();
-				dispatch(self.dom, 'ln-data-table:filter', {
-					table: self.name,
-					field: field,
-					values: []
-				});
-				self._requestData();
-			});
-		}
-
-		// Append to th — CSS handles positioning (th is relative, dropdown is absolute)
-		th.appendChild(dropdown);
-
-		this._activeDropdown = { field: field, th: th, el: dropdown };
-
-		// Stop click propagation inside dropdown
-		dropdown.addEventListener('click', function (e) { e.stopPropagation(); });
-	};
-
-	_component.prototype._closeFilterDropdown = function () {
-		if (!this._activeDropdown) return;
-		if (this._activeDropdown.el && this._activeDropdown.el.parentNode) {
-			this._activeDropdown.el.parentNode.removeChild(this._activeDropdown.el);
-		}
-		this._activeDropdown = null;
-	};
-
-	// ─── Filter sentinel mutual exclusion ──────────────────────
-	// Same pattern as ln-filter: "All" sentinel + value checkboxes.
-
-	_component.prototype._applyFilterMutualExclusion = function (cb, optionsList) {
-		const isReset = cb.hasAttribute('data-ln-filter-reset');
-		const resetCb = optionsList.querySelector('[data-ln-filter-reset]');
-		const valueCbs = optionsList.querySelectorAll('input[type="checkbox"]:not([data-ln-filter-reset])');
-
-		if (isReset) {
-			// "All" clicked — force checked, uncheck all values
-			cb.checked = true;
-			for (let i = 0; i < valueCbs.length; i++) valueCbs[i].checked = false;
-		} else if (cb.checked) {
-			// Value checked — uncheck "All"
-			if (resetCb) resetCb.checked = false;
-		} else {
-			// Value unchecked — if none left, re-check "All"
-			let any = false;
-			for (let i = 0; i < valueCbs.length; i++) {
-				if (valueCbs[i].checked) { any = true; break; }
-			}
-			if (!any && resetCb) resetCb.checked = true;
-		}
-	};
-
-	_component.prototype._onFilterChange = function (field, optionsList) {
-		const resetCb = optionsList.querySelector('[data-ln-filter-reset]');
-		const valueCbs = optionsList.querySelectorAll('input[type="checkbox"]:not([data-ln-filter-reset])');
-		const checked = [];
-
-		for (let i = 0; i < valueCbs.length; i++) {
-			if (valueCbs[i].checked) checked.push(valueCbs[i].value);
-		}
-
-		// "All" checked or nothing checked = no filter active
-		const isReset = (resetCb && resetCb.checked) || checked.length === 0;
-		if (isReset) {
-			delete this.currentFilters[field];
-		} else {
-			this.currentFilters[field] = checked;
-		}
-
-		this._updateFilterIndicators();
-
-		dispatch(this.dom, 'ln-data-table:filter', {
-			table: this.name,
-			field: field,
-			values: isReset ? [] : checked
-		});
-
-		this._requestData();
-	};
-
-	_component.prototype._updateFilterOptions = function (authoritative) {
-		if (authoritative !== null && typeof authoritative === 'object' && !Array.isArray(authoritative)) {
-			// Coordinator-supplied authoritative values — replace per-field
-			const keys = Object.keys(authoritative);
-			for (let i = 0; i < keys.length; i++) {
-				const field = keys[i];
-				const vals = authoritative[field];
-				if (!Array.isArray(vals)) continue;
-				const seen = {};
-				const unique = [];
-				for (let j = 0; j < vals.length; j++) {
-					const s = String(vals[j]);
-					if (!seen[s]) { seen[s] = true; unique.push(s); }
-				}
-				this._filterOptions[field] = unique.sort();
-			}
-		} else {
-			// Auto-derive from current payload — additive merge only
-			const fields = this._filterableFields;
-			const data = this._data;
-			for (let fi = 0; fi < fields.length; fi++) {
-				const field = fields[fi];
-				if (!this._filterOptions[field]) this._filterOptions[field] = [];
-				const existing = this._filterOptions[field];
-				const seen = {};
-				for (let k = 0; k < existing.length; k++) { seen[existing[k]] = true; }
-				for (let i = 0; i < data.length; i++) {
-					const val = data[i][field];
-					if (val != null) {
-						const s = String(val);
-						if (!seen[s]) { seen[s] = true; existing.push(s); }
-					}
-				}
-				existing.sort();
-			}
-		}
-	};
-
-	_component.prototype._getUniqueValues = function (field) {
-		return (this._filterOptions[field] || []).slice().sort();
-	};
-
-	_component.prototype._updateFilterIndicators = function () {
-		const ths = this.ths;
-		for (let i = 0; i < ths.length; i++) {
-			const th = ths[i];
-			const field = th.getAttribute('data-ln-col');
-			if (!field) continue;
-			const btn = th.querySelector('[data-ln-col-filter]');
-			if (!btn) continue;
-			const hasFilter = this.currentFilters[field] && this.currentFilters[field].length > 0;
-			btn.classList.toggle('ln-filter-active', !!hasFilter);
-		}
-	};
-
-	// ─── Row rendering ─────────────────────────────────────────
-
-	_component.prototype._renderRows = function () {
-		if (!this.tbody) return;
-
-		const data = this._data;
-		const total = this._lastTotal;
-		const filtered = this._lastFiltered;
-
-		// Empty state: no data at all
-		if (total === 0) {
-			this._disableVirtualScroll();
-			this._showEmptyState(this.name + '-empty');
-			return;
-		}
-
-		// Empty state: filters returned zero
-		if (data.length === 0 || filtered === 0) {
-			this._disableVirtualScroll();
-			this._showEmptyState(this.name + '-empty-filtered');
-			return;
-		}
-
-		if (data.length > VIRTUAL_THRESHOLD) {
-			this._enableVirtualScroll();
-			this._renderVirtual();
-		} else {
-			this._disableVirtualScroll();
-			this._renderAll();
-		}
-	};
-
-	_component.prototype._renderAll = function () {
-		const data = this._data;
-		const frag = document.createDocumentFragment();
-
-		for (let i = 0; i < data.length; i++) {
-			const tr = this._buildRow(data[i]);
-			if (!tr) break;
-			frag.appendChild(tr);
-		}
-
-		this.tbody.textContent = '';
-		this.tbody.appendChild(frag);
-
-		if (this._selectable) this._updateSelectAll();
-	};
-
-	_component.prototype._buildRow = function (record) {
-		const clone = cloneTemplateScoped(this.dom, this.name + '-row', 'ln-data-table');
-		if (!clone) return null;
-
-		const tr = clone.querySelector('[data-ln-row]') || clone.firstElementChild;
-		if (!tr) return null;
-
-		this._fillRow(tr, record);
-
-		tr._lnRecord = record;
-		if (record.id != null) {
-			tr.setAttribute('data-ln-row-id', record.id);
-		}
-
-		// Restore selection state
-		if (this._selectable && record.id != null && this.selectedIds.has(String(record.id))) {
-			tr.classList.add('ln-row-selected');
-			const rowCb = tr.querySelector('[data-ln-row-select]');
-			if (rowCb) rowCb.checked = true;
-		}
-
-		return tr;
-	};
-
-	// ─── Virtual scroll ────────────────────────────────────────
-
-	_component.prototype._enableVirtualScroll = function () {
-		if (this._virtual) return;
-		this._virtual = true;
-		this._vStart = -1;
-		this._vEnd = -1;
-		const self = this;
-
-		// Measure row height from first row
-		if (!this._rowHeight) {
-			const tempRow = this._buildRow(this._data[0]);
-			if (tempRow) {
-				this.tbody.textContent = '';
-				this.tbody.appendChild(tempRow);
-				this._rowHeight = tempRow.offsetHeight || 40;
-				this.tbody.textContent = '';
-			}
-		}
-
-		// Resolve the scroll target every time we enable — the DOM may have
-		// moved between the previous disable and now (re-parenting, modal
-		// open, list crosses VIRTUAL_THRESHOLD again after a filter).
-		// null → page scrolls; we listen on window.
-		this._scrollContainer = _findScrollContainer(this.dom);
-		const scrollTarget = this._scrollContainer || window;
-
-		this._scrollHandler = function () {
-			if (self._rafId) return;
-			self._rafId = requestAnimationFrame(function () {
-				self._rafId = null;
-				self._renderVirtual();
-			});
-		};
-
-		scrollTarget.addEventListener('scroll', this._scrollHandler, { passive: true });
-		// Viewport resize always matters (changes visible-row count), even
-		// when scrolling happens inside a container.
-		window.addEventListener('resize', this._scrollHandler, { passive: true });
-	};
-
-	_component.prototype._disableVirtualScroll = function () {
-		if (!this._virtual) return;
-		this._virtual = false;
-
-		if (this._scrollHandler) {
-			const scrollTarget = this._scrollContainer || window;
-			scrollTarget.removeEventListener('scroll', this._scrollHandler);
-			window.removeEventListener('resize', this._scrollHandler);
-			this._scrollHandler = null;
-		}
-		this._scrollContainer = null;
-		if (this._rafId) {
-			cancelAnimationFrame(this._rafId);
-			this._rafId = null;
-		}
-		this._vStart = -1;
-		this._vEnd = -1;
-	};
-
-	_component.prototype._renderVirtual = function () {
-		const data = this._data;
-		const total = data.length;
-		const rowH = this._rowHeight;
-		if (!rowH || !total) return;
-
-		const theadH = this.thead ? this.thead.offsetHeight : 0;
-		const sc = this._scrollContainer;
-		let scrollIntoData;
-		let viewportH;
-
-		if (sc) {
-			// Scrolling happens inside an ancestor element. Compute table
-			// position relative to that container, using its scrollTop and
-			// clientHeight as the viewport.
-			const tableRect = this.table.getBoundingClientRect();
-			const scRect = sc.getBoundingClientRect();
-			const dataStartInContainer = (tableRect.top - scRect.top) + sc.scrollTop + theadH;
-			scrollIntoData = sc.scrollTop - dataStartInContainer;
-			viewportH = sc.clientHeight;
-		} else {
-			// No scrolling ancestor — page scrolls. Use window coords.
-			const tableRect = this.table.getBoundingClientRect();
-			const tableTopInPage = tableRect.top + window.scrollY;
-			const dataStartInPage = tableTopInPage + theadH;
-			scrollIntoData = window.scrollY - dataStartInPage;
-			viewportH = window.innerHeight;
-		}
-
-		let startRow = Math.max(0, Math.floor(scrollIntoData / rowH) - BUFFER_ROWS);
-		startRow = Math.min(startRow, total);
-		const endRow = Math.min(startRow + Math.ceil(viewportH / rowH) + (BUFFER_ROWS * 2), total);
-
-		if (startRow === this._vStart && endRow === this._vEnd) return;
-		this._vStart = startRow;
-		this._vEnd = endRow;
-
-		const colSpan = this.ths.length || 1;
-		const topH = startRow * rowH;
-		const bottomH = (total - endRow) * rowH;
-		const frag = document.createDocumentFragment();
-
-		// Top spacer
-		if (topH > 0) {
-			const topSpacer = document.createElement('tr');
-			topSpacer.className = 'ln-data-table__spacer';
-			topSpacer.setAttribute('aria-hidden', 'true');
-			const topTd = document.createElement('td');
-			topTd.setAttribute('colspan', colSpan);
-			topTd.style.height = topH + 'px';
-			topSpacer.appendChild(topTd);
-			frag.appendChild(topSpacer);
-		}
-
-		// Visible rows
-		for (let i = startRow; i < endRow; i++) {
-			const tr = this._buildRow(data[i]);
-			if (tr) frag.appendChild(tr);
-		}
-
-		// Bottom spacer
-		if (bottomH > 0) {
-			const bottomSpacer = document.createElement('tr');
-			bottomSpacer.className = 'ln-data-table__spacer';
-			bottomSpacer.setAttribute('aria-hidden', 'true');
-			const bottomTd = document.createElement('td');
-			bottomTd.setAttribute('colspan', colSpan);
-			bottomTd.style.height = bottomH + 'px';
-			bottomSpacer.appendChild(bottomTd);
-			frag.appendChild(bottomSpacer);
-		}
-
-		this.tbody.textContent = '';
-		this.tbody.appendChild(frag);
-
-		if (this._selectable) this._updateSelectAll();
-	};
-
-	// ─── Fill row cells ────────────────────────────────────────
-
-	_component.prototype._fillRow = function (tr, record) {
-		// Native double curly brace interpolation: {{ field }}
-		fillTemplate(tr, record);
-
-		// data-ln-cell-attr="field:attr" → setAttribute
-		const cellAttrs = tr.querySelectorAll('[data-ln-cell-attr]');
-		for (let i = 0; i < cellAttrs.length; i++) {
-			const el = cellAttrs[i];
-			const pairs = el.getAttribute('data-ln-cell-attr').split(',');
-			for (let j = 0; j < pairs.length; j++) {
-				const parts = pairs[j].trim().split(':');
-				if (parts.length !== 2) continue;
-				const field = parts[0].trim();
-				const attr = parts[1].trim();
-				if (record[field] != null) {
-					el.setAttribute(attr, record[field]);
-				}
-			}
-		}
-	};
-
-	// ─── Empty state ───────────────────────────────────────────
-
-	_component.prototype._showEmptyState = function (templateName) {
-		const clone = cloneTemplateScoped(this.dom, templateName, 'ln-data-table');
-		this.tbody.textContent = '';
-		if (clone) {
-			this.tbody.appendChild(clone);
-		}
-	};
-
-	// ─── Footer ────────────────────────────────────────────────
-
-	_component.prototype._updateFooter = function () {
-		const total = this._lastTotal;
-		const filtered = this._lastFiltered;
-		const isFiltered = filtered < total;
-
-		if (this._totalSpan) {
-			this._totalSpan.textContent = _formatNum(total);
-		}
-
-		if (this._filteredSpan) {
-			this._filteredSpan.textContent = isFiltered ? _formatNum(filtered) : '';
-		}
-
-		// Hide filtered wrapper when not filtering
-		if (this._filteredWrap) {
-			this._filteredWrap.classList.toggle('hidden', !isFiltered);
-		}
-
-		if (this._selectedSpan) {
-			const count = this.selectedIds.size;
-			this._selectedSpan.textContent = count > 0 ? _formatNum(count) : '';
-			if (this._selectedWrap) {
-				this._selectedWrap.classList.toggle('hidden', count === 0);
-			}
-		}
-	};
-
-	// ─── Destroy ───────────────────────────────────────────────
-
-	_component.prototype.destroy = function () {
-		if (!this.dom[DOM_ATTRIBUTE]) return;
-		this.dom.removeEventListener('ln-data-table:set-data', this._onSetData);
-		this.dom.removeEventListener('ln-data-table:set-loading', this._onSetLoading);
-		if (this.thead) {
-			this.thead.removeEventListener('click', this._onSortClick);
-			this.thead.removeEventListener('click', this._onFilterClick);
-		}
-		document.removeEventListener('click', this._onDocClick);
-		document.removeEventListener('keydown', this._onKeydown);
-		if (this._searchInput) this._searchInput.removeEventListener('input', this._onSearchInput);
-		if (this.tbody) {
-			this.tbody.removeEventListener('click', this._onRowClick);
-			this.tbody.removeEventListener('click', this._onRowAction);
-		}
-		if (this._onSelectionChange && this.tbody) this.tbody.removeEventListener('change', this._onSelectionChange);
-		if (this._selectAllCheckbox && this._onSelectAll) this._selectAllCheckbox.removeEventListener('change', this._onSelectAll);
-		this.dom.removeEventListener('click', this._onClearAll);
-
-		this._closeFilterDropdown();
-		this._disableVirtualScroll();
-		this._data = [];
-		delete this.dom[DOM_ATTRIBUTE];
-	};
-
-	// ─── Attribute Sync ────────────────────────────────────────
-
-	function _syncAttribute(el, attrName) {
-		const instance = el[DOM_ATTRIBUTE];
-		if (!instance) return;
-
-		if (attrName === 'data-ln-data-table-selectable') {
-			const hasSelectable = el.hasAttribute('data-ln-data-table-selectable');
-			if (hasSelectable !== instance._selectable) {
-				instance._selectable = hasSelectable;
-				if (hasSelectable) {
-					instance._enableSelection();
-				} else {
-					instance._disableSelection();
-				}
-			}
-		}
-	}
-
-	// ─── Init ──────────────────────────────────────────────────
-
-	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-data-table', {
-		extraAttributes: ['data-ln-data-table-selectable'],
-		onAttributeChange: _syncAttribute
-	});
-})();