tegaki 0.5.0 → 0.6.0

package/src/core/index.ts

@@ -0,0 +1,14 @@
+export { drawGlyph } from '../lib/drawGlyph.ts';
+export { type ResolvedEffect, resolveEffects } from '../lib/effects.ts';
+export { ensureFontFace } from '../lib/font.ts';
+export { computeTextLayout, type TextLayout } from '../lib/textLayout.ts';
+export { computeTimeline, type Timeline, type TimelineConfig, type TimelineEntry } from '../lib/timeline.ts';
+export type * from '../types.ts';
+export type { TegakiEffectConfigs, TegakiEffects } from '../types.ts';
+export {
+  type CreateElementFn,
+  TegakiEngine,
+  type TegakiEngineOptions,
+  type TimeControlMode,
+  type TimeControlProp,
+} from './engine.ts';

package/src/env.d.ts

@@ -2,3 +2,15 @@ declare module '*.ttf' {
   const src: string;
   export default src;
 }
+
+declare module '*.svelte' {
+  import type { Component } from 'svelte';
+  const component: Component<any>;
+  export default component;
+}
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent;
+  export default component;
+}

package/src/index.ts

@@ -1,12 +1 @@
-export { drawGlyph } from './lib/drawGlyph.ts';
-export {
-  ensureFontFace,
-  TegakiRenderer,
-  type TegakiRendererHandle,
-  type TegakiRendererProps,
-  type TimeControlMode,
-  type TimeControlProp,
-} from './lib/TegakiRenderer.tsx';
-export { computeTimeline, type Timeline, type TimelineConfig } from './lib/timeline.ts';
-export type * from './types.ts';
-export type { TegakiEffectConfigs, TegakiEffects } from './types.ts';
+export * from './react/index.ts';

package/src/lib/css-properties.ts

@@ -0,0 +1,24 @@
+export const CSS_TIME = '--tegaki-time';
+export const CSS_PROGRESS = '--tegaki-progress';
+export const CSS_DURATION = '--tegaki-duration';
+
+export const PADDING_H_EM = 0.2;
+export const MIN_LINE_HEIGHT_EM = 1.8;
+export const MIN_PADDING_V_EM = 0.2;
+
+// Register custom properties so they are animatable (typed as <number>).
+// Deferred to first use to avoid running at import time during SSR.
+let cssPropertiesRegistered = false;
+export function registerCssProperties() {
+  if (cssPropertiesRegistered) return;
+  cssPropertiesRegistered = true;
+  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
+    for (const prop of [CSS_TIME, CSS_PROGRESS, CSS_DURATION]) {
+      try {
+        CSS.registerProperty({ name: prop, syntax: '<number>', inherits: true, initialValue: '0' });
+      } catch {
+        // Already registered — ignore.
+      }
+    }
+  }
+}

package/src/lib/font.ts

@@ -0,0 +1,29 @@
+import type { TegakiBundle } from '../types.ts';
+
+const fontFaceCache = new Map<string, Promise<void>>();
+
+/**
+ * Ensures the bundle's font face is loaded and available for rendering.
+ * Resolves immediately if the font is already loaded.
+ */
+export async function ensureFontFace(bundle: TegakiBundle): Promise<void> {
+  await ensureFont(bundle.family, bundle.fontUrl);
+}
+
+export function ensureFont(family: string, url: string): Promise<void> | null {
+  if (typeof document === 'undefined') return Promise.resolve();
+  for (const face of document.fonts) {
+    if (face.family === family) {
+      if (face.status === 'loaded') return null;
+      if (face.status === 'loading') return face.loaded.then(() => {});
+    }
+  }
+  let cached = fontFaceCache.get(url);
+  if (!cached) {
+    cached = new FontFace(family, `url(${url})`, { featureSettings: "'calt' 0, 'liga' 0" }).load().then((loaded) => {
+      document.fonts.add(loaded);
+    });
+    fontFaceCache.set(url, cached);
+  }
+  return cached;
+}

package/src/react/TegakiRenderer.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { type ComponentProps, createElement, type ReactNode, type Ref, useEffect, useImperativeHandle, useRef } from 'react';
+import { TegakiEngine, type TegakiEngineOptions } from '../core/engine.ts';
+import type { Coercible } from '../lib/utils.ts';
+import { coerceToString } from '../lib/utils.ts';
+import type { TegakiEffects } from '../types.ts';
+
+/** Imperative handle exposed via the `ref` prop. */
+export interface TegakiRendererHandle {
+  /** The underlying engine instance. `null` before mount and after unmount. */
+  readonly engine: TegakiEngine | null;
+  /** The container DOM element. */
+  readonly element: HTMLDivElement | null;
+}
+
+export interface TegakiRendererProps<E extends TegakiEffects<E> = Record<string, never>>
+  extends Omit<TegakiEngineOptions, 'effects'>,
+    Omit<ComponentProps<'div'>, 'children' | 'ref'> {
+  /** Imperative handle ref for playback controls and DOM access. */
+  ref?: Ref<TegakiRendererHandle>;
+
+  /** Children coerced to string. Strings and numbers are kept; everything else is ignored. */
+  children?: Coercible;
+
+  /** Visual effects applied during canvas rendering. */
+  effects?: E;
+}
+
+function reactCreateElement(tag: string, props: Record<string, any>, ...children: (ReactNode | string)[]): ReactNode {
+  return createElement(tag, { ...props, key: props['data-tegaki'] }, ...children);
+}
+
+export function TegakiRenderer<const E extends TegakiEffects<E> = Record<string, never>>({
+  ref,
+  font,
+  text,
+  children,
+  time: timeProp,
+  onComplete,
+  effects,
+  segmentSize,
+  timing,
+  showOverlay,
+  ...divProps
+}: TegakiRendererProps<E>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const engineRef = useRef<TegakiEngine | null>(null);
+  const resolvedText = text ?? coerceToString(children);
+
+  // Render the element tree via the engine's static method (SSR-safe)
+  const engineOptions: TegakiEngineOptions = {
+    text: resolvedText,
+    font,
+    time: timeProp,
+    effects: effects as Record<string, any>,
+    segmentSize,
+    timing,
+    showOverlay,
+    onComplete,
+  };
+  const elements = TegakiEngine.renderElements(engineOptions, reactCreateElement);
+
+  // Create engine on mount, adopting the pre-rendered elements
+  useEffect(() => {
+    const engine = new TegakiEngine(containerRef.current!, { adopt: true });
+    engineRef.current = engine;
+    return () => {
+      engine.destroy();
+      engineRef.current = null;
+    };
+  }, []);
+
+  // Update engine with current props every render
+  useEffect(() => {
+    engineRef.current?.update(engineOptions);
+  });
+
+  // Imperative handle
+  useImperativeHandle(
+    ref,
+    () => ({
+      get engine() {
+        return engineRef.current;
+      },
+      get element() {
+        return containerRef.current;
+      },
+    }),
+    [],
+  );
+
+  return (
+    <div ref={containerRef} {...divProps}>
+      {elements}
+    </div>
+  );
+}

package/src/react/index.ts

@@ -0,0 +1,2 @@
+export * from '../core/index.ts';
+export { TegakiRenderer, type TegakiRendererHandle, type TegakiRendererProps } from './TegakiRenderer.tsx';

package/src/solid/TegakiRenderer.tsx

@@ -0,0 +1,99 @@
+/** @jsxImportSource solid-js */
+import { createEffect, createMemo, type JSX, on, onCleanup, onMount, splitProps } from 'solid-js';
+import { TegakiEngine, type TegakiEngineOptions } from '../core/engine.ts';
+import type { TegakiEffects } from '../types.ts';
+
+export 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;
+}
+
+export interface TegakiRendererHandle {
+  readonly engine: TegakiEngine | null;
+  readonly element: HTMLDivElement | null;
+}
+
+function solidCreateElement(tag: string, props: Record<string, any>, ...children: (JSX.Element | string)[]): JSX.Element {
+  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 = Object.entries(value)
+        .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(';');
+      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 as string))).join('');
+  return `${open}${content}</${tag}>` as unknown as JSX.Element;
+}
+
+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;');
+}
+
+export function TegakiRenderer(props: TegakiRendererProps) {
+  const [local, divProps] = splitProps(props, [
+    'text',
+    'font',
+    'time',
+    'onComplete',
+    'effects',
+    'segmentSize',
+    'timing',
+    'showOverlay',
+    'ref',
+  ]);
+
+  let container!: HTMLDivElement;
+  let engine: TegakiEngine | null = null;
+
+  const engineOptions = createMemo<TegakiEngineOptions>(() => ({
+    text: local.text,
+    font: local.font,
+    time: local.time,
+    effects: local.effects as Record<string, any>,
+    segmentSize: local.segmentSize,
+    timing: local.timing,
+    showOverlay: local.showOverlay,
+    onComplete: local.onComplete,
+  }));
+
+  // Compute initial HTML once — after the engine adopts, all updates go through engine.update().
+  const innerHTML = TegakiEngine.renderElements(engineOptions(), solidCreateElement) as unknown as string;
+
+  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 <div ref={container!} {...divProps} innerHTML={innerHTML} />;
+}

package/src/solid/index.ts

@@ -0,0 +1,2 @@
+export * from '../core/index.ts';
+export { TegakiRenderer, type TegakiRendererHandle, type TegakiRendererProps } from './TegakiRenderer.tsx';

package/src/svelte/TegakiRenderer.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import { TegakiEngine, type TegakiEngineOptions } from '../core/engine.ts';
+import type { TegakiEffects } from '../types.ts';
+
+interface Props extends Omit<TegakiEngineOptions, 'effects'> {
+  /** Visual effects applied during canvas rendering. */
+  effects?: TegakiEffects<Record<string, any>>;
+  class?: string;
+  [key: string]: any;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: attrs is used in Svelte template
+let { text, font, time: timeProp, onComplete, effects, segmentSize, timing, showOverlay, class: className, ...attrs }: Props = $props();
+
+let container = $state<HTMLDivElement | undefined>();
+let engine = $state<TegakiEngine | null>(null);
+
+const engineOptions: TegakiEngineOptions = $derived({
+  text,
+  font,
+  time: timeProp,
+  effects: effects as Record<string, any>,
+  segmentSize,
+  timing,
+  showOverlay,
+  onComplete,
+});
+
+function svelteCreateElement(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 = Object.entries(value)
+        .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(';');
+      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}>`;
+}
+
+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;');
+}
+
+// Compute initial HTML once — after the engine adopts, all updates go through engine.update().
+// biome-ignore lint/correctness/noUnusedVariables: used in Svelte template
+const innerHtml: string = TegakiEngine.renderElements(
+  { text, font, time: timeProp, effects: effects as Record<string, any>, segmentSize, timing, showOverlay, onComplete },
+  svelteCreateElement,
+);
+
+$effect(() => {
+  if (!container) return;
+  // Read engineOptions outside tracking to avoid re-running this effect on prop changes.
+  // Prop updates are handled by the separate engine.update() effect below.
+  const opts = untrack(() => engineOptions);
+  const e = new TegakiEngine(container, { ...opts, adopt: true });
+  engine = e;
+  return () => {
+    e.destroy();
+    engine = null;
+  };
+});
+
+$effect(() => {
+  engine?.update(engineOptions);
+});
+</script>
+
+<div bind:this={container} class={className} {...attrs}>
+  {@html innerHtml}
+</div>

package/src/svelte/index.ts

@@ -0,0 +1,2 @@
+export * from '../core/index.ts';
+export { default as TegakiRenderer } from './TegakiRenderer.svelte';

package/src/vue/TegakiRenderer.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { TegakiEngine, type TegakiEngineOptions } from '../core/engine.ts';
+import type { TegakiBundle, TegakiEffects } from '../types.ts';
+import type { TimeControlProp } from '../core/engine.ts';
+import type { TimelineConfig } from '../lib/timeline.ts';
+
+const props = defineProps<{
+  text?: string;
+  font?: TegakiBundle | string;
+  time?: TimeControlProp;
+  effects?: TegakiEffects<Record<string, any>>;
+  timing?: TimelineConfig;
+  segmentSize?: number;
+  showOverlay?: boolean;
+  onComplete?: () => void;
+}>();
+
+defineOptions({ inheritAttrs: false });
+
+const container = ref<HTMLDivElement>();
+let engine: TegakiEngine | null = null;
+
+const engineOptions = computed<TegakiEngineOptions>(() => ({
+  text: props.text,
+  font: props.font,
+  time: props.time,
+  effects: props.effects as Record<string, any>,
+  segmentSize: props.segmentSize,
+  timing: props.timing,
+  showOverlay: props.showOverlay,
+  onComplete: props.onComplete,
+}));
+
+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, nodeProps: Record<string, any>, ...children: string[]): string {
+  const parts: string[] = [];
+  for (const [key, value] of Object.entries(nodeProps)) {
+    if (value == null || value === false) continue;
+    if (key === 'style' && typeof value === 'object') {
+      const css = Object.entries(value)
+        .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(';');
+      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}>`;
+}
+
+// Compute initial HTML once — after the engine adopts, all updates go through engine.update().
+// biome-ignore lint/correctness/noUnusedVariables: used in Vue template
+const innerHtml = TegakiEngine.renderElements(engineOptions.value, htmlCreateElement);
+
+onMounted(() => {
+  if (!container.value) return;
+  engine = new TegakiEngine(container.value, { ...engineOptions.value, adopt: true });
+});
+
+onUnmounted(() => {
+  engine?.destroy();
+  engine = null;
+});
+
+watch(
+  engineOptions,
+  (options) => {
+    engine?.update(options);
+  },
+  { deep: true },
+);
+
+defineExpose({ engine, element: container });
+</script>
+
+<template>
+  <div ref="container" v-bind="$attrs" v-html="innerHtml" />
+</template>

package/src/vue/index.ts

@@ -0,0 +1,2 @@
+export * from '../core/index.ts';
+export { default as TegakiRenderer } from './TegakiRenderer.vue';