tegaki 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -1,922 +1,3 @@
-import { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/lib/effects.ts
-const defaultEffects = { pressureWidth: true };
-const knownEffects = new Set([
-	"glow",
-	"wobble",
-	"pressureWidth",
-	"taper",
-	"gradient"
-]);
-/**
-* 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) {
-	const merged = {
-		...defaultEffects,
-		...effects
-	};
-	const result = [];
-	for (const [key, value] of Object.entries(merged)) {
-		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.s) {
-		if (localTime < stroke.d) continue;
-		const elapsed = localTime - stroke.d;
-		const progress = Math.min(elapsed / stroke.a, 1);
-		const pts = stroke.p;
-		if (pts.length === 0) continue;
-		const avgWidth = pts.reduce((s, p) => s + p[2], 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[0], p[1], 0));
-			const dotY = py(wobbleY(p[0], p[1], 0));
-			let dotWidth = baseLineWidth + (Math.max(p[2], .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][0] - pts[j - 1][0];
-			const dy = pts[j][1] - pts[j - 1][1];
-			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[0] - prev[0];
-			const dy = cur[1] - prev[1];
-			const segLen = Math.sqrt(dx * dx + dy * dy);
-			if (accumulated + segLen <= drawLen) {
-				segments.push({
-					x0: px(wobbleX(prev[0], prev[1], j - 1)),
-					y0: py(wobbleY(prev[0], prev[1], j - 1)),
-					x1: px(wobbleX(cur[0], cur[1], j)),
-					y1: py(wobbleY(cur[0], cur[1], j)),
-					width0: prev[2],
-					width1: cur[2],
-					segProgress: (accumulated + segLen / 2) / totalLen
-				});
-				accumulated += segLen;
-			} else {
-				const remaining = drawLen - accumulated;
-				const frac = segLen > 0 ? remaining / segLen : 0;
-				const ix = prev[0] + dx * frac;
-				const iy = prev[1] + dy * frac;
-				const iw = prev[2] + (cur[2] - prev[2]) * frac;
-				segments.push({
-					x0: px(wobbleX(prev[0], prev[1], j - 1)),
-					y0: py(wobbleY(prev[0], prev[1], j - 1)),
-					x1: px(wobbleX(ix, iy, j)),
-					y1: py(wobbleY(ix, iy, j)),
-					width0: prev[2],
-					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 glyph = font.glyphData[char];
-		const hasGlyph = !!glyph;
-		const duration = hasGlyph ? glyph.t ?? 1 : unknownDuration;
-		entries.push({
-			char,
-			offset,
-			duration,
-			hasGlyph
-		});
-		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 fontFaceCache = /* @__PURE__ */ new Map();
-/**
-* Returns a promise that resolves when the font is ready for text measurement.
-* - Already loaded (by us or externally): resolves immediately.
-* - Currently loading externally: waits for `document.fonts.ready`.
-* - Not registered at all: loads it via the FontFace API.
-* Returns `null` if the font is already loaded synchronously.
-*/
-/**
-* Ensures the bundle's font face is loaded and available for rendering.
-* Resolves immediately if the font is already loaded.
-*/
-async function ensureFontFace(bundle) {
-	await ensureFont(bundle.family, bundle.fontUrl);
-}
-function ensureFont(family, url) {
-	if (typeof document === "undefined") return Promise.resolve();
-	for (const face of document.fonts) if (face.family === family) {
-		if (face.status === "loaded") return null;
-		if (face.status === "loading") return face.loaded.then(() => {});
-	}
-	let cached = fontFaceCache.get(url);
-	if (!cached) {
-		cached = new FontFace(family, `url(${url})`, { featureSettings: "'calt' 0, 'liga' 0" }).load().then((loaded) => {
-			document.fonts.add(loaded);
-		});
-		fontFaceCache.set(url, cached);
-	}
-	return cached;
-}
-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";
-let cssPropertiesRegistered = false;
-function registerCssProperties() {
-	if (cssPropertiesRegistered) return;
-	cssPropertiesRegistered = true;
-	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({ ref, font, text, children, time: timeProp, onComplete, effects, segmentSize, timing, showOverlay, ...props }) {
-	registerCssProperties();
-	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 propPlaying = 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 [playingOverride, setPlayingOverride] = useState(void 0);
-	const playing = playingOverride ?? propPlaying;
-	const prevPropPlaying = useRef(propPlaying);
-	if (prevPropPlaying.current !== propPlaying) {
-		prevPropPlaying.current = propPlaying;
-		setPlayingOverride(void 0);
-	}
-	const [internalTime, setInternalTime] = useState(defaultTime);
-	const [cssTime, setCssTime] = useState(0);
-	const currentTime = isCss ? cssTime : isControlled ? controlledTime : internalTime;
-	const currentTimeRef = useRef(currentTime);
-	currentTimeRef.current = currentTime;
-	const playingRef = useRef(playing);
-	playingRef.current = playing;
-	const isControlledRef = useRef(isControlled);
-	isControlledRef.current = isControlled;
-	const onTimeChangeRef = useRef(onTimeChange);
-	onTimeChangeRef.current = onTimeChange;
-	const onCompleteRef = useRef(onComplete);
-	onCompleteRef.current = onComplete;
-	const [loadedFont, setLoadedFont] = useState(() => font && ensureFont(font.family, font.fontUrl) === null ? font : null);
-	const fontReady = !!font && loadedFont === font;
-	useEffect(() => {
-		if (!font) {
-			setLoadedFont(null);
-			return;
-		}
-		const pending = ensureFont(font.family, font.fontUrl);
-		if (pending === null) {
-			setLoadedFont(font);
-			return;
-		}
-		let cancelled = false;
-		pending.then(() => {
-			if (!cancelled) setLoadedFont(font);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [font]);
-	const fontFamily = font?.family;
-	const emHeight = font ? (font.ascender - 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 [currentColor, setCurrentColor] = useState("");
-	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;
-	});
-	useImperativeHandle(ref, () => ({
-		getElement: () => rootRef.current,
-		getCurrentTime: () => currentTimeRef.current,
-		getDuration: () => totalDurationRef.current,
-		getIsPlaying: () => playingRef.current,
-		getIsComplete: () => totalDurationRef.current > 0 && currentTimeRef.current >= totalDurationRef.current,
-		play: () => {
-			if (!isControlledRef.current) setPlayingOverride(true);
-		},
-		pause: () => {
-			if (!isControlledRef.current) setPlayingOverride(false);
-		},
-		seek: (time) => {
-			if (!isControlledRef.current) setInternalTime(Math.max(0, Math.min(time, totalDurationRef.current)));
-		},
-		restart: () => {
-			if (!isControlledRef.current) {
-				setInternalTime(0);
-				setPlayingOverride(true);
-			}
-		}
-	}), []);
-	useEffect(() => {
-		if (!isControlled) onTimeChangeRef.current?.(internalTime);
-	}, [internalTime, isControlled]);
-	const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-	useEffect(() => {
-		const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
-		setPrefersReducedMotion(mql.matches);
-		const onChange = (e) => setPrefersReducedMotion(e.matches);
-		mql.addEventListener("change", onChange);
-		return () => mql.removeEventListener("change", onChange);
-	}, []);
-	useEffect(() => {
-		if (prefersReducedMotion && !isControlled && timeline.totalDuration > 0) setInternalTime(timeline.totalDuration);
-	}, [
-		prefersReducedMotion,
-		isControlled,
-		timeline.totalDuration
-	]);
-	useEffect(() => {
-		if (isControlled || !playing || !font || !fontReady || prefersReducedMotion) 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,
-		fontReady,
-		prefersReducedMotion
-	]);
-	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));
-				setCurrentColor(styles.color);
-			}
-		});
-		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 === "color") setCurrentColor(styles.color);
-			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 (!fontReady || !fontFamily || !fontSize || !containerWidth || !resolvedText) return null;
-		return computeTextLayout(resolvedText, fontFamily, fontSize, lineHeight, containerWidth);
-	}, [
-		fontReady,
-		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;
-	const padVCss = `max(0.2em, 0.9em - 0.5lh)`;
-	const canvasRef = useRef(null);
-	useLayoutEffect(() => {
-		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 = currentColor || 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.hasGlyph) {
-					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.hasGlyph && 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;
-		}
-	}, [
-		currentTime,
-		timeline,
-		layout,
-		font,
-		fontFamily,
-		fontSize,
-		lineHeight,
-		resolvedText,
-		emHeight,
-		padH,
-		padV,
-		currentColor,
-		resolvedEffects,
-		seed,
-		segmentSize
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: rootRef,
-		...props,
-		style: {
-			...props.style,
-			position: "relative",
-			maxWidth: "100%",
-			width: "auto",
-			height: "auto",
-			fontFamily,
-			[CSS_DURATION]: timeline.totalDuration,
-			[CSS_TIME]: currentTime,
-			[CSS_PROGRESS]: timeline.totalDuration > 0 ? currentTime / timeline.totalDuration : 0
-		},
-		children: /* @__PURE__ */ jsxs("div", {
-			style: { position: "relative" },
-			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, color 0.001s, ${CSS_PROGRESS} 0.001s` : "font-size 0.001s, line-height 0.001s, color 0.001s"
-					},
-					children: "\xA0"
-				}),
-				/* @__PURE__ */ jsx("canvas", {
-					ref: canvasRef,
-					"aria-hidden": "true",
-					style: {
-						position: "absolute",
-						inset: `calc(-1 * ${padVCss}) -0.2em`,
-						width: `calc(100% + 0.4em)`,
-						height: `calc(100% + 2 * ${padVCss})`,
-						pointerEvents: "none",
-						overflow: "visible"
-					},
-					children: /* @__PURE__ */ jsx("span", {
-						style: {
-							display: "inline-block",
-							padding: `${padVCss} 0.2em`
-						},
-						children: resolvedText
-					})
-				}),
-				/* @__PURE__ */ jsx("div", {
-					style: {
-						userSelect: "auto",
-						whiteSpace: "pre-wrap",
-						overflowWrap: "break-word",
-						paddingRight: 1,
-						WebkitTextFillColor: showOverlay ? void 0 : "transparent",
-						color: showOverlay ? "rgba(255, 0, 0, 0.4)" : void 0
-					},
-					children: resolvedText
-				})
-			]
-		})
-	});
-}
-//#endregion
-export { TegakiRenderer, computeTimeline, drawGlyph, ensureFontFace };
-
-//# sourceMappingURL=index.mjs.map
+import { a as drawGlyph, i as ensureFontFace, n as computeTimeline, r as computeTextLayout, s as resolveEffects, t as TegakiEngine } from "./core-aZknK_0L.mjs";
+import { t as TegakiRenderer } from "./react-Ddx6VfJc.mjs";
+export { TegakiEngine, TegakiRenderer, computeTextLayout, computeTimeline, drawGlyph, ensureFontFace, resolveEffects };