takumi-js 1.8.7 → 2.0.0-beta.0

package/dist/index.cjs

@@ -1,3 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_render = require("./render-BkAfi_5a.cjs");
+const require_render = require("./render-BWrJI7_9.cjs");
 exports.render = require_render.render;
+exports.renderAnimation = require_render.renderAnimation;
+exports.renderSvg = require_render.renderSvg;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
-import { n as RenderOptions, r as render } from "./render-lU4_qVw3.cjs";
+import { a as RenderSvgOptions, c as renderSvg, i as RenderOptions, n as RenderAnimationScene, o as render, r as RenderInput, s as renderAnimation, t as RenderAnimationOptions } from "./render-DJjKHz2l.cjs";
 import { ContainerNode, FetchResourcesOptions, ImageNode, Node, NodeAttributes, NodeMetadata, ReactElementLike, TextNode } from "@takumi-rs/helpers";
-import { AnimationFrameSource, AnimationOutputFormat, AnimationSceneSource, ConstructRendererOptions, DitheringAlgorithm, EncodeFramesOptions, Font, FontDetails, FontLoader, FontLoaderSync, ImageSource, ImageSourceLoader, ImageSourceLoaderSync, Keyframes, KeyframesMap, KeyframesRuleList, MeasuredNode, MeasuredTextRun, OutputFormat, RenderAnimationOptions } from "@takumi-rs/core";
+import { AnimationFrameSource, AnimationOutputFormat, AnimationSceneSource, DitheringAlgorithm, EncodeFramesOptions, Font, FontDetails, FontLoader, ImageSource, Keyframes, KeyframesMap, KeyframesRuleList, MeasuredNode, MeasuredTextRun, OutputFormat } from "@takumi-rs/core";
 
 //#region src/index.d.ts
 declare module "react" {
@@ -9,4 +9,4 @@ declare module "react" {
   }
 }
 //#endregion
-export { type AnimationFrameSource, type AnimationOutputFormat, type AnimationSceneSource, type ConstructRendererOptions, type ContainerNode, type DitheringAlgorithm, type EncodeFramesOptions, type FetchResourcesOptions, type Font, type FontDetails, type FontLoader, type FontLoaderSync, type ImageNode, type ImageSource, type ImageSourceLoader, type ImageSourceLoaderSync, type Keyframes, type KeyframesMap, type KeyframesRuleList, type MeasuredNode, type MeasuredTextRun, type Node, type NodeAttributes, type NodeMetadata, type OutputFormat, type ReactElementLike, type RenderAnimationOptions, type RenderOptions, type TextNode, render };
+export { type AnimationFrameSource, type AnimationOutputFormat, type AnimationSceneSource, type ContainerNode, type DitheringAlgorithm, type EncodeFramesOptions, type FetchResourcesOptions, type Font, type FontDetails, type FontLoader, type ImageNode, type ImageSource, type Keyframes, type KeyframesMap, type KeyframesRuleList, type MeasuredNode, type MeasuredTextRun, type Node, type NodeAttributes, type NodeMetadata, type OutputFormat, type ReactElementLike, type RenderAnimationOptions, type RenderAnimationScene, type RenderInput, type RenderOptions, type RenderSvgOptions, type TextNode, render, renderAnimation, renderSvg };

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-import { n as RenderOptions, r as render } from "./render-lU4_qVw3.mjs";
+import { a as RenderSvgOptions, c as renderSvg, i as RenderOptions, n as RenderAnimationScene, o as render, r as RenderInput, s as renderAnimation, t as RenderAnimationOptions } from "./render-DJjKHz2l.mjs";
 import { ContainerNode, FetchResourcesOptions, ImageNode, Node, NodeAttributes, NodeMetadata, ReactElementLike, TextNode } from "@takumi-rs/helpers";
-import { AnimationFrameSource, AnimationOutputFormat, AnimationSceneSource, ConstructRendererOptions, DitheringAlgorithm, EncodeFramesOptions, Font, FontDetails, FontLoader, FontLoaderSync, ImageSource, ImageSourceLoader, ImageSourceLoaderSync, Keyframes, KeyframesMap, KeyframesRuleList, MeasuredNode, MeasuredTextRun, OutputFormat, RenderAnimationOptions } from "@takumi-rs/core";
+import { AnimationFrameSource, AnimationOutputFormat, AnimationSceneSource, DitheringAlgorithm, EncodeFramesOptions, Font, FontDetails, FontLoader, ImageSource, Keyframes, KeyframesMap, KeyframesRuleList, MeasuredNode, MeasuredTextRun, OutputFormat } from "@takumi-rs/core";
 
 //#region src/index.d.ts
 declare module "react" {
@@ -9,4 +9,4 @@ declare module "react" {
   }
 }
 //#endregion
-export { type AnimationFrameSource, type AnimationOutputFormat, type AnimationSceneSource, type ConstructRendererOptions, type ContainerNode, type DitheringAlgorithm, type EncodeFramesOptions, type FetchResourcesOptions, type Font, type FontDetails, type FontLoader, type FontLoaderSync, type ImageNode, type ImageSource, type ImageSourceLoader, type ImageSourceLoaderSync, type Keyframes, type KeyframesMap, type KeyframesRuleList, type MeasuredNode, type MeasuredTextRun, type Node, type NodeAttributes, type NodeMetadata, type OutputFormat, type ReactElementLike, type RenderAnimationOptions, type RenderOptions, type TextNode, render };
+export { type AnimationFrameSource, type AnimationOutputFormat, type AnimationSceneSource, type ContainerNode, type DitheringAlgorithm, type EncodeFramesOptions, type FetchResourcesOptions, type Font, type FontDetails, type FontLoader, type ImageNode, type ImageSource, type Keyframes, type KeyframesMap, type KeyframesRuleList, type MeasuredNode, type MeasuredTextRun, type Node, type NodeAttributes, type NodeMetadata, type OutputFormat, type ReactElementLike, type RenderAnimationOptions, type RenderAnimationScene, type RenderInput, type RenderOptions, type RenderSvgOptions, type TextNode, render, renderAnimation, renderSvg };

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import { t as render } from "./render-BKqYuN_7.mjs";
-export { render };
+import { n as renderAnimation, r as renderSvg, t as render } from "./render-1w0Pei0G.mjs";
+export { render, renderAnimation, renderSvg };

package/dist/{render-BKqYuN_7.mjs → render-1w0Pei0G.mjs}

@@ -2,22 +2,6 @@ import { extractEmojis } from "@takumi-rs/helpers/emoji";
 import { extractResourceUrls, fetchResources } from "@takumi-rs/helpers";
 import { fromJsx } from "@takumi-rs/helpers/jsx";
 import { fromHtml } from "@takumi-rs/helpers/html";
-//#region src/renderer.ts
-/**
-* Mirrors the renderer constructor behavior: when custom fonts are provided,
-* default fonts are disabled so they can't shadow user fonts through generic
-* family resolution (e.g. `sans-serif` resolving to the embedded font).
-*/
-function shouldLoadDefaultFonts(options) {
-	return options?.loadDefaultFonts ?? (options?.fonts?.length ? false : void 0);
-}
-async function loadRendererResources(renderer, options) {
-	const tasks = [];
-	if (options?.fonts && options.fonts.length > 0) tasks.push(renderer.loadFonts(options.fonts));
-	if (options?.persistentImages && options.persistentImages.length > 0) tasks.push(...options.persistentImages.map((image) => Promise.resolve(renderer.putPersistentImage(image, options.signal))));
-	if (tasks.length > 0) await Promise.all(tasks);
-}
-//#endregion
 //#region src/import.ts
 let importPromise = null;
 function getImports(module) {
@@ -106,6 +90,31 @@ async function transformElement(element, options) {
 	if (typeof element === "string") return fromHtml(element);
 	return fromJsx(element, options?.jsx);
 }
+/** Resolves the renderer to use: a caller-supplied one, or the shared global. */
+async function resolveRenderer(options) {
+	if (options && "renderer" in options && options.renderer) return options.renderer;
+	const imports = await getImports(options?.module);
+	return globalRenderer ??= new imports.Renderer();
+}
+/** Transforms an input into a node tree and extracts its emojis. */
+async function resolveContent(element, options) {
+	const { node: originalNode, stylesheets } = await transformElement(element, options);
+	const emojiType = options?.emoji ?? "twemoji";
+	return {
+		node: emojiType !== "from-font" ? extractEmojis(originalNode, emojiType) : originalNode,
+		stylesheets
+	};
+}
+/** Merges caller-supplied images with the resources fetched from the nodes. */
+async function collectImages(nodes, options) {
+	const providedImages = /* @__PURE__ */ new Map();
+	for (const image of options?.images ?? []) providedImages.set(image.src, image);
+	const fetched = await fetchResources([...new Set(nodes.flatMap((node) => extractResourceUrls(node)))].filter((url) => !providedImages.has(url)), options?.resourcesOptions);
+	return [...providedImages.values(), ...fetched];
+}
+function mergeStylesheets(options, extra) {
+	return [...options?.stylesheets ?? [], ...extra];
+}
 /**
 * Renders a React element, HTML string, or Takumi node tree into an image.
 *
@@ -128,21 +137,95 @@ async function transformElement(element, options) {
 */
 async function render(element, options) {
 	options?.signal?.throwIfAborted();
-	const imports = await getImports(options && "module" in options ? options.module : void 0);
-	const isExternalRenderer = options && "renderer" in options;
-	const renderer = isExternalRenderer ? options.renderer : globalRenderer ??= new imports.Renderer({ loadDefaultFonts: shouldLoadDefaultFonts(options) });
-	if (!isExternalRenderer) await loadRendererResources(renderer, options);
-	const { node: originalNode, stylesheets } = await transformElement(element, options);
-	const emojiType = options?.emoji ?? "twemoji";
-	const node = emojiType !== "from-font" ? extractEmojis(originalNode, emojiType) : originalNode;
-	const fetchedResources = options?.fetchedResources ?? await fetchResources(extractResourceUrls(node), options?.resourcesOptions);
-	const renderOptions = {
+	const renderer = await resolveRenderer(options);
+	const { node, stylesheets } = await resolveContent(element, options);
+	const images = await collectImages([node], options);
+	options?.signal?.throwIfAborted();
+	return renderer.render(node, {
 		...options,
-		fetchedResources,
-		stylesheets: [...options?.stylesheets ?? [], ...stylesheets]
-	};
+		images,
+		stylesheets: mergeStylesheets(options, stylesheets)
+	});
+}
+/**
+* Renders a React element, HTML string, or Takumi node tree into a vector SVG
+* document string.
+*
+* Same input handling and resource pipeline as {@link render}, but emits real SVG
+* (`<rect>`, `<path>`, gradients, glyph outlines, embedded images) instead of a
+* raster bitmap.
+*
+* @example
+* ```tsx
+* import { renderSvg } from "takumi-js";
+*
+* const svg = await renderSvg(
+*   <div tw="bg-blue-500 text-white p-4">Hello World</div>,
+*   { width: 1200, height: 630 }
+* );
+* ```
+*
+* @returns A promise that resolves to the SVG document string.
+*/
+async function renderSvg(element, options) {
+	options?.signal?.throwIfAborted();
+	const renderer = await resolveRenderer(options);
+	const { node, stylesheets } = await resolveContent(element, options);
+	const images = await collectImages([node], options);
 	options?.signal?.throwIfAborted();
-	return renderer.render(node, renderOptions, options?.signal);
+	return renderer.renderSvg(node, {
+		...options,
+		images,
+		stylesheets: mergeStylesheets(options, stylesheets)
+	});
+}
+/**
+* Renders a sequence of scenes into an animated image (WebP / APNG / GIF).
+*
+* Each scene's content goes through the same input handling and resource pipeline
+* as {@link render}; resources are fetched once across all scenes.
+*
+* @example
+* ```tsx
+* import { renderAnimation } from "takumi-js";
+*
+* const webp = await renderAnimation({
+*   width: 600,
+*   height: 400,
+*   fps: 30,
+*   format: "webp",
+*   scenes: [
+*     { node: <div tw="bg-red-500 w-full h-full" />, durationMs: 500 },
+*     { node: <div tw="bg-blue-500 w-full h-full" />, durationMs: 500 },
+*   ],
+* });
+* ```
+*
+* @returns A promise that resolves to the encoded animation (Buffer/Uint8Array).
+*/
+async function renderAnimation(options) {
+	options.signal?.throwIfAborted();
+	const renderer = await resolveRenderer(options);
+	const scenes = await Promise.all(options.scenes.map(async (scene) => {
+		const { node, stylesheets } = await resolveContent(scene.node, options);
+		return {
+			node,
+			durationMs: scene.durationMs,
+			stylesheets
+		};
+	}));
+	const images = await collectImages(scenes.map((scene) => scene.node), options);
+	const stylesheets = mergeStylesheets(options, scenes.flatMap((scene) => scene.stylesheets));
+	options.signal?.throwIfAborted();
+	return renderer.renderAnimation({
+		...options,
+		scenes: scenes.map(({ node, durationMs }) => ({
+			node,
+			durationMs
+		})),
+		images,
+		stylesheets
+	});
 }
 //#endregion
-export { render as t };
+export { renderAnimation as n, renderSvg as r, render as t };

package/dist/{render-BkAfi_5a.cjs → render-BWrJI7_9.cjs}

@@ -2,22 +2,6 @@ let _takumi_rs_helpers_emoji = require("@takumi-rs/helpers/emoji");
 let _takumi_rs_helpers = require("@takumi-rs/helpers");
 let _takumi_rs_helpers_jsx = require("@takumi-rs/helpers/jsx");
 let _takumi_rs_helpers_html = require("@takumi-rs/helpers/html");
-//#region src/renderer.ts
-/**
-* Mirrors the renderer constructor behavior: when custom fonts are provided,
-* default fonts are disabled so they can't shadow user fonts through generic
-* family resolution (e.g. `sans-serif` resolving to the embedded font).
-*/
-function shouldLoadDefaultFonts(options) {
-	return options?.loadDefaultFonts ?? (options?.fonts?.length ? false : void 0);
-}
-async function loadRendererResources(renderer, options) {
-	const tasks = [];
-	if (options?.fonts && options.fonts.length > 0) tasks.push(renderer.loadFonts(options.fonts));
-	if (options?.persistentImages && options.persistentImages.length > 0) tasks.push(...options.persistentImages.map((image) => Promise.resolve(renderer.putPersistentImage(image, options.signal))));
-	if (tasks.length > 0) await Promise.all(tasks);
-}
-//#endregion
 //#region src/import.ts
 let importPromise = null;
 function getImports(module) {
@@ -106,6 +90,31 @@ async function transformElement(element, options) {
 	if (typeof element === "string") return (0, _takumi_rs_helpers_html.fromHtml)(element);
 	return (0, _takumi_rs_helpers_jsx.fromJsx)(element, options?.jsx);
 }
+/** Resolves the renderer to use: a caller-supplied one, or the shared global. */
+async function resolveRenderer(options) {
+	if (options && "renderer" in options && options.renderer) return options.renderer;
+	const imports = await getImports(options?.module);
+	return globalRenderer ??= new imports.Renderer();
+}
+/** Transforms an input into a node tree and extracts its emojis. */
+async function resolveContent(element, options) {
+	const { node: originalNode, stylesheets } = await transformElement(element, options);
+	const emojiType = options?.emoji ?? "twemoji";
+	return {
+		node: emojiType !== "from-font" ? (0, _takumi_rs_helpers_emoji.extractEmojis)(originalNode, emojiType) : originalNode,
+		stylesheets
+	};
+}
+/** Merges caller-supplied images with the resources fetched from the nodes. */
+async function collectImages(nodes, options) {
+	const providedImages = /* @__PURE__ */ new Map();
+	for (const image of options?.images ?? []) providedImages.set(image.src, image);
+	const fetched = await (0, _takumi_rs_helpers.fetchResources)([...new Set(nodes.flatMap((node) => (0, _takumi_rs_helpers.extractResourceUrls)(node)))].filter((url) => !providedImages.has(url)), options?.resourcesOptions);
+	return [...providedImages.values(), ...fetched];
+}
+function mergeStylesheets(options, extra) {
+	return [...options?.stylesheets ?? [], ...extra];
+}
 /**
 * Renders a React element, HTML string, or Takumi node tree into an image.
 *
@@ -128,21 +137,95 @@ async function transformElement(element, options) {
 */
 async function render(element, options) {
 	options?.signal?.throwIfAborted();
-	const imports = await getImports(options && "module" in options ? options.module : void 0);
-	const isExternalRenderer = options && "renderer" in options;
-	const renderer = isExternalRenderer ? options.renderer : globalRenderer ??= new imports.Renderer({ loadDefaultFonts: shouldLoadDefaultFonts(options) });
-	if (!isExternalRenderer) await loadRendererResources(renderer, options);
-	const { node: originalNode, stylesheets } = await transformElement(element, options);
-	const emojiType = options?.emoji ?? "twemoji";
-	const node = emojiType !== "from-font" ? (0, _takumi_rs_helpers_emoji.extractEmojis)(originalNode, emojiType) : originalNode;
-	const fetchedResources = options?.fetchedResources ?? await (0, _takumi_rs_helpers.fetchResources)((0, _takumi_rs_helpers.extractResourceUrls)(node), options?.resourcesOptions);
-	const renderOptions = {
+	const renderer = await resolveRenderer(options);
+	const { node, stylesheets } = await resolveContent(element, options);
+	const images = await collectImages([node], options);
+	options?.signal?.throwIfAborted();
+	return renderer.render(node, {
 		...options,
-		fetchedResources,
-		stylesheets: [...options?.stylesheets ?? [], ...stylesheets]
-	};
+		images,
+		stylesheets: mergeStylesheets(options, stylesheets)
+	});
+}
+/**
+* Renders a React element, HTML string, or Takumi node tree into a vector SVG
+* document string.
+*
+* Same input handling and resource pipeline as {@link render}, but emits real SVG
+* (`<rect>`, `<path>`, gradients, glyph outlines, embedded images) instead of a
+* raster bitmap.
+*
+* @example
+* ```tsx
+* import { renderSvg } from "takumi-js";
+*
+* const svg = await renderSvg(
+*   <div tw="bg-blue-500 text-white p-4">Hello World</div>,
+*   { width: 1200, height: 630 }
+* );
+* ```
+*
+* @returns A promise that resolves to the SVG document string.
+*/
+async function renderSvg(element, options) {
 	options?.signal?.throwIfAborted();
-	return renderer.render(node, renderOptions, options?.signal);
+	const renderer = await resolveRenderer(options);
+	const { node, stylesheets } = await resolveContent(element, options);
+	const images = await collectImages([node], options);
+	options?.signal?.throwIfAborted();
+	return renderer.renderSvg(node, {
+		...options,
+		images,
+		stylesheets: mergeStylesheets(options, stylesheets)
+	});
+}
+/**
+* Renders a sequence of scenes into an animated image (WebP / APNG / GIF).
+*
+* Each scene's content goes through the same input handling and resource pipeline
+* as {@link render}; resources are fetched once across all scenes.
+*
+* @example
+* ```tsx
+* import { renderAnimation } from "takumi-js";
+*
+* const webp = await renderAnimation({
+*   width: 600,
+*   height: 400,
+*   fps: 30,
+*   format: "webp",
+*   scenes: [
+*     { node: <div tw="bg-red-500 w-full h-full" />, durationMs: 500 },
+*     { node: <div tw="bg-blue-500 w-full h-full" />, durationMs: 500 },
+*   ],
+* });
+* ```
+*
+* @returns A promise that resolves to the encoded animation (Buffer/Uint8Array).
+*/
+async function renderAnimation(options) {
+	options.signal?.throwIfAborted();
+	const renderer = await resolveRenderer(options);
+	const scenes = await Promise.all(options.scenes.map(async (scene) => {
+		const { node, stylesheets } = await resolveContent(scene.node, options);
+		return {
+			node,
+			durationMs: scene.durationMs,
+			stylesheets
+		};
+	}));
+	const images = await collectImages(scenes.map((scene) => scene.node), options);
+	const stylesheets = mergeStylesheets(options, scenes.flatMap((scene) => scene.stylesheets));
+	options.signal?.throwIfAborted();
+	return renderer.renderAnimation({
+		...options,
+		scenes: scenes.map(({ node, durationMs }) => ({
+			node,
+			durationMs
+		})),
+		images,
+		stylesheets
+	});
 }
 //#endregion
 Object.defineProperty(exports, "render", {
@@ -151,3 +234,15 @@ Object.defineProperty(exports, "render", {
 		return render;
 	}
 });
+Object.defineProperty(exports, "renderAnimation", {
+	enumerable: true,
+	get: function() {
+		return renderAnimation;
+	}
+});
+Object.defineProperty(exports, "renderSvg", {
+	enumerable: true,
+	get: function() {
+		return renderSvg;
+	}
+});

package/dist/render-DJjKHz2l.d.cts

@@ -0,0 +1,117 @@
+import { EmojiType } from "@takumi-rs/helpers/emoji";
+import { FetchResourcesOptions, Node, ReactElementLike } from "@takumi-rs/helpers";
+import { FromJsxOptions } from "@takumi-rs/helpers/jsx";
+import * as napi from "@takumi-rs/core";
+import * as wasm from "@takumi-rs/wasm";
+import { ReactNode } from "react";
+
+//#region src/render.d.ts
+type Renderer = napi.Renderer | wasm.Renderer;
+/** The managed-renderer plumbing shared by every entry point. */
+type SharedRenderExtras = {
+  renderer: Renderer;
+  signal?: AbortSignal;
+  jsx?: FromJsxOptions;
+  resourcesOptions?: FetchResourcesOptions;
+  /**
+   * @description The emoji provider to use when rendering emojis. If set to `"from-font"`, the renderer will attempt to source emoji glyphs from the loaded fonts.
+   * @default "twemoji"
+   */
+  emoji?: EmojiType | "from-font";
+};
+type ManagedRendererOptions = {
+  /**
+   * @description The WebAssembly module to use for the renderer. If not provided, the default resolving strategy will be used.
+   */
+  module?: wasm.InitInput | Promise<wasm.InitInput> | {
+    default: wasm.InitInput;
+  };
+};
+/**
+ * Adds the managed-renderer plumbing to a set of inner options. Either bring your
+ * own `renderer`, or let Takumi resolve one (optionally pointing at a WASM
+ * `module`).
+ */
+type Managed<TInner> = (TInner & SharedRenderExtras) | (TInner & Omit<SharedRenderExtras, "renderer"> & ManagedRendererOptions);
+type InnerRenderOptions = napi.RenderOptions | wasm.RenderOptions;
+type InnerSvgRenderOptions = napi.SvgRenderOptions | wasm.SvgRenderOptions;
+type InnerRenderAnimationOptions = napi.RenderAnimationOptions | wasm.RenderAnimationOptions;
+type RenderOptions = Managed<InnerRenderOptions>;
+type RenderSvgOptions = Managed<InnerSvgRenderOptions>;
+/** A single animation scene whose content is any renderable input. */
+type RenderAnimationScene = Omit<napi.AnimationSceneSource, "node"> & {
+  /** The content to render for this scene: JSX, an HTML string, or a node tree. */node: RenderInput;
+};
+type RenderAnimationOptions = Managed<Omit<InnerRenderAnimationOptions, "scenes"> & {
+  /** The scenes to render sequentially. */scenes: RenderAnimationScene[];
+}>;
+type RenderInput = ReactNode | ReactElementLike | Node | string;
+/**
+ * Renders a React element, HTML string, or Takumi node tree into an image.
+ *
+ * This function automatically detects the best renderer for your environment (native Rust on Node.js,
+ * WASM on Edge/Workers) and handles resource fetching (fonts, images) and emoji extraction.
+ *
+ * @example
+ * ```tsx
+ * import { render } from "takumi-js";
+ *
+ * const buffer = await render(
+ *   <div tw="bg-blue-500 text-white p-4">Hello World</div>,
+ *   { width: 1200, height: 630 }
+ * );
+ * ```
+ *
+ * @param element - The content to render. Can be a JSX element (React-like), an HTML string, or a pre-constructed node tree.
+ * @param options - Configuration for rendering, including dimensions, format, fonts, and more.
+ * @returns A promise that resolves to the rendered image data (Buffer/Uint8Array).
+ */
+declare function render(element: RenderInput, options?: RenderOptions): Promise<Uint8Array<ArrayBufferLike> | Buffer<ArrayBufferLike>>;
+/**
+ * Renders a React element, HTML string, or Takumi node tree into a vector SVG
+ * document string.
+ *
+ * Same input handling and resource pipeline as {@link render}, but emits real SVG
+ * (`<rect>`, `<path>`, gradients, glyph outlines, embedded images) instead of a
+ * raster bitmap.
+ *
+ * @example
+ * ```tsx
+ * import { renderSvg } from "takumi-js";
+ *
+ * const svg = await renderSvg(
+ *   <div tw="bg-blue-500 text-white p-4">Hello World</div>,
+ *   { width: 1200, height: 630 }
+ * );
+ * ```
+ *
+ * @returns A promise that resolves to the SVG document string.
+ */
+declare function renderSvg(element: RenderInput, options?: RenderSvgOptions): Promise<string>;
+/**
+ * Renders a sequence of scenes into an animated image (WebP / APNG / GIF).
+ *
+ * Each scene's content goes through the same input handling and resource pipeline
+ * as {@link render}; resources are fetched once across all scenes.
+ *
+ * @example
+ * ```tsx
+ * import { renderAnimation } from "takumi-js";
+ *
+ * const webp = await renderAnimation({
+ *   width: 600,
+ *   height: 400,
+ *   fps: 30,
+ *   format: "webp",
+ *   scenes: [
+ *     { node: <div tw="bg-red-500 w-full h-full" />, durationMs: 500 },
+ *     { node: <div tw="bg-blue-500 w-full h-full" />, durationMs: 500 },
+ *   ],
+ * });
+ * ```
+ *
+ * @returns A promise that resolves to the encoded animation (Buffer/Uint8Array).
+ */
+declare function renderAnimation(options: RenderAnimationOptions): Promise<Uint8Array<ArrayBufferLike> | Buffer<ArrayBufferLike>>;
+//#endregion
+export { RenderSvgOptions as a, renderSvg as c, RenderOptions as i, RenderAnimationScene as n, render as o, RenderInput as r, renderAnimation as s, RenderAnimationOptions as t };

package/dist/render-DJjKHz2l.d.mts

@@ -0,0 +1,117 @@
+import { EmojiType } from "@takumi-rs/helpers/emoji";
+import { FetchResourcesOptions, Node, ReactElementLike } from "@takumi-rs/helpers";
+import { FromJsxOptions } from "@takumi-rs/helpers/jsx";
+import * as napi from "@takumi-rs/core";
+import * as wasm from "@takumi-rs/wasm";
+import { ReactNode } from "react";
+
+//#region src/render.d.ts
+type Renderer = napi.Renderer | wasm.Renderer;
+/** The managed-renderer plumbing shared by every entry point. */
+type SharedRenderExtras = {
+  renderer: Renderer;
+  signal?: AbortSignal;
+  jsx?: FromJsxOptions;
+  resourcesOptions?: FetchResourcesOptions;
+  /**
+   * @description The emoji provider to use when rendering emojis. If set to `"from-font"`, the renderer will attempt to source emoji glyphs from the loaded fonts.
+   * @default "twemoji"
+   */
+  emoji?: EmojiType | "from-font";
+};
+type ManagedRendererOptions = {
+  /**
+   * @description The WebAssembly module to use for the renderer. If not provided, the default resolving strategy will be used.
+   */
+  module?: wasm.InitInput | Promise<wasm.InitInput> | {
+    default: wasm.InitInput;
+  };
+};
+/**
+ * Adds the managed-renderer plumbing to a set of inner options. Either bring your
+ * own `renderer`, or let Takumi resolve one (optionally pointing at a WASM
+ * `module`).
+ */
+type Managed<TInner> = (TInner & SharedRenderExtras) | (TInner & Omit<SharedRenderExtras, "renderer"> & ManagedRendererOptions);
+type InnerRenderOptions = napi.RenderOptions | wasm.RenderOptions;
+type InnerSvgRenderOptions = napi.SvgRenderOptions | wasm.SvgRenderOptions;
+type InnerRenderAnimationOptions = napi.RenderAnimationOptions | wasm.RenderAnimationOptions;
+type RenderOptions = Managed<InnerRenderOptions>;
+type RenderSvgOptions = Managed<InnerSvgRenderOptions>;
+/** A single animation scene whose content is any renderable input. */
+type RenderAnimationScene = Omit<napi.AnimationSceneSource, "node"> & {
+  /** The content to render for this scene: JSX, an HTML string, or a node tree. */node: RenderInput;
+};
+type RenderAnimationOptions = Managed<Omit<InnerRenderAnimationOptions, "scenes"> & {
+  /** The scenes to render sequentially. */scenes: RenderAnimationScene[];
+}>;
+type RenderInput = ReactNode | ReactElementLike | Node | string;
+/**
+ * Renders a React element, HTML string, or Takumi node tree into an image.
+ *
+ * This function automatically detects the best renderer for your environment (native Rust on Node.js,
+ * WASM on Edge/Workers) and handles resource fetching (fonts, images) and emoji extraction.
+ *
+ * @example
+ * ```tsx
+ * import { render } from "takumi-js";
+ *
+ * const buffer = await render(
+ *   <div tw="bg-blue-500 text-white p-4">Hello World</div>,
+ *   { width: 1200, height: 630 }
+ * );
+ * ```
+ *
+ * @param element - The content to render. Can be a JSX element (React-like), an HTML string, or a pre-constructed node tree.
+ * @param options - Configuration for rendering, including dimensions, format, fonts, and more.
+ * @returns A promise that resolves to the rendered image data (Buffer/Uint8Array).
+ */
+declare function render(element: RenderInput, options?: RenderOptions): Promise<Uint8Array<ArrayBufferLike> | Buffer<ArrayBufferLike>>;
+/**
+ * Renders a React element, HTML string, or Takumi node tree into a vector SVG
+ * document string.
+ *
+ * Same input handling and resource pipeline as {@link render}, but emits real SVG
+ * (`<rect>`, `<path>`, gradients, glyph outlines, embedded images) instead of a
+ * raster bitmap.
+ *
+ * @example
+ * ```tsx
+ * import { renderSvg } from "takumi-js";
+ *
+ * const svg = await renderSvg(
+ *   <div tw="bg-blue-500 text-white p-4">Hello World</div>,
+ *   { width: 1200, height: 630 }
+ * );
+ * ```
+ *
+ * @returns A promise that resolves to the SVG document string.
+ */
+declare function renderSvg(element: RenderInput, options?: RenderSvgOptions): Promise<string>;
+/**
+ * Renders a sequence of scenes into an animated image (WebP / APNG / GIF).
+ *
+ * Each scene's content goes through the same input handling and resource pipeline
+ * as {@link render}; resources are fetched once across all scenes.
+ *
+ * @example
+ * ```tsx
+ * import { renderAnimation } from "takumi-js";
+ *
+ * const webp = await renderAnimation({
+ *   width: 600,
+ *   height: 400,
+ *   fps: 30,
+ *   format: "webp",
+ *   scenes: [
+ *     { node: <div tw="bg-red-500 w-full h-full" />, durationMs: 500 },
+ *     { node: <div tw="bg-blue-500 w-full h-full" />, durationMs: 500 },
+ *   ],
+ * });
+ * ```
+ *
+ * @returns A promise that resolves to the encoded animation (Buffer/Uint8Array).
+ */
+declare function renderAnimation(options: RenderAnimationOptions): Promise<Uint8Array<ArrayBufferLike> | Buffer<ArrayBufferLike>>;
+//#endregion
+export { RenderSvgOptions as a, renderSvg as c, RenderOptions as i, RenderAnimationScene as n, render as o, RenderInput as r, renderAnimation as s, RenderAnimationOptions as t };

package/dist/response.cjs

@@ -2,22 +2,8 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_render = require("./render-BkAfi_5a.cjs");
+const require_render = require("./render-BWrJI7_9.cjs");
 //#region src/response/index.ts
-function mergeOptions(defaultOptions, options) {
-	if (!defaultOptions) return options;
-	if (!options) return defaultOptions;
-	const headers = new Headers(defaultOptions?.headers);
-	if (options?.headers) new Headers(options.headers).forEach((value, key) => {
-		headers.set(key, value);
-	});
-	return {
-		...defaultOptions,
-		...options,
-		headers,
-		stylesheets: [...defaultOptions?.stylesheets ?? [], ...options?.stylesheets ?? []]
-	};
-}
 const contentTypeMap = {
 	png: "image/png",
 	jpeg: "image/jpeg",
@@ -29,62 +15,38 @@ function defaultErrorHandler(error) {
 	console.error("Failed to render image.");
 	console.error(error);
 }
-/**
-* Creates a reusable ImageResponse factory with shared configuration.
-*
-* Use this to avoid repeating configuration like fonts, stylesheets, or cache headers
-* across multiple API routes.
-*
-* @example
-* ```tsx
-* const myImageResponse = createImageResponse({
-*   fonts: [{ name: "Inter", data: fontBuffer }],
-*   headers: { "Cache-Control": "public, max-age=31536000" }
-* });
-*
-* export function GET() {
-*   return myImageResponse(<div>Custom Og Image</div>);
-* }
-* ```
-*
-* @param defaultOptions - Options that will be applied to every response created by this factory.
-*/
-function createImageResponse(defaultOptions) {
-	return function imageResponse(element, options) {
-		const mergedOptions = mergeOptions(defaultOptions, options);
-		let resolveReady;
-		let rejectReady;
-		const ready = new Promise((resolve, reject) => {
-			resolveReady = resolve;
-			rejectReady = reject;
-		});
-		const stream = new ReadableStream({ async start(controller) {
-			try {
-				const image = await require_render.render(element, mergedOptions);
-				controller.enqueue(image);
-				controller.close();
-				resolveReady();
-			} catch (error) {
-				controller.error(error);
-				rejectReady(error);
-				await (mergedOptions?.onError ?? defaultErrorHandler)(error);
-			}
-		} });
-		const headers = new Headers(mergedOptions?.headers);
-		if (!headers.get("content-type")) headers.set("content-type", contentTypeMap[mergedOptions?.format ?? "png"]);
-		const response = new Response(stream, {
-			headers,
-			status: mergedOptions?.status,
-			statusText: mergedOptions?.statusText
-		});
-		return Object.defineProperty(response, "ready", {
-			enumerable: false,
-			value: ready,
-			writable: false
-		});
-	};
+function buildImageResponse(element, options) {
+	let resolveReady;
+	let rejectReady;
+	const ready = new Promise((resolve, reject) => {
+		resolveReady = resolve;
+		rejectReady = reject;
+	});
+	const stream = new ReadableStream({ async start(controller) {
+		try {
+			const image = await require_render.render(element, options);
+			controller.enqueue(image);
+			controller.close();
+			resolveReady();
+		} catch (error) {
+			controller.error(error);
+			rejectReady(error);
+			await (options?.onError ?? defaultErrorHandler)(error);
+		}
+	} });
+	const headers = new Headers(options?.headers);
+	if (!headers.get("content-type")) headers.set("content-type", contentTypeMap[options?.format ?? "png"]);
+	const response = new Response(stream, {
+		headers,
+		status: options?.status,
+		statusText: options?.statusText
+	});
+	return Object.defineProperty(response, "ready", {
+		enumerable: false,
+		value: ready,
+		writable: false
+	});
 }
-let defaultImageResponse;
 /**
 * A universal ImageResponse class for generating images in API routes.
 *
@@ -111,8 +73,7 @@ let defaultImageResponse;
 var ImageResponse = class extends Response {
 	ready;
 	constructor(component, options) {
-		defaultImageResponse ??= createImageResponse();
-		const response = defaultImageResponse(component, options);
+		const response = buildImageResponse(component, options);
 		super(response.body, response);
 		this.ready = response.ready;
 	}
@@ -120,4 +81,3 @@ var ImageResponse = class extends Response {
 //#endregion
 exports.ImageResponse = ImageResponse;
 exports.default = ImageResponse;
-exports.createImageResponse = createImageResponse;

package/dist/response.d.cts

@@ -1,4 +1,4 @@
-import { n as RenderOptions, t as RenderInput } from "./render-lU4_qVw3.cjs";
+import { i as RenderOptions, r as RenderInput } from "./render-DJjKHz2l.cjs";
 
 //#region src/response/index.d.ts
 type ImageResponseResult = Response & {
@@ -7,28 +7,6 @@ type ImageResponseResult = Response & {
 type ImageResponseOptions = RenderOptions & ResponseInit & {
   onError?: (error: unknown) => void | Promise<void>;
 };
-type ImageResponseFactory = (component: RenderInput, options?: ImageResponseOptions) => ImageResponseResult;
-/**
- * Creates a reusable ImageResponse factory with shared configuration.
- *
- * Use this to avoid repeating configuration like fonts, stylesheets, or cache headers
- * across multiple API routes.
- *
- * @example
- * ```tsx
- * const myImageResponse = createImageResponse({
- *   fonts: [{ name: "Inter", data: fontBuffer }],
- *   headers: { "Cache-Control": "public, max-age=31536000" }
- * });
- *
- * export function GET() {
- *   return myImageResponse(<div>Custom Og Image</div>);
- * }
- * ```
- *
- * @param defaultOptions - Options that will be applied to every response created by this factory.
- */
-declare function createImageResponse(defaultOptions?: ImageResponseOptions): ImageResponseFactory;
 /**
  * A universal ImageResponse class for generating images in API routes.
  *
@@ -57,4 +35,4 @@ declare class ImageResponse extends Response {
   constructor(component: RenderInput, options?: ImageResponseOptions);
 }
 //#endregion
-export { ImageResponse, ImageResponse as default, ImageResponseFactory, ImageResponseOptions, ImageResponseResult, createImageResponse };
+export { ImageResponse, ImageResponse as default, ImageResponseOptions, ImageResponseResult };

package/dist/response.d.mts

@@ -1,4 +1,4 @@
-import { n as RenderOptions, t as RenderInput } from "./render-lU4_qVw3.mjs";
+import { i as RenderOptions, r as RenderInput } from "./render-DJjKHz2l.mjs";
 
 //#region src/response/index.d.ts
 type ImageResponseResult = Response & {
@@ -7,28 +7,6 @@ type ImageResponseResult = Response & {
 type ImageResponseOptions = RenderOptions & ResponseInit & {
   onError?: (error: unknown) => void | Promise<void>;
 };
-type ImageResponseFactory = (component: RenderInput, options?: ImageResponseOptions) => ImageResponseResult;
-/**
- * Creates a reusable ImageResponse factory with shared configuration.
- *
- * Use this to avoid repeating configuration like fonts, stylesheets, or cache headers
- * across multiple API routes.
- *
- * @example
- * ```tsx
- * const myImageResponse = createImageResponse({
- *   fonts: [{ name: "Inter", data: fontBuffer }],
- *   headers: { "Cache-Control": "public, max-age=31536000" }
- * });
- *
- * export function GET() {
- *   return myImageResponse(<div>Custom Og Image</div>);
- * }
- * ```
- *
- * @param defaultOptions - Options that will be applied to every response created by this factory.
- */
-declare function createImageResponse(defaultOptions?: ImageResponseOptions): ImageResponseFactory;
 /**
  * A universal ImageResponse class for generating images in API routes.
  *
@@ -57,4 +35,4 @@ declare class ImageResponse extends Response {
   constructor(component: RenderInput, options?: ImageResponseOptions);
 }
 //#endregion
-export { ImageResponse, ImageResponse as default, ImageResponseFactory, ImageResponseOptions, ImageResponseResult, createImageResponse };
+export { ImageResponse, ImageResponse as default, ImageResponseOptions, ImageResponseResult };

package/dist/response.mjs

@@ -1,19 +1,5 @@
-import { t as render } from "./render-BKqYuN_7.mjs";
+import { t as render } from "./render-1w0Pei0G.mjs";
 //#region src/response/index.ts
-function mergeOptions(defaultOptions, options) {
-	if (!defaultOptions) return options;
-	if (!options) return defaultOptions;
-	const headers = new Headers(defaultOptions?.headers);
-	if (options?.headers) new Headers(options.headers).forEach((value, key) => {
-		headers.set(key, value);
-	});
-	return {
-		...defaultOptions,
-		...options,
-		headers,
-		stylesheets: [...defaultOptions?.stylesheets ?? [], ...options?.stylesheets ?? []]
-	};
-}
 const contentTypeMap = {
 	png: "image/png",
 	jpeg: "image/jpeg",
@@ -25,62 +11,38 @@ function defaultErrorHandler(error) {
 	console.error("Failed to render image.");
 	console.error(error);
 }
-/**
-* Creates a reusable ImageResponse factory with shared configuration.
-*
-* Use this to avoid repeating configuration like fonts, stylesheets, or cache headers
-* across multiple API routes.
-*
-* @example
-* ```tsx
-* const myImageResponse = createImageResponse({
-*   fonts: [{ name: "Inter", data: fontBuffer }],
-*   headers: { "Cache-Control": "public, max-age=31536000" }
-* });
-*
-* export function GET() {
-*   return myImageResponse(<div>Custom Og Image</div>);
-* }
-* ```
-*
-* @param defaultOptions - Options that will be applied to every response created by this factory.
-*/
-function createImageResponse(defaultOptions) {
-	return function imageResponse(element, options) {
-		const mergedOptions = mergeOptions(defaultOptions, options);
-		let resolveReady;
-		let rejectReady;
-		const ready = new Promise((resolve, reject) => {
-			resolveReady = resolve;
-			rejectReady = reject;
-		});
-		const stream = new ReadableStream({ async start(controller) {
-			try {
-				const image = await render(element, mergedOptions);
-				controller.enqueue(image);
-				controller.close();
-				resolveReady();
-			} catch (error) {
-				controller.error(error);
-				rejectReady(error);
-				await (mergedOptions?.onError ?? defaultErrorHandler)(error);
-			}
-		} });
-		const headers = new Headers(mergedOptions?.headers);
-		if (!headers.get("content-type")) headers.set("content-type", contentTypeMap[mergedOptions?.format ?? "png"]);
-		const response = new Response(stream, {
-			headers,
-			status: mergedOptions?.status,
-			statusText: mergedOptions?.statusText
-		});
-		return Object.defineProperty(response, "ready", {
-			enumerable: false,
-			value: ready,
-			writable: false
-		});
-	};
+function buildImageResponse(element, options) {
+	let resolveReady;
+	let rejectReady;
+	const ready = new Promise((resolve, reject) => {
+		resolveReady = resolve;
+		rejectReady = reject;
+	});
+	const stream = new ReadableStream({ async start(controller) {
+		try {
+			const image = await render(element, options);
+			controller.enqueue(image);
+			controller.close();
+			resolveReady();
+		} catch (error) {
+			controller.error(error);
+			rejectReady(error);
+			await (options?.onError ?? defaultErrorHandler)(error);
+		}
+	} });
+	const headers = new Headers(options?.headers);
+	if (!headers.get("content-type")) headers.set("content-type", contentTypeMap[options?.format ?? "png"]);
+	const response = new Response(stream, {
+		headers,
+		status: options?.status,
+		statusText: options?.statusText
+	});
+	return Object.defineProperty(response, "ready", {
+		enumerable: false,
+		value: ready,
+		writable: false
+	});
 }
-let defaultImageResponse;
 /**
 * A universal ImageResponse class for generating images in API routes.
 *
@@ -107,11 +69,10 @@ let defaultImageResponse;
 var ImageResponse = class extends Response {
 	ready;
 	constructor(component, options) {
-		defaultImageResponse ??= createImageResponse();
-		const response = defaultImageResponse(component, options);
+		const response = buildImageResponse(component, options);
 		super(response.body, response);
 		this.ready = response.ready;
 	}
 };
 //#endregion
-export { ImageResponse, ImageResponse as default, createImageResponse };
+export { ImageResponse, ImageResponse as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "takumi-js",
-  "version": "1.8.7",
+  "version": "2.0.0-beta.0",
   "description": "All-in-one Takumi package for Node.js and WebAssembly runtimes.",
   "keywords": [
     "css",
@@ -129,9 +129,9 @@
     "publish-lint": "attw --pack . && publint --strict ."
   },
   "dependencies": {
-    "@takumi-rs/core": "1.8.7",
-    "@takumi-rs/helpers": "1.8.7",
-    "@takumi-rs/wasm": "1.8.7"
+    "@takumi-rs/core": "2.0.0-beta.0",
+    "@takumi-rs/helpers": "2.0.0-beta.0",
+    "@takumi-rs/wasm": "2.0.0-beta.0"
   },
   "devDependencies": {
     "@types/bun": "catalog:",

package/dist/render-lU4_qVw3.d.cts

@@ -1,63 +0,0 @@
-import { EmojiType } from "@takumi-rs/helpers/emoji";
-import { FetchResourcesOptions, Node, ReactElementLike } from "@takumi-rs/helpers";
-import { FromJsxOptions } from "@takumi-rs/helpers/jsx";
-import * as napi from "@takumi-rs/core";
-import * as wasm from "@takumi-rs/wasm";
-import { ReactNode } from "react";
-
-//#region src/renderer.d.ts
-type ManagedRendererOptions = {
-  fonts?: napi.FontLoader[];
-  /**
-   * Whether to load the embedded default fonts.
-   * Defaults to `false` when `fonts` are provided.
-   */
-  loadDefaultFonts?: boolean;
-  persistentImages?: napi.ImageSourceLoader[];
-  /**
-   * @description The WebAssembly module to use for the renderer. If not provided, the default resolving strategy will be used.
-   */
-  module?: wasm.InitInput | Promise<wasm.InitInput> | {
-    default: wasm.InitInput;
-  };
-};
-//#endregion
-//#region src/render.d.ts
-type InnerRenderOptions = napi.RenderOptions | wasm.RenderOptions;
-type RenderOptionsWithRenderer = InnerRenderOptions & {
-  renderer: napi.Renderer | wasm.Renderer;
-  signal?: AbortSignal;
-  jsx?: FromJsxOptions;
-  resourcesOptions?: FetchResourcesOptions;
-  /**
-   * @description The emoji provider to use when rendering emojis. If set to `"from-font"`, the renderer will attempt to source emoji glyphs from the loaded fonts.
-   * @default "twemoji"
-   */
-  emoji?: EmojiType | "from-font";
-};
-type RenderOptionsWithoutRenderer = Omit<RenderOptionsWithRenderer, "renderer"> & ManagedRendererOptions;
-type RenderOptions = RenderOptionsWithRenderer | RenderOptionsWithoutRenderer;
-type RenderInput = ReactNode | ReactElementLike | Node | string;
-/**
- * Renders a React element, HTML string, or Takumi node tree into an image.
- *
- * This function automatically detects the best renderer for your environment (native Rust on Node.js,
- * WASM on Edge/Workers) and handles resource fetching (fonts, images) and emoji extraction.
- *
- * @example
- * ```tsx
- * import { render } from "takumi-js";
- *
- * const buffer = await render(
- *   <div tw="bg-blue-500 text-white p-4">Hello World</div>,
- *   { width: 1200, height: 630 }
- * );
- * ```
- *
- * @param element - The content to render. Can be a JSX element (React-like), an HTML string, or a pre-constructed node tree.
- * @param options - Configuration for rendering, including dimensions, format, fonts, and more.
- * @returns A promise that resolves to the rendered image data (Buffer/Uint8Array).
- */
-declare function render(element: RenderInput, options?: RenderOptions): Promise<Uint8Array<ArrayBufferLike> | Buffer<ArrayBufferLike>>;
-//#endregion
-export { RenderOptions as n, render as r, RenderInput as t };

package/dist/render-lU4_qVw3.d.mts

@@ -1,63 +0,0 @@
-import { EmojiType } from "@takumi-rs/helpers/emoji";
-import { FetchResourcesOptions, Node, ReactElementLike } from "@takumi-rs/helpers";
-import { FromJsxOptions } from "@takumi-rs/helpers/jsx";
-import * as napi from "@takumi-rs/core";
-import * as wasm from "@takumi-rs/wasm";
-import { ReactNode } from "react";
-
-//#region src/renderer.d.ts
-type ManagedRendererOptions = {
-  fonts?: napi.FontLoader[];
-  /**
-   * Whether to load the embedded default fonts.
-   * Defaults to `false` when `fonts` are provided.
-   */
-  loadDefaultFonts?: boolean;
-  persistentImages?: napi.ImageSourceLoader[];
-  /**
-   * @description The WebAssembly module to use for the renderer. If not provided, the default resolving strategy will be used.
-   */
-  module?: wasm.InitInput | Promise<wasm.InitInput> | {
-    default: wasm.InitInput;
-  };
-};
-//#endregion
-//#region src/render.d.ts
-type InnerRenderOptions = napi.RenderOptions | wasm.RenderOptions;
-type RenderOptionsWithRenderer = InnerRenderOptions & {
-  renderer: napi.Renderer | wasm.Renderer;
-  signal?: AbortSignal;
-  jsx?: FromJsxOptions;
-  resourcesOptions?: FetchResourcesOptions;
-  /**
-   * @description The emoji provider to use when rendering emojis. If set to `"from-font"`, the renderer will attempt to source emoji glyphs from the loaded fonts.
-   * @default "twemoji"
-   */
-  emoji?: EmojiType | "from-font";
-};
-type RenderOptionsWithoutRenderer = Omit<RenderOptionsWithRenderer, "renderer"> & ManagedRendererOptions;
-type RenderOptions = RenderOptionsWithRenderer | RenderOptionsWithoutRenderer;
-type RenderInput = ReactNode | ReactElementLike | Node | string;
-/**
- * Renders a React element, HTML string, or Takumi node tree into an image.
- *
- * This function automatically detects the best renderer for your environment (native Rust on Node.js,
- * WASM on Edge/Workers) and handles resource fetching (fonts, images) and emoji extraction.
- *
- * @example
- * ```tsx
- * import { render } from "takumi-js";
- *
- * const buffer = await render(
- *   <div tw="bg-blue-500 text-white p-4">Hello World</div>,
- *   { width: 1200, height: 630 }
- * );
- * ```
- *
- * @param element - The content to render. Can be a JSX element (React-like), an HTML string, or a pre-constructed node tree.
- * @param options - Configuration for rendering, including dimensions, format, fonts, and more.
- * @returns A promise that resolves to the rendered image data (Buffer/Uint8Array).
- */
-declare function render(element: RenderInput, options?: RenderOptions): Promise<Uint8Array<ArrayBufferLike> | Buffer<ArrayBufferLike>>;
-//#endregion
-export { RenderOptions as n, render as r, RenderInput as t };