tegaki 0.0.1 → 0.2.2

package/dist/index.mjs

@@ -0,0 +1,900 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/effects.ts
+/**
+* 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.
+* Boolean `true` becomes an empty config. `false`/absent entries are skipped.
+*/
+function resolveEffects(effects) {
+	if (!effects) return [];
+	const knownEffects = new Set([
+		"glow",
+		"wobble",
+		"pressureWidth",
+		"taper",
+		"gradient"
+	]);
+	const result = [];
+	for (const [key, value] of Object.entries(effects)) {
+		if (value === false || value == null) continue;
+		let effectName;
+		let config;
+		let order;
+		if (value === true) {
+			effectName = knownEffects.has(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);
+			if (!effectName) continue;
+			const { effect: _, order: o, enabled: __, ...rest } = value;
+			config = rest;
+			order = o ?? 0;
+		}
+		result.push({
+			effect: effectName,
+			order,
+			config
+		});
+	}
+	result.sort((a, b) => a.order - b.order);
+	return result;
+}
+/** Check if a specific effect is active. */
+function findEffect(effects, name) {
+	return effects.find((e) => e.effect === name);
+}
+/** Get all instances of a specific effect (for duplicates). */
+function findEffects(effects, name) {
+	return effects.filter((e) => e.effect === name);
+}
+//#endregion
+//#region src/lib/utils.ts
+const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+/** 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);
+}
+function coerceToString(value) {
+	if (value == null || typeof value === "boolean") return "";
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "bigint") return String(value);
+	if (Array.isArray(value)) return value.map(coerceToString).join("");
+	return "";
+}
+//#endregion
+//#region src/lib/drawGlyph.ts
+function parseColor(color) {
+	const h = color.replace("#", "");
+	if (h.length === 3) return [
+		parseInt(h[0] + h[0], 16),
+		parseInt(h[1] + h[1], 16),
+		parseInt(h[2] + h[2], 16),
+		1
+	];
+	if (h.length === 4) return [
+		parseInt(h[0] + h[0], 16),
+		parseInt(h[1] + h[1], 16),
+		parseInt(h[2] + h[2], 16),
+		parseInt(h[3] + h[3], 16) / 255
+	];
+	if (h.length === 8) return [
+		parseInt(h.slice(0, 2), 16),
+		parseInt(h.slice(2, 4), 16),
+		parseInt(h.slice(4, 6), 16),
+		parseInt(h.slice(6, 8), 16) / 255
+	];
+	return [
+		parseInt(h.slice(0, 2), 16),
+		parseInt(h.slice(2, 4), 16),
+		parseInt(h.slice(4, 6), 16),
+		1
+	];
+}
+function lerpColor(a, b, t) {
+	const r = Math.round(a[0] + (b[0] - a[0]) * t);
+	const g = Math.round(a[1] + (b[1] - a[1]) * t);
+	const bl = Math.round(a[2] + (b[2] - a[2]) * t);
+	const al = a[3] + (b[3] - a[3]) * t;
+	if (al >= 1) return `rgb(${r},${g},${bl})`;
+	return `rgba(${r},${g},${bl},${al.toFixed(3)})`;
+}
+function gradientColor(progress, colors, seed) {
+	if (colors.length === 0) return "#000";
+	if (colors.length === 1) return colors[0];
+	const scaledT = ((progress + seed * .1) % 1 + 1) % 1 * (colors.length - 1);
+	const i = Math.min(Math.floor(scaledT), colors.length - 2);
+	const frac = scaledT - i;
+	return lerpColor(parseColor(colors[i]), parseColor(colors[i + 1]), frac);
+}
+function rainbowColor(progress, saturation, lightness, seed) {
+	return `hsl(${(progress * 360 + seed * 137.5) % 360}, ${saturation}%, ${lightness}%)`;
+}
+function hash(x) {
+	let h = x * 2654435761 | 0;
+	h = (h >>> 16 ^ h) * 73244475;
+	h = (h >>> 16 ^ h) * 73244475;
+	h = h >>> 16 ^ h;
+	return (h & 2147483647) / 2147483647;
+}
+function noise1d(x, seed) {
+	const i = Math.floor(x);
+	const f = x - i;
+	const t = f * f * (3 - 2 * f);
+	return hash(i + seed * 7919) * (1 - t) + hash(i + 1 + seed * 7919) * t;
+}
+/**
+* Draw a single glyph's strokes onto a canvas context, animated up to `localTime`.
+* `localTime` is seconds relative to this glyph's start (0 = glyph begins).
+*/
+function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], seed = 0, segmentSize) {
+	const scale = pos.fontSize / pos.unitsPerEm;
+	const ox = pos.x;
+	const oy = pos.y;
+	const glowEffects = findEffects(effects, "glow");
+	const wobbleEffect = findEffect(effects, "wobble");
+	const pressureEffect = findEffect(effects, "pressureWidth");
+	const taperEffect = findEffect(effects, "taper");
+	const gradientEffect = findEffect(effects, "gradient");
+	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;
+	const wobbleMode = wobbleEffect?.config.mode ?? "sine";
+	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 isRainbow = gradientColors === "rainbow";
+	const gradientColorStops = Array.isArray(gradientColors) ? gradientColors : void 0;
+	const gradientSaturation = gradientEffect?.config.saturation ?? 80;
+	const gradientLightness = gradientEffect?.config.lightness ?? 55;
+	const wobbleX = (x, y, idx) => {
+		if (!wobbleEffect) return x;
+		if (wobbleMode === "noise") return x + wobbleAmplitude * (noise1d(y * .1 + idx * .7, seed) * 2 - 1);
+		return x + wobbleAmplitude * Math.sin(wobbleFrequency * (y * .01 + idx * .7) + seed);
+	};
+	const wobbleY = (x, y, idx) => {
+		if (!wobbleEffect) return y;
+		if (wobbleMode === "noise") return y + wobbleAmplitude * (noise1d(x * .1 + idx * .5, seed * 1.3 + 1e3) * 2 - 1);
+		return y + wobbleAmplitude * Math.cos(wobbleFrequency * (x * .01 + idx * .5) + seed * 1.3);
+	};
+	const px = (x) => ox + x * scale;
+	const py = (y) => oy + (y + pos.ascender) * scale;
+	const colorAt = (progress) => {
+		if (isRainbow) return rainbowColor(progress, gradientSaturation, gradientLightness, seed);
+		if (gradientColorStops) return gradientColor(progress, gradientColorStops, seed);
+		return color;
+	};
+	const hasGradient = !!gradientEffect;
+	const taperMultiplier = (progress) => {
+		let m = 1;
+		if (taperStart > 0 && progress < taperStart) m = Math.min(m, progress / taperStart);
+		if (taperEnd > 0 && progress > 1 - taperEnd) m = Math.min(m, (1 - progress) / taperEnd);
+		return m;
+	};
+	for (const stroke of glyph.strokes) {
+		if (localTime < stroke.delay) continue;
+		const elapsed = localTime - stroke.delay;
+		const progress = Math.min(elapsed / stroke.animationDuration, 1);
+		const pts = stroke.points;
+		if (pts.length === 0) continue;
+		const avgWidth = pts.reduce((s, p) => s + p.width, 0) / pts.length;
+		const baseLineWidth = Math.max(avgWidth, .5) * scale;
+		if (pts.length === 1) {
+			if (progress <= 0) continue;
+			const p = pts[0];
+			const dotX = px(wobbleX(p.x, p.y, 0));
+			const dotY = py(wobbleY(p.x, p.y, 0));
+			let dotWidth = baseLineWidth + (Math.max(p.width, .5) * scale - baseLineWidth) * pressureAmount;
+			dotWidth *= taperMultiplier(.5);
+			for (const glow of glowEffects) {
+				ctx.save();
+				ctx.shadowBlur = resolveCSSLength(glow.config.radius ?? 8, pos.fontSize);
+				ctx.shadowColor = glow.config.color ?? color;
+				ctx.shadowOffsetX = (glow.config.offsetX ?? 0) * scale;
+				ctx.shadowOffsetY = (glow.config.offsetY ?? 0) * scale;
+				ctx.fillStyle = glow.config.color ?? color;
+				ctx.beginPath();
+				if (lineCap === "round") ctx.arc(dotX, dotY, dotWidth / 2, 0, Math.PI * 2);
+				else ctx.rect(dotX - dotWidth / 2, dotY - dotWidth / 2, dotWidth, dotWidth);
+				ctx.fill();
+				ctx.restore();
+			}
+			ctx.fillStyle = colorAt(0);
+			ctx.beginPath();
+			if (lineCap === "round") {
+				ctx.arc(dotX, dotY, dotWidth / 2, 0, Math.PI * 2);
+				ctx.fill();
+			} else ctx.fillRect(dotX - dotWidth / 2, dotY - dotWidth / 2, dotWidth, dotWidth);
+			continue;
+		}
+		let totalLen = 0;
+		for (let j = 1; j < pts.length; j++) {
+			const dx = pts[j].x - pts[j - 1].x;
+			const dy = pts[j].y - pts[j - 1].y;
+			totalLen += Math.sqrt(dx * dx + dy * dy);
+		}
+		const drawLen = totalLen * progress;
+		if (drawLen <= 0) continue;
+		const segments = [];
+		let accumulated = 0;
+		for (let j = 1; j < pts.length; j++) {
+			const prev = pts[j - 1];
+			const cur = pts[j];
+			const dx = cur.x - prev.x;
+			const dy = cur.y - prev.y;
+			const segLen = Math.sqrt(dx * dx + dy * dy);
+			if (accumulated + segLen <= drawLen) {
+				segments.push({
+					x0: px(wobbleX(prev.x, prev.y, j - 1)),
+					y0: py(wobbleY(prev.x, prev.y, j - 1)),
+					x1: px(wobbleX(cur.x, cur.y, j)),
+					y1: py(wobbleY(cur.x, cur.y, j)),
+					width0: prev.width,
+					width1: cur.width,
+					segProgress: (accumulated + segLen / 2) / totalLen
+				});
+				accumulated += segLen;
+			} else {
+				const remaining = drawLen - accumulated;
+				const frac = segLen > 0 ? remaining / segLen : 0;
+				const ix = prev.x + dx * frac;
+				const iy = prev.y + dy * frac;
+				const iw = prev.width + (cur.width - prev.width) * frac;
+				segments.push({
+					x0: px(wobbleX(prev.x, prev.y, j - 1)),
+					y0: py(wobbleY(prev.x, prev.y, j - 1)),
+					x1: px(wobbleX(ix, iy, j)),
+					y1: py(wobbleY(ix, iy, j)),
+					width0: prev.width,
+					width1: iw,
+					segProgress: (accumulated + remaining / 2) / totalLen
+				});
+				break;
+			}
+		}
+		if (segments.length === 0) continue;
+		const coarseSegments = segments.slice();
+		const resolvedSegmentSize = segmentSize ?? (pressureAmount > 0 || hasGradient || !!wobbleEffect || !!taperEffect ? 2 : void 0);
+		if (resolvedSegmentSize != null) {
+			const maxSegLen = resolvedSegmentSize * scale;
+			const subdivided = [];
+			for (const seg of segments) {
+				const dx = seg.x1 - seg.x0;
+				const dy = seg.y1 - seg.y0;
+				const len = Math.sqrt(dx * dx + dy * dy);
+				const count = Math.max(1, Math.ceil(len / maxSegLen));
+				for (let k = 0; k < count; k++) {
+					const t0 = k / count;
+					const t1 = (k + 1) / count;
+					subdivided.push({
+						x0: seg.x0 + dx * t0,
+						y0: seg.y0 + dy * t0,
+						x1: seg.x0 + dx * t1,
+						y1: seg.y0 + dy * t1,
+						width0: seg.width0 + (seg.width1 - seg.width0) * t0,
+						width1: seg.width0 + (seg.width1 - seg.width0) * t1,
+						segProgress: seg.segProgress
+					});
+				}
+			}
+			for (let k = 0; k < subdivided.length; k++) subdivided[k].segProgress = subdivided.length > 1 ? k / (subdivided.length - 1) : 0;
+			segments.length = 0;
+			segments.push(...subdivided);
+		}
+		const segWidth = (seg) => {
+			const perPoint = (seg.width0 + seg.width1) / 2 * scale;
+			return Math.max(baseLineWidth + (perPoint - baseLineWidth) * pressureAmount, .5 * scale) * taperMultiplier(seg.segProgress);
+		};
+		const needsPerSegment = pressureAmount > 0 || taperEffect;
+		const drawStrokePath = () => {
+			if (needsPerSegment) for (const seg of segments) {
+				ctx.lineWidth = segWidth(seg);
+				ctx.beginPath();
+				ctx.moveTo(seg.x0, seg.y0);
+				ctx.lineTo(seg.x1, seg.y1);
+				ctx.stroke();
+			}
+			else {
+				ctx.lineWidth = baseLineWidth;
+				ctx.beginPath();
+				ctx.moveTo(segments[0].x0, segments[0].y0);
+				for (const seg of segments) ctx.lineTo(seg.x1, seg.y1);
+				ctx.stroke();
+			}
+		};
+		const drawGradientPath = () => {
+			for (const seg of segments) {
+				ctx.strokeStyle = colorAt(seg.segProgress);
+				if (needsPerSegment) ctx.lineWidth = segWidth(seg);
+				ctx.beginPath();
+				ctx.moveTo(seg.x0, seg.y0);
+				ctx.lineTo(seg.x1, seg.y1);
+				ctx.stroke();
+			}
+		};
+		ctx.lineCap = lineCap;
+		ctx.lineJoin = "round";
+		for (const glow of glowEffects) {
+			ctx.save();
+			ctx.shadowBlur = resolveCSSLength(glow.config.radius ?? 8, pos.fontSize);
+			ctx.shadowColor = glow.config.color ?? color;
+			ctx.shadowOffsetX = (glow.config.offsetX ?? 0) * scale;
+			ctx.shadowOffsetY = (glow.config.offsetY ?? 0) * scale;
+			ctx.strokeStyle = glow.config.color ?? color;
+			ctx.lineWidth = baseLineWidth;
+			ctx.beginPath();
+			ctx.moveTo(coarseSegments[0].x0, coarseSegments[0].y0);
+			for (const seg of coarseSegments) ctx.lineTo(seg.x1, seg.y1);
+			ctx.stroke();
+			ctx.restore();
+		}
+		if (hasGradient) drawGradientPath();
+		else {
+			ctx.strokeStyle = color;
+			drawStrokePath();
+		}
+	}
+}
+//#endregion
+//#region src/lib/drawFallbackGlyph.ts
+/**
+* Draw a fallback glyph (plain text) with applicable effects (glow, gradient, 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");
+	let dx = 0;
+	let dy = 0;
+	if (wobbleEffect) {
+		const amplitude = (wobbleEffect.config.amplitude ?? 1.5) * (fontSize / 100);
+		const frequency = wobbleEffect.config.frequency ?? 8;
+		dx = amplitude * Math.sin(frequency * (baseline * .01) + seed);
+		dy = amplitude * Math.cos(frequency * (x * .01) + seed * 1.3);
+	}
+	const drawX = x + dx;
+	const drawY = baseline + dy;
+	let fillColor = color;
+	if (gradientEffect) {
+		const colors = gradientEffect.config.colors;
+		if (colors === "rainbow") {
+			const saturation = gradientEffect.config.saturation ?? 80;
+			const lightness = gradientEffect.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];
+	}
+	ctx.save();
+	ctx.font = `${fontSize}px ${fontFamily}`;
+	ctx.textBaseline = "alphabetic";
+	for (const glow of glowEffects) {
+		ctx.save();
+		ctx.shadowBlur = resolveCSSLength(glow.config.radius ?? 8, fontSize);
+		ctx.shadowColor = glow.config.color ?? color;
+		ctx.shadowOffsetX = glow.config.offsetX ?? 0;
+		ctx.shadowOffsetY = glow.config.offsetY ?? 0;
+		ctx.fillStyle = glow.config.color ?? color;
+		ctx.fillText(char, drawX, drawY);
+		ctx.restore();
+	}
+	ctx.fillStyle = fillColor;
+	ctx.fillText(char, drawX, drawY);
+	ctx.restore();
+}
+//#endregion
+//#region src/lib/textLayout.ts
+function computeTextLayout(text, fontFamily, fontSize, lineHeight, maxWidth) {
+	const fontStr = `${fontSize}px ${fontFamily}`;
+	const chars = graphemes(text);
+	const widthCache = /* @__PURE__ */ new Map();
+	const charWidths = [];
+	for (const char of chars) {
+		let w = widthCache.get(char);
+		if (w === void 0) {
+			if (char === "\n") w = 0;
+			else {
+				const r = layoutWithLines(prepareWithSegments(char, fontStr, { whiteSpace: "pre-wrap" }), Infinity, lineHeight);
+				w = r.lines.length > 0 ? r.lines[0].width / fontSize : 0;
+			}
+			widthCache.set(char, w);
+		}
+		charWidths.push(w);
+	}
+	const prepared = prepareWithSegments(text, fontStr, { whiteSpace: "pre-wrap" });
+	const singleLineResult = layoutWithLines(prepared, Infinity, lineHeight);
+	const intrinsicWidth = Math.max(0, ...singleLineResult.lines.map((l) => l.width)) / fontSize;
+	const result = layoutWithLines(prepared, maxWidth, lineHeight);
+	const utf16ToCodePoint = [];
+	for (let ci = 0; ci < chars.length; ci++) for (let j = 0; j < chars[ci].length; j++) utf16ToCodePoint.push(ci);
+	const lines = [];
+	let utf16Offset = 0;
+	for (const line of result.lines) {
+		const indices = [];
+		const seen = /* @__PURE__ */ new Set();
+		for (let i = 0; i < line.text.length; i++) {
+			const cpIdx = utf16ToCodePoint[utf16Offset + i];
+			if (!seen.has(cpIdx)) {
+				seen.add(cpIdx);
+				indices.push(cpIdx);
+			}
+		}
+		utf16Offset += line.text.length;
+		if (utf16Offset < text.length && text[utf16Offset] === "\n") {
+			const cpIdx = utf16ToCodePoint[utf16Offset];
+			indices.push(cpIdx);
+			utf16Offset++;
+		}
+		lines.push(indices);
+	}
+	if (utf16Offset < text.length) {
+		const indices = [];
+		const seen = /* @__PURE__ */ new Set();
+		for (let i = utf16Offset; i < text.length; i++) {
+			const cpIdx = utf16ToCodePoint[i];
+			if (!seen.has(cpIdx)) {
+				seen.add(cpIdx);
+				indices.push(cpIdx);
+			}
+		}
+		lines.push(indices);
+	}
+	const kernings = [];
+	const pairCache = /* @__PURE__ */ new Map();
+	for (let i = 0; i < chars.length - 1; i++) {
+		const a = chars[i];
+		const b = chars[i + 1];
+		if (a === "\n" || b === "\n") {
+			kernings.push(0);
+			continue;
+		}
+		const pair = `${a}${b}`;
+		let k = pairCache.get(pair);
+		if (k === void 0) {
+			const r = layoutWithLines(prepareWithSegments(pair, fontStr, { whiteSpace: "pre-wrap" }), Infinity, lineHeight);
+			k = (r.lines.length > 0 ? r.lines[0].width / fontSize : 0) - (widthCache.get(a) ?? 0) - (widthCache.get(b) ?? 0);
+			if (Math.abs(k) < .001) k = 0;
+			pairCache.set(pair, k);
+		}
+		kernings.push(k);
+	}
+	return {
+		lines,
+		charWidths,
+		kernings,
+		intrinsicWidth
+	};
+}
+//#endregion
+//#region src/lib/timeline.ts
+const DEFAULTS = {
+	glyphGap: .1,
+	wordGap: .15,
+	lineGap: .3,
+	unknownDuration: .2
+};
+function computeTimeline(text, font, config) {
+	const glyphGap = config?.glyphGap ?? DEFAULTS.glyphGap;
+	const wordGap = config?.wordGap ?? DEFAULTS.wordGap;
+	const lineGap = config?.lineGap ?? DEFAULTS.lineGap;
+	const unknownDuration = config?.unknownDuration ?? DEFAULTS.unknownDuration;
+	const chars = graphemes(text);
+	const entries = [];
+	let offset = 0;
+	for (const char of chars) {
+		const hasSvg = char in font.glyphs;
+		const duration = hasSvg ? font.glyphTimings[char] ?? 1 : unknownDuration;
+		entries.push({
+			char,
+			offset,
+			duration,
+			hasSvg
+		});
+		offset += duration;
+		if (char === "\n") offset += lineGap;
+		else if (char === " ") offset += wordGap;
+		else offset += glyphGap;
+	}
+	if (entries.length > 0) {
+		const lastChar = chars[chars.length - 1];
+		offset -= lastChar === "\n" ? lineGap : lastChar === " " ? wordGap : glyphGap;
+	}
+	return {
+		entries,
+		totalDuration: Math.max(0, offset)
+	};
+}
+//#endregion
+//#region src/lib/TegakiRenderer.tsx
+const PADDING_H_EM = .2;
+const MIN_LINE_HEIGHT_EM = 1.8;
+const MIN_PADDING_V_EM = .2;
+const CSS_TIME = "--tegaki-time";
+const CSS_PROGRESS = "--tegaki-progress";
+const CSS_DURATION = "--tegaki-duration";
+if (typeof CSS !== "undefined" && "registerProperty" in CSS) for (const prop of [
+	CSS_TIME,
+	CSS_PROGRESS,
+	CSS_DURATION
+]) try {
+	CSS.registerProperty({
+		name: prop,
+		syntax: "<number>",
+		inherits: true,
+		initialValue: "0"
+	});
+} catch {}
+function TegakiRenderer({ font, text, children, time: timeProp, onComplete, mode = "canvas", effects, segmentSize, timing, showOverlay, ...props }) {
+	const resolvedText = text ?? coerceToString(children);
+	const resolvedEffects = useMemo(() => resolveEffects(effects), [effects]);
+	const [seed] = useState(() => Math.random() * 1e3);
+	const timeControl = timeProp == null ? { mode: "uncontrolled" } : typeof timeProp === "number" ? {
+		mode: "controlled",
+		value: timeProp
+	} : timeProp === "css" ? { mode: "css" } : timeProp;
+	const isCss = timeControl.mode === "css";
+	const isControlled = timeControl.mode === "controlled" || isCss;
+	const controlledTime = timeControl.mode === "controlled" ? timeControl.value : void 0;
+	const defaultTime = timeControl.mode === "uncontrolled" ? timeControl.initialTime ?? 0 : 0;
+	const speed = timeControl.mode === "uncontrolled" ? timeControl.speed ?? 1 : 1;
+	const playing = timeControl.mode === "uncontrolled" ? timeControl.playing ?? true : false;
+	const loop = timeControl.mode === "uncontrolled" ? timeControl.loop ?? false : false;
+	const catchUp = timeControl.mode === "uncontrolled" ? timeControl.catchUp ?? 0 : 0;
+	const onTimeChange = timeControl.mode === "uncontrolled" ? timeControl.onTimeChange : void 0;
+	const [internalTime, setInternalTime] = useState(defaultTime);
+	const [cssTime, setCssTime] = useState(0);
+	const currentTime = isCss ? cssTime : isControlled ? controlledTime : internalTime;
+	const onTimeChangeRef = useRef(onTimeChange);
+	onTimeChangeRef.current = onTimeChange;
+	const onCompleteRef = useRef(onComplete);
+	onCompleteRef.current = onComplete;
+	const fontFamily = font?.family;
+	const emHeight = font ? (font.ascender - font.descender) / font.unitsPerEm : 0;
+	const baselineOffset = font ? font.descender / font.unitsPerEm : 0;
+	const rootRef = useRef(null);
+	const [containerWidth, setContainerWidth] = useState(0);
+	const [fontSize, setFontSize] = useState(0);
+	const [lineHeight, setLineHeight] = useState(0);
+	const timeline = useMemo(() => font && resolvedText ? computeTimeline(resolvedText, font, timing) : {
+		entries: [],
+		totalDuration: 0
+	}, [
+		resolvedText,
+		font,
+		timing
+	]);
+	const totalDurationRef = useRef(timeline.totalDuration);
+	totalDurationRef.current = timeline.totalDuration;
+	const smoothedBoostRef = useRef(0);
+	const prevCompletedRef = useRef(false);
+	const isComplete = timeline.totalDuration > 0 && currentTime >= timeline.totalDuration;
+	useEffect(() => {
+		if (isComplete && !prevCompletedRef.current) {
+			prevCompletedRef.current = true;
+			onCompleteRef.current?.();
+		} else if (!isComplete) prevCompletedRef.current = false;
+	});
+	useEffect(() => {
+		if (!isControlled) onTimeChangeRef.current?.(internalTime);
+	}, [internalTime, isControlled]);
+	useEffect(() => {
+		if (isControlled || !playing || !font) return;
+		smoothedBoostRef.current = 0;
+		let lastTs = null;
+		let raf;
+		const attackRate = 4;
+		const releaseRate = loop ? 30 : 2;
+		const tick = (ts) => {
+			if (lastTs === null) lastTs = ts;
+			const dtSec = (ts - lastTs) / 1e3;
+			lastTs = ts;
+			setInternalTime((prev) => {
+				const totalDur = totalDurationRef.current;
+				if (totalDur === 0 || !loop && prev >= totalDur) return totalDur;
+				let effectiveSpeed = speed;
+				if (catchUp > 0) {
+					const remaining = Math.max(0, totalDur - prev);
+					const targetBoost = catchUp * Math.max(0, remaining - 2);
+					const rate = targetBoost > smoothedBoostRef.current ? attackRate : releaseRate;
+					smoothedBoostRef.current += (targetBoost - smoothedBoostRef.current) * (1 - Math.exp(-rate * dtSec));
+					effectiveSpeed = speed + smoothedBoostRef.current;
+				}
+				let next = prev + dtSec * effectiveSpeed;
+				if (next >= totalDur) {
+					next = loop ? next % totalDur : totalDur;
+					smoothedBoostRef.current = 0;
+				}
+				return next;
+			});
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, [
+		isControlled,
+		playing,
+		speed,
+		loop,
+		catchUp,
+		font
+	]);
+	const svgRefs = useRef(/* @__PURE__ */ new Map());
+	const svgRefCallbacks = useRef(/* @__PURE__ */ new Map());
+	const makeSvgRef = useCallback((charIdx) => (node) => {
+		if (node) {
+			node.pauseAnimations();
+			svgRefs.current.set(charIdx, node);
+		} else svgRefs.current.delete(charIdx);
+	}, []);
+	const getSvgRef = useCallback((charIdx) => {
+		let cb = svgRefCallbacks.current.get(charIdx);
+		if (!cb) {
+			cb = makeSvgRef(charIdx);
+			svgRefCallbacks.current.set(charIdx, cb);
+		}
+		return cb;
+	}, [makeSvgRef]);
+	const prevFontRef = useRef(font);
+	const prevModeRef = useRef(mode);
+	if (prevFontRef.current !== font || prevModeRef.current !== mode) {
+		prevFontRef.current = font;
+		prevModeRef.current = mode;
+		svgRefs.current.clear();
+		svgRefCallbacks.current.clear();
+	}
+	useEffect(() => {
+		const el = rootRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver(([entry]) => {
+			if (entry) {
+				setContainerWidth(entry.contentRect.width);
+				const styles = getComputedStyle(el);
+				setFontSize(Number.parseFloat(styles.fontSize));
+				setLineHeight(Number.parseFloat(styles.lineHeight));
+			}
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	const sentinelRef = useRef(null);
+	useEffect(() => {
+		const el = sentinelRef.current;
+		if (!el) return;
+		const onTransition = (e) => {
+			const styles = getComputedStyle(el);
+			if (e.propertyName === "font-size" || e.propertyName === "line-height") {
+				setFontSize(Number.parseFloat(styles.fontSize));
+				setLineHeight(Number.parseFloat(styles.lineHeight));
+			}
+			if (e.propertyName === CSS_PROGRESS) setCssTime(Number(styles.getPropertyValue(CSS_PROGRESS)) * totalDurationRef.current);
+		};
+		el.addEventListener("transitionend", onTransition);
+		return () => el.removeEventListener("transitionend", onTransition);
+	}, []);
+	const layout = useMemo(() => {
+		if (!fontFamily || !fontSize || !containerWidth || !resolvedText) return null;
+		return computeTextLayout(resolvedText, fontFamily, fontSize, lineHeight, containerWidth);
+	}, [
+		resolvedText,
+		fontFamily,
+		fontSize,
+		lineHeight,
+		containerWidth
+	]);
+	const padH = PADDING_H_EM * fontSize;
+	const padV = fontSize ? Math.max(MIN_PADDING_V_EM * fontSize, (MIN_LINE_HEIGHT_EM * fontSize - lineHeight) / 2) : 0;
+	useLayoutEffect(() => {
+		if (mode !== "svg") return;
+		const entries = timeline.entries;
+		for (let i = 0; i < entries.length; i++) {
+			const entry = entries[i];
+			if (!entry.hasSvg) continue;
+			const svg = svgRefs.current.get(i);
+			if (!svg) continue;
+			const localTime = Math.max(0, Math.min(currentTime - entry.offset, entry.duration));
+			svg.setCurrentTime(localTime);
+		}
+	});
+	const canvasRef = useRef(null);
+	useLayoutEffect(() => {
+		if (mode !== "canvas") return;
+		const canvas = canvasRef.current;
+		if (!canvas || !font?.glyphData || !layout || !fontSize) return;
+		const dpr = window.devicePixelRatio || 1;
+		const el = rootRef.current;
+		if (!el) return;
+		const canvasRect = canvas.getBoundingClientRect();
+		const w = canvasRect.width;
+		const h = canvasRect.height;
+		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);
+		}
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, w, h);
+		ctx.translate(padH, padV);
+		const color = getComputedStyle(el).color;
+		const halfLeading = (lineHeight - emHeight * fontSize) / 2;
+		const characters = graphemes(resolvedText);
+		let y = 0;
+		for (const lineIndices of layout.lines) {
+			let x = 0;
+			for (const charIdx of lineIndices) {
+				const char = characters[charIdx];
+				if (char === "\n") continue;
+				const entry = timeline.entries[charIdx];
+				const charWidth = layout.charWidths[charIdx] ?? 0;
+				const kerning = layout.kernings[charIdx] ?? 0;
+				const glyph = font.glyphData[char];
+				if (glyph && entry.hasSvg) {
+					const localTime = Math.max(0, Math.min(currentTime - entry.offset, entry.duration));
+					const glyphY = y + halfLeading;
+					drawGlyph(ctx, glyph, {
+						x,
+						y: glyphY,
+						fontSize,
+						unitsPerEm: font.unitsPerEm,
+						ascender: font.ascender,
+						descender: font.descender
+					}, localTime, font.lineCap, color, resolvedEffects, seed + charIdx, segmentSize);
+				} else if (!entry.hasSvg && currentTime >= entry.offset + entry.duration) {
+					const baseline = y + halfLeading + font.ascender / font.unitsPerEm * fontSize;
+					drawFallbackGlyph(ctx, char, x, baseline, fontSize, fontFamily, color, resolvedEffects, seed + charIdx);
+				}
+				x += (charWidth + kerning) * fontSize;
+			}
+			y += lineHeight;
+		}
+	}, [
+		mode,
+		currentTime,
+		timeline,
+		layout,
+		font,
+		fontFamily,
+		fontSize,
+		lineHeight,
+		resolvedText,
+		emHeight,
+		padH,
+		padV,
+		resolvedEffects,
+		seed,
+		segmentSize
+	]);
+	const lineElements = useMemo(() => {
+		if (mode !== "svg" || !font || !resolvedText) return null;
+		const characters = graphemes(resolvedText);
+		const renderGlyph = (charIdx) => {
+			const char = characters[charIdx];
+			const entry = timeline.entries[charIdx];
+			const GlyphSvg = font.glyphs[char];
+			const width = layout?.charWidths[charIdx] ?? 1;
+			const kerning = layout?.kernings[charIdx];
+			if (char === "\n") return null;
+			if (GlyphSvg) return /* @__PURE__ */ jsx(GlyphSvg, {
+				ref: getSvgRef(charIdx),
+				style: {
+					display: "inline-block",
+					verticalAlign: `${baselineOffset}em`,
+					width: `${width}em`,
+					marginRight: kerning ? `${kerning}em` : void 0,
+					height: `${emHeight}em`,
+					overflow: "visible"
+				}
+			}, charIdx);
+			return /* @__PURE__ */ jsx("span", {
+				style: {
+					fontFamily,
+					visibility: currentTime >= entry.offset + entry.duration ? "visible" : "hidden"
+				},
+				children: char
+			}, charIdx);
+		};
+		if (layout) return layout.lines.map((lineIndices, lineIdx) => {
+			return /* @__PURE__ */ jsx("div", {
+				style: {
+					whiteSpace: "nowrap",
+					height: lineIndices.every((i) => characters[i] === "\n") ? "1lh" : void 0,
+					lineHeight: `${lineHeight}px`
+				},
+				children: lineIndices.map(renderGlyph)
+			}, lineIdx);
+		});
+		return characters.length > 0 ? /* @__PURE__ */ jsx("div", {
+			style: { whiteSpace: "nowrap" },
+			children: characters.map((_, i) => renderGlyph(i))
+		}) : null;
+	}, [
+		mode,
+		resolvedText,
+		timeline,
+		font,
+		layout,
+		getSvgRef,
+		baselineOffset,
+		emHeight,
+		currentTime,
+		fontFamily,
+		lineHeight
+	]);
+	if (!font || !resolvedText) return /* @__PURE__ */ jsx("div", {
+		ref: rootRef,
+		...props
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		...props,
+		style: {
+			...props.style,
+			position: "relative",
+			maxWidth: "100%",
+			width: "auto",
+			height: "auto",
+			[CSS_DURATION]: timeline.totalDuration,
+			[CSS_TIME]: currentTime,
+			[CSS_PROGRESS]: timeline.totalDuration > 0 ? currentTime / timeline.totalDuration : 0
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				ref: sentinelRef,
+				"aria-hidden": true,
+				style: {
+					position: "absolute",
+					width: 0,
+					overflow: "hidden",
+					pointerEvents: "none",
+					fontSize: "inherit",
+					lineHeight: "inherit",
+					visibility: "hidden",
+					transition: isCss ? `font-size 0.001s, line-height 0.001s, ${CSS_PROGRESS} 0.001s` : "font-size 0.001s, line-height 0.001s"
+				},
+				children: "\xA0"
+			}),
+			mode === "canvas" ? /* @__PURE__ */ jsx("canvas", {
+				ref: canvasRef,
+				"aria-hidden": true,
+				style: {
+					position: "absolute",
+					inset: `${-padV}px ${-padH}px`,
+					width: `calc(100% + ${padH * 2}px)`,
+					height: `calc(100% + ${padV * 2}px)`,
+					pointerEvents: "none"
+				}
+			}) : /* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					inset: 0,
+					pointerEvents: "none",
+					fontFamily
+				},
+				children: lineElements
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					userSelect: "auto",
+					whiteSpace: "pre-wrap",
+					overflowWrap: "break-word",
+					paddingRight: 1,
+					WebkitTextFillColor: showOverlay ? void 0 : "transparent",
+					fontFamily,
+					color: showOverlay ? "rgba(255, 0, 0, 0.4)" : void 0,
+					fontFeatureSettings: "'calt' 0, 'liga' 0"
+				},
+				children: resolvedText
+			})
+		]
+	});
+}
+//#endregion
+export { TegakiRenderer, computeTimeline, drawGlyph };
+
+//# sourceMappingURL=index.mjs.map