takumi-js 2.13.7 → 2.15.0

package/README.md

@@ -3,9 +3,9 @@
 
 # takumi-js
 
-**Render OG images from JSX, HTML, and CSS. No headless browser.**
+**Generate Open Graph images from JSX, HTML, and CSS without a headless browser.**
 
-Render PNG, WebP, SVG, or animations. The package provides an `ImageResponse` API compatible with `next/og`.
+Create social cards, banners, PNG, JPEG, WebP, SVG, and animations. The package provides an `ImageResponse` API compatible with `next/og`.
 
 [Documentation](https://takumi.kane.tw/docs/) · [Playground](https://takumi.kane.tw/playground)
 
@@ -21,12 +21,14 @@ npm install takumi-js
 
 ## Quick start
 
+Save this example as `image.tsx` and run it with `bun image.tsx`. In Node.js, compile JSX before running it.
+
 ```tsx
 import { render } from "takumi-js";
 import { writeFile } from "node:fs/promises";
 
 const image = await render(
-  <div tw="w-full h-full flex items-center justify-center bg-gradient-to-b from-blue-100 to-red-50">
+  <div tw="w-full h-full flex items-center justify-center bg-linear-to-b from-blue-100 to-red-50">
     <h1 tw="text-6xl font-bold">Hello from Takumi</h1>
   </div>,
   { width: 1200, height: 630 },
@@ -35,13 +37,13 @@ const image = await render(
 await writeFile("./output.png", image);
 ```
 
-## Coming from something else
+## Migrate from another renderer
 
-| You are using             | What changes                                                                                                                                                                                                |
-| :------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `satori`                  | Replace `satori()` with `renderSvg()`, or call `render()` for encoded image bytes. [Compare the renderers](https://takumi.kane.tw/docs/comparison-to-satori).                                               |
-| `next/og`                 | Swap the `ImageResponse` import. Existing Satori-compatible templates keep their explicit Flexbox styles. [Read the migration guide](https://takumi.kane.tw/docs/comparison-to-satori#migrate-from-nextog). |
-| Puppeteer for screenshots | Pass a JSX or HTML tree to `render()`. Scripts do not run, and Takumi supports less CSS than Chrome.                                                                                                        |
+| You are using             | What changes                                                                                                                                                                                     |
+| :------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `satori`                  | Replace `satori()` with `renderSvg()`, or call `render()` for encoded image bytes. [Compare the renderers](https://takumi.kane.tw/docs/comparison-to-satori).                                    |
+| `next/og`                 | Swap the `ImageResponse` import. Keep explicit Flexbox styles and compare the rendered output. [Read the migration guide](https://takumi.kane.tw/docs/comparison-to-satori#migrate-from-nextog). |
+| Puppeteer for screenshots | Pass a JSX or HTML tree to `render()`. Scripts do not run, and Takumi supports less CSS than Chrome.                                                                                             |
 
 ## Runtime detection
 
@@ -61,7 +63,7 @@ import { ImageResponse } from "takumi-js/response";
 
 export function GET() {
   return new ImageResponse(
-    <div tw="w-full h-full flex items-center justify-center bg-gradient-to-b from-blue-100 to-red-50">
+    <div tw="w-full h-full flex items-center justify-center bg-linear-to-b from-blue-100 to-red-50">
       <h1 tw="text-6xl font-bold">Hello from Takumi</h1>
     </div>,
     { width: 1200, height: 630 },
@@ -76,7 +78,7 @@ import { renderSvg } from "takumi-js";
 import { writeFile } from "node:fs/promises";
 
 const svg = await renderSvg(
-  <div tw="w-full h-full flex items-center justify-center bg-gradient-to-b from-blue-100 to-red-50">
+  <div tw="w-full h-full flex items-center justify-center bg-linear-to-b from-blue-100 to-red-50">
     <h1 tw="text-6xl font-bold">Hello from Takumi</h1>
   </div>,
   { width: 1200, height: 630 },

package/dist/index.cjs

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

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { a as RenderOptions, c as renderAnimation, i as RenderInput, l as renderSvg, n as ImagesInput, o as RenderSvgOptions, r as RenderAnimationOptions, s as render, t as AnimationScene } from "./render-BIjyc8uU.cjs";
+import { a as RenderOptions, c as render, i as RenderInput, l as renderAnimation, n as ImagesInput, o as RenderSvgOptions, r as RenderAnimationOptions, s as measure, t as AnimationScene, u as renderSvg } from "./render-DRoDMAA1.cjs";
 import { AnimationOutputFormat, DitheringAlgorithm, Font, FontDetails, FontLoader, ImageSource, Keyframes, KeyframesMap, KeyframesRuleList, MeasuredNode, MeasuredTextRun, OutputFormat } from "@takumi-rs/core";
 import { AnimationRule, ContainerNode, CssInput, Declarations, FetchOptions, ImageNode, LayerRule, MediaRule, Node, NodeAttributes, NodeMetadata, ReactElementLike, RgbaImage, StyleRule, SupportsRule, TextNode } from "@takumi-rs/helpers";
 //#region src/glyph-cache.d.ts
@@ -24,4 +24,4 @@ declare module "react" {
   }
 }
 //#endregion
-export { type AnimationOutputFormat, type AnimationRule, type AnimationScene, type ContainerNode, type CssInput, type Declarations, type DitheringAlgorithm, type FetchOptions, type Font, type FontDetails, type FontLoader, type ImageNode, type ImageSource, type ImagesInput, type Keyframes, type KeyframesMap, type KeyframesRuleList, type LayerRule, type MeasuredNode, type MeasuredTextRun, type MediaRule, type Node, type NodeAttributes, type NodeMetadata, type OutputFormat, type ReactElementLike, type RenderAnimationOptions, type RenderInput, type RenderOptions, type RenderSvgOptions, type RgbaImage, type StyleRule, type SupportsRule, type TextNode, render, renderAnimation, renderSvg, setGlyphCacheMaxBytes };
+export { type AnimationOutputFormat, type AnimationRule, type AnimationScene, type ContainerNode, type CssInput, type Declarations, type DitheringAlgorithm, type FetchOptions, type Font, type FontDetails, type FontLoader, type ImageNode, type ImageSource, type ImagesInput, type Keyframes, type KeyframesMap, type KeyframesRuleList, type LayerRule, type MeasuredNode, type MeasuredTextRun, type MediaRule, type Node, type NodeAttributes, type NodeMetadata, type OutputFormat, type ReactElementLike, type RenderAnimationOptions, type RenderInput, type RenderOptions, type RenderSvgOptions, type RgbaImage, type StyleRule, type SupportsRule, type TextNode, measure, render, renderAnimation, renderSvg, setGlyphCacheMaxBytes };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as RenderOptions, c as renderAnimation, i as RenderInput, l as renderSvg, n as ImagesInput, o as RenderSvgOptions, r as RenderAnimationOptions, s as render, t as AnimationScene } from "./render-C-wS8FET.mjs";
+import { a as RenderOptions, c as render, i as RenderInput, l as renderAnimation, n as ImagesInput, o as RenderSvgOptions, r as RenderAnimationOptions, s as measure, t as AnimationScene, u as renderSvg } from "./render-D36x-iF4.mjs";
 import { AnimationRule, ContainerNode, CssInput, Declarations, FetchOptions, ImageNode, LayerRule, MediaRule, Node, NodeAttributes, NodeMetadata, ReactElementLike, RgbaImage, StyleRule, SupportsRule, TextNode } from "@takumi-rs/helpers";
 import { AnimationOutputFormat, DitheringAlgorithm, Font, FontDetails, FontLoader, ImageSource, Keyframes, KeyframesMap, KeyframesRuleList, MeasuredNode, MeasuredTextRun, OutputFormat } from "@takumi-rs/core";
 //#region src/glyph-cache.d.ts
@@ -24,4 +24,4 @@ declare module "react" {
   }
 }
 //#endregion
-export { type AnimationOutputFormat, type AnimationRule, type AnimationScene, type ContainerNode, type CssInput, type Declarations, type DitheringAlgorithm, type FetchOptions, type Font, type FontDetails, type FontLoader, type ImageNode, type ImageSource, type ImagesInput, type Keyframes, type KeyframesMap, type KeyframesRuleList, type LayerRule, type MeasuredNode, type MeasuredTextRun, type MediaRule, type Node, type NodeAttributes, type NodeMetadata, type OutputFormat, type ReactElementLike, type RenderAnimationOptions, type RenderInput, type RenderOptions, type RenderSvgOptions, type RgbaImage, type StyleRule, type SupportsRule, type TextNode, render, renderAnimation, renderSvg, setGlyphCacheMaxBytes };
+export { type AnimationOutputFormat, type AnimationRule, type AnimationScene, type ContainerNode, type CssInput, type Declarations, type DitheringAlgorithm, type FetchOptions, type Font, type FontDetails, type FontLoader, type ImageNode, type ImageSource, type ImagesInput, type Keyframes, type KeyframesMap, type KeyframesRuleList, type LayerRule, type MeasuredNode, type MeasuredTextRun, type MediaRule, type Node, type NodeAttributes, type NodeMetadata, type OutputFormat, type ReactElementLike, type RenderAnimationOptions, type RenderInput, type RenderOptions, type RenderSvgOptions, type RgbaImage, type StyleRule, type SupportsRule, type TextNode, measure, render, renderAnimation, renderSvg, setGlyphCacheMaxBytes };

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import { i as setGlyphCacheMaxBytes, n as renderAnimation, r as renderSvg, t as render } from "./render-B1HYpcq6.mjs";
-export { render, renderAnimation, renderSvg, setGlyphCacheMaxBytes };
+import { a as setGlyphCacheMaxBytes, i as renderSvg, n as render, r as renderAnimation, t as measure } from "./render-DNAu8Luv.mjs";
+export { measure, render, renderAnimation, renderSvg, setGlyphCacheMaxBytes };

package/dist/{render-B2cdtVWB.cjs → render-BmM58jcW.cjs}

@@ -113,6 +113,24 @@ function mergeCss(options, extra) {
 	if (options?.stylesheets !== void 0) warnStylesheetsDeprecated();
 	return [...options?.css !== void 0 ? isCssList(options.css) ? options.css : [options.css] : options?.stylesheets ?? [], ...extra];
 }
+/** Resolves the renderer, node tree, and backend options, images and CSS merged in, a single scene needs. */
+async function prepareScene(element, options) {
+	options?.signal?.throwIfAborted();
+	const renderer = await resolveRenderer(options);
+	const { node, css } = await resolveContent(element, options);
+	const images = await collectImages(node, options);
+	options?.signal?.throwIfAborted();
+	const { css: _, stylesheets: _alias, ...forward } = options ?? {};
+	return {
+		renderer,
+		node,
+		options: {
+			...forward,
+			images,
+			css: mergeCss(options, css)
+		}
+	};
+}
 /**
 * Renders a React element, HTML string, or Takumi node tree into an image.
 *
@@ -134,17 +152,27 @@ function mergeCss(options, extra) {
 * @returns A promise that resolves to the rendered image data (Buffer/Uint8Array).
 */
 async function render(element, options) {
-	options?.signal?.throwIfAborted();
-	const renderer = await resolveRenderer(options);
-	const { node, css: extractedCss } = await resolveContent(element, options);
-	const images = await collectImages(node, options);
-	options?.signal?.throwIfAborted();
-	const { css: _, stylesheets: _alias, ...forward } = options ?? {};
-	return renderer.render(node, {
-		...forward,
-		images,
-		css: mergeCss(options, extractedCss)
-	});
+	const scene = await prepareScene(element, options);
+	return scene.renderer.render(scene.node, scene.options);
+}
+/**
+* Lays out a React element, HTML string, or Takumi node tree without painting it.
+*
+* Same input handling, CSS, emoji, and image pipeline as {@link render}, on the same default
+* renderer, so fonts registered for rendering measure too.
+*
+* @example
+* ```tsx
+* import { measure } from "takumi-js";
+*
+* const { width, height } = await measure(<span tw="text-xl">Hello World</span>);
+* ```
+*
+* @returns A promise that resolves to the measured node tree.
+*/
+async function measure(element, options) {
+	const scene = await prepareScene(element, options);
+	return scene.renderer.measure(scene.node, scene.options);
 }
 /**
 * Renders a React element, HTML string, or Takumi node tree into a vector SVG
@@ -167,17 +195,8 @@ async function render(element, options) {
 * @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, css: extractedCss } = await resolveContent(element, options);
-	const images = await collectImages(node, options);
-	options?.signal?.throwIfAborted();
-	const { css: _, stylesheets: _alias, ...forward } = options ?? {};
-	return renderer.renderSvg(node, {
-		...forward,
-		images,
-		css: mergeCss(options, extractedCss)
-	});
+	const scene = await prepareScene(element, options);
+	return scene.renderer.renderSvg(scene.node, scene.options);
 }
 /**
 * Renders a sequence of scenes into an animated image (WebP / APNG / GIF).
@@ -229,6 +248,12 @@ async function renderAnimation(options) {
 	});
 }
 //#endregion
+Object.defineProperty(exports, "measure", {
+	enumerable: true,
+	get: function() {
+		return measure;
+	}
+});
 Object.defineProperty(exports, "render", {
 	enumerable: true,
 	get: function() {

package/dist/{render-C-wS8FET.d.mts → render-D36x-iF4.d.mts}

@@ -99,6 +99,22 @@ type RenderInput = ReactNode | ReactElementLike | Node | string;
  * @returns A promise that resolves to the rendered image data (Buffer/Uint8Array).
  */
 declare function render(element: RenderInput, options?: RenderOptions): Promise<Buffer<ArrayBuffer> | Uint8Array<ArrayBuffer>>;
+/**
+ * Lays out a React element, HTML string, or Takumi node tree without painting it.
+ *
+ * Same input handling, CSS, emoji, and image pipeline as {@link render}, on the same default
+ * renderer, so fonts registered for rendering measure too.
+ *
+ * @example
+ * ```tsx
+ * import { measure } from "takumi-js";
+ *
+ * const { width, height } = await measure(<span tw="text-xl">Hello World</span>);
+ * ```
+ *
+ * @returns A promise that resolves to the measured node tree.
+ */
+declare function measure(element: RenderInput, options?: RenderOptions): Promise<napi.MeasuredNode>;
 /**
  * Renders a React element, HTML string, or Takumi node tree into a vector SVG
  * document string.
@@ -146,4 +162,4 @@ declare function renderSvg(element: RenderInput, options?: RenderSvgOptions): Pr
  */
 declare function renderAnimation(options: RenderAnimationOptions): Promise<Buffer<ArrayBuffer> | Uint8Array<ArrayBuffer>>;
 //#endregion
-export { RenderOptions as a, renderAnimation as c, RenderInput as i, renderSvg as l, ImagesInput as n, RenderSvgOptions as o, RenderAnimationOptions as r, render as s, AnimationScene as t };
+export { RenderOptions as a, render as c, RenderInput as i, renderAnimation as l, ImagesInput as n, RenderSvgOptions as o, RenderAnimationOptions as r, measure as s, AnimationScene as t, renderSvg as u };

package/dist/{render-B1HYpcq6.mjs → render-DNAu8Luv.mjs}

@@ -113,6 +113,24 @@ function mergeCss(options, extra) {
 	if (options?.stylesheets !== void 0) warnStylesheetsDeprecated();
 	return [...options?.css !== void 0 ? isCssList(options.css) ? options.css : [options.css] : options?.stylesheets ?? [], ...extra];
 }
+/** Resolves the renderer, node tree, and backend options, images and CSS merged in, a single scene needs. */
+async function prepareScene(element, options) {
+	options?.signal?.throwIfAborted();
+	const renderer = await resolveRenderer(options);
+	const { node, css } = await resolveContent(element, options);
+	const images = await collectImages(node, options);
+	options?.signal?.throwIfAborted();
+	const { css: _, stylesheets: _alias, ...forward } = options ?? {};
+	return {
+		renderer,
+		node,
+		options: {
+			...forward,
+			images,
+			css: mergeCss(options, css)
+		}
+	};
+}
 /**
 * Renders a React element, HTML string, or Takumi node tree into an image.
 *
@@ -134,17 +152,27 @@ function mergeCss(options, extra) {
 * @returns A promise that resolves to the rendered image data (Buffer/Uint8Array).
 */
 async function render(element, options) {
-	options?.signal?.throwIfAborted();
-	const renderer = await resolveRenderer(options);
-	const { node, css: extractedCss } = await resolveContent(element, options);
-	const images = await collectImages(node, options);
-	options?.signal?.throwIfAborted();
-	const { css: _, stylesheets: _alias, ...forward } = options ?? {};
-	return renderer.render(node, {
-		...forward,
-		images,
-		css: mergeCss(options, extractedCss)
-	});
+	const scene = await prepareScene(element, options);
+	return scene.renderer.render(scene.node, scene.options);
+}
+/**
+* Lays out a React element, HTML string, or Takumi node tree without painting it.
+*
+* Same input handling, CSS, emoji, and image pipeline as {@link render}, on the same default
+* renderer, so fonts registered for rendering measure too.
+*
+* @example
+* ```tsx
+* import { measure } from "takumi-js";
+*
+* const { width, height } = await measure(<span tw="text-xl">Hello World</span>);
+* ```
+*
+* @returns A promise that resolves to the measured node tree.
+*/
+async function measure(element, options) {
+	const scene = await prepareScene(element, options);
+	return scene.renderer.measure(scene.node, scene.options);
 }
 /**
 * Renders a React element, HTML string, or Takumi node tree into a vector SVG
@@ -167,17 +195,8 @@ async function render(element, options) {
 * @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, css: extractedCss } = await resolveContent(element, options);
-	const images = await collectImages(node, options);
-	options?.signal?.throwIfAborted();
-	const { css: _, stylesheets: _alias, ...forward } = options ?? {};
-	return renderer.renderSvg(node, {
-		...forward,
-		images,
-		css: mergeCss(options, extractedCss)
-	});
+	const scene = await prepareScene(element, options);
+	return scene.renderer.renderSvg(scene.node, scene.options);
 }
 /**
 * Renders a sequence of scenes into an animated image (WebP / APNG / GIF).
@@ -229,4 +248,4 @@ async function renderAnimation(options) {
 	});
 }
 //#endregion
-export { setGlyphCacheMaxBytes as i, renderAnimation as n, renderSvg as r, render as t };
+export { setGlyphCacheMaxBytes as a, renderSvg as i, render as n, renderAnimation as r, measure as t };

package/dist/{render-BIjyc8uU.d.cts → render-DRoDMAA1.d.cts}

@@ -99,6 +99,22 @@ type RenderInput = ReactNode | ReactElementLike | Node | string;
  * @returns A promise that resolves to the rendered image data (Buffer/Uint8Array).
  */
 declare function render(element: RenderInput, options?: RenderOptions): Promise<Buffer<ArrayBuffer> | Uint8Array<ArrayBuffer>>;
+/**
+ * Lays out a React element, HTML string, or Takumi node tree without painting it.
+ *
+ * Same input handling, CSS, emoji, and image pipeline as {@link render}, on the same default
+ * renderer, so fonts registered for rendering measure too.
+ *
+ * @example
+ * ```tsx
+ * import { measure } from "takumi-js";
+ *
+ * const { width, height } = await measure(<span tw="text-xl">Hello World</span>);
+ * ```
+ *
+ * @returns A promise that resolves to the measured node tree.
+ */
+declare function measure(element: RenderInput, options?: RenderOptions): Promise<napi.MeasuredNode>;
 /**
  * Renders a React element, HTML string, or Takumi node tree into a vector SVG
  * document string.
@@ -146,4 +162,4 @@ declare function renderSvg(element: RenderInput, options?: RenderSvgOptions): Pr
  */
 declare function renderAnimation(options: RenderAnimationOptions): Promise<Buffer<ArrayBuffer> | Uint8Array<ArrayBuffer>>;
 //#endregion
-export { RenderOptions as a, renderAnimation as c, RenderInput as i, renderSvg as l, ImagesInput as n, RenderSvgOptions as o, RenderAnimationOptions as r, render as s, AnimationScene as t };
+export { RenderOptions as a, render as c, RenderInput as i, renderAnimation as l, ImagesInput as n, RenderSvgOptions as o, RenderAnimationOptions as r, measure as s, AnimationScene as t, renderSvg as u };

package/dist/response.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_render = require("./render-B2cdtVWB.cjs");
+const require_render = require("./render-BmM58jcW.cjs");
 //#region src/response/index.ts
 const contentTypeMap = {
 	png: "image/png",
@@ -15,7 +15,8 @@ function defaultErrorHandler(error) {
 	console.error("Failed to render image.");
 	console.error(error);
 }
-function buildImageResponse(element, options) {
+/** Streams the rendered image; `ready` settles once the render finishes or fails. */
+function renderStream(element, options) {
 	let resolveReady;
 	let rejectReady;
 	const ready = new Promise((resolve, reject) => {
@@ -23,30 +24,21 @@ function buildImageResponse(element, options) {
 		rejectReady = reject;
 	});
 	ready.catch(() => {});
-	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
-	});
+	return {
+		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);
+			}
+		} }),
+		ready
+	};
 }
 /**
 * A universal ImageResponse class for generating images in API routes.
@@ -74,9 +66,15 @@ function buildImageResponse(element, options) {
 var ImageResponse = class extends Response {
 	ready;
 	constructor(component, options) {
-		const response = buildImageResponse(component, options);
-		super(response.body, response);
-		this.ready = response.ready;
+		const { stream, ready } = renderStream(component, options);
+		const headers = new Headers(options?.headers);
+		if (!headers.get("content-type")) headers.set("content-type", contentTypeMap[options?.format ?? "png"]);
+		super(stream, {
+			headers,
+			status: options?.status,
+			statusText: options?.statusText
+		});
+		this.ready = ready;
 	}
 };
 //#endregion

package/dist/response.d.cts

@@ -1,4 +1,4 @@
-import { a as RenderOptions, i as RenderInput } from "./render-BIjyc8uU.cjs";
+import { a as RenderOptions, i as RenderInput } from "./render-DRoDMAA1.cjs";
 //#region src/response/index.d.ts
 type ImageResponseResult = Response & {
   readonly ready: Promise<void>;

package/dist/response.d.mts

@@ -1,4 +1,4 @@
-import { a as RenderOptions, i as RenderInput } from "./render-C-wS8FET.mjs";
+import { a as RenderOptions, i as RenderInput } from "./render-D36x-iF4.mjs";
 //#region src/response/index.d.ts
 type ImageResponseResult = Response & {
   readonly ready: Promise<void>;

package/dist/response.mjs

@@ -1,4 +1,4 @@
-import { t as render } from "./render-B1HYpcq6.mjs";
+import { n as render } from "./render-DNAu8Luv.mjs";
 //#region src/response/index.ts
 const contentTypeMap = {
 	png: "image/png",
@@ -11,7 +11,8 @@ function defaultErrorHandler(error) {
 	console.error("Failed to render image.");
 	console.error(error);
 }
-function buildImageResponse(element, options) {
+/** Streams the rendered image; `ready` settles once the render finishes or fails. */
+function renderStream(element, options) {
 	let resolveReady;
 	let rejectReady;
 	const ready = new Promise((resolve, reject) => {
@@ -19,30 +20,21 @@ function buildImageResponse(element, options) {
 		rejectReady = reject;
 	});
 	ready.catch(() => {});
-	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
-	});
+	return {
+		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);
+			}
+		} }),
+		ready
+	};
 }
 /**
 * A universal ImageResponse class for generating images in API routes.
@@ -70,9 +62,15 @@ function buildImageResponse(element, options) {
 var ImageResponse = class extends Response {
 	ready;
 	constructor(component, options) {
-		const response = buildImageResponse(component, options);
-		super(response.body, response);
-		this.ready = response.ready;
+		const { stream, ready } = renderStream(component, options);
+		const headers = new Headers(options?.headers);
+		if (!headers.get("content-type")) headers.set("content-type", contentTypeMap[options?.format ?? "png"]);
+		super(stream, {
+			headers,
+			status: options?.status,
+			statusText: options?.statusText
+		});
+		this.ready = ready;
 	}
 };
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "takumi-js",
-  "version": "2.13.7",
+  "version": "2.15.0",
   "description": "Render OG images from JSX, HTML, and CSS. No headless browser.",
   "keywords": [
     "animated-webp",
@@ -238,15 +238,15 @@
     "publish-lint": "attw --pack . && publint --strict ."
   },
   "dependencies": {
-    "@takumi-rs/core": "2.13.7",
-    "@takumi-rs/helpers": "2.13.7",
-    "@takumi-rs/wasm": "2.13.7"
+    "@takumi-rs/core": "2.15.0",
+    "@takumi-rs/helpers": "2.15.0",
+    "@takumi-rs/wasm": "2.15.0"
   },
   "devDependencies": {
-    "@types/bun": "^1.4.0",
+    "@types/bun": "^1.4.1",
     "@types/react": "19.2.18",
     "react": "^19.2.8",
-    "tsdown": "0.22.14",
+    "tsdown": "0.23.0",
     "unrun": "^0.3.1"
   },
   "engines": {