@livenetworks/ashlar 1.3.2

package/js/ln-icons/README.md

@@ -0,0 +1,88 @@
+# ln-icons
+
+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-home"></use>
+</svg>
+```
+
+### Custom Asset Icon
+Define your custom CDN endpoint before importing the library:
+```html
+<script>
+  window.LN_ICONS_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="#lnc-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_ICONS_CDN` | `https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline` | Base CDN URL for Tabler Icons. |
+| `LN_ICONS_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-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_ICONS_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.

package/js/ln-icons/ln-icons.js

@@ -0,0 +1 @@
+(function(){"use strict";(function(){const h="ln-icons-sprite",a="#ln-",o="#lnc-",d=new Set,l=new Set;let c=null;const C=(window.LN_ICONS_CDN||"https://cdn.jsdelivr.net/npm/@tabler/icons@3.31.0/icons/outline").replace(/\/$/,""),g=(window.LN_ICONS_CUSTOM_CDN||"").replace(/\/$/,""),u="lni:",m="lni:v",S="1";function v(){try{if(localStorage.getItem(m)!==S){for(let t=localStorage.length-1;t>=0;t--){const n=localStorage.key(t);n&&n.indexOf(u)===0&&localStorage.removeItem(n)}localStorage.setItem(m,S)}}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(o)===0?g+"/"+t.slice(o.length)+".svg":C+"/"+t.slice(a.length)+".svg"}function w(t,n){const e=n.match(/viewBox="([^"]+)"/),i=e?e[1]:"0 0 24 24",s=n.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i),I=s?s[1].trim():"",y=n.match(/<svg([^>]*)>/i),O=y?y[1]:"",r=document.createElementNS("http://www.w3.org/2000/svg","symbol");r.id=t,r.setAttribute("viewBox",i),["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)||t.indexOf(o)===0&&!g)return;const n=t.slice(1);try{const e=localStorage.getItem(u+n);if(e){w(n,e),d.add(t);return}}catch{}l.add(t),fetch(A(t)).then(function(e){if(!e.ok)throw new Error(e.status);return e.text()}).then(function(e){w(n,e),d.add(t),l.delete(t);try{localStorage.setItem(u+n,e)}catch{}}).catch(function(){l.delete(t)})}function E(t){const n='use[href^="'+a+'"], use[href^="'+o+'"]',e=t.querySelectorAll?t.querySelectorAll(n):[];if(t.matches&&t.matches(n)){const i=t.getAttribute("href");i&&f(i)}Array.prototype.forEach.call(e,function(i){const s=i.getAttribute("href");s&&f(s)})}function p(){E(document),new MutationObserver(function(t){t.forEach(function(n){if(n.type==="childList")n.addedNodes.forEach(function(e){e.nodeType===1&&E(e)});else if(n.type==="attributes"&&n.attributeName==="href"){const e=n.target.getAttribute("href");e&&(e.indexOf(a)===0||e.indexOf(o)===0)&&f(e)}})}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["href"]})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",p):p()})()})();

package/js/ln-icons/src/ln-icons.js

@@ -0,0 +1,169 @@
+// SVG icon loader — fetches icons on demand, builds a hidden sprite.
+// Fetched SVGs are cached in localStorage (prefix "lni:") so subsequent
+// 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)
+//
+// 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)
+//
+// 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>
+
+(function () {
+	const SPRITE_ID  = 'ln-icons-sprite';
+	const PREFIX_LN  = '#ln-';
+	const PREFIX_LNC = '#lnc-';
+
+	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(/\/$/, '');
+
+	const CACHE_PREFIX  = 'lni:';
+	const CACHE_VER_KEY = 'lni:v';
+	const CACHE_VERSION = '1';
+
+	function _checkCacheVersion() {
+		try {
+			if (localStorage.getItem(CACHE_VER_KEY) !== CACHE_VERSION) {
+				for (let i = localStorage.length - 1; i >= 0; i--) {
+					const key = localStorage.key(i);
+					if (key && key.indexOf(CACHE_PREFIX) === 0) localStorage.removeItem(key);
+				}
+				localStorage.setItem(CACHE_VER_KEY, CACHE_VERSION);
+			}
+		} catch (e) { /* localStorage unavailable or full — proceed without cache */ }
+	}
+
+	_checkCacheVersion();
+
+	function _getSprite() {
+		if (!spriteEl) {
+			spriteEl = document.getElementById(SPRITE_ID);
+			if (!spriteEl) {
+				spriteEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+				spriteEl.id = SPRITE_ID;
+				spriteEl.setAttribute('hidden', '');
+				spriteEl.setAttribute('aria-hidden', 'true');
+				spriteEl.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'defs'));
+				document.body.insertBefore(spriteEl, document.body.firstChild);
+			}
+		}
+		return spriteEl;
+	}
+
+	function _url(href) {
+		if (href.indexOf(PREFIX_LNC) === 0) return CUSTOM_CDN + '/' + href.slice(PREFIX_LNC.length) + '.svg';
+		return BASE_CDN + '/' + href.slice(PREFIX_LN.length) + '.svg';
+	}
+
+	function _addSymbol(id, raw) {
+		const viewBoxMatch = raw.match(/viewBox="([^"]+)"/);
+		const viewBox      = viewBoxMatch ? viewBoxMatch[1] : '0 0 24 24';
+		const innerMatch   = raw.match(/<svg[^>]*>([\s\S]*?)<\/svg>/i);
+		const inner        = innerMatch ? innerMatch[1].trim() : '';
+		const attrsMatch   = raw.match(/<svg([^>]*)>/i);
+		const rawAttrs     = attrsMatch ? attrsMatch[1] : '';
+
+		const sym = document.createElementNS('http://www.w3.org/2000/svg', 'symbol');
+		sym.id = id;
+		sym.setAttribute('viewBox', viewBox);
+
+		['fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'].forEach(function (attr) {
+			const m = rawAttrs.match(new RegExp(attr + '="([^"]*)"'));
+			if (m) sym.setAttribute(attr, m[1]);
+		});
+
+		// Trust boundary: SVG content fetched from pinned CDN version (see BASE_CDN) or localStorage cache
+		sym.innerHTML = inner;
+		_getSprite().querySelector('defs').appendChild(sym);
+	}
+
+	function _load(href) {
+		if (loaded.has(href) || pending.has(href)) return;
+		if (href.indexOf(PREFIX_LNC) === 0 && !CUSTOM_CDN) return;
+
+		const id = href.slice(1);
+
+		// Check localStorage first
+		try {
+			const cached = localStorage.getItem(CACHE_PREFIX + id);
+			if (cached) {
+				_addSymbol(id, cached);
+				loaded.add(href);
+				return;
+			}
+		} catch (e) { /* proceed to fetch */ }
+
+		pending.add(href);
+
+		fetch(_url(href))
+			.then(function (r) {
+				if (!r.ok) throw new Error(r.status);
+				return r.text();
+			})
+			.then(function (raw) {
+				_addSymbol(id, raw);
+				loaded.add(href);
+				pending.delete(href);
+				try { localStorage.setItem(CACHE_PREFIX + id, raw); } catch (e) { /* storage full */ }
+			})
+			.catch(function () {
+				pending.delete(href);
+			});
+	}
+
+	function _scan(root) {
+		const sel  = 'use[href^="' + PREFIX_LN + '"], use[href^="' + PREFIX_LNC + '"]';
+		const uses = root.querySelectorAll ? root.querySelectorAll(sel) : [];
+		if (root.matches && root.matches(sel)) {
+			const h = root.getAttribute('href');
+			if (h) _load(h);
+		}
+		Array.prototype.forEach.call(uses, function (use) {
+			const h = use.getAttribute('href');
+			if (h) _load(h);
+		});
+	}
+
+	function _init() {
+		_scan(document);
+		new MutationObserver(function (mutations) {
+			mutations.forEach(function (m) {
+				if (m.type === 'childList') {
+					m.addedNodes.forEach(function (node) {
+						if (node.nodeType === 1) _scan(node);
+					});
+				} else if (m.type === 'attributes' && m.attributeName === 'href') {
+					// A <use href="..."> was swapped at runtime (e.g. ln-confirm
+					// replacing an icon). Trigger a load for the new target.
+					const h = m.target.getAttribute('href');
+					if (h && (h.indexOf(PREFIX_LN) === 0 || h.indexOf(PREFIX_LNC) === 0)) {
+						_load(h);
+					}
+				}
+			});
+		}).observe(document.body, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ['href']
+		});
+	}
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', _init);
+	} else {
+		_init();
+	}
+})();

package/js/ln-link/README.md

@@ -0,0 +1,303 @@
+# ln-link
+
+> Turns a container into a click-navigable surface by triggering
+> `.click()` on the first inner `<a>`. Hover surfaces the URL in a
+> bottom-left status bar that mirrors the browser's native preview.
+
+## Philosophy
+
+### The first `<a>` rule
+
+The contract is `row.querySelector('a')` — the first `<a>` in document
+order. A table row whose primary action is "View" puts the View link
+in cell 1. The component does not consult a `data-primary` attribute
+or any other hint; position IS the contract.
+
+### Augmentation, not replacement
+
+The component does not intercept the platform's link click. When the
+row chrome is clicked, the component resolves the first `<a>` and
+calls `link.click()` — the platform handles everything from there:
+`target="_blank"`, `download`, `[data-ln-ajax]` body delegation,
+browser extensions. Composing with other components costs nothing.
+
+### Interactive children stay interactive
+
+Buttons, inputs, selects, textareas, and nested anchors inside a
+row are skipped — clicks originating from those elements never
+trigger row navigation. A row can carry a Delete button, a
+dropdown, and a checkbox alongside the record link without
+collision.
+
+### Three modes, one component
+
+The container's `tagName` decides how rows are found:
+
+- **`<table>`** — the component finds the `<tbody>` (or falls back
+  to the table itself if no `<tbody>` exists), iterates each `<tr>`,
+  wires each row.
+- **`<tbody>`** — same row iteration; you placed the attribute one
+  level lower.
+- **Anything else** (`<li>`, `<article>`, `<tr>`, `<div>`) — the
+  element itself is the single clickable row.
+
+## HTML contract
+
+### Table — all tbody rows become clickable
+
+```html
+<table data-ln-link>
+	<thead>
+		<tr>
+			<th>Name</th>
+			<th>Email</th>
+			<th>Status</th>
+			<th>Actions</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><a href="/users/1">Marko Petrovski</a></td>
+			<td>marko@example.com</td>
+			<td><span class="badge success">Active</span></td>
+			<td>
+				<!-- This button is skipped — clicking it does NOT navigate -->
+				<button>Delete</button>
+			</td>
+		</tr>
+		<tr>
+			<td><a href="/users/2">Ana Stojanova</a></td>
+			<td>ana@example.com</td>
+			<td><span class="badge error">Inactive</span></td>
+			<td>
+				<button>Delete</button>
+			</td>
+		</tr>
+	</tbody>
+</table>
+```
+
+Apply `link-row` mixin to the rows for `cursor: pointer` and
+`user-select: none`:
+
+```scss
+// project SCSS
+#users-table tr { @include link-row; }
+```
+
+### List of cards
+
+```html
+<ul data-ln-link>
+	<li>
+		<a href="/projects/1"><h3>Project Alpha</h3></a>
+		<p>Launched 2025. Click anywhere on this card to open.</p>
+	</li>
+	<li>
+		<a href="/projects/2"><h3>Project Beta</h3></a>
+		<p>In progress. Buttons inside cards are still independently clickable.</p>
+		<button>Archive</button>
+	</li>
+</ul>
+```
+
+In `<ul>` mode, each `<li>` is a row. The component iterates them
+exactly as it iterates `<tr>` elements in table mode.
+
+### Generic article
+
+```html
+<article data-ln-link>
+	<h4><a href="/posts/42">Dashboard overview</a></h4>
+	<p>The entire article is clickable — not just the link text.</p>
+</article>
+```
+
+In generic mode the `<article>` itself is the row. No children are
+iterated; a single set of listeners attaches to the element.
+
+### Direct `<tr>` — one row only
+
+```html
+<table>
+	<tbody>
+		<tr data-ln-link>
+			<!-- Only this row is navigable; the others are plain rows -->
+			<td><a href="/users/99">Special row</a></td>
+		</tr>
+		<tr>
+			<td>Plain row — not navigable</td>
+		</tr>
+	</tbody>
+</table>
+```
+
+Placing `data-ln-link` on a `<tr>` directly puts it in generic mode
+(the `TR` branch in `_initContainer`) so the row itself becomes the
+single clickable element. Useful when only a subset of rows should be
+navigable.
+
+## Attributes
+
+| Attribute | On | Description |
+|---|---|---|
+| `data-ln-link` | `<table>`, `<tbody>`, `<tr>`, or any element | Activates clickable-row behavior. On `<table>` or `<tbody>`, every `<tr>` in the `<tbody>` becomes individually navigable. On any other element, the element itself is the row. |
+
+## Events
+
+| Event | Bubbles | Cancelable | `detail` | Dispatched on |
+|---|---|---|---|---|
+| `ln-link:navigate` | yes | yes | `{ target, href, link }` | The row element |
+
+The event is dispatched BEFORE `link.click()` is called.
+`detail.target` is the row element, `detail.href` is the resolved
+href string, `detail.link` is the `<a>` element. Calling
+`e.preventDefault()` stops navigation entirely.
+
+The event does NOT fire on the modifier-key path (Ctrl+click,
+Cmd+click, middle-click). That path calls `window.open(href, '_blank')`
+directly and bypasses the event dispatch.
+
+```js
+// Log navigation
+document.querySelector('table[data-ln-link]').addEventListener('ln-link:navigate', function (e) {
+	analytics.track('row_click', { href: e.detail.href });
+	// Don't call e.preventDefault() — navigation continues normally.
+});
+
+// Conditional cancel — e.g. prevent navigation while a form is dirty
+document.addEventListener('ln-link:navigate', function (e) {
+	if (formIsDirty) {
+		e.preventDefault();
+		showUnsavedWarning(e.detail.href);
+	}
+});
+```
+
+## JS API
+
+```js
+// Re-scan a root for [data-ln-link] containers and initialize them.
+// Called automatically on DOMContentLoaded and by the MutationObserver.
+// Call manually only for Shadow DOM roots the observer cannot see.
+window.lnLink.init(root);
+
+// Clean up listeners on a single container.
+// Operates on the PASSED container only — does NOT traverse descendants.
+// To destroy multiple containers, call destroy on each separately.
+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.
+
+## What it does NOT do
+
+- **Does not intercept clicks on the `<a>` itself.** Direct anchor
+  clicks follow the platform default. The row click is an additional
+  surface, not a replacement.
+- **Does not fire `ln-link:navigate` on the modifier-key path.**
+  Ctrl/Cmd+click and middle-click call `window.open` directly; the
+  event is not dispatched and cannot be cancelled.
+- **Does not re-check anchor-less rows on subsequent `init()`
+  calls.** A row without an `<a>` at init time still receives the
+  per-row guard flag, so re-init is a no-op. To wire a row after
+  adding its anchor dynamically, call `destroy(container)` then
+  `init(container)`.
+- **Does not wire keyboard navigation.** The row element is not
+  made focusable. Keyboard users tab to the inner `<a>` and
+  activate it normally.
+- **Does not own appearance.** `cursor: pointer` and
+  `user-select: none` come from `@mixin link-row`
+  (`scss/config/mixins/_link.scss`); the status bar styling comes
+  from `@mixin link-status`. JS owns behavior; SCSS owns
+  appearance.
+
+## Cross-component composition
+
+### With ln-ajax
+
+`ln-link` and `ln-ajax` compose without any wiring. `ln-link`
+triggers `link.click()` on the inner `<a>`; `ln-ajax` listens for
+`click` events at the body via event delegation and intercepts
+qualifying anchor clicks. The `link.click()` call produces a real
+`click` event on a real `<a>`, so `ln-ajax` sees it exactly as if the
+user had clicked the link directly.
+
+```html
+<!-- ln-ajax wraps the table; ln-link is on the table itself -->
+<section data-ln-ajax>
+	<table data-ln-link>
+		<thead>
+			<tr><th>Name</th><th>Email</th></tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td><a href="/users/1" data-ln-ajax-target="main">Marko</a></td>
+				<td>marko@example.com</td>
+			</tr>
+		</tbody>
+	</table>
+</section>
+```
+
+No special configuration. The `data-ln-ajax-target` attribute on the
+`<a>` is respected because `ln-ajax` is processing the click on the
+real anchor, not on the row.
+
+### With ln-confirm
+
+`ln-confirm` attaches to a `<button>` and intercepts that button's
+click; `ln-link` triggers `.click()` on an `<a>`. There is no shared
+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
+
+`ln-data-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`
+populates the body.
+
+```html
+<table data-ln-link data-ln-table>
+	<thead>...</thead>
+	<tbody>
+		<!-- ln-data-table inserts <tr> elements here dynamically;
+		     ln-link wires them automatically. -->
+	</tbody>
+</table>
+```
+
+## Integration & Development
+
+### Integration
+
+To integrate `ln-link` into your application, you can choose between loading the unified bundle or importing the component standalone.
+
+#### In-Bundle (Standard Integration)
+This is the recommended approach for standard integration, loading the component as part of the main `ln-ashlar` bundle:
+```html
+<script src="dist/ln-ashlar.iife.js" defer></script>
+```
+
+#### Standalone (Zero-Dependency IIFE)
+If you only need this component and want to avoid loading the full bundle, you can load it standalone using its zero-dependency compiled IIFE:
+```html
+<script src="js/ln-link/ln-link.js" defer></script>
+```
+
+### Source Files
+
+- **Active Development (Source of Truth)**: [js/ln-link/src/ln-link.js](file:///c:/laragon/www/ln-ashlar/js/ln-link/src/ln-link.js)
+- **Compiled Standalone Distribution**: [js/ln-link/ln-link.js](file:///c:/laragon/www/ln-ashlar/js/ln-link/ln-link.js)
+
+## 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
+- [`../../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

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

@@ -0,0 +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()})()})();