@livenetworks/ashlar 1.4.1 → 1.6.0

package/js/ln-api-queue/README.md

@@ -0,0 +1,219 @@
+# `data-ln-api-queue`
+
+A zero-dependency, Local-First **offline write outbox** component that implements the persistent-queue tier of `ln-ashlar`'s 3-tier data layer.
+
+This component persists pending mutations to its own `IndexedDB` database and replays them, FIFO per chain, once the coordinator can execute transport for them. It is **connector-blind and id-blind** — it never calls the network itself, never knows about REST paths, and never interprets `entryId`/`targetId`/`chainKey` beyond bookkeeping. The parent `ln-data-coordinator` executes the actual transport call on the queue's `ln-api-queue:send` command and reports the outcome back via `ack` / `nack`.
+
+---
+
+## Declarative DOM Setup
+
+Place the queue inside your parent coordinator element alongside your store and connector — it is an **optional** third child:
+
+```html
+<ul data-ln-data-coordinator="documents" hidden>
+    <!-- Storage Layer Cache (Blind to networking) -->
+    <li data-ln-data-store
+        data-ln-data-store-indexes="status,updated_at">
+    </li>
+
+    <!-- Transport Gateway (REST / API Connector) -->
+    <li data-ln-api-connector
+        data-ln-api-base-url="https://api.livenetworks.com/v1"
+        data-ln-api-path="/documents">
+    </li>
+
+    <!-- Offline Outbox (optional Child 3) -->
+    <li data-ln-api-queue></li>
+</ul>
+```
+
+When this child is absent, the coordinator's write handlers call the connector directly (unchanged, queue-absent path). When present, every mutation is routed through the queue instead.
+
+---
+
+## Attributes
+
+| Attribute | Category | Description |
+|-----------|----------|-------------|
+| `data-ln-api-queue` | Selector | Creates the component instance. Optional value serves as a scope/name (defaults to the coordinator's scope). |
+| `data-ln-api-queue-online` | Status (read-only, reflected) | Set by the component itself — `"true"` when the scope is draining/idle normally, `"false"` while paused (e.g. auth pause). Useful for CSS hooks on a connectivity indicator; not meant to be written by consumers. |
+
+---
+
+## IndexedDB Schema
+
+The queue owns its **own** IndexedDB database, `ln_api_queue` — entirely separate from the store's cache database. Nothing in `ln-data-store` reads or writes this database.
+
+| Object store | Key path | Indexes | Purpose |
+|---|---|---|---|
+| `outbox` | `entryId` | `by_scope_chain` (`[scope, chainKey]`), `by_scope_seq` (`[scope, seq]`) | One row per pending mutation. `seq` is a monotonically increasing per-scope counter used to preserve global FIFO ordering within a scope; `by_scope_chain` is used to find the head entry per chain. |
+| `_queue_meta` | `key` | — | Holds `seq:<scope>` counters and `paused:<scope>` auth-pause state. |
+
+Each `outbox` entry carries: `entryId`, `scope`, `chainKey`, `seq`, `op`, `targetId`, `payload`, `expectedVersion`, `meta`, `attempts`, `status` (`pending` / `inflight` / `failed`), `leaseOwner`, `leaseUntil`, and timestamps. The queue never inspects `payload` — it passes it through untouched to whatever the coordinator sends on `ln-api-queue:send`.
+
+Sequence allocation and entry insertion happen in one `readwrite` transaction
+covering both `_queue_meta` and `outbox`. Concurrent enqueues therefore cannot
+receive the same sequence number.
+
+---
+
+## JavaScript API Methods
+
+Access the instance directly on the element via the `.lnApiQueue` property:
+
+```javascript
+const queueEl = document.querySelector('[data-ln-api-queue]');
+const queue = queueEl.lnApiQueue;
+
+// Programmatic equivalents of the DOM commands below also exist,
+// but the canonical interface is event-driven (see next section) —
+// this keeps the coordinator's write-routing code identical whether
+// it is reacting to a DOM event or calling a method directly.
+```
+
+---
+
+## DOM Events
+
+### Commands (Dispatched TO the queue)
+
+| Event | `detail` Payload | Effect |
+|-------|------------------|--------|
+| `ln-api-queue:request-enqueue` | `{ chainKey, op, targetId, payload, expectedVersion, meta }` | Assigns `entryId` + `seq`, persists the entry, emits `enqueued` + `pending-count`, then attempts a drain. |
+| `ln-api-queue:ack` | `{ entryId }` | Deletes the entry, emits `pending-count`, advances that chain (drain). |
+| `ln-api-queue:nack` | `{ entryId, reason }` — `reason` is `'retry'`, `'drop'`, or `'auth'` | `retry` → schedules backoff and re-sends later; `drop` → deletes the entry and advances the chain; `auth` → pauses the scope and emits `auth-required`. |
+| `ln-api-queue:request-remap` | `{ oldKey, newId }` | For pending entries whose chain is `oldKey`: any entry with `targetId === oldKey` gets `targetId = newId`; the chain itself is re-keyed from `oldKey` to `newId`; if `meta.action` contains `oldKey` as a substring, it is string-replaced with `newId` too (keeps a persisted per-record URL in sync after a create resolves). |
+| `ln-api-queue:resolve-create` | `{ entryId, oldKey, newId }` | Atomically deletes the acknowledged create and remaps every queued sibling from the temp key to the authoritative id in one transaction, then advances the chain. |
+| `ln-api-queue:request-resume` | `{}` | Clears the pause on this scope and resumes draining. |
+| `ln-api-queue:request-drain` | `{}` | Manually triggers a drain attempt (e.g. to retry `failed` entries). |
+| `ln-api-queue:request-clear` | `{}` | Deletes all entries for this scope (e.g. on logout). |
+
+### Notifications (Emitted BY the queue, bubble to the coordinator)
+
+| Event | `detail` Payload | Meaning |
+|-------|------------------|---------|
+| `ln-api-queue:send` | `{ entryId, chainKey, op, targetId, payload, expectedVersion, idempotencyKey, meta }` | **Command to the coordinator** — execute transport for this head-of-chain entry. `idempotencyKey` is the stable `entryId`. The queue never calls `fetch` itself. |
+| `ln-api-queue:enqueued` | `{ entryId, chainKey, count }` | An entry was persisted. |
+| `ln-api-queue:pending-count` | `{ count, scope }` | Live outbox depth for the scope — the primary UI-facing signal (badge, banner). |
+| `ln-api-queue:auth-required` | `{ entryId, chainKey }` | The scope paused after a `401`/`419` nack. The consumer drives re-authentication, then dispatches `request-resume`. |
+| `ln-api-queue:paused` | `{ reason }` | Draining paused for this scope. |
+| `ln-api-queue:resumed` | `{}` | Draining resumed for this scope. |
+| `ln-api-queue:failed` | `{ entryId, chainKey, attempts }` | Retries exhausted (see backoff below); the entry is retained (not deleted) for a manual `request-drain`. |
+| `ln-api-queue:drained` | `{ scope }` | The outbox for this scope is empty. |
+| `ln-api-queue:error` | `{ operation, entryId?, error }` | IndexedDB or queue orchestration failed without silently discarding the entry. |
+| `ln-api-queue:destroyed` | `{ scope }` | The instance was torn down. |
+
+---
+
+## FIFO-per-Chain Semantics
+
+Entries are ordered **per `(scope, chainKey)`**, not globally. Each chain drains strictly in the order its entries were enqueued (via the `seq` counter), and the queue keeps **one inflight entry per chain** at a time — it will not dispatch `ln-api-queue:send` for the next entry in a chain until the current head is `ack`'d or `nack`'d with `'drop'`. A `failed` head blocks newer siblings until an explicit `request-drain` resets it. Different chains drain concurrently and independently of each other.
+
+`chainKey` is typically the record id (or temp id, pre-confirmation) — this is what makes a create followed by an update on the same not-yet-confirmed record safe: the update waits behind the create in the same chain, and `request-remap` re-keys the chain once the create resolves.
+
+Claiming is transactional. A ready head is changed from `pending` to
+`inflight` in the same IndexedDB transaction that selects it. The claim carries
+a 60-second lease; another queue instance or a repeated drain sees the lease
+and cannot dispatch the same entry. If a tab crashes, the entry becomes
+claimable again after `leaseUntil`.
+
+Claim safety also applies when multiple tabs overlap: IndexedDB read/write
+transactions serialize claims against the shared database, so mutual exclusion
+does not depend on `BroadcastChannel`. `leaseOwner` identifies the queue
+instance that owns the current claim; `leaseUntil` provides crash recovery.
+This is not a cross-tab worker-pool contract: each instance immediately drains
+its own enqueues, while another already-open tab may discover work only on an
+existing drain trigger. Cross-tab messaging may be added later as a discovery
+latency optimization, but it is not the correctness mechanism.
+
+---
+
+## Drain-on-Init
+
+On construction, the queue restores the persisted per-scope auth pause and
+attempts to drain every unpaused chain. Pending writes from a previous page
+load resume automatically. A persisted `inflight` entry is not duplicated
+while its lease is active and is recovered when the lease expires.
+
+---
+
+## Backoff & Retry Limits
+
+On a `nack {reason:'retry'}` (5xx or network failure), the entry is retried with exponential backoff: **2s, 5s, 15s, 60s, 5min**. After **8 attempts** the entry's status becomes `'failed'` and `ln-api-queue:failed` fires — the entry is **retained**, not deleted, so a manual `ln-api-queue:request-drain` (or a UI-driven "retry failed" action) can attempt it again later.
+
+---
+
+## Auth Pause / Resume
+
+A `nack {reason:'auth'}` (401/419) pauses the **entire scope** — not just the one chain — and emits `ln-api-queue:auth-required`. The optimistic write is **not** reverted; it stays pending in the cache. The consumer is expected to drive re-authentication (e.g. redirect to login, refresh a token) and then dispatch `ln-api-queue:request-resume` on the queue element to clear the pause and resume draining.
+
+---
+
+## Temp-ID Remap Collaboration
+
+The queue itself has no idea what a "temp id" is — remap is purely a re-keying operation the coordinator asks for. On a successful `create`, the coordinator:
+
+1. Reconciles the store with an ordinary correlated `request-update`.
+2. Waits for `ln-data-store:updated` to confirm that the id rekey committed.
+3. Dispatches one `ln-api-queue:resolve-create { entryId, oldKey: tempId, newId: serverId }`.
+
+The compound command removes the old async remap/ack race: the acknowledged
+create is deleted and every waiting sibling is re-keyed before the transaction
+commits or the chain advances.
+
+---
+
+## Connector- and ID-Blind by Design
+
+The queue never imports or references a connector, never constructs a URL, and never distinguishes a temp id from a real id except as an opaque `chainKey`/`targetId` string it is told to match and re-key. All transport execution, id semantics, and REST/verb mapping live in the coordinator (`ln-data-coordinator`) and the connector it drives — see their READMEs for that half of the contract.
+
+---
+
+## 3-Tier Integration Architecture (Coordinator Example)
+
+```javascript
+(function () {
+    const parent = document.querySelector('[data-ln-data-coordinator="documents"]');
+    const queueEl = parent.querySelector('[data-ln-api-queue]');
+    const connectorEl = parent.querySelector('[data-ln-api-connector]');
+
+    if (!queueEl || !connectorEl) return;
+
+    // The queue commands the coordinator to execute transport for its head entry.
+    queueEl.addEventListener('ln-api-queue:send', function (e) {
+        const { entryId, op, targetId, payload, expectedVersion, idempotencyKey, meta } = e.detail;
+
+        const call = op === 'create' ? connectorEl.lnConnector.create(payload)
+            : op === 'update' ? connectorEl.lnConnector.update(targetId, payload, expectedVersion)
+            : op === 'delete' ? connectorEl.lnConnector.delete(targetId)
+            : connectorEl.lnConnector.bulkDelete(meta.ids);
+
+        call.then(function (record) {
+            // For create: wait for the correlated store rekey, then dispatch
+            // resolve-create. Other operations use ack.
+            const eventName = op === 'create' ? 'ln-api-queue:resolve-create' : 'ln-api-queue:ack';
+            const detail = op === 'create'
+                ? { entryId, oldKey: meta.tempId, newId: record.id }
+                : { entryId };
+            queueEl.dispatchEvent(new CustomEvent(eventName, { detail }));
+        }).catch(function (err) {
+            const reason = (err.status === 401 || err.status === 419) ? 'auth'
+                : (!err.status || err.status >= 500) ? 'retry'
+                : 'drop';
+            queueEl.dispatchEvent(new CustomEvent('ln-api-queue:nack', { detail: { entryId, reason } }));
+        });
+    });
+
+    // Surface outbox depth for a UI badge.
+    queueEl.addEventListener('ln-api-queue:pending-count', function (e) {
+        document.querySelector('#pending-badge').textContent = e.detail.count;
+    });
+
+    // Drive re-login on auth pause, then resume.
+    queueEl.addEventListener('ln-api-queue:auth-required', function () {
+        // redirect / refresh token, then:
+        queueEl.dispatchEvent(new CustomEvent('ln-api-queue:request-resume'));
+    });
+})();
+```

package/js/ln-api-queue/ln-api-queue.js

@@ -0,0 +1 @@
+(function(){"use strict";if(typeof window<"u"){const r=console.warn;console.warn=function(...t){typeof t[0]=="string"&&(t[0].startsWith("[ln-")||t[0].startsWith("[lnCore"))&&!(document.documentElement.hasAttribute("data-ln-debug")||document.body&&document.body.hasAttribute("data-ln-debug"))||r.apply(console,t)}}const E={};function N(r,t){E[r]||(E[r]=document.querySelector('[data-ln-template="'+r+'"]'));const s=E[r];return s?s.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+r+'" not found'),null)}function y(r,t,s){r.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:s||{}}))}function S(r,t){if(!r||!t)return r;const s=r.querySelectorAll("[data-ln-field]");for(let o=0;o<s.length;o++){const i=s[o],d=i.getAttribute("data-ln-field");t[d]!=null&&(i.textContent=t[d])}const l=r.querySelectorAll("[data-ln-attr]");for(let o=0;o<l.length;o++){const i=l[o],d=i.getAttribute("data-ln-attr").split(",");for(let e=0;e<d.length;e++){const n=d[e].trim().split(":");if(n.length!==2)continue;const a=n[0].trim(),f=n[1].trim();t[f]!=null&&i.setAttribute(a,t[f])}}const c=r.querySelectorAll("[data-ln-show]");for(let o=0;o<c.length;o++){const i=c[o],d=i.getAttribute("data-ln-show");d in t&&i.classList.toggle("hidden",!t[d])}const u=r.querySelectorAll("[data-ln-class]");for(let o=0;o<u.length;o++){const i=u[o],d=i.getAttribute("data-ln-class").split(",");for(let e=0;e<d.length;e++){const n=d[e].trim().split(":");if(n.length!==2)continue;const a=n[0].trim(),f=n[1].trim();f in t&&i.classList.toggle(a,!!t[f])}}return r}function U(r,t){r.matches&&r.matches("[data-ln-form], [data-ln-fillable]")&&r.dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));const s=r.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let l=0;l<s.length;l++)s[l].dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));return r}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(r){if(!(!r.target.matches||!r.target.matches("[data-ln-fillable]")))if(r.detail)S(r.target,r.detail);else{const t=r.target.querySelectorAll("[data-ln-field]");for(let s=0;s<t.length;s++)t[s].textContent=""}})));function D(r,t){if(!r||!t)return r;const s=document.createTreeWalker(r,NodeFilter.SHOW_TEXT);for(;s.nextNode();){const u=s.currentNode;u.textContent.indexOf("{{")!==-1&&(u.textContent=u.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(o,i){return t[i]!==void 0?t[i]:""}))}const l=function(u,o){return t[o]!==void 0?t[o]:""},c=Array.from(r.querySelectorAll("*"));r.nodeType===1&&c.push(r);for(let u=0;u<c.length;u++){const o=c[u],i=o.attributes;for(let d=0;d<i.length;d++){const e=i[d];e.value.indexOf("{{")!==-1&&o.setAttribute(e.name,e.value.replace(/\{\{\s*(\w+)\s*\}\}/g,l))}}return r}function F(r,t,s,l,c,u){const o={};for(let d=0;d<r.children.length;d++){const e=r.children[d],n=e.getAttribute("data-ln-key");n&&(o[n]=e)}const i=document.createDocumentFragment();for(let d=0;d<t.length;d++){const e=t[d],n=String(l(e));let a=o[n];if(a)c(a,e,d);else{const f=N(s,u);if(!f||(D(f,e),a=f.firstElementChild,!a))continue;a.setAttribute("data-ln-key",n),c(a,e,d)}i.appendChild(a)}r.textContent="",r.appendChild(i)}function P(r,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){P(r,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}r()}function v(r,t,s,l){if(r.nodeType!==1)return;const u=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",o=Array.from(r.querySelectorAll(u));r.matches&&r.matches(u)&&o.push(r);for(const i of o)i[s]||(i[s]=new l(i))}function j(r,t,s,l,c={}){const u=c.extraAttributes||[],o=c.onAttributeChange||null,i=c.onInit||null;function d(e){const n=e||document.body;v(n,r,t,s),i&&i(n)}return P(function(){const e=new MutationObserver(function(a){for(let f=0;f<a.length;f++){const h=a[f];if(h.type==="childList"){for(let m=0;m<h.addedNodes.length;m++){const p=h.addedNodes[m];p.nodeType===1&&(v(p,r,t,s),i&&i(p))}for(let m=0;m<h.removedNodes.length;m++){const p=h.removedNodes[m];if(p.nodeType===1){const A=r.indexOf("[")!==-1||r.indexOf(".")!==-1||r.indexOf("#")!==-1?r:"["+r+"]",C=Array.from(p.querySelectorAll(A));p.matches&&p.matches(A)&&C.push(p);for(let I=0;I<C.length;I++){const M=C[I];if(!document.contains(M)){const L=M[t];L&&typeof L.destroy=="function"&&L.destroy()}}}}}else h.type==="attributes"&&(o&&h.target[t]?o(h.target,h.attributeName):(v(h.target,r,t,s),i&&i(h.target)))}});let n=[];if(r.indexOf("[")!==-1){const a=/\[([\w-]+)/g;let f;for(;(f=a.exec(r))!==null;)n.push(f[1])}else n.push(r);e.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:n.concat(u)})},l),window[t]=d,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){d(document.body)}):d(document.body),d}const T={};function W(r,t){T[r]=t}function V(r){return T[r]||{ingress:t=>t,egress:t=>t}}const Q={};function O(r,t){if(!r||typeof t!="object")return;const s=r.toLowerCase().split("-")[0];Q[s]=t}function H(r){if(!r)return null;const t=r.toLowerCase().split("-")[0];return Q[t]||null}O("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=W,window.lnCore.getDataMapper=V,window.lnCore.registerLocaleFallback=O,window.lnCore.getLocaleFallback=H,window.lnCore.fillTemplate=D,window.lnCore.fill=S,window.lnCore.lnFill=U,window.lnCore.renderList=F);function R(r){return(r||"").replace(/^#/,"")}function k(r){const t=r===void 0?location.hash:r,s={},l=R(t);if(!l)return s;const c=l.split("&");for(let u=0;u<c.length;u++){const o=c[u];if(!o)continue;const i=o.indexOf(":"),d=i>-1?o.slice(0,i):o,e=i>-1?o.slice(i+1):"";if(d)try{s[d]=decodeURIComponent(e)}catch{s[d]=e}}return s}function X(r){if(!r)return null;const t=k();return r in t?t[r]:null}function z(r,t){if(!r)return;const s=k();t==null?delete s[r]:s[r]=String(t);const c=Object.keys(s).map(function(u){const o=s[u];return o===""?u:u+":"+encodeURIComponent(o)}).join("&");R(location.hash)!==c&&(location.hash=c)}function G(r){return r.button===1||r.ctrlKey||r.metaKey||r.shiftKey?!1:(r.preventDefault(),!0)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=k,window.lnCore.hashGet=X,window.lnCore.hashSet=z,window.lnCore.hashLinkClick=G);const J="ln_api_queue",Y=2,_="outbox",w="_queue_meta";function g(r,t){return r.error||new Error(t)}function b(r,t){return r.bound([t,-1/0],[t,1/0])}function K(r){return"seq:"+r}function q(r){return"paused:"+r}function B(r){r.leaseOwner=null,r.leaseUntil=0}function Z(r,t,s){return typeof r!="string"||r.indexOf(t)===-1?r:r.split(t).join(s)}function $(r,t,s,l){const c=new Map,u=[],o=[];for(const i of r||[])c.has(i.chainKey)||c.set(i.chainKey,[]),c.get(i.chainKey).push(i);return c.forEach((i,d)=>{i.sort((n,a)=>n.seq-a.seq);const e=i[0];if(!(!e||e.status==="failed")){if(e.status==="inflight"&&(e.leaseUntil||0)>l){o.push({chainKey:d,at:e.leaseUntil});return}if((e.nextAttemptAt||0)>l){o.push({chainKey:d,at:e.nextAttemptAt});return}e.status="inflight",e.leaseOwner=t,e.leaseUntil=l+s,e.updatedAt=l,u.push(e)}}),{entries:u,wakeups:o}}function ee(r,t,s,l,c){const u=[],o=[];for(const i of r||[]){if(i.entryId===t){o.push(i.entryId);continue}i.chainKey===s&&(i.chainKey=l,i.targetId===s&&(i.targetId=l),i.meta&&i.meta.id===s&&(i.meta.id=l),i.meta&&typeof i.meta.action=="string"&&(i.meta.action=Z(i.meta.action,s,l)),i.updatedAt=c,u.push(i))}return{changed:u,deleted:o}}class te{constructor(t){t=t||{},this.indexedDB=t.indexedDB||globalThis.indexedDB,this.keyRange=t.IDBKeyRange||globalThis.IDBKeyRange,this.dbName=t.dbName||J,this.now=t.now||(()=>Date.now()),this.uuid=t.uuid||(()=>crypto.randomUUID()),this._db=null,this._ready=null}open(){return this._ready?this._ready:!this.indexedDB||!this.keyRange?Promise.resolve(null):(this._ready=new Promise((t,s)=>{const l=this.indexedDB.open(this.dbName,Y);l.onupgradeneeded=c=>{const u=c.target.result;let o;u.objectStoreNames.contains(_)?o=c.target.transaction.objectStore(_):o=u.createObjectStore(_,{keyPath:"entryId"}),o.indexNames.contains("by_scope_chain")||o.createIndex("by_scope_chain",["scope","chainKey"],{unique:!1}),o.indexNames.contains("by_scope_seq")||o.createIndex("by_scope_seq",["scope","seq"],{unique:!1}),u.objectStoreNames.contains(w)||u.createObjectStore(w,{keyPath:"key"})},l.onerror=()=>s(g(l,"Queue database open failed")),l.onsuccess=c=>{this._db=c.target.result,this._db.onversionchange=()=>this.close(),t(this._db)}}),this._ready)}close(){this._db&&this._db.close(),this._db=null,this._ready=null}deleteDatabase(){return this.close(),this.indexedDB?new Promise((t,s)=>{const l=this.indexedDB.deleteDatabase(this.dbName);l.onsuccess=()=>t(),l.onerror=()=>s(g(l,"Queue database delete failed")),l.onblocked=()=>s(new Error("Queue database delete blocked"))}):Promise.resolve()}allForScope(t){return this.open().then(s=>s?new Promise((l,c)=>{const o=s.transaction(_,"readonly").objectStore(_).index("by_scope_seq").getAll(b(this.keyRange,t));o.onsuccess=()=>l(o.result||[]),o.onerror=()=>c(g(o,"Queue scope read failed"))}):[])}enqueue(t,s){return s=s||{},this.open().then(l=>l?new Promise((c,u)=>{const o=l.transaction([w,_],"readwrite"),i=o.objectStore(w),d=o.objectStore(_),e=K(t);let n=null;const a=h=>{const m=h+1;n={entryId:this.uuid(),scope:t,chainKey:s.chainKey,seq:m,op:s.op,targetId:s.targetId!==void 0?s.targetId:null,payload:s.payload,expectedVersion:s.expectedVersion!==void 0?s.expectedVersion:null,meta:s.meta||{},attempts:0,nextAttemptAt:0,status:"pending",leaseOwner:null,leaseUntil:0,createdAt:this.now(),updatedAt:this.now()},i.put({key:e,value:m}),d.put(n)},f=i.get(e);f.onerror=()=>u(g(f,"Queue sequence read failed")),f.onsuccess=()=>{const h=f.result;if(h&&typeof h.value=="number"){a(h.value);return}const m=d.index("by_scope_seq").getAll(b(this.keyRange,t));m.onerror=()=>u(g(m,"Queue sequence migration failed")),m.onsuccess=()=>{const p=(m.result||[]).reduce((x,A)=>Math.max(x,A.seq||0),0);a(p)}},o.oncomplete=()=>c(n),o.onerror=()=>u(o.error||new Error("Queue enqueue transaction failed")),o.onabort=()=>u(o.error||new Error("Queue enqueue transaction aborted"))}):null)}claimReady(t,s,l){return this.open().then(c=>c?new Promise((u,o)=>{const i=c.transaction(_,"readwrite"),d=i.objectStore(_),e=d.index("by_scope_seq").getAll(b(this.keyRange,t)),n=this.now();let a={entries:[],wakeups:[]};e.onerror=()=>o(g(e,"Queue claim read failed")),e.onsuccess=()=>{a=$(e.result||[],s,l,n);for(const f of a.entries)d.put(f)},i.oncomplete=()=>u(a),i.onerror=()=>o(i.error||new Error("Queue claim transaction failed")),i.onabort=()=>o(i.error||new Error("Queue claim transaction aborted"))}):{entries:[],wakeups:[]})}ack(t,s){return this._updateEntry(t,s,(l,c)=>(c.delete(l.entryId),{status:"acked",entry:l}))}nack(t,s,l,c){c=c||{};const u=c.maxAttempts||8,o=c.backoff||[2e3,5e3,15e3,6e4,3e5];return this.open().then(i=>i?new Promise((d,e)=>{const n=i.transaction([_,w],"readwrite"),a=n.objectStore(_),f=n.objectStore(w),h=a.get(s);let m=null;h.onerror=()=>e(g(h,"Queue nack read failed")),h.onsuccess=()=>{const p=h.result;if(!(!p||p.scope!==t)){if(l==="drop"){a.delete(p.entryId),m={status:"dropped",entry:p};return}if(B(p),p.updatedAt=this.now(),l==="auth"){p.status="pending",a.put(p),f.put({key:q(t),value:!0}),m={status:"auth",entry:p};return}if(l==="retry"){if(p.attempts=(p.attempts||0)+1,p.attempts>=u){p.status="failed",p.nextAttemptAt=0,a.put(p),m={status:"failed",entry:p};return}const x=o[Math.min(p.attempts-1,o.length-1)];p.status="pending",p.nextAttemptAt=this.now()+x,a.put(p),m={status:"retry",entry:p,delay:x}}}},n.oncomplete=()=>d(m),n.onerror=()=>e(n.error||new Error("Queue nack transaction failed")),n.onabort=()=>e(n.error||new Error("Queue nack transaction aborted"))}):null)}remap(t,s,l){return this._remapTransaction(t,null,s,l)}resolveCreate(t,s,l,c){return this._remapTransaction(t,s,l,c)}_remapTransaction(t,s,l,c){return this.open().then(u=>u?new Promise((o,i)=>{const d=u.transaction(_,"readwrite"),e=d.objectStore(_),n=e.index("by_scope_seq").getAll(b(this.keyRange,t));let a={changed:[],deleted:[]};n.onerror=()=>i(g(n,"Queue remap read failed")),n.onsuccess=()=>{a=ee(n.result||[],s,l,c,this.now());for(const f of a.deleted)e.delete(f);for(const f of a.changed)e.put(f)},d.oncomplete=()=>o(a.changed),d.onerror=()=>i(d.error||new Error("Queue remap transaction failed")),d.onabort=()=>i(d.error||new Error("Queue remap transaction aborted"))}):[])}resetFailed(t){return this.open().then(s=>s?new Promise((l,c)=>{const u=s.transaction(_,"readwrite"),o=u.objectStore(_),i=o.index("by_scope_seq").getAll(b(this.keyRange,t));let d=0;i.onerror=()=>c(g(i,"Queue failed-entry read failed")),i.onsuccess=()=>{for(const e of i.result||[])e.status==="failed"&&(e.status="pending",e.attempts=0,e.nextAttemptAt=0,e.updatedAt=this.now(),B(e),o.put(e),d++)},u.oncomplete=()=>l(d),u.onerror=()=>c(u.error||new Error("Queue failed-entry reset failed")),u.onabort=()=>c(u.error||new Error("Queue failed-entry reset aborted"))}):0)}getPaused(t){return this.open().then(s=>s?new Promise((l,c)=>{const o=s.transaction(w,"readonly").objectStore(w).get(q(t));o.onsuccess=()=>l(!!(o.result&&o.result.value)),o.onerror=()=>c(g(o,"Queue pause-state read failed"))}):!1)}setPaused(t,s){return this.open().then(l=>{if(l)return new Promise((c,u)=>{const o=l.transaction(w,"readwrite");o.objectStore(w).put({key:q(t),value:!!s}),o.oncomplete=()=>c(),o.onerror=()=>u(o.error||new Error("Queue pause-state write failed")),o.onabort=()=>u(o.error||new Error("Queue pause-state write aborted"))})})}clear(t){return this.open().then(s=>{if(s)return new Promise((l,c)=>{const u=s.transaction([_,w],"readwrite"),i=u.objectStore(_).index("by_scope_seq").openCursor(b(this.keyRange,t));i.onsuccess=d=>{const e=d.target.result;e&&(e.delete(),e.continue())},i.onerror=()=>c(g(i,"Queue clear failed")),u.objectStore(w).delete(K(t)),u.objectStore(w).delete(q(t)),u.oncomplete=()=>l(),u.onerror=()=>c(u.error||new Error("Queue clear transaction failed")),u.onabort=()=>c(u.error||new Error("Queue clear transaction aborted"))})})}_updateEntry(t,s,l){return this.open().then(c=>c?new Promise((u,o)=>{const i=c.transaction(_,"readwrite"),d=i.objectStore(_),e=d.get(s);let n=null;e.onerror=()=>o(g(e,"Queue entry read failed")),e.onsuccess=()=>{const a=e.result;!a||a.scope!==t||(n=l(a,d))},i.oncomplete=()=>u(n),i.onerror=()=>o(i.error||new Error("Queue entry transaction failed")),i.onabort=()=>o(i.error||new Error("Queue entry transaction aborted"))}):null)}}(function(){const r="data-ln-api-queue",t="lnApiQueue",s=[2e3,5e3,15e3,6e4,3e5],l=8,c=6e4;if(window[t]!==void 0)return;function u(){try{return crypto.randomUUID()}catch{return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,n=>{const a=Math.random()*16|0;return(n==="x"?a:a&3|8).toString(16)})}}const o=new te({indexedDB:window.indexedDB,IDBKeyRange:window.IDBKeyRange,uuid:u});function i(e){this.dom=e,e[t]=this;const n=e.closest("[data-ln-data-coordinator]");this.scope=e.getAttribute(r)||(n?n.getAttribute("data-ln-data-coordinator"):null)||"default",this._paused=!1,this._timers=new Map,this._workerId=u(),this._drainPromise=null,this._onlineHandler=()=>this._drain(),this._bindEvents(),window.addEventListener("online",this._onlineHandler);const a=this;return o.open().then(f=>f?o.getPaused(a.scope):(console.warn("[ln-api-queue] IndexedDB not available — queue disabled"),!1)).then(f=>(a._paused=!!f,a._paused&&y(a.dom,"ln-api-queue:paused",{reason:"auth",restored:!0}),a._emitPendingCount())).then(()=>a._drain()).catch(f=>{console.error("[ln-api-queue] Initialization failed:",f),y(a.dom,"ln-api-queue:error",{operation:"initialize",error:f})}),this}i.prototype._isOnline=function(){const e=this.dom.getAttribute("data-ln-api-queue-online");return e==="true"?!0:e==="false"?!1:navigator.onLine},i.prototype._emitPendingCount=function(){const e=this;return o.allForScope(e.scope).then(n=>(y(e.dom,"ln-api-queue:pending-count",{count:n.length,scope:e.scope}),n.length===0&&y(e.dom,"ln-api-queue:drained",{scope:e.scope}),n))},i.prototype._clearTimer=function(e){const n=this._timers.get(e);n&&(clearTimeout(n),this._timers.delete(e))},i.prototype._scheduleTimer=function(e,n){const a=Math.max(0,n),f=this._timers.get(e);f&&clearTimeout(f);const h=this,m=setTimeout(()=>{h._timers.delete(e),h._drain()},a);this._timers.set(e,m)},i.prototype._drain=function(){const e=this;return e._paused||!e._isOnline()?Promise.resolve():(e._drainPromise||(e._drainPromise=o.claimReady(e.scope,e._workerId,c).then(n=>{for(const a of n.wakeups)e._scheduleTimer(a.chainKey,a.at-Date.now());for(const a of n.entries)e._clearTimer(a.chainKey),y(e.dom,"ln-api-queue:send",{entryId:a.entryId,chainKey:a.chainKey,op:a.op,targetId:a.targetId,payload:a.payload,expectedVersion:a.expectedVersion,idempotencyKey:a.entryId,meta:a.meta})}).catch(n=>{console.error("[ln-api-queue] Drain failed:",n),y(e.dom,"ln-api-queue:error",{operation:"drain",error:n})}).finally(()=>{e._drainPromise=null})),e._drainPromise)},i.prototype._onEnqueue=function(e){const n=this;return o.enqueue(n.scope,e.detail||{}).then(a=>{if(a)return n._emitPendingCount().then(f=>(y(n.dom,"ln-api-queue:enqueued",{entryId:a.entryId,chainKey:a.chainKey,count:f.length}),n._drain()))}).catch(a=>{y(n.dom,"ln-api-queue:error",{operation:"enqueue",error:a})})},i.prototype._onAck=function(e){const n=this,a=e.detail||{};return o.ack(n.scope,a.entryId).then(()=>n._emitPendingCount()).then(()=>n._drain()).catch(f=>{y(n.dom,"ln-api-queue:error",{operation:"ack",entryId:a.entryId,error:f})})},i.prototype._onNack=function(e){const n=this,a=e.detail||{};return o.nack(n.scope,a.entryId,a.reason,{maxAttempts:l,backoff:s}).then(f=>{if(f)return f.status==="failed"?y(n.dom,"ln-api-queue:failed",{entryId:f.entry.entryId,chainKey:f.entry.chainKey,attempts:f.entry.attempts}):f.status==="retry"?n._scheduleTimer(f.entry.chainKey,f.delay):f.status==="auth"&&(n._paused=!0,y(n.dom,"ln-api-queue:paused",{reason:"auth"}),y(n.dom,"ln-api-queue:auth-required",{entryId:f.entry.entryId,chainKey:f.entry.chainKey})),n._emitPendingCount().then(()=>{if(f.status==="dropped")return n._drain()})}).catch(f=>{y(n.dom,"ln-api-queue:error",{operation:"nack",entryId:a.entryId,error:f})})},i.prototype._onRemap=function(e){const n=this,a=e.detail||{};return o.remap(n.scope,a.oldKey,a.newId).catch(f=>{y(n.dom,"ln-api-queue:error",{operation:"remap",error:f})})},i.prototype._onResolveCreate=function(e){const n=this,a=e.detail||{};return o.resolveCreate(n.scope,a.entryId,a.oldKey,a.newId).then(()=>n._emitPendingCount()).then(()=>n._drain()).catch(f=>{y(n.dom,"ln-api-queue:error",{operation:"resolve-create",entryId:a.entryId,error:f})})},i.prototype._onResume=function(){const e=this;return o.setPaused(e.scope,!1).then(()=>(e._paused=!1,y(e.dom,"ln-api-queue:resumed",{}),e._drain())).catch(n=>{y(e.dom,"ln-api-queue:error",{operation:"resume",error:n})})},i.prototype._onDrain=function(){const e=this;return o.resetFailed(e.scope).then(()=>{const n=e._drainPromise;return n?n.then(()=>e._drain()):e._drain()}).catch(n=>{y(e.dom,"ln-api-queue:error",{operation:"manual-drain",error:n})})},i.prototype._onClear=function(){const e=this;return e._timers.forEach(n=>clearTimeout(n)),e._timers.clear(),o.clear(e.scope).then(()=>{e._paused=!1,y(e.dom,"ln-api-queue:pending-count",{count:0,scope:e.scope}),y(e.dom,"ln-api-queue:drained",{scope:e.scope})}).catch(n=>{y(e.dom,"ln-api-queue:error",{operation:"clear",error:n})})},i.prototype._bindEvents=function(){const e=this;e._handlers={enqueue:n=>e._onEnqueue(n),ack:n=>e._onAck(n),nack:n=>e._onNack(n),remap:n=>e._onRemap(n),resolveCreate:n=>e._onResolveCreate(n),resume:()=>e._onResume(),drain:()=>e._onDrain(),clear:()=>e._onClear()},e.dom.addEventListener("ln-api-queue:request-enqueue",e._handlers.enqueue),e.dom.addEventListener("ln-api-queue:ack",e._handlers.ack),e.dom.addEventListener("ln-api-queue:nack",e._handlers.nack),e.dom.addEventListener("ln-api-queue:request-remap",e._handlers.remap),e.dom.addEventListener("ln-api-queue:resolve-create",e._handlers.resolveCreate),e.dom.addEventListener("ln-api-queue:request-resume",e._handlers.resume),e.dom.addEventListener("ln-api-queue:request-drain",e._handlers.drain),e.dom.addEventListener("ln-api-queue:request-clear",e._handlers.clear)},i.prototype.destroy=function(){if(!this.dom[t])return;const e=this;e.dom.removeEventListener("ln-api-queue:request-enqueue",e._handlers.enqueue),e.dom.removeEventListener("ln-api-queue:ack",e._handlers.ack),e.dom.removeEventListener("ln-api-queue:nack",e._handlers.nack),e.dom.removeEventListener("ln-api-queue:request-remap",e._handlers.remap),e.dom.removeEventListener("ln-api-queue:resolve-create",e._handlers.resolveCreate),e.dom.removeEventListener("ln-api-queue:request-resume",e._handlers.resume),e.dom.removeEventListener("ln-api-queue:request-drain",e._handlers.drain),e.dom.removeEventListener("ln-api-queue:request-clear",e._handlers.clear),window.removeEventListener("online",e._onlineHandler),e._timers.forEach(n=>clearTimeout(n)),e._timers.clear(),y(e.dom,"ln-api-queue:destroyed",{scope:e.scope}),delete e.dom[t]};function d(e){const n=e[t];n&&n._drain()}j(r,t,i,"ln-api-queue",{extraAttributes:["data-ln-api-queue-online"],onAttributeChange:d})})()})();

package/js/ln-api-queue/src/ln-api-queue.js

@@ -0,0 +1,320 @@
+import { registerComponent, dispatch } from '../../ln-core';
+import { QueueStorage } from './queue-storage';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-api-queue';
+	const DOM_ATTRIBUTE = 'lnApiQueue';
+	const BACKOFF_LADDER = [2000, 5000, 15000, 60000, 300000];
+	const MAX_ATTEMPTS = 8;
+	const LEASE_MS = 60000;
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	function _uuid() {
+		try { return crypto.randomUUID(); }
+		catch (_) {
+			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+				const r = Math.random() * 16 | 0;
+				return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			});
+		}
+	}
+
+	const _storage = new QueueStorage({
+		indexedDB: window.indexedDB,
+		IDBKeyRange: window.IDBKeyRange,
+		uuid: _uuid
+	});
+
+	function _component(dom) {
+		this.dom = dom;
+		dom[DOM_ATTRIBUTE] = this;
+
+		const coordinatorEl = dom.closest('[data-ln-data-coordinator]');
+		this.scope = dom.getAttribute(DOM_SELECTOR) || (coordinatorEl ? coordinatorEl.getAttribute('data-ln-data-coordinator') : null) || 'default';
+
+		this._paused = false;
+		this._timers = new Map();
+		this._workerId = _uuid();
+		this._drainPromise = null;
+		this._onlineHandler = () => this._drain();
+
+		this._bindEvents();
+		window.addEventListener('online', this._onlineHandler);
+
+		const self = this;
+		_storage.open()
+			.then(db => {
+				if (!db) {
+					console.warn('[ln-api-queue] IndexedDB not available — queue disabled');
+					return false;
+				}
+				return _storage.getPaused(self.scope);
+			})
+			.then(paused => {
+				self._paused = !!paused;
+				if (self._paused) dispatch(self.dom, 'ln-api-queue:paused', { reason: 'auth', restored: true });
+				return self._emitPendingCount();
+			})
+			.then(() => self._drain())
+			.catch(error => {
+				console.error('[ln-api-queue] Initialization failed:', error);
+				dispatch(self.dom, 'ln-api-queue:error', { operation: 'initialize', error });
+			});
+
+		return this;
+	}
+
+	_component.prototype._isOnline = function () {
+		const attr = this.dom.getAttribute('data-ln-api-queue-online');
+		if (attr === 'true') return true;
+		if (attr === 'false') return false;
+		return navigator.onLine;
+	};
+
+	_component.prototype._emitPendingCount = function () {
+		const self = this;
+		return _storage.allForScope(self.scope).then(entries => {
+			dispatch(self.dom, 'ln-api-queue:pending-count', { count: entries.length, scope: self.scope });
+			if (entries.length === 0) {
+				dispatch(self.dom, 'ln-api-queue:drained', { scope: self.scope });
+			}
+			return entries;
+		});
+	};
+
+	_component.prototype._clearTimer = function (chainKey) {
+		const timer = this._timers.get(chainKey);
+		if (timer) {
+			clearTimeout(timer);
+			this._timers.delete(chainKey);
+		}
+	};
+
+	_component.prototype._scheduleTimer = function (chainKey, delta) {
+		const delay = Math.max(0, delta);
+		const current = this._timers.get(chainKey);
+		if (current) clearTimeout(current);
+
+		const self = this;
+		const timer = setTimeout(() => {
+			self._timers.delete(chainKey);
+			self._drain();
+		}, delay);
+		this._timers.set(chainKey, timer);
+	};
+
+	_component.prototype._drain = function () {
+		const self = this;
+		if (self._paused || !self._isOnline()) return Promise.resolve();
+		if (self._drainPromise) return self._drainPromise;
+
+		self._drainPromise = _storage.claimReady(self.scope, self._workerId, LEASE_MS)
+			.then(result => {
+				for (const wakeup of result.wakeups) {
+					self._scheduleTimer(wakeup.chainKey, wakeup.at - Date.now());
+				}
+
+				for (const entry of result.entries) {
+					self._clearTimer(entry.chainKey);
+					dispatch(self.dom, 'ln-api-queue:send', {
+						entryId: entry.entryId,
+						chainKey: entry.chainKey,
+						op: entry.op,
+						targetId: entry.targetId,
+						payload: entry.payload,
+						expectedVersion: entry.expectedVersion,
+						idempotencyKey: entry.entryId,
+						meta: entry.meta
+					});
+				}
+			})
+			.catch(error => {
+				console.error('[ln-api-queue] Drain failed:', error);
+				dispatch(self.dom, 'ln-api-queue:error', { operation: 'drain', error });
+			})
+			.finally(() => {
+				self._drainPromise = null;
+			});
+
+		return self._drainPromise;
+	};
+
+	_component.prototype._onEnqueue = function (e) {
+		const self = this;
+		return _storage.enqueue(self.scope, e.detail || {})
+			.then(entry => {
+				if (!entry) return;
+				return self._emitPendingCount().then(entries => {
+					dispatch(self.dom, 'ln-api-queue:enqueued', {
+						entryId: entry.entryId,
+						chainKey: entry.chainKey,
+						count: entries.length
+					});
+					return self._drain();
+				});
+			})
+			.catch(error => {
+				dispatch(self.dom, 'ln-api-queue:error', { operation: 'enqueue', error });
+			});
+	};
+
+	_component.prototype._onAck = function (e) {
+		const self = this;
+		const detail = e.detail || {};
+		return _storage.ack(self.scope, detail.entryId)
+			.then(() => self._emitPendingCount())
+			.then(() => self._drain())
+			.catch(error => {
+				dispatch(self.dom, 'ln-api-queue:error', { operation: 'ack', entryId: detail.entryId, error });
+			});
+	};
+
+	_component.prototype._onNack = function (e) {
+		const self = this;
+		const detail = e.detail || {};
+
+		return _storage.nack(self.scope, detail.entryId, detail.reason, {
+			maxAttempts: MAX_ATTEMPTS,
+			backoff: BACKOFF_LADDER
+		}).then(result => {
+			if (!result) return;
+
+			if (result.status === 'failed') {
+				dispatch(self.dom, 'ln-api-queue:failed', {
+					entryId: result.entry.entryId,
+					chainKey: result.entry.chainKey,
+					attempts: result.entry.attempts
+				});
+			} else if (result.status === 'retry') {
+				self._scheduleTimer(result.entry.chainKey, result.delay);
+			} else if (result.status === 'auth') {
+				self._paused = true;
+				dispatch(self.dom, 'ln-api-queue:paused', { reason: 'auth' });
+				dispatch(self.dom, 'ln-api-queue:auth-required', {
+					entryId: result.entry.entryId,
+					chainKey: result.entry.chainKey
+				});
+			}
+
+			return self._emitPendingCount().then(() => {
+				if (result.status === 'dropped') return self._drain();
+			});
+		}).catch(error => {
+			dispatch(self.dom, 'ln-api-queue:error', { operation: 'nack', entryId: detail.entryId, error });
+		});
+	};
+
+	_component.prototype._onRemap = function (e) {
+		const self = this;
+		const detail = e.detail || {};
+		return _storage.remap(self.scope, detail.oldKey, detail.newId)
+			.catch(error => {
+				dispatch(self.dom, 'ln-api-queue:error', { operation: 'remap', error });
+			});
+	};
+
+	_component.prototype._onResolveCreate = function (e) {
+		const self = this;
+		const detail = e.detail || {};
+		return _storage.resolveCreate(self.scope, detail.entryId, detail.oldKey, detail.newId)
+			.then(() => self._emitPendingCount())
+			.then(() => self._drain())
+			.catch(error => {
+				dispatch(self.dom, 'ln-api-queue:error', {
+					operation: 'resolve-create',
+					entryId: detail.entryId,
+					error
+				});
+			});
+	};
+
+	_component.prototype._onResume = function () {
+		const self = this;
+		return _storage.setPaused(self.scope, false).then(() => {
+			self._paused = false;
+			dispatch(self.dom, 'ln-api-queue:resumed', {});
+			return self._drain();
+		}).catch(error => {
+			dispatch(self.dom, 'ln-api-queue:error', { operation: 'resume', error });
+		});
+	};
+
+	_component.prototype._onDrain = function () {
+		const self = this;
+		return _storage.resetFailed(self.scope).then(() => {
+			const activeDrain = self._drainPromise;
+			return activeDrain ? activeDrain.then(() => self._drain()) : self._drain();
+		}).catch(error => {
+			dispatch(self.dom, 'ln-api-queue:error', { operation: 'manual-drain', error });
+		});
+	};
+
+	_component.prototype._onClear = function () {
+		const self = this;
+		self._timers.forEach(timer => clearTimeout(timer));
+		self._timers.clear();
+		return _storage.clear(self.scope).then(() => {
+			self._paused = false;
+			dispatch(self.dom, 'ln-api-queue:pending-count', { count: 0, scope: self.scope });
+			dispatch(self.dom, 'ln-api-queue:drained', { scope: self.scope });
+		}).catch(error => {
+			dispatch(self.dom, 'ln-api-queue:error', { operation: 'clear', error });
+		});
+	};
+
+	_component.prototype._bindEvents = function () {
+		const self = this;
+		self._handlers = {
+			enqueue: e => self._onEnqueue(e),
+			ack: e => self._onAck(e),
+			nack: e => self._onNack(e),
+			remap: e => self._onRemap(e),
+			resolveCreate: e => self._onResolveCreate(e),
+			resume: () => self._onResume(),
+			drain: () => self._onDrain(),
+			clear: () => self._onClear()
+		};
+
+		self.dom.addEventListener('ln-api-queue:request-enqueue', self._handlers.enqueue);
+		self.dom.addEventListener('ln-api-queue:ack', self._handlers.ack);
+		self.dom.addEventListener('ln-api-queue:nack', self._handlers.nack);
+		self.dom.addEventListener('ln-api-queue:request-remap', self._handlers.remap);
+		self.dom.addEventListener('ln-api-queue:resolve-create', self._handlers.resolveCreate);
+		self.dom.addEventListener('ln-api-queue:request-resume', self._handlers.resume);
+		self.dom.addEventListener('ln-api-queue:request-drain', self._handlers.drain);
+		self.dom.addEventListener('ln-api-queue:request-clear', self._handlers.clear);
+	};
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+
+		const self = this;
+		self.dom.removeEventListener('ln-api-queue:request-enqueue', self._handlers.enqueue);
+		self.dom.removeEventListener('ln-api-queue:ack', self._handlers.ack);
+		self.dom.removeEventListener('ln-api-queue:nack', self._handlers.nack);
+		self.dom.removeEventListener('ln-api-queue:request-remap', self._handlers.remap);
+		self.dom.removeEventListener('ln-api-queue:resolve-create', self._handlers.resolveCreate);
+		self.dom.removeEventListener('ln-api-queue:request-resume', self._handlers.resume);
+		self.dom.removeEventListener('ln-api-queue:request-drain', self._handlers.drain);
+		self.dom.removeEventListener('ln-api-queue:request-clear', self._handlers.clear);
+		window.removeEventListener('online', self._onlineHandler);
+
+		self._timers.forEach(timer => clearTimeout(timer));
+		self._timers.clear();
+
+		dispatch(self.dom, 'ln-api-queue:destroyed', { scope: self.scope });
+		delete self.dom[DOM_ATTRIBUTE];
+	};
+
+	function _syncAttr(el) {
+		const instance = el[DOM_ATTRIBUTE];
+		if (!instance) return;
+		instance._drain();
+	}
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-api-queue', {
+		extraAttributes: ['data-ln-api-queue-online'],
+		onAttributeChange: _syncAttr
+	});
+})();