@wingleeio/mugen-markdown 0.4.0 → 0.4.2

package/dist/index.cjs

@@ -2050,25 +2050,42 @@ const EMA_SEED_MS = 160;
 const MIN_FADE_MS = 120;
 const MAX_FADE_MS = 400;
 const MAX_VEILS = 32;
-function commonPrefixLength(a, b) {
-	const n = Math.min(a.length, b.length);
-	let i = 0;
-	while (i < n && a.charCodeAt(i) === b.charCodeAt(i)) i++;
-	return i;
-}
 function inChrome(node, container) {
 	for (let p = node.parentElement; p != null && p !== container; p = p.parentElement) if (p.tagName === "BUTTON") return true;
 	return false;
 }
+/** Whether `el` (or an ancestor up to `container`) is interactive chrome. */
+function elementInChrome(el, container) {
+	for (let p = el; p != null && p !== container; p = p.parentElement) if (p.tagName === "BUTTON") return true;
+	return false;
+}
 function contentTextFilter(container) {
 	return { acceptNode: (n) => inChrome(n, container) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT };
 }
-/** `container.textContent`, minus interactive chrome (see {@link inChrome}). */
-function contentText(container) {
+/** Chrome-free text length of `container` — a full walk; used to seed/reconcile. */
+function chromeFreeLength(container) {
 	const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, contentTextFilter(container));
-	let s = "";
-	for (let n = walker.nextNode(); n != null; n = walker.nextNode()) s += n.data;
-	return s;
+	let n = 0;
+	for (let t = walker.nextNode(); t != null; t = walker.nextNode()) n += t.data.length;
+	return n;
+}
+/**
+* Chrome-free text length of one node's subtree — used to fold a single
+* added/removed node into the running length without touching the rest of the
+* DOM. Buttons inside the node are skipped; a button node itself counts zero.
+*/
+function subtreeTextLength(node) {
+	if (node.nodeType === 3) return node.data.length;
+	if (node.nodeType !== 1) return 0;
+	const el = node;
+	if (el.tagName === "BUTTON") return 0;
+	let n = 0;
+	const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, { acceptNode: (t) => {
+		for (let p = t.parentElement; p != null && p !== el; p = p.parentElement) if (p.tagName === "BUTTON") return NodeFilter.FILTER_REJECT;
+		return NodeFilter.FILTER_ACCEPT;
+	} });
+	for (let t = walker.nextNode(); t != null; t = walker.nextNode()) n += t.data.length;
+	return n;
 }
 let scratch;
 function scratchCtx() {
@@ -2110,14 +2127,20 @@ function effectiveBackground(el, cache) {
 }
 /**
 * Paints the dissolving veil over a single content element's newly-arrived text.
-* Driven by a MutationObserver: a rAF loop runs only while veils are alive, then
-* stops until the next mutation, so an idle (settled) block uses no frames.
+* Driven by a MutationObserver that folds each change into a running length, so
+* a streaming tick costs O(delta) — never an O(n) walk of the whole content,
+* which is what made long streams lag. A rAF loop runs only while veils are
+* alive, then stops until the next mutation, so an idle (settled) block uses no
+* frames. Only the small, recent veil region is ever measured for geometry.
 */
 var FadePainter = class {
 	content = null;
 	canvas = null;
 	ctx = null;
-	prevText = "";
+	/** Chrome-free text length, tracked incrementally from mutation records. */
+	length = 0;
+	/** Net length change observed since the last frame folded it in. */
+	pendingDelta = 0;
 	veils = [];
 	ema = EMA_SEED_MS;
 	lastAppend = 0;
@@ -2131,14 +2154,29 @@ var FadePainter = class {
 		this.content = content;
 		this.canvas = canvas;
 		this.ctx = ctx;
-		this.prevText = contentText(content);
-		this.mo = new MutationObserver(() => this.wake());
+		this.length = chromeFreeLength(content);
+		this.mo = new MutationObserver((records) => this.onMutations(records));
 		this.mo.observe(content, {
 			subtree: true,
 			childList: true,
-			characterData: true
+			characterData: true,
+			characterDataOldValue: true
 		});
 	}
+	onMutations(records) {
+		const content = this.content;
+		if (content == null) return;
+		for (const rec of records) if (rec.type === "characterData") {
+			const node = rec.target;
+			if (inChrome(node, content)) continue;
+			this.pendingDelta += (node.nodeValue?.length ?? 0) - (rec.oldValue?.length ?? 0);
+		} else if (rec.type === "childList") {
+			if (rec.target instanceof Element && elementInChrome(rec.target, content)) continue;
+			for (let i = 0; i < rec.addedNodes.length; i++) this.pendingDelta += subtreeTextLength(rec.addedNodes[i]);
+			for (let i = 0; i < rec.removedNodes.length; i++) this.pendingDelta -= subtreeTextLength(rec.removedNodes[i]);
+		}
+		this.wake();
+	}
 	destroy() {
 		this.mo?.disconnect();
 		this.mo = null;
@@ -2163,25 +2201,24 @@ var FadePainter = class {
 			return;
 		}
 		const now = performance.now();
-		const text = contentText(content);
-		if (text !== this.prevText) {
-			const prefix = commonPrefixLength(this.prevText, text);
-			this.veils = this.veils.map((v) => ({
-				...v,
-				start: Math.min(v.start, prefix),
-				end: Math.min(v.end, prefix)
-			})).filter((v) => v.end > v.start);
-			if (text.length > prefix) {
+		if (this.pendingDelta !== 0) {
+			const newLength = Math.max(0, this.length + this.pendingDelta);
+			this.pendingDelta = 0;
+			if (newLength > this.length) {
 				if (this.lastAppend > 0) this.ema = this.ema * .7 + Math.min(now - this.lastAppend, 1e3) * .3;
 				this.lastAppend = now;
 				this.veils.push({
-					start: prefix,
-					end: text.length,
+					start: this.length,
+					end: newLength,
 					t0: now
 				});
 				if (this.veils.length > MAX_VEILS) this.veils.splice(0, this.veils.length - MAX_VEILS);
-			}
-			this.prevText = text;
+			} else if (newLength < this.length) this.veils = this.veils.map((v) => ({
+				...v,
+				start: Math.min(v.start, newLength),
+				end: Math.min(v.end, newLength)
+			})).filter((v) => v.end > v.start);
+			this.length = newLength;
 		}
 		const duration = Math.min(MAX_FADE_MS, Math.max(MIN_FADE_MS, this.ema * 3));
 		const boost = 1 + .3 * Math.max(0, this.veils.length - 2);
@@ -2201,11 +2238,13 @@ var FadePainter = class {
 			const groups = /* @__PURE__ */ new Map();
 			const minStart = this.veils.reduce((m, v) => Math.min(m, v.start), Infinity);
 			const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, contentTextFilter(content));
-			let base = 0;
-			let node = walker.nextNode();
-			while (node != null) {
+			walker.currentNode = content;
+			let node = walker.lastChild();
+			let end = this.length;
+			while (node != null && end > minStart) {
 				const len = node.data.length;
-				if (len > 0 && base + len > minStart) for (let vi = 0; vi < this.veils.length; vi++) {
+				const base = end - len;
+				if (len > 0) for (let vi = 0; vi < this.veils.length; vi++) {
 					const v = this.veils[vi];
 					const s = Math.max(v.start - base, 0);
 					const e = Math.min(v.end - base, len);
@@ -2229,8 +2268,8 @@ var FadePainter = class {
 					range.setEnd(node, e);
 					for (const r of range.getClientRects()) group.path.rect(r.left - origin.left - 1, r.top - origin.top - 1, r.width + 2, r.height + 2);
 				}
-				base += len;
-				node = walker.nextNode();
+				end = base;
+				node = walker.previousNode();
 			}
 			for (const group of groups.values()) {
 				ctx.globalAlpha = group.alpha;
@@ -2241,6 +2280,7 @@ var FadePainter = class {
 		}
 		if (this.veils.length > 0) this.raf = requestAnimationFrame(this.frame);
 		else {
+			this.length = chromeFreeLength(content);
 			this.running = false;
 			this.raf = 0;
 		}

package/dist/index.mjs

@@ -2049,25 +2049,42 @@ const EMA_SEED_MS = 160;
 const MIN_FADE_MS = 120;
 const MAX_FADE_MS = 400;
 const MAX_VEILS = 32;
-function commonPrefixLength(a, b) {
-	const n = Math.min(a.length, b.length);
-	let i = 0;
-	while (i < n && a.charCodeAt(i) === b.charCodeAt(i)) i++;
-	return i;
-}
 function inChrome(node, container) {
 	for (let p = node.parentElement; p != null && p !== container; p = p.parentElement) if (p.tagName === "BUTTON") return true;
 	return false;
 }
+/** Whether `el` (or an ancestor up to `container`) is interactive chrome. */
+function elementInChrome(el, container) {
+	for (let p = el; p != null && p !== container; p = p.parentElement) if (p.tagName === "BUTTON") return true;
+	return false;
+}
 function contentTextFilter(container) {
 	return { acceptNode: (n) => inChrome(n, container) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT };
 }
-/** `container.textContent`, minus interactive chrome (see {@link inChrome}). */
-function contentText(container) {
+/** Chrome-free text length of `container` — a full walk; used to seed/reconcile. */
+function chromeFreeLength(container) {
 	const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, contentTextFilter(container));
-	let s = "";
-	for (let n = walker.nextNode(); n != null; n = walker.nextNode()) s += n.data;
-	return s;
+	let n = 0;
+	for (let t = walker.nextNode(); t != null; t = walker.nextNode()) n += t.data.length;
+	return n;
+}
+/**
+* Chrome-free text length of one node's subtree — used to fold a single
+* added/removed node into the running length without touching the rest of the
+* DOM. Buttons inside the node are skipped; a button node itself counts zero.
+*/
+function subtreeTextLength(node) {
+	if (node.nodeType === 3) return node.data.length;
+	if (node.nodeType !== 1) return 0;
+	const el = node;
+	if (el.tagName === "BUTTON") return 0;
+	let n = 0;
+	const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, { acceptNode: (t) => {
+		for (let p = t.parentElement; p != null && p !== el; p = p.parentElement) if (p.tagName === "BUTTON") return NodeFilter.FILTER_REJECT;
+		return NodeFilter.FILTER_ACCEPT;
+	} });
+	for (let t = walker.nextNode(); t != null; t = walker.nextNode()) n += t.data.length;
+	return n;
 }
 let scratch;
 function scratchCtx() {
@@ -2109,14 +2126,20 @@ function effectiveBackground(el, cache) {
 }
 /**
 * Paints the dissolving veil over a single content element's newly-arrived text.
-* Driven by a MutationObserver: a rAF loop runs only while veils are alive, then
-* stops until the next mutation, so an idle (settled) block uses no frames.
+* Driven by a MutationObserver that folds each change into a running length, so
+* a streaming tick costs O(delta) — never an O(n) walk of the whole content,
+* which is what made long streams lag. A rAF loop runs only while veils are
+* alive, then stops until the next mutation, so an idle (settled) block uses no
+* frames. Only the small, recent veil region is ever measured for geometry.
 */
 var FadePainter = class {
 	content = null;
 	canvas = null;
 	ctx = null;
-	prevText = "";
+	/** Chrome-free text length, tracked incrementally from mutation records. */
+	length = 0;
+	/** Net length change observed since the last frame folded it in. */
+	pendingDelta = 0;
 	veils = [];
 	ema = EMA_SEED_MS;
 	lastAppend = 0;
@@ -2130,14 +2153,29 @@ var FadePainter = class {
 		this.content = content;
 		this.canvas = canvas;
 		this.ctx = ctx;
-		this.prevText = contentText(content);
-		this.mo = new MutationObserver(() => this.wake());
+		this.length = chromeFreeLength(content);
+		this.mo = new MutationObserver((records) => this.onMutations(records));
 		this.mo.observe(content, {
 			subtree: true,
 			childList: true,
-			characterData: true
+			characterData: true,
+			characterDataOldValue: true
 		});
 	}
+	onMutations(records) {
+		const content = this.content;
+		if (content == null) return;
+		for (const rec of records) if (rec.type === "characterData") {
+			const node = rec.target;
+			if (inChrome(node, content)) continue;
+			this.pendingDelta += (node.nodeValue?.length ?? 0) - (rec.oldValue?.length ?? 0);
+		} else if (rec.type === "childList") {
+			if (rec.target instanceof Element && elementInChrome(rec.target, content)) continue;
+			for (let i = 0; i < rec.addedNodes.length; i++) this.pendingDelta += subtreeTextLength(rec.addedNodes[i]);
+			for (let i = 0; i < rec.removedNodes.length; i++) this.pendingDelta -= subtreeTextLength(rec.removedNodes[i]);
+		}
+		this.wake();
+	}
 	destroy() {
 		this.mo?.disconnect();
 		this.mo = null;
@@ -2162,25 +2200,24 @@ var FadePainter = class {
 			return;
 		}
 		const now = performance.now();
-		const text = contentText(content);
-		if (text !== this.prevText) {
-			const prefix = commonPrefixLength(this.prevText, text);
-			this.veils = this.veils.map((v) => ({
-				...v,
-				start: Math.min(v.start, prefix),
-				end: Math.min(v.end, prefix)
-			})).filter((v) => v.end > v.start);
-			if (text.length > prefix) {
+		if (this.pendingDelta !== 0) {
+			const newLength = Math.max(0, this.length + this.pendingDelta);
+			this.pendingDelta = 0;
+			if (newLength > this.length) {
 				if (this.lastAppend > 0) this.ema = this.ema * .7 + Math.min(now - this.lastAppend, 1e3) * .3;
 				this.lastAppend = now;
 				this.veils.push({
-					start: prefix,
-					end: text.length,
+					start: this.length,
+					end: newLength,
 					t0: now
 				});
 				if (this.veils.length > MAX_VEILS) this.veils.splice(0, this.veils.length - MAX_VEILS);
-			}
-			this.prevText = text;
+			} else if (newLength < this.length) this.veils = this.veils.map((v) => ({
+				...v,
+				start: Math.min(v.start, newLength),
+				end: Math.min(v.end, newLength)
+			})).filter((v) => v.end > v.start);
+			this.length = newLength;
 		}
 		const duration = Math.min(MAX_FADE_MS, Math.max(MIN_FADE_MS, this.ema * 3));
 		const boost = 1 + .3 * Math.max(0, this.veils.length - 2);
@@ -2200,11 +2237,13 @@ var FadePainter = class {
 			const groups = /* @__PURE__ */ new Map();
 			const minStart = this.veils.reduce((m, v) => Math.min(m, v.start), Infinity);
 			const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, contentTextFilter(content));
-			let base = 0;
-			let node = walker.nextNode();
-			while (node != null) {
+			walker.currentNode = content;
+			let node = walker.lastChild();
+			let end = this.length;
+			while (node != null && end > minStart) {
 				const len = node.data.length;
-				if (len > 0 && base + len > minStart) for (let vi = 0; vi < this.veils.length; vi++) {
+				const base = end - len;
+				if (len > 0) for (let vi = 0; vi < this.veils.length; vi++) {
 					const v = this.veils[vi];
 					const s = Math.max(v.start - base, 0);
 					const e = Math.min(v.end - base, len);
@@ -2228,8 +2267,8 @@ var FadePainter = class {
 					range.setEnd(node, e);
 					for (const r of range.getClientRects()) group.path.rect(r.left - origin.left - 1, r.top - origin.top - 1, r.width + 2, r.height + 2);
 				}
-				base += len;
-				node = walker.nextNode();
+				end = base;
+				node = walker.previousNode();
 			}
 			for (const group of groups.values()) {
 				ctx.globalAlpha = group.alpha;
@@ -2240,6 +2279,7 @@ var FadePainter = class {
 		}
 		if (this.veils.length > 0) this.raf = requestAnimationFrame(this.frame);
 		else {
+			this.length = chromeFreeLength(content);
 			this.running = false;
 			this.raf = 0;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wingleeio/mugen-markdown",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Measurable markdown for mugen — incremark-parsed, rendered with mugen primitives so the virtualizer's tree walker computes exact row heights.",
   "license": "MIT",
   "author": "Wing Lee <contact@winglee.io>",
@@ -65,7 +65,7 @@
     "tsdown": "^0.22.2",
     "typescript": "^6.0.3",
     "vitest": "^4.1.8",
-    "@wingleeio/mugen": "0.3.4"
+    "@wingleeio/mugen": "0.3.5"
   },
   "scripts": {
     "build": "tsdown",