tegaki 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # tegaki
 
+## 0.8.0
+
+### Minor Changes
+
+- [`b0dabe4`](https://github.com/KurtGokhan/tegaki/commit/b0dabe4ede42564ca2fadf68a3db23a94c55d163) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Add Web Components adapter (`tegaki/wc`) with `<tegaki-renderer>` custom element and docs page.
+
+### Patch Changes
+
+- [`4068d1c`](https://github.com/KurtGokhan/tegaki/commit/4068d1c74413e302b73375897aa9377c215a087a) Thanks [@KurtGokhan](https://github.com/KurtGokhan)! - Fix user-provided inline styles being overridden by engine root styles in Astro, Svelte, and Solid adapters.
+
 ## 0.7.0
 
 ### Minor Changes

package/README.md

@@ -60,6 +60,7 @@ import TegakiRenderer from 'tegaki/astro';       // Astro
 
 ```ts
 import { TegakiEngine } from 'tegaki/core';      // Vanilla JS
+import { registerTegakiElement } from 'tegaki/wc'; // Web Components
 ```
 
 ## Built-in Fonts
@@ -78,7 +79,7 @@ For other Google Fonts, use the [interactive generator](https://gkurt.com/tegaki
 Visit **[gkurt.com/tegaki](https://gkurt.com/tegaki)** for full documentation:
 
 - [Getting Started](https://gkurt.com/tegaki/getting-started/)
-- [Framework Guides](https://gkurt.com/tegaki/frameworks/react/) (React, Svelte, Vue, SolidJS, Astro, Vanilla)
+- [Framework Guides](https://gkurt.com/tegaki/frameworks/react/) (React, Svelte, Vue, SolidJS, Astro, Web Components, Vanilla)
 - [Generating Fonts](https://gkurt.com/tegaki/guides/generating-fonts/)
 - [API Reference](https://gkurt.com/tegaki/api/tegaki-renderer/)
 

package/dist/solid/index.mjs

@@ -66,11 +66,15 @@ function TegakiRenderer(props) {
 	createEffect(on(engineOptions, (options) => {
 		engine?.update(options);
 	}));
+	const mergedStyle = {
+		...rootProps.style,
+		...typeof divProps.style === "object" ? divProps.style : {}
+	};
 	return /* @__PURE__ */ jsx("div", {
 		ref: container,
 		"data-tegaki": "root",
-		style: rootProps.style,
 		...divProps,
+		style: mergedStyle,
 		innerHTML
 	});
 }

package/dist/solid/index.mjs.map

@@ -1 +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 { rootProps, content } = TegakiEngine.renderElements(engineOptions(), solidCreateElement);\n  const innerHTML = content 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!} data-tegaki=\"root\" style={rootProps.style} {...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,EAAE,WAAW,YAAY,aAAa,eAAe,eAAe,EAAE,mBAAmB;CAC/F,MAAM,YAAY;AAElB,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,eAAY;EAAO,OAAO,UAAU;EAAO,GAAI;EAAqB;EAAa,CAAA"}
+{"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 { rootProps, content } = TegakiEngine.renderElements(engineOptions(), solidCreateElement);\n  const innerHTML = content 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  const mergedStyle = { ...rootProps.style, ...(typeof divProps.style === 'object' ? divProps.style : {}) };\n\n  return <div ref={container!} data-tegaki=\"root\" {...divProps} style={mergedStyle} 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,EAAE,WAAW,YAAY,aAAa,eAAe,eAAe,EAAE,mBAAmB;CAC/F,MAAM,YAAY;AAElB,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;CAED,MAAM,cAAc;EAAE,GAAG,UAAU;EAAO,GAAI,OAAO,SAAS,UAAU,WAAW,SAAS,QAAQ,EAAE;EAAG;AAEzG,QAAO,oBAAC,OAAD;EAAK,KAAK;EAAY,eAAY;EAAO,GAAI;EAAU,OAAO;EAAwB;EAAa,CAAA"}

package/dist/wc/index.d.mts

@@ -0,0 +1,52 @@
+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";
+
+//#region src/wc/TegakiElement.d.ts
+declare class TegakiElement extends HTMLElement {
+  static observedAttributes: ("text" | "font" | "time" | "speed" | "playing" | "loop" | "segment-size" | "show-overlay")[];
+  private _engine;
+  private _container;
+  private _font;
+  private _effects;
+  private _timing;
+  private _onComplete;
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void;
+  /** The underlying engine instance. */
+  get engine(): TegakiEngine | null;
+  /** Set the font bundle directly (alternative to the `font` attribute for registered names). */
+  get font(): TegakiBundle | string | undefined;
+  set font(value: TegakiBundle | string | undefined);
+  /** Visual effects configuration. */
+  get effects(): TegakiEngineOptions['effects'];
+  set effects(value: TegakiEngineOptions['effects']);
+  /** Timeline timing configuration. */
+  get timing(): TegakiEngineOptions['timing'];
+  set timing(value: TegakiEngineOptions['timing']);
+  /** Callback when animation completes. */
+  get onComplete(): (() => void) | undefined;
+  set onComplete(value: (() => void) | undefined);
+  play(): void;
+  pause(): void;
+  seek(time: number): void;
+  restart(): void;
+  get currentTime(): number;
+  get duration(): number;
+  get isPlaying(): boolean;
+  get isComplete(): boolean;
+  private _buildOptions;
+  private _resolveTime;
+  private _getNumberAttr;
+}
+/**
+ * Register the `<tegaki-renderer>` custom element.
+ * Call this once before using the element in HTML.
+ *
+ * @param tagName - Custom element tag name. Default: `'tegaki-renderer'`.
+ *   Note: custom element names must contain a hyphen per the HTML spec.
+ */
+declare function registerTegakiElement(tagName?: string): void;
+//#endregion
+export { BBox, CSSLength, CreateElementFn, FontOutput, GlyphData, LineCap, PathCommand, Point, ResolvedEffect, Stroke, TegakiBundle, TegakiEffectConfigs, TegakiEffectName, TegakiEffects, TegakiElement, TegakiEngine, TegakiEngineOptions, TegakiGlyphData, TegakiMultiEffectName, TegakiSingletonEffectName, TextLayout, TimeControlMode, TimeControlProp, TimedPoint, Timeline, TimelineConfig, TimelineEntry, computeTextLayout, computeTimeline, drawGlyph, ensureFontFace, registerTegakiElement, resolveEffects };
+//# sourceMappingURL=index.d.mts.map

package/dist/wc/index.mjs

@@ -0,0 +1,162 @@
+import { a as drawGlyph, i as ensureFontFace, n as computeTimeline, r as computeTextLayout, s as resolveEffects, t as TegakiEngine } from "../core-Cw5jNWFa.mjs";
+//#region src/wc/TegakiElement.ts
+/**
+* Observed attribute names.
+* - `text`: the text to render (also settable via textContent)
+* - `font`: registered bundle name (see {@link TegakiEngine.registerBundle})
+* - `time`: time control — a number for controlled mode, `"css"` for CSS mode, omit for uncontrolled
+* - `speed`: playback speed multiplier (uncontrolled mode, default `1`)
+* - `playing`: whether animation is playing (uncontrolled mode, default `true`)
+* - `loop`: loop animation (uncontrolled mode, default `false`)
+* - `segment-size`: segment size for rendering
+* - `show-overlay`: show debug overlay
+*/
+const OBSERVED_ATTRS = [
+	"text",
+	"font",
+	"time",
+	"speed",
+	"playing",
+	"loop",
+	"segment-size",
+	"show-overlay"
+];
+var TegakiElement = class extends HTMLElement {
+	static observedAttributes = [...OBSERVED_ATTRS];
+	_engine = null;
+	_container;
+	_font;
+	_effects;
+	_timing;
+	_onComplete;
+	constructor() {
+		super();
+		const shadow = this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = `:host { display: inline-block; }`;
+		shadow.appendChild(style);
+		this._container = document.createElement("div");
+		shadow.appendChild(this._container);
+	}
+	connectedCallback() {
+		this._engine = new TegakiEngine(this._container, this._buildOptions());
+	}
+	disconnectedCallback() {
+		this._engine?.destroy();
+		this._engine = null;
+	}
+	attributeChangedCallback(_name, _oldValue, _newValue) {
+		this._engine?.update(this._buildOptions());
+	}
+	/** The underlying engine instance. */
+	get engine() {
+		return this._engine;
+	}
+	/** Set the font bundle directly (alternative to the `font` attribute for registered names). */
+	get font() {
+		return this._font;
+	}
+	set font(value) {
+		this._font = value;
+		this._engine?.update(this._buildOptions());
+	}
+	/** Visual effects configuration. */
+	get effects() {
+		return this._effects;
+	}
+	set effects(value) {
+		this._effects = value;
+		this._engine?.update(this._buildOptions());
+	}
+	/** Timeline timing configuration. */
+	get timing() {
+		return this._timing;
+	}
+	set timing(value) {
+		this._timing = value;
+		this._engine?.update(this._buildOptions());
+	}
+	/** Callback when animation completes. */
+	get onComplete() {
+		return this._onComplete;
+	}
+	set onComplete(value) {
+		this._onComplete = value;
+		this._engine?.update(this._buildOptions());
+	}
+	play() {
+		this._engine?.play();
+	}
+	pause() {
+		this._engine?.pause();
+	}
+	seek(time) {
+		this._engine?.seek(time);
+	}
+	restart() {
+		this._engine?.restart();
+	}
+	get currentTime() {
+		return this._engine?.currentTime ?? 0;
+	}
+	get duration() {
+		return this._engine?.duration ?? 0;
+	}
+	get isPlaying() {
+		return this._engine?.isPlaying ?? false;
+	}
+	get isComplete() {
+		return this._engine?.isComplete ?? false;
+	}
+	_buildOptions() {
+		const text = this.getAttribute("text") ?? this.textContent ?? "";
+		const fontAttr = this.getAttribute("font");
+		return {
+			text,
+			font: this._font ?? (fontAttr || void 0),
+			time: this._resolveTime(),
+			effects: this._effects,
+			timing: this._timing,
+			segmentSize: this._getNumberAttr("segment-size"),
+			showOverlay: this.hasAttribute("show-overlay"),
+			onComplete: this._onComplete
+		};
+	}
+	_resolveTime() {
+		const timeAttr = this.getAttribute("time");
+		if (timeAttr === "css") return "css";
+		if (timeAttr != null) {
+			const num = Number(timeAttr);
+			if (!Number.isNaN(num)) return num;
+		}
+		const hasSpeed = this.hasAttribute("speed");
+		const hasPlaying = this.hasAttribute("playing");
+		const hasLoop = this.hasAttribute("loop");
+		if (hasSpeed || hasPlaying || hasLoop) return {
+			mode: "uncontrolled",
+			speed: this._getNumberAttr("speed") ?? 1,
+			playing: this.getAttribute("playing") !== "false",
+			loop: this.hasAttribute("loop")
+		};
+	}
+	_getNumberAttr(name) {
+		const value = this.getAttribute(name);
+		if (value == null) return void 0;
+		const num = Number(value);
+		return Number.isNaN(num) ? void 0 : num;
+	}
+};
+/**
+* Register the `<tegaki-renderer>` custom element.
+* Call this once before using the element in HTML.
+*
+* @param tagName - Custom element tag name. Default: `'tegaki-renderer'`.
+*   Note: custom element names must contain a hyphen per the HTML spec.
+*/
+function registerTegakiElement(tagName = "tegaki-renderer") {
+	if (!customElements.get(tagName)) customElements.define(tagName, TegakiElement);
+}
+//#endregion
+export { TegakiElement, TegakiEngine, computeTextLayout, computeTimeline, drawGlyph, ensureFontFace, registerTegakiElement, resolveEffects };
+
+//# sourceMappingURL=index.mjs.map

package/dist/wc/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/wc/TegakiElement.ts"],"sourcesContent":["import { TegakiEngine, type TegakiEngineOptions, type TimeControlProp } from '../core/engine.ts';\nimport type { TegakiBundle } from '../types.ts';\n\n/**\n * Observed attribute names.\n * - `text`: the text to render (also settable via textContent)\n * - `font`: registered bundle name (see {@link TegakiEngine.registerBundle})\n * - `time`: time control — a number for controlled mode, `\"css\"` for CSS mode, omit for uncontrolled\n * - `speed`: playback speed multiplier (uncontrolled mode, default `1`)\n * - `playing`: whether animation is playing (uncontrolled mode, default `true`)\n * - `loop`: loop animation (uncontrolled mode, default `false`)\n * - `segment-size`: segment size for rendering\n * - `show-overlay`: show debug overlay\n */\nconst OBSERVED_ATTRS = ['text', 'font', 'time', 'speed', 'playing', 'loop', 'segment-size', 'show-overlay'] as const;\n\nexport class TegakiElement extends HTMLElement {\n  static observedAttributes = [...OBSERVED_ATTRS];\n\n  private _engine: TegakiEngine | null = null;\n  private _container: HTMLDivElement;\n  private _font: TegakiBundle | string | undefined;\n  private _effects: TegakiEngineOptions['effects'];\n  private _timing: TegakiEngineOptions['timing'];\n  private _onComplete: (() => void) | undefined;\n\n  constructor() {\n    super();\n    const shadow = this.attachShadow({ mode: 'open' });\n\n    // Host styles: the element itself is just an inline-block wrapper\n    const style = document.createElement('style');\n    style.textContent = `:host { display: inline-block; }`;\n    shadow.appendChild(style);\n\n    this._container = document.createElement('div');\n    shadow.appendChild(this._container);\n  }\n\n  // ---------------------------------------------------------------------------\n  // Lifecycle\n  // ---------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this._engine = new TegakiEngine(this._container, this._buildOptions());\n  }\n\n  disconnectedCallback(): void {\n    this._engine?.destroy();\n    this._engine = null;\n  }\n\n  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void {\n    this._engine?.update(this._buildOptions());\n  }\n\n  // ---------------------------------------------------------------------------\n  // Property API (for JS usage)\n  // ---------------------------------------------------------------------------\n\n  /** The underlying engine instance. */\n  get engine(): TegakiEngine | null {\n    return this._engine;\n  }\n\n  /** Set the font bundle directly (alternative to the `font` attribute for registered names). */\n  get font(): TegakiBundle | string | undefined {\n    return this._font;\n  }\n\n  set font(value: TegakiBundle | string | undefined) {\n    this._font = value;\n    this._engine?.update(this._buildOptions());\n  }\n\n  /** Visual effects configuration. */\n  get effects(): TegakiEngineOptions['effects'] {\n    return this._effects;\n  }\n\n  set effects(value: TegakiEngineOptions['effects']) {\n    this._effects = value;\n    this._engine?.update(this._buildOptions());\n  }\n\n  /** Timeline timing configuration. */\n  get timing(): TegakiEngineOptions['timing'] {\n    return this._timing;\n  }\n\n  set timing(value: TegakiEngineOptions['timing']) {\n    this._timing = value;\n    this._engine?.update(this._buildOptions());\n  }\n\n  /** Callback when animation completes. */\n  get onComplete(): (() => void) | undefined {\n    return this._onComplete;\n  }\n\n  set onComplete(value: (() => void) | undefined) {\n    this._onComplete = value;\n    this._engine?.update(this._buildOptions());\n  }\n\n  // Playback controls (delegate to engine)\n\n  play(): void {\n    this._engine?.play();\n  }\n\n  pause(): void {\n    this._engine?.pause();\n  }\n\n  seek(time: number): void {\n    this._engine?.seek(time);\n  }\n\n  restart(): void {\n    this._engine?.restart();\n  }\n\n  get currentTime(): number {\n    return this._engine?.currentTime ?? 0;\n  }\n\n  get duration(): number {\n    return this._engine?.duration ?? 0;\n  }\n\n  get isPlaying(): boolean {\n    return this._engine?.isPlaying ?? false;\n  }\n\n  get isComplete(): boolean {\n    return this._engine?.isComplete ?? false;\n  }\n\n  // ---------------------------------------------------------------------------\n  // Internal\n  // ---------------------------------------------------------------------------\n\n  private _buildOptions(): TegakiEngineOptions {\n    const text = this.getAttribute('text') ?? this.textContent ?? '';\n    const fontAttr = this.getAttribute('font');\n    const font = this._font ?? (fontAttr || undefined);\n    const time = this._resolveTime();\n\n    return {\n      text,\n      font,\n      time,\n      effects: this._effects,\n      timing: this._timing,\n      segmentSize: this._getNumberAttr('segment-size'),\n      showOverlay: this.hasAttribute('show-overlay'),\n      onComplete: this._onComplete,\n    };\n  }\n\n  private _resolveTime(): TimeControlProp {\n    const timeAttr = this.getAttribute('time');\n\n    if (timeAttr === 'css') return 'css';\n    if (timeAttr != null) {\n      const num = Number(timeAttr);\n      if (!Number.isNaN(num)) return num;\n    }\n\n    // Check for uncontrolled mode attributes\n    const hasSpeed = this.hasAttribute('speed');\n    const hasPlaying = this.hasAttribute('playing');\n    const hasLoop = this.hasAttribute('loop');\n\n    if (hasSpeed || hasPlaying || hasLoop) {\n      return {\n        mode: 'uncontrolled',\n        speed: this._getNumberAttr('speed') ?? 1,\n        playing: this.getAttribute('playing') !== 'false',\n        loop: this.hasAttribute('loop'),\n      };\n    }\n\n    return undefined;\n  }\n\n  private _getNumberAttr(name: string): number | undefined {\n    const value = this.getAttribute(name);\n    if (value == null) return undefined;\n    const num = Number(value);\n    return Number.isNaN(num) ? undefined : num;\n  }\n}\n\n/**\n * Register the `<tegaki-renderer>` custom element.\n * Call this once before using the element in HTML.\n *\n * @param tagName - Custom element tag name. Default: `'tegaki-renderer'`.\n *   Note: custom element names must contain a hyphen per the HTML spec.\n */\nexport function registerTegakiElement(tagName = 'tegaki-renderer'): void {\n  if (!customElements.get(tagName)) {\n    customElements.define(tagName, TegakiElement);\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "tegaki",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
-  "description": "Framework-agnostic animated handwriting renderer with React, Svelte, Vue, SolidJS, and Astro adapters",
+  "description": "Framework-agnostic animated handwriting renderer with React, Svelte, Vue, SolidJS, Astro, and Web Components adapters",
   "keywords": [
     "handwriting",
     "animation",
@@ -12,6 +12,8 @@
     "vue",
     "solid",
     "astro",
+    "web-components",
+    "custom-elements",
     "font",
     "calligraphy",
     "stroke-order",
@@ -69,6 +71,12 @@
       "types": "./dist/solid/index.d.mts",
       "import": "./dist/solid/index.mjs"
     },
+    "./wc": {
+      "tegaki@dev": "./src/wc/index.ts",
+      "source": "./src/wc/index.ts",
+      "types": "./dist/wc/index.d.mts",
+      "import": "./dist/wc/index.mjs"
+    },
     "./astro": "./src/astro/TegakiRenderer.astro",
     "./fonts/caveat": "./fonts/caveat/bundle.ts",
     "./fonts/italianno": "./fonts/italianno/bundle.ts",
@@ -86,7 +94,7 @@
   ],
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "tsdown src/index.ts src/core/index.ts src/react/index.ts src/solid/index.ts --dts --sourcemap",
+    "build": "tsdown src/index.ts src/core/index.ts src/react/index.ts src/solid/index.ts src/wc/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"
   },

package/src/astro/TegakiRenderer.astro

@@ -11,7 +11,7 @@ interface Props extends Omit<TegakiEngineOptions, 'onComplete'> {
   [key: string]: any;
 }
 
-const { text, font, bundle: registerBundle, loadFont, time, effects, timing, segmentSize, showOverlay, class: className, ...attrs } = Astro.props;
+const { text, font, bundle: registerBundle, loadFont, time, effects, timing, segmentSize, showOverlay, class: className, style: userStyle, ...attrs } = Astro.props;
 
 // Resolve the font bundle for SSR
 let resolvedFont: TegakiBundle | undefined;
@@ -73,7 +73,9 @@ function htmlCreateElement(tag: string, props: Record<string, any>, ...children:
 
 const renderResult = shouldRender ? TegakiEngine.renderElements(engineOptions, htmlCreateElement) : null;
 const innerHtml = renderResult?.content ?? '';
-const rootStyle = renderResult ? styleToString(renderResult.rootProps.style) : '';
+const rootStyle = renderResult
+  ? styleToString(renderResult.rootProps.style) + (userStyle ? `;${typeof userStyle === 'object' ? styleToString(userStyle) : userStyle}` : '')
+  : typeof userStyle === 'object' ? styleToString(userStyle) : (userStyle ?? '');
 
 // For serialization, replace the full bundle with just the family name.
 const clientOptions = {

package/src/solid/TegakiRenderer.tsx

@@ -96,5 +96,7 @@ export function TegakiRenderer(props: TegakiRendererProps) {
     }),
   );
 
-  return <div ref={container!} data-tegaki="root" style={rootProps.style} {...divProps} innerHTML={innerHTML} />;
+  const mergedStyle = { ...rootProps.style, ...(typeof divProps.style === 'object' ? divProps.style : {}) };
+
+  return <div ref={container!} data-tegaki="root" {...divProps} style={mergedStyle} innerHTML={innerHTML} />;
 }

package/src/svelte/TegakiRenderer.svelte

@@ -11,7 +11,7 @@ interface Props extends Omit<TegakiEngineOptions, 'effects'> {
 }
 
 // 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 { text, font, time: timeProp, onComplete, effects, segmentSize, timing, showOverlay, class: className, style: userStyle, ...attrs }: Props = $props();
 
 let container = $state<HTMLDivElement | undefined>();
 let engine = $state<TegakiEngine | null>(null);
@@ -78,7 +78,7 @@ function styleToString(style: Record<string, any>): string {
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in Svelte template
-const rootStyleStr = styleToString(rootProps.style);
+const rootStyleStr = styleToString(rootProps.style) + (userStyle ? `;${userStyle}` : '');
 
 $effect(() => {
   if (!container) return;

package/src/wc/TegakiElement.ts

@@ -0,0 +1,207 @@
+import { TegakiEngine, type TegakiEngineOptions, type TimeControlProp } from '../core/engine.ts';
+import type { TegakiBundle } from '../types.ts';
+
+/**
+ * Observed attribute names.
+ * - `text`: the text to render (also settable via textContent)
+ * - `font`: registered bundle name (see {@link TegakiEngine.registerBundle})
+ * - `time`: time control — a number for controlled mode, `"css"` for CSS mode, omit for uncontrolled
+ * - `speed`: playback speed multiplier (uncontrolled mode, default `1`)
+ * - `playing`: whether animation is playing (uncontrolled mode, default `true`)
+ * - `loop`: loop animation (uncontrolled mode, default `false`)
+ * - `segment-size`: segment size for rendering
+ * - `show-overlay`: show debug overlay
+ */
+const OBSERVED_ATTRS = ['text', 'font', 'time', 'speed', 'playing', 'loop', 'segment-size', 'show-overlay'] as const;
+
+export class TegakiElement extends HTMLElement {
+  static observedAttributes = [...OBSERVED_ATTRS];
+
+  private _engine: TegakiEngine | null = null;
+  private _container: HTMLDivElement;
+  private _font: TegakiBundle | string | undefined;
+  private _effects: TegakiEngineOptions['effects'];
+  private _timing: TegakiEngineOptions['timing'];
+  private _onComplete: (() => void) | undefined;
+
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: 'open' });
+
+    // Host styles: the element itself is just an inline-block wrapper
+    const style = document.createElement('style');
+    style.textContent = `:host { display: inline-block; }`;
+    shadow.appendChild(style);
+
+    this._container = document.createElement('div');
+    shadow.appendChild(this._container);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  connectedCallback(): void {
+    this._engine = new TegakiEngine(this._container, this._buildOptions());
+  }
+
+  disconnectedCallback(): void {
+    this._engine?.destroy();
+    this._engine = null;
+  }
+
+  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void {
+    this._engine?.update(this._buildOptions());
+  }
+
+  // ---------------------------------------------------------------------------
+  // Property API (for JS usage)
+  // ---------------------------------------------------------------------------
+
+  /** The underlying engine instance. */
+  get engine(): TegakiEngine | null {
+    return this._engine;
+  }
+
+  /** Set the font bundle directly (alternative to the `font` attribute for registered names). */
+  get font(): TegakiBundle | string | undefined {
+    return this._font;
+  }
+
+  set font(value: TegakiBundle | string | undefined) {
+    this._font = value;
+    this._engine?.update(this._buildOptions());
+  }
+
+  /** Visual effects configuration. */
+  get effects(): TegakiEngineOptions['effects'] {
+    return this._effects;
+  }
+
+  set effects(value: TegakiEngineOptions['effects']) {
+    this._effects = value;
+    this._engine?.update(this._buildOptions());
+  }
+
+  /** Timeline timing configuration. */
+  get timing(): TegakiEngineOptions['timing'] {
+    return this._timing;
+  }
+
+  set timing(value: TegakiEngineOptions['timing']) {
+    this._timing = value;
+    this._engine?.update(this._buildOptions());
+  }
+
+  /** Callback when animation completes. */
+  get onComplete(): (() => void) | undefined {
+    return this._onComplete;
+  }
+
+  set onComplete(value: (() => void) | undefined) {
+    this._onComplete = value;
+    this._engine?.update(this._buildOptions());
+  }
+
+  // Playback controls (delegate to engine)
+
+  play(): void {
+    this._engine?.play();
+  }
+
+  pause(): void {
+    this._engine?.pause();
+  }
+
+  seek(time: number): void {
+    this._engine?.seek(time);
+  }
+
+  restart(): void {
+    this._engine?.restart();
+  }
+
+  get currentTime(): number {
+    return this._engine?.currentTime ?? 0;
+  }
+
+  get duration(): number {
+    return this._engine?.duration ?? 0;
+  }
+
+  get isPlaying(): boolean {
+    return this._engine?.isPlaying ?? false;
+  }
+
+  get isComplete(): boolean {
+    return this._engine?.isComplete ?? false;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Internal
+  // ---------------------------------------------------------------------------
+
+  private _buildOptions(): TegakiEngineOptions {
+    const text = this.getAttribute('text') ?? this.textContent ?? '';
+    const fontAttr = this.getAttribute('font');
+    const font = this._font ?? (fontAttr || undefined);
+    const time = this._resolveTime();
+
+    return {
+      text,
+      font,
+      time,
+      effects: this._effects,
+      timing: this._timing,
+      segmentSize: this._getNumberAttr('segment-size'),
+      showOverlay: this.hasAttribute('show-overlay'),
+      onComplete: this._onComplete,
+    };
+  }
+
+  private _resolveTime(): TimeControlProp {
+    const timeAttr = this.getAttribute('time');
+
+    if (timeAttr === 'css') return 'css';
+    if (timeAttr != null) {
+      const num = Number(timeAttr);
+      if (!Number.isNaN(num)) return num;
+    }
+
+    // Check for uncontrolled mode attributes
+    const hasSpeed = this.hasAttribute('speed');
+    const hasPlaying = this.hasAttribute('playing');
+    const hasLoop = this.hasAttribute('loop');
+
+    if (hasSpeed || hasPlaying || hasLoop) {
+      return {
+        mode: 'uncontrolled',
+        speed: this._getNumberAttr('speed') ?? 1,
+        playing: this.getAttribute('playing') !== 'false',
+        loop: this.hasAttribute('loop'),
+      };
+    }
+
+    return undefined;
+  }
+
+  private _getNumberAttr(name: string): number | undefined {
+    const value = this.getAttribute(name);
+    if (value == null) return undefined;
+    const num = Number(value);
+    return Number.isNaN(num) ? undefined : num;
+  }
+}
+
+/**
+ * Register the `<tegaki-renderer>` custom element.
+ * Call this once before using the element in HTML.
+ *
+ * @param tagName - Custom element tag name. Default: `'tegaki-renderer'`.
+ *   Note: custom element names must contain a hyphen per the HTML spec.
+ */
+export function registerTegakiElement(tagName = 'tegaki-renderer'): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, TegakiElement);
+  }
+}

package/src/wc/index.ts

@@ -0,0 +1,2 @@
+export * from '../core/index.ts';
+export { registerTegakiElement, TegakiElement } from './TegakiElement.ts';