@pdfme/ui 6.1.1-dev.26 → 6.1.1-dev.30

package/dist/index.js

@@ -98636,7 +98636,7 @@ $d636bc798e7178db$export$36b2f24e97d43be($21ee218f84ac7f32$export$2e2bcd8739ae03
 $d636bc798e7178db$export$36b2f24e97d43be($cd5853a56c68fec7$export$2e2bcd8739ae039);
 $d636bc798e7178db$export$36b2f24e97d43be($05f49f930186144e$export$2e2bcd8739ae039);
 //#endregion
-//#region ../schemas/dist/splitRange-CpXivbmJ.js
+//#region ../schemas/dist/splitRange-DmVDtmzO.js
 var ALIGN_LEFT = "left";
 var ALIGN_CENTER = "center";
 var ALIGN_RIGHT = "right";
@@ -98730,6 +98730,84 @@ var LINE_END_FORBIDDEN_CHARS = [
 	"｟",
 	"«"
 ];
+var createBoxDimension = (value = 0) => ({
+	top: value,
+	right: value,
+	bottom: value,
+	left: value
+});
+var normalizeBoxDimension = (value) => ({
+	top: value?.top ?? 0,
+	right: value?.right ?? 0,
+	bottom: value?.bottom ?? 0,
+	left: value?.left ?? 0
+});
+var getBoxInsets = (schema) => ({
+	borderWidth: normalizeBoxDimension(schema.borderWidth),
+	padding: normalizeBoxDimension(schema.padding)
+});
+var getBoxContentArea = (schema) => {
+	const { borderWidth, padding } = getBoxInsets(schema);
+	const leftInset = borderWidth.left + padding.left;
+	const topInset = borderWidth.top + padding.top;
+	const rightInset = borderWidth.right + padding.right;
+	const bottomInset = borderWidth.bottom + padding.bottom;
+	return {
+		position: {
+			x: schema.position.x + leftInset,
+			y: schema.position.y + topInset
+		},
+		width: Math.max(0, schema.width - leftInset - rightInset),
+		height: Math.max(0, schema.height - topInset - bottomInset),
+		leftInset,
+		topInset,
+		rightInset,
+		bottomInset
+	};
+};
+var hasBoxDimension = (dimension) => {
+	const resolved = normalizeBoxDimension(dimension);
+	return resolved.top > 0 || resolved.right > 0 || resolved.bottom > 0 || resolved.left > 0;
+};
+var getSplitBoxDimension = (dimension, range, totalUnits) => {
+	const resolved = normalizeBoxDimension(dimension);
+	const end = range.end ?? totalUnits;
+	return {
+		top: range.start === 0 ? resolved.top : 0,
+		right: resolved.right,
+		bottom: end >= totalUnits ? resolved.bottom : 0,
+		left: resolved.left
+	};
+};
+var getBoxDimensionPropPanelSchema = (step = 1) => {
+	const getCommonProp = () => ({
+		type: "number",
+		widget: "inputNumber",
+		props: {
+			min: 0,
+			step
+		},
+		span: 6
+	});
+	return {
+		top: {
+			title: "Top",
+			...getCommonProp()
+		},
+		right: {
+			title: "Right",
+			...getCommonProp()
+		},
+		bottom: {
+			title: "Bottom",
+			...getCommonProp()
+		},
+		left: {
+			title: "Left",
+			...getCommonProp()
+		}
+	};
+};
 var getBrowserVerticalFontAdjustments = (fontKitFont, fontSize, lineHeight, verticalAlignment) => {
 	const { ascent, descent, unitsPerEm } = fontKitFont;
 	const fontBaseLineHeight = (ascent - descent) / unitsPerEm;
@@ -98817,7 +98895,8 @@ var getFontKitFont = async (fontName, font, _cache) => {
 * the box width based on the proposed size.
 */
 var calculateDynamicFontSize = ({ textSchema, fontKitFont, value, startingFontSize }) => {
-	const { fontSize: schemaFontSize, dynamicFontSize: dynamicFontSizeSetting, characterSpacing: schemaCharacterSpacing, width: boxWidth, height: boxHeight, lineHeight = 1 } = textSchema;
+	const { fontSize: schemaFontSize, dynamicFontSize: dynamicFontSizeSetting, characterSpacing: schemaCharacterSpacing, lineHeight = 1 } = textSchema;
+	const { width: boxWidth, height: boxHeight } = getBoxContentArea(textSchema);
 	const fontSize = startingFontSize || schemaFontSize || 13;
 	if (!dynamicFontSizeSetting) return fontSize;
 	if (dynamicFontSizeSetting.max < dynamicFontSizeSetting.min) return fontSize;
@@ -99023,7 +99102,7 @@ var createTextLineSplitRange = (start, end) => createDynamicLayoutSplitRange(TEX
 var getTableBodyRange = (schema) => getDynamicLayoutSplitRange(schema, TABLE_BODY_SPLIT_UNIT);
 var getTextLineRange = (schema) => getDynamicLayoutSplitRange(schema, TEXT_LINE_SPLIT_UNIT);
 //#endregion
-//#region ../schemas/dist/measure-Bjmh9Ro3.js
+//#region ../schemas/dist/measure-L5diay3k.js
 var MARKDOWN_ESCAPABLE_CHARS = new Set([
 	"\\",
 	"*",
@@ -99262,7 +99341,7 @@ var resolveRichTextRuns = async (arg) => {
 var measureRunText = (run, text, fontSize, characterSpacing) => {
 	const syntheticBoldWidth = run.syntheticBold ? fontSize * SYNTHETIC_BOLD_OFFSET_RATIO * 2 : 0;
 	const syntheticItalicWidth = run.syntheticItalic ? heightOfFontAtSize(run.fontKitFont, fontSize) * Math.tan(12 * Math.PI / 180) : 0;
-	return widthOfTextAtSize(text, run.fontKitFont, fontSize, characterSpacing) + syntheticBoldWidth + syntheticItalicWidth;
+	return widthOfTextAtSize(text, run.fontKitFont, fontSize, characterSpacing) + syntheticBoldWidth + syntheticItalicWidth + (run.code ? CODE_HORIZONTAL_PADDING * 2 : 0);
 };
 var createLine = () => ({
 	runs: [],
@@ -99272,6 +99351,14 @@ var createLine = () => ({
 var pushRunToLine = (line, run, text, fontSize, characterSpacing) => {
 	if (!text) return;
 	const width = measureRunText(run, text, fontSize, characterSpacing);
+	const lastRun = line.runs[line.runs.length - 1];
+	if (lastRun && canMergeRichTextRuns(lastRun, run)) {
+		const previousWidth = lastRun.width;
+		lastRun.text += text;
+		lastRun.width = measureRunText(lastRun, lastRun.text, fontSize, characterSpacing);
+		line.width += lastRun.width - previousWidth;
+		return;
+	}
 	if (line.runs.length > 0) line.width += characterSpacing;
 	line.runs.push({
 		...run,
@@ -99280,6 +99367,7 @@ var pushRunToLine = (line, run, text, fontSize, characterSpacing) => {
 	});
 	line.width += width;
 };
+var canMergeRichTextRuns = (a, b) => a.fontName === b.fontName && a.fontKitFont === b.fontKitFont && a.syntheticBold === b.syntheticBold && a.syntheticItalic === b.syntheticItalic && a.bold === b.bold && a.italic === b.italic && a.strikethrough === b.strikethrough && a.code === b.code && a.href === b.href;
 var measurePiecesWidth = (pieces, fontSize, characterSpacing) => {
 	let width = 0;
 	let hasText = false;
@@ -99435,7 +99523,8 @@ var getLineHeightAtSize = (line, fontSize) => {
 };
 var calculateDynamicRichTextFontSize = async (arg) => {
 	const { value, schema, font, _cache, startingFontSize } = arg;
-	const { fontSize: schemaFontSize, dynamicFontSize: dynamicFontSizeSetting, characterSpacing: schemaCharacterSpacing, width: boxWidth, height: boxHeight, lineHeight = 1 } = schema;
+	const { fontSize: schemaFontSize, dynamicFontSize: dynamicFontSizeSetting, characterSpacing: schemaCharacterSpacing, lineHeight = 1 } = schema;
+	const { width: boxWidth, height: boxHeight } = getBoxContentArea(schema);
 	const fontSize = startingFontSize || schemaFontSize || 13;
 	if (!dynamicFontSizeSetting) return fontSize;
 	if (dynamicFontSizeSetting.max < dynamicFontSizeSetting.min) return fontSize;
@@ -99521,7 +99610,7 @@ var measureTextLines = async ({ value, schema, font = getDefaultFont(), _cache =
 	const fontSize = schema.fontSize ?? 13;
 	const lineHeight = schema.lineHeight ?? 1;
 	const characterSpacing = schema.characterSpacing ?? 0;
-	const boxWidthInPt = mm2pt(schema.width);
+	const boxWidthInPt = mm2pt(getBoxContentArea(schema).width);
 	if (isInlineMarkdownTextSchema(schema)) {
 		const resolvedRuns = await resolveRichTextRuns({
 			runs: parseInlineMarkdown(value),
@@ -99580,6 +99669,23 @@ var mergeTextLineRangeValue = async ({ value, replacement, schema, font = getDef
 	return plainTextLinesToValue(nextLines);
 };
 var sumLineHeights = (lineHeights) => lineHeights.reduce((sum, height) => sum + height, 0);
+var getTextLineHeightsWithBox = (lineHeights, schema) => lineHeights.map((height, index) => height + getTextBoxVerticalInsetForRange(schema, {
+	start: index,
+	end: index + 1
+}, lineHeights.length));
+var getTextSplitBoxStyle = (schema, range, totalLines) => {
+	const { borderWidth, padding } = getBoxInsets(schema);
+	return {
+		...hasBoxDimension(schema.borderWidth) ? { borderWidth: getSplitBoxDimension(borderWidth, range, totalLines) } : {},
+		...hasBoxDimension(schema.padding) ? { padding: getSplitBoxDimension(padding, range, totalLines) } : {}
+	};
+};
+var getTextBoxVerticalInsetForRange = (schema, range, totalLines) => {
+	const { borderWidth, padding } = getBoxInsets(schema);
+	const splitBorderWidth = getSplitBoxDimension(borderWidth, range, totalLines);
+	const splitPadding = getSplitBoxDimension(padding, range, totalLines);
+	return splitBorderWidth.top + splitBorderWidth.bottom + splitPadding.top + splitPadding.bottom;
+};
 var measurePlainTextLineHeights = (lines, fontKitFont, fontSize, lineHeight) => {
 	if (lines.length === 0) return [];
 	const firstLineHeight = heightOfFontAtSize(fontKitFont, fontSize) * lineHeight;
@@ -99595,7 +99701,7 @@ var getRichTextLineHeight = (line, fontSize) => {
 	return Math.max(...line.runs.map((run) => heightOfFontAtSize(run.fontKitFont, fontSize)));
 };
 //#endregion
-//#region ../schemas/dist/dynamicTemplate-CjbGepw4.js
+//#region ../schemas/dist/dynamicTemplate-B4GCNLF9.js
 function _typeof$18(o) {
 	"@babel/helpers - typeof";
 	return _typeof$18 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -100159,7 +100265,7 @@ var getDynamicLayoutForTable = async (value, args) => {
 	};
 };
 //#endregion
-//#region ../schemas/dist/utils-Bd4CvhPZ.js
+//#region ../schemas/dist/utils-zDZkqBnX.js
 var convertForPdfLayoutProps = ({ schema, pageHeight, applyRotateTranslate = true }) => {
 	const { width: mmWidth, height: mmHeight, position, rotate, opacity } = schema;
 	const { x: mmX, y: mmY } = position;
@@ -100449,7 +100555,7 @@ var Underline = [["path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }], ["line", {
 	y2: "20"
 }]];
 //#endregion
-//#region ../schemas/dist/builtins-BNd4jd5D.js
+//#region ../schemas/dist/builtins-BB2DHceW.js
 var addUriLinkAnnotation = (arg) => {
 	const { pdfDoc, page, uri, rect, borderWidth = 0 } = arg;
 	const safeUri = normalizeSafeLinkUri(uri);
@@ -100478,7 +100584,7 @@ var addUriLinkAnnotation = (arg) => {
 };
 var getSyntheticBoldWidth = (run, fontSize) => run.syntheticBold ? fontSize * SYNTHETIC_BOLD_OFFSET_RATIO * 2 : 0;
 var getSyntheticItalicWidth = (run, fontSize) => run.syntheticItalic ? heightOfFontAtSize(run.fontKitFont, fontSize) * Math.tan(12 * Math.PI / 180) : 0;
-var getRunWidth = (run, fontSize, characterSpacing) => widthOfTextAtSize(run.text, run.fontKitFont, fontSize, characterSpacing) + getSyntheticBoldWidth(run, fontSize) + getSyntheticItalicWidth(run, fontSize);
+var getRunWidth = (run, fontSize, characterSpacing) => widthOfTextAtSize(run.text, run.fontKitFont, fontSize, characterSpacing) + getSyntheticBoldWidth(run, fontSize) + getSyntheticItalicWidth(run, fontSize) + (run.code ? CODE_HORIZONTAL_PADDING * 2 : 0);
 var getPdfFontFromObj = (run, pdfFontObj) => {
 	const pdfFont = pdfFontObj[run.fontName];
 	if (!pdfFont) throw new Error(`[@pdfme/schemas] Missing embedded font "${run.fontName}".`);
@@ -100559,10 +100665,12 @@ var getLinkAnnotationRect = (arg) => {
 var drawRun = (arg) => {
 	const { page, pdfLib, run, pdfFont, x, y, rotate, pivotPoint, fontSize, lineHeight, color, opacity, colorType, characterSpacing, strikethrough, underline } = arg;
 	const runWidth = getRunWidth(run, fontSize, characterSpacing);
+	const codePadding = run.code ? CODE_HORIZONTAL_PADDING : 0;
+	const textX = x + codePadding;
+	const textWidth = runWidth - codePadding * 2;
 	const textHeight = heightOfFontAtSize(run.fontKitFont, fontSize);
 	if (run.code) {
-		const padding = CODE_HORIZONTAL_PADDING;
-		const bgX = x - padding;
+		const bgX = x;
 		const bgY = y - textHeight * .2;
 		const bgPoint = rotate.angle === 0 ? {
 			x: bgX,
@@ -100574,7 +100682,7 @@ var drawRun = (arg) => {
 		page.drawRectangle({
 			x: bgPoint.x,
 			y: bgPoint.y,
-			width: runWidth + padding * 2,
+			width: runWidth,
 			height: textHeight * 1.2,
 			rotate,
 			color: hex2PrintingColor(CODE_BACKGROUND_COLOR, colorType),
@@ -100583,9 +100691,9 @@ var drawRun = (arg) => {
 	}
 	if (strikethrough && runWidth > 0) drawDecorationLine({
 		page,
-		x,
+		x: textX,
 		y: y + textHeight / 3,
-		width: runWidth,
+		width: textWidth,
 		rotate,
 		pivotPoint,
 		fontSize,
@@ -100594,9 +100702,9 @@ var drawRun = (arg) => {
 	});
 	if (underline && runWidth > 0) drawDecorationLine({
 		page,
-		x,
+		x: textX,
 		y: y - textHeight / 12,
-		width: runWidth,
+		width: textWidth,
 		rotate,
 		pivotPoint,
 		fontSize,
@@ -100623,14 +100731,14 @@ var drawRun = (arg) => {
 			...run.syntheticItalic ? { ySkew: pdfLib.degrees(12) } : {}
 		});
 	};
-	drawAt(x);
+	drawAt(textX);
 	if (run.syntheticBold) {
 		const offset = fontSize * SYNTHETIC_BOLD_OFFSET_RATIO;
-		for (let i = 1; i <= 2; i++) drawAt(x + offset * i);
+		for (let i = 1; i <= 2; i++) drawAt(textX + offset * i);
 	}
 };
 var renderInlineMarkdownText = async (arg) => {
-	const { value, schema, font, embedPdfFont, fontKitFont, pdfDoc, page, pdfLib, _cache, colorType, fontSize, color, alignment, verticalAlignment, lineHeight, characterSpacing, x, width, height, pageHeight, pivotPoint, rotate, opacity } = arg;
+	const { value, schema, font, embedPdfFont, fontKitFont, pdfDoc, page, pdfLib, _cache, colorType, fontSize, color, alignment, verticalAlignment, lineHeight, characterSpacing, x, y, width, height, pivotPoint, rotate, opacity } = arg;
 	const allLines = layoutRichTextLines({
 		runs: await resolveRichTextRuns({
 			runs: parseInlineMarkdown(value),
@@ -100670,7 +100778,7 @@ var renderInlineMarkdownText = async (arg) => {
 		let xLine = x;
 		if (alignment === "center") xLine += (width - textWidth) / 2;
 		else if (alignment === "right") xLine += width - textWidth;
-		const yLine = pageHeight - mm2pt(schema.position.y) - yOffset - lineHeight * fontSize * rowIndex;
+		const yLine = y + height - yOffset - lineHeight * fontSize * rowIndex;
 		page.pushOperators(pdfLib.setCharacterSpacing(spacing));
 		if (schema.strikethrough || schema.underline) {
 			const textHeight = Math.max(...line.runs.map((run) => heightOfFontAtSize(run.fontKitFont, fontSize)));
@@ -100797,10 +100905,36 @@ var getGraphemeSegmenter = () => {
 };
 var pdfRender = async (arg) => {
 	const { value, pdfDoc, pdfLib, page, options, schema, basePdf, _cache } = arg;
-	if (!value) return;
 	const { font = getDefaultFont(), colorType } = options;
+	const pageHeight = page.getHeight();
+	const { width, height, rotate, position: { x, y }, opacity } = convertForPdfLayoutProps({
+		schema,
+		pageHeight,
+		applyRotateTranslate: false
+	});
+	const pivotPoint = {
+		x: x + width / 2,
+		y: pageHeight - mm2pt(schema.position.y) - height / 2
+	};
+	drawTextBoxDecoration({
+		page,
+		schema,
+		colorType,
+		x,
+		y,
+		width,
+		height,
+		rotate,
+		pivotPoint
+	});
+	if (!value) return;
 	const fontName = schema.fontName ? schema.fontName : getFallbackFontName(font);
 	const enableInlineMarkdown = isInlineMarkdownTextSchema(schema);
+	const contentArea = getBoxContentArea(schema);
+	const contentX = x + mm2pt(contentArea.leftInset);
+	const contentY = y + mm2pt(contentArea.bottomInset);
+	const contentWidth = mm2pt(contentArea.width);
+	const contentHeight = mm2pt(contentArea.height);
 	const pdfFontValuePromise = enableInlineMarkdown ? void 0 : embedAndGetFont({
 		pdfDoc,
 		font,
@@ -100821,40 +100955,6 @@ var pdfRender = async (arg) => {
 			_cache
 		}) : void 0
 	});
-	const pageHeight = page.getHeight();
-	const { width, height, rotate, position: { x, y }, opacity } = convertForPdfLayoutProps({
-		schema,
-		pageHeight,
-		applyRotateTranslate: false
-	});
-	const pivotPoint = {
-		x: x + width / 2,
-		y: pageHeight - mm2pt(schema.position.y) - height / 2
-	};
-	if (schema.backgroundColor) {
-		const color = hex2PrintingColor(schema.backgroundColor, colorType);
-		if (rotate.angle !== 0) {
-			const rotatedPoint = rotatePoint({
-				x,
-				y
-			}, pivotPoint, rotate.angle);
-			page.drawRectangle({
-				x: rotatedPoint.x,
-				y: rotatedPoint.y,
-				width,
-				height,
-				rotate,
-				color
-			});
-		} else page.drawRectangle({
-			x,
-			y,
-			width,
-			height,
-			rotate,
-			color
-		});
-	}
 	if (enableInlineMarkdown) {
 		await renderInlineMarkdownText({
 			value,
@@ -100878,10 +100978,10 @@ var pdfRender = async (arg) => {
 			verticalAlignment,
 			lineHeight,
 			characterSpacing,
-			x,
-			width,
-			height,
-			pageHeight,
+			x: contentX,
+			y: contentY,
+			width: contentWidth,
+			height: contentHeight,
 			pivotPoint,
 			rotate,
 			opacity
@@ -100898,7 +100998,7 @@ var pdfRender = async (arg) => {
 		characterSpacing,
 		fontSize,
 		fontKitFont,
-		boxWidthInPt: width
+		boxWidthInPt: contentWidth
 	}), getTextLineRange(schema));
 	const needsTextWidth = alignment !== "left" || Boolean(schema.strikethrough || schema.underline);
 	const needsTextHeight = Boolean(schema.strikethrough || schema.underline);
@@ -100906,8 +101006,8 @@ var pdfRender = async (arg) => {
 	if (verticalAlignment === "top") yOffset = firstLineTextHeight + halfLineHeightAdjustment;
 	else {
 		const otherLinesHeight = lineHeight * fontSize * (lines.length - 1);
-		if (verticalAlignment === "bottom") yOffset = height - otherLinesHeight + descent - halfLineHeightAdjustment;
-		else if (verticalAlignment === "middle") yOffset = (height - otherLinesHeight - firstLineTextHeight + descent) / 2 + firstLineTextHeight;
+		if (verticalAlignment === "bottom") yOffset = contentHeight - otherLinesHeight + descent - halfLineHeightAdjustment;
+		else if (verticalAlignment === "middle") yOffset = (contentHeight - otherLinesHeight - firstLineTextHeight + descent) / 2 + firstLineTextHeight;
 	}
 	lines.forEach((line, rowIndex) => {
 		const trimmed = line.replace("\n", "");
@@ -100915,10 +101015,10 @@ var pdfRender = async (arg) => {
 		const textHeight = needsTextHeight ? heightOfFontAtSize(fontKitFont, fontSize) : 0;
 		const rowYOffset = lineHeight * fontSize * rowIndex;
 		if (line === "") line = "\r\n";
-		let xLine = x;
-		if (alignment === "center") xLine += (width - textWidth) / 2;
-		else if (alignment === "right") xLine += width - textWidth;
-		let yLine = pageHeight - mm2pt(schema.position.y) - yOffset - rowYOffset;
+		let xLine = contentX;
+		if (alignment === "center") xLine += (contentWidth - textWidth) / 2;
+		else if (alignment === "right") xLine += contentWidth - textWidth;
+		let yLine = contentY + contentHeight - yOffset - rowYOffset;
 		if (schema.strikethrough && textWidth > 0) {
 			const _x = xLine + textWidth + 1;
 			const _y = yLine + textHeight / 3;
@@ -100965,7 +101065,7 @@ var pdfRender = async (arg) => {
 		if (alignment === "justify" && line.slice(-1) !== "\n") {
 			const iterator = getGraphemeSegmenter().segment(trimmed)[Symbol.iterator]();
 			const len = Array.from(iterator).length;
-			spacing += (width - textWidth) / len;
+			spacing += (contentWidth - textWidth) / len;
 		}
 		page.pushOperators(pdfLib.setCharacterSpacing(spacing));
 		page.drawText(trimmed, {
@@ -100980,6 +101080,75 @@ var pdfRender = async (arg) => {
 		});
 	});
 };
+var drawTextBoxDecoration = (arg) => {
+	const { page, schema, colorType, x, y, width, height, rotate, pivotPoint } = arg;
+	const { borderWidth } = getBoxInsets(schema);
+	const opacity = schema.opacity ?? 1;
+	const drawRectangle = (rect) => {
+		if (rect.width <= 0 || rect.height <= 0) return;
+		const point = rotate.angle === 0 ? {
+			x: rect.x,
+			y: rect.y
+		} : rotatePoint({
+			x: rect.x,
+			y: rect.y
+		}, pivotPoint, rotate.angle);
+		page.drawRectangle({
+			x: point.x,
+			y: point.y,
+			width: rect.width,
+			height: rect.height,
+			rotate,
+			color: rect.color,
+			opacity
+		});
+	};
+	if (schema.backgroundColor) {
+		const color = hex2PrintingColor(schema.backgroundColor, colorType);
+		if (color) drawRectangle({
+			x,
+			y,
+			width,
+			height,
+			color
+		});
+	}
+	if (!schema.borderColor || !hasBoxDimension(schema.borderWidth)) return;
+	const color = hex2PrintingColor(schema.borderColor, colorType);
+	if (!color) return;
+	const top = mm2pt(borderWidth.top);
+	const right = mm2pt(borderWidth.right);
+	const bottom = mm2pt(borderWidth.bottom);
+	const left = mm2pt(borderWidth.left);
+	drawRectangle({
+		x,
+		y: y + height - top,
+		width,
+		height: top,
+		color
+	});
+	drawRectangle({
+		x: x + width - right,
+		y,
+		width: right,
+		height,
+		color
+	});
+	drawRectangle({
+		x,
+		y,
+		width,
+		height: bottom,
+		color
+	});
+	drawRectangle({
+		x,
+		y,
+		width: left,
+		height,
+		color
+	});
+};
 var TextStrikethroughIcon = createSvgStr(Strikethrough);
 var TextUnderlineIcon = createSvgStr(Underline);
 var TextAlignLeftIcon = createSvgStr(TextAlignStart);
@@ -101242,6 +101411,30 @@ var propPanel = {
 					message: i18n("validation.hexColor")
 				}]
 			},
+			borderColor: {
+				title: i18n("schemas.borderColor"),
+				type: "string",
+				widget: "color",
+				props: { disabledAlpha: true },
+				rules: [{
+					pattern: HEX_COLOR_PATTERN,
+					message: i18n("validation.hexColor")
+				}]
+			},
+			borderWidth: {
+				title: i18n("schemas.borderWidth"),
+				type: "object",
+				widget: "lineTitle",
+				span: 24,
+				properties: getBoxDimensionPropPanelSchema(.1)
+			},
+			padding: {
+				title: i18n("schemas.padding"),
+				type: "object",
+				widget: "lineTitle",
+				span: 24,
+				properties: getBoxDimensionPropPanelSchema()
+			},
 			useInlineMarkdown: {
 				type: "boolean",
 				widget: "UseInlineMarkdown",
@@ -101333,6 +101526,9 @@ var propPanel = {
 		fontColor: DEFAULT_FONT_COLOR,
 		fontName: void 0,
 		backgroundColor: "",
+		borderColor: "#000000",
+		borderWidth: createBoxDimension(0),
+		padding: createBoxDimension(0),
 		opacity: 1,
 		strikethrough: false,
 		underline: false
@@ -101469,7 +101665,7 @@ var renderInlineMarkdownReadOnly = async (arg) => {
 			runs,
 			fontSize: schema.fontSize ?? 13,
 			characterSpacing: schema.characterSpacing ?? 0,
-			boxWidthInPt: mm2pt(schema.width)
+			boxWidthInPt: mm2pt(getBoxContentArea(schema).width)
 		}), lineRange);
 		textBlock.innerHTML = "";
 		lines.forEach((line, lineIndex) => {
@@ -101536,7 +101732,7 @@ var getRangedPlainTextValue = (arg) => {
 		characterSpacing: schema.characterSpacing ?? 0,
 		fontSize,
 		fontKitFont,
-		boxWidthInPt: mm2pt(schema.width)
+		boxWidthInPt: mm2pt(getBoxContentArea(schema).width)
 	}), lineRange));
 };
 var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize) => {
@@ -101551,15 +101747,29 @@ var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize
 	const { topAdj, bottomAdj } = getBrowserVerticalFontAdjustments(fontKitFont, dynamicFontSize ?? schema.fontSize ?? 13, schema.lineHeight ?? 1, schema.verticalAlignment ?? "top");
 	const topAdjustment = topAdj.toString();
 	const bottomAdjustment = bottomAdj.toString();
+	const verticalAlignment = schema.verticalAlignment ?? "top";
+	const isTopAligned = verticalAlignment === "top";
 	const container = document.createElement("div");
+	const { borderWidth, padding } = getBoxInsets(schema);
+	const hasPadding = hasBoxDimension(schema.padding);
+	const hasBorder = Boolean(schema.borderColor && hasBoxDimension(schema.borderWidth));
 	const containerStyle = {
-		padding: 0,
+		padding: hasPadding ? `${padding.top}mm ${padding.right}mm ${padding.bottom}mm ${padding.left}mm` : 0,
 		resize: "none",
-		backgroundColor: getBackgroundColor(value, schema),
-		border: "none",
+		backgroundColor: getBackgroundColor(schema),
+		border: hasBorder ? void 0 : "none",
+		...hasBorder ? {
+			borderTopWidth: `${borderWidth.top}mm`,
+			borderRightWidth: `${borderWidth.right}mm`,
+			borderBottomWidth: `${borderWidth.bottom}mm`,
+			borderLeftWidth: `${borderWidth.left}mm`,
+			borderStyle: "solid",
+			borderColor: schema.borderColor
+		} : {},
+		...hasPadding || hasBorder ? { boxSizing: "border-box" } : {},
 		display: "flex",
 		flexDirection: "column",
-		justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
+		justifyContent: mapVerticalAlignToFlex(verticalAlignment),
 		width: "100%",
 		height: "100%",
 		cursor: isEditable(mode, schema) ? "text" : "default"
@@ -101586,7 +101796,7 @@ var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize
 		paddingTop: `${topAdjustment}px`,
 		backgroundColor: "transparent",
 		textDecoration: textDecorations.join(" "),
-		height: "100%"
+		...isTopAligned ? { height: "100%" } : {}
 	};
 	const textBlock = document.createElement("div");
 	textBlock.id = "text-" + String(schema.id);
@@ -101628,8 +101838,8 @@ var mapVerticalAlignToFlex = (verticalAlignmentValue) => {
 	}
 	return "flex-start";
 };
-var getBackgroundColor = (value, schema) => {
-	if (!value || !schema.backgroundColor) return "transparent";
+var getBackgroundColor = (schema) => {
+	if (!schema.backgroundColor) return "transparent";
 	return schema.backgroundColor;
 };
 var builtInPlugins = { Text: {
@@ -213697,7 +213907,7 @@ withProvider(FormCore, { Html: html });
 //#region ../../node_modules/form-render/es/index.js
 var es_default = withProvider(FormCore, widgets_exports);
 //#endregion
-//#region ../schemas/dist/helper-BFz9EwDz.js
+//#region ../schemas/dist/helper-CEme39Uo.js
 var substituteVariables = (text, variablesIn, valueMapper = (value) => value) => {
 	if (!text) return "";
 	let substitutedText = text;
@@ -213733,7 +213943,7 @@ var validateVariables = (value, schema) => {
 	return true;
 };
 //#endregion
-//#region ../schemas/dist/dynamicTemplate-CBvwRBx9.js
+//#region ../schemas/dist/dynamicTemplate-C7MdZxPm.js
 var getDynamicLayoutForMultiVariableText = async (value, args) => {
 	if (args.schema.type !== "multiVariableText") return { heights: [args.schema.height] };
 	const schema = args.schema;
@@ -213750,17 +213960,22 @@ var getDynamicLayoutForMultiVariableText = async (value, args) => {
 		_cache: args._cache,
 		ignoreDynamicFontSize: true
 	});
-	const measuredHeight = sumLineHeights(lineHeights);
+	const heights = getTextLineHeightsWithBox(lineHeights, schema);
+	const measuredHeight = sumLineHeights(heights);
 	if (measuredHeight <= schema.height || lineHeights.length === 0) return {
 		heights: [schema.height],
 		patchSplitSchema: () => ({ dynamicFontSize: void 0 })
 	};
 	return {
-		heights: lineHeights.length === 1 ? [Math.max(schema.height, measuredHeight)] : lineHeights,
+		heights: lineHeights.length === 1 ? [Math.max(schema.height, measuredHeight)] : heights,
 		patchSplitSchema: ({ start, end, isSplit }) => ({
 			dynamicFontSize: void 0,
 			__splitRange: lineHeights.length === 1 ? void 0 : createTextLineSplitRange(start, end),
-			__isSplit: isSplit
+			__isSplit: isSplit,
+			...getTextSplitBoxStyle(schema, {
+				start,
+				end
+			}, lineHeights.length)
 		})
 	};
 };
@@ -213775,17 +213990,22 @@ var getDynamicLayoutForText = async (value, args) => {
 		_cache: args._cache,
 		ignoreDynamicFontSize: true
 	});
-	const measuredHeight = sumLineHeights(lineHeights);
+	const heights = getTextLineHeightsWithBox(lineHeights, schema);
+	const measuredHeight = sumLineHeights(heights);
 	if (measuredHeight <= schema.height || lineHeights.length === 0) return {
 		heights: [schema.height],
 		patchSplitSchema: () => ({ dynamicFontSize: void 0 })
 	};
 	return {
-		heights: lineHeights.length === 1 ? [Math.max(schema.height, measuredHeight)] : lineHeights,
+		heights: lineHeights.length === 1 ? [Math.max(schema.height, measuredHeight)] : heights,
 		patchSplitSchema: ({ start, end, isSplit }) => ({
 			dynamicFontSize: void 0,
 			__splitRange: lineHeights.length === 1 ? void 0 : createTextLineSplitRange(start, end),
-			__isSplit: isSplit
+			__isSplit: isSplit,
+			...getTextSplitBoxStyle(schema, {
+				start,
+				end
+			}, lineHeights.length)
 		})
 	};
 };
@@ -235755,7 +235975,7 @@ var Designer = class extends BaseUIClass {
 	}
 };
 //#endregion
-//#region ../schemas/dist/dynamicTemplate-BpD4RNw8.js
+//#region ../schemas/dist/dynamicTemplate-BwzF9C1L.js
 var normalizeListItems = (value) => {
 	if (Array.isArray(value)) return value.map((item) => String(item));
 	if (typeof value !== "string") return value == null ? [] : [String(value)];