tegaki 0.5.0 → 0.6.0

package/dist/react/index.d.mts

@@ -0,0 +1,3 @@
+import { A as TegakiSingletonEffectName, C as Stroke, D as TegakiEffects, E as TegakiEffectName, O as TegakiGlyphData, S as Point, T as TegakiEffectConfigs, _ as CSSLength, a as TimeControlProp, b as LineCap, c as TimelineEntry, d as computeTextLayout, f as ensureFontFace, g as BBox, h as resolveEffects, i as TimeControlMode, j as TimedPoint, k as TegakiMultiEffectName, l as computeTimeline, m as ResolvedEffect, n as TegakiEngine, o as Timeline, p as drawGlyph, r as TegakiEngineOptions, s as TimelineConfig, t as CreateElementFn, u as TextLayout, v as FontOutput, w as TegakiBundle, x as PathCommand, y as GlyphData } from "../index-Bzxy01Zq.mjs";
+import { n as TegakiRendererHandle, r as TegakiRendererProps, t as TegakiRenderer } from "../index-BUNd9bnS.mjs";
+export { BBox, CSSLength, CreateElementFn, FontOutput, GlyphData, LineCap, PathCommand, Point, ResolvedEffect, Stroke, TegakiBundle, TegakiEffectConfigs, TegakiEffectName, TegakiEffects, TegakiEngine, TegakiEngineOptions, TegakiGlyphData, TegakiMultiEffectName, TegakiRenderer, TegakiRendererHandle, TegakiRendererProps, TegakiSingletonEffectName, TextLayout, TimeControlMode, TimeControlProp, TimedPoint, Timeline, TimelineConfig, TimelineEntry, computeTextLayout, computeTimeline, drawGlyph, ensureFontFace, resolveEffects };

package/dist/react/index.mjs

@@ -0,0 +1,3 @@
+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 };

package/dist/react-Ddx6VfJc.mjs

@@ -0,0 +1,53 @@
+import { o as coerceToString, t as TegakiEngine } from "./core-aZknK_0L.mjs";
+import { createElement, useEffect, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/TegakiRenderer.tsx
+function reactCreateElement(tag, props, ...children) {
+	return createElement(tag, {
+		...props,
+		key: props["data-tegaki"]
+	}, ...children);
+}
+function TegakiRenderer({ ref, font, text, children, time: timeProp, onComplete, effects, segmentSize, timing, showOverlay, ...divProps }) {
+	const containerRef = useRef(null);
+	const engineRef = useRef(null);
+	const engineOptions = {
+		text: text ?? coerceToString(children),
+		font,
+		time: timeProp,
+		effects,
+		segmentSize,
+		timing,
+		showOverlay,
+		onComplete
+	};
+	const elements = TegakiEngine.renderElements(engineOptions, reactCreateElement);
+	useEffect(() => {
+		const engine = new TegakiEngine(containerRef.current, { adopt: true });
+		engineRef.current = engine;
+		return () => {
+			engine.destroy();
+			engineRef.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		engineRef.current?.update(engineOptions);
+	});
+	useImperativeHandle(ref, () => ({
+		get engine() {
+			return engineRef.current;
+		},
+		get element() {
+			return containerRef.current;
+		}
+	}), []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		...divProps,
+		children: elements
+	});
+}
+//#endregion
+export { TegakiRenderer as t };
+
+//# sourceMappingURL=react-Ddx6VfJc.mjs.map

package/dist/react-Ddx6VfJc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-Ddx6VfJc.mjs","names":[],"sources":["../src/react/TegakiRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, createElement, type ReactNode, type Ref, useEffect, useImperativeHandle, useRef } from 'react';\nimport { TegakiEngine, type TegakiEngineOptions } from '../core/engine.ts';\nimport type { Coercible } from '../lib/utils.ts';\nimport { coerceToString } from '../lib/utils.ts';\nimport type { TegakiEffects } from '../types.ts';\n\n/** Imperative handle exposed via the `ref` prop. */\nexport interface TegakiRendererHandle {\n  /** The underlying engine instance. `null` before mount and after unmount. */\n  readonly engine: TegakiEngine | null;\n  /** The container DOM element. */\n  readonly element: HTMLDivElement | null;\n}\n\nexport interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string, never>>\n  extends Omit<TegakiEngineOptions, 'effects'>,\n    Omit<ComponentProps<'div'>, 'children' | 'ref'> {\n  /** Imperative handle ref for playback controls and DOM access. */\n  ref?: Ref<TegakiRendererHandle>;\n\n  /** Children coerced to string. Strings and numbers are kept; everything else is ignored. */\n  children?: Coercible;\n\n  /** Visual effects applied during canvas rendering. */\n  effects?: E;\n}\n\nfunction reactCreateElement(tag: string, props: Record<string, any>, ...children: (ReactNode | string)[]): ReactNode {\n  return createElement(tag, { ...props, key: props['data-tegaki'] }, ...children);\n}\n\nexport function TegakiRenderer<const E extends TegakiEffects<E> = Record<string, never>>({\n  ref,\n  font,\n  text,\n  children,\n  time: timeProp,\n  onComplete,\n  effects,\n  segmentSize,\n  timing,\n  showOverlay,\n  ...divProps\n}: TegakiRendererProps<E>) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const engineRef = useRef<TegakiEngine | null>(null);\n  const resolvedText = text ?? coerceToString(children);\n\n  // Render the element tree via the engine's static method (SSR-safe)\n  const engineOptions: TegakiEngineOptions = {\n    text: resolvedText,\n    font,\n    time: timeProp,\n    effects: effects as Record<string, any>,\n    segmentSize,\n    timing,\n    showOverlay,\n    onComplete,\n  };\n  const elements = TegakiEngine.renderElements(engineOptions, reactCreateElement);\n\n  // Create engine on mount, adopting the pre-rendered elements\n  useEffect(() => {\n    const engine = new TegakiEngine(containerRef.current!, { adopt: true });\n    engineRef.current = engine;\n    return () => {\n      engine.destroy();\n      engineRef.current = null;\n    };\n  }, []);\n\n  // Update engine with current props every render\n  useEffect(() => {\n    engineRef.current?.update(engineOptions);\n  });\n\n  // Imperative handle\n  useImperativeHandle(\n    ref,\n    () => ({\n      get engine() {\n        return engineRef.current;\n      },\n      get element() {\n        return containerRef.current;\n      },\n    }),\n    [],\n  );\n\n  return (\n    <div ref={containerRef} {...divProps}>\n      {elements}\n    </div>\n  );\n}\n"],"mappings":";;;;AA6BA,SAAS,mBAAmB,KAAa,OAA4B,GAAG,UAA6C;AACnH,QAAO,cAAc,KAAK;EAAE,GAAG;EAAO,KAAK,MAAM;EAAgB,EAAE,GAAG,SAAS;;AAGjF,SAAgB,eAAyE,EACvF,KACA,MACA,MACA,UACA,MAAM,UACN,YACA,SACA,aACA,QACA,aACA,GAAG,YACsB;CACzB,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,YAAY,OAA4B,KAAK;CAInD,MAAM,gBAAqC;EACzC,MAJmB,QAAQ,eAAe,SAAS;EAKnD;EACA,MAAM;EACG;EACT;EACA;EACA;EACA;EACD;CACD,MAAM,WAAW,aAAa,eAAe,eAAe,mBAAmB;AAG/E,iBAAgB;EACd,MAAM,SAAS,IAAI,aAAa,aAAa,SAAU,EAAE,OAAO,MAAM,CAAC;AACvE,YAAU,UAAU;AACpB,eAAa;AACX,UAAO,SAAS;AAChB,aAAU,UAAU;;IAErB,EAAE,CAAC;AAGN,iBAAgB;AACd,YAAU,SAAS,OAAO,cAAc;GACxC;AAGF,qBACE,YACO;EACL,IAAI,SAAS;AACX,UAAO,UAAU;;EAEnB,IAAI,UAAU;AACZ,UAAO,aAAa;;EAEvB,GACD,EAAE,CACH;AAED,QACE,oBAAC,OAAD;EAAK,KAAK;EAAc,GAAI;YACzB;EACG,CAAA"}

package/dist/solid/index.d.mts

@@ -0,0 +1,19 @@
+import { A as TegakiSingletonEffectName, C as Stroke, D as TegakiEffects, E as TegakiEffectName, O as TegakiGlyphData, S as Point, T as TegakiEffectConfigs, _ as CSSLength, a as TimeControlProp, b as LineCap, c as TimelineEntry, d as computeTextLayout, f as ensureFontFace, g as BBox, h as resolveEffects, i as TimeControlMode, j as TimedPoint, k as TegakiMultiEffectName, l as computeTimeline, m as ResolvedEffect, n as TegakiEngine, o as Timeline, p as drawGlyph, r as TegakiEngineOptions, s as TimelineConfig, t as CreateElementFn, u as TextLayout, v as FontOutput, w as TegakiBundle, x as PathCommand, y as GlyphData } from "../index-Bzxy01Zq.mjs";
+import { JSX } from "solid-js";
+
+//#region src/solid/TegakiRenderer.d.ts
+interface TegakiRendererProps extends Omit<TegakiEngineOptions, 'effects'> {
+  /** Visual effects applied during canvas rendering. */
+  effects?: TegakiEffects<Record<string, any>>;
+  class?: string;
+  ref?: (handle: TegakiRendererHandle) => void;
+  [key: string]: any;
+}
+interface TegakiRendererHandle {
+  readonly engine: TegakiEngine | null;
+  readonly element: HTMLDivElement | null;
+}
+declare function TegakiRenderer(props: TegakiRendererProps): JSX.Element;
+//#endregion
+export { BBox, CSSLength, CreateElementFn, FontOutput, GlyphData, LineCap, PathCommand, Point, ResolvedEffect, Stroke, TegakiBundle, TegakiEffectConfigs, TegakiEffectName, TegakiEffects, TegakiEngine, TegakiEngineOptions, TegakiGlyphData, TegakiMultiEffectName, TegakiRenderer, type TegakiRendererHandle, type TegakiRendererProps, TegakiSingletonEffectName, TextLayout, TimeControlMode, TimeControlProp, TimedPoint, Timeline, TimelineConfig, TimelineEntry, computeTextLayout, computeTimeline, drawGlyph, ensureFontFace, resolveEffects };
+//# sourceMappingURL=index.d.mts.map

package/dist/solid/index.mjs

@@ -0,0 +1,77 @@
+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 { createEffect, createMemo, on, onCleanup, onMount, splitProps } from "solid-js";
+import { jsx } from "solid-js/jsx-runtime";
+//#region src/solid/TegakiRenderer.tsx
+/** @jsxImportSource solid-js */
+function solidCreateElement(tag, props, ...children) {
+	const parts = [];
+	for (const [key, value] of Object.entries(props)) {
+		if (value == null || value === false) continue;
+		if (key === "style" && typeof value === "object") {
+			const css = Object.entries(value).filter(([, v]) => v != null).map(([k, v]) => {
+				return `${k.startsWith("--") ? k : k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${typeof v === "number" && !k.startsWith("--") ? `${v}px` : String(v)}`;
+			}).join(";");
+			if (css) parts.push(`style="${escapeAttr(css)}"`);
+		} else if (typeof value === "boolean") parts.push(key);
+		else parts.push(`${key}="${escapeAttr(String(value))}"`);
+	}
+	return `${parts.length > 0 ? `<${tag} ${parts.join(" ")}>` : `<${tag}>`}${children.map((c) => typeof c === "string" && !c.startsWith("<") ? escapeHtml(c) : c).join("")}</${tag}>`;
+}
+function escapeAttr(s) {
+	return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeHtml(s) {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function TegakiRenderer(props) {
+	const [local, divProps] = splitProps(props, [
+		"text",
+		"font",
+		"time",
+		"onComplete",
+		"effects",
+		"segmentSize",
+		"timing",
+		"showOverlay",
+		"ref"
+	]);
+	let container;
+	let engine = null;
+	const engineOptions = createMemo(() => ({
+		text: local.text,
+		font: local.font,
+		time: local.time,
+		effects: local.effects,
+		segmentSize: local.segmentSize,
+		timing: local.timing,
+		showOverlay: local.showOverlay,
+		onComplete: local.onComplete
+	}));
+	const innerHTML = TegakiEngine.renderElements(engineOptions(), solidCreateElement);
+	onMount(() => {
+		engine = new TegakiEngine(container, {
+			...engineOptions(),
+			adopt: true
+		});
+		local.ref?.({
+			engine,
+			element: container
+		});
+	});
+	onCleanup(() => {
+		engine?.destroy();
+		engine = null;
+	});
+	createEffect(on(engineOptions, (options) => {
+		engine?.update(options);
+	}));
+	return /* @__PURE__ */ jsx("div", {
+		ref: container,
+		...divProps,
+		innerHTML
+	});
+}
+//#endregion
+export { TegakiEngine, TegakiRenderer, computeTextLayout, computeTimeline, drawGlyph, ensureFontFace, resolveEffects };
+
+//# sourceMappingURL=index.mjs.map

package/dist/solid/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/solid/TegakiRenderer.tsx"],"sourcesContent":["/** @jsxImportSource solid-js */\nimport { createEffect, createMemo, type JSX, on, onCleanup, onMount, splitProps } from 'solid-js';\nimport { TegakiEngine, type TegakiEngineOptions } from '../core/engine.ts';\nimport type { TegakiEffects } from '../types.ts';\n\nexport interface TegakiRendererProps extends Omit<TegakiEngineOptions, 'effects'> {\n  /** Visual effects applied during canvas rendering. */\n  effects?: TegakiEffects<Record<string, any>>;\n  class?: string;\n  ref?: (handle: TegakiRendererHandle) => void;\n  [key: string]: any;\n}\n\nexport interface TegakiRendererHandle {\n  readonly engine: TegakiEngine | null;\n  readonly element: HTMLDivElement | null;\n}\n\nfunction solidCreateElement(tag: string, props: Record<string, any>, ...children: (JSX.Element | string)[]): JSX.Element {\n  const parts: string[] = [];\n  for (const [key, value] of Object.entries(props)) {\n    if (value == null || value === false) continue;\n    if (key === 'style' && typeof value === 'object') {\n      const css = Object.entries(value)\n        .filter(([, v]) => v != null)\n        .map(([k, v]) => {\n          const prop = k.startsWith('--') ? k : k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);\n          const val = typeof v === 'number' && !k.startsWith('--') ? `${v}px` : String(v);\n          return `${prop}:${val}`;\n        })\n        .join(';');\n      if (css) parts.push(`style=\"${escapeAttr(css)}\"`);\n    } else if (typeof value === 'boolean') {\n      parts.push(key);\n    } else {\n      parts.push(`${key}=\"${escapeAttr(String(value))}\"`);\n    }\n  }\n  const open = parts.length > 0 ? `<${tag} ${parts.join(' ')}>` : `<${tag}>`;\n  const content = children.map((c) => (typeof c === 'string' && !c.startsWith('<') ? escapeHtml(c) : (c as string))).join('');\n  return `${open}${content}</${tag}>` as unknown as JSX.Element;\n}\n\nfunction escapeAttr(s: string): string {\n  return s.replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n}\n\nfunction escapeHtml(s: string): string {\n  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n}\n\nexport function TegakiRenderer(props: TegakiRendererProps) {\n  const [local, divProps] = splitProps(props, [\n    'text',\n    'font',\n    'time',\n    'onComplete',\n    'effects',\n    'segmentSize',\n    'timing',\n    'showOverlay',\n    'ref',\n  ]);\n\n  let container!: HTMLDivElement;\n  let engine: TegakiEngine | null = null;\n\n  const engineOptions = createMemo<TegakiEngineOptions>(() => ({\n    text: local.text,\n    font: local.font,\n    time: local.time,\n    effects: local.effects as Record<string, any>,\n    segmentSize: local.segmentSize,\n    timing: local.timing,\n    showOverlay: local.showOverlay,\n    onComplete: local.onComplete,\n  }));\n\n  // Compute initial HTML once — after the engine adopts, all updates go through engine.update().\n  const innerHTML = TegakiEngine.renderElements(engineOptions(), solidCreateElement) as unknown as string;\n\n  onMount(() => {\n    engine = new TegakiEngine(container, { ...engineOptions(), adopt: true });\n    local.ref?.({ engine, element: container });\n  });\n\n  onCleanup(() => {\n    engine?.destroy();\n    engine = null;\n  });\n\n  createEffect(\n    on(engineOptions, (options) => {\n      engine?.update(options);\n    }),\n  );\n\n  return <div ref={container!} {...divProps} innerHTML={innerHTML} />;\n}\n"],"mappings":";;;;;AAkBA,SAAS,mBAAmB,KAAa,OAA4B,GAAG,UAAiD;CACvH,MAAM,QAAkB,EAAE;AAC1B,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAAE;AAChD,MAAI,SAAS,QAAQ,UAAU,MAAO;AACtC,MAAI,QAAQ,WAAW,OAAO,UAAU,UAAU;GAChD,MAAM,MAAM,OAAO,QAAQ,MAAM,CAC9B,QAAQ,GAAG,OAAO,KAAK,KAAK,CAC5B,KAAK,CAAC,GAAG,OAAO;AAGf,WAAO,GAFM,EAAE,WAAW,KAAK,GAAG,IAAI,EAAE,QAAQ,WAAW,MAAM,IAAI,EAAE,aAAa,GAAG,CAExE,GADH,OAAO,MAAM,YAAY,CAAC,EAAE,WAAW,KAAK,GAAG,GAAG,EAAE,MAAM,OAAO,EAAE;KAE/E,CACD,KAAK,IAAI;AACZ,OAAI,IAAK,OAAM,KAAK,UAAU,WAAW,IAAI,CAAC,GAAG;aACxC,OAAO,UAAU,UAC1B,OAAM,KAAK,IAAI;MAEf,OAAM,KAAK,GAAG,IAAI,IAAI,WAAW,OAAO,MAAM,CAAC,CAAC,GAAG;;AAKvD,QAAO,GAFM,MAAM,SAAS,IAAI,IAAI,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,KACxD,SAAS,KAAK,MAAO,OAAO,MAAM,YAAY,CAAC,EAAE,WAAW,IAAI,GAAG,WAAW,EAAE,GAAI,EAAc,CAAC,KAAK,GAAG,CAClG,IAAI,IAAI;;AAGnC,SAAS,WAAW,GAAmB;AACrC,QAAO,EAAE,QAAQ,MAAM,QAAQ,CAAC,QAAQ,MAAM,SAAS,CAAC,QAAQ,MAAM,OAAO,CAAC,QAAQ,MAAM,OAAO;;AAGrG,SAAS,WAAW,GAAmB;AACrC,QAAO,EAAE,QAAQ,MAAM,QAAQ,CAAC,QAAQ,MAAM,OAAO,CAAC,QAAQ,MAAM,OAAO;;AAG7E,SAAgB,eAAe,OAA4B;CACzD,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,IAAI;CACJ,IAAI,SAA8B;CAElC,MAAM,gBAAgB,kBAAuC;EAC3D,MAAM,MAAM;EACZ,MAAM,MAAM;EACZ,MAAM,MAAM;EACZ,SAAS,MAAM;EACf,aAAa,MAAM;EACnB,QAAQ,MAAM;EACd,aAAa,MAAM;EACnB,YAAY,MAAM;EACnB,EAAE;CAGH,MAAM,YAAY,aAAa,eAAe,eAAe,EAAE,mBAAmB;AAElF,eAAc;AACZ,WAAS,IAAI,aAAa,WAAW;GAAE,GAAG,eAAe;GAAE,OAAO;GAAM,CAAC;AACzE,QAAM,MAAM;GAAE;GAAQ,SAAS;GAAW,CAAC;GAC3C;AAEF,iBAAgB;AACd,UAAQ,SAAS;AACjB,WAAS;GACT;AAEF,cACE,GAAG,gBAAgB,YAAY;AAC7B,UAAQ,OAAO,QAAQ;GACvB,CACH;AAED,QAAO,oBAAC,OAAD;EAAK,KAAK;EAAY,GAAI;EAAqB;EAAa,CAAA"}

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "tegaki",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
-  "description": "React component for rendering animated handwriting from any font",
+  "description": "Framework-agnostic animated handwriting renderer with React, Svelte, Vue, SolidJS, and Astro adapters",
   "keywords": [
     "handwriting",
     "animation",
     "svg",
     "react",
+    "svelte",
+    "vue",
+    "solid",
+    "astro",
     "font",
     "calligraphy",
     "stroke-order",
@@ -36,6 +40,36 @@
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
     },
+    "./core": {
+      "tegaki@dev": "./src/core/index.ts",
+      "source": "./src/core/index.ts",
+      "types": "./dist/core/index.d.mts",
+      "import": "./dist/core/index.mjs"
+    },
+    "./react": {
+      "tegaki@dev": "./src/react/index.ts",
+      "source": "./src/react/index.ts",
+      "types": "./dist/react/index.d.mts",
+      "import": "./dist/react/index.mjs"
+    },
+    "./svelte": {
+      "tegaki@dev": "./src/svelte/index.ts",
+      "source": "./src/svelte/index.ts",
+      "svelte": "./src/svelte/index.ts",
+      "default": "./src/svelte/index.ts"
+    },
+    "./vue": {
+      "tegaki@dev": "./src/vue/index.ts",
+      "source": "./src/vue/index.ts",
+      "default": "./src/vue/index.ts"
+    },
+    "./solid": {
+      "tegaki@dev": "./src/solid/index.ts",
+      "source": "./src/solid/index.ts",
+      "types": "./dist/solid/index.d.mts",
+      "import": "./dist/solid/index.mjs"
+    },
+    "./astro": "./src/astro/TegakiRenderer.astro",
     "./fonts/caveat": "./fonts/caveat/bundle.ts",
     "./fonts/italianno": "./fonts/italianno/bundle.ts",
     "./fonts/tangerine": "./fonts/tangerine/bundle.ts",
@@ -52,7 +86,7 @@
   ],
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "tsdown src/index.ts --dts --sourcemap",
+    "build": "tsdown src/index.ts src/core/index.ts src/react/index.ts src/solid/index.ts --dts --sourcemap",
     "prepack": "bun run build && bun ../../scripts/prepareForRelease.ts",
     "generate-fonts": "bun --filter tegaki-generator start generate Caveat --output ../renderer/fonts/caveat && bun --filter tegaki-generator start generate Italianno --output ../renderer/fonts/italianno && bun --filter tegaki-generator start generate Tangerine --output ../renderer/fonts/tangerine && bun --filter tegaki-generator start generate Parisienne --output ../renderer/fonts/parisienne"
   },
@@ -60,7 +94,24 @@
     "@chenglou/pretext": "^0.0.4"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "svelte": ">=5",
+    "vue": ">=3",
+    "solid-js": ">=1"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/astro/TegakiRenderer.astro

@@ -0,0 +1,126 @@
+---
+import { TegakiEngine, type TegakiEngineOptions } from '../core/index.ts';
+import type { TegakiBundle } from '../types.ts';
+
+interface Props extends Omit<TegakiEngineOptions, 'onComplete'> {
+  /** When true, registers the font bundle for client-side lookup by name. If no text is provided, renders nothing else. */
+  bundle?: boolean;
+  /** When true, injects an @font-face rule so the browser starts loading the font immediately. */
+  loadFont?: boolean;
+  class?: string;
+  [key: string]: any;
+}
+
+const { text, font, bundle: registerBundle, loadFont, time, effects, timing, segmentSize, showOverlay, class: className, ...attrs } = Astro.props;
+
+// Resolve the font bundle for SSR
+let resolvedFont: TegakiBundle | undefined;
+if (typeof font === 'string') {
+  resolvedFont = TegakiEngine.getBundle(font);
+} else if (font) {
+  resolvedFont = font;
+  TegakiEngine.registerBundle(font);
+}
+
+const shouldRender = !!text || !(registerBundle || loadFont);
+
+const engineOptions: Omit<TegakiEngineOptions, 'onComplete'> = {
+  text,
+  font: resolvedFont,
+  time,
+  effects: effects as Record<string, any>,
+  timing,
+  segmentSize,
+  showOverlay,
+};
+
+function styleToString(style: Record<string, any>): string {
+  return Object.entries(style)
+    .filter(([, v]) => v != null)
+    .map(([k, v]) => {
+      const prop = k.startsWith('--') ? k : k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+      const val = typeof v === 'number' && !k.startsWith('--') ? `${v}px` : String(v);
+      return `${prop}:${val}`;
+    })
+    .join(';');
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function htmlCreateElement(tag: string, props: Record<string, any>, ...children: string[]): string {
+  const parts: string[] = [];
+  for (const [key, value] of Object.entries(props)) {
+    if (value == null || value === false) continue;
+    if (key === 'style' && typeof value === 'object') {
+      const css = styleToString(value);
+      if (css) parts.push(`style="${escapeAttr(css)}"`);
+    } else if (typeof value === 'boolean') {
+      parts.push(key);
+    } else {
+      parts.push(`${key}="${escapeAttr(String(value))}"`);
+    }
+  }
+  const open = parts.length > 0 ? `<${tag} ${parts.join(' ')}>` : `<${tag}>`;
+  const content = children.map((c) => (typeof c === 'string' && !c.startsWith('<') ? escapeHtml(c) : c)).join('');
+  return `${open}${content}</${tag}>`;
+}
+
+const innerHtml = shouldRender ? TegakiEngine.renderElements(engineOptions, htmlCreateElement) : '';
+
+// For serialization, replace the full bundle with just the family name.
+const clientOptions = {
+  ...engineOptions,
+  font: resolvedFont?.family,
+};
+---
+
+{loadFont && resolvedFont?.fontFaceCSS && (
+  <style is:inline set:html={resolvedFont.fontFaceCSS} />
+)}
+
+{registerBundle && resolvedFont && (
+  <script is:inline type="application/json" data-tegaki-bundle set:html={JSON.stringify(resolvedFont)} />
+)}
+
+{shouldRender && (
+  <div class={className} {...attrs} data-tegaki-options={JSON.stringify(clientOptions)} set:html={innerHtml} />
+)}
+
+<script>
+  import { TegakiEngine } from 'tegaki/core';
+
+  function hydrateBundle(el: Element) {
+    TegakiEngine.registerBundle(JSON.parse(el.textContent || '{}'));
+  }
+
+  function hydrateContainer(container: HTMLElement) {
+    if (container.dataset.tegakiHydrated) return;
+    container.dataset.tegakiHydrated = '';
+    const options = JSON.parse(container.dataset.tegakiOptions || '{}');
+    const engine = new TegakiEngine(container, { adopt: true, ...options });
+    container.dispatchEvent(new CustomEvent('tegaki:ready', { detail: { engine }, bubbles: true }));
+  }
+
+  // Hydrate existing elements
+  document.querySelectorAll<HTMLScriptElement>('[data-tegaki-bundle]').forEach(hydrateBundle);
+  document.querySelectorAll<HTMLElement>('[data-tegaki-options]').forEach(hydrateContainer);
+
+  // Watch for dynamically added elements (View Transitions, client-side routing, etc.)
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (!(node instanceof HTMLElement)) continue;
+        if (node.matches('[data-tegaki-bundle]')) hydrateBundle(node);
+        if (node.matches('[data-tegaki-options]')) hydrateContainer(node);
+        node.querySelectorAll<HTMLScriptElement>('[data-tegaki-bundle]').forEach(hydrateBundle);
+        node.querySelectorAll<HTMLElement>('[data-tegaki-options]').forEach(hydrateContainer);
+      }
+    }
+  }).observe(document.body, { childList: true, subtree: true });
+</script>