@slidev/client 0.48.0-beta.12 → 0.48.0-beta.14

package/builtin/ShikiMagicMove.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
+import type { KeyedTokensInfo } from 'shiki-magic-move/types'
+import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { useSlideContext } from '../context'
+import { makeId } from '../logic/utils'
+
+import 'shiki-magic-move/style.css'
+
+const props = defineProps<{
+  steps: KeyedTokensInfo[]
+  at?: string | number
+}>()
+
+const { $clicksContext: clicks, $scale: scale } = useSlideContext()
+const id = makeId()
+const index = ref(0)
+
+onUnmounted(() => {
+  clicks!.unregister(id)
+})
+
+onMounted(() => {
+  if (!clicks || clicks.disabled)
+    return
+
+  const { start, end, delta } = clicks.resolve(props.at || '+1', props.steps.length - 1)
+  clicks.register(id, { max: end, delta })
+
+  watchEffect(() => {
+    if (clicks.disabled)
+      index.value = props.steps.length - 1
+    else
+      index.value = Math.min(Math.max(0, clicks.current - start + 1), props.steps.length - 1)
+  })
+})
+</script>
+
+<template>
+  <div class="slidev-code-wrapper slidev-code-magic-move">
+    <ShikiMagicMovePrecompiled
+      class="slidev-code relative shiki"
+      :steps="steps"
+      :step="index"
+      :options="{ globalScale: scale }"
+    />
+  </div>
+</template>

package/composables/useClicks.ts

@@ -1,16 +1,13 @@
 import { sum } from '@antfu/utils'
 import type { ClicksContext } from '@slidev/types'
 import type { Ref } from 'vue'
-import { ref, shallowReactive } from 'vue'
+import { computed, ref, shallowReactive } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav'
 import { normalizeAtProp } from '../logic/utils'
 import { CLICKS_MAX } from '../constants'
 
-/**
- * @internal
- */
-export function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number): ClicksContext {
+function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
   const map: ClicksContext['map'] = shallowReactive(new Map())
 
@@ -19,7 +16,10 @@ export function useClicksContextBase(getCurrent: () => number, clicksOverrides?:
       return isPrintMode.value && !isPrintWithClicks.value
     },
     get current() {
-      return getCurrent()
+      return current.value
+    },
+    set current(value) {
+      current.value = value
     },
     relativeOffsets,
     map,
@@ -67,9 +67,11 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
   const thisPath = +(route?.path ?? CLICKS_MAX)
-  const context = useClicksContextBase(
-    () => {
-      const currentPath = +(currentRoute.value?.path ?? CLICKS_MAX)
+  const current = computed({
+    get() {
+      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
+      if (!currentPath || Number.isNaN(currentPath))
+        return 0
       if (currentPath === thisPath)
         return queryClicks.value
       else if (currentPath > thisPath)
@@ -77,6 +79,14 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
       else
         return 0
     },
+    set(v) {
+      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
+      if (currentPath === thisPath)
+        queryClicks.value = v
+    },
+  })
+  const context = useClicksContextBase(
+    current,
     route?.meta?.clicks,
   )
   if (route?.meta)
@@ -84,7 +94,6 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
   return context
 }
 
-export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
-  const current = ref(currentInit)
-  return [current, useClicksContextBase(() => current.value, route?.meta?.clicks)]
+export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): ClicksContext {
+  return useClicksContextBase(ref(currentInit), route?.meta?.clicks)
 }

package/context.ts

@@ -1,4 +1,4 @@
-import { shallowRef, toRef } from 'vue'
+import { ref, shallowRef, toRef } from 'vue'
 import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
 import { useFixedClicks } from './composables/useClicks'
 import {
@@ -9,10 +9,11 @@ import {
   injectionFrontmatter,
   injectionRenderContext,
   injectionRoute,
+  injectionSlideScale,
   injectionSlidevContext,
 } from './constants'
 
-const clicksContextFallback = shallowRef(useFixedClicks()[1])
+const clicksContextFallback = shallowRef(useFixedClicks())
 
 /**
  * Get the current slide context, should be called inside the setup function of a component inside slide
@@ -26,6 +27,7 @@ export function useSlideContext() {
   const $renderContext = injectLocal(injectionRenderContext)!
   const $frontmatter = injectLocal(injectionFrontmatter, {})
   const $route = injectLocal(injectionRoute, undefined)
+  const $scale = injectLocal(injectionSlideScale, ref(1))!
 
   return {
     $slidev,
@@ -36,6 +38,7 @@ export function useSlideContext() {
     $route,
     $renderContext,
     $frontmatter,
+    $scale,
   }
 }
 

package/internals/Controls.vue

@@ -2,7 +2,7 @@
 import { shallowRef } from 'vue'
 import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
 import { configs } from '../env'
-import SlidesOverview from './SlidesOverview.vue'
+import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
 
@@ -15,7 +15,7 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
-  <SlidesOverview v-model="showOverview" />
+  <QuickOverview v-model="showOverview" />
   <Goto />
   <WebCamera v-if="WebCamera" />
   <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />

package/internals/DrawingLayer.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { injectLocal } from '@vueuse/core'
 import { drauu, drawingEnabled, loadCanvas } from '../logic/drawings'
-import { injectionSlideScale } from '../constants'
+import { useSlideContext } from '../context'
 
-const scale = injectLocal(injectionSlideScale)!
+const scale = useSlideContext().$scale
 const svg = ref<SVGSVGElement>()
 
 onMounted(() => {

package/internals/IconButton.vue

@@ -2,14 +2,15 @@
 defineProps<{
   title: string
   icon?: string
+  as?: string
 }>()
 </script>
 
 <template>
-  <button class="slidev-icon-btn" :title="title" v-bind="$attrs">
+  <component :is="as || 'button'" class="slidev-icon-btn" :title="title" v-bind="$attrs">
     <span class="sr-only">{{ title }}</span>
     <slot>
       <div :class="icon" />
     </slot>
-  </button>
+  </component>
 </template>

package/internals/NavControls.vue

@@ -114,13 +114,13 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
           :title="showEditor ? 'Hide editor' : 'Show editor'"
-          class="<md:hidden"
+          class="lt-md:hidden"
           @click="showEditor = !showEditor"
         >
           <carbon:text-annotation-toggle />
         </IconButton>
 
-        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" @click="togglePresenterLayout">
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial" @click="togglePresenterLayout">
           <carbon:template />
           {{ presenterLayout }}
         </IconButton>

package/internals/NoteDisplay.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, defineEmits, defineProps, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import type { ClicksContext } from '@slidev/types'
 import { CLICKS_MAX } from '../constants'
 
 const props = defineProps<{
@@ -7,45 +8,103 @@ const props = defineProps<{
   noteHtml?: string
   note?: string
   placeholder?: string
-  clicks?: number | string
+  clicksContext?: ClicksContext
+  autoScroll?: boolean
 }>()
 
 defineEmits(['click'])
 
-const withClicks = computed(() => props.clicks != null && props.noteHtml?.includes('slidev-note-click-mark'))
+const withClicks = computed(() => props.clicksContext?.current != null && props.noteHtml?.includes('slidev-note-click-mark'))
 const noteDisplay = ref<HTMLElement | null>(null)
 
+const CLASS_FADE = 'slidev-note-fade'
+const CLASS_MARKER = 'slidev-note-click-mark'
+
 function highlightNote() {
-  if (!noteDisplay.value || !withClicks.value || props.clicks == null)
+  if (!noteDisplay.value || !withClicks.value || props.clicksContext?.current == null)
     return
 
-  const children = Array.from(noteDisplay.value.querySelectorAll('*'))
-
-  const disabled = +props.clicks < 0 || +props.clicks >= CLICKS_MAX
+  const current = +props.clicksContext?.current ?? CLICKS_MAX
+  const disabled = current < 0 || current >= CLICKS_MAX
   if (disabled) {
-    children.forEach(el => el.classList.remove('slidev-note-fade'))
+    Array.from(noteDisplay.value.querySelectorAll('*'))
+      .forEach(el => el.classList.remove(CLASS_FADE))
     return
   }
 
-  let count = 0
+  const nodeToIgnores = new Set<Element>()
+  function ignoreParent(node: Element) {
+    if (!node || node === noteDisplay.value)
+      return
+    nodeToIgnores.add(node)
+    if (node.parentElement)
+      ignoreParent(node.parentElement)
+  }
 
-  const groups = new Map<number, Element[]>()
+  const markers = Array.from(noteDisplay.value.querySelectorAll(`.${CLASS_MARKER}`)) as HTMLElement[]
+  const markersMap = new Map<number, HTMLElement>()
 
-  for (const child of children) {
-    if (!groups.has(count))
-      groups.set(count, [])
+  // Convert all sibling text nodes to spans, so we attach classes to them
+  for (const marker of markers) {
+    const parent = marker.parentElement!
+    const clicks = Number(marker.dataset!.clicks)
+    markersMap.set(clicks, marker)
+    // Ignore the parents of the marker, so the class only applies to the children
+    ignoreParent(parent)
+    Array.from(parent!.childNodes)
+      .forEach((node) => {
+        if (node.nodeType === 3) { // text node
+          const span = document.createElement('span')
+          span.textContent = node.textContent
+          parent.insertBefore(span, node)
+          node.remove()
+        }
+      })
+  }
+  const children = Array.from(noteDisplay.value.querySelectorAll('*'))
+
+  let count = 0
 
-    groups.get(count)!.push(child)
-    if (child.classList.contains('slidev-note-click-mark'))
+  // Segmenting notes by clicks
+  const segments = new Map<number, Element[]>()
+  for (const child of children) {
+    if (!segments.has(count))
+      segments.set(count, [])
+    segments.get(count)!.push(child)
+    // Update count when reach marker
+    if (child.classList.contains(CLASS_MARKER))
       count = Number((child as HTMLElement).dataset.clicks) || (count + 1)
   }
 
-  for (const [count, els] of groups)
-    els.forEach(el => el.classList.toggle('slidev-note-fade', +count !== +props.clicks!))
+  // Apply
+  for (const [count, els] of segments) {
+    els.forEach(el => el.classList.toggle(
+      CLASS_FADE,
+      nodeToIgnores.has(el)
+        ? false
+        : count !== current,
+    ))
+  }
+
+  for (const [clicks, marker] of markersMap) {
+    marker.classList.remove(CLASS_FADE)
+    marker.classList.toggle(`${CLASS_MARKER}-past`, clicks < current)
+    marker.classList.toggle(`${CLASS_MARKER}-active`, clicks === current)
+    marker.classList.toggle(`${CLASS_MARKER}-next`, clicks === current + 1)
+    marker.classList.toggle(`${CLASS_MARKER}-future`, clicks > current + 1)
+    marker.addEventListener('dblclick', (e) => {
+      props.clicksContext!.current = clicks
+      e.stopPropagation()
+      e.stopImmediatePropagation()
+    })
+
+    if (props.autoScroll && clicks === current)
+      marker.scrollIntoView({ block: 'center', behavior: 'smooth' })
+  }
 }
 
 watch(
-  () => [props.noteHtml, props.clicks],
+  () => [props.noteHtml, props.clicksContext?.current],
   () => {
     nextTick(() => {
       highlightNote()
@@ -70,7 +129,7 @@ onMounted(() => {
   />
   <div
     v-else-if="note"
-    class="prose overflow-auto outline-none"
+    class="prose overflow-auto outline-none slidev-note"
     :class="props.class"
     @click="$emit('click')"
   >
@@ -78,10 +137,16 @@ onMounted(() => {
   </div>
   <div
     v-else
-    class="prose overflow-auto outline-none opacity-50 italic select-none"
+    class="prose overflow-auto outline-none opacity-50 italic select-none slidev-note"
     :class="props.class"
     @click="$emit('click')"
   >
     <p v-text="props.placeholder || 'No notes.'" />
   </div>
 </template>
+
+<style>
+.slidev-note :first-child {
+  margin-top: 0;
+}
+</style>

package/internals/NoteEditor.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { PropType } from 'vue'
 import { nextTick, ref, watch, watchEffect } from 'vue'
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
+import type { ClicksContext } from '@slidev/types'
 import { useDynamicSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
@@ -20,8 +22,8 @@ const props = defineProps({
   placeholder: {
     default: 'No notes for this slide',
   },
-  clicks: {
-    type: [Number, String],
+  clicksContext: {
+    type: Object as PropType<ClicksContext>,
   },
   autoHeight: {
     default: false,
@@ -81,9 +83,7 @@ function calculateHeight() {
 }
 
 const inputHeight = ref<number | null>()
-watchEffect(() => {
-  calculateHeight()
-})
+
 watch(
   note,
   () => {
@@ -91,19 +91,20 @@ watch(
       calculateHeight()
     })
   },
-  { flush: 'post' },
+  { flush: 'post', immediate: true },
 )
 </script>
 
 <template>
   <NoteDisplay
     v-if="!editing"
-    class="my--4 border-transparent border-2"
+    class="border-transparent border-2"
     :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
     :style="props.style"
     :note="note || placeholder"
     :note-html="info?.noteHTML"
-    :clicks="props.clicks"
+    :clicks-context="clicksContext"
+    :auto-scroll="!autoHeight"
   />
   <textarea
     v-else
@@ -114,7 +115,6 @@ watch(
     :style="[props.style, inputHeight != null ? { height: `${inputHeight}px` } : {}]"
     :class="props.class"
     :placeholder="placeholder"
-    @keydown.esc=" editing = false"
-    @focus="editing = true"
+    @keydown.esc="editing = false"
   />
 </template>

package/internals/NoteStatic.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import type { ClicksContext } from 'packages/types'
 import { useSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps<{
   no?: number
   class?: string
-  clicks?: number | string
+  clicksContext?: ClicksContext
 }>()
 
 const { info } = useSlideInfo(props.no)
@@ -16,6 +17,6 @@ const { info } = useSlideInfo(props.no)
     :class="props.class"
     :note="info?.note"
     :note-html="info?.noteHTML"
-    :clicks="props.clicks"
+    :clicks-context="clicksContext"
   />
 </template>

package/internals/OverviewClicksSlider.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
 import type { ClicksContext } from '@slidev/types'
-import type { Ref } from 'vue'
 import { computed } from 'vue'
 import { CLICKS_MAX } from '../constants'
 
 const props = defineProps<{
-  clickContext: [Ref<number>, ClicksContext]
+  clicksContext: ClicksContext
 }>()
 
-const total = computed(() => props.clickContext[1].total)
+const total = computed(() => props.clicksContext.total)
 const current = computed({
   get() {
-    return props.clickContext[0].value > total.value ? -1 : props.clickContext[0].value
+    return props.clicksContext.current > total.value ? -1 : props.clicksContext.current
   },
   set(value: number) {
     // eslint-disable-next-line vue/no-mutating-props
-    props.clickContext[0].value = value
+    props.clicksContext.current = value
   },
 })
 

package/internals/PrintSlide.vue

@@ -9,7 +9,7 @@ const props = defineProps<{ route: RouteRecordRaw }>()
 
 const route = computed(() => props.route)
 const nav = useNav(route)
-const clicks0 = useFixedClicks(route.value, 0)[1]
+const clicks0 = useFixedClicks(route.value, 0)
 </script>
 
 <template>
@@ -19,6 +19,12 @@ const clicks0 = useFixedClicks(route.value, 0)[1]
     :route="route"
   />
   <template v-if="!clicks0.disabled">
-    <PrintSlideClick v-for="i of clicks0.total" :key="i" :clicks-context="useFixedClicks(route, i)[1]" :nav="nav" :route="route" />
+    <PrintSlideClick
+      v-for="i of clicks0.total"
+      :key="i"
+      :clicks-context="useFixedClicks(route, i)"
+      :nav="nav"
+      :route="route"
+    />
   </template>
 </template>

package/internals/{SlidesOverview.vue → QuickOverview.vue}

@@ -140,7 +140,7 @@ watchEffect(() => {
               <SlideWrapper
                 :is="route.component"
                 v-if="route?.component"
-                :clicks-context="useFixedClicks(route, CLICKS_MAX)[1]"
+                :clicks-context="useFixedClicks(route, CLICKS_MAX)"
                 :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
@@ -164,18 +164,19 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex items-center gap-4">
-    <RouterLink
-      v-if="__DEV__"
+  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex flex-col items-center gap-2">
+    <IconButton title="Close" class="text-2xl" @click="close">
+      <carbon:close />
+    </IconButton>
+    <IconButton
+      as="a"
+      title="Slides Overview"
       target="_blank"
-      to="/overview"
+      href="/overview"
       tab-index="-1"
-      class="border-main border px3 py1 rounded hover:bg-gray/5 hover:text-primary"
+      class="text-2xl"
     >
-      List overview
-    </RouterLink>
-    <IconButton title="Close" class="text-2xl" @click="close">
-      <carbon:close />
+      <carbon:list-boxes />
     </IconButton>
   </div>
 </template>

package/internals/RecordingControls.vue

@@ -54,7 +54,7 @@ onMounted(() => {
   </IconButton>
   <MenuButton :disabled="recording">
     <template #button>
-      <IconButton title="Select recording device" class="h-full !text-sm !px-0">
+      <IconButton title="Select recording device" class="h-full !text-sm !px-0 aspect-initial">
         <carbon:chevron-up class="opacity-50" />
       </IconButton>
     </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.12",
+  "version": "0.48.0-beta.14",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -51,11 +51,12 @@
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
+    "shiki-magic-move": "^0.1.0",
     "unocss": "^0.58.5",
-    "vue": "^3.4.19",
+    "vue": "^3.4.20",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.0-beta.12",
-    "@slidev/types": "0.48.0-beta.12"
+    "@slidev/types": "0.48.0-beta.14",
+    "@slidev/parser": "0.48.0-beta.14"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/pages/notes.vue

@@ -51,6 +51,8 @@ function decreaseFontSize() {
         :note="currentRoute?.meta?.slide?.note"
         :note-html="currentRoute?.meta?.slide?.noteHTML"
         :placeholder="`No notes for Slide ${pageNo}.`"
+        :clicks-context="currentRoute?.meta?.__clicksContext"
+        :auto-scroll="true"
       />
     </div>
     <div class="flex-none border-t border-main">

package/pages/overview.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext } from 'packages/types'
-import { themeVars } from '../env'
-import { rawRoutes } from '../logic/nav'
+import { configs, themeVars } from '../env'
+import { openInEditor, rawRoutes } from '../logic/nav'
 import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
@@ -19,8 +18,9 @@ import { CLICKS_MAX } from '../constants'
 
 const cardWidth = 450
 
+const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
-  title: 'List Overview',
+  title: `Overview - ${slideTitle}`,
 })
 
 const blocks: Map<number, HTMLElement> = reactive(new Map())
@@ -30,8 +30,8 @@ const wordCounts = computed(() => rawRoutes.map(route => wordCount(route.meta?.s
 const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
 const totalClicks = computed(() => rawRoutes.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
 
-const clicksContextMap = new WeakMap<RouteRecordRaw, [Ref<number>, ClicksContext]>()
-function getClickContext(route: RouteRecordRaw) {
+const clicksContextMap = new WeakMap<RouteRecordRaw, ClicksContext>()
+function getClicksContext(route: RouteRecordRaw) {
   // We create a local clicks context to calculate the total clicks of the slide
   if (!clicksContextMap.has(route))
     clicksContextMap.set(route, useFixedClicks(route, CLICKS_MAX))
@@ -39,7 +39,7 @@ function getClickContext(route: RouteRecordRaw) {
 }
 
 function getSlideClicks(route: RouteRecordRaw) {
-  return route.meta?.clicks || getClickContext(route)?.[1]?.total
+  return route.meta?.clicks || getClicksContext(route)?.total
 }
 
 function wordCount(str: string) {
@@ -132,10 +132,25 @@ onMounted(() => {
         :ref="el => blocks.set(idx, el as any)"
         class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
       >
-        <div class="select-none w-13 text-right my4">
+        <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
           <div class="text-3xl op20 mb2">
             {{ idx + 1 }}
           </div>
+          <IconButton
+            class="mr--3 op0 group-hover:op80"
+            title="Play in new tab"
+            @click="openSlideInNewTab(route.path)"
+          >
+            <carbon:presentation-file />
+          </IconButton>
+          <IconButton
+            v-if="route.meta?.slide"
+            class="mr--3 op0 group-hover:op80"
+            title="Open in editor"
+            @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
+          >
+            <carbon:cics-program />
+          </IconButton>
         </div>
         <div class="flex flex-col gap-2 my5">
           <div
@@ -152,7 +167,7 @@ onMounted(() => {
               <SlideWrapper
                 :is="route.component"
                 v-if="route?.component"
-                :clicks-context="getClickContext(route)[1]"
+                :clicks-context="getClicksContext(route)"
                 :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
@@ -163,7 +178,7 @@ onMounted(() => {
           <OverviewClicksSlider
             v-if="getSlideClicks(route)"
             mt-2
-            :click-context="getClickContext(route)"
+            :clicks-context="getClicksContext(route)"
             class="w-full"
           />
         </div>
@@ -182,7 +197,7 @@ onMounted(() => {
           class="max-w-250 w-250 text-lg rounded p3"
           :auto-height="true"
           :editing="edittingNote === idx"
-          :clicks="getClickContext(route)[0].value"
+          :clicks-context="getClicksContext(route)"
           @dblclick="edittingNote !== idx ? edittingNote = idx : null"
           @update:editing="edittingNote = null"
         />

package/pages/play.vue

@@ -31,9 +31,9 @@ useSwipeControls(root)
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
-const Editor = shallowRef<any>()
+const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('../internals/Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 const DrawingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__)
@@ -70,8 +70,8 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
     </SlideContainer>
 
-    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor">
-      <Editor :resize="true" />
+    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor">
+      <SideEditor :resize="true" />
     </template>
   </div>
   <Controls />

package/pages/presenter/print.vue

@@ -56,7 +56,10 @@ const slidesWithNote = computed(() => rawRoutes
               <div class="flex-auto" />
             </div>
           </h2>
-          <NoteDisplay :note-html="slide!.noteHTML" class="max-w-full" />
+          <NoteDisplay
+            :note-html="slide!.noteHTML"
+            class="max-w-full"
+          />
         </div>
         <hr v-if="index < slidesWithNote.length - 1" class="border-main mb-8">
       </div>

package/pages/presenter.vue

@@ -14,7 +14,7 @@ import { useFixedClicks } from '../composables/useClicks'
 import SlideWrapper from '../internals/SlideWrapper'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
-import SlidesOverview from '../internals/SlidesOverview.vue'
+import QuickOverview from '../internals/QuickOverview.vue'
 import NoteEditor from '../internals/NoteEditor.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
 import Goto from '../internals/Goto.vue'
@@ -45,16 +45,23 @@ const nextFrame = computed(() => {
   else
     return null
 })
+
 const nextFrameClicksCtx = computed(() => {
   return nextFrame.value && clicksCtxMap[+nextFrame.value[0].path - 1]
 })
-watch([currentRoute, queryClicks], () => {
-  nextFrameClicksCtx.value && (nextFrameClicksCtx.value[0].value = nextFrame.value![1])
-}, { immediate: true })
 
-const Editor = shallowRef<any>()
+watch(
+  [currentRoute, queryClicks],
+  () => {
+    if (nextFrameClicksCtx.value)
+      nextFrameClicksCtx.value.current = nextFrame.value![1]
+  },
+  { immediate: true },
+)
+
+const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('../internals/Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 // sync presenter cursor
 onMounted(() => {
@@ -86,21 +93,6 @@ onMounted(() => {
 <template>
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container" :class="`layout${presenterLayout}`">
-      <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;" alt="Slidev logo">
-        <div class="flex-auto" />
-        <div
-          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
-          opacity="50 hover:100"
-          @click="resetTimer"
-        >
-          <carbon:time class="absolute" />
-          <carbon:renew class="absolute opacity-0" />
-        </div>
-        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
-          {{ timer }}
-        </div>
-      </div>
       <div ref="main" class="relative grid-section main flex flex-col p-2 lg:p-4" :style="themeVars">
         <SlideContainer
           key="main"
@@ -110,8 +102,8 @@ onMounted(() => {
             <SlidesShow render-context="presenter" />
           </template>
         </SlideContainer>
-        <div class="context">
-          current
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Current
         </div>
       </div>
       <div class="relative grid-section next flex flex-col p-2 lg:p-4" :style="themeVars">
@@ -121,30 +113,30 @@ onMounted(() => {
           class="h-full w-full"
         >
           <SlideWrapper
-            :is="nextFrame[0].component as any"
+            :is="(nextFrame[0].component as any)"
             :key="nextFrame[0].path"
-            :clicks-context="nextFrameClicksCtx[1]"
+            :clicks-context="nextFrameClicksCtx"
             :class="getSlideClass(nextFrame[0])"
             :route="nextFrame[0]"
             render-context="previewNext"
           />
         </SlideContainer>
-        <div class="context">
-          next
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Next
         </div>
       </div>
       <!-- Notes -->
-      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor" class="grid-section note of-auto">
-        <Editor />
+      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="grid-section note of-auto">
+        <SideEditor />
       </div>
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
         <NoteEditor
           v-if="__DEV__"
           :key="`edit-${currentSlideId}`"
+          v-model:editing="notesEditing"
           :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
-          :editing="notesEditing"
-          :clicks="clicksContext.current"
+          :clicks-context="clicksContext"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <NoteStatic
@@ -153,7 +145,7 @@ onMounted(() => {
           :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
-          :clicks="clicksContext.current"
+          :clicks-context="clicksContext"
         />
         <div class="border-t border-main py-1 px-2 text-sm">
           <IconButton title="Increase font size" @click="increasePresenterFontSize">
@@ -171,8 +163,20 @@ onMounted(() => {
           </IconButton>
         </div>
       </div>
-      <div class="grid-section bottom">
+      <div class="grid-section bottom flex">
         <NavControls :persist="true" />
+        <div flex-auto />
+        <div
+          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
+          opacity="50 hover:100"
+          @click="resetTimer"
+        >
+          <carbon:time class="absolute" />
+          <carbon:renew class="absolute opacity-0" />
+        </div>
+        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
+          {{ timer }}
+        </div>
       </div>
       <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
     </div>
@@ -184,7 +188,7 @@ onMounted(() => {
     </div>
   </div>
   <Goto />
-  <SlidesOverview v-model="showOverview" />
+  <QuickOverview v-model="showOverview" />
 </template>
 
 <style scoped>
@@ -204,7 +208,7 @@ onMounted(() => {
 }
 
 .grid-container {
-  --uno: bg-active;
+  --uno: bg-gray/20;
   height: 100%;
   width: 100%;
   display: grid;
@@ -213,9 +217,8 @@ onMounted(() => {
 
 .grid-container.layout1 {
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-rows: 2fr 1fr min-content;
   grid-template-areas:
-    'top top'
     'main main'
     'note next'
     'bottom bottom';
@@ -223,9 +226,8 @@ onMounted(() => {
 
 .grid-container.layout2 {
   grid-template-columns: 3fr 2fr;
-  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-rows: 2fr 1fr min-content;
   grid-template-areas:
-    'top top'
     'note main'
     'note next'
     'bottom bottom';
@@ -234,9 +236,8 @@ onMounted(() => {
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;
-    grid-template-rows: min-content 1fr 1fr 1fr min-content;
+    grid-template-rows: 1fr 1fr 1fr min-content;
     grid-template-areas:
-      'top'
       'main'
       'note'
       'next'
@@ -247,9 +248,8 @@ onMounted(() => {
 @media (min-aspect-ratio: 1/1) {
   .grid-container.layout1 {
     grid-template-columns: 1fr 1.1fr 0.9fr;
-    grid-template-rows: min-content 1fr 2fr min-content;
+    grid-template-rows: 1fr 2fr min-content;
     grid-template-areas:
-      'top top top'
       'main main next'
       'main main note'
       'bottom bottom bottom';
@@ -279,10 +279,4 @@ onMounted(() => {
 .grid-section.bottom {
   grid-area: bottom;
 }
-.context {
-  position: absolute;
-  top: 0;
-  left: 0;
-  --uno: px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
-}
 </style>

package/state/index.ts

@@ -5,6 +5,7 @@ import { slideAspect } from '../env'
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)
 export const showGotoDialog = ref(false)
+export const showOverview = ref(false)
 
 export const shortcutsEnabled = ref(true)
 export const breakpoints = useBreakpoints({
@@ -24,7 +25,6 @@ export const currentCamera = useLocalStorage<string>('slidev-camera', 'default',
 export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 
-export const showOverview = useLocalStorage('slidev-show-overview', false, { listenToStorageChanges: false })
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
 export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })

package/styles/index.css

@@ -16,7 +16,11 @@ html {
 }
 
 .slidev-icon-btn {
-  @apply inline-block cursor-pointer select-none !outline-none;
+  aspect-ratio: 1;
+  display: inline-block;
+  user-select: none;
+  outline: none;
+  cursor: pointer;
   @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
   @apply md:p-2;
@@ -70,9 +74,21 @@ html {
 }
 
 .slidev-note-click-mark {
-  font-size: 0.8em;
-  --uno: text-violet bg-violet/10 mx1 px1 font-mono rounded flex flex-inline
-    items-center align-middle;
+  user-select: none;
+  font-size: 0.7em;
+  display: inline-flex;
+  --uno: text-violet bg-violet/10 px1 font-mono rounded items-center border
+    border-transparent;
+}
+.slidev-note-click-mark.slidev-note-click-mark-active {
+  --uno: border border-violet;
+}
+.slidev-note-click-mark.slidev-note-click-mark-past {
+  filter: saturate(0);
+  opacity: 0.5;
+}
+.slidev-note-click-mark.slidev-note-click-mark-future {
+  opacity: 0.5;
 }
 
 .slidev-note-click-mark::before {