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

package/builtin/CodeBlockWrapper.vue

@@ -14,11 +14,12 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 <script setup lang="ts">
 import { parseRangeString } from '@slidev/parser/core'
 import { useClipboard } from '@vueuse/core'
-import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { configs } from '../env'
 import { makeId } from '../logic/utils'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   ranges: {
@@ -47,7 +48,7 @@ const props = defineProps({
   },
 })
 
-const clicks = inject(injectionClicksContext)?.value
+const { $clicksContext: clicks } = useSlideContext()
 const el = ref<HTMLDivElement>()
 const id = makeId()
 

package/builtin/KaTexBlockWrapper.vue

@@ -20,11 +20,12 @@ Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
 -->
 
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { parseRangeString } from '@slidev/parser'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, injectionClicksContext } from '../constants'
+import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   ranges: {
@@ -45,7 +46,7 @@ const props = defineProps({
   },
 })
 
-const clicks = inject(injectionClicksContext)?.value
+const { $clicksContext: clicks } = useSlideContext()
 const el = ref<HTMLDivElement>()
 const id = makeId()
 

package/builtin/RenderWhen.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { RenderContext } from '@slidev/types'
-import { computed, inject, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useElementVisibility } from '@vueuse/core'
-import { injectionRenderContext } from '../constants'
+import { useSlideContext } from '../context'
 
 type Context = 'main' | 'visible' | RenderContext
 
@@ -16,7 +16,7 @@ const targetVisible = useElementVisibility(target)
 // When context has `visible`, we need to wrap the content with a div to track the visibility
 const needsDomWrapper = Array.isArray(context) ? context.includes('visible') : context === 'visible'
 
-const currentContext = inject(injectionRenderContext)
+const { $renderContext: currentContext } = useSlideContext()
 const shouldRender = computed(() => {
   const anyContext = Array.isArray(context) ? context.some(contextMatch) : contextMatch(context)
   const allConditions = Array.isArray(context) ? context.every(conditionsMatch) : conditionsMatch(context)

package/builtin/SlideCurrentNo.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectionCurrentPage } from '../constants'
+import { useSlideContext } from '../context'
 
-const $page = inject(injectionCurrentPage)
+const { $page } = useSlideContext()
 </script>
 
 <template>

package/builtin/SlidesTotal.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { injectionSlidevContext } from '../constants'
+import { useSlideContext } from '../context'
 
-const $slidev = inject(injectionSlidevContext)
+const { $nav } = useSlideContext()
 </script>
 
 <template>
-  <span>{{ $slidev.nav.total }}</span>
+  <span>{{ $nav.total }}</span>
 </template>

package/builtin/SlidevVideo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
-import { injectionClicksContext, injectionRenderContext, injectionRoute, injectionSlidevContext } from '../constants'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useSlideContext } from '../context'
 
 const props = defineProps<{
   autoPlay?: boolean | 'once' | 'resume' | 'resumeOnce'
@@ -8,10 +8,12 @@ const props = defineProps<{
   autoReset?: 'slide' | 'click'
 }>()
 
-const $slidev = inject(injectionSlidevContext)
-const route = inject(injectionRoute)
-const currentContext = inject(injectionRenderContext)
-const clicks = inject(injectionClicksContext)?.value
+const {
+  $slidev,
+  $clicksContext: clicks,
+  $renderContext: currentContext,
+  $route: route,
+} = useSlideContext()
 
 const video = ref<HTMLMediaElement>()
 const played = ref(false)

package/builtin/Toc.vue

@@ -8,9 +8,9 @@ Usage:
 <Toc columns='2' maxDepth='3' mode='onlySiblings'/>
 -->
 <script setup lang='ts'>
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import type { TocItem } from '@slidev/types'
-import { injectionSlidevContext } from '../constants'
+import { useSlideContext } from '../context'
 
 const props = withDefaults(
   defineProps<{
@@ -33,7 +33,7 @@ const props = withDefaults(
   },
 )
 
-const $slidev = inject(injectionSlidevContext)
+const { $slidev } = useSlideContext()
 
 function filterTreeDepth(tree: TocItem[], level = 1): TocItem[] {
   if (level > Number(props.maxDepth)) {

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/Tweet.vue

@@ -7,9 +7,9 @@ Usage:
 -->
 
 <script setup lang="ts">
-import { useScriptTag } from '@vueuse/core'
 import { getCurrentInstance, onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
+import { useTweetScript } from '../composables/useTweetScript'
 
 const props = defineProps<{
   id: string | number
@@ -41,21 +41,10 @@ async function create() {
 }
 
 // @ts-expect-error global
-if (window?.twttr?.widgets) {
+if (window?.twttr?.widgets)
   onMounted(create)
-}
-else {
-  useScriptTag(
-    'https://platform.twitter.com/widgets.js',
-    () => {
-      if (vm.isMounted)
-        create()
-      else
-        onMounted(create, vm)
-    },
-    { async: true },
-  )
-}
+else
+  useTweetScript(vm, create)
 </script>
 
 <template>

package/builtin/VClickGap.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Fragment, inject, onMounted, watchEffect } from 'vue'
-import { injectionClicksContext } from '../constants'
+import { Fragment, onMounted, watchEffect } from 'vue'
 import { makeId } from '../logic/utils'
+import { useSlideContext } from '../context'
 
 const props = defineProps({
   size: {
@@ -10,12 +10,10 @@ const props = defineProps({
   },
 })
 
-const clicksRef = inject(injectionClicksContext)
+const { $clicksContext: clicks } = useSlideContext()
 
 onMounted(() => {
   watchEffect((onCleanup) => {
-    const clicks = clicksRef?.value
-
     if (!clicks || clicks.disabled)
       return
 

package/builtin/VClicks.ts

@@ -96,7 +96,7 @@ export default defineComponent({
         if (depth < +this.depth && Array.isArray(i.children))
           vNode = h(i, {}, mapSubList(i.children, depth))
         else
-          vNode = i
+          vNode = h(i)
 
         const delta = thisShowIdx - execIdx
         execIdx = thisShowIdx

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(route: RouteRecordRaw | undefined, getCurrent: () => number): ClicksContext {
+/**
+ * @internal
+ */
+export function useClicksContextBase(getCurrent: () => number, clicksOverrides?: number): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
   const map: ClicksContext['map'] = shallowReactive(new Map())
 
@@ -53,7 +56,7 @@ function useClicksContextBase(route: RouteRecordRaw | undefined, getCurrent: ()
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return route?.meta?.clicks
+      return clicksOverrides
         ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
     },
   }
@@ -63,21 +66,24 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
   const thisPath = +(route?.path ?? 99999)
-  const context = useClicksContextBase(route, () => {
-    const currentPath = +(currentRoute.value?.path ?? 99999)
-    if (currentPath === thisPath)
-      return queryClicks.value
-    else if (currentPath > thisPath)
-      return 99999
-    else
-      return 0
-  })
+  const context = useClicksContextBase(
+    () => {
+      const currentPath = +(currentRoute.value?.path ?? 99999)
+      if (currentPath === thisPath)
+        return queryClicks.value
+      else if (currentPath > thisPath)
+        return 99999
+      else
+        return 0
+    },
+    route?.meta?.clicks,
+  )
   if (route?.meta)
     route.meta.__clicksContext = context
   return context
 }
 
-export function useFixedClicks(route: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
+export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): [Ref<number>, ClicksContext] {
   const current = ref(currentInit)
-  return [current, useClicksContextBase(route, () => current.value)]
+  return [current, useClicksContextBase(() => current.value, route?.meta?.clicks)]
 }

package/composables/useTweetScript.ts

@@ -0,0 +1,17 @@
+import { createSharedComposable, useScriptTag } from '@vueuse/core'
+import type { ComponentInternalInstance } from 'vue'
+import { onMounted } from 'vue'
+
+export const useTweetScript = createSharedComposable(
+  (vm: ComponentInternalInstance, create: () => void) =>
+    useScriptTag(
+      'https://platform.twitter.com/widgets.js',
+      () => {
+        if (vm.isMounted)
+          create()
+        else
+          onMounted(create, vm)
+      },
+      { async: true },
+    ),
+)

package/constants.ts

@@ -3,14 +3,16 @@ import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext, RenderContext } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
 
-export const injectionClicksContext: InjectionKey<Ref<ClicksContext>> = Symbol('slidev-clicks-context')
-export const injectionCurrentPage: InjectionKey<Ref<number>> = Symbol('slidev-page')
-export const injectionSlideScale: InjectionKey<ComputedRef<number>> = Symbol('slidev-slide-scale')
-export const injectionSlidevContext: InjectionKey<UnwrapNestedRefs<SlidevContext>> = Symbol('slidev-slidev-context')
-export const injectionRoute: InjectionKey<RouteRecordRaw> = Symbol('slidev-route')
-export const injectionRenderContext: InjectionKey<Ref<RenderContext>> = Symbol('slidev-render-context')
-export const injectionActive: InjectionKey<Ref<boolean>> = Symbol('slidev-active')
-export const injectionFrontmatter: InjectionKey<Record<string, any>> = Symbol('slidev-fontmatter')
+// Here we use string literal instead of symbols to make HMR more stable
+// The value of the injections keys are implementation details, you should always use them with the reference to the constant instead of the value
+export const injectionClicksContext = '$$slidev-clicks-context' as unknown as InjectionKey<Ref<ClicksContext>>
+export const injectionCurrentPage = '$$slidev-page' as unknown as InjectionKey<Ref<number>>
+export const injectionSlideScale = '$$slidev-slide-scale' as unknown as InjectionKey<ComputedRef<number>>
+export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
+export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<RouteRecordRaw>
+export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
+export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
+export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'
@@ -24,3 +26,49 @@ export const TRUST_ORIGINS = [
   'localhost',
   '127.0.0.1',
 ]
+
+export const FRONTMATTER_FIELDS = [
+  'clicks',
+  'disabled',
+  'hide',
+  'hideInToc',
+  'layout',
+  'level',
+  'preload',
+  'routeAlias',
+  'src',
+  'title',
+  'transition',
+  'zoom',
+]
+
+export const HEADMATTER_FIELDS = [
+  ...FRONTMATTER_FIELDS,
+  'theme',
+  'titleTemplate',
+  'info',
+  'author',
+  'keywords',
+  'presenter',
+  'download',
+  'exportFilename',
+  'export',
+  'highlighter',
+  'lineNumbers',
+  'monaco',
+  'remoteAssets',
+  'selectable',
+  'record',
+  'colorSchema',
+  'routerMode',
+  'aspectRatio',
+  'canvasWidth',
+  'themeConfig',
+  'favicon',
+  'plantUmlServer',
+  'fonts',
+  'defaults',
+  'drawings',
+  'htmlAttrs',
+  'mdc',
+]

package/context.ts

@@ -0,0 +1,70 @@
+import { shallowRef, toRef } from 'vue'
+import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
+import { useFixedClicks } from './composables/useClicks'
+import {
+  FRONTMATTER_FIELDS,
+  HEADMATTER_FIELDS,
+  injectionClicksContext,
+  injectionCurrentPage,
+  injectionFrontmatter,
+  injectionRenderContext,
+  injectionRoute,
+  injectionSlidevContext,
+} from './constants'
+
+const clicksContextFallback = shallowRef(useFixedClicks()[1])
+
+/**
+ * Get the current slide context, should be called inside the setup function of a component inside slide
+ */
+export function useSlideContext() {
+  const $slidev = injectLocal(injectionSlidevContext)!
+  const $nav = toRef($slidev, 'nav')
+  const $clicksContext = injectLocal(injectionClicksContext, clicksContextFallback)!.value
+  const $clicks = toRef($clicksContext, 'current')
+  const $page = injectLocal(injectionCurrentPage)!
+  const $renderContext = injectLocal(injectionRenderContext)!
+  const $frontmatter = injectLocal(injectionFrontmatter, {})
+  const $route = injectLocal(injectionRoute, undefined)
+
+  return {
+    $slidev,
+    $nav,
+    $clicksContext,
+    $clicks,
+    $page,
+    $route,
+    $renderContext,
+    $frontmatter,
+  }
+}
+
+export function provideFrontmatter(frontmatter: Record<string, any>) {
+  provideLocal(injectionFrontmatter, frontmatter)
+
+  const {
+    $slidev,
+    $page,
+  } = useSlideContext()
+
+  // update frontmatter in router to make HMR work better
+  const route = $slidev.nav.rawRoutes.find(i => i.path === String($page.value))
+  if (route?.meta?.slide?.frontmatter) {
+    for (const key of Object.keys(route.meta.slide.frontmatter)) {
+      if (!(key in frontmatter))
+        delete route.meta.slide.frontmatter[key]
+    }
+    Object.assign(route.meta.slide.frontmatter, frontmatter)
+  }
+}
+
+/**
+ * Convert frontmatter options to props for v-bind
+ * It removes known options fields, and expose an extra `frontmatter` field that contains full frontmatter
+ */
+export function frontmatterToProps(frontmatter: Record<string, any>, pageNo: number) {
+  return {
+    ...objectOmit(frontmatter, pageNo === 0 ? HEADMATTER_FIELDS : FRONTMATTER_FIELDS),
+    frontmatter,
+  }
+}

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Menu } from 'floating-vue'
+import 'floating-vue/dist/style.css'
 import {
   brush,
   brushColors,
@@ -21,20 +23,24 @@ function undo() {
 function redo() {
   drauu.redo()
 }
+
+let lastDrawingMode: typeof drawingMode.value = 'stylus'
 function setDrawingMode(mode: typeof drawingMode.value) {
   drawingMode.value = mode
   drawingEnabled.value = true
+  if (mode !== 'eraseLine')
+    lastDrawingMode = mode
 }
 function setBrushColor(color: typeof brush.color) {
   brush.color = color
   drawingEnabled.value = true
+  drawingMode.value = lastDrawingMode
 }
 </script>
 
 <template>
   <Draggable
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200"
-    dark="border border-gray-400 border-opacity-10"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
     :class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
     storage-key="slidev-drawing-pos"
     :initial-x="10"
@@ -57,23 +63,41 @@ function setBrushColor(color: typeof brush.color) {
     <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
       <carbon:checkbox />
     </IconButton>
-    <!-- TODO: not sure why it's not working! -->
-    <!-- <IconButton title="Erase" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+    <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
       <carbon:erase />
-    </IconButton> -->
+    </IconButton>
 
     <VerticalDivider />
 
+    <Menu>
+      <IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
+        <svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
+          <line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
+          <line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          <line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </IconButton>
+      <template #popper>
+        <div class="flex bg-main p-2">
+          <div class="inline-block w-7 text-center">
+            {{ brush.size }}
+          </div>
+          <div class="pt-.5">
+            <input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
+          </div>
+        </div>
+      </template>
+    </Menu>
     <IconButton
       v-for="color of brushColors"
       :key="color"
       title="Set brush color"
-      :class="brush.color === color ? 'active' : 'shallow'"
+      :class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
       <div
-        class="w-6 h-6 transition-all transform border border-gray-400/50"
-        :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
+        class="w-6 h-6 transition-all transform border"
+        :class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
         :style="drawingEnabled ? { background: color } : { borderColor: color }"
       />
     </IconButton>
@@ -87,7 +111,7 @@ function setBrushColor(color: typeof brush.color) {
       <carbon:redo />
     </IconButton>
     <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clearDrauu()">
-      <carbon:delete />
+      <carbon:trash-can />
     </IconButton>
 
     <VerticalDivider />
@@ -106,3 +130,9 @@ function setBrushColor(color: typeof brush.color) {
     </IconButton>
   </Draggable>
 </template>
+
+<style>
+.v-popper--theme-menu .v-popper__arrow-inner {
+  --uno: border-main;
+}
+</style>

package/internals/DrawingLayer.vue

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

package/internals/Editor.vue

@@ -38,7 +38,6 @@ watch(
 async function save() {
   dirty.value = false
   await update({
-    raw: null!,
     note: note.value || undefined,
     content: content.value,
     // frontmatter: frontmatter.value,
@@ -103,6 +102,11 @@ onMounted(async () => {
         noteEditor.refresh()
     })
   })
+
+  watch(currentSlideId, () => {
+    contentEditor.clearHistory()
+    noteEditor.clearHistory()
+  }, { flush: 'post' })
 })
 
 const handlerDown = ref(false)
@@ -168,13 +172,13 @@ throttledWatch(
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
         <IconButton
-          title="Switch to content tab" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''"
+          title="Switch to content tab" :class="tab === 'content' ? 'text-primary' : ''"
           @click="switchTab('content')"
         >
           <carbon:account />
         </IconButton>
         <IconButton
-          title="Switch to notes tab" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''"
+          title="Switch to notes tab" :class="tab === 'note' ? 'text-primary' : ''"
           @click="switchTab('note')"
         >
           <carbon:align-box-bottom-right />

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 {