@livenetworks/ashlar 1.3.2

package/js/ln-form/README.md

@@ -0,0 +1,101 @@
+# ln-form
+
+A high-performance **Form Coordinator** that upgrades native HTML forms. It acts as the orchestration layer: coordinating bulk population (`fill`), native reset procedures, reactive validation state gating, and debounced auto-submission.
+
+It delegates per-field validation rules to the `ln-validate` primitive and visual formatting to SCSS layout mixins, focusing purely on gating the submission flow and serializing form data into clean JSON.
+
+---
+
+## 🧭 Philosophy & Architecture
+
+1. **The Form as Coordinator:** `ln-form` maintains no internal registry of validation rules or values. It listens to bubbled DOM events (`ln-validate:valid`, `ln-validate:invalid`) and enforces a single rule: *the form submit button is disabled until all marked fields are valid and at least one has been touched.*
+2. **Zero Network Coupling:** The component does not make XHR or fetch requests. On successful submission, it serializes values and dispatches an uncancellable `ln-form:submit` CustomEvent carrying the payload. Network integration belongs entirely in a separate transport layer (`ln-http` or a custom controller).
+3. **Reactive Integrity:** Data flows strictly through DOM events. Programmatic changes must trigger standard events (`input` / `change`) so that dependent primitives (`ln-validate`, `ln-autoresize`) can react in synchrony.
+
+---
+
+## 📦 Minimal Blueprint
+
+```html
+<form id="user-form" data-ln-form>
+  <!-- Sibling elements wrapped in a semantic form-element -->
+  <div class="form-element">
+    <label for="username">Username</label>
+    <input id="username" name="username" required data-ln-validate>
+    <ul data-ln-validate-errors>
+      <li class="hidden" data-ln-validate-error="required">Username is required</li>
+    </ul>
+  </div>
+
+  <!-- Form Actions Footer -->
+  <ul class="form-actions">
+    <li><button type="button" data-ln-modal-close>Cancel</button></li>
+    <li><button type="submit">Save</button></li>
+  </ul>
+</form>
+```
+
+> [!WARNING]
+> Always set `type="button"` on Cancel buttons. Otherwise, the browser defaults to `type="submit"` and triggers validation/submission.
+
+---
+
+## 🛠️ Declarative API Contract
+
+### HTML Attributes
+
+| Attribute | Elements | Description |
+| :--- | :--- | :--- |
+| `data-ln-form` | `<form>` | Initializes the coordinator. Evaluates initial button states. |
+| `data-ln-form-auto` | `<form>` | Automatically submits the form on any user value change. |
+| `data-ln-form-debounce="ms"` | `<form>` | Debounce duration in milliseconds before auto-submitting. |
+
+### JS API
+
+Access the coordinator instance directly via the `lnForm` property on the form element:
+
+```javascript
+const form = document.getElementById('user-form');
+
+// 1. Bulk populate fields by name (fires synthetic input/change events)
+form.lnForm.fill({ username: 'dalibor', role: 'admin' });
+
+// 2. Force-validate all fields and trigger submission if clean
+form.lnForm.submit();
+
+// 3. Clear all fields, reset validity states, and re-enable the fresh guard
+form.lnForm.reset();
+
+// 4. Check if all data-ln-validate fields are valid (Boolean getter)
+if (form.lnForm.isValid) { ... }
+
+// 5. Clean up listeners and destroy the instance
+form.lnForm.destroy();
+```
+
+---
+
+## ⚡ DOM Events
+
+### Emitted
+
+| Event | Bubbles | Payload | Description |
+| :--- | :--- | :--- | :--- |
+| `ln-form:submit` | Yes | `{ data: Object }` | Dispatched with serialized form key-values on valid submission. |
+| `ln-form:reset-complete` | Yes | `{ target: HTMLElement }` | Dispatched after a complete reactive reset cycle. |
+| `ln-form:destroyed` | Yes | `{ target: HTMLElement }` | Dispatched when the coordinator is torn down. |
+
+### Received
+
+| Event | Payload | Description |
+| :--- | :--- | :--- |
+| `ln-form:fill` | `{ key: value }` | Triggers form population. (Prefer direct `form.lnForm.fill()` API). |
+| `ln-form:reset` | None | Triggers form reset. (Prefer direct `form.lnForm.reset()` API). |
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **Setting `input.value` directly:** Doing `input.value = 'new'` is silent in the DOM. Neither validation nor layout systems will detect the change. **Always** use `form.lnForm.fill()` or manually dispatch an `input` or `change` event.
+- **Relying on Native Form Resets:** Clicking a `<button type="reset">` only reverts DOM attributes. It does not trigger synthetic events, leaving textareas at expanded heights and custom controls out of sync. Use `form.lnForm.reset()` instead.
+- **Debounced fill on auto-submit forms:** Calling `fill()` on an auto-submit form will trigger an automatic submission after the debounce timeout.

package/js/ln-form/ln-form.js

@@ -0,0 +1 @@
+(function(){"use strict";function m(l,t,u){l.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:u||{}}))}function y(l,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){y(l,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}l()}function p(l,t,u,a){if(l.nodeType!==1)return;const o=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",d=Array.from(l.querySelectorAll(o));l.matches&&l.matches(o)&&d.push(l);for(const e of d)e[u]||(e[u]=new a(e))}function g(l){const t={},u=l.elements;for(let a=0;a<u.length;a++){const i=u[a];if(!(!i.name||i.disabled||i.type==="file"||i.type==="submit"||i.type==="button"))if(i.type==="checkbox")t[i.name]||(t[i.name]=[]),i.checked&&t[i.name].push(i.value);else if(i.type==="radio")i.checked&&(t[i.name]=i.value);else if(i.type==="select-multiple"){t[i.name]=[];for(let o=0;o<i.options.length;o++)i.options[o].selected&&t[i.name].push(i.options[o].value)}else t[i.name]=i.value}return t}function E(l,t){const u=l.elements,a=[];for(let i=0;i<u.length;i++){const o=u[i];if(!o.name||!(o.name in t)||o.type==="file"||o.type==="submit"||o.type==="button")continue;const d=t[o.name];if(o.type==="checkbox")o.checked=Array.isArray(d)?d.indexOf(o.value)!==-1:!!d,a.push(o);else if(o.type==="radio")o.checked=o.value===String(d),a.push(o);else if(o.type==="select-multiple"){if(Array.isArray(d))for(let e=0;e<o.options.length;e++)o.options[e].selected=d.indexOf(o.options[e].value)!==-1;a.push(o)}else o.value=d,a.push(o)}return a}function A(l,t,u,a,i={}){const o=i.extraAttributes||[],d=i.onAttributeChange||null,e=i.onInit||null;function n(s){const r=s||document.body;p(r,l,t,u),e&&e(r)}return y(function(){const s=new MutationObserver(function(c){for(let h=0;h<c.length;h++){const f=c[h];if(f.type==="childList")for(let b=0;b<f.addedNodes.length;b++){const v=f.addedNodes[b];v.nodeType===1&&(p(v,l,t,u),e&&e(v))}else f.type==="attributes"&&(d&&f.target[t]?d(f.target,f.attributeName):(p(f.target,l,t,u),e&&e(f.target)))}});let r=[];if(l.indexOf("[")!==-1){const c=/\[([\w-]+)/g;let h;for(;(h=c.exec(l))!==null;)r.push(h[1])}else r.push(l);s.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:r.concat(o)})},a),window[t]=n,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){n(document.body)}):n(document.body),n}const _={};function L(l,t){_[l]=t}function T(l){return _[l]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=L,window.lnCore.getDataMapper=T),(function(){const l="data-ln-form",t="lnForm",u="data-ln-form-auto",a="data-ln-form-debounce",i="data-ln-validate",o="lnValidate";if(window[t]!==void 0)return;function d(e){this.dom=e,this._debounceTimer=null;const n=this;if(this._onValid=function(){n._updateSubmitButton()},this._onInvalid=function(){n._updateSubmitButton()},this._onSubmit=function(s){s.preventDefault(),n.submit()},this._onFill=function(s){s.detail&&n.fill(s.detail)},this._onFormReset=function(){n.reset()},this._onNativeReset=function(){setTimeout(function(){n._resetValidation()},0)},e.addEventListener("ln-validate:valid",this._onValid),e.addEventListener("ln-validate:invalid",this._onInvalid),e.addEventListener("submit",this._onSubmit),e.addEventListener("ln-form:fill",this._onFill),e.addEventListener("ln-form:reset",this._onFormReset),e.addEventListener("reset",this._onNativeReset),this._onAutoInput=null,e.hasAttribute(u)){const s=parseInt(e.getAttribute(a))||0;this._onAutoInput=function(){s>0?(clearTimeout(n._debounceTimer),n._debounceTimer=setTimeout(function(){n.submit()},s)):n.submit()},e.addEventListener("input",this._onAutoInput),e.addEventListener("change",this._onAutoInput)}return this._updateSubmitButton(),this}d.prototype._updateSubmitButton=function(){const e=this.dom.querySelectorAll('button[type="submit"], input[type="submit"]');if(!e.length)return;const n=this.dom.querySelectorAll("["+i+"]");let s=!1;if(n.length>0){let r=!1,c=!1;for(let h=0;h<n.length;h++){const f=n[h][o];f&&f._touched&&(r=!0),n[h].checkValidity()||(c=!0)}s=c||!r}for(let r=0;r<e.length;r++)e[r].disabled=s},d.prototype.fill=function(e){const n=E(this.dom,e);for(let s=0;s<n.length;s++){const r=n[s],c=r.tagName==="SELECT"||r.type==="checkbox"||r.type==="radio";r.dispatchEvent(new Event(c?"change":"input",{bubbles:!0}))}},d.prototype.submit=function(){const e=this.dom.querySelectorAll("["+i+"]");let n=!0;for(let r=0;r<e.length;r++){const c=e[r][o];c&&(c.validate()||(n=!1))}if(!n)return;const s=g(this.dom);m(this.dom,"ln-form:submit",{data:s})},d.prototype.reset=function(){this.dom.reset();const e=this.dom.querySelectorAll("input, textarea, select");for(let n=0;n<e.length;n++){const s=e[n],r=s.tagName==="SELECT"||s.type==="checkbox"||s.type==="radio";s.dispatchEvent(new Event(r?"change":"input",{bubbles:!0}))}this._resetValidation(),m(this.dom,"ln-form:reset-complete",{target:this.dom})},d.prototype._resetValidation=function(){const e=this.dom.querySelectorAll("["+i+"]");for(let n=0;n<e.length;n++){const s=e[n][o];s&&s.reset()}this._updateSubmitButton()},Object.defineProperty(d.prototype,"isValid",{get:function(){const e=this.dom.querySelectorAll("["+i+"]");for(let n=0;n<e.length;n++)if(!e[n].checkValidity())return!1;return!0}}),d.prototype.destroy=function(){this.dom[t]&&(this.dom.removeEventListener("ln-validate:valid",this._onValid),this.dom.removeEventListener("ln-validate:invalid",this._onInvalid),this.dom.removeEventListener("submit",this._onSubmit),this.dom.removeEventListener("ln-form:fill",this._onFill),this.dom.removeEventListener("ln-form:reset",this._onFormReset),this.dom.removeEventListener("reset",this._onNativeReset),this._onAutoInput&&(this.dom.removeEventListener("input",this._onAutoInput),this.dom.removeEventListener("change",this._onAutoInput)),clearTimeout(this._debounceTimer),m(this.dom,"ln-form:destroyed",{target:this.dom}),delete this.dom[t])},A(l,t,d,"ln-form")})()})();

package/js/ln-form/src/ln-form.js

@@ -0,0 +1,199 @@
+import { dispatch, serializeForm, populateForm, registerComponent } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-form';
+	const DOM_ATTRIBUTE = 'lnForm';
+	const AUTO_ATTR = 'data-ln-form-auto';
+	const DEBOUNCE_ATTR = 'data-ln-form-debounce';
+	const VALIDATE_SELECTOR = 'data-ln-validate';
+	const VALIDATE_ATTRIBUTE = 'lnValidate';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(form) {
+		this.dom = form;
+		this._debounceTimer = null;
+
+		const self = this;
+
+		this._onValid = function () {
+			self._updateSubmitButton();
+		};
+
+		this._onInvalid = function () {
+			self._updateSubmitButton();
+		};
+
+		this._onSubmit = function (e) {
+			e.preventDefault();
+			self.submit();
+		};
+
+		this._onFill = function (e) {
+			if (e.detail) self.fill(e.detail);
+		};
+
+		this._onFormReset = function () {
+			self.reset();
+		};
+
+		this._onNativeReset = function () {
+			setTimeout(function () { self._resetValidation(); }, 0);
+		};
+
+		form.addEventListener('ln-validate:valid', this._onValid);
+		form.addEventListener('ln-validate:invalid', this._onInvalid);
+		form.addEventListener('submit', this._onSubmit);
+		form.addEventListener('ln-form:fill', this._onFill);
+		form.addEventListener('ln-form:reset', this._onFormReset);
+		form.addEventListener('reset', this._onNativeReset);
+
+		// Auto-submit
+		this._onAutoInput = null;
+		if (form.hasAttribute(AUTO_ATTR)) {
+			const debounceMs = parseInt(form.getAttribute(DEBOUNCE_ATTR)) || 0;
+			this._onAutoInput = function () {
+				if (debounceMs > 0) {
+					clearTimeout(self._debounceTimer);
+					self._debounceTimer = setTimeout(function () { self.submit(); }, debounceMs);
+				} else {
+					self.submit();
+				}
+			};
+			form.addEventListener('input', this._onAutoInput);
+			form.addEventListener('change', this._onAutoInput);
+		}
+
+		// Initial submit button state
+		this._updateSubmitButton();
+
+		return this;
+	}
+
+	_component.prototype._updateSubmitButton = function () {
+		const buttons = this.dom.querySelectorAll('button[type="submit"], input[type="submit"]');
+		if (!buttons.length) return;
+
+		const fields = this.dom.querySelectorAll('[' + VALIDATE_SELECTOR + ']');
+		let shouldDisable = false;
+
+		if (fields.length > 0) {
+			// Disable if any field is invalid OR if no fields have been touched yet
+			let anyTouched = false;
+			let anyInvalid = false;
+			for (let i = 0; i < fields.length; i++) {
+				const instance = fields[i][VALIDATE_ATTRIBUTE];
+				if (instance && instance._touched) anyTouched = true;
+				if (!fields[i].checkValidity()) anyInvalid = true;
+			}
+			shouldDisable = anyInvalid || !anyTouched;
+		}
+
+		for (let j = 0; j < buttons.length; j++) {
+			buttons[j].disabled = shouldDisable;
+		}
+	};
+
+	_component.prototype.fill = function (data) {
+		const filled = populateForm(this.dom, data);
+
+		// Trigger events so ln-validate picks up the changes.
+		// Mirror the same isChangeBased logic as ln-validate:
+		// SELECT/checkbox/radio -> 'change', everything else -> 'input'
+		for (let k = 0; k < filled.length; k++) {
+			const el = filled[k];
+			const isChangeBased = el.tagName === 'SELECT' || el.type === 'checkbox' || el.type === 'radio';
+			el.dispatchEvent(new Event(isChangeBased ? 'change' : 'input', { bubbles: true }));
+		}
+	};
+
+	_component.prototype.submit = function () {
+		// Force-validate all fields
+		const fields = this.dom.querySelectorAll('[' + VALIDATE_SELECTOR + ']');
+		let allValid = true;
+
+		for (let i = 0; i < fields.length; i++) {
+			const instance = fields[i][VALIDATE_ATTRIBUTE];
+			if (instance) {
+				if (!instance.validate()) allValid = false;
+			}
+		}
+
+		if (!allValid) return;
+
+		const data = serializeForm(this.dom);
+		dispatch(this.dom, 'ln-form:submit', { data: data });
+	};
+
+	_component.prototype.reset = function () {
+		this.dom.reset();
+
+		// Mirror fill() — dispatch input/change so reactive consumers
+		// (ln-autoresize, ln-validate, custom listeners) re-react to the
+		// cleared values. dom.reset() clears .value but does NOT fire
+		// input/change events; without these dispatches, ln-autoresize
+		// keeps its previous height, etc.
+		//
+		// Order matters: this loop MUST run BEFORE _resetValidation().
+		// ln-validate's input handler will mark default-empty required
+		// fields as invalid (touched + validate); _resetValidation()
+		// below clears that transient state. Moving _resetValidation
+		// above the dispatch loop would leave fields visibly invalid.
+		const fields = this.dom.querySelectorAll('input, textarea, select');
+		for (let k = 0; k < fields.length; k++) {
+			const el = fields[k];
+			const isChangeBased = el.tagName === 'SELECT' || el.type === 'checkbox' || el.type === 'radio';
+			el.dispatchEvent(new Event(isChangeBased ? 'change' : 'input', { bubbles: true }));
+		}
+
+		this._resetValidation();
+
+		// Notify high-level subscribers (custom controls that hold their
+		// own value and cannot be reset via input/change). Distinct from
+		// the incoming 'ln-form:reset' request event to avoid a loop.
+		dispatch(this.dom, 'ln-form:reset-complete', { target: this.dom });
+	};
+
+	_component.prototype._resetValidation = function () {
+		const fields = this.dom.querySelectorAll('[' + VALIDATE_SELECTOR + ']');
+		for (let i = 0; i < fields.length; i++) {
+			const instance = fields[i][VALIDATE_ATTRIBUTE];
+			if (instance) instance.reset();
+		}
+
+		this._updateSubmitButton();
+	};
+
+	Object.defineProperty(_component.prototype, 'isValid', {
+		get: function () {
+			const fields = this.dom.querySelectorAll('[' + VALIDATE_SELECTOR + ']');
+			for (let i = 0; i < fields.length; i++) {
+				if (!fields[i].checkValidity()) return false;
+			}
+			return true;
+		}
+	});
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this.dom.removeEventListener('ln-validate:valid', this._onValid);
+		this.dom.removeEventListener('ln-validate:invalid', this._onInvalid);
+		this.dom.removeEventListener('submit', this._onSubmit);
+		this.dom.removeEventListener('ln-form:fill', this._onFill);
+		this.dom.removeEventListener('ln-form:reset', this._onFormReset);
+		this.dom.removeEventListener('reset', this._onNativeReset);
+		if (this._onAutoInput) {
+			this.dom.removeEventListener('input', this._onAutoInput);
+			this.dom.removeEventListener('change', this._onAutoInput);
+		}
+		clearTimeout(this._debounceTimer);
+		dispatch(this.dom, 'ln-form:destroyed', { target: this.dom });
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-form');
+})();

package/js/ln-http/README.md

@@ -0,0 +1,89 @@
+# ln-http
+
+A zero-dependency, global **HTTP Concurrency Coordinator** that intercepts browser network operations to prevent race conditions, out-of-order responses, and duplicate submission side-effects.
+
+It manages requests on two distinct pipelines: **Path A** (transparent GET/HEAD URL-deduplication wrapping `window.fetch`) and **Path B** (explicit key-based event-driven cancellations for POST/PUT/DELETE).
+
+---
+
+## 🧭 Philosophy & Architecture
+
+1. **Path A (Transparent GET/HEAD Concurrency):** Automatically intercepts global `fetch()` calls. If a GET/HEAD request to the exact same URL is already in-flight (e.g., search-as-you-type), the predecessor is instantly aborted. POST and unsafe methods are bypassed to preserve intent.
+2. **Path B (Event-Driven Keyed Concurrency):** Listens globally for `ln-http:request` events containing a distinct `key` (e.g. `reorder-list-1`). A new dispatch instantly aborts any existing in-flight request bearing the same key (any method), preventing double-submit or drag-and-drop overlaps.
+3. **Composition, Not Modification:** `ln-http` is a transport supervisor. It does not inject headers, manipulate bodies, or parse responses. It focuses entirely on socket cancellation via standard browser `AbortController` signals.
+
+---
+
+## 📦 Minimal Blueprint
+
+### Path A (Transparent URL-Deduplication)
+Just use the standard native `fetch` API. Older identical GET requests are aborted automatically.
+```js
+// Rapid keystrokes abort previous search GETs transparently
+try {
+  const res = await fetch('/api/search?q=query');
+  const data = await res.json();
+} catch (err) {
+  if (err.name === 'AbortError') return; // Swallowed abort
+}
+```
+
+### Path B (Event-Driven Concurrency)
+Dispatch an `ln-http:request` event with a unique `key` from any element.
+```js
+element.dispatchEvent(new CustomEvent('ln-http:request', {
+  bubbles: true, // Must bubble to document!
+  detail: {
+    url: '/api/items/reorder',
+    method: 'POST',
+    body: JSON.stringify({ ids }),
+    key: 'items-reorder'
+  }
+}));
+```
+
+---
+
+## 🛠️ Declarative API Contract
+
+### Path B Request Object (`detail`)
+
+| Parameter | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `url` | `string` | *Required* | Target endpoint URL. |
+| `method` | `string` | `'GET'` | HTTP verb. Automatically capitalized. |
+| `body` | `any` | `null` | Request payload (JSON string, FormData, Blob, etc.). |
+| `key` | `string` | `null` | Unique identifier to cancel previous in-flight requests under this key. |
+| `signal` | `AbortSignal` | `null` | Optional external signal to compose with the internal abort controller. |
+
+### Global JavaScript API (`window.lnHttp`)
+
+| Member | Type | Description |
+| :--- | :--- | :--- |
+| `cancel(url)` | `(url: string) => boolean` | Aborts all Path A in-flight requests matching `url`. |
+| `cancelByKey(key)` | `(key: string) => boolean` | Aborts the Path B in-flight request matching `key`. |
+| `cancelAll()` | `() => void` | Aborts all active in-flight requests (both paths). |
+| `inflight` | `getter` | Returns snapshot of active requests: `{ url, method }` or `{ key }`. |
+| `destroy()` | `() => void` | Clears all pending requests, removes event listeners, restores native `fetch`. |
+
+---
+
+## ⚡ DOM Events (Path B response lifecycle)
+
+Both events bubble from the element that dispatched the original `'ln-http:request'`.
+
+### `ln-http:response`
+Fired when `fetch` resolves. The consumer must branch on `ok`/`status` and parse the raw body.
+- `detail`: `{ ok: boolean, status: number, response: Response }`
+
+### `ln-http:error`
+Fired when network-level failures reject the fetch promise (excluding aborts).
+- `detail`: `{ ok: false, status: 0, error: Error }`
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **Forgetting `bubbles: true`:** Path B listens on the `document` level. Events dispatched without `bubbles: true` will never reach the service and fail silently.
+- **Ignoring `AbortError`:** Canceled Path A GET promises reject with an `AbortError`. Presenters must explicitly check and catch this error to avoid logging false failures.
+- **Accessing response body twice:** `response` in the `ln-http:response` detail is a native `Response` stream. It can only be parsed (e.g., `.json()`, `.text()`) once.

package/js/ln-http/ln-http.js

@@ -0,0 +1 @@
+(function(){"use strict";function d(s,e,r){s.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r||{}}))}const h={};function g(s,e){h[s]=e}function b(s){return h[s]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=g,window.lnCore.getDataMapper=b),(function(){if(window.lnHttp)return;const s=window.fetch.bind(window),e=new Map,r=new Map;function m(t){return typeof t=="string"?t:t instanceof URL?t.href:t instanceof Request?t.url:String(t)}function E(t,n){return n&&n.method?String(n.method).toUpperCase():t instanceof Request?t.method.toUpperCase():"GET"}function y(t,n){return n+" "+t}function _(t){return t==="GET"||t==="HEAD"}function p(t,n){n=n||{};const i=m(t),f=E(t,n),o=y(i,f);_(f)&&e.has(o)&&(e.get(o).abort(),e.delete(o));const a=new AbortController,c=n.signal;c&&(c.aborted?a.abort(c.reason):c.addEventListener("abort",function(){a.abort(c.reason)},{once:!0}));const u=Object.assign({},n,{signal:a.signal});return e.set(o,a),s(t,u).finally(function(){e.get(o)===a&&e.delete(o)})}p.toString=function(){return"function fetch() { [ln-http wrapped] }"},window.fetch=p;function w(t){const n=t.detail||{};if(!n.url)return;const i=t.target,f=(n.method||(n.body?"POST":"GET")).toUpperCase(),o=n.key;o&&r.has(o)&&(r.get(o).abort(),r.delete(o));const a=new AbortController,c=n.signal;c&&(c.aborted?a.abort(c.reason):c.addEventListener("abort",function(){a.abort(c.reason)},{once:!0})),o&&r.set(o,a);const u={method:f,signal:a.signal};n.body!==void 0&&(u.body=n.body),window.fetch(n.url,u).then(function(l){o&&r.get(o)===a&&r.delete(o),d(i,"ln-http:response",{ok:l.ok,status:l.status,response:l})}).catch(function(l){o&&r.get(o)===a&&r.delete(o),!(l&&l.name==="AbortError")&&d(i,"ln-http:error",{ok:!1,status:0,error:l})})}document.addEventListener("ln-http:request",w),window.lnHttp={cancel:function(t){let n=!1;return e.forEach(function(i,f){f.endsWith(" "+t)&&(i.abort(),e.delete(f),n=!0)}),n},cancelByKey:function(t){return r.has(t)?(r.get(t).abort(),r.delete(t),!0):!1},cancelAll:function(){e.forEach(function(t){t.abort()}),e.clear(),r.forEach(function(t){t.abort()}),r.clear()},get inflight(){const t=[];return e.forEach(function(n,i){const f=i.indexOf(" ");t.push({method:i.slice(0,f),url:i.slice(f+1)})}),r.forEach(function(n,i){t.push({key:i})}),t},destroy:function(){window.lnHttp.cancelAll(),document.removeEventListener("ln-http:request",w),window.fetch=s,delete window.lnHttp}}})()})();

package/js/ln-http/src/ln-http.js

@@ -0,0 +1,219 @@
+// ═══════════════════════════════════════════════════════════════
+// ln-http — Transparent fetch interceptor + explicit-key dedup
+// ═══════════════════════════════════════════════════════════════
+//
+// On load, this module does two things:
+//
+//   PATH A — fetch wrapping (transparent, GET/HEAD only).
+//     Wraps window.fetch. All fetch calls in the page route through
+//     this wrapper. Components keep calling fetch() natively — they
+//     do not import or know about ln-http.
+//       1. Tracks in-flight requests in _inflight, keyed by URL + method.
+//       2. For idempotent methods (GET, HEAD): if a new request lands
+//          on the same key while the previous is still in flight, the
+//          previous is aborted. Only the latest GET to a given URL wins.
+//       3. For non-idempotent methods (POST, PUT, PATCH, DELETE, …):
+//          NO auto-cancel. Two simultaneous POSTs both run.
+//       4. Combines a consumer-provided AbortSignal with the wrapper's
+//          own controller.
+//
+//   PATH B — event API (explicit key, any method, opt-in).
+//     Listens for `ln-http:request` at document level. Consumer
+//     dispatches:
+//       el.dispatchEvent(new CustomEvent('ln-http:request', {
+//           bubbles: true,
+//           detail: { url, method, body, signal, key }
+//       }));
+//     If `detail.key` is present and a previous request with the same
+//     key is in flight, the previous is aborted regardless of method.
+//     Use case: drag-reorder POSTs — each drag fires a POST to
+//     /api/reorder; only the latest order should reach the server.
+//     Without `key`, the dispatch is a one-shot (no dedup beyond
+//     whatever Path A does for GET/HEAD).
+//     Response dispatched on the original target element:
+//       ln-http:response  { ok, status, response }
+//       ln-http:error     { ok: false, status: 0, error }
+//
+//   The two paths coexist. A GET dispatched via Path B with
+//   `detail.key: 'foo'` lives in BOTH _inflight (Path A, URL-keyed)
+//   and _keyed (Path B, key-keyed). Aborts from either side are
+//   idempotent and cooperate cleanly.
+//
+// Public API (window.lnHttp):
+//   .cancel(url)         — abort any Path A in-flight whose URL matches.
+//   .cancelByKey(key)    — abort the Path B in-flight with this key.
+//   .cancelAll()         — abort every in-flight (both paths).
+//   .inflight            — getter; returns Array<{ url, method, key? }>
+//                          covering both paths, for debugging.
+//   .destroy()           — restore the original fetch, remove the
+//                          document listener, clear both queues.
+//                          Used in dev hot-reload and tests.
+
+import { dispatch } from '../../ln-core';
+
+(function () {
+	if (window.lnHttp) return;                    // double-load guard
+
+	const _origFetch = window.fetch.bind(window);
+	const _inflight  = new Map();                 // "METHOD URL" → AbortController (Path A)
+	const _keyed     = new Map();                 // consumer key   → AbortController (Path B)
+
+	// ─── helpers ───────────────────────────────────────────────────
+
+	// Accept string | URL | Request → return absolute URL string.
+	function _extractUrl(resource) {
+		if (typeof resource === 'string')   return resource;
+		if (resource instanceof URL)        return resource.href;
+		if (resource instanceof Request)    return resource.url;
+		return String(resource);              // last-resort coercion
+	}
+
+	// Extract method from options OR Request, default GET, uppercased.
+	function _extractMethod(resource, options) {
+		if (options && options.method) return String(options.method).toUpperCase();
+		if (resource instanceof Request) return resource.method.toUpperCase();
+		return 'GET';
+	}
+
+	function _key(url, method) { return method + ' ' + url; }
+	function _isIdempotent(method) { return method === 'GET' || method === 'HEAD'; }
+
+	// ─── Path A: window.fetch wrapper ─────────────────────────────
+
+	function _wrappedFetch(resource, options) {
+		options = options || {};
+
+		const url    = _extractUrl(resource);
+		const method = _extractMethod(resource, options);
+		const key    = _key(url, method);
+
+		// Idempotent dedup — abort previous in-flight on same key.
+		if (_isIdempotent(method) && _inflight.has(key)) {
+			_inflight.get(key).abort();
+			_inflight.delete(key);
+		}
+
+		// Combine consumer signal with wrapper controller.
+		const controller = new AbortController();
+		const consumerSignal = options.signal;
+		if (consumerSignal) {
+			if (consumerSignal.aborted) controller.abort(consumerSignal.reason);
+			else consumerSignal.addEventListener('abort', function () {
+				controller.abort(consumerSignal.reason);
+			}, { once: true });
+		}
+
+		const merged = Object.assign({}, options, { signal: controller.signal });
+
+		_inflight.set(key, controller);
+
+		return _origFetch(resource, merged).finally(function () {
+			// Only clear if THIS controller is still the one in the map.
+			if (_inflight.get(key) === controller) _inflight.delete(key);
+		});
+	}
+
+	_wrappedFetch.toString = function () { return 'function fetch() { [ln-http wrapped] }'; };
+	window.fetch = _wrappedFetch;
+
+	// ─── Path B: ln-http:request event listener ───────────────────
+
+	function _onRequest(e) {
+		const opts = e.detail || {};
+		if (!opts.url) return;
+
+		const target = e.target;
+		const method = (opts.method || (opts.body ? 'POST' : 'GET')).toUpperCase();
+		const userKey = opts.key;
+
+		// Explicit-key dedup — abort previous on same key, any method.
+		if (userKey && _keyed.has(userKey)) {
+			_keyed.get(userKey).abort();
+			_keyed.delete(userKey);
+		}
+
+		// Combine consumer signal (if any) with our own controller.
+		const controller = new AbortController();
+		const consumerSignal = opts.signal;
+		if (consumerSignal) {
+			if (consumerSignal.aborted) controller.abort(consumerSignal.reason);
+			else consumerSignal.addEventListener('abort', function () {
+				controller.abort(consumerSignal.reason);
+			}, { once: true });
+		}
+
+		if (userKey) _keyed.set(userKey, controller);
+
+		const fetchOptions = { method: method, signal: controller.signal };
+		if (opts.body !== undefined) fetchOptions.body = opts.body;
+
+		// fetch() here IS the wrapped fetch — Path A still applies
+		// for GET/HEAD on top of Path B's explicit-key dedup. Aborts
+		// from either side are idempotent.
+		window.fetch(opts.url, fetchOptions)
+			.then(function (response) {
+				if (userKey && _keyed.get(userKey) === controller) _keyed.delete(userKey);
+				dispatch(target, 'ln-http:response', {
+					ok: response.ok,
+					status: response.status,
+					response: response
+				});
+			})
+			.catch(function (err) {
+				if (userKey && _keyed.get(userKey) === controller) _keyed.delete(userKey);
+				if (err && err.name === 'AbortError') return; // silent on abort
+				dispatch(target, 'ln-http:error', {
+					ok: false,
+					status: 0,
+					error: err
+				});
+			});
+	}
+
+	document.addEventListener('ln-http:request', _onRequest);
+
+	// ─── Public API ───────────────────────────────────────────────
+
+	window.lnHttp = {
+		cancel: function (url) {
+			let any = false;
+			_inflight.forEach(function (controller, key) {
+				if (key.endsWith(' ' + url)) {
+					controller.abort();
+					_inflight.delete(key);
+					any = true;
+				}
+			});
+			return any;
+		},
+		cancelByKey: function (userKey) {
+			if (!_keyed.has(userKey)) return false;
+			_keyed.get(userKey).abort();
+			_keyed.delete(userKey);
+			return true;
+		},
+		cancelAll: function () {
+			_inflight.forEach(function (c) { c.abort(); });
+			_inflight.clear();
+			_keyed.forEach(function (c) { c.abort(); });
+			_keyed.clear();
+		},
+		get inflight() {
+			const list = [];
+			_inflight.forEach(function (_c, key) {
+				const sp = key.indexOf(' ');
+				list.push({ method: key.slice(0, sp), url: key.slice(sp + 1) });
+			});
+			_keyed.forEach(function (_c, userKey) {
+				list.push({ key: userKey });
+			});
+			return list;
+		},
+		destroy: function () {
+			window.lnHttp.cancelAll();
+			document.removeEventListener('ln-http:request', _onRequest);
+			window.fetch = _origFetch;
+			delete window.lnHttp;
+		}
+	};
+})();