@codehz/draw-call 0.1.0

package/index.mjs

@@ -0,0 +1,684 @@
+//#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;
+}
+
+//#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";
+}
+function createCanvas(options) {
+	const { width, height, pixelRatio = 1 } = options;
+	let canvas;
+	if (options.canvas) canvas = options.canvas;
+	else if (isBrowser()) {
+		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);
+	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) {
+			if ("toDataURL" in canvas && typeof canvas.toDataURL === "function") return canvas.toDataURL(type, quality);
+			throw new Error("toDataURL not supported");
+		},
+		async 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
+function Box(props) {
+	return {
+		type: "box",
+		...props
+	};
+}
+
+//#endregion
+//#region src/components/Stack.ts
+function Stack(props) {
+	return {
+		type: "stack",
+		...props
+	};
+}
+
+//#endregion
+//#region src/components/Text.ts
+function Text(props) {
+	return {
+		type: "text",
+		...props
+	};
+}
+
+//#endregion
+export { Box, Stack, Text, computeLayout, createCanvas, createCanvasAsync, createCanvasMeasureContext, linearGradient, radialGradient };