tegaki 0.16.0 → 0.17.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # tegaki
 
+## 0.17.1
+
+### Patch Changes
+
+- affe5a5: Add shorthand for setting time property to a percentage for controlled progress mode.
+
+## 0.17.0
+
+### Minor Changes
+
+- 2b4b435: Support Devanagari writing system and add Tillana as built-in font. Also fixed a bug with generating n-grams, which affected Arabic fonts.
+
+### Patch Changes
+
+- ee2db76: Fix GPOS and advance width features for some Arabic fonts like "Aref Ruqaa"
+
 ## 0.16.0
 
 ### Minor Changes

package/FONTS-LICENSE.md

@@ -45,6 +45,12 @@ All fonts are licensed under the [SIL Open Font License, Version 1.1](https://op
 - **Copyright**: Copyright 2010-2022 The Amiri Project Authors (https://github.com/aliftype/amiri)
 - **License**: SIL Open Font License, Version 1.1
 
+## Tillana
+
+- **Designer**: Indian Type Foundry, Shiva Nallaperumal
+- **Copyright**: Copyright (c) 2014, Indian Type Foundry (info@indiantypefoundry.com)
+- **License**: SIL Open Font License, Version 1.1
+
 ---
 
 ## SIL Open Font License, Version 1.1

package/README.md

@@ -73,6 +73,7 @@ Several handwriting fonts are bundled and ready to use:
 - **Parisienne** — `tegaki/fonts/parisienne` _(Latin)_
 - **Suez One** — `tegaki/fonts/suez-one` _(Hebrew + Latin)_
 - **Amiri** — `tegaki/fonts/amiri` _(Arabic + Latin)_
+- **Tillana** — `tegaki/fonts/tillana` _(Devanagari + Latin)_
 - **Klee One** — `tegaki/fonts/klee-one` _(Japanese: kana + Kyōiku grade 1–2 kanji + Latin)_
 
 For other fonts, use the [interactive generator](https://gkurt.com/tegaki/generator/) to create a custom bundle.

package/dist/core/index.d.mts

@@ -1,3 +1,3 @@
-import { S as TimedPoint, _ as TegakiEffectName, a as BBox, b as TegakiMultiEffectName, c as CSSLength, d as LineCap, f as PathCommand, g as TegakiEffectConfigs, h as TegakiBundle, i as ShapedGlyph, l as FontOutput, m as Stroke, o as BUNDLE_VERSION, p as Point, r as BundleShaper, s as COMPATIBLE_BUNDLE_VERSIONS, t as ShaperFactory, u as GlyphData, v as TegakiEffects, x as TegakiSingletonEffectName, y as TegakiGlyphData } from "../shaper-registry-HD6_qkK4.mjs";
-import { A as computeLayoutBbox, C as findEffect, D as resolveEffects, E as hasRenderHooks, O as LayoutBBox, S as ResolvedEffect, T as getEffectDefinition, _ as computeTimeline, a as CreateElementFn, b as EffectDefinition, c as TimeControlMode, d as getBundle, f as registerBundle, g as TimelineEntry, h as TimelineConfig, i as TegakiEngine, j as computeTextLayout, k as TextLayout, l as TimeControlProp, m as Timeline, n as buildRootProps, o as TegakiEngineOptions, p as resolveBundle, r as domCreateElement, s as TegakiQuality, t as buildChildren, u as createBundle, v as ensureFontFace, w as findEffects, x as RenderStageContext, y as drawGlyph } from "../index-Qr39WZaW.mjs";
+import { S as TimedPoint, _ as TegakiEffectName, a as BBox, b as TegakiMultiEffectName, c as CSSLength, d as LineCap, f as PathCommand, g as TegakiEffectConfigs, h as TegakiBundle, i as ShapedGlyph, l as FontOutput, m as Stroke, o as BUNDLE_VERSION, p as Point, r as BundleShaper, s as COMPATIBLE_BUNDLE_VERSIONS, t as ShaperFactory, u as GlyphData, v as TegakiEffects, x as TegakiSingletonEffectName, y as TegakiGlyphData } from "../shaper-registry-DVS5R37Q.mjs";
+import { A as TimelineEntry, C as resolveEffects, D as computeTextLayout, E as computeLayoutBbox, O as Timeline, S as hasRenderHooks, T as TextLayout, _ as RenderStageContext, a as CreateElementFn, b as findEffects, c as TimeControlMode, d as getBundle, f as registerBundle, g as EffectDefinition, h as drawGlyph, i as TegakiEngine, j as computeTimeline, k as TimelineConfig, l as TimeControlProp, m as ensureFontFace, n as buildRootProps, o as TegakiEngineOptions, p as resolveBundle, r as domCreateElement, s as TegakiQuality, t as buildChildren, u as createBundle, v as ResolvedEffect, w as LayoutBBox, x as getEffectDefinition, y as findEffect } from "../index-BRsSO7q7.mjs";
 export { BBox, BUNDLE_VERSION, BundleShaper, COMPATIBLE_BUNDLE_VERSIONS, CSSLength, CreateElementFn, EffectDefinition, FontOutput, GlyphData, LayoutBBox, LineCap, PathCommand, Point, RenderStageContext, ResolvedEffect, ShapedGlyph, ShaperFactory, Stroke, TegakiBundle, TegakiEffectConfigs, TegakiEffectName, TegakiEffects, TegakiEngine, TegakiEngineOptions, TegakiGlyphData, TegakiMultiEffectName, TegakiQuality, TegakiSingletonEffectName, TextLayout, TimeControlMode, TimeControlProp, TimedPoint, Timeline, TimelineConfig, TimelineEntry, buildChildren, buildRootProps, computeLayoutBbox, computeTextLayout, computeTimeline, createBundle, domCreateElement, drawGlyph, ensureFontFace, findEffect, findEffects, getBundle, getEffectDefinition, hasRenderHooks, registerBundle, resolveBundle, resolveEffects };

package/dist/core/index.mjs

@@ -1,2 +1,2 @@
-import { _ as findEffect, a as createBundle, b as hasRenderHooks, c as resolveBundle, d as computeTimeline, f as computeLayoutBbox, h as drawGlyph, i as domCreateElement, l as BUNDLE_VERSION, m as ensureFontFace, n as buildChildren, o as getBundle, p as computeTextLayout, r as buildRootProps, s as registerBundle, t as TegakiEngine, u as COMPATIBLE_BUNDLE_VERSIONS, v as findEffects, x as resolveEffects, y as getEffectDefinition } from "../core-BRYlZ8i2.mjs";
+import { _ as findEffect, a as createBundle, b as hasRenderHooks, c as resolveBundle, d as computeTimeline, f as computeLayoutBbox, h as drawGlyph, i as domCreateElement, l as BUNDLE_VERSION, m as ensureFontFace, n as buildChildren, o as getBundle, p as computeTextLayout, r as buildRootProps, s as registerBundle, t as TegakiEngine, u as COMPATIBLE_BUNDLE_VERSIONS, v as findEffects, x as resolveEffects, y as getEffectDefinition } from "../core-Cbi21OMg.mjs";
 export { BUNDLE_VERSION, COMPATIBLE_BUNDLE_VERSIONS, TegakiEngine, buildChildren, buildRootProps, computeLayoutBbox, computeTextLayout, computeTimeline, createBundle, domCreateElement, drawGlyph, ensureFontFace, findEffect, findEffects, getBundle, getEffectDefinition, hasRenderHooks, registerBundle, resolveBundle, resolveEffects };

package/dist/{core-BRYlZ8i2.mjs → core-Cbi21OMg.mjs}

@@ -264,6 +264,24 @@ function cssFontFamily(bundle) {
 	if (bundle.fullFamily) return `'${bundle.family}', '${bundle.fullFamily}'`;
 	return `'${bundle.family}'`;
 }
+/**
+* Look up `glyphData` for a grapheme cluster, with a fallback to its leading
+* codepoint. Devanagari clusters like `"हि"` or `"न्दी"` have no entry in the
+* single-codepoint-keyed `glyphData`; without the fallback every shaped glyph
+* inside such a cluster that the variant map skipped (i.e. nominal forms like
+* the bare `ह`) would resolve to `undefined`, get tagged `hasGlyph: false`,
+* and collapse onto the 0.2s `unknownDuration` slot — drawn at end-of-slot
+* via DOM `fillText`. The fallback resolves the cluster's first codepoint
+* (e.g. `ह` from `"हि"`), so the nominal glyph picks up its real stroke data
+* and animates instead of popping in.
+*/
+function lookupGlyphData(font, char) {
+	const direct = font.glyphData[char];
+	if (direct || char.length <= 1) return direct;
+	const cp = char.codePointAt(0);
+	if (cp === void 0) return void 0;
+	return font.glyphData[String.fromCodePoint(cp)];
+}
 function coerceToString(value) {
 	if (value == null || typeof value === "boolean") return "";
 	if (typeof value === "string") return value;
@@ -681,7 +699,12 @@ function measureElement(el, fontSize) {
 }
 /**
 * Replace `layout.charOffsets` and `charWidths` with values computed from the
-* shaper's advances, while preserving the DOM's line-break decisions.
+* shaper's advances, while preserving the DOM's line-break decisions. When a
+* `timeline` is provided, each entry's `xOffsetEm` and `yOffsetEm` are also
+* filled in from the shaper's per-glyph pen-walk (mutated in place) and
+* `layout.lineLefts` is populated — together they let the engine draw each
+* glyph at its GPOS-positioned origin (cursive-attachment lift, mark
+* attachment) instead of sharing one position per cluster.
 *
 * The DOM's Range API returns imprecise per-grapheme rects inside a complex-
 * shaped cluster (Arabic joining, Indic conjuncts, ligatures with kern/mark
@@ -693,7 +716,7 @@ function measureElement(el, fontSize) {
 * DOM using a full-line Range — per-grapheme rects inside shaped clusters are
 * not reliable enough to anchor against.
 */
-function applyShaperPositions(layout, el, text, fontSize, font, shaper) {
+function applyShaperPositions(layout, el, text, fontSize, font, shaper, timeline) {
 	const chars = graphemes(text);
 	if (!chars.length) return layout;
 	const textNode = el.firstChild;
@@ -715,9 +738,19 @@ function applyShaperPositions(layout, el, text, fontSize, font, shaper) {
 	utf16ToGrapheme[text.length] = chars.length;
 	const charOffsets = layout.charOffsets.slice();
 	const charWidths = layout.charWidths.slice();
+	const lineLefts = new Array(layout.lines.length).fill(0);
 	const emPerUnit = 1 / font.unitsPerEm;
-	for (const lineIndices of layout.lines) {
-		const realIndices = lineIndices.filter((idx) => chars[idx] !== "\n");
+	const entryQueue = /* @__PURE__ */ new Map();
+	if (timeline) for (let ei = 0; ei < timeline.entries.length; ei++) {
+		const e = timeline.entries[ei];
+		if (e.glyphId === void 0) continue;
+		const key = `${e.graphemeIndex}:${e.glyphId}`;
+		const list = entryQueue.get(key);
+		if (list) list.push(ei);
+		else entryQueue.set(key, [ei]);
+	}
+	for (let li = 0; li < layout.lines.length; li++) {
+		const realIndices = layout.lines[li].filter((idx) => chars[idx] !== "\n");
 		if (realIndices.length === 0) continue;
 		const lineStartU = graphemeStartU[realIndices[0]];
 		const lastReal = realIndices[realIndices.length - 1];
@@ -729,6 +762,7 @@ function applyShaperPositions(layout, el, text, fontSize, font, shaper) {
 		let lineLeftPx = Infinity;
 		for (const r of lineRects) if (r.left < lineLeftPx) lineLeftPx = r.left;
 		const lineLeftEm = (lineLeftPx - elLeft) / scale / fontSize;
+		lineLefts[li] = lineLeftEm;
 		const lineText = text.slice(lineStartU, lineEndU);
 		const lineRTL = RTL_CHAR_RE.test(lineText);
 		const shaped = shaper.shape(lineText);
@@ -737,12 +771,29 @@ function applyShaperPositions(layout, el, text, fontSize, font, shaper) {
 		const clusterLeft = /* @__PURE__ */ new Map();
 		const clusterAdvance = /* @__PURE__ */ new Map();
 		let penEm = 0;
+		let penYEm = 0;
 		for (const g of visualGlyphs) {
 			const axEm = g.ax * emPerUnit;
+			const ayEm = g.ay * emPerUnit;
 			const dxEm = g.dx * emPerUnit;
-			if (!clusterLeft.has(g.cl)) clusterLeft.set(g.cl, penEm + dxEm);
+			const dyEm = g.dy * emPerUnit;
+			const glyphXEm = penEm + dxEm;
+			const glyphYEm = penYEm - dyEm;
+			if (!clusterLeft.has(g.cl)) clusterLeft.set(g.cl, glyphXEm);
 			clusterAdvance.set(g.cl, (clusterAdvance.get(g.cl) ?? 0) + axEm);
+			if (timeline) {
+				const gIdx = utf16ToGrapheme[lineStartU + g.cl];
+				if (gIdx !== void 0 && gIdx >= 0) {
+					const ei = entryQueue.get(`${gIdx}:${g.g}`)?.shift();
+					if (ei !== void 0) {
+						const entry = timeline.entries[ei];
+						entry.xOffsetEm = glyphXEm;
+						entry.yOffsetEm = glyphYEm;
+					}
+				}
+			}
 			penEm += axEm;
+			penYEm -= ayEm;
 		}
 		const assigned = /* @__PURE__ */ new Set();
 		for (const [cl, leftEm] of clusterLeft) {
@@ -767,7 +818,8 @@ function applyShaperPositions(layout, el, text, fontSize, font, shaper) {
 	return {
 		lines: layout.lines,
 		charOffsets,
-		charWidths
+		charWidths,
+		lineLefts
 	};
 }
 /**
@@ -981,7 +1033,7 @@ function computeGraphemeTimeline(text, font, config) {
 			});
 			continue;
 		}
-		const glyph = font.glyphData[char];
+		const glyph = lookupGlyphData(font, char);
 		if (glyph) {
 			const part = partitionGlyph(glyph, unknownDuration, deferDots);
 			sched.add({
@@ -1047,7 +1099,7 @@ function computeShapedTimeline(text, font, config, shaper) {
 				const clusterText = text.slice(clusterStart, clusterEnd);
 				const firstChar = chars[graphemeIdx];
 				const isWhitespace = /^\s+$/.test(clusterText);
-				const data = font.glyphDataById?.[glyph.g] ?? font.glyphData[firstChar];
+				const data = font.glyphDataById?.[glyph.g] ?? lookupGlyphData(font, firstChar);
 				const hasGlyph = !!data;
 				if (isWhitespace) {
 					sched.separate("word", {
@@ -1373,13 +1425,34 @@ function getShaperForBundle(bundle) {
 }
 //#endregion
 //#region src/core/engine.ts
+/**
+* Parse a percentage string like `"50%"` into a 0–1 fraction. Returns `null`
+* for non-percentage strings or unparseable input. Whitespace around the
+* value is tolerated; the numeric part is parsed with `Number(...)`, so any
+* finite numeric form (including negatives and decimals) is accepted.
+*/
+function parsePercentage(s) {
+	const trimmed = s.trim();
+	if (!trimmed.endsWith("%")) return null;
+	const num = Number(trimmed.slice(0, -1));
+	return Number.isFinite(num) ? num / 100 : null;
+}
 function resolveTimeControl(prop) {
 	if (prop == null) return { mode: "uncontrolled" };
 	if (typeof prop === "number") return {
 		mode: "controlled",
 		value: prop
 	};
-	if (prop === "css") return { mode: "css" };
+	if (typeof prop === "string") {
+		if (prop === "css") return { mode: "css" };
+		const pct = parsePercentage(prop);
+		if (pct != null) return {
+			mode: "controlled",
+			value: pct,
+			unit: "progress"
+		};
+		return { mode: "uncontrolled" };
+	}
 	return prop;
 }
 var TegakiEngine = class {
@@ -1412,6 +1485,7 @@ var TegakiEngine = class {
 	_quality;
 	_showOverlay = false;
 	_onComplete;
+	_onChangeTimeline;
 	_direction;
 	_resolvedEffects = resolveEffects(void 0);
 	_seed;
@@ -1498,6 +1572,32 @@ var TegakiEngine = class {
 	get duration() {
 		return this._timeline.totalDuration;
 	}
+	/**
+	* The engine's current timeline — the same object that drives rendering.
+	* Reflects the resolved shaper once the (async) shaper promise has
+	* settled; use the `onChangeTimeline` option to be notified of recomputations.
+	* Treat the returned object as read-only.
+	*/
+	get timeline() {
+		return this._timeline;
+	}
+	/**
+	* Compute a timeline for arbitrary text against this engine's currently-
+	* loaded font, timing config, and resolved shaper. Useful for measuring
+	* the duration of hypothetical text without changing what's rendered
+	* (e.g. layout planning, fade-in scheduling).
+	*
+	* Returns an empty timeline when no font is loaded. The result reflects
+	* shaper state at call time — call after `onChangeTimeline` has fired
+	* once to be sure the shaper has resolved.
+	*/
+	computeTimeline(text) {
+		if (!this._font) return {
+			entries: [],
+			totalDuration: 0
+		};
+		return computeTimeline(text, this._font, this._timing, this._shaper);
+	}
 	get isPlaying() {
 		return this._playing;
 	}
@@ -1520,9 +1620,20 @@ var TegakiEngine = class {
 		this._playing = false;
 		this._evaluatePlayback();
 	}
+	/**
+	* Seek the (uncontrolled) timeline to an absolute time. Accepts seconds
+	* (number) or a percentage string like `"50%"`, which is interpreted as
+	* a fraction of the timeline's total duration.
+	*/
 	seek(time) {
 		if (this._timeControl.mode !== "uncontrolled") return;
-		this._internalTime = Math.max(0, Math.min(time, this._timeline.totalDuration));
+		let resolved;
+		if (typeof time === "string") {
+			const pct = parsePercentage(time);
+			if (pct == null) return;
+			resolved = pct * this._timeline.totalDuration;
+		} else resolved = time;
+		this._internalTime = Math.max(0, Math.min(resolved, this._timeline.totalDuration));
 		this._delayRemaining = 0;
 		this._loopGapRemaining = 0;
 		this._checkCompletion();
@@ -1547,7 +1658,7 @@ var TegakiEngine = class {
 		let dirtyRender = false;
 		let dirtyPlayback = false;
 		if ("text" in options) {
-			const nextText = (options.text ?? "").replace(/\r\n?/g, "\n");
+			const nextText = (options.text ?? "").replace(/\r\n?/g, "\n").normalize("NFC");
 			if (nextText !== this._text) {
 				this._text = nextText;
 				dirtyTimeline = true;
@@ -1621,6 +1732,7 @@ var TegakiEngine = class {
 			dirtyRender = true;
 		}
 		if ("onComplete" in options) this._onComplete = options.onComplete;
+		if ("onChangeTimeline" in options) this._onChangeTimeline = options.onChangeTimeline;
 		if (dirtyTimeline) this._recomputeTimeline();
 		if (dirtyRender || dirtyTimeline || dirtyLayout) this._updateDom();
 		if (dirtyLayout) this._recomputeLayout();
@@ -1802,6 +1914,7 @@ var TegakiEngine = class {
 			entries: [],
 			totalDuration: 0
 		};
+		this._onChangeTimeline?.(this._timeline);
 	}
 	_recomputeLayout() {
 		if (this._fontReady && this._font?.family && this._fontSize && this._containerWidth && this._text) {
@@ -1810,7 +1923,7 @@ var TegakiEngine = class {
 			if (key === this._layoutKey) return;
 			this._layoutKey = key;
 			let layout = computeTextLayout(this._overlayEl, this._fontSize);
-			if (this._shaper && this._font) layout = applyShaperPositions(layout, this._overlayEl, this._text, this._fontSize, this._font, this._shaper);
+			if (this._shaper && this._font) layout = applyShaperPositions(layout, this._overlayEl, this._text, this._fontSize, this._font, this._shaper, this._timeline);
 			this._layout = layout;
 		} else {
 			this._layoutKey = "";
@@ -1987,15 +2100,16 @@ var TegakiEngine = class {
 			const lineIdx = graphemeToLine[charIdx] ?? -1;
 			if (lineIdx < 0) continue;
 			const y = lineIdx * lineHeight;
-			const x = (layout.charOffsets[charIdx] ?? 0) * fontSize;
-			const glyph = (entry.glyphId !== void 0 ? font.glyphDataById?.[entry.glyphId] : void 0) ?? font.glyphData[entry.char];
+			const lineLeftEm = layout.lineLefts?.[lineIdx];
+			const x = entry.xOffsetEm !== void 0 && lineLeftEm !== void 0 ? (lineLeftEm + entry.xOffsetEm) * fontSize : (layout.charOffsets[charIdx] ?? 0) * fontSize;
+			const glyph = (entry.glyphId !== void 0 ? font.glyphDataById?.[entry.glyphId] : void 0) ?? lookupGlyphData(font, entry.char);
 			if (glyph && entry.hasGlyph) {
 				let localTime = Math.max(0, Math.min(currentTime - entry.offset, entry.duration));
 				const glyphEasing = this._timing?.glyphEasing;
 				if (glyphEasing && entry.duration > 0) localTime = glyphEasing(localTime / entry.duration) * entry.duration;
 				drawGlyph(ctx, glyph, {
 					x,
-					y: y + halfLeading,
+					y: y + halfLeading + (entry.yOffsetEm ?? 0) * fontSize,
 					fontSize,
 					unitsPerEm: font.unitsPerEm,
 					ascender: font.ascender,
@@ -2048,4 +2162,4 @@ var TegakiEngine = class {
 //#endregion
 export { findEffect as _, createBundle as a, hasRenderHooks as b, resolveBundle as c, computeTimeline as d, computeLayoutBbox as f, coerceToString as g, drawGlyph as h, domCreateElement as i, BUNDLE_VERSION as l, ensureFontFace as m, buildChildren as n, getBundle as o, computeTextLayout as p, buildRootProps as r, registerBundle as s, TegakiEngine as t, COMPATIBLE_BUNDLE_VERSIONS as u, findEffects as v, resolveEffects as x, getEffectDefinition as y };
 
-//# sourceMappingURL=core-BRYlZ8i2.mjs.map
+//# sourceMappingURL=core-Cbi21OMg.mjs.map