@codehz/draw-call 0.1.0 → 0.1.2

package/index.mjs

@@ -1,586 +1,21 @@
-//#region src/types/base.ts
-function linearGradient(angle, ...stops) {
-	return {
-		type: "linear-gradient",
-		angle,
-		stops: stops.map((stop, index) => {
-			if (typeof stop === "string") return {
-				offset: stops.length > 1 ? index / (stops.length - 1) : 0,
-				color: stop
-			};
-			return {
-				offset: stop[0],
-				color: stop[1]
-			};
-		})
-	};
-}
-function radialGradient(options, ...stops) {
-	const colorStops = stops.map((stop, index) => {
-		if (typeof stop === "string") return {
-			offset: stops.length > 1 ? index / (stops.length - 1) : 0,
-			color: stop
-		};
-		return {
-			offset: stop[0],
-			color: stop[1]
-		};
-	});
-	return {
-		type: "radial-gradient",
-		...options,
-		stops: colorStops
-	};
-}
-function normalizeSpacing(value) {
-	if (value === void 0) return {
-		top: 0,
-		right: 0,
-		bottom: 0,
-		left: 0
-	};
-	if (typeof value === "number") return {
-		top: value,
-		right: value,
-		bottom: value,
-		left: value
-	};
-	return {
-		top: value.top ?? 0,
-		right: value.right ?? 0,
-		bottom: value.bottom ?? 0,
-		left: value.left ?? 0
-	};
-}
-function normalizeBorderRadius(value) {
-	if (value === void 0) return [
-		0,
-		0,
-		0,
-		0
-	];
-	if (typeof value === "number") return [
-		value,
-		value,
-		value,
-		value
-	];
-	return value;
-}
-
-//#endregion
-//#region src/types/layout.ts
-function resolveSize(size, available, auto) {
-	if (size === void 0 || size === "auto") return auto;
-	if (size === "fill") return available;
-	if (typeof size === "number") return size;
-	return available * parseFloat(size) / 100;
-}
-function sizeNeedsParent(size) {
-	if (size === void 0 || size === "auto") return false;
-	if (size === "fill") return true;
-	if (typeof size === "string" && size.endsWith("%")) return true;
-	return false;
-}
+import { a as radialGradient, i as linearGradient, n as computeLayout, r as createCanvasMeasureContext, t as renderNode } from "./render.mjs";
 
-//#endregion
-//#region src/layout/measure.ts
-function buildFontString(font) {
-	return `${font.style ?? "normal"} ${font.weight ?? "normal"} ${font.size ?? 16}px ${font.family ?? "sans-serif"}`;
-}
-function createCanvasMeasureContext(ctx) {
-	return { measureText(text, font) {
-		ctx.font = buildFontString(font);
-		const metrics = ctx.measureText(text);
-		const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
-		return {
-			width: metrics.width,
-			height: height || font.size || 16
-		};
-	} };
-}
-function wrapText(ctx, text, maxWidth, font) {
-	if (maxWidth <= 0) return [text];
-	const lines = [];
-	const paragraphs = text.split("\n");
-	for (const paragraph of paragraphs) {
-		if (paragraph === "") {
-			lines.push("");
-			continue;
-		}
-		const words = paragraph.split(/(\s+)/);
-		let currentLine = "";
-		for (const word of words) {
-			const testLine = currentLine + word;
-			const { width } = ctx.measureText(testLine, font);
-			if (width > maxWidth && currentLine !== "") {
-				lines.push(currentLine.trim());
-				currentLine = word.trimStart();
-			} else currentLine = testLine;
-		}
-		if (currentLine) lines.push(currentLine.trim());
-	}
-	return lines.length > 0 ? lines : [""];
-}
-function truncateText(ctx, text, maxWidth, font, ellipsis = "...") {
-	const { width } = ctx.measureText(text, font);
-	if (width <= maxWidth) return text;
-	const availableWidth = maxWidth - ctx.measureText(ellipsis, font).width;
-	if (availableWidth <= 0) return ellipsis;
-	let left = 0;
-	let right = text.length;
-	while (left < right) {
-		const mid = Math.floor((left + right + 1) / 2);
-		const truncated = text.slice(0, mid);
-		const { width: truncatedWidth } = ctx.measureText(truncated, font);
-		if (truncatedWidth <= availableWidth) left = mid;
-		else right = mid - 1;
-	}
-	return text.slice(0, left) + ellipsis;
-}
-
-//#endregion
-//#region src/layout/engine.ts
-function measureIntrinsicSize(element, ctx, availableWidth) {
-	switch (element.type) {
-		case "text": {
-			const font = element.font ?? {};
-			const lineHeightPx = (font.size ?? 16) * (element.lineHeight ?? 1.2);
-			if (element.wrap && availableWidth > 0 && availableWidth < Infinity) {
-				const lines = wrapText(ctx, element.content, availableWidth, font);
-				const { width: maxLineWidth } = lines.reduce((max, line) => {
-					const { width } = ctx.measureText(line, font);
-					return width > max.width ? { width } : max;
-				}, { width: 0 });
-				return {
-					width: maxLineWidth,
-					height: lines.length * lineHeightPx
-				};
-			}
-			const { width, height } = ctx.measureText(element.content, font);
-			return {
-				width,
-				height: Math.max(height, lineHeightPx)
-			};
-		}
-		case "box":
-		case "stack": {
-			const padding = normalizeSpacing(element.padding);
-			const gap = element.type === "box" ? element.gap ?? 0 : 0;
-			const direction = element.direction ?? "row";
-			const isRow = direction === "row" || direction === "row-reverse";
-			let contentWidth = 0;
-			let contentHeight = 0;
-			const children = element.children ?? [];
-			if (element.type === "stack") for (const child of children) {
-				const childMargin = normalizeSpacing(child.margin);
-				const childSize = measureIntrinsicSize(child, ctx, availableWidth - padding.left - padding.right - childMargin.left - childMargin.right);
-				contentWidth = Math.max(contentWidth, childSize.width + childMargin.left + childMargin.right);
-				contentHeight = Math.max(contentHeight, childSize.height + childMargin.top + childMargin.bottom);
-			}
-			else for (let i = 0; i < children.length; i++) {
-				const child = children[i];
-				const childMargin = normalizeSpacing(child.margin);
-				const childSize = measureIntrinsicSize(child, ctx, availableWidth - padding.left - padding.right - childMargin.left - childMargin.right);
-				if (isRow) {
-					contentWidth += childSize.width + childMargin.left + childMargin.right;
-					contentHeight = Math.max(contentHeight, childSize.height + childMargin.top + childMargin.bottom);
-					if (i > 0) contentWidth += gap;
-				} else {
-					contentHeight += childSize.height + childMargin.top + childMargin.bottom;
-					contentWidth = Math.max(contentWidth, childSize.width + childMargin.left + childMargin.right);
-					if (i > 0) contentHeight += gap;
-				}
-			}
-			const intrinsicWidth = contentWidth + padding.left + padding.right;
-			const intrinsicHeight = contentHeight + padding.top + padding.bottom;
-			return {
-				width: typeof element.width === "number" ? element.width : intrinsicWidth,
-				height: typeof element.height === "number" ? element.height : intrinsicHeight
-			};
-		}
-		case "image": return {
-			width: 0,
-			height: 0
-		};
-		case "shape": return {
-			width: 0,
-			height: 0
-		};
-		default: return {
-			width: 0,
-			height: 0
-		};
-	}
-}
-function computeLayout(element, ctx, constraints, x = 0, y = 0) {
-	const margin = normalizeSpacing(element.margin);
-	const padding = normalizeSpacing("padding" in element ? element.padding : void 0);
-	const availableWidth = constraints.maxWidth - margin.left - margin.right;
-	const availableHeight = constraints.maxHeight - margin.top - margin.bottom;
-	const intrinsic = measureIntrinsicSize(element, ctx, availableWidth);
-	let width = constraints.minWidth === constraints.maxWidth && constraints.minWidth > 0 ? constraints.maxWidth - margin.left - margin.right : resolveSize(element.width, availableWidth, intrinsic.width);
-	let height = constraints.minHeight === constraints.maxHeight && constraints.minHeight > 0 ? constraints.maxHeight - margin.top - margin.bottom : resolveSize(element.height, availableHeight, intrinsic.height);
-	if (element.minWidth !== void 0) width = Math.max(width, element.minWidth);
-	if (element.maxWidth !== void 0) width = Math.min(width, element.maxWidth);
-	if (element.minHeight !== void 0) height = Math.max(height, element.minHeight);
-	if (element.maxHeight !== void 0) height = Math.min(height, element.maxHeight);
-	const actualX = x + margin.left;
-	const actualY = y + margin.top;
-	const contentX = actualX + padding.left;
-	const contentY = actualY + padding.top;
-	const contentWidth = width - padding.left - padding.right;
-	const contentHeight = height - padding.top - padding.bottom;
-	const node = {
-		element,
-		layout: {
-			x: actualX,
-			y: actualY,
-			width,
-			height,
-			contentX,
-			contentY,
-			contentWidth,
-			contentHeight
-		},
-		children: []
-	};
-	if (element.type === "text") {
-		const font = element.font ?? {};
-		if (element.wrap && contentWidth > 0) {
-			let lines = wrapText(ctx, element.content, contentWidth, font);
-			if (element.maxLines && lines.length > element.maxLines) {
-				lines = lines.slice(0, element.maxLines);
-				if (element.ellipsis && lines.length > 0) lines[lines.length - 1] = truncateText(ctx, lines[lines.length - 1], contentWidth, font);
-			}
-			node.lines = lines;
-		} else {
-			let text = element.content;
-			if (element.ellipsis && contentWidth > 0) text = truncateText(ctx, text, contentWidth, font);
-			node.lines = [text];
-		}
-	}
-	if (element.type === "box" || element.type === "stack") {
-		const children = element.children ?? [];
-		if (element.type === "stack") for (const child of children) {
-			const childNode = computeLayout(child, ctx, {
-				minWidth: 0,
-				maxWidth: contentWidth,
-				minHeight: 0,
-				maxHeight: contentHeight
-			}, contentX, contentY);
-			node.children.push(childNode);
-		}
-		else {
-			const direction = element.direction ?? "row";
-			const justify = element.justify ?? "start";
-			const align = element.align ?? "stretch";
-			const gap = element.gap ?? 0;
-			const isRow = direction === "row" || direction === "row-reverse";
-			const isReverse = direction === "row-reverse" || direction === "column-reverse";
-			const childInfos = [];
-			let totalFixed = 0;
-			let totalFlex = 0;
-			let totalGap = children.length > 1 ? gap * (children.length - 1) : 0;
-			for (const child of children) {
-				const childMargin = normalizeSpacing(child.margin);
-				const childFlex = child.flex ?? 0;
-				if (childFlex > 0) {
-					totalFlex += childFlex;
-					childInfos.push({
-						element: child,
-						width: 0,
-						height: 0,
-						flex: childFlex,
-						margin: childMargin
-					});
-				} else {
-					const size = measureIntrinsicSize(child, ctx, isRow ? contentWidth - childMargin.left - childMargin.right : contentWidth - childMargin.left - childMargin.right);
-					const shouldStretchWidth = !isRow && child.width === void 0 && align === "stretch";
-					const shouldStretchHeight = isRow && child.height === void 0 && align === "stretch";
-					let w = sizeNeedsParent(child.width) ? resolveSize(child.width, contentWidth - childMargin.left - childMargin.right, size.width) : resolveSize(child.width, 0, size.width);
-					let h = sizeNeedsParent(child.height) ? resolveSize(child.height, contentHeight - childMargin.top - childMargin.bottom, size.height) : resolveSize(child.height, 0, size.height);
-					if (shouldStretchWidth) w = contentWidth - childMargin.left - childMargin.right;
-					if (shouldStretchHeight) h = contentHeight - childMargin.top - childMargin.bottom;
-					if (isRow) totalFixed += w + childMargin.left + childMargin.right;
-					else totalFixed += h + childMargin.top + childMargin.bottom;
-					childInfos.push({
-						element: child,
-						width: w,
-						height: h,
-						flex: 0,
-						margin: childMargin
-					});
-				}
-			}
-			const availableForFlex = isRow ? Math.max(0, contentWidth - totalFixed - totalGap) : Math.max(0, contentHeight - totalFixed - totalGap);
-			for (const info of childInfos) if (info.flex > 0) {
-				const flexSize = availableForFlex * info.flex / totalFlex;
-				if (isRow) {
-					info.width = flexSize;
-					const size = measureIntrinsicSize(info.element, ctx, flexSize);
-					info.height = sizeNeedsParent(info.element.height) ? resolveSize(info.element.height, contentHeight - info.margin.top - info.margin.bottom, size.height) : resolveSize(info.element.height, 0, size.height);
-				} else {
-					info.height = flexSize;
-					const size = measureIntrinsicSize(info.element, ctx, contentWidth - info.margin.left - info.margin.right);
-					info.width = sizeNeedsParent(info.element.width) ? resolveSize(info.element.width, contentWidth - info.margin.left - info.margin.right, size.width) : resolveSize(info.element.width, 0, size.width);
-				}
-			}
-			const totalSize = childInfos.reduce((sum, info) => {
-				if (isRow) return sum + info.width + info.margin.left + info.margin.right;
-				else return sum + info.height + info.margin.top + info.margin.bottom;
-			}, 0) + totalGap;
-			const freeSpace = (isRow ? contentWidth : contentHeight) - totalSize;
-			let mainStart = 0;
-			let mainGap = gap;
-			switch (justify) {
-				case "start":
-					mainStart = 0;
-					break;
-				case "end":
-					mainStart = freeSpace;
-					break;
-				case "center":
-					mainStart = freeSpace / 2;
-					break;
-				case "space-between":
-					mainStart = 0;
-					if (children.length > 1) mainGap = gap + freeSpace / (children.length - 1);
-					break;
-				case "space-around":
-					if (children.length > 0) {
-						const spacing = freeSpace / children.length;
-						mainStart = spacing / 2;
-						mainGap = gap + spacing;
-					}
-					break;
-				case "space-evenly":
-					if (children.length > 0) {
-						const spacing = freeSpace / (children.length + 1);
-						mainStart = spacing;
-						mainGap = gap + spacing;
-					}
-					break;
-			}
-			let mainOffset = mainStart;
-			const orderedInfos = isReverse ? [...childInfos].reverse() : childInfos;
-			for (let i = 0; i < orderedInfos.length; i++) {
-				const info = orderedInfos[i];
-				const crossAxisSize = isRow ? contentHeight : contentWidth;
-				const childCrossSize = isRow ? info.height + info.margin.top + info.margin.bottom : info.width + info.margin.left + info.margin.right;
-				let crossOffset = 0;
-				switch (info.element.alignSelf === "auto" || info.element.alignSelf === void 0 ? align : info.element.alignSelf) {
-					case "start":
-						crossOffset = 0;
-						break;
-					case "end":
-						crossOffset = crossAxisSize - childCrossSize;
-						break;
-					case "center":
-						crossOffset = (crossAxisSize - childCrossSize) / 2;
-						break;
-					case "stretch":
-						crossOffset = 0;
-						if (isRow && info.element.height === void 0) info.height = crossAxisSize - info.margin.top - info.margin.bottom;
-						else if (!isRow && info.element.width === void 0) info.width = crossAxisSize - info.margin.left - info.margin.right;
-						break;
-					case "baseline":
-						crossOffset = 0;
-						break;
-				}
-				const childX = isRow ? contentX + mainOffset + info.margin.left : contentX + crossOffset + info.margin.left;
-				const childY = isRow ? contentY + crossOffset + info.margin.top : contentY + mainOffset + info.margin.top;
-				const stretchWidth = !isRow && info.element.width === void 0 && align === "stretch" ? contentWidth - info.margin.left - info.margin.right : null;
-				const stretchHeight = isRow && info.element.height === void 0 && align === "stretch" ? contentHeight - info.margin.top - info.margin.bottom : null;
-				const childNode = computeLayout(info.element, ctx, {
-					minWidth: stretchWidth ?? 0,
-					maxWidth: stretchWidth ?? info.width,
-					minHeight: stretchHeight ?? 0,
-					maxHeight: stretchHeight ?? info.height
-				}, childX - info.margin.left, childY - info.margin.top);
-				node.children.push(childNode);
-				mainOffset += isRow ? info.width + info.margin.left + info.margin.right : info.height + info.margin.top + info.margin.bottom;
-				if (i < orderedInfos.length - 1) mainOffset += mainGap;
-			}
-			if (isReverse) node.children.reverse();
-		}
-	}
-	return node;
-}
-
-//#endregion
-//#region src/render/engine.ts
-function isGradientDescriptor(color) {
-	return typeof color === "object" && color !== null && "type" in color && (color.type === "linear-gradient" || color.type === "radial-gradient");
-}
-function resolveGradient(ctx, descriptor, x, y, width, height) {
-	if (descriptor.type === "linear-gradient") {
-		const angleRad = (descriptor.angle - 90) * Math.PI / 180;
-		const centerX = x + width / 2;
-		const centerY = y + height / 2;
-		const diagLength = Math.sqrt(width * width + height * height) / 2;
-		const x0 = centerX - Math.cos(angleRad) * diagLength;
-		const y0 = centerY - Math.sin(angleRad) * diagLength;
-		const x1 = centerX + Math.cos(angleRad) * diagLength;
-		const y1 = centerY + Math.sin(angleRad) * diagLength;
-		const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-		for (const stop of descriptor.stops) gradient.addColorStop(stop.offset, stop.color);
-		return gradient;
-	} else {
-		const diagLength = Math.sqrt(width * width + height * height);
-		const startX = x + (descriptor.startX ?? .5) * width;
-		const startY = y + (descriptor.startY ?? .5) * height;
-		const startRadius = (descriptor.startRadius ?? 0) * diagLength;
-		const endX = x + (descriptor.endX ?? .5) * width;
-		const endY = y + (descriptor.endY ?? .5) * height;
-		const endRadius = (descriptor.endRadius ?? .5) * diagLength;
-		const gradient = ctx.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
-		for (const stop of descriptor.stops) gradient.addColorStop(stop.offset, stop.color);
-		return gradient;
-	}
-}
-function resolveColor(ctx, color, x, y, width, height) {
-	if (isGradientDescriptor(color)) return resolveGradient(ctx, color, x, y, width, height);
-	return color;
-}
-function roundRectPath(ctx, x, y, width, height, radius) {
-	const [tl, tr, br, bl] = radius;
-	ctx.beginPath();
-	ctx.moveTo(x + tl, y);
-	ctx.lineTo(x + width - tr, y);
-	ctx.quadraticCurveTo(x + width, y, x + width, y + tr);
-	ctx.lineTo(x + width, y + height - br);
-	ctx.quadraticCurveTo(x + width, y + height, x + width - br, y + height);
-	ctx.lineTo(x + bl, y + height);
-	ctx.quadraticCurveTo(x, y + height, x, y + height - bl);
-	ctx.lineTo(x, y + tl);
-	ctx.quadraticCurveTo(x, y, x + tl, y);
-	ctx.closePath();
-}
-function applyShadow(ctx, shadow) {
-	if (shadow) {
-		ctx.shadowOffsetX = shadow.offsetX ?? 0;
-		ctx.shadowOffsetY = shadow.offsetY ?? 0;
-		ctx.shadowBlur = shadow.blur ?? 0;
-		ctx.shadowColor = shadow.color ?? "rgba(0,0,0,0.5)";
-	} else {
-		ctx.shadowOffsetX = 0;
-		ctx.shadowOffsetY = 0;
-		ctx.shadowBlur = 0;
-		ctx.shadowColor = "transparent";
-	}
-}
-function clearShadow(ctx) {
-	ctx.shadowOffsetX = 0;
-	ctx.shadowOffsetY = 0;
-	ctx.shadowBlur = 0;
-	ctx.shadowColor = "transparent";
-}
-function renderBox(ctx, node) {
-	const element = node.element;
-	const { x, y, width, height } = node.layout;
-	const border = element.border;
-	const radius = normalizeBorderRadius(border?.radius);
-	const hasRadius = radius.some((r) => r > 0);
-	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = element.opacity;
-	if (element.shadow && element.background) applyShadow(ctx, element.shadow);
-	if (element.background) {
-		ctx.fillStyle = resolveColor(ctx, element.background, x, y, width, height);
-		if (hasRadius) {
-			roundRectPath(ctx, x, y, width, height, radius);
-			ctx.fill();
-		} else ctx.fillRect(x, y, width, height);
-		clearShadow(ctx);
-	}
-	if (border && border.width && border.width > 0) {
-		ctx.strokeStyle = border.color ? resolveColor(ctx, border.color, x, y, width, height) : "#000";
-		ctx.lineWidth = border.width;
-		if (hasRadius) {
-			roundRectPath(ctx, x, y, width, height, radius);
-			ctx.stroke();
-		} else ctx.strokeRect(x, y, width, height);
-	}
-	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
-}
-function renderText(ctx, node) {
-	const element = node.element;
-	const { contentX, contentY, contentWidth, contentHeight } = node.layout;
-	const lines = node.lines ?? [element.content];
-	const font = element.font ?? {};
-	const lineHeightPx = (font.size ?? 16) * (element.lineHeight ?? 1.2);
-	ctx.font = buildFontString(font);
-	ctx.fillStyle = element.color ? resolveColor(ctx, element.color, contentX, contentY, contentWidth, contentHeight) : "#000";
-	let textAlign = "left";
-	if (element.align === "center") textAlign = "center";
-	else if (element.align === "right") textAlign = "right";
-	ctx.textAlign = textAlign;
-	ctx.textBaseline = "top";
-	const totalTextHeight = lines.length * lineHeightPx;
-	let verticalOffset = 0;
-	if (element.verticalAlign === "middle") verticalOffset = (contentHeight - totalTextHeight) / 2;
-	else if (element.verticalAlign === "bottom") verticalOffset = contentHeight - totalTextHeight;
-	let textX = contentX;
-	if (element.align === "center") textX = contentX + contentWidth / 2;
-	else if (element.align === "right") textX = contentX + contentWidth;
-	if (element.shadow) applyShadow(ctx, element.shadow);
-	for (let i = 0; i < lines.length; i++) {
-		const lineY = contentY + verticalOffset + i * lineHeightPx;
-		if (element.stroke) {
-			ctx.strokeStyle = resolveColor(ctx, element.stroke.color, contentX, contentY, contentWidth, contentHeight);
-			ctx.lineWidth = element.stroke.width;
-			ctx.strokeText(lines[i], textX, lineY);
-		}
-		ctx.fillText(lines[i], textX, lineY);
-	}
-	if (element.shadow) clearShadow(ctx);
-}
-function renderNode(ctx, node) {
-	const element = node.element;
-	switch (element.type) {
-		case "box":
-		case "stack": {
-			renderBox(ctx, node);
-			const shouldClip = element.clip === true;
-			if (shouldClip) {
-				ctx.save();
-				const { x, y, width, height } = node.layout;
-				roundRectPath(ctx, x, y, width, height, normalizeBorderRadius(element.border?.radius));
-				ctx.clip();
-			}
-			for (const child of node.children) renderNode(ctx, child);
-			if (shouldClip) ctx.restore();
-			break;
-		}
-		case "text":
-			renderText(ctx, node);
-			break;
-		case "image": break;
-		case "shape": break;
-	}
-}
-
-//#endregion
 //#region src/canvas.ts
-async function loadNapiCanvas() {
-	try {
-		return await import("@napi-rs/canvas");
-	} catch {
-		return null;
-	}
-}
-function isBrowser() {
-	return typeof window !== "undefined" && typeof document !== "undefined";
-}
+/**
+* 创建适用于浏览器环境的 Canvas
+*
+* 在浏览器环境中使用，支持传入已有的 canvas 实例
+*/
 function createCanvas(options) {
 	const { width, height, pixelRatio = 1 } = options;
 	let canvas;
 	if (options.canvas) canvas = options.canvas;
-	else if (isBrowser()) {
+	else {
 		const el = document.createElement("canvas");
 		el.width = width * pixelRatio;
 		el.height = height * pixelRatio;
 		canvas = el;
-	} else throw new Error("No canvas provided. In Node.js/Bun environment, use createCanvasAsync() or provide a canvas instance.");
+	}
 	const ctx = canvas.getContext("2d");
 	if (!ctx) throw new Error("Failed to get 2d context");
 	if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
@@ -589,6 +24,7 @@ function createCanvas(options) {
 		width,
 		height,
 		pixelRatio,
+		canvas,
 		render(element) {
 			const layoutTree = computeLayout(element, measureCtx, {
 				minWidth: 0,
@@ -609,49 +45,12 @@ function createCanvas(options) {
 			if ("toDataURL" in canvas && typeof canvas.toDataURL === "function") return canvas.toDataURL(type, quality);
 			throw new Error("toDataURL not supported");
 		},
-		async toBuffer(type = "image/png") {
+		toBuffer(type = "image/png") {
 			if ("toBuffer" in canvas && typeof canvas.toBuffer === "function") return canvas.toBuffer(type);
 			throw new Error("toBuffer not supported in this environment");
 		}
 	};
 }
-async function createCanvasAsync(options) {
-	const { width, height, pixelRatio = 1 } = options;
-	if (isBrowser()) return createCanvas(options);
-	const napiCanvas = await loadNapiCanvas();
-	if (!napiCanvas) throw new Error("@napi-rs/canvas is required in Node.js/Bun environment. Install it with: bun add @napi-rs/canvas");
-	const canvas = napiCanvas.createCanvas(width * pixelRatio, height * pixelRatio);
-	const ctx = canvas.getContext("2d");
-	if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
-	const measureCtx = createCanvasMeasureContext(ctx);
-	return {
-		width,
-		height,
-		pixelRatio,
-		render(element) {
-			const layoutTree = computeLayout(element, measureCtx, {
-				minWidth: 0,
-				maxWidth: width,
-				minHeight: 0,
-				maxHeight: height
-			});
-			renderNode(ctx, layoutTree);
-			return layoutTree;
-		},
-		clear() {
-			ctx.clearRect(0, 0, width, height);
-		},
-		getContext() {
-			return ctx;
-		},
-		toDataURL(type, quality) {
-			return canvas.toDataURL(type, quality);
-		},
-		async toBuffer(type = "image/png") {
-			return canvas.toBuffer(type);
-		}
-	};
-}
 
 //#endregion
 //#region src/components/Box.ts
@@ -662,6 +61,15 @@ function Box(props) {
 	};
 }
 
+//#endregion
+//#region src/components/Image.ts
+function Image(props) {
+	return {
+		type: "image",
+		...props
+	};
+}
+
 //#endregion
 //#region src/components/Stack.ts
 function Stack(props) {
@@ -671,6 +79,53 @@ function Stack(props) {
 	};
 }
 
+//#endregion
+//#region src/components/Svg.ts
+function Svg(props) {
+	return {
+		type: "svg",
+		...props
+	};
+}
+const svg = {
+	rect: (props) => ({
+		type: "rect",
+		...props
+	}),
+	circle: (props) => ({
+		type: "circle",
+		...props
+	}),
+	ellipse: (props) => ({
+		type: "ellipse",
+		...props
+	}),
+	line: (props) => ({
+		type: "line",
+		...props
+	}),
+	polyline: (props) => ({
+		type: "polyline",
+		...props
+	}),
+	polygon: (props) => ({
+		type: "polygon",
+		...props
+	}),
+	path: (props) => ({
+		type: "path",
+		...props
+	}),
+	text: (props) => ({
+		type: "text",
+		...props
+	}),
+	g: (props) => ({
+		type: "g",
+		...props
+	})
+};
+
 //#endregion
 //#region src/components/Text.ts
 function Text(props) {
@@ -681,4 +136,4 @@ function Text(props) {
 }
 
 //#endregion
-export { Box, Stack, Text, computeLayout, createCanvas, createCanvasAsync, createCanvasMeasureContext, linearGradient, radialGradient };
+export { Box, Image, Stack, Svg, Text, computeLayout, createCanvas, createCanvasMeasureContext, linearGradient, radialGradient, svg };