@meistrari/tela-build 1.25.0 → 1.25.2

package/components/tela/preview/preview-content.vue

@@ -24,6 +24,8 @@ const props = withDefaults(
         highlightExact?: boolean
         /** Override the initial zoom scale. Defaults to 1 for minimal, 0.75 for default. */
         initialScale?: number
+        /** When true, shows the loading skeleton regardless of internal loading state. Use when the file content is being fetched externally (e.g. lazy download). */
+        loading?: boolean
     }>(),
     {
         variant: 'default',
@@ -32,6 +34,7 @@ const props = withDefaults(
         highlightPage: undefined,
         highlightExact: false,
         initialScale: undefined,
+        loading: false,
     },
 )
 
@@ -94,6 +97,21 @@ const pdfLoadError = ref<string | null>(null)
 const pageRefs = ref<Map<number, HTMLElement>>(new Map())
 const textLayerRefs = ref<Map<number, HTMLDivElement>>(new Map())
 const renderedPages = ref<Set<number>>(new Set())
+const pageDimensions = ref<Map<number, { width: number, height: number }>>(new Map())
+const defaultPageDimensions = ref<{ width: number, height: number } | null>(null)
+const visiblePages = ref<Set<number>>(new Set())
+const pdfObserver = ref<IntersectionObserver | null>(null)
+const BUFFER_PAGES = 1
+const INITIAL_DIMENSION_PAGES = 3
+const DIMENSION_BATCH_SIZE = 8
+const canvasRenderTokens = new WeakMap<HTMLCanvasElement, number>()
+let canvasRenderTokenCounter = 0
+let pageRenderGeneration = 0
+const inFlightPageRenders = new Map<number, {
+    generation: number
+    scale: number
+    promise: Promise<void>
+}>()
 let isRendering = false
 let pendingReRender = false
 let pendingScrollPage: number | null = null
@@ -118,6 +136,30 @@ function zoomOut() {
     }
 }
 
+function clearCanvasElement(canvas: HTMLCanvasElement | null | undefined) {
+    if (!canvas)
+        return
+
+    canvasRenderTokens.delete(canvas)
+
+    const ctx = canvas.getContext('2d')
+    if (ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+    }
+
+    canvas.width = 0
+    canvas.height = 0
+}
+
+function clearTextLayerElement(textLayer: HTMLDivElement | null | undefined) {
+    if (!textLayer)
+        return
+
+    textLayer.innerHTML = ''
+    textLayer.style.width = ''
+    textLayer.style.height = ''
+}
+
 function handleMouseDown(e: MouseEvent) {
     if (!scrollContainerRef.value || !dragEnabled.value)
         return
@@ -195,8 +237,13 @@ watch(scrollY, () => {
 function setPageRef(pageNum: number, el: HTMLElement | null) {
     if (el) {
         pageRefs.value.set(pageNum, el)
+        el.setAttribute('data-page-num', String(pageNum))
+        pdfObserver.value?.observe(el)
     }
     else {
+        const existing = pageRefs.value.get(pageNum)
+        if (existing)
+            pdfObserver.value?.unobserve(existing)
         pageRefs.value.delete(pageNum)
     }
 }
@@ -211,6 +258,34 @@ function setTextLayerRef(pageNum: number, el: HTMLDivElement | null) {
 }
 
 async function renderPdfPage(pageNum: number) {
+    const generation = pageRenderGeneration
+    const renderScale = scale.value
+    const existingRender = inFlightPageRenders.get(pageNum)
+
+    if (existingRender && existingRender.generation === generation && existingRender.scale === renderScale) {
+        await existingRender.promise
+        return
+    }
+
+    const renderPromise = renderPdfPageOnce(pageNum, generation, renderScale)
+    inFlightPageRenders.set(pageNum, {
+        generation,
+        scale: renderScale,
+        promise: renderPromise,
+    })
+
+    try {
+        await renderPromise
+    }
+    finally {
+        const activeRender = inFlightPageRenders.get(pageNum)
+        if (activeRender?.promise === renderPromise) {
+            inFlightPageRenders.delete(pageNum)
+        }
+    }
+}
+
+async function renderPdfPageOnce(pageNum: number, generation: number, renderScale: number) {
     const handle = pdfDocHandle.value
 
     if (!handle)
@@ -221,50 +296,347 @@ async function renderPdfPage(pageNum: number) {
     if (!pageContainer)
         return
 
-    const canvas = pageContainer.querySelector('canvas')
+    const canvas = pageContainer.querySelector('canvas') as HTMLCanvasElement | null
 
     if (!canvas)
         return
+    const renderToken = ++canvasRenderTokenCounter
+    canvasRenderTokens.set(canvas, renderToken)
 
     const textLayer = textLayerRefs.value.get(pageNum) ?? null
 
     await handle.renderPage({
         pageNum,
-        canvas: canvas as HTMLCanvasElement,
-        scale: scale.value,
+        canvas,
+        scale: renderScale,
         textLayer,
         highlight: props.highlightText,
         highlightPage: props.highlightPage,
         highlightExact: props.highlightExact,
     })
 
+    const currentRenderToken = canvasRenderTokens.get(canvas)
+    if (
+        currentRenderToken !== renderToken
+        || handle !== pdfDocHandle.value
+        || generation !== pageRenderGeneration
+        || renderScale !== scale.value
+    ) {
+        if (currentRenderToken === undefined) {
+            clearCanvasElement(canvas)
+        }
+        return
+    }
+
     renderedPages.value.add(pageNum)
 }
 
-async function renderAllPdfPages() {
-    const handle = pdfDocHandle.value
+function clearPageCanvas(pageNum: number) {
+    const container = pageRefs.value.get(pageNum)
+    if (!container)
+        return
+    const canvas = container.querySelector('canvas') as HTMLCanvasElement | null
+    const textLayer = textLayerRefs.value.get(pageNum)
+    clearCanvasElement(canvas)
+    clearTextLayerElement(textLayer)
+    renderedPages.value.delete(pageNum)
+}
+
+function clearAllPageCanvases() {
+    for (const [pageNum, container] of pageRefs.value.entries()) {
+        const canvas = container.querySelector('canvas') as HTMLCanvasElement | null
+        const textLayer = textLayerRefs.value.get(pageNum)
+        clearCanvasElement(canvas)
+        clearTextLayerElement(textLayer)
+    }
+}
+
+function getBufferedPageNumbers(pageNums: Iterable<number>, total: number): number[] {
+    const bufferedPages = new Set<number>()
+
+    for (const pageNum of pageNums) {
+        for (let i = pageNum - BUFFER_PAGES; i <= pageNum + BUFFER_PAGES; i++) {
+            if (i >= 1 && i <= total) {
+                bufferedPages.add(i)
+            }
+        }
+    }
+
+    return [...bufferedPages].sort((a, b) => a - b)
+}
+
+function getPagesToRender(total: number): number[] {
+    if (visiblePages.value.size === 0) {
+        return getBufferedPageNumbers([1], total)
+    }
+
+    return getBufferedPageNumbers(visiblePages.value, total)
+}
+
+function getInitialDimensionPages(total: number): number[] {
+    return Array.from({ length: Math.min(total, INITIAL_DIMENSION_PAGES) }, (_, index) => index + 1)
+}
+
+function yieldToBrowser(): Promise<void> {
+    if (typeof requestAnimationFrame === 'undefined') {
+        return new Promise(resolve => setTimeout(resolve, 0))
+    }
 
+    return new Promise(resolve => requestAnimationFrame(() => resolve()))
+}
+
+let dimensionGeneration = 0
+
+async function measurePageDimension(
+    handle: PdfDocumentHandle,
+    pageNum: number,
+    generation: number,
+): Promise<{ width: number, height: number } | null> {
+    if (!handle.getPageDimensions)
+        return null
+
+    const existing = pageDimensions.value.get(pageNum)
+    if (existing)
+        return existing
+
+    const dims = await handle.getPageDimensions({ pageNum, scale: scale.value })
+    if (!dims)
+        return null
+
+    if (generation !== dimensionGeneration || handle !== pdfDocHandle.value)
+        return null
+
+    pageDimensions.value.set(pageNum, dims)
+
+    if (pageNum === 1 || !defaultPageDimensions.value) {
+        defaultPageDimensions.value = dims
+    }
+
+    return dims
+}
+
+async function primePageDimensions(
+    handle: PdfDocumentHandle,
+    priorityPages: number[],
+    generation: number,
+): Promise<void> {
+    if (!handle.getPageDimensions)
+        return
+
+    for (const pageNum of priorityPages) {
+        await measurePageDimension(handle, pageNum, generation)
+    }
+}
+
+async function warmRemainingPageDimensions(
+    handle: PdfDocumentHandle,
+    priorityPages: number[],
+    generation: number,
+): Promise<void> {
+    if (!handle.getPageDimensions)
+        return
+
+    const priorityPageSet = new Set(priorityPages)
+    const deferredPages: number[] = []
+
+    for (let pageNum = 1; pageNum <= handle.numPages; pageNum++) {
+        if (!priorityPageSet.has(pageNum)) {
+            deferredPages.push(pageNum)
+        }
+    }
+
+    for (let i = 0; i < deferredPages.length; i += DIMENSION_BATCH_SIZE) {
+        const batch = deferredPages.slice(i, i + DIMENSION_BATCH_SIZE)
+        await Promise.all(batch.map(pageNum => measurePageDimension(handle, pageNum, generation)))
+
+        if (generation !== dimensionGeneration || handle !== pdfDocHandle.value)
+            return
+
+        await yieldToBrowser()
+    }
+}
+
+let isRenderingVisiblePages = false
+let shouldRenderVisiblePagesAgain = false
+
+async function renderVisiblePagesOnce() {
+    const handle = pdfDocHandle.value
     if (!handle)
         return
 
+    const pagesToRender = new Set<number>(getPagesToRender(handle.numPages))
+
+    for (const pageNum of pagesToRender) {
+        if (!renderedPages.value.has(pageNum)) {
+            await renderPdfPage(pageNum)
+        }
+    }
+
+    for (const pageNum of [...renderedPages.value]) {
+        if (!pagesToRender.has(pageNum)) {
+            clearPageCanvas(pageNum)
+        }
+    }
+}
+
+async function renderVisiblePages() {
+    if (isRenderingVisiblePages) {
+        shouldRenderVisiblePagesAgain = true
+        return
+    }
+
+    isRenderingVisiblePages = true
+
+    try {
+        do {
+            shouldRenderVisiblePagesAgain = false
+            await renderVisiblePagesOnce()
+        }
+        while (shouldRenderVisiblePagesAgain)
+    }
+    finally {
+        isRenderingVisiblePages = false
+    }
+}
+
+let renderRafId: number | null = null
+
+function scheduleRenderVisiblePages() {
+    if (renderRafId !== null)
+        return
+    renderRafId = requestAnimationFrame(() => {
+        renderRafId = null
+        void renderVisiblePages()
+    })
+}
+
+function setupPdfObserver() {
+    pdfObserver.value?.disconnect()
+
+    if (typeof IntersectionObserver === 'undefined') {
+        renderFallbackAllPages()
+        return
+    }
+
+    pdfObserver.value = new IntersectionObserver(
+        (entries) => {
+            for (const entry of entries) {
+                const pageNum = Number(entry.target.getAttribute('data-page-num'))
+                if (Number.isNaN(pageNum))
+                    continue
+
+                if (entry.isIntersecting) {
+                    visiblePages.value.add(pageNum)
+                }
+                else {
+                    visiblePages.value.delete(pageNum)
+                }
+            }
+            scheduleRenderVisiblePages()
+        },
+        {
+            root: scrollContainerRef.value,
+            rootMargin: '300px 0px',
+        },
+    )
+
+    for (const [pageNum, el] of pageRefs.value) {
+        el.setAttribute('data-page-num', String(pageNum))
+        pdfObserver.value.observe(el)
+    }
+
+    // Render first pages immediately — don't wait for async observer callback
+    visiblePages.value.add(1)
+    void renderVisiblePages()
+}
+
+async function renderFallbackAllPages() {
+    const handle = pdfDocHandle.value
+    if (!handle)
+        return
     for (let pageNum = 1; pageNum <= handle.numPages; pageNum++) {
         await renderPdfPage(pageNum)
     }
 }
 
+async function precomputePageDimensions() {
+    const handle = pdfDocHandle.value
+    if (!handle)
+        return
+
+    const priorityPages = getInitialDimensionPages(handle.numPages)
+    const generation = ++dimensionGeneration
+
+    await primePageDimensions(handle, priorityPages, generation)
+    void warmRemainingPageDimensions(handle, priorityPages, generation)
+}
+
+function getPagePlaceholderStyle(pageNum: number) {
+    const dims = pageDimensions.value.get(pageNum) ?? defaultPageDimensions.value
+    if (!dims || renderedPages.value.has(pageNum))
+        return undefined
+    return {
+        minWidth: `${dims.width}px`,
+        minHeight: `${dims.height}px`,
+    }
+}
+
+function resetPdfRenderState() {
+    dimensionGeneration++
+    pageRenderGeneration++
+    inFlightPageRenders.clear()
+
+    if (renderRafId !== null) {
+        cancelAnimationFrame(renderRafId)
+        renderRafId = null
+    }
+
+    pdfObserver.value?.disconnect()
+    pdfObserver.value = null
+    visiblePages.value.clear()
+    pageDimensions.value.clear()
+    defaultPageDimensions.value = null
+
+    clearAllPageCanvases()
+    renderedPages.value.clear()
+    currentDocumentPage.value = 1
+    totalPages.value = 0
+}
+
 async function reRenderAllPdfPages() {
+    const handle = pdfDocHandle.value
+    if (!handle)
+        return
+
     if (isRendering) {
         pendingReRender = true
         return
     }
+
     isRendering = true
+
     try {
+        pageRenderGeneration++
+        inFlightPageRenders.clear()
+        clearAllPageCanvases()
         renderedPages.value.clear()
+        pageDimensions.value.clear()
+        defaultPageDimensions.value = null
+
+        const priorityPages = getPagesToRender(handle.numPages)
+        const generation = ++dimensionGeneration
+
+        await primePageDimensions(handle, priorityPages, generation)
+        void warmRemainingPageDimensions(handle, priorityPages, generation)
         await nextTick()
-        await renderAllPdfPages()
+        if (visiblePages.value.size === 0) {
+            visiblePages.value.add(1)
+        }
+        await renderVisiblePages()
     }
     finally {
         isRendering = false
+
         if (pendingReRender) {
             pendingReRender = false
             void reRenderAllPdfPages().then(() => {
@@ -274,6 +646,7 @@ async function reRenderAllPdfPages() {
                 }
             })
         }
+
         else if (pendingScrollPage !== null) {
             scrollToPage(pendingScrollPage)
             pendingScrollPage = null
@@ -281,7 +654,17 @@ async function reRenderAllPdfPages() {
     }
 }
 
-watch(() => props.file, async (newFile) => {
+watch(() => props.file, async (newFile, oldFile) => {
+    const isSamePdfRecompute = newFile?.fileType === 'application/pdf'
+        && pdfDocHandle.value
+        && newFile?.fileName === oldFile?.fileName
+        && newFile?.fileUrl === oldFile?.fileUrl
+
+    if (isSamePdfRecompute) {
+        return
+    }
+
+    resetPdfRenderState()
     pdfDocHandle.value?.destroy()
     pdfDocHandle.value = null
     pdfLoadError.value = null
@@ -327,8 +710,11 @@ watch(() => props.file, async (newFile) => {
             pdfDocHandle.value = doc
             totalPages.value = doc.numPages
 
+            await precomputePageDimensions()
             await nextTick()
-            await renderAllPdfPages()
+            if (scrollContainerRef.value) {
+                setupPdfObserver()
+            }
 
             const scrollTarget = (props.highlightPage && props.highlightPage > 0)
                 ? props.highlightPage
@@ -346,6 +732,7 @@ watch(() => props.file, async (newFile) => {
 }, { immediate: true, deep: true })
 
 onBeforeUnmount(() => {
+    resetPdfRenderState()
     pdfDocHandle.value?.destroy()
 })
 
@@ -484,61 +871,111 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
         @mouseenter="handleContainerMouseEnter"
         @mouseleave="handleContainerMouseLeave"
     >
-        <div
-            v-if="isLoading"
-            :class="cn({
-                'pt-56px': !props.segmentTab && props.file.fileType === 'application/pdf',
-                'pt-88px': props.segmentTab && props.file.fileType === 'application/pdf',
-                'px-46px': variant === 'default',
-                'px-32px': variant === 'minimal',
-            })"
-        >
+        <template v-if="isLoading || props.loading">
+            <!-- PDF skeleton: mimics the real PDF page stack -->
             <div
-                bg-white rounded-12px
-                flex="~ col" justify-between mx-auto relative
-                :class="cn({
-                    'w-446px min-h-631px px-32px py-28px': variant === 'default',
-                    'w-256px min-h-363px px-16px py-14px': variant === 'minimal',
+                v-if="props.file.fileType === 'application/pdf'"
+                :class="cn('flex flex-col items-center gap-8px pb-80px', {
+                    'pt-56px': !props.segmentTab,
+                    'pt-88px': props.segmentTab,
+                    'px-28px': true,
                 })"
             >
-                <div flex="~ col" gap-16px>
-                    <div
-                        v-for="(width, index) in [100, 88, 72, 64]" :key="index"
-                        :h="variant === 'default' ? '16px' : '12px'" overflow-hidden rounded-8px
-                        :style="{ width: `${width}%` }"
-                    >
-                        <TelaSkeleton w-full h-full rounded-8px bg-gray-100 />
+                <div
+                    v-for="pageNum in 2" :key="pageNum"
+                    relative bg-white rounded-12px overflow-hidden mx-auto
+                    :class="cn({
+                        'w-446px min-h-631px': variant === 'default',
+                        'w-256px min-h-363px': variant === 'minimal',
+                    })"
+                >
+                    <!-- Page badge -->
+                    <div absolute top-8px left-8px flex items-center w-fit h-16px>
+                        <div
+                            overflow-hidden rounded-4px
+                            :class="cn({
+                                'w-48px h-16px': variant === 'default',
+                                'w-36px h-14px': variant === 'minimal',
+                            })"
+                        >
+                            <TelaSkeleton w-full h-full bg-gray-100 />
+                        </div>
                     </div>
-                </div>
-                <div flex="~ col" gap-16px>
+                    <!-- Content lines -->
                     <div
-                        v-for="(width, index) in [72, 92, 64, 48]" :key="index"
-                        :h="variant === 'default' ? '16px' : '12px'" overflow-hidden rounded-8px
-                        :style="{ width: `${width}%` }"
+                        flex="~ col"
+                        :class="cn({
+                            'gap-14px px-32px pt-44px pb-28px': variant === 'default',
+                            'gap-10px px-16px pt-32px pb-14px': variant === 'minimal',
+                        })"
                     >
-                        <TelaSkeleton w-full h-full rounded-8px bg-gray-100 />
+                        <div
+                            v-for="(width, index) in [100, 88, 72, 64, 78, 92, 60, 44, 85, 70, 56, 36]" :key="index"
+                            overflow-hidden rounded-8px
+                            :h="variant === 'default' ? '14px' : '10px'"
+                            :style="{ width: `${width}%` }"
+                        >
+                            <TelaSkeleton w-full h-full rounded-8px bg-gray-100 />
+                        </div>
                     </div>
                 </div>
-                <div flex="~ col" gap-16px>
-                    <div
-                        v-for="(width, index) in [70, 90, 56, 36]" :key="index"
-                        :h="variant === 'default' ? '16px' : '12px'" overflow-hidden rounded-8px
-                        :style="{ width: `${width}%` }"
-                    >
-                        <TelaSkeleton w-full h-full rounded-8px bg-gray-100 />
+            </div>
+
+            <!-- Document skeleton for non-PDF files -->
+            <div
+                v-else
+                :class="cn({
+                    'px-46px': variant === 'default',
+                    'px-32px': variant === 'minimal',
+                })"
+            >
+                <div
+                    bg-white rounded-12px
+                    flex="~ col" justify-between mx-auto relative
+                    :class="cn({
+                        'w-446px min-h-631px px-32px py-28px': variant === 'default',
+                        'w-256px min-h-363px px-16px py-14px': variant === 'minimal',
+                    })"
+                >
+                    <div flex="~ col" gap-16px>
+                        <div
+                            v-for="(width, index) in [100, 88, 72, 64]" :key="index"
+                            :h="variant === 'default' ? '16px' : '12px'" overflow-hidden rounded-8px
+                            :style="{ width: `${width}%` }"
+                        >
+                            <TelaSkeleton w-full h-full rounded-8px bg-gray-100 />
+                        </div>
                     </div>
-                </div>
-                <div v-if="variant === 'default'" flex="~ col" gap-16px>
-                    <div
-                        v-for="(width, index) in [82, 56, 32, 20]" :key="index"
-                        h-16px overflow-hidden rounded-8px
-                        :style="{ width: `${width}%` }"
-                    >
-                        <TelaSkeleton w-full h-full rounded-8px bg-gray-100 />
+                    <div flex="~ col" gap-16px>
+                        <div
+                            v-for="(width, index) in [72, 92, 64, 48]" :key="index"
+                            :h="variant === 'default' ? '16px' : '12px'" overflow-hidden rounded-8px
+                            :style="{ width: `${width}%` }"
+                        >
+                            <TelaSkeleton w-full h-full rounded-8px bg-gray-100 />
+                        </div>
+                    </div>
+                    <div flex="~ col" gap-16px>
+                        <div
+                            v-for="(width, index) in [70, 90, 56, 36]" :key="index"
+                            :h="variant === 'default' ? '16px' : '12px'" overflow-hidden rounded-8px
+                            :style="{ width: `${width}%` }"
+                        >
+                            <TelaSkeleton w-full h-full rounded-8px bg-gray-100 />
+                        </div>
+                    </div>
+                    <div v-if="variant === 'default'" flex="~ col" gap-16px>
+                        <div
+                            v-for="(width, index) in [82, 56, 32, 20]" :key="index"
+                            h-16px overflow-hidden rounded-8px
+                            :style="{ width: `${width}%` }"
+                        >
+                            <TelaSkeleton w-full h-full rounded-8px bg-gray-100 />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </template>
 
         <template v-else-if="error">
             <div flex="~ col" items-center justify-center h-400px>
@@ -688,8 +1125,10 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
                                     :key="pageNum"
                                     :ref="(el) => setPageRef(pageNum, el as HTMLElement)"
                                     data-pdf-page-card
+                                    :data-page-num="pageNum"
                                     relative bg-white rounded-12px overflow-hidden mx-auto
                                     :class="cn(variant === 'minimal' && 'w-256px pdf-page-card--minimal')"
+                                    :style="getPagePlaceholderStyle(pageNum)"
                                 >
                                     <canvas />
                                     <div

package/components/tela/preview/preview.vue

@@ -35,6 +35,8 @@ const props = withDefaults(
         highlightPage?: number | null
         /** When true, uses exact matching instead of fuzzy word-based matching. */
         highlightExact?: boolean
+        /** When true, shows the loading skeleton. Pass when file content is being fetched externally. */
+        loading?: boolean
     }>(),
     {
         variant: 'default',
@@ -126,6 +128,7 @@ const fileReaderKey = computed(() => {
                     :pdf-loader="pdfLoader"
                     :labels="contentLabels"
                     :variant="variant"
+                    :loading="loading"
                     :highlight-text="highlightText"
                     :highlight-page="highlightPage"
                     :highlight-exact="highlightExact"

package/components/tela/preview/types.ts

@@ -69,5 +69,6 @@ export interface PdfDocumentHandle {
         highlightPage?: number | null
         highlightExact?: boolean
     }) => Promise<void>
+    getPageDimensions?: (opts: { pageNum: number, scale: number }) => Promise<{ width: number, height: number } | null>
     destroy: () => void
 }

package/components/tela/tooltip/tooltip-content.vue

@@ -2,6 +2,7 @@
 import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
+import { inject } from 'vue'
 import type { HTMLAttributes } from 'vue'
 
 defineOptions({
@@ -19,10 +20,12 @@ const emits = defineEmits<TooltipContentEmits & {
 const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const disablePortal = inject<boolean>('tela-disable-tooltip-portal', false)
 </script>
 
 <template>
-    <TooltipPortal>
+    <TooltipPortal :disabled="disablePortal">
         <TooltipContent
             v-bind="{ ...forwarded, ...$attrs }"
             :style="{ pointerEvents: 'auto' }"

package/composables/citation-navigation.ts

@@ -63,7 +63,7 @@ export function useCitationNavigation(options: {
 
         nextTick(() => {
             activeFile.value = citation.file
-            highlightPage.value = citation.page
+            highlightPage.value = citation.page + 1
             highlightText.value = citation.literal
                 ?? (value != null ? (typeof value === 'string' ? value : String(value)) : null)
             highlightExact.value = true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.25.0",
+  "version": "1.25.2",
   "type": "module",
   "files": [
     "app.config.ts",