@slidev/client 52.15.2 → 52.17.0

package/pages/overview.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { ClicksContext, SlideRoute } from '@slidev/types'
 import { useHead } from '@unhead/vue'
-import { computed, nextTick, onMounted, reactive, ref, shallowRef } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { CLICKS_MAX } from '../constants'
-import { pathPrefix, slidesTitle } from '../env'
+import { pathPrefix, slideAspect, slidesTitle } from '../env'
 import ClicksSlider from '../internals/ClicksSlider.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
@@ -14,19 +15,38 @@ import SlideContainer from '../internals/SlideContainer.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlidePath } from '../logic/slides'
+import { windowSize } from '../state'
 
 const cardWidth = 450
 
 useHead({ title: `Overview - ${slidesTitle}` })
 
-const { openInEditor, slides } = useNav()
+const currentRoute = useRoute()
+const router = useRouter()
+const { openInEditor, slides, isEmbedded } = useNav()
+const isPreviewMode = computed(() => currentRoute.query.mode === 'preview')
+const isEmbeddedPreviewMode = computed(() => isPreviewMode.value && isEmbedded.value)
+const overviewCardWidth = computed(() => {
+  if (!isPreviewMode.value)
+    return cardWidth
+  if (isEmbeddedPreviewMode.value)
+    return Math.max(0, windowSize.width.value - 16)
+  return Math.min(900, Math.max(320, windowSize.width.value - 160))
+})
+const overviewSlideHeight = computed(() => overviewCardWidth.value / slideAspect.value)
 
 const blocks: Map<number, HTMLElement> = reactive(new Map())
+const slidePreviews: Map<number, HTMLElement> = reactive(new Map())
 const activeBlocks = ref<number[]>([])
+const scroller = ref<HTMLElement>()
 const edittingNote = ref<number | null>(null)
+let ignoreOverviewScrollUntil = 0
+let pendingOverviewScrollNo: number | undefined
+let overviewScrollTimer: ReturnType<typeof setTimeout> | undefined
 const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta?.slide?.note || '')))
 const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
 const totalClicks = computed(() => slides.value.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
+const slideNoDigits = computed(() => String(Math.max(1, slides.value.length)).length)
 
 const activeSlide = shallowRef<SlideRoute>()
 const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
@@ -65,25 +85,23 @@ function wordCount(str: string) {
   return count
 }
 
-function isElementInViewport(el: HTMLElement) {
-  const rect = el.getBoundingClientRect()
-  const delta = 20
-  return (
-    rect.top >= 0 - delta
-    && rect.left >= 0 - delta
-    && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + delta
-    && rect.right <= (window.innerWidth || document.documentElement.clientWidth) + delta
-  )
-}
-
 function checkActiveBlocks() {
-  const active: number[] = []
-  Array.from(blocks.entries())
-    .forEach(([idx, el]) => {
-      if (isElementInViewport(el))
-        active.push(idx)
-    })
-  activeBlocks.value = active
+  const viewportHeight = window.innerHeight || document.documentElement.clientHeight
+  let active: { idx: number, visibleHeight: number } | undefined
+  const fullyVisible: number[] = []
+
+  for (const [idx, el] of blocks.entries()) {
+    const rect = el.getBoundingClientRect()
+    const visibleHeight = Math.max(0, Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0))
+    if (visibleHeight === 0)
+      continue
+    if (visibleHeight >= rect.height)
+      fullyVisible.push(idx)
+    if (!active || visibleHeight > active.visibleHeight)
+      active = { idx, visibleHeight }
+  }
+
+  activeBlocks.value = fullyVisible.length ? fullyVisible : active ? [active.idx] : []
 }
 
 function openSlideInNewTab(path: string) {
@@ -93,12 +111,142 @@ function openSlideInNewTab(path: string) {
   a.click()
 }
 
+function openSlideInBrowser(path: string) {
+  const url = new URL(pathPrefix + path.slice(1), location.href).href
+  if (isEmbedded.value) {
+    window.parent.postMessage({
+      target: 'slidev',
+      sender: 'slidev',
+      type: 'open-external',
+      url,
+    }, '*')
+    return
+  }
+  openSlideInNewTab(path)
+}
+
 function scrollToSlide(idx: number) {
   const el = blocks.get(idx)
   if (el)
     el.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
 
+function getSlidePreviewTop(idx: number) {
+  const el = slidePreviews.get(idx) || blocks.get(idx)
+  if (!el || !scroller.value)
+    return null
+  const scrollerRect = scroller.value.getBoundingClientRect()
+  const elRect = el.getBoundingClientRect()
+  return elRect.top - scrollerRect.top + scroller.value.scrollTop
+}
+
+function scrollSlideNoIntoCenter(no: number) {
+  if (!scroller.value || slides.value.length === 0)
+    return
+  const clamped = Math.min(Math.max(no, 1), slides.value.length)
+  const idx = Math.floor(clamped) - 1
+  const progress = clamped - (idx + 1)
+  const start = getSlidePreviewTop(idx)
+  const end = getSlidePreviewTop(idx + 1)
+  if (start == null)
+    return
+  const top = start
+    + (end == null ? 0 : (end - start) * progress)
+    - scroller.value.clientHeight * 0.5
+  if (Math.abs(scroller.value.scrollTop - top) < 1)
+    return
+  scroller.value.scrollTo({ top })
+}
+
+function getInitialSlideNo() {
+  const value = currentRoute.query.slideNo
+  const no = Number(Array.isArray(value) ? value[0] : value)
+  return Number.isFinite(no) && no > 0 ? no : undefined
+}
+
+function updateSlideNoQuery(no: number) {
+  if (!isEmbeddedPreviewMode.value)
+    return
+  const slideNo = Number(no.toFixed(3)).toString()
+  if (currentRoute.query.slideNo === slideNo)
+    return
+  router.replace({
+    query: {
+      ...currentRoute.query,
+      slideNo,
+    },
+  })
+}
+
+function getCenteredSlideNo() {
+  if (!scroller.value || slides.value.length === 0)
+    return null
+  const center = scroller.value.scrollTop + scroller.value.clientHeight * 0.5
+  const tops = slides.value
+    .map((_, idx) => getSlidePreviewTop(idx))
+    .filter((top): top is number => top != null)
+  if (tops.length === 0)
+    return null
+  if (tops.length === 1 || center <= tops[0])
+    return 1
+  for (let i = 1; i < tops.length; i++) {
+    if (center <= tops[i]) {
+      const span = Math.max(1, tops[i] - tops[i - 1])
+      return i + (center - tops[i - 1]) / span
+    }
+  }
+  return slides.value.length
+}
+
+function postOverviewScroll(no: number) {
+  pendingOverviewScrollNo = no
+  if (overviewScrollTimer)
+    return
+  overviewScrollTimer = setTimeout(() => {
+    overviewScrollTimer = undefined
+    const no = pendingOverviewScrollNo
+    pendingOverviewScrollNo = undefined
+    if (no == null)
+      return
+    updateSlideNoQuery(no)
+    if (Date.now() < ignoreOverviewScrollUntil)
+      return
+    window.parent.postMessage({
+      target: 'slidev',
+      sender: 'slidev',
+      type: 'overview-scroll',
+      no,
+    }, '*')
+  }, 50)
+}
+
+function onOverviewScroll() {
+  checkActiveBlocks()
+  if (!isEmbeddedPreviewMode.value || Date.now() < ignoreOverviewScrollUntil)
+    return
+  const no = getCenteredSlideNo()
+  if (no != null)
+    postOverviewScroll(no)
+}
+
+function onOverviewMessage({ data }: MessageEvent) {
+  if (
+    !isEmbeddedPreviewMode.value
+    || data?.target !== 'slidev'
+    || data.sender !== 'vscode'
+    || data.type !== 'overview-scroll'
+  ) {
+    return
+  }
+  const no = Number(data.no)
+  if (no > 0) {
+    ignoreOverviewScrollUntil = Date.now() + 300
+    pendingOverviewScrollNo = undefined
+    updateSlideNoQuery(no)
+    scrollSlideNoIntoCenter(no)
+  }
+}
+
 function onMarkerClick(e: MouseEvent, clicks: number, route: SlideRoute) {
   const ctx = getClicksContext(route)
   if (ctx.current === clicks)
@@ -108,18 +256,52 @@ function onMarkerClick(e: MouseEvent, clicks: number, route: SlideRoute) {
   e.preventDefault()
 }
 
+function openOverviewSlideSource(e: MouseEvent, route: SlideRoute) {
+  if (e.ctrlKey || e.metaKey) {
+    e.preventDefault()
+    openSlideInBrowser(getSlidePath(route, false))
+    return
+  }
+  const slide = route.meta?.slide
+  if (!slide)
+    return
+  window.parent.postMessage({
+    target: 'slidev',
+    type: 'command',
+    command: 'goto',
+    args: [slide.filepath, slide.sourceIndex],
+  }, '*')
+}
+
 onMounted(() => {
+  window.addEventListener('message', onOverviewMessage)
+  const initialSlideNo = isEmbeddedPreviewMode.value ? getInitialSlideNo() : undefined
+  if (initialSlideNo != null) {
+    ignoreOverviewScrollUntil = Date.now() + 300
+    scrollSlideNoIntoCenter(initialSlideNo)
+  }
   nextTick(() => {
+    if (initialSlideNo != null)
+      scrollSlideNoIntoCenter(initialSlideNo)
     checkActiveBlocks()
   })
 })
+
+onUnmounted(() => {
+  window.removeEventListener('message', onOverviewMessage)
+  if (overviewScrollTimer)
+    clearTimeout(overviewScrollTimer)
+})
 </script>
 
 <template>
   <div class="h-screen w-screen of-hidden flex">
-    <nav class="grid grid-rows-[auto_max-content] border-r border-main select-none max-h-full h-full">
+    <nav
+      v-if="!isEmbedded"
+      class="grid grid-rows-[auto_max-content] border-r border-main select-none max-h-full h-full"
+    >
       <div class="relative">
-        <div class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p2 gap-1 max-h-full of-x-visible of-y-auto" style="direction:rtl">
+        <div class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p-6px md:p-10px gap-1 max-h-full of-x-visible of-y-auto" style="direction:rtl">
           <div
             v-for="(route, idx) of slides"
             :key="route.no"
@@ -163,46 +345,86 @@ onMounted(() => {
       </div>
     </nav>
     <main
+      ref="scroller"
       class="flex-1 h-full of-auto"
       :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
-      @scroll="checkActiveBlocks"
+      @scroll="onOverviewScroll"
     >
       <div
         v-for="(route, idx) of slides"
         :key="route.no"
         :ref="el => blocks.set(idx, el as any)"
-        class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
-        :class="idx === 0 ? 'pt5' : ''"
+        class="overview-slide-block relative of-hidden flex gap-4 min-h-50"
+        :class="[idx === 0 && !isEmbeddedPreviewMode ? 'pt2' : '', isEmbeddedPreviewMode ? 'justify-center' : 'border-t border-main']"
       >
-        <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
-          <div class="text-3xl op20 mb2">
+        <div
+          v-if="!isEmbeddedPreviewMode"
+          class="select-none text-right my5 flex flex-col justify-between items-end"
+          :class="isPreviewMode ? 'w-9' : 'w-13'"
+          :style="{ height: `${overviewSlideHeight}px` }"
+        >
+          <div class="self-center text-3xl op20 mb2 text-center mr--14px tabular-nums" :style="{ width: `${slideNoDigits}ch` }">
             {{ idx + 1 }}
           </div>
-          <IconButton
-            class="mr--3 op0 group-hover:op80"
-            title="Play in new tab"
-            @click="openSlideInNewTab(getSlidePath(route, false))"
-          >
-            <div class="i-carbon:presentation-file" />
-          </IconButton>
-          <IconButton
-            v-if="__DEV__ && route.meta?.slide"
-            class="mr--3 op0 group-hover:op80"
-            title="Open in editor"
-            @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
-          >
-            <div class="i-carbon:cics-program" />
-          </IconButton>
+          <div class="flex flex-col gap-1 mx-1 items-end">
+            <IconButton
+              class="overview-slide-action mr--4 op0"
+              :class="isPreviewMode ? 'text-lg' : ''"
+              title="Play in new tab"
+              @click="openSlideInNewTab(getSlidePath(route, false))"
+            >
+              <div class="i-carbon:presentation-file" />
+            </IconButton>
+            <IconButton
+              v-if="__DEV__ && route.meta?.slide"
+              class="overview-slide-action mr--4 op0"
+              :class="isPreviewMode ? 'text-lg' : ''"
+              title="Open in editor"
+              @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
+            >
+              <div class="i-carbon:edit" />
+            </IconButton>
+          </div>
         </div>
-        <div class="flex flex-col gap-2 my5" :style="{ width: `${cardWidth}px` }">
+        <div
+          class="flex flex-col"
+          :class="isEmbeddedPreviewMode ? 'my1 gap-0' : 'my5 gap-2'"
+          :style="{ width: `${overviewCardWidth}px` }"
+        >
+          <div
+            v-if="isEmbeddedPreviewMode"
+            class="flex items-end gap-2"
+          >
+            <button
+              type="button"
+              class="select-none pl-1 text-lg leading-tight op60 tabular-nums hover:op90 hover:underline underline-offset-2"
+              @click="openOverviewSlideSource($event, route)"
+            >
+              {{ idx + 1 }}
+            </button>
+            <ClicksSlider
+              v-if="getSlideClicks(route)"
+              :active="activeSlide === route"
+              :clicks-context="getClicksContext(route)"
+              resettable
+              compact
+              attached
+              class="ml-auto w-88 min-w-[70%] max-w-[calc(100%-3rem)]"
+              @dblclick="toggleRoute(route)"
+              @activate="activeSlide = route"
+              @reset="activeSlide = undefined"
+            />
+          </div>
           <div
-            class="border rounded border-main overflow-hidden bg-main select-none h-max"
-            @dblclick="openSlideInNewTab(getSlidePath(route, false))"
+            :ref="el => slidePreviews.set(idx, el as any)"
+            class="border rounded border-main overflow-hidden bg-main h-max"
+            :class="[isEmbeddedPreviewMode && getSlideClicks(route) ? 'rounded-tr-0' : '', isEmbeddedPreviewMode ? '' : 'select-none']"
+            @dblclick="!isEmbeddedPreviewMode && openSlideInNewTab(getSlidePath(route, false))"
           >
             <SlideContainer
               :key="route.no"
-              :width="cardWidth"
-              class="pointer-events-none important:[&_*]:select-none"
+              :width="overviewCardWidth"
+              :class="isEmbeddedPreviewMode ? '' : 'pointer-events-none important:[&_*]:select-none'"
             >
               <SlideWrapper
                 :clicks-context="getClicksContext(route)"
@@ -213,27 +435,21 @@ onMounted(() => {
             </SlideContainer>
           </div>
           <ClicksSlider
-            v-if="getSlideClicks(route)"
+            v-if="getSlideClicks(route) && !isEmbeddedPreviewMode"
             :active="activeSlide === route"
             :clicks-context="getClicksContext(route)"
-            class="w-full mt-2"
+            resettable
+            class="ml-1 w-[calc(100%-0.25rem)]"
+            :class="isPreviewMode ? '' : 'mt-2'"
             @dblclick="toggleRoute(route)"
-            @click="activeSlide = route"
+            @activate="activeSlide = route"
+            @reset="activeSlide = undefined"
           />
         </div>
-        <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
-          <IconButton
-            title="Edit Note"
-            class="rounded-full w-9 h-9 text-sm"
-            :class="edittingNote === route.no ? 'important:op0' : ''"
-            @click="edittingNote = route.no"
-          >
-            <div class="i-carbon:pen" />
-          </IconButton>
-        </div>
         <NoteEditable
+          v-if="!isPreviewMode"
           :no="route.no"
-          class="max-w-250 w-250 text-lg rounded p3"
+          class="relative z-1 max-w-250 w-250 text-lg rounded p3"
           :auto-height="true"
           :highlight="activeSlide === route"
           :editing="edittingNote === route.no"
@@ -243,14 +459,17 @@ onMounted(() => {
           @marker-click="(e, clicks) => onMarkerClick(e, clicks, route)"
         />
         <div
-          v-if="wordCounts[idx] > 0"
+          v-if="!isPreviewMode && wordCounts[idx] > 0"
           class="select-none absolute bottom-0 right-0 bg-main rounded-tl p2 op35 text-xs"
         >
           {{ wordCounts[idx] }} words
         </div>
       </div>
     </main>
-    <div class="absolute top-0 right-0 px3 py1.5 border-b border-l rounded-lb bg-main border-main select-none">
+    <div
+      v-if="!isEmbedded"
+      class="absolute z-2 top-0 right-0 px3 py1.5 border-b border-l rounded-lb bg-main/80 backdrop-blur border-main select-none"
+    >
       <div class="text-xs op50">
         {{ slides.length }} slides ·
         {{ totalClicks + slides.length - 1 }} clicks ·
@@ -259,3 +478,13 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+.overview-slide-block:hover .overview-slide-action {
+  opacity: 0.6;
+}
+
+.overview-slide-action:hover {
+  opacity: 0.8;
+}
+</style>

package/pages/presenter.vue

@@ -436,6 +436,7 @@ onMounted(() => {
   --slidev-presenter-notes-width: 360px;
   --slidev-presenter-notes-row-size: 280px;
   --uno: bg-gray/20 flex-1 of-hidden;
+  position: relative;
   display: grid;
   gap: 1px 1px;
 }
@@ -572,8 +573,6 @@ onMounted(() => {
   top: 0;
   width: 1px;
   height: 100%;
-  background-color: currentColor;
-  opacity: 0.2;
   transform: translateX(-50%);
 }
 
@@ -596,8 +595,6 @@ onMounted(() => {
   top: 0;
   width: 1px;
   height: 100%;
-  background-color: currentColor;
-  opacity: 0.2;
   transform: translateX(-50%);
 }
 </style>

package/setup/code-runners.ts

@@ -1,10 +1,10 @@
 import type { CodeRunner, CodeRunnerOutput, CodeRunnerOutputs, CodeRunnerOutputText } from '@slidev/types'
 import type { CodeToHastOptions } from 'shiki'
 import type ts from 'typescript'
-import deps from '#slidev/monaco-run-deps'
-import setups from '#slidev/setups/code-runners'
 import { createSingletonPromise } from '@antfu/utils'
 import { ref } from 'vue'
+import deps from '#slidev/monaco-run-deps'
+import setups from '#slidev/setups/code-runners'
 import { configs } from '../env'
 
 export default createSingletonPromise(async () => {

package/setup/context-menu.ts

@@ -2,8 +2,8 @@
 
 import type { ContextMenuItem } from '@slidev/types'
 import type { ComputedRef } from 'vue'
-import setups from '#slidev/setups/context-menu'
 import { computed } from 'vue'
+import setups from '#slidev/setups/context-menu'
 import { useDrawings } from '../composables/useDrawings'
 import { useNav } from '../composables/useNav'
 import { fullscreen, showEditor, toggleOverview } from '../state'

package/setup/main.ts

@@ -1,13 +1,14 @@
 import type { AppContext } from '@slidev/types'
 import type { App } from 'vue'
-import setups from '#slidev/setups/main'
 import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import { createHead } from '@unhead/vue/client'
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { createMemoryHistory, createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import setups from '#slidev/setups/main'
 import { createVClickDirectives } from '../modules/v-click'
 import { createVDragDirective } from '../modules/v-drag'
 import { createVMarkDirective } from '../modules/v-mark'
 import { createVMotionDirectives } from '../modules/v-motion'
+import { setupPWA } from '../setup/pwa'
 import setupRoutes from '../setup/routes'
 import '../styles'
 
@@ -21,9 +22,11 @@ export default async function setupMain(app: App) {
   window.addEventListener('resize', setMaxHeight)
 
   const router = createRouter({
-    history: __SLIDEV_HASH_ROUTE__
-      ? createWebHashHistory(import.meta.env.BASE_URL)
-      : createWebHistory(import.meta.env.BASE_URL),
+    history: __SLIDEV_MEMORY_ROUTE__
+      ? createMemoryHistory(import.meta.env.BASE_URL)
+      : __SLIDEV_HASH_ROUTE__
+        ? createWebHashHistory(import.meta.env.BASE_URL)
+        : createWebHistory(import.meta.env.BASE_URL),
     routes: setupRoutes(),
   })
 
@@ -42,4 +45,7 @@ export default async function setupMain(app: App) {
 
   for (const setup of setups)
     await setup(context)
+
+  if (__SLIDEV_FEATURE_PWA__)
+    setupPWA()
 }

package/setup/mermaid.ts

@@ -1,6 +1,6 @@
 import type { MermaidConfig } from 'mermaid'
-import setups from '#slidev/setups/mermaid'
 import { createSingletonPromise } from '@antfu/utils'
+import setups from '#slidev/setups/mermaid'
 
 export default createSingletonPromise(async () => {
   const setupReturn: MermaidConfig = {

package/setup/monaco.ts

@@ -1,14 +1,12 @@
 import type { MonacoSetupReturn } from '@slidev/types'
-import configs from '#slidev/configs'
-import setups from '#slidev/setups/monaco'
 import { createSingletonPromise } from '@antfu/utils'
 import { shikiToMonaco } from '@shikijs/monaco'
 import { setupTypeAcquisition } from '@typescript/ata'
 import * as monaco from 'monaco-editor'
-
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 // @ts-expect-error missing types
 import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices'
+
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
@@ -17,9 +15,11 @@ import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import { ContextViewService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextViewService'
 // @ts-expect-error missing types
 import { SyncDescriptor } from 'monaco-editor/esm/vs/platform/instantiation/common/descriptors'
-
 import ts from 'typescript'
 import { watchEffect } from 'vue'
+
+import configs from '#slidev/configs'
+import setups from '#slidev/setups/monaco'
 import { isDark } from '../logic/dark'
 import { lockShortcuts } from '../state'
 

package/setup/pwa.ts

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+
+export const pwaCaching = ref(false)
+export const pwaReady = ref(false)
+
+export async function setupPWA() {
+  if (!__SLIDEV_FEATURE_PWA__)
+    return
+
+  const { registerSW } = await import('virtual:pwa-register')
+
+  pwaCaching.value = true
+
+  registerSW({
+    immediate: true,
+    onOfflineReady() {
+      pwaCaching.value = false
+      pwaReady.value = true
+      // Auto-dismiss "ready" indicator after 4 seconds
+      setTimeout(() => {
+        pwaReady.value = false
+      }, 4000)
+    },
+    onRegisteredSW(_swUrl, _registration) {
+      // SW registered; caching is in progress until onOfflineReady fires
+    },
+  })
+}

package/setup/root.ts

@@ -1,7 +1,7 @@
-import setups from '#slidev/setups/root'
 import { useHead } from '@unhead/vue'
 import { computed, getCurrentInstance, reactive, ref, shallowRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import setups from '#slidev/setups/root'
 import { createFixedClicks } from '../composables/useClicks'
 import { useEmbeddedControl } from '../composables/useEmbeddedCtrl'
 import { useNav } from '../composables/useNav'

package/setup/shiki.ts

@@ -1,7 +1,7 @@
-import setups from '#slidev/setups/shiki'
 import { createSingletonPromise } from '@antfu/utils'
 import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript'
 import { createBundledHighlighter, createSingletonShorthands } from 'shiki/core'
+import setups from '#slidev/setups/shiki'
 import { resolveShikiOptions, shikiContext } from './shiki-options'
 
 export default createSingletonPromise(async () => {

package/setup/shortcuts.ts

@@ -1,6 +1,6 @@
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
-import setups from '#slidev/setups/shortcuts'
 import { and, not, or } from '@vueuse/math'
+import setups from '#slidev/setups/shortcuts'
 import { useDrawings } from '../composables/useDrawings'
 import { useNav } from '../composables/useNav'
 import { toggleDark } from '../logic/dark'

package/shim-vue.d.ts

@@ -23,6 +23,7 @@ declare module 'vue-router' {
       noteHTML: string
       filepath: string
       start: number
+      sourceIndex: number
       id: number
       no: number
     }

package/shim.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite-plugin-pwa/client" />
+
 declare module '*.md' {
   // with unplugin-vue-markdown, markdowns can be treat as Vue components
   import type { ComponentOptions } from 'vue'