tegaki 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # tegaki
 
+## 0.18.0
+
+### Minor Changes
+
+- b6e883b: Update Harfbuzz to v1.1.0
+- d358cbd: Add `stagger` timing mode where each glyph starts a fixed advance (seconds or `"N%"` of the previous glyph's effective duration) after the previous one, with an optional static per-glyph duration that scales strokes to fit. Exposed in the website previewer via the new `st` / `sa` / `sd` URL keys.
+
+### Patch Changes
+
+- 150296e: Fix the Astro adapter so passing `font={bundle}` hydrates without an explicit `bundle` prop and lookups by human-friendly font name resolve correctly. Animations now also re-hydrate after Astro View Transitions navigations.
+- 150296e: Make the Vue adapter's `effects` prop generic so custom effect configs are correctly type-inferred. Also drop a redundant Nuxt config type augmentation.
+
+## 0.17.1
+
+### Patch Changes
+
+- affe5a5: Add shorthand for setting time property to a percentage for controlled progress mode.
+
 ## 0.17.0
 
 ### Minor Changes

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-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-vDGB0qjx.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 };
+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-CrfNiB1j.mjs";
+import { A as TimelineEntry, C as resolveEffects, D as computeTextLayout, E as computeLayoutBbox, M as computeTimeline, 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 TimelineStaggerConfig, 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-BVYJFRMq.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, TimelineStaggerConfig, 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-BrU5Htjs.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-MwnsJAbN.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-BrU5Htjs.mjs → core-MwnsJAbN.mjs}

@@ -368,8 +368,13 @@ function defaultStrokeEasing(t) {
 * delay relative to `localTime = 0`. Used by the timeline scheduler to defer
 * priority-tagged strokes (disconnected marks / i-dots / Arabic nuqṭa) to
 * after every body stroke in the word has drawn.
+*
+* `strokeTimeScale` multiplies both bundled `d` and `a` so a glyph's strokes
+* fit a stretched/compressed time slot (used by stagger mode with a static
+* `duration`). Defaults to `1` (no scaling). `strokeDelays` are already
+* scheduler-relative seconds and are not affected by this scale.
 */
-function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], seed = 0, getSubdivided, strokeEasing = defaultStrokeEasing, strokeScale = 1, strokeStyleOverride, strokeDelays) {
+function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], seed = 0, getSubdivided, strokeEasing = defaultStrokeEasing, strokeScale = 1, strokeStyleOverride, strokeDelays, strokeTimeScale = 1) {
 	const defaultStrokePaint = strokeStyleOverride ?? color;
 	const scale = pos.fontSize / pos.unitsPerEm;
 	const ox = pos.x;
@@ -419,10 +424,11 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 	};
 	for (let si = 0; si < glyph.s.length; si++) {
 		const stroke = glyph.s[si];
-		const delay = strokeDelays?.[si] ?? stroke.d;
+		const delay = strokeDelays?.[si] ?? stroke.d * strokeTimeScale;
 		if (localTime < delay) continue;
 		const elapsed = localTime - delay;
-		const linearProgress = Math.min(elapsed / stroke.a, 1);
+		const animDuration = stroke.a * strokeTimeScale;
+		const linearProgress = animDuration > 0 ? Math.min(elapsed / animDuration, 1) : 1;
 		const progress = strokeEasing ? strokeEasing(linearProgress) : linearProgress;
 		const rawPts = stroke.p;
 		if (rawPts.length === 0) continue;
@@ -875,6 +881,79 @@ function computeTimeline(text, font, config, shaper) {
 	if (shaper && font.glyphDataById) return computeShapedTimeline(text, font, config, shaper);
 	return computeGraphemeTimeline(text, font, config);
 }
+/** Parse a stagger advance value into seconds, given the previous glyph's bundled duration. */
+function resolveAdvance(advance, prevBundled) {
+	if (typeof advance === "number") return Math.max(0, advance);
+	const m = /^(-?\d+(?:\.\d+)?)\s*%$/.exec(advance);
+	if (m) {
+		const pct = Number(m[1]) / 100;
+		return Math.max(0, pct * prevBundled);
+	}
+	const n = Number(advance);
+	return Number.isFinite(n) ? Math.max(0, n) : 0;
+}
+var StaggerScheduler = class {
+	wordGap;
+	lineGap;
+	advance;
+	staticDuration;
+	entries = [];
+	offset = 0;
+	/**
+	* Effective duration of the most recent glyph (= `staticDuration` when set,
+	* else its bundled `glyph.t`). Basis for percent advances — so
+	* `advance: '100%'` always means "start once the previous glyph finishes",
+	* independent of whether the duration was overridden.
+	*/
+	prevEffective = 0;
+	hasPrev = false;
+	/** Accumulated word/line gap pending until the next glyph (or finalize). */
+	pendingGap = 0;
+	constructor(wordGap, lineGap, advance, staticDuration) {
+		this.wordGap = wordGap;
+		this.lineGap = lineGap;
+		this.advance = advance;
+		this.staticDuration = staticDuration;
+	}
+	addGlyph(fields, bundledDuration) {
+		if (this.hasPrev) {
+			this.offset += resolveAdvance(this.advance, this.prevEffective) + this.pendingGap;
+			this.pendingGap = 0;
+		}
+		const duration = this.staticDuration ?? bundledDuration;
+		const strokeTimeScale = bundledDuration > 0 ? duration / bundledDuration : 1;
+		this.entries.push({
+			...fields,
+			offset: this.offset,
+			duration,
+			...strokeTimeScale !== 1 ? { strokeTimeScale } : {}
+		});
+		this.prevEffective = duration;
+		this.hasPrev = true;
+	}
+	/** Emit a zero-duration marker (e.g. whitespace) at the current offset without advancing the cursor. */
+	addMarker(fields) {
+		this.entries.push({
+			...fields,
+			offset: this.offset,
+			duration: 0
+		});
+	}
+	separator(sep) {
+		this.pendingGap += sep === "line" ? this.lineGap : this.wordGap;
+	}
+	finalize() {
+		let total = 0;
+		for (const e of this.entries) {
+			const end = e.offset + e.duration;
+			if (end > total) total = end;
+		}
+		return {
+			entries: this.entries,
+			totalDuration: total
+		};
+	}
+};
 /** Decompose a glyph into a body phase and an optional dot phase. */
 function partitionGlyph(glyph, fallbackTotal, deferDots) {
 	const strokes = glyph.s;
@@ -916,6 +995,9 @@ function partitionGlyph(glyph, fallbackTotal, deferDots) {
 	};
 }
 var Scheduler = class {
+	glyphGap;
+	wordGap;
+	lineGap;
 	entries = [];
 	group = [];
 	offset = 0;
@@ -1013,6 +1095,40 @@ function computeGraphemeTimeline(text, font, config) {
 	const unknownDuration = config?.unknownDuration ?? DEFAULTS.unknownDuration;
 	const deferDots = config?.deferDots ?? DEFAULTS.deferDots;
 	const chars = graphemes(text);
+	if (config?.stagger) {
+		const staticDur = config.stagger.duration === "auto" || config.stagger.duration === void 0 ? void 0 : config.stagger.duration;
+		const sched = new StaggerScheduler(wordGap, lineGap, config.stagger.advance, staticDur);
+		for (let i = 0; i < chars.length; i++) {
+			const char = chars[i];
+			const isLineBreak = char === "\n";
+			const isWhitespace = !isLineBreak && /^\s+$/.test(char);
+			if (isLineBreak) {
+				sched.separator("line");
+				continue;
+			}
+			if (isWhitespace) {
+				sched.addMarker({
+					char,
+					graphemeIndex: i,
+					hasGlyph: false
+				});
+				sched.separator("word");
+				continue;
+			}
+			const glyph = lookupGlyphData(font, char);
+			if (glyph) sched.addGlyph({
+				char,
+				graphemeIndex: i,
+				hasGlyph: true
+			}, glyph.t ?? unknownDuration);
+			else sched.addGlyph({
+				char,
+				graphemeIndex: i,
+				hasGlyph: false
+			}, unknownDuration);
+		}
+		return sched.finalize();
+	}
 	const sched = new Scheduler(glyphGap, wordGap, lineGap);
 	for (let i = 0; i < chars.length; i++) {
 		const char = chars[i];
@@ -1079,7 +1195,8 @@ function computeShapedTimeline(text, font, config, shaper) {
 		}
 		utf16ToGrapheme[text.length] = chars.length;
 	}
-	const sched = new Scheduler(glyphGap, wordGap, lineGap);
+	const staggerSched = config?.stagger ? new StaggerScheduler(wordGap, lineGap, config.stagger.advance, config.stagger.duration === "auto" || config.stagger.duration === void 0 ? void 0 : config.stagger.duration) : null;
+	const sched = staggerSched ? null : new Scheduler(glyphGap, wordGap, lineGap);
 	let lineStart = 0;
 	for (let i = 0; i <= text.length; i++) {
 		const atEnd = i === text.length;
@@ -1102,7 +1219,15 @@ function computeShapedTimeline(text, font, config, shaper) {
 				const data = font.glyphDataById?.[glyph.g] ?? lookupGlyphData(font, firstChar);
 				const hasGlyph = !!data;
 				if (isWhitespace) {
-					sched.separate("word", {
+					if (staggerSched) {
+						staggerSched.addMarker({
+							char: firstChar,
+							graphemeIndex: graphemeIdx,
+							glyphId: glyph.g,
+							hasGlyph
+						});
+						staggerSched.separator("word");
+					} else sched.separate("word", {
 						fields: {
 							char: firstChar,
 							graphemeIndex: graphemeIdx,
@@ -1113,7 +1238,15 @@ function computeShapedTimeline(text, font, config, shaper) {
 					});
 					continue;
 				}
-				if (hasGlyph && data) {
+				if (staggerSched) {
+					const bundled = hasGlyph && data ? data.t ?? unknownDuration : unknownDuration;
+					staggerSched.addGlyph({
+						char: firstChar,
+						graphemeIndex: graphemeIdx,
+						glyphId: glyph.g,
+						hasGlyph: !!(hasGlyph && data)
+					}, bundled);
+				} else if (hasGlyph && data) {
 					const part = partitionGlyph(data, unknownDuration, deferDots);
 					sched.add({
 						fields: {
@@ -1144,11 +1277,12 @@ function computeShapedTimeline(text, font, config, shaper) {
 			}
 		}
 		if (!atEnd) {
-			sched.separate("line");
+			if (staggerSched) staggerSched.separator("line");
+			else sched.separate("line");
 			lineStart = i + 1;
 		}
 	}
-	return sched.finalize();
+	return staggerSched ? staggerSched.finalize() : sched.finalize();
 }
 //#endregion
 //#region src/types.ts
@@ -1178,6 +1312,7 @@ function checkBundleVersion(bundle) {
 function registerBundle(bundle) {
 	checkBundleVersion(bundle);
 	bundles.set(bundle.family, bundle);
+	if (bundle.fullFamily && bundle.fullFamily !== bundle.family) bundles.set(bundle.fullFamily, bundle);
 }
 /** Look up a registered bundle by family name. */
 function getBundle(family) {
@@ -1425,13 +1560,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 {
@@ -1599,9 +1755,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();
@@ -2082,7 +2249,7 @@ var TegakiEngine = class {
 					unitsPerEm: font.unitsPerEm,
 					ascender: font.ascender,
 					descender: font.descender
-				}, localTime, font.lineCap, color, this._resolvedEffects, this._seed + charIdx, getSubdivided, this._timing?.strokeEasing, strokeScale, stage?.strokeStyle, entry.strokeDelays);
+				}, localTime, font.lineCap, color, this._resolvedEffects, this._seed + charIdx, getSubdivided, this._timing?.strokeEasing, strokeScale, stage?.strokeStyle, entry.strokeDelays, entry.strokeTimeScale);
 			} else if (!entry.hasGlyph && currentTime >= entry.offset + entry.duration) {
 				const baseline = y + halfLeading + font.ascender / font.unitsPerEm * fontSize;
 				drawFallbackGlyph(ctx, entry.char, x, baseline, fontSize, cssFontFamily(font), color, this._resolvedEffects, this._seed + charIdx);
@@ -2130,4 +2297,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-BrU5Htjs.mjs.map
+//# sourceMappingURL=core-MwnsJAbN.mjs.map