@pdfme/schemas 6.2.3-dev.6 → 6.2.3-dev.8

package/dist/index.js

@@ -1,18 +1,16 @@
 import { D as getBoxContentArea, E as createBoxDimension, L as CODE_BACKGROUND_COLOR, V as DEFAULT_FONT_COLOR, X as PLACEHOLDER_FONT_COLOR, Z as SYNTHETIC_BOLD_CSS_TEXT_SHADOW, a as createListItemSplitRange, c as getListItemRange, g as getFontKitFont, i as TEXT_LINE_SPLIT_UNIT, it as VERTICAL_ALIGN_MIDDLE, l as getTableBodyRange, n as LIST_ITEM_SPLIT_UNIT, o as createTableBodySplitRange, r as TABLE_BODY_SPLIT_UNIT, s as createTextLineSplitRange, t as BUILT_IN_DYNAMIC_LAYOUT_SPLIT_UNITS, u as getTextLineRange, z as DEFAULT_ALIGNMENT } from "./splitRange-B6311Noc.js";
 import { a as measureTextLines, f as resolveFontVariant, h as parseInlineMarkdown, u as isInlineMarkdownTextSchema } from "./measure-BarlRI1L.js";
-import { a as mapVerticalAlignToFlex, c as Formatter, d as embedAndGetFont, i as makeElementPlainTextContentEditable, l as getExtraFormatterSchema, n as textSchema, o as uiRender$4, r as buildStyledTextContainer, s as propPanel$3, t as builtInPlugins, u as pdfRender$4 } from "./builtins-Dtp1IM7M.js";
-import { a as getCellPropPanelSchema, c as remapColumnStylesOnRemove, d as createSingleTable, i as getBodyWithSchemaRange, l as HEX_COLOR_PATTERN, n as getDynamicLayoutForTable, o as getColumnStylesPropPanelSchema, r as getBody, s as getDefaultCellStyles, t as getDynamicHeightsForTable, u as OPAQUE_HEX_COLOR_PATTERN } from "./dynamicTemplate-Zqt6kNsE.js";
-import { a as createSvgStr, d as rgbColorToCmykColor, f as rotatePoint, g as visitVariables, h as getVariableNames, i as createErrorElm, l as isEditable, m as countUniqueVariableNames, n as applyAlphaToOpacity, p as splitHexAlpha, r as convertForPdfLayoutProps, s as hex2PrintingColor, t as addAlphaToHex, u as readFile } from "./utils-DvBaBoME.js";
+import { _ as embedAndGetFont, a as mapVerticalAlignToFlex, c as Formatter, d as TextAlignLeftIcon, f as TextAlignRightIcon, g as pdfRender$4, h as TextVerticalAlignTopIcon, i as makeElementPlainTextContentEditable, l as getExtraFormatterSchema, m as TextVerticalAlignMiddleIcon, n as textSchema, o as uiRender$4, p as TextVerticalAlignBottomIcon, r as buildStyledTextContainer, s as propPanel$3, t as builtInPlugins, u as TextAlignCenterIcon } from "./builtins-Ch7UBNGU.js";
+import { C as hashImageDataUrl, S as normalizeImageOrientation, _ as TABLE_CELL_TYPES, a as getCellPropPanelSchema, b as TABLE_IMAGE_DATA_URL_PATTERN, c as HEX_COLOR_PATTERN, d as getTableImageObjectPosition, f as normalizeTableCellType, g as warnInvalidTableImageOnce, h as resolveImageDimension, i as getBodyWithSchemaRange, l as OPAQUE_HEX_COLOR_PATTERN, m as resolveFixedTableImageHeight, n as getDynamicLayoutForTable, o as getDefaultCellStyles, p as normalizeTableImageHeightMode, r as getBody, s as remapColumnStylesOnRemove, t as getDynamicHeightsForTable, u as createSingleTable, v as TABLE_IMAGE_HEIGHT_MODES, x as detectImageFormat, y as DEFAULT_TABLE_IMAGE_HEIGHT_MODE } from "./dynamicTemplate-Bnu4jVaz.js";
+import { a as createSvgStr, d as rgbColorToCmykColor, f as rotatePoint, g as visitVariables, h as getVariableNames, i as createErrorElm, l as isEditable, m as countUniqueVariableNames, n as applyAlphaToOpacity, p as splitHexAlpha, r as convertForPdfLayoutProps, s as hex2PrintingColor, t as addAlphaToHex, u as readFile } from "./utils-BfzehhiZ.js";
 import { a as normalizeListItems, c as LIST_STYLE_BULLET, i as normalizeListItemEntries, l as LIST_STYLE_ORDERED, n as calculateListLayout, o as serializeListItems, s as DEFAULT_LIST_STYLE, t as getDynamicLayoutForList } from "./dynamicTemplate-CcnCXHfM.js";
 import { i as validateVariables, n as substituteVariables, r as substituteVariablesAsInlineMarkdownLiterals, t as resolveReadOnlyMultiVariableText } from "./helper-BR4_UZA5.js";
 import "./tables.js";
 import "./lists.js";
-import { DEFAULT_FONT_NAME, ZOOM, b64toUint8Array, getDefaultFont, getFallbackFontName, getInternalLinkTarget, isHexValid, mm2pt, normalizeLinkHref, px2mm } from "@pdfme/common";
+import { DEFAULT_FONT_NAME, ZOOM, b64toUint8Array, cloneDeep, getDefaultFont, getFallbackFontName, getInternalLinkTarget, isHexValid, mm2pt, normalizeLinkHref, px2mm } from "@pdfme/common";
 import { Buffer as Buffer$1 } from "buffer";
 import { popGraphicsState, pushGraphicsState, rotateDegrees, translate } from "@pdfme/pdf-lib";
 import { Barcode, Calendar, CalendarClock, ChevronDown, Circle, CircleDot, Clock, Image, List, Minus, QrCode, Route, Square, SquareCheck, Table, Type } from "lucide";
-import jpegJsModule from "jpeg-js";
-import UPNGModule from "@pdf-lib/upng";
 import DOMPurify from "dompurify";
 import bwipjs from "bwip-js";
 import AirDatepicker from "air-datepicker";
@@ -1412,210 +1410,6 @@ var listSchema = {
 	icon: createSvgStr(List)
 };
 //#endregion
-//#region src/graphics/orientation.ts
-var isJpegJsApi = (value) => !!value && typeof value === "object" && typeof value.decode === "function" && typeof value.encode === "function";
-var isUPNGApi = (value) => !!value && typeof value === "object" && typeof value.decode === "function" && typeof value.toRGBA8 === "function" && typeof value.encode === "function";
-var resolveExport = (value, guard, label) => {
-	let current = value;
-	while (current && typeof current === "object") {
-		if (guard(current)) return current;
-		current = current.default;
-	}
-	throw new TypeError(`Failed to resolve ${label} exports`);
-};
-var jpegJs = resolveExport(jpegJsModule, isJpegJsApi, "jpeg-js");
-var UPNG = resolveExport(UPNGModule, isUPNGApi, "@pdf-lib/upng");
-var JPEG_ENCODE_QUALITY = 90;
-var JPEG_MAX_MEMORY_MB = 512;
-var JPEG_SOI_0 = 255;
-var JPEG_SOI_1 = 216;
-var PNG_SIGNATURE = new Uint8Array([
-	137,
-	80,
-	78,
-	71,
-	13,
-	10,
-	26,
-	10
-]);
-var toArrayBuffer = (bytes) => {
-	const copy = new Uint8Array(bytes.byteLength);
-	copy.set(bytes);
-	return copy.buffer;
-};
-var isPngSignature = (bytes) => {
-	if (bytes.length < PNG_SIGNATURE.length) return false;
-	for (let i = 0; i < PNG_SIGNATURE.length; i++) if (bytes[i] !== PNG_SIGNATURE[i]) return false;
-	return true;
-};
-var detectImageFormat = (bytes) => {
-	if (bytes.length >= 2 && bytes[0] === JPEG_SOI_0 && bytes[1] === JPEG_SOI_1) return "jpeg";
-	if (isPngSignature(bytes)) return "png";
-	return "other";
-};
-/** TIFF/IFD0: returns 1..8 or undefined. Never throws. */
-var parseTiffOrientation = (tiff) => {
-	try {
-		if (tiff.length < 8) return void 0;
-		const le = tiff[0] === 73 && tiff[1] === 73;
-		if (!le && !(tiff[0] === 77 && tiff[1] === 77)) return void 0;
-		const view = new DataView(tiff.buffer, tiff.byteOffset, tiff.byteLength);
-		if (view.getUint16(2, le) !== 42) return void 0;
-		const ifd = view.getUint32(4, le);
-		if (ifd + 2 > tiff.length) return void 0;
-		const n = view.getUint16(ifd, le);
-		for (let i = 0; i < n; i++) {
-			const entry = ifd + 2 + i * 12;
-			if (entry + 12 > tiff.length) return void 0;
-			if (view.getUint16(entry, le) !== 274) continue;
-			if (view.getUint16(entry + 2, le) !== 3) return void 0;
-			if (view.getUint32(entry + 4, le) !== 1) return void 0;
-			const val = view.getUint16(entry + 8, le);
-			return val >= 1 && val <= 8 ? val : void 0;
-		}
-		return;
-	} catch {
-		return;
-	}
-};
-var isExifApp1Payload = (segment) => segment.length >= 6 && segment[0] === 69 && segment[1] === 120 && segment[2] === 105 && segment[3] === 102 && segment[4] === 0 && segment[5] === 0;
-/** Standalone JPEG markers have no length field (TEM, RST0–7, SOI). */
-var isStandaloneJpegMarker = (marker) => marker === 1 || marker >= 208 && marker <= 216;
-/**
-* JPEG: scan APP1 'Exif\0\0' segments; stop at SOS/EOI.
-* Skips 0xFF fill/padding and standalone markers. If an Exif APP1 has no
-* valid Orientation, keep scanning for a later one.
-*/
-var getJpegOrientation = (bytes) => {
-	if (bytes.length < 2 || bytes[0] !== JPEG_SOI_0 || bytes[1] !== JPEG_SOI_1) return void 0;
-	let pos = 2;
-	while (pos < bytes.length) {
-		if (bytes[pos] !== 255) return void 0;
-		while (pos < bytes.length && bytes[pos] === 255) pos++;
-		if (pos >= bytes.length) return void 0;
-		const marker = bytes[pos++];
-		if (isStandaloneJpegMarker(marker)) continue;
-		if (marker === 218 || marker === 217) return void 0;
-		if (pos + 2 > bytes.length) return void 0;
-		const size = bytes[pos] << 8 | bytes[pos + 1];
-		if (size < 2 || pos + size > bytes.length) return void 0;
-		if (marker === 225 && size >= 8) {
-			const segment = bytes.subarray(pos + 2, pos + size);
-			if (isExifApp1Payload(segment)) {
-				const orientation = parseTiffOrientation(segment.subarray(6));
-				if (orientation !== void 0) return orientation;
-			}
-		}
-		pos += size;
-	}
-};
-/**
-* PNG: scan chunks for eXIf (raw TIFF payload). Skip IDAT and other
-* ancillary chunks; eXIf may appear after image data. Stop at IEND.
-*/
-var getPngOrientation = (bytes) => {
-	if (!isPngSignature(bytes)) return void 0;
-	const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
-	let pos = 8;
-	while (pos + 12 <= bytes.length) {
-		const length = view.getUint32(pos);
-		if (pos + 12 + length > bytes.length) return void 0;
-		const type = String.fromCharCode(bytes[pos + 4], bytes[pos + 5], bytes[pos + 6], bytes[pos + 7]);
-		if (type === "eXIf") return parseTiffOrientation(bytes.subarray(pos + 8, pos + 8 + length));
-		if (type === "IEND") return void 0;
-		pos += 12 + length;
-	}
-};
-var orientationSwapsDimensions = (orientation) => orientation >= 5;
-/**
-* Map source (x, y) into destination (dx, dy) for EXIF orientations 2–8.
-* Orientations 5–8 swap width and height.
-*/
-var transformRgba = (src, width, height, orientation) => {
-	const swap = orientationSwapsDimensions(orientation);
-	const destWidth = swap ? height : width;
-	const destHeight = swap ? width : height;
-	const dest = new Uint8Array(destWidth * destHeight * 4);
-	for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
-		let dx = x;
-		let dy = y;
-		switch (orientation) {
-			case 2:
-				dx = width - 1 - x;
-				dy = y;
-				break;
-			case 3:
-				dx = width - 1 - x;
-				dy = height - 1 - y;
-				break;
-			case 4:
-				dx = x;
-				dy = height - 1 - y;
-				break;
-			case 5:
-				dx = y;
-				dy = x;
-				break;
-			case 6:
-				dx = height - 1 - y;
-				dy = x;
-				break;
-			case 7:
-				dx = height - 1 - y;
-				dy = width - 1 - x;
-				break;
-			case 8:
-				dx = y;
-				dy = width - 1 - x;
-		}
-		const srcIndex = (y * width + x) * 4;
-		const destIndex = (dy * destWidth + dx) * 4;
-		dest[destIndex] = src[srcIndex];
-		dest[destIndex + 1] = src[srcIndex + 1];
-		dest[destIndex + 2] = src[srcIndex + 2];
-		dest[destIndex + 3] = src[srcIndex + 3];
-	}
-	return {
-		data: dest,
-		width: destWidth,
-		height: destHeight
-	};
-};
-var bakeJpegOrientation = (bytes) => {
-	const orientation = getJpegOrientation(bytes);
-	if (!orientation || orientation === 1) return bytes;
-	const raw = jpegJs.decode(bytes, {
-		useTArray: true,
-		formatAsRGBA: true,
-		maxMemoryUsageInMB: JPEG_MAX_MEMORY_MB
-	});
-	const transformed = transformRgba(raw.data, raw.width, raw.height, orientation);
-	return new Uint8Array(jpegJs.encode({
-		data: transformed.data,
-		width: transformed.width,
-		height: transformed.height
-	}, JPEG_ENCODE_QUALITY).data);
-};
-var bakePngOrientation = (bytes) => {
-	const orientation = getPngOrientation(bytes);
-	if (!orientation || orientation === 1) return bytes;
-	const img = UPNG.decode(toArrayBuffer(bytes));
-	const transformed = transformRgba(new Uint8Array(UPNG.toRGBA8(img)[0]), img.width, img.height, orientation);
-	return new Uint8Array(UPNG.encode([toArrayBuffer(transformed.data)], transformed.width, transformed.height, 0));
-};
-/**
-* One normalize path for JPEG and PNG. Tag absent/1 is a byte-identical
-* passthrough. Tag 2–8 decodes, transforms pixels, and re-encodes without
-* an orientation tag. May throw on decode/encode failure — callers fall back.
-*/
-var normalizeImageOrientation = (bytes) => {
-	const kind = detectImageFormat(bytes);
-	if (kind === "jpeg") return bakeJpegOrientation(bytes);
-	if (kind === "png") return bakePngOrientation(bytes);
-	return bytes;
-};
-//#endregion
 //#region src/graphics/image.ts
 /**
 * Build a short fingerprint for a potentially-large base64 image string.
@@ -1632,15 +1426,7 @@ var normalizeImageOrientation = (bytes) => {
 * cost, without retaining any slice of the input as a Map key. Keys stay
 * well under ~40 chars regardless of input size.
 */
-var getCacheKey = (schema, input) => {
-	let hash = 2166136261;
-	for (let i = 0; i < input.length; i++) {
-		hash ^= input.charCodeAt(i);
-		hash = Math.imul(hash, 16777619);
-	}
-	const hex = (hash >>> 0).toString(16).padStart(8, "0");
-	return `${schema.type}:${input.length}:${hex}`;
-};
+var getCacheKey = (schema, input) => `${schema.type}:${input.length}:${hashImageDataUrl(input)}`;
 var dataUrlToBytes = (value) => {
 	const idx = value.indexOf(";base64,");
 	const base64 = idx >= 0 ? value.slice(idx + 8) : value;
@@ -3000,7 +2786,154 @@ var lineSchema = {
 	icon: createSvgStr(Minus)
 };
 //#endregion
+//#region src/tables/imageCellUi.ts
+var buttonSize$1 = 18;
+var pendingImagePicker = null;
+var tableSchemaKey = (schema) => typeof schema.id === "string" && schema.id !== "" ? schema.id : schema.name;
+var noteRenderingTable = (schema) => {
+	const schemaKey = tableSchemaKey(schema);
+	if (pendingImagePicker && pendingImagePicker.schemaKey !== schemaKey) pendingImagePicker = null;
+};
+var clearImagePickerRequest = () => {
+	pendingImagePicker = null;
+};
+var requestImagePicker = (request) => {
+	pendingImagePicker = request;
+};
+var consumePendingImagePicker = (request) => {
+	const pending = pendingImagePicker;
+	if (!pending || pending.rowIndex !== request.rowIndex || pending.colIndex !== request.colIndex || pending.schemaKey !== request.schemaKey) return false;
+	pendingImagePicker = null;
+	return true;
+};
+var createImageButton = (options) => {
+	const button = document.createElement("button");
+	button.type = "button";
+	button.innerText = options.text;
+	button.setAttribute("aria-label", options.ariaLabel);
+	button.title = options.ariaLabel;
+	button.style.width = `${buttonSize$1}px`;
+	button.style.height = `${buttonSize$1}px`;
+	button.style.position = "absolute";
+	button.style.top = "0px";
+	button.style.right = options.right;
+	button.style.display = "inline-flex";
+	button.style.alignItems = "center";
+	button.style.justifyContent = "center";
+	button.style.padding = "0";
+	button.style.border = "1px solid #d9d9d9";
+	button.style.borderRadius = "3px";
+	button.style.background = "#ffffff";
+	button.style.color = "#333333";
+	button.style.fontSize = "11px";
+	button.style.lineHeight = "1";
+	button.style.cursor = "pointer";
+	button.style.zIndex = "20";
+	button.addEventListener("mousedown", (event) => {
+		event.preventDefault();
+	});
+	button.addEventListener("click", (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		options.onClick();
+	});
+	return button;
+};
+var appendFrame = (schema) => {
+	const contentArea = getBoxContentArea(schema);
+	const frame = document.createElement("div");
+	frame.style.position = "absolute";
+	frame.style.zIndex = "1";
+	frame.style.width = `${contentArea.width}mm`;
+	frame.style.height = `${contentArea.height}mm`;
+	frame.style.top = `${contentArea.topInset}mm`;
+	frame.style.left = `${contentArea.leftInset}mm`;
+	frame.style.boxSizing = "border-box";
+	return frame;
+};
+var warnUnsupportedImage = (columnIndex) => {
+	console.warn(`[@pdfme/schemas/table] unsupported image in column ${columnIndex ?? 0}; only PNG/JPEG data URL is supported`);
+};
+var renderTableImageCellUi = (arg) => {
+	const { schema, rootElement, value, onChange, i18n, _cache } = arg;
+	const dimension = value ? resolveImageDimension(value, _cache) : void 0;
+	const frame = appendFrame(schema);
+	if (dimension && value) {
+		const img = document.createElement("img");
+		img.alt = "";
+		img.src = value;
+		img.style.width = "100%";
+		img.style.height = "100%";
+		img.style.objectFit = "contain";
+		img.style.objectPosition = getTableImageObjectPosition(schema.alignment, schema.verticalAlignment);
+		frame.appendChild(img);
+	} else {
+		frame.textContent = i18n("schemas.table.imageCell.placeholder");
+		frame.style.border = "1px dotted #999";
+		frame.style.color = "#999";
+		frame.style.fontSize = "10px";
+		frame.style.display = "flex";
+		frame.style.alignItems = "center";
+		frame.style.justifyContent = "center";
+		frame.style.textAlign = "center";
+		frame.style.overflow = "hidden";
+		frame.style.padding = "1mm";
+	}
+	rootElement.appendChild(frame);
+	const input = document.createElement("input");
+	input.type = "file";
+	input.accept = "image/png, image/jpeg";
+	input.tabIndex = -1;
+	input.style.display = "none";
+	input.addEventListener("click", (event) => {
+		event.stopPropagation();
+	});
+	input.addEventListener("change", () => {
+		if (!input.files || input.files.length === 0) return;
+		readFile(input.files).then((result) => {
+			if (typeof result === "string" && TABLE_IMAGE_DATA_URL_PATTERN.test(result) && resolveImageDimension(result, _cache)) {
+				onChange?.({
+					key: "content",
+					value: result
+				});
+				return;
+			}
+			warnUnsupportedImage(schema.columnIndex);
+		}).catch(() => {
+			warnUnsupportedImage(schema.columnIndex);
+		});
+	});
+	rootElement.appendChild(input);
+	const hasValue = typeof value === "string" && value !== "";
+	rootElement.appendChild(createImageButton({
+		text: "▣",
+		ariaLabel: i18n("schemas.table.imageCell.select"),
+		right: hasValue ? `20px` : "0px",
+		onClick: () => {
+			input.click();
+		}
+	}));
+	if (hasValue) rootElement.appendChild(createImageButton({
+		text: "×",
+		ariaLabel: i18n("schemas.table.imageCell.remove"),
+		right: "0px",
+		onClick: () => {
+			onChange?.({
+				key: "content",
+				value: ""
+			});
+		}
+	}));
+	const { rowIndex, columnIndex, pickerSchemaKey } = schema;
+	if (typeof rowIndex === "number" && typeof columnIndex === "number" && typeof pickerSchemaKey === "string" && consumePendingImagePicker({
+		rowIndex,
+		colIndex: columnIndex,
+		schemaKey: pickerSchemaKey
+	}) && !hasValue) input.click();
+};
+//#endregion
 //#region src/tables/cell.ts
+var imagePdfRender = imageSchema.pdf;
 var linePdfRender = lineSchema.pdf;
 var rectanglePdfRender$1 = rectangle.pdf;
 var renderLine = async (arg, schema, position, width, height) => linePdfRender({
@@ -3072,6 +3005,32 @@ var cellSchema = {
 				y: position.y
 			}, borderWidth.left, height)
 		]);
+		if (schema.cellType === "image") {
+			if (arg.value && resolveImageDimension(arg.value, arg._cache)) {
+				const imageSchema = {
+					name: schema.name,
+					type: "image",
+					content: arg.value,
+					position: contentArea.position,
+					width: contentArea.width,
+					height: contentArea.height,
+					rotate: 0,
+					opacity: 1,
+					objectFit: "contain",
+					objectPosition: getTableImageObjectPosition(schema.alignment, schema.verticalAlignment)
+				};
+				try {
+					await imagePdfRender({
+						...arg,
+						value: arg.value,
+						schema: imageSchema
+					});
+				} catch {
+					warnInvalidTableImageOnce(arg.value, schema.columnIndex ?? 0, arg._cache);
+				}
+			}
+			return;
+		}
 		await pdfRender$4({
 			...arg,
 			schema: {
@@ -3091,19 +3050,35 @@ var cellSchema = {
 		const { schema, rootElement } = arg;
 		const { borderWidth, width, height, borderColor, backgroundColor } = schema;
 		rootElement.style.backgroundColor = backgroundColor;
-		const textDiv = createTextDiv(schema);
-		await uiRender$4({
-			...arg,
-			schema: {
-				...schema,
-				backgroundColor: "",
-				borderColor: "",
-				borderWidth: createBoxDimension(0),
-				padding: createBoxDimension(0)
-			},
-			rootElement: textDiv
-		});
-		rootElement.appendChild(textDiv);
+		if (schema.cellType === "image") {
+			if (arg.mode === "designer") renderTableImageCellUi(arg);
+			else if (arg.value ? resolveImageDimension(arg.value, arg._cache) : void 0) {
+				const imageFrame = createTextDiv(schema);
+				const img = document.createElement("img");
+				img.alt = "";
+				img.src = arg.value;
+				img.style.width = "100%";
+				img.style.height = "100%";
+				img.style.objectFit = "contain";
+				img.style.objectPosition = getTableImageObjectPosition(schema.alignment, schema.verticalAlignment);
+				imageFrame.appendChild(img);
+				rootElement.appendChild(imageFrame);
+			}
+		} else {
+			const textDiv = createTextDiv(schema);
+			await uiRender$4({
+				...arg,
+				schema: {
+					...schema,
+					backgroundColor: "",
+					borderColor: "",
+					borderWidth: createBoxDimension(0),
+					padding: createBoxDimension(0)
+				},
+				rootElement: textDiv
+			});
+			rootElement.appendChild(textDiv);
+		}
 		[
 			createLineDiv(`${width}mm`, `${borderWidth.top}mm`, "0mm", null, null, "0mm", borderColor),
 			createLineDiv(`${width}mm`, `${borderWidth.bottom}mm`, null, null, "0mm", "0mm", borderColor),
@@ -3143,7 +3118,7 @@ var cellSchema = {
 //#region src/tables/pdfRender.ts
 var rectanglePdfRender = rectangle.pdf;
 var cellPdfRender = cellSchema.pdf;
-async function drawCell(arg, cell) {
+async function drawCell(arg, cell, columnIndex) {
 	await cellPdfRender({
 		...arg,
 		value: cell.raw,
@@ -3166,7 +3141,9 @@ async function drawCell(arg, cell) {
 			fontColor: cell.styles.textColor,
 			borderColor: cell.styles.lineColor,
 			borderWidth: cell.styles.lineWidth,
-			padding: cell.styles.cellPadding
+			padding: cell.styles.cellPadding,
+			cellType: cell.isImage() ? "image" : "text",
+			columnIndex
 		}
 	});
 }
@@ -3180,7 +3157,7 @@ async function drawRow(arg, table, row, cursor, columns) {
 		}
 		cell.x = cursor.x;
 		cell.y = cursor.y;
-		await drawCell(arg, cell);
+		await drawCell(arg, cell, column.index);
 		cursor.x += column.width;
 	}
 	cursor.y += row.height;
@@ -3294,7 +3271,7 @@ var calcResizedHeadWidthPercentages = (arg) => {
 var setBorder = (div, borderPosition, arg) => {
 	div.style[`border${borderPosition}`] = `${String(arg.schema.tableStyles.borderWidth)}mm solid ${arg.schema.tableStyles.borderColor}`;
 };
-var drawBorder = (div, row, colIndex, rowIndex, rowsLength, arg) => {
+var drawBorder = (div, row, colIndex, rowIndex, rowsLength, arg, bodyLength) => {
 	const isFirstColumn = colIndex === 0;
 	const isLastColumn = colIndex === Object.values(row.cells).length - 1;
 	const isLastRow = rowIndex === rowsLength - 1;
@@ -3302,7 +3279,7 @@ var drawBorder = (div, row, colIndex, rowIndex, rowsLength, arg) => {
 		setBorder(div, "Top", arg);
 		if (isFirstColumn) setBorder(div, "Left", arg);
 		if (isLastColumn) setBorder(div, "Right", arg);
-		if (JSON.parse(arg.value || "[]").length === 0) setBorder(div, "Bottom", arg);
+		if (bodyLength === 0) setBorder(div, "Bottom", arg);
 	} else if (row.section === "body") {
 		if (!arg.schema.showHead && rowIndex === 0) setBorder(div, "Top", arg);
 		if (isFirstColumn) setBorder(div, "Left", arg);
@@ -3325,20 +3302,28 @@ var renderRowUi = (args) => {
 			div.style.width = `${cell.width}mm`;
 			div.style.height = `${cell.height}mm`;
 			div.style.boxSizing = "border-box";
-			drawBorder(div, row, colIndex, rowIndex, rows.length, arg);
-			div.style.cursor = arg.mode === "designer" || arg.mode === "form" && section === "body" ? "text" : "default";
+			drawBorder(div, row, colIndex, rowIndex, rows.length, arg, value.length);
+			const imageCellEditable = arg.mode === "designer" || arg.mode === "form" && !arg.schema.readOnly;
+			div.style.cursor = cell.isImage() ? imageCellEditable && section === "body" ? "pointer" : "default" : arg.mode === "designer" || arg.mode === "form" && section === "body" ? "text" : "default";
 			div.addEventListener("click", () => {
 				if (arg.mode === "viewer") return;
+				const enteringEmptyImageCell = cell.isImage() && section === "body" && imageCellEditable && cell.raw === "" && (editingPosition.rowIndex !== rowIndex || editingPosition.colIndex !== colIndex);
 				onChangeEditingPosition({
 					rowIndex,
 					colIndex
 				});
+				if (enteringEmptyImageCell) requestImagePicker({
+					rowIndex,
+					colIndex,
+					schemaKey: tableSchemaKey(arg.schema)
+				});
 			});
 			arg.rootElement.appendChild(div);
 			const isEditing = editingPosition.rowIndex === rowIndex && editingPosition.colIndex === colIndex;
 			let mode = "viewer";
 			if (arg.mode === "form") mode = section === "body" && isEditing && !arg.schema.readOnly ? "designer" : "viewer";
 			else if (arg.mode === "designer") mode = isEditing ? "designer" : "form";
+			if (cell.isImage() && !isEditing) mode = "viewer";
 			cellUiRender({
 				...arg,
 				stopEditing: () => {
@@ -3377,7 +3362,11 @@ var renderRowUi = (args) => {
 					},
 					width: cell.width,
 					height: cell.height,
-					...convertToCellStyle(cell.styles)
+					...convertToCellStyle(cell.styles),
+					cellType: cell.isImage() ? "image" : "text",
+					columnIndex: colIndex,
+					rowIndex,
+					pickerSchemaKey: tableSchemaKey(arg.schema)
 				}
 			});
 			colOffsetX += cell.width;
@@ -3398,9 +3387,11 @@ var resetEditingPosition = () => {
 	headEditingPosition.colIndex = -1;
 	bodyEditingPosition.rowIndex = -1;
 	bodyEditingPosition.colIndex = -1;
+	clearImagePickerRequest();
 };
 var uiRender = async (arg) => {
 	const { rootElement, onChange, schema, value, mode, scale } = arg;
+	noteRenderingTable(schema);
 	const body = getBody(value);
 	const bodyRange = getTableBodyRange(schema);
 	const bodyWidthRange = getBodyWithSchemaRange(value, schema, bodyRange);
@@ -3608,15 +3599,678 @@ var uiRender = async (arg) => {
 	});
 };
 //#endregion
+//#region src/tables/columnsWidget.ts
+var cellTypeWarnCache = /* @__PURE__ */ new Map();
+/** More than this many columns, and each block can collapse. */
+var COLLAPSE_WHEN_MORE_THAN = 6;
+var expandedColumnBlocks = /* @__PURE__ */ new Set();
+var columnBlockKey = (schemaId, columnIndex) => `${schemaId}:${columnIndex}`;
+var themeRecord = (theme) => theme ?? void 0;
+var themeToken = (theme, key, fallback) => {
+	const value = themeRecord(theme)?.[key];
+	return typeof value === "string" && value.length > 0 ? value : fallback;
+};
+var themeNumber = (theme, key, fallback) => {
+	const value = themeRecord(theme)?.[key];
+	return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+};
+/** antd outlined Select / InputNumber metrics, read from the Designer token when present. */
+var panelControlMetrics = (theme) => {
+	const lineWidth = themeNumber(theme, "lineWidth", 1);
+	const controlHeight = themeNumber(theme, "controlHeight", 32);
+	const paddingSm = themeNumber(theme, "paddingSM", 12);
+	const controlHeightSm = themeNumber(theme, "controlHeightSM", 24);
+	const fontSize = themeNumber(theme, "fontSize", 14);
+	const outlineWidth = themeNumber(theme, "controlOutlineWidth", 2);
+	return {
+		lineWidth,
+		controlHeight,
+		borderRadius: themeNumber(theme, "borderRadius", 6),
+		fontSize,
+		paddingInline: Math.max(0, paddingSm - lineWidth),
+		handleWidth: Math.max(0, controlHeightSm - lineWidth * 2),
+		handleFontSize: fontSize / 2,
+		outlineWidth,
+		colorBorder: themeToken(theme, "colorBorder", "#d9d9d9"),
+		colorBg: themeToken(theme, "colorBgContainer", "#ffffff"),
+		colorText: themeToken(theme, "colorText", "rgba(0, 0, 0, 0.88)"),
+		colorArrow: themeToken(theme, "colorTextQuaternary", "rgba(0, 0, 0, 0.25)"),
+		colorIcon: themeToken(theme, "colorIcon", "rgba(0, 0, 0, 0.45)"),
+		colorPrimary: themeToken(theme, "colorPrimary", "#1677ff"),
+		colorPrimaryHover: themeToken(theme, "colorPrimaryHover", "#4096ff"),
+		controlOutline: themeToken(theme, "controlOutline", "rgba(5, 145, 255, 0.1)"),
+		motion: themeToken(theme, "motionDurationMid", "0.2s")
+	};
+};
+var ANT_DOWN_PATH = "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z";
+var ANT_UP_PATH = "M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z";
+var appendSvgIcon = (parent, path, size) => {
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("viewBox", "64 64 896 896");
+	svg.setAttribute("width", String(size));
+	svg.setAttribute("height", String(size));
+	svg.setAttribute("fill", "currentColor");
+	svg.setAttribute("aria-hidden", "true");
+	svg.setAttribute("focusable", "false");
+	const shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	shape.setAttribute("d", path);
+	svg.appendChild(shape);
+	parent.appendChild(svg);
+};
+var ensurePanelControlStyles = (rootElement, metrics) => {
+	rootElement.style.setProperty("--pdfme-border", metrics.colorBorder);
+	rootElement.style.setProperty("--pdfme-hover-border", metrics.colorPrimaryHover);
+	rootElement.style.setProperty("--pdfme-active-border", metrics.colorPrimary);
+	rootElement.style.setProperty("--pdfme-outline", metrics.controlOutline);
+	rootElement.style.setProperty("--pdfme-outline-width", `${metrics.outlineWidth}px`);
+	rootElement.style.setProperty("--pdfme-handle-width", `${metrics.handleWidth}px`);
+	rootElement.style.setProperty("--pdfme-handle-hover", metrics.colorPrimary);
+	rootElement.style.setProperty("--pdfme-padding-inline", `${metrics.paddingInline}px`);
+	if (rootElement.querySelector("style[data-pdfme-column-controls]")) return;
+	const style = document.createElement("style");
+	style.dataset.pdfmeColumnControls = "true";
+	style.textContent = `
+.pdfme-column-select,
+.pdfme-column-number {
+  border-color: var(--pdfme-border);
+}
+.pdfme-column-select:hover,
+.pdfme-column-number:hover {
+  border-color: var(--pdfme-hover-border);
+}
+.pdfme-column-select:focus-within,
+.pdfme-column-number:focus-within {
+  border-color: var(--pdfme-active-border);
+  box-shadow: 0 0 0 var(--pdfme-outline-width) var(--pdfme-outline);
+  outline: 0;
+}
+.pdfme-column-select-input,
+.pdfme-column-number-input {
+  outline: none;
+}
+.pdfme-column-select-input {
+  appearance: none;
+  -webkit-appearance: none;
+}
+.pdfme-column-number-input {
+  appearance: textfield;
+  -moz-appearance: textfield;
+  padding-left: var(--pdfme-padding-inline);
+  padding-right: var(--pdfme-padding-inline);
+}
+.pdfme-column-number:hover .pdfme-column-number-input,
+.pdfme-column-number:focus-within .pdfme-column-number-input {
+  padding-right: calc(var(--pdfme-handle-width) + var(--pdfme-padding-inline));
+}
+.pdfme-column-number-input::-webkit-outer-spin-button,
+.pdfme-column-number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.pdfme-column-number-handlers {
+  opacity: 0;
+  width: 0;
+}
+.pdfme-column-number:hover .pdfme-column-number-handlers,
+.pdfme-column-number:focus-within .pdfme-column-number-handlers {
+  opacity: 1;
+  width: var(--pdfme-handle-width);
+}
+.pdfme-column-number-handler:hover {
+  color: var(--pdfme-handle-hover);
+  height: 60%;
+}
+`;
+	rootElement.appendChild(style);
+};
+var HORIZONTAL_ALIGNMENTS = [
+	{
+		value: "left",
+		icon: TextAlignLeftIcon,
+		labelKey: "schemas.left"
+	},
+	{
+		value: "center",
+		icon: TextAlignCenterIcon,
+		labelKey: "schemas.center"
+	},
+	{
+		value: "right",
+		icon: TextAlignRightIcon,
+		labelKey: "schemas.right"
+	}
+];
+var VERTICAL_ALIGNMENTS = [
+	{
+		value: "top",
+		icon: TextVerticalAlignTopIcon,
+		labelKey: "schemas.top"
+	},
+	{
+		value: "middle",
+		icon: TextVerticalAlignMiddleIcon,
+		labelKey: "schemas.middle"
+	},
+	{
+		value: "bottom",
+		icon: TextVerticalAlignBottomIcon,
+		labelKey: "schemas.bottom"
+	}
+];
+var isUnset = (value) => value == null;
+var clearColumnContent = (content, columnIndex) => {
+	let rows;
+	try {
+		rows = JSON.parse(content ?? "[]");
+	} catch {
+		return content ?? "[]";
+	}
+	if (!Array.isArray(rows)) return content ?? "[]";
+	const next = rows.map((row) => {
+		if (!Array.isArray(row)) return row;
+		const copy = row.slice();
+		if (columnIndex < copy.length) copy[columnIndex] = "";
+		return copy;
+	});
+	return JSON.stringify(next);
+};
+var dropColumnKey = (map, columnIndex) => {
+	if (!map) return map;
+	const next = { ...map };
+	delete next[columnIndex];
+	return Object.keys(next).length === 0 ? void 0 : next;
+};
+var columnLabel = (head, index, i18n) => {
+	const label = head[index];
+	return label ? label : `${i18n("schemas.table.columnLabel")} ${index + 1}`;
+};
+var commitStyles = (props, columnStyles, content) => {
+	const schemaId = props.activeSchema.id;
+	const changes = [{
+		key: "columnStyles",
+		value: columnStyles,
+		schemaId
+	}];
+	if (content !== void 0) changes.push({
+		key: "content",
+		value: content,
+		schemaId
+	});
+	props.changeSchemas(changes);
+};
+var setCellType = (props, table, columnIndex, nextType) => {
+	const next = cloneDeep(table.columnStyles ?? {});
+	if (nextType === "image") {
+		next.cellType = {
+			...next.cellType,
+			[columnIndex]: "image"
+		};
+		if (isUnset(next.imageHeightMode?.[columnIndex])) next.imageHeightMode = {
+			...next.imageHeightMode,
+			[columnIndex]: DEFAULT_TABLE_IMAGE_HEIGHT_MODE
+		};
+		if (isUnset(next.imageHeight?.[columnIndex])) next.imageHeight = {
+			...next.imageHeight,
+			[columnIndex]: 20
+		};
+		if (isUnset(next.alignment?.[columnIndex])) next.alignment = {
+			...next.alignment,
+			[columnIndex]: "center"
+		};
+	} else {
+		const cellType = dropColumnKey(next.cellType, columnIndex);
+		const imageHeightMode = dropColumnKey(next.imageHeightMode, columnIndex);
+		const imageHeight = dropColumnKey(next.imageHeight, columnIndex);
+		if (cellType) next.cellType = cellType;
+		else delete next.cellType;
+		if (imageHeightMode) next.imageHeightMode = imageHeightMode;
+		else delete next.imageHeightMode;
+		if (imageHeight) next.imageHeight = imageHeight;
+		else delete next.imageHeight;
+	}
+	commitStyles(props, next, clearColumnContent(table.content, columnIndex));
+};
+var setImageHeightMode = (props, table, columnIndex, mode) => {
+	const next = cloneDeep(table.columnStyles ?? {});
+	next.imageHeightMode = {
+		...next.imageHeightMode,
+		[columnIndex]: mode
+	};
+	commitStyles(props, next);
+};
+var setImageHeight = (props, table, columnIndex, height) => {
+	const next = cloneDeep(table.columnStyles ?? {});
+	next.imageHeight = {
+		...next.imageHeight,
+		[columnIndex]: height
+	};
+	commitStyles(props, next);
+};
+var setAlignment = (props, table, columnIndex, value) => {
+	const next = cloneDeep(table.columnStyles ?? {});
+	if (next.alignment?.[columnIndex] === value) return;
+	next.alignment = {
+		...next.alignment,
+		[columnIndex]: value
+	};
+	commitStyles(props, next);
+};
+var setVerticalAlignment = (props, table, columnIndex, value) => {
+	const next = cloneDeep(table.columnStyles ?? {});
+	if (next.verticalAlignment?.[columnIndex] === value) return;
+	next.verticalAlignment = {
+		...next.verticalAlignment,
+		[columnIndex]: value
+	};
+	commitStyles(props, next);
+};
+var iconSrc = (svg, color) => `data:image/svg+xml;utf8,${encodeURIComponent(svg.replace(/currentColor/g, color))}`;
+var appendIcon = (parent, svg, color, size = 17) => {
+	const img = document.createElement("img");
+	img.alt = "";
+	img.width = size;
+	img.height = size;
+	img.src = iconSrc(svg, color);
+	parent.appendChild(img);
+	return img;
+};
+var appendSelect = (parent, options, value, control, columnIndex, metrics, layout, onChange) => {
+	const shell = document.createElement("div");
+	shell.className = "pdfme-column-select";
+	shell.style.position = "relative";
+	shell.style.display = "inline-flex";
+	shell.style.alignItems = "center";
+	shell.style.boxSizing = "border-box";
+	shell.style.height = `${metrics.controlHeight}px`;
+	shell.style.borderWidth = `${metrics.lineWidth}px`;
+	shell.style.borderStyle = "solid";
+	shell.style.borderRadius = `${metrics.borderRadius}px`;
+	shell.style.background = metrics.colorBg;
+	shell.style.overflow = "hidden";
+	shell.style.transition = `all ${metrics.motion}`;
+	shell.style.flexShrink = layout.flex ? "1" : "0";
+	if (layout.width) shell.style.width = layout.width;
+	if (layout.flex) {
+		shell.style.flex = layout.flex;
+		shell.style.minWidth = "0";
+	}
+	const select = document.createElement("select");
+	select.className = "pdfme-column-select-input";
+	select.dataset.control = control;
+	select.dataset.columnIndex = String(columnIndex);
+	select.style.width = "100%";
+	select.style.height = "100%";
+	select.style.boxSizing = "border-box";
+	select.style.margin = "0";
+	select.style.border = "0";
+	select.style.borderRadius = `${metrics.borderRadius}px`;
+	select.style.background = "transparent";
+	select.style.padding = `0 ${metrics.paddingInline + 18}px 0 ${metrics.paddingInline}px`;
+	select.style.font = "inherit";
+	select.style.fontSize = `${metrics.fontSize}px`;
+	select.style.lineHeight = `${metrics.controlHeight - metrics.lineWidth * 2}px`;
+	select.style.color = metrics.colorText;
+	select.style.cursor = "pointer";
+	options.forEach((option) => {
+		const element = document.createElement("option");
+		element.value = option.value;
+		element.textContent = option.label;
+		select.appendChild(element);
+	});
+	select.value = value;
+	select.addEventListener("change", () => {
+		onChange(select.value);
+	});
+	const arrow = document.createElement("span");
+	arrow.className = "pdfme-column-select-arrow";
+	arrow.setAttribute("aria-hidden", "true");
+	arrow.style.position = "absolute";
+	arrow.style.top = "50%";
+	arrow.style.right = `${metrics.paddingInline}px`;
+	arrow.style.transform = "translateY(-50%)";
+	arrow.style.display = "flex";
+	arrow.style.width = "12px";
+	arrow.style.height = "12px";
+	arrow.style.color = metrics.colorArrow;
+	arrow.style.fontSize = "12px";
+	arrow.style.lineHeight = "1";
+	arrow.style.pointerEvents = "none";
+	appendSvgIcon(arrow, ANT_DOWN_PATH, 12);
+	shell.appendChild(select);
+	shell.appendChild(arrow);
+	parent.appendChild(shell);
+	return select;
+};
+var appendNumberInput = (parent, value, columnIndex, ariaLabel, metrics, onCommit) => {
+	const shell = document.createElement("div");
+	shell.className = "pdfme-column-number";
+	shell.style.position = "relative";
+	shell.style.display = "inline-flex";
+	shell.style.alignItems = "center";
+	shell.style.boxSizing = "border-box";
+	shell.style.width = "72px";
+	shell.style.height = `${metrics.controlHeight}px`;
+	shell.style.flexShrink = "0";
+	shell.style.borderWidth = `${metrics.lineWidth}px`;
+	shell.style.borderStyle = "solid";
+	shell.style.borderRadius = `${metrics.borderRadius}px`;
+	shell.style.background = metrics.colorBg;
+	shell.style.transition = `all ${metrics.motion}`;
+	shell.style.overflow = "hidden";
+	const input = document.createElement("input");
+	input.type = "number";
+	input.min = "1";
+	input.step = "1";
+	input.className = "pdfme-column-number-input";
+	input.dataset.control = "imageHeight";
+	input.dataset.columnIndex = String(columnIndex);
+	input.setAttribute("aria-label", ariaLabel);
+	input.style.width = "100%";
+	input.style.height = "100%";
+	input.style.boxSizing = "border-box";
+	input.style.margin = "0";
+	input.style.border = "0";
+	input.style.borderRadius = "0";
+	input.style.background = "transparent";
+	input.style.font = "inherit";
+	input.style.fontSize = `${metrics.fontSize}px`;
+	input.style.lineHeight = "22px";
+	input.style.color = metrics.colorText;
+	input.value = value;
+	input.addEventListener("change", () => {
+		onCommit(input);
+	});
+	const handlers = document.createElement("div");
+	handlers.className = "pdfme-column-number-handlers";
+	handlers.style.position = "absolute";
+	handlers.style.top = "0";
+	handlers.style.right = "0";
+	handlers.style.bottom = "0";
+	handlers.style.display = "flex";
+	handlers.style.flexDirection = "column";
+	handlers.style.overflow = "hidden";
+	handlers.style.background = metrics.colorBg;
+	handlers.style.borderRadius = `0 ${metrics.borderRadius}px ${metrics.borderRadius}px 0`;
+	handlers.style.transition = `all ${metrics.motion}`;
+	const step = (delta) => {
+		const current = Number(input.value);
+		const base = Number.isFinite(current) ? current : Number(value);
+		const next = Math.max(1, base + delta);
+		if (next === base) return;
+		input.value = String(next);
+		input.dispatchEvent(new Event("change"));
+	};
+	const addHandler = (direction, path, label) => {
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = "pdfme-column-number-handler";
+		button.dataset.control = direction === "up" ? "imageHeightUp" : "imageHeightDown";
+		button.setAttribute("aria-label", label);
+		button.style.flex = "1 1 50%";
+		button.style.display = "flex";
+		button.style.alignItems = "center";
+		button.style.justifyContent = "center";
+		button.style.margin = "0";
+		button.style.padding = "0";
+		button.style.border = "0";
+		button.style.borderLeft = `${metrics.lineWidth}px solid ${metrics.colorBorder}`;
+		button.style.background = "transparent";
+		button.style.color = metrics.colorIcon;
+		button.style.cursor = "pointer";
+		button.style.lineHeight = "0";
+		if (direction === "down") button.style.borderTop = `${metrics.lineWidth}px solid ${metrics.colorBorder}`;
+		button.addEventListener("mousedown", (event) => {
+			event.preventDefault();
+		});
+		button.addEventListener("click", () => {
+			step(direction === "up" ? 1 : -1);
+		});
+		appendSvgIcon(button, path, metrics.handleFontSize);
+		handlers.appendChild(button);
+	};
+	addHandler("up", ANT_UP_PATH, "Increase Value");
+	addHandler("down", ANT_DOWN_PATH, "Decrease Value");
+	shell.appendChild(input);
+	shell.appendChild(handlers);
+	parent.appendChild(shell);
+	return input;
+};
+var appendButtonGroup = (parent, control, buttons, current, columnIndex, colors, i18n, onSelect) => {
+	const group = document.createElement("div");
+	group.dataset.control = control;
+	group.dataset.columnIndex = String(columnIndex);
+	group.setAttribute("role", "group");
+	group.style.display = "inline-flex";
+	buttons.forEach((button, index) => {
+		const element = document.createElement("button");
+		element.type = "button";
+		element.dataset.value = button.value;
+		const label = i18n(button.labelKey);
+		element.setAttribute("aria-label", label);
+		element.title = label;
+		const active = current === button.value;
+		element.setAttribute("aria-pressed", active ? "true" : "false");
+		element.style.padding = "7px";
+		element.style.lineHeight = "0";
+		element.style.background = "transparent";
+		element.style.cursor = "pointer";
+		element.style.border = `1px solid ${active ? colors.primary : colors.border}`;
+		element.style.marginLeft = index === 0 ? "0" : "-1px";
+		element.style.borderRadius = index === 0 ? "6px 0 0 6px" : index === buttons.length - 1 ? "0 6px 6px 0" : "0";
+		element.style.position = "relative";
+		element.style.zIndex = active ? "1" : "0";
+		appendIcon(element, button.icon, active ? colors.primary : colors.text);
+		element.addEventListener("click", () => {
+			if (current === button.value) return;
+			onSelect(button.value);
+		});
+		group.appendChild(element);
+	});
+	parent.appendChild(group);
+	return group;
+};
+var ellipsis = (element) => {
+	element.style.overflow = "hidden";
+	element.style.textOverflow = "ellipsis";
+	element.style.whiteSpace = "nowrap";
+	element.style.minWidth = "0";
+};
+var TableColumns = (props) => {
+	const { rootElement, activeSchema, i18n } = props;
+	const table = activeSchema;
+	const head = table.head || [];
+	const columnStyles = table.columnStyles ?? {};
+	const metrics = panelControlMetrics(props.theme);
+	ensurePanelControlStyles(rootElement, metrics);
+	const colors = {
+		primary: themeToken(props.theme, "colorPrimary", "#1677ff"),
+		border: themeToken(props.theme, "colorBorder", "#d9d9d9"),
+		text: themeToken(props.theme, "colorText", "#000000"),
+		split: themeToken(props.theme, "colorSplit", "#f0f0f0")
+	};
+	const collapsible = head.length > COLLAPSE_WHEN_MORE_THAN;
+	head.forEach((_, index) => {
+		const storedType = columnStyles.cellType?.[index];
+		const cellType = normalizeTableCellType(storedType, index, cellTypeWarnCache) ?? "text";
+		const label = columnLabel(head, index, i18n);
+		const alignment = columnStyles.alignment?.[index];
+		const verticalAlignment = columnStyles.verticalAlignment?.[index];
+		const mode = cellType === "image" ? normalizeTableImageHeightMode(columnStyles.imageHeightMode?.[index]) ?? "fixed" : void 0;
+		const block = document.createElement("div");
+		block.dataset.columnIndex = String(index);
+		block.style.marginBottom = index === head.length - 1 ? "0" : "10px";
+		block.style.paddingBottom = index === head.length - 1 ? "0" : "10px";
+		if (index !== head.length - 1) block.style.borderBottom = `1px solid ${colors.split}`;
+		const body = document.createElement("div");
+		body.dataset.control = "column-body";
+		const expanded = collapsible && expandedColumnBlocks.has(columnBlockKey(activeSchema.id, index));
+		if (collapsible) {
+			const summary = document.createElement("button");
+			summary.type = "button";
+			summary.dataset.control = "summary";
+			summary.setAttribute("aria-expanded", expanded ? "true" : "false");
+			summary.setAttribute("aria-label", `Expand ${label}`);
+			summary.title = label;
+			summary.style.display = "flex";
+			summary.style.alignItems = "center";
+			summary.style.gap = "6px";
+			summary.style.width = "100%";
+			summary.style.padding = "0";
+			summary.style.border = "none";
+			summary.style.background = "transparent";
+			summary.style.cursor = "pointer";
+			summary.style.font = "inherit";
+			summary.style.textAlign = "left";
+			const name = document.createElement("span");
+			name.dataset.control = "summary-name";
+			name.textContent = label;
+			name.style.fontWeight = "600";
+			name.style.fontSize = "12px";
+			name.style.flex = "1";
+			ellipsis(name);
+			summary.appendChild(name);
+			const typeLabel = document.createElement("span");
+			typeLabel.dataset.control = "summary-type";
+			typeLabel.textContent = i18n(`schemas.table.cellType.${cellType}`);
+			typeLabel.style.fontSize = "12px";
+			typeLabel.style.flexShrink = "0";
+			summary.appendChild(typeLabel);
+			const alignmentIcon = HORIZONTAL_ALIGNMENTS.find((button) => button.value === alignment);
+			if (alignmentIcon) {
+				const icon = document.createElement("span");
+				icon.dataset.control = "summary-alignment";
+				icon.dataset.value = alignmentIcon.value;
+				icon.style.lineHeight = "0";
+				icon.style.flexShrink = "0";
+				appendIcon(icon, alignmentIcon.icon, colors.text, 14);
+				summary.appendChild(icon);
+			}
+			const verticalIcon = VERTICAL_ALIGNMENTS.find((button) => button.value === verticalAlignment);
+			if (verticalIcon) {
+				const icon = document.createElement("span");
+				icon.dataset.control = "summary-vertical-alignment";
+				icon.dataset.value = verticalIcon.value;
+				icon.style.lineHeight = "0";
+				icon.style.flexShrink = "0";
+				appendIcon(icon, verticalIcon.icon, colors.text, 14);
+				summary.appendChild(icon);
+			}
+			if (cellType === "image" && mode === "fixed") {
+				const height = document.createElement("span");
+				height.dataset.control = "summary-height";
+				height.textContent = `${resolveFixedTableImageHeight(columnStyles.imageHeight?.[index])}mm`;
+				height.style.fontSize = "12px";
+				height.style.flexShrink = "0";
+				summary.appendChild(height);
+			}
+			summary.addEventListener("click", () => {
+				expandedColumnBlocks.add(columnBlockKey(activeSchema.id, index));
+				summary.hidden = true;
+				summary.setAttribute("aria-expanded", "true");
+				body.hidden = false;
+			});
+			summary.hidden = expanded;
+			body.hidden = !expanded;
+			block.appendChild(summary);
+		}
+		const header = document.createElement("div");
+		header.style.display = "flex";
+		header.style.alignItems = "center";
+		header.style.gap = "8px";
+		if (collapsible) {
+			const collapse = document.createElement("button");
+			collapse.type = "button";
+			collapse.dataset.control = "collapse";
+			collapse.setAttribute("aria-expanded", "true");
+			collapse.setAttribute("aria-label", `Collapse ${label}`);
+			collapse.textContent = "▾";
+			collapse.style.border = "none";
+			collapse.style.background = "transparent";
+			collapse.style.cursor = "pointer";
+			collapse.style.padding = "0 2px 0 0";
+			collapse.style.lineHeight = "1";
+			collapse.addEventListener("click", () => {
+				expandedColumnBlocks.delete(columnBlockKey(activeSchema.id, index));
+				const summary = block.querySelector("[data-control=\"summary\"]");
+				if (summary) {
+					summary.hidden = false;
+					summary.setAttribute("aria-expanded", "false");
+				}
+				body.hidden = true;
+			});
+			header.appendChild(collapse);
+		}
+		const title = document.createElement("div");
+		title.dataset.control = "label";
+		title.textContent = label;
+		title.title = label;
+		title.style.fontSize = "12px";
+		title.style.fontWeight = "600";
+		title.style.flex = "1";
+		ellipsis(title);
+		header.appendChild(title);
+		appendSelect(header, TABLE_CELL_TYPES.map((type) => ({
+			value: type,
+			label: i18n(`schemas.table.cellType.${type}`)
+		})), cellType, "cellType", index, metrics, { width: "110px" }, (value) => {
+			if (value !== "text" && value !== "image") return;
+			if (value === cellType) return;
+			setCellType(props, table, index, value);
+		});
+		body.appendChild(header);
+		const alignments = document.createElement("div");
+		alignments.style.display = "flex";
+		alignments.style.justifyContent = "space-between";
+		alignments.style.alignItems = "center";
+		alignments.style.marginTop = "8px";
+		appendButtonGroup(alignments, "alignment", HORIZONTAL_ALIGNMENTS, alignment, index, colors, i18n, (value) => {
+			if (value !== "left" && value !== "center" && value !== "right") return;
+			setAlignment(props, table, index, value);
+		});
+		appendButtonGroup(alignments, "verticalAlignment", VERTICAL_ALIGNMENTS, verticalAlignment, index, colors, i18n, (value) => {
+			if (value !== "top" && value !== "middle" && value !== "bottom") return;
+			setVerticalAlignment(props, table, index, value);
+		});
+		body.appendChild(alignments);
+		if (cellType === "image" && mode) {
+			const imageRow = document.createElement("div");
+			imageRow.style.display = "flex";
+			imageRow.style.alignItems = "center";
+			imageRow.style.gap = "8px";
+			imageRow.style.marginTop = "8px";
+			appendSelect(imageRow, TABLE_IMAGE_HEIGHT_MODES.map((heightMode) => ({
+				value: heightMode,
+				label: i18n(`schemas.table.imageHeightMode.${heightMode}`)
+			})), mode, "imageHeightMode", index, metrics, { flex: "1" }, (value) => {
+				if (value !== "fixed" && value !== "auto") return;
+				if (value === mode) return;
+				setImageHeightMode(props, table, index, value);
+			});
+			if (mode === "fixed") {
+				const displayHeight = resolveFixedTableImageHeight(columnStyles.imageHeight?.[index]);
+				appendNumberInput(imageRow, String(displayHeight), index, i18n("schemas.table.imageHeightMode.fixed"), metrics, (input) => {
+					const parsed = Number(input.value);
+					if (!Number.isFinite(parsed) || parsed <= 0) {
+						input.value = String(displayHeight);
+						return;
+					}
+					setImageHeight(props, table, index, parsed);
+				});
+			}
+			body.appendChild(imageRow);
+		}
+		block.appendChild(body);
+		rootElement.appendChild(block);
+	});
+};
+//#endregion
 //#region src/tables/index.ts
 var tableSchema = {
 	pdf: pdfRender,
 	ui: uiRender,
 	propPanel: {
 		schema: ({ activeSchema, options, i18n }) => {
-			const tableSchema = activeSchema;
-			const head = tableSchema.head || [];
-			const showHead = tableSchema.showHead || false;
+			const showHead = activeSchema.showHead || false;
 			const font = options.font || { [DEFAULT_FONT_NAME]: {
 				data: "",
 				fallback: true
@@ -3691,18 +4345,22 @@ var tableSchema = {
 						isBody: true
 					})
 				},
-				columnStyles: {
+				tableColumns: {
 					title: i18n("schemas.table.columnStyle"),
 					type: "object",
 					widget: "Card",
+					bind: false,
 					span: 24,
-					properties: getColumnStylesPropPanelSchema({
-						head,
-						i18n
-					})
+					properties: { columns: {
+						type: "void",
+						widget: "TableColumns",
+						bind: false,
+						span: 24
+					} }
 				}
 			};
 		},
+		widgets: { TableColumns },
 		defaultSchema: {
 			name: "",
 			type: "table",