tegaki 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # tegaki
 
+## 0.11.0
+
+### Minor Changes
+
+- [`4b7db41`](https://github.com/KurtGokhan/tegaki/commit/4b7db41fb1c247ed766ff10284e9cdabd4ab0a25) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Implement new text layout based on DOM and text ranges
+
+### Patch Changes
+
+- [`f3602b0`](https://github.com/KurtGokhan/tegaki/commit/f3602b04970c8cb88ea41e87e63ee4709b086d61) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - improve line cap detection for CJK fonts
+
+- [`28f58c6`](https://github.com/KurtGokhan/tegaki/commit/28f58c67f9eae8e0123a915d0efea03eaccd5e27) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - fixed a bug with generator that caused it to not load all characters in a font, especially CJK
+
+- [`047e5e3`](https://github.com/KurtGokhan/tegaki/commit/047e5e31d3ffabbecf25dd36b5f56d298731c630) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Add `duration` and `easing` options to uncontrolled time mode.
+
+  - `duration` stretches or compresses one iteration to take exactly N seconds, derived from the natural timeline inside the engine. Mutually exclusive with `speed` / `catchUp` at the type level (discriminated union); when both are set at runtime, `duration` takes precedence.
+  - `easing: (t: number) => number` maps linear progress (0–1) to displayed progress (0–1). Applied at read-time, so `currentTime`, `onTimeChange`, and the `--tegaki-time` / `--tegaki-progress` CSS custom properties all reflect the eased value. Completion is evaluated against linear progress so overshoot/undershoot curves (e.g. `easeOutBack`) don't trip completion early or late.
+  - The web component adapter accepts a `duration` attribute; `easing` is available via the `time` JS property only (it's function-valued).
+
+## 0.10.0
+
+### Minor Changes
+
+- [`7198553`](https://github.com/KurtGokhan/tegaki/commit/719855392734a8f1b6056db9f0718ac7a8213527) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Add controlled progress mode to allow users to specify the exact progress of the animation that is a value between 0 and 1.
+
+### Patch Changes
+
+- [`b326f00`](https://github.com/KurtGokhan/tegaki/commit/b326f00d52b97ef19e0214cb4595bd31cd501cf4) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Add delay and loop gap for uncontrolled animations
+
+- [`1449890`](https://github.com/KurtGokhan/tegaki/commit/144989014c0d9cdbf80fafbb77af646b96065832) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Add docs and example for using Tegaki with Remotion. The example is a simple composition that renders a single text prop, but the same principles apply to more complex compositions and dynamic props.
+
+- [`1449890`](https://github.com/KurtGokhan/tegaki/commit/144989014c0d9cdbf80fafbb77af646b96065832) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Fix rendering when zoom level was not 100%.
+
 ## 0.9.0
 
 ### Minor Changes

package/dist/core/index.d.mts

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

package/dist/core/index.mjs

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

package/dist/{core-Y5z-Gwut.mjs → core-I9K3LqxK.mjs}

@@ -1,4 +1,3 @@
-import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
 //#region src/lib/effects.ts
 const defaultEffects = { pressureWidth: true };
 const knownEffects = new Set([
@@ -372,87 +371,91 @@ function ensureFont(family, url) {
 }
 //#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();
+function computeTextLayout(elOrText, fontSize, fontFamily, lineHeight, maxWidth) {
+	if (typeof elOrText === "string") return measureWithTempElement(elOrText, fontFamily, fontSize, lineHeight, maxWidth);
+	return measureElement(elOrText, fontSize);
+}
+function measureElement(el, fontSize) {
+	const textNode = el.firstChild;
+	if (!textNode || textNode.nodeType !== Node.TEXT_NODE) return {
+		lines: [],
+		charOffsets: [],
+		charWidths: []
+	};
+	const chars = graphemes(textNode.textContent ?? "");
+	if (!chars.length) return {
+		lines: [],
+		charOffsets: [],
+		charWidths: []
+	};
+	const range = document.createRange();
+	const charOffsets = [];
 	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 currentLine = [];
+	let prevTop = -Infinity;
+	let lineStartX = 0;
 	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);
-			}
+	for (let i = 0; i < chars.length; i++) {
+		const char = chars[i];
+		if (char === "\n") {
+			charOffsets.push(0);
+			charWidths.push(0);
+			currentLine.push(i);
+			lines.push(currentLine);
+			currentLine = [];
+			prevTop = -Infinity;
+			utf16Offset += char.length;
+			continue;
 		}
-		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);
+		range.setStart(textNode, utf16Offset);
+		range.setEnd(textNode, utf16Offset + char.length);
+		const rects = range.getClientRects();
+		utf16Offset += char.length;
+		if (rects.length === 0) {
+			charOffsets.push(0);
+			charWidths.push(0);
+			currentLine.push(i);
 			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);
+		const rect = rects[0];
+		if (currentLine.length > 0 && rect.top - prevTop > fontSize * .25) {
+			lines.push(currentLine);
+			currentLine = [];
+		}
+		if (currentLine.length === 0) {
+			prevTop = rect.top;
+			lineStartX = rect.left;
 		}
-		kernings.push(k);
+		charOffsets.push((rect.left - lineStartX) / fontSize);
+		charWidths.push(rect.width / fontSize);
+		currentLine.push(i);
 	}
+	if (currentLine.length > 0) lines.push(currentLine);
 	return {
 		lines,
-		charWidths,
-		kernings,
-		intrinsicWidth
+		charOffsets,
+		charWidths
 	};
 }
+function measureWithTempElement(text, fontFamily, fontSize, lineHeight, maxWidth) {
+	const el = document.createElement("div");
+	el.style.position = "absolute";
+	el.style.left = "-9999px";
+	el.style.top = "-9999px";
+	el.style.visibility = "hidden";
+	el.style.fontFamily = fontFamily;
+	el.style.fontSize = `${fontSize}px`;
+	el.style.lineHeight = `${lineHeight}px`;
+	el.style.whiteSpace = "pre-wrap";
+	el.style.overflowWrap = "break-word";
+	el.style.width = `${maxWidth}px`;
+	el.textContent = text;
+	document.body.appendChild(el);
+	const result = measureElement(el, fontSize);
+	document.body.removeChild(el);
+	return result;
+}
 //#endregion
 //#region src/lib/timeline.ts
 const DEFAULTS = {
@@ -494,6 +497,25 @@ function computeTimeline(text, font, config) {
 	};
 }
 //#endregion
+//#region src/core/bundle-registry.ts
+const bundles = /* @__PURE__ */ new Map();
+/** Register a font bundle so it can be referenced by family name. */
+function registerBundle(bundle) {
+	bundles.set(bundle.family, bundle);
+}
+/** Look up a registered bundle by family name. */
+function getBundle(family) {
+	return bundles.get(family);
+}
+function resolveBundle(font) {
+	if (typeof font === "string") {
+		const bundle = getBundle(font);
+		if (!bundle) throw new Error(`TegakiEngine: no bundle registered for "${font}". Call TegakiEngine.registerBundle() first.`);
+		return bundle;
+	}
+	return font;
+}
+//#endregion
 //#region src/core/createBundle.ts
 /**
 * Creates a {@link TegakiBundle} from its constituent parts.
@@ -593,14 +615,17 @@ function drawFallbackGlyph(ctx, char, x, baseline, fontSize, fontFamily, color,
 	ctx.restore();
 }
 //#endregion
-//#region src/core/engine.ts
+//#region src/core/render-elements.ts
 const PAD_V_CSS = "max(0.2em, 0.9em - 0.5lh)";
 function buildRootProps(options) {
 	const text = options.text ?? "";
 	const font = resolveBundle(options.font);
 	const fontFamily = font?.family;
 	const duration = text && font ? computeTimeline(text, font, options.timing).totalDuration : 0;
-	const time = typeof options.time === "number" ? options.time : typeof options.time === "object" && options.time?.mode === "controlled" ? options.time.value : typeof options.time === "object" && options.time?.mode === "uncontrolled" ? options.time.initialTime ?? 0 : 0;
+	const timeObj = typeof options.time === "object" ? options.time : null;
+	const rawTime = typeof options.time === "number" ? options.time : timeObj?.mode === "controlled" ? timeObj.unit === "progress" ? timeObj.value * duration : timeObj.value : timeObj?.mode === "uncontrolled" ? timeObj.initialTime ?? 0 : 0;
+	const easing = timeObj?.mode === "uncontrolled" ? timeObj.easing : void 0;
+	const time = easing && duration > 0 ? easing(rawTime / duration) * duration : rawTime;
 	const progress = duration > 0 ? time / duration : 0;
 	return {
 		"data-tegaki": "root",
@@ -620,7 +645,10 @@ function buildChildren(options, h) {
 	const text = options.text ?? "";
 	const isCss = options.time === "css" || typeof options.time === "object" && options.time?.mode === "css";
 	const showOverlay = options.showOverlay;
-	return h("div", { style: { position: "relative" } }, h("span", {
+	return h("span", { style: {
+		display: "block",
+		position: "relative"
+	} }, h("span", {
 		"data-tegaki": "sentinel",
 		"aria-hidden": "true",
 		style: {
@@ -650,9 +678,10 @@ function buildChildren(options, h) {
 			display: "inline-block",
 			padding: `${PAD_V_CSS} 0.2em`
 		}
-	}, text)), h("div", {
+	}, text)), h("span", {
 		"data-tegaki": "overlay",
 		style: {
+			display: "block",
 			userSelect: "auto",
 			whiteSpace: "pre-wrap",
 			overflowWrap: "break-word",
@@ -673,6 +702,8 @@ function domCreateElement(tag, props, ...children) {
 	else el.appendChild(child);
 	return el;
 }
+//#endregion
+//#region src/core/engine.ts
 function resolveTimeControl(prop) {
 	if (prop == null) return { mode: "uncontrolled" };
 	if (typeof prop === "number") return {
@@ -682,23 +713,14 @@ function resolveTimeControl(prop) {
 	if (prop === "css") return { mode: "css" };
 	return prop;
 }
-function resolveBundle(font) {
-	if (typeof font === "string") {
-		const bundle = TegakiEngine.getBundle(font);
-		if (!bundle) throw new Error(`TegakiEngine: no bundle registered for "${font}". Call TegakiEngine.registerBundle() first.`);
-		return bundle;
-	}
-	return font;
-}
-var TegakiEngine = class TegakiEngine {
-	static _bundles = /* @__PURE__ */ new Map();
+var TegakiEngine = class {
 	/** Register a font bundle so it can be referenced by family name. */
 	static registerBundle(bundle) {
-		TegakiEngine._bundles.set(bundle.family, bundle);
+		registerBundle(bundle);
 	}
 	/** Look up a registered bundle by family name. */
 	static getBundle(family) {
-		return TegakiEngine._bundles.get(family);
+		return getBundle(family);
 	}
 	_rootEl;
 	_contentEl = null;
@@ -721,6 +743,7 @@ var TegakiEngine = class TegakiEngine {
 		totalDuration: 0
 	};
 	_layout = null;
+	_layoutKey = "";
 	_fontReady = false;
 	_containerWidth = 0;
 	_fontSize = 0;
@@ -730,6 +753,8 @@ var TegakiEngine = class TegakiEngine {
 	_cssTime = 0;
 	_playing = true;
 	_smoothedBoost = 0;
+	_delayRemaining = 0;
+	_loopGapRemaining = 0;
 	_lastTs = null;
 	_rafId = 0;
 	_prevCompleted = false;
@@ -781,7 +806,9 @@ var TegakiEngine = class TegakiEngine {
 	get currentTime() {
 		const tc = this._timeControl;
 		if (tc.mode === "css") return this._cssTime;
-		if (tc.mode === "controlled") return tc.value;
+		if (tc.mode === "controlled") return tc.unit === "progress" ? tc.value * this._timeline.totalDuration : tc.value;
+		const totalDur = this._timeline.totalDuration;
+		if (tc.easing && totalDur > 0) return tc.easing(this._internalTime / totalDur) * totalDur;
 		return this._internalTime;
 	}
 	get duration() {
@@ -791,7 +818,10 @@ var TegakiEngine = class TegakiEngine {
 		return this._playing;
 	}
 	get isComplete() {
-		return this._timeline.totalDuration > 0 && this.currentTime >= this._timeline.totalDuration;
+		const totalDur = this._timeline.totalDuration;
+		if (totalDur === 0) return false;
+		if (this._timeControl.mode === "uncontrolled") return this._internalTime >= totalDur;
+		return this.currentTime >= totalDur;
 	}
 	get element() {
 		return this._rootEl;
@@ -809,6 +839,8 @@ var TegakiEngine = class TegakiEngine {
 	seek(time) {
 		if (this._timeControl.mode !== "uncontrolled") return;
 		this._internalTime = Math.max(0, Math.min(time, this._timeline.totalDuration));
+		this._delayRemaining = 0;
+		this._loopGapRemaining = 0;
 		this._checkCompletion();
 		this._notifyTimeChange();
 		this._render();
@@ -819,6 +851,8 @@ var TegakiEngine = class TegakiEngine {
 		this._internalTime = 0;
 		this._playing = true;
 		this._prevCompleted = false;
+		this._delayRemaining = this._timeControl.delay ?? 0;
+		this._loopGapRemaining = 0;
 		this._notifyTimeChange();
 		this._evaluatePlayback();
 	}
@@ -846,11 +880,19 @@ var TegakiEngine = class TegakiEngine {
 			const newTc = resolveTimeControl(options.time);
 			const oldTc = this._timeControl;
 			const modeChanged = newTc.mode !== oldTc.mode;
-			const controlledValueChanged = newTc.mode === "controlled" && oldTc.mode === "controlled" && newTc.value !== oldTc.value;
-			const uncontrolledChanged = newTc.mode === "uncontrolled" && oldTc.mode === "uncontrolled" && (newTc.speed !== oldTc.speed || newTc.playing !== oldTc.playing || newTc.loop !== oldTc.loop || newTc.catchUp !== oldTc.catchUp);
+			const controlledValueChanged = newTc.mode === "controlled" && oldTc.mode === "controlled" && (newTc.value !== oldTc.value || newTc.unit !== oldTc.unit);
+			const uncontrolledChanged = newTc.mode === "uncontrolled" && oldTc.mode === "uncontrolled" && (newTc.speed !== oldTc.speed || newTc.duration !== oldTc.duration || newTc.playing !== oldTc.playing || newTc.loop !== oldTc.loop || newTc.delay !== oldTc.delay || newTc.loopGap !== oldTc.loopGap || newTc.catchUp !== oldTc.catchUp || newTc.easing !== oldTc.easing);
 			if (modeChanged || controlledValueChanged || uncontrolledChanged) {
 				this._timeControl = newTc;
-				if (newTc.mode === "uncontrolled") this._playing = newTc.playing ?? true;
+				if (newTc.mode === "uncontrolled") {
+					this._playing = newTc.playing ?? true;
+					const oldDelay = oldTc.mode === "uncontrolled" ? oldTc.delay ?? 0 : 0;
+					const newDelay = newTc.delay ?? 0;
+					if (modeChanged || oldDelay !== newDelay) {
+						this._delayRemaining = newDelay;
+						this._loopGapRemaining = 0;
+					}
+				}
 				dirtyPlayback = true;
 				dirtyRender = true;
 				this._updateSentinelTransition();
@@ -876,12 +918,10 @@ var TegakiEngine = class TegakiEngine {
 		}
 		if ("onComplete" in options) this._onComplete = options.onComplete;
 		if (dirtyTimeline) this._recomputeTimeline();
+		if (dirtyRender || dirtyTimeline || dirtyLayout) this._updateDom();
 		if (dirtyLayout) this._recomputeLayout();
 		if (dirtyPlayback) this._evaluatePlayback();
-		if (dirtyRender || dirtyTimeline || dirtyLayout) {
-			this._updateDom();
-			this._render();
-		}
+		if (dirtyRender || dirtyTimeline || dirtyLayout) this._render();
 	}
 	destroy() {
 		this._destroyed = true;
@@ -907,7 +947,7 @@ var TegakiEngine = class TegakiEngine {
 	_updateDom() {
 		this._rootEl.style.fontFamily = this._font?.family ?? "";
 		this._updateCssProperties();
-		this._overlayEl.textContent = this._text;
+		if (this._overlayEl.textContent !== this._text) this._overlayEl.textContent = this._text;
 		this._canvasFallbackEl.textContent = this._text;
 	}
 	_updateCssProperties() {
@@ -1010,9 +1050,9 @@ var TegakiEngine = class TegakiEngine {
 			if (this._font === currentFont && !this._destroyed) {
 				this._fontReady = true;
 				this._recomputeTimeline();
+				this._updateDom();
 				this._recomputeLayout();
 				this._evaluatePlayback();
-				this._updateDom();
 				this._render();
 			}
 		});
@@ -1025,9 +1065,15 @@ var TegakiEngine = class TegakiEngine {
 		};
 	}
 	_recomputeLayout() {
-		const fontFamily = this._font?.family;
-		if (this._fontReady && fontFamily && this._fontSize && this._containerWidth && this._text) this._layout = computeTextLayout(this._text, fontFamily, this._fontSize, this._lineHeight, this._containerWidth);
-		else this._layout = null;
+		if (this._fontReady && this._font?.family && this._fontSize && this._containerWidth && this._text) {
+			const key = `${this._text}\0${this._font.family}\0${this._fontSize}\0${this._lineHeight}\0${this._containerWidth}`;
+			if (key === this._layoutKey) return;
+			this._layoutKey = key;
+			this._layout = computeTextLayout(this._overlayEl, this._fontSize);
+		} else {
+			this._layoutKey = "";
+			this._layout = null;
+		}
 	}
 	_evaluatePlayback() {
 		if (this._timeControl.mode === "uncontrolled" && this._playing && !!this._font && this._fontReady && !this._prefersReducedMotion) this._startLoop();
@@ -1052,28 +1098,59 @@ var TegakiEngine = class TegakiEngine {
 		this._lastTs = ts;
 		const tc = this._timeControl;
 		if (tc.mode !== "uncontrolled") return;
-		const speed = tc.speed ?? 1;
 		const loop = tc.loop ?? false;
-		const catchUp = tc.catchUp ?? 0;
 		const totalDur = this._timeline.totalDuration;
+		const durationOverride = tc.duration;
+		const useDuration = durationOverride !== void 0 && durationOverride > 0;
 		if (totalDur === 0 || !loop && this._internalTime >= totalDur) {
 			this._internalTime = totalDur;
 			this._rafId = requestAnimationFrame(this._tick);
 			return;
 		}
-		let effectiveSpeed = speed;
-		if (catchUp > 0) {
-			const remaining = Math.max(0, totalDur - this._internalTime);
-			const targetBoost = catchUp * Math.max(0, remaining - 2);
-			const attackRate = 4;
-			const releaseRate = loop ? 30 : 2;
-			const rate = targetBoost > this._smoothedBoost ? attackRate : releaseRate;
-			this._smoothedBoost += (targetBoost - this._smoothedBoost) * (1 - Math.exp(-rate * dtSec));
-			effectiveSpeed = speed + this._smoothedBoost;
+		if (this._delayRemaining > 0) {
+			this._delayRemaining = Math.max(0, this._delayRemaining - dtSec);
+			this._rafId = requestAnimationFrame(this._tick);
+			return;
+		}
+		if (this._loopGapRemaining > 0) {
+			this._loopGapRemaining = Math.max(0, this._loopGapRemaining - dtSec);
+			if (this._loopGapRemaining <= 0) {
+				this._internalTime = 0;
+				this._prevCompleted = false;
+				this._smoothedBoost = 0;
+			}
+			this._notifyTimeChange();
+			this._render();
+			this._updateCssProperties();
+			this._rafId = requestAnimationFrame(this._tick);
+			return;
+		}
+		let effectiveSpeed;
+		if (useDuration) effectiveSpeed = totalDur / durationOverride;
+		else {
+			const speed = tc.speed ?? 1;
+			const catchUp = tc.catchUp ?? 0;
+			effectiveSpeed = speed;
+			if (catchUp > 0) {
+				const remaining = Math.max(0, totalDur - this._internalTime);
+				const targetBoost = catchUp * Math.max(0, remaining - 2);
+				const attackRate = 4;
+				const releaseRate = loop ? 30 : 2;
+				const rate = targetBoost > this._smoothedBoost ? attackRate : releaseRate;
+				this._smoothedBoost += (targetBoost - this._smoothedBoost) * (1 - Math.exp(-rate * dtSec));
+				effectiveSpeed = speed + this._smoothedBoost;
+			}
 		}
 		let next = this._internalTime + dtSec * effectiveSpeed;
 		if (next >= totalDur) {
-			next = loop ? next % totalDur : totalDur;
+			if (loop) {
+				const loopGap = tc.loopGap ?? 0;
+				if (loopGap > 0) {
+					next = totalDur;
+					this._loopGapRemaining = loopGap;
+				} else if (this._internalTime < totalDur) next = totalDur;
+				else next %= totalDur;
+			} else next = totalDur;
 			this._smoothedBoost = 0;
 		}
 		this._internalTime = next;
@@ -1085,10 +1162,10 @@ var TegakiEngine = class TegakiEngine {
 	};
 	_notifyTimeChange() {
 		const tc = this._timeControl;
-		if (tc.mode === "uncontrolled" && tc.onTimeChange) tc.onTimeChange(this._internalTime);
+		if (tc.mode === "uncontrolled" && tc.onTimeChange) tc.onTimeChange(this.currentTime);
 	}
 	_checkCompletion() {
-		const complete = this._timeline.totalDuration > 0 && this.currentTime >= this._timeline.totalDuration;
+		const complete = this.isComplete;
 		if (complete && !this._prevCompleted) {
 			this._prevCompleted = true;
 			this._onComplete?.();
@@ -1101,9 +1178,8 @@ var TegakiEngine = class TegakiEngine {
 		const fontSize = this._fontSize;
 		if (!font?.glyphData || !layout || !fontSize) return;
 		const dpr = window.devicePixelRatio || 1;
-		const canvasRect = canvas.getBoundingClientRect();
-		const w = canvasRect.width;
-		const h = canvasRect.height;
+		const w = canvas.offsetWidth;
+		const h = canvas.offsetHeight;
 		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);
@@ -1122,36 +1198,29 @@ var TegakiEngine = class TegakiEngine {
 		const currentTime = this.currentTime;
 		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 = this._timeline.entries[charIdx];
-				const charWidth = layout.charWidths[charIdx] ?? 0;
-				const kerning = layout.kernings[charIdx] ?? 0;
+				const x = (layout.charOffsets[charIdx] ?? 0) * fontSize;
 				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,
+						y: y + halfLeading,
 						fontSize,
 						unitsPerEm: font.unitsPerEm,
 						ascender: font.ascender,
 						descender: font.descender
 					}, localTime, font.lineCap, color, this._resolvedEffects, this._seed + charIdx, this._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, font.family, color, this._resolvedEffects, this._seed + charIdx);
-				}
-				x += (charWidth + kerning) * fontSize;
+				} else if (!entry.hasGlyph && currentTime >= entry.offset + entry.duration) drawFallbackGlyph(ctx, char, x, y + halfLeading + font.ascender / font.unitsPerEm * fontSize, fontSize, font.family, color, this._resolvedEffects, this._seed + charIdx);
 			}
 			y += lineHeight;
 		}
 	}
 };
 //#endregion
-export { ensureFontFace as a, resolveEffects as c, computeTextLayout as i, createBundle as n, drawGlyph as o, computeTimeline as r, coerceToString as s, TegakiEngine as t };
+export { createBundle as a, resolveBundle as c, ensureFontFace as d, drawGlyph as f, domCreateElement as i, computeTimeline as l, resolveEffects as m, buildChildren as n, getBundle as o, coerceToString as p, buildRootProps as r, registerBundle as s, TegakiEngine as t, computeTextLayout as u };
 
-//# sourceMappingURL=core-Y5z-Gwut.mjs.map
+//# sourceMappingURL=core-I9K3LqxK.mjs.map