@livenetworks/ashlar 1.3.2

package/js/ln-confirm/src/ln-confirm.js

@@ -0,0 +1,131 @@
+import { registerComponent, dispatch } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-confirm';
+	const DOM_ATTRIBUTE = 'lnConfirm';
+	const TIMEOUT_ATTR = 'data-ln-confirm-timeout';
+	const DEFAULT_TIMEOUT = 3;
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(dom) {
+		this.dom = dom;
+		this.confirming = false;
+		this.originalText = dom.textContent.trim();
+		this.confirmText = dom.getAttribute(DOM_SELECTOR) || 'Confirm?';
+		this.revertTimer = null;
+		this._submitted = false;
+
+		const self = this;
+		this._onClick = function (e) {
+			if (!self.confirming) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				self._enterConfirm();
+			} else {
+				if (self._submitted) return;
+				self._submitted = true;
+				// Second click — allow form submit
+				self._reset();
+			}
+		};
+
+		dom.addEventListener('click', this._onClick);
+		return this;
+	}
+
+	_component.prototype._getTimeout = function () {
+		const val = parseFloat(this.dom.getAttribute(TIMEOUT_ATTR));
+		return (isNaN(val) || val <= 0) ? DEFAULT_TIMEOUT : val;
+	};
+
+	_component.prototype._enterConfirm = function () {
+		this.confirming = true;
+		this.dom.setAttribute('data-confirming', 'true');
+
+		var iconUse = this.dom.querySelector('svg.ln-icon use');
+		if (iconUse && this.originalText === '') {
+			this.isIconButton = true;
+			this.originalIconHref = iconUse.getAttribute('href');
+			iconUse.setAttribute('href', '#ln-check');
+			this.dom.classList.add('ln-confirm-tooltip');
+			this.dom.setAttribute('data-tooltip-text', this.confirmText);
+			// Accessibility — swap aria-label so the new accessible name
+			// matches the prompt, and append a transient role="alert"
+			// announcer so AT speaks the prompt immediately (aria-label
+			// mutation alone is not announced on a focused element).
+			this.originalAriaLabel = this.dom.getAttribute('aria-label');
+			this.dom.setAttribute('aria-label', this.confirmText);
+			this.alertNode = document.createElement('span');
+			this.alertNode.className = 'sr-only';
+			this.alertNode.setAttribute('role', 'alert');
+			this.alertNode.textContent = this.confirmText;
+			this.dom.appendChild(this.alertNode);
+		} else {
+			this.dom.textContent = this.confirmText;
+		}
+
+		this._startTimer();
+
+		dispatch(this.dom, 'ln-confirm:waiting', { target: this.dom });
+	};
+
+	_component.prototype._startTimer = function () {
+		if (this.revertTimer) {
+			clearTimeout(this.revertTimer);
+		}
+		const self = this;
+		const ms = this._getTimeout() * 1000;
+		this.revertTimer = setTimeout(function () {
+			self._reset();
+		}, ms);
+	};
+
+	_component.prototype._reset = function () {
+		this._submitted = false;
+		this.confirming = false;
+		this.dom.removeAttribute('data-confirming');
+
+		if (this.isIconButton) {
+			var iconUse = this.dom.querySelector('svg.ln-icon use');
+			if (iconUse && this.originalIconHref) {
+				iconUse.setAttribute('href', this.originalIconHref);
+			}
+			this.dom.classList.remove('ln-confirm-tooltip');
+			this.dom.removeAttribute('data-tooltip-text');
+			// Accessibility — restore aria-label and remove the announcer.
+			if (this.originalAriaLabel !== null && this.originalAriaLabel !== undefined) {
+				this.dom.setAttribute('aria-label', this.originalAriaLabel);
+			} else {
+				this.dom.removeAttribute('aria-label');
+			}
+			this.originalAriaLabel = null;
+			if (this.alertNode && this.alertNode.parentNode === this.dom) {
+				this.dom.removeChild(this.alertNode);
+			}
+			this.alertNode = null;
+			this.isIconButton = false;
+			this.originalIconHref = null;
+		} else {
+			this.dom.textContent = this.originalText;
+		}
+
+		if (this.revertTimer) {
+			clearTimeout(this.revertTimer);
+			this.revertTimer = null;
+		}
+	};
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this._reset();
+		this.dom.removeEventListener('click', this._onClick);
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-confirm');
+})();

package/js/ln-core/crypto.js

@@ -0,0 +1,83 @@
+// Web Crypto API Reusable Cryptographic Helpers
+let _cryptoKey = null;
+
+export async function setCryptoKey(secretString) {
+	if (!secretString) {
+		_cryptoKey = null;
+		return;
+	}
+	try {
+		const enc = new TextEncoder();
+		const hash = await crypto.subtle.digest('SHA-256', enc.encode(secretString));
+		_cryptoKey = await crypto.subtle.importKey(
+			'raw',
+			hash,
+			{ name: 'AES-GCM' },
+			false,
+			['encrypt', 'decrypt']
+		);
+	} catch (err) {
+		console.error('[ln-core/crypto] Key derivation failed:', err);
+		_cryptoKey = null;
+	}
+}
+
+export function getCryptoKey() {
+	return _cryptoKey;
+}
+
+export async function encryptData(plainData, key = _cryptoKey) {
+	const activeKey = key || _cryptoKey;
+	if (!activeKey || plainData === undefined || plainData === null) return plainData;
+
+	try {
+		const enc = new TextEncoder();
+		const iv = crypto.getRandomValues(new Uint8Array(12));
+
+		const serialized = typeof plainData === 'string' ? plainData : JSON.stringify(plainData);
+		const encryptedBuffer = await crypto.subtle.encrypt(
+			{ name: 'AES-GCM', iv: iv },
+			activeKey,
+			enc.encode(serialized)
+		);
+
+		const ivBase64 = btoa(String.fromCharCode(...iv));
+		const dataBase64 = btoa(String.fromCharCode(...new Uint8Array(encryptedBuffer)));
+
+		return {
+			encrypted: true,
+			iv: ivBase64,
+			data: dataBase64
+		};
+	} catch (err) {
+		console.error('[ln-core/crypto] Encryption failed:', err);
+		return plainData;
+	}
+}
+
+export async function decryptData(encryptedObject, key = _cryptoKey) {
+	const activeKey = key || _cryptoKey;
+	if (!encryptedObject || !encryptedObject.encrypted || !activeKey) return encryptedObject;
+
+	try {
+		const dec = new TextDecoder();
+		const iv = Uint8Array.from(atob(encryptedObject.iv), c => c.charCodeAt(0));
+		const encryptedBuffer = Uint8Array.from(atob(encryptedObject.data), c => c.charCodeAt(0));
+
+		const decryptedBuffer = await crypto.subtle.decrypt(
+			{ name: 'AES-GCM', iv: iv },
+			activeKey,
+			encryptedBuffer
+		);
+
+		const decoded = dec.decode(decryptedBuffer);
+		try {
+			return JSON.parse(decoded);
+		} catch (_) {
+			return decoded;
+		}
+	} catch (err) {
+		console.error('[ln-core/crypto] Decryption failed. Key may be incorrect:', err);
+		return { ...encryptedObject, decryptionError: true };
+	}
+}

package/js/ln-core/helpers.js

@@ -0,0 +1,411 @@
+// ─── Template Cache ────────────────────────────────────────
+const _tmplCache = {};
+
+/**
+ * Clone a <template data-ln-template="name"> element.
+ * Cached after first lookup.
+ */
+export function cloneTemplate(name, componentTag) {
+	if (!_tmplCache[name]) {
+		_tmplCache[name] = document.querySelector('[data-ln-template="' + name + '"]');
+	}
+	const tmpl = _tmplCache[name];
+	if (!tmpl) {
+		console.warn('[' + (componentTag || 'ln-core') + '] Template "' + name + '" not found');
+		return null;
+	}
+	return tmpl.content.cloneNode(true);
+}
+
+// ─── Event Dispatch ────────────────────────────────────────
+
+export function dispatch(element, eventName, detail) {
+	element.dispatchEvent(new CustomEvent(eventName, {
+		bubbles: true,
+		detail: detail || {}
+	}));
+}
+
+export function dispatchCancelable(element, eventName, detail) {
+	const event = new CustomEvent(eventName, {
+		bubbles: true,
+		cancelable: true,
+		detail: detail || {}
+	});
+	element.dispatchEvent(event);
+	return event;
+}
+
+// ─── Declarative DOM Binding ───────────────────────────────
+
+export function fill(root, data) {
+	if (!root || !data) return root;
+
+	// data-ln-field="prop" → textContent
+	const fields = root.querySelectorAll('[data-ln-field]');
+	for (let i = 0; i < fields.length; i++) {
+		const el = fields[i];
+		const prop = el.getAttribute('data-ln-field');
+		if (data[prop] != null) {
+			el.textContent = data[prop];
+		}
+	}
+
+	// data-ln-attr="attr:prop, attr:prop" → setAttribute
+	const attrs = root.querySelectorAll('[data-ln-attr]');
+	for (let i = 0; i < attrs.length; i++) {
+		const el = attrs[i];
+		const pairs = el.getAttribute('data-ln-attr').split(',');
+		for (let j = 0; j < pairs.length; j++) {
+			const parts = pairs[j].trim().split(':');
+			if (parts.length !== 2) continue;
+			const attr = parts[0].trim();
+			const prop = parts[1].trim();
+			if (data[prop] != null) {
+				el.setAttribute(attr, data[prop]);
+			}
+		}
+	}
+
+	// data-ln-show="prop" → classList.toggle('hidden', !value)
+	const shows = root.querySelectorAll('[data-ln-show]');
+	for (let i = 0; i < shows.length; i++) {
+		const el = shows[i];
+		const prop = el.getAttribute('data-ln-show');
+		if (prop in data) {
+			el.classList.toggle('hidden', !data[prop]);
+		}
+	}
+
+	// data-ln-class="cls:prop, cls:prop" → classList.toggle(cls, !!value)
+	const classes = root.querySelectorAll('[data-ln-class]');
+	for (let i = 0; i < classes.length; i++) {
+		const el = classes[i];
+		const pairs = el.getAttribute('data-ln-class').split(',');
+		for (let j = 0; j < pairs.length; j++) {
+			const parts = pairs[j].trim().split(':');
+			if (parts.length !== 2) continue;
+			const cls = parts[0].trim();
+			const prop = parts[1].trim();
+			if (prop in data) {
+				el.classList.toggle(cls, !!data[prop]);
+			}
+		}
+	}
+
+	return root;
+}
+
+// ─── Template Text-Node Placeholders ──────────────────────
+
+export function fillTemplate(clone, data) {
+	if (!clone || !data) return clone;
+	const walker = document.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
+	while (walker.nextNode()) {
+		const node = walker.currentNode;
+		if (node.textContent.indexOf('{{') !== -1) {
+			node.textContent = node.textContent.replace(
+				/\{\{\s*(\w+)\s*\}\}/g,
+				function (_, key) { return data[key] !== undefined ? data[key] : ''; }
+			);
+		}
+	}
+	return clone;
+}
+
+// ─── Keyed List Rendering ──────────────────────────────────
+
+export function renderList(container, items, templateName, keyFn, fillFn, componentTag) {
+	// Index existing children by data-ln-key
+	const existingByKey = {};
+	for (let i = 0; i < container.children.length; i++) {
+		const child = container.children[i];
+		const key = child.getAttribute('data-ln-key');
+		if (key) existingByKey[key] = child;
+	}
+
+	// Build ordered fragment — reuse or clone
+	const frag = document.createDocumentFragment();
+
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i];
+		const key = String(keyFn(item));
+		let el = existingByKey[key];
+
+		if (el) {
+			fillFn(el, item, i);
+		} else {
+			const clone = cloneTemplate(templateName, componentTag);
+			if (!clone) continue;
+			fillTemplate(clone, item);
+			el = clone.firstElementChild;
+			if (!el) continue;
+			el.setAttribute('data-ln-key', key);
+			fillFn(el, item, i);
+		}
+		frag.appendChild(el);
+	}
+
+	// Atomic update: orphans still in container, reused nodes already moved to frag
+	container.textContent = '';
+	container.appendChild(frag);
+}
+
+// ─── Guard Body ────────────────────────────────────────
+
+export function guardBody(setupFn, componentTag) {
+	if (!document.body) {
+		document.addEventListener('DOMContentLoaded', function () {
+			guardBody(setupFn, componentTag);
+		});
+		console.warn('[' + componentTag + '] Script loaded before <body> — add "defer" to your <script> tag');
+		return;
+	}
+	setupFn();
+}
+
+export function cloneTemplateScoped(root, name, componentTag) {
+	if (root) {
+		const local = root.querySelector('[data-ln-template="' + name + '"]');
+		if (local) return local.content.cloneNode(true);
+	}
+	return cloneTemplate(name, componentTag);
+}
+
+// ─── Dictionary (i18n) ────────────────────────────────────
+
+/**
+ * Build a plain object from hidden dictionary elements.
+ * Reads all [selector] elements once, extracts key→textContent,
+ * removes them from DOM. Returns dictionary object.
+ *
+ * HTML: <ul hidden>
+ *         <li data-ln-upload-dict="remove">Remove</li>
+ *       </ul>
+ * JS:   const dict = buildDict(container, 'data-ln-upload-dict');
+ *        dict.remove → 'Remove'
+ */
+export function buildDict(root, selector) {
+	const dict = {};
+	const els = root.querySelectorAll('[' + selector + ']');
+	for (let i = 0; i < els.length; i++) {
+		dict[els[i].getAttribute(selector)] = els[i].textContent;
+		els[i].remove();
+	}
+	return dict;
+}
+
+// ─── Find Elements ─────────────────────────────────────────
+
+export function findElements(root, selector, attribute, ComponentClass) {
+	if (root.nodeType !== 1) return;
+
+	// Support both simple attribute names and full CSS selectors
+	const isComplex = selector.indexOf('[') !== -1 || selector.indexOf('.') !== -1 || selector.indexOf('#') !== -1;
+	const query = isComplex ? selector : '[' + selector + ']';
+
+	const items = Array.from(root.querySelectorAll(query));
+	if (root.matches && root.matches(query)) {
+		items.push(root);
+	}
+	for (const el of items) {
+		if (!el[attribute]) {
+			el[attribute] = new ComponentClass(el);
+		}
+	}
+}
+
+// ─── Visibility Check ─────────────────────────────────────
+
+export function isVisible(el) {
+	return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+}
+
+// ─── Form Serialization ───────────────────────────────────
+
+export function serializeForm(form) {
+	const data = {};
+	const elements = form.elements;
+
+	for (let i = 0; i < elements.length; i++) {
+		const el = elements[i];
+		if (!el.name || el.disabled || el.type === 'file' || el.type === 'submit' || el.type === 'button') continue;
+
+		if (el.type === 'checkbox') {
+			if (!data[el.name]) data[el.name] = [];
+			if (el.checked) data[el.name].push(el.value);
+		} else if (el.type === 'radio') {
+			if (el.checked) data[el.name] = el.value;
+		} else if (el.type === 'select-multiple') {
+			data[el.name] = [];
+			for (let j = 0; j < el.options.length; j++) {
+				if (el.options[j].selected) data[el.name].push(el.options[j].value);
+			}
+		} else {
+			data[el.name] = el.value;
+		}
+	}
+
+	return data;
+}
+
+export function populateForm(form, data) {
+	const elements = form.elements;
+	const filled = [];
+
+	for (let i = 0; i < elements.length; i++) {
+		const el = elements[i];
+		if (!el.name || !(el.name in data) || el.type === 'file' || el.type === 'submit' || el.type === 'button') continue;
+
+		const value = data[el.name];
+
+		if (el.type === 'checkbox') {
+			el.checked = Array.isArray(value) ? value.indexOf(el.value) !== -1 : !!value;
+			filled.push(el);
+		} else if (el.type === 'radio') {
+			el.checked = el.value === String(value);
+			filled.push(el);
+		} else if (el.type === 'select-multiple') {
+			if (Array.isArray(value)) {
+				for (let j = 0; j < el.options.length; j++) {
+					el.options[j].selected = value.indexOf(el.options[j].value) !== -1;
+				}
+			}
+			filled.push(el);
+		} else {
+			el.value = value;
+			filled.push(el);
+		}
+	}
+
+	return filled;
+}
+
+// ─── Locale Detection ─────────────────────────────────────
+
+export function getLocale(el) {
+	const langEl = el.closest('[lang]');
+	return (langEl ? langEl.lang : null) || navigator.language;
+}
+
+// ─── Component Registration ───────────────────────────────
+
+export function registerComponent(selector, attribute, ComponentFn, componentTag, options = {}) {
+	const extraAttributes = options.extraAttributes || [];
+	const onAttributeChange = options.onAttributeChange || null;
+	const onInit = options.onInit || null;
+
+	function constructor(domRoot) {
+		const root = domRoot || document.body;
+		findElements(root, selector, attribute, ComponentFn);
+		if (onInit) onInit(root);
+	}
+
+	guardBody(function () {
+		const observer = new MutationObserver(function (mutations) {
+			for (let i = 0; i < mutations.length; i++) {
+				const mutation = mutations[i];
+				if (mutation.type === 'childList') {
+					for (let j = 0; j < mutation.addedNodes.length; j++) {
+						const node = mutation.addedNodes[j];
+						if (node.nodeType === 1) {
+							findElements(node, selector, attribute, ComponentFn);
+							if (onInit) onInit(node);
+						}
+					}
+				} else if (mutation.type === 'attributes') {
+					if (onAttributeChange && mutation.target[attribute]) {
+						onAttributeChange(mutation.target, mutation.attributeName);
+					} else {
+						findElements(mutation.target, selector, attribute, ComponentFn);
+						if (onInit) onInit(mutation.target);
+					}
+				}
+			}
+		});
+
+		// Extract attribute names from selector for attributeFilter
+		let observedAttributes = [];
+		if (selector.indexOf('[') !== -1) {
+			const re = /\[([\w-]+)/g;
+			let match;
+			while ((match = re.exec(selector)) !== null) {
+				observedAttributes.push(match[1]);
+			}
+		} else {
+			observedAttributes.push(selector);
+		}
+
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: observedAttributes.concat(extraAttributes)
+		});
+	}, componentTag || (selector.indexOf('[') === -1 ? selector.replace('data-', '') : 'component'));
+
+	window[attribute] = constructor;
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', function () {
+			constructor(document.body);
+		});
+	} else {
+		constructor(document.body);
+	}
+
+	return constructor;
+}
+
+// ─── HTTP / URL Helpers ────────────────────────────────────
+
+/**
+ * Build a URL from segments, stripping duplicate slashes.
+ */
+export function buildUrl(...segments) {
+	return segments
+		.filter(x => x !== undefined && x !== null && x !== '')
+		.map((part, index) => {
+			if (index === 0) return part.replace(/\/+$/, '');
+			return part.replace(/^\/+/, '').replace(/\/+$/, '');
+		})
+		.filter(Boolean)
+		.join('/');
+}
+
+/**
+ * Compile standard JSON request headers.
+ */
+export function getHeaders(customHeaders, auth) {
+	return Object.assign({
+		'Content-Type': 'application/json',
+		'Accept': 'application/json'
+	}, customHeaders, auth ? { 'Authorization': auth } : null);
+}
+
+/**
+ * Safely parse headers from JSON string.
+ */
+export function parseHeaders(str, componentName = 'ln-core') {
+	try { return str ? JSON.parse(str) : {}; }
+	catch (e) { return console.error(`[${componentName}] Invalid headers JSON:`, e), {}; }
+}
+
+// ─── Domain Data Mapper Registry ───────────────────────────
+const _dataMappers = {};
+
+export function registerDataMapper(name, mapper) {
+	_dataMappers[name] = mapper;
+}
+
+export function getDataMapper(name) {
+	return _dataMappers[name] || { ingress: r => r, egress: r => r };
+}
+
+if (typeof window !== 'undefined') {
+	window.lnCore = window.lnCore || {};
+	window.lnCore.registerDataMapper = registerDataMapper;
+	window.lnCore.getDataMapper = getDataMapper;
+}
+
+

package/js/ln-core/index.js

@@ -0,0 +1,5 @@
+export { cloneTemplate, cloneTemplateScoped, dispatch, dispatchCancelable, fill, fillTemplate, renderList, buildDict, guardBody, findElements, isVisible, serializeForm, populateForm, getLocale, registerComponent, buildUrl, getHeaders, parseHeaders, registerDataMapper, getDataMapper } from './helpers.js';
+export { reactiveState, deepReactive, createBatcher } from './reactive.js';
+export { persistGet, persistSet, persistRemove, persistClear } from './persist.js';
+export { computePlacement, teleportToBody, measureHidden } from './positioning.js';
+export { setCryptoKey, getCryptoKey, encryptData, decryptData } from './crypto.js';

package/js/ln-core/persist.js

@@ -0,0 +1,71 @@
+// ─── Persist (localStorage) ───────────────────────────────
+//
+// Key format: ln:{component}:{pathname}:{elementId}
+// Example:    ln:filter:/admin/users:status-filter
+//
+// Each component passes its own name ("filter", "table-sort", "toggle", "tabs"),
+// so keys are namespaced per component — no cross-component collision risk.
+// Element ID comes from data-ln-persist="key" or el.id.
+//
+// Note: ln-autosave uses its own separate prefix ("ln-autosave:") and does NOT
+// go through this module. No collision between the two systems.
+
+const PREFIX = 'ln:';
+
+function _pageKey() {
+	const path = location.pathname.replace(/\/+$/, '').toLowerCase();
+	return path || '/';
+}
+
+function _resolveKey(component, el) {
+	const persist = el.getAttribute('data-ln-persist');
+	const id = (persist !== null && persist !== '') ? persist : el.id;
+	if (!id) {
+		console.warn('[ln-persist] Element requires id or data-ln-persist="key"', el);
+		return null;
+	}
+	return PREFIX + component + ':' + _pageKey() + ':' + id;
+}
+
+export function persistGet(component, el) {
+	const key = _resolveKey(component, el);
+	if (!key) return null;
+	try {
+		const raw = localStorage.getItem(key);
+		return raw !== null ? JSON.parse(raw) : null;
+	} catch (e) {
+		return null;
+	}
+}
+
+export function persistSet(component, el, value) {
+	const key = _resolveKey(component, el);
+	if (!key) return;
+	try {
+		localStorage.setItem(key, JSON.stringify(value));
+	} catch (e) {
+		// localStorage full or disabled — silent
+	}
+}
+
+export function persistRemove(component, el) {
+	const key = _resolveKey(component, el);
+	if (!key) return;
+	try {
+		localStorage.removeItem(key);
+	} catch (e) {}
+}
+
+export function persistClear(component) {
+	try {
+		const prefix = PREFIX + component + ':';
+		const toRemove = [];
+		for (let i = 0; i < localStorage.length; i++) {
+			const k = localStorage.key(i);
+			if (k && k.indexOf(prefix) === 0) toRemove.push(k);
+		}
+		for (let i = 0; i < toRemove.length; i++) {
+			localStorage.removeItem(toRemove[i]);
+		}
+	} catch (e) {}
+}