tegaki 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # tegaki
 
+## 0.14.0
+
+### Minor Changes
+
+- 79a0e6a: Add Nuxt module and usage example. Fixes [#35](https://github.com/KurtGokhan/tegaki/issues/35).
+- 9a0d74a: Add `quality.smoothing` option that interpolates stroke points with a centripetal Catmull-Rom spline, hiding the faceted corners visible at large render sizes where the baked polyline resolution shows through. Enabling it forces subdivision on (default `segmentSize=2` CSS px) and rebuilds the subdivision cache; the original points stay on the curve, so animation timing and wobble phase are unchanged. Default is `false` (existing bundles render identically). Also exposed on the web component as the `smoothing` attribute.
+
+### Patch Changes
+
+- 84ad2b2: text layout was broken when element had transform applied
+- b6967aa: canvas was not cleared when all text removed
+
+## 0.13.0
+
+### Minor Changes
+
+- 8fd875a: Add `clipText` quality option that clips handwriting strokes to the filled text shape using canvas composite operations. Accepts `true` for clipping with normal stroke widths, or a number to scale stroke widths (e.g. `2` for 2x wider strokes that fill more of the glyph interior).
+
+### Patch Changes
+
+- 2a46c09: fix compatibility with old Safari versions, and a bug with text layout when text is wrapped. Fixes [#29](https://github.com/KurtGokhan/tegaki/issues/29)
+- cdb2993: Fix timing around whitespace characters. Spaces and line breaks no longer consume `unknownDuration` on top of `wordGap`/`lineGap` — the gap alone now represents the full pause. `\r\n` and `\r` are normalized to `\n`, and all Unicode whitespace (NBSP, tab, ideographic space, etc.) is treated as a word gap.
+
+  Fixes [#28](https://github.com/KurtGokhan/tegaki/issues/28)
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/core/index.d.mts

@@ -1,2 +1,2 @@
-import { A as LineCap, B as TegakiSingletonEffectName, C as resolveEffects, D as CSSLength, E as COMPATIBLE_BUNDLE_VERSIONS, F as TegakiEffectConfigs, I as TegakiEffectName, L as TegakiEffects, M as Point, N as Stroke, O as FontOutput, P as TegakiBundle, R as TegakiGlyphData, S as ResolvedEffect, T as BUNDLE_VERSION, V as TimedPoint, _ as computeTimeline, a as CreateElementFn, b as ensureFontFace, c as TimeControlMode, d as getBundle, f as registerBundle, g as TimelineEntry, h as TimelineConfig, i as TegakiEngine, j as PathCommand, k as GlyphData, l as TimeControlProp, m as Timeline, n as buildRootProps, o as TegakiEngineOptions, p as resolveBundle, r as domCreateElement, s as TegakiQuality, t as buildChildren, u as createBundle, v as TextLayout, w as BBox, x as drawGlyph, y as computeTextLayout, z as TegakiMultiEffectName } from "../index-DtvcCtXG.mjs";
+import { A as LineCap, B as TegakiSingletonEffectName, C as resolveEffects, D as CSSLength, E as COMPATIBLE_BUNDLE_VERSIONS, F as TegakiEffectConfigs, I as TegakiEffectName, L as TegakiEffects, M as Point, N as Stroke, O as FontOutput, P as TegakiBundle, R as TegakiGlyphData, S as ResolvedEffect, T as BUNDLE_VERSION, V as TimedPoint, _ as computeTimeline, a as CreateElementFn, b as ensureFontFace, c as TimeControlMode, d as getBundle, f as registerBundle, g as TimelineEntry, h as TimelineConfig, i as TegakiEngine, j as PathCommand, k as GlyphData, l as TimeControlProp, m as Timeline, n as buildRootProps, o as TegakiEngineOptions, p as resolveBundle, r as domCreateElement, s as TegakiQuality, t as buildChildren, u as createBundle, v as TextLayout, w as BBox, x as drawGlyph, y as computeTextLayout, z as TegakiMultiEffectName } from "../index-BBRejOMe.mjs";
 export { BBox, BUNDLE_VERSION, COMPATIBLE_BUNDLE_VERSIONS, CSSLength, CreateElementFn, FontOutput, GlyphData, LineCap, PathCommand, Point, ResolvedEffect, Stroke, TegakiBundle, TegakiEffectConfigs, TegakiEffectName, TegakiEffects, TegakiEngine, TegakiEngineOptions, TegakiGlyphData, TegakiMultiEffectName, TegakiQuality, TegakiSingletonEffectName, TextLayout, TimeControlMode, TimeControlProp, TimedPoint, Timeline, TimelineConfig, TimelineEntry, buildChildren, buildRootProps, computeTextLayout, computeTimeline, createBundle, domCreateElement, drawGlyph, ensureFontFace, getBundle, registerBundle, resolveBundle, resolveEffects };

package/dist/core/index.mjs

@@ -1,2 +1,2 @@
-import { a as createBundle, c as resolveBundle, d as computeTimeline, f as computeTextLayout, g as resolveEffects, i as domCreateElement, l as BUNDLE_VERSION, m as drawGlyph, n as buildChildren, o as getBundle, p as ensureFontFace, r as buildRootProps, s as registerBundle, t as TegakiEngine, u as COMPATIBLE_BUNDLE_VERSIONS } from "../core-CIzLDu_Q.mjs";
+import { a as createBundle, c as resolveBundle, d as computeTimeline, f as computeTextLayout, g as resolveEffects, i as domCreateElement, l as BUNDLE_VERSION, m as drawGlyph, n as buildChildren, o as getBundle, p as ensureFontFace, r as buildRootProps, s as registerBundle, t as TegakiEngine, u as COMPATIBLE_BUNDLE_VERSIONS } from "../core-BYU5BEaZ.mjs";
 export { BUNDLE_VERSION, COMPATIBLE_BUNDLE_VERSIONS, TegakiEngine, buildChildren, buildRootProps, computeTextLayout, computeTimeline, createBundle, domCreateElement, drawGlyph, ensureFontFace, getBundle, registerBundle, resolveBundle, resolveEffects };

package/dist/{core-CIzLDu_Q.mjs → core-BYU5BEaZ.mjs}

@@ -54,17 +54,98 @@ function findEffects(effects, name) {
 	return effects.filter((e) => e.effect === name);
 }
 //#endregion
+//#region src/lib/catmullRom.ts
+/**
+* Sample `count` points along a centripetal Catmull-Rom segment from `p1` to
+* `p2`, with neighbor control points `p0` and `p3`. Samples are emitted at
+* `u = k/count` for `k = 1..count`, so the last sample equals `p2`.
+*
+* Centripetal parameterization (α = 0.5) avoids the cusps and self-loops that
+* uniform/chordal Catmull-Rom can produce on sharp corners — relevant for the
+* baked RDP-simplified polylines the renderer consumes.
+*
+* For endpoint segments where a neighbor is missing, pass a phantom point
+* built with {@link reflect}. Zero-length chords are clamped to a tiny epsilon
+* so the knot parameterization stays non-degenerate.
+*/
+function sampleCatmullRom(p0, p1, p2, p3, count) {
+	const d01 = Math.max(dist(p0, p1), 1e-6);
+	const d12 = Math.max(dist(p1, p2), 1e-6);
+	const d23 = Math.max(dist(p2, p3), 1e-6);
+	const t0 = 0;
+	const t1 = t0 + Math.sqrt(d01);
+	const t2 = t1 + Math.sqrt(d12);
+	const t3 = t2 + Math.sqrt(d23);
+	const out = new Array(count);
+	for (let k = 1; k <= count; k++) {
+		const t = t1 + k / count * (t2 - t1);
+		out[k - 1] = evalBarryGoldman(p0, p1, p2, p3, t0, t1, t2, t3, t);
+	}
+	return out;
+}
+/**
+* Reflect `p` across `anchor` to produce a phantom neighbor for endpoint
+* segments. The result lies on the extension of (p, anchor) past `anchor` at
+* the same distance — equivalent to a zero-curvature extrapolation, which
+* gives a natural straight start/end tangent.
+*/
+function reflect(anchor, p) {
+	return [
+		2 * anchor[0] - p[0],
+		2 * anchor[1] - p[1],
+		anchor[2]
+	];
+}
+function dist(a, b) {
+	const dx = b[0] - a[0];
+	const dy = b[1] - a[1];
+	return Math.sqrt(dx * dx + dy * dy);
+}
+function evalBarryGoldman(p0, p1, p2, p3, t0, t1, t2, t3, t) {
+	const a1x = lerp(p0[0], p1[0], t0, t1, t);
+	const a1y = lerp(p0[1], p1[1], t0, t1, t);
+	const a1w = lerp(p0[2], p1[2], t0, t1, t);
+	const a2x = lerp(p1[0], p2[0], t1, t2, t);
+	const a2y = lerp(p1[1], p2[1], t1, t2, t);
+	const a2w = lerp(p1[2], p2[2], t1, t2, t);
+	const a3x = lerp(p2[0], p3[0], t2, t3, t);
+	const a3y = lerp(p2[1], p3[1], t2, t3, t);
+	const a3w = lerp(p2[2], p3[2], t2, t3, t);
+	const b1x = lerp(a1x, a2x, t0, t2, t);
+	const b1y = lerp(a1y, a2y, t0, t2, t);
+	const b1w = lerp(a1w, a2w, t0, t2, t);
+	const b2x = lerp(a2x, a3x, t1, t3, t);
+	const b2y = lerp(a2y, a3y, t1, t3, t);
+	const b2w = lerp(a2w, a3w, t1, t3, t);
+	return {
+		x: lerp(b1x, b2x, t1, t2, t),
+		y: lerp(b1y, b2y, t1, t2, t),
+		width: lerp(b1w, b2w, t1, t2, t)
+	};
+}
+function lerp(a, b, ta, tb, t) {
+	const span = tb - ta;
+	if (span === 0) return a;
+	return a + (b - a) * ((t - ta) / span);
+}
+//#endregion
 //#region src/lib/strokeCache.ts
 /**
 * Subdivide a stroke so that no sub-segment exceeds `maxSegLen` font units.
 * Pass `Infinity` (or any non-finite value) to skip subdivision and return
 * the raw polyline.
 *
-* Output depends only on `(stroke.p, maxSegLen)` — not on position, seed,
-* progress, or effect config — so it can be cached and shared across every
-* instance of the same glyph at the same font size.
+* When `smoothing` is true, intermediate vertices are placed on a centripetal
+* Catmull-Rom spline through the original points (see `catmullRom.ts`) —
+* hiding the polyline facets that show up at large render sizes. The original
+* points remain on the curve, so endpoints and `cumLen`/`idx` semantics are
+* preserved. Has no effect when `maxSegLen` is non-finite (no subdivision).
+*
+* Output depends only on `(stroke.p, maxSegLen, smoothing)` — not on position,
+* seed, progress, or effect config — so it can be cached and shared across
+* every instance of the same glyph at the same font size.
 */
-function subdivideStroke(stroke, maxSegLen) {
+function subdivideStroke(stroke, maxSegLen, smoothing = false) {
 	const pts = stroke.p;
 	const n = pts.length;
 	if (n === 0) return {
@@ -86,20 +167,43 @@ function subdivideStroke(stroke, maxSegLen) {
 		const cur = pts[j];
 		const dx = cur[0] - prev[0];
 		const dy = cur[1] - prev[1];
-		const dw = cur[2] - prev[2];
-		const segLen = Math.sqrt(dx * dx + dy * dy);
-		const count = segLen > 0 && Number.isFinite(maxSegLen) && maxSegLen > 0 ? Math.max(1, Math.ceil(segLen / maxSegLen)) : 1;
-		for (let k = 1; k <= count; k++) {
-			const t = k / count;
-			vertices.push({
-				x: prev[0] + dx * t,
-				y: prev[1] + dy * t,
-				width: prev[2] + dw * t,
-				cumLen: cumLen + segLen * t,
-				idx: j - 1 + t
-			});
+		const chordLen = Math.sqrt(dx * dx + dy * dy);
+		const count = chordLen > 0 && Number.isFinite(maxSegLen) && maxSegLen > 0 ? Math.max(1, Math.ceil(chordLen / maxSegLen)) : 1;
+		if (smoothing && count > 1) {
+			const samples = sampleCatmullRom(j >= 2 ? pts[j - 2] : reflect(prev, cur), prev, cur, j + 1 < n ? pts[j + 1] : reflect(cur, prev), count);
+			let px = prev[0];
+			let py = prev[1];
+			let segAccum = 0;
+			for (let k = 0; k < count; k++) {
+				const s = samples[k];
+				const ex = s.x - px;
+				const ey = s.y - py;
+				segAccum += Math.sqrt(ex * ex + ey * ey);
+				vertices.push({
+					x: s.x,
+					y: s.y,
+					width: s.width,
+					cumLen: cumLen + segAccum,
+					idx: j - 1 + (k + 1) / count
+				});
+				px = s.x;
+				py = s.y;
+			}
+			cumLen += segAccum;
+		} else {
+			const dw = cur[2] - prev[2];
+			for (let k = 1; k <= count; k++) {
+				const t = k / count;
+				vertices.push({
+					x: prev[0] + dx * t,
+					y: prev[1] + dy * t,
+					width: prev[2] + dw * t,
+					cumLen: cumLen + chordLen * t,
+					idx: j - 1 + t
+				});
+			}
+			cumLen += chordLen;
 		}
-		cumLen += segLen;
 	}
 	let widthSum = 0;
 	for (const p of pts) widthSum += p[2];
@@ -111,14 +215,15 @@ function subdivideStroke(stroke, maxSegLen) {
 }
 //#endregion
 //#region src/lib/utils.ts
-const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+const segmenter = typeof Intl !== "undefined" && typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
 /** Resolve a CSSLength to pixels. Plain numbers are px, `"Nem"` is N * fontSize. */
 function resolveCSSLength(value, fontSize) {
 	if (typeof value === "number") return value;
 	return parseFloat(value) * fontSize;
 }
 function graphemes(text) {
-	return Array.from(segmenter.segment(text), (s) => s.segment);
+	if (segmenter) return Array.from(segmenter.segment(text), (s) => s.segment);
+	return Array.from(text);
 }
 /**
 * Build the CSS `font-family` value for a bundle, including the full
@@ -209,7 +314,7 @@ function defaultStrokeEasing(t) {
 * font, fontSize, or segment size changes; if omitted here, strokes are
 * subdivided inline each call (useful for testing).
 */
-function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], seed = 0, getSubdivided, strokeEasing = defaultStrokeEasing) {
+function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], seed = 0, getSubdivided, strokeEasing = defaultStrokeEasing, strokeScale = 1) {
 	const scale = pos.fontSize / pos.unitsPerEm;
 	const ox = pos.x;
 	const oy = pos.y;
@@ -268,8 +373,8 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 			const p = rawPts[0];
 			const dotX = px(p[0] + wobbleDx(p[0], p[1], 0));
 			const dotY = py(p[1] + wobbleDy(p[0], p[1], 0));
-			const baseLineWidth = Math.max(p[2], .5) * scale;
-			let dotWidth = baseLineWidth + (Math.max(p[2], .5) * scale - baseLineWidth) * pressureAmount;
+			const baseLineWidth = Math.max(p[2], .5) * scale * strokeScale;
+			let dotWidth = baseLineWidth + (Math.max(p[2], .5) * scale * strokeScale - baseLineWidth) * pressureAmount;
 			dotWidth *= taperMultiplier(.5);
 			for (const glow of glowEffects) {
 				ctx.save();
@@ -296,7 +401,7 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 		if (vertices.length < 2 || totalLen <= 0) continue;
 		const drawLen = totalLen * progress;
 		if (drawLen <= 0) continue;
-		const baseLineWidth = Math.max(avgWidth, .5) * scale;
+		const baseLineWidth = Math.max(avgWidth, .5) * scale * strokeScale;
 		let lo = 0;
 		let hi = vertices.length - 1;
 		while (lo < hi) {
@@ -369,8 +474,8 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 				const midProgress = (aCum + bCum) * .5 * invTotalLen;
 				let lw = baseLineWidth;
 				if (needsPerSegment) {
-					const perPoint = (aWidth + bWidth) * .5 * scale;
-					lw = Math.max(baseLineWidth + (perPoint - baseLineWidth) * pressureAmount, .5 * scale) * taperMultiplier(midProgress);
+					const perPoint = (aWidth + bWidth) * .5 * scale * strokeScale;
+					lw = Math.max(baseLineWidth + (perPoint - baseLineWidth) * pressureAmount, .5 * scale * strokeScale) * taperMultiplier(midProgress);
 				}
 				ctx.lineWidth = lw;
 				ctx.strokeStyle = hasGradient ? colorAt(midProgress) : color;
@@ -426,7 +531,9 @@ function measureElement(el, fontSize) {
 		charOffsets: [],
 		charWidths: []
 	};
-	const elLeft = el.getBoundingClientRect().left;
+	const elRect = el.getBoundingClientRect();
+	const elLeft = elRect.left;
+	const scale = el.offsetWidth > 0 ? elRect.width / el.offsetWidth : 1;
 	const range = document.createRange();
 	const charOffsets = [];
 	const charWidths = [];
@@ -456,14 +563,14 @@ function measureElement(el, fontSize) {
 			currentLine.push(i);
 			continue;
 		}
-		const rect = rects[0];
-		if (currentLine.length > 0 && rect.top - prevTop > fontSize * .25) {
+		const rect = rects[rects.length - 1];
+		if (currentLine.length > 0 && rect.top - prevTop > fontSize * .25 * scale) {
 			lines.push(currentLine);
 			currentLine = [];
 		}
 		if (currentLine.length === 0) prevTop = rect.top;
-		charOffsets.push((rect.left - elLeft) / fontSize);
-		charWidths.push(rect.width / fontSize);
+		charOffsets.push((rect.left - elLeft) / scale / fontSize);
+		charWidths.push(rect.width / scale / fontSize);
 		currentLine.push(i);
 	}
 	if (currentLine.length > 0) lines.push(currentLine);
@@ -510,7 +617,9 @@ function computeTimeline(text, font, config) {
 	for (const char of chars) {
 		const glyph = font.glyphData[char];
 		const hasGlyph = !!glyph;
-		const duration = hasGlyph ? glyph.t ?? 1 : unknownDuration;
+		const isLineBreak = char === "\n";
+		const isWhitespace = isLineBreak || /^\s+$/.test(char);
+		const duration = isWhitespace ? 0 : hasGlyph ? glyph.t ?? unknownDuration : unknownDuration;
 		entries.push({
 			char,
 			offset,
@@ -518,13 +627,14 @@ function computeTimeline(text, font, config) {
 			hasGlyph
 		});
 		offset += duration;
-		if (char === "\n") offset += lineGap;
-		else if (char === " ") offset += wordGap;
+		if (isLineBreak) offset += lineGap;
+		else if (isWhitespace) offset += wordGap;
 		else offset += glyphGap;
 	}
 	if (entries.length > 0) {
 		const lastChar = chars[chars.length - 1];
-		offset -= lastChar === "\n" ? lineGap : lastChar === " " ? wordGap : glyphGap;
+		const trailingGap = lastChar === "\n" ? lineGap : /^\s+$/.test(lastChar) ? wordGap : glyphGap;
+		offset -= trailingGap;
 	}
 	return {
 		entries,
@@ -730,7 +840,10 @@ function buildChildren(options, h) {
 		"aria-hidden": "true",
 		style: {
 			position: "absolute",
-			inset: `calc(-1 * ${PAD_V_CSS}) -0.2em`,
+			top: `calc(-1 * ${PAD_V_CSS})`,
+			right: "-0.2em",
+			bottom: `calc(-1 * ${PAD_V_CSS})`,
+			left: "-0.2em",
 			width: "calc(100% + 0.4em)",
 			height: `calc(100% + 2 * ${PAD_V_CSS})`,
 			pointerEvents: "none",
@@ -792,6 +905,7 @@ var TegakiEngine = class {
 	_canvasEl;
 	_overlayEl;
 	_canvasFallbackEl;
+	_maskCanvas = null;
 	_text = "";
 	_font = null;
 	_timeControl = { mode: "uncontrolled" };
@@ -865,7 +979,8 @@ var TegakiEngine = class {
 		if (typeof window !== "undefined") {
 			this._mql = window.matchMedia("(prefers-reduced-motion: reduce)");
 			this._prefersReducedMotion = this._mql.matches;
-			this._mql.addEventListener("change", this._onReducedMotionChange);
+			if (this._mql.addEventListener) this._mql.addEventListener("change", this._onReducedMotionChange);
+			else this._mql.addListener(this._onReducedMotionChange);
 		}
 		this._measure();
 		if (options) this.update(options);
@@ -929,10 +1044,13 @@ var TegakiEngine = class {
 		let dirtyLayout = false;
 		let dirtyRender = false;
 		let dirtyPlayback = false;
-		if ("text" in options && options.text !== this._text) {
-			this._text = options.text ?? "";
-			dirtyTimeline = true;
-			dirtyLayout = true;
+		if ("text" in options) {
+			const nextText = (options.text ?? "").replace(/\r\n?/g, "\n");
+			if (nextText !== this._text) {
+				this._text = nextText;
+				dirtyTimeline = true;
+				dirtyLayout = true;
+			}
 		}
 		if ("font" in options) {
 			const resolved = resolveBundle(options.font) ?? null;
@@ -1000,10 +1118,12 @@ var TegakiEngine = class {
 		this._stopLoop();
 		this._resizeObserver.disconnect();
 		this._sentinelEl.removeEventListener("transitionend", this._onSentinelTransition);
-		this._mql?.removeEventListener("change", this._onReducedMotionChange);
+		if (this._mql) if (this._mql.removeEventListener) this._mql.removeEventListener("change", this._onReducedMotionChange);
+		else this._mql.removeListener(this._onReducedMotionChange);
 		this._contentEl?.remove();
 		this._strokeCache = /* @__PURE__ */ new WeakMap();
 		this._strokeCacheKey = "";
+		this._maskCanvas = null;
 	}
 	/** Estimate line-height from font metrics when CSS returns "normal". */
 	_fallbackLineHeight(fontSize) {
@@ -1100,7 +1220,8 @@ var TegakiEngine = class {
 			}
 		}
 		if (e.propertyName === "--tegaki-progress") {
-			this._cssTime = Number(styles.getPropertyValue(CSS_PROGRESS)) * this._timeline.totalDuration;
+			const rawProgress = Number(styles.getPropertyValue(CSS_PROGRESS));
+			this._cssTime = rawProgress * this._timeline.totalDuration;
 			changed = true;
 		}
 		if (changed) this._render();
@@ -1251,7 +1372,6 @@ var TegakiEngine = class {
 		const font = this._font;
 		const layout = this._layout;
 		const fontSize = this._fontSize;
-		if (!font?.glyphData || !layout || !fontSize) return;
 		const effectiveDpr = (window.devicePixelRatio || 1) * Math.max(this._quality?.pixelRatio ?? 1, 0);
 		const w = canvas.offsetWidth;
 		const h = canvas.offsetHeight;
@@ -1263,6 +1383,7 @@ var TegakiEngine = class {
 		if (!ctx) return;
 		ctx.setTransform(effectiveDpr, 0, 0, effectiveDpr, 0, 0);
 		ctx.clearRect(0, 0, w, h);
+		if (!font?.glyphData || !layout || !fontSize) return;
 		const padH = PADDING_H_EM * fontSize;
 		const lineHeight = this._lineHeight;
 		const padV = Math.max(MIN_PADDING_V_EM * fontSize, (MIN_LINE_HEIGHT_EM * fontSize - lineHeight) / 2);
@@ -1275,10 +1396,11 @@ var TegakiEngine = class {
 			const p = findEffect(this._resolvedEffects, "pressureWidth");
 			return !!p && Math.max(0, Math.min(p.config.strength ?? 1, 1)) > 0;
 		})();
-		const resolvedSegmentSize = this._quality?.segmentSize ?? (effectsNeedSubdivision ? 2 : void 0);
+		const smoothing = this._quality?.smoothing === true;
+		const resolvedSegmentSize = this._quality?.segmentSize ?? (effectsNeedSubdivision || smoothing ? 2 : void 0);
 		const scale = fontSize / font.unitsPerEm;
 		const maxSegLenFU = resolvedSegmentSize != null ? resolvedSegmentSize / scale : Infinity;
-		const cacheKey = `${font.family}|${maxSegLenFU}`;
+		const cacheKey = `${font.family}|${maxSegLenFU}|${smoothing ? "s" : "l"}`;
 		if (cacheKey !== this._strokeCacheKey) {
 			this._strokeCache = /* @__PURE__ */ new WeakMap();
 			this._strokeCacheKey = cacheKey;
@@ -1287,11 +1409,13 @@ var TegakiEngine = class {
 		const getSubdivided = (stroke) => {
 			let sub = strokeCache.get(stroke);
 			if (!sub) {
-				sub = subdivideStroke(stroke, maxSegLenFU);
+				sub = subdivideStroke(stroke, maxSegLenFU, smoothing);
 				strokeCache.set(stroke, sub);
 			}
 			return sub;
 		};
+		const clipText = this._quality?.clipText;
+		const strokeScale = typeof clipText === "number" ? clipText : 1;
 		let y = 0;
 		for (const lineIndices of layout.lines) {
 			for (const charIdx of lineIndices) {
@@ -1311,14 +1435,44 @@ var TegakiEngine = class {
 						unitsPerEm: font.unitsPerEm,
 						ascender: font.ascender,
 						descender: font.descender
-					}, localTime, font.lineCap, color, this._resolvedEffects, this._seed + charIdx, getSubdivided, this._timing?.strokeEasing);
+					}, localTime, font.lineCap, color, this._resolvedEffects, this._seed + charIdx, getSubdivided, this._timing?.strokeEasing, strokeScale);
 				} else if (!entry.hasGlyph && currentTime >= entry.offset + entry.duration) drawFallbackGlyph(ctx, char, x, y + halfLeading + font.ascender / font.unitsPerEm * fontSize, fontSize, cssFontFamily(font), color, this._resolvedEffects, this._seed + charIdx);
 			}
 			y += lineHeight;
 		}
+		if (clipText) {
+			if (!this._maskCanvas) this._maskCanvas = document.createElement("canvas");
+			const maskCanvas = this._maskCanvas;
+			if (maskCanvas.width !== canvas.width || maskCanvas.height !== canvas.height) {
+				maskCanvas.width = canvas.width;
+				maskCanvas.height = canvas.height;
+			}
+			const maskCtx = maskCanvas.getContext("2d");
+			maskCtx.setTransform(effectiveDpr, 0, 0, effectiveDpr, 0, 0);
+			maskCtx.clearRect(0, 0, w, h);
+			maskCtx.translate(padH, padV);
+			maskCtx.font = `${fontSize}px ${cssFontFamily(font)}`;
+			maskCtx.textBaseline = "alphabetic";
+			let clipY = 0;
+			for (const lineIndices of layout.lines) {
+				for (const charIdx of lineIndices) {
+					const char = characters[charIdx];
+					if (char === "\n") continue;
+					const x = (layout.charOffsets[charIdx] ?? 0) * fontSize;
+					const baseline = clipY + halfLeading + font.ascender / font.unitsPerEm * fontSize;
+					maskCtx.fillText(char, x, baseline);
+				}
+				clipY += lineHeight;
+			}
+			ctx.save();
+			ctx.setTransform(1, 0, 0, 1, 0, 0);
+			ctx.globalCompositeOperation = "destination-in";
+			ctx.drawImage(maskCanvas, 0, 0);
+			ctx.restore();
+		}
 	}
 };
 //#endregion
 export { createBundle as a, resolveBundle as c, computeTimeline as d, computeTextLayout as f, resolveEffects as g, coerceToString as h, domCreateElement as i, BUNDLE_VERSION as l, drawGlyph as m, buildChildren as n, getBundle as o, ensureFontFace as p, buildRootProps as r, registerBundle as s, TegakiEngine as t, COMPATIBLE_BUNDLE_VERSIONS as u };
 
-//# sourceMappingURL=core-CIzLDu_Q.mjs.map
+//# sourceMappingURL=core-BYU5BEaZ.mjs.map