@codehz/draw-call 0.2.2 → 0.4.1

package/browser/index.cjs

@@ -0,0 +1,2058 @@
+
+//#region src/compat/index.ts
+const DOMMatrix = window.DOMMatrix;
+const Path2D = window.Path2D;
+function createRawCanvas(width, height) {
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	return canvas;
+}
+
+//#endregion
+//#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/layout/components/box.ts
+function calcEffectiveSize(element, padding, availableWidth) {
+	return {
+		width: typeof element.width === "number" ? element.width - padding.left - padding.right : availableWidth > 0 ? availableWidth : 0,
+		height: typeof element.height === "number" ? element.height - padding.top - padding.bottom : 0
+	};
+}
+function collectChildSizes(children, ctx, availableWidth, padding, measureChild) {
+	const childSizes = [];
+	for (const child of children) {
+		const childMargin = normalizeSpacing(child.margin);
+		const childSize = measureChild(child, ctx, availableWidth - padding.left - padding.right - childMargin.left - childMargin.right);
+		childSizes.push({
+			width: childSize.width,
+			height: childSize.height,
+			margin: childMargin
+		});
+	}
+	return childSizes;
+}
+function measureWrappedContent(childSizes, gap, availableMain, isRow) {
+	let currentMain = 0;
+	let currentCross = 0;
+	let totalCross = 0;
+	let maxMain = 0;
+	let lineCount = 0;
+	for (let i = 0; i < childSizes.length; i++) {
+		const { width, height, margin } = childSizes[i];
+		const itemMain = isRow ? width + margin.left + margin.right : height + margin.top + margin.bottom;
+		const itemCross = isRow ? height + margin.top + margin.bottom : width + margin.left + margin.right;
+		if (lineCount > 0 && currentMain + gap + itemMain > availableMain) {
+			totalCross += currentCross;
+			maxMain = Math.max(maxMain, currentMain);
+			lineCount++;
+			currentMain = itemMain;
+			currentCross = itemCross;
+		} else {
+			if (lineCount > 0 || i > 0) currentMain += gap;
+			currentMain += itemMain;
+			currentCross = Math.max(currentCross, itemCross);
+			if (i === 0) lineCount = 1;
+		}
+	}
+	if (childSizes.length > 0) {
+		totalCross += currentCross;
+		maxMain = Math.max(maxMain, currentMain);
+	}
+	if (lineCount > 1) totalCross += gap * (lineCount - 1);
+	return isRow ? {
+		width: maxMain,
+		height: totalCross
+	} : {
+		width: totalCross,
+		height: maxMain
+	};
+}
+/**
+* 测量 Box 元素的固有尺寸
+*/
+function measureBoxSize(element, ctx, availableWidth, measureChild) {
+	const padding = normalizeSpacing(element.padding);
+	const gap = element.gap ?? 0;
+	const direction = element.direction ?? "row";
+	const wrap = element.wrap ?? false;
+	const isRow = direction === "row" || direction === "row-reverse";
+	let contentWidth = 0;
+	let contentHeight = 0;
+	const children = element.children ?? [];
+	const { width: effectiveWidth, height: effectiveHeight } = calcEffectiveSize(element, padding, availableWidth);
+	if (wrap && isRow && effectiveWidth > 0) {
+		const wrapped = measureWrappedContent(collectChildSizes(children, ctx, availableWidth, padding, measureChild), gap, effectiveWidth, true);
+		contentWidth = wrapped.width;
+		contentHeight = wrapped.height;
+	} else if (wrap && !isRow && effectiveHeight > 0) {
+		const wrapped = measureWrappedContent(collectChildSizes(children, ctx, availableWidth, padding, measureChild), gap, effectiveHeight, false);
+		contentWidth = wrapped.width;
+		contentHeight = wrapped.height;
+	} else for (let i = 0; i < children.length; i++) {
+		const child = children[i];
+		const childMargin = normalizeSpacing(child.margin);
+		const childSize = measureChild(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
+	};
+}
+
+//#endregion
+//#region src/layout/components/customDraw.ts
+/**
+* 测量 CustomDraw 元素的固有尺寸
+*/
+function measureCustomDrawSize(element, ctx, availableWidth, measureChild) {
+	if (typeof element.width === "number" && typeof element.height === "number") return {
+		width: element.width,
+		height: element.height
+	};
+	if (element.children && measureChild) return measureChild(element.children, ctx, availableWidth);
+	return {
+		width: 0,
+		height: 0
+	};
+}
+
+//#endregion
+//#region src/layout/components/image.ts
+/**
+* 测量 Image 元素的固有尺寸
+*/
+function measureImageSize(element, _ctx, _availableWidth) {
+	const imageElement = element;
+	if (imageElement.width !== void 0 && imageElement.height !== void 0) return {
+		width: typeof imageElement.width === "number" ? imageElement.width : 0,
+		height: typeof imageElement.height === "number" ? imageElement.height : 0
+	};
+	const src = imageElement.src;
+	if (src) {
+		const imgWidth = "naturalWidth" in src ? src.naturalWidth : "width" in src ? +src.width : 0;
+		const imgHeight = "naturalHeight" in src ? src.naturalHeight : "height" in src ? +src.height : 0;
+		if (imgWidth > 0 && imgHeight > 0) return {
+			width: imgWidth,
+			height: imgHeight
+		};
+	}
+	return {
+		width: 0,
+		height: 0
+	};
+}
+
+//#endregion
+//#region src/layout/components/richtext.ts
+/**
+* 合并 span 样式和元素级别样式
+* 优先级：span 样式 > 元素样式 > 默认值
+* font 属性进行深度合并，允许 span 部分覆盖 element 的 font
+*/
+function mergeSpanStyle(span, elementStyle) {
+	return {
+		font: {
+			...elementStyle.font || {},
+			...span.font || {}
+		},
+		color: span.color ?? elementStyle.color,
+		background: span.background ?? elementStyle.background,
+		underline: span.underline ?? elementStyle.underline ?? false,
+		strikethrough: span.strikethrough ?? elementStyle.strikethrough ?? false
+	};
+}
+/**
+* 测量富文本元素的固有尺寸
+*/
+function measureRichTextSize(element, ctx, availableWidth) {
+	const lineHeight = element.lineHeight ?? 1.2;
+	const elementStyle = {
+		font: element.font,
+		color: element.color,
+		background: element.background,
+		underline: element.underline,
+		strikethrough: element.strikethrough
+	};
+	const richLines = wrapRichText(ctx, element.spans, availableWidth, lineHeight, elementStyle);
+	let maxWidth = 0;
+	let totalHeight = 0;
+	for (const line of richLines) {
+		maxWidth = Math.max(maxWidth, line.width);
+		totalHeight += line.height;
+	}
+	return {
+		width: maxWidth,
+		height: totalHeight
+	};
+}
+/**
+* 将富文本内容拆分为行
+*/
+function wrapRichText(ctx, spans, maxWidth, lineHeightScale = 1.2, elementStyle = {}) {
+	const lines = [];
+	let currentSegments = [];
+	let currentLineWidth = 0;
+	const pushLine = () => {
+		if (currentSegments.length === 0) return;
+		let maxTopDist = 0;
+		let maxBottomDist = 0;
+		let maxLineHeight = 0;
+		for (const seg of currentSegments) {
+			const topDist = seg.ascent - seg.offset;
+			const bottomDist = seg.descent + seg.offset;
+			maxTopDist = Math.max(maxTopDist, topDist);
+			maxBottomDist = Math.max(maxBottomDist, bottomDist);
+			maxLineHeight = Math.max(maxLineHeight, seg.height);
+		}
+		const contentHeight = maxTopDist + maxBottomDist;
+		const finalHeight = Math.max(contentHeight, maxLineHeight);
+		const extra = (finalHeight - contentHeight) / 2;
+		lines.push({
+			segments: [...currentSegments],
+			width: currentLineWidth,
+			height: finalHeight,
+			baseline: maxTopDist + extra
+		});
+		currentSegments = [];
+		currentLineWidth = 0;
+	};
+	for (const span of spans) {
+		const mergedStyle = mergeSpanStyle(span, elementStyle);
+		const font = mergedStyle.font;
+		const lh = (font.size ?? 16) * lineHeightScale;
+		const words = span.text.split(/(\s+)/);
+		for (const word of words) {
+			if (word === "") continue;
+			if (/^\s+$/.test(word)) {
+				const metrics = ctx.measureText(word, font);
+				const wordWidth = metrics.width;
+				if (maxWidth > 0 && currentLineWidth + wordWidth > maxWidth && currentSegments.length > 0) pushLine();
+				currentSegments.push({
+					text: word,
+					font: mergedStyle.font,
+					color: mergedStyle.color,
+					background: mergedStyle.background,
+					underline: mergedStyle.underline,
+					strikethrough: mergedStyle.strikethrough,
+					width: wordWidth,
+					height: lh,
+					ascent: metrics.ascent,
+					descent: metrics.descent,
+					offset: metrics.offset
+				});
+				currentLineWidth += wordWidth;
+			} else {
+				const metrics = ctx.measureText(word, font);
+				const wordWidth = metrics.width;
+				if (maxWidth <= 0 || currentLineWidth + wordWidth <= maxWidth) {
+					currentSegments.push({
+						text: word,
+						font: mergedStyle.font,
+						color: mergedStyle.color,
+						background: mergedStyle.background,
+						underline: mergedStyle.underline,
+						strikethrough: mergedStyle.strikethrough,
+						width: wordWidth,
+						height: lh,
+						ascent: metrics.ascent,
+						descent: metrics.descent,
+						offset: metrics.offset
+					});
+					currentLineWidth += wordWidth;
+				} else {
+					if (currentSegments.length > 0) pushLine();
+					const remainingWidth = maxWidth;
+					let currentPos = 0;
+					while (currentPos < word.length) {
+						let bestLen = 0;
+						for (let len = word.length - currentPos; len > 0; len--) {
+							const substr = word.substring(currentPos, currentPos + len);
+							const m = ctx.measureText(substr, font);
+							if (currentLineWidth + m.width <= remainingWidth) {
+								bestLen = len;
+								if (len < word.length - currentPos) break;
+							}
+						}
+						if (bestLen === 0) {
+							if (currentSegments.length > 0) pushLine();
+							bestLen = 1;
+						}
+						const substr = word.substring(currentPos, currentPos + bestLen);
+						const m = ctx.measureText(substr, font);
+						currentSegments.push({
+							text: substr,
+							font: mergedStyle.font,
+							color: mergedStyle.color,
+							background: mergedStyle.background,
+							underline: mergedStyle.underline,
+							strikethrough: mergedStyle.strikethrough,
+							width: m.width,
+							height: lh,
+							ascent: m.ascent,
+							descent: m.descent,
+							offset: m.offset
+						});
+						currentLineWidth += m.width;
+						currentPos += bestLen;
+						if (currentPos < word.length && currentLineWidth >= remainingWidth) pushLine();
+					}
+				}
+			}
+		}
+	}
+	pushLine();
+	if (lines.length === 0) return [{
+		segments: [],
+		width: 0,
+		height: 0,
+		baseline: 0
+	}];
+	return lines;
+}
+
+//#endregion
+//#region src/layout/components/stack.ts
+/**
+* 测量 Stack 元素的固有尺寸
+*/
+function measureStackSize(element, ctx, availableWidth, measureChild) {
+	const padding = normalizeSpacing(element.padding);
+	let contentWidth = 0;
+	let contentHeight = 0;
+	const children = element.children ?? [];
+	for (const child of children) {
+		const childMargin = normalizeSpacing(child.margin);
+		const childSize = measureChild(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);
+	}
+	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
+	};
+}
+
+//#endregion
+//#region src/layout/components/svg.ts
+/**
+* 测量 SVG 元素的固有尺寸
+*/
+function measureSvgSize(element, _ctx, _availableWidth) {
+	const svgElement = element;
+	if (svgElement.width !== void 0 && svgElement.height !== void 0) return {
+		width: typeof svgElement.width === "number" ? svgElement.width : 0,
+		height: typeof svgElement.height === "number" ? svgElement.height : 0
+	};
+	if (svgElement.viewBox) {
+		const viewBoxWidth = svgElement.viewBox.width;
+		const viewBoxHeight = svgElement.viewBox.height;
+		const aspectRatio = viewBoxWidth / viewBoxHeight;
+		if (svgElement.width !== void 0 && typeof svgElement.width === "number") return {
+			width: svgElement.width,
+			height: svgElement.width / aspectRatio
+		};
+		if (svgElement.height !== void 0 && typeof svgElement.height === "number") return {
+			width: svgElement.height * aspectRatio,
+			height: svgElement.height
+		};
+		return {
+			width: viewBoxWidth,
+			height: viewBoxHeight
+		};
+	}
+	return {
+		width: 0,
+		height: 0
+	};
+}
+
+//#endregion
+//#region src/render/utils/font.ts
+/**
+* 构建 Canvas 字体字符串
+* @param font 字体属性
+* @returns CSS 字体字符串
+*/
+function buildFontString(font) {
+	return `${font.style ?? "normal"} ${font.weight ?? "normal"} ${font.size ?? 16}px ${font.family ?? "sans-serif"}`;
+}
+
+//#endregion
+//#region src/layout/utils/measure.ts
+function createCanvasMeasureContext(ctx) {
+	return { measureText(text, font) {
+		ctx.font = buildFontString(font);
+		ctx.textBaseline = "middle";
+		const metrics = ctx.measureText(text);
+		const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+		const fontSize = font.size || 16;
+		return {
+			width: metrics.width,
+			height: height || fontSize,
+			offset: (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2,
+			ascent: metrics.actualBoundingBoxAscent,
+			descent: metrics.actualBoundingBoxDescent
+		};
+	} };
+}
+function wrapText(ctx, text, maxWidth, font) {
+	if (maxWidth <= 0) {
+		const { offset } = ctx.measureText(text, font);
+		return {
+			lines: [text],
+			offsets: [offset]
+		};
+	}
+	const lines = [];
+	const offsets = [];
+	const paragraphs = text.split("\n");
+	for (const paragraph of paragraphs) {
+		if (paragraph === "") {
+			lines.push("");
+			offsets.push(0);
+			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 !== "") {
+				const trimmed = currentLine.trim();
+				lines.push(trimmed);
+				offsets.push(ctx.measureText(trimmed, font).offset);
+				currentLine = word.trimStart();
+			} else currentLine = testLine;
+		}
+		if (currentLine) {
+			const trimmed = currentLine.trim();
+			lines.push(trimmed);
+			offsets.push(ctx.measureText(trimmed, font).offset);
+		}
+	}
+	return lines.length > 0 ? {
+		lines,
+		offsets
+	} : {
+		lines: [""],
+		offsets: [0]
+	};
+}
+function truncateText(ctx, text, maxWidth, font, ellipsis = "...") {
+	const measured = ctx.measureText(text, font);
+	if (measured.width <= maxWidth) return {
+		text,
+		offset: measured.offset
+	};
+	const availableWidth = maxWidth - ctx.measureText(ellipsis, font).width;
+	if (availableWidth <= 0) {
+		const { offset } = ctx.measureText(ellipsis, font);
+		return {
+			text: ellipsis,
+			offset
+		};
+	}
+	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;
+	}
+	const result = text.slice(0, left) + ellipsis;
+	const { offset } = ctx.measureText(result, font);
+	return {
+		text: result,
+		offset
+	};
+}
+
+//#endregion
+//#region src/layout/components/text.ts
+/**
+* 测量文本元素的固有尺寸
+*/
+function measureTextSize(element, ctx, availableWidth) {
+	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)
+	};
+}
+
+//#endregion
+//#region src/layout/components/transform.ts
+/**
+* 测量 Transform 元素的固有尺寸
+* Transform 不施加任何尺寸约束，直接透传子元素的测量结果
+* 变换（rotate, scale 等）仅在渲染时应用，不影响固有尺寸
+*/
+function measureTransformSize(element, ctx, availableWidth, measureIntrinsicSize) {
+	return measureIntrinsicSize(element.children, ctx, availableWidth);
+}
+
+//#endregion
+//#region src/layout/components/index.ts
+/**
+* 计算元素的固有尺寸（不依赖父容器的尺寸）
+*/
+function measureIntrinsicSize(element, ctx, availableWidth) {
+	switch (element.type) {
+		case "text": return measureTextSize(element, ctx, availableWidth);
+		case "richtext": return measureRichTextSize(element, ctx, availableWidth);
+		case "box": return measureBoxSize(element, ctx, availableWidth, measureIntrinsicSize);
+		case "stack": return measureStackSize(element, ctx, availableWidth, measureIntrinsicSize);
+		case "image": return measureImageSize(element, ctx, availableWidth);
+		case "svg": return measureSvgSize(element, ctx, availableWidth);
+		case "transform": return measureTransformSize(element, ctx, availableWidth, measureIntrinsicSize);
+		case "customdraw": return measureCustomDrawSize(element, ctx, availableWidth, measureIntrinsicSize);
+		default: return {
+			width: 0,
+			height: 0
+		};
+	}
+}
+
+//#endregion
+//#region src/layout/utils/offset.ts
+/**
+* 递归地为布局节点及其子节点应用位置偏移
+*/
+function applyOffset(node, dx, dy) {
+	node.layout.x += dx;
+	node.layout.y += dy;
+	node.layout.contentX += dx;
+	node.layout.contentY += dy;
+	for (const child of node.children) applyOffset(child, dx, dy);
+}
+
+//#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/engine.ts
+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, offsets } = wrapText(ctx, element.content, contentWidth, font);
+			if (element.maxLines && lines.length > element.maxLines) {
+				lines = lines.slice(0, element.maxLines);
+				offsets = offsets.slice(0, element.maxLines);
+				if (element.ellipsis && lines.length > 0) {
+					const lastIdx = lines.length - 1;
+					const truncated = truncateText(ctx, lines[lastIdx], contentWidth, font);
+					lines[lastIdx] = truncated.text;
+					offsets[lastIdx] = truncated.offset;
+				}
+			}
+			node.lines = lines;
+			node.lineOffsets = offsets;
+		} else {
+			const { text, offset } = truncateText(ctx, element.content, contentWidth > 0 && element.ellipsis ? contentWidth : Infinity, font);
+			node.lines = [text];
+			node.lineOffsets = [offset];
+		}
+	}
+	if (element.type === "richtext") {
+		const lineHeight = element.lineHeight ?? 1.2;
+		let lines = wrapRichText(ctx, element.spans, contentWidth, lineHeight);
+		if (element.maxLines && lines.length > element.maxLines) {
+			lines = lines.slice(0, element.maxLines);
+			if (element.ellipsis && lines.length > 0) {
+				const lastLine = lines[lines.length - 1];
+				if (lastLine.segments.length > 0) {
+					const lastSeg = lastLine.segments[lastLine.segments.length - 1];
+					lastSeg.text += "...";
+					lastSeg.width = ctx.measureText(lastSeg.text, lastSeg.font ?? {}).width;
+					lastLine.width = lastLine.segments.reduce((sum, s) => sum + s.width, 0);
+				}
+			}
+		}
+		node.richLines = lines;
+	}
+	if (element.type === "box" || element.type === "stack") {
+		const children = element.children ?? [];
+		if (element.type === "stack") {
+			const stackAlign = element.align ?? "start";
+			const stackJustify = element.justify ?? "start";
+			for (const child of children) {
+				const childNode = computeLayout(child, ctx, {
+					minWidth: 0,
+					maxWidth: contentWidth,
+					minHeight: 0,
+					maxHeight: contentHeight
+				}, contentX, contentY);
+				const childMargin = normalizeSpacing(child.margin);
+				const childOuterWidth = childNode.layout.width + childMargin.left + childMargin.right;
+				const childOuterHeight = childNode.layout.height + childMargin.top + childMargin.bottom;
+				let offsetX = 0;
+				if (stackAlign === "center") offsetX = (contentWidth - childOuterWidth) / 2;
+				else if (stackAlign === "end") offsetX = contentWidth - childOuterWidth;
+				let offsetY = 0;
+				if (stackJustify === "center") offsetY = (contentHeight - childOuterHeight) / 2;
+				else if (stackJustify === "end") offsetY = contentHeight - childOuterHeight;
+				if (offsetX !== 0 || offsetY !== 0) applyOffset(childNode, offsetX, offsetY);
+				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 wrap = element.wrap ?? false;
+			const isRow = direction === "row" || direction === "row-reverse";
+			const isReverse = direction === "row-reverse" || direction === "column-reverse";
+			const getContentMainSize = () => isRow ? contentWidth : contentHeight;
+			const getContentCrossSize = () => isRow ? contentHeight : contentWidth;
+			const childInfos = [];
+			for (const child of children) {
+				const childMargin = normalizeSpacing(child.margin);
+				const childFlex = child.flex ?? 0;
+				if (childFlex > 0) childInfos.push({
+					element: child,
+					width: 0,
+					height: 0,
+					flex: childFlex,
+					margin: childMargin
+				});
+				else {
+					const size = measureIntrinsicSize(child, ctx, 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 && !wrap) w = contentWidth - childMargin.left - childMargin.right;
+					if (shouldStretchHeight && !wrap) h = contentHeight - childMargin.top - childMargin.bottom;
+					childInfos.push({
+						element: child,
+						width: w,
+						height: h,
+						flex: 0,
+						margin: childMargin
+					});
+				}
+			}
+			const lines = [];
+			if (wrap) {
+				let currentLine = [];
+				let currentLineSize = 0;
+				const mainAxisSize = getContentMainSize();
+				for (const info of childInfos) {
+					const itemSize = isRow ? info.width + info.margin.left + info.margin.right : info.height + info.margin.top + info.margin.bottom;
+					if (currentLine.length > 0 && currentLineSize + gap + itemSize > mainAxisSize) {
+						lines.push(currentLine);
+						currentLine = [info];
+						currentLineSize = itemSize;
+					} else {
+						currentLine.push(info);
+						currentLineSize += (currentLine.length > 1 ? gap : 0) + itemSize;
+					}
+				}
+				if (currentLine.length > 0) lines.push(currentLine);
+			} else lines.push(childInfos);
+			for (const lineInfos of lines) {
+				let totalFixed = 0;
+				let totalFlex = 0;
+				const totalGap = lineInfos.length > 1 ? gap * (lineInfos.length - 1) : 0;
+				for (const info of lineInfos) if (info.flex > 0) totalFlex += info.flex;
+				else if (isRow) totalFixed += info.width + info.margin.left + info.margin.right;
+				else totalFixed += info.height + info.margin.top + info.margin.bottom;
+				const mainAxisSize = getContentMainSize();
+				const availableForFlex = Math.max(0, mainAxisSize - totalFixed - totalGap);
+				for (const info of lineInfos) if (info.flex > 0) {
+					const flexSize = totalFlex > 0 ? availableForFlex * info.flex / totalFlex : 0;
+					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);
+					}
+				}
+			}
+			let crossOffset = 0;
+			for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+				const lineInfos = lines[lineIndex];
+				const totalGap = lineInfos.length > 1 ? gap * (lineInfos.length - 1) : 0;
+				const totalSize = lineInfos.reduce((sum, info) => {
+					return sum + (isRow ? info.width + info.margin.left + info.margin.right : info.height + info.margin.top + info.margin.bottom);
+				}, 0) + totalGap;
+				const freeSpace = getContentMainSize() - 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 (lineInfos.length > 1) mainGap = gap + freeSpace / (lineInfos.length - 1);
+						break;
+					case "space-around":
+						if (lineInfos.length > 0) {
+							const spacing = freeSpace / lineInfos.length;
+							mainStart = spacing / 2;
+							mainGap = gap + spacing;
+						}
+						break;
+					case "space-evenly":
+						if (lineInfos.length > 0) {
+							const spacing = freeSpace / (lineInfos.length + 1);
+							mainStart = spacing;
+							mainGap = gap + spacing;
+						}
+						break;
+				}
+				const lineCrossSize = lineInfos.reduce((max, info) => {
+					const itemCrossSize = isRow ? info.height + info.margin.top + info.margin.bottom : info.width + info.margin.left + info.margin.right;
+					return Math.max(max, itemCrossSize);
+				}, 0);
+				let mainOffset = mainStart;
+				const orderedInfos = isReverse ? [...lineInfos].reverse() : lineInfos;
+				for (let i = 0; i < orderedInfos.length; i++) {
+					const info = orderedInfos[i];
+					const crossAxisSize = wrap ? lineCrossSize : getContentCrossSize();
+					const childCrossSize = isRow ? info.height + info.margin.top + info.margin.bottom : info.width + info.margin.left + info.margin.right;
+					let itemCrossOffset = 0;
+					const effectiveAlign = info.element.alignSelf ?? align;
+					if (effectiveAlign === "start") itemCrossOffset = 0;
+					else if (effectiveAlign === "end") itemCrossOffset = crossAxisSize - childCrossSize;
+					else if (effectiveAlign === "center") itemCrossOffset = (crossAxisSize - childCrossSize) / 2;
+					else if (effectiveAlign === "stretch") {
+						itemCrossOffset = 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;
+					}
+					const childX = isRow ? contentX + mainOffset + info.margin.left : contentX + crossOffset + itemCrossOffset + info.margin.left;
+					const childY = isRow ? contentY + crossOffset + itemCrossOffset + info.margin.top : contentY + mainOffset + info.margin.top;
+					let minWidth = 0;
+					let maxWidth = info.width;
+					let minHeight = 0;
+					let maxHeight = info.height;
+					let shouldStretchCross = false;
+					if (info.flex > 0) if (isRow) {
+						minWidth = maxWidth = info.width;
+						if (info.element.height === void 0 && align === "stretch") {
+							minHeight = info.height;
+							maxHeight = element.height !== void 0 ? info.height : Infinity;
+							shouldStretchCross = true;
+						}
+					} else {
+						minHeight = maxHeight = info.height;
+						if (info.element.width === void 0 && align === "stretch") {
+							minWidth = info.width;
+							maxWidth = element.width !== void 0 ? info.width : Infinity;
+							shouldStretchCross = true;
+						}
+					}
+					else {
+						if (!isRow && info.element.width === void 0 && align === "stretch") minWidth = maxWidth = crossAxisSize - info.margin.left - info.margin.right;
+						if (isRow && info.element.height === void 0 && align === "stretch") minHeight = maxHeight = crossAxisSize - info.margin.top - info.margin.bottom;
+					}
+					const childNode = computeLayout(info.element, ctx, {
+						minWidth,
+						maxWidth,
+						minHeight,
+						maxHeight
+					}, childX - info.margin.left, childY - info.margin.top);
+					if (shouldStretchCross && info.flex > 0) {
+						const childPadding = normalizeSpacing("padding" in info.element ? info.element.padding : void 0);
+						if (isRow && childNode.layout.height < info.height) {
+							childNode.layout.height = info.height;
+							childNode.layout.contentHeight = info.height - childPadding.top - childPadding.bottom;
+						} else if (!isRow && childNode.layout.width < info.width) {
+							childNode.layout.width = info.width;
+							childNode.layout.contentWidth = info.width - childPadding.left - childPadding.right;
+						}
+					}
+					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;
+				}
+				crossOffset += lineCrossSize;
+				if (lineIndex < lines.length - 1) crossOffset += gap;
+			}
+			if (wrap && element.height === void 0 && isRow) {
+				const actualContentHeight = crossOffset;
+				const actualHeight = actualContentHeight + padding.top + padding.bottom;
+				node.layout.height = actualHeight;
+				node.layout.contentHeight = actualContentHeight;
+			} else if (wrap && element.width === void 0 && !isRow) {
+				const actualContentWidth = crossOffset;
+				const actualWidth = actualContentWidth + padding.left + padding.right;
+				node.layout.width = actualWidth;
+				node.layout.contentWidth = actualContentWidth;
+			}
+			if (!wrap) {
+				let maxChildCrossSize = 0;
+				for (const childNode of node.children) {
+					const childMargin = normalizeSpacing(childNode.element.margin);
+					if (isRow) {
+						const childOuterHeight = childNode.layout.height + childMargin.top + childMargin.bottom;
+						maxChildCrossSize = Math.max(maxChildCrossSize, childOuterHeight);
+					} else {
+						const childOuterWidth = childNode.layout.width + childMargin.left + childMargin.right;
+						maxChildCrossSize = Math.max(maxChildCrossSize, childOuterWidth);
+					}
+				}
+				if (isRow && element.height === void 0) {
+					const actualHeight = maxChildCrossSize + padding.top + padding.bottom;
+					if (actualHeight > node.layout.height) {
+						node.layout.height = actualHeight;
+						node.layout.contentHeight = maxChildCrossSize;
+					}
+				} else if (!isRow && element.width === void 0) {
+					const actualWidth = maxChildCrossSize + padding.left + padding.right;
+					if (actualWidth > node.layout.width) {
+						node.layout.width = actualWidth;
+						node.layout.contentWidth = maxChildCrossSize;
+					}
+				}
+			}
+			if (isReverse) node.children.reverse();
+		}
+	} else if (element.type === "transform") {
+		const child = element.children;
+		if (child) {
+			const childMargin = normalizeSpacing(child.margin);
+			const childNode = computeLayout(child, ctx, {
+				minWidth: 0,
+				maxWidth: contentWidth,
+				minHeight: 0,
+				maxHeight: contentHeight
+			}, contentX, contentY);
+			node.children.push(childNode);
+			if (element.width === void 0) {
+				const childOuterWidth = childNode.layout.width + childMargin.left + childMargin.right;
+				const actualWidth = childOuterWidth + padding.left + padding.right;
+				node.layout.width = actualWidth;
+				node.layout.contentWidth = childOuterWidth;
+			}
+			if (element.height === void 0) {
+				const childOuterHeight = childNode.layout.height + childMargin.top + childMargin.bottom;
+				const actualHeight = childOuterHeight + padding.top + padding.bottom;
+				node.layout.height = actualHeight;
+				node.layout.contentHeight = childOuterHeight;
+			}
+		}
+	} else if (element.type === "customdraw") {
+		const child = element.children;
+		if (child) {
+			const childMargin = normalizeSpacing(child.margin);
+			const childNode = computeLayout(child, ctx, {
+				minWidth: 0,
+				maxWidth: contentWidth,
+				minHeight: 0,
+				maxHeight: contentHeight
+			}, contentX, contentY);
+			node.children.push(childNode);
+			if (element.width === void 0) {
+				const childOuterWidth = childNode.layout.width + childMargin.left + childMargin.right;
+				const actualWidth = childOuterWidth + padding.left + padding.right;
+				node.layout.width = actualWidth;
+				node.layout.contentWidth = childOuterWidth;
+			}
+			if (element.height === void 0) {
+				const childOuterHeight = childNode.layout.height + childMargin.top + childMargin.bottom;
+				const actualHeight = childOuterHeight + padding.top + padding.bottom;
+				node.layout.height = actualHeight;
+				node.layout.contentHeight = childOuterHeight;
+			}
+		}
+	}
+	return node;
+}
+
+//#endregion
+//#region src/render/utils/colors.ts
+function isGradientDescriptor$1(color) {
+	return typeof color === "object" && color !== null && "type" in color && (color.type === "linear-gradient" || color.type === "radial-gradient");
+}
+function resolveGradient$1(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$1(ctx, color, x, y, width, height) {
+	if (isGradientDescriptor$1(color)) return resolveGradient$1(ctx, color, x, y, width, height);
+	return color;
+}
+
+//#endregion
+//#region src/render/utils/shadows.ts
+function applyShadow$1(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$1(ctx) {
+	ctx.shadowOffsetX = 0;
+	ctx.shadowOffsetY = 0;
+	ctx.shadowBlur = 0;
+	ctx.shadowColor = "transparent";
+}
+
+//#endregion
+//#region src/render/utils/shapes.ts
+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();
+}
+
+//#endregion
+//#region src/render/components/box.ts
+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$1(ctx, element.shadow);
+	if (element.background) {
+		ctx.fillStyle = resolveColor$1(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$1(ctx);
+	}
+	if (border && border.width && border.width > 0) {
+		ctx.strokeStyle = border.color ? resolveColor$1(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;
+}
+
+//#endregion
+//#region src/render/components/ProxiedCanvasContext.ts
+/**
+* ProxiedCanvasContext - Canvas 上下文代理类
+*
+* 该类提供对真实 CanvasRenderingContext2D 的代理，有以下功能：
+* 1. 管理 save/restore 的平衡（计数器）
+* 2. 追踪相对变换而不是绝对变换
+* 3. 在析构时自动恢复所有未恢复的状态
+* 4. 转发所有其他 Canvas API 调用
+*/
+var ProxiedCanvasContext = class {
+	/**
+	* 真实的 Canvas 上下文
+	*/
+	ctx;
+	/**
+	* 基础变换矩阵（初始化时设置，保持不变）
+	*/
+	baseTransform;
+	/**
+	* 相对变换矩阵（用户通过 setTransform 设置）
+	*/
+	relativeTransform;
+	/**
+	* save/restore 计数器
+	*/
+	saveCount = 0;
+	/**
+	* 构造函数
+	* @param ctx 真实的 CanvasRenderingContext2D
+	* @param baseTransform 初始的基础变换矩阵
+	*/
+	constructor(ctx, baseTransform) {
+		this.ctx = ctx;
+		this.baseTransform = baseTransform;
+		this.relativeTransform = new DOMMatrix();
+	}
+	/**
+	* save() - 保存当前状态并增加计数
+	*/
+	save() {
+		this.saveCount++;
+		this.ctx.save();
+	}
+	/**
+	* restore() - 恢复上一个状态并减少计数
+	*/
+	restore() {
+		if (this.saveCount > 0) {
+			this.saveCount--;
+			this.ctx.restore();
+		}
+	}
+	/**
+	* setTransform() - 设置相对变换
+	*/
+	setTransform(...args) {
+		let matrix;
+		if (args.length === 1 && args[0] instanceof DOMMatrix) matrix = args[0];
+		else if (args.length === 6) matrix = new DOMMatrix([
+			args[0],
+			args[1],
+			args[2],
+			args[3],
+			args[4],
+			args[5]
+		]);
+		else return;
+		this.relativeTransform = matrix;
+		const actualTransform = this.baseTransform.multiply(matrix);
+		this.ctx.setTransform(actualTransform);
+	}
+	/**
+	* getTransform() - 返回相对变换（而不是绝对变换）
+	*/
+	getTransform() {
+		return this.relativeTransform;
+	}
+	/**
+	* 析构函数级的清理 - 自动恢复所有未恢复的 save
+	*/
+	destroy() {
+		while (this.saveCount > 0) {
+			console.log("destroy restore", this.saveCount);
+			this.saveCount--;
+			this.ctx.restore();
+		}
+	}
+};
+function createProxiedCanvasContext(ctx, baseTransform) {
+	const proxy = new ProxiedCanvasContext(ctx, baseTransform);
+	return new Proxy(proxy, {
+		get(target, prop, receiver) {
+			if (prop === "save" || prop === "restore" || prop === "setTransform" || prop === "getTransform" || prop === "destroy") return Reflect.get(target, prop, receiver).bind(proxy);
+			const ownValue = Reflect.get(target, prop, receiver);
+			if (ownValue !== void 0) return ownValue;
+			const contextValue = target.ctx[prop];
+			if (typeof contextValue === "function") return contextValue.bind(target.ctx);
+			return contextValue;
+		},
+		set(target, prop, value, _receiver) {
+			target.ctx[prop] = value;
+			return true;
+		},
+		has(target, prop) {
+			if (prop === "save" || prop === "restore" || prop === "setTransform" || prop === "getTransform" || prop === "destroy") return true;
+			return prop in target.ctx;
+		},
+		ownKeys(target) {
+			return Reflect.ownKeys(target.ctx);
+		},
+		getOwnPropertyDescriptor(target, prop) {
+			return Reflect.getOwnPropertyDescriptor(target.ctx, prop);
+		}
+	});
+}
+
+//#endregion
+//#region src/render/components/customDraw.ts
+/**
+* 渲染 CustomDraw 组件
+* 提供自定义绘制回调，用户可以直接访问 Canvas 上下文并绘制自定义内容
+*/
+function renderCustomDraw(ctx, node) {
+	const element = node.element;
+	ctx.save();
+	ctx.translate(node.layout.x, node.layout.y);
+	const proxyCtx = createProxiedCanvasContext(ctx, ctx.getTransform());
+	const inner = () => {
+		if (node.children && node.children.length > 0) {
+			ctx.save();
+			ctx.translate(-node.layout.x, -node.layout.y);
+			renderNode(ctx, node.children[0]);
+			ctx.restore();
+		}
+	};
+	element.draw(proxyCtx, {
+		inner,
+		width: node.layout.contentWidth,
+		height: node.layout.contentHeight
+	});
+	proxyCtx.destroy();
+	ctx.restore();
+}
+
+//#endregion
+//#region src/render/components/image.ts
+function renderImage(ctx, node) {
+	const element = node.element;
+	const { x, y, width, height } = node.layout;
+	const src = element.src;
+	if (!src) return;
+	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = element.opacity;
+	if (element.shadow) applyShadow$1(ctx, element.shadow);
+	const border = element.border;
+	const radius = normalizeBorderRadius(border?.radius);
+	const hasRadius = radius.some((r) => r > 0);
+	if (hasRadius) {
+		ctx.save();
+		roundRectPath(ctx, x, y, width, height, radius);
+		ctx.clip();
+	}
+	const imgWidth = "naturalWidth" in src ? src.naturalWidth : "width" in src ? +src.width : 0;
+	const imgHeight = "naturalHeight" in src ? src.naturalHeight : "height" in src ? +src.height : 0;
+	const fit = element.fit ?? "fill";
+	let drawX = x;
+	let drawY = y;
+	let drawWidth = width;
+	let drawHeight = height;
+	if (fit !== "fill" && imgWidth > 0 && imgHeight > 0) {
+		const imgAspect = imgWidth / imgHeight;
+		const boxAspect = width / height;
+		let scale = 1;
+		switch (fit) {
+			case "contain":
+				scale = imgAspect > boxAspect ? width / imgWidth : height / imgHeight;
+				break;
+			case "cover":
+				scale = imgAspect > boxAspect ? height / imgHeight : width / imgWidth;
+				break;
+			case "scale-down":
+				scale = Math.min(1, imgAspect > boxAspect ? width / imgWidth : height / imgHeight);
+				break;
+			case "none":
+				scale = 1;
+				break;
+		}
+		drawWidth = imgWidth * scale;
+		drawHeight = imgHeight * scale;
+		const position = element.position ?? {};
+		const posX = position.x ?? "center";
+		const posY = position.y ?? "center";
+		if (typeof posX === "number") drawX = x + posX;
+		else switch (posX) {
+			case "left":
+				drawX = x;
+				break;
+			case "center":
+				drawX = x + (width - drawWidth) / 2;
+				break;
+			case "right":
+				drawX = x + width - drawWidth;
+				break;
+		}
+		if (typeof posY === "number") drawY = y + posY;
+		else switch (posY) {
+			case "top":
+				drawY = y;
+				break;
+			case "center":
+				drawY = y + (height - drawHeight) / 2;
+				break;
+			case "bottom":
+				drawY = y + height - drawHeight;
+				break;
+		}
+	}
+	ctx.drawImage(src, drawX, drawY, drawWidth, drawHeight);
+	if (element.shadow) clearShadow$1(ctx);
+	if (hasRadius) ctx.restore();
+	if (border && border.width && border.width > 0) {
+		ctx.strokeStyle = border.color ? resolveColor$1(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;
+}
+
+//#endregion
+//#region src/render/components/richtext.ts
+function renderRichText(ctx, node) {
+	const element = node.element;
+	const { contentX, contentY, contentWidth, contentHeight } = node.layout;
+	const lines = node.richLines ?? [];
+	if (lines.length === 0) return;
+	const totalTextHeight = lines.reduce((sum, line) => sum + line.height, 0);
+	let verticalOffset = 0;
+	if (element.verticalAlign === "middle") verticalOffset = (contentHeight - totalTextHeight) / 2;
+	else if (element.verticalAlign === "bottom") verticalOffset = contentHeight - totalTextHeight;
+	let currentY = contentY + verticalOffset;
+	for (const line of lines) {
+		let lineX = contentX;
+		if (element.align === "center") lineX = contentX + (contentWidth - line.width) / 2;
+		else if (element.align === "right") lineX = contentX + (contentWidth - line.width);
+		const baselineY = currentY + line.baseline;
+		for (const seg of line.segments) {
+			ctx.save();
+			ctx.font = buildFontString(seg.font ?? {});
+			if (seg.background) {
+				ctx.fillStyle = resolveColor$1(ctx, seg.background, lineX, currentY, seg.width, line.height);
+				ctx.fillRect(lineX, currentY, seg.width, line.height);
+			}
+			ctx.fillStyle = seg.color ? resolveColor$1(ctx, seg.color, lineX, currentY, seg.width, line.height) : "#000";
+			ctx.textBaseline = "middle";
+			ctx.fillText(seg.text, lineX, baselineY - seg.offset);
+			if (seg.underline) {
+				ctx.beginPath();
+				ctx.strokeStyle = ctx.fillStyle;
+				ctx.lineWidth = 1;
+				ctx.moveTo(lineX, currentY + seg.height);
+				ctx.lineTo(lineX + seg.width, currentY + seg.height);
+				ctx.stroke();
+			}
+			if (seg.strikethrough) {
+				ctx.beginPath();
+				ctx.strokeStyle = ctx.fillStyle;
+				ctx.lineWidth = 1;
+				const strikeY = currentY + seg.height / 2 + seg.offset;
+				ctx.moveTo(lineX, strikeY);
+				ctx.lineTo(lineX + seg.width, strikeY);
+				ctx.stroke();
+			}
+			ctx.restore();
+			lineX += seg.width;
+		}
+		currentY += line.height;
+	}
+}
+
+//#endregion
+//#region src/render/components/svg.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 applyTransform(base, transform) {
+	if (!transform) return base;
+	let result = new DOMMatrix([
+		base.a,
+		base.b,
+		base.c,
+		base.d,
+		base.e,
+		base.f
+	]);
+	if (transform.matrix) {
+		const [a, b, c, d, e, f] = transform.matrix;
+		result = result.multiply(new DOMMatrix([
+			a,
+			b,
+			c,
+			d,
+			e,
+			f
+		]));
+	}
+	if (transform.translate) result = result.translate(transform.translate[0], transform.translate[1]);
+	if (transform.rotate !== void 0) if (typeof transform.rotate === "number") result = result.rotate(transform.rotate);
+	else {
+		const [angle, cx, cy] = transform.rotate;
+		result = result.translate(cx, cy).rotate(angle).translate(-cx, -cy);
+	}
+	if (transform.scale !== void 0) if (typeof transform.scale === "number") result = result.scale(transform.scale);
+	else result = result.scale(transform.scale[0], transform.scale[1]);
+	if (transform.skewX !== void 0) {
+		const degrees = transform.skewX * 180 / Math.PI;
+		result = result.skewX(degrees);
+	}
+	if (transform.skewY !== void 0) {
+		const degrees = transform.skewY * 180 / Math.PI;
+		result = result.skewY(degrees);
+	}
+	return result;
+}
+function applyStroke(ctx, stroke, bounds) {
+	ctx.strokeStyle = resolveColor(ctx, stroke.color, bounds.x, bounds.y, bounds.width, bounds.height);
+	ctx.lineWidth = stroke.width;
+	ctx.setLineDash(stroke.dash ?? []);
+	if (stroke.cap) ctx.lineCap = stroke.cap;
+	if (stroke.join) ctx.lineJoin = stroke.join;
+}
+function applyFill(ctx, fill, bounds) {
+	ctx.fillStyle = resolveColor(ctx, fill, bounds.x, bounds.y, bounds.width, bounds.height);
+	ctx.fill();
+}
+function applyFillAndStroke(ctx, shape, bounds) {
+	if (shape.fill && shape.fill !== "none") applyFill(ctx, shape.fill, bounds);
+	if (shape.stroke) {
+		applyStroke(ctx, shape.stroke, bounds);
+		ctx.stroke();
+	}
+}
+function renderSvgRect(ctx, rect, bounds) {
+	const { x = 0, y = 0, width, height, rx = 0, ry = 0 } = rect;
+	ctx.beginPath();
+	if (rx || ry) ctx.roundRect(x, y, width, height, Math.max(rx, ry));
+	else ctx.rect(x, y, width, height);
+	applyFillAndStroke(ctx, rect, bounds);
+}
+function renderSvgCircle(ctx, circle, bounds) {
+	ctx.beginPath();
+	ctx.arc(circle.cx, circle.cy, circle.r, 0, Math.PI * 2);
+	applyFillAndStroke(ctx, circle, bounds);
+}
+function renderSvgEllipse(ctx, ellipse, bounds) {
+	ctx.beginPath();
+	ctx.ellipse(ellipse.cx, ellipse.cy, ellipse.rx, ellipse.ry, 0, 0, Math.PI * 2);
+	applyFillAndStroke(ctx, ellipse, bounds);
+}
+function renderSvgLine(ctx, line, bounds) {
+	ctx.beginPath();
+	ctx.moveTo(line.x1, line.y1);
+	ctx.lineTo(line.x2, line.y2);
+	if (line.stroke) {
+		applyStroke(ctx, line.stroke, bounds);
+		ctx.stroke();
+	}
+}
+function renderSvgPolyline(ctx, polyline, bounds) {
+	const { points } = polyline;
+	if (points.length === 0) return;
+	ctx.beginPath();
+	ctx.moveTo(points[0][0], points[0][1]);
+	for (let i = 1; i < points.length; i++) ctx.lineTo(points[i][0], points[i][1]);
+	applyFillAndStroke(ctx, polyline, bounds);
+}
+function renderSvgPolygon(ctx, polygon, bounds) {
+	const { points } = polygon;
+	if (points.length === 0) return;
+	ctx.beginPath();
+	ctx.moveTo(points[0][0], points[0][1]);
+	for (let i = 1; i < points.length; i++) ctx.lineTo(points[i][0], points[i][1]);
+	ctx.closePath();
+	applyFillAndStroke(ctx, polygon, bounds);
+}
+function renderSvgPath(ctx, path, bounds) {
+	const path2d = new Path2D(path.d);
+	if (path.fill && path.fill !== "none") {
+		ctx.fillStyle = resolveColor(ctx, path.fill, bounds.x, bounds.y, bounds.width, bounds.height);
+		ctx.fill(path2d);
+	}
+	if (path.stroke) {
+		applyStroke(ctx, path.stroke, bounds);
+		ctx.stroke(path2d);
+	}
+}
+const TEXT_ANCHOR_MAP = {
+	start: "left",
+	middle: "center",
+	end: "right"
+};
+const BASELINE_MAP = {
+	auto: "alphabetic",
+	middle: "middle",
+	hanging: "hanging"
+};
+function renderSvgText(ctx, text, bounds) {
+	const { x = 0, y = 0, content, font, textAnchor = "start", dominantBaseline = "auto" } = text;
+	ctx.font = buildFontString(font ?? {});
+	ctx.textAlign = TEXT_ANCHOR_MAP[textAnchor] ?? "left";
+	ctx.textBaseline = BASELINE_MAP[dominantBaseline] ?? "alphabetic";
+	if (text.fill && text.fill !== "none") {
+		ctx.fillStyle = resolveColor(ctx, text.fill, bounds.x, bounds.y, bounds.width, bounds.height);
+		ctx.fillText(content, x, y);
+	}
+	if (text.stroke) {
+		applyStroke(ctx, text.stroke, bounds);
+		ctx.strokeText(content, x, y);
+	}
+}
+function renderSvgChild(ctx, child, parentTransform, bounds, baseTransform) {
+	const localTransform = applyTransform(parentTransform, child.transform);
+	ctx.save();
+	ctx.setTransform(baseTransform.multiply(localTransform));
+	if (child.opacity !== void 0) ctx.globalAlpha *= child.opacity;
+	switch (child.type) {
+		case "rect":
+			renderSvgRect(ctx, child, bounds);
+			break;
+		case "circle":
+			renderSvgCircle(ctx, child, bounds);
+			break;
+		case "ellipse":
+			renderSvgEllipse(ctx, child, bounds);
+			break;
+		case "line":
+			renderSvgLine(ctx, child, bounds);
+			break;
+		case "polyline":
+			renderSvgPolyline(ctx, child, bounds);
+			break;
+		case "polygon":
+			renderSvgPolygon(ctx, child, bounds);
+			break;
+		case "path":
+			renderSvgPath(ctx, child, bounds);
+			break;
+		case "text":
+			renderSvgText(ctx, child, bounds);
+			break;
+		case "g":
+			renderSvgGroup(ctx, child, localTransform, bounds, baseTransform);
+			break;
+	}
+	ctx.restore();
+}
+function renderSvgGroup(ctx, group, parentTransform, bounds, baseTransform) {
+	for (const child of group.children) renderSvgChild(ctx, child, parentTransform, bounds, baseTransform);
+}
+function calculateViewBoxTransform(x, y, width, height, viewBox, preserveAspectRatio) {
+	const vbX = viewBox.x ?? 0;
+	const vbY = viewBox.y ?? 0;
+	const vbWidth = viewBox.width;
+	const vbHeight = viewBox.height;
+	const scaleX = width / vbWidth;
+	const scaleY = height / vbHeight;
+	const align = preserveAspectRatio?.align ?? "xMidYMid";
+	const meetOrSlice = preserveAspectRatio?.meetOrSlice ?? "meet";
+	if (align === "none") return new DOMMatrix().translate(x, y).scale(scaleX, scaleY).translate(-vbX, -vbY);
+	const scale = meetOrSlice === "meet" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
+	const scaledWidth = vbWidth * scale;
+	const scaledHeight = vbHeight * scale;
+	let translateX = x;
+	let translateY = y;
+	if (align.includes("xMid")) translateX += (width - scaledWidth) / 2;
+	else if (align.includes("xMax")) translateX += width - scaledWidth;
+	if (align.includes("YMid")) translateY += (height - scaledHeight) / 2;
+	else if (align.includes("YMax")) translateY += height - scaledHeight;
+	return new DOMMatrix().translate(translateX, translateY).scale(scale, scale).translate(-vbX, -vbY);
+}
+function applyShadow(ctx, 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)";
+}
+function clearShadow(ctx) {
+	ctx.shadowOffsetX = 0;
+	ctx.shadowOffsetY = 0;
+	ctx.shadowBlur = 0;
+	ctx.shadowColor = "transparent";
+}
+function renderSvg(ctx, node) {
+	const element = node.element;
+	const { x, y, width, height } = node.layout;
+	const bounds = {
+		x,
+		y,
+		width,
+		height
+	};
+	if (element.background) {
+		if (element.shadow) applyShadow(ctx, element.shadow);
+		ctx.fillStyle = resolveColor(ctx, element.background, x, y, width, height);
+		ctx.fillRect(x, y, width, height);
+		if (element.shadow) clearShadow(ctx);
+	}
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(x, y, width, height);
+	ctx.clip();
+	const baseTransform = ctx.getTransform();
+	const transform = calculateViewBoxTransform(x, y, width, height, element.viewBox ?? {
+		x: 0,
+		y: 0,
+		width,
+		height
+	}, element.preserveAspectRatio);
+	for (const child of element.children) renderSvgChild(ctx, child, transform, bounds, baseTransform);
+	ctx.restore();
+}
+
+//#endregion
+//#region src/render/components/text.ts
+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$1(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 = "middle";
+	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$1(ctx, element.shadow);
+	for (let i = 0; i < lines.length; i++) {
+		const correctedLineY = contentY + verticalOffset + i * lineHeightPx + lineHeightPx / 2 + (node.lineOffsets?.[i] ?? 0);
+		if (element.stroke) {
+			ctx.strokeStyle = resolveColor$1(ctx, element.stroke.color, contentX, contentY, contentWidth, contentHeight);
+			ctx.lineWidth = element.stroke.width;
+			ctx.strokeText(lines[i], textX, correctedLineY);
+		}
+		ctx.fillText(lines[i], textX, correctedLineY);
+	}
+	if (element.shadow) clearShadow$1(ctx);
+}
+
+//#endregion
+//#region src/render/components/transform.ts
+/**
+* 解析 Transform 值为 DOMMatrix
+* 支持三种格式：
+* - 数组: [a, b, c, d, e, f]
+* - DOMMatrix2DInit 对象: { a, b, c, d, e, f, ... }
+* - 简易对象: { translate, rotate, scale, skewX, skewY }
+*/
+function parseTransformValue(transform) {
+	if (transform === void 0) return new DOMMatrix();
+	if (Array.isArray(transform)) return new DOMMatrix(transform);
+	const hasDOMMatrixInit = "a" in transform || "b" in transform || "c" in transform || "d" in transform || "e" in transform || "f" in transform;
+	const hasSimpleTransform = "translate" in transform || "rotate" in transform || "scale" in transform || "skewX" in transform || "skewY" in transform;
+	if (hasDOMMatrixInit && !hasSimpleTransform) {
+		const init = transform;
+		return new DOMMatrix([
+			init.a ?? 1,
+			init.b ?? 0,
+			init.c ?? 0,
+			init.d ?? 1,
+			init.e ?? 0,
+			init.f ?? 0
+		]);
+	}
+	const simpleObj = transform;
+	let result = new DOMMatrix();
+	if (simpleObj.translate) result = result.translate(simpleObj.translate[0], simpleObj.translate[1]);
+	if (simpleObj.rotate !== void 0) if (typeof simpleObj.rotate === "number") result = result.rotate(simpleObj.rotate);
+	else {
+		const [angle, cx, cy] = simpleObj.rotate;
+		result = result.translate(cx, cy).rotate(angle).translate(-cx, -cy);
+	}
+	if (simpleObj.scale !== void 0) if (typeof simpleObj.scale === "number") result = result.scale(simpleObj.scale);
+	else result = result.scale(simpleObj.scale[0], simpleObj.scale[1]);
+	if (simpleObj.skewX !== void 0) result = result.skewX(simpleObj.skewX);
+	if (simpleObj.skewY !== void 0) result = result.skewY(simpleObj.skewY);
+	return result;
+}
+/**
+* 根据 transformOrigin 属性和子元素尺寸计算实际变换原点坐标
+*/
+function resolveTransformOrigin(origin, childLayout) {
+	if (origin === void 0) return [0, 0];
+	const [xVal, yVal] = origin;
+	const sizes = [childLayout.width, childLayout.height];
+	const values = [xVal, yVal];
+	const result = [0, 0];
+	for (let i = 0; i < 2; i++) {
+		const val = values[i];
+		if (typeof val === "string") if (val.endsWith("%")) result[i] = parseFloat(val) / 100 * sizes[i];
+		else result[i] = parseFloat(val);
+		else result[i] = val;
+	}
+	return result;
+}
+/**
+* 渲染 Transform 组件及其子元素
+*/
+function renderTransform(ctx, node) {
+	const element = node.element;
+	const { children } = node;
+	if (!children || children.length === 0) return;
+	const childNode = children[0];
+	const [relativeOx, relativeOy] = resolveTransformOrigin(element.transformOrigin, childNode.layout);
+	const ox = childNode.layout.x + relativeOx;
+	const oy = childNode.layout.y + relativeOy;
+	const targetMatrix = parseTransformValue(element.transform);
+	const finalMatrix = new DOMMatrix().translate(ox, oy).multiply(targetMatrix).translate(-ox, -oy);
+	ctx.save();
+	const composedTransform = ctx.getTransform().multiply(finalMatrix);
+	ctx.setTransform(composedTransform);
+	renderNode(ctx, childNode);
+	ctx.restore();
+}
+
+//#endregion
+//#region src/render/index.ts
+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 "richtext":
+			renderRichText(ctx, node);
+			break;
+		case "image":
+			renderImage(ctx, node);
+			break;
+		case "svg":
+			renderSvg(ctx, node);
+			break;
+		case "transform":
+			renderTransform(ctx, node);
+			break;
+		case "customdraw":
+			renderCustomDraw(ctx, node);
+			break;
+	}
+}
+
+//#endregion
+//#region src/canvas.ts
+/**
+* 创建适用于浏览器环境的 Canvas
+*
+* 在浏览器环境中使用，支持传入已有的 canvas 实例
+*/
+function createCanvas(options) {
+	const { width, height, pixelRatio = 1 } = options;
+	const canvas = options.canvas ?? createRawCanvas(width * pixelRatio, height * pixelRatio);
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Failed to get 2d context");
+	if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
+	if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
+	if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
+	const measureCtx = createCanvasMeasureContext(ctx);
+	return {
+		width,
+		height,
+		pixelRatio,
+		canvas,
+		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");
+		},
+		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");
+		}
+	};
+}
+
+//#endregion
+//#region src/components/Box.ts
+function Box(props) {
+	return {
+		type: "box",
+		...props
+	};
+}
+
+//#endregion
+//#region src/components/CustomDraw.ts
+function CustomDraw(props) {
+	return {
+		type: "customdraw",
+		...props
+	};
+}
+
+//#endregion
+//#region src/components/Image.ts
+function Image(props) {
+	return {
+		type: "image",
+		...props
+	};
+}
+
+//#endregion
+//#region src/components/RichText.ts
+function RichText(props) {
+	return {
+		type: "richtext",
+		...props
+	};
+}
+
+//#endregion
+//#region src/components/Stack.ts
+function Stack(props) {
+	return {
+		type: "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) {
+	return {
+		type: "text",
+		...props
+	};
+}
+
+//#endregion
+//#region src/components/Transform.ts
+function Transform(props) {
+	return {
+		type: "transform",
+		...props
+	};
+}
+
+//#endregion
+//#region src/layout/utils/print.ts
+/**
+* 获取元素类型的显示名称
+*/
+function getElementType(element) {
+	switch (element.type) {
+		case "box": return "Box";
+		case "text": return `Text "${element.content.slice(0, 20)}${element.content.length > 20 ? "..." : ""}"`;
+		case "stack": return "Stack";
+		case "image": return "Image";
+		case "svg": return "Svg";
+		default: return element.type;
+	}
+}
+/**
+* 递归打印布局树
+*/
+function printLayoutToString(node, prefix = "", isLast = true, depth = 0) {
+	const lines = [];
+	const connector = isLast ? "└─ " : "├─ ";
+	const type = getElementType(node.element);
+	const { x, y, width, height } = node.layout;
+	const childCount = node.children.length;
+	lines.push(`${prefix}${connector}${type} @(${Math.round(x)},${Math.round(y)}) size:${Math.round(width)}x${Math.round(height)}`);
+	if (node.element.type === "text" && node.lines) {
+		const contentPrefix = prefix + (isLast ? "    " : "│   ");
+		for (let i = 0; i < node.lines.length; i++) {
+			const lineText = node.lines[i];
+			const isLastLine = i === node.lines.length - 1 && childCount === 0;
+			lines.push(`${contentPrefix}${isLastLine ? "└─ " : "├─ "}${JSON.stringify(lineText)}`);
+		}
+	}
+	for (let i = 0; i < node.children.length; i++) {
+		const child = node.children[i];
+		const isChildLast = i === node.children.length - 1;
+		const childPrefix = prefix + (isLast ? "    " : "│   ");
+		lines.push(...printLayoutToString(child, childPrefix, isChildLast, depth + 1));
+	}
+	return lines;
+}
+/**
+* 打印 LayoutNode 树结构到控制台
+*/
+function printLayout(node) {
+	const lines = printLayoutToString(node, "", true);
+	console.log(lines.join("\n"));
+}
+/**
+* 将 LayoutNode 转换为美观的字符串
+* @param node LayoutNode 根节点
+* @param indent 缩进字符串，默认为两个空格
+* @returns 格式化的字符串
+*/
+function layoutToString(node, _indent = "  ") {
+	return printLayoutToString(node, "", true).join("\n");
+}
+
+//#endregion
+exports.Box = Box;
+exports.CustomDraw = CustomDraw;
+exports.Image = Image;
+exports.RichText = RichText;
+exports.Stack = Stack;
+exports.Svg = Svg;
+exports.Text = Text;
+exports.Transform = Transform;
+exports.computeLayout = computeLayout;
+exports.createCanvas = createCanvas;
+exports.createCanvasMeasureContext = createCanvasMeasureContext;
+exports.layoutToString = layoutToString;
+exports.linearGradient = linearGradient;
+exports.printLayout = printLayout;
+exports.radialGradient = radialGradient;
+exports.svg = svg;