@livenetworks/ashlar 1.3.2

package/js/index.js

@@ -0,0 +1,41 @@
+// SCSS Framework — master entry (tokens, base, components, layouts, utilities + JS component styles)
+import '../scss/ln-ashlar.scss';
+
+// JS Components
+import './ln-http/src/ln-http.js';
+import './ln-ajax/src/ln-ajax.js';
+import './ln-modal/src/ln-modal.js';
+import './ln-number/src/ln-number.js';
+import './ln-date/src/ln-date.js';
+import './ln-nav/src/ln-nav.js';
+import './ln-tabs/src/ln-tabs.js';
+import './ln-toggle/src/ln-toggle.js';
+import './ln-accordion/src/ln-accordion.js';
+import './ln-dropdown/src/ln-dropdown.js';
+import './ln-popover/src/ln-popover.js';
+import './ln-tooltip/src/ln-tooltip.js';
+import './ln-toast/src/ln-toast.js';
+import './ln-upload/src/ln-upload.js';
+import './ln-external-links/src/ln-external-links.js';
+import './ln-link/src/ln-link.js';
+import './ln-progress/src/ln-progress.js';
+import './ln-filter/src/ln-filter.js';
+import './ln-search/src/ln-search.js';
+import './ln-table/src/ln-table-sort.js';
+import './ln-table/src/ln-table.js';
+import './ln-circular-progress/src/ln-circular-progress.js';
+import './ln-sortable/src/ln-sortable.js';
+import './ln-confirm/src/ln-confirm.js';
+import './ln-translations/src/ln-translations.js';
+import './ln-autosave/src/ln-autosave.js';
+import './ln-autoresize/src/ln-autoresize.js';
+import './ln-validate/src/ln-validate.js';
+import './ln-form/src/ln-form.js';
+import './ln-time/src/ln-time.js';
+import './ln-data-store/src/ln-data-store.js';
+import './ln-api-connector/src/ln-api-connector.js';
+import './ln-couchdb-connector/src/ln-couchdb-connector.js';
+import './ln-data-coordinator/src/ln-data-coordinator.js';
+import './ln-data-table/src/ln-data-table.js';
+import './ln-icons/src/ln-icons.js';
+

package/js/ln-accordion/README.md

@@ -0,0 +1,137 @@
+# ln-accordion
+
+> A lightweight, stateless **Coordinator** that enforces a single-open rule across a list of independent `ln-toggle` panels.
+
+---
+
+## 1. Philosophy & The Coordinator Mindset
+
+In traditional frontend architectures, an accordion is a heavy, monolithic component that owns click events, height transitions, ARIA states, active-panel state, and storage persistence. 
+
+In `ln-ashlar`, `ln-accordion` is fundamentally different: **it is a pure coordinator**. It contains only 38 lines of JavaScript, carries zero internal state, and coordinates other highly-specialized primitives.
+
+Every accordion is a perfect synchronization of three orthogonal concerns:
+
+1. **State Primitive (`ln-toggle`)**: Each panel is an independent `ln-toggle` instance. It owns the binary `open`/`close` state, coordinates trigger buttons, synchronizes `aria-expanded`/`aria-controls`, and handles per-panel localStorage persistence (`data-ln-persist`). It is completely oblivious to the other panels or the fact that it is inside an accordion.
+2. **Animation Engine (CSS `.collapsible`)**: The height transition is handled entirely in Vanilla CSS via the `.collapsible` mixin (transitioning `grid-template-rows` from `0fr` to `1fr`). No JS framerate stuttering or inline height hacks.
+3. **The Coordinator (`ln-accordion`)**: Lives on the wrapper element. It enforces a single rule: *"When one panel opens, all other open panels in this group must close."*
+
+---
+
+## 2. Minimal Blueprint
+
+This is the standard HTML structure. The pairing of triggers and panels is by ID, keeping layout and proximity decoupled.
+
+```html
+<ul data-ln-accordion>
+    <li>
+        <!-- The Trigger -->
+        <header data-ln-toggle-for="panel1">
+            Section 1
+            <svg class="ln-icon ln-chevron" aria-hidden="true"><use href="#ln-arrow-down"></use></svg>
+        </header>
+        <!-- The Collapsible Panel -->
+        <section id="panel1" data-ln-toggle="open" class="collapsible">
+            <article class="collapsible-body">
+                <p>Content 1 (Starts open).</p>
+            </article>
+        </section>
+    </li>
+    <li>
+        <header data-ln-toggle-for="panel2">
+            Section 2
+            <svg class="ln-icon ln-chevron" aria-hidden="true"><use href="#ln-arrow-down"></use></svg>
+        </header>
+        <section id="panel2" data-ln-toggle class="collapsible">
+            <article class="collapsible-body">
+                <p>Content 2 (Starts closed).</p>
+            </article>
+        </section>
+    </li>
+</ul>
+```
+
+### Key Anatomy Rules
+- **The Wrapper (`data-ln-accordion`)**: Markers for the coordinator. Listens for bubbled events and coordinates siblings.
+- **The Trigger (`data-ln-toggle-for`)**: Click target that toggles the target panel ID. The chevron rotates automatically driven by `aria-expanded`.
+- **The Panel (`data-ln-toggle`)**: Creates the `ln-toggle` state instance. Value `open` or empty.
+- **The Body (`.collapsible-body`)**: Wraps actual content. Padding and margins must live here, not on the parent `.collapsible` (which needs zero padding to collapse to exactly `0px` height).
+
+---
+
+## 3. The Decoupled State & API Contract
+
+The coordinator has **zero public state** in JavaScript. The DOM is the source of truth, and **the HTML attribute is the sole contract**.
+
+### Attributes
+- `data-ln-accordion` on the wrapper creates the coordinator instance. It takes no values.
+
+### Events
+- **`ln-accordion:change`**: Dispatched on the wrapper after a panel opens and siblings close.
+  - `event.detail.target`: The HTML element of the panel that just opened.
+  ```js
+  document.addEventListener('ln-accordion:change', (e) => {
+      console.log('Active panel ID:', e.detail.target.id);
+  });
+  ```
+
+### Programmatic Control
+There are no `open()` or `close()` methods on the coordinator instance. To programmatically change panels, write directly to the target panel's attribute:
+
+```js
+// The coordinator catches the bubbled event and closes all siblings automatically.
+document.getElementById('panel2').setAttribute('data-ln-toggle', 'open');
+```
+
+---
+
+## 4. Integration Patterns
+
+### A. All-Closed by Default
+Simply omit the `="open"` value from all panels in the markup.
+```html
+<section id="panel1" data-ln-toggle class="collapsible">...</section>
+```
+
+### B. Persistent Accordion State (Across Page Reloads)
+Add `data-ln-persist` to the panels. Each panel saves its state in `localStorage` individually. The coordinator stays completely oblivious. On page load, whichever panel restores as `open` bubbles an event, and the coordinator handles the rest.
+```html
+<section id="panel1" data-ln-toggle data-ln-persist class="collapsible">...</section>
+```
+
+### C. Zero-Configuration Multi-Open
+If your requirements change and you want a "multi-open accordion" (where panels toggle independently without closing others), **you do not need any JavaScript options or class re-configuration**. Simply *remove the `data-ln-accordion` attribute* from the wrapper. The individual panels continue to work perfectly.
+
+### D. Nested Accordions
+Supported natively out of the box. Scoping is determined by DOM ancestry (using `element.closest('[data-ln-accordion]')`). Opening an inner accordion panel bubbles upwards, but the outer coordinator ignores it, allowing infinite nesting depth without any configuration.
+
+---
+
+## 5. Common Implementation Pitfalls
+
+### 1. Padding on `.collapsible` directly
+The `.collapsible` container must have zero padding so it can transition to exactly `0px` height. Placing padding directly on `.collapsible` will cause a thin strip of content to remain visible even when closed. **Padding must live on the `.collapsible-body` child**.
+
+### 2. Double-Binding Attributes
+Never place `data-ln-toggle` and `data-ln-toggle-for` on the same element. One element is either a trigger or a panel, never both.
+
+---
+
+## 6. Integration & Source Files
+
+- **Unified Bundle**: Loaded automatically with the main bundle:
+  ```html
+  <script src="dist/ln-ashlar.iife.js" defer></script>
+  ```
+- **Standalone IIFE**: For lightweight pages, load the standalone, self-registering IIFE version:
+  ```html
+  <script src="js/ln-accordion/ln-accordion.js" defer></script>
+  ```
+- **Active Source (ESM)**: Development source is located at [js/ln-accordion/src/ln-accordion.js](file:///c:/laragon/www/ln-ashlar/js/ln-accordion/src/ln-accordion.js).
+
+---
+
+## Related
+- **[`ln-toggle`](../ln-toggle/README.md)** — Binary state primitive.
+- **Architecture deep-dive** — [`docs/js/accordion.md`](../../docs/js/accordion.md).
+- **Cross-component principles** — [`docs/architecture/data-flow.md`](../../docs/architecture/data-flow.md).

package/js/ln-accordion/ln-accordion.js

@@ -0,0 +1 @@
+(function(){"use strict";function y(e,t,n){e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n||{}}))}function w(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){w(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}function g(e,t,n,o){if(e.nodeType!==1)return;const s=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",i=Array.from(e.querySelectorAll(s));e.matches&&e.matches(s)&&i.push(e);for(const r of i)r[n]||(r[n]=new o(r))}function O(e,t,n,o,a={}){const s=a.extraAttributes||[],i=a.onAttributeChange||null,r=a.onInit||null;function l(p){const c=p||document.body;g(c,e,t,n),r&&r(c)}return w(function(){const p=new MutationObserver(function(f){for(let u=0;u<f.length;u++){const d=f[u];if(d.type==="childList")for(let h=0;h<d.addedNodes.length;h++){const b=d.addedNodes[h];b.nodeType===1&&(g(b,e,t,n),r&&r(b))}else d.type==="attributes"&&(i&&d.target[t]?i(d.target,d.attributeName):(g(d.target,e,t,n),r&&r(d.target)))}});let c=[];if(e.indexOf("[")!==-1){const f=/\[([\w-]+)/g;let u;for(;(u=f.exec(e))!==null;)c.push(u[1])}else c.push(e);p.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:c.concat(s)})},o),window[t]=l,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){l(document.body)}):l(document.body),l}const m={};function A(e,t){m[e]=t}function v(e){return m[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=A,window.lnCore.getDataMapper=v),(function(){const e="data-ln-accordion",t="lnAccordion";if(window[t]!==void 0)return;function n(o){return this.dom=o,this._onToggleOpen=function(a){if(a.detail.target.closest("[data-ln-accordion]")!==o)return;const s=o.querySelectorAll("[data-ln-toggle]");for(const i of s)i!==a.detail.target&&i.closest("[data-ln-accordion]")===o&&i.getAttribute("data-ln-toggle")==="open"&&i.setAttribute("data-ln-toggle","close");y(o,"ln-accordion:change",{target:a.detail.target})},o.addEventListener("ln-toggle:open",this._onToggleOpen),this}n.prototype.destroy=function(){this.dom[t]&&(this.dom.removeEventListener("ln-toggle:open",this._onToggleOpen),y(this.dom,"ln-accordion:destroyed",{target:this.dom}),delete this.dom[t])},O(e,t,n,"ln-accordion")})()})();

package/js/ln-accordion/src/ln-accordion.js

@@ -0,0 +1,41 @@
+import { dispatch, registerComponent } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-accordion';
+	const DOM_ATTRIBUTE = 'lnAccordion';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(dom) {
+		this.dom = dom;
+
+		this._onToggleOpen = function (e) {
+			if (e.detail.target.closest('[data-ln-accordion]') !== dom) return;
+			const toggles = dom.querySelectorAll('[data-ln-toggle]');
+			for (const el of toggles) {
+				if (el === e.detail.target) continue;
+				if (el.closest('[data-ln-accordion]') !== dom) continue;
+				if (el.getAttribute('data-ln-toggle') === 'open') {
+					el.setAttribute('data-ln-toggle', 'close');
+				}
+			}
+			dispatch(dom, 'ln-accordion:change', { target: e.detail.target });
+		};
+		dom.addEventListener('ln-toggle:open', this._onToggleOpen);
+
+		return this;
+	}
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this.dom.removeEventListener('ln-toggle:open', this._onToggleOpen);
+		dispatch(this.dom, 'ln-accordion:destroyed', { target: this.dom });
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-accordion');
+})();

package/js/ln-ajax/README.md

@@ -0,0 +1,91 @@
+# ln-ajax
+
+A zero-dependency, event-driven **HTML Fragment Swapping Primitive** that intercepts clicks on `<a>` elements and submits on `<form>` tags to enable instant, SPA-like navigation without full page reloads.
+
+It communicates via a structured server JSON protocol, exchanging targeted DOM updates, updating browser history states, and re-attaching lifecycle managers to newly injected nodes.
+
+---
+
+## 🧭 Philosophy & Architecture
+
+1. **HTML-First Swapping:** The server remains the single source of truth for both data and markup. Instead of client routers rendering JSON arrays, the server compiles standard HTML fragments and returns them inside a structured JSON payload.
+2. **Selective DOM Merges:** The response maps selector IDs (e.g. `main-content`) directly to their new HTML chunks, replacing only the specified regions in-place.
+3. **Transparent Enhancements:** Intercepts only native interactions (links to the same origin, form submissions). Safely falls back to native browser redirects on errors or external hosts.
+
+---
+
+## 📦 Minimal Blueprint
+
+Wrap interactive elements or entire layouts with the `data-ln-ajax` selector.
+
+```html
+<div data-ln-ajax>
+  <!-- Clicking this fetches /dashboard and swaps only the returned targets -->
+  <a href="/dashboard">Dashboard</a>
+  
+  <!-- Submitting this posts data and swaps target parts on success -->
+  <form method="POST" action="/users/create">
+    <input name="username" type="text" required>
+    <button type="submit">Create User</button>
+  </form>
+
+  <!-- Exclude specific elements from AJAX handling -->
+  <a href="/logout" data-ln-ajax="false">Logout</a>
+</div>
+```
+
+---
+
+## 🛠️ Declarative API Contract
+
+### HTML Attributes
+
+| Attribute | Elements | Description |
+| :--- | :--- | :--- |
+| `data-ln-ajax` | Container, `<a>`, `<form>` | Activates AJAX capture on the element and its descendants. |
+| `data-ln-ajax="false"` | `<a>`, `<form>` | Excludes the specific link or form from AJAX interception. |
+
+### Server Response Protocol
+
+The server must return JSON with the `application/json` Content-Type:
+
+```json
+{
+  "title": "New Dashboard Page",
+  "content": {
+    "main-content": "<h1>Dashboard</h1><p>Welcome back!</p>",
+    "sidebar-nav": "<ul><li>Active Nav Item</li></ul>"
+  },
+  "message": {
+    "type": "success",
+    "title": "User Created",
+    "body": "The user was registered successfully."
+  }
+}
+```
+
+* **`title`**: Updates `document.title` on page swap.
+* **`content`**: Key-value pairs matching container `id` selectors to their new `innerHTML` content.
+* **`message`**: Optional. If present, automatically dispatches `ln-toast:enqueue` on the `window` to trigger native notifications.
+
+---
+
+## ⚡ DOM Events
+
+All events are dispatched on the initiating element (`<a>` or `<form>`) and bubble.
+
+| Event | Cancelable | Description | Payload (`detail`) |
+| :--- | :--- | :--- | :--- |
+| `ln-ajax:before-start` | **Yes** | Fires before any network activity. Call `e.preventDefault()` to cancel. | `{ method, url }` |
+| `ln-ajax:start` | No | Fires as the loader class is added and fetch begins. | `{ method, url }` |
+| `ln-ajax:success` | No | Fires after successful DOM swaps. | `{ method, url, data }` |
+| `ln-ajax:error` | No | Fires on HTTP status failure or network rejects. | `{ method, url, status, data }` or `{ method, url, error }` |
+| `ln-ajax:complete` | No | Fires at the very end of the lifecycle (success or error). | `{ method, url }` |
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **Missing DOM IDs on Swap Targets:** If the server returns a key in `content` that does not match a mounting ID in the active document (e.g. `id="main-content"`), that segment swap fails silently.
+- **Forgetting CSRF Meta:** `ln-ajax` automatically reads `<meta name="csrf-token" content="...">` to inject the `X-CSRF-TOKEN` header on non-GET calls. If this meta tag is missing, POST/PUT requests may fail authentication.
+- **Breaking External Links:** Links with different hostnames are ignored automatically, but absolute paths on the same host are captured. Ensure assets/downloads use `data-ln-ajax="false"`.

package/js/ln-ajax/ln-ajax.js

@@ -0,0 +1 @@
+(function(){"use strict";function p(o,n,l){o.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:l||{}}))}function M(o,n,l){const b=new CustomEvent(n,{bubbles:!0,cancelable:!0,detail:l||{}});return o.dispatchEvent(b),b}function v(o,n){if(!document.body){document.addEventListener("DOMContentLoaded",function(){v(o,n)}),console.warn("["+n+'] Script loaded before <body> — add "defer" to your <script> tag');return}o()}const j={};function C(o,n){j[o]=n}function D(o){return j[o]||{ingress:n=>n,egress:n=>n}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=C,window.lnCore.getDataMapper=D),(function(){const o="data-ln-ajax",n="lnAjax";if(window[n]!==void 0)return;function l(e){if(!e.hasAttribute(o)||e[n])return;e[n]=!0;const t=y(e);b(t.links),E(t.forms)}function b(e){for(const t of e){if(t[n+"Trigger"]||t.hostname&&t.hostname!==window.location.hostname)continue;const i=t.getAttribute("href");if(i&&i.includes("#"))continue;const r=function(a){if(a.ctrlKey||a.metaKey||a.button===1)return;a.preventDefault();const f=t.getAttribute("href");f&&x("GET",f,null,t)};t.addEventListener("click",r),t[n+"Trigger"]=r}}function E(e){for(const t of e){if(t[n+"Trigger"])continue;const i=function(r){r.preventDefault();const a=t.method.toUpperCase(),f=t.action,h=new FormData(t);for(const g of t.querySelectorAll('button, input[type="submit"]'))g.disabled=!0;x(a,f,h,t,function(){for(const g of t.querySelectorAll('button, input[type="submit"]'))g.disabled=!1})};t.addEventListener("submit",i),t[n+"Trigger"]=i}}function S(e){if(!e[n])return;const t=y(e);for(const i of t.links)i[n+"Trigger"]&&(i.removeEventListener("click",i[n+"Trigger"]),delete i[n+"Trigger"]);for(const i of t.forms)i[n+"Trigger"]&&(i.removeEventListener("submit",i[n+"Trigger"]),delete i[n+"Trigger"]);delete e[n]}function x(e,t,i,r,a){if(M(r,"ln-ajax:before-start",{method:e,url:t}).defaultPrevented)return;p(r,"ln-ajax:start",{method:e,url:t}),r.classList.add("ln-ajax--loading");const h=document.createElement("span");h.className="ln-ajax-spinner",r.appendChild(h);function g(){r.classList.remove("ln-ajax--loading");const s=r.querySelector(".ln-ajax-spinner");s&&s.remove(),a&&a()}let d=t;const k=document.querySelector('meta[name="csrf-token"]'),w=k?k.getAttribute("content"):null;i instanceof FormData&&w&&i.append("_token",w);const A={method:e,headers:{"X-Requested-With":"XMLHttpRequest",Accept:"application/json"}};if(w&&(A.headers["X-CSRF-TOKEN"]=w),e==="GET"&&i){const s=new URLSearchParams(i);d=t+(t.includes("?")?"&":"?")+s.toString()}else e!=="GET"&&i&&(A.body=i);fetch(d,A).then(function(s){const c=s.ok;return s.json().then(function(u){return{ok:c,status:s.status,data:u}})}).then(function(s){const c=s.data;if(s.ok){if(c.title&&(document.title=c.title),c.content)for(const u in c.content){const L=document.getElementById(u);if(L){let m=c.content[u];window.DOMPurify&&typeof window.DOMPurify.sanitize=="function"?m=window.DOMPurify.sanitize(m):m=m.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"").replace(/on\w+\s*=\s*(['"][^'"]*['"]|[^\s>]+)/gi,""),L.innerHTML=m}}if(r.tagName==="A"){const u=r.getAttribute("href");u&&window.history.pushState({ajax:!0},"",u)}else r.tagName==="FORM"&&r.method.toUpperCase()==="GET"&&window.history.pushState({ajax:!0},"",d);p(r,"ln-ajax:success",{method:e,url:d,data:c})}else p(r,"ln-ajax:error",{method:e,url:d,status:s.status,data:c});if(c.message){const u=c.message;window.dispatchEvent(new CustomEvent("ln-toast:enqueue",{detail:{type:u.type||(s.ok?"success":"error"),title:u.title||"",message:u.body||""}}))}p(r,"ln-ajax:complete",{method:e,url:d}),g()}).catch(function(s){p(r,"ln-ajax:error",{method:e,url:d,error:s}),p(r,"ln-ajax:complete",{method:e,url:d}),g()})}function y(e){const t={links:[],forms:[]};return e.tagName==="A"&&e.getAttribute(o)!=="false"?t.links.push(e):e.tagName==="FORM"&&e.getAttribute(o)!=="false"?t.forms.push(e):(t.links=Array.from(e.querySelectorAll('a:not([data-ln-ajax="false"])')),t.forms=Array.from(e.querySelectorAll('form:not([data-ln-ajax="false"])'))),t}function O(){v(function(){new MutationObserver(function(t){for(const i of t)if(i.type==="childList"){for(const r of i.addedNodes)if(r.nodeType===1&&(l(r),!r.hasAttribute(o))){for(const f of r.querySelectorAll("["+o+"]"))l(f);const a=r.closest&&r.closest("["+o+"]");if(a&&a.getAttribute(o)!=="false"){const f=y(r);b(f.links),E(f.forms)}}}else i.type==="attributes"&&l(i.target)}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[o]})},"ln-ajax")}function T(){for(const e of document.querySelectorAll("["+o+"]"))l(e)}window[n]=l,window[n].destroy=S,O(),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",T):T()})()})();

package/js/ln-ajax/src/ln-ajax.js

@@ -0,0 +1,277 @@
+import { guardBody, dispatch, dispatchCancelable } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-ajax';
+	const DOM_ATTRIBUTE = 'lnAjax';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	function _constructor(domRoot) {
+		if (!domRoot.hasAttribute(DOM_SELECTOR)) return;
+		if (domRoot[DOM_ATTRIBUTE]) return;
+		domRoot[DOM_ATTRIBUTE] = true;
+
+		const items = findElements(domRoot);
+		_attachLinksAjax(items.links);
+		_attachFormsAjax(items.forms);
+	}
+
+	function _attachLinksAjax(links) {
+		for (const link of links) {
+			if (link[DOM_ATTRIBUTE + 'Trigger']) continue;
+
+			// Skip external links — CORS blocks them and they should open normally
+			if (link.hostname && link.hostname !== window.location.hostname) continue;
+
+			const href = link.getAttribute('href');
+			if (href && href.includes('#')) continue;
+
+			const handler = function (e) {
+				if (e.ctrlKey || e.metaKey || e.button === 1) return;
+
+				e.preventDefault();
+				const url = link.getAttribute('href');
+				if (url) {
+					_makeAjaxRequest('GET', url, null, link);
+				}
+			};
+
+			link.addEventListener('click', handler);
+			link[DOM_ATTRIBUTE + 'Trigger'] = handler;
+		}
+	}
+
+	function _attachFormsAjax(forms) {
+		for (const form of forms) {
+			if (form[DOM_ATTRIBUTE + 'Trigger']) continue;
+
+			const handler = function (e) {
+				e.preventDefault();
+				const method = form.method.toUpperCase();
+				const action = form.action;
+				const formData = new FormData(form);
+
+				for (const btn of form.querySelectorAll('button, input[type="submit"]')) {
+					btn.disabled = true;
+				}
+
+				_makeAjaxRequest(method, action, formData, form, function () {
+					for (const btn of form.querySelectorAll('button, input[type="submit"]')) {
+						btn.disabled = false;
+					}
+				});
+			};
+
+			form.addEventListener('submit', handler);
+			form[DOM_ATTRIBUTE + 'Trigger'] = handler;
+		}
+	}
+
+	function _destroy(domRoot) {
+		if (!domRoot[DOM_ATTRIBUTE]) return;
+
+		const items = findElements(domRoot);
+		for (const link of items.links) {
+			if (link[DOM_ATTRIBUTE + 'Trigger']) {
+				link.removeEventListener('click', link[DOM_ATTRIBUTE + 'Trigger']);
+				delete link[DOM_ATTRIBUTE + 'Trigger'];
+			}
+		}
+		for (const form of items.forms) {
+			if (form[DOM_ATTRIBUTE + 'Trigger']) {
+				form.removeEventListener('submit', form[DOM_ATTRIBUTE + 'Trigger']);
+				delete form[DOM_ATTRIBUTE + 'Trigger'];
+			}
+		}
+
+		delete domRoot[DOM_ATTRIBUTE];
+	}
+
+	function _makeAjaxRequest(method, url, data, element, callback) {
+		const before = dispatchCancelable(element, 'ln-ajax:before-start', { method: method, url: url });
+		if (before.defaultPrevented) return;
+
+		dispatch(element, 'ln-ajax:start', { method: method, url: url });
+
+		element.classList.add('ln-ajax--loading');
+		const spinner = document.createElement('span');
+		spinner.className = 'ln-ajax-spinner';
+		element.appendChild(spinner);
+
+		function _cleanup() {
+			element.classList.remove('ln-ajax--loading');
+			const s = element.querySelector('.ln-ajax-spinner');
+			if (s) s.remove();
+			if (callback) callback();
+		}
+
+		let finalUrl = url;
+
+		const csrfToken = document.querySelector('meta[name="csrf-token"]');
+		const token = csrfToken ? csrfToken.getAttribute('content') : null;
+
+		if (data instanceof FormData && token) {
+			data.append('_token', token);
+		}
+
+		const options = {
+			method: method,
+			headers: {
+				'X-Requested-With': 'XMLHttpRequest',
+				'Accept': 'application/json'
+			}
+		};
+
+		if (token) {
+			options.headers['X-CSRF-TOKEN'] = token;
+		}
+
+		if (method === 'GET' && data) {
+			const params = new URLSearchParams(data);
+			finalUrl = url + (url.includes('?') ? '&' : '?') + params.toString();
+		} else if (method !== 'GET' && data) {
+			options.body = data;
+		}
+
+		fetch(finalUrl, options)
+			.then(function (response) {
+				const ok = response.ok;
+				return response.json().then(function (data) {
+					return { ok: ok, status: response.status, data: data };
+				});
+			})
+			.then(function (result) {
+				const data = result.data;
+
+				if (result.ok) {
+					if (data.title) {
+						document.title = data.title;
+					}
+
+					if (data.content) {
+						for (const targetId in data.content) {
+							const targetElement = document.getElementById(targetId);
+							if (targetElement) {
+								let htmlContent = data.content[targetId];
+								// Defense-in-depth: sanitize if DOMPurify is available globally, otherwise use native mitigation
+								if (window.DOMPurify && typeof window.DOMPurify.sanitize === 'function') {
+									htmlContent = window.DOMPurify.sanitize(htmlContent);
+								} else {
+									// Safe fallback: strip inline script tags and inline events (on*) to prevent basic XSS
+									htmlContent = htmlContent
+										.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+										.replace(/on\w+\s*=\s*(['"][^'"]*['"]|[^\s>]+)/gi, '');
+								}
+								targetElement.innerHTML = htmlContent;
+							}
+						}
+					}
+
+					if (element.tagName === 'A') {
+						const historyUrl = element.getAttribute('href');
+						if (historyUrl) {
+							window.history.pushState({ ajax: true }, '', historyUrl);
+						}
+					} else if (element.tagName === 'FORM' && element.method.toUpperCase() === 'GET') {
+						window.history.pushState({ ajax: true }, '', finalUrl);
+					}
+
+					dispatch(element, 'ln-ajax:success', { method: method, url: finalUrl, data: data });
+				} else {
+					dispatch(element, 'ln-ajax:error', { method: method, url: finalUrl, status: result.status, data: data });
+				}
+
+				// Auto-dispatch response message as a toast event.
+				// Any listener (ln-toast by default) can pick it up.
+				if (data.message) {
+					const msg = data.message;
+					window.dispatchEvent(new CustomEvent('ln-toast:enqueue', {
+						detail: {
+							type: msg.type || (result.ok ? 'success' : 'error'),
+							title: msg.title || '',
+							message: msg.body || ''
+						}
+					}));
+				}
+
+				dispatch(element, 'ln-ajax:complete', { method: method, url: finalUrl });
+				_cleanup();
+			})
+			.catch(function (error) {
+				dispatch(element, 'ln-ajax:error', { method: method, url: finalUrl, error: error });
+				dispatch(element, 'ln-ajax:complete', { method: method, url: finalUrl });
+				_cleanup();
+			});
+	}
+
+	// Local findElements — intentional divergence from ln-core helper: returns { links, forms } partition, not per-element constructors.
+	function findElements(domRoot) {
+		const items = { links: [], forms: [] };
+
+		if (domRoot.tagName === 'A' && domRoot.getAttribute(DOM_SELECTOR) !== 'false') {
+			items.links.push(domRoot);
+		} else if (domRoot.tagName === 'FORM' && domRoot.getAttribute(DOM_SELECTOR) !== 'false') {
+			items.forms.push(domRoot);
+		} else {
+			items.links = Array.from(domRoot.querySelectorAll('a:not([data-ln-ajax="false"])'));
+			items.forms = Array.from(domRoot.querySelectorAll('form:not([data-ln-ajax="false"])'));
+		}
+
+		return items;
+	}
+
+	function _domObserver() {
+		guardBody(function () {
+			const observer = new MutationObserver(function (mutations) {
+				for (const mutation of mutations) {
+					if (mutation.type === 'childList') {
+						for (const node of mutation.addedNodes) {
+							if (node.nodeType === 1) {
+								_constructor(node);
+
+								if (!node.hasAttribute(DOM_SELECTOR)) {
+									for (const el of node.querySelectorAll('[' + DOM_SELECTOR + ']')) {
+										_constructor(el);
+									}
+
+									const ajaxRoot = node.closest && node.closest('[' + DOM_SELECTOR + ']');
+									if (ajaxRoot && ajaxRoot.getAttribute(DOM_SELECTOR) !== 'false') {
+										const items = findElements(node);
+										_attachLinksAjax(items.links);
+										_attachFormsAjax(items.forms);
+									}
+								}
+							}
+						}
+					} else if (mutation.type === 'attributes') {
+						_constructor(mutation.target);
+					}
+				}
+			});
+
+			observer.observe(document.body, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: [DOM_SELECTOR]
+			});
+		}, 'ln-ajax');
+	}
+
+	function _initializeAll() {
+		for (const element of document.querySelectorAll('[' + DOM_SELECTOR + ']')) {
+			_constructor(element);
+		}
+	}
+
+	window[DOM_ATTRIBUTE] = _constructor;
+	window[DOM_ATTRIBUTE].destroy = _destroy;
+
+	_domObserver();
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', _initializeAll);
+	} else {
+		_initializeAll();
+	}
+})();