@pdfme/ui 6.1.5-dev.1 → 6.1.5-dev.13

package/dist/index.js

@@ -46080,6 +46080,10 @@ object$1({
 	addPageAfter: string$1(),
 	removePage: string$1(),
 	removePageConfirm: string$1(),
+	zoomIn: string$1(),
+	zoomOut: string$1(),
+	fitWidth: string$1(),
+	fitHeight: string$1(),
 	"validation.uniqueName": string$1(),
 	"validation.hexColor": string$1(),
 	"validation.dateTimeFormat": string$1(),
@@ -81891,6 +81895,10 @@ var dictionaries = {
 		addPageAfter: "Add Page After",
 		removePage: "Remove Current Page",
 		removePageConfirm: "Are you sure you want to delete this page? This action cannot be undone.",
+		zoomIn: "Zoom in",
+		zoomOut: "Zoom out",
+		fitWidth: "Fit width",
+		fitHeight: "Fit height",
 		"validation.hexColor": "Please enter a valid hex color code.",
 		"validation.uniqueName": "Please enter a unique name.",
 		"validation.dateTimeFormat": "Invalid date time format.",
@@ -81994,6 +82002,10 @@ var dictionaries = {
 		addPageAfter: "在之后添加页面",
 		removePage: "删除当前页面",
 		removePageConfirm: "您确定要删除此页面吗？此操作无法撤销。",
+		zoomIn: "放大",
+		zoomOut: "缩小",
+		fitWidth: "适合宽度",
+		fitHeight: "适合高度",
 		"validation.hexColor": "请输入有效的十六进制颜色代码。",
 		"validation.uniqueName": "请输入一个唯一的名称。",
 		"validation.dateTimeFormat": "日期时间格式无效。",
@@ -82097,6 +82109,10 @@ var dictionaries = {
 		addPageAfter: "次にページを追加",
 		removePage: "現在のページを削除",
 		removePageConfirm: "ページを削除してもよろしいですか？この操作は元に戻せません。",
+		zoomIn: "拡大",
+		zoomOut: "縮小",
+		fitWidth: "横幅に合わせる",
+		fitHeight: "高さに合わせる",
 		"validation.hexColor": "有効な16進数のカラーコードを入力してください。",
 		"validation.uniqueName": "一意の名前を入力してください。",
 		"validation.dateTimeFormat": "日付と時刻のフォーマットが無効です。",
@@ -82200,6 +82216,10 @@ var dictionaries = {
 		addPageAfter: "다음에 페이지 추가",
 		removePage: "현재 페이지 제거",
 		removePageConfirm: "이 페이지를 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.",
+		zoomIn: "확대",
+		zoomOut: "축소",
+		fitWidth: "너비에 맞춤",
+		fitHeight: "높이에 맞춤",
 		"validation.hexColor": "유효한 16진수 색상 코드를 입력하세요.",
 		"validation.uniqueName": "고유한 이름을 입력하세요.",
 		"validation.dateTimeFormat": "날짜/시간 형식이 잘못되었습니다.",
@@ -82303,6 +82323,10 @@ var dictionaries = {
 		addPageAfter: "إضافة صفحة بعد",
 		removePage: "احذف الصفحة الحالية",
 		removePageConfirm: "هل أنت متأكد من رغبتك في حذف هذه الصفحة؟ لا يمكن التراجع عن هذا الإجراء.",
+		zoomIn: "تكبير",
+		zoomOut: "تصغير",
+		fitWidth: "ملاءمة العرض",
+		fitHeight: "ملاءمة الارتفاع",
 		"validation.hexColor": "الرجاء إدخال رمز لون سداسي عشري صالح.",
 		"validation.uniqueName": "الرجاء إدخال اسم فريد.",
 		"validation.dateTimeFormat": "تنسيق التاريخ والوقت غير صالح.",
@@ -82406,6 +82430,10 @@ var dictionaries = {
 		addPageAfter: "เพิ่มหน้าถัดไป",
 		removePage: "ลบหน้าปัจจุบัน",
 		removePageConfirm: "คุณแน่ใจหรือไม่ว่าต้องการลบหน้านี้? การกระทำนี้ไม่สามารถย้อนกลับได้",
+		zoomIn: "ซูมเข้า",
+		zoomOut: "ซูมออก",
+		fitWidth: "พอดีกับความกว้าง",
+		fitHeight: "พอดีกับความสูง",
 		"validation.hexColor": "กรุณาใส่รหัสสีแบบฐานสิบหกที่ถูกต้อง",
 		"validation.uniqueName": "กรุณาระบุชื่อที่ไม่ซ้ำ",
 		"validation.dateTimeFormat": "รูปแบบวันที่และเวลาไม่ถูกต้อง",
@@ -82509,6 +82537,10 @@ var dictionaries = {
 		addPageAfter: "Aggiungi pagina dopo",
 		removePage: "Rimuovi la Pagina Corrente",
 		removePageConfirm: "Sei sicuro di voler eliminare questa pagina? Questa azione non può essere annullata.",
+		zoomIn: "Ingrandisci",
+		zoomOut: "Riduci",
+		fitWidth: "Adatta larghezza",
+		fitHeight: "Adatta altezza",
 		"validation.hexColor": "Inserisci un codice colore esadecimale valido.",
 		"validation.uniqueName": "Inserisci un nome univoco.",
 		"validation.dateTimeFormat": "Formato data-ora non valido.",
@@ -82612,6 +82644,10 @@ var dictionaries = {
 		addPageAfter: "Dodaj stronę po",
 		removePage: "Usuń Bieżącą Stronę",
 		removePageConfirm: "Czy na pewno chcesz usunąć tę stronę? Tej operacji nie można cofnąć.",
+		zoomIn: "Powiększ",
+		zoomOut: "Pomniejsz",
+		fitWidth: "Dopasuj szerokość",
+		fitHeight: "Dopasuj wysokość",
 		"validation.hexColor": "Wprowadź poprawny kod koloru szesnastkowego.",
 		"validation.uniqueName": "Proszę wpisać unikalną nazwę.",
 		"validation.dateTimeFormat": "Nieprawidłowy format daty i godziny.",
@@ -82715,6 +82751,10 @@ var dictionaries = {
 		addPageAfter: "Seite danach hinzufügen",
 		removePage: "Aktuelle Seite entfernen",
 		removePageConfirm: "Sind Sie sicher, dass Sie diese Seite löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+		zoomIn: "Vergrößern",
+		zoomOut: "Verkleinern",
+		fitWidth: "Breite anpassen",
+		fitHeight: "Höhe anpassen",
 		"validation.hexColor": "Bitte geben Sie einen gültigen Hex-Farbcode ein.",
 		"validation.uniqueName": "Bitte geben Sie einen eindeutigen Namen ein.",
 		"validation.dateTimeFormat": "Ungültiges Datums- und Zeitformat.",
@@ -82818,6 +82858,10 @@ var dictionaries = {
 		addPageAfter: "Insertar página",
 		removePage: "Eliminar página actual",
 		removePageConfirm: "¿Estás seguro de que quieres eliminar esta página? Esta acción no se puede deshacer.",
+		zoomIn: "Acercar",
+		zoomOut: "Alejar",
+		fitWidth: "Ajustar ancho",
+		fitHeight: "Ajustar alto",
 		"validation.hexColor": "Introduce un código de color hexadecimal válido.",
 		"validation.uniqueName": "Por favor, introduzca un nombre único.",
 		"validation.dateTimeFormat": "Formato de fecha y hora no válido.",
@@ -82921,6 +82965,10 @@ var dictionaries = {
 		addPageAfter: "Ajouter une page après",
 		removePage: "Supprimer la page actuelle",
 		removePageConfirm: "Êtes-vous sûr de vouloir supprimer cette page ? Cette action est irréversible.",
+		zoomIn: "Zoom avant",
+		zoomOut: "Zoom arrière",
+		fitWidth: "Ajuster la largeur",
+		fitHeight: "Ajuster la hauteur",
 		"validation.hexColor": "Veuillez entrer un code couleur hexadécimal valide.",
 		"validation.uniqueName": "Veuillez saisir un nom unique.",
 		"validation.dateTimeFormat": "Format de date et d'heure non valide.",
@@ -98926,7 +98974,7 @@ $d636bc798e7178db$export$36b2f24e97d43be($21ee218f84ac7f32$export$2e2bcd8739ae03
 $d636bc798e7178db$export$36b2f24e97d43be($cd5853a56c68fec7$export$2e2bcd8739ae039);
 $d636bc798e7178db$export$36b2f24e97d43be($05f49f930186144e$export$2e2bcd8739ae039);
 //#endregion
-//#region ../schemas/dist/splitRange-Dh3WRCAN.js
+//#region ../schemas/dist/splitRange-BOUo4Tvl.js
 var ALIGN_LEFT = "left";
 var ALIGN_CENTER = "center";
 var ALIGN_RIGHT = "right";
@@ -99167,16 +99215,28 @@ var fetchRemoteFontData = async (url) => {
 var getFontKitFont = async (fontName, font, _cache) => {
 	const fntNm = fontName || getFallbackFontName(font);
 	const cacheKey = getCacheKey(fntNm);
-	if (_cache.has(cacheKey)) return _cache.get(cacheKey);
-	let fontData = (font[fntNm] || getFallbackFont(font) || getDefaultFont()["Roboto"]).data;
-	if (typeof fontData === "string") if (fontData.startsWith("http")) fontData = await fetchRemoteFontData(fontData);
-	else fontData = b64toUint8Array(fontData);
-	let fontDataBuffer;
-	if (fontData instanceof Buffer$1) fontDataBuffer = fontData;
-	else fontDataBuffer = Buffer$1.from(fontData);
-	const fontKitFont = $d636bc798e7178db$export$185802fd694ee1f5(fontDataBuffer);
-	_cache.set(cacheKey, fontKitFont);
-	return fontKitFont;
+	const fontCache = _cache;
+	const cachedFont = fontCache.get(cacheKey);
+	if (cachedFont) return await cachedFont;
+	const currentFont = font[fntNm] || getFallbackFont(font) || getDefaultFont()["Roboto"];
+	const fontKitFontPromise = (async () => {
+		let fontData = currentFont.data;
+		if (typeof fontData === "string") if (fontData.startsWith("http")) fontData = await fetchRemoteFontData(fontData);
+		else fontData = b64toUint8Array(fontData);
+		let fontDataBuffer;
+		if (fontData instanceof Buffer$1) fontDataBuffer = fontData;
+		else fontDataBuffer = Buffer$1.from(fontData);
+		return $d636bc798e7178db$export$185802fd694ee1f5(fontDataBuffer);
+	})();
+	fontCache.set(cacheKey, fontKitFontPromise);
+	try {
+		const fontKitFont = await fontKitFontPromise;
+		fontCache.set(cacheKey, fontKitFont);
+		return fontKitFont;
+	} catch (error) {
+		if (fontCache.get(cacheKey) === fontKitFontPromise) fontCache.delete(cacheKey);
+		throw error;
+	}
 };
 /**
 * If using dynamic font size, iteratively increment or decrement the
@@ -99392,7 +99452,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-egCJqCr0.js
+//#region ../schemas/dist/measure-_MO-Voz3.js
 var MARKDOWN_ESCAPABLE_CHARS = new Set([
 	"\\",
 	"*",
@@ -99991,7 +100051,7 @@ var getRichTextLineHeight = (line, fontSize) => {
 	return Math.max(...line.runs.map((run) => heightOfFontAtSize(run.fontKitFont, fontSize)));
 };
 //#endregion
-//#region ../schemas/dist/dynamicTemplate-CXBCt5wk.js
+//#region ../schemas/dist/dynamicTemplate-C9FSccAm.js
 function _typeof$18(o) {
 	"@babel/helpers - typeof";
 	return _typeof$18 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -100555,7 +100615,7 @@ var getDynamicLayoutForTable = async (value, args) => {
 	};
 };
 //#endregion
-//#region ../schemas/dist/utils-TWv_zwgS.js
+//#region ../schemas/dist/utils-B8i6Nc_7.js
 var convertForPdfLayoutProps = ({ schema, pageHeight, applyRotateTranslate = true }) => {
 	const { width: mmWidth, height: mmHeight, position, rotate, opacity } = schema;
 	const { x: mmX, y: mmY } = position;
@@ -100845,7 +100905,7 @@ var Underline = [["path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }], ["line", {
 	y2: "20"
 }]];
 //#endregion
-//#region ../schemas/dist/builtins-6irEILr7.js
+//#region ../schemas/dist/builtins-Bs4Z7Q4K.js
 var addUriLinkAnnotation = (arg) => {
 	const { pdfDoc, page, uri, rect, borderWidth = 0 } = arg;
 	const safeUri = normalizeSafeLinkUri(uri);
@@ -102418,6 +102478,35 @@ var moveCommandToChangeSchemasArg = (props) => {
 var getPagesScrollTopByIndex = (pageSizes, index, scale) => {
 	return pageSizes.slice(0, index).reduce((acc, cur) => acc + (cur.height * ZOOM + 30 * scale) * scale, 0);
 };
+var MIN_ZOOM = .25;
+var FIT_GUTTER = 40;
+var clampZoomLevel = (zoomLevel, maxZoom, minZoom = MIN_ZOOM) => Math.min(Math.max(zoomLevel, minZoom), maxZoom);
+var getFitZoomLevel = ({ mode, pageSize, container, baseScale, maxZoom, hasRulers = false }) => {
+	if (baseScale <= 0) return 1;
+	if (mode === "fit-height") return clampZoomLevel(1, maxZoom);
+	if (!pageSize || !container) return 1;
+	const rulerSize = hasRulers ? 30 : 0;
+	return clampZoomLevel(Math.max(1, container.clientWidth - rulerSize - FIT_GUTTER) / (pageSize.width * ZOOM) / baseScale, maxZoom);
+};
+var getZoomAnchor = ({ pageIndex, paper, clientX, clientY, scale }) => {
+	if (!paper || scale <= 0) return null;
+	const rect = paper.getBoundingClientRect();
+	return {
+		pageIndex,
+		localX: (clientX - rect.left) / scale,
+		localY: (clientY - rect.top) / scale,
+		clientX,
+		clientY
+	};
+};
+var restoreZoomAnchor = ({ container, paper, anchor, scale }) => {
+	if (!container || !paper || !anchor || scale <= 0) return;
+	const rect = paper.getBoundingClientRect();
+	const nextClientX = rect.left + anchor.localX * scale;
+	const nextClientY = rect.top + anchor.localY * scale;
+	if (Number.isFinite(nextClientX)) container.scrollLeft += nextClientX - anchor.clientX;
+	if (Number.isFinite(nextClientY)) container.scrollTop += nextClientY - anchor.clientY;
+};
 var handlePositionSizeChange = (schema, key, value, basePdf, pageSize) => {
 	const [pt, pr, pb, pl] = isBlankPdf(basePdf) ? basePdf.padding : [
 		0,
@@ -105429,7 +105518,7 @@ function canUseDom$1() {
 * Wrap `React.useLayoutEffect` which will not throw warning message in test env
 */
 var useInternalLayoutEffect$1 = canUseDom$1() ? import_react$9.useLayoutEffect : import_react$9.useEffect;
-var useLayoutEffect$6 = (callback, deps) => {
+var useLayoutEffect$7 = (callback, deps) => {
 	const firstMountRef = import_react$9.useRef(true);
 	useInternalLayoutEffect$1(() => {
 		return callback(firstMountRef.current);
@@ -105473,7 +105562,7 @@ var useSafeState$1 = (defaultValue) => {
 function useControlledState(defaultStateValue, value) {
 	const [innerValue, setInnerValue] = (0, import_react$9.useState)(defaultStateValue);
 	const mergedValue = value !== void 0 ? value : innerValue;
-	useLayoutEffect$6((mount) => {
+	useLayoutEffect$7((mount) => {
 		if (!mount) setInnerValue(value);
 	}, [value]);
 	return [mergedValue, setInnerValue];
@@ -105501,7 +105590,7 @@ var useId_default$2 = useOriginId$1 ? function useId(id) {
 };
 //#endregion
 //#region node_modules/antd/node_modules/@rc-component/util/es/hooks/useMemo.js
-function useMemo$49(getValue, condition, shouldUpdate) {
+function useMemo$50(getValue, condition, shouldUpdate) {
 	const cacheRef = import_react$9.useRef({});
 	if (!("value" in cacheRef.current) || shouldUpdate(cacheRef.current.condition, condition)) {
 		cacheRef.current.value = getValue();
@@ -105605,7 +105694,7 @@ var composeRef$1 = (...refs) => {
 	};
 };
 var useComposeRef$1 = (...refs) => {
-	return useMemo$49(() => composeRef$1(...refs), refs, (prev, next) => prev.length !== next.length || prev.every((ref, i) => ref !== next[i]));
+	return useMemo$50(() => composeRef$1(...refs), refs, (prev, next) => prev.length !== next.length || prev.every((ref, i) => ref !== next[i]));
 };
 var supportRef$1 = (nodeOrComponent) => {
 	if (!nodeOrComponent) return false;
@@ -112567,13 +112656,13 @@ function useDom$1(render, debug) {
 		ele.parentElement?.removeChild(ele);
 		appendedRef.current = false;
 	}
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (render) if (queueCreate) queueCreate(append);
 		else append();
 		else cleanup();
 		return cleanup;
 	}, [render]);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (queue.length) {
 			queue.forEach((appendFn) => appendFn());
 			setQueue(EMPTY_LIST$8);
@@ -112599,7 +112688,7 @@ function useScrollLocker$1(lock) {
 		uuid$6 += 1;
 		return `${UNIQUE_ID$1}_${uuid$6}`;
 	});
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (mergedLock) {
 			const scrollbarSize = getTargetScrollBarSize$1(document.body).width;
 			updateCSS$1(`
@@ -112831,7 +112920,7 @@ var Popup$5 = /* @__PURE__ */ import_react$9.forwardRef((props, ref) => {
 	]);
 	const getPopupContainerNeedParams = getPopupContainer?.length > 0;
 	const [show, setShow] = import_react$9.useState(!getPopupContainer || !getPopupContainerNeedParams);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (!show && getPopupContainerNeedParams && target) setShow(true);
 	}, [
 		show,
@@ -113008,7 +113097,7 @@ function getPxValue$1(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$1(initArea, scrollerList) {
+function getVisibleArea$2(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -113184,8 +113273,8 @@ function useAlign$1(open, popupEle, target, placement, builtinPlacements, popupA
 			const VISIBLE_FIRST = "visibleFirst";
 			if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) htmlRegion = VISIBLE;
 			const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
-			const scrollRegionArea = getVisibleArea$1(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$1(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$2(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$2(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -113378,8 +113467,8 @@ function useAlign$1(open, popupEle, target, placement, builtinPlacements, popupA
 			ready: false
 		}));
 	};
-	useLayoutEffect$6(resetReady, [placement]);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(resetReady, [placement]);
+	useLayoutEffect$7(() => {
 		if (!open) resetReady();
 	}, [open]);
 	return [
@@ -113423,7 +113512,7 @@ function useDelay() {
 //#endregion
 //#region node_modules/antd/node_modules/@rc-component/trigger/es/hooks/useWatch.js
 function useWatch$3(open, target, popup, onAlign, onScroll) {
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (open && target && popup) {
 			const targetElement = target;
 			const popupElement = popup;
@@ -113788,7 +113877,7 @@ function generateTrigger$1(PortalComponent = es_default$30) {
 			id,
 			onEsc
 		}));
-		useLayoutEffect$6(() => {
+		useLayoutEffect$7(() => {
 			if (uniqueContext && unique && targetEle && !openUncontrolled && !parentContext) if (mergedOpen) uniqueContext.show(getUniqueOptions(mouseEnterDelay), isOpen);
 			else uniqueContext.hide(mouseLeaveDelay);
 		}, [mergedOpen, targetEle]);
@@ -113824,7 +113913,7 @@ function generateTrigger$1(PortalComponent = es_default$30) {
 			if (top) triggerOpen(false);
 		}
 		const [inMotion, setInMotion] = import_react$9.useState(false);
-		useLayoutEffect$6((firstMount) => {
+		useLayoutEffect$7((firstMount) => {
 			if (!firstMount || mergedOpen) setInMotion(true);
 		}, [mergedOpen]);
 		const [motionPrepareResolve, setMotionPrepareResolve] = import_react$9.useState(null);
@@ -113843,10 +113932,10 @@ function generateTrigger$1(PortalComponent = es_default$30) {
 			if (openRef.current && alignPoint && clickToHide) triggerOpen(false);
 		};
 		useWatch$3(mergedOpen, targetEle, popupEle, triggerAlign, onScroll);
-		useLayoutEffect$6(() => {
+		useLayoutEffect$7(() => {
 			triggerAlign();
 		}, [mousePos, popupPlacement]);
-		useLayoutEffect$6(() => {
+		useLayoutEffect$7(() => {
 			if (mergedOpen && !builtinPlacements?.[popupPlacement]) triggerAlign();
 		}, [JSON.stringify(popupAlign)]);
 		const alignedClassName = import_react$9.useMemo(() => {
@@ -113886,7 +113975,7 @@ function generateTrigger$1(PortalComponent = es_default$30) {
 			syncTargetSize();
 			setMotionPrepareResolve(() => resolve);
 		});
-		useLayoutEffect$6(() => {
+		useLayoutEffect$7(() => {
 			if (motionPrepareResolve) {
 				onAlign();
 				motionPrepareResolve();
@@ -114145,7 +114234,7 @@ function useTheme$1(theme, parentTheme, config) {
 		cssVar: parentTheme?.cssVar
 	} : parentTheme;
 	const themeKey = (0, import_react$9.useId)();
-	return useMemo$49(() => {
+	return useMemo$50(() => {
 		if (!theme) return parentTheme;
 		const mergedComponents = { ...parentThemeConfig.components };
 		Object.keys(theme.components || {}).forEach((componentName) => {
@@ -114333,7 +114422,7 @@ var ProviderChildren$1 = (props) => {
 		autoInsertSpace: autoInsertSpaceInButton,
 		...config.button
 	};
-	const memoedConfig = useMemo$49(() => config, config, (prevConfig, currentConfig) => {
+	const memoedConfig = useMemo$50(() => config, config, (prevConfig, currentConfig) => {
 		const prevKeys = Object.keys(prevConfig);
 		const currentKeys = Object.keys(currentConfig);
 		return prevKeys.length !== currentKeys.length || prevKeys.some((key) => prevConfig[key] !== currentConfig[key]);
@@ -116433,7 +116522,7 @@ var Button$1 = /* @__PURE__ */ import_react$9.forwardRef((props, ref) => {
 			isMountRef.current = true;
 		};
 	}, []);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		let delayTimer = null;
 		if (loadingOrDelay.delay > 0) delayTimer = setTimeout(() => {
 			delayTimer = null;
@@ -119633,7 +119722,7 @@ function useBreakpoint$1(refreshOnChange = true, defaultScreens = {}) {
 	const screensRef = (0, import_react$9.useRef)(defaultScreens);
 	const [, forceUpdate] = useForceUpdate$1();
 	const responsiveObserver = useResponsiveObserver$1();
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		const token = responsiveObserver.subscribe((supportScreens) => {
 			screensRef.current = supportScreens;
 			if (refreshOnChange) forceUpdate();
@@ -120877,7 +120966,7 @@ function Overflow$1(props, ref) {
 	function getItemWidth(index) {
 		return itemWidths.get(getKey(mergedData[index], index));
 	}
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (mergedContainerWidth && typeof mergedRestWidth === "number" && mergedData) {
 			let totalWidth = prefixWidth + suffixWidth;
 			const len = mergedData.length;
@@ -121019,7 +121108,7 @@ function mergeProps$2(origin, target) {
 }
 function InheritableContextProvider$1({ children, locked, ...restProps }) {
 	const context = import_react$9.useContext(MenuContext$3);
-	const inheritableContext = useMemo$49(() => mergeProps$2(context, restProps), [context, restProps], (prev, next) => !locked && (prev[0] !== next[0] || !isEqual$1(prev[1], next[1], true)));
+	const inheritableContext = useMemo$50(() => mergeProps$2(context, restProps), [context, restProps], (prev, next) => !locked && (prev[0] !== next[0] || !isEqual$1(prev[1], next[1], true)));
 	return /* @__PURE__ */ import_react$9.createElement(MenuContext$3.Provider, { value: inheritableContext }, children);
 }
 //#endregion
@@ -126476,7 +126565,7 @@ var ResizableTextArea$1 = /* @__PURE__ */ import_react$9.forwardRef((props, ref)
 	const startResize = () => {
 		setResizeState(RESIZE_START$1);
 	};
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (needAutoSize) startResize();
 	}, [
 		value,
@@ -126484,7 +126573,7 @@ var ResizableTextArea$1 = /* @__PURE__ */ import_react$9.forwardRef((props, ref)
 		maxRows,
 		needAutoSize
 	]);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (resizeState === RESIZE_START$1) setResizeState(RESIZE_MEASURING$1);
 		else if (resizeState === RESIZE_MEASURING$1) {
 			const textareaStyles = calculateAutoSizeStyle$1(textareaRef.current, false, minRows, maxRows);
@@ -127627,7 +127716,7 @@ var FormItemInput$1 = (props) => {
 	}, [formContext]);
 	const extraRef = import_react$9.useRef(null);
 	const [extraHeight, setExtraHeight] = import_react$9.useState(0);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (extra && extraRef.current) setExtraHeight(extraRef.current.clientHeight);
 		else setExtraHeight(0);
 	}, [extra]);
@@ -127825,7 +127914,7 @@ function ItemHolder$1(props) {
 	const hasError = !!(hasHelp || errors.length || warnings.length);
 	const isOnScreen = !!itemRef.current && isVisible_default$1(itemRef.current);
 	const [marginBottom, setMarginBottom] = import_react$9.useState(null);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (hasError && itemRef.current) {
 			const itemStyle = getComputedStyle(itemRef.current);
 			setMarginBottom(Number.parseInt(itemStyle.marginBottom, 10));
@@ -128245,7 +128334,7 @@ var OTPInput$1 = /* @__PURE__ */ import_react$9.forwardRef((props, ref) => {
 function strToArr$1(str) {
 	return (str || "").split("");
 }
-var Separator$1 = (props) => {
+var Separator$2 = (props) => {
 	const { index, prefixCls, separator, className: semanticClassName, style: semanticStyle } = props;
 	const separatorNode = isFunction$4(separator) ? separator(index) : separator;
 	if (!separatorNode) return null;
@@ -128372,7 +128461,7 @@ var OTP$1 = /* @__PURE__ */ import_react$9.forwardRef((props, ref) => {
 			autoFocus: index === 0 && autoFocus,
 			onFocus: (event) => onInputFocus(event, index),
 			...inputSharedProps
-		}), index < length - 1 && /* @__PURE__ */ import_react$9.createElement(Separator$1, {
+		}), index < length - 1 && /* @__PURE__ */ import_react$9.createElement(Separator$2, {
 			separator,
 			index,
 			prefixCls,
@@ -130666,7 +130755,7 @@ function EllipsisMeasure(props) {
 	const [needEllipsis, setNeedEllipsis] = import_react$9.useState(STATUS_MEASURE_NONE);
 	const [ellipsisHeight, setEllipsisHeight] = import_react$9.useState(0);
 	const [parentWhiteSpace, setParentWhiteSpace] = import_react$9.useState(null);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (enableMeasure && width && nodeLen) setNeedEllipsis(STATUS_MEASURE_PREPARE);
 		else setNeedEllipsis(STATUS_MEASURE_NONE);
 	}, [
@@ -130676,7 +130765,7 @@ function EllipsisMeasure(props) {
 		enableMeasure,
 		nodeList
 	].concat(_toConsumableArray$14(measureDeps)));
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (needEllipsis === STATUS_MEASURE_PREPARE) {
 			setNeedEllipsis(STATUS_MEASURE_START);
 			setParentWhiteSpace(measureWhiteSpaceRef.current && getComputedStyle(measureWhiteSpaceRef.current).whiteSpace);
@@ -130693,7 +130782,7 @@ function EllipsisMeasure(props) {
 		}
 	}, [needEllipsis]);
 	const cutMidIndex = ellipsisCutIndex ? Math.ceil((ellipsisCutIndex[0] + ellipsisCutIndex[1]) / 2) : 0;
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		const [minIndex, maxIndex] = ellipsisCutIndex || [0, 0];
 		if (minIndex !== maxIndex) {
 			const isOverflow = (cutMidRef.current?.getHeight() || 0) > ellipsisHeight;
@@ -130809,7 +130898,7 @@ var Base = /* @__PURE__ */ import_react$9.forwardRef((props, ref) => {
 		setEditing(edit);
 	};
 	const prevEditing = usePrevious$1(editing);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (!editing && prevEditing) editIconRef.current?.focus();
 	}, [editing]);
 	const onEditClick = (e) => {
@@ -130848,7 +130937,7 @@ var Base = /* @__PURE__ */ import_react$9.forwardRef((props, ref) => {
 		enableEdit,
 		enableCopy
 	]);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		if (enableEllipsis && !needMeasureEllipsis) {
 			setIsLineClampSupport(isStyleSupport$1("webkitLineClamp"));
 			setIsTextOverflowSupport(isStyleSupport$1("textOverflow"));
@@ -130864,7 +130953,7 @@ var Base = /* @__PURE__ */ import_react$9.forwardRef((props, ref) => {
 		isTextOverflowSupport,
 		isLineClampSupport
 	]);
-	useLayoutEffect$6(() => {
+	useLayoutEffect$7(() => {
 		setCssEllipsis(canUseCssEllipsis && mergedEnableEllipsis);
 	}, [canUseCssEllipsis, mergedEnableEllipsis]);
 	const tooltipProps = useTooltipProps(ellipsisConfig.tooltip, editConfig.text, children);
@@ -131702,6 +131791,46 @@ var Minus = createLucideIcon("minus", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var MoveHorizontal = createLucideIcon("move-horizontal", [
+	["path", {
+		d: "m18 8 4 4-4 4",
+		key: "1ak13k"
+	}],
+	["path", {
+		d: "M2 12h20",
+		key: "9i4pu4"
+	}],
+	["path", {
+		d: "m6 8-4 4 4 4",
+		key: "15zrgr"
+	}]
+]);
+/**
+* @license lucide-react v1.17.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var MoveVertical = createLucideIcon("move-vertical", [
+	["path", {
+		d: "M12 2v20",
+		key: "t6zp3m"
+	}],
+	["path", {
+		d: "m8 18 4 4 4-4",
+		key: "bh5tu3"
+	}],
+	["path", {
+		d: "m8 6 4-4 4 4",
+		key: "ybng9g"
+	}]
+]);
+/**
+* @license lucide-react v1.17.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Plus = createLucideIcon("plus", [["path", {
 	d: "M5 12h14",
 	key: "1ays0h"
@@ -132377,41 +132506,340 @@ var useUIPreProcessor = ({ template, size, zoomLevel, maxZoom }) => {
 	return {
 		backgrounds,
 		pageSizes,
+		baseScale: scale,
 		scale: scale * zoomLevel,
 		error,
 		refresh
 	};
 };
-var useScrollPageCursor = ({ ref, pageSizes, scale, pageCursor, onChangePageCursor }) => {
+var ZOOM_RENDER_COMMIT_DELAY = 220;
+var WHEEL_ZOOM_SENSITIVITY = .004;
+var MAX_WHEEL_DELTA_PER_FRAME = 120;
+var TOUCH_ZOOM_SENSITIVITY = 1.8;
+var getTouchDistance = (touches) => {
+	const first = touches.item(0);
+	const second = touches.item(1);
+	if (!first || !second) return 0;
+	return Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY);
+};
+var getTouchCenter = (touches) => {
+	const first = touches.item(0);
+	const second = touches.item(1);
+	if (!first || !second) return null;
+	return {
+		clientX: (first.clientX + second.clientX) / 2,
+		clientY: (first.clientY + second.clientY) / 2
+	};
+};
+var getWheelZoomFactor = (event) => {
+	const deltaModeMultiplier = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 80 : 1;
+	const normalizedDelta = Math.max(-120, Math.min(MAX_WHEEL_DELTA_PER_FRAME, event.deltaY * deltaModeMultiplier));
+	return Math.exp(-normalizedDelta * WHEEL_ZOOM_SENSITIVITY);
+};
+var useZoom = ({ baseScale, maxZoom, pageCursor, pageSizes, containerRef, paperRefs, size, hasRulers = false, initialZoomLevel = 1, onZoomCommit }) => {
+	const [zoomLevel, setZoomLevelState] = (0, import_react$9.useState)(initialZoomLevel);
+	const [zoomMode, setZoomModeState] = (0, import_react$9.useState)("manual");
+	const [displayScale, setDisplayScale] = (0, import_react$9.useState)(0);
+	const [renderScale, setRenderScale] = (0, import_react$9.useState)(0);
+	const zoomLevelRef = (0, import_react$9.useRef)(zoomLevel);
+	const zoomModeRef = (0, import_react$9.useRef)(zoomMode);
+	const displayScaleRef = (0, import_react$9.useRef)(displayScale);
+	const baseScaleRef = (0, import_react$9.useRef)(baseScale);
+	const pendingAnchorRef = (0, import_react$9.useRef)(null);
+	const pendingCommitCallbackRef = (0, import_react$9.useRef)(false);
+	const renderCommitTimerRef = (0, import_react$9.useRef)(null);
+	const animationFrameRef = (0, import_react$9.useRef)(null);
+	const queuedGestureRef = (0, import_react$9.useRef)(null);
+	const touchGestureRef = (0, import_react$9.useRef)(null);
+	const zoomContainerReady = displayScale > 0;
+	(0, import_react$9.useEffect)(() => {
+		baseScaleRef.current = baseScale;
+	}, [baseScale]);
+	(0, import_react$9.useEffect)(() => {
+		zoomLevelRef.current = zoomLevel;
+	}, [zoomLevel]);
+	(0, import_react$9.useEffect)(() => {
+		zoomModeRef.current = zoomMode;
+	}, [zoomMode]);
+	(0, import_react$9.useEffect)(() => {
+		displayScaleRef.current = displayScale;
+	}, [displayScale]);
+	const getAnchor = (0, import_react$9.useCallback)((point) => {
+		const container = containerRef.current;
+		const paper = paperRefs.current[pageCursor];
+		if (!container || !paper) return null;
+		const containerRect = container.getBoundingClientRect();
+		return getZoomAnchor({
+			pageIndex: pageCursor,
+			paper,
+			clientX: point?.clientX ?? containerRect.left + containerRect.width / 2,
+			clientY: point?.clientY ?? containerRect.top + containerRect.height / 2,
+			scale: displayScaleRef.current
+		});
+	}, [
+		containerRef,
+		pageCursor,
+		paperRefs
+	]);
+	const markCommitted = (0, import_react$9.useCallback)(() => {
+		pendingCommitCallbackRef.current = true;
+	}, []);
+	const clearRenderCommitTimer = (0, import_react$9.useCallback)(() => {
+		if (renderCommitTimerRef.current) {
+			clearTimeout(renderCommitTimerRef.current);
+			renderCommitTimerRef.current = null;
+		}
+	}, []);
+	const commitRenderScale = (0, import_react$9.useCallback)(() => {
+		clearRenderCommitTimer();
+		const nextScale = displayScaleRef.current;
+		setRenderScale(nextScale);
+		markCommitted();
+	}, [clearRenderCommitTimer, markCommitted]);
+	const updateZoom = (0, import_react$9.useCallback)(({ nextZoomLevel, mode, anchor, commitRender }) => {
+		const nextZoom = clampZoomLevel(nextZoomLevel, maxZoom);
+		const nextDisplayScale = baseScaleRef.current > 0 ? baseScaleRef.current * nextZoom : 0;
+		pendingAnchorRef.current = anchor ?? null;
+		zoomLevelRef.current = nextZoom;
+		zoomModeRef.current = mode;
+		displayScaleRef.current = nextDisplayScale;
+		setZoomModeState(mode);
+		setZoomLevelState(nextZoom);
+		setDisplayScale(nextDisplayScale);
+		if (commitRender) {
+			clearRenderCommitTimer();
+			setRenderScale(nextDisplayScale);
+			markCommitted();
+			return;
+		}
+		clearRenderCommitTimer();
+		renderCommitTimerRef.current = setTimeout(() => {
+			setRenderScale(displayScaleRef.current);
+			markCommitted();
+		}, ZOOM_RENDER_COMMIT_DELAY);
+	}, [
+		clearRenderCommitTimer,
+		markCommitted,
+		maxZoom
+	]);
+	const queueGestureZoom = (0, import_react$9.useCallback)((nextZoomLevel, anchor) => {
+		queuedGestureRef.current = {
+			zoomLevel: nextZoomLevel,
+			anchor
+		};
+		if (animationFrameRef.current !== null) return;
+		animationFrameRef.current = window.requestAnimationFrame(() => {
+			animationFrameRef.current = null;
+			const queued = queuedGestureRef.current;
+			queuedGestureRef.current = null;
+			if (!queued) return;
+			updateZoom({
+				nextZoomLevel: queued.zoomLevel,
+				mode: "manual",
+				anchor: queued.anchor,
+				commitRender: false
+			});
+		});
+	}, [updateZoom]);
+	const setZoomLevel = (0, import_react$9.useCallback)((nextZoomLevel) => {
+		updateZoom({
+			nextZoomLevel,
+			mode: "manual",
+			anchor: getAnchor(),
+			commitRender: true
+		});
+	}, [getAnchor, updateZoom]);
+	const fitZoom = (0, import_react$9.useCallback)((mode) => {
+		updateZoom({
+			nextZoomLevel: getFitZoomLevel({
+				mode,
+				pageSize: pageSizes[pageCursor],
+				container: containerRef.current,
+				baseScale: baseScaleRef.current,
+				maxZoom,
+				hasRulers
+			}),
+			mode,
+			anchor: getAnchor(),
+			commitRender: true
+		});
+	}, [
+		containerRef,
+		getAnchor,
+		hasRulers,
+		maxZoom,
+		pageCursor,
+		pageSizes,
+		updateZoom
+	]);
+	(0, import_react$9.useEffect)(() => {
+		if (baseScale <= 0) {
+			setDisplayScale(0);
+			setRenderScale(0);
+			return;
+		}
+		const nextZoomLevel = zoomModeRef.current === "manual" ? clampZoomLevel(zoomLevelRef.current, maxZoom) : getFitZoomLevel({
+			mode: zoomModeRef.current,
+			pageSize: pageSizes[pageCursor],
+			container: containerRef.current,
+			baseScale,
+			maxZoom,
+			hasRulers
+		});
+		const nextDisplayScale = baseScale * nextZoomLevel;
+		zoomLevelRef.current = nextZoomLevel;
+		displayScaleRef.current = nextDisplayScale;
+		setZoomLevelState(nextZoomLevel);
+		setDisplayScale(nextDisplayScale);
+		setRenderScale(nextDisplayScale);
+		markCommitted();
+	}, [
+		baseScale,
+		containerRef,
+		hasRulers,
+		markCommitted,
+		maxZoom,
+		pageCursor,
+		pageSizes,
+		size.height,
+		size.width
+	]);
+	(0, import_react$9.useLayoutEffect)(() => {
+		const anchor = pendingAnchorRef.current;
+		if (anchor) {
+			restoreZoomAnchor({
+				container: containerRef.current,
+				paper: paperRefs.current[anchor.pageIndex],
+				anchor,
+				scale: displayScale
+			});
+			pendingAnchorRef.current = null;
+		}
+		if (pendingCommitCallbackRef.current && Math.abs(displayScale - renderScale) < Number.EPSILON) {
+			pendingCommitCallbackRef.current = false;
+			onZoomCommit?.();
+		}
+	}, [
+		containerRef,
+		displayScale,
+		onZoomCommit,
+		paperRefs,
+		renderScale
+	]);
+	(0, import_react$9.useEffect)(() => {
+		if (!zoomContainerReady) return void 0;
+		const node = containerRef.current;
+		if (!node) return void 0;
+		const onWheel = (event) => {
+			if (!event.ctrlKey) return;
+			event.preventDefault();
+			const anchor = getAnchor({
+				clientX: event.clientX,
+				clientY: event.clientY
+			});
+			queueGestureZoom(zoomLevelRef.current * getWheelZoomFactor(event), anchor);
+		};
+		const onTouchStart = (event) => {
+			if (event.touches.length !== 2) return;
+			event.preventDefault();
+			event.stopPropagation();
+			touchGestureRef.current = {
+				distance: getTouchDistance(event.touches),
+				zoomLevel: zoomLevelRef.current
+			};
+		};
+		const onTouchMove = (event) => {
+			if (event.touches.length !== 2 || !touchGestureRef.current) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const center = getTouchCenter(event.touches);
+			const distance = getTouchDistance(event.touches);
+			if (!center || distance <= 0 || touchGestureRef.current.distance <= 0) return;
+			const anchor = getAnchor(center);
+			const ratio = distance / touchGestureRef.current.distance;
+			const dampedRatio = Math.pow(ratio, TOUCH_ZOOM_SENSITIVITY);
+			queueGestureZoom(touchGestureRef.current.zoomLevel * dampedRatio, anchor);
+		};
+		const onTouchEnd = (event) => {
+			if (event.touches.length >= 2) return;
+			touchGestureRef.current = null;
+			commitRenderScale();
+		};
+		node.addEventListener("wheel", onWheel, { passive: false });
+		node.addEventListener("touchstart", onTouchStart, { passive: false });
+		node.addEventListener("touchmove", onTouchMove, { passive: false });
+		node.addEventListener("touchend", onTouchEnd);
+		node.addEventListener("touchcancel", onTouchEnd);
+		return () => {
+			node.removeEventListener("wheel", onWheel);
+			node.removeEventListener("touchstart", onTouchStart);
+			node.removeEventListener("touchmove", onTouchMove);
+			node.removeEventListener("touchend", onTouchEnd);
+			node.removeEventListener("touchcancel", onTouchEnd);
+		};
+	}, [
+		commitRenderScale,
+		containerRef,
+		getAnchor,
+		queueGestureZoom,
+		zoomContainerReady
+	]);
+	(0, import_react$9.useEffect)(() => () => {
+		clearRenderCommitTimer();
+		if (animationFrameRef.current !== null) window.cancelAnimationFrame(animationFrameRef.current);
+	}, [clearRenderCommitTimer]);
+	return {
+		displayScale,
+		renderScale,
+		zoomLevel,
+		zoomMode,
+		setZoomLevel,
+		fitWidth: () => fitZoom("fit-width"),
+		fitHeight: () => fitZoom("fit-height")
+	};
+};
+var getVisibleArea$1 = (containerRect, elementRect) => {
+	return Math.max(0, Math.min(containerRect.right, elementRect.right) - Math.max(containerRect.left, elementRect.left)) * Math.max(0, Math.min(containerRect.bottom, elementRect.bottom) - Math.max(containerRect.top, elementRect.top));
+};
+var getMostVisiblePageIndex = (container, paperRefs, pageCursor) => {
+	const containerRect = container.getBoundingClientRect();
+	let bestPageIndex = pageCursor;
+	let bestVisibleArea = 0;
+	paperRefs.current.forEach((paper, pageIndex) => {
+		if (!paper) return;
+		const visibleArea = getVisibleArea$1(containerRect, paper.getBoundingClientRect());
+		if (visibleArea > bestVisibleArea) {
+			bestVisibleArea = visibleArea;
+			bestPageIndex = pageIndex;
+		}
+	});
+	return bestVisibleArea > 0 ? bestPageIndex : pageCursor;
+};
+var useScrollPageCursor = ({ ref, paperRefs, pageSizes, scale, pageCursor, onChangePageCursor }) => {
 	const onScroll = (0, import_react$9.useCallback)(() => {
 		if (!pageSizes[0] || !ref.current) return;
-		const scroll = ref.current.scrollTop;
-		const { top } = ref.current.getBoundingClientRect();
-		const pageHeights = pageSizes.reduce((acc, cur, i) => {
-			let value = (cur.height * ZOOM + 30) * scale;
-			if (i === 0) value += top - value / 2;
-			else value += acc[i - 1];
-			return acc.concat(value);
-		}, []);
-		let _pageCursor = 0;
-		pageHeights.forEach((ph, i) => {
-			if (scroll > ph) _pageCursor = i + 1 >= pageHeights.length ? pageHeights.length - 1 : i + 1;
-		});
+		const _pageCursor = getMostVisiblePageIndex(ref.current, paperRefs, pageCursor);
 		if (_pageCursor !== pageCursor) onChangePageCursor(_pageCursor);
 	}, [
 		onChangePageCursor,
 		pageCursor,
 		pageSizes,
-		ref,
-		scale
+		paperRefs,
+		ref
 	]);
 	(0, import_react$9.useEffect)(() => {
 		const node = ref.current;
 		node?.addEventListener("scroll", onScroll);
+		const animationFrame = window.requestAnimationFrame(onScroll);
 		return () => {
+			window.cancelAnimationFrame(animationFrame);
 			node?.removeEventListener("scroll", onScroll);
 		};
-	}, [ref, onScroll]);
+	}, [
+		ref,
+		onScroll,
+		scale
+	]);
 };
 var useMountStatus = () => {
 	const [isMounted, setIsMounted] = (0, import_react$9.useState)(false);
@@ -134901,7 +135329,7 @@ function updateCSS(css, key) {
 }
 //#endregion
 //#region ../../node_modules/rc-util/es/hooks/useMemo.js
-function useMemo$30(getValue, condition, shouldUpdate) {
+function useMemo$31(getValue, condition, shouldUpdate) {
 	var cacheRef = import_react$9.useRef({});
 	if (!("value" in cacheRef.current) || shouldUpdate(cacheRef.current.condition, condition)) {
 		cacheRef.current.value = getValue();
@@ -136156,7 +136584,7 @@ var composeRef = function composeRef() {
 };
 var useComposeRef = function useComposeRef() {
 	for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) refs[_key2] = arguments[_key2];
-	return useMemo$30(function() {
+	return useMemo$31(function() {
 		return composeRef.apply(void 0, refs);
 	}, refs, function(prev, next) {
 		return prev.length !== next.length || prev.every(function(ref, i) {
@@ -138868,7 +139296,7 @@ function useTheme(theme, parentTheme, config) {
 		cssVar: parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.cssVar
 	}) : parentTheme;
 	const themeKey = useThemeKey();
-	return useMemo$30(() => {
+	return useMemo$31(() => {
 		var _a, _b;
 		if (!theme) return parentTheme;
 		const mergedComponents = Object.assign({}, parentThemeConfig.components);
@@ -139683,7 +140111,7 @@ var ProviderChildren = (props) => {
 		if (propValue) config[propName] = propValue;
 	});
 	if (typeof autoInsertSpaceInButton !== "undefined") config.button = Object.assign({ autoInsertSpace: autoInsertSpaceInButton }, config.button);
-	const memoedConfig = useMemo$30(() => config, config, (prevConfig, currentConfig) => {
+	const memoedConfig = useMemo$31(() => config, config, (prevConfig, currentConfig) => {
 		const prevKeys = Object.keys(prevConfig);
 		const currentKeys = Object.keys(currentConfig);
 		return prevKeys.length !== currentKeys.length || prevKeys.some((key) => prevConfig[key] !== currentConfig[key]);
@@ -163188,7 +163616,7 @@ var __rest$44 = function(s, e) {
 function strToArr(str) {
 	return (str || "").split("");
 }
-var Separator = (props) => {
+var Separator$1 = (props) => {
 	const { index, prefixCls, separator } = props;
 	const separatorNode = typeof separator === "function" ? separator(index) : separator;
 	if (!separatorNode) return null;
@@ -163310,7 +163738,7 @@ var OTP = /* @__PURE__ */ import_react$9.forwardRef((props, ref) => {
 			value: singleValue,
 			onActiveChange: onInputActiveChange,
 			autoFocus: index === 0 && autoFocus
-		}, inputSharedProps)), index < length - 1 && /* @__PURE__ */ import_react$9.createElement(Separator, {
+		}, inputSharedProps)), index < length - 1 && /* @__PURE__ */ import_react$9.createElement(Separator$1, {
 			separator,
 			index,
 			prefixCls
@@ -168604,7 +169032,7 @@ var RefOptionList$1 = /* @__PURE__ */ import_react$9.forwardRef(function OptionL
 	var _useBaseProps = useBaseProps(), prefixCls = _useBaseProps.prefixCls, id = _useBaseProps.id, open = _useBaseProps.open, multiple = _useBaseProps.multiple, mode = _useBaseProps.mode, searchValue = _useBaseProps.searchValue, toggleOpen = _useBaseProps.toggleOpen, notFoundContent = _useBaseProps.notFoundContent, onPopupScroll = _useBaseProps.onPopupScroll;
 	var _React$useContext = import_react$9.useContext(SelectContext), maxCount = _React$useContext.maxCount, flattenOptions = _React$useContext.flattenOptions, onActiveValue = _React$useContext.onActiveValue, defaultActiveFirstOption = _React$useContext.defaultActiveFirstOption, onSelect = _React$useContext.onSelect, menuItemSelectedIcon = _React$useContext.menuItemSelectedIcon, rawValues = _React$useContext.rawValues, fieldNames = _React$useContext.fieldNames, virtual = _React$useContext.virtual, direction = _React$useContext.direction, listHeight = _React$useContext.listHeight, listItemHeight = _React$useContext.listItemHeight, optionRender = _React$useContext.optionRender;
 	var itemPrefixCls = "".concat(prefixCls, "-item");
-	var memoFlattenOptions = useMemo$30(function() {
+	var memoFlattenOptions = useMemo$31(function() {
 		return flattenOptions;
 	}, [open, flattenOptions], function(prev, next) {
 		return next[0] && prev[1] !== next[1];
@@ -174004,7 +174432,7 @@ var RefOptionList = /* @__PURE__ */ import_react$9.forwardRef(function OptionLis
 	var _React$useContext = import_react$9.useContext(TreeSelectContext), virtual = _React$useContext.virtual, listHeight = _React$useContext.listHeight, listItemHeight = _React$useContext.listItemHeight, listItemScrollOffset = _React$useContext.listItemScrollOffset, treeData = _React$useContext.treeData, fieldNames = _React$useContext.fieldNames, onSelect = _React$useContext.onSelect, dropdownMatchSelectWidth = _React$useContext.dropdownMatchSelectWidth, treeExpandAction = _React$useContext.treeExpandAction, treeTitleRender = _React$useContext.treeTitleRender, onPopupScroll = _React$useContext.onPopupScroll, leftMaxCount = _React$useContext.leftMaxCount, leafCountOnly = _React$useContext.leafCountOnly, valueEntities = _React$useContext.valueEntities;
 	var _React$useContext2 = import_react$9.useContext(LegacySelectContext), checkable = _React$useContext2.checkable, checkedKeys = _React$useContext2.checkedKeys, halfCheckedKeys = _React$useContext2.halfCheckedKeys, treeExpandedKeys = _React$useContext2.treeExpandedKeys, treeDefaultExpandAll = _React$useContext2.treeDefaultExpandAll, treeDefaultExpandedKeys = _React$useContext2.treeDefaultExpandedKeys, onTreeExpand = _React$useContext2.onTreeExpand, treeIcon = _React$useContext2.treeIcon, showTreeIcon = _React$useContext2.showTreeIcon, switcherIcon = _React$useContext2.switcherIcon, treeLine = _React$useContext2.treeLine, treeNodeFilterProp = _React$useContext2.treeNodeFilterProp, loadData = _React$useContext2.loadData, treeLoadedKeys = _React$useContext2.treeLoadedKeys, treeMotion = _React$useContext2.treeMotion, onTreeLoad = _React$useContext2.onTreeLoad, keyEntities = _React$useContext2.keyEntities;
 	var treeRef = import_react$9.useRef();
-	var memoTreeData = useMemo$30(function() {
+	var memoTreeData = useMemo$31(function() {
 		return treeData;
 	}, [open, treeData], function(prev, next) {
 		return next[0] && prev[1] !== next[1];
@@ -174149,7 +174577,7 @@ var RefOptionList = /* @__PURE__ */ import_react$9.forwardRef(function OptionLis
 			onKeyUp: function onKeyUp() {}
 		};
 	});
-	var syncLoadData = useMemo$30(function() {
+	var syncLoadData = useMemo$31(function() {
 		return searchValue ? false : true;
 	}, [searchValue, treeExpandedKeys || expandedKeys], function(_ref2, _ref3) {
 		var preSearchValue = _slicedToArray$16(_ref2, 1)[0];
@@ -199023,7 +199451,7 @@ function mergeProps(origin, target) {
 function InheritableContextProvider(_ref) {
 	var children = _ref.children, locked = _ref.locked, restProps = _objectWithoutProperties$2(_ref, _excluded$18);
 	var context = import_react$9.useContext(MenuContext$1);
-	var inheritableContext = useMemo$30(function() {
+	var inheritableContext = useMemo$31(function() {
 		return mergeProps(context, restProps);
 	}, [context, restProps], function(prev, next) {
 		return !locked && (prev[0] !== next[0] || !isEqual(prev[1], next[1], true));
@@ -204227,7 +204655,7 @@ function isRenderCell(data) {
 }
 function useCellRender(record, dataIndex, renderIndex, children, render, shouldCellUpdate) {
 	var perfRecord = import_react$9.useContext(PerfContext);
-	return useMemo$30(function() {
+	return useMemo$31(function() {
 		if (validateValue(children)) return [children];
 		var value = get$1(record, dataIndex === null || dataIndex === void 0 || dataIndex === "" ? [] : Array.isArray(dataIndex) ? dataIndex : [dataIndex]);
 		var returnChildNode = value;
@@ -205397,7 +205825,7 @@ function useFixedInfo(flattenColumns, stickyOffsets, direction) {
 	var fixedInfoList = flattenColumns.map(function(_, colIndex) {
 		return getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction);
 	});
-	return useMemo$30(function() {
+	return useMemo$31(function() {
 		return fixedInfoList;
 	}, [fixedInfoList], function(prev, next) {
 		return !isEqual(prev, next);
@@ -214385,7 +214813,7 @@ function _regeneratorRuntime() {
 //#region ../../node_modules/form-render/es/index.js
 var es_default = withProvider(FormCore, widgets_exports);
 //#endregion
-//#region ../schemas/dist/helper-DvnX6Fyq.js
+//#region ../schemas/dist/helper-CbU88kUO.js
 var substituteVariables = (text, variablesIn, valueMapper = (value) => value) => {
 	if (!text) return "";
 	let substitutedText = text;
@@ -214421,7 +214849,7 @@ var validateVariables = (value, schema) => {
 	return true;
 };
 //#endregion
-//#region ../schemas/dist/dynamicTemplate-B5BkzQ4n.js
+//#region ../schemas/dist/dynamicTemplate-DILLiIp6.js
 var getDynamicLayoutForMultiVariableText = async (value, args) => {
 	if (args.schema.type !== "multiVariableText") return { heights: [args.schema.height] };
 	const schema = args.schema;
@@ -235466,7 +235894,7 @@ var DeleteButton = ({ activeElements: aes }) => {
 	});
 };
 var Canvas = (props, ref) => {
-	const { basePdf, pageCursor, scale, backgrounds, pageSizes, size, activeElements, schemasList, hoveringSchemaId, onEdit, changeSchemas, removeSchemas, onChangeHoveringSchemaId, paperRefs, sidebarOpen } = props;
+	const { basePdf, pageCursor, scale, renderScale, backgrounds, pageSizes, size, activeElements, schemasList, hoveringSchemaId, onEdit, changeSchemas, removeSchemas, onChangeHoveringSchemaId, paperRefs, sidebarOpen } = props;
 	const { token } = theme_default.useToken();
 	const pluginsRegistry = (0, import_react$9.useContext)(PluginsRegistry);
 	const verticalGuides = (0, import_react$9.useRef)([]);
@@ -235503,6 +235931,9 @@ var Canvas = (props, ref) => {
 		schemasList,
 		prevSchemas
 	]);
+	(0, import_react$9.useEffect)(() => {
+		moveable.current?.updateRect();
+	}, [renderScale]);
 	const onDrag = ({ target, top, left }) => {
 		const { width: _width, height: _height } = target.style;
 		const targetWidth = fmt(_width);
@@ -235732,7 +236163,7 @@ var Canvas = (props, ref) => {
 						basePdf
 					},
 					input: Object.fromEntries(schemasList.flat().map(({ name, content = "" }) => [name, content])),
-					scale,
+					scale: renderScale,
 					totalPages: schemasList.length,
 					currentPage: index + 1
 				}),
@@ -235804,7 +236235,7 @@ var Canvas = (props, ref) => {
 					} : void 0,
 					stopEditing: () => setEditing(false),
 					outline: `1px ${hoveringSchemaId === schema.id ? "solid" : "dashed"} ${schema.readOnly && hoveringSchemaId !== schema.id ? "transparent" : token.colorPrimary}`,
-					scale
+					scale: renderScale
 				}, schema.id);
 			}
 		})]
@@ -235981,42 +236412,74 @@ var ErrorScreen = ({ size, error }) => {
 //#endregion
 //#region src/components/CtlBar.tsx
 var { Text: Text$1 } = Typography;
-var Zoom = ({ zoomLevel, setZoomLevel, style }) => {
+var ToolbarButton = ({ className, label, disabled, active, onClick, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip$2, {
+	title: label,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(button_default$1, {
+		className,
+		type: "text",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		style: active ? { backgroundColor: "rgba(255, 255, 255, 0.18)" } : void 0,
+		children
+	})
+});
+var Separator = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+	width: 1,
+	height: 24,
+	margin: "0 6px",
+	backgroundColor: color,
+	opacity: .45
+} });
+var Zoom = ({ zoomLevel, setZoomLevel, zoomMode, fitWidth, fitHeight, style, labels }) => {
 	const zoomStep = .25;
 	const maxZoom = useMaxZoom();
-	const minZoom = .25;
 	const nextZoomOut = zoomLevel - zoomStep;
 	const nextZoomIn = zoomLevel + zoomStep;
+	const iconProps = {
+		size: 16,
+		color: style.textStyle.color
+	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		style: {
 			display: "flex",
 			alignItems: "center"
 		},
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(button_default$1, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarButton, {
 				className: UI_CLASSNAME + "zoom-out",
-				type: "text",
-				disabled: minZoom >= nextZoomOut,
+				label: labels.zoomOut,
+				disabled: zoomLevel <= MIN_ZOOM,
 				onClick: () => setZoomLevel(nextZoomOut),
-				icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, {
-					size: 16,
-					color: style.textStyle.color
-				})
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, { ...iconProps })
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text$1, {
 				strong: true,
 				style: style.textStyle,
 				children: [Math.round(zoomLevel * 100), "%"]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(button_default$1, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarButton, {
 				className: UI_CLASSNAME + "zoom-in",
-				type: "text",
-				disabled: maxZoom < nextZoomIn,
+				label: labels.zoomIn,
+				disabled: maxZoom <= zoomLevel,
 				onClick: () => setZoomLevel(nextZoomIn),
-				icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, {
-					size: 16,
-					color: style.textStyle.color
-				})
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { ...iconProps })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator, { color: style.textStyle.color }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarButton, {
+				className: UI_CLASSNAME + "fit-width",
+				label: labels.fitWidth,
+				active: zoomMode === "fit-width",
+				onClick: fitWidth,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MoveHorizontal, { ...iconProps })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarButton, {
+				className: UI_CLASSNAME + "fit-height",
+				label: labels.fitHeight,
+				active: zoomMode === "fit-height",
+				onClick: fitHeight,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MoveVertical, { ...iconProps })
 			})
 		]
 	});
@@ -236077,7 +236540,7 @@ var ContextMenu = ({ items, style }) => /* @__PURE__ */ (0, import_jsx_runtime.j
 var CtlBar = (props) => {
 	const { token } = theme_default.useToken();
 	const i18n = (0, import_react$9.useContext)(I18nContext);
-	const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel, addPageAfter, removePage } = props;
+	const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel, zoomMode, fitWidth, fitHeight, addPageAfter, removePage } = props;
 	const contextMenuItems = [];
 	if (addPageAfter) contextMenuItems.push({
 		key: "1",
@@ -236093,9 +236556,6 @@ var CtlBar = (props) => {
 			children: i18n("removePage")
 		})
 	});
-	const barWidth = 300;
-	const contextMenuWidth = contextMenuItems.length > 0 ? 50 : 0;
-	const width = (pageNum > 1 ? barWidth : barWidth / 2) + contextMenuWidth;
 	const textStyle = {
 		color: token.colorWhite,
 		fontSize: token.fontSize,
@@ -236106,23 +236566,26 @@ var CtlBar = (props) => {
 			position: "absolute",
 			top: "auto",
 			bottom: "6%",
-			width: size.width
+			width: size.width,
+			display: "flex",
+			justifyContent: "center",
+			pointerEvents: "none"
 		},
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: UI_CLASSNAME + "control-bar",
 			style: {
-				display: "flex",
+				display: "inline-flex",
 				alignItems: "center",
-				justifyContent: "space-evenly",
+				justifyContent: "center",
 				position: "relative",
 				zIndex: 1,
-				left: `calc(50% - ${width / 2}px)`,
-				width,
 				height: 40,
 				boxSizing: "border-box",
 				padding: token.paddingSM,
+				gap: token.marginXS,
 				borderRadius: token.borderRadius,
-				backgroundColor: token.colorBgMask
+				backgroundColor: token.colorBgMask,
+				pointerEvents: "auto"
 			},
 			children: [
 				pageNum > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
@@ -236139,7 +236602,16 @@ var CtlBar = (props) => {
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zoom, {
 						style: { textStyle },
 						zoomLevel,
-						setZoomLevel
+						setZoomLevel,
+						zoomMode,
+						fitWidth,
+						fitHeight,
+						labels: {
+							zoomIn: i18n("zoomIn"),
+							zoomOut: i18n("zoomOut"),
+							fitWidth: i18n("fitWidth"),
+							fitHeight: i18n("fitHeight")
+						}
 					})
 				}),
 				contextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextMenu, {
@@ -236175,16 +236647,36 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 	const [activeElements, setActiveElements] = (0, import_react$9.useState)([]);
 	const [schemasList, setSchemasList] = (0, import_react$9.useState)([[]]);
 	const [pageCursor, setPageCursor] = (0, import_react$9.useState)(0);
-	const [zoomLevel, setZoomLevel] = (0, import_react$9.useState)(options.zoomLevel ?? 1);
 	const [sidebarOpen, setSidebarOpen] = (0, import_react$9.useState)(options.sidebarOpen ?? true);
 	const [canvasHeight, setCanvasHeight] = (0, import_react$9.useState)(0);
 	const [prevTemplate, setPrevTemplate] = (0, import_react$9.useState)(null);
-	const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
+	const canvasWidth = size.width - 45;
+	const sizeExcSidebars = (0, import_react$9.useMemo)(() => ({
+		width: sidebarOpen ? canvasWidth - 400 : canvasWidth,
+		height: size.height
+	}), [
+		canvasWidth,
+		sidebarOpen,
+		size.height
+	]);
+	const { backgrounds, pageSizes, baseScale, error, refresh } = useUIPreProcessor({
 		template,
-		size,
-		zoomLevel,
+		size: sizeExcSidebars,
+		zoomLevel: 1,
 		maxZoom
 	});
+	const { displayScale, renderScale, zoomLevel, zoomMode, setZoomLevel, fitWidth, fitHeight } = useZoom({
+		baseScale,
+		maxZoom,
+		pageCursor,
+		pageSizes,
+		containerRef: canvasRef,
+		paperRefs,
+		size: sizeExcSidebars,
+		hasRulers: true,
+		initialZoomLevel: options.zoomLevel ?? 1
+	});
+	const previousOptionsZoomLevelRef = (0, import_react$9.useRef)(options.zoomLevel);
 	const getElementsByIds = (ids) => ids.map((id) => document.getElementById(id)).filter((element) => element instanceof HTMLElement);
 	const onEdit = (targets) => {
 		setActiveElements(targets.filter((target) => target instanceof HTMLElement));
@@ -236210,7 +236702,7 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 		if (targetPageIndex !== pageCursor) {
 			setPageCursor(targetPageIndex);
 			onPageCursorChange(targetPageIndex, schemasList.length);
-			if (options.scroll !== false && canvasRef.current) canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, targetPageIndex, scale);
+			if (options.scroll !== false && canvasRef.current) canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, targetPageIndex, displayScale);
 			setTimeout(editSelectedSchemas);
 			return;
 		}
@@ -236218,7 +236710,7 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 	}, [
 		pageCursor,
 		pageSizes,
-		scale,
+		displayScale,
 		schemasList,
 		onPageCursorChange
 	]);
@@ -236243,15 +236735,18 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 		setHoveringSchemaId(null);
 	};
 	(0, import_react$9.useEffect)(() => {
+		if (previousOptionsZoomLevelRef.current === options.zoomLevel) return;
+		previousOptionsZoomLevelRef.current = options.zoomLevel;
 		if (typeof options.zoomLevel === "number") setZoomLevel(options.zoomLevel);
-	}, [options.zoomLevel]);
+	}, [options.zoomLevel, setZoomLevel]);
 	(0, import_react$9.useEffect)(() => {
 		if (typeof options.sidebarOpen === "boolean") setSidebarOpen(options.sidebarOpen);
 	}, [options.sidebarOpen]);
 	useScrollPageCursor({
 		ref: canvasRef,
+		paperRefs,
 		pageSizes,
-		scale,
+		scale: displayScale,
 		pageCursor,
 		onChangePageCursor: (p) => {
 			setPageCursor(p);
@@ -236269,7 +236764,7 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 			observer.observe(canvasRef.current);
 			return () => observer.disconnect();
 		}
-	}, [scale]);
+	}, [displayScale]);
 	const commitSchemas = (0, import_react$9.useCallback)((newSchemas) => {
 		future.current = [];
 		past.current.push(cloneDeep$1(schemasList[pageCursor]));
@@ -236337,12 +236832,12 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 		} else setPageCursor((prev) => {
 			const clamped = Math.min(prev, sl.length - 1);
 			if (clamped !== prev && canvasRef.current) canvasRef.current.scroll({
-				top: getPagesScrollTopByIndex(pageSizes, clamped, scale),
+				top: getPagesScrollTopByIndex(pageSizes, clamped, displayScale),
 				behavior: "smooth"
 			});
 			return clamped;
 		});
-	}, [pageSizes, scale]);
+	}, [pageSizes, displayScale]);
 	const addSchema = (defaultSchema) => {
 		const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf) ? template.basePdf.padding : [
 			0,
@@ -236393,7 +236888,7 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 		refresh(newTemplate);
 		onPageCursorChange(newPageCursor, sl.length);
 		setTimeout(() => {
-			if (canvasRef.current) canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale);
+			if (canvasRef.current) canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, displayScale);
 		}, 0);
 	};
 	const handleRemovePage = () => {
@@ -236412,11 +236907,6 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 		setPrevTemplate(template);
 		updateTemplate(template, true);
 	}
-	const canvasWidth = size.width - 45;
-	const sizeExcSidebars = {
-		width: sidebarOpen ? canvasWidth - 400 : canvasWidth,
-		height: size.height
-	};
 	if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorScreen, {
 		size,
 		error
@@ -236427,7 +236917,7 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 	} : {};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root_default, {
 		size,
-		scale,
+		scale: displayScale,
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DndContext, {
 			onDragEnd: (event) => {
 				if (!event.active) return;
@@ -236435,10 +236925,10 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 				const pageRect = paperRefs.current[pageCursor].getBoundingClientRect();
 				const dragStartLeft = active.rect.current.initial?.left || 0;
 				const dragStartTop = active.rect.current.initial?.top || 0;
-				const canvasLeftOffsetFromPageCorner = pageRect.left - dragStartLeft + scaleDragPosAdjustment(20, scale);
+				const canvasLeftOffsetFromPageCorner = pageRect.left - dragStartLeft + scaleDragPosAdjustment(20, displayScale);
 				const canvasTopOffsetFromPageCorner = pageRect.top - dragStartTop;
-				const moveY = (event.delta.y - canvasTopOffsetFromPageCorner) / scale;
-				const moveX = (event.delta.x - canvasLeftOffsetFromPageCorner) / scale;
+				const moveY = (event.delta.y - canvasTopOffsetFromPageCorner) / displayScale;
+				const moveX = (event.delta.x - canvasLeftOffsetFromPageCorner) / displayScale;
 				const position = {
 					x: round$2(px2mm(Math.max(0, moveX)), 2),
 					y: round$2(px2mm(Math.max(0, moveY)), 2)
@@ -236451,7 +236941,7 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 			onDragStart: onEditEnd,
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftSidebar, {
 				height: canvasHeight,
-				scale,
+				scale: displayScale,
 				basePdf: template.basePdf
 			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				style: {
@@ -236466,13 +236956,16 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 						pageNum: schemasList.length,
 						setPageCursor: (p) => {
 							if (!canvasRef.current) return;
-							canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+							canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, displayScale);
 							setPageCursor(p);
 							onPageCursorChange(p, schemasList.length);
 							onEditEnd();
 						},
 						zoomLevel,
 						setZoomLevel,
+						zoomMode,
+						fitWidth,
+						fitHeight,
 						...pageManipulation
 					}),
 					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sidebar, {
@@ -236504,7 +236997,8 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 						onChangeHoveringSchemaId,
 						height: size.height - 30 * ZOOM,
 						pageCursor,
-						scale,
+						scale: displayScale,
+						renderScale,
 						size: sizeExcSidebars,
 						pageSizes,
 						backgrounds,
@@ -236669,7 +237163,7 @@ var Designer = class extends BaseUIClass {
 	}
 };
 //#endregion
-//#region ../schemas/dist/dynamicTemplate-DFzbqkhF.js
+//#region ../schemas/dist/dynamicTemplate-C4UKzQbP.js
 var normalizeListItems = (value) => {
 	if (Array.isArray(value)) return value.map((item) => String(item));
 	if (typeof value !== "string") return value == null ? [] : [String(value)];
@@ -236915,14 +237409,24 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 	const paperRefs = (0, import_react$9.useRef)([]);
 	const [unitCursor, setUnitCursor] = (0, import_react$9.useState)(0);
 	const [pageCursor, setPageCursor] = (0, import_react$9.useState)(0);
-	const [zoomLevel, setZoomLevel] = (0, import_react$9.useState)(options.zoomLevel ?? 1);
 	const [schemasList, setSchemasList] = (0, import_react$9.useState)([[]]);
-	const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
+	const { backgrounds, pageSizes, baseScale, error, refresh } = useUIPreProcessor({
 		template,
 		size,
-		zoomLevel,
+		zoomLevel: 1,
 		maxZoom
 	});
+	const { displayScale, renderScale, zoomLevel, zoomMode, setZoomLevel, fitWidth, fitHeight } = useZoom({
+		baseScale,
+		maxZoom,
+		pageCursor,
+		pageSizes,
+		containerRef,
+		paperRefs,
+		size,
+		initialZoomLevel: options.zoomLevel ?? 1
+	});
+	const previousOptionsZoomLevelRef = (0, import_react$9.useRef)(options.zoomLevel);
 	const isForm = Boolean(onChangeInput);
 	const input = inputs[unitCursor];
 	const latestFontRef = (0, import_react$9.useRef)(font);
@@ -236961,8 +237465,10 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 		}).catch((err) => console.error(`[@pdfme/ui] `, err));
 	}, []);
 	(0, import_react$9.useEffect)(() => {
+		if (previousOptionsZoomLevelRef.current === options.zoomLevel) return;
+		previousOptionsZoomLevelRef.current = options.zoomLevel;
 		if (typeof options.zoomLevel === "number") setZoomLevel(options.zoomLevel);
-	}, [options.zoomLevel]);
+	}, [options.zoomLevel, setZoomLevel]);
 	(0, import_react$9.useEffect)(() => {
 		if (unitCursor > inputs.length - 1) {
 			setUnitCursor(inputs.length - 1);
@@ -236978,8 +237484,9 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 	]);
 	useScrollPageCursor({
 		ref: containerRef,
+		paperRefs,
 		pageSizes,
-		scale,
+		scale: displayScale,
 		pageCursor,
 		onChangePageCursor: (p) => {
 			setPageCursor(p);
@@ -237042,7 +237549,7 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Root_default, {
 		size,
-		scale,
+		scale: displayScale,
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CtlBar, {
 				size,
@@ -237050,7 +237557,7 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 				pageNum: schemasList.length,
 				setPageCursor: (p) => {
 					if (!containerRef.current) return;
-					containerRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+					containerRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, displayScale);
 					setPageCursor(p);
 					if (onPageChange) onPageChange({
 						currentPage: p,
@@ -237058,7 +237565,10 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 					});
 				},
 				zoomLevel,
-				setZoomLevel
+				setZoomLevel,
+				zoomMode,
+				fitWidth,
+				fitHeight
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnitPager, {
 				size,
@@ -237075,7 +237585,7 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 				},
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Paper, {
 					paperRefs,
-					scale,
+					scale: displayScale,
 					size,
 					schemasList,
 					pageSizes,
@@ -237102,12 +237612,12 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 								handleOnChangeRenderer(Array.isArray(arg) ? arg : [arg], schema);
 							},
 							outline: isForm && !schema.readOnly ? `1px dashed ${token.colorPrimary}` : "transparent",
-							scale
+							scale: renderScale
 						}, schema.id);
 					},
 					renderPaper: ({ index }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StaticSchema, {
 						template,
-						scale,
+						scale: renderScale,
 						input,
 						totalPages: schemasList.length,
 						currentPage: index + 1