tegaki 0.17.1 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # tegaki
 
+## 0.19.0
+
+### Minor Changes
+
+- 68ee58f: Support Korean (Hangul) writing system and add Nanum Pen Script as a built-in font. The bundle ships ~650 most-frequent precomposed Hangul syllables (KS X 1001 common band ∪ top-N Korean-Wikipedia-frequency, capped by the Google Fonts subsetting ceiling) plus the 40 modern compatibility jamo (19 consonants ㄱ–ㅎ + 21 vowels ㅏ–ㅣ) and the Latin baseline. Hangul is precomposed in Unicode, so no shaper is required.
+
+### Patch Changes
+
+- 29e111e: Fix Next.js App Router / Turbopack compatibility. Two build/packaging issues prevented `tegaki` from being used in a Next.js (App Router) app:
+
+  - The bundler dropped the `'use client'` directive from the React adapter's output chunk, so importing `TegakiRenderer` into a Server Component failed with "You're importing a module that depends on `useState` into a React Server Component". The directive is now preserved in the built output.
+  - The font subpath exports (`tegaki/fonts/*`) resolved the `node` condition to the raw TypeScript source, which uses `import ... with { type: 'url' }` import attributes that Turbopack/webpack can't process. The `node` condition now points to the pre-built `.mjs` bundle (which loads the font via `new URL('./font.ttf', import.meta.url)`), so it works in any Node-based bundler.
+
+## 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

package/FONTS-LICENSE.md

@@ -51,6 +51,12 @@ All fonts are licensed under the [SIL Open Font License, Version 1.1](https://op
 - **Copyright**: Copyright (c) 2014, Indian Type Foundry (info@indiantypefoundry.com)
 - **License**: SIL Open Font License, Version 1.1
 
+## Nanum Pen Script
+
+- **Designer**: Sandoll Communications Inc. for NHN Corporation
+- **Copyright**: Copyright © 2010 NHN Corporation. All rights reserved. Font designed by Sandoll Communications Inc.
+- **License**: SIL Open Font License, Version 1.1
+
 ---
 
 ## SIL Open Font License, Version 1.1

package/README.md

@@ -75,6 +75,7 @@ Several handwriting fonts are bundled and ready to use:
 - **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)_
+- **Nanum Pen Script** — `tegaki/fonts/nanum-pen-script` _(Korean: Hangul syllables + jamo + 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-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 };
+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-DmlJGnE3.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-H08fD9_Z.mjs";
+export { type BBox, BUNDLE_VERSION, type BundleShaper, COMPATIBLE_BUNDLE_VERSIONS, type CSSLength, type CreateElementFn, type EffectDefinition, type FontOutput, type GlyphData, type LayoutBBox, type LineCap, type PathCommand, type Point, type RenderStageContext, type ResolvedEffect, type ShapedGlyph, type ShaperFactory, type Stroke, type TegakiBundle, type TegakiEffectConfigs, type TegakiEffectName, type TegakiEffects, TegakiEngine, type TegakiEngineOptions, type TegakiGlyphData, type TegakiMultiEffectName, type TegakiQuality, type TegakiSingletonEffectName, type TextLayout, type TimeControlMode, type TimeControlProp, type TimedPoint, type Timeline, type TimelineConfig, type TimelineEntry, type 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-Cbi21OMg.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-B87FE4Wo.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-Cbi21OMg.mjs → core-B87FE4Wo.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;
@@ -559,7 +565,7 @@ function drawGlyph(ctx, glyph, pos, localTime, lineCap, color, effects = [], see
 * explicit enables. (Explicit *disables* are fine — `-fina` suppressing the
 * automatic fina is exactly the user's intent.)
 */
-const SHAPER_MANAGED_FEATURES = new Set([
+const SHAPER_MANAGED_FEATURES = /* @__PURE__ */ new Set([
 	"init",
 	"medi",
 	"fina",
@@ -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
@@ -1162,7 +1296,7 @@ const BUNDLE_VERSION = 0;
 * console warning (once per bundle) when it encounters a version outside
 * this set.
 */
-const COMPATIBLE_BUNDLE_VERSIONS = new Set([0]);
+const COMPATIBLE_BUNDLE_VERSIONS = /* @__PURE__ */ new Set([0]);
 //#endregion
 //#region src/core/bundle-registry.ts
 const bundles = /* @__PURE__ */ new Map();
@@ -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) {
@@ -2114,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);
@@ -2162,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-Cbi21OMg.mjs.map
+//# sourceMappingURL=core-B87FE4Wo.mjs.map