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

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/composables/useClicks.ts

@@ -6,7 +6,10 @@ import type { RouteRecordRaw } from 'vue-router'
 import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav'
 import { normalizeAtProp } from '../logic/utils'
 
-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())
 

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/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,9 @@ const props = defineProps({
   placeholder: {
     default: 'No notes for this slide',
   },
+  autoHeight: {
+    default: false,
+  },
 })
 
 const emit = defineEmits([
@@ -66,6 +69,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>
@@ -83,7 +107,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/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/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

@@ -22,6 +22,7 @@ nextTick(() => {
 })
 
 export const navDirection = ref(0)
+export const clicksDirection = ref(0)
 
 export const route = computed(() => router.currentRoute.value)
 
@@ -84,6 +85,7 @@ watch(currentRoute, (next, prev) => {
 })
 
 export async function next() {
+  clicksDirection.value = 1
   if (clicksTotal.value <= queryClicks.value)
     await nextSlide()
   else
@@ -91,6 +93,7 @@ export async function next() {
 }
 
 export async function prev() {
+  clicksDirection.value = -1
   if (queryClicks.value <= 0)
     await prevSlide()
   else
@@ -102,11 +105,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.11",
   "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.11",
+    "@slidev/types": "0.48.0-beta.11"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/pages/overview.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, 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'
+import { useClicksContextBase } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
@@ -21,6 +23,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, 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, useClicksContextBase(() => 999999, route?.meta?.clicks))
+  return clicksContextMap.get(route)!
+}
+
+function getSlideClicks(route: RouteRecordRaw) {
+  return route.meta?.clicks || getClickContext(route)?.total
+}
+
+function wordCount(str: string) {
+  return str.match(/[\w\d\’\'-]+/gi)?.length || 0
+}
 
 function isElementInViewport(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
@@ -109,9 +130,17 @@ 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
+            v-if="getSlideClicks(route)"
+            class="flex gap-0.5 op50 items-center justify-end"
+            :title="`Clicks in this slide: ${getSlideClicks(route)}`"
+          >
+            <carbon:cursor-1 text-sm />
+            {{ getSlideClicks(route) }}
+          </div>
         </div>
         <div
           class="border rounded border-main overflow-hidden bg-main my5 select-none h-max"
@@ -127,7 +156,7 @@ onMounted(() => {
             <SlideWrapper
               :is="route.component"
               v-if="route?.component"
-              :clicks-context="useFixedClicks(route, 99999)[1]"
+              :clicks-context="getClickContext(route)"
               :class="getSlideClass(route)"
               :route="route"
               render-context="overview"
@@ -148,10 +177,25 @@ onMounted(() => {
         <NoteEditor
           :no="idx"
           class="max-w-250 w-250 text-lg rounded p3"
+          :auto-height="true"
           :editing="edittingNote === idx"
+          @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

@@ -185,26 +185,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 +213,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 +234,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 +247,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,11 @@ html {
 }
 
 .slidev-page {
-  @apply absolute top-0 left-0 right-0 w-full relative;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
 }
 
 /* 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(),