@livenetworks/ashlar 1.6.1 → 2.0.0

package/components/ln-table/src/table-model.js

@@ -0,0 +1,98 @@
+/**
+ * Calculates virtual scrolling slicing indices and padding heights.
+ * @param {number} scrollTop
+ * @param {number} viewportHeight
+ * @param {number} rowHeight
+ * @param {number} totalCount
+ * @param {number} [bufferRows=15]
+ * @returns {{ start: number, end: number, topPadding: number, bottomPadding: number }}
+ */
+export function calculateVirtualWindow(scrollTop, viewportHeight, rowHeight, totalCount, bufferRows = 15) {
+	if (totalCount <= 0 || rowHeight <= 0) {
+		return { start: 0, end: 0, topPadding: 0, bottomPadding: 0 };
+	}
+
+	const safeScrollTop = Math.max(0, scrollTop || 0);
+	const safeViewportHeight = Math.max(0, viewportHeight || 0);
+
+	const visibleStartIndex = Math.floor(safeScrollTop / rowHeight);
+	const visibleCount = Math.ceil(safeViewportHeight / rowHeight);
+
+	const start = Math.max(0, visibleStartIndex - bufferRows);
+	const end = Math.min(totalCount, visibleStartIndex + visibleCount + bufferRows);
+
+	const topPadding = start * rowHeight;
+	const bottomPadding = Math.max(0, (totalCount - end) * rowHeight);
+
+	return { start, end, topPadding, bottomPadding };
+}
+
+/**
+ * Computes selection state metadata across a dataset.
+ * @param {string[]|number[]} allIds
+ * @param {Set<string|number>|Array<string|number>} selectedIds
+ * @returns {{ totalCount: number, selectedCount: number, isAllSelected: boolean, isIndeterminate: boolean }}
+ */
+export function calculateSelectionState(allIds, selectedIds) {
+	const totalCount = Array.isArray(allIds) ? allIds.length : 0;
+	const selectedSet = selectedIds instanceof Set ? selectedIds : new Set(selectedIds || []);
+	let selectedCount = 0;
+
+	if (Array.isArray(allIds)) {
+		for (let i = 0; i < allIds.length; i++) {
+			if (selectedSet.has(allIds[i])) {
+				selectedCount++;
+			}
+		}
+	} else {
+		selectedCount = selectedSet.size;
+	}
+
+	const isAllSelected = totalCount > 0 && selectedCount === totalCount;
+	const isIndeterminate = selectedCount > 0 && selectedCount < totalCount;
+
+	return { totalCount, selectedCount, isAllSelected, isIndeterminate };
+}
+
+/**
+ * Toggles a row ID within a Set of selected IDs.
+ * @param {Set<string|number>} selectedSet
+ * @param {string|number} rowId
+ * @param {boolean} [forceState]
+ * @returns {Set<string|number>}
+ */
+export function toggleRowSelection(selectedSet, rowId, forceState) {
+	const next = new Set(selectedSet);
+	if (rowId == null) return next;
+
+	const shouldSelect = forceState !== undefined ? forceState : !next.has(rowId);
+	if (shouldSelect) {
+		next.add(rowId);
+	} else {
+		next.delete(rowId);
+	}
+	return next;
+}
+
+/**
+ * Selects or deselects all IDs.
+ * @param {Set<string|number>} selectedSet
+ * @param {Array<string|number>} allIds
+ * @param {boolean} selectAll
+ * @returns {Set<string|number>}
+ */
+export function toggleSelectAll(selectedSet, allIds, selectAll) {
+	const next = new Set(selectedSet);
+	if (!Array.isArray(allIds)) return next;
+
+	if (selectAll) {
+		for (let i = 0; i < allIds.length; i++) {
+			if (allIds[i] != null) next.add(allIds[i]);
+		}
+	} else {
+		for (let i = 0; i < allIds.length; i++) {
+			next.delete(allIds[i]);
+		}
+	}
+	return next;
+}

package/components/ln-table-coordinator/README.md

@@ -0,0 +1,61 @@
+# ln-table-coordinator
+
+> Applied to a wrapper element (`<div data-ln-table-coordinator>`) enclosing a table, search controls, and filter popovers. It listens for `ln-filter:change` within its host to toggle `.ln-filter-active` classes on header `<th>` buttons, intercepts `click` on `[data-ln-table-clear]` to reset search inputs and uncheck filter checkboxes, and captures page `'/'` `keydown` to focus the search input. It acts strictly as a Layer 2 mediator, never rendering table rows or holding query caches.
+
+A zero-dependency, per-instance, host-scoped coordinator component that wires external search hosts (`ln-search`), column filter popovers (`ln-filter`), header filter indicators, and clear button triggers to a single `ln-table`.
+
+`ln-table` itself is a Layer 1 primitive: it manages internal data state, virtual scroll rendering, pagination/windowing cache, row template cloning, cell formatting, and selection DOM state. `ln-table-coordinator` is the Layer 2 policy and mediator that wires external UI controls to `ln-table`.
+
+---
+
+## 🧭 Philosophy & Architecture
+
+1. **Layer Separation.** `ln-table` manages its own internal table state and DOM subtree only — no external DOM querying, no external input mirroring, and no visual indicator class toggles on header buttons. `ln-table-coordinator` handles all project UI wiring on top.
+2. **Host-Scoped, Per-Instance.** The coordinator is a real component: `[data-ln-table-coordinator]` is a **required wrapper**. Its handlers are bound to its own host element (`self.dom`), not `document`. The table, its `[data-ln-filter]` popovers, and its clear button(s) must all be descendants of the same coordinator host — outside its own subtree, the coordinator does not exist and does not look.
+3. **Event-Driven Communication.** Communication with `ln-table` occurs strictly via CustomEvents (`ln-table:set-search`, `ln-table:set-filter`, `ln-table:request-clear-filters`).
+
+**Breaking change:** a data-driven table's search/filter/clear-all only works when wrapped in `[data-ln-table-coordinator]`. There is no page-wide fallback — the coordinator does not resolve a table by scanning the whole document.
+
+---
+
+## 🛠️ Declarative API & Wire Contract
+
+| Target / Trigger | Event / Trigger | Behavior |
+| :--- | :--- | :--- |
+| `[data-ln-filter="tableId"]` (delivered by `ln-filter`) | `ln-filter:change` | Resolves target table in host, toggles `.ln-filter-active` indicator on header filter button. |
+| `[data-ln-table-clear]`, `[data-ln-table-clear-all]` | `click` | Resolves the table structurally within this host, symmetrically clears the linked search input and `data-ln-search` source attribute, checks filter reset checkboxes, removes `.ln-filter-active` visual classes, and dispatches `ln-table:request-clear-filters` to SSR tables. |
+| Document | `keydown` (`'/'`) | Focuses the search input inside the active coordinator wrapper on the page (or the first `[data-ln-search-for]` if none). Safely ignored when focus is in an input, textarea, or `isContentEditable` surface. |
+
+---
+
+## ⚡ Consumed & Dispatched Events
+
+### Consumed Events
+- `ln-filter:change` (on `self.dom`)
+- `click` (on `self.dom` — targets `[data-ln-table-clear]` and `[data-ln-table-clear-all]`)
+- `keydown` (`document` — key `'/'`, the sole document-level exception, see below)
+
+### Dispatched Events
+- `ln-table:request-clear-filters` (Target: the SSR table inside this host, Payload: `{ table }`)
+
+---
+
+## 🔧 Internals
+
+Source: `components/ln-table-coordinator/src/ln-table-coordinator.js`. This is a real per-instance component: `_component(dom)` calls `_bindEvents(self)`, which attaches listeners to `self.dom` and cleans them up symmetrically on `destroy()`.
+
+### Column-filter indicator
+
+`ln-filter` dispatches `ln-filter:change` on both its own `<ul data-ln-filter>` root and on the target element. The coordinator catches the event within its host, finds the `th[data-ln-table-filter-col="key"]`, and toggles `.ln-filter-active` on that header's `[data-ln-table-col-filter]` button based on `values.length > 0`. This header-indicator class is Layer-2 policy — which is why `ln-table` itself never sets it.
+
+### Clear
+
+A `click` on `[data-ln-table-clear]` / `[data-ln-table-clear-all]` resolves the table structurally: `clearBtn.closest('[data-ln-table]')`, falling back to `dom.querySelector('[data-ln-table]')` — always scoped to this host. It then runs: (1) strip `.ln-filter-active` off every filter button in the table, (2) blank the linked search input and set `data-ln-search=""` on the source host, (3) check each linked filter popover's `[data-ln-filter-reset]` and fire a bubbling `change`, (4) dispatch `ln-table:request-clear-filters` if the table is an SSR table.
+
+### `/` focus shortcut
+
+The sole deliberate exception to host-scoping. It remains a single `document`-level `keydown` listener registered once at module scope (outside `_component`/`_bindEvents`) — a page-level keyboard affordance, not coordination between a host and its children. Registering it per-instance would fire it once per coordinator on the page. It focuses the search input inside the active `[data-ln-table-coordinator]` wrapper, or the first `[data-ln-search]` on the page if none. Ignored when focus is already in an `INPUT`/`TEXTAREA`, `isContentEditable` surface (e.g. `ln-editor`), or when the event was already `defaultPrevented`.
+
+### Multi-coordinator isolation
+
+Each `_component(dom)` instance closures its handlers over its own `dom`; `addEventListener` on a specific host node only fires for events whose bubble path passes through that node. Two coordinator hosts on the same page cannot see each other's descendants' events — no shared/global state exists to leak. The `/` shortcut is the sole intentional exception to this isolation — it is document-scoped by design.

package/components/ln-table-coordinator/ln-table-coordinator.js

@@ -0,0 +1 @@
+(function(){"use strict";function L(){return typeof window>"u"?!1:window.lnDebug===!0||window.lnCore&&window.lnCore._debugSink?!0:typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug")||document.body.querySelector("[data-ln-debug]")!==null:!1}function S(e){if(typeof window>"u")return!1;if(window.lnDebug===!0)return!0;if(window.lnCore&&window.lnCore._debugIsContained)return e?window.lnCore._debugIsContained(e):window.lnCore._debugSink!==null;if(e&&e.closest){const t=e.closest("[data-ln-debug]");return!(!t||typeof document<"u"&&t===document.documentElement)}return typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug"):!1}if(typeof window<"u"&&(window.lnCore=window.lnCore||{},!window.lnCore._warnBound)){window.lnCore._warnBound=!0;const e=console.warn;console.warn=function(...t){if(typeof t[0]=="string"&&(t[0].startsWith("[ln-")||t[0].startsWith("[lnCore"))){let r=null;for(let i=1;i<t.length;i++)if(t[i]&&t[i].nodeType===1){r=t[i];break}if(!S(r))return}e.apply(console,t)}}function I(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:r}))}function _(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){_(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const $={};function V(e,t){$[e]=t}function H(e){return $[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=V,window.lnCore.getDataMapper=H);function U(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,_(function(){new MutationObserver(function(){I(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const D={};function K(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];D[n]=t}function P(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return D[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=K,window.lnCore.getLocaleFallback=P,window.lnCore.ensureLocaleObserver=U);const k={};function Q(e,t){k[e]||(k[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=k[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function N(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let s=0;s<n.length;s++){const a=n[s],o=a.getAttribute("data-ln-field");t[o]!=null&&(a.textContent=t[o])}const r=e.querySelectorAll("[data-ln-attr]");for(let s=0;s<r.length;s++){const a=r[s],o=a.getAttribute("data-ln-attr").split(",");for(let c=0;c<o.length;c++){const u=o[c].trim().split(":");if(u.length!==2)continue;const d=u[0].trim(),f=u[1].trim();t[f]!=null&&a.setAttribute(d,t[f])}}const i=e.querySelectorAll("[data-ln-show]");for(let s=0;s<i.length;s++){const a=i[s],o=a.getAttribute("data-ln-show");o in t&&a.classList.toggle("hidden",!t[o])}const l=e.querySelectorAll("[data-ln-class]");for(let s=0;s<l.length;s++){const a=l[s],o=a.getAttribute("data-ln-class").split(",");for(let c=0;c<o.length;c++){const u=o[c].trim().split(":");if(u.length!==2)continue;const d=u[0].trim(),f=u[1].trim();f in t&&a.classList.toggle(d,!!t[f])}}return e}function X(e,t){e.matches&&e.matches("[data-ln-form], [data-ln-fillable]")&&(window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",e,t??null),e.dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0})));const n=e.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let r=0;r<n.length;r++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[r],t??null),n[r].dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));return e}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(e){if(!(!e.target.matches||!e.target.matches("[data-ln-fillable]")))if(e.detail)N(e.target,e.detail);else{const t=e.target.querySelectorAll("[data-ln-field]");for(let n=0;n<t.length;n++)t[n].textContent=""}})));function R(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const l=n.currentNode;l.textContent.indexOf("{{")!==-1&&(l.textContent=l.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(s,a){return t[a]!==void 0?t[a]:""}))}const r=function(l,s){return t[s]!==void 0?t[s]:""},i=Array.from(e.querySelectorAll("*"));e.nodeType===1&&i.push(e);for(let l=0;l<i.length;l++){const s=i[l],a=s.attributes;for(let o=0;o<a.length;o++){const c=a[o];c.value.indexOf("{{")!==-1&&s.setAttribute(c.name,c.value.replace(/\{\{\s*(\w+)\s*\}\}/g,r))}}return e}function G(e,t,n,r,i,l){const s={};for(let o=0;o<e.children.length;o++){const c=e.children[o],u=c.getAttribute("data-ln-render-key");u&&(s[u]=c)}const a=document.createDocumentFragment();for(let o=0;o<t.length;o++){const c=t[o],u=String(r(c));let d=s[u];if(d)i(d,c,o);else{const f=Q(n,l);if(!f||(R(f,c),d=f.firstElementChild,!d))continue;d.setAttribute("data-ln-render-key",u),i(d,c,o)}a.appendChild(d)}e.textContent="",e.appendChild(a)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=R,window.lnCore.fill=N,window.lnCore.lnFill=X,window.lnCore.renderList=G);function B(e,t,n,r,i){if(!e||t===null)return!0;const l=r||"ln-component",s=e.type;if(s==="trigger"||s==="marker"||s==="string"||s==="list"||!s||t===""&&e.fallback!==void 0)return!0;const a=o=>{i?console.warn(o,i):console.warn(o)};if(s==="boolean"){const o=t.trim().toLowerCase();return o!==""&&o!=="true"&&o!=="false"&&o!=="1"&&o!=="0"?(a(`[${l}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(s==="enum"){const o=e.values||[];return o.includes(t)?!0:(a(`[${l}] Invalid value "${t}" for attribute "${n}". Allowed: ${o.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(s==="integer"){if(!/^-?\d+$/.test(t))return a(`[${l}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const o=parseInt(t,10);return e.min!==void 0&&o<e.min?(a(`[${l}] Value ${o} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&o>e.max?(a(`[${l}] Value ${o} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(s==="float")return isNaN(Number(t))?(a(`[${l}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(s==="json")try{return JSON.parse(t),!0}catch(o){return a(`[${l}] Invalid JSON for attribute "${n}": ${o.message}. Fallback: ${e.fallback}.`),!1}return!0}function J(e){const t={};for(const n in e){const r=e[n];r&&r.effect&&(t[n]=r.effect)}return Object.keys(t).length?t:null}function z(e){if(e.onAttrChange&&!e.declared)return null;const t=new Set;if(e.effects)for(const n in e.effects)t.add(n);if(e.onAttrChange&&e.declared)for(const n of e.declared)t.add(n);return t}function E(e,t,n,r){if(e.nodeType!==1)return;const l=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",s=Array.from(e.querySelectorAll(l));e.matches&&e.matches(l)&&s.push(e);for(const a of s)if(!a[n]){window.lnCore._persistSink&&a.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(a,t);try{a[n]=new r(a)}catch(o){console.error("["+n+"] init failed",a,o)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function Y(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function Z(e){typeof window<"u"?(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[],window.lnCore._bootHolds>0?window.lnCore._bootQueue.push(e):setTimeout(e,0)):e()}function F(){window.lnCore=window.lnCore||{};const e=window.lnCore._attrRegistry=window.lnCore._attrRegistry||{byAttr:new Map,reactive:[],persist:[]};return e.byReactive=e.byReactive||new Map,e.reactiveWildcard=e.reactiveWildcard||[],e}function ee(e){const t=F(),n=e.observed||[];for(let r=0;r<n.length;r++){const i=n[r];t.byAttr.has(i)||t.byAttr.set(i,[]),t.byAttr.get(i).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const r in e.attributes){t.byDeclaredAttr.has(r)||t.byDeclaredAttr.set(r,[]);const i=t.byDeclaredAttr.get(r);i.some(l=>l.componentTag===e.componentTag)||i.push({spec:e.attributes[r],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const r=z(e);if(r===null)t.reactiveWildcard.push(e);else for(const i of r)t.byReactive.has(i)||t.byReactive.set(i,[]),t.byReactive.get(i).push(e)}e.persist&&t.persist.push(e)}function M(e,t,n,r){for(let i=0;i<e.length;i++){const l=e[i];if(!t[l.attribute])continue;const s=l.effects&&l.effects[n];s?s(t,n,r):l.onAttrChange&&(!l.declared||l.declared.has(n))&&l.onAttrChange(t,n,r)}}function te(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const r=F(),i=r.byAttr.get(n);if(L()&&r.byDeclaredAttr&&r.byDeclaredAttr.has(n)&&S(t)){const l=r.byDeclaredAttr.get(n),s=t.getAttribute(n);for(let a=0;a<l.length;a++)B(l[a].spec,s,n,l[a].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||i)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const l=r.byReactive.get(n);l&&M(l,t,n,e.oldValue),r.reactiveWildcard.length&&M(r.reactiveWildcard,t,n,e.oldValue)}if(i)for(let l=0;l<i.length;l++){const s=i[l];if(s.handler){s.handler(t,n,e.oldValue);continue}s.onAttributeChange&&t[s.attribute]?s.onAttributeChange(t,n):(E(t,s.selector,s.attribute,s.ComponentFn),s.onInit&&s.onInit(t))}}function ne(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,_(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{te(t[n])}catch(r){console.error("[ln-core] mutation handler failed",t[n].target,r)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function W(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function re(e){const t=W();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const r=t[n];if(r.onSubtreeChange){const i=r.query,l=e.target.nodeType===1?e.target.matches(i)?e.target:e.target.closest(i):e.target.parentElement?e.target.parentElement.closest(i):null;l&&r.onSubtreeChange(l,e)}}for(let n=0;n<e.addedNodes.length;n++){const r=e.addedNodes[n];if(r.nodeType===1)for(let i=0;i<t.length;i++){const l=t[i];E(r,l.selector,l.attribute,l.ComponentFn),l.onInit&&l.onInit(r)}}for(let n=0;n<e.removedNodes.length;n++){const r=e.removedNodes[n];if(r.nodeType===1)for(let i=0;i<t.length;i++){const l=t[i],s=l.query,a=Array.from(r.querySelectorAll(s));r.matches&&r.matches(s)&&a.push(r);for(let o=0;o<a.length;o++){const c=a[o];if(!document.contains(c)){const u=c[l.attribute];if(u&&typeof u.destroy=="function")try{u.destroy()}catch(d){console.error("["+l.attribute+"] destroy failed",c,d)}delete c[l.attribute]}}}}}}function oe(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,_(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const r=t[n];if(r.type==="childList")try{re(r)}catch(i){console.error("[ln-core] lifecycle handler failed",r.target,i)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function le(e,t,n,r,i={}){const l=i.extraAttributes||[],s=i.onAttributeChange||null,a=i.onSubtreeChange||null,o=i.onInit||null,c=i.onAttrChange||null,u=i.effects||null,d=i.attributes||null,f=d?J(d):u,m=d?new Set(Object.keys(d)):null,h=i.persist||null;function w(A){const p=A||document.body;if(E(p,e,t,n),d&&L())for(const v in d){const be=d[v],T=Array.from(p.querySelectorAll("["+v+"]"));p.matches&&p.matches("["+v+"]")&&T.push(p);for(let O=0;O<T.length;O++){const x=T[O];S(x)&&B(be,x.getAttribute(v),v,r,x)}}o&&o(p)}const y=[];if(e.indexOf("[")!==-1){const A=/\[([\w-]+)/g;let p;for(;(p=A.exec(e))!==null;)y.push(p[1])}else y.push(e);ee({selector:e,attribute:t,componentTag:r,attributes:d,ComponentFn:n,onInit:o,observed:y.concat(l),onAttributeChange:s,onAttrChange:c,effects:f,declared:m,persist:h}),ne();const b=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";W().push({selector:e,attribute:t,ComponentFn:n,onInit:o,onSubtreeChange:a,query:b}),oe(),window[t]=w;function g(){Y()>0?Z(function(){w(document.body)}):w(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",g):g(),w}function j(e){return(e||"").replace(/^#/,"")}function q(e){const t=e===void 0?location.hash:e,n={},r=j(t);if(!r)return n;const i=r.split("&");for(let l=0;l<i.length;l++){const s=i[l];if(!s)continue;const a=s.indexOf(":"),o=a>-1?s.slice(0,a):s,c=a>-1?s.slice(a+1):"";if(o)try{n[o]=decodeURIComponent(c)}catch{n[o]=c}}return n}function ie(e){if(!e)return null;const t=q();return e in t?t[e]:null}function se(e,t){if(!e)return;const n=q();t==null?delete n[e]:n[e]=String(t);const i=Object.keys(n).map(function(l){const s=n[l];return s===""?l:l+":"+encodeURIComponent(s)}).join("&");j(location.hash)!==i&&(location.hash=i)}function ae(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function ce(e,t){if(!e||!e.hasAttribute("data-ln-hash"))return null;const n=e.getAttribute("data-ln-hash");if(n&&n.trim()!=="")return n.trim();const r=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return r?t?r+"-"+t:r:t||null}function ue(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function de(e){return!e||typeof e!="string"?null:e.endsWith(".asc")?{fieldOrColumn:e.slice(0,-4),direction:"asc"}:e.endsWith(".desc")?{fieldOrColumn:e.slice(0,-5),direction:"desc"}:null}function fe(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function we(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),r=e.slice(t+1),i=r?r.split(",").map(function(l){try{return decodeURIComponent(l)}catch{return l}}).filter(Boolean):[];return{key:n,values:i}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=q,window.lnCore.hashGet=ie,window.lnCore.hashSet=se,window.lnCore.hashLinkClick=ae,window.lnCore.resolveHashNamespace=ce,window.lnCore.hashSortEncode=ue,window.lnCore.hashSortDecode=de,window.lnCore.hashFilterEncode=fe,window.lnCore.hashFilterDecode=we),(function(){const e="data-ln-table-coordinator",t="lnTableCoordinator";if(window[t]!==void 0)return;const n={"data-ln-table-coordinator":{type:"marker",description:"Mounts table coordinator mediating between table, search, filter, and pagination"}};document.addEventListener("keydown",function(a){if(a.key!=="/"||a.defaultPrevented||document.activeElement&&(document.activeElement.tagName==="INPUT"||document.activeElement.tagName==="TEXTAREA"||document.activeElement.isContentEditable))return;const o=document.querySelector("["+e+"] [data-ln-search-for]")||document.querySelector("[data-ln-search-for]");if(!o)return;const c=o.tagName==="INPUT"||o.tagName==="TEXTAREA"?o:o.querySelector('input[type="search"], input[type="text"], input');c&&(a.preventDefault(),c.focus())});function r(a){return this.dom=a,s(this),this}function i(a,o){const c=o?'[data-ln-search-for="'+o+'"]':"[data-ln-search-for]",u=a.querySelector(c)||document.querySelector(c);return u?u.tagName==="INPUT"||u.tagName==="TEXTAREA"?u:u.querySelector("input, textarea"):null}function l(a,o){if(o){const u=a.querySelectorAll('[data-ln-filter="'+o+'"]');if(u.length>0)return u;const d=document.querySelectorAll('[data-ln-filter="'+o+'"]');if(d.length>0)return d}const c=a.querySelectorAll("[data-ln-filter]");return c.length>0?c:document.querySelectorAll("[data-ln-filter]")}function s(a){const o=a.dom;function c(u){const d=u.target;if(d&&d.hasAttribute&&(d.hasAttribute("data-ln-table")||d.tagName==="TABLE"))return d;const f=u.detail&&u.detail.targetId||d&&d.id;return f?o.querySelector('[data-ln-table-source="'+f+'"]')||o.querySelector('[data-ln-table="'+f+'"]')||o.querySelector("#"+f)||(o.id===f?o:null)||document.getElementById(f):null}a._handlers={filter:function(u){if(!u.detail)return;const d=c(u);if(!d)return;const f=u.detail.key,m=u.detail.values||[],h=d.querySelectorAll("th");for(let w=0;w<h.length;w++)if((h[w].getAttribute("data-ln-table-filter-col")||h[w].getAttribute("data-ln-filter-col")||h[w].getAttribute("data-ln-filter-key")||h[w].getAttribute("data-ln-field"))===f){const C=h[w].querySelector("[data-ln-table-col-filter], .table-filter");C&&C.classList.toggle("ln-filter-active",m.length>0);break}},clear:function(u){const d=u.target.closest("[data-ln-table-clear], [data-ln-table-clear-all]");if(!d)return;const f=d.closest("[data-ln-table], table")||o.querySelector("[data-ln-table], table");if(!f)return;const m=f.lnTable&&f.lnTable.name||f.id,h=f.querySelectorAll("th");for(let b=0;b<h.length;b++){const g=h[b].querySelector("[data-ln-table-col-filter], .table-filter");g&&g.classList.remove("ln-filter-active")}const w=f.getAttribute("data-ln-table-source")||f.id,y=w?document.getElementById(w):null;if(y&&y.hasAttribute("data-ln-search"))y.setAttribute("data-ln-search","");else{const b=i(o,w);b&&b.value!==""&&(b.value="",b.dispatchEvent(new Event("input",{bubbles:!0})))}const C=l(o,w);for(let b=0;b<C.length;b++){const g=C[b].querySelector("[data-ln-filter-reset]");if(!g)continue;const A=C[b].querySelectorAll("input:not([data-ln-filter-reset]):checked").length>0;(!g.checked||A)&&(g.checked=!0,g.dispatchEvent(new Event("change",{bubbles:!0})))}f.lnTable&&!f.hasAttribute("data-ln-table-source")&&I(f,"ln-table:request-clear-filters",{table:m})}},o.addEventListener("ln-filter:change",a._handlers.filter),o.addEventListener("click",a._handlers.clear)}r.prototype.destroy=function(){this.dom[t]&&(this._handlers&&(this.dom.removeEventListener("ln-filter:change",this._handlers.filter),this.dom.removeEventListener("click",this._handlers.clear),this._handlers=null),delete this.dom[t])},le(e,t,r,"ln-table-coordinator",{attributes:n})})()})();

package/components/ln-table-coordinator/ln-table-coordinator.schema.json

@@ -0,0 +1,93 @@
+{
+	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
+	"component": "ln-table-coordinator",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-field": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-filter": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-filter-col": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-filter-key": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-filter-reset": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-search": {
+			"direction": "both",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-search-for": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-table": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-table-clear": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-table-clear-all": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-table-col-filter": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-table-coordinator": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			],
+			"type": "marker",
+			"description": "Mounts table coordinator mediating between table, search, filter, and pagination"
+		},
+		"data-ln-table-filter-col": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		},
+		"data-ln-table-source": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table-coordinator.js"
+			]
+		}
+	}
+}

package/components/ln-table-coordinator/src/ln-table-coordinator.js

@@ -0,0 +1,193 @@
+import { registerComponent, dispatch } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-table-coordinator';
+	const DOM_ATTRIBUTE = 'lnTableCoordinator';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-table-coordinator': { type: 'marker', description: 'Mounts table coordinator mediating between table, search, filter, and pagination' }
+	};
+
+	// ─── Keyboard Navigation Search Focus ('/' shortcut) ──
+	// Deliberate, user-approved exception to host-scoping: this is a
+	// page-level keyboard affordance, not coordination between a host and
+	// its children, so it stays a single module-scope document listener
+	// exactly as it behaves today (unchanged resolution order). Registering
+	// it per-instance inside _bindEvents would fire it once per coordinator
+	// on the page — this is why it lives outside _component/_bindEvents.
+
+	document.addEventListener('keydown', function (e) {
+		if (e.key !== '/') return;
+		if (e.defaultPrevented) return;
+		if (document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' || document.activeElement.isContentEditable)) return;
+
+		// Resolve search input inside active coordinator wrapper or first visible search
+		const searchHost = document.querySelector('[' + DOM_SELECTOR + '] [data-ln-search-for]')
+			|| document.querySelector('[data-ln-search-for]');
+		if (!searchHost) return;
+
+		const input = (searchHost.tagName === 'INPUT' || searchHost.tagName === 'TEXTAREA')
+			? searchHost
+			: searchHost.querySelector('input[type="search"], input[type="text"], input');
+
+		if (input) {
+			e.preventDefault();
+			input.focus();
+		}
+	});
+
+	// ─── Component Constructor ─────────────────────────────
+
+	function _component(dom) {
+		this.dom = dom;
+		_bindEvents(this);
+		return this;
+	}
+
+	function _findSearchInput(dom, sourceId) {
+		const sel = sourceId ? '[data-ln-search-for="' + sourceId + '"]' : '[data-ln-search-for]';
+		const host = dom.querySelector(sel) || document.querySelector(sel);
+		if (!host) return null;
+		return (host.tagName === 'INPUT' || host.tagName === 'TEXTAREA')
+			? host
+			: host.querySelector('input, textarea');
+	}
+
+	function _findFilterElements(dom, sourceId) {
+		if (sourceId) {
+			const scoped = dom.querySelectorAll('[data-ln-filter="' + sourceId + '"]');
+			if (scoped.length > 0) return scoped;
+			const global = document.querySelectorAll('[data-ln-filter="' + sourceId + '"]');
+			if (global.length > 0) return global;
+		}
+		const fallbackScoped = dom.querySelectorAll('[data-ln-filter]');
+		return fallbackScoped.length > 0 ? fallbackScoped : document.querySelectorAll('[data-ln-filter]');
+	}
+
+	// ─── Event Binding (host-scoped — own subtree only) ────
+
+	function _bindEvents(self) {
+		const dom = self.dom;
+
+		// Point-to-point only: the event either landed on the table itself, or it
+		// names the source that table is bound to. No "first table in the host"
+		// fallback — ln-filter fires ln-filter:change on its own <ul>
+		// root AND on the target, so a fallback makes the coordinator act twice
+		// for one user change and emit two identical fetches.
+		function _resolveTable(e) {
+			const el = e.target;
+			if (el && el.hasAttribute && (el.hasAttribute('data-ln-table') || el.tagName === 'TABLE')) return el;
+			const targetId = (e.detail && e.detail.targetId) || (el && el.id);
+			if (!targetId) return null;
+			return dom.querySelector('[data-ln-table-source="' + targetId + '"]') ||
+			       dom.querySelector('[data-ln-table="' + targetId + '"]') ||
+			       dom.querySelector('#' + targetId) ||
+			       (dom.id === targetId ? dom : null) ||
+			       document.getElementById(targetId);
+		}
+
+		self._handlers = {
+			// Query state is not forwarded here. The source owns search/filter/sort
+			// (docs/architecture/shared-query.md) and ln-data-coordinator re-serves
+			// every view bound to it — a second forwarder would fetch twice for one
+			// user change. What is left is the header indicator, which is Layer 2
+			// policy: ln-table never sets this class itself.
+			filter: function (e) {
+				if (!e.detail) return;
+				const table = _resolveTable(e);
+				if (!table) return;
+
+				const key = e.detail.key;
+				const values = e.detail.values || [];
+
+				const ths = table.querySelectorAll('th');
+				for (let i = 0; i < ths.length; i++) {
+					const colKey = ths[i].getAttribute('data-ln-table-filter-col') ||
+					               ths[i].getAttribute('data-ln-filter-col') ||
+					               ths[i].getAttribute('data-ln-filter-key') ||
+					               ths[i].getAttribute('data-ln-field');
+					if (colKey === key) {
+						const btn = ths[i].querySelector('[data-ln-table-col-filter], .table-filter');
+						if (btn) btn.classList.toggle('ln-filter-active', values.length > 0);
+						break;
+					}
+				}
+			},
+
+			// Clear-all has no ID binding of its own — resolve structurally,
+			// scoped to this host only (never document-wide).
+			clear: function (e) {
+				const clearBtn = e.target.closest('[data-ln-table-clear], [data-ln-table-clear-all]');
+				if (!clearBtn) return;
+
+				const table = clearBtn.closest('[data-ln-table], table') || dom.querySelector('[data-ln-table], table');
+				if (!table) return;
+
+				const name = (table.lnTable && table.lnTable.name) || table.id;
+
+				const ths = table.querySelectorAll('th');
+				for (let i = 0; i < ths.length; i++) {
+					const filterBtn = ths[i].querySelector('[data-ln-table-col-filter], .table-filter');
+					if (filterBtn) filterBtn.classList.remove('ln-filter-active');
+				}
+
+				// Query controls address the source (docs/architecture/shared-query.md);
+				// only an SSR table is its own source.
+				const sourceId = table.getAttribute('data-ln-table-source') || table.id;
+				const sourceEl = sourceId ? document.getElementById(sourceId) : null;
+				if (sourceEl && sourceEl.hasAttribute('data-ln-search')) {
+					// State component syncs input controls and emits ln-search:change
+					sourceEl.setAttribute('data-ln-search', '');
+				} else {
+					const input = _findSearchInput(dom, sourceId);
+					if (input && input.value !== '') {
+						input.value = '';
+						input.dispatchEvent(new Event('input', { bubbles: true }));
+					}
+				}
+
+				const filterEls = _findFilterElements(dom, sourceId);
+				for (let i = 0; i < filterEls.length; i++) {
+					const resetInput = filterEls[i].querySelector('[data-ln-filter-reset]');
+					if (!resetInput) continue;
+					const hasActiveValues = filterEls[i].querySelectorAll('input:not([data-ln-filter-reset]):checked').length > 0;
+					if (!resetInput.checked || hasActiveValues) {
+						resetInput.checked = true;
+						resetInput.dispatchEvent(new Event('change', { bubbles: true }));
+					}
+				}
+
+				// A data-driven table is refreshed by its source: the control resets
+				// above already emit the query change. Only an SSR table, which holds
+				// its own rows, still needs to be told directly.
+				if (table.lnTable && !table.hasAttribute('data-ln-table-source')) {
+					dispatch(table, 'ln-table:request-clear-filters', { table: name });
+				}
+			}
+		};
+
+		dom.addEventListener('ln-filter:change', self._handlers.filter);
+		dom.addEventListener('click', self._handlers.clear);
+	}
+
+	// ─── Destroy ────────────────────────────────────────────
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+
+		if (this._handlers) {
+			this.dom.removeEventListener('ln-filter:change', this._handlers.filter);
+			this.dom.removeEventListener('click', this._handlers.clear);
+			this._handlers = null;
+		}
+
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-table-coordinator', {
+		attributes: ATTRIBUTES
+	});
+})();

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

@@ -1,6 +1,9 @@
 # ln-tabs
 
-> N-way exclusive panel selection on a single container, managed reactively via the DOM.
+> Applied to a wrapper `<section data-ln-tabs>` containing trigger buttons (`data-ln-tab="key"`) and panels (`data-ln-panel="key"`).
+> On trigger `click`, it writes `data-ln-tabs-active="key"` on the wrapper. An attribute observer synchronizes the DOM:
+> toggling `class="hidden"` and `aria-hidden` on panels, and updating `aria-selected` on triggers. When configured with an `id`
+> and anchor triggers (`<a href="#id:key">`), it synchronizes the active tab with `window.location.hash` for deep-linking and browser history persistence.
 
 ---
 
@@ -48,9 +51,9 @@ Triggers and panels are bound via matching keys inside a wrapper. Inactive panel
 
 ## 3. The Declarative API & State Contract
 
-There are no imperative JavaScript methods (like `activate()` or `open()`) on the component instance. **The HTML attribute is the sole contract.** 
+State changes are driven declaratively via the `data-ln-tabs-active` attribute. **The HTML attribute is the sole source of truth.**
 
-Clicks, URL hash changes, localStorage restorations, and external scripts all change state by writing the active attribute on the wrapper:
+Clicks, URL hash changes, localStorage restorations, and external scripts all change state by writing the active attribute on the wrapper, dispatching request events, or calling the instance helper method:
 
 ```js
 const tabs = document.getElementById('user-tabs');
@@ -58,6 +61,12 @@ const tabs = document.getElementById('user-tabs');
 // Canonical write — switches the active tab
 tabs.setAttribute('data-ln-tabs-active', 'settings');
 
+// Or via command event
+tabs.dispatchEvent(new CustomEvent('ln-tabs:request-select', { detail: { key: 'settings' }, bubbles: true }));
+
+// Or via instance attribute-bridge method
+tabs.lnTabs.select('settings');
+
 // Read-only state query
 tabs.getAttribute('data-ln-tabs-active'); // Returns currently active key
 ```
@@ -82,19 +91,28 @@ Mixing both trigger types in one group falls back to persist mode and logs a con
 
 ---
 
-## 4. Transition Events
+## 4. Transition & Command Events
 
 All events bubble. The dispatch target is the wrapper element.
 
-| Event | Cancelable | `detail` | Dispatched When |
-|---|---|---|---|
-| **`ln-tabs:change`** | No | `{ key, tab, panel }` | After the active panel is swapped, ARIA synced, focus moved (if enabled), and localStorage updated. |
-| **`ln-tabs:destroyed`** | No | `{ target }` | Inside `destroy()`, after removing click and hashchange listeners. |
+| Event | Direction | Cancelable | `detail` | Dispatched / Handled When |
+|---|:---:|:---:|---|---|
+| **`ln-tabs:request-select`** | Listens | No | `{ key }` | Command event sent by coordinators or external triggers to select a tab. |
+| **`ln-tabs:before-change`** | Emits | **Yes** | `{ key, previousKey, tab, panel, target }` | Dispatched before active tab changes. Calling `event.preventDefault()` cancels the switch and reverts attribute/hash state. |
+| **`ln-tabs:change`** | Emits | No | `{ key, previousKey, tab, panel, target }` | After the active panel is swapped, ARIA synced, focus moved (if enabled), and localStorage updated. |
 
 ```js
+// Example: Prevent tab change if unsaved changes exist
+document.addEventListener('ln-tabs:before-change', (e) => {
+    if (hasUnsavedChanges) {
+        e.preventDefault();
+        alert('Please save changes before leaving this tab.');
+    }
+});
+
 // Example: Listen for tab changes
 document.addEventListener('ln-tabs:change', (e) => {
-    console.log(`Active tab in ${e.target.id} changed to: ${e.detail.key}`);
+    console.log(`Active tab changed from ${e.detail.previousKey} to: ${e.detail.key}`);
 });
 ```
 
@@ -146,16 +164,16 @@ Use **button triggers** and add `data-ln-persist="key"` to remember the active t
   ```
 - **Standalone IIFE**: For lightweight pages, load the standalone, self-registering IIFE version:
   ```html
-  <script src="js/ln-tabs/ln-tabs.js" defer></script>
+  <script src="components/ln-tabs/ln-tabs.js" defer></script>
   ```
-- **Active Source (ESM)**: Development source is located at [js/ln-tabs/src/ln-tabs.js](file:///c:/laragon/www/ln-ashlar/js/ln-tabs/src/ln-tabs.js).
+- **Active Source (ESM)**: Development source is located at [components/ln-tabs/src/ln-tabs.js](file:///c:/laragon/www/ln-ashlar/components/ln-tabs/src/ln-tabs.js).
 
 ---
 
 ## Hash codec (ln-core shared)
 
 ln-tabs uses the shared ln-core hash codec (`hashGet` / `hashSet` /
-`hashParse` from `js/ln-core/hash.js`) instead of a private parser. The
+`hashParse` from `components/ln-core/hash.js`) instead of a private parser. The
 grammar and behaviour are unchanged — anchor-trigger groups still produce
 `#nsKey:activeKey` fragments, still respond to `hashchange`, and still
 support back/forward navigation.
@@ -172,7 +190,7 @@ No markup or API change — this is an internal implementation improvement.
 
 ## 🔧 Internals
 
-Source: `js/ln-tabs/ln-tabs.js`. Zero cross-component imports — only `ln-core/helpers.js` (`registerComponent`, `dispatch`) and `ln-core/persist.js`.
+Source: `components/ln-tabs/ln-tabs.js`. Zero cross-component imports — only `ln-core` (`registerComponent`, `dispatch`).
 
 ### State
 
@@ -202,7 +220,7 @@ A non-empty `data-ln-tab` value wins if present; otherwise the `href` is split o
 
 ### Destroy
 
-Idempotent. Detaches every click handler and clears their double-attach guards, detaches `hashchange` only if hash-enabled, dispatches `ln-tabs:destroyed`, deletes `dom.lnTabs`. Does NOT reset visual state (`data-active`/`aria-selected` survive), clear `localStorage`, or remove `data-ln-tabs-active` — a future re-init resumes from whatever is left.
+Idempotent. Detaches every click handler and clears their double-attach guards, detaches `hashchange` only if hash-enabled, deletes `dom.lnTabs`. Does NOT reset visual state (`data-active`/`aria-selected` survive), clear `localStorage`, or remove `data-ln-tabs-active` — a future re-init resumes from whatever is left.
 
 ### Failure modes
 

package/components/ln-tabs/ln-tabs-dev.scss

@@ -0,0 +1,24 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Anchor Tabs Namespace Check: URL hash mode (<a> triggers) requires an id or data-ln-tabs-key namespace
+	[data-ln-tabs]:has(a[data-ln-tab]):not([id]):not([data-ln-tabs-key]),
+	[data-ln-tabs]:has(a[href^="#"]):not([id]):not([data-ln-tabs-key]) {
+		@include dev-dom-error("Anchor tabs (URL hash mode) require an 'id' or 'data-ln-tabs-key' namespace on [data-ln-tabs].");
+	}
+
+	// 2. Tab Trigger Empty Key: button triggers must have a non-empty key
+	button[data-ln-tab=""] {
+		@include dev-inline-error("data-ln-tab key cannot be empty");
+	}
+
+	// 3. Tab Trigger Type: button triggers inside forms must be explicitly type="button" to prevent submit events
+	form button[data-ln-tab]:not([type="button"]) {
+		@include dev-inline-error("tab trigger within form must have type='button'");
+	}
+
+	// 4. Tab Trigger Nesting Check: [data-ln-tab] must be nested inside a [data-ln-tabs] parent container
+	[data-ln-tab]:not([data-ln-tabs] *) {
+		@include dev-inline-error("[data-ln-tab] is orphaned (not inside a [data-ln-tabs] container)");
+	}
+}