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

package/builtin/TocList.vue

@@ -10,7 +10,7 @@ Usage:
 import { computed } from 'vue'
 import { toArray } from '@antfu/utils'
 import type { TocItem } from '@slidev/types'
-import Titles from '/@slidev/titles.md'
+import Titles from '#slidev/titles.md'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -65,7 +65,8 @@ const styles = computed(() => {
 .slidev-layout .slidev-toc-item p {
   margin: 0;
 }
-.slidev-layout .slidev-toc-item div, .slidev-layout .slidev-toc-item div p {
+.slidev-layout .slidev-toc-item div,
+.slidev-layout .slidev-toc-item div p {
   display: initial;
 }
 </style>

package/builtin/VClick.ts

@@ -6,6 +6,7 @@
 
 import type { PropType, VNode } from 'vue'
 import { Text, defineComponent, h } from 'vue'
+import { CLICKS_MAX } from '../constants'
 import VClicks from './VClicks'
 
 export default defineComponent({
@@ -31,7 +32,7 @@ export default defineComponent({
     return h(
       VClicks,
       {
-        every: 99999,
+        every: CLICKS_MAX,
         at: this.at,
         hide: this.hide,
         fade: this.fade,

package/composables/useClicks.ts

@@ -5,8 +5,12 @@ import { 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'
 
-function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number): ClicksContext {
+/**
+ * @internal
+ */
+export function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
   const map: ClicksContext['map'] = shallowReactive(new Map())
 
@@ -62,14 +66,14 @@ function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number
 export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksContext {
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
-  const thisPath = +(route?.path ?? 99999)
+  const thisPath = +(route?.path ?? CLICKS_MAX)
   const context = useClicksContextBase(
     () => {
-      const currentPath = +(currentRoute.value?.path ?? 99999)
+      const currentPath = +(currentRoute.value?.path ?? CLICKS_MAX)
       if (currentPath === thisPath)
         return queryClicks.value
       else if (currentPath > thisPath)
-        return 99999
+        return CLICKS_MAX
       else
         return 0
     },

package/constants.ts

@@ -22,6 +22,8 @@ export const CLASS_VCLICK_HIDDEN_EXP = 'slidev-vclick-hidden-explicitly'
 export const CLASS_VCLICK_CURRENT = 'slidev-vclick-current'
 export const CLASS_VCLICK_PRIOR = 'slidev-vclick-prior'
 
+export const CLICKS_MAX = 999999
+
 export const TRUST_ORIGINS = [
   'localhost',
   '127.0.0.1',

package/env.ts

@@ -1,15 +1,12 @@
-import type { SlidevConfig } from '@slidev/types'
-import type { UnwrapNestedRefs } from 'vue'
 import { computed } from 'vue'
 import { objectMap } from '@antfu/utils'
+import configs from '#slidev/configs'
 
-// @ts-expect-error missing types
-import _configs from '/@slidev/configs'
-import type { SlidevContext } from './modules/context'
+export { configs }
 
-export const configs = _configs as SlidevConfig
 export const slideAspect = configs.aspectRatio ?? (16 / 9)
 export const slideWidth = configs.canvasWidth ?? 980
+
 // To honor the aspect ratio more as possible, we need to approximate the height to the next integer.
 // Doing this, we will prevent on print, to create an additional empty white page after each page.
 export const slideHeight = Math.ceil(slideWidth / slideAspect)
@@ -17,9 +14,3 @@ export const slideHeight = Math.ceil(slideWidth / slideAspect)
 export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])
 })
-
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    $slidev: UnwrapNestedRefs<SlidevContext>
-  }
-}

package/internals/DrawingControls.vue

@@ -131,10 +131,8 @@ function setBrushColor(color: typeof brush.color) {
   </Draggable>
 </template>
 
-<style lang="postcss">
-.v-popper--theme-menu {
-  .v-popper__arrow-inner {
-    @apply border-main;
-  }
+<style>
+.v-popper--theme-menu .v-popper__arrow-inner {
+  --uno: border-main;
 }
 </style>

package/internals/Goto.vue

@@ -3,7 +3,7 @@ import { computed, ref, watch } from 'vue'
 import Fuse from 'fuse.js'
 import { go, rawRoutes } from '../logic/nav'
 import { activeElement, showGotoDialog } from '../state'
-import Titles from '/@slidev/titles.md'
+import Titles from '#slidev/titles.md'
 
 const container = ref<HTMLDivElement>()
 const input = ref<HTMLInputElement>()
@@ -165,10 +165,11 @@ watch(activeElement, () => {
   </div>
 </template>
 
-<style scoped lang="postcss">
+<style scoped>
 .autocomplete-list {
-  @apply bg-main transform mt-1 overflow-auto;
-  max-height: calc( 100vh - 100px );
+  --uno: bg-main mt-1;
+  overflow: auto;
+  max-height: calc(100vh - 100px);
 }
 
 .autocomplete {

package/internals/NavControls.vue

@@ -10,8 +10,7 @@ import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
 import IconButton from './IconButton.vue'
 
-// @ts-expect-error virtual module
-import CustomNavControls from '/@slidev/custom-nav-controls'
+import CustomNavControls from '#slidev/custom-nav-controls'
 
 const props = defineProps({
   persist: {

package/internals/NoteDisplay.vue

@@ -1,19 +1,70 @@
 <script setup lang="ts">
+import { computed, defineEmits, defineProps, nextTick, onMounted, ref, watch } from 'vue'
+import { CLICKS_MAX } from '../constants'
+
 const props = defineProps<{
   class?: string
   noteHtml?: string
   note?: string
   placeholder?: string
+  clicks?: number | string
 }>()
 
 defineEmits(['click'])
+
+const withClicks = computed(() => props.clicks != null && props.noteHtml?.includes('slidev-note-click-mark'))
+const noteDisplay = ref<HTMLElement | null>(null)
+
+function highlightNote() {
+  if (!noteDisplay.value || !withClicks.value || props.clicks == null)
+    return
+
+  const children = Array.from(noteDisplay.value.querySelectorAll('*'))
+
+  const disabled = +props.clicks < 0 || +props.clicks >= CLICKS_MAX
+  if (disabled) {
+    children.forEach(el => el.classList.remove('slidev-note-fade'))
+    return
+  }
+
+  let count = 0
+
+  const groups = new Map<number, Element[]>()
+
+  for (const child of children) {
+    if (!groups.has(count))
+      groups.set(count, [])
+
+    groups.get(count)!.push(child)
+    if (child.classList.contains('slidev-note-click-mark'))
+      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!))
+}
+
+watch(
+  () => [props.noteHtml, props.clicks],
+  () => {
+    nextTick(() => {
+      highlightNote()
+    })
+  },
+  { immediate: true },
+)
+
+onMounted(() => {
+  highlightNote()
+})
 </script>
 
 <template>
   <div
     v-if="noteHtml"
-    class="prose overflow-auto outline-none"
-    :class="props.class"
+    ref="noteDisplay"
+    class="prose overflow-auto outline-none slidev-note"
+    :class="[props.class, withClicks ? 'slidev-note-with-clicks' : '']"
     @click="$emit('click')"
     v-html="noteHtml"
   />

package/internals/NoteEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { nextTick, ref, watch, watchEffect } from 'vue'
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
-import { ref, watch, watchEffect } from 'vue'
 import { useDynamicSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 
@@ -20,6 +20,12 @@ const props = defineProps({
   placeholder: {
     default: 'No notes for this slide',
   },
+  clicks: {
+    type: [Number, String],
+  },
+  autoHeight: {
+    default: false,
+  },
 })
 
 const emit = defineEmits([
@@ -66,6 +72,27 @@ watchEffect(() => {
 onClickOutside(input, () => {
   editing.value = false
 })
+
+function calculateHeight() {
+  if (!props.autoHeight || !input.value || !editing.value)
+    return
+  if (input.value.scrollHeight > input.value.clientHeight)
+    input.value.style.height = `${input.value.scrollHeight}px`
+}
+
+const inputHeight = ref<number | null>()
+watchEffect(() => {
+  calculateHeight()
+})
+watch(
+  note,
+  () => {
+    nextTick(() => {
+      calculateHeight()
+    })
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
@@ -76,6 +103,7 @@ onClickOutside(input, () => {
     :style="props.style"
     :note="note || placeholder"
     :note-html="info?.noteHTML"
+    :clicks="props.clicks"
   />
   <textarea
     v-else
@@ -83,7 +111,7 @@ onClickOutside(input, () => {
     v-model="note"
     class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
     style="line-height: 1.75;"
-    :style="props.style"
+    :style="[props.style, inputHeight != null ? { height: `${inputHeight}px` } : {}]"
     :class="props.class"
     :placeholder="placeholder"
     @keydown.esc=" editing = false"

package/internals/NoteStatic.vue

@@ -5,6 +5,7 @@ import NoteDisplay from './NoteDisplay.vue'
 const props = defineProps<{
   no?: number
   class?: string
+  clicks?: number | string
 }>()
 
 const { info } = useSlideInfo(props.no)
@@ -15,5 +16,6 @@ const { info } = useSlideInfo(props.no)
     :class="props.class"
     :note="info?.note"
     :note-html="info?.noteHTML"
+    :clicks="props.clicks"
   />
 </template>

package/internals/OverviewClicksSlider.vue

@@ -0,0 +1,92 @@
+<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]
+}>()
+
+const total = computed(() => props.clickContext[1].total)
+const current = computed({
+  get() {
+    return props.clickContext[0].value > total.value ? -1 : props.clickContext[0].value
+  },
+  set(value: number) {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.clickContext[0].value = value
+  },
+})
+
+const range = computed(() => Array.from({ length: total.value + 1 }, (_, i) => i))
+
+function onMousedown() {
+  if (current.value < 0 || current.value > total.value)
+    current.value = 0
+}
+</script>
+
+<template>
+  <div
+    class="flex gap-0.5 items-center select-none"
+    :title="`Clicks in this slide: ${total}`"
+  >
+    <div class="flex gap-1 items-center min-w-16">
+      <carbon:cursor-1 text-sm op50 />
+      <span v-if="current <= total && current >= 0" text-primary>{{ current }}/</span>
+      <span op50>{{ total }}</span>
+    </div>
+    <div
+      relative flex-auto h5 flex="~"
+      @dblclick="current = CLICKS_MAX"
+    >
+      <div
+        v-for="i of range" :key="i"
+        border="y main" of-hidden relative
+        :class="[
+          i === 0 ? 'rounded-l border-l' : '',
+          i === total ? 'rounded-r border-r' : '',
+        ]"
+        :style="{ width: `${1 / total * 100}%` }"
+      >
+        <div absolute inset-0 z--1 :class=" i <= current ? 'bg-primary op20' : ''" />
+        <div
+          :class="[
+            +i === +current ? 'text-primary font-bold op100 border-primary' : 'op30 border-main',
+            i === 0 ? 'rounded-l' : '',
+            i === total ? 'rounded-r' : 'border-r-2',
+          ]"
+          w-full h-full text-xs flex items-center justify-center
+        >
+          {{ i }}
+        </div>
+      </div>
+      <input
+        v-model="current"
+        class="range" absolute inset-0
+        type="range" :min="0" :max="total" :step="1" z-10 op0
+        :style="{ '--thumb-width': `${1 / (total + 1) * 100}%` }"
+        @mousedown="onMousedown"
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.range {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 100%;
+  width: var(--thumb-width, 0.5rem);
+}
+
+.range::-moz-range-thumb {
+  height: 100%;
+  width: var(--thumb-width, 0.5rem);
+}
+</style>

package/internals/PrintSlideClick.vue

@@ -9,11 +9,8 @@ import { getSlideClass } from '../utils'
 import type { SlidevContextNav } from '../modules/context'
 import SlideWrapper from './SlideWrapper'
 
-// @ts-expect-error virtual module
-import GlobalTop from '/@slidev/global-components/top'
-
-// @ts-expect-error virtual module
-import GlobalBottom from '/@slidev/global-components/bottom'
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
 
 const props = defineProps<{
   clicksContext: ClicksContext

package/internals/RecordingDialog.vue

@@ -108,18 +108,18 @@ async function start() {
     }
   }
 
-  input[type="text"] {
+  input[type='text'] {
     @apply border border-main rounded px-2 py-1;
   }
 
   button {
     @apply bg-orange-400 text-white px-4 py-1 rounded border-b-2 border-orange-600;
-    @apply hover:(bg-orange-500 border-orange-700)
+    @apply hover:(bg-orange-500 border-orange-700);
   }
 
   button.cancel {
     @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
-    @apply hover:(bg-opacity-75 border-opacity-75)
+    @apply hover:(bg-opacity-75 border-opacity-75);
   }
 }
 </style>

package/internals/SlideContainer.vue

@@ -3,7 +3,7 @@ import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { isPrintMode } from '../logic/nav'
+import { clicksDirection, isPrintMode } from '../logic/nav'
 
 const props = defineProps({
   width: {
@@ -55,6 +55,8 @@ const style = computed(() => ({
 
 const className = computed(() => ({
   'select-none': !configs.selectable,
+  'slidev-nav-go-forward': clicksDirection.value > 0,
+  'slidev-nav-go-backward': clicksDirection.value < 0,
 }))
 
 if (props.isMain) {
@@ -69,8 +71,8 @@ provideLocal(injectionSlideScale, scale as any)
 </script>
 
 <template>
-  <div id="slide-container" ref="root" :class="className">
-    <div id="slide-content" :style="style">
+  <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
+    <div id="slide-content" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />

package/internals/SlidesOverview.vue

@@ -7,6 +7,7 @@ import { currentPage, go as goSlide, rawRoutes } from '../logic/nav'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { useFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
+import { CLICKS_MAX } from '../constants'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'
@@ -139,7 +140,7 @@ watchEffect(() => {
               <SlideWrapper
                 :is="route.component"
                 v-if="route?.component"
-                :clicks-context="useFixedClicks(route, 99999)[1]"
+                :clicks-context="useFixedClicks(route, CLICKS_MAX)[1]"
                 :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"

package/internals/SlidesShow.vue

@@ -6,14 +6,11 @@ import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../composables/hmr'
 import { usePrimaryClicks } from '../composables/useClicks'
 import SlideWrapper from './SlideWrapper'
-
-// @ts-expect-error virtual module
-import GlobalTop from '/@slidev/global-components/top'
-
-// @ts-expect-error virtual module
-import GlobalBottom from '/@slidev/global-components/bottom'
 import PresenterMouse from './PresenterMouse.vue'
 
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
+
 defineProps<{
   renderContext: 'slide' | 'presenter'
 }>()
@@ -77,10 +74,12 @@ function onAfterLeave() {
 
 <style scoped>
 #slideshow {
-  @apply h-full;
+  height: 100%;
 }
 
 #slideshow > div {
-  @apply h-full w-full absolute;
+  position: absolute;
+  height: 100%;
+  width: 100%;
 }
 </style>

package/layouts/two-cols-header.vue

@@ -51,9 +51,15 @@ const props = defineProps({
   grid-template-rows: repeat(2, 1fr);
 }
 
-.col-header { grid-area: 1 / 1 / 2 / 3; }
-.col-left { grid-area: 2 / 1 / 3 / 2; }
-.col-right { grid-area: 2 / 2 / 3 / 3; }
+.col-header {
+  grid-area: 1 / 1 / 2 / 3;
+}
+.col-left {
+  grid-area: 2 / 1 / 3 / 2;
+}
+.col-right {
+  grid-area: 2 / 2 / 3 / 3;
+}
 .col-bottom {
   align-self: end;
   grid-area: 3 / 1 / 3 / 3;

package/logic/nav.ts

@@ -7,6 +7,7 @@ import { rawRoutes, router } from '../routes'
 import { configs } from '../env'
 import { skipTransition } from '../composables/hmr'
 import { usePrimaryClicks } from '../composables/useClicks'
+import { CLICKS_MAX } from '../constants'
 import { useRouteQuery } from './route'
 import { isDrawing } from './drawings'
 
@@ -22,6 +23,7 @@ nextTick(() => {
 })
 
 export const navDirection = ref(0)
+export const clicksDirection = ref(0)
 
 export const route = computed(() => router.currentRoute.value)
 
@@ -38,7 +40,7 @@ export const queryClicks = computed({
   get() {
     // eslint-disable-next-line ts/no-use-before-define
     if (clicksContext.value.disabled)
-      return 99999
+      return CLICKS_MAX
     let v = +(queryClicksRaw.value || 0)
     if (Number.isNaN(v))
       v = 0
@@ -84,6 +86,7 @@ watch(currentRoute, (next, prev) => {
 })
 
 export async function next() {
+  clicksDirection.value = 1
   if (clicksTotal.value <= queryClicks.value)
     await nextSlide()
   else
@@ -91,6 +94,7 @@ export async function next() {
 }
 
 export async function prev() {
+  clicksDirection.value = -1
   if (queryClicks.value <= 0)
     await prevSlide()
   else
@@ -102,11 +106,13 @@ export function getPath(no: number | string) {
 }
 
 export async function nextSlide() {
+  clicksDirection.value = 1
   if (currentPage.value < rawRoutes.length)
     await go(currentPage.value + 1)
 }
 
 export async function prevSlide(lastClicks = true) {
+  clicksDirection.value = -1
   const next = Math.max(1, currentPage.value - 1)
   await go(next)
   if (lastClicks && clicksTotal.value)

package/main.ts

@@ -1,3 +1,5 @@
+/// <reference types="@slidev/types/client" />
+
 import { createApp } from 'vue'
 import { createHead } from '@unhead/vue'
 import App from './App.vue'
@@ -7,7 +9,7 @@ import { createVClickDirectives } from './modules/v-click'
 import { createVMarkDirective } from './modules/v-mark'
 import { createSlidevContext } from './modules/context'
 
-import '/@slidev/styles'
+import '#slidev/styles'
 
 const app = createApp(App)
 app.use(router)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.10",
+  "version": "0.48.0-beta.12",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -54,8 +54,8 @@
     "unocss": "^0.58.5",
     "vue": "^3.4.19",
     "vue-router": "^4.3.0",
-    "@slidev/types": "0.48.0-beta.10",
-    "@slidev/parser": "0.48.0-beta.10"
+    "@slidev/parser": "0.48.0-beta.12",
+    "@slidev/types": "0.48.0-beta.12"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/pages/overview.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, ref } from 'vue'
+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 { useFixedClicks } from '../composables/useClicks'
@@ -11,6 +14,8 @@ import SlideWrapper from '../internals/SlideWrapper'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
 import NoteEditor from '../internals/NoteEditor.vue'
+import OverviewClicksSlider from '../internals/OverviewClicksSlider.vue'
+import { CLICKS_MAX } from '../constants'
 
 const cardWidth = 450
 
@@ -21,6 +26,25 @@ useHead({
 const blocks: Map<number, HTMLElement> = reactive(new Map())
 const activeBlocks = ref<number[]>([])
 const edittingNote = ref<number | null>(null)
+const wordCounts = computed(() => rawRoutes.map(route => wordCount(route.meta?.slide?.note || '')))
+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) {
+  // 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))
+  return clicksContextMap.get(route)!
+}
+
+function getSlideClicks(route: RouteRecordRaw) {
+  return route.meta?.clicks || getClickContext(route)?.[1]?.total
+}
+
+function wordCount(str: string) {
+  return str.match(/[\w\d\’\'-]+/gi)?.length || 0
+}
 
 function isElementInViewport(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
@@ -109,31 +133,39 @@ onMounted(() => {
         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="text-3xl op20">
+          <div class="text-3xl op20 mb2">
             {{ idx + 1 }}
           </div>
         </div>
-        <div
-          class="border rounded border-main overflow-hidden bg-main my5 select-none h-max"
-          :style="themeVars"
-          @dblclick="openSlideInNewTab(route.path)"
-        >
-          <SlideContainer
-            :key="route.path"
-            :width="cardWidth"
-            :clicks-disabled="true"
-            class="pointer-events-none important:[&_*]:select-none"
+        <div class="flex flex-col gap-2 my5">
+          <div
+            class="border rounded border-main overflow-hidden bg-main select-none h-max"
+            :style="themeVars"
+            @dblclick="openSlideInNewTab(route.path)"
           >
-            <SlideWrapper
-              :is="route.component"
-              v-if="route?.component"
-              :clicks-context="useFixedClicks(route, 99999)[1]"
-              :class="getSlideClass(route)"
-              :route="route"
-              render-context="overview"
-            />
-            <DrawingPreview :page="+route.path" />
-          </SlideContainer>
+            <SlideContainer
+              :key="route.path"
+              :width="cardWidth"
+              :clicks-disabled="true"
+              class="pointer-events-none important:[&_*]:select-none"
+            >
+              <SlideWrapper
+                :is="route.component"
+                v-if="route?.component"
+                :clicks-context="getClickContext(route)[1]"
+                :class="getSlideClass(route)"
+                :route="route"
+                render-context="overview"
+              />
+              <DrawingPreview :page="+route.path" />
+            </SlideContainer>
+          </div>
+          <OverviewClicksSlider
+            v-if="getSlideClicks(route)"
+            mt-2
+            :click-context="getClickContext(route)"
+            class="w-full"
+          />
         </div>
         <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
           <IconButton
@@ -148,10 +180,26 @@ onMounted(() => {
         <NoteEditor
           :no="idx"
           class="max-w-250 w-250 text-lg rounded p3"
+          :auto-height="true"
           :editing="edittingNote === idx"
+          :clicks="getClickContext(route)[0].value"
+          @dblclick="edittingNote !== idx ? edittingNote = idx : null"
           @update:editing="edittingNote = null"
         />
+        <div
+          v-if="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 class="text-xs op50">
+        {{ rawRoutes.length }} slides ·
+        {{ totalClicks + rawRoutes.length - 1 }} clicks ·
+        {{ totalWords }} words
+      </div>
+    </div>
   </div>
 </template>

package/pages/presenter.vue

@@ -144,6 +144,7 @@ onMounted(() => {
           :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :editing="notesEditing"
+          :clicks="clicksContext.current"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <NoteStatic
@@ -152,6 +153,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"
         />
         <div class="border-t border-main py-1 px-2 text-sm">
           <IconButton title="Increase font size" @click="increasePresenterFontSize">
@@ -185,26 +187,26 @@ onMounted(() => {
   <SlidesOverview v-model="showOverview" />
 </template>
 
-<style lang="postcss" scoped>
+<style scoped>
 .slidev-presenter {
   --slidev-controls-foreground: current;
 }
 
-.timer-btn:hover {
-  & > :first-child {
-    @apply opacity-0;
-  }
-  & > :last-child {
-    @apply opacity-100;
-  }
+.timer-btn:hover > :first-child {
+  opacity: 0;
+}
+.timer-btn:hover > :last-child {
+  opacity: 1;
 }
 
 .section-title {
-  @apply px-4 py-2 text-xl;
+  --uno: px-4 py-2 text-xl;
 }
 
 .grid-container {
-  @apply h-full w-full bg-gray-400 bg-opacity-15;
+  --uno: bg-active;
+  height: 100%;
+  width: 100%;
   display: grid;
   gap: 1px 1px;
 }
@@ -213,20 +215,20 @@ onMounted(() => {
   grid-template-columns: 1fr 1fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "main main"
-    "note next"
-    "bottom bottom";
+    'top top'
+    'main main'
+    'note next'
+    'bottom bottom';
 }
 
 .grid-container.layout2 {
   grid-template-columns: 3fr 2fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "note main"
-    "note next"
-    "bottom bottom";
+    'top top'
+    'note main'
+    'note next'
+    'bottom bottom';
 }
 
 @media (max-aspect-ratio: 3/5) {
@@ -234,11 +236,11 @@ onMounted(() => {
     grid-template-columns: 1fr;
     grid-template-rows: min-content 1fr 1fr 1fr min-content;
     grid-template-areas:
-      "top"
-      "main"
-      "note"
-      "next"
-      "bottom";
+      'top'
+      'main'
+      'note'
+      'next'
+      'bottom';
   }
 }
 
@@ -247,38 +249,40 @@ onMounted(() => {
     grid-template-columns: 1fr 1.1fr 0.9fr;
     grid-template-rows: min-content 1fr 2fr min-content;
     grid-template-areas:
-      "top top top"
-      "main main next"
-      "main main note"
-      "bottom bottom bottom";
+      'top top top'
+      'main main next'
+      'main main note'
+      'bottom bottom bottom';
   }
 }
 
 .progress-bar {
-  @apply fixed left-0 right-0 bottom-0;
+  --uno: fixed left-0 right-0 bottom-0;
 }
 
 .grid-section {
-  @apply bg-main;
-
-  &.top {
-    grid-area: top;
-  }
-  &.main {
-    grid-area: main;
-  }
-  &.next {
-    grid-area: next;
-  }
-  &.note {
-    grid-area: note;
-  }
-  &.bottom {
-    grid-area: bottom;
-  }
+  --uno: bg-main;
 }
 
+.grid-section.top {
+  grid-area: top;
+}
+.grid-section.main {
+  grid-area: main;
+}
+.grid-section.next {
+  grid-area: next;
+}
+.grid-section.note {
+  grid-area: note;
+}
+.grid-section.bottom {
+  grid-area: bottom;
+}
 .context {
-  @apply absolute top-0 left-0 px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
+  position: absolute;
+  top: 0;
+  left: 0;
+  --uno: px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
 }
 </style>

package/routes.ts

@@ -1,15 +1,10 @@
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-import type { TransitionGroupProps } from 'vue'
-import type { ClicksContext, SlideInfo } from '@slidev/types'
 
-// @ts-expect-error missing types
-import _rawRoutes, { redirects } from '/@slidev/routes'
+import { rawRoutes, redirects } from '#slidev/routes'
+import configs from '#slidev/configs'
 
-// @ts-expect-error missing types
-import _configs from '/@slidev/configs'
-
-export const rawRoutes = _rawRoutes as RouteRecordRaw[]
+export { rawRoutes }
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -34,12 +29,12 @@ export const routes: RouteRecordRaw[] = [
 
 if (__SLIDEV_FEATURE_PRESENTER__) {
   function passwordGuard(to: RouteLocationNormalized) {
-    if (!_configs.remote || _configs.remote === to.query.password)
+    if (!configs.remote || configs.remote === to.query.password)
       return true
-    if (_configs.remote && to.query.password === undefined) {
+    if (configs.remote && to.query.password === undefined) {
       // eslint-disable-next-line no-alert
       const password = prompt('Enter password')
-      if (_configs.remote === password)
+      if (configs.remote === password)
         return true
     }
     if (to.params.no)
@@ -87,28 +82,3 @@ export const router = createRouter({
     : createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
-
-declare module 'vue-router' {
-  interface RouteMeta {
-    // inherited from frontmatter
-    layout: string
-    name?: string
-    class?: string
-    clicks?: number
-    transition?: string | TransitionGroupProps | undefined
-    preload?: boolean
-
-    // slide info
-    slide?: Omit<SlideInfo, 'source'> & {
-      noteHTML: string
-      filepath: string
-      start: number
-      id: number
-      no: number
-    }
-
-    // private fields
-    __clicksContext: null | ClicksContext
-    __preloaded?: boolean
-  }
-}

package/shim-vue.d.ts

@@ -0,0 +1,35 @@
+declare module 'vue' {
+  import type { UnwrapNestedRefs } from 'vue'
+  import type { SlidevContext } from './modules/context'
+
+  interface ComponentCustomProperties {
+    $slidev: UnwrapNestedRefs<SlidevContext>
+  }
+}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    // inherited from frontmatter
+    layout: string
+    name?: string
+    class?: string
+    clicks?: number
+    transition?: string | TransitionGroupProps | undefined
+    preload?: boolean
+
+    // slide info
+    slide?: Omit<SlideInfo, 'source'> & {
+      noteHTML: string
+      filepath: string
+      start: number
+      id: number
+      no: number
+    }
+
+    // private fields
+    __clicksContext: null | ClicksContext
+    __preloaded?: boolean
+  }
+}
+
+export {}

package/shim.d.ts

@@ -1,9 +1,3 @@
-declare interface Window {
-  // extend the window
-}
-
-declare module '*.vue';
-
 // with unplugin-vue-markdown, markdowns can be treat as Vue components
 declare module '*.md' {
   import type { ComponentOptions } from 'vue'
@@ -12,12 +6,6 @@ declare module '*.md' {
   export default component
 }
 
-declare module '/@slidev/configs' {
-  import { SlidevConfig } from '@slidev/types'
-
-  export default SlidevConfig
-}
-
 declare module 'mermaid/dist/mermaid.esm.mjs' {
   import Mermaid from 'mermaid/dist/mermaid.d.ts'
 

package/styles/code.css

@@ -59,7 +59,9 @@ html:not(.dark) .shiki span {
 .slidev-code-line-numbers .slidev-code code .line::before {
   content: counter(step);
   counter-increment: step;
-  @apply w-4 mr-6 inline-block text-right text-gray-400 dark:text-gray-600;
+  display: inline-block;
+  text-align: right;
+  --uno: w-4 mr-6 text-gray-400 dark-text-gray-600;
 }
 
 /* Inline Code */
@@ -67,7 +69,7 @@ html:not(.dark) .shiki span {
   font-size: 0.9em;
   background: var(--slidev-code-background);
   border-radius: var(--slidev-code-radius);
-  @apply font-light py-0.5 px-1.5;
+  --uno: font-light py-0.5 px-1.5;
 }
 
 .slidev-layout :not(pre) > code:before {
@@ -82,4 +84,6 @@ html:not(.dark) .shiki span {
 }
 
 /* CodeMirror */
-.CodeMirror pre.CodeMirror-placeholder { opacity: 0.4; }
+.CodeMirror pre.CodeMirror-placeholder {
+  opacity: 0.4;
+}

package/styles/index.css

@@ -23,15 +23,16 @@ html {
 }
 
 .slidev-icon-btn.shallow {
-  @apply opacity-30
+  opacity: 0.3;
 }
 
 .slidev-icon-btn.active {
-  @apply opacity-100
+  opacity: 1;
 }
 
 .slidev-icon-btn.disabled {
-  @apply opacity-25 pointer-events-none;
+  opacity: 0.25;
+  pointer-events: none;
 }
 
 .slidev-vclick-target {
@@ -39,11 +40,13 @@ html {
 }
 
 .slidev-vclick-hidden {
-  @apply !opacity-0 !pointer-events-none;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  user-select: none !important;
 }
 
 .slidev-vclick-fade {
-  @apply opacity-50;
+  opacity: 0.5;
 }
 
 .slidev-icon {
@@ -53,7 +56,44 @@ html {
 }
 
 .slidev-page {
-  @apply absolute top-0 left-0 right-0 w-full relative;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+}
+
+/* Note Clicks */
+
+.slidev-note-with-clicks .slidev-note-fade {
+  color: #888888ab;
+}
+
+.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;
+}
+
+.slidev-note-click-mark::before {
+  content: '';
+  display: inline-block;
+  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M23 28a1 1 0 0 1-.71-.29l-6.13-6.14l-3.33 5a1 1 0 0 1-1 .44a1 1 0 0 1-.81-.7l-6-20A1 1 0 0 1 6.29 5l20 6a1 1 0 0 1 .7.81a1 1 0 0 1-.44 1l-5 3.33l6.14 6.13a1 1 0 0 1 0 1.42l-4 4A1 1 0 0 1 23 28m0-2.41L25.59 23l-7.16-7.15l5.25-3.5L7.49 7.49l4.86 16.19l3.5-5.25Z'/%3E%3C/svg%3E");
+  -webkit-mask: var(--un-icon) no-repeat;
+  mask: var(--un-icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: inherit;
+  width: 1.2em;
+  height: 1.2em;
+  opacity: 0.8;
+}
+
+.slidev-note-click-mark::after {
+  content: attr(data-clicks);
+  display: inline-block;
+  transform: translateY(0.1em);
 }
 
 /* Transform the position back for Rough Notation (v-mark) */

package/styles/katex.css

@@ -2,4 +2,4 @@
 }
 .slidev-katex-wrapper .mord.dishonored {
   opacity: 0.3;
-}
+}

package/styles/layouts-base.css

@@ -1,7 +1,8 @@
 .slidev-layout {
   @apply px-14 py-10 text-[1.1rem] h-full;
 
-  pre, code {
+  pre,
+  code {
     @apply select-text;
   }
 
@@ -79,11 +80,13 @@
     @apply border-current border-b border-dashed hover:text-primary hover:border-solid;
   }
 
-  td, th {
+  td,
+  th {
     @apply p-2 py-3;
   }
 
-  b, strong {
+  b,
+  strong {
     @apply font-600;
   }
 
@@ -94,8 +97,8 @@
 }
 
 .slidev-layout,
-[dir=ltr],
-.slidev-layout [dir=ltr] {
+[dir='ltr'],
+.slidev-layout [dir='ltr'] {
   h1 {
     @apply -ml-[0.05em] mr-0;
   }
@@ -109,10 +112,10 @@
   }
 }
 
-[dir=rtl],
-.slidev-layout [dir=rtl] {
+[dir='rtl'],
+.slidev-layout [dir='rtl'] {
   h1 {
-    @apply -mr-[0.05em] ml-0; 
+    @apply -mr-[0.05em] ml-0;
   }
 
   h6 {

package/styles/vars.css

@@ -7,7 +7,7 @@
   --slidev-code-line-height: 18px;
   --slidev-code-radius: 4px;
   --slidev-code-margin: 4px 0;
-  --slidev-theme-primary: #3AB9D5;
+  --slidev-theme-primary: #3ab9d5;
 
   --slidev-transition-duration: 0.5s;
   --slidev-slide-container-background: black;

package/uno.config.ts

@@ -8,6 +8,7 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
+import { variantMatcher } from '@unocss/preset-mini/utils'
 
 export default defineConfig({
   safelist: [
@@ -28,6 +29,13 @@ export default defineConfig({
     'abs-bl': 'absolute bottom-0 left-0',
     'abs-br': 'absolute bottom-0 right-0',
   },
+  // Slidev Specific Variants, probably extrat to a preset later
+  variants: [
+    // `forward:` and `backward:` variant to selectively apply styles based on the direction of the slide
+    // For example, `forward:text-red` will only apply to the slides that are navigated forward
+    variantMatcher('forward', input => ({ prefix: `.slidev-nav-go-forward ${input.prefix}` })),
+    variantMatcher('backward', input => ({ prefix: `.slidev-nav-go-backward ${input.prefix}` })),
+  ],
   presets: [
     presetUno(),
     presetAttributify(),