@wingleeio/mugen-markdown 0.4.1 → 0.4.3

package/dist/index.cjs

@@ -2041,10 +2041,16 @@ function renderMarkdown(source, options = {}) {
 * text fading in. Nothing about the row ever animates; layout is done the
 * moment the text lands.
 *
-* Unlike a list-level overlay, the veil canvas lives **inside** the markdown's
-* own box (`position: absolute; inset: 0`), so it scrolls with the content and
-* needs no viewport-geometry tracking. The painter idles (no rAF) until a
-* DOM mutation arrives, so leaving `fade` on for a settled block costs nothing.
+* The veil canvas lives **inside** the markdown's own box (`position:
+* absolute`), so it scrolls with the content. It is *windowed to the scroll
+* viewport* each frame — sized and positioned to cover only the visible band,
+* never the full answer height — because the backing store is reallocated and
+* `clearRect`-cleared every frame, and a full-height canvas on a tall stream
+* makes that O(answer length): a multi-megapixel clear at 60fps that blows the
+* frame budget once the answer is tall. The veils only ever sit on the freshly
+* appended tail, which stick-to-bottom keeps at the viewport's edge, so the
+* window loses nothing. The painter also idles (no rAF) until a DOM mutation
+* arrives, so leaving `fade` on for a settled block costs nothing.
 */
 const EMA_SEED_MS = 160;
 const MIN_FADE_MS = 120;
@@ -2059,6 +2065,10 @@ function elementInChrome(el, container) {
 	for (let p = el; p != null && p !== container; p = p.parentElement) if (p.tagName === "BUTTON") return true;
 	return false;
 }
+/** Whether a computed `overflow` value clips its overflow (bounds visibility). */
+function isClipped(overflow) {
+	return overflow === "auto" || overflow === "scroll" || overflow === "hidden" || overflow === "clip" || overflow === "overlay";
+}
 function contentTextFilter(container) {
 	return { acceptNode: (n) => inChrome(n, container) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT };
 }
@@ -2147,6 +2157,9 @@ var FadePainter = class {
 	raf = 0;
 	running = false;
 	mo = null;
+	/** Scrollable/clipping ancestors of the content — found once, then cached.
+	*  Intersecting their rects bounds the veil canvas to the visible band. */
+	clippers = null;
 	attach(content, canvas) {
 		if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 		const ctx = canvas.getContext("2d");
@@ -2192,6 +2205,36 @@ var FadePainter = class {
 		this.running = true;
 		this.raf = requestAnimationFrame(this.frame);
 	}
+	/**
+	* The vertical band of `content` currently inside the scroll viewport, in
+	* client coordinates, clamped to the content's own box. Intersects every
+	* scrollable/clipping ancestor (found once via `getComputedStyle`, then
+	* cached) and the window. This is what keeps the veil canvas O(viewport)
+	* instead of O(content height): only the visible band is sized and cleared.
+	*/
+	visibleBand(content, rect) {
+		if (this.clippers == null) {
+			const list = [];
+			for (let p = content.parentElement; p != null; p = p.parentElement) {
+				const s = getComputedStyle(p);
+				if (isClipped(s.overflowY) || isClipped(s.overflowX)) list.push(p);
+			}
+			this.clippers = list;
+		}
+		let top = 0;
+		let bottom = typeof innerHeight === "number" ? innerHeight : rect.bottom;
+		for (const c of this.clippers) {
+			const r = c.getBoundingClientRect();
+			if (r.top > top) top = r.top;
+			if (r.bottom < bottom) bottom = r.bottom;
+		}
+		const visTop = Math.max(rect.top, top);
+		const visBottom = Math.min(rect.bottom, bottom);
+		return {
+			top: visTop,
+			height: Math.max(0, visBottom - visTop)
+		};
+	}
 	frame = () => {
 		const content = this.content;
 		const canvas = this.canvas;
@@ -2224,8 +2267,12 @@ var FadePainter = class {
 		const boost = 1 + .3 * Math.max(0, this.veils.length - 2);
 		this.veils = this.veils.filter((v) => (now - v.t0) * boost < duration);
 		const dpr = typeof devicePixelRatio === "number" && devicePixelRatio > 0 ? devicePixelRatio : 1;
-		const w = content.clientWidth;
-		const h = content.clientHeight;
+		const rect = content.getBoundingClientRect();
+		const band = this.visibleBand(content, rect);
+		const w = rect.width;
+		const h = band.height;
+		canvas.style.top = `${band.top - rect.top}px`;
+		canvas.style.height = `${h}px`;
 		if (canvas.width !== Math.round(w * dpr) || canvas.height !== Math.round(h * dpr)) {
 			canvas.width = Math.round(w * dpr);
 			canvas.height = Math.round(h * dpr);
@@ -2233,16 +2280,21 @@ var FadePainter = class {
 		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 		ctx.clearRect(0, 0, w, h);
 		if (this.veils.length > 0) {
-			const origin = canvas.getBoundingClientRect();
+			const origin = {
+				left: rect.left,
+				top: band.top
+			};
 			const bgCache = /* @__PURE__ */ new Map();
 			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);
@@ -2266,8 +2318,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;
@@ -2300,9 +2352,10 @@ function renderFadeMarkdown(props) {
 		"aria-hidden": true,
 		style: {
 			position: "absolute",
-			inset: 0,
+			left: 0,
+			top: 0,
 			width: "100%",
-			height: "100%",
+			height: 0,
 			pointerEvents: "none"
 		}
 	}));

package/dist/index.mjs

@@ -2040,10 +2040,16 @@ function renderMarkdown(source, options = {}) {
 * text fading in. Nothing about the row ever animates; layout is done the
 * moment the text lands.
 *
-* Unlike a list-level overlay, the veil canvas lives **inside** the markdown's
-* own box (`position: absolute; inset: 0`), so it scrolls with the content and
-* needs no viewport-geometry tracking. The painter idles (no rAF) until a
-* DOM mutation arrives, so leaving `fade` on for a settled block costs nothing.
+* The veil canvas lives **inside** the markdown's own box (`position:
+* absolute`), so it scrolls with the content. It is *windowed to the scroll
+* viewport* each frame — sized and positioned to cover only the visible band,
+* never the full answer height — because the backing store is reallocated and
+* `clearRect`-cleared every frame, and a full-height canvas on a tall stream
+* makes that O(answer length): a multi-megapixel clear at 60fps that blows the
+* frame budget once the answer is tall. The veils only ever sit on the freshly
+* appended tail, which stick-to-bottom keeps at the viewport's edge, so the
+* window loses nothing. The painter also idles (no rAF) until a DOM mutation
+* arrives, so leaving `fade` on for a settled block costs nothing.
 */
 const EMA_SEED_MS = 160;
 const MIN_FADE_MS = 120;
@@ -2058,6 +2064,10 @@ function elementInChrome(el, container) {
 	for (let p = el; p != null && p !== container; p = p.parentElement) if (p.tagName === "BUTTON") return true;
 	return false;
 }
+/** Whether a computed `overflow` value clips its overflow (bounds visibility). */
+function isClipped(overflow) {
+	return overflow === "auto" || overflow === "scroll" || overflow === "hidden" || overflow === "clip" || overflow === "overlay";
+}
 function contentTextFilter(container) {
 	return { acceptNode: (n) => inChrome(n, container) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT };
 }
@@ -2146,6 +2156,9 @@ var FadePainter = class {
 	raf = 0;
 	running = false;
 	mo = null;
+	/** Scrollable/clipping ancestors of the content — found once, then cached.
+	*  Intersecting their rects bounds the veil canvas to the visible band. */
+	clippers = null;
 	attach(content, canvas) {
 		if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 		const ctx = canvas.getContext("2d");
@@ -2191,6 +2204,36 @@ var FadePainter = class {
 		this.running = true;
 		this.raf = requestAnimationFrame(this.frame);
 	}
+	/**
+	* The vertical band of `content` currently inside the scroll viewport, in
+	* client coordinates, clamped to the content's own box. Intersects every
+	* scrollable/clipping ancestor (found once via `getComputedStyle`, then
+	* cached) and the window. This is what keeps the veil canvas O(viewport)
+	* instead of O(content height): only the visible band is sized and cleared.
+	*/
+	visibleBand(content, rect) {
+		if (this.clippers == null) {
+			const list = [];
+			for (let p = content.parentElement; p != null; p = p.parentElement) {
+				const s = getComputedStyle(p);
+				if (isClipped(s.overflowY) || isClipped(s.overflowX)) list.push(p);
+			}
+			this.clippers = list;
+		}
+		let top = 0;
+		let bottom = typeof innerHeight === "number" ? innerHeight : rect.bottom;
+		for (const c of this.clippers) {
+			const r = c.getBoundingClientRect();
+			if (r.top > top) top = r.top;
+			if (r.bottom < bottom) bottom = r.bottom;
+		}
+		const visTop = Math.max(rect.top, top);
+		const visBottom = Math.min(rect.bottom, bottom);
+		return {
+			top: visTop,
+			height: Math.max(0, visBottom - visTop)
+		};
+	}
 	frame = () => {
 		const content = this.content;
 		const canvas = this.canvas;
@@ -2223,8 +2266,12 @@ var FadePainter = class {
 		const boost = 1 + .3 * Math.max(0, this.veils.length - 2);
 		this.veils = this.veils.filter((v) => (now - v.t0) * boost < duration);
 		const dpr = typeof devicePixelRatio === "number" && devicePixelRatio > 0 ? devicePixelRatio : 1;
-		const w = content.clientWidth;
-		const h = content.clientHeight;
+		const rect = content.getBoundingClientRect();
+		const band = this.visibleBand(content, rect);
+		const w = rect.width;
+		const h = band.height;
+		canvas.style.top = `${band.top - rect.top}px`;
+		canvas.style.height = `${h}px`;
 		if (canvas.width !== Math.round(w * dpr) || canvas.height !== Math.round(h * dpr)) {
 			canvas.width = Math.round(w * dpr);
 			canvas.height = Math.round(h * dpr);
@@ -2232,16 +2279,21 @@ var FadePainter = class {
 		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 		ctx.clearRect(0, 0, w, h);
 		if (this.veils.length > 0) {
-			const origin = canvas.getBoundingClientRect();
+			const origin = {
+				left: rect.left,
+				top: band.top
+			};
 			const bgCache = /* @__PURE__ */ new Map();
 			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);
@@ -2265,8 +2317,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;
@@ -2299,9 +2351,10 @@ function renderFadeMarkdown(props) {
 		"aria-hidden": true,
 		style: {
 			position: "absolute",
-			inset: 0,
+			left: 0,
+			top: 0,
 			width: "100%",
-			height: "100%",
+			height: 0,
 			pointerEvents: "none"
 		}
 	}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wingleeio/mugen-markdown",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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.6"
   },
   "scripts": {
     "build": "tsdown",