@livenetworks/ashlar 1.4.1 → 1.6.0

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

@@ -96,11 +96,16 @@ import { dispatch } from '../../ln-core';
 		// Combine consumer signal with wrapper controller.
 		const controller = new AbortController();
 		const consumerSignal = options.signal;
+		let abortHandler = null;
 		if (consumerSignal) {
-			if (consumerSignal.aborted) controller.abort(consumerSignal.reason);
-			else consumerSignal.addEventListener('abort', function () {
+			if (consumerSignal.aborted) {
 				controller.abort(consumerSignal.reason);
-			}, { once: true });
+			} else {
+				abortHandler = function () {
+					controller.abort(consumerSignal.reason);
+				};
+				consumerSignal.addEventListener('abort', abortHandler, { once: true });
+			}
 		}
 
 		const merged = Object.assign({}, options, { signal: controller.signal });
@@ -108,6 +113,10 @@ import { dispatch } from '../../ln-core';
 		_inflight.set(key, controller);
 
 		return _origFetch(resource, merged).finally(function () {
+			// Clean up listener to prevent memory leak
+			if (consumerSignal && abortHandler) {
+				consumerSignal.removeEventListener('abort', abortHandler);
+			}
 			// Only clear if THIS controller is still the one in the map.
 			if (_inflight.get(key) === controller) _inflight.delete(key);
 		});
@@ -119,12 +128,11 @@ import { dispatch } from '../../ln-core';
 	// ─── Path B: ln-http:request event listener ───────────────────
 
 	function _onRequest(e) {
-		const opts = e.detail || {};
-		if (!opts.url) return;
+		if (!e.detail || !e.detail.url) return;
 
 		const target = e.target;
-		const method = (opts.method || (opts.body ? 'POST' : 'GET')).toUpperCase();
-		const userKey = opts.key;
+		const method = (e.detail.method || (e.detail.body ? 'POST' : 'GET')).toUpperCase();
+		const userKey = e.detail.key;
 
 		// Explicit-key dedup — abort previous on same key, any method.
 		if (userKey && _keyed.has(userKey)) {
@@ -134,24 +142,32 @@ import { dispatch } from '../../ln-core';
 
 		// Combine consumer signal (if any) with our own controller.
 		const controller = new AbortController();
-		const consumerSignal = opts.signal;
+		const consumerSignal = e.detail.signal;
+		let abortHandler = null;
 		if (consumerSignal) {
-			if (consumerSignal.aborted) controller.abort(consumerSignal.reason);
-			else consumerSignal.addEventListener('abort', function () {
+			if (consumerSignal.aborted) {
 				controller.abort(consumerSignal.reason);
-			}, { once: true });
+			} else {
+				abortHandler = function () {
+					controller.abort(consumerSignal.reason);
+				};
+				consumerSignal.addEventListener('abort', abortHandler, { once: true });
+			}
 		}
 
 		if (userKey) _keyed.set(userKey, controller);
 
 		const fetchOptions = { method: method, signal: controller.signal };
-		if (opts.body !== undefined) fetchOptions.body = opts.body;
+		if (e.detail.body !== undefined) fetchOptions.body = e.detail.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)
+		window.fetch(e.detail.url, fetchOptions)
 			.then(function (response) {
+				if (consumerSignal && abortHandler) {
+					consumerSignal.removeEventListener('abort', abortHandler);
+				}
 				if (userKey && _keyed.get(userKey) === controller) _keyed.delete(userKey);
 				dispatch(target, 'ln-http:response', {
 					ok: response.ok,
@@ -160,6 +176,9 @@ import { dispatch } from '../../ln-core';
 				});
 			})
 			.catch(function (err) {
+				if (consumerSignal && abortHandler) {
+					consumerSignal.removeEventListener('abort', abortHandler);
+				}
 				if (userKey && _keyed.get(userKey) === controller) _keyed.delete(userKey);
 				if (err && err.name === 'AbortError') return; // silent on abort
 				dispatch(target, 'ln-http:error', {

package/js/ln-icon/README.md

@@ -0,0 +1,130 @@
+# ln-icon
+
+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.
+
+---
+
+## 🧭 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.
+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.
+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.
+
+---
+
+## 📦 Minimal Blueprint
+
+### Native Tabler Icon
+```html
+<svg class="ln-icon" aria-hidden="true">
+  <use href="#ln-icon-home"></use>
+</svg>
+```
+
+### Custom Asset Icon
+Define your custom CDN endpoint before importing the library:
+```html
+<script>
+  window.LN_ICON_CUSTOM_CDN = "https://cdn.mycompany.com/assets/icons";
+</script>
+<script src="dist/ln-ashlar.iife.js" defer></script>
+
+<!-- Renders icon from your custom CDN -->
+<svg class="ln-icon" aria-hidden="true">
+  <use href="#ln-icon-custom-corporate-logo"></use>
+</svg>
+```
+
+---
+
+## 🛠️ Declarative API Contract
+
+### CSS Utility Classes
+
+Configure icon sizes and alignments using standard CSS classes:
+
+| Class | Size | Description |
+| :--- | :--- | :--- |
+| `ln-icon` | `1.25rem` | Base styles, sets `fill: none`, `stroke: currentColor`, inherits color. |
+| `ln-icon--sm` | `1rem` | Small icon, designed for inline text badges or buttons. |
+| `ln-icon--lg` | `1.5rem` | Large icon, designed for toolbar buttons. |
+| `ln-icon--xl` | `4rem` | Extra-large icon, designed for empty state illustrations. |
+| `ln-chevron` | — | Automatically rotates `90deg` when an ancestor `.is-active` class is toggled. |
+
+### Global Configuration (`window`)
+
+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. |
+
+---
+
+## ⚡ Dynamic Interaction Flow
+
+### Automated Mutation Observability
+The loader observes the DOM continuously. When new content is injected (e.g. by `ln-ajax` or `ln-store`), any new icon `<use>` tag is intercepted, resolved, and rendered.
+
+### Dynamic Attribute Swaps
+Modifying the `href` attribute of a `<use>` element dynamically via JavaScript triggers automatic resolution of the new target icon:
+```javascript
+const useElement = document.querySelector('use');
+// Dynamically fetches and switches the icon to a checkmark
+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.
+- **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">`).
+
+### Scan
+
+`_scan(root)` runs on init (`document`) and on every MutationObserver batch (each added node), matching `use[href^="#ln-icon-"], use[href^="#ln-icon-custom-"]` — the root node itself is also checked via `matches()` to cover single-node mutations. Each match calls `_load(href)`.
+
+### Dedup + caching
+
+Two in-memory `Set`s (`loaded`, `pending`), keyed by full `href`, prevent duplicate fetches within a page load — `_load` bails immediately if either contains the href. Beyond that, fetched SVG content persists in `localStorage` under `lni:{id}` (plus a `lni:v` version key); `_load` checks the cache before `fetch()`, and a cache hit injects the symbol synchronously with zero network round-trip. Bumping the internal `CACHE_VERSION` clears all `lni:*` keys on next load, forcing a re-fetch. All `localStorage` access is wrapped in `try/catch` for private-browsing/storage-full environments.
+
+### 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.
+
+### Sprite element
+
+Created lazily on first icon load, inserted as `document.body`'s first child: `<svg id="ln-icon-sprite" hidden aria-hidden="true"><defs>...</defs></svg>`.
+
+### MutationObserver
+
+Observes `document.body` with `{ childList: true, subtree: true }`, firing `_scan(node)` per added element — covers modals, dynamic lists, and any JS-rendered content (e.g. `ln-ajax`/`ln-store` swaps).
+
+### Color inheritance
+
+Tabler SVGs use `stroke="currentColor"`, so rendered icons inherit the nearest ancestor's CSS `color`. The custom multi-color icons (`ln-icon-custom-file-pdf`, `ln-icon-custom-file-doc`, `ln-icon-custom-file-epub`) embed explicit stroke colors in their source and intentionally do not follow `currentColor`.
+
+### Checkbox exception
+
+`<input type="checkbox">` is a replaced element and cannot contain children, so its checkmark cannot use the sprite — it's a `background-image` data URI in `_form.scss`, the only remaining data URI in the codebase.
+
+### 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.
+
+### 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.

package/js/ln-icon/ln-icon.js

@@ -0,0 +1 @@
+(function(){"use strict";(function(){const h="ln-icon-sprite",a="#ln-icon-",s="#ln-icon-custom-",d=new Set,l=new Set;let c=null;const y=(window.LN_ICON_CDN||"https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline").replace(/\/$/,""),g=(window.LN_ICON_CUSTOM_CDN||"").replace(/\/$/,""),u="lni:",m="lni:v",w="1";function v(){try{if(localStorage.getItem(m)!==w){for(let t=localStorage.length-1;t>=0;t--){const e=localStorage.key(t);e&&e.indexOf(u)===0&&localStorage.removeItem(e)}localStorage.setItem(m,w)}}catch{}}v();function N(){return c||(c=document.getElementById(h),c||(c=document.createElementNS("http://www.w3.org/2000/svg","svg"),c.id=h,c.setAttribute("hidden",""),c.setAttribute("aria-hidden","true"),c.appendChild(document.createElementNS("http://www.w3.org/2000/svg","defs")),document.body.insertBefore(c,document.body.firstChild))),c}function A(t){return t.indexOf(s)===0?g+"/"+t.slice(s.length)+".svg":y+"/"+t.slice(a.length)+".svg"}function S(t,e){const o=e.match(/viewBox="([^"]+)"/),n=o?o[1]:"0 0 24 24",i=e.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i),I=i?i[1].trim():"",p=e.match(/<svg([^>]*)>/i),O=p?p[1]:"",r=document.createElementNS("http://www.w3.org/2000/svg","symbol");r.id=t,r.setAttribute("viewBox",n),["fill","stroke","stroke-width","stroke-linecap","stroke-linejoin"].forEach(function(_){const b=O.match(new RegExp(_+'="([^"]*)"'));b&&r.setAttribute(_,b[1])}),r.innerHTML=I,N().querySelector("defs").appendChild(r)}function f(t){if(d.has(t)||l.has(t))return;if(t.indexOf(s)===0&&!g){console.warn("[ln-icon] Custom icon requested but no CUSTOM_CDN configured:",t);return}const e=t.slice(1);try{const n=localStorage.getItem(u+e);if(n){S(e,n),d.add(t);return}}catch{}l.add(t);const o=A(t);fetch(o).then(function(n){if(!n.ok)throw new Error(n.status);return n.text()}).then(function(n){S(e,n),d.add(t),l.delete(t);try{localStorage.setItem(u+e,n)}catch{}}).catch(function(n){console.error("[ln-icon] Fetch failed for:",e,n),l.delete(t)})}function C(t){const e='use[href^="'+a+'"], use[href^="'+s+'"]',o=t.querySelectorAll?t.querySelectorAll(e):[];if(t.matches&&t.matches(e)){const n=t.getAttribute("href");n&&f(n)}Array.prototype.forEach.call(o,function(n){const i=n.getAttribute("href");i&&f(i)})}function E(){C(document),new MutationObserver(function(t){t.forEach(function(e){if(e.type==="childList")e.addedNodes.forEach(function(o){o.nodeType===1&&C(o)});else if(e.type==="attributes"&&e.attributeName==="href"){const o=e.target.getAttribute("href");o&&(o.indexOf(a)===0||o.indexOf(s)===0)&&f(o)}})}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["href"]})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",E):E()})()})();

package/js/{ln-icons/src/ln-icons.js → ln-icon/src/ln-icon.js}

@@ -3,31 +3,31 @@
 // page loads resolve instantly without network requests.
 //
 // Two prefixes:
-//   #ln-{name}   → Tabler CDN  (https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline)
-//   #lnc-{name}  → Custom CDN  (window.LN_ICONS_CUSTOM_CDN)
+//   #ln-icon-{name}        → Tabler CDN  (https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline)
+//   #ln-icon-custom-{name} → Custom CDN  (window.LN_ICON_CUSTOM_CDN)
 //
 // Config — set on window BEFORE this script loads:
-//   window.LN_ICONS_CDN        = 'https://...'   (override Tabler CDN base)
-//   window.LN_ICONS_CUSTOM_CDN = 'https://...'   (required for lnc- icons)
+//   window.LN_ICON_CDN        = 'https://...'   (override Tabler CDN base)
+//   window.LN_ICON_CUSTOM_CDN = 'https://...'   (required for custom icons)
 //
 // Cache: bump CACHE_VERSION to invalidate all cached icons.
 //
 // Usage:
-//   <svg class="ln-icon" aria-hidden="true"><use href="#ln-home"></use></svg>
-//   <svg class="ln-icon" aria-hidden="true"><use href="#lnc-file-pdf"></use></svg>
+//   <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-home"></use></svg>
+//   <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-custom-file-pdf"></use></svg>
 
 (function () {
-	const SPRITE_ID  = 'ln-icons-sprite';
-	const PREFIX_LN  = '#ln-';
-	const PREFIX_LNC = '#lnc-';
+	const SPRITE_ID  = 'ln-icon-sprite';
+	const PREFIX_LN  = '#ln-icon-';
+	const PREFIX_LNC = '#ln-icon-custom-';
 
 	const loaded  = new Set();
 	const pending = new Set();
 	let spriteEl = null;
 
-	// Pinned version for cache stability — bump explicitly when upgrading. Override: window.LN_ICONS_CDN
-	const BASE_CDN   = (window.LN_ICONS_CDN        || 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline').replace(/\/$/, '');
-	const CUSTOM_CDN = (window.LN_ICONS_CUSTOM_CDN || '').replace(/\/$/, '');
+	// Pinned version for cache stability — bump explicitly when upgrading. Override: window.LN_ICON_CDN
+	const BASE_CDN   = (window.LN_ICON_CDN        || 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline').replace(/\/$/, '');
+	const CUSTOM_CDN = (window.LN_ICON_CUSTOM_CDN || '').replace(/\/$/, '');
 
 	const CACHE_PREFIX  = 'lni:';
 	const CACHE_VER_KEY = 'lni:v';
@@ -91,7 +91,10 @@
 
 	function _load(href) {
 		if (loaded.has(href) || pending.has(href)) return;
-		if (href.indexOf(PREFIX_LNC) === 0 && !CUSTOM_CDN) return;
+		if (href.indexOf(PREFIX_LNC) === 0 && !CUSTOM_CDN) {
+			console.warn('[ln-icon] Custom icon requested but no CUSTOM_CDN configured:', href);
+			return;
+		}
 
 		const id = href.slice(1);
 
@@ -106,8 +109,9 @@
 		} catch (e) { /* proceed to fetch */ }
 
 		pending.add(href);
+		const url = _url(href);
 
-		fetch(_url(href))
+		fetch(url)
 			.then(function (r) {
 				if (!r.ok) throw new Error(r.status);
 				return r.text();
@@ -118,7 +122,8 @@
 				pending.delete(href);
 				try { localStorage.setItem(CACHE_PREFIX + id, raw); } catch (e) { /* storage full */ }
 			})
-			.catch(function () {
+			.catch(function (err) {
+				console.error('[ln-icon] Fetch failed for:', id, err);
 				pending.delete(href);
 			});
 	}

package/js/ln-link/README.md

@@ -188,9 +188,8 @@ window.lnLink.init(root);
 window.lnLink.destroy(container);
 ```
 
-`init` traverses descendants; `destroy` does not. See
-[`docs/js/link.md`](../../docs/js/link.md) for the full mechanics
-behind this asymmetry.
+`init` traverses descendants; `destroy` does not — see
+[Cleanup asymmetry](#cleanup-asymmetry) below.
 
 ## What it does NOT do
 
@@ -255,18 +254,18 @@ click event for `ln-confirm` to intercept.
 For confirmation flows on row navigation, use `ln-link:navigate`
 with `e.preventDefault()` instead — see §Events.
 
-### With ln-data-table
+### With ln-table
 
-`ln-data-table` inserts `<tr>` elements into a `<tbody>` from a
+`ln-table` inserts `<tr>` elements into a `<tbody>` from a
 template. `ln-link`'s MutationObserver wires each new row as it
-arrives — no manual re-init is needed after `ln-data-table`
+arrives — no manual re-init is needed after `ln-table`
 populates the body.
 
 ```html
 <table data-ln-link data-ln-table>
 	<thead>...</thead>
 	<tbody>
-		<!-- ln-data-table inserts <tr> elements here dynamically;
+		<!-- ln-table inserts <tr> elements here dynamically;
 		     ln-link wires them automatically. -->
 	</tbody>
 </table>
@@ -297,7 +296,46 @@ If you only need this component and want to avoid loading the full bundle, you c
 
 ## See also
 
-- [`../../docs/js/link.md`](../../docs/js/link.md) — architecture mirror (internal state, observer topology, click-flow, registration pattern)
-- [`../../docs/js/ajax.md`](../../docs/js/ajax.md) — ln-ajax interop details
+- [`../ln-ajax/README.md`](../ln-ajax/README.md) — ln-ajax interop details
 - [`../../scss/config/mixins/_link.scss`](../../scss/config/mixins/_link.scss) — `link-row` and `link-status` mixins
 - [`../../demo/admin/src/pages/link.html`](../../demo/admin/src/pages/link.html) — interactive demo
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-link/ln-link.js`. Imports `dispatchCancelable` and `guardBody` from `../ln-core`.
+
+### State surface
+
+- `_statusEl` — module-level, a single shared `<div class="ln-link-status">` appended to `document.body` once, at first init. Never destroyed, even if all containers are.
+- `container.lnLinkInit` — per-container flag, guards double-init; deleted on destroy.
+- `row.lnLinkRow`, `row._lnLinkClick`, `row._lnLinkEnter` — per-row flag plus stored listener closures, kept so `removeEventListener` gets the exact same reference at destroy time. `_handleMouseLeave` has no closure and is shared across rows.
+- No Proxy, no reactive store — this is a listener-attachment component.
+
+### Local `findElements`
+
+Like `ln-ajax`, `ln-link` keeps a local `findElements` instead of the `ln-core` helper: it must check the root itself for `data-ln-link` AND iterate descendants, both calling `_initContainer` — a dual-path shape the shared helper's signature doesn't fit.
+
+### MutationObserver
+
+Registered inside `guardBody`, watching `document.body` with `childList`/`subtree`/`attributes` (filtered to `data-ln-link`).
+
+- **childList** — `findElements(node)` on every added element. Special-cased for `<tr>`: walks up via `closest('[data-ln-link]')` and calls `_initRow` directly, since a bare `<tr>` isn't itself a `[data-ln-link]` container and `findElements` would miss it — this is what makes `ln-table`'s appended rows wire automatically.
+- **attributes** — re-runs `findElements(mutation.target)` when `data-ln-link` is set/changed programmatically.
+
+### Click handler order
+
+`_handleClick`: interactive-child check (`closest('a, button, input, select, textarea')`) → resolve `row.querySelector('a')` → empty-href guard → modifier/middle-click branch (`window.open`, no event dispatched) → dispatch `ln-link:navigate` → cancel check → `link.click()`.
+
+### Status bar
+
+Created once in `_createStatusBar`, before the observer wires up. `mouseenter` sets `textContent` and adds `.ln-link-status--visible`; `mouseleave` removes the class only (text is left stale, overwritten on the next show). Empty-href rows never trigger it.
+
+### Cleanup asymmetry
+
+`init(root)` traverses descendants; `destroy(container)` operates on the exact element passed only — call it once per container. Always `destroy(container)` **before** replacing `innerHTML`: swapping first detaches the wired `<tr>` elements, so `destroy`'s row loop would walk the *new*, unwired rows and leak the old listeners.
+
+### Registration pattern
+
+Assigns `window.lnLink = { init, destroy }` directly rather than the shared `registerComponent` helper used by newer components — equivalent behavior (double-load guard, observer, DOMContentLoaded wiring), implemented manually.

package/js/ln-link/ln-link.js

@@ -1 +1 @@
-(function(){"use strict";function v(r,t,l){const u=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:l||{}});return r.dispatchEvent(u),u}function d(r,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){d(r,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}r()}const a={};function _(r,t){a[r]=t}function E(r){return a[r]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=_,window.lnCore.getDataMapper=E),(function(){const r="data-ln-link",t="lnLink";if(window[t]!==void 0)return;let l=null;function u(){l=document.createElement("div"),l.className="ln-link-status",document.body.appendChild(l)}function m(e){l&&(l.textContent=e,l.classList.add("ln-link-status--visible"))}function p(){l&&l.classList.remove("ln-link-status--visible")}function g(e,n){if(n.target.closest("a, button, input, select, textarea"))return;const i=e.querySelector("a");if(!i)return;const o=i.getAttribute("href");if(!o)return;if(n.ctrlKey||n.metaKey||n.button===1){window.open(o,"_blank");return}v(e,"ln-link:navigate",{target:e,href:o,link:i}).defaultPrevented||i.click()}function C(e){const n=e.querySelector("a");if(!n)return;const i=n.getAttribute("href");i&&m(i)}function f(){p()}function s(e){e[t+"Row"]||(e[t+"Row"]=!0,e.querySelector("a")&&(e._lnLinkClick=function(n){g(e,n)},e._lnLinkEnter=function(){C(e)},e.addEventListener("click",e._lnLinkClick),e.addEventListener("mouseenter",e._lnLinkEnter),e.addEventListener("mouseleave",f)))}function b(e){e[t+"Row"]&&(e._lnLinkClick&&e.removeEventListener("click",e._lnLinkClick),e._lnLinkEnter&&e.removeEventListener("mouseenter",e._lnLinkEnter),e.removeEventListener("mouseleave",f),delete e._lnLinkClick,delete e._lnLinkEnter,delete e[t+"Row"])}function h(e){if(!e[t+"Init"])return;const n=e.tagName;if(n==="TABLE"||n==="TBODY"){const i=n==="TABLE"&&e.querySelector("tbody")||e;for(const o of i.querySelectorAll("tr"))b(o)}else b(e);delete e[t+"Init"]}function L(e){if(e[t+"Init"])return;e[t+"Init"]=!0;const n=e.tagName;if(n==="TABLE"||n==="TBODY"){const i=n==="TABLE"&&e.querySelector("tbody")||e;for(const o of i.querySelectorAll("tr"))s(o)}else s(e)}function c(e){e.hasAttribute&&e.hasAttribute(r)&&L(e);const n=e.querySelectorAll?e.querySelectorAll("["+r+"]"):[];for(const i of n)L(i)}function S(){d(function(){new MutationObserver(function(n){for(const i of n)if(i.type==="childList")for(const o of i.addedNodes)o.nodeType===1&&(c(o),o.tagName==="TR"&&o.closest("["+r+"]")&&s(o));else i.type==="attributes"&&c(i.target)}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[r]})},"ln-link")}function k(e){c(e)}window[t]={init:k,destroy:h};function y(){u(),S(),k(document.body)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",y):y()})()})();
+(function(){"use strict";if(typeof window<"u"){const t=console.warn;console.warn=function(...e){typeof e[0]=="string"&&(e[0].startsWith("[ln-")||e[0].startsWith("[lnCore"))&&!(document.documentElement.hasAttribute("data-ln-debug")||document.body&&document.body.hasAttribute("data-ln-debug"))||t.apply(console,e)}}const m={};function D(t,e){m[t]||(m[t]=document.querySelector('[data-ln-template="'+t+'"]'));const l=m[t];return l?l.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function O(t,e,l){const a=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:l||{}});return t.dispatchEvent(a),a}function L(t,e){if(!t||!e)return t;const l=t.querySelectorAll("[data-ln-field]");for(let i=0;i<l.length;i++){const r=l[i],o=r.getAttribute("data-ln-field");e[o]!=null&&(r.textContent=e[o])}const a=t.querySelectorAll("[data-ln-attr]");for(let i=0;i<a.length;i++){const r=a[i],o=r.getAttribute("data-ln-attr").split(",");for(let s=0;s<o.length;s++){const h=o[s].trim().split(":");if(h.length!==2)continue;const b=h[0].trim(),g=h[1].trim();e[g]!=null&&r.setAttribute(b,e[g])}}const d=t.querySelectorAll("[data-ln-show]");for(let i=0;i<d.length;i++){const r=d[i],o=r.getAttribute("data-ln-show");o in e&&r.classList.toggle("hidden",!e[o])}const c=t.querySelectorAll("[data-ln-class]");for(let i=0;i<c.length;i++){const r=c[i],o=r.getAttribute("data-ln-class").split(",");for(let s=0;s<o.length;s++){const h=o[s].trim().split(":");if(h.length!==2)continue;const b=h[0].trim(),g=h[1].trim();g in e&&r.classList.toggle(b,!!e[g])}}return t}function B(t,e){t.matches&&t.matches("[data-ln-form], [data-ln-fillable]")&&t.dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));const l=t.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let a=0;a<l.length;a++)l[a].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)L(t.target,t.detail);else{const e=t.target.querySelectorAll("[data-ln-field]");for(let l=0;l<e.length;l++)e[l].textContent=""}})));function k(t,e){if(!t||!e)return t;const l=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;l.nextNode();){const c=l.currentNode;c.textContent.indexOf("{{")!==-1&&(c.textContent=c.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(i,r){return e[r]!==void 0?e[r]:""}))}const a=function(c,i){return e[i]!==void 0?e[i]:""},d=Array.from(t.querySelectorAll("*"));t.nodeType===1&&d.push(t);for(let c=0;c<d.length;c++){const i=d[c],r=i.attributes;for(let o=0;o<r.length;o++){const s=r[o];s.value.indexOf("{{")!==-1&&i.setAttribute(s.name,s.value.replace(/\{\{\s*(\w+)\s*\}\}/g,a))}}return t}function M(t,e,l,a,d,c){const i={};for(let o=0;o<t.children.length;o++){const s=t.children[o],h=s.getAttribute("data-ln-key");h&&(i[h]=s)}const r=document.createDocumentFragment();for(let o=0;o<e.length;o++){const s=e[o],h=String(a(s));let b=i[h];if(b)d(b,s,o);else{const g=D(l,c);if(!g||(k(g,s),b=g.firstElementChild,!b))continue;b.setAttribute("data-ln-key",h),d(b,s,o)}r.appendChild(b)}t.textContent="",t.appendChild(r)}function A(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){A(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}const v={};function R(t,e){v[t]=e}function N(t){return v[t]||{ingress:e=>e,egress:e=>e}}const _={};function E(t,e){if(!t||typeof e!="object")return;const l=t.toLowerCase().split("-")[0];_[l]=e}function F(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return _[e]||null}E("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=R,window.lnCore.getDataMapper=N,window.lnCore.registerLocaleFallback=E,window.lnCore.getLocaleFallback=F,window.lnCore.fillTemplate=k,window.lnCore.fill=L,window.lnCore.lnFill=B,window.lnCore.renderList=M);function S(t){return(t||"").replace(/^#/,"")}function y(t){const e=t===void 0?location.hash:t,l={},a=S(e);if(!a)return l;const d=a.split("&");for(let c=0;c<d.length;c++){const i=d[c];if(!i)continue;const r=i.indexOf(":"),o=r>-1?i.slice(0,r):i,s=r>-1?i.slice(r+1):"";if(o)try{l[o]=decodeURIComponent(s)}catch{l[o]=s}}return l}function I(t){if(!t)return null;const e=y();return t in e?e[t]:null}function W(t,e){if(!t)return;const l=y();e==null?delete l[t]:l[t]=String(e);const d=Object.keys(l).map(function(c){const i=l[c];return i===""?c:c+":"+encodeURIComponent(i)}).join("&");S(location.hash)!==d&&(location.hash=d)}function j(t){return t.button===1||t.ctrlKey||t.metaKey||t.shiftKey?!1:(t.preventDefault(),!0)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=y,window.lnCore.hashGet=I,window.lnCore.hashSet=W,window.lnCore.hashLinkClick=j),(function(){const t="data-ln-link",e="lnLink";if(window[e]!==void 0)return;let l=null;function a(){l=document.createElement("div"),l.className="ln-link-status",document.body.appendChild(l)}function d(n){l&&(l.textContent=n,l.classList.add("ln-link-status--visible"))}function c(){l&&l.classList.remove("ln-link-status--visible")}function i(n,f){if(f.target.closest("a, button, input, select, textarea"))return;const u=n.querySelector("a");if(!u)return;const p=u.getAttribute("href");if(!p)return;if(f.ctrlKey||f.metaKey||f.button===1){window.open(p,"_blank");return}O(n,"ln-link:navigate",{target:n,href:p,link:u}).defaultPrevented||u.click()}function r(n){const f=n.querySelector("a");if(!f)return;const u=f.getAttribute("href");u&&d(u)}function o(){c()}function s(n){n[e+"Row"]||!n.querySelector("a")||(n[e+"Row"]=!0,n._lnLinkClick=function(u){i(n,u)},n._lnLinkEnter=function(){r(n)},n.addEventListener("click",n._lnLinkClick),n.addEventListener("mouseenter",n._lnLinkEnter),n.addEventListener("mouseleave",o))}function h(n){n[e+"Row"]&&(n._lnLinkClick&&n.removeEventListener("click",n._lnLinkClick),n._lnLinkEnter&&n.removeEventListener("mouseenter",n._lnLinkEnter),n.removeEventListener("mouseleave",o),delete n._lnLinkClick,delete n._lnLinkEnter,delete n[e+"Row"])}function b(n){if(!n[e+"Init"])return;const f=n.tagName;if(f==="TABLE"||f==="TBODY"){const u=f==="TABLE"&&n.querySelector("tbody")||n;for(const p of u.querySelectorAll("tr"))h(p)}else h(n);delete n[e+"Init"]}function g(n){if(n[e+"Init"])return;n[e+"Init"]=!0;const f=n.tagName;if(f==="TABLE"||f==="TBODY"){const u=f==="TABLE"&&n.querySelector("tbody")||n;for(const p of u.querySelectorAll("tr"))s(p)}else s(n)}function w(n){n.hasAttribute&&n.hasAttribute(t)&&g(n);const f=n.querySelectorAll?n.querySelectorAll("["+t+"]"):[];for(const u of f)g(u)}function K(){A(function(){new MutationObserver(function(f){for(const u of f)if(u.type==="childList"){for(const p of u.addedNodes)if(p.nodeType===1){w(p);const C=p.closest("["+t+"]");if(C)if(p.tagName==="TR")s(p);else{const x=C.tagName;if(x==="TABLE"||x==="TBODY"){const U=p.querySelectorAll?p.querySelectorAll("tr"):[];for(const Y of U)s(Y)}}}}else u.type==="attributes"&&(u.target.hasAttribute&&u.target.hasAttribute(t)?w(u.target):b(u.target))}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[t]})},"ln-link")}function T(n){w(n)}window[e]={init:T,destroy:b};function q(){a(),K(),T(document.body)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",q):q()})()})();

package/js/ln-link/src/ln-link.js

@@ -66,9 +66,11 @@ import { dispatchCancelable, guardBody } from '../../ln-core';
 
 	function _initRow(row) {
 		if (row[DOM_ATTRIBUTE + 'Row']) return;
-		row[DOM_ATTRIBUTE + 'Row'] = true;
 
-		if (!row.querySelector('a')) return;
+		const link = row.querySelector('a');
+		if (!link) return;
+
+		row[DOM_ATTRIBUTE + 'Row'] = true;
 
 		row._lnLinkClick = function (e) {
 			_handleClick(row, e);
@@ -151,14 +153,28 @@ import { dispatchCancelable, guardBody } from '../../ln-core';
 							if (node.nodeType === 1) {
 								findElements(node);
 
-								if (node.tagName === 'TR') {
-									const parent = node.closest('[' + DOM_SELECTOR + ']');
-									if (parent) _initRow(node);
+								const parent = node.closest('[' + DOM_SELECTOR + ']');
+								if (parent) {
+									if (node.tagName === 'TR') {
+										_initRow(node);
+									} else {
+										const tag = parent.tagName;
+										if (tag === 'TABLE' || tag === 'TBODY') {
+											const rows = node.querySelectorAll ? node.querySelectorAll('tr') : [];
+											for (const r of rows) {
+												_initRow(r);
+											}
+										}
+									}
 								}
 							}
 						}
 					} else if (mutation.type === 'attributes') {
-						findElements(mutation.target);
+						if (mutation.target.hasAttribute && mutation.target.hasAttribute(DOM_SELECTOR)) {
+							findElements(mutation.target);
+						} else {
+							_destroyContainer(mutation.target);
+						}
 					}
 				}
 			});

package/js/ln-list/README.md

@@ -0,0 +1,129 @@
+# ln-list
+
+A unified, structure-agnostic, and local-first **Data Presenter Component** designed to render datasets in list, card, section, or grid layouts. It connects to `ln-data-store` via CustomEvents using the **Coordinator Pattern**, supporting client-side filtering, sorting, searching, and high-performance **Virtual Scrolling** for large datasets.
+
+---
+
+## 📦 Declarative Setup in HTML
+
+### 1. Simple SSR List
+For a server-rendered list where the backend outputs `<li>` elements directly:
+
+```html
+<form role="search" onsubmit="return false;">
+    <input type="search" data-ln-search="documents-list" placeholder="Search...">
+</form>
+
+<ul id="documents-list" data-ln-list="documents">
+    <li data-ln-item-id="1">Document A</li>
+    <li data-ln-item-id="2">Document B</li>
+</ul>
+```
+
+### 2. Data-Driven Grid List (with Virtual Scroll)
+Opted-in by adding the `data-ln-list-source` attribute. It clones and renders the specified `<template>`:
+
+```html
+<form role="search" onsubmit="return false;">
+    <input type="search" data-ln-search="documents-grid" placeholder="Search...">
+</form>
+
+<section id="documents-grid" 
+         data-ln-list="documents" 
+         data-ln-list-source="documents" 
+         data-ln-list-selectable>
+    
+    <!-- Items container -->
+    <ul class="grid-layout" data-ln-list-body></ul>
+
+    <!-- Row Template (Must contain an element with data-ln-item attribute) -->
+    <template data-ln-template="documents-row">
+        <li data-ln-item class="card-item">
+            <header>
+                <input type="checkbox" data-ln-item-select>
+                <h3 data-ln-field="title"></h3>
+            </header>
+            <p>{{ description }}</p>
+            <button type="button" data-ln-item-action="delete">Delete</button>
+        </li>
+    </template>
+
+    <!-- Empty States -->
+    <template data-ln-template="documents-empty">
+        <div class="empty-state">No documents found.</div>
+    </template>
+
+    <template data-ln-template="documents-empty-filtered">
+        <div class="empty-state">No matching documents found.</div>
+    </template>
+</section>
+```
+
+---
+
+## 🛠️ Attributes Reference
+
+| Attribute | Elements | Description |
+| :--- | :--- | :--- |
+| `data-ln-list` | Root wrapper | Component identifier. Target must carry a unique `id`. |
+| `data-ln-list-source` | Root wrapper | Opt-in indicator for Data-Driven Mode. |
+| `data-ln-list-selectable` | Root wrapper | Enables checkbox-based item selections. |
+| `data-ln-list-window="N"` | Root wrapper | Opt-in server-side sliding-window virtualization. `N` sets the resident-item cap (default 1000). Requires Data-Driven Mode. Observable: add/remove toggles windowed mode ON/OFF live; changing `N` while windowed reconfigures the live cache. `data-ln-list-window-page`, `data-ln-list-window-threshold`, and `data-ln-list-count` are likewise observable. |
+
+---
+
+## ⚡ DOM Events
+
+### Listened Events
+
+* `ln-list:set-data` `{ data, total, filtered }`: Hydrates/renders the items. Windowed mode expects `{ offset, queryGen }` echoed back — routed into the internal window cache.
+* `ln-list:set-loading` `{ loading: true|false }`: Toggles the loading dimming overlay class (`.ln-list--loading`).
+* `ln-list:page-failed` `{ offset }`: Windowed mode — the coordinator reports the page fetch at `offset` failed. Releases it from the cache's in-flight set; no auto-retry, the next `ensure()` requests it again.
+* `ln-list:request-revalidate`: Windowed mode — the coordinator asks the cache to revalidate the currently visible page after a local mutation. Stale rows stay visible, no jump to page 0.
+* `ln-search:change` `{ term }`: Captures search query from `data-ln-search` inputs.
+* `ln-sort:change` `{ field, column, direction }`: Sets `currentSort` and re-sorts (data-driven only). Ignored when `field` is `null` (index-only events have nothing to key a record by).
+
+### Emitted Events
+
+* `ln-list:request-data` `{ list, search, sort, filters }`: Requests data query from the Coordinator. Windowed mode (`data-ln-list-window`) adds `{ offset, limit, queryGen }`. Disabling windowed mode live issues a fresh full `ln-list:request-data` (no `offset`/`limit`) to repopulate the complete dataset.
+* `ln-list:ready` `{ total }`: Fired when initial markup parsing completes.
+* `ln-list:rendered` `{ list, total, visible }`: Fired after items have been drawn to DOM.
+* `ln-list:item-click` `{ list, id, record }`: Fired when clicking item body (excluding buttons, anchors, inputs).
+* `ln-list:item-action` `{ list, id, action, record }`: Fired when clicking `[data-ln-item-action]`.
+* `ln-list:select` `{ list, selectedIds, count }`: Fired when selection updates.
+* `ln-list:select-all` `{ list, selected: true|false }`: Fired when select-all triggers.
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-list/src/ln-list.js`.
+
+### Spacer element matches container semantics
+
+Virtual scroll (both plain and windowed) needs top/bottom spacer elements to preserve scroll height without rendering off-screen rows. If `[data-ln-list-body]` is a `<ul>`/`<ol>`, spacers are `<li class="ln-list__spacer">` to stay HTML5-valid; any other container gets `<div class="ln-list__spacer">`.
+
+### `_renderVirtual()` vs `_renderWindowed()`
+
+Both compute the visible `start`/`end` index range from the measured first-child height and the nearest scrollable ancestor's viewport, then mount spacers and clone the row template for the visible slice via `fillTemplate`/`fill`. They differ only in row source: `_renderVirtual()` reads `this._data[i]` (the full parsed/fetched dataset); `_renderWindowed()` reads `this._cache.get(i)` (the resident sliding window) and renders a blank placeholder spacer — no shimmer — for indices outside the cache, calling `this._cache.ensure(startRow, endRow)` every pass to debounce-fetch missing rows.
+
+### Windowed mode (`data-ln-list-window="N"`)
+
+Owns an `ln-core.createWindowCache` instance (`N` = resident cap, default 1000) instead of the full dataset. `ln-list:request-data` gains `{offset, limit, queryGen}`; `ln-list:set-data` echoes `{offset, queryGen}` back into `cache.ingest()`. Select-all is hidden under `data-ln-list-selectable` + windowed mode together — a windowed list can't select rows it hasn't fetched.
+
+Every windowing attribute is live-observable, no re-init required: `data-ln-list-window-page`/`-threshold`/`data-ln-list-count` reconfigure the cache via `configure()`/`setGrandTotal()`. Adding `data-ln-list-window` to an already-initialized, non-windowed, data-driven list seeds the cache from resident items and enables windowing live. Removing it destroys the cache and issues one full (no `offset`/`limit`) `ln-list:request-data` to repopulate before rendering non-windowed again.
+
+### `_parseChildren()`
+
+Parses static children inside `[data-ln-list-body]` into `this._data` at mount (excluding existing spacers), and measures the first child's height for `this._itemHeight`.
+
+### Sort (`ln-sort:change`)
+
+Data-driven only — the SSR branch has no sort logic. `field === null` events (index-only, from an
+`ln-sort` instance authored without `data-ln-sort-field`) are ignored; `ln-list` records are
+field-keyed, not positional, so there is nothing to sort by without a field name. On a matching
+event: `preventDefault()`, `currentSort = { field, direction }` (or `null` on `direction: 'none'`),
+then mirrors `ln-table`'s own data-driven sort handling exactly — windowed lists call
+`_requestData()` (cache invalidate + re-fetch, same scheme as `ln-table`'s windowed
+`_requestData()`); non-windowed lists re-sort the already-fetched in-memory data directly
+(`_applyFilterAndSort()` + `_render()`, no server round-trip).