@livenetworks/ashlar 1.6.1 → 2.0.1

package/{js → components}/ln-dropdown/src/ln-dropdown.js

@@ -1,15 +1,26 @@
-import { dispatch, computePlacement, measureHidden, registerComponent } from '../../ln-core';
+import { dispatch, computePlacement, measureHidden, registerComponent, defineAttrs, attrSpec, attrStr } from '../../ln-core';
 
 (function () {
 	const DOM_SELECTOR = 'data-ln-dropdown';
 	const DOM_ATTRIBUTE = 'lnDropdown';
+	const DEFAULT_POSITION = 'bottom-end';
 
 	if (window[DOM_ATTRIBUTE] !== undefined) return;
 
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-dropdown':           { type: 'marker', description: 'Initializes the dropdown container' },
+		'data-ln-dropdown-position':  { prop: 'position', type: 'enum', values: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], fallback: DEFAULT_POSITION, description: 'Preferred positioning anchor' },
+		'data-ln-dropdown-placement': { type: 'enum', values: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], description: 'Active calculated placement applied at runtime' },
+		'data-ln-dropdown-menu':      { type: 'marker', description: 'Dropdown menu element containing items' }
+	};
+	const ATTR_SPEC = attrSpec(ATTRIBUTES);
+
 	// ─── Component ─────────────────────────────────────────────
 
 	function _component(dom) {
 		this.dom = dom;
+		defineAttrs(this, dom, ATTR_SPEC);
 		this.toggleEl = dom.querySelector('[data-ln-toggle]');
 		this._boundDocClick = null;
 		this._docClickTimeout = null;
@@ -20,6 +31,7 @@ import { dispatch, computePlacement, measureHidden, registerComponent } from '..
 			this.toggleEl.setAttribute('data-ln-dropdown-menu', '');
 			this.toggleEl.setAttribute('role', 'menu');
 			this.toggleEl.setAttribute('popover', 'manual');
+			this._initMenuAria();
 		}
 
 		// ARIA on trigger button
@@ -29,13 +41,6 @@ import { dispatch, computePlacement, measureHidden, registerComponent } from '..
 			this.triggerBtn.setAttribute('aria-expanded', 'false');
 		}
 
-		// role="menuitem" on direct children of menu
-		if (this.toggleEl) {
-			for (const item of this.toggleEl.children) {
-				item.setAttribute('role', 'menuitem');
-			}
-		}
-
 		const self = this;
 
 		this._onRequestOpen = function () {
@@ -51,14 +56,77 @@ import { dispatch, computePlacement, measureHidden, registerComponent } from '..
 			}
 		};
 
+		// ─── Keyboard Navigation (ARIA APG menu pattern) ───────────
+		this._onKeydown = function (e) {
+			const isOpen = self.toggleEl && self.toggleEl.getAttribute('data-ln-toggle') === 'open';
+
+			if (e.key === 'Escape') {
+				if (isOpen) {
+					e.preventDefault();
+					e.stopPropagation();
+					self.toggleEl.setAttribute('data-ln-toggle', 'close');
+					if (self.triggerBtn) self.triggerBtn.focus();
+				}
+				return;
+			}
+
+			if (e.key === 'Tab') {
+				if (isOpen) {
+					// Return focus to trigger button before closing so native Tab advance starts from trigger
+					if (self.triggerBtn) self.triggerBtn.focus();
+					self.toggleEl.setAttribute('data-ln-toggle', 'close');
+				}
+				return;
+			}
+
+			const items = self._getMenuItems();
+			if (items.length === 0) return;
+
+			// Open from trigger on ArrowDown or ArrowUp
+			if (!isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+				e.preventDefault();
+				self.toggleEl.setAttribute('data-ln-toggle', 'open');
+				// Macrotask deferral: ensures ln-toggle's MutationObserver microtask has finished opening and showing the popover before moving focus
+				setTimeout(function () {
+					const freshItems = self._getMenuItems();
+					if (freshItems.length > 0) {
+						self._focusItem(freshItems, e.key === 'ArrowDown' ? 0 : freshItems.length - 1);
+					}
+				}, 0);
+				return;
+			}
+
+			if (!isOpen) return;
+
+			const currentIndex = items.indexOf(document.activeElement);
+
+			if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+				self._focusItem(items, nextIndex);
+			} else if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+				self._focusItem(items, prevIndex);
+			} else if (e.key === 'Home') {
+				e.preventDefault();
+				self._focusItem(items, 0);
+			} else if (e.key === 'End') {
+				e.preventDefault();
+				self._focusItem(items, items.length - 1);
+			}
+		};
+
 		this.dom.addEventListener('ln-dropdown:request-open', this._onRequestOpen);
 		this.dom.addEventListener('ln-dropdown:request-close', this._onRequestClose);
 		this.dom.addEventListener('ln-dropdown:request-toggle', this._onRequestToggle);
+		this.dom.addEventListener('keydown', this._onKeydown);
 
 		this._onToggleOpen = function (e) {
 			if (!e.detail || e.detail.target !== self.toggleEl) return;
 			if (self.triggerBtn) self.triggerBtn.setAttribute('aria-expanded', 'true');
 			if (typeof self.toggleEl.showPopover === 'function') self.toggleEl.showPopover();
+			self._initMenuAria();
 			self._reposition();
 			self._addOutsideClickListener();
 			self._addScrollRepositionListener();
@@ -74,6 +142,7 @@ import { dispatch, computePlacement, measureHidden, registerComponent } from '..
 			self._removeResizeCloseListener();
 			self.toggleEl.style.top = '';
 			self.toggleEl.style.left = '';
+			self.toggleEl.removeAttribute('data-ln-dropdown-placement');
 			// :popover-open guard — a boot-opened menu (persist/static "open") was never shown via showPopover()
 			if (typeof self.toggleEl.hidePopover === 'function' && self.toggleEl.matches(':popover-open')) self.toggleEl.hidePopover();
 			dispatch(dom, 'ln-dropdown:close', { target: e.detail.target });
@@ -87,6 +156,35 @@ import { dispatch, computePlacement, measureHidden, registerComponent } from '..
 		return this;
 	}
 
+	// ─── Menu Items & ARIA Helpers ─────────────────────────────
+
+	_component.prototype._initMenuAria = function () {
+		if (!this.toggleEl) return;
+		const listItems = this.toggleEl.querySelectorAll('li');
+		for (const li of listItems) {
+			li.setAttribute('role', 'none');
+		}
+		const items = this._getMenuItems();
+		for (let i = 0; i < items.length; i++) {
+			items[i].setAttribute('role', 'menuitem');
+			items[i].setAttribute('tabindex', i === 0 ? '0' : '-1');
+		}
+	};
+
+	_component.prototype._getMenuItems = function () {
+		if (!this.toggleEl) return [];
+		return Array.from(this.toggleEl.querySelectorAll('a[href], button:not([disabled]), [role="menuitem"]:not([disabled])'));
+	};
+
+	_component.prototype._focusItem = function (items, index) {
+		for (let i = 0; i < items.length; i++) {
+			items[i].setAttribute('tabindex', i === index ? '0' : '-1');
+		}
+		if (items[index]) {
+			items[index].focus();
+		}
+	};
+
 	// ─── Positioning ───────────────────────────────────────────
 
 	_component.prototype._reposition = function () {
@@ -94,9 +192,11 @@ import { dispatch, computePlacement, measureHidden, registerComponent } from '..
 		const rect = this.triggerBtn.getBoundingClientRect();
 		const size = measureHidden(this.toggleEl);
 		const gap = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--size-xs')) * 16 || 4;
-		const p = computePlacement(rect, size, 'bottom-end', gap);
+		const position = this.position || DEFAULT_POSITION;
+		const p = computePlacement(rect, size, position, gap);
 		this.toggleEl.style.top = p.top + 'px';
 		this.toggleEl.style.left = p.left + 'px';
+		this.toggleEl.setAttribute('data-ln-dropdown-placement', p.placement);
 	};
 
 	// ─── Outside click ─────────────────────────────────────────
@@ -171,6 +271,7 @@ import { dispatch, computePlacement, measureHidden, registerComponent } from '..
 		this.dom.removeEventListener('ln-dropdown:request-open', this._onRequestOpen);
 		this.dom.removeEventListener('ln-dropdown:request-close', this._onRequestClose);
 		this.dom.removeEventListener('ln-dropdown:request-toggle', this._onRequestToggle);
+		this.dom.removeEventListener('keydown', this._onKeydown);
 		this._removeOutsideClickListener();
 		this._removeScrollRepositionListener();
 		this._removeResizeCloseListener();
@@ -178,14 +279,16 @@ import { dispatch, computePlacement, measureHidden, registerComponent } from '..
 			this.toggleEl.hidePopover();
 		}
 		if (this.toggleEl) {
+			this.toggleEl.removeAttribute('data-ln-dropdown-placement');
 			this.toggleEl.removeEventListener('ln-toggle:open', this._onToggleOpen);
 			this.toggleEl.removeEventListener('ln-toggle:close', this._onToggleClose);
 		}
-		dispatch(this.dom, 'ln-dropdown:destroyed', { target: this.dom });
 		delete this.dom[DOM_ATTRIBUTE];
 	};
 
 	// ─── Init ──────────────────────────────────────────────────
 
-	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-dropdown');
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-dropdown', {
+		attributes: ATTRIBUTES
+	});
 })();

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

@@ -1,6 +1,9 @@
 # ln-editor
 
-Lightweight WYSIWYG rich text editor. Enhances a `<textarea>` into a `contentEditable` editing surface with a toolbar. Progressive enhancement: without JS, the textarea works as plain text.
+> Applied to a `<div data-ln-editor>` wrapper enclosing an authored `<div role="toolbar">` and a `<textarea name="...">`.
+> On initialization, it hides the textarea and injects a `<div contenteditable="true" role="textbox">` populated with the initial content.
+> Toolbar clicks execute text commands on the selection; on every `input` event, it sanitizes markup and writes
+> `textarea.value = editable.innerHTML` so native form submissions send current HTML.
 
 ## Quick Start
 
@@ -133,7 +136,6 @@ This authored-markup design keeps the popover structure fully customizable and a
 | `ln-editor:focus` | Notification | `{ target }` | Editing surface focused |
 | `ln-editor:blur` | Notification | `{ target }` | Editing surface blurred |
 | `ln-editor:set-content` | Request | `{ html }` | Set content programmatically — also emits `ln-editor:changed` |
-| `ln-editor:destroyed` | Notification | `{ target }` | Instance destroyed |
 
 ## API
 
@@ -216,9 +218,9 @@ Include only the buttons you need:
 
 Visual styling uses the two-layer architecture:
 
-- **Mixin:** `scss/config/mixins/_editor.scss` — `@mixin editor`
-- **Component:** `scss/components/_editor.scss` — applies to `[data-ln-editor]`
-- **Co-located:** `js/ln-editor/ln-editor.scss` — link popover (runtime-cloned from the authored `<template data-ln-template="ln-editor-link-popover">`)
+- **Mixin:** `theme/config/mixins/_editor.scss` — `@mixin editor`
+- **Component:** `theme/components/_editor.scss` — applies to `[data-ln-editor]`
+- **Co-located:** `components/ln-editor/ln-editor.scss` — link popover (runtime-cloned from the authored `<template data-ln-template="ln-editor-link-popover">`)
 
 The editing surface uses `@include prose` — content looks identical to how it will render in a `.prose` container.
 
@@ -239,7 +241,7 @@ Override with your own selector:
 
 ## 🔧 Internals
 
-Source: `js/ln-editor/ln-editor.js`. No cached formatting state — every toolbar sync re-queries `document.queryCommandState` and DOM ancestry on `selectionchange`.
+Source: `components/ln-editor/ln-editor.js`. No cached formatting state — every toolbar sync re-queries `document.queryCommandState` and DOM ancestry on `selectionchange`.
 
 ### Construction
 
@@ -247,7 +249,7 @@ Finds the `<textarea>`, reads its value as the initial HTML, builds a `contentEd
 
 ### Content sync
 
-One-way, continuous: every surface `input` event copies `innerHTML` into the textarea's `value` and dispatches `ln-editor:changed`. The textarea is never the source of truth after construction — it is a submit-time mirror.
+Continuous and bidirectional: every surface `input` event copies `innerHTML` into the textarea's `value` and dispatches `ln-editor:changed`. Conversely, synthetic `input` events on the `<textarea>` (e.g. from form population via `ln-form` or coordinators) update `surface.innerHTML` and notify listeners without losing caret position during normal editing.
 
 ### Formatting flow
 
@@ -263,11 +265,11 @@ On every document `selectionchange`: bail if the selection isn't inside the surf
 
 ### Link insertion
 
-Requires a page-authored `<template data-ln-template="ln-editor-link-popover">` — the editor never generates this markup. Flow: save the current selection range, detect if already inside an `<a>` (pre-fill), clone the template via `cloneTemplateScoped`, insert it after the toolbar; on confirm, restore the saved range and either update the existing link's `href` or run `execCommand('createLink')` (adding `rel="noopener noreferrer"` for new links) — either path dispatches `ln-editor:changed` exactly once. A missing template makes the link action a silent no-op.
+Requires a page-authored `<template data-ln-template="ln-editor-link-popover">` — the editor never generates this markup. Flow: save the current selection range, detect if already inside an `<a>` (pre-fill), clone the template via `cloneTemplateScoped`, insert it after the toolbar; on confirm, restore the saved range and either update the existing link's `href` or run `execCommand('createLink')` (adding `rel="noopener noreferrer"` for new links) — either path dispatches `ln-editor:changed` exactly once. Dismissing via outside-click closes the popover without yanking focus; explicit Cancel/Escape restores selection to the editing surface.
 
 ### Destroy
 
-Removes all surface/toolbar/document listeners, removes the surface node, restores textarea visibility (removes `data-ln-editor-source`), removes any open link popover, dispatches `ln-editor:destroyed`.
+Removes all surface, toolbar, textarea, document, and form listeners, removes the surface node, restores textarea visibility (removes `data-ln-editor-source`), and dismisses any active link popover.
 
 ### Permanent constraints
 

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

@@ -0,0 +1,18 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Editor Target Check: [data-ln-editor] must contain a target <textarea>
+	[data-ln-editor]:not(:has(textarea)) {
+		@include dev-dom-error("[data-ln-editor] is missing a target <textarea> element.");
+	}
+
+	// 2. Editor Action Check: action string cannot be empty
+	[data-ln-editor-action=""] {
+		@include dev-inline-error("data-ln-editor-action cannot be empty");
+	}
+
+	// 3. Editor Action Nesting Check: actions must reside inside an editor
+	[data-ln-editor-action]:not([data-ln-editor] *) {
+		@include dev-inline-error("[data-ln-editor-action] is orphaned (not inside a [data-ln-editor] container)");
+	}
+}

package/components/ln-editor/ln-editor.js

@@ -0,0 +1 @@
+(function(){"use strict";function B(){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 D(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 o=1;o<t.length;o++)if(t[o]&&t[o].nodeType===1){r=t[o];break}if(!D(r))return}e.apply(console,t)}}function k(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 Y(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r);const o=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:r});return e.dispatchEvent(o),o}function T(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){T(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const R={};function Z(e,t){R[e]=t}function ee(e){return R[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=Z,window.lnCore.getDataMapper=ee);function te(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,T(function(){new MutationObserver(function(){k(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const H={};function ne(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];H[n]=t}function re(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return H[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=ne,window.lnCore.getLocaleFallback=re,window.lnCore.ensureLocaleObserver=te);const M={};function $(e,t){M[e]||(M[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=M[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function oe(e,t,n){if(e){const r=e.querySelector('[data-ln-template="'+t+'"]');if(r)return r.content.cloneNode(!0)}return $(t,n)}function F(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let l=0;l<n.length;l++){const u=n[l],c=u.getAttribute("data-ln-field");t[c]!=null&&(u.textContent=t[c])}const r=e.querySelectorAll("[data-ln-attr]");for(let l=0;l<r.length;l++){const u=r[l],c=u.getAttribute("data-ln-attr").split(",");for(let h=0;h<c.length;h++){const m=c[h].trim().split(":");if(m.length!==2)continue;const g=m[0].trim(),v=m[1].trim();t[v]!=null&&u.setAttribute(g,t[v])}}const o=e.querySelectorAll("[data-ln-show]");for(let l=0;l<o.length;l++){const u=o[l],c=u.getAttribute("data-ln-show");c in t&&u.classList.toggle("hidden",!t[c])}const i=e.querySelectorAll("[data-ln-class]");for(let l=0;l<i.length;l++){const u=i[l],c=u.getAttribute("data-ln-class").split(",");for(let h=0;h<c.length;h++){const m=c[h].trim().split(":");if(m.length!==2)continue;const g=m[0].trim(),v=m[1].trim();v in t&&u.classList.toggle(g,!!t[v])}}return e}function ie(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)F(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 P(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(l,u){return t[u]!==void 0?t[u]:""}))}const r=function(i,l){return t[l]!==void 0?t[l]:""},o=Array.from(e.querySelectorAll("*"));e.nodeType===1&&o.push(e);for(let i=0;i<o.length;i++){const l=o[i],u=l.attributes;for(let c=0;c<u.length;c++){const h=u[c];h.value.indexOf("{{")!==-1&&l.setAttribute(h.name,h.value.replace(/\{\{\s*(\w+)\s*\}\}/g,r))}}return e}function le(e,t,n,r,o,i){const l={};for(let c=0;c<e.children.length;c++){const h=e.children[c],m=h.getAttribute("data-ln-render-key");m&&(l[m]=h)}const u=document.createDocumentFragment();for(let c=0;c<t.length;c++){const h=t[c],m=String(r(h));let g=l[m];if(g)o(g,h,c);else{const v=$(n,i);if(!v||(P(v,h),g=v.firstElementChild,!g))continue;g.setAttribute("data-ln-render-key",m),o(g,h,c)}u.appendChild(g)}e.textContent="",e.appendChild(u)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=P,window.lnCore.fill=F,window.lnCore.lnFill=ie,window.lnCore.renderList=le);function W(e,t,n,r,o){if(!e||t===null)return!0;const i=r||"ln-component",l=e.type;if(l==="trigger"||l==="marker"||l==="string"||l==="list"||!l||t===""&&e.fallback!==void 0)return!0;const u=c=>{o?console.warn(c,o):console.warn(c)};if(l==="boolean"){const c=t.trim().toLowerCase();return c!==""&&c!=="true"&&c!=="false"&&c!=="1"&&c!=="0"?(u(`[${i}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(l==="enum"){const c=e.values||[];return c.includes(t)?!0:(u(`[${i}] Invalid value "${t}" for attribute "${n}". Allowed: ${c.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(l==="integer"){if(!/^-?\d+$/.test(t))return u(`[${i}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const c=parseInt(t,10);return e.min!==void 0&&c<e.min?(u(`[${i}] Value ${c} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&c>e.max?(u(`[${i}] Value ${c} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(l==="float")return isNaN(Number(t))?(u(`[${i}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(l==="json")try{return JSON.parse(t),!0}catch(c){return u(`[${i}] Invalid JSON for attribute "${n}": ${c.message}. Fallback: ${e.fallback}.`),!1}return!0}function se(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 ae(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 q(e,t,n,r){if(e.nodeType!==1)return;const i=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",l=Array.from(e.querySelectorAll(i));e.matches&&e.matches(i)&&l.push(e);for(const u of l)if(!u[n]){window.lnCore._persistSink&&u.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(u,t);try{u[n]=new r(u)}catch(c){console.error("["+n+"] init failed",u,c)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function ce(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function ue(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 j(){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 de(e){const t=j(),n=e.observed||[];for(let r=0;r<n.length;r++){const o=n[r];t.byAttr.has(o)||t.byAttr.set(o,[]),t.byAttr.get(o).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 o=t.byDeclaredAttr.get(r);o.some(i=>i.componentTag===e.componentTag)||o.push({spec:e.attributes[r],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const r=ae(e);if(r===null)t.reactiveWildcard.push(e);else for(const o of r)t.byReactive.has(o)||t.byReactive.set(o,[]),t.byReactive.get(o).push(e)}e.persist&&t.persist.push(e)}function K(e,t,n,r){for(let o=0;o<e.length;o++){const i=e[o];if(!t[i.attribute])continue;const l=i.effects&&i.effects[n];l?l(t,n,r):i.onAttrChange&&(!i.declared||i.declared.has(n))&&i.onAttrChange(t,n,r)}}function fe(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const r=j(),o=r.byAttr.get(n);if(B()&&r.byDeclaredAttr&&r.byDeclaredAttr.has(n)&&D(t)){const i=r.byDeclaredAttr.get(n),l=t.getAttribute(n);for(let u=0;u<i.length;u++)W(i[u].spec,l,n,i[u].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||o)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const i=r.byReactive.get(n);i&&K(i,t,n,e.oldValue),r.reactiveWildcard.length&&K(r.reactiveWildcard,t,n,e.oldValue)}if(o)for(let i=0;i<o.length;i++){const l=o[i];if(l.handler){l.handler(t,n,e.oldValue);continue}l.onAttributeChange&&t[l.attribute]?l.onAttributeChange(t,n):(q(t,l.selector,l.attribute,l.ComponentFn),l.onInit&&l.onInit(t))}}function he(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,T(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{fe(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 V(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function we(e){const t=V();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const r=t[n];if(r.onSubtreeChange){const o=r.query,i=e.target.nodeType===1?e.target.matches(o)?e.target:e.target.closest(o):e.target.parentElement?e.target.parentElement.closest(o):null;i&&r.onSubtreeChange(i,e)}}for(let n=0;n<e.addedNodes.length;n++){const r=e.addedNodes[n];if(r.nodeType===1)for(let o=0;o<t.length;o++){const i=t[o];q(r,i.selector,i.attribute,i.ComponentFn),i.onInit&&i.onInit(r)}}for(let n=0;n<e.removedNodes.length;n++){const r=e.removedNodes[n];if(r.nodeType===1)for(let o=0;o<t.length;o++){const i=t[o],l=i.query,u=Array.from(r.querySelectorAll(l));r.matches&&r.matches(l)&&u.push(r);for(let c=0;c<u.length;c++){const h=u[c];if(!document.contains(h)){const m=h[i.attribute];if(m&&typeof m.destroy=="function")try{m.destroy()}catch(g){console.error("["+i.attribute+"] destroy failed",h,g)}delete h[i.attribute]}}}}}}function be(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,T(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const r=t[n];if(r.type==="childList")try{we(r)}catch(o){console.error("[ln-core] lifecycle handler failed",r.target,o)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function ge(e,t,n,r,o={}){const i=o.extraAttributes||[],l=o.onAttributeChange||null,u=o.onSubtreeChange||null,c=o.onInit||null,h=o.onAttrChange||null,m=o.effects||null,g=o.attributes||null,v=g?se(g):m,N=g?new Set(Object.keys(g)):null,E=o.persist||null;function x(f){const p=f||document.body;if(q(p,e,t,n),g&&B())for(const b in g){const C=g[b],w=Array.from(p.querySelectorAll("["+b+"]"));p.matches&&p.matches("["+b+"]")&&w.push(p);for(let _=0;_<w.length;_++){const A=w[_];D(A)&&W(C,A.getAttribute(b),b,r,A)}}c&&c(p)}const L=[];if(e.indexOf("[")!==-1){const f=/\[([\w-]+)/g;let p;for(;(p=f.exec(e))!==null;)L.push(p[1])}else L.push(e);de({selector:e,attribute:t,componentTag:r,attributes:g,ComponentFn:n,onInit:c,observed:L.concat(i),onAttributeChange:l,onAttrChange:h,effects:v,declared:N,persist:E}),he();const a=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";V().push({selector:e,attribute:t,ComponentFn:n,onInit:c,onSubtreeChange:u,query:a}),be(),window[t]=x;function d(){ce()>0?ue(function(){x(document.body)}):x(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",d):d(),x}function U(e){return(e||"").replace(/^#/,"")}function I(e){const t=e===void 0?location.hash:e,n={},r=U(t);if(!r)return n;const o=r.split("&");for(let i=0;i<o.length;i++){const l=o[i];if(!l)continue;const u=l.indexOf(":"),c=u>-1?l.slice(0,u):l,h=u>-1?l.slice(u+1):"";if(c)try{n[c]=decodeURIComponent(h)}catch{n[c]=h}}return n}function pe(e){if(!e)return null;const t=I();return e in t?t[e]:null}function me(e,t){if(!e)return;const n=I();t==null?delete n[e]:n[e]=String(t);const o=Object.keys(n).map(function(i){const l=n[i];return l===""?i:i+":"+encodeURIComponent(l)}).join("&");U(location.hash)!==o&&(location.hash=o)}function _e(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 ye(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function ve(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 Ae(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function ke(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),o=r?r.split(",").map(function(i){try{return decodeURIComponent(i)}catch{return i}}).filter(Boolean):[];return{key:n,values:o}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=I,window.lnCore.hashGet=pe,window.lnCore.hashSet=me,window.lnCore.hashLinkClick=_e,window.lnCore.resolveHashNamespace=Ce,window.lnCore.hashSortEncode=ye,window.lnCore.hashSortDecode=ve,window.lnCore.hashFilterEncode=Ae,window.lnCore.hashFilterDecode=ke),(function(){const e="data-ln-editor",t="lnEditor";if(window[t]!==void 0)return;const n={"data-ln-editor":{type:"marker",description:"Mounts rich text editor instance on container"},"data-ln-editor-action":{type:"enum",values:["bold","italic","underline","strikethrough","heading-2","heading-3","heading-4","blockquote","code","paragraph","ordered-list","unordered-list","link","unlink","clear","confirm-link","cancel-link"],description:"Rich text toolbar formatting action"},"data-ln-editor-source":{type:"string",description:"Selector or ID of backing textarea synchronized with editor content"}},r={P:!0,BR:!0,STRONG:!0,B:!0,EM:!0,I:!0,U:!0,S:!0,A:!0,UL:!0,OL:!0,LI:!0,H2:!0,H3:!0,H4:!0,BLOCKQUOTE:!0,PRE:!0,CODE:!0,DIV:!0},o={bold:"bold",italic:"italic",underline:"underline",strikethrough:"strikeThrough"},i={"heading-2":"h2","heading-3":"h3","heading-4":"h4",blockquote:"blockquote",code:"pre",paragraph:"p"},l={"ordered-list":"insertOrderedList","unordered-list":"insertUnorderedList"};let u=0;function c(s){return!!(o[s]||i[s]||l[s]||s==="link")}function h(s){this.dom=s;const a=this;if(this._textarea=s.querySelector("textarea"),!this._textarea)return console.warn("[ln-editor] No <textarea> found inside",s),this;const d=this._textarea.getAttribute("placeholder")||"";this._textarea.setAttribute("data-ln-editor-source",""),this._surface=document.createElement("div"),this._surface.className="ln-editor__surface",this._surface.setAttribute("contenteditable","true"),this._surface.setAttribute("role","textbox"),this._surface.setAttribute("aria-multiline","true"),d&&this._surface.setAttribute("data-placeholder",d);const f=this._textarea.id;if(f){const w=s.querySelector('label[for="'+f+'"]');w&&(w.id||(w.id=f+"-label"),this._surface.setAttribute("aria-labelledby",w.id))}this._surface.id=f?f+"-surface":"ln-editor-surface-"+ ++u;const p=this._textarea.value.trim();p&&(this._surface.innerHTML=p);const b=s.querySelector('[role="toolbar"]');if(b&&b.nextSibling?s.insertBefore(this._surface,b.nextSibling):s.appendChild(this._surface),b){b.setAttribute("aria-controls",this._surface.id);const w=b.querySelectorAll("[data-ln-editor-action]");for(let _=0;_<w.length;_++){const A=w[_].getAttribute("data-ln-editor-action");c(A)&&w[_].setAttribute("aria-pressed","false")}}this._onInput=function(){a._syncToTextarea(),k(a.dom,"ln-editor:changed",{html:a._textarea.value,target:a.dom})},this._onMousedownToolbar=function(w){w.target.closest("[data-ln-editor-action]")&&w.preventDefault()},this._onClickToolbar=function(w){const _=w.target.closest("[data-ln-editor-action]");if(!_)return;const A=_.getAttribute("data-ln-editor-action");a._execAction(A)},this._onPaste=function(w){v(a,w)},this._onKeydown=function(w){x(a,w)},this._onSelectionChange=function(){document.contains(a._surface)&&a._updateActiveStates()},this._onFocus=function(){k(a.dom,"ln-editor:focus",{target:a.dom})},this._onBlur=function(){a._syncToTextarea(),k(a.dom,"ln-editor:blur",{target:a.dom})},this._onTextareaInput=function(){a._surface.innerHTML!==a._textarea.value&&(a._surface.innerHTML=a._textarea.value,k(a.dom,"ln-editor:changed",{html:a._textarea.value,target:a.dom}))},this._surface.addEventListener("input",this._onInput),this._surface.addEventListener("paste",this._onPaste),this._surface.addEventListener("keydown",this._onKeydown),this._surface.addEventListener("focus",this._onFocus),this._surface.addEventListener("blur",this._onBlur),this._textarea.addEventListener("input",this._onTextareaInput),b&&(b.addEventListener("mousedown",this._onMousedownToolbar),b.addEventListener("click",this._onClickToolbar)),document.addEventListener("selectionchange",this._onSelectionChange),this._onSetContent=function(w){const _=w.detail&&w.detail.html;_!==void 0&&(a._surface.innerHTML=_,a._syncToTextarea(),k(a.dom,"ln-editor:changed",{html:a._textarea.value,target:a.dom}))},s.addEventListener("ln-editor:set-content",this._onSetContent);const C=this._textarea.form;return C&&(this._onFormReset=function(){setTimeout(function(){a._surface.innerHTML=a._textarea.value,k(s,"ln-editor:changed",{html:a._textarea.value,target:s})},0)},C.addEventListener("reset",this._onFormReset)),this}h.prototype._syncToTextarea=function(){this._textarea&&(this._textarea.value=this._surface.innerHTML)},h.prototype._execAction=function(s){if(!(!s||Y(this.dom,"ln-editor:before-change",{action:s,target:this.dom}).defaultPrevented)){if(this._surface.focus(),o[s])document.execCommand(o[s],!1,null);else if(i[s]){const d=i[s],f=m(this._surface);f&&f.toLowerCase()===d?document.execCommand("formatBlock",!1,"<p>"):document.execCommand("formatBlock",!1,"<"+d+">")}else l[s]?document.execCommand(l[s],!1,null):s==="link"?L(this):s==="unlink"?document.execCommand("unlink",!1,null):s==="clear"&&(document.execCommand("removeFormat",!1,null),document.execCommand("formatBlock",!1,"<p>"));this._syncToTextarea(),this._updateActiveStates()}},h.prototype._updateActiveStates=function(){const s=this.dom.querySelector('[role="toolbar"]');if(!s)return;const a=window.getSelection();if(!a||a.rangeCount===0)return;const d=a.anchorNode;if(!d||!this._surface.contains(d))return;const f=s.querySelectorAll("[data-ln-editor-action]");for(let p=0;p<f.length;p++){const b=f[p],C=b.getAttribute("data-ln-editor-action");let w=!1;if(o[C])try{w=document.queryCommandState(o[C])}catch{}else if(i[C]){const _=m(this._surface);w=_&&_.toLowerCase()===i[C]}else if(l[C])try{w=document.queryCommandState(l[C])}catch{}else C==="link"&&(w=!!g(a.anchorNode,"A",this._surface));c(C)&&b.setAttribute("aria-pressed",String(w)),w?b.classList.add("ln-editor-active"):b.classList.remove("ln-editor-active")}},h.prototype.getHTML=function(){return this._surface?this._surface.innerHTML:""},h.prototype.setHTML=function(s){this._surface&&(this._surface.innerHTML=s,this._syncToTextarea(),k(this.dom,"ln-editor:changed",{html:this._textarea.value,target:this.dom}))},h.prototype.destroy=function(){if(!this.dom[t])return;this._surface&&(this._surface.removeEventListener("input",this._onInput),this._surface.removeEventListener("paste",this._onPaste),this._surface.removeEventListener("keydown",this._onKeydown),this._surface.removeEventListener("focus",this._onFocus),this._surface.removeEventListener("blur",this._onBlur),this._surface.remove());const s=this.dom.querySelector('[role="toolbar"]');s&&(s.removeEventListener("mousedown",this._onMousedownToolbar),s.removeEventListener("click",this._onClickToolbar)),document.removeEventListener("selectionchange",this._onSelectionChange),this.dom.removeEventListener("ln-editor:set-content",this._onSetContent);const a=this._textarea?this._textarea.form:null;if(a&&this._onFormReset&&a.removeEventListener("reset",this._onFormReset),this._textarea&&(this._onTextareaInput&&this._textarea.removeEventListener("input",this._onTextareaInput),this._textarea.removeAttribute("data-ln-editor-source")),this._closeLinkPopover)this._closeLinkPopover();else{const d=this.dom.querySelector(".ln-editor__link-popover");d&&d.remove()}delete this.dom[t]};function m(s){const a=window.getSelection();if(!a||a.rangeCount===0)return null;let d=a.anchorNode;if(!d)return null;for(;d&&d!==s;){if(d.nodeType===1){const f=d.tagName;if(f==="H2"||f==="H3"||f==="H4"||f==="BLOCKQUOTE"||f==="PRE"||f==="P")return f}d=d.parentNode}return null}function g(s,a,d){for(;s&&s!==d;){if(s.nodeType===1&&s.tagName===a)return s;s=s.parentNode}return null}function v(s,a){a.preventDefault();let d="";if(a.clipboardData&&(d=a.clipboardData.getData("text/html"),!d)){const p=a.clipboardData.getData("text/plain");p&&(d=p.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\n\n/g,"</p><p>").replace(/\n/g,"<br>"),d="<p>"+d+"</p>")}if(!d)return;const f=N(d);f&&document.execCommand("insertHTML",!1,f)}function N(s){const a=document.createElement("div");return a.innerHTML=s,E(a),a.innerHTML}function E(s){const a=Array.from(s.childNodes);for(let d=0;d<a.length;d++){const f=a[d];if(f.nodeType!==3){if(f.nodeType!==1){s.removeChild(f);continue}if(r[f.tagName]){const p=Array.from(f.attributes);for(let b=0;b<p.length;b++){const C=p[b].name;if(f.tagName==="A"&&C==="href"){const w=f.getAttribute("href")||"";/^(https?:|mailto:|\/|#)/.test(w)||f.removeAttribute("href")}else f.removeAttribute(C)}f.tagName==="A"&&f.setAttribute("rel","noopener noreferrer"),E(f)}else{for(;f.firstChild;)s.insertBefore(f.firstChild,f);s.removeChild(f)}}}}function x(s,a){if(!(a.ctrlKey||a.metaKey))return;let d=null;switch(a.key.toLowerCase()){case"b":d="bold";break;case"i":d="italic";break;case"u":d="underline";break;case"k":d="link";break}d&&(a.preventDefault(),s._execAction(d))}function L(s){const a=window.getSelection();if(!a||a.rangeCount===0)return;const d=g(a.anchorNode,"A",s._surface),f=a.getRangeAt(0).cloneRange();s._closeLinkPopover&&s._closeLinkPopover();const p=oe(s.dom,"ln-editor-link-popover","ln-editor");if(!p)return;const b=p.firstElementChild;if(!b)return;const C=b.querySelector('input[type="url"]'),w=b.querySelector('[data-ln-editor-action="confirm-link"]'),_=b.querySelector('[data-ln-editor-action="cancel-link"]');d&&(C.value=d.getAttribute("href")||"");const A=s.dom.querySelector('[role="toolbar"]');A?A.after(b):s.dom.insertBefore(b,s._surface),C.focus();function Q(){const y=window.getSelection();y.removeAllRanges(),y.addRange(f)}function O(){document.removeEventListener("mousedown",J),s._closeLinkPopover=null,b.remove()}function z(){const y=C.value.trim();if(O(),Q(),s._surface.focus(),y)if(d)d.setAttribute("href",y),d.setAttribute("rel","noopener noreferrer"),s._syncToTextarea(),k(s.dom,"ln-editor:changed",{html:s._textarea.value,target:s.dom});else{document.execCommand("createLink",!1,y);const S=window.getSelection();if(S&&S.anchorNode){const X=g(S.anchorNode,"A",s._surface);X&&(X.setAttribute("rel","noopener noreferrer"),s._syncToTextarea())}}else d&&document.execCommand("unlink",!1,null)}function G(){O(),Q(),s._surface.focus()}function xe(){O()}function J(y){const S=s.dom.contains(y.target)&&y.target.closest('[data-ln-editor-action="link"]');!b.contains(y.target)&&!S&&xe()}s._closeLinkPopover=O,w.addEventListener("click",z),_.addEventListener("click",G),C.addEventListener("keydown",function(y){y.key==="Enter"?(y.preventDefault(),z()):y.key==="Escape"&&(y.preventDefault(),G())}),document.addEventListener("mousedown",J)}ge(e,t,h,"ln-editor",{attributes:n})})()})();

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

@@ -0,0 +1,58 @@
+{
+	"$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-editor",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-editor-dev.scss"
+			]
+		},
+		"data-ln-editor": {
+			"direction": null,
+			"sources": [
+				"ln-editor-dev.scss",
+				"src/ln-editor.js"
+			],
+			"type": "marker",
+			"description": "Mounts rich text editor instance on container"
+		},
+		"data-ln-editor-action": {
+			"direction": "author",
+			"sources": [
+				"ln-editor-dev.scss",
+				"src/ln-editor.js"
+			],
+			"type": "enum",
+			"values": [
+				"bold",
+				"italic",
+				"underline",
+				"strikethrough",
+				"heading-2",
+				"heading-3",
+				"heading-4",
+				"blockquote",
+				"code",
+				"paragraph",
+				"ordered-list",
+				"unordered-list",
+				"link",
+				"unlink",
+				"clear",
+				"confirm-link",
+				"cancel-link"
+			],
+			"description": "Rich text toolbar formatting action"
+		},
+		"data-ln-editor-source": {
+			"direction": "runtime",
+			"sources": [
+				"src/ln-editor.js"
+			],
+			"type": "string",
+			"description": "Selector or ID of backing textarea synchronized with editor content"
+		}
+	}
+}

package/components/ln-editor/ln-editor.scss

@@ -0,0 +1,13 @@
+// ==========================================================================
+// ln-editor — Functional Link Popover Mechanics
+// ==========================================================================
+
+.ln-editor__link-popover {
+	display: flex;
+	align-items: center;
+
+	> input {
+		flex: 1;
+		min-width: 0;
+	}
+}

package/{js → components}/ln-editor/src/ln-editor.js

@@ -6,6 +6,13 @@ import { dispatch, dispatchCancelable, registerComponent, cloneTemplateScoped }
 
 	if (window[DOM_ATTRIBUTE] !== undefined) return;
 
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-editor':        { type: 'marker', description: 'Mounts rich text editor instance on container' },
+		'data-ln-editor-action': { type: 'enum', values: ['bold', 'italic', 'underline', 'strikethrough', 'heading-2', 'heading-3', 'heading-4', 'blockquote', 'code', 'paragraph', 'ordered-list', 'unordered-list', 'link', 'unlink', 'clear', 'confirm-link', 'cancel-link'], description: 'Rich text toolbar formatting action' },
+		'data-ln-editor-source': { type: 'string', description: 'Selector or ID of backing textarea synchronized with editor content' }
+	};
+
 	// ─── Allowed tags for paste sanitization ───────────────────
 	const ALLOWED_TAGS = {
 		P: true, BR: true, STRONG: true, B: true, EM: true, I: true,
@@ -160,12 +167,23 @@ import { dispatch, dispatchCancelable, registerComponent, cloneTemplateScoped }
 			dispatch(self.dom, 'ln-editor:blur', { target: self.dom });
 		};
 
+		this._onTextareaInput = function () {
+			if (self._surface.innerHTML !== self._textarea.value) {
+				self._surface.innerHTML = self._textarea.value;
+				dispatch(self.dom, 'ln-editor:changed', {
+					html: self._textarea.value,
+					target: self.dom
+				});
+			}
+		};
+
 		// ─── Bind events ──────────────────────────────────────
 		this._surface.addEventListener('input', this._onInput);
 		this._surface.addEventListener('paste', this._onPaste);
 		this._surface.addEventListener('keydown', this._onKeydown);
 		this._surface.addEventListener('focus', this._onFocus);
 		this._surface.addEventListener('blur', this._onBlur);
+		this._textarea.addEventListener('input', this._onTextareaInput);
 
 		if (toolbar) {
 			toolbar.addEventListener('mousedown', this._onMousedownToolbar);
@@ -344,16 +362,22 @@ import { dispatch, dispatchCancelable, registerComponent, cloneTemplateScoped }
 			form.removeEventListener('reset', this._onFormReset);
 		}
 
-		// Restore textarea visibility
+		// Restore textarea visibility and remove input listener
 		if (this._textarea) {
+			if (this._onTextareaInput) {
+				this._textarea.removeEventListener('input', this._onTextareaInput);
+			}
 			this._textarea.removeAttribute('data-ln-editor-source');
 		}
 
-		// Remove link popover if present
-		const popover = this.dom.querySelector('.ln-editor__link-popover');
-		if (popover) popover.remove();
+		// Close/remove link popover if present
+		if (this._closeLinkPopover) {
+			this._closeLinkPopover();
+		} else {
+			const popover = this.dom.querySelector('.ln-editor__link-popover');
+			if (popover) popover.remove();
+		}
 
-		dispatch(this.dom, 'ln-editor:destroyed', { target: this.dom });
 		delete this.dom[DOM_ATTRIBUTE];
 	};
 
@@ -520,9 +544,10 @@ import { dispatch, dispatchCancelable, registerComponent, cloneTemplateScoped }
 		// Save the current selection range so we can restore it
 		const savedRange = sel.getRangeAt(0).cloneRange();
 
-		// Remove any existing popover
-		const existing = instance.dom.querySelector('.ln-editor__link-popover');
-		if (existing) existing.remove();
+		// Clean up any existing active popover for this instance
+		if (instance._closeLinkPopover) {
+			instance._closeLinkPopover();
+		}
 
 		// Clone popover template
 		const fragment = cloneTemplateScoped(instance.dom, 'ln-editor-link-popover', 'ln-editor');
@@ -554,9 +579,15 @@ import { dispatch, dispatchCancelable, registerComponent, cloneTemplateScoped }
 			sel.addRange(savedRange);
 		}
 
+		function _cleanupPopover() {
+			document.removeEventListener('mousedown', _onDocClick);
+			instance._closeLinkPopover = null;
+			popover.remove();
+		}
+
 		function _apply() {
 			const url = input.value.trim();
-			popover.remove();
+			_cleanupPopover();
 
 			_restoreSelection();
 			instance._surface.focus();
@@ -594,11 +625,24 @@ import { dispatch, dispatchCancelable, registerComponent, cloneTemplateScoped }
 		}
 
 		function _cancel() {
-			popover.remove();
+			_cleanupPopover();
 			_restoreSelection();
 			instance._surface.focus();
 		}
 
+		function _dismiss() {
+			_cleanupPopover();
+		}
+
+		function _onDocClick(e) {
+			const inThisLinkBtn = instance.dom.contains(e.target) && e.target.closest('[data-ln-editor-action="link"]');
+			if (!popover.contains(e.target) && !inThisLinkBtn) {
+				_dismiss();
+			}
+		}
+
+		instance._closeLinkPopover = _cleanupPopover;
+
 		confirmBtn.addEventListener('click', _apply);
 		removeBtn.addEventListener('click', _cancel);
 
@@ -611,9 +655,13 @@ import { dispatch, dispatchCancelable, registerComponent, cloneTemplateScoped }
 				_cancel();
 			}
 		});
+
+		document.addEventListener('mousedown', _onDocClick);
 	}
 
 	// ─── Init ─────────────────────────────────────────────────
 
-	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-editor');
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-editor', {
+		attributes: ATTRIBUTES
+	});
 })();

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

@@ -1,6 +1,8 @@
 # ln-external-links
 
-Auto-decorates every cross-host `<a>` and `<area>` on the page with `target="_blank"`, merged `rel="noopener noreferrer"`, and a screen-reader hint span. Runs on page load and on every DOM mutation; no opt-in attribute, no init call, no API surface for consumers to wire.
+> Runs globally across `document.body` watching all `<a>` and `<area>` elements. When an element's `href` host
+> differs from `window.location.host`, it sets `target="_blank"`, merges `rel="noopener noreferrer"`,
+> appends a `<span class="sr-only">(opens in new tab)</span>`, and marks it with `data-ln-external-link="processed"` to prevent redundant mutations.
 
 ## Markup anatomy
 
@@ -306,22 +308,22 @@ When loaded via the main bundle, the component automatically initializes and reg
 If you only need the external links auto-decoration functionality without the rest of the `ln-ashlar` suite, you can load the compiled standalone IIFE version:
 
 ```html
-<script src="js/ln-external-links/ln-external-links.js" defer></script>
+<script src="components/ln-external-links/ln-external-links.js" defer></script>
 ```
 
 This self-contained script executes immediately and sets up the necessary hooks and global initializer `window.lnExternalLinks` without requiring any external dependencies.
 
 ### 3. Source & Development Path
 
-*   **Active Development Source:** [js/ln-external-links/src/ln-external-links.js](file:///c:/laragon/www/ln-ashlar/js/ln-external-links/src/ln-external-links.js) — The authoring source code containing the ES module implementation. Any new features, bug fixes, or behavioral changes must be written here.
-*   **Compiled Standalone:** [js/ln-external-links/ln-external-links.js](file:///c:/laragon/www/ln-ashlar/js/ln-external-links/ln-external-links.js) — The compiled distribution file generated from the source code during the build process. Do not edit this file directly.
+*   **Active Development Source:** [components/ln-external-links/src/ln-external-links.js](file:///c:/laragon/www/ln-ashlar/components/ln-external-links/src/ln-external-links.js) — The authoring source code containing the ES module implementation. Any new features, bug fixes, or behavioral changes must be written here.
+*   **Compiled Standalone:** [components/ln-external-links/ln-external-links.js](file:///c:/laragon/www/ln-ashlar/components/ln-external-links/ln-external-links.js) — The compiled distribution file generated from the source code during the build process. Do not edit this file directly.
 
 ## Related
 
 - **`@mixin ln-icon`** is unused here — there's no icon decoration on
   external links by default. If you want a "↗" indicator, add it in
   project SCSS via `a[data-ln-external-link="processed"]::after`.
-- **`.sr-only`** (`scss/utilities/_utilities.scss`) — the
+- **`.sr-only`** (`theme/utilities/_utilities.scss`) — the
   visually-hidden utility used by the appended hint span. If your
   project does not include ln-ashlar utilities, supply your own
   `.sr-only` definition or the hint will be visible.
@@ -339,7 +341,7 @@ This self-contained script executes immediately and sets up the necessary hooks
 
 ## 🔧 Internals
 
-Source: `js/ln-external-links/ln-external-links.js`. A **global service** (js skill §10) — no `registerComponent`, no consumer-facing `data-ln-*` opt-in attribute. It loads, runs once, and sets up a click delegate + `MutationObserver` on `document.body`.
+Source: `components/ln-external-links/ln-external-links.js`. A **global service** (js skill §10) — no `registerComponent`, no consumer-facing `data-ln-*` opt-in attribute. It loads, runs once, and sets up a click delegate + `MutationObserver` on `document.body`.
 
 ### "External" test
 
@@ -347,7 +349,7 @@ The single test: truthy `link.hostname` AND `link.hostname !== window.location.h
 
 ### Script-load lifecycle
 
-Both the click delegate and the observer are wrapped in `guardBody` (`ln-core/helpers.js`): if `document.body` is `null` at script eval (e.g. loaded in `<head>` without `defer`), setup re-schedules itself for `DOMContentLoaded`. The initial `_processLinks()` scan follows the same `readyState === 'loading'` check. A `window.lnExternalLinks` sentinel guards against double-execution if the script loads twice.
+Both the click delegate and the observer are wrapped in `guardBody` (`ln-core`): if `document.body` is `null` at script eval (e.g. loaded in `<head>` without `defer`), setup re-schedules itself for `DOMContentLoaded`. The initial `_processLinks()` scan follows the same `readyState === 'loading'` check. A `window.lnExternalLinks` sentinel guards against double-execution if the script loads twice.
 
 ### Processing pipeline
 
@@ -377,4 +379,4 @@ The sr-only hint has no i18n hook — the string is hard-coded English. Projects
 
 ### Cross-component coordination
 
-Imports only `dispatch` and `guardBody` from `ln-core/helpers.js`. Does not listen for any `ln-*` event and is not signaled by `ln-ajax`/data-loading components when they inject markup — decoration is purely insertion-driven via the shared observer.
+Imports only `dispatch` and `guardBody` from `ln-core`. Does not listen for any `ln-*` event and is not signaled by `ln-ajax`/data-loading components when they inject markup — decoration is purely insertion-driven via the shared observer.