@slidev/client 52.14.1 → 52.15.0

package/builtin/BlueSky.vue

@@ -0,0 +1,167 @@
+<!--
+A simple wrapper for embedded Bluesky posts
+
+Usage:
+
+<BlueSky uri="at://did:plc:432mbsu2xucyvxl6sluohidu/app.bsky.feed.post/3lgwg2vy44s2q" />
+<BlueSky uri="https://bsky.app/profile/sli.dev/post/3lgwg2vy44s2q" />
+-->
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue'
+import { isDark } from '../logic/dark'
+
+const props = defineProps<{
+  uri: string
+  scale?: string | number
+}>()
+
+const RE_BLUESKY_POST_URL = /^\/profile\/([^/]+)\/post\/([^/?#]+)$/
+
+const container = ref<HTMLElement | null>(null)
+const loaded = ref(false)
+const postNotFound = ref(false)
+const resolvedUri = ref('')
+const resolvedPostUrl = ref('')
+
+const RESOLVE_HANDLE_URL = 'https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle'
+const GET_POST_THREAD_URL = 'https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread'
+
+interface BlueskyThreadResponse {
+  thread?: {
+    post?: {
+      uri?: string
+    }
+  }
+}
+
+function scan(retries = 10) {
+  // @ts-expect-error global
+  if (!window.bluesky?.scan) {
+    if (retries <= 0)
+      console.error('Failed to load Bluesky embed widget after 10 retries.')
+    if (retries <= 0)
+      return
+    setTimeout(scan, 1000, retries - 1)
+    return
+  }
+  // @ts-expect-error global
+  window.bluesky.scan(container.value || undefined)
+}
+
+function extractPostInfoFromUrl(input: string) {
+  try {
+    const url = new URL(input)
+    const match = url.pathname.match(RE_BLUESKY_POST_URL)
+    if (!match)
+      return
+    return {
+      handle: decodeURIComponent(match[1]),
+      postId: decodeURIComponent(match[2]),
+      postUrl: url.toString(),
+    }
+  }
+  catch {}
+}
+
+async function resolvePostUri(input: string) {
+  try {
+    if (input.startsWith('at://')) {
+      resolvedUri.value = input
+      resolvedPostUrl.value = ''
+      return true
+    }
+
+    const info = extractPostInfoFromUrl(input)
+    if (!info)
+      return false
+
+    const handleResponse = await fetch(`${RESOLVE_HANDLE_URL}?handle=${encodeURIComponent(info.handle)}`)
+    if (!handleResponse.ok)
+      return false
+    const handleData = await handleResponse.json() as { did?: string }
+    if (!handleData.did)
+      return false
+
+    const uri = `at://${handleData.did}/app.bsky.feed.post/${info.postId}`
+    const threadResponse = await fetch(
+      `${GET_POST_THREAD_URL}?uri=${encodeURIComponent(uri)}&depth=0&parentHeight=0`,
+    )
+    if (!threadResponse.ok)
+      return false
+
+    const threadData = await threadResponse.json() as BlueskyThreadResponse
+    const canonicalUri = threadData.thread?.post?.uri
+    if (!canonicalUri)
+      return false
+
+    resolvedUri.value = canonicalUri
+    resolvedPostUrl.value = info.postUrl
+    return true
+  }
+  catch {
+    return false
+  }
+}
+
+async function create(retries = 10) {
+  loaded.value = false
+  postNotFound.value = false
+
+  if (!resolvedUri.value) {
+    const ok = await resolvePostUri(props.uri)
+    if (!ok) {
+      postNotFound.value = true
+      loaded.value = true
+      return
+    }
+  }
+
+  await nextTick()
+
+  // @ts-expect-error global
+  if (!window.bluesky?.scan) {
+    if (retries <= 0) {
+      console.error('Failed to load Bluesky embed widget after 10 retries.')
+      postNotFound.value = true
+      loaded.value = true
+      return
+    }
+    setTimeout(create, 1000, retries - 1)
+    return
+  }
+
+  scan()
+  loaded.value = true
+}
+
+onMounted(async () => {
+  await create()
+})
+</script>
+
+<template>
+  <Transform :scale="scale || 1">
+    <div ref="container" class="slidev-bluesky">
+      <blockquote
+        v-if="resolvedUri"
+        class="bluesky-embed"
+        :data-bluesky-uri="resolvedUri"
+        :data-bluesky-embed-color-mode="isDark ? 'dark' : 'light'"
+      />
+      <div v-if="!loaded || postNotFound" class="h-30 w-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
+        <div class="m-auto animate-pulse text-4xl">
+          <div class="i-simple-icons:bluesky" />
+          <span v-if="postNotFound">Could not load Bluesky post</span>
+        </div>
+      </div>
+    </div>
+  </Transform>
+</template>
+
+<style>
+.slidev-bluesky .bluesky-embed iframe {
+  border-radius: 12px;
+  overflow: hidden;
+}
+</style>

package/builtin/CodeBlockWrapper.vue

@@ -48,7 +48,7 @@ const props = defineProps({
   },
   title: {
     type: String,
-    default: undefined,
+    default: '',
   },
 })
 

package/builtin/Link.vue

@@ -19,8 +19,8 @@ const { isPrintMode } = useNav()
 </script>
 
 <template>
-  <RouterLink v-if="!isPrintMode && title" :to="String(to)" @click="$event.target.blur()" v-html="title" />
-  <RouterLink v-else-if="!isPrintMode && !title" :to="String(to)" @click="$event.target.blur()">
+  <RouterLink v-if="!isPrintMode && title" :to="String(to)" @click="($event.target as HTMLElement)?.blur()" v-html="title" />
+  <RouterLink v-else-if="!isPrintMode && !title" :to="String(to)" @click="($event.target as HTMLElement)?.blur()">
     <slot />
   </RouterLink>
   <a v-else-if="isPrintMode && title" :href="`#${to}`" v-html="title" />

package/builtin/Monaco.vue

@@ -72,7 +72,6 @@ const extMap: Record<string, string> = {
 }
 const ext = extMap[props.lang] ?? props.lang
 
-const outer = ref<HTMLDivElement>()
 const container = ref<HTMLDivElement>()
 
 const contentHeight = ref(0)
@@ -206,7 +205,7 @@ onMounted(async () => {
 
 <template>
   <div class="relative slidev-monaco-container">
-    <div ref="outer" class="relative slidev-monaco-container-inner" :style="{ height }">
+    <div class="relative slidev-monaco-container-inner" :style="{ height }">
       <div ref="container" class="absolute inset-0.5" />
     </div>
     <CodeRunner

package/builtin/Tweet.vue

@@ -27,7 +27,7 @@ async function create(retries = 10) {
   if (!window.twttr?.widgets?.createTweet) {
     if (retries <= 0)
       return console.error('Failed to load Twitter widget after 10 retries.')
-    setTimeout(() => create(retries - 1), 1000)
+    setTimeout(create, 1000, retries - 1)
     return
   }
   // @ts-expect-error global

package/builtin/VClick.ts

@@ -19,10 +19,17 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /**
+     * @deprecated use `animation` instead
+     */
     fade: {
       type: Boolean,
       default: false,
     },
+    animation: {
+      type: String,
+      default: undefined,
+    },
     wrapText: {
       type: Function as PropType<(text: VNode) => VNode>,
       default: (text: VNode) => h('span', text),
@@ -36,6 +43,7 @@ export default defineComponent({
         at: this.at,
         hide: this.hide,
         fade: this.fade,
+        animation: this.animation,
         handleSpecialElements: false,
       },
       {

package/builtin/VClicks.ts

@@ -11,6 +11,7 @@ import { normalizeSingleAtValue } from '../composables/useClicks'
 import VClickGap from './VClickGap.vue'
 
 const listTags = ['ul', 'ol']
+const RE_WHITESPACE_OR_COMMA = /[\s,]+/
 
 export default defineComponent({
   props: {
@@ -30,10 +31,17 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /**
+     * @deprecated use `animation` instead
+     */
     fade: {
       type: Boolean,
       default: false,
     },
+    animation: {
+      type: [String, Array<string>],
+      default: undefined,
+    },
     handleSpecialElements: {
       type: Boolean,
       default: true,
@@ -53,14 +61,26 @@ export default defineComponent({
     const click = resolveDirective('click')!
 
     const applyDirective = (node: VNode, value: number | string) => {
+      const modifiers: Record<string, boolean> = {
+        hide: this.hide,
+      }
+      if (typeof this.animation === 'string') {
+        this.animation.split(RE_WHITESPACE_OR_COMMA).forEach((a) => {
+          if (a)
+            modifiers[a] = true
+        })
+      }
+      else if (Array.isArray(this.animation)) {
+        this.animation.forEach(a => modifiers[a] = true)
+      }
+      if (this.fade)
+        modifiers.fade = true
+
       return withDirectives(node, [[
         click,
         value,
         '',
-        {
-          hide: this.hide,
-          fade: this.fade,
-        },
+        modifiers,
       ]])
     }
 

package/builtin/VDrag.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   markdownSource?: DragElementMarkdownSource
 }>()
 
+// @ts-expect-error TS6133 container is used as template ref
 const { dragId, container, containerStyle, mounted, unmounted, startDragging } = useDragElement(null, props.pos, props.markdownSource)
 
 onMounted(mounted)

package/composables/useDragElements.ts

@@ -11,6 +11,9 @@ import { useNav } from './useNav'
 import { useSlideBounds } from './useSlideBounds'
 import { useDynamicSlideInfo } from './useSlideInfo'
 
+const RE_NEWLINE = /\r?\n/g
+const RE_POS_ATTR = /pos=".*?"/
+
 export type DragElementDataSource = 'frontmatter' | 'prop' | 'directive'
 /**
  * Markdown source position, injected by markdown-it plugin
@@ -63,7 +66,7 @@ export function useDragElementsUpdater(no: number) {
         throw new Error(`[Slidev] VDrag Element ${id} is missing markdown source`)
 
       const [startLine, endLine, idx] = markdownSource
-      const lines = info.value.content.split(/\r?\n/g)
+      const lines = info.value.content.split(RE_NEWLINE)
 
       let section = lines.slice(startLine, endLine).join('\n')
       let replaced = false
@@ -73,7 +76,7 @@ export function useDragElementsUpdater(no: number) {
         ? section.replace(/<(v-?drag-?\w*)(.*?)(\/)?>/gi, (full, tag, attrs, selfClose = '', index) => {
             if (index === idx) {
               replaced = true
-              const posMatch = attrs.match(/pos=".*?"/)
+              const posMatch = attrs.match(RE_POS_ATTR)
               if (!posMatch)
                 return `<${tag}${ensureSuffix(' ', attrs)}pos="${posStr}"${selfClose}>`
               const start = posMatch.index

package/composables/useDrawings.ts

@@ -1,5 +1,5 @@
 import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
-import { createSharedComposable, toReactive, useLocalStorage } from '@vueuse/core'
+import { createSharedComposable, useLocalStorage } from '@vueuse/core'
 import { createDrauu } from 'drauu'
 import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
 import { configs } from '../env'
@@ -22,11 +22,11 @@ export const useDrawings = createSharedComposable(() => {
 
   const drawingEnabled = useLocalStorage('slidev-drawing-enabled', false)
   const drawingPinned = useLocalStorage('slidev-drawing-pinned', false)
-  const brush = toReactive(useLocalStorage<Brush>('slidev-drawing-brush', {
+  const brush = useLocalStorage<Brush>('slidev-drawing-brush', {
     color: brushColors[0],
     size: 4,
     mode: 'stylus',
-  }))
+  })
 
   const isDrawing = ref(false)
   const canUndo = ref(false)
@@ -46,12 +46,12 @@ export const useDrawings = createSharedComposable(() => {
       if (v === 'arrow') {
         // eslint-disable-next-line ts/no-use-before-define
         drauu.mode = 'line'
-        brush.arrowEnd = true
+        brush.value.arrowEnd = true
       }
       else {
         // eslint-disable-next-line ts/no-use-before-define
         drauu.mode = v
-        brush.arrowEnd = false
+        brush.value.arrowEnd = false
       }
     },
   })
@@ -150,7 +150,7 @@ export const useDrawings = createSharedComposable(() => {
       clearDrauu()
     }
     else if (e.code.startsWith('Digit') && noModifier && +e.code[5] <= brushColors.length) {
-      brush.color = brushColors[+e.code[5] - 1]
+      brush.value.color = brushColors[+e.code[5] - 1]
     }
     else {
       handled = false

package/composables/useMousePosInSlide.ts

@@ -0,0 +1,21 @@
+import { useMouse } from '@vueuse/core'
+import { computed } from 'vue'
+import { mainSlideElement } from '../internals/SlideContainer.vue'
+
+export function useMousePosInSlide() {
+  const mouse = useMouse()
+
+  return computed(() => {
+    const rect = mainSlideElement.value?.getBoundingClientRect()
+    if (!rect)
+      return undefined
+
+    const x = (mouse.x.value - rect.left) / rect.width * 100
+    const y = (mouse.y.value - rect.top) / rect.height * 100
+
+    if (x < 0 || x > 100 || y < 0 || y > 100)
+      return undefined
+
+    return { x, y }
+  })
+}

package/composables/usePreloadImages.ts

@@ -5,11 +5,12 @@ import { watchEffect } from 'vue'
 
 const loaded = new Set<string>()
 const loading = new Set<string>()
+const RE_TRAILING_SLASH = /\/$/
 
 function resolveUrl(url: string): string {
   if (url.startsWith('http') || url.startsWith('//'))
     return url
-  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+  const base = (import.meta.env.BASE_URL || '/').replace(RE_TRAILING_SLASH, '')
   return `${base}${url.startsWith('/') ? url : `/${url}`}`
 }
 

package/composables/useSlideInfo.ts

@@ -1,6 +1,5 @@
 import type { SlideInfo, SlidePatch } from '@slidev/types'
-import type { MaybeRef } from '@vueuse/core'
-import type { Ref } from 'vue'
+import type { MaybeRef, Ref } from 'vue'
 import { useFetch } from '@vueuse/core'
 import { computed, ref, unref } from 'vue'
 import { getSlide } from '../logic/slides'

package/constants.ts

@@ -16,12 +16,12 @@ export const injectionSlideZoom = '$$slidev-slide-zoom' as unknown as InjectionK
 
 export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
 export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'
-export const CLASS_VCLICK_FADE = 'slidev-vclick-fade'
 export const CLASS_VCLICK_GONE = 'slidev-vclick-gone'
 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 CLASS_VCLICK_DISPLAY_NONE = 'slidev-vclick-display-none'
+export const CLASS_VCLICK_ANIMATION_PREFIX = 'slidev-vclick-anim-'
 
 export const CLICKS_MAX = 999999
 
@@ -46,6 +46,7 @@ export const FRONTMATTER_FIELDS = [
   'zoom',
   'dragPos',
   'lang',
+  'clickAnimation',
 ]
 
 export const HEADMATTER_FIELDS = [

package/internals/DrawingControls.vue

@@ -32,8 +32,8 @@ function setDrawingMode(mode: typeof drawingMode.value) {
   if (mode !== 'eraseLine')
     lastDrawingMode = mode
 }
-function setBrushColor(color: typeof brush.color) {
-  brush.color = color
+function setBrushColor(color: string) {
+  brush.value.color = color
   drawingEnabled.value = true
   drawingMode.value = lastDrawingMode
 }

package/internals/Goto.vue

@@ -26,7 +26,7 @@ const fuse = computed(() => new Fuse(slides.value.map(i => i.meta?.slide).filter
 }))
 
 const path = computed(() => text.value.startsWith('/') ? text.value.substring(1) : text.value)
-const result = computed(() => fuse.value.search(path.value).map(result => result.item))
+const result = computed(() => path.value ? fuse.value.search(path.value).map(result => result.item) : [])
 const valid = computed(() => !!result.value.length)
 
 function goTo() {

package/internals/IconButton.vue

@@ -6,13 +6,15 @@ const props = defineProps<{
   icon?: string
   as?: string
   to?: string
+  disabled?: boolean
+  active?: boolean
 }>()
 
 const type = computed(() => props.as || (props.to ? 'router-link' : 'button'))
 </script>
 
 <template>
-  <component :is="type" class="slidev-icon-btn" :title="title" :to="to">
+  <component :is="type" class="slidev-icon-btn" :class="{ disabled, active }" :title="title" :to="to">
     <span class="sr-only">{{ title }}</span>
     <slot>
       <div :class="icon" />

package/internals/LaserPointer.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed, onMounted, watchEffect } from 'vue'
+import { useMousePosInSlide } from '../composables/useMousePosInSlide'
+import { useNav } from '../composables/useNav'
+import { cursorStyle } from '../state'
+import { sharedState } from '../state/shared'
+
+const selfMouse = useMousePosInSlide()
+const { isPresenter } = useNav()
+
+const laserPointer = computed(() => {
+  if (!isPresenter.value && sharedState.cursor?.style === 'laser') {
+    return sharedState.cursor
+  }
+  if (cursorStyle.value === 'laser') {
+    return selfMouse.value
+  }
+  return null
+})
+
+onMounted(() => {
+  watchEffect(() => {
+    document.body.classList.toggle('slidev-self-laser-active', cursorStyle.value === 'laser' && !!laserPointer.value)
+  })
+})
+</script>
+
+<template>
+  <div
+    v-if="laserPointer"
+    class="absolute top-0 left-0 right-0 bottom-0 pointer-events-none text-xl"
+  >
+    <div
+      class="laser-pointer"
+      :style="{
+        left: `${laserPointer.x}%`,
+        top: `${laserPointer.y}%`,
+      }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.laser-pointer {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 9999px;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(
+    circle at center,
+    rgba(255, 80, 80, 1) 0%,
+    rgba(255, 0, 0, 0.95) 55%,
+    rgba(255, 0, 0, 0.1) 100%
+  );
+  box-shadow:
+    0 0 10px rgba(255, 0, 0, 0.9),
+    0 0 22px rgba(255, 0, 0, 0.55);
+}
+</style>
+
+<style>
+.slidev-self-laser-active .slidev-slide-container {
+  cursor: none;
+}
+</style>

package/internals/MenuButton.vue

@@ -25,7 +25,7 @@ onClickOutside(el, () => {
 <template>
   <div ref="el" class="flex relative">
     <button :class="{ disabled }" @click="value = !value">
-      <slot name="button" :class="{ disabled }" />
+      <slot name="button" :value :class="{ disabled }" />
     </button>
     <KeepAlive>
       <div

package/internals/NavControls.vue

@@ -5,7 +5,7 @@ import { useDrawings } from '../composables/useDrawings'
 import { useNav } from '../composables/useNav'
 import { configs } from '../env'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { activeElement, breakpoints, fullscreen, hasViewerCssFilter, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
+import { activeElement, breakpoints, cursorStyle, fullscreen, hasViewerCssFilter, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterCursor, togglePresenterLayout } from '../state'
 import { downloadPDF } from '../utils'
 import IconButton from './IconButton.vue'
 import MenuButton from './MenuButton.vue'
@@ -67,10 +67,10 @@ if (__SLIDEV_FEATURE_RECORD__)
         <div v-if="isFullscreen" class="i-carbon:minimize" />
         <div v-else class="i-carbon:maximize" />
       </IconButton>
-      <IconButton :class="{ disabled: !hasPrev }" title="Go to previous slide" @click="prev">
+      <IconButton :disabled="!hasPrev" title="Go to previous slide" @click="prev">
         <div class="i-carbon:arrow-left" />
       </IconButton>
-      <IconButton :class="{ disabled: !hasNext }" title="Go to next slide" @click="next">
+      <IconButton :disabled="!hasNext" title="Go to next slide" @click="next">
         <div class="i-carbon:arrow-right" />
       </IconButton>
       <IconButton v-if="!isEmbedded" title="Show slide overview" @click="toggleOverview()">
@@ -81,8 +81,8 @@ if (__SLIDEV_FEATURE_RECORD__)
         :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
         @click="toggleDark()"
       >
-        <carbon-moon v-if="isDark" />
-        <carbon-sun v-else />
+        <div v-if="isDark" class="i-carbon-moon" />
+        <div v-else class="i-carbon-sun" />
       </IconButton>
 
       <VerticalDivider />
@@ -95,16 +95,28 @@ if (__SLIDEV_FEATURE_RECORD__)
 
         <IconButton
           v-if="isPresenter"
-          :title="showPresenterCursor ? 'Hide presenter cursor' : 'Show presenter cursor'"
-          @click="showPresenterCursor = !showPresenterCursor"
+          :title="cursorStyle === 'laser'
+            ? (showPresenterCursor ? 'Disable laser pointer' : 'Enable laser pointer')
+            : (showPresenterCursor ? 'Hide presenter cursor' : 'Show presenter cursor')"
+          :active="showPresenterCursor"
+          @click="togglePresenterCursor()"
         >
-          <ph-cursor-fill v-if="showPresenterCursor" />
-          <ph-cursor-duotone v-else />
+          <template v-if="cursorStyle === 'laser'">
+            <div v-if="showPresenterCursor" class="i-carbon-magic-wand-filled color-red-600 dark:color-red-400" />
+            <div v-else class="i-carbon-magic-wand" />
+          </template>
+          <template v-else>
+            <div v-if="showPresenterCursor" class="i-ph-cursor-fill" />
+            <div v-else class="i-ph-cursor-duotone" />
+          </template>
         </IconButton>
-      </template>
-
-      <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
-        <IconButton class="relative" :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" @click="drawingEnabled = !drawingEnabled">
+        <IconButton
+          v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter)"
+          class="relative"
+          :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'"
+          :active="drawingEnabled"
+          @click="drawingEnabled = !drawingEnabled"
+        >
           <div class="i-carbon:pen" />
           <div
             v-if="drawingEnabled"
@@ -112,17 +124,15 @@ if (__SLIDEV_FEATURE_RECORD__)
             :style="{ background: brush.color }"
           />
         </IconButton>
+
         <VerticalDivider />
-      </template>
 
-      <template v-if="!isEmbedded">
         <IconButton v-if="isPresenter" title="Play Mode" @click="exitPresenter">
           <div class="i-carbon:presentation-file" />
         </IconButton>
         <IconButton v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" title="Presenter Mode" @click="enterPresenter">
           <div class="i-carbon:user-speaker" />
         </IconButton>
-
         <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
           :title="showEditor ? 'Hide editor' : 'Show editor'"
@@ -164,8 +174,8 @@ if (__SLIDEV_FEATURE_RECORD__)
         <SyncControls v-if="__SLIDEV_FEATURE_PRESENTER__" />
 
         <MenuButton>
-          <template #button>
-            <IconButton title="More Options">
+          <template #button="{ value }">
+            <IconButton title="More Options" :active="value">
               <div class="i-carbon:settings-adjust" />
               <div v-if="hasViewerCssFilter" w-2 h-2 bg-primary rounded-full absolute top-0.5 right-0.5 />
             </IconButton>