@livenetworks/ashlar 1.6.1 → 2.0.0

package/components/ln-sort/src/ln-sort.js

@@ -0,0 +1,321 @@
+import { compareValues, detectValueType, dispatchCancelable, getLocale, hashGet, hashSet, hashSortDecode, hashSortEncode, queueBoot, readValue, registerComponent, resolveHashNamespace, attrStr, attrSpec, defineAttrs } from '../../ln-core';
+import { createSortComparator, getAriaSortValue, isExcludedSortItem, isSameSortTarget, normalizeSortDirection, resolveSortItems } from './sort-model.js';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-sort';
+	const DOM_ATTRIBUTE = 'lnSort';
+	const FIELD_ATTR = 'data-ln-sort-field';
+	const STATE_ATTR = 'data-ln-sort-state';
+	const DIR_ATTR = 'data-ln-sort-dir';
+	const HASH_ATTR = 'data-ln-hash';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	function _readOrNull(el, name) {
+		return el.getAttribute(name) || null;
+	}
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-sort':       { prop: 'targetId', type: 'string', read: attrStr, fallback: null, description: 'Target table or list element ID to sort' },
+		'data-ln-sort-field': { prop: 'field', type: 'string', read: _readOrNull, effect: _syncAttribute, description: 'Field name or column key to sort by' },
+		'data-ln-sort-dir':   { type: 'enum', values: ['asc', 'desc'], fallback: 'asc', description: 'Default or requested sort direction' },
+		'data-ln-sort-items': { prop: 'itemsSelector', type: 'string', read: _readOrNull, description: 'CSS selector matching sortable child items' },
+		'data-ln-sort-state': { type: 'enum', values: ['asc', 'desc', 'none'], fallback: 'none', effect: _syncAttribute, description: 'Active sort state applied to column or control' },
+		'data-ln-hash':       { type: 'string', effect: _syncAttribute, description: 'URL hash routing key for sort state persistence' }
+	};
+
+	const ATTR_SPEC = attrSpec(ATTRIBUTES);
+
+	// Target-scoped initial DOM order cache.
+	const _targetInitialOrders = new WeakMap();
+
+	function _readItemValue(item, field, column) {
+		if (field) {
+			const el = item.querySelector('[data-ln-field="' + field + '"]');
+			return el ? readValue(el) : '';
+		}
+		if (column !== null && column !== undefined && item.cells && item.cells[column]) {
+			return readValue(item.cells[column]);
+		}
+		return readValue(item);
+	}
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(dom) {
+		this.dom = dom;
+		defineAttrs(this, dom, ATTR_SPEC);
+
+		const th = dom.closest('th');
+		this.column = (!this.field && th) ? th.cellIndex : null;
+
+		this._state = normalizeSortDirection(dom.getAttribute(STATE_ATTR));
+		if (!dom.hasAttribute(STATE_ATTR)) {
+			dom.setAttribute(STATE_ATTR, this._state);
+		}
+		this._destroyed = false;
+
+		this.nsKey = resolveHashNamespace(dom, 'sort');
+		this.hashEnabled = !!this.nsKey;
+
+		const self = this;
+
+		this._onClick = function (e) {
+			const btn = e.target.closest('[' + DIR_ATTR + ']');
+			if (!btn) return;
+			const nextDir = normalizeSortDirection(btn.getAttribute(DIR_ATTR));
+			self._apply(nextDir);
+		};
+		dom.addEventListener('click', this._onClick);
+
+		this._onSortChange = function (e) {
+			if (self._destroyed || !e.detail) return;
+			const target = self._resolveTarget();
+			const isOurTarget = (target && (e.target === target || target.contains(e.target)))
+				|| (e.detail.targetId && e.detail.targetId === self.targetId);
+			if (!isOurTarget) return;
+
+			const same = isSameSortTarget(
+				{ field: self.field, column: self.column },
+				{ field: e.detail.field, column: e.detail.column }
+			);
+
+			if (same) {
+				const nextDir = normalizeSortDirection(e.detail.direction);
+				if (nextDir && dom.getAttribute(STATE_ATTR) !== nextDir) {
+					self._state = nextDir;
+					dom.setAttribute(STATE_ATTR, nextDir);
+					self._updateAriaSort(nextDir);
+				}
+				return;
+			}
+
+			// Mutual exclusion: reset losing instances without re-dispatching
+			if (dom.getAttribute(STATE_ATTR) !== 'none') {
+				self._state = 'none';
+				dom.setAttribute(STATE_ATTR, 'none');
+				self._updateAriaSort('none');
+			}
+		};
+		document.addEventListener('ln-sort:change', this._onSortChange);
+
+		// ─── Hash change listener ──────────────────────────────────
+		this._onHashChange = function () {
+			if (self._destroyed || !self.hashEnabled) return;
+			const val = hashGet(self.nsKey);
+			const decoded = hashSortDecode(val);
+			if (decoded) {
+				const matches = (self.field !== null && decoded.fieldOrColumn === self.field)
+					|| (self.column !== null && String(self.column) === decoded.fieldOrColumn);
+				if (matches) {
+					if (self._state !== decoded.direction) self._apply(decoded.direction, true);
+				} else {
+					if (self._state !== 'none') {
+						self._state = 'none';
+						dom.setAttribute(STATE_ATTR, 'none');
+						self._updateAriaSort('none');
+					}
+				}
+			} else {
+				if (self._state !== 'none') {
+					self._state = 'none';
+					dom.setAttribute(STATE_ATTR, 'none');
+					self._updateAriaSort('none');
+					const target = self._resolveTarget();
+					if (target) {
+						const evt = dispatchCancelable(target, 'ln-sort:change', {
+							field: self.field,
+							column: self.column,
+							direction: 'none',
+							targetId: self.targetId
+						});
+						if (!evt.defaultPrevented) self._defaultSort(target, 'none');
+					}
+				}
+			}
+		};
+
+		if (this.hashEnabled) {
+			window.addEventListener('hashchange', this._onHashChange);
+		}
+
+		// ─── Restore State on Boot ─────────────────────────────────
+		let restored = false;
+
+		if (this.hashEnabled) {
+			const hashVal = hashGet(this.nsKey);
+			const decoded = hashSortDecode(hashVal);
+			if (decoded) {
+				const matches = (self.field !== null && decoded.fieldOrColumn === self.field)
+					|| (self.column !== null && String(self.column) === decoded.fieldOrColumn);
+				if (matches) {
+					queueBoot(function () {
+						if (self._destroyed) return;
+						self._apply(decoded.direction, true);
+					});
+				}
+				restored = true;
+			}
+		}
+
+		if (!restored) {
+			const initialDir = normalizeSortDirection(dom.getAttribute(STATE_ATTR));
+			if (initialDir && initialDir !== 'none') {
+				queueBoot(function () {
+					if (self._destroyed) return;
+					self._apply(initialDir, true);
+				});
+			}
+		}
+
+		return this;
+	}
+
+	_component.prototype._resolveTarget = function () {
+		return document.getElementById(this.targetId);
+	};
+
+	_component.prototype._updateAriaSort = function (direction) {
+		const th = this.dom.closest('th');
+		if (!th) return;
+		th.setAttribute('aria-sort', getAriaSortValue(direction));
+	};
+
+	_component.prototype._apply = function (direction, skipStorage) {
+		if (this._destroyed) return;
+		if (!this.field && this.column === null) {
+			const th = this.dom.closest('th');
+			if (th && th.cellIndex !== undefined) this.column = th.cellIndex;
+		}
+		const normalized = normalizeSortDirection(direction);
+		this._state = normalized;
+		if (this.dom.getAttribute(STATE_ATTR) !== normalized) {
+			this.dom.setAttribute(STATE_ATTR, normalized);
+		}
+
+		this._updateAriaSort(normalized);
+
+		const target = this._resolveTarget();
+		if (!target) return;
+
+		const detail = {
+			field: this.field,
+			column: this.column,
+			direction: normalized,
+			targetId: this.targetId
+		};
+
+		if (!skipStorage) {
+			if (this.hashEnabled) {
+				const encoded = hashSortEncode(this.field !== null ? this.field : this.column, normalized);
+				hashSet(this.nsKey, encoded);
+			}
+		}
+
+		const evt = dispatchCancelable(target, 'ln-sort:change', detail);
+		if (evt.defaultPrevented) return;
+
+		this._defaultSort(target, normalized);
+	};
+
+	// ─── Default DOM behaviour ─────────────────────────────────
+
+	_component.prototype._defaultSort = function (target, direction) {
+		const allItems = resolveSortItems(target, this.itemsSelector);
+		if (!allItems.length) return;
+		const parent = allItems[0].parentNode;
+
+		const items = allItems.filter(function (el) {
+			return !isExcludedSortItem(el);
+		});
+		if (!items.length) return;
+
+		if (!_targetInitialOrders.has(target)) {
+			_targetInitialOrders.set(target, items.slice());
+		}
+
+		let ordered;
+		if (direction === 'none') {
+			const original = _targetInitialOrders.get(target) || items;
+			_targetInitialOrders.delete(target);
+			ordered = original.filter(function (el) {
+				return el.parentNode === parent && !isExcludedSortItem(el);
+			});
+		} else {
+			const field = this.field;
+			const column = this.column;
+			const values = items.map(function (el) { return _readItemValue(el, field, column); });
+			const type = detectValueType(values);
+			const collator = typeof Intl !== 'undefined'
+				? new Intl.Collator(getLocale(this.dom), { sensitivity: 'base', numeric: true })
+				: null;
+
+			const comparator = createSortComparator(direction, type, collator, function (el) {
+				return _readItemValue(el, field, column);
+			});
+
+			ordered = items.slice().sort(comparator);
+		}
+
+		const frag = document.createDocumentFragment();
+		let orderIdx = 0;
+		for (let i = 0; i < allItems.length; i++) {
+			const el = allItems[i];
+			if (isExcludedSortItem(el)) {
+				frag.appendChild(el);
+			} else if (orderIdx < ordered.length) {
+				frag.appendChild(ordered[orderIdx++]);
+			}
+		}
+		parent.appendChild(frag);
+	};
+
+	// ─── Destroy ───────────────────────────────────────────────
+
+	_component.prototype.destroy = function () {
+		if (this._destroyed) return;
+		this._destroyed = true;
+		this.dom.removeEventListener('click', this._onClick);
+		document.removeEventListener('ln-sort:change', this._onSortChange);
+		if (this.hashEnabled && this._onHashChange) {
+			window.removeEventListener('hashchange', this._onHashChange);
+		}
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Attribute Sync ────────────────────────────────────────
+
+	function _syncAttribute(el, attrName) {
+		const instance = el[DOM_ATTRIBUTE];
+		if (!instance || instance._destroyed) return;
+		if (attrName === FIELD_ATTR) {
+			const th = el.closest('th');
+			instance.column = (!instance.field && th) ? th.cellIndex : null;
+		} else if (attrName === STATE_ATTR) {
+			const nextState = normalizeSortDirection(el.getAttribute(STATE_ATTR));
+			if (nextState !== instance._state) {
+				instance._apply(nextState);
+			}
+		} else if (attrName === HASH_ATTR) {
+			if (instance.hashEnabled && instance._onHashChange) {
+				window.removeEventListener('hashchange', instance._onHashChange);
+			}
+			instance.nsKey = resolveHashNamespace(el, 'sort');
+			instance.hashEnabled = !!instance.nsKey;
+			if (instance.hashEnabled) {
+				window.addEventListener('hashchange', instance._onHashChange);
+			}
+		}
+	}
+
+	// ─── Registration ──────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-sort', {
+		attributes: ATTRIBUTES,
+		persist: {
+			attr: STATE_ATTR,
+			hashActive: function (el) { return !!resolveHashNamespace(el, 'sort'); }
+		}
+	});
+})();

package/components/ln-sort/src/sort-model.js

@@ -0,0 +1,117 @@
+import { compareValues } from '../../ln-core/compare.js';
+
+export const SORT_DIRECTIONS = ['none', 'asc', 'desc'];
+
+/**
+ * Normalizes a sort direction string to 'asc', 'desc', or 'none'.
+ * @param {unknown} value
+ * @returns {'asc' | 'desc' | 'none'}
+ */
+export function normalizeSortDirection(value) {
+	const str = String(value || '').trim().toLowerCase();
+	if (str === 'asc' || str === 'ascending') return 'asc';
+	if (str === 'desc' || str === 'descending') return 'desc';
+	return 'none';
+}
+
+/**
+ * Returns the ARIA sort attribute value corresponding to the direction.
+ * @param {unknown} direction
+ * @returns {'ascending' | 'descending' | 'none'}
+ */
+export function getAriaSortValue(direction) {
+	const normalized = normalizeSortDirection(direction);
+	if (normalized === 'asc') return 'ascending';
+	if (normalized === 'desc') return 'descending';
+	return 'none';
+}
+
+/**
+ * Determines whether two sort targets represent the identical sort key.
+ * @param {{ field?: string|null, column?: number|string|null }} a
+ * @param {{ field?: string|null, column?: number|string|null }} b
+ * @returns {boolean}
+ */
+export function isSameSortTarget(a, b) {
+	if (!a || !b) return false;
+	if (a.field !== null && a.field !== undefined && b.field !== null && b.field !== undefined) {
+		return a.field === b.field;
+	}
+	if (a.column !== null && a.column !== undefined && b.column !== null && b.column !== undefined) {
+		return String(a.column) === String(b.column);
+	}
+	return false;
+}
+
+/**
+ * Creates a sort comparator function for sorting an array of records/items.
+ * @param {'asc' | 'desc' | 'none'} direction
+ * @param {'number' | 'string'} valueType
+ * @param {Intl.Collator|null} [collator]
+ * @param {(item: any) => any} [getValueFn]
+ * @returns {(a: any, b: any) => number}
+ */
+export function createSortComparator(direction, valueType, collator, getValueFn) {
+	const normalized = normalizeSortDirection(direction);
+	if (normalized === 'none') return () => 0;
+
+	const multiplier = normalized === 'desc' ? -1 : 1;
+	const getter = typeof getValueFn === 'function' ? getValueFn : (item) => item;
+
+	return function (a, b) {
+		const valA = getter(a);
+		const valB = getter(b);
+		return compareValues(valA, valB, valueType, collator) * multiplier;
+	};
+}
+
+/**
+ * Determines whether a DOM element should be excluded from sorting (e.g. empty-state, hidden rows, templates).
+ * @param {Element|unknown} el
+ * @returns {boolean}
+ */
+export function isExcludedSortItem(el) {
+	if (!el || typeof el !== 'object' || el.nodeType !== 1) return true;
+	if (el.tagName === 'TEMPLATE') return true;
+	if (typeof el.hasAttribute === 'function') {
+		if (el.hasAttribute('data-ln-sort-exclude') || el.hasAttribute('hidden')) return true;
+	}
+	if (el.classList && el.classList.contains('hidden')) return true;
+	if (el.style && el.style.display === 'none') return true;
+	if (typeof el.matches === 'function') {
+		if (el.matches('.empty-state, .ln-table__empty, .ln-table__empty-state, [data-ln-empty], [data-ln-empty-state], [data-ln-table-empty]')) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * Resolves the list of sortable DOM items from a target element.
+ * For tables without explicit selector, automatically targets the tbody rows.
+ * @param {Element|unknown} target
+ * @param {string|null} [itemsSelector]
+ * @returns {Element[]}
+ */
+export function resolveSortItems(target, itemsSelector) {
+	if (!target || typeof target !== 'object' || target.nodeType !== 1) return [];
+	const selector = itemsSelector
+		|| (typeof target.getAttribute === 'function' ? target.getAttribute('data-ln-sort-items') : null)
+		|| null;
+	if (selector && typeof target.querySelectorAll === 'function') {
+		return Array.from(target.querySelectorAll(selector));
+	}
+	if (target.tagName === 'TABLE') {
+		const tbody = target.tBodies && target.tBodies.length
+			? target.tBodies[0]
+			: (typeof target.querySelector === 'function' ? target.querySelector('tbody') : null);
+		if (tbody) {
+			return Array.from(tbody.children || []);
+		}
+		if (typeof target.querySelectorAll === 'function') {
+			return Array.from(target.querySelectorAll('tbody tr, tr'));
+		}
+	}
+	return Array.from(target.children || []);
+}
+

package/{js → components}/ln-sortable/README.md

@@ -1,8 +1,8 @@
 # ln-sortable
 
-A zero-dependency, high-performance **Drag & Drop Reordering Primitive** driven by browser Pointer Events APIs, designed for seamless mouse and touch interactions.
-
-It focuses strictly on visual DOM restructuring, delegating server-side synchronization, database persistence, and list state saves completely to the parent coordinator via telemetry events.
+> Applied to a `<ul data-ln-sortable>` or `<ol>` list. It listens for `pointerdown`, `pointermove`, and `pointerup` events
+> on list items (or `[data-ln-sortable-handle]`). On drag, it adds `.ln-sortable--dragging`, repositions items in the DOM via
+> `insertBefore`, and places a placeholder element. On release, it removes drag classes, purges the placeholder, and emits an `ln-sortable:change` CustomEvent.
 
 ---
 
@@ -10,7 +10,7 @@ It focuses strictly on visual DOM restructuring, delegating server-side synchron
 
 1. **Pointer Concurrency:** Built natively on Pointer Events APIs (`pointerdown`, `pointermove`, `pointerup`). It replaces heavy HTML5 Drag & Drop frameworks, offering high-performance dragging and layout shifts across desktop, mobile, and hybrid touch displays.
 2. **Visual Isolation:** The primitive does not import or inject inline styles or layout rules. Instead, it exposes CSS state hooks (e.g. `.ln-sortable--dragging`) on active elements, leaving transitions and placeholders fully to the stylesheet.
-3. **HTML Attribute as Single Source of Truth:** Component states are governed entirely by the `data-ln-sortable` attribute. Standard JS API calls (`enable()`, `disable()`) write directly to the attribute, which is observed via `MutationObserver` to coordinate internals.
+3. **HTML Attribute as Single Source of Truth:** Component states are governed entirely by the `data-ln-sortable` attribute. Writing the attribute is the only way to enable or disable the component; the write is observed via `MutationObserver` to coordinate internals.
 
 ---
 
@@ -87,11 +87,7 @@ Fired when an item drop successfully changes the DOM index order.
 - **Payload (`detail`)**: `{ item: HTMLElement, oldIndex: number, newIndex: number }`
 
 ### `ln-sortable:enabled` / `ln-sortable:disabled`
-Fired when `data-ln-sortable` toggles between enabled and `"disabled"` (via `enable()`/`disable()` or a direct attribute write, picked up by the shared `MutationObserver`).
-- **Payload (`detail`)**: `{ target: HTMLElement }`
-
-### `ln-sortable:destroyed`
-Fired inside `destroy()`, after the `pointerdown` listener is removed.
+Fired when `data-ln-sortable` toggles between enabled and `"disabled"` — written directly on the host and picked up by the shared `MutationObserver`.
 - **Payload (`detail`)**: `{ target: HTMLElement }`
 
 ---
@@ -110,7 +106,7 @@ Fired inside `destroy()`, after the `pointerdown` listener is removed.
 
 ## 🔧 Internals
 
-Source: `js/ln-sortable/ln-sortable.js`. Each `[data-ln-sortable]` container gets a `_component` instance at `element.lnSortable` (`dom`, `isEnabled`, `_dragging` — the child currently being dragged, or `null` — and the bound `pointerdown` handler).
+Source: `components/ln-sortable/ln-sortable.js`. Each `[data-ln-sortable]` container gets a `_component` instance at `element.lnSortable` (`dom`, `isEnabled`, `_dragging` — the child currently being dragged, or `null` — and the bound `pointerdown` handler).
 
 ### Handle resolution
 
@@ -126,7 +122,7 @@ On `pointerdown`: if the target (or an ancestor) carries `data-ln-sortable-handl
 
 ### Attribute-driven enable/disable
 
-`data-ln-sortable` (absent value) = enabled, `data-ln-sortable="disabled"` = disabled. `enable()`/`disable()` write the attribute; the shared `MutationObserver` picks up the change, updates `isEnabled` inline, and dispatches `ln-sortable:enabled`/`ln-sortable:disabled`. No cancelable before-event for enable/disable — the state change is immediate.
+`data-ln-sortable` (absent value) = enabled, `data-ln-sortable="disabled"` = disabled. The shared `MutationObserver` picks up the attribute write, updates `isEnabled` inline, and dispatches `ln-sortable:enabled`/`ln-sortable:disabled`. No cancelable before-event — the state change is immediate.
 
 ### MutationObserver
 

package/components/ln-sortable/ln-sortable-dev.scss

@@ -0,0 +1,13 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Host Container Check: data-ln-sortable belongs on list or grid containers
+	[data-ln-sortable]:not(ul, ol, div, tbody) {
+		@include dev-inline-error("data-ln-sortable belongs on <ul>, <ol>, <tbody>, or <div> containers");
+	}
+
+	// 2. Handle Nesting Check: sortable handles must be inside a sortable container
+	[data-ln-sortable-handle]:not([data-ln-sortable] *) {
+		@include dev-inline-error("[data-ln-sortable-handle] is orphaned (not inside a [data-ln-sortable] container)");
+	}
+}

package/components/ln-sortable/ln-sortable.js

@@ -0,0 +1 @@
+(function(){"use strict";function O(){return typeof window>"u"?!1:window.lnDebug===!0||window.lnCore&&window.lnCore._debugSink?!0:typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug")||document.body.querySelector("[data-ln-debug]")!==null:!1}function y(e){if(typeof window>"u")return!1;if(window.lnDebug===!0)return!0;if(window.lnCore&&window.lnCore._debugIsContained)return e?window.lnCore._debugIsContained(e):window.lnCore._debugSink!==null;if(e&&e.closest){const t=e.closest("[data-ln-debug]");return!(!t||typeof document<"u"&&t===document.documentElement)}return typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug"):!1}if(typeof window<"u"&&(window.lnCore=window.lnCore||{},!window.lnCore._warnBound)){window.lnCore._warnBound=!0;const e=console.warn;console.warn=function(...t){if(typeof t[0]=="string"&&(t[0].startsWith("[ln-")||t[0].startsWith("[lnCore"))){let i=null;for(let s=1;s<t.length;s++)if(t[s]&&t[s].nodeType===1){i=t[s];break}if(!y(i))return}e.apply(console,t)}}function C(e,t,n){const i=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,i),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:i}))}function j(e,t,n){const i=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,i);const s=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:i});return e.dispatchEvent(s),s}function m(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){m(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const D={};function N(e,t){D[e]=t}function P(e){return D[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=N,window.lnCore.getDataMapper=P);function V(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,m(function(){new MutationObserver(function(){C(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const T={};function H(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];T[n]=t}function U(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return T[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=H,window.lnCore.getLocaleFallback=U,window.lnCore.ensureLocaleObserver=V);const A={};function Q(e,t){A[e]||(A[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=A[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function $(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let o=0;o<n.length;o++){const l=n[o],r=l.getAttribute("data-ln-field");t[r]!=null&&(l.textContent=t[r])}const i=e.querySelectorAll("[data-ln-attr]");for(let o=0;o<i.length;o++){const l=i[o],r=l.getAttribute("data-ln-attr").split(",");for(let a=0;a<r.length;a++){const c=r[a].trim().split(":");if(c.length!==2)continue;const u=c[0].trim(),f=c[1].trim();t[f]!=null&&l.setAttribute(u,t[f])}}const s=e.querySelectorAll("[data-ln-show]");for(let o=0;o<s.length;o++){const l=s[o],r=l.getAttribute("data-ln-show");r in t&&l.classList.toggle("hidden",!t[r])}const d=e.querySelectorAll("[data-ln-class]");for(let o=0;o<d.length;o++){const l=d[o],r=l.getAttribute("data-ln-class").split(",");for(let a=0;a<r.length;a++){const c=r[a].trim().split(":");if(c.length!==2)continue;const u=c[0].trim(),f=c[1].trim();f in t&&l.classList.toggle(u,!!t[f])}}return e}function K(e,t){e.matches&&e.matches("[data-ln-form], [data-ln-fillable]")&&(window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",e,t??null),e.dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0})));const n=e.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let i=0;i<n.length;i++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[i],t??null),n[i].dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));return e}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(e){if(!(!e.target.matches||!e.target.matches("[data-ln-fillable]")))if(e.detail)$(e.target,e.detail);else{const t=e.target.querySelectorAll("[data-ln-field]");for(let n=0;n<t.length;n++)t[n].textContent=""}})));function I(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const d=n.currentNode;d.textContent.indexOf("{{")!==-1&&(d.textContent=d.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(o,l){return t[l]!==void 0?t[l]:""}))}const i=function(d,o){return t[o]!==void 0?t[o]:""},s=Array.from(e.querySelectorAll("*"));e.nodeType===1&&s.push(e);for(let d=0;d<s.length;d++){const o=s[d],l=o.attributes;for(let r=0;r<l.length;r++){const a=l[r];a.value.indexOf("{{")!==-1&&o.setAttribute(a.name,a.value.replace(/\{\{\s*(\w+)\s*\}\}/g,i))}}return e}function Y(e,t,n,i,s,d){const o={};for(let r=0;r<e.children.length;r++){const a=e.children[r],c=a.getAttribute("data-ln-render-key");c&&(o[c]=a)}const l=document.createDocumentFragment();for(let r=0;r<t.length;r++){const a=t[r],c=String(i(a));let u=o[c];if(u)s(u,a,r);else{const f=Q(n,d);if(!f||(I(f,a),u=f.firstElementChild,!u))continue;u.setAttribute("data-ln-render-key",c),s(u,a,r)}l.appendChild(u)}e.textContent="",e.appendChild(l)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=I,window.lnCore.fill=$,window.lnCore.lnFill=K,window.lnCore.renderList=Y);function R(e,t,n,i,s){if(!e||t===null)return!0;const d=i||"ln-component",o=e.type;if(o==="trigger"||o==="marker"||o==="string"||o==="list"||!o||t===""&&e.fallback!==void 0)return!0;const l=r=>{s?console.warn(r,s):console.warn(r)};if(o==="boolean"){const r=t.trim().toLowerCase();return r!==""&&r!=="true"&&r!=="false"&&r!=="1"&&r!=="0"?(l(`[${d}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(o==="enum"){const r=e.values||[];return r.includes(t)?!0:(l(`[${d}] Invalid value "${t}" for attribute "${n}". Allowed: ${r.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(o==="integer"){if(!/^-?\d+$/.test(t))return l(`[${d}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const r=parseInt(t,10);return e.min!==void 0&&r<e.min?(l(`[${d}] Value ${r} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&r>e.max?(l(`[${d}] Value ${r} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(o==="float")return isNaN(Number(t))?(l(`[${d}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(o==="json")try{return JSON.parse(t),!0}catch(r){return l(`[${d}] Invalid JSON for attribute "${n}": ${r.message}. Fallback: ${e.fallback}.`),!1}return!0}function G(e){const t={};for(const n in e){const i=e[n];i&&i.effect&&(t[n]=i.effect)}return Object.keys(t).length?t:null}function J(e){if(e.onAttrChange&&!e.declared)return null;const t=new Set;if(e.effects)for(const n in e.effects)t.add(n);if(e.onAttrChange&&e.declared)for(const n of e.declared)t.add(n);return t}function v(e,t,n,i){if(e.nodeType!==1)return;const d=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",o=Array.from(e.querySelectorAll(d));e.matches&&e.matches(d)&&o.push(e);for(const l of o)if(!l[n]){window.lnCore._persistSink&&l.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(l,t);try{l[n]=new i(l)}catch(r){console.error("["+n+"] init failed",l,r)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function X(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function z(e){typeof window<"u"?(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[],window.lnCore._bootHolds>0?window.lnCore._bootQueue.push(e):setTimeout(e,0)):e()}function q(){window.lnCore=window.lnCore||{};const e=window.lnCore._attrRegistry=window.lnCore._attrRegistry||{byAttr:new Map,reactive:[],persist:[]};return e.byReactive=e.byReactive||new Map,e.reactiveWildcard=e.reactiveWildcard||[],e}function Z(e){const t=q(),n=e.observed||[];for(let i=0;i<n.length;i++){const s=n[i];t.byAttr.has(s)||t.byAttr.set(s,[]),t.byAttr.get(s).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const i in e.attributes){t.byDeclaredAttr.has(i)||t.byDeclaredAttr.set(i,[]);const s=t.byDeclaredAttr.get(i);s.some(d=>d.componentTag===e.componentTag)||s.push({spec:e.attributes[i],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const i=J(e);if(i===null)t.reactiveWildcard.push(e);else for(const s of i)t.byReactive.has(s)||t.byReactive.set(s,[]),t.byReactive.get(s).push(e)}e.persist&&t.persist.push(e)}function M(e,t,n,i){for(let s=0;s<e.length;s++){const d=e[s];if(!t[d.attribute])continue;const o=d.effects&&d.effects[n];o?o(t,n,i):d.onAttrChange&&(!d.declared||d.declared.has(n))&&d.onAttrChange(t,n,i)}}function ee(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const i=q(),s=i.byAttr.get(n);if(O()&&i.byDeclaredAttr&&i.byDeclaredAttr.has(n)&&y(t)){const d=i.byDeclaredAttr.get(n),o=t.getAttribute(n);for(let l=0;l<d.length;l++)R(d[l].spec,o,n,d[l].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||s)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const d=i.byReactive.get(n);d&&M(d,t,n,e.oldValue),i.reactiveWildcard.length&&M(i.reactiveWildcard,t,n,e.oldValue)}if(s)for(let d=0;d<s.length;d++){const o=s[d];if(o.handler){o.handler(t,n,e.oldValue);continue}o.onAttributeChange&&t[o.attribute]?o.onAttributeChange(t,n):(v(t,o.selector,o.attribute,o.ComponentFn),o.onInit&&o.onInit(t))}}function te(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,m(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{ee(t[n])}catch(i){console.error("[ln-core] mutation handler failed",t[n].target,i)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function B(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function ne(e){const t=B();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const i=t[n];if(i.onSubtreeChange){const s=i.query,d=e.target.nodeType===1?e.target.matches(s)?e.target:e.target.closest(s):e.target.parentElement?e.target.parentElement.closest(s):null;d&&i.onSubtreeChange(d,e)}}for(let n=0;n<e.addedNodes.length;n++){const i=e.addedNodes[n];if(i.nodeType===1)for(let s=0;s<t.length;s++){const d=t[s];v(i,d.selector,d.attribute,d.ComponentFn),d.onInit&&d.onInit(i)}}for(let n=0;n<e.removedNodes.length;n++){const i=e.removedNodes[n];if(i.nodeType===1)for(let s=0;s<t.length;s++){const d=t[s],o=d.query,l=Array.from(i.querySelectorAll(o));i.matches&&i.matches(o)&&l.push(i);for(let r=0;r<l.length;r++){const a=l[r];if(!document.contains(a)){const c=a[d.attribute];if(c&&typeof c.destroy=="function")try{c.destroy()}catch(u){console.error("["+d.attribute+"] destroy failed",a,u)}delete a[d.attribute]}}}}}}function re(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,m(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const i=t[n];if(i.type==="childList")try{ne(i)}catch(s){console.error("[ln-core] lifecycle handler failed",i.target,s)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function oe(e,t,n,i,s={}){const d=s.extraAttributes||[],o=s.onAttributeChange||null,l=s.onSubtreeChange||null,r=s.onInit||null,a=s.onAttrChange||null,c=s.effects||null,u=s.attributes||null,f=u?G(u):c,h=u?new Set(Object.keys(u)):null,g=s.persist||null;function b(k){const w=k||document.body;if(v(w,e,t,n),u&&O())for(const p in u){const be=u[p],S=Array.from(w.querySelectorAll("["+p+"]"));w.matches&&w.matches("["+p+"]")&&S.push(w);for(let L=0;L<S.length;L++){const x=S[L];y(x)&&R(be,x.getAttribute(p),p,i,x)}}r&&r(w)}const E=[];if(e.indexOf("[")!==-1){const k=/\[([\w-]+)/g;let w;for(;(w=k.exec(e))!==null;)E.push(w[1])}else E.push(e);Z({selector:e,attribute:t,componentTag:i,attributes:u,ComponentFn:n,onInit:r,observed:E.concat(d),onAttributeChange:o,onAttrChange:a,effects:f,declared:h,persist:g}),te();const we=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";B().push({selector:e,attribute:t,ComponentFn:n,onInit:r,onSubtreeChange:l,query:we}),re(),window[t]=b;function W(){X()>0?z(function(){b(document.body)}):b(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",W):W(),b}function F(e){return(e||"").replace(/^#/,"")}function _(e){const t=e===void 0?location.hash:e,n={},i=F(t);if(!i)return n;const s=i.split("&");for(let d=0;d<s.length;d++){const o=s[d];if(!o)continue;const l=o.indexOf(":"),r=l>-1?o.slice(0,l):o,a=l>-1?o.slice(l+1):"";if(r)try{n[r]=decodeURIComponent(a)}catch{n[r]=a}}return n}function ie(e){if(!e)return null;const t=_();return e in t?t[e]:null}function le(e,t){if(!e)return;const n=_();t==null?delete n[e]:n[e]=String(t);const s=Object.keys(n).map(function(d){const o=n[d];return o===""?d:d+":"+encodeURIComponent(o)}).join("&");F(location.hash)!==s&&(location.hash=s)}function se(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function de(e,t){if(!e||!e.hasAttribute("data-ln-hash"))return null;const n=e.getAttribute("data-ln-hash");if(n&&n.trim()!=="")return n.trim();const i=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return i?t?i+"-"+t:i:t||null}function ae(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function ce(e){return!e||typeof e!="string"?null:e.endsWith(".asc")?{fieldOrColumn:e.slice(0,-4),direction:"asc"}:e.endsWith(".desc")?{fieldOrColumn:e.slice(0,-5),direction:"desc"}:null}function ue(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function fe(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),i=e.slice(t+1),s=i?i.split(",").map(function(d){try{return decodeURIComponent(d)}catch{return d}}).filter(Boolean):[];return{key:n,values:s}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=_,window.lnCore.hashGet=ie,window.lnCore.hashSet=le,window.lnCore.hashLinkClick=se,window.lnCore.resolveHashNamespace=de,window.lnCore.hashSortEncode=ae,window.lnCore.hashSortDecode=ce,window.lnCore.hashFilterEncode=ue,window.lnCore.hashFilterDecode=fe),(function(){const e="data-ln-sortable",t="lnSortable",n="data-ln-sortable-handle";if(window[t]!==void 0)return;const i={"data-ln-sortable":{effect:d,type:"enum",values:["enabled","disabled"],fallback:"enabled",description:"Enables drag-and-drop item reordering or disables when set to disabled"},"data-ln-sortable-handle":{type:"marker",description:"Designates an element as the drag handle for its parent sortable item"}};function s(o){this.dom=o,this.isEnabled=o.getAttribute(e)!=="disabled",this._dragging=null,o.setAttribute("aria-roledescription","sortable list");const l=this;return this._onPointerDown=function(r){l.isEnabled&&l._handlePointerDown(r)},o.addEventListener("pointerdown",this._onPointerDown),this}s.prototype.destroy=function(){this.dom[t]&&(this.dom.removeEventListener("pointerdown",this._onPointerDown),delete this.dom[t])},s.prototype._handlePointerDown=function(o){let l=o.target.closest("["+n+"]"),r;if(l){for(r=l;r&&r.parentElement!==this.dom;)r=r.parentElement;if(!r||r.parentElement!==this.dom)return}else{if(this.dom.querySelector("["+n+"]"))return;for(r=o.target;r&&r.parentElement!==this.dom;)r=r.parentElement;if(!r||r.parentElement!==this.dom)return;l=r}const c=Array.from(this.dom.children).indexOf(r);if(j(this.dom,"ln-sortable:before-drag",{item:r,index:c}).defaultPrevented)return;o.preventDefault(),l.setPointerCapture(o.pointerId),this._dragging=r,r.classList.add("ln-sortable--dragging"),r.setAttribute("aria-grabbed","true"),this.dom.classList.add("ln-sortable--active"),C(this.dom,"ln-sortable:drag-start",{item:r,index:c});const f=this,h=function(b){f._handlePointerMove(b)},g=function(b){f._handlePointerEnd(b),l.removeEventListener("pointermove",h),l.removeEventListener("pointerup",g),l.removeEventListener("pointercancel",g)};l.addEventListener("pointermove",h),l.addEventListener("pointerup",g),l.addEventListener("pointercancel",g)},s.prototype._handlePointerMove=function(o){if(!this._dragging)return;const l=Array.from(this.dom.children),r=this._dragging;for(const a of l)a.classList.remove("ln-sortable--drop-before","ln-sortable--drop-after");for(const a of l){if(a===r)continue;const c=a.getBoundingClientRect(),u=c.top+c.height/2;if(o.clientY>=c.top&&o.clientY<u){a.classList.add("ln-sortable--drop-before");break}else if(o.clientY>=u&&o.clientY<=c.bottom){a.classList.add("ln-sortable--drop-after");break}}},s.prototype._handlePointerEnd=function(o){if(!this._dragging)return;const l=this._dragging,r=Array.from(this.dom.children),a=r.indexOf(l);let c=null,u=null;for(const f of r){if(f.classList.contains("ln-sortable--drop-before")){c=f,u="before";break}if(f.classList.contains("ln-sortable--drop-after")){c=f,u="after";break}}for(const f of r)f.classList.remove("ln-sortable--drop-before","ln-sortable--drop-after");if(l.classList.remove("ln-sortable--dragging"),l.removeAttribute("aria-grabbed"),this.dom.classList.remove("ln-sortable--active"),c&&c!==l){u==="before"?this.dom.insertBefore(l,c):this.dom.insertBefore(l,c.nextElementSibling);const h=Array.from(this.dom.children).indexOf(l);C(this.dom,"ln-sortable:reordered",{item:l,oldIndex:a,newIndex:h})}this._dragging=null};function d(o){const l=o[t];if(!l)return;const r=o.getAttribute(e)!=="disabled";r!==l.isEnabled&&(l.isEnabled=r,C(o,r?"ln-sortable:enabled":"ln-sortable:disabled",{target:o}))}oe(e,t,s,"ln-sortable",{attributes:i})})()})();

package/components/ln-sortable/ln-sortable.schema.json

@@ -0,0 +1,36 @@
+{
+	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
+	"component": "ln-sortable",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-sortable-dev.scss"
+			]
+		},
+		"data-ln-sortable": {
+			"direction": "author",
+			"sources": [
+				"ln-sortable-dev.scss",
+				"src/ln-sortable.js"
+			],
+			"type": "enum",
+			"values": [
+				"enabled",
+				"disabled"
+			],
+			"fallback": "enabled",
+			"description": "Enables drag-and-drop item reordering or disables when set to disabled"
+		},
+		"data-ln-sortable-handle": {
+			"direction": "author",
+			"sources": [
+				"ln-sortable-dev.scss",
+				"src/ln-sortable.js"
+			],
+			"type": "marker",
+			"description": "Designates an element as the drag handle for its parent sortable item"
+		}
+	}
+}

package/{js → components}/ln-sortable/src/ln-sortable.js

@@ -9,6 +9,12 @@ import { registerComponent, dispatch, dispatchCancelable } from '../../ln-core';
 
 	if (window[DOM_ATTRIBUTE] !== undefined) return;
 
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-sortable':        { effect: _syncEnabled, type: 'enum', values: ['enabled', 'disabled'], fallback: 'enabled', description: 'Enables drag-and-drop item reordering or disables when set to disabled' },
+		'data-ln-sortable-handle': { type: 'marker', description: 'Designates an element as the drag handle for its parent sortable item' }
+	};
+
 	// ─── Component ─────────────────────────────────────────────
 
 	function _component(dom) {
@@ -29,22 +35,11 @@ import { registerComponent, dispatch, dispatchCancelable } from '../../ln-core';
 		return this;
 	}
 
-	// ─── Public API ────────────────────────────────────────────
-
-	_component.prototype.enable = function () {
-		if (this.isEnabled) return;
-		this.dom.setAttribute(DOM_SELECTOR, '');
-	};
-
-	_component.prototype.disable = function () {
-		if (!this.isEnabled) return;
-		this.dom.setAttribute(DOM_SELECTOR, 'disabled');
-	};
+	// ─── Lifecycle ─────────────────────────────────────────────
 
 	_component.prototype.destroy = function () {
 		if (!this.dom[DOM_ATTRIBUTE]) return;
 		this.dom.removeEventListener('pointerdown', this._onPointerDown);
-		dispatch(this.dom, 'ln-sortable:destroyed', { target: this.dom });
 		delete this.dom[DOM_ATTRIBUTE];
 	};
 
@@ -198,6 +193,6 @@ import { registerComponent, dispatch, dispatchCancelable } from '../../ln-core';
 	// ─── Init ──────────────────────────────────────────────────
 
 	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-sortable', {
-		onAttributeChange: _syncEnabled
+		attributes: ATTRIBUTES
 	});
 })();

package/{js → components}/ln-stat/README.md

@@ -1,5 +1,7 @@
 # ln-stat
 
+> Applied to an inline or block element (`<strong data-ln-stat="storeName" data-ln-stat-filter="active:true">`). On initialization, it bubbles an `ln-stat:request-count` CustomEvent to `ln-data-coordinator` and listens for `ln-stat:set-count`, updating its `textContent` with the resolved number and removing the `.is-loading` class. It stores zero count state internally, relying entirely on the coordinator to re-deliver counts on store mutations.
+
 Displays a live count from an `ln-data-store` via the `ln-data-coordinator` binder. Updates automatically on every store mutation. Opt-in: add `data-ln-stat="<storeName>"` to any inline element.
 
 ---
@@ -52,4 +54,4 @@ The `is-loading` class is removed on first delivery — add it to show a loading
 
 ## 🔧 Internals
 
-Source: `js/ln-stat/ln-stat.js`. The coordinator's `_serveStat` method handles `ln-stat:request-count`: reads `data-ln-stat` from the dispatching element, guards with `_ownsStore(name)`, calls `store.count(filters)` (`filters` from `e.detail.filters`), and dispatches `ln-stat:set-count { count }` back on the element. On every store mutation, the coordinator's `_refreshAll()` re-parses `data-ln-stat-filter` from each stat element and re-calls `store.count()` — the component itself holds no count state between deliveries.
+Source: `components/ln-stat/ln-stat.js`. The coordinator's `_serveStat` method handles `ln-stat:request-count`: reads `data-ln-stat` from the dispatching element, guards with `_ownsStore(name)`, calls `store.count(filters)` (`filters` from `e.detail.filters`), and dispatches `ln-stat:set-count { count }` back on the element. On every store mutation, the coordinator's `_refreshAll()` re-parses `data-ln-stat-filter` from each stat element and re-calls `store.count()` — the component itself holds no count state between deliveries.

package/components/ln-stat/ln-stat-dev.scss

@@ -0,0 +1,8 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Metric Store Name Check: data-ln-stat cannot have an empty store name
+	[data-ln-stat=""] {
+		@include dev-inline-error("data-ln-stat store name cannot be empty");
+	}
+}