@livenetworks/ashlar 1.6.0 → 2.0.0

package/components/ln-persist/README.md

@@ -0,0 +1,151 @@
+# ln-persist
+
+> Applied as a declarative decorator attribute (`data-ln-persist`) to an element owned by a persist-enabled component.
+> On initialization, it reads stored state from `localStorage.getItem(storageKey)` and applies it via `el.setAttribute(attr, value)`.
+> A `MutationObserver` watches the component's state attribute: whenever it changes, it synchronizes the new value back to
+> `localStorage.setItem(storageKey, value)` with zero imperative JS API calls.
+
+`data-ln-persist` only has an effect on an element owned by a component that
+declares `options.persist` — currently `ln-toggle`, `ln-tabs`, `ln-sort`,
+`ln-search`, `ln-filter`. On any other element the attribute is a silent
+no-op.
+
+---
+
+## 🧭 Philosophy
+
+Persistence used to be five components hand-calling `persistGet`/`persistSet`
+from `ln-core/persist.js` inside their own constructors and attribute-sync
+handlers — coupling every persistence-aware component to that module's exact
+function signatures and JSON-value shape. `ln-persist` inverts this: each
+owning component declares a `persist: { attr, hashActive }` block when it
+calls `registerComponent(...)`, and `ln-persist` does the restoring and
+saving from the outside, through the same shared `findElements` funnel every
+component instance is already constructed through. No owning component
+imports anything from `ln-persist`, and `ln-persist` never imports any
+owning component.
+
+---
+
+## 🛠️ Declarative API Contract
+
+### HTML Attributes
+
+| Attribute | Elements | Description |
+| :--- | :--- | :--- |
+| `data-ln-persist` | Any element owned by a persist-declaring component | Opt-in. Bare = use `el.id` as the storage key. `data-ln-persist="key"` = explicit key override. |
+| `data-ln-persist-scope` | Same as `data-ln-persist` | Opt-in, independent attribute. `"page"` scopes the stored key to the current URL pathname. Absent = global (same key on every page). |
+
+There is no Programmatic JS API — `persistGet`/`persistSet`/`persistRemove`/
+`persistClear` do not exist. The attribute is the sole contract.
+
+### Storage key format
+
+Global by default:
+
+```
+ln:{id}:{attr}
+```
+
+Page-scoped, via `data-ln-persist-scope="page"`:
+
+```
+ln:{id}:{pagePath}:{attr}
+```
+
+- `id` — the `data-ln-persist="key"` value if non-empty, else `el.id`. Missing
+  both → `console.warn('[ln-persist] Element requires id or data-ln-persist="key"', el)`, persistence skipped.
+- `attr` — the owning component's declared `persist.attr` (e.g.
+  `data-ln-toggle`, `data-ln-tabs-active`, `data-ln-sort-state`,
+  `data-ln-search`, `data-ln-filter-values`).
+- `pagePath` — `location.pathname`, lowercase, trailing slash stripped, or
+  `/` for root.
+
+This orphans every key written under the previous
+`ln:{component}:{pathname}:{id}` format — harmless leftover localStorage,
+never read again.
+
+Persisted values are raw attribute strings — no `JSON.stringify`/`parse`.
+The restore/save unit is always "one DOM attribute's string value," not the
+old composite objects (`{field,column,direction,targetId}` for sort,
+`{key,values}` for filter).
+
+### Hash wins
+
+When the owning component's `persist.hashActive(el)` returns `true`,
+`ln-persist` skips both restore and save for that element entirely — the URL
+hash is authoritative, never double-written to both hash and `localStorage`.
+This is a behaviour change for `ln-search`/`ln-filter`, which previously
+wrote both; `ln-tabs` was already fully hash-gated on save, `ln-sort` only on
+restore.
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **Persisting without a stable key.** `data-ln-persist` with no value falls
+  back to `el.id`; an element with neither silently skips persistence
+  (`console.warn`s once).
+- **Expecting `data-ln-persist-scope="page"` alone to persist anything.**
+  It only changes the key shape of an element that already has
+  `data-ln-persist` — it's not a standalone opt-in.
+- **Expecting a composite persisted value.** Every owner persists exactly one
+  attribute's string value now, not an object.
+
+---
+
+## 🔧 Internals
+
+Source: `components/ln-persist/src/ln-persist.js`. No `DOM_SELECTOR`,
+`DOM_ATTRIBUTE`, or instance — registry-driven, sink-filling module.
+Structurally closest existing precedent: `components/ln-debug/src/gate.js`
+(nullable sink, single module-level idempotency guard, no instance).
+
+### The sink
+
+`ln-core` exposes a nullable `setPersistSink(sink)`, mirroring
+`setDebugSink` exactly. `findElements` — the single funnel every component
+instance in the library is constructed through (boot sweep, each
+component's own `childList` observer, and the shared observer's legacy
+upgrade path) — calls `window.lnCore._persistSink(el, selector)` for any
+element carrying `data-ln-persist`, immediately before constructing that
+element's owning component instance. `ln-persist` fills the slot with
+`_persistSink`, which looks up the matching entry in `registry.persist`
+(populated by `registerComponent`'s `persist:` option) by `selector`, and —
+unless `persist.hashActive(el)` is true — writes the stored value onto `el`
+with `setAttribute`, synchronously, before the owner's constructor runs.
+
+### Ordering — no boot gate
+
+`_registerAttrEntry(...)` always runs before that same component's own
+`boot()` — see `ln-core`'s `registerComponent`. So by the time any
+owner's `findElements` call reaches the sink, that owner's own `persist:`
+declaration is already in `registry.persist`, regardless of what order the
+other four owners import in. `ln-persist` only needs to precede the *first*
+owner's import so `setPersistSink(...)` has already run — a plain
+import-order invariant (`components/index.js` imports `ln-persist` before
+`ln-tabs`, the earliest of the five owners), not a gate on anything else's
+boot timing.
+
+### Path 3 — elements inserted after initial boot
+
+A node inserted later by `ln-include`, `ln-router`, or an `ln-table` render
+hits the same owning component's `childList` observer, which calls the same
+`findElements`, which runs the same sink check. Restores correctly for
+free — no separate mechanism, no gap.
+
+### Save-path wiring
+
+Wired lazily, the first time the sink is invoked for a given `persist.attr`
+— not at `ln-persist`'s own module evaluation, since no owner has
+registered yet at that point. `observeAttributes([persist.attr], ...)` is
+called once per `persist.attr`, guarded by a module-level `_wiredAttrs` Set.
+The save handler re-derives the key, checks `hashActive`, and writes or
+removes the `localStorage` entry on every subsequent mutation of that
+attribute.
+
+### Destroy
+
+None — no per-element instance to tear down. This module installs a
+document-level sink for the life of the page, same category as `ln-debug`'s
+gate.

package/components/ln-persist/ln-persist.js

@@ -0,0 +1 @@
+(function(){"use strict";function D(){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 C(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 o=null;for(let s=1;s<t.length;s++)if(t[s]&&t[s].nodeType===1){o=t[s];break}if(!C(o))return}e.apply(console,t)}}function L(e){window.lnCore=window.lnCore||{},window.lnCore._persistSink=e}function I(e,t,n){const o=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,o),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:o}))}function b(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){b(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const m={};function F(e,t){m[e]=t}function E(e){return m[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=F,window.lnCore.getDataMapper=E);function R(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,b(function(){new MutationObserver(function(){I(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const y={};function T(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];y[n]=t}function W(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return y[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=T,window.lnCore.getLocaleFallback=W,window.lnCore.ensureLocaleObserver=R);const h={};function B(e,t){h[e]||(h[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=h[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function A(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let r=0;r<n.length;r++){const a=n[r],l=a.getAttribute("data-ln-field");t[l]!=null&&(a.textContent=t[l])}const o=e.querySelectorAll("[data-ln-attr]");for(let r=0;r<o.length;r++){const a=o[r],l=a.getAttribute("data-ln-attr").split(",");for(let u=0;u<l.length;u++){const d=l[u].trim().split(":");if(d.length!==2)continue;const c=d[0].trim(),f=d[1].trim();t[f]!=null&&a.setAttribute(c,t[f])}}const s=e.querySelectorAll("[data-ln-show]");for(let r=0;r<s.length;r++){const a=s[r],l=a.getAttribute("data-ln-show");l in t&&a.classList.toggle("hidden",!t[l])}const i=e.querySelectorAll("[data-ln-class]");for(let r=0;r<i.length;r++){const a=i[r],l=a.getAttribute("data-ln-class").split(",");for(let u=0;u<l.length;u++){const d=l[u].trim().split(":");if(d.length!==2)continue;const c=d[0].trim(),f=d[1].trim();f in t&&a.classList.toggle(c,!!t[f])}}return e}function M(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 o=0;o<n.length;o++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[o],t??null),n[o].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)A(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 _(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const i=n.currentNode;i.textContent.indexOf("{{")!==-1&&(i.textContent=i.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(r,a){return t[a]!==void 0?t[a]:""}))}const o=function(i,r){return t[r]!==void 0?t[r]:""},s=Array.from(e.querySelectorAll("*"));e.nodeType===1&&s.push(e);for(let i=0;i<s.length;i++){const r=s[i],a=r.attributes;for(let l=0;l<a.length;l++){const u=a[l];u.value.indexOf("{{")!==-1&&r.setAttribute(u.name,u.value.replace(/\{\{\s*(\w+)\s*\}\}/g,o))}}return e}function q(e,t,n,o,s,i){const r={};for(let l=0;l<e.children.length;l++){const u=e.children[l],d=u.getAttribute("data-ln-render-key");d&&(r[d]=u)}const a=document.createDocumentFragment();for(let l=0;l<t.length;l++){const u=t[l],d=String(o(u));let c=r[d];if(c)s(c,u,l);else{const f=B(n,i);if(!f||(_(f,u),c=f.firstElementChild,!c))continue;c.setAttribute("data-ln-render-key",d),s(c,u,l)}a.appendChild(c)}e.textContent="",e.appendChild(a)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=_,window.lnCore.fill=A,window.lnCore.lnFill=M,window.lnCore.renderList=q);function V(e,t,n,o,s){if(!e||t===null)return!0;const i=o||"ln-component",r=e.type;if(r==="trigger"||r==="marker"||r==="string"||r==="list"||!r||t===""&&e.fallback!==void 0)return!0;const a=l=>{s?console.warn(l,s):console.warn(l)};if(r==="boolean"){const l=t.trim().toLowerCase();return l!==""&&l!=="true"&&l!=="false"&&l!=="1"&&l!=="0"?(a(`[${i}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(r==="enum"){const l=e.values||[];return l.includes(t)?!0:(a(`[${i}] Invalid value "${t}" for attribute "${n}". Allowed: ${l.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(r==="integer"){if(!/^-?\d+$/.test(t))return a(`[${i}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const l=parseInt(t,10);return e.min!==void 0&&l<e.min?(a(`[${i}] Value ${l} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&l>e.max?(a(`[${i}] Value ${l} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(r==="float")return isNaN(Number(t))?(a(`[${i}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(r==="json")try{return JSON.parse(t),!0}catch(l){return a(`[${i}] Invalid JSON for attribute "${n}": ${l.message}. Fallback: ${e.fallback}.`),!1}return!0}function j(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 N(e,t,n,o){if(e.nodeType!==1)return;const i=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",r=Array.from(e.querySelectorAll(i));e.matches&&e.matches(i)&&r.push(e);for(const a of r)if(!a[n]){window.lnCore._persistSink&&a.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(a,t);try{a[n]=new o(a)}catch(l){console.error("["+n+"] init failed",a,l)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function v(){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 K(e){const t=v(),n=e.observed||[];for(let o=0;o<n.length;o++){const s=n[o];t.byAttr.has(s)||t.byAttr.set(s,[]),t.byAttr.get(s).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const o in e.attributes){t.byDeclaredAttr.has(o)||t.byDeclaredAttr.set(o,[]);const s=t.byDeclaredAttr.get(o);s.some(i=>i.componentTag===e.componentTag)||s.push({spec:e.attributes[o],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const o=j(e);if(o===null)t.reactiveWildcard.push(e);else for(const s of o)t.byReactive.has(s)||t.byReactive.set(s,[]),t.byReactive.get(s).push(e)}e.persist&&t.persist.push(e)}function k(e,t,n,o){for(let s=0;s<e.length;s++){const i=e[s];if(!t[i.attribute])continue;const r=i.effects&&i.effects[n];r?r(t,n,o):i.onAttrChange&&(!i.declared||i.declared.has(n))&&i.onAttrChange(t,n,o)}}function H(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const o=v(),s=o.byAttr.get(n);if(D()&&o.byDeclaredAttr&&o.byDeclaredAttr.has(n)&&C(t)){const i=o.byDeclaredAttr.get(n),r=t.getAttribute(n);for(let a=0;a<i.length;a++)V(i[a].spec,r,n,i[a].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||s)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const i=o.byReactive.get(n);i&&k(i,t,n,e.oldValue),o.reactiveWildcard.length&&k(o.reactiveWildcard,t,n,e.oldValue)}if(s)for(let i=0;i<s.length;i++){const r=s[i];if(r.handler){r.handler(t,n,e.oldValue);continue}r.onAttributeChange&&t[r.attribute]?r.onAttributeChange(t,n):(N(t,r.selector,r.attribute,r.ComponentFn),r.onInit&&r.onInit(t))}}function U(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,b(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{H(t[n])}catch(o){console.error("[ln-core] mutation handler failed",t[n].target,o)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function G(e,t){K({observed:e,handler:t}),U()}function S(e){return(e||"").replace(/^#/,"")}function p(e){const t=e===void 0?location.hash:e,n={},o=S(t);if(!o)return n;const s=o.split("&");for(let i=0;i<s.length;i++){const r=s[i];if(!r)continue;const a=r.indexOf(":"),l=a>-1?r.slice(0,a):r,u=a>-1?r.slice(a+1):"";if(l)try{n[l]=decodeURIComponent(u)}catch{n[l]=u}}return n}function J(e){if(!e)return null;const t=p();return e in t?t[e]:null}function P(e,t){if(!e)return;const n=p();t==null?delete n[e]:n[e]=String(t);const s=Object.keys(n).map(function(i){const r=n[i];return r===""?i:i+":"+encodeURIComponent(r)}).join("&");S(location.hash)!==s&&(location.hash=s)}function Q(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function X(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 o=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return o?t?o+"-"+t:o:t||null}function z(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function Y(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 Z(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function ee(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),o=e.slice(t+1),s=o?o.split(",").map(function(i){try{return decodeURIComponent(i)}catch{return i}}).filter(Boolean):[];return{key:n,values:s}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=p,window.lnCore.hashGet=J,window.lnCore.hashSet=P,window.lnCore.hashLinkClick=Q,window.lnCore.resolveHashNamespace=X,window.lnCore.hashSortEncode=z,window.lnCore.hashSortDecode=Y,window.lnCore.hashFilterEncode=Z,window.lnCore.hashFilterDecode=ee),(function(){if(window.lnCore&&window.lnCore._persistBound)return;window.lnCore=window.lnCore||{},window.lnCore._persistBound=!0;function e(){return location.pathname.replace(/\/+$/,"").toLowerCase()||"/"}function t(r,a){const l=r.getAttribute("data-ln-persist"),u=l!==null&&l!==""?l:r.id;return u?r.getAttribute("data-ln-persist-scope")==="page"?"ln:"+u+":"+e()+":"+a:"ln:"+u+":"+a:(console.warn('[ln-persist] Element requires id or data-ln-persist="key"',r),null)}let n=null;function o(){if(n!==null)return n;try{if(typeof localStorage>"u")return n=!1;const r="__ln_persist_test__";return localStorage.setItem(r,r),localStorage.removeItem(r),n=!0}catch{return n=!1}}const s=new Set;function i(r,a){const l=window.lnCore&&window.lnCore._attrRegistry,u=l&&l.persist||[];let d=null;for(let w=0;w<u.length;w++)if(u[w].selector===a){d=u[w];break}if(!d)return;const c=d.persist;if(s.has(c.attr)||(s.add(c.attr),G([c.attr],function(w,x){if(!w.hasAttribute("data-ln-persist")||c.hashActive&&c.hashActive(w))return;const g=t(w,x);if(!g||!o())return;const O=w.getAttribute(x);try{O===null?localStorage.removeItem(g):localStorage.setItem(g,O)}catch{}})),c.hashActive&&c.hashActive(r))return;const f=t(r,c.attr);if(!f||!o())return;const $=localStorage.getItem(f);$!==null&&r.setAttribute(c.attr,$)}L(i)})()})();

package/components/ln-persist/ln-persist.schema.json

@@ -0,0 +1,28 @@
+{
+	"$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-persist",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-persist": {
+			"direction": "author",
+			"sources": [
+				"src/ln-persist.js"
+			],
+			"type": "string",
+			"description": "Storage key identifier for persisting component state in localStorage"
+		},
+		"data-ln-persist-scope": {
+			"direction": "author",
+			"sources": [
+				"src/ln-persist.js"
+			],
+			"type": "enum",
+			"values": [
+				"global",
+				"page"
+			],
+			"fallback": "global",
+			"description": "Persistence scope namespace (global or per-page path)"
+		}
+	}
+}

package/components/ln-persist/src/ln-persist.js

@@ -0,0 +1,83 @@
+import { setPersistSink, observeAttributes } from '../../ln-core/index.js';
+
+(function () {
+	if (window.lnCore && window.lnCore._persistBound) return;
+	window.lnCore = window.lnCore || {};
+	window.lnCore._persistBound = true;
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-persist':       { type: 'string', description: 'Storage key identifier for persisting component state in localStorage' },
+		'data-ln-persist-scope': { type: 'enum', values: ['global', 'page'], fallback: 'global', description: 'Persistence scope namespace (global or per-page path)' }
+	};
+
+	function _pageKey() {
+		const path = location.pathname.replace(/\/+$/, '').toLowerCase();
+		return path || '/';
+	}
+
+	// el-first key: ln:{id}:{attr}, or ln:{id}:{pathname}:{attr} when
+	// data-ln-persist-scope="page" is present.
+	function _resolveKey(el, attr) {
+		const explicit = el.getAttribute('data-ln-persist');
+		const id = (explicit !== null && explicit !== '') ? explicit : el.id;
+		if (!id) {
+			console.warn('[ln-persist] Element requires id or data-ln-persist="key"', el);
+			return null;
+		}
+		const scoped = el.getAttribute('data-ln-persist-scope') === 'page';
+		return scoped
+			? ('ln:' + id + ':' + _pageKey() + ':' + attr)
+			: ('ln:' + id + ':' + attr);
+	}
+
+	let _storageOk = null;
+	function _checkStorage() {
+		if (_storageOk !== null) return _storageOk;
+		try {
+			if (typeof localStorage === 'undefined') return (_storageOk = false);
+			const t = '__ln_persist_test__';
+			localStorage.setItem(t, t);
+			localStorage.removeItem(t);
+			return (_storageOk = true);
+		} catch (e) {
+			return (_storageOk = false);
+		}
+	}
+
+	const _wiredAttrs = new Set();
+
+	function _persistSink(el, selector) {
+		const registry = window.lnCore && window.lnCore._attrRegistry;
+		const entries = (registry && registry.persist) || [];
+		let entry = null;
+		for (let i = 0; i < entries.length; i++) {
+			if (entries[i].selector === selector) { entry = entries[i]; break; }
+		}
+		if (!entry) return;
+		const persist = entry.persist;
+
+		if (!_wiredAttrs.has(persist.attr)) {
+			_wiredAttrs.add(persist.attr);
+			observeAttributes([persist.attr], function (changedEl, name) {
+				if (!changedEl.hasAttribute('data-ln-persist')) return;
+				if (persist.hashActive && persist.hashActive(changedEl)) return;
+				const key = _resolveKey(changedEl, name);
+				if (!key || !_checkStorage()) return;
+				const value = changedEl.getAttribute(name);
+				try {
+					if (value === null) localStorage.removeItem(key);
+					else localStorage.setItem(key, value);
+				} catch (e) { /* quota / private mode — silent */ }
+			});
+		}
+
+		if (persist.hashActive && persist.hashActive(el)) return;
+		const key = _resolveKey(el, persist.attr);
+		if (!key || !_checkStorage()) return;
+		const saved = localStorage.getItem(key);
+		if (saved !== null) el.setAttribute(persist.attr, saved);
+	}
+
+	setPersistSink(_persistSink);
+})();

package/components/ln-picklist/README.md

@@ -0,0 +1,230 @@
+# ln-picklist
+
+> Applied to a container (`data-ln-picklist`) wrapping `<ul data-ln-picklist-list="available">` and `<ul data-ln-picklist-list="selected">`.
+> It listens for native `change` events on child `<input type="checkbox">`: when `checked` is true, it moves the parent `<li>` via
+> `appendChild` into the `selected` list; when unchecked, it returns it to `available`. Native checkboxes drive both DOM placement
+> and form submission (`name`/`value`) with zero hidden inputs or state mirrors.
+
+---
+
+## 🧭 Philosophy & Architecture
+
+One parent element (the root) carries the component. It listens for `change`;
+checking an item moves it to the other list, unchecking returns it. That is the
+entire mechanism — there is no second act.
+
+Why it is worth having at all: `<select multiple>` is hostile: ctrl-clicking,
+no room to see what you picked, and a scroll position that eats your selection.
+A picklist puts the pool on the left and the choices on the right, both fully
+visible.
+
+The component itself is deliberately tiny. **The checkbox is the state.** Its
+`checked` property and the list the `<li>` currently sits in are the same fact,
+and `name` / `value` carry the selection to the server natively — unchecked
+boxes are simply not submitted. So there are no hidden inputs, no state
+attribute and no JS mirror to keep in sync.
+
+Everything else composes:
+
+| Want | Use |
+|---|---|
+| Filtering a long list | [`ln-search`](../ln-search/README.md) on each `<ul>` |
+| Counts, empty states, "select all" | Your page or a project coordinator |
+| Drag-and-drop ordering | [`ln-sortable`](../ln-sortable/README.md) |
+
+---
+
+## 📦 Minimal Blueprint
+
+```html
+<section data-ln-picklist>
+	<ul data-ln-picklist-list="available">
+		<li>
+			<label>
+				<input type="checkbox" name="countries[]" value="de">
+				Germany
+			</label>
+		</li>
+		<li>
+			<label>
+				<input type="checkbox" name="countries[]" value="fr">
+				France
+			</label>
+		</li>
+	</ul>
+
+	<ul data-ln-picklist-list="selected"></ul>
+</section>
+```
+
+On initialization, `ln-picklist` automatically scans all items and transfers any checked
+checkbox (`<input type="checkbox" checked>`) into the `selected` list. All items can be
+authored in the `available` pool from backend templates, leaving `selected` initially
+empty. On form reset, both lists are automatically re-synchronized with `defaultChecked`.
+
+### With search on both lists
+
+`ln-picklist` has no search of its own. Point an `ln-search` control at each
+list's `id` and it hides non-matching `<li>` children for free:
+
+```html
+<section data-ln-picklist>
+	<section>
+		<h3 id="pool-h">Available</h3>
+
+		<search aria-label="Search available">
+			<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-search"></use></svg>
+			<input type="search" data-ln-search-for="pool" placeholder="Search…">
+			<button type="button" data-ln-search-clear aria-label="Clear search">
+				<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg>
+			</button>
+		</search>
+
+		<ul data-ln-picklist-list="available" id="pool" data-ln-search="" aria-labelledby="pool-h">
+			…
+		</ul>
+	</section>
+
+	<section>
+		<h3 id="picked-h">Selected</h3>
+		<search aria-label="Search selected">
+			<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-search"></use></svg>
+			<input type="search" data-ln-search-for="picked" placeholder="Search…">
+			<button type="button" data-ln-search-clear aria-label="Clear search">
+				<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg>
+			</button>
+		</search>
+
+		<ul data-ln-picklist-list="selected" id="picked" data-ln-search="" aria-labelledby="picked-h">
+			…
+		</ul>
+	</section>
+</section>
+```
+
+The `change` event of that search input bubbles to the picklist root; the
+component ignores it, because it only acts on checkboxes that live inside one
+of its two lists.
+
+---
+
+## 🛠️ Declarative API Contract
+
+### HTML Attributes
+
+| Attribute | Element | Values | Description |
+|---|---|---|---|
+| `data-ln-picklist` | Root | `""` \| `"disabled"` | Initializes the component. `"disabled"` blocks moving. |
+| `data-ln-picklist-max` | Root | integer (e.g. `"5"`) | Maximum selection limit. Blocks further additions to `selected` and dispatches `ln-picklist:max-reached`. |
+| `data-ln-picklist-list` | `<ul>` / `<ol>` | `available` \| `selected` | Marks which list is which. Both are required. |
+
+There is no attribute on the item. It is found from the checkbox that changed.
+
+### JS API
+
+Accessed via `element.lnPicklist`:
+
+| Helper | Signature | Description |
+|---|---|---|
+| `enable` | `()` | Allows moving (sets `data-ln-picklist=""`). |
+| `disable` | `()` | Blocks moving (sets `data-ln-picklist="disabled"`). |
+| `sync` | `()` | Synchronizes items between available/selected according to checkbox state. |
+| `destroy` | `()` | Detaches listeners and cleans up the instance property. |
+
+---
+
+## ⚡ DOM Events
+
+All events bubble from the root.
+
+### `ln-picklist:max-reached`
+
+Fires when an item move to `selected` is blocked because the `data-ln-picklist-max` limit has been reached. The checkbox is automatically reverted.
+
+`detail`: `{ max, item, checkbox, count }`
+
+### `ln-picklist:before-move`
+
+Cancelable. Fires before the item moves. Calling `preventDefault()` aborts the
+move **and reverts the checkbox**, so the DOM never contradicts itself.
+
+`detail`: `{ item, from, to, checkbox }`
+
+### `ln-picklist:move`
+
+Fires after the item has been re-parented.
+
+`detail`: `{ item, from, to, checkbox }`
+
+### `ln-picklist:enabled` / `ln-picklist:disabled`
+
+Fire when the root attribute crosses the `disabled` boundary.
+
+`detail`: `{ target }`
+
+---
+
+## ⚠️ Common Pitfalls
+
+> [!CAUTION]
+> 1. **Rendering a checked item on the left (or an unchecked item on the
+>    right).** The component treats `checked` and list membership as one fact.
+>    Mismatched markup stays mismatched until the user touches that checkbox.
+> 2. **Omitting one of the two lists.** The component logs a warning and does
+>    not attach its listener, rather than failing on the first click. With
+>    `data-ln-debug` on `<body>` the diagnostic is drawn in place.
+> 3. **Expecting a name on the item.** The submitted value is the checkbox's
+>    own `name`/`value`. Give every checkbox the same array-style `name`
+>    (`countries[]`) and a distinct `value`.
+> 4. **Expecting the left list to keep its order.** An unchecked item is
+>    appended to the end of the available list, not returned to its original
+>    position.
+
+---
+
+## 🔧 Internals
+
+### Target filtering
+
+`change` bubbles, so anything composed inside the root reaches the listener.
+It acts only when `e.target` resolves to a checkbox whose `<li>` sits directly
+in one of the two known lists.
+
+### Disabled
+
+The browser toggles the checkbox before any listener runs, so when disabled the
+component *reverts* the toggle rather than merely returning — otherwise the box
+would read checked while the item stayed put.
+
+### Focus
+
+Re-parenting a node that holds focus blurs it to `<body>` in Chromium, so focus
+is restored to the checkbox after the move — but only when it genuinely had
+focus, so a synthetic `change` from a script cannot steal it.
+
+### Attribute-driven enable/disable
+
+`data-ln-picklist` is observed by the shared attribute observer; flipping it to
+`"disabled"` and back emits the paired events. No re-initialization.
+
+### Form reset
+
+Resetting a form restores the controls **silently** — the spec fires no
+`change` and no `input` for them, only `reset` on the form. So the change
+handler never hears about it, and without help the items would sit in whichever
+list the user left them while their boxes flipped back.
+
+The component snapshots the authored placement at boot and re-appends each item
+to the list it came from. The work is deferred with `setTimeout(…, 0)`, because
+`reset` fires *before* the controls are restored, and skipped if another
+listener cancelled the reset. Items the page has since removed are not
+resurrected.
+
+---
+
+## 🎨 Styling
+
+`@mixin picklist` lays the two lists out side by side and applies
+`check-list-outline` to each — checkbox pills with a **visible, focusable**
+input. `check-list` is deliberately not used: `@mixin pill` hides the input with
+`display: none`, which would drop the control out of the tab order.

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

@@ -0,0 +1,22 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Structure Check: a picklist is meaningless without both lists
+	[data-ln-picklist]:not(:has([data-ln-picklist-list="available"])) {
+		@include dev-inline-error("data-ln-picklist is missing [data-ln-picklist-list='available']");
+	}
+
+	[data-ln-picklist]:not(:has([data-ln-picklist-list="selected"])) {
+		@include dev-inline-error("data-ln-picklist is missing [data-ln-picklist-list='selected']");
+	}
+
+	// 2. Orphan Check: a list must live inside a picklist root
+	[data-ln-picklist-list]:not([data-ln-picklist] *) {
+		@include dev-inline-error("[data-ln-picklist-list] is orphaned (not inside a [data-ln-picklist] root)");
+	}
+
+	// 3. Value Check: the list marker only accepts these two sides
+	[data-ln-picklist-list]:not([data-ln-picklist-list="available"], [data-ln-picklist-list="selected"]) {
+		@include dev-inline-error("[data-ln-picklist-list] must be \"available\" or \"selected\"");
+	}
+}

package/components/ln-picklist/ln-picklist.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 y(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 i=null;for(let r=1;r<t.length;r++)if(t[r]&&t[r].nodeType===1){i=t[r];break}if(!y(i))return}e.apply(console,t)}}function C(e,t,n){const i=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,i),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:i}))}function N(e,t,n){const i=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,i);const r=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:i});return e.dispatchEvent(r),r}function m(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){m(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const T={};function j(e,t){T[e]=t}function V(e){return T[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=j,window.lnCore.getDataMapper=V);function H(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,m(function(){new MutationObserver(function(){C(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const $={};function U(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];$[n]=t}function Q(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return $[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=U,window.lnCore.getLocaleFallback=Q,window.lnCore.ensureLocaleObserver=H);const _={};function K(e,t){_[e]||(_[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=_[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function R(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let l=0;l<n.length;l++){const a=n[l],s=a.getAttribute("data-ln-field");t[s]!=null&&(a.textContent=t[s])}const i=e.querySelectorAll("[data-ln-attr]");for(let l=0;l<i.length;l++){const a=i[l],s=a.getAttribute("data-ln-attr").split(",");for(let c=0;c<s.length;c++){const d=s[c].trim().split(":");if(d.length!==2)continue;const u=d[0].trim(),f=d[1].trim();t[f]!=null&&a.setAttribute(u,t[f])}}const r=e.querySelectorAll("[data-ln-show]");for(let l=0;l<r.length;l++){const a=r[l],s=a.getAttribute("data-ln-show");s in t&&a.classList.toggle("hidden",!t[s])}const o=e.querySelectorAll("[data-ln-class]");for(let l=0;l<o.length;l++){const a=o[l],s=a.getAttribute("data-ln-class").split(",");for(let c=0;c<s.length;c++){const d=s[c].trim().split(":");if(d.length!==2)continue;const u=d[0].trim(),f=d[1].trim();f in t&&a.classList.toggle(u,!!t[f])}}return e}function P(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 i=0;i<n.length;i++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[i],t??null),n[i].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)R(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 I(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const o=n.currentNode;o.textContent.indexOf("{{")!==-1&&(o.textContent=o.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(l,a){return t[a]!==void 0?t[a]:""}))}const i=function(o,l){return t[l]!==void 0?t[l]:""},r=Array.from(e.querySelectorAll("*"));e.nodeType===1&&r.push(e);for(let o=0;o<r.length;o++){const l=r[o],a=l.attributes;for(let s=0;s<a.length;s++){const c=a[s];c.value.indexOf("{{")!==-1&&l.setAttribute(c.name,c.value.replace(/\{\{\s*(\w+)\s*\}\}/g,i))}}return e}function G(e,t,n,i,r,o){const l={};for(let s=0;s<e.children.length;s++){const c=e.children[s],d=c.getAttribute("data-ln-render-key");d&&(l[d]=c)}const a=document.createDocumentFragment();for(let s=0;s<t.length;s++){const c=t[s],d=String(i(c));let u=l[d];if(u)r(u,c,s);else{const f=K(n,o);if(!f||(I(f,c),u=f.firstElementChild,!u))continue;u.setAttribute("data-ln-render-key",d),r(u,c,s)}a.appendChild(u)}e.textContent="",e.appendChild(a)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=I,window.lnCore.fill=R,window.lnCore.lnFill=P,window.lnCore.renderList=G);function D(e,t,n,i,r){if(!e||t===null)return!0;const o=i||"ln-component",l=e.type;if(l==="trigger"||l==="marker"||l==="string"||l==="list"||!l||t===""&&e.fallback!==void 0)return!0;const a=s=>{r?console.warn(s,r):console.warn(s)};if(l==="boolean"){const s=t.trim().toLowerCase();return s!==""&&s!=="true"&&s!=="false"&&s!=="1"&&s!=="0"?(a(`[${o}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(l==="enum"){const s=e.values||[];return s.includes(t)?!0:(a(`[${o}] Invalid value "${t}" for attribute "${n}". Allowed: ${s.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(l==="integer"){if(!/^-?\d+$/.test(t))return a(`[${o}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const s=parseInt(t,10);return e.min!==void 0&&s<e.min?(a(`[${o}] Value ${s} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&s>e.max?(a(`[${o}] Value ${s} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(l==="float")return isNaN(Number(t))?(a(`[${o}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(l==="json")try{return JSON.parse(t),!0}catch(s){return a(`[${o}] Invalid JSON for attribute "${n}": ${s.message}. Fallback: ${e.fallback}.`),!1}return!0}function J(e){const t={};for(const n in e){const i=e[n];i&&i.effect&&(t[n]=i.effect)}return Object.keys(t).length?t:null}function X(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 A(e,t,n,i){if(e.nodeType!==1)return;const o=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",l=Array.from(e.querySelectorAll(o));e.matches&&e.matches(o)&&l.push(e);for(const a of l)if(!a[n]){window.lnCore._persistSink&&a.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(a,t);try{a[n]=new i(a)}catch(s){console.error("["+n+"] init failed",a,s)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function z(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function Y(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 q(){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 Z(e){const t=q(),n=e.observed||[];for(let i=0;i<n.length;i++){const r=n[i];t.byAttr.has(r)||t.byAttr.set(r,[]),t.byAttr.get(r).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const i in e.attributes){t.byDeclaredAttr.has(i)||t.byDeclaredAttr.set(i,[]);const r=t.byDeclaredAttr.get(i);r.some(o=>o.componentTag===e.componentTag)||r.push({spec:e.attributes[i],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const i=X(e);if(i===null)t.reactiveWildcard.push(e);else for(const r of i)t.byReactive.has(r)||t.byReactive.set(r,[]),t.byReactive.get(r).push(e)}e.persist&&t.persist.push(e)}function F(e,t,n,i){for(let r=0;r<e.length;r++){const o=e[r];if(!t[o.attribute])continue;const l=o.effects&&o.effects[n];l?l(t,n,i):o.onAttrChange&&(!o.declared||o.declared.has(n))&&o.onAttrChange(t,n,i)}}function ee(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const i=q(),r=i.byAttr.get(n);if(L()&&i.byDeclaredAttr&&i.byDeclaredAttr.has(n)&&y(t)){const o=i.byDeclaredAttr.get(n),l=t.getAttribute(n);for(let a=0;a<o.length;a++)D(o[a].spec,l,n,o[a].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||r)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const o=i.byReactive.get(n);o&&F(o,t,n,e.oldValue),i.reactiveWildcard.length&&F(i.reactiveWildcard,t,n,e.oldValue)}if(r)for(let o=0;o<r.length;o++){const l=r[o];if(l.handler){l.handler(t,n,e.oldValue);continue}l.onAttributeChange&&t[l.attribute]?l.onAttributeChange(t,n):(A(t,l.selector,l.attribute,l.ComponentFn),l.onInit&&l.onInit(t))}}function te(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,m(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{ee(t[n])}catch(i){console.error("[ln-core] mutation handler failed",t[n].target,i)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function M(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function ne(e){const t=M();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const i=t[n];if(i.onSubtreeChange){const r=i.query,o=e.target.nodeType===1?e.target.matches(r)?e.target:e.target.closest(r):e.target.parentElement?e.target.parentElement.closest(r):null;o&&i.onSubtreeChange(o,e)}}for(let n=0;n<e.addedNodes.length;n++){const i=e.addedNodes[n];if(i.nodeType===1)for(let r=0;r<t.length;r++){const o=t[r];A(i,o.selector,o.attribute,o.ComponentFn),o.onInit&&o.onInit(i)}}for(let n=0;n<e.removedNodes.length;n++){const i=e.removedNodes[n];if(i.nodeType===1)for(let r=0;r<t.length;r++){const o=t[r],l=o.query,a=Array.from(i.querySelectorAll(l));i.matches&&i.matches(l)&&a.push(i);for(let s=0;s<a.length;s++){const c=a[s];if(!document.contains(c)){const d=c[o.attribute];if(d&&typeof d.destroy=="function")try{d.destroy()}catch(u){console.error("["+o.attribute+"] destroy failed",c,u)}delete c[o.attribute]}}}}}}function ie(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,m(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const i=t[n];if(i.type==="childList")try{ne(i)}catch(r){console.error("[ln-core] lifecycle handler failed",i.target,r)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function oe(e,t,n,i,r={}){const o=r.extraAttributes||[],l=r.onAttributeChange||null,a=r.onSubtreeChange||null,s=r.onInit||null,c=r.onAttrChange||null,d=r.effects||null,u=r.attributes||null,f=u?J(u):d,h=u?new Set(Object.keys(u)):null,w=r.persist||null;function p(x){const b=x||document.body;if(A(b,e,t,n),u&&L())for(const g in u){const we=u[g],S=Array.from(b.querySelectorAll("["+g+"]"));b.matches&&b.matches("["+g+"]")&&S.push(b);for(let E=0;E<S.length;E++){const O=S[E];y(O)&&D(we,O.getAttribute(g),g,i,O)}}s&&s(b)}const k=[];if(e.indexOf("[")!==-1){const x=/\[([\w-]+)/g;let b;for(;(b=x.exec(e))!==null;)k.push(b[1])}else k.push(e);Z({selector:e,attribute:t,componentTag:i,attributes:u,ComponentFn:n,onInit:s,observed:k.concat(o),onAttributeChange:l,onAttrChange:c,effects:f,declared:h,persist:w}),te();const he=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";M().push({selector:e,attribute:t,ComponentFn:n,onInit:s,onSubtreeChange:a,query:he}),ie(),window[t]=p;function W(){z()>0?Y(function(){p(document.body)}):p(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",W):W(),p}function B(e){return(e||"").replace(/^#/,"")}function v(e){const t=e===void 0?location.hash:e,n={},i=B(t);if(!i)return n;const r=i.split("&");for(let o=0;o<r.length;o++){const l=r[o];if(!l)continue;const a=l.indexOf(":"),s=a>-1?l.slice(0,a):l,c=a>-1?l.slice(a+1):"";if(s)try{n[s]=decodeURIComponent(c)}catch{n[s]=c}}return n}function re(e){if(!e)return null;const t=v();return e in t?t[e]:null}function le(e,t){if(!e)return;const n=v();t==null?delete n[e]:n[e]=String(t);const r=Object.keys(n).map(function(o){const l=n[o];return l===""?o:o+":"+encodeURIComponent(l)}).join("&");B(location.hash)!==r&&(location.hash=r)}function se(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 i=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return i?t?i+"-"+t:i:t||null}function ae(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 ue(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function fe(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),i=e.slice(t+1),r=i?i.split(",").map(function(o){try{return decodeURIComponent(o)}catch{return o}}).filter(Boolean):[];return{key:n,values:r}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=v,window.lnCore.hashGet=re,window.lnCore.hashSet=le,window.lnCore.hashLinkClick=se,window.lnCore.resolveHashNamespace=ce,window.lnCore.hashSortEncode=ae,window.lnCore.hashSortDecode=de,window.lnCore.hashFilterEncode=ue,window.lnCore.hashFilterDecode=fe),(function(){const e="data-ln-picklist",t="lnPicklist",n="data-ln-picklist-list",i="data-ln-picklist-max";if(window[t]!==void 0)return;const r={"data-ln-picklist":{type:"enum",values:["enabled","disabled"],fallback:"enabled",effect:a,description:"Controls enabled/disabled state of the dual-list picklist"},"data-ln-picklist-max":{type:"integer",fallback:1/0,min:1,effect:s,description:"Maximum selectable items in the selected list"},"data-ln-picklist-list":{type:"enum",values:["available","selected"],description:"Role marker for available or selected picklist columns"}};function o(c){if(this.dom=c,this.isEnabled=c.getAttribute(e)!=="disabled",this.max=l(c),this.available=c.querySelector("["+n+'="available"]'),this.selected=c.querySelector("["+n+'="selected"]'),!this.available||!this.selected)return console.warn("[ln-picklist] requires both ["+n+'="available"] and ['+n+'="selected"]',c),this;this._onChange=this._onChange.bind(this),c.addEventListener("change",this._onChange),this._initial=[];for(const d of[this.available,this.selected])for(const u of d.children)this._initial.push(u);return this.sync(),this._form=c.closest("form"),this._form&&(this._onFormReset=this._onFormReset.bind(this),this._form.addEventListener("reset",this._onFormReset)),this}o.prototype.destroy=function(){this.dom[t]&&(this._destroyed=!0,this._onChange&&this.dom.removeEventListener("change",this._onChange),this._form&&this._form.removeEventListener("reset",this._onFormReset),delete this.dom[t])},o.prototype.enable=function(){this.dom.setAttribute(e,"")},o.prototype.disable=function(){this.dom.setAttribute(e,"disabled")},o.prototype.sync=function(){if(!this.available||!this.selected)return;const c=Array.from(this.available.children).concat(Array.from(this.selected.children));for(let u=0;u<c.length;u++)this._initial.includes(c[u])||this._initial.push(c[u]);let d=0;for(let u=0;u<this._initial.length;u++){const f=this._initial[u];if(!f.isConnected)continue;const h=f.querySelector('input[type="checkbox"]');if(!h)continue;let w;h.checked?this.max===null||d<this.max?(w=this.selected,d++):(h.checked=!1,w=this.available):w=this.available,w.appendChild(f)}},o.prototype._onFormReset=function(c){const d=this;setTimeout(function(){d._destroyed||c.defaultPrevented||d.sync()},0)},o.prototype._onChange=function(c){const d=c.target.closest('input[type="checkbox"]');if(!d)return;const u=d.closest("li");if(!u)return;const f=u.parentElement;if(f!==this.available&&f!==this.selected)return;if(!this.isEnabled){d.checked=!d.checked;return}const h=d.checked?this.selected:this.available;if(f===h)return;if(h===this.selected&&this.max!==null&&this.selected.children.length>=this.max){d.checked=!d.checked,C(this.dom,"ln-picklist:max-reached",{max:this.max,item:u,checkbox:d,count:this.selected.children.length});return}const w={item:u,from:f,to:h,checkbox:d};if(N(this.dom,"ln-picklist:before-move",w).defaultPrevented){d.checked=!d.checked;return}const p=document.activeElement===d;h.appendChild(u),p&&d.focus(),C(this.dom,"ln-picklist:move",w)};function l(c){const d=c.getAttribute(i);if(d===null||d==="")return null;const u=parseInt(d,10);return isNaN(u)||u<0?null:u}function a(c){const d=c[t];if(!d)return;const u=c.getAttribute(e)!=="disabled";u!==d.isEnabled&&(d.isEnabled=u,C(c,u?"ln-picklist:enabled":"ln-picklist:disabled",{target:c}))}function s(c){const d=c[t];d&&(d.max=l(c))}oe(e,t,o,"ln-picklist",{attributes:r})})()})();

package/components/ln-picklist/ln-picklist.schema.json

@@ -0,0 +1,49 @@
+{
+	"$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-picklist",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-picklist-dev.scss"
+			]
+		},
+		"data-ln-picklist": {
+			"direction": "both",
+			"sources": [
+				"ln-picklist-dev.scss",
+				"src/ln-picklist.js"
+			],
+			"type": "enum",
+			"values": [
+				"enabled",
+				"disabled"
+			],
+			"fallback": "enabled",
+			"description": "Controls enabled/disabled state of the dual-list picklist"
+		},
+		"data-ln-picklist-list": {
+			"direction": "author",
+			"sources": [
+				"ln-picklist-dev.scss",
+				"src/ln-picklist.js"
+			],
+			"type": "enum",
+			"values": [
+				"available",
+				"selected"
+			],
+			"description": "Role marker for available or selected picklist columns"
+		},
+		"data-ln-picklist-max": {
+			"direction": "author",
+			"sources": [
+				"src/ln-picklist.js"
+			],
+			"type": "integer",
+			"min": 1,
+			"description": "Maximum selectable items in the selected list"
+		}
+	}
+}