tegaki 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # tegaki
 
+## 0.7.0
+
+### Minor Changes
+
+- [`be540e1`](https://github.com/KurtGokhan/tegaki/commit/be540e13d47804b2068ee111f0297ef4809d6550) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Remove extra wrapper div from TegakiRenderer DOM output. The engine now uses the adapter's container element directly as its root (`data-tegaki="root"`), eliminating a redundant nested div. This fixes CSS-controlled animations where styles applied to the `<TegakiRenderer>` component (like `animation-timeline`) weren't reaching the engine's root element. `renderElements` now returns `{ rootProps, content }` instead of a single element tree.
+
+## 0.6.0
+
+### Minor Changes
+
+- [`9288227`](https://github.com/KurtGokhan/tegaki/commit/9288227945a7623158990744809dc7d711536a7a) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Tegaki is framework agnostic now
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -1,58 +1,30 @@
-<p align="center">
-  <img src="media/tegaki-card.png" alt="Tegaki" width="640" />
-</p>
+# Tegaki
 
-<h3 align="center">Handwriting animation for any font</h3>
+**Handwriting animation for any font**
 
-<p align="center">
-  Tegaki (手書き) generates stroke data from fonts and renders animated handwriting in React.<br />
-  No manual path authoring. No native dependencies. Just pick a font.
-</p>
+Tegaki (手書き) turns any Google Font into animated handwriting.
+No manual path authoring. No native dependencies. Just pick a font.
+
+[![npm](https://img.shields.io/npm/v/tegaki)](https://www.npmjs.com/package/tegaki)
+[![license](https://img.shields.io/npm/l/tegaki)](https://github.com/KurtGokhan/tegaki/blob/main/LICENSE)
+
+<br clear="both" />
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/tegaki"><img src="https://img.shields.io/npm/v/tegaki" alt="npm" /></a>
-  <a href="https://github.com/KurtGokhan/tegaki/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tegaki" alt="license" /></a>
+  <img src="media/hello-world.svg" alt="Hello World handwriting animation" width="500" />
 </p>
 
 ---
 
-## How it works
-
-**1. Generate** a font bundle from any Google Font using the [Tegaki website](https://tegaki.js.org/generator/):
-
-Each glyph is run through a processing pipeline — flatten bezier curves, rasterize, skeletonize via Zhang-Suen thinning, trace polylines, compute stroke widths via distance transform, determine stroke order — and the result is a set of animated SVGs with timing data.
-
-**2. Render** the animated text in React:
+## Quick Start
 
-```tsx
-import { TegakiRenderer } from 'tegaki';
-import font from './output/caveat/bundle.ts';
-
-function App() {
-  return (
-    <TegakiRenderer font={font} style={{ fontSize: '48px' }}>
-      Hello World
-    </TegakiRenderer>
-  );
-}
-```
-
-The text draws itself stroke by stroke, with accurate widths and natural timing.
-
-## Install
+**1. Install**
 
 ```bash
 npm install tegaki
 ```
 
-## Built-in fonts
-
-Tegaki ships with pre-generated bundles for four Google Fonts, ready to use without running the generator:
-
-- **Caveat** — `tegaki/fonts/caveat`
-- **Italianno** — `tegaki/fonts/italianno`
-- **Tangerine** — `tegaki/fonts/tangerine`
-- **Parisienne** — `tegaki/fonts/parisienne`
+**2. Use** (React example)
 
 ```tsx
 import { TegakiRenderer } from 'tegaki';
@@ -67,151 +39,48 @@ function App() {
 }
 ```
 
-These bundles include all printable ASCII characters (letters, digits, punctuation). For other fonts, use the [generator on the Tegaki website](https://tegaki.js.org/generator/).
-
-All bundled fonts are licensed under the [SIL Open Font License](https://openfontlicense.org/). See [FONTS-LICENSE.md](packages/renderer/FONTS-LICENSE.md) for full attribution.
-
-## `<TegakiRenderer>` props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `font` | `TegakiBundle` | — | Font bundle with animated glyph SVGs |
-| `text` | `string` | — | Text to animate (or pass as `children`) |
-| `children` | `string \| number` | — | Text content, coerced to string |
-| `time` | `TimeControlProp` | — | Time control mode (see below) |
-| `onComplete` | `() => void` | — | Called when animation reaches the end |
-| `mode` | `'svg' \| 'canvas'` | `'svg'` | Rendering mode |
-| `showOverlay` | `boolean` | `false` | Show debug text overlay |
-
-Plus all standard `<div>` props (`className`, `style`, etc.).
-
-### Time control modes
-
-The `time` prop accepts three modes via a discriminated union:
-
-| Value | Mode | Description |
-|-------|------|-------------|
-| *omitted* | Uncontrolled | Auto-plays with default settings |
-| `number` | Controlled | Shorthand for `{ mode: 'controlled', value: n }` |
-| `'css'` | CSS | Shorthand for `{ mode: 'css' }` |
-| `{ mode: 'controlled', value }` | Controlled | You drive the time directly |
-| `{ mode: 'uncontrolled', ... }` | Uncontrolled | Component manages playback |
-| `{ mode: 'css' }` | CSS | Driven by `--tegaki-progress` CSS property |
-
-#### Uncontrolled
-
-The component manages its own playback — auto-plays on mount, responds to `speed`, `playing`, and `loop`.
-
-```tsx
-// Default: auto-play at 1x
-<TegakiRenderer font={font}>Hello</TegakiRenderer>
-
-// With options
-<TegakiRenderer font={font} time={{ mode: 'uncontrolled', speed: 2, loop: true }}>
-  Hello
-</TegakiRenderer>
-```
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `initialTime` | `number` | `0` | Starting time in seconds |
-| `speed` | `number` | `1` | Playback speed multiplier |
-| `playing` | `boolean` | `true` | Whether animation is playing |
-| `loop` | `boolean` | `false` | Restart when animation ends |
-| `onTimeChange` | `(time: number) => void` | — | Called each frame with current time |
-
-#### Controlled
-
-You provide the exact time. Useful for syncing with a slider, streaming text, or external state.
-
-```tsx
-<TegakiRenderer font={font} time={currentTime}>Hello</TegakiRenderer>
-```
+That's it. The text draws itself stroke by stroke with natural timing.
 
-#### CSS
+## Framework Support
 
-Animation progress is driven by the `--tegaki-progress` CSS custom property (0–1). This enables pure-CSS control via animations, transitions, or scroll-timeline — no JS bridge needed.
+Tegaki works with all major frameworks:
 
 ```tsx
-<TegakiRenderer font={font} time="css" style={...}>Hello</TegakiRenderer>
+import { TegakiRenderer } from 'tegaki/react';   // React
+import { TegakiRenderer } from 'tegaki/svelte';  // Svelte
+import { TegakiRenderer } from 'tegaki/vue';     // Vue
+import { TegakiRenderer } from 'tegaki/solid';   // SolidJS
 ```
 
-```css
-/* Example: scroll-driven animation */
-.scroll-container {
-  overflow-x: scroll;
-  scroll-timeline: --tegaki inline;
-}
-
-.tegaki-wrapper {
-  animation: tegaki-reveal linear both;
-  animation-timeline: --tegaki;
-}
-
-@keyframes tegaki-reveal {
-  from { --tegaki-progress: 0; }
-  to   { --tegaki-progress: 1; }
-}
+```astro
+---
+import TegakiRenderer from 'tegaki/astro';       // Astro
+---
 ```
 
-### CSS custom properties
-
-The component exposes these CSS custom properties on its root element in all modes:
-
-| Property | Direction | Description |
-|----------|-----------|-------------|
-| `--tegaki-duration` | Output | Total animation length in seconds |
-| `--tegaki-time` | Output | Current time in seconds |
-| `--tegaki-progress` | Input (CSS mode) / Output | Current progress (0–1) |
-
-All three are registered via `CSS.registerProperty` as `<number>` with `inherits: true`, making them animatable and transitionable.
-
-### `computeTimeline(text, font)`
-
-Returns timing info for a string without rendering anything:
-
 ```ts
-import { computeTimeline } from 'tegaki';
-
-const { entries, totalDuration } = computeTimeline('Hello', font);
-// totalDuration: 2.45 (seconds)
-// entries: [{ char: 'H', offset: 0, duration: 0.52, hasSvg: true }, ...]
+import { TegakiEngine } from 'tegaki/core';      // Vanilla JS
 ```
 
-## Generating font bundles
-
-Use the [interactive generator on the Tegaki website](https://tegaki.js.org/generator/) to create font bundles from any Google Font. The generator lets you customize options like resolution, character set, and skeletonization algorithm, then download the output bundle to use in your app.
-
-## Pipeline
+## Built-in Fonts
 
-The entire processing pipeline is pure TypeScript — no canvas, no native image libraries, no Python. It runs identically in Node/Bun and in the browser.
+Four handwriting fonts are bundled and ready to use:
 
-```
-Font file
-  → Flatten bezier curves to polylines
-  → Rasterize to binary bitmap (scanline fill, nonzero winding)
-  → Skeletonize to 1px-wide skeleton (Zhang-Suen thinning)
-  → Trace skeleton into polylines (spur pruning + RDP simplification)
-  → Compute stroke width at each point (distance transform)
-  → Order strokes top-to-bottom, left-to-right
-  → Generate animated SVG with per-stroke timing
-```
+- **Caveat** — `tegaki/fonts/caveat`
+- **Italianno** — `tegaki/fonts/italianno`
+- **Tangerine** — `tegaki/fonts/tangerine`
+- **Parisienne** — `tegaki/fonts/parisienne`
 
-## Packages
+For other Google Fonts, use the [interactive generator](https://gkurt.com/tegaki/generator/) to create a custom bundle.
 
-| Package | npm | Description |
-|---------|-----|-------------|
-| [`tegaki`](packages/renderer) | [![npm](https://img.shields.io/npm/v/tegaki)](https://www.npmjs.com/package/tegaki) | React component for animated handwriting |
-| [`@tegaki/website`](packages/website) | — | Website with interactive generator and preview |
+## Documentation
 
-## Contributing
+Visit **[gkurt.com/tegaki](https://gkurt.com/tegaki)** for full documentation:
 
-```bash
-bun install          # Install dependencies
-bun dev              # Start dev server (website)
-bun start            # Run the CLI (generator)
-bun checks           # Lint + typecheck + tests
-```
+- [Getting Started](https://gkurt.com/tegaki/getting-started/)
+- [Framework Guides](https://gkurt.com/tegaki/frameworks/react/) (React, Svelte, Vue, SolidJS, Astro, Vanilla)
+- [Generating Fonts](https://gkurt.com/tegaki/guides/generating-fonts/)
+- [API Reference](https://gkurt.com/tegaki/api/tegaki-renderer/)
 
 ## License
 

package/dist/core/index.d.mts

@@ -0,0 +1,2 @@
+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-YdGpXlqf.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, drawGlyph, ensureFontFace, resolveEffects };

package/dist/core/index.mjs

@@ -0,0 +1,2 @@
+import { a as drawGlyph, i as ensureFontFace, n as computeTimeline, r as computeTextLayout, s as resolveEffects, t as TegakiEngine } from "../core-Cw5jNWFa.mjs";
+export { TegakiEngine, computeTextLayout, computeTimeline, drawGlyph, ensureFontFace, resolveEffects };