@pdfme/ui 6.1.13-dev.1 → 6.1.13-dev.17

package/dist/class.d.ts

@@ -12,7 +12,7 @@ export declare abstract class BaseUIClass {
     private readonly setSize;
     resizeObserver: ResizeObserver;
     constructor(props: UIProps);
-    protected getLang(): "ar" | "de" | "en" | "es" | "fr" | "it" | "ja" | "ko" | "pl" | "th" | "zh" | "zh-TW";
+    protected getLang(): "ar" | "de" | "en" | "es" | "fr" | "it" | "ja" | "ko" | "pl" | "th" | "tr" | "zh" | "zh-TW";
     protected getFont(): Record<string, {
         data: string | ArrayBuffer | Uint8Array<ArrayBuffer>;
         fallback?: boolean | undefined;

package/dist/constants.d.ts

@@ -7,5 +7,6 @@ export declare const LEFT_SIDEBAR_WIDTH = 45;
 export declare const RIGHT_SIDEBAR_WIDTH = 400;
 export declare const BACKGROUND_COLOR = "rgb(74, 74, 74)";
 export declare const DEFAULT_MAX_ZOOM = 2;
+export declare const PAGE_SWITCH_REMAINING_RATIO = 0.25;
 export declare const DESIGNER_CLASSNAME = "pdfme-designer-";
 export declare const UI_CLASSNAME = "pdfme-ui-";

package/dist/containerSize.d.ts

@@ -0,0 +1,11 @@
+import type { Size } from '@pdfme/common';
+export type ViewportSize = {
+    height: number;
+    width: number;
+};
+export type ContainerBox = {
+    clientHeight: number;
+    clientWidth: number;
+    getBoundingClientRect: () => Pick<DOMRect, 'bottom' | 'left' | 'right' | 'top'>;
+};
+export declare const measureUiContainerSize: (container: ContainerBox, viewport: ViewportSize) => Size;

package/dist/helper.d.ts

@@ -1,5 +1,16 @@
 import { Template, BasePdf, SchemaForUI, Size, PluginRegistry } from '@pdfme/common';
 export declare const uuid: () => string;
+/**
+ * Assigns runtime UI ids that stay stable for a Designer/Viewer/Form session.
+ * Caller/template ids are ignored: Schema.passthrough() can carry values that
+ * break `#text-{id}` querySelector (e.g. `foo[`). Save paths still strip ids.
+ */
+export declare const stabilizeSchemaIds: <T extends {
+    name: string;
+    id?: string;
+}>(schemas: T[], idMap: Map<string, string>) => (T & {
+    id: string;
+})[];
 export declare const debounce: <T extends (...args: unknown[]) => unknown>(cb: T, wait?: number) => T;
 export declare const round: (number: number, precision: number) => number;
 export declare const flatten: <T>(arr: T[][]) => T[];
@@ -55,6 +66,12 @@ export declare const moveCommandToChangeSchemasArg: (props: {
     schemaId: string;
 }[];
 export declare const getPagesScrollTopByIndex: (pageSizes: Size[], index: number, scale: number) => number;
+export declare const getVisibleOverlap: (containerRect: DOMRect, elementRect: DOMRect) => {
+    width: number;
+    height: number;
+    area: number;
+};
+export declare const getStickyScrollPageIndex: (container: HTMLElement, papers: Array<HTMLElement | null | undefined>, pageCursor: number) => number;
 export type ZoomMode = 'manual' | 'fit-width' | 'fit-height';
 export type ZoomAnchor = {
     pageIndex: number;

package/dist/index.js

@@ -45375,6 +45375,7 @@ var Lang = _enum([
 	"ko",
 	"ar",
 	"th",
+	"tr",
 	"pl",
 	"it",
 	"de",
@@ -46151,9 +46152,22 @@ var replacePlaceholders = (arg) => {
 var EPSILON = .01;
 /** Calculate the content height of a page (drawable area excluding padding) */
 var getContentHeight = (basePdf) => basePdf.height - basePdf.padding[0] - basePdf.padding[2];
+/**
+* Resolve a readOnly table body.
+* Uses input[schema.name] when present (array or JSON string) and never runs
+* replacePlaceholders. Falls back to schema.content (Designer sample).
+*/
+var getReadOnlyTableValue = (schema, input) => {
+	if (input && Object.prototype.hasOwnProperty.call(input, schema.name)) {
+		const value = input[schema.name];
+		if (value !== void 0 && value !== null) return typeof value === "string" ? value : JSON.stringify(value);
+	}
+	return schema.content || "";
+};
 /** Get the input value for a schema */
 var getSchemaValue = (schema, input, schemas) => {
 	if (!schema.readOnly) return input?.[schema.name] || "";
+	if (schema.type === "table") return getReadOnlyTableValue(schema, input);
 	if (schema.type !== "text" && schema.type !== "multiVariableText") return schema.content || "";
 	return replacePlaceholders({
 		content: schema.content || "",
@@ -56104,9 +56118,29 @@ var import_client = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
 var DESTROYED_ERR_MSG = "[@pdfme/ui] this instance is already destroyed";
 var SELECTABLE_CLASSNAME = "selectable";
 var BACKGROUND_COLOR = "rgb(74, 74, 74)";
+var PAGE_SWITCH_REMAINING_RATIO = .25;
 var DESIGNER_CLASSNAME = "pdfme-designer-";
 var UI_CLASSNAME = "pdfme-ui-";
 //#endregion
+//#region src/containerSize.ts
+var visibleIntersection = (start, end, viewportSize) => Math.max(0, Math.min(end, viewportSize) - Math.max(start, 0));
+var capOverflowToViewport = (layout, visible, viewportSize) => layout > viewportSize ? Math.min(layout, visible) : layout;
+var measureUiContainerSize = (container, viewport) => {
+	const layoutWidth = container.clientWidth || viewport.width;
+	const layoutHeight = container.clientHeight || viewport.height;
+	const rect = container.getBoundingClientRect();
+	const visibleWidth = visibleIntersection(rect.left, rect.right, viewport.width);
+	const visibleHeight = visibleIntersection(rect.top, rect.bottom, viewport.height);
+	if (visibleWidth === 0 || visibleHeight === 0) return {
+		height: layoutHeight,
+		width: layoutWidth
+	};
+	return {
+		height: capOverflowToViewport(layoutHeight, visibleHeight, viewport.height),
+		width: capOverflowToViewport(layoutWidth, visibleWidth, viewport.width)
+	};
+};
+//#endregion
 //#region ../../node_modules/hotkeys-js/dist/hotkeys-js.js
 /*!
 * hotkeys-js v4.0.7
@@ -57348,6 +57382,113 @@ var dictionaries = {
 		"schemas.list.indentItem": "เพิ่มย่อหน้า",
 		"schemas.list.outdentItem": "ลดย่อหน้า"
 	},
+	tr: {
+		cancel: "İptal",
+		close: "Kapat",
+		clear: "Temizle",
+		set: "Ayarla",
+		field: "alan",
+		fieldName: "Ad",
+		align: "Hizala",
+		width: "Genişlik",
+		height: "Yükseklik",
+		opacity: "Opaklık",
+		rotate: "Döndür",
+		required: "Zorunlu",
+		editable: "Düzenlenebilir",
+		edit: "Düzenle",
+		plsInputName: "Lütfen bir ad girin",
+		fieldMustUniq: "Alan adı benzersiz olmalı",
+		notUniq: "(Benzersiz olmayan ad)",
+		noKeyName: "Adsız",
+		fieldsList: "Alan Listesi",
+		editField: "Alanı Düzenle",
+		type: "Tür",
+		errorOccurred: "Bir hata oluştu",
+		errorBulkUpdateFieldName: "Öğe sayısı değiştiği için değişiklik kaydedilemedi.",
+		commitBulkUpdateFieldName: "Değişiklikleri Kaydet",
+		bulkUpdateFieldName: "Alan adlarını toplu güncelle",
+		addPageAfter: "Sonrasına Sayfa Ekle",
+		removePage: "Mevcut Sayfayı Kaldır",
+		removePageConfirm: "Bu sayfayı silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.",
+		zoomIn: "Yakınlaştır",
+		zoomOut: "Uzaklaştır",
+		fitWidth: "Genişliğe sığdır",
+		fitHeight: "Yüksekliğe sığdır",
+		"validation.hexColor": "Lütfen geçerli bir hex renk kodu girin.",
+		"validation.uniqueName": "Lütfen benzersiz bir ad girin.",
+		"validation.dateTimeFormat": "Geçersiz tarih saat biçimi.",
+		"validation.outOfBounds": "Sayfa sınırlarını aşıyor.",
+		"schemas.color": "Renk",
+		"schemas.borderWidth": "Kenarlık Genişliği",
+		"schemas.borderColor": "Kenarlık Rengi",
+		"schemas.backgroundColor": "Arka Plan Rengi",
+		"schemas.textColor": "Metin Rengi",
+		"schemas.bgColor": "Arka Plan Rengi",
+		"schemas.horizontal": "Yatay",
+		"schemas.vertical": "Dikey",
+		"schemas.left": "Sol",
+		"schemas.center": "Orta",
+		"schemas.right": "Sağ",
+		"schemas.top": "Üst",
+		"schemas.middle": "Orta",
+		"schemas.bottom": "Alt",
+		"schemas.padding": "İç Boşluk",
+		"schemas.text.fontName": "Yazı Tipi Adı",
+		"schemas.text.size": "Boyut",
+		"schemas.text.spacing": "Aralık",
+		"schemas.text.textAlign": "Metin Hizası",
+		"schemas.text.verticalAlign": "Dikey Hizalama",
+		"schemas.text.lineHeight": "Satır Yüksekliği",
+		"schemas.text.min": "En Az",
+		"schemas.text.max": "En Çok",
+		"schemas.text.fit": "Sığdır",
+		"schemas.text.dynamicFontSize": "Dinamik Yazı Tipi Boyutu",
+		"schemas.text.overflow": "Taşma",
+		"schemas.text.overflowVisible": "Görünür",
+		"schemas.text.overflowExpand": "Genişlet",
+		"schemas.text.format": "Biçim",
+		"schemas.text.plain": "Düz",
+		"schemas.text.inlineMarkdown": "Satır İçi Markdown Kullan",
+		"schemas.text.markdownFonts": "Markdown Yazı Tipleri",
+		"schemas.text.boldFont": "Kalın Yazı Tipi",
+		"schemas.text.italicFont": "İtalik Yazı Tipi",
+		"schemas.text.boldItalicFont": "Kalın İtalik Yazı Tipi",
+		"schemas.text.codeFont": "Kod Yazı Tipi",
+		"schemas.text.variantFallback": "Varyant Geri Dönüşü",
+		"schemas.text.synthetic": "Yapay Stil",
+		"schemas.text.error": "Hata",
+		"schemas.radius": "Yarıçap",
+		"schemas.mvt.typingInstructions": "Değişken eklemek için süslü parantez içine kelime yazın, örneğin",
+		"schemas.mvt.sampleField": "ad",
+		"schemas.mvt.variablesSampleData": "Değişken Örnek Verisi",
+		"schemas.mvt.placeholderDynamicVariable": "Yer Tutucu Dinamik Değişken",
+		"schemas.barcodes.barColor": "Çubuk Rengi",
+		"schemas.barcodes.includetext": "Metni Dahil Et",
+		"schemas.table.alternateBackgroundColor": "Alternatif Arka Plan Rengi",
+		"schemas.table.tableStyle": "Tablo Stili",
+		"schemas.table.showHead": "Başlığı Göster",
+		"schemas.table.repeatHead": "Başlığı Tekrarla",
+		"schemas.table.headStyle": "Başlık Stili",
+		"schemas.table.bodyStyle": "Gövde Stili",
+		"schemas.table.columnStyle": "Sütun Stili",
+		"schemas.date.format": "Tarih Biçimi",
+		"schemas.date.locale": "Yerel Ayar",
+		"schemas.select.options": "Seçenekler",
+		"schemas.select.optionPlaceholder": "Bir seçenek girin",
+		"schemas.radioGroup.groupName": "Grup Adı",
+		"schemas.list.listStyle": "Liste Stili",
+		"schemas.list.bullet": "Madde İşaretli",
+		"schemas.list.ordered": "Numaralı",
+		"schemas.list.markerWidth": "İşaret Genişliği",
+		"schemas.list.markerGap": "İşaret Aralığı",
+		"schemas.list.indentSize": "Girinti Boyutu",
+		"schemas.list.itemSpacing": "Öğe Aralığı",
+		"schemas.list.addItem": "Öğe Ekle",
+		"schemas.list.removeItem": "Öğe Kaldır",
+		"schemas.list.indentItem": "Girintiyi Artır",
+		"schemas.list.outdentItem": "Girintiyi Azalt"
+	},
 	it: {
 		cancel: "Annulla",
 		close: "Chiudi",
@@ -77054,6 +77195,25 @@ var uuid$13 = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c)
 	const r = Math.random() * 16 | 0;
 	return (c == "x" ? r : r & 3 | 8).toString(16);
 });
+/**
+* Assigns runtime UI ids that stay stable for a Designer/Viewer/Form session.
+* Caller/template ids are ignored: Schema.passthrough() can carry values that
+* break `#text-{id}` querySelector (e.g. `foo[`). Save paths still strip ids.
+*/
+var stabilizeSchemaIds = (schemas, idMap) => schemas.map((schema, index) => {
+	const key = schema.name || `index:${index}`;
+	const existingId = idMap.get(key);
+	if (existingId) return {
+		...schema,
+		id: existingId
+	};
+	const id = uuid$13();
+	idMap.set(key, id);
+	return {
+		...schema,
+		id
+	};
+});
 var set$3 = (obj, path, value) => {
 	path = Array.isArray(path) ? path : path.replace(/\[/g, ".").replace(/\]/g, "").split(".");
 	let src = obj;
@@ -77316,6 +77476,44 @@ 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 getVisibleOverlap = (containerRect, elementRect) => {
+	const width = Math.max(0, Math.min(containerRect.right, elementRect.right) - Math.max(containerRect.left, elementRect.left));
+	const height = Math.max(0, Math.min(containerRect.bottom, elementRect.bottom) - Math.max(containerRect.top, elementRect.top));
+	return {
+		width,
+		height,
+		area: width * height
+	};
+};
+var VERTICAL_SCROLL_EDGE_EPSILON = 1;
+var isAtVerticalScrollEdge = (container) => {
+	const maxScrollTop = container.scrollHeight - container.clientHeight;
+	if (maxScrollTop <= 0) return false;
+	const { scrollTop } = container;
+	return scrollTop <= VERTICAL_SCROLL_EDGE_EPSILON || scrollTop >= maxScrollTop - VERTICAL_SCROLL_EDGE_EPSILON;
+};
+var getStickyScrollPageIndex = (container, papers, pageCursor) => {
+	const containerRect = container.getBoundingClientRect();
+	const stickyHeight = containerRect.height * PAGE_SWITCH_REMAINING_RATIO;
+	let bestPageIndex = pageCursor;
+	let bestVisibleArea = 0;
+	let currentVisibleHeight = 0;
+	let currentVisibleArea = 0;
+	papers.forEach((paper, pageIndex) => {
+		if (!paper) return;
+		const { height, area } = getVisibleOverlap(containerRect, paper.getBoundingClientRect());
+		if (pageIndex === pageCursor) {
+			currentVisibleHeight = height;
+			currentVisibleArea = area;
+		}
+		if (area > bestVisibleArea) {
+			bestVisibleArea = area;
+			bestPageIndex = pageIndex;
+		}
+	});
+	if (bestVisibleArea <= 0) return pageCursor;
+	return !isAtVerticalScrollEdge(container) && currentVisibleArea > 0 && currentVisibleHeight >= stickyHeight ? pageCursor : bestPageIndex;
+};
 var MIN_ZOOM = .25;
 var FIT_GUTTER = 40;
 var clampZoomLevel = (zoomLevel, maxZoom, minZoom = MIN_ZOOM) => Math.min(Math.max(zoomLevel, minZoom), maxZoom);
@@ -77436,15 +77634,10 @@ var BaseUIClass = class {
 		_defineProperty$14(this, "options", {});
 		_defineProperty$14(this, "setSize", debounce$2(() => {
 			if (!this.domContainer) return;
-			const rect = this.domContainer.getBoundingClientRect();
-			const vw = window.innerWidth;
-			const vh = window.innerHeight;
-			const visibleWidth = Math.max(0, Math.min(rect.right, vw) - Math.max(rect.left, 0));
-			const visibleHeight = Math.max(0, Math.min(rect.bottom, vh) - Math.max(rect.top, 0));
-			this.size = {
-				height: visibleHeight,
-				width: visibleWidth
-			};
+			this.size = measureUiContainerSize(this.domContainer, {
+				height: window.innerHeight,
+				width: window.innerWidth
+			});
 			this.render();
 		}, 100));
 		_defineProperty$14(this, "resizeObserver", new ResizeObserver(this.setSize));
@@ -77454,10 +77647,10 @@ var BaseUIClass = class {
 		this.template = cloneDeep$1(template);
 		this.options = options;
 		const container = this.domContainer;
-		this.size = {
-			height: container.clientHeight || window.innerHeight,
-			width: container.clientWidth || window.innerWidth
-		};
+		this.size = measureUiContainerSize(container, {
+			height: window.innerHeight,
+			width: window.innerWidth
+		});
 		this.resizeObserver.observe(container);
 		const { lang, font } = options;
 		if (lang) this.lang = lang;
@@ -88030,7 +88223,7 @@ function getPxValue$5(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$6(initArea, scrollerList) {
+function getVisibleArea$5(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -88208,8 +88401,8 @@ function useAlign$5(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$6(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$6(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$5(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$5(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -95506,7 +95699,7 @@ function getPxValue$4(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$5(initArea, scrollerList) {
+function getVisibleArea$4(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -95684,8 +95877,8 @@ function useAlign$4(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$5(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$5(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$4(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$4(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -101632,7 +101825,7 @@ function getPxValue$3(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$4(initArea, scrollerList) {
+function getVisibleArea$3(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -101810,8 +102003,8 @@ function useAlign$3(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$4(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$4(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$3(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$3(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -103998,7 +104191,7 @@ function getPxValue$2(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$3(initArea, scrollerList) {
+function getVisibleArea$2(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -104176,8 +104369,8 @@ function useAlign$2(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$3(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$3(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";
@@ -106054,7 +106247,7 @@ function getPxValue$1(val) {
 /**
 * Get visible area of element
 */
-function getVisibleArea$2(initArea, scrollerList) {
+function getVisibleArea$1(initArea, scrollerList) {
 	const visibleArea = { ...initArea };
 	(scrollerList || []).forEach((ele) => {
 		if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
@@ -106232,8 +106425,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$2(scrollRegion, scrollerList);
-			const visibleRegionArea = getVisibleArea$2(visibleRegion, scrollerList);
+			const scrollRegionArea = getVisibleArea$1(scrollRegion, scrollerList);
+			const visibleRegionArea = getVisibleArea$1(visibleRegion, scrollerList);
 			const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
 			const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
 			popupElement.style.left = "auto";
@@ -122369,27 +122562,10 @@ var useZoom = ({ baseScale, maxZoom, pageCursor, pageSizes, containerRef, paperR
 		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 _pageCursor = getMostVisiblePageIndex(ref.current, paperRefs, pageCursor);
+		const _pageCursor = getStickyScrollPageIndex(ref.current, paperRefs.current, pageCursor);
 		if (_pageCursor !== pageCursor) onChangePageCursor(_pageCursor);
 	}, [
 		onChangePageCursor,
@@ -225690,14 +225866,13 @@ var Padding = ({ basePdf }) => {
 //#region src/components/StaticSchema.tsx
 var StaticSchema = (props) => {
 	const { template: { schemas, basePdf }, input, scale, totalPages, currentPage } = props;
+	const [staticSchemaIds] = (0, import_react$9.useState)(() => /* @__PURE__ */ new Map());
 	if (!isBlankPdf(basePdf) || !basePdf.staticSchema) return null;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: basePdf.staticSchema.map((schema) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Renderer, {
-		schema: {
-			...schema,
-			id: uuid$13()
-		},
+	const schemasForUI = stabilizeSchemaIds(basePdf.staticSchema, staticSchemaIds);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: schemasForUI.map((schema) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Renderer, {
+		schema,
 		basePdf,
-		value: schema.readOnly ? replacePlaceholders({
+		value: schema.readOnly && schema.type === "table" ? getReadOnlyTableValue(schema, input) : schema.readOnly ? replacePlaceholders({
 			content: schema.content || "",
 			variables: {
 				...input,
@@ -226073,7 +226248,7 @@ var Canvas = (props, ref) => {
 				const mode = editing && activeElements.map((ae) => ae.id).includes(schema.id) ? "designer" : "viewer";
 				const content = schema.content || "";
 				let value = content;
-				if (mode !== "designer" && schema.readOnly) value = replacePlaceholders({
+				if (mode !== "designer" && schema.readOnly && schema.type !== "table") value = replacePlaceholders({
 					content,
 					variables: {
 						...schemasList.flat().reduce((acc, currSchema) => {
@@ -227502,7 +227677,7 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 					backgrounds,
 					renderSchema: ({ schema, index }) => {
 						const hasInputValue = Boolean(input && Object.prototype.hasOwnProperty.call(input, schema.name));
-						const value = schema.readOnly ? replacePlaceholders({
+						const value = schema.readOnly && schema.type === "table" ? getReadOnlyTableValue(schema, input) : schema.readOnly ? replacePlaceholders({
 							content: schema.content || "",
 							variables: {
 								...input,