slidev-pane 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 xunz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# slidev-pane
+
+PowerPoint-style pane presenter for Slidev.
+
+## What it does
+
+- Adds a dedicated `/pane-presenter/:no` page with a two-pane layout.
+- Left side shows slide thumbnails.
+- Right side shows the active slide.
+- Keeps Slidev's built-in presenter mode intact.
+- Adds a `Pane` entry to Slidev's standard nav controls.
+- Adds a `p` shortcut to toggle this presenter mode.
+
+## Usage
+
+Install the addon in your Slidev project:
+
+```bash
+pnpm add -D slidev-pane
+```
+
+Then add it to the deck's `package.json`:
+
+```json
+{
+  "slidev": {
+    "addons": ["slidev-pane"]
+  }
+}
+```
+
+Press `p` to enter or leave the pane presenter mode.
+
+## Notes
+
+- This addon keeps Slidev's built-in `/presenter/:no` route unchanged.
+- The pane presenter lives at `/pane-presenter/:no`.
+- It keeps `o` for Slidev's quick overview instead of rebinding it.
+- The implementation depends on Slidev client internals and is pinned to `0.51.x`.

package/components/SidebarGoto.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import TitleRenderer from '#slidev/title-renderer'
+import Fuse from 'fuse.js'
+import { computed, ref, watch } from 'vue'
+import { activeElement, showGotoDialog } from '@slidev/client/state/index.ts'
+import { useNav } from '@slidev/client/composables/useNav.ts'
+import { useSidebarPresenterNav } from '../composables/useSidebarPresenterNav'
+
+const container = ref<HTMLDivElement>()
+const input = ref<HTMLInputElement>()
+const list = ref<HTMLUListElement>()
+const items = ref<HTMLLIElement[]>()
+const text = ref('')
+const selectedIndex = ref(0)
+
+const { slides } = useNav()
+const { goSidebar } = useSidebarPresenterNav()
+
+function notNull<T>(value: T | null | undefined): value is T {
+  return value !== null && value !== undefined
+}
+
+const fuse = computed(() => new Fuse(slides.value.map(i => i.meta?.slide).filter(notNull), {
+  keys: ['no', 'title'],
+  threshold: 0.3,
+  shouldSort: true,
+  minMatchCharLength: 1,
+}))
+
+const path = computed(() => text.value.startsWith('/') ? text.value.substring(1) : text.value)
+const result = computed(() => fuse.value.search(path.value).map(result => result.item))
+const valid = computed(() => !!result.value.length)
+
+function close() {
+  text.value = ''
+  showGotoDialog.value = false
+}
+
+function goTo() {
+  if (valid.value) {
+    const item = result.value.at(selectedIndex.value || 0)
+    if (item)
+      goSidebar(item.no)
+  }
+  close()
+}
+
+function focusDown(event: Event) {
+  event.preventDefault()
+  selectedIndex.value++
+  if (selectedIndex.value >= result.value.length)
+    selectedIndex.value = 0
+  scroll()
+}
+
+function focusUp(event: Event) {
+  event.preventDefault()
+  selectedIndex.value--
+  if (selectedIndex.value <= -2)
+    selectedIndex.value = result.value.length - 1
+  scroll()
+}
+
+function scroll() {
+  const item = items.value?.[selectedIndex.value]
+  if (item && list.value) {
+    if (item.offsetTop + item.offsetHeight > list.value.offsetHeight + list.value.scrollTop) {
+      list.value.scrollTo({
+        behavior: 'smooth',
+        top: item.offsetTop + item.offsetHeight - list.value.offsetHeight + 1,
+      })
+    }
+    else if (item.offsetTop < list.value.scrollTop) {
+      list.value.scrollTo({
+        behavior: 'smooth',
+        top: item.offsetTop,
+      })
+    }
+  }
+}
+
+function updateText(event: Event) {
+  selectedIndex.value = 0
+  text.value = (event.target as HTMLInputElement).value
+}
+
+function select(no: number) {
+  goSidebar(no)
+  close()
+}
+
+watch(showGotoDialog, async (show) => {
+  if (show) {
+    text.value = ''
+    selectedIndex.value = 0
+    setTimeout(() => input.value?.focus(), 0)
+  }
+  else {
+    input.value?.blur()
+  }
+})
+
+watch(activeElement, () => {
+  if (!container.value?.contains(activeElement.value as Node))
+    close()
+})
+</script>
+
+<template>
+  <div
+    id="slidev-goto-dialog"
+    ref="container"
+    class="fixed right-5 transition-all"
+    w-90 max-w-90 min-w-90
+    :class="showGotoDialog ? 'top-5' : '-top-20'"
+  >
+    <div
+      class="bg-main transform"
+      shadow="~"
+      p="x-4 y-2"
+      border="~ transparent rounded dark:main"
+    >
+      <input
+        id="slidev-goto-input"
+        ref="input"
+        :value="text"
+        type="text"
+        :disabled="!showGotoDialog"
+        class="outline-none bg-transparent"
+        placeholder="Goto..."
+        :class="{ 'text-red-400': !valid && text }"
+        @keydown.enter="goTo"
+        @keydown.escape="close"
+        @keydown.down="focusDown"
+        @keydown.up="focusUp"
+        @input="updateText"
+      >
+    </div>
+    <div
+      v-if="result.length > 0"
+      ref="list"
+      class="autocomplete-list"
+      shadow="~"
+      border="~ transparent rounded dark:main"
+    >
+      <ul table w-full border-collapse>
+        <li
+          v-for="(item, index) of result"
+          ref="items"
+          :key="item.id"
+          role="button"
+          tabindex="0"
+          cursor-pointer
+          hover="op100"
+          table-row
+          items-center
+          :border="index === 0 ? undefined : 't main'"
+          :class="selectedIndex === index ? 'bg-active op100' : 'op80'"
+          @click.stop.prevent="select(item.no)"
+        >
+          <div text-right op50 text-sm table-cell py-2 pl-4 pr-3 vertical-middle>
+            {{ item.no }}
+          </div>
+          <TitleRenderer table-cell py-2 pr-4 w-full :no="item.no" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.autocomplete-list {
+  --uno: bg-main mt-1;
+  overflow: auto;
+  max-height: calc(100vh - 100px);
+}
+</style>

package/components/SidebarNavControls.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useDrawings } from '@slidev/client/composables/useDrawings.ts'
+import { useNav } from '@slidev/client/composables/useNav.ts'
+import { configs } from '@slidev/client/env.ts'
+import { isColorSchemaConfigured, isDark, toggleDark } from '@slidev/client/logic/dark.ts'
+import { activeElement, fullscreen, hasViewerCssFilter, showEditor, showInfoDialog, toggleOverview } from '@slidev/client/state/index.ts'
+import { downloadPDF } from '@slidev/client/utils.ts'
+import IconButton from '@slidev/client/internals/IconButton.vue'
+import MenuButton from '@slidev/client/internals/MenuButton.vue'
+import Settings from '@slidev/client/internals/Settings.vue'
+import VerticalDivider from '@slidev/client/internals/VerticalDivider.vue'
+import { useSidebarPresenterNav } from '../composables/useSidebarPresenterNav'
+
+const {
+  currentSlideNo,
+  hasNext,
+  hasPrev,
+  isEmbedded,
+  total,
+} = useNav()
+const {
+  enterClassicPresenter,
+  exitSidebarPresenter,
+  nextSidebar,
+  prevSidebar,
+} = useSidebarPresenterNav()
+const {
+  brush,
+  drawingEnabled,
+  isDrawing,
+} = useDrawings()
+
+const { isFullscreen, toggle: toggleFullscreen } = fullscreen
+const root = ref<HTMLDivElement>()
+
+function onMouseLeave() {
+  if (root.value && activeElement.value && root.value.contains(activeElement.value))
+    activeElement.value.blur()
+}
+
+const wrapperClass = computed(() => isDrawing.value ? 'pointer-events-none' : '')
+</script>
+
+<template>
+  <div
+    class="fixed left-0 bottom-0 z-[45] p-3 transition duration-300 opacity-0 hover:opacity-100 focus-within:opacity-100 focus-visible:opacity-100"
+    :class="wrapperClass"
+  >
+    <nav
+      ref="root"
+      class="pane-nav"
+      @mouseleave="onMouseLeave"
+    >
+      <IconButton v-if="!isEmbedded" :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
+        <div v-if="isFullscreen" class="i-carbon:minimize" />
+        <div v-else class="i-carbon:maximize" />
+      </IconButton>
+      <IconButton :class="{ disabled: !hasPrev }" title="Go to previous slide" @click="prevSidebar">
+        <div class="i-carbon:arrow-left" />
+      </IconButton>
+      <IconButton :class="{ disabled: !hasNext }" title="Go to next slide" @click="nextSidebar">
+        <div class="i-carbon:arrow-right" />
+      </IconButton>
+      <IconButton v-if="!isEmbedded" title="Show slide overview" @click="toggleOverview()">
+        <div class="i-carbon:apps" />
+      </IconButton>
+      <IconButton
+        v-if="!isColorSchemaConfigured"
+        :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
+        @click="toggleDark()"
+      >
+        <carbon-moon v-if="isDark" />
+        <carbon-sun v-else />
+      </IconButton>
+
+      <VerticalDivider />
+
+      <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && !isEmbedded">
+        <IconButton class="relative" :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" @click="drawingEnabled = !drawingEnabled">
+          <div class="i-carbon:pen" />
+          <div
+            v-if="drawingEnabled"
+            class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
+            :style="{ background: brush.color }"
+          />
+        </IconButton>
+        <VerticalDivider />
+      </template>
+
+      <template v-if="!isEmbedded">
+        <IconButton title="Classic Presenter" @click="enterClassicPresenter">
+          <div class="i-carbon:user-speaker" />
+        </IconButton>
+        <IconButton title="Play Mode" @click="exitSidebarPresenter">
+          <div class="i-carbon:presentation-file" />
+        </IconButton>
+
+        <IconButton
+          v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
+          :title="showEditor ? 'Hide editor' : 'Show editor'"
+          class="lt-md:hidden"
+          @click="showEditor = !showEditor"
+        >
+          <div class="i-carbon:text-annotation-toggle" />
+        </IconButton>
+      </template>
+
+      <template v-if="!__DEV__">
+        <IconButton v-if="configs.download" title="Download as PDF" @click="downloadPDF">
+          <div class="i-carbon:download" />
+        </IconButton>
+      </template>
+
+      <template v-if="__SLIDEV_FEATURE_BROWSER_EXPORTER__ && !isEmbedded">
+        <IconButton title="Browser Exporter" to="/export">
+          <div class="i-carbon:document-pdf" />
+        </IconButton>
+      </template>
+
+      <IconButton
+        v-if="configs.info && !isEmbedded"
+        title="Show info"
+        @click="showInfoDialog = !showInfoDialog"
+      >
+        <div class="i-carbon:information" />
+      </IconButton>
+
+      <template v-if="!isEmbedded">
+        <VerticalDivider />
+
+        <MenuButton>
+          <template #button>
+            <IconButton title="More Options">
+              <div class="i-carbon:settings-adjust" />
+              <div v-if="hasViewerCssFilter" w-2 h-2 bg-primary rounded-full absolute top-0.5 right-0.5 />
+            </IconButton>
+          </template>
+          <template #menu>
+            <Settings />
+          </template>
+        </MenuButton>
+      </template>
+
+      <VerticalDivider v-if="!isEmbedded" />
+
+      <div class="pane-nav__counter">
+        <div>
+          {{ currentSlideNo }}
+          <span class="opacity-50">/ {{ total }}</span>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<style scoped>
+.pane-nav {
+  --pane-nav-border: rgba(15, 23, 42, 0.08);
+  --pane-nav-bg: rgba(250, 250, 250, 0.76);
+  --pane-nav-hover: rgba(15, 23, 42, 0.06);
+  --pane-nav-ink: rgba(15, 23, 42, 0.78);
+  --pane-nav-counter: rgba(15, 23, 42, 0.68);
+  display: flex;
+  flex-wrap: wrap-reverse;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.32rem 0.45rem;
+  border-radius: 999px;
+  border: 1px solid var(--pane-nav-border);
+  background: var(--pane-nav-bg);
+  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
+  backdrop-filter: blur(18px);
+  color: var(--pane-nav-ink);
+}
+
+.pane-nav :deep(.slidev-icon-btn) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.95rem;
+  min-width: 1.95rem;
+  height: 1.95rem;
+  border-radius: 999px;
+  font-size: 0.95rem;
+  color: inherit;
+  opacity: 0.9;
+  transition:
+    background-color 150ms ease,
+    transform 150ms ease,
+    opacity 150ms ease,
+    color 150ms ease;
+}
+
+.pane-nav :deep(.slidev-icon-btn:hover) {
+  transform: translateY(-1px);
+  background: var(--pane-nav-hover);
+  opacity: 1;
+}
+
+.pane-nav :deep(.slidev-icon-btn.disabled) {
+  opacity: 0.32;
+}
+
+.pane-nav :deep(.w-1px) {
+  height: 1rem;
+  margin: 0 0.2rem;
+  opacity: 0.12;
+}
+
+.pane-nav__counter {
+  display: flex;
+  align-items: center;
+  height: 1.95rem;
+  padding: 0 0.45rem 0 0.25rem;
+  font-size: 0.76rem;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  color: var(--pane-nav-counter);
+}
+
+:global(html.dark) .pane-nav {
+  --pane-nav-border: rgba(226, 232, 240, 0.08);
+  --pane-nav-bg: rgba(17, 24, 31, 0.76);
+  --pane-nav-hover: rgba(255, 255, 255, 0.08);
+  --pane-nav-ink: rgba(226, 232, 240, 0.86);
+  --pane-nav-counter: rgba(226, 232, 240, 0.72);
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
+}
+</style>

package/components/SidebarQuickOverview.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { computed, ref, watchEffect } from 'vue'
+import { currentOverviewPage, overviewRowCount } from '@slidev/client/logic/overview.ts'
+import { isScreenshotSupported } from '@slidev/client/logic/screenshot.ts'
+import { snapshotManager } from '@slidev/client/logic/snapshot.ts'
+import { breakpoints, showOverview, windowSize } from '@slidev/client/state/index.ts'
+import { CLICKS_MAX } from '@slidev/client/constants.ts'
+import { pathPrefix } from '@slidev/client/env.ts'
+import { createFixedClicks } from '@slidev/client/composables/useClicks.ts'
+import { useNav } from '@slidev/client/composables/useNav.ts'
+import DrawingPreview from '@slidev/client/internals/DrawingPreview.vue'
+import IconButton from '@slidev/client/internals/IconButton.vue'
+import SlideContainer from '@slidev/client/internals/SlideContainer.vue'
+import SlideWrapper from '@slidev/client/internals/SlideWrapper.vue'
+import { useSidebarPresenterNav } from '../composables/useSidebarPresenterNav'
+
+const nav = useNav()
+const { currentSlideNo, slides } = nav
+const { goSidebar } = useSidebarPresenterNav()
+
+function close() {
+  showOverview.value = false
+}
+
+function go(page: number) {
+  goSidebar(page)
+  close()
+}
+
+function focus(page: number) {
+  if (page === currentOverviewPage.value)
+    return true
+  return false
+}
+
+const xs = breakpoints.smaller('xs')
+const sm = breakpoints.smaller('sm')
+
+const padding = 4 * 16 * 2
+const gap = 2 * 16
+const cardWidth = computed(() => {
+  if (xs.value)
+    return windowSize.width.value - padding
+  else if (sm.value)
+    return (windowSize.width.value - padding - gap) / 2
+  return 300
+})
+
+const rowCount = computed(() => {
+  return Math.floor((windowSize.width.value - padding) / (cardWidth.value + gap))
+})
+
+const keyboardBuffer = ref('')
+
+async function captureSlidesOverview() {
+  showOverview.value = false
+  await snapshotManager.startCapturing(nav)
+  showOverview.value = true
+}
+
+useEventListener('keypress', (e) => {
+  if (!showOverview.value) {
+    keyboardBuffer.value = ''
+    return
+  }
+  if (e.key === 'Enter') {
+    e.preventDefault()
+    if (keyboardBuffer.value) {
+      go(+keyboardBuffer.value)
+      keyboardBuffer.value = ''
+    }
+    else {
+      go(currentOverviewPage.value)
+    }
+    return
+  }
+  const num = Number.parseInt(e.key.replace(/\D/g, ''))
+  if (Number.isNaN(num)) {
+    keyboardBuffer.value = ''
+    return
+  }
+  if (!keyboardBuffer.value && num === 0)
+    return
+
+  keyboardBuffer.value += String(num)
+
+  if (+keyboardBuffer.value >= slides.value.length) {
+    keyboardBuffer.value = ''
+    return
+  }
+
+  const extactMatch = slides.value.findIndex(i => `/${i.no}` === keyboardBuffer.value)
+  if (extactMatch !== -1)
+    currentOverviewPage.value = extactMatch + 1
+
+  if (+keyboardBuffer.value * 10 > slides.value.length) {
+    go(+keyboardBuffer.value)
+    keyboardBuffer.value = ''
+  }
+})
+
+watchEffect(() => {
+  currentOverviewPage.value = currentSlideNo.value
+  overviewRowCount.value = rowCount.value
+})
+</script>
+
+<template>
+  <Transition
+    enter-active-class="duration-150 ease-out"
+    enter-from-class="opacity-0 scale-102 !backdrop-blur-0px"
+    leave-active-class="duration-200 ease-in"
+    leave-to-class="opacity-0 scale-102 !backdrop-blur-0px"
+  >
+    <div
+      v-if="showOverview"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-modal bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px select-none"
+      @click="close"
+    >
+      <div
+        class="grid gap-y-4 gap-x-8 w-full"
+        :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
+      >
+        <div
+          v-for="(route, idx) of slides"
+          :key="route.no"
+          class="relative"
+        >
+          <div
+            class="inline-block border rounded overflow-hidden bg-main hover:border-primary transition"
+            :class="(focus(idx + 1) || currentOverviewPage === idx + 1) ? 'border-primary' : 'border-main'"
+            @click="go(route.no)"
+          >
+            <SlideContainer
+              :key="route.no"
+              :no="route.no"
+              :use-snapshot="true"
+              :width="cardWidth"
+              class="pointer-events-none"
+            >
+              <SlideWrapper
+                :clicks-context="createFixedClicks(route, CLICKS_MAX)"
+                :route="route"
+                render-context="overview"
+              />
+              <DrawingPreview :page="route.no" />
+            </SlideContainer>
+          </div>
+          <div
+            class="absolute top-0"
+            :style="`left: ${cardWidth + 5}px`"
+          >
+            <template v-if="keyboardBuffer && String(idx + 1).startsWith(keyboardBuffer)">
+              <span class="text-green font-bold">{{ keyboardBuffer }}</span>
+              <span class="opacity-50">{{ String(idx + 1).slice(keyboardBuffer.length) }}</span>
+            </template>
+            <span v-else class="opacity-50">
+              {{ idx + 1 }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+  <div
+    v-show="showOverview"
+    class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2"
+  >
+    <IconButton title="Close" class="text-2xl" @click="close">
+      <div class="i-carbon:close" />
+    </IconButton>
+    <IconButton
+      v-if="__SLIDEV_FEATURE_PRESENTER__"
+      as="a"
+      title="Slides Overview"
+      target="_blank"
+      :href="`${pathPrefix}overview`"
+      tab-index="-1"
+      class="text-2xl"
+    >
+      <div class="i-carbon:list-boxes" />
+    </IconButton>
+    <IconButton
+      v-if="__DEV__ && isScreenshotSupported"
+      title="Capture slides as images"
+      class="text-2xl"
+      @click="captureSlidesOverview"
+    >
+      <div class="i-carbon:drop-photo" />
+    </IconButton>
+  </div>
+</template>