tegaki 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # tegaki
 
+## 0.3.0
+
+### Minor Changes
+
+- [`2295113`](https://github.com/KurtGokhan/tegaki/commit/2295113f02a0d67c398258846ba5576a5c162d96) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - - Reduced font bundle data size
+  - Fix rerendering when color changes
+  - Fix padding and border issue in renderer
+
+## 0.2.3
+
+### Patch Changes
+
+- [`d171776`](https://github.com/KurtGokhan/tegaki/commit/d171776e48eae2063246209e8b56bf9e9185f4c7) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Fix layout issues when font is being loaded. Fix layout being calculated with ligatures.
+
 ## 0.2.2
 
 ### Patch Changes

package/README.md

@@ -18,11 +18,7 @@
 
 ## How it works
 
-**1. Generate** a font bundle from any Google Font (or a local `.ttf`):
-
-```bash
-npx tegaki-generator generate "Caveat"
-```
+**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.
 
@@ -51,12 +47,6 @@ The text draws itself stroke by stroke, with accurate widths and natural timing.
 npm install tegaki
 ```
 
-The generator is a separate package, only needed at build time:
-
-```bash
-npm install -D tegaki-generator
-```
-
 ## Built-in fonts
 
 Tegaki ships with pre-generated bundles for four Google Fonts, ready to use without running the generator:
@@ -81,7 +71,7 @@ function App() {
 }
 ```
 
-These bundles include all printable ASCII characters (letters, digits, punctuation). For other fonts, use the generator.
+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.
 
@@ -194,35 +184,7 @@ const { entries, totalDuration } = computeTimeline('Hello', font);
 
 ## Generating font bundles
 
-```bash
-npx tegaki-generator generate [family] [options]
-```
-
-| Option | Description | Default |
-|--------|-------------|---------|
-| `family` | Google Fonts family name | `Caveat` |
-| `-o, --output` | Output directory | `output/<family>` |
-| `-r, --resolution` | Bitmap resolution for skeletonization | `400` |
-| `-c, --chars` | Characters to process | printable ASCII |
-| `-f, --force` | Re-download cached font | `false` |
-| `-d, --debug` | Write intermediate visualizations | `false` |
-| `-l, --lineCap` | Stroke cap style (`auto`/`round`/`butt`/`square`) | `auto` |
-| `--skeletonMethod` | Algorithm (`zhang-suen` / `guo-hall` / `lee` / `medial-axis` / `thin` / `voronoi`) | `zhang-suen` |
-
-Output structure:
-
-```
-output/caveat/
-  font.json        # Full glyph data (coordinates, strokes, timing)
-  caveat.ttf       # Original font file
-  bundle.ts        # Import this in your app
-  svg/
-    A.svg          # Animated SVG per glyph
-    A.tsx          # React component per glyph
-    ...
-```
-
-Import `bundle.ts` — it bundles all glyph components and font metadata into a `TegakiBundle`.
+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
 
@@ -244,8 +206,7 @@ Font file
 | 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-generator`](packages/generator) | [![npm](https://img.shields.io/npm/v/tegaki-generator)](https://www.npmjs.com/package/tegaki-generator) | CLI that generates font bundles |
-| [`@tegaki/website`](packages/website) | — | Interactive preview app |
+| [`@tegaki/website`](packages/website) | — | Website with interactive generator and preview |
 
 ## Contributing
 

package/dist/index.d.mts

@@ -1,5 +1,4 @@
-import * as _$react from "react";
-import { ComponentProps } from "react";
+import { ComponentProps, Ref } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/types.d.ts
@@ -56,17 +55,19 @@ interface PathCommand {
   x2?: number;
   y2?: number;
 }
+/**
+ * Compact glyph data for rendering.
+ * - `w`: advance width
+ * - `t`: total animation duration
+ * - `s`: strokes, each with `p` (points as `[x, y, width]` tuples), `d` (delay), `a` (animation duration)
+ */
 interface TegakiGlyphData {
-  advanceWidth: number;
-  strokes: {
-    points: {
-      x: number;
-      y: number;
-      t: number;
-      width: number;
-    }[];
-    delay: number;
-    animationDuration: number;
+  w: number;
+  t: number;
+  s: {
+    p: [x: number, y: number, width: number][];
+    d: number;
+    a: number;
   }[];
 }
 type BaseEffectConfig = {
@@ -120,9 +121,7 @@ interface TegakiBundle {
   unitsPerEm: number;
   ascender: number;
   descender: number;
-  glyphs: Record<string, _$react.FC<_$react.SVGProps<SVGSVGElement>>>;
-  glyphData?: Record<string, TegakiGlyphData>;
-  glyphTimings: Record<string, number>;
+  glyphData: Record<string, TegakiGlyphData>;
   registerFontFace: () => Promise<void>;
 }
 //#endregion
@@ -162,14 +161,14 @@ interface TimelineConfig {
   wordGap?: number;
   /** Pause after a newline / line break (seconds). Default: `0.3` */
   lineGap?: number;
-  /** Duration for characters without glyph SVGs (seconds). Default: `0.2` */
+  /** Duration for characters without glyph data (seconds). Default: `0.2` */
   unknownDuration?: number;
 }
 interface TimelineEntry {
   char: string;
   offset: number;
   duration: number;
-  hasSvg: boolean;
+  hasGlyph: boolean;
 }
 interface Timeline {
   entries: TimelineEntry[];
@@ -211,7 +210,30 @@ type TimeControlMode = {
  * Omit for uncontrolled mode with default settings.
  */
 type TimeControlProp = null | undefined | number | 'css' | TimeControlMode[keyof TimeControlMode];
-interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string, never>> extends Omit<ComponentProps<'div'>, 'children'> {
+/** Imperative handle exposed via the `ref` prop. */
+interface TegakiRendererHandle {
+  /** The root DOM element. */
+  getElement(): HTMLDivElement | null;
+  /** Current animation time in seconds. */
+  getCurrentTime(): number;
+  /** Total timeline duration in seconds. */
+  getDuration(): number;
+  /** Whether the animation is currently playing (uncontrolled mode only). */
+  getIsPlaying(): boolean;
+  /** Whether the animation has reached the end. */
+  getIsComplete(): boolean;
+  /** Resume playback (uncontrolled mode only). No-op in controlled/css mode. */
+  play(): void;
+  /** Pause playback (uncontrolled mode only). No-op in controlled/css mode. */
+  pause(): void;
+  /** Jump to a specific time in seconds (uncontrolled mode only). No-op in controlled/css mode. */
+  seek(time: number): void;
+  /** Seek to 0 and play (uncontrolled mode only). No-op in controlled/css mode. */
+  restart(): void;
+}
+interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string, never>> extends Omit<ComponentProps<'div'>, 'children' | 'ref'> {
+  /** Imperative handle ref for playback controls and DOM access. */
+  ref?: Ref<TegakiRendererHandle>;
   /** TegakiBundle with font data and animated glyph SVGs. */
   font?: TegakiBundle;
   /** Text to animate. Takes precedence over children. */
@@ -226,9 +248,6 @@ interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string, never>
   time?: TimeControlProp;
   /** Called once when the animation reaches the end of the timeline. */
   onComplete?: () => void;
-  /** Rendering mode. `'canvas'` draws strokes on a `<canvas>` (requires
-   * `font.glyphData`), `'svg'` uses animated SVG elements. Default: `'canvas'` */
-  mode?: 'canvas' | 'svg';
   /** Visual effects applied during canvas rendering. */
   effects?: E;
   /** Maximum segment size in pixels for effect subdivision. Lower values produce
@@ -240,12 +259,12 @@ interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string, never>
   showOverlay?: boolean;
 }
 declare function TegakiRenderer<const E extends TegakiEffects<E> = Record<string, never>>({
+  ref,
   font,
   text,
   children,
   time: timeProp,
   onComplete,
-  mode,
   effects,
   segmentSize,
   timing,
@@ -253,5 +272,5 @@ declare function TegakiRenderer<const E extends TegakiEffects<E> = Record<string
   ...props
 }: TegakiRendererProps<E>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { BBox, CSSLength, FontOutput, GlyphData, LineCap, PathCommand, Point, Stroke, TegakiBundle, type TegakiEffectConfigs, TegakiEffectName, type TegakiEffects, TegakiGlyphData, TegakiMultiEffectName, TegakiRenderer, type TegakiRendererProps, TegakiSingletonEffectName, type TimeControlMode, type TimeControlProp, TimedPoint, type Timeline, type TimelineConfig, computeTimeline, drawGlyph };
+export { BBox, CSSLength, FontOutput, GlyphData, LineCap, PathCommand, Point, Stroke, TegakiBundle, type TegakiEffectConfigs, TegakiEffectName, type TegakiEffects, TegakiGlyphData, TegakiMultiEffectName, TegakiRenderer, type TegakiRendererHandle, type TegakiRendererProps, TegakiSingletonEffectName, type TimeControlMode, type TimeControlProp, TimedPoint, type Timeline, type TimelineConfig, computeTimeline, drawGlyph };
 //# sourceMappingURL=index.d.mts.map