@pdfme/jsx 6.1.1-dev.8 → 6.1.2-dev.3

package/dist/index.js

@@ -1,14 +1,30 @@
 import { a as isPdfJsxElement, n as cloneElementWithChildren, o as isPdfJsxFragment, r as createElementNode } from "./node-BeNL0xMl.js";
-import { getDefaultFont, pt2mm, resolvePageSize } from "@pdfme/common";
-import { measureTextHeight } from "@pdfme/schemas/utils";
+import { getDefaultFont, isBlankPdf, pt2mm, resolvePageSize } from "@pdfme/common";
+import { escapeInlineMarkdown, getVariableNames, measureTextHeight, visitVariables } from "@pdfme/schemas/utils";
 //#region src/components.ts
 var makeBuiltin = (kind) => (props) => createElementNode(kind, props);
 var Page = makeBuiltin("page");
+var Static = makeBuiltin("static");
+var Header = (props) => createElementNode("static", {
+	...props,
+	placement: "top"
+});
+var Footer = (props) => createElementNode("static", {
+	...props,
+	placement: "bottom"
+});
+var Absolute = makeBuiltin("absolute");
 var Stack = makeBuiltin("stack");
 var Row = makeBuiltin("row");
 var Box = makeBuiltin("box");
 var Spacer = makeBuiltin("spacer");
 var Text = makeBuiltin("text");
+var MultiVariableText = makeBuiltin("multiVariableText");
+var Image = makeBuiltin("image");
+var Svg = makeBuiltin("svg");
+var Rectangle = makeBuiltin("rectangle");
+var Ellipse = makeBuiltin("ellipse");
+var Line = makeBuiltin("line");
 var List = makeBuiltin("list");
 var Table = makeBuiltin("table");
 var PageBreak = (props) => createElementNode("pagebreak", props);
@@ -18,6 +34,10 @@ var DEFAULT_FONT_SIZE = 10;
 var DEFAULT_LINE_HEIGHT = 1;
 var DEFAULT_CHARACTER_SPACING = 0;
 var DEFAULT_FONT_COLOR = "#000000";
+var DEFAULT_VISUAL_HEIGHT = 40;
+var DEFAULT_LINE_THICKNESS = .5;
+var DEFAULT_LINE_COLOR = "#000000";
+var DEFAULT_SHAPE_BORDER_COLOR = "#000000";
 var DEFAULT_DYNAMIC_FONT_SIZE = {
 	min: 4,
 	max: 72,
@@ -25,19 +45,43 @@ var DEFAULT_DYNAMIC_FONT_SIZE = {
 };
 var renderToTemplate = async (node, options = {}) => {
 	validatePageBreakPlacement(node);
-	const pages = flattenChildren(expandPageBreaks(node)).filter((child) => isPdfJsxElement(child) && child.kind === "page");
+	const expanded = expandPageBreaks(node);
+	validateAbsolutePlacement(expanded);
+	validateNoTopLevelStatic(expanded);
+	const pages = flattenChildren(expanded).filter((child) => isPdfJsxElement(child) && child.kind === "page");
 	if (pages.length === 0) throw new Error("@pdfme/jsx: renderToTemplate root must contain at least one <Page>.");
 	const firstPageProps = pages[0]?.props;
 	const firstMargin = resolveBoxSides(firstPageProps.margin);
 	const pageSize = resolvePageSize(firstPageProps.size, firstPageProps.orientation);
 	validateConsistentPageProps(pages, pageSize, firstMargin);
+	validateStaticPlacement(pages);
+	const { pages: bodyPages, blocks: staticBlocks } = extractStaticChildren(pages);
 	const inputs = {};
 	const usedNames = /* @__PURE__ */ new Set();
 	const nameCounters = {};
 	const font = options.font ?? getDefaultFont();
 	const _cache = /* @__PURE__ */ new Map();
 	const pageSchemas = [];
-	for (const page of pages) {
+	const staticSchemas = [];
+	const hasStaticChildren = hasStaticBlocks(staticBlocks);
+	if (hasStaticChildren && options.basePdf != null && !isBlankPdf(options.basePdf)) throw new Error("@pdfme/jsx: <Static> is supported only with a blank basePdf.");
+	if (hasStaticChildren) await layoutStaticBlocks({
+		blocks: staticBlocks,
+		frame: {
+			x: 0,
+			y: 0,
+			width: pageSize.width,
+			height: pageSize.height
+		},
+		staticSchemas,
+		inputs,
+		usedNames,
+		nameCounters,
+		defaultFont: firstPageProps.font,
+		font,
+		_cache
+	});
+	for (const page of bodyPages) {
 		const props = page.props;
 		const margin = resolveBoxSides(props.margin);
 		const frame = {
@@ -55,21 +99,29 @@ var renderToTemplate = async (node, options = {}) => {
 			font,
 			_cache
 		};
-		await layoutChildren(page.children, frame, "stack", { gap: 0 }, ctx);
+		await layoutChildren(page.children, frame, "stack", {
+			gap: 0,
+			alignItems: "stretch",
+			justifyContent: "start"
+		}, ctx);
 		pageSchemas.push(ctx.schemas);
 	}
+	const basePdf = options.basePdf ?? {
+		width: pageSize.width,
+		height: pageSize.height,
+		padding: [
+			firstMargin.top,
+			firstMargin.right,
+			firstMargin.bottom,
+			firstMargin.left
+		]
+	};
 	return {
 		template: {
-			basePdf: options.basePdf ?? {
-				width: pageSize.width,
-				height: pageSize.height,
-				padding: [
-					firstMargin.top,
-					firstMargin.right,
-					firstMargin.bottom,
-					firstMargin.left
-				]
-			},
+			basePdf: staticSchemas.length > 0 && isBlankPdf(basePdf) ? {
+				...basePdf,
+				staticSchema: [...basePdf.staticSchema ?? [], ...staticSchemas]
+			} : basePdf,
 			schemas: pageSchemas
 		},
 		inputs: [inputs]
@@ -115,14 +167,66 @@ var flattenForSplitting = (children) => {
 	return [children];
 };
 var expandPageBreaks = (node) => splitChildrenByPageBreak(node).flat();
+var extractStaticChildren = (pages) => {
+	const blocks = {
+		top: [],
+		bottom: []
+	};
+	return {
+		pages: pages.map((page, pageIndex) => {
+			const bodyChildren = [];
+			for (const child of flattenForSplitting(page.children)) {
+				if (isPdfJsxElement(child) && child.kind === "static") {
+					if (pageIndex === 0) blocks[getStaticPlacement(child)].push(child.children);
+					continue;
+				}
+				bodyChildren.push(child);
+			}
+			return cloneElementWithChildren(page, bodyChildren);
+		}),
+		blocks
+	};
+};
+var hasStaticBlocks = (blocks) => blocks.top.length > 0 || blocks.bottom.length > 0;
+var layoutStaticBlocks = async (arg) => {
+	for (const placement of ["top", "bottom"]) {
+		const children = arg.blocks[placement];
+		if (children.length === 0) continue;
+		const schemas = [];
+		const ctx = {
+			schemas,
+			inputs: arg.inputs,
+			usedNames: arg.usedNames,
+			nameCounters: arg.nameCounters,
+			defaultFont: arg.defaultFont,
+			font: arg.font,
+			_cache: arg._cache
+		};
+		const size = await layoutChildren(children, arg.frame, "stack", {
+			gap: 0,
+			alignItems: "stretch",
+			justifyContent: "start"
+		}, ctx);
+		if (placement === "bottom") shiftSchemas(schemas, 0, schemas.length, 0, Math.max(0, arg.frame.height - size.height));
+		arg.staticSchemas.push(...schemas);
+	}
+};
 var layoutChildren = async (children, frame, mode, opts, ctx) => {
 	const items = flattenChildren(children);
-	const widths = mode === "row" ? resolveRowWidths(items, frame.width, opts.gap) : void 0;
+	const flowItems = items.filter((item) => !isAbsoluteElement(item));
+	const widths = mode === "row" ? resolveRowWidths(flowItems, frame.width, opts.gap) : void 0;
 	let cursor = 0;
 	let crossMax = 0;
+	let flowIndex = 0;
+	const layoutItems = [];
 	for (let i = 0; i < items.length; i += 1) {
 		const child = items[i];
-		const width = mode === "row" ? widths?.[i] ?? 0 : frame.width;
+		if (isAbsoluteElement(child)) {
+			await renderAbsolute(child.props, child.children, frame, ctx);
+			continue;
+		}
+		const margin = getChildMargin(child);
+		const width = mode === "row" ? widths?.[flowIndex] ?? 0 : resolveStackChildWidth(child, frame.width, margin);
 		const childFrame = mode === "stack" ? {
 			x: frame.x,
 			y: frame.y + cursor,
@@ -134,68 +238,197 @@ var layoutChildren = async (children, frame, mode, opts, ctx) => {
 			width,
 			height: frame.height
 		};
+		childFrame.x += margin.left;
+		childFrame.y += margin.top;
+		childFrame.height = Math.max(0, childFrame.height - margin.top - margin.bottom);
+		const schemaStart = ctx.schemas.length;
 		const size = typeof child === "string" || typeof child === "number" ? await renderText({ children: String(child) }, childFrame, ctx) : await renderElement(child, childFrame, mode, ctx);
-		const advance = mode === "stack" ? size.height : width;
-		cursor += advance + (i < items.length - 1 ? opts.gap : 0);
-		crossMax = Math.max(crossMax, mode === "stack" ? size.width : size.height);
+		const schemaEnd = ctx.schemas.length;
+		const mainSize = mode === "stack" ? margin.top + size.height + margin.bottom : margin.left + width + margin.right;
+		const outerHeight = margin.top + size.height + margin.bottom;
+		layoutItems.push({
+			schemaStart,
+			schemaEnd,
+			outerHeight
+		});
+		if (mode === "stack") {
+			const outerWidth = margin.left + size.width + margin.right;
+			const dx = resolveAlignOffset(frame.width, outerWidth, opts.alignItems);
+			if (dx !== 0) shiftSchemas(ctx.schemas, schemaStart, schemaEnd, dx, 0);
+		}
+		cursor += mainSize + (flowIndex < flowItems.length - 1 ? opts.gap : 0);
+		flowIndex += 1;
+		crossMax = Math.max(crossMax, mode === "stack" ? margin.left + size.width + margin.right : margin.top + size.height + margin.bottom);
+	}
+	const contentMainSize = cursor;
+	const containerMainSize = opts.mainSize ?? contentMainSize;
+	applyJustifyContent(ctx.schemas, layoutItems, mode, contentMainSize, containerMainSize, opts);
+	if (mode === "row") {
+		const rowHeight = opts.crossSize ?? crossMax;
+		for (const item of layoutItems) {
+			const dy = resolveAlignOffset(rowHeight, item.outerHeight, opts.alignItems);
+			if (dy !== 0) shiftSchemas(ctx.schemas, item.schemaStart, item.schemaEnd, 0, dy);
+		}
+		return {
+			width: containerMainSize,
+			height: rowHeight
+		};
 	}
-	return mode === "stack" ? {
+	return {
 		width: crossMax,
-		height: cursor
-	} : {
-		width: cursor,
-		height: crossMax
+		height: containerMainSize
 	};
 };
 var resolveRowWidths = (items, frameWidth, gap) => {
-	let fixedWidth = 0;
-	let flexCount = 0;
-	const widths = items.map((item) => {
-		if (typeof item === "string" || typeof item === "number") {
-			flexCount += 1;
-			return;
-		}
-		const width = item.props.width;
-		if (typeof width === "number") {
-			fixedWidth += width;
-			return width;
-		}
-		flexCount += 1;
+	let usedWidth = 0;
+	let totalGrow = 0;
+	const parts = items.map((item) => {
+		const margin = getChildMargin(item);
+		const width = getChildWidth(item);
+		const grow = getChildFlexGrow(item) ?? (width == null ? 1 : 0);
+		const basis = width ?? 0;
+		usedWidth += basis + margin.left + margin.right;
+		totalGrow += grow;
+		return {
+			basis,
+			grow
+		};
 	});
-	const remaining = Math.max(0, frameWidth - fixedWidth - Math.max(0, items.length - 1) * gap);
-	const flexWidth = flexCount > 0 ? remaining / flexCount : 0;
-	return widths.map((width) => width ?? flexWidth);
+	const remaining = Math.max(0, frameWidth - usedWidth - Math.max(0, items.length - 1) * gap);
+	const flexUnit = totalGrow > 0 ? remaining / totalGrow : 0;
+	return parts.map(({ basis, grow }) => basis + grow * flexUnit);
+};
+var getChildMargin = (child) => {
+	if (typeof child === "string" || typeof child === "number") return resolveBoxSides();
+	return resolveBoxSides(child.props.margin);
+};
+var getChildWidth = (child) => {
+	if (typeof child === "string" || typeof child === "number") return void 0;
+	const width = child.props.width;
+	return typeof width === "number" ? width : void 0;
+};
+var getChildFlexGrow = (child) => {
+	if (typeof child === "string" || typeof child === "number") return void 0;
+	const props = child.props;
+	const flexGrow = props.flexGrow ?? props.flex;
+	return typeof flexGrow === "number" ? Math.max(0, flexGrow) : void 0;
+};
+var isAbsoluteElement = (child) => isPdfJsxElement(child) && child.kind === "absolute";
+var getStaticPlacement = (element) => {
+	const placement = element.props.placement ?? "top";
+	if (placement !== "top" && placement !== "bottom") throw new Error("@pdfme/jsx: <Static> placement must be \"top\" or \"bottom\".");
+	return placement;
+};
+var resolveStackChildWidth = (child, frameWidth, margin) => {
+	const width = getChildWidth(child);
+	if (width != null) return width;
+	return Math.max(0, frameWidth - margin.left - margin.right);
+};
+var applyJustifyContent = (schemas, items, mode, contentMainSize, containerMainSize, opts) => {
+	const extraSpace = Math.max(0, containerMainSize - contentMainSize);
+	if (extraSpace === 0 || opts.justifyContent === "start") return;
+	const extraGap = opts.justifyContent === "space-between" && items.length > 1 ? extraSpace / (items.length - 1) : 0;
+	const startOffset = opts.justifyContent === "center" ? extraSpace / 2 : opts.justifyContent === "end" ? extraSpace : 0;
+	let runningExtraGap = 0;
+	for (const item of items) {
+		const offset = startOffset + runningExtraGap;
+		if (offset !== 0) shiftSchemas(schemas, item.schemaStart, item.schemaEnd, mode === "row" ? offset : 0, mode === "stack" ? offset : 0);
+		runningExtraGap += extraGap;
+	}
+};
+var resolveAlignOffset = (containerSize, itemSize, alignItems) => {
+	if (alignItems === "center") return Math.max(0, (containerSize - itemSize) / 2);
+	if (alignItems === "end") return Math.max(0, containerSize - itemSize);
+	return 0;
+};
+var shiftSchemas = (schemas, start, end, dx, dy) => {
+	for (let i = start; i < end; i += 1) {
+		const schema = schemas[i];
+		if (!schema) continue;
+		schema.position = {
+			x: schema.position.x + dx,
+			y: schema.position.y + dy
+		};
+	}
 };
 var renderElement = async (element, frame, parentMode, ctx) => {
+	const props = parentMode === "row" && getChildFlexGrow(element) != null ? {
+		...element.props,
+		width: frame.width
+	} : element.props;
 	switch (element.kind) {
-		case "stack": return renderStack(element.props, element.children, frame, ctx);
-		case "row": return renderRow(element.props, element.children, frame, ctx);
-		case "box": return renderBox(element.props, element.children, frame, parentMode, ctx);
-		case "spacer": return Promise.resolve(renderSpacer(element.props));
+		case "stack": return renderStack(props, element.children, frame, ctx);
+		case "row": return renderRow(props, element.children, frame, ctx);
+		case "box": return renderBox(props, element.children, frame, parentMode, ctx);
+		case "spacer": return Promise.resolve(renderSpacer(props));
 		case "text": return renderText({
-			...element.props,
+			...props,
+			children: element.children
+		}, frame, ctx);
+		case "multiVariableText": return renderMultiVariableText({
+			...props,
+			children: element.children
+		}, frame, ctx);
+		case "image": return renderImage(props, frame, ctx);
+		case "svg": return renderSvg({
+			...props,
 			children: element.children
 		}, frame, ctx);
+		case "rectangle": return renderShape("rectangle", props, frame, ctx);
+		case "ellipse": return renderShape("ellipse", props, frame, ctx);
+		case "line": return renderLine(props, frame, ctx);
 		case "list": return renderList({
-			...element.props,
+			...props,
 			children: element.children
 		}, frame, ctx);
-		case "table": return renderTable(element.props, frame, ctx);
+		case "table": return renderTable(props, frame, ctx);
+		case "static": throw new Error("@pdfme/jsx: <Static> can only be used as a direct child of the first <Page>.");
+		case "absolute": return renderAbsolute(props, element.children, frame, ctx);
 		default: return {
 			width: 0,
 			height: 0
 		};
 	}
 };
+var renderAbsolute = async (props, children, frame, ctx) => {
+	const x = props.x ?? 0;
+	const y = props.y ?? 0;
+	await layoutChildren(children, {
+		x: frame.x + x,
+		y: frame.y + y,
+		width: props.width ?? Math.max(0, frame.width - x),
+		height: props.height ?? Math.max(0, frame.height - y)
+	}, "stack", {
+		gap: 0,
+		alignItems: "stretch",
+		justifyContent: "start"
+	}, ctx);
+	return {
+		width: 0,
+		height: 0
+	};
+};
 var renderStack = (props, children, frame, ctx) => layoutChildren(children, {
 	...frame,
-	width: props.width ?? frame.width
-}, "stack", { gap: props.gap ?? 0 }, ctx);
+	width: props.width ?? frame.width,
+	height: props.height ?? frame.height
+}, "stack", {
+	gap: props.gap ?? 0,
+	alignItems: props.alignItems ?? "stretch",
+	justifyContent: props.justifyContent ?? "start",
+	mainSize: props.height
+}, ctx);
 var renderRow = (props, children, frame, ctx) => layoutChildren(children, {
 	...frame,
 	width: props.width ?? frame.width,
 	height: props.height ?? frame.height
-}, "row", { gap: props.gap ?? 0 }, ctx);
+}, "row", {
+	gap: props.gap ?? 0,
+	alignItems: props.alignItems ?? "start",
+	justifyContent: props.justifyContent ?? "start",
+	mainSize: props.width,
+	crossSize: props.height
+}, ctx);
 var renderBox = async (props, children, frame, _parentMode, ctx) => {
 	const width = props.width ?? frame.width;
 	const padding = resolveBoxSides(props.padding);
@@ -223,7 +456,11 @@ var renderBox = async (props, children, frame, _parentMode, ctx) => {
 		y: frame.y + padding.top,
 		width: width - padding.left - padding.right,
 		height: (props.height ?? frame.height) - padding.top - padding.bottom
-	}, "stack", { gap: 0 }, ctx);
+	}, "stack", {
+		gap: 0,
+		alignItems: "stretch",
+		justifyContent: "start"
+	}, ctx);
 	const height = props.height ?? childSize.height + padding.top + padding.bottom;
 	if (needsRect) ctx.schemas[beforeCount] = {
 		...ctx.schemas[beforeCount],
@@ -243,8 +480,10 @@ var renderText = async (props, frame, ctx) => {
 	const lineHeight = props.lineHeight ?? DEFAULT_LINE_HEIGHT;
 	const width = props.width ?? frame.width;
 	const value = childrenToString(props.children);
-	const name = resolveName(ctx, "text", props.name);
 	const readOnly = props.readOnly ?? props.name == null;
+	const textFormat = props.textFormat ?? "plain";
+	if (!readOnly && textFormat === "inline-markdown") throw new Error("@pdfme/jsx: editable <Text> does not support textFormat=\"inline-markdown\". Use read-only <Text> or <MultiVariableText>.");
+	const name = resolveName(ctx, "text", props.name);
 	const schema = {
 		name,
 		type: "text",
@@ -267,13 +506,14 @@ var renderText = async (props, frame, ctx) => {
 		characterSpacing: props.spacing ?? DEFAULT_CHARACTER_SPACING,
 		fontColor: props.color ?? DEFAULT_FONT_COLOR,
 		backgroundColor: props.background ?? "",
-		textFormat: props.textFormat ?? "plain",
+		textFormat,
 		overflow: props.overflow,
 		strikethrough: props.strikethrough ?? false,
 		underline: props.underline ?? false
 	};
 	if (props.borderColor) schema.borderColor = props.borderColor;
-	if (props.borderWidth != null) schema.borderWidth = props.borderWidth;
+	if (props.borderWidth != null) schema.borderWidth = resolveBoxSides(props.borderWidth);
+	if (props.padding != null) schema.padding = resolveBoxSides(props.padding);
 	if (props.dynamicFontSize) schema.dynamicFontSize = {
 		min: props.dynamicFontSize.min ?? DEFAULT_DYNAMIC_FONT_SIZE.min,
 		max: props.dynamicFontSize.max ?? DEFAULT_DYNAMIC_FONT_SIZE.max,
@@ -292,6 +532,174 @@ var renderText = async (props, frame, ctx) => {
 		height: schema.height
 	};
 };
+var renderMultiVariableText = async (props, frame, ctx) => {
+	const fontSize = props.size ?? DEFAULT_FONT_SIZE;
+	const lineHeight = props.lineHeight ?? DEFAULT_LINE_HEIGHT;
+	const width = props.width ?? frame.width;
+	const templateText = props.text ?? childrenToString(props.children);
+	const values = normalizeMultiVariableTextValues(props.values);
+	const variables = resolveMultiVariableTextVariables(templateText, props.variables, values);
+	const name = resolveName(ctx, "multiVariableText", props.name);
+	const readOnly = props.readOnly ?? props.name == null;
+	const textFormat = props.textFormat ?? "plain";
+	const content = readOnly ? substituteMultiVariableText(templateText, values, textFormat === "inline-markdown") : JSON.stringify(values);
+	const schema = {
+		name,
+		type: "multiVariableText",
+		content,
+		position: {
+			x: frame.x,
+			y: frame.y
+		},
+		width,
+		height: props.height ?? 0,
+		rotate: props.rotate ?? 0,
+		opacity: props.opacity ?? 1,
+		readOnly,
+		required: props.required,
+		alignment: props.align ?? "left",
+		verticalAlignment: props.valign ?? "top",
+		fontSize,
+		fontName: props.font ?? ctx.defaultFont,
+		lineHeight,
+		characterSpacing: props.spacing ?? DEFAULT_CHARACTER_SPACING,
+		fontColor: props.color ?? DEFAULT_FONT_COLOR,
+		backgroundColor: props.background ?? "",
+		textFormat,
+		overflow: props.overflow,
+		strikethrough: props.strikethrough ?? false,
+		underline: props.underline ?? false,
+		text: templateText,
+		variables
+	};
+	if (props.borderColor) schema.borderColor = props.borderColor;
+	if (props.borderWidth != null) schema.borderWidth = resolveBoxSides(props.borderWidth);
+	if (props.padding != null) schema.padding = resolveBoxSides(props.padding);
+	if (props.dynamicFontSize) schema.dynamicFontSize = {
+		min: props.dynamicFontSize.min ?? DEFAULT_DYNAMIC_FONT_SIZE.min,
+		max: props.dynamicFontSize.max ?? DEFAULT_DYNAMIC_FONT_SIZE.max,
+		fit: props.dynamicFontSize.fit ?? DEFAULT_DYNAMIC_FONT_SIZE.fit
+	};
+	if (props.height == null) schema.height = await measureTextHeight({
+		value: readOnly ? content : substituteMultiVariableText(templateText, values, textFormat === "inline-markdown"),
+		schema,
+		font: ctx.font,
+		_cache: ctx._cache
+	});
+	if (!readOnly) ctx.inputs[name] = content;
+	ctx.schemas.push(schema);
+	return {
+		width,
+		height: schema.height
+	};
+};
+var renderImage = (props, frame, ctx) => {
+	const width = props.width ?? frame.width;
+	const height = props.height ?? DEFAULT_VISUAL_HEIGHT;
+	const name = resolveName(ctx, "image", props.name);
+	const readOnly = props.readOnly ?? props.name == null;
+	const content = props.src ?? "";
+	const schema = {
+		name,
+		type: "image",
+		content,
+		position: {
+			x: frame.x,
+			y: frame.y
+		},
+		width,
+		height,
+		rotate: props.rotate ?? 0,
+		opacity: props.opacity ?? 1,
+		readOnly,
+		required: props.required
+	};
+	if (!readOnly) ctx.inputs[name] = content;
+	ctx.schemas.push(schema);
+	return {
+		width,
+		height
+	};
+};
+var renderSvg = (props, frame, ctx) => {
+	const width = props.width ?? frame.width;
+	const height = props.height ?? DEFAULT_VISUAL_HEIGHT;
+	const name = resolveName(ctx, "svg", props.name);
+	const readOnly = props.readOnly ?? props.name == null;
+	const content = props.svg ?? childrenToString(props.children);
+	const schema = {
+		name,
+		type: "svg",
+		content,
+		position: {
+			x: frame.x,
+			y: frame.y
+		},
+		width,
+		height,
+		rotate: props.rotate ?? 0,
+		opacity: props.opacity ?? 1,
+		readOnly,
+		required: props.required
+	};
+	if (!readOnly) ctx.inputs[name] = content;
+	ctx.schemas.push(schema);
+	return {
+		width,
+		height
+	};
+};
+var renderShape = (type, props, frame, ctx) => {
+	const width = props.width ?? frame.width;
+	const height = props.height ?? DEFAULT_VISUAL_HEIGHT;
+	const fill = props.fill ?? "";
+	const borderWidth = props.borderWidth ?? (props.borderColor || !fill ? 1 : 0);
+	const schema = {
+		name: resolveName(ctx, type, props.name),
+		type,
+		position: {
+			x: frame.x,
+			y: frame.y
+		},
+		width,
+		height,
+		rotate: props.rotate ?? 0,
+		opacity: props.opacity ?? 1,
+		readOnly: true,
+		borderWidth,
+		borderColor: props.borderColor ?? (borderWidth > 0 ? DEFAULT_SHAPE_BORDER_COLOR : ""),
+		color: fill,
+		radius: type === "rectangle" ? props.radius ?? 0 : 0
+	};
+	ctx.schemas.push(schema);
+	return {
+		width,
+		height
+	};
+};
+var renderLine = (props, frame, ctx) => {
+	const width = props.width ?? frame.width;
+	const height = props.height ?? DEFAULT_LINE_THICKNESS;
+	const schema = {
+		name: resolveName(ctx, "line", props.name),
+		type: "line",
+		position: {
+			x: frame.x,
+			y: frame.y
+		},
+		width,
+		height,
+		rotate: props.rotate ?? 0,
+		opacity: props.opacity ?? 1,
+		readOnly: true,
+		color: props.color ?? DEFAULT_LINE_COLOR
+	};
+	ctx.schemas.push(schema);
+	return {
+		width,
+		height
+	};
+};
 var renderList = (props, frame, ctx) => {
 	const fontSize = props.size ?? DEFAULT_FONT_SIZE;
 	const lineHeight = props.lineHeight ?? DEFAULT_LINE_HEIGHT;
@@ -363,7 +771,7 @@ var renderTable = (props, frame, ctx) => {
 		showHead,
 		repeatHead: props.repeatHead ?? false,
 		head: props.head,
-		headWidthPercentages: normalizeColumnWidths(props.widths, props.head.length),
+		headWidthPercentages: normalizeColumnWeights(props.columnWeights, props.head.length),
 		tableStyles: {
 			borderColor: props.tableStyles?.borderColor ?? "#000000",
 			borderWidth: props.tableStyles?.borderWidth ?? .3
@@ -402,8 +810,47 @@ var normalizeListItems = (props) => {
 	}));
 };
 var serializeListItem = (item) => `${"	".repeat(Math.max(0, item.level))}${item.text}`;
-var normalizeColumnWidths = (widths, columnCount) => {
-	if (widths && widths.length > 0) return widths;
+var normalizeMultiVariableTextValues = (values) => {
+	const normalized = {};
+	Object.entries(values ?? {}).forEach(([key, value]) => {
+		normalized[key] = value == null ? "" : String(value);
+	});
+	return normalized;
+};
+var resolveMultiVariableTextVariables = (templateText, variables, values) => {
+	const result = [];
+	const seen = /* @__PURE__ */ new Set();
+	const add = (name) => {
+		if (!seen.has(name)) {
+			seen.add(name);
+			result.push(name);
+		}
+	};
+	variables?.forEach(add);
+	getVariableNames(templateText).forEach(add);
+	Object.keys(values).forEach(add);
+	return result;
+};
+var substituteMultiVariableText = (templateText, values, escapeMarkdown) => {
+	let result = "";
+	let lastIndex = 0;
+	visitVariables(templateText, ({ name, startIndex, endIndex }) => {
+		result += templateText.slice(lastIndex, startIndex);
+		const value = values[name];
+		if (value != null) result += escapeMarkdown ? escapeInlineMarkdown(value) : value;
+		lastIndex = endIndex + 1;
+	});
+	return result + templateText.slice(lastIndex);
+};
+var normalizeColumnWeights = (columnWeights, columnCount) => {
+	if (columnWeights && columnWeights.length > 0) {
+		const normalizedWidths = Array.from({ length: columnCount }, (_, index) => {
+			const width = columnWeights[index];
+			return typeof width === "number" && Number.isFinite(width) && width > 0 ? width : 1;
+		});
+		const totalWidth = normalizedWidths.reduce((sum, width) => sum + width, 0);
+		if (totalWidth > 0) return normalizedWidths.map((width) => width / totalWidth * 100);
+	}
 	if (columnCount <= 0) return [];
 	return Array.from({ length: columnCount }, () => 100 / columnCount);
 };
@@ -491,6 +938,26 @@ var PAGE_BREAK_PARENT_KINDS = new Set([
 	"stack",
 	"box"
 ]);
+var STATIC_CONTAINER_KINDS = new Set([
+	"absolute",
+	"stack",
+	"row",
+	"box"
+]);
+var STATIC_LEAF_KINDS = new Set([
+	"spacer",
+	"text",
+	"image",
+	"svg",
+	"rectangle",
+	"ellipse",
+	"line"
+]);
+var ABSOLUTE_PARENT_KINDS = new Set([
+	"page",
+	"static",
+	"box"
+]);
 var validatePageBreakPlacement = (node, parentKind = void 0, canBreak = false) => {
 	for (const child of flattenForSplitting(node)) {
 		if (!isPdfJsxElement(child)) continue;
@@ -502,7 +969,61 @@ var validatePageBreakPlacement = (node, parentKind = void 0, canBreak = false) =
 		validatePageBreakPlacement(child.children, child.kind, childCanBreak);
 	}
 };
+var validateAbsolutePlacement = (node, parentKind = void 0) => {
+	for (const child of flattenForSplitting(node)) {
+		if (!isPdfJsxElement(child)) continue;
+		if (child.kind === "absolute" && (!parentKind || !ABSOLUTE_PARENT_KINDS.has(parentKind))) throw new Error("@pdfme/jsx: <Absolute> can only be used inside <Page>, <Static>, or <Box>.");
+		validateAbsolutePlacement(child.children, child.kind);
+	}
+};
+var validateStaticPlacement = (pages) => {
+	for (let pageIndex = 0; pageIndex < pages.length; pageIndex += 1) {
+		const page = pages[pageIndex];
+		for (const child of flattenForSplitting(page?.children ?? [])) {
+			if (isPdfJsxElement(child) && child.kind === "static") {
+				if (pageIndex !== 0) throw new Error("@pdfme/jsx: <Static> must appear before any <PageBreak> and can only be used inside the first <Page>.");
+				if (getStaticPlacement(child) === "bottom" && hasElementKind(child.children, "absolute")) throw new Error("@pdfme/jsx: <Absolute> is not supported inside bottom <Static>. Use top <Static> or <Page> for fixed page coordinates.");
+				validateStaticChildren(child.children);
+				continue;
+			}
+			validateNoNestedStatic(child);
+		}
+	}
+};
+var validateNoNestedStatic = (node) => {
+	if (!isPdfJsxElement(node)) return;
+	for (const child of flattenForSplitting(node.children)) {
+		if (isPdfJsxElement(child) && child.kind === "static") throw new Error("@pdfme/jsx: <Static> can only be used as a direct child of the first <Page>.");
+		validateNoNestedStatic(child);
+	}
+};
+var hasElementKind = (node, kind) => {
+	for (const child of flattenForSplitting(node)) {
+		if (!isPdfJsxElement(child)) continue;
+		if (child.kind === kind || hasElementKind(child.children, kind)) return true;
+	}
+	return false;
+};
+var validateNoTopLevelStatic = (node) => {
+	for (const child of flattenChildren(node)) if (isPdfJsxElement(child) && child.kind === "static") throw new Error("@pdfme/jsx: <Static> can only be used as a direct child of the first <Page>.");
+};
+var validateStaticChildren = (children) => {
+	for (const child of flattenForSplitting(children)) {
+		if (!isPdfJsxElement(child)) continue;
+		if (STATIC_CONTAINER_KINDS.has(child.kind)) {
+			validateStaticChildren(child.children);
+			continue;
+		}
+		if (!STATIC_LEAF_KINDS.has(child.kind)) throw new Error(`@pdfme/jsx: <Static> does not support <${child.kind}> children. Supported: read-only Stack, Row, Box, Spacer, Text, Image, Svg, Rectangle, Ellipse, and Line.`);
+		validateStaticLeafProps(child);
+	}
+};
+var validateStaticLeafProps = (element) => {
+	if (element.kind !== "text" && element.kind !== "image" && element.kind !== "svg") return;
+	const props = element.props;
+	if (props.readOnly === false || props.name != null && props.readOnly !== true) throw new Error("@pdfme/jsx: <Static> children must be read-only.");
+};
 //#endregion
-export { Box, List, Page, PageBreak, Row, Spacer, Stack, Table, Text, renderToTemplate };
+export { Absolute, Box, Ellipse, Footer, Header, Image, Line, List, MultiVariableText, Page, PageBreak, Rectangle, Row, Spacer, Stack, Static, Svg, Table, Text, renderToTemplate };
 
 //# sourceMappingURL=index.js.map