@livenetworks/ashlar 1.6.0 → 2.0.0

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

@@ -0,0 +1,45 @@
+{
+	"$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-form",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-form-dev.scss"
+			]
+		},
+		"data-ln-form": {
+			"direction": null,
+			"sources": [
+				"ln-form-dev.scss",
+				"src/ln-form.js"
+			],
+			"type": "marker",
+			"description": "Identifies the form element as an enhanced ln-form"
+		},
+		"data-ln-form-action-edit": {
+			"direction": "author",
+			"sources": [
+				"src/ln-form.js"
+			],
+			"type": "string",
+			"fallback": "",
+			"description": "URL template or endpoint used when editing an existing record"
+		},
+		"data-ln-form-action-method": {
+			"direction": null,
+			"sources": [
+				"src/ln-form.js"
+			],
+			"type": "enum",
+			"values": [
+				"PUT",
+				"POST",
+				"PATCH"
+			],
+			"fallback": "PUT",
+			"description": "HTTP method used when submitting edit action"
+		}
+	}
+}

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

@@ -1,99 +1,107 @@
-import { populateForm, dispatch, registerComponent } from '../../ln-core';
-
-(function () {
-	const DOM_SELECTOR = 'data-ln-form';
-	const DOM_ATTRIBUTE = 'lnForm';
-	const ACTION_EDIT_ATTR   = 'data-ln-form-action-edit';
-	const ACTION_METHOD_ATTR = 'data-ln-form-action-method';
-
-	if (window[DOM_ATTRIBUTE] !== undefined) return;
-
-	// ─── Component ─────────────────────────────────────────────
-
-	function _component(form) {
-		this.dom = form;
-		this._baseAction = form.getAttribute('action') || '';
-
-		const self = this;
-
-		this._onLnFill = function (e) {
-			// Guard: only handle direct dispatches at this form, not bubbled
-			// events from [data-ln-fillable] children inside the form.
-			if (e.target !== self.dom) return;
-			if (e.detail) {
-				self.fill(e.detail);
-				self._applyActionMode(e.detail);
-			} else {
-				// Null record = "new" mode. Native reset fires the 'reset'
-				// event, which restores the base action below.
-				self.dom.reset();
-			}
-		};
-
-		this._onReset = function () {
-			self._applyActionMode(null);
-		};
-
-		form.addEventListener('ln-fill', this._onLnFill);
-		form.addEventListener('reset', this._onReset);
-
-		return this;
-	}
-
-	_component.prototype.fill = function (data) {
-		const filled = populateForm(this.dom, data);
-
-		// Trigger events so reactive consumers (ln-validate, ln-autoresize)
-		// pick up the changes. 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._ensureMethodInput = function () {
-		let input = this.dom.querySelector('input[name="_method"]');
-		if (!input) {
-			input = document.createElement('input');
-			input.type  = 'hidden';
-			input.name  = '_method';
-			input.value = '';
-			this.dom.appendChild(input);
-		}
-		return input;
-	};
-
-	_component.prototype._applyActionMode = function (record) {
-		if (!this.dom.hasAttribute(ACTION_EDIT_ATTR)) return;
-
-		const id = record && record.id != null && record.id !== '' ? record.id : null;
-		const methodInput = this._ensureMethodInput();
-
-		if (id !== null) {
-			const template = this.dom.getAttribute(ACTION_EDIT_ATTR);
-			if (template) {
-				this.dom.setAttribute('action', template.replace(':id', encodeURIComponent(id)));
-			} else {
-				this.dom.setAttribute('action', this._baseAction.replace(/\/$/, '') + '/' + encodeURIComponent(id));
-			}
-			methodInput.value = this.dom.getAttribute(ACTION_METHOD_ATTR) || 'PUT';
-		} else {
-			this.dom.setAttribute('action', this._baseAction);
-			methodInput.value = '';
-		}
-	};
-
-	_component.prototype.destroy = function () {
-		if (!this.dom[DOM_ATTRIBUTE]) return;
-		this.dom.removeEventListener('ln-fill', this._onLnFill);
-		this.dom.removeEventListener('reset', this._onReset);
-		dispatch(this.dom, 'ln-form:destroyed', { target: this.dom });
-		delete this.dom[DOM_ATTRIBUTE];
-	};
-
-	// ─── Init ──────────────────────────────────────────────────
-
-	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-form');
-})();
+import { populateForm, registerComponent, defineAttrs, attrSpec, attrStr } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-form';
+	const DOM_ATTRIBUTE = 'lnForm';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-form':               { type: 'marker', description: 'Identifies the form element as an enhanced ln-form' },
+		'data-ln-form-action-edit':   { prop: '_actionEdit', type: 'string', read: attrStr, fallback: '', description: 'URL template or endpoint used when editing an existing record' },
+		'data-ln-form-action-method': { prop: '_actionMethod', type: 'enum', values: ['PUT', 'POST', 'PATCH'], fallback: 'PUT', description: 'HTTP method used when submitting edit action' }
+	};
+	const ATTR_SPEC = attrSpec(ATTRIBUTES);
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(form) {
+		this.dom = form;
+		defineAttrs(this, form, ATTR_SPEC);
+		this._baseAction = form.getAttribute('action') || '';
+
+		const self = this;
+
+		this._onLnFill = function (e) {
+			// Guard: only handle direct dispatches at this form, not bubbled
+			// events from [data-ln-fillable] children inside the form.
+			if (e.target !== self.dom) return;
+			if (e.detail) {
+				self.fill(e.detail);
+				self._applyActionMode(e.detail);
+			} else {
+				// Null record = "new" mode. Native reset fires the 'reset'
+				// event, which restores the base action below.
+				self.dom.reset();
+			}
+		};
+
+		this._onReset = function () {
+			self._applyActionMode(null);
+		};
+
+		form.addEventListener('ln-fill', this._onLnFill);
+		form.addEventListener('reset', this._onReset);
+
+		return this;
+	}
+
+	_component.prototype.fill = function (data) {
+		const filled = populateForm(this.dom, data);
+
+		// Trigger events so reactive consumers (ln-validate, ln-autoresize)
+		// pick up the changes. 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._ensureMethodInput = function () {
+		let input = this.dom.querySelector('input[name="_method"]');
+		if (!input) {
+			input = document.createElement('input');
+			input.type  = 'hidden';
+			input.name  = '_method';
+			input.value = '';
+			this.dom.appendChild(input);
+		}
+		return input;
+	};
+
+	_component.prototype._applyActionMode = function (record) {
+		if (!this.dom.hasAttribute('data-ln-form-action-edit')) return;
+
+		const id = record && record.id != null && record.id !== '' ? record.id : null;
+		const methodInput = this._ensureMethodInput();
+
+		if (id !== null) {
+			const template = this._actionEdit;
+			if (template) {
+				this.dom.setAttribute('action', template.replace(':id', encodeURIComponent(id)));
+			} else {
+				this.dom.setAttribute('action', this._baseAction.replace(/\/$/, '') + '/' + encodeURIComponent(id));
+			}
+			methodInput.value = this._actionMethod || 'PUT';
+		} else {
+			this.dom.setAttribute('action', this._baseAction);
+			methodInput.value = '';
+		}
+	};
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this.dom.removeEventListener('ln-fill', this._onLnFill);
+		this.dom.removeEventListener('reset', this._onReset);
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-form', {
+		attributes: ATTRIBUTES
+	});
+})();

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

@@ -1,8 +1,9 @@
 # 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).
+> A window-level HTTP concurrency coordinator (`window.lnHttp`). It transparently intercepts `fetch()` to call
+> `AbortController.abort()` on superseded in-flight GET/HEAD requests targeting the exact same URL. Additionally, it listens
+> globally for `ln-http:request` CustomEvents bearing a unique `key`: automatically aborting any running request with the same
+> key, executing the fetch, and dispatching `ln-http:response` or `ln-http:error`.
 
 ---
 
@@ -68,9 +69,13 @@ element.dispatchEvent(new CustomEvent('ln-http:request', {
 
 ---
 
-## ⚡ DOM Events (Path B response lifecycle)
+## ⚡ DOM Events (Path B response lifecycle & declarative control)
+
+### `ln-http:cancel`
+Listened on `document`. Declaratively cancels in-flight requests without calling imperative window methods.
+- `detail`: `{ key?: string, url?: string, all?: boolean }`
 
-Both events bubble from the element that dispatched the original `'ln-http:request'`.
+Both response 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.
@@ -92,7 +97,7 @@ Fired when network-level failures reject the fetch promise (excluding aborts).
 
 ## 🔧 Internals
 
-Source: `js/ln-http/ln-http.js`. A **service-style global**: wraps `window.fetch`, listens on `document`, no DOM instance, no `data-ln-*`, no MutationObserver. Two closure-private `Map`s hold all state — `_inflight` (`"METHOD URL" → AbortController`, Path A) and `_keyed` (`consumer key → AbortController`, Path B) — plus `_origFetch`, the unwrapped `fetch` captured at load, used to restore on `destroy()`.
+Source: `components/ln-http/ln-http.js`. A **service-style global**: wraps `window.fetch`, listens on `document`, no DOM instance, no `data-ln-*`, no MutationObserver. Two closure-private `Map`s hold all state — `_inflight` (`"METHOD URL" → AbortController`, Path A) and `_keyed` (`consumer key → AbortController`, Path B) — plus `_origFetch`, the unwrapped `fetch` captured at load, used to restore on `destroy()`.
 
 ### Parasitic design
 

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

@@ -0,0 +1 @@
+(function(){"use strict";function S(t){if(typeof window>"u")return!1;if(window.lnDebug===!0)return!0;if(window.lnCore&&window.lnCore._debugIsContained)return t?window.lnCore._debugIsContained(t):window.lnCore._debugSink!==null;if(t&&t.closest){const e=t.closest("[data-ln-debug]");return!(!e||typeof document<"u"&&e===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 t=console.warn;console.warn=function(...e){if(typeof e[0]=="string"&&(e[0].startsWith("[ln-")||e[0].startsWith("[lnCore"))){let d=null;for(let a=1;a<e.length;a++)if(e[a]&&e[a].nodeType===1){d=e[a];break}if(!S(d))return}t.apply(console,e)}}function p(t,e,o){const d=o||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",e,t,d),t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:d}))}function C(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){C(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}const m={};function k(t,e){m[t]=e}function v(t){return m[t]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=k,window.lnCore.getDataMapper=v);function L(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,C(function(){new MutationObserver(function(){p(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const y={};function x(t,e){if(!t||typeof e!="object")return;const o=t.toLowerCase().split("-")[0];y[o]=e}function H(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return y[e]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=x,window.lnCore.getLocaleFallback=H,window.lnCore.ensureLocaleObserver=L);const b={};function O(t,e){b[t]||(b[t]=document.querySelector('[data-ln-template="'+t+'"]'));const o=b[t];return o?o.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function E(t,e){if(!t||!e)return t;const o=t.querySelectorAll("[data-ln-field]");for(let n=0;n<o.length;n++){const r=o[n],l=r.getAttribute("data-ln-field");e[l]!=null&&(r.textContent=e[l])}const d=t.querySelectorAll("[data-ln-attr]");for(let n=0;n<d.length;n++){const r=d[n],l=r.getAttribute("data-ln-attr").split(",");for(let i=0;i<l.length;i++){const c=l[i].trim().split(":");if(c.length!==2)continue;const u=c[0].trim(),f=c[1].trim();e[f]!=null&&r.setAttribute(u,e[f])}}const a=t.querySelectorAll("[data-ln-show]");for(let n=0;n<a.length;n++){const r=a[n],l=r.getAttribute("data-ln-show");l in e&&r.classList.toggle("hidden",!e[l])}const s=t.querySelectorAll("[data-ln-class]");for(let n=0;n<s.length;n++){const r=s[n],l=r.getAttribute("data-ln-class").split(",");for(let i=0;i<l.length;i++){const c=l[i].trim().split(":");if(c.length!==2)continue;const u=c[0].trim(),f=c[1].trim();f in e&&r.classList.toggle(u,!!e[f])}}return t}function D(t,e){t.matches&&t.matches("[data-ln-form], [data-ln-fillable]")&&(window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",t,e??null),t.dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0})));const o=t.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let d=0;d<o.length;d++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",o[d],e??null),o[d].dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));return t}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(t){if(!(!t.target.matches||!t.target.matches("[data-ln-fillable]")))if(t.detail)E(t.target,t.detail);else{const e=t.target.querySelectorAll("[data-ln-field]");for(let o=0;o<e.length;o++)e[o].textContent=""}})));function _(t,e){if(!t||!e)return t;const o=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;o.nextNode();){const s=o.currentNode;s.textContent.indexOf("{{")!==-1&&(s.textContent=s.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(n,r){return e[r]!==void 0?e[r]:""}))}const d=function(s,n){return e[n]!==void 0?e[n]:""},a=Array.from(t.querySelectorAll("*"));t.nodeType===1&&a.push(t);for(let s=0;s<a.length;s++){const n=a[s],r=n.attributes;for(let l=0;l<r.length;l++){const i=r[l];i.value.indexOf("{{")!==-1&&n.setAttribute(i.name,i.value.replace(/\{\{\s*(\w+)\s*\}\}/g,d))}}return t}function F(t,e,o,d,a,s){const n={};for(let l=0;l<t.children.length;l++){const i=t.children[l],c=i.getAttribute("data-ln-render-key");c&&(n[c]=i)}const r=document.createDocumentFragment();for(let l=0;l<e.length;l++){const i=e[l],c=String(d(i));let u=n[c];if(u)a(u,i,l);else{const f=O(o,s);if(!f||(_(f,i),u=f.firstElementChild,!u))continue;u.setAttribute("data-ln-render-key",c),a(u,i,l)}r.appendChild(u)}t.textContent="",t.appendChild(r)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=_,window.lnCore.fill=E,window.lnCore.lnFill=D,window.lnCore.renderList=F),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function A(t){return(t||"").replace(/^#/,"")}function g(t){const e=t===void 0?location.hash:t,o={},d=A(e);if(!d)return o;const a=d.split("&");for(let s=0;s<a.length;s++){const n=a[s];if(!n)continue;const r=n.indexOf(":"),l=r>-1?n.slice(0,r):n,i=r>-1?n.slice(r+1):"";if(l)try{o[l]=decodeURIComponent(i)}catch{o[l]=i}}return o}function T(t){if(!t)return null;const e=g();return t in e?e[t]:null}function M(t,e){if(!t)return;const o=g();e==null?delete o[t]:o[t]=String(e);const a=Object.keys(o).map(function(s){const n=o[s];return n===""?s:s+":"+encodeURIComponent(n)}).join("&");A(location.hash)!==a&&(location.hash=a)}function q(t){return t.button===1||t.ctrlKey||t.metaKey||t.shiftKey?!1:(t.preventDefault(),!0)}function B(t,e){if(!t||!t.hasAttribute("data-ln-hash"))return null;const o=t.getAttribute("data-ln-hash");if(o&&o.trim()!=="")return o.trim();const d=t.getAttribute("data-ln-sort")||t.getAttribute("data-ln-search-for")||t.getAttribute("data-ln-search")||t.getAttribute("data-ln-filter")||t.id;return d?e?d+"-"+e:d:e||null}function j(t,e){return!e||e==="none"||t===null||t===void 0?null:String(t)+"."+e}function W(t){return!t||typeof t!="string"?null:t.endsWith(".asc")?{fieldOrColumn:t.slice(0,-4),direction:"asc"}:t.endsWith(".desc")?{fieldOrColumn:t.slice(0,-5),direction:"desc"}:null}function U(t,e){return!t||!Array.isArray(e)||e.length===0?null:t+":"+e.map(encodeURIComponent).join(",")}function I(t){if(!t||typeof t!="string")return null;const e=t.indexOf(":");if(e===-1)return null;const o=t.slice(0,e),d=t.slice(e+1),a=d?d.split(",").map(function(s){try{return decodeURIComponent(s)}catch{return s}}).filter(Boolean):[];return{key:o,values:a}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=g,window.lnCore.hashGet=T,window.lnCore.hashSet=M,window.lnCore.hashLinkClick=q,window.lnCore.resolveHashNamespace=B,window.lnCore.hashSortEncode=j,window.lnCore.hashSortDecode=W,window.lnCore.hashFilterEncode=U,window.lnCore.hashFilterDecode=I);function G(t){if(typeof t=="string")return t;if(t&&typeof t=="object"){if(typeof t.href=="string")return t.href;if(typeof t.url=="string")return t.url}return String(t||"")}function K(t,e){return e&&e.method?String(e.method).toUpperCase():t&&typeof t=="object"&&t.method?String(t.method).toUpperCase():"GET"}function N(t,e){return(e||"GET")+" "+(t||"")}function R(t){const e=(t||"").toUpperCase();return e==="GET"||e==="HEAD"}(function(){if(window.lnHttp)return;const t=window.fetch.bind(window),e=new Map,o=new Map;function d(n,r){r=r||{};const l=G(n),i=K(n,r),c=N(l,i);R(i)&&e.has(c)&&(e.get(c).abort(),e.delete(c));const u=new AbortController,f=r.signal;let h=null;f&&(f.aborted?u.abort(f.reason):(h=function(){u.abort(f.reason)},f.addEventListener("abort",h,{once:!0})));const w=Object.assign({},r,{signal:u.signal});return e.set(c,u),t(n,w).finally(function(){f&&h&&f.removeEventListener("abort",h),e.get(c)===u&&e.delete(c)})}d.toString=function(){return"function fetch() { [ln-http wrapped] }"},window.fetch=d;function a(n){if(!n.detail||!n.detail.url)return;const r=n.target,l=(n.detail.method||(n.detail.body?"POST":"GET")).toUpperCase(),i=n.detail.key;i&&o.has(i)&&(o.get(i).abort(),o.delete(i));const c=new AbortController,u=n.detail.signal;let f=null;u&&(u.aborted?c.abort(u.reason):(f=function(){c.abort(u.reason)},u.addEventListener("abort",f,{once:!0}))),i&&o.set(i,c);const h={method:l,signal:c.signal};n.detail.body!==void 0&&(h.body=n.detail.body),window.fetch(n.detail.url,h).then(function(w){u&&f&&u.removeEventListener("abort",f),i&&o.get(i)===c&&o.delete(i),p(r,"ln-http:response",{ok:w.ok,status:w.status,response:w})}).catch(function(w){u&&f&&u.removeEventListener("abort",f),i&&o.get(i)===c&&o.delete(i),!(w&&w.name==="AbortError")&&p(r,"ln-http:error",{ok:!1,status:0,error:w})})}function s(n){const r=n.detail||{};r.all?window.lnHttp.cancelAll():r.key?window.lnHttp.cancelByKey(r.key):r.url&&window.lnHttp.cancel(r.url)}document.addEventListener("ln-http:request",a),document.addEventListener("ln-http:cancel",s),window.lnHttp={cancel:function(n){let r=!1;return e.forEach(function(l,i){i.endsWith(" "+n)&&(l.abort(),e.delete(i),r=!0)}),r},cancelByKey:function(n){return o.has(n)?(o.get(n).abort(),o.delete(n),!0):!1},cancelAll:function(){e.forEach(function(n){n.abort()}),e.clear(),o.forEach(function(n){n.abort()}),o.clear()},get inflight(){const n=[];return e.forEach(function(r,l){const i=l.indexOf(" ");n.push({method:l.slice(0,i),url:l.slice(i+1)})}),o.forEach(function(r,l){n.push({key:l})}),n},destroy:function(){window.lnHttp.cancelAll(),document.removeEventListener("ln-http:request",a),document.removeEventListener("ln-http:cancel",s),window.fetch=t,delete window.lnHttp}}})()})();

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

@@ -0,0 +1,6 @@
+{
+	"$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-http",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {}
+}

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

@@ -0,0 +1,51 @@
+// ═══════════════════════════════════════════════════════════════
+// http-core.js — Pure helpers for ln-http transport supervisor
+// ═══════════════════════════════════════════════════════════════
+
+/**
+ * Accept string | URL | Request | any → return string URL.
+ * @param {string|URL|Request|*} resource
+ * @returns {string}
+ */
+export function extractUrl(resource) {
+	if (typeof resource === 'string') return resource;
+	if (resource && typeof resource === 'object') {
+		if (typeof resource.href === 'string') return resource.href;
+		if (typeof resource.url === 'string') return resource.url;
+	}
+	return String(resource || '');
+}
+
+/**
+ * Extract HTTP method from options or Request, default 'GET', uppercased.
+ * @param {*} resource
+ * @param {Object} [options]
+ * @returns {string}
+ */
+export function extractMethod(resource, options) {
+	if (options && options.method) return String(options.method).toUpperCase();
+	if (resource && typeof resource === 'object' && resource.method) {
+		return String(resource.method).toUpperCase();
+	}
+	return 'GET';
+}
+
+/**
+ * Build deduplication cache key: "METHOD URL".
+ * @param {string} url
+ * @param {string} method
+ * @returns {string}
+ */
+export function buildHttpKey(url, method) {
+	return (method || 'GET') + ' ' + (url || '');
+}
+
+/**
+ * Checks if the HTTP method is eligible for transparent deduplication (GET, HEAD).
+ * @param {string} method
+ * @returns {boolean}
+ */
+export function isIdempotentMethod(method) {
+	const m = (method || '').toUpperCase();
+	return m === 'GET' || m === 'HEAD';
+}

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

@@ -39,17 +39,19 @@
 //   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.
+// Public API & Event Control:
+//   ln-http:cancel       — event on document { key?, url?, all? } to abort in-flight requests.
+//   window.lnHttp.cancel(url)      — abort any Path A in-flight whose URL matches.
+//   window.lnHttp.cancelByKey(key) — abort the Path B in-flight with this key.
+//   window.lnHttp.cancelAll()      — abort every in-flight (both paths).
+//   window.lnHttp.inflight         — getter; returns Array<{ url, method, key? }>
+//                                    covering both paths, for debugging.
+//   window.lnHttp.destroy()        — restore original fetch, remove document
+//                                    listeners, clear all in-flight queues.
+//                                    Used in dev hot-reload and tests.
 
 import { dispatch } from '../../ln-core';
+import { extractUrl, extractMethod, buildHttpKey, isIdempotentMethod } from './http-core';
 
 (function () {
 	if (window.lnHttp) return;                    // double-load guard
@@ -58,37 +60,17 @@ import { dispatch } from '../../ln-core';
 	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);
+		const url    = extractUrl(resource);
+		const method = extractMethod(resource, options);
+		const key    = buildHttpKey(url, method);
 
 		// Idempotent dedup — abort previous in-flight on same key.
-		if (_isIdempotent(method) && _inflight.has(key)) {
+		if (isIdempotentMethod(method) && _inflight.has(key)) {
 			_inflight.get(key).abort();
 			_inflight.delete(key);
 		}
@@ -189,7 +171,19 @@ import { dispatch } from '../../ln-core';
 			});
 	}
 
+	function _onCancel(e) {
+		const detail = e.detail || {};
+		if (detail.all) {
+			window.lnHttp.cancelAll();
+		} else if (detail.key) {
+			window.lnHttp.cancelByKey(detail.key);
+		} else if (detail.url) {
+			window.lnHttp.cancel(detail.url);
+		}
+	}
+
 	document.addEventListener('ln-http:request', _onRequest);
+	document.addEventListener('ln-http:cancel', _onCancel);
 
 	// ─── Public API ───────────────────────────────────────────────
 
@@ -231,6 +225,7 @@ import { dispatch } from '../../ln-core';
 		destroy: function () {
 			window.lnHttp.cancelAll();
 			document.removeEventListener('ln-http:request', _onRequest);
+			document.removeEventListener('ln-http:cancel', _onCancel);
 			window.fetch = _origFetch;
 			delete window.lnHttp;
 		}

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

@@ -1,5 +1,7 @@
 # ln-icon
 
+> Applied to standard SVG references (`<svg class="ln-icon"><use href="#ln-icon-home"></use></svg>`). It monitors the DOM via `MutationObserver` for `<use>` tags, dynamically fetches missing SVG paths from a CDN or custom asset endpoint, caches them in `localStorage` under the `lni:` prefix, and injects them into a single hidden `#ln-icon-sprite` symbol sheet at the start of `<body>`. It executes zero JS rendering after hydration, leaving styling and color inheritance entirely to CSS `currentColor`.
+
 A zero-dependency, local-first **On-Demand SVG Sprite Generator** that dynamically monitors, fetches, and compiles SVG icons at runtime.
 
 Instead of bundling thousands of heavy vector paths or requiring complex manual build steps, it intercepts standard DOM `<use>` tags, fetches vector definitions from a remote CDN, caches them in `localStorage`, and injects them into a single unified hidden SVG sprite sheet.
@@ -8,10 +10,10 @@ Instead of bundling thousands of heavy vector paths or requiring complex manual
 
 ## 🧭 Philosophy & Architecture
 
-1. **Declarative On-Demand Rendering:** Icons are declared directly in HTML. The component monitors the DOM via `MutationObserver` for `<use>` references with `#ln-` and `#lnc-` prefixes. It only fetches and compiles icons that are actively present on the page.
+1. **Declarative On-Demand Rendering:** Icons are declared directly in HTML. The component monitors the DOM via `MutationObserver` for `<use>` references with `#ln-icon-` and `#ln-icon-custom-` prefixes. It only fetches and compiles icons that are actively present on the page.
 2. **Dual-Prefix Routing:**
-   - **`#ln-{name}`**: Automatically routes to the [Tabler Icons](https://tabler.io/icons) library fetched from a public CDN. No configuration required.
-   - **`#lnc-{name}`**: Routes to a custom corporate CDN defined via global window settings.
+   - **`#ln-icon-{name}`**: Automatically routes to the [Tabler Icons](https://tabler.io/icons) library fetched from a public CDN. No configuration required.
+   - **`#ln-icon-custom-{name}`**: Routes to a custom corporate CDN defined via global window settings.
 3. **Local Caching Layer:** Fetched SVG path structures are instantly cached in `localStorage` under `lni:{id}`. Subsequent visits render icons instantly with zero network roundtrips.
 
 ---
@@ -62,7 +64,7 @@ Configure these properties before script initialization:
 | Variable | Default | Description |
 | :--- | :--- | :--- |
 | `LN_ICON_CDN` | `https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline` | Base CDN URL for Tabler Icons. |
-| `LN_ICON_CUSTOM_CDN` | `null` | Base CDN URL for custom `#lnc-` prefixed SVG resources. |
+| `LN_ICON_CUSTOM_CDN` | `null` | Base CDN URL for custom `#ln-icon-custom-` prefixed SVG resources. |
 
 ---
 
@@ -84,14 +86,14 @@ useElement.setAttribute('href', '#ln-icon-check');
 ## ⚠️ Common Pitfalls
 
 - **Forgetting `ln-icon` Class:** Standard SVGs default to `100%` width/height. Failing to include the `ln-icon` class will cause the icon to blow up to full viewport size.
-- **Incorrect Prefix Configuration:** Forgetting to define `window.LN_ICON_CUSTOM_CDN` when using `#lnc-` will cause the loader to fail silently with undefined endpoint errors.
+- **Incorrect Prefix Configuration:** Forgetting to define `window.LN_ICON_CUSTOM_CDN` when using `#ln-icon-custom-` will cause the loader to fail silently with undefined endpoint errors.
 - **Omitting `aria-hidden="true"`:** Screen readers attempt to read SVG nodes. Always decorate decorative icons with `aria-hidden="true"`, or include an `aria-label` on their parent button.
 
 ---
 
 ## 🔧 Internals
 
-Source: `js/ln-icon/ln-icon.js`. Routing is purely prefix-based — no config lists, no runtime mapping. Symbol IDs in the generated sprite mirror the full `href` value minus `#` (e.g. `#ln-icon-custom-file-pdf` → `<symbol id="ln-icon-custom-file-pdf">`).
+Source: `components/ln-icon/ln-icon.js`. Routing is purely prefix-based — no config lists, no runtime mapping. Symbol IDs in the generated sprite mirror the full `href` value minus `#` (e.g. `#ln-icon-custom-file-pdf` → `<symbol id="ln-icon-custom-file-pdf">`).
 
 ### Scan
 
@@ -103,7 +105,7 @@ Two in-memory `Set`s (`loaded`, `pending`), keyed by full `href`, prevent duplic
 
 ### Fetch + symbol injection
 
-On a cache miss: resolve the CDN URL (`lnc-` → `LN_ICON_CUSTOM_CDN`, `ln-` → `LN_ICON_CDN`; `lnc-` bails silently if the custom CDN isn't configured), `fetch()`, then parse the raw SVG string — extract `viewBox` (fallback `'0 0 24 24'`), the inner content between the `<svg>` tags, and root presentation attributes (`fill`, `stroke`, `stroke-width`, `stroke-linecap`, `stroke-linejoin`). A `<symbol>` is built from these and appended to the sprite's `<defs>`; the raw SVG is also written back to `localStorage`. Errors delete the `pending` entry silently — the icon stays blank, no retry.
+On a cache miss: resolve the CDN URL (`#ln-icon-custom-` → `LN_ICON_CUSTOM_CDN`, `#ln-icon-` → `LN_ICON_CDN`; `#ln-icon-custom-` bails silently if the custom CDN isn't configured), `fetch()`, then parse the raw SVG string — extract `viewBox` (fallback `'0 0 24 24'`), the inner content between the `<svg>` tags, and root presentation attributes (`fill`, `stroke`, `stroke-width`, `stroke-linecap`, `stroke-linejoin`). A `<symbol>` is built from these and appended to the sprite's `<defs>`; the raw SVG is also written back to `localStorage`. Errors delete the `pending` entry silently — the icon stays blank, no retry.
 
 ### Sprite element
 
@@ -123,8 +125,13 @@ Tabler SVGs use `stroke="currentColor"`, so rendered icons inherit the nearest a
 
 ### Cross-component icon injection
 
-Several components inject `<use>` elements dynamically rather than authoring them in HTML: `ln-toast` (`#ln-icon-x` dismiss button), `ln-upload` (`#lnc-file[-pdf|-doc|-epub]` per item, `#ln-icon-x` remove button), `ln-confirm` (swaps an existing `<use href>` to `#ln-icon-check` during confirm, restores on reset). All route through the same scan/fetch pipeline — no special-casing needed since detection is attribute-based, not author-time. `ln-sort` is the opposite case: its three trigger icons are statically authored in HTML (see `js/ln-sort/README.md`), never injected.
+Several components inject `<use>` elements dynamically rather than authoring them in HTML: `ln-toast` (`#ln-icon-x` dismiss button), `ln-upload` (`#ln-icon-custom-file[-pdf|-doc|-epub]` per item, `#ln-icon-x` remove button), `ln-confirm` (swaps an existing `<use href>` to `#ln-icon-check` during confirm, restores on reset). All route through the same scan/fetch pipeline — no special-casing needed since detection is attribute-based, not author-time. `ln-sort` is the opposite case: its three trigger icons are statically authored in HTML (see `components/ln-sort/README.md`), never injected.
 
 ### Offline behavior
 
-Uncached icons fail silently (`.catch()`) if the page loads offline — the icon stays blank. For offline-first deployments, self-host the SVG set and point `window.LN_ICON_CDN` at a local server before the library initializes; `vite.config.js` copies `js/ln-icon/icons/*.svg` → `dist/icons/` at build for this purpose.
+Uncached icons fail silently (`.catch()`) if the page loads offline — the icon stays blank. For offline-first deployments, self-host the SVG set and point `window.LN_ICON_CDN` at a local server before the library initializes; `vite.config.js` copies `components/ln-icon/icons/*.svg` → `dist/icons/` at build for this purpose.
+
+### Security & Trust Boundary
+
+`ln-icon` dynamically fetches SVG markup from CDNs and injects it via `innerHTML` into `<symbol>` definitions without client-side sanitization. For threat modeling, `localStorage` persistence implications, strict CSP directives (`connect-src`), and self-hosting / offline SVG sprite guidance, see the [Dynamic SVG Icon Trust Boundary](../../docs/architecture/security.md#7-dynamic-svg-icon-trust-boundary-ln-icons) documentation in `docs/architecture/security.md`.
+

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

@@ -0,0 +1,6 @@
+{
+	"$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-icon",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {}
+}