tegaki 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # tegaki
 
+## 0.15.0
+
+### Minor Changes
+
+- ecba479: Split `gradient` into `strokeGradient` + `globalGradient`, and add render-stage hooks for layout-spanning effects. Closes #26.
+
+  **Breaking**
+
+  The `gradient` effect is renamed to `strokeGradient` with unchanged behavior (each stroke independently maps its progress to the color stops; `colors: 'rainbow'` still works). Rename the key in your `effects` prop:
+
+  ```tsx
+  // before
+  effects={{ gradient: { colors: ['#f00', '#00f'] } }}
+  // after
+  effects={{ strokeGradient: { colors: ['#f00', '#00f'] } }}
+  ```
+
+  **New — `globalGradient`**
+
+  A canvas-space linear gradient that spans the full text bounding box — the leftmost pixel of the first glyph is `colors[0]` and the rightmost pixel of the last glyph is `colors[N]`, regardless of stroke boundaries. Matches CSS `background-clip: text` semantics.
+
+  ```tsx
+  effects={{
+    globalGradient: {
+      colors: ['#f00', '#00f'],
+      angle: 0, // 0 = left→right (default); 90 = top→bottom; positive = clockwise
+    },
+  }}
+  ```
+
+  `strokeGradient` and `globalGradient` can be enabled independently. If both are on, `strokeGradient` wins per segment (its per-stroke color overrides `globalGradient`'s canvas-wide paint); this combination is unusual but predictable.
+
+  **New — effect render-stage hooks**
+
+  Effects can now declare optional `beforeRender(stage, config)` / `afterRender(stage, config)` hooks on their `EffectDefinition` metadata. The stage context exposes the 2D context, the `TextLayout`, a pre-computed `LayoutBBox`, base color, and seed. Hooks run once around the glyph loop (before in forward order, after in reverse), so effects spanning the whole layout — like `globalGradient` — have a natural place to set up canvas state. Built-in per-stroke effects (`glow`, `wobble`, `pressureWidth`, `taper`, `strokeGradient`) declare no hooks and are unaffected.
+
+  **New public exports from `tegaki/core`**: `EffectDefinition`, `RenderStageContext`, `LayoutBBox`, `getEffectDefinition`, `hasRenderHooks`, `computeLayoutBbox`, plus the previously-private `findEffect` / `findEffects`.
+
+## 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

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-e-RN9Gi3.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 };
+import { A as computeLayoutBbox, B as Point, C as findEffect, D as resolveEffects, E as hasRenderHooks, F as CSSLength, G as TegakiEffects, H as TegakiBundle, I as FontOutput, J as TegakiSingletonEffectName, K as TegakiGlyphData, L as GlyphData, M as BBox, N as BUNDLE_VERSION, O as LayoutBBox, P as COMPATIBLE_BUNDLE_VERSIONS, R as LineCap, S as ResolvedEffect, T as getEffectDefinition, U as TegakiEffectConfigs, V as Stroke, W as TegakiEffectName, Y as TimedPoint, _ as computeTimeline, a as CreateElementFn, b as EffectDefinition, c as TimeControlMode, d as getBundle, f as registerBundle, g as TimelineEntry, h as TimelineConfig, i as TegakiEngine, j as computeTextLayout, k as TextLayout, l as TimeControlProp, m as Timeline, n as buildRootProps, o as TegakiEngineOptions, p as resolveBundle, q as TegakiMultiEffectName, r as domCreateElement, s as TegakiQuality, t as buildChildren, u as createBundle, v as ensureFontFace, w as findEffects, x as RenderStageContext, y as drawGlyph, z as PathCommand } from "../index-B_c_g7Y-.mjs";
+export { BBox, BUNDLE_VERSION, COMPATIBLE_BUNDLE_VERSIONS, CSSLength, CreateElementFn, EffectDefinition, FontOutput, GlyphData, LayoutBBox, LineCap, PathCommand, Point, RenderStageContext, ResolvedEffect, Stroke, TegakiBundle, TegakiEffectConfigs, TegakiEffectName, TegakiEffects, TegakiEngine, TegakiEngineOptions, TegakiGlyphData, TegakiMultiEffectName, TegakiQuality, TegakiSingletonEffectName, TextLayout, TimeControlMode, TimeControlProp, TimedPoint, Timeline, TimelineConfig, TimelineEntry, buildChildren, buildRootProps, computeLayoutBbox, computeTextLayout, computeTimeline, createBundle, domCreateElement, drawGlyph, ensureFontFace, findEffect, findEffects, getBundle, getEffectDefinition, hasRenderHooks, 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-Ds9ohwR7.mjs";
-export { BUNDLE_VERSION, COMPATIBLE_BUNDLE_VERSIONS, TegakiEngine, buildChildren, buildRootProps, computeTextLayout, computeTimeline, createBundle, domCreateElement, drawGlyph, ensureFontFace, getBundle, registerBundle, resolveBundle, resolveEffects };
+import { _ as findEffect, a as createBundle, b as hasRenderHooks, c as resolveBundle, d as computeTimeline, f as computeLayoutBbox, h as drawGlyph, i as domCreateElement, l as BUNDLE_VERSION, m as ensureFontFace, n as buildChildren, o as getBundle, p as computeTextLayout, r as buildRootProps, s as registerBundle, t as TegakiEngine, u as COMPATIBLE_BUNDLE_VERSIONS, v as findEffects, x as resolveEffects, y as getEffectDefinition } from "../core-B7NiOWkP.mjs";
+export { BUNDLE_VERSION, COMPATIBLE_BUNDLE_VERSIONS, TegakiEngine, buildChildren, buildRootProps, computeLayoutBbox, computeTextLayout, computeTimeline, createBundle, domCreateElement, drawGlyph, ensureFontFace, findEffect, findEffects, getBundle, getEffectDefinition, hasRenderHooks, registerBundle, resolveBundle, resolveEffects };

package/dist/{core-Ds9ohwR7.mjs → core-B7NiOWkP.mjs}

@@ -1,12 +1,31 @@
 //#region src/lib/effects.ts
 const defaultEffects = { pressureWidth: true };
-const knownEffects = new Set([
-	"glow",
-	"wobble",
-	"pressureWidth",
-	"taper",
-	"gradient"
-]);
+const knownEffects = {
+	glow: {},
+	wobble: {},
+	pressureWidth: {},
+	taper: {},
+	strokeGradient: {},
+	globalGradient: { beforeRender(stage, config) {
+		const colors = config.colors;
+		if (!Array.isArray(colors) || colors.length === 0) return;
+		const { ctx, bbox } = stage;
+		const rad = (config.angle ?? 0) * Math.PI / 180;
+		const dx = Math.cos(rad);
+		const dy = Math.sin(rad);
+		const cx = bbox.x + bbox.width / 2;
+		const cy = bbox.y + bbox.height / 2;
+		const halfW = bbox.width / 2;
+		const halfH = bbox.height / 2;
+		const proj = Math.abs(dx * halfW) + Math.abs(dy * halfH);
+		const grad = ctx.createLinearGradient(cx - dx * proj, cy - dy * proj, cx + dx * proj, cy + dy * proj);
+		if (colors.length === 1) {
+			grad.addColorStop(0, colors[0]);
+			grad.addColorStop(1, colors[0]);
+		} else for (let i = 0; i < colors.length; i++) grad.addColorStop(i / (colors.length - 1), colors[i]);
+		stage.strokeStyle = grad;
+	} }
+};
 /**
 * Normalizes an effects record into a sorted array of resolved effects.
 * Known keys infer the effect name; custom keys read it from the `effect` field.
@@ -24,13 +43,13 @@ function resolveEffects(effects) {
 		let config;
 		let order;
 		if (value === true) {
-			effectName = knownEffects.has(key) ? key : void 0;
+			effectName = Object.hasOwn(knownEffects, key) ? key : void 0;
 			if (!effectName) continue;
 			config = {};
 			order = 0;
 		} else {
 			if (value.enabled === false) continue;
-			effectName = value.effect ?? (knownEffects.has(key) ? key : void 0);
+			effectName = value.effect ?? (Object.hasOwn(knownEffects, key) ? key : void 0);
 			if (!effectName) continue;
 			const { effect: _, order: o, enabled: __, ...rest } = value;
 			config = rest;
@@ -53,6 +72,93 @@ function findEffect(effects, name) {
 function findEffects(effects, name) {
 	return effects.filter((e) => e.effect === name);
 }
+/** Look up the render-hook metadata for an effect name. Unknown names return undefined. */
+function getEffectDefinition(name) {
+	return Object.hasOwn(knownEffects, name) ? knownEffects[name] : void 0;
+}
+/** True when any resolved effect defines a before/after render hook. */
+function hasRenderHooks(effects) {
+	for (const e of effects) {
+		const def = getEffectDefinition(e.effect);
+		if (def?.beforeRender || def?.afterRender) return true;
+	}
+	return false;
+}
+//#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
 /**
@@ -60,11 +166,17 @@ function findEffects(effects, name) {
 * 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 +198,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];
@@ -210,7 +345,8 @@ 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, strokeScale = 1) {
+function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], seed = 0, getSubdivided, strokeEasing = defaultStrokeEasing, strokeScale = 1, strokeStyleOverride) {
+	const defaultStrokePaint = strokeStyleOverride ?? color;
 	const scale = pos.fontSize / pos.unitsPerEm;
 	const ox = pos.x;
 	const oy = pos.y;
@@ -218,7 +354,7 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 	const wobbleEffect = findEffect(effects, "wobble");
 	const pressureEffect = findEffect(effects, "pressureWidth");
 	const taperEffect = findEffect(effects, "taper");
-	const gradientEffect = findEffect(effects, "gradient");
+	const strokeGradientEffect = findEffect(effects, "strokeGradient");
 	const pressureAmount = pressureEffect ? Math.max(0, Math.min(pressureEffect.config.strength ?? 1, 1)) : 0;
 	const wobbleAmplitude = wobbleEffect ? wobbleEffect.config.amplitude ?? 1.5 : 0;
 	const wobbleFrequency = wobbleEffect ? wobbleEffect.config.frequency ?? 8 : 0;
@@ -226,12 +362,12 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 	const hasWobble = !!wobbleEffect;
 	const taperStart = taperEffect ? Math.max(0, Math.min(taperEffect.config.startLength ?? .15, 1)) : 0;
 	const taperEnd = taperEffect ? Math.max(0, Math.min(taperEffect.config.endLength ?? .15, 1)) : 0;
-	const gradientColors = gradientEffect?.config.colors;
+	const gradientColors = strokeGradientEffect?.config.colors;
 	const isRainbow = gradientColors === "rainbow";
 	const gradientColorStops = Array.isArray(gradientColors) ? gradientColors : void 0;
-	const gradientSaturation = gradientEffect?.config.saturation ?? 80;
-	const gradientLightness = gradientEffect?.config.lightness ?? 55;
-	const hasGradient = !!gradientEffect;
+	const gradientSaturation = strokeGradientEffect?.config.saturation ?? 80;
+	const gradientLightness = strokeGradientEffect?.config.lightness ?? 55;
+	const hasStrokeGradient = !!strokeGradientEffect;
 	const needsPerSegment = pressureAmount > 0 || !!taperEffect;
 	const subdivide = getSubdivided ?? ((s) => subdivideStroke(s, Infinity));
 	const wobbleDx = (_x, y, idx) => {
@@ -285,7 +421,7 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 				ctx.fill();
 				ctx.restore();
 			}
-			ctx.fillStyle = colorAt(0);
+			ctx.fillStyle = hasStrokeGradient ? colorAt(0) : defaultStrokePaint;
 			ctx.beginPath();
 			if (lineCap === "round") {
 				ctx.arc(dotX, dotY, dotWidth / 2, 0, Math.PI * 2);
@@ -355,8 +491,8 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 			ctx.stroke();
 			ctx.restore();
 		}
-		if (!needsPerSegment && !hasGradient) {
-			ctx.strokeStyle = color;
+		if (!needsPerSegment && !hasStrokeGradient) {
+			ctx.strokeStyle = defaultStrokePaint;
 			ctx.lineWidth = baseLineWidth;
 			tracePolyline();
 			ctx.stroke();
@@ -374,7 +510,7 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 					lw = Math.max(baseLineWidth + (perPoint - baseLineWidth) * pressureAmount, .5 * scale * strokeScale) * taperMultiplier(midProgress);
 				}
 				ctx.lineWidth = lw;
-				ctx.strokeStyle = hasGradient ? colorAt(midProgress) : color;
+				ctx.strokeStyle = hasStrokeGradient ? colorAt(midProgress) : defaultStrokePaint;
 				ctx.beginPath();
 				ctx.moveTo(txs[i - 1], tys[i - 1]);
 				ctx.lineTo(txs[i], tys[i]);
@@ -410,6 +546,24 @@ function ensureFont(family, url) {
 }
 //#endregion
 //#region src/lib/textLayout.ts
+/**
+* Compute the text bounding box from a measured layout. Inputs are in CSS
+* pixels. Assumes the layout's char offsets are em-relative to the left edge
+* of each line (as produced by `computeTextLayout`).
+*/
+function computeLayoutBbox(layout, fontSize, lineHeight) {
+	let maxRight = 0;
+	for (const lineIndices of layout.lines) for (const charIdx of lineIndices) {
+		const right = ((layout.charOffsets[charIdx] ?? 0) + (layout.charWidths[charIdx] ?? 0)) * fontSize;
+		if (right > maxRight) maxRight = right;
+	}
+	return {
+		x: 0,
+		y: 0,
+		width: maxRight,
+		height: layout.lines.length * lineHeight
+	};
+}
 function computeTextLayout(elOrText, fontSize, fontFamily, lineHeight, maxWidth) {
 	if (typeof elOrText === "string") return measureWithTempElement(elOrText, fontFamily, fontSize, lineHeight, maxWidth);
 	return measureElement(elOrText, fontSize);
@@ -427,7 +581,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 = [];
@@ -458,13 +614,13 @@ function measureElement(el, fontSize) {
 			continue;
 		}
 		const rect = rects[rects.length - 1];
-		if (currentLine.length > 0 && rect.top - prevTop > fontSize * .25) {
+		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);
@@ -639,12 +795,12 @@ function registerCssProperties() {
 //#endregion
 //#region src/lib/drawFallbackGlyph.ts
 /**
-* Draw a fallback glyph (plain text) with applicable effects (glow, gradient, wobble).
+* Draw a fallback glyph (plain text) with applicable effects (glow, strokeGradient, wobble).
 */
 function drawFallbackGlyph(ctx, char, x, baseline, fontSize, fontFamily, color, effects = [], seed = 0) {
 	const glowEffects = findEffects(effects, "glow");
 	const wobbleEffect = findEffect(effects, "wobble");
-	const gradientEffect = findEffect(effects, "gradient");
+	const strokeGradientEffect = findEffect(effects, "strokeGradient");
 	let dx = 0;
 	let dy = 0;
 	if (wobbleEffect) {
@@ -656,11 +812,11 @@ function drawFallbackGlyph(ctx, char, x, baseline, fontSize, fontFamily, color,
 	const drawX = x + dx;
 	const drawY = baseline + dy;
 	let fillColor = color;
-	if (gradientEffect) {
-		const colors = gradientEffect.config.colors;
+	if (strokeGradientEffect) {
+		const colors = strokeGradientEffect.config.colors;
 		if (colors === "rainbow") {
-			const saturation = gradientEffect.config.saturation ?? 80;
-			const lightness = gradientEffect.config.lightness ?? 55;
+			const saturation = strokeGradientEffect.config.saturation ?? 80;
+			const lightness = strokeGradientEffect.config.lightness ?? 55;
 			fillColor = `hsl(${seed * 137.5 % 360}, ${saturation}%, ${lightness}%)`;
 		} else if (Array.isArray(colors) && colors.length > 0) fillColor = colors[Math.floor(seed) % colors.length];
 	}
@@ -1114,7 +1270,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();
@@ -1265,7 +1422,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;
@@ -1277,6 +1433,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);
@@ -1285,14 +1442,15 @@ var TegakiEngine = class {
 		const halfLeading = (lineHeight - (font.ascender - font.descender) / font.unitsPerEm * fontSize) / 2;
 		const characters = graphemes(this._text);
 		const currentTime = this.currentTime;
-		const effectsNeedSubdivision = !!findEffect(this._resolvedEffects, "wobble") || !!findEffect(this._resolvedEffects, "gradient") || !!findEffect(this._resolvedEffects, "taper") || (() => {
+		const effectsNeedSubdivision = !!findEffect(this._resolvedEffects, "wobble") || !!findEffect(this._resolvedEffects, "strokeGradient") || !!findEffect(this._resolvedEffects, "taper") || (() => {
 			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;
@@ -1301,13 +1459,26 @@ 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;
+		const stage = hasRenderHooks(this._resolvedEffects) ? {
+			ctx,
+			layout,
+			fontSize,
+			lineHeight,
+			unitsPerEm: font.unitsPerEm,
+			ascender: font.ascender,
+			descender: font.descender,
+			bbox: computeLayoutBbox(layout, fontSize, lineHeight),
+			baseColor: color,
+			seed: this._seed
+		} : null;
+		if (stage) for (const effect of this._resolvedEffects) getEffectDefinition(effect.effect)?.beforeRender?.(stage, effect.config);
 		let y = 0;
 		for (const lineIndices of layout.lines) {
 			for (const charIdx of lineIndices) {
@@ -1327,11 +1498,15 @@ 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, strokeScale);
+					}, localTime, font.lineCap, color, this._resolvedEffects, this._seed + charIdx, getSubdivided, this._timing?.strokeEasing, strokeScale, stage?.strokeStyle);
 				} 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 (stage) for (let i = this._resolvedEffects.length - 1; i >= 0; i--) {
+			const effect = this._resolvedEffects[i];
+			getEffectDefinition(effect.effect)?.afterRender?.(stage, effect.config);
+		}
 		if (clipText) {
 			if (!this._maskCanvas) this._maskCanvas = document.createElement("canvas");
 			const maskCanvas = this._maskCanvas;
@@ -1365,6 +1540,6 @@ var TegakiEngine = class {
 	}
 };
 //#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 };
+export { findEffect as _, createBundle as a, hasRenderHooks as b, resolveBundle as c, computeTimeline as d, computeLayoutBbox as f, coerceToString as g, drawGlyph as h, domCreateElement as i, BUNDLE_VERSION as l, ensureFontFace as m, buildChildren as n, getBundle as o, computeTextLayout as p, buildRootProps as r, registerBundle as s, TegakiEngine as t, COMPATIBLE_BUNDLE_VERSIONS as u, findEffects as v, resolveEffects as x, getEffectDefinition as y };
 
-//# sourceMappingURL=core-Ds9ohwR7.mjs.map
+//# sourceMappingURL=core-B7NiOWkP.mjs.map