@slidev/client 52.13.0 → 52.14.0

package/constants.ts

@@ -82,6 +82,7 @@ export const HEADMATTER_FIELDS = [
   'drawings',
   'htmlAttrs',
   'mdc',
+  'comark',
   'contextMenu',
   'wakeLock',
   'seoMeta',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.13.0",
+  "version": "52.14.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -32,37 +32,39 @@
     "@iconify-json/carbon": "^1.2.18",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
-    "@shikijs/engine-javascript": "^3.21.0",
-    "@shikijs/monaco": "^3.21.0",
-    "@shikijs/vitepress-twoslash": "^3.21.0",
+    "@shikijs/engine-javascript": "^4.0.0",
+    "@shikijs/monaco": "^4.0.0",
+    "@shikijs/vitepress-twoslash": "^4.0.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.8",
-    "@unhead/vue": "^2.1.2",
-    "@unocss/reset": "^66.6.0",
-    "@vueuse/core": "^14.1.0",
-    "@vueuse/math": "^14.1.0",
+    "@unhead/vue": "^2.1.9",
+    "@unocss/extractor-mdc": "^66.6.2",
+    "@unocss/preset-mini": "^66.6.2",
+    "@unocss/reset": "^66.6.2",
+    "@vueuse/core": "^14.2.1",
+    "@vueuse/math": "^14.2.1",
     "@vueuse/motion": "^3.0.3",
     "ansis": "^4.2.0",
     "drauu": "^1.0.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.1.0",
-    "katex": "^0.16.28",
+    "katex": "^0.16.33",
     "lz-string": "^1.5.0",
-    "mermaid": "^11.12.2",
+    "mermaid": "^11.12.3",
     "monaco-editor": "^0.55.1",
-    "nanotar": "^0.2.0",
+    "nanotar": "^0.3.0",
     "pptxgenjs": "^4.0.1",
     "recordrtc": "^5.6.2",
-    "shiki": "^3.21.0",
+    "shiki": "^4.0.0",
     "shiki-magic-move": "^1.2.1",
     "typescript": "^5.9.3",
-    "unocss": "^66.6.0",
-    "vue": "^3.5.27",
-    "vue-router": "^4.6.4",
+    "unocss": "^66.6.2",
+    "vue": "^3.5.29",
+    "vue-router": "^5.0.3",
     "yaml": "^2.8.2",
-    "@slidev/parser": "52.13.0",
-    "@slidev/types": "52.13.0"
+    "@slidev/parser": "52.14.0",
+    "@slidev/types": "52.14.0"
   },
   "devDependencies": {
     "vite": "^7.3.1"

package/pages/presenter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { useLocalStorage, useMouse, useWindowFocus } from '@vueuse/core'
+import { useEventListener, useLocalStorage, useMediaQuery, useMouse, useWindowFocus } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { createClicksContextBase } from '../composables/useClicks'
 import { useDrawings } from '../composables/useDrawings'
@@ -32,6 +32,9 @@ import { sharedState } from '../state/shared'
 
 const inFocus = useWindowFocus()
 const main = ref<HTMLDivElement>()
+const gridContainer = ref<HTMLDivElement>()
+const noteSection = ref<HTMLDivElement>()
+const bottomSection = ref<HTMLDivElement>()
 
 registerShortcuts()
 useSwipeControls(main)
@@ -83,6 +86,158 @@ watch(
 )
 
 const mainSlideMode = useLocalStorage<'slides' | 'mirror'>('slidev-presenter-main-slide-mode', 'slides')
+
+// Resize state (persisted)
+const notesWidth = useLocalStorage('slidev-presenter-notes-width', 360)
+const notesRowSize = useLocalStorage('slidev-presenter-notes-row-size', 280)
+const bottomSectionHeight = ref(0)
+const isResizingNotes = ref(false)
+const isResizingNotesRow = ref(false)
+const resizeStartX = ref(0)
+const resizeStartWidth = ref(360)
+const resizeStartY = ref(0)
+const resizeStartRowSize = ref(280)
+
+const RESIZER_LIMITS = {
+  minNotesWidth: 240,
+  maxNotesWidth: 720,
+  minNotesRowSize: 160,
+  maxNotesWidthRatio: 0.7,
+  maxNotesRowHeightRatio: 0.75,
+}
+
+const isLayout1Wide = useMediaQuery('(min-aspect-ratio: 1/1)')
+const isLayout1Stacked = useMediaQuery('(max-aspect-ratio: 3/5)')
+const isNotesOnRight = computed(() => presenterLayout.value === 1 && isLayout1Wide.value)
+const isNotesResizable = computed(() => !(presenterLayout.value === 1 && isLayout1Stacked.value))
+const isNotesRowResizable = computed(() =>
+  (presenterLayout.value === 1 && !isLayout1Stacked.value) || presenterLayout.value === 2 || presenterLayout.value === 3,
+)
+const isNotesOnBottom = computed(() => presenterLayout.value === 1 && !isLayout1Stacked.value)
+
+function clampNotesWidth(width: number) {
+  if (!Number.isFinite(width))
+    return RESIZER_LIMITS.minNotesWidth
+  return Math.max(
+    RESIZER_LIMITS.minNotesWidth,
+    Math.min(RESIZER_LIMITS.maxNotesWidth, Math.round(width)),
+  )
+}
+
+function updateNotesWidthFromPointer(clientX: number) {
+  const container = gridContainer.value
+  if (!container)
+    return
+
+  const rect = container.getBoundingClientRect()
+  const deltaX = clientX - resizeStartX.value
+  const proposedWidth = isNotesOnRight.value
+    ? resizeStartWidth.value - deltaX
+    : resizeStartWidth.value + deltaX
+  const nextWidth = clampNotesWidth(proposedWidth)
+  const maxByViewport = Math.round(rect.width * RESIZER_LIMITS.maxNotesWidthRatio)
+  notesWidth.value = Math.min(nextWidth, Math.max(RESIZER_LIMITS.minNotesWidth, maxByViewport))
+}
+
+function onNotesResizeStart(e: PointerEvent) {
+  if (!isNotesResizable.value)
+    return
+  if (e.button !== 0)
+    return
+  e.preventDefault()
+  resizeStartX.value = e.clientX
+  resizeStartWidth.value = notesWidth.value
+  isResizingNotes.value = true
+}
+
+function clampNotesRowSize(size: number) {
+  if (!Number.isFinite(size))
+    return RESIZER_LIMITS.minNotesRowSize
+  return Math.max(RESIZER_LIMITS.minNotesRowSize, Math.round(size))
+}
+
+function updateNotesRowSizeFromPointer(clientY: number) {
+  const container = gridContainer.value
+  if (!container)
+    return
+
+  const rect = container.getBoundingClientRect()
+  const deltaY = clientY - resizeStartY.value
+  const proposed = isNotesOnBottom.value
+    ? resizeStartRowSize.value - deltaY
+    : resizeStartRowSize.value + deltaY
+  const maxByViewport = Math.round(rect.height * RESIZER_LIMITS.maxNotesRowHeightRatio)
+  notesRowSize.value = Math.min(clampNotesRowSize(proposed), Math.max(RESIZER_LIMITS.minNotesRowSize, maxByViewport))
+}
+
+function onNotesRowResizeStart(e: PointerEvent) {
+  if (!isNotesRowResizable.value)
+    return
+  if (e.button !== 0)
+    return
+  e.preventDefault()
+
+  // In layout 2, notesRowSize controls the top section (main slide) height
+  // In other layouts, it represents the notes area height
+  const currentHeight = presenterLayout.value === 2
+    ? main.value?.getBoundingClientRect().height
+    : noteSection.value?.getBoundingClientRect().height
+  resizeStartY.value = e.clientY
+  resizeStartRowSize.value = clampNotesRowSize(currentHeight ?? notesRowSize.value)
+  isResizingNotesRow.value = true
+}
+
+function updateBottomSectionHeight() {
+  const element = bottomSection.value
+  if (!element)
+    return
+  bottomSectionHeight.value = Math.round(element.getBoundingClientRect().height)
+}
+
+function stopResizing() {
+  isResizingNotes.value = false
+  isResizingNotesRow.value = false
+}
+
+function syncResizerLayoutState() {
+  updateBottomSectionHeight()
+  normalizeResizerState()
+}
+
+useEventListener(window, 'pointermove', (e) => {
+  if (isResizingNotes.value)
+    updateNotesWidthFromPointer(e.clientX)
+  if (isResizingNotesRow.value)
+    updateNotesRowSizeFromPointer(e.clientY)
+})
+
+useEventListener(window, 'pointerup', stopResizing)
+useEventListener(window, 'pointercancel', stopResizing)
+
+onMounted(() => {
+  syncResizerLayoutState()
+})
+
+useEventListener(window, 'resize', () => {
+  syncResizerLayoutState()
+})
+
+function normalizeResizerState() {
+  notesWidth.value = clampNotesWidth(notesWidth.value)
+  notesRowSize.value = clampNotesRowSize(notesRowSize.value)
+
+  const container = gridContainer.value
+  if (!container)
+    return
+
+  const rect = container.getBoundingClientRect()
+  const maxWidth = Math.round(rect.width * RESIZER_LIMITS.maxNotesWidthRatio)
+  const maxRowSize = Math.round(rect.height * RESIZER_LIMITS.maxNotesRowHeightRatio)
+
+  notesWidth.value = Math.min(notesWidth.value, Math.max(RESIZER_LIMITS.minNotesWidth, maxWidth))
+  notesRowSize.value = Math.min(notesRowSize.value, Math.max(RESIZER_LIMITS.minNotesRowSize, maxRowSize))
+}
+
 const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
@@ -120,7 +275,34 @@ onMounted(() => {
       <CurrentProgressBar />
       <TimerBar />
     </div>
-    <div class="grid-container" :class="`layout${presenterLayout}`">
+    <div
+      ref="gridContainer"
+      class="grid-container"
+      :class="`layout${presenterLayout}`"
+      :style="{
+        '--slidev-presenter-notes-width': `${notesWidth}px`,
+        '--slidev-presenter-notes-row-size': `${notesRowSize}px`,
+        '--slidev-presenter-bottom-height': `${bottomSectionHeight}px`,
+      }"
+    >
+      <!-- Unified vertical resizer for wide layout -->
+      <div
+        v-if="isNotesResizable && isNotesOnRight"
+        class="notes-vertical-resizer"
+        role="separator"
+        aria-orientation="vertical"
+        title="Resize notes panel"
+        @pointerdown="onNotesResizeStart"
+      />
+      <!-- Unified vertical resizer for layout 3 -->
+      <div
+        v-if="isNotesResizable && presenterLayout === 3"
+        class="notes-vertical-resizer-left"
+        role="separator"
+        aria-orientation="vertical"
+        title="Resize notes panel"
+        @pointerdown="onNotesResizeStart"
+      />
       <div ref="main" class="relative grid-section main flex flex-col">
         <div flex="~ gap-4 items-center" border="b main" p1>
           <span op50 px2>Current</span>
@@ -155,6 +337,14 @@ onMounted(() => {
         />
       </div>
       <div class="relative grid-section next flex flex-col p-2 lg:p-4">
+        <div
+          v-if="isNotesRowResizable && presenterLayout === 2"
+          class="notes-row-resizer top-[-6px]"
+          role="separator"
+          aria-orientation="horizontal"
+          title="Resize notes panel height"
+          @pointerdown="onNotesRowResizeStart"
+        />
         <SlideContainer v-if="nextFrame && nextFrameClicksCtx" key="next">
           <SlideWrapper
             :key="nextFrame[0].no"
@@ -172,45 +362,64 @@ onMounted(() => {
           Next
         </div>
       </div>
-      <div v-if="SideEditor && showEditor" class="grid-section note of-auto">
-        <SideEditor />
-      </div>
-      <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
-        <NoteEditable
-          v-if="__DEV__"
-          :key="`edit-${currentSlideNo}`"
-          v-model:editing="notesEditing"
-          :no="currentSlideNo"
-          class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
-          :clicks-context="clicksContext"
-          :style="{ fontSize: `${presenterNotesFontSize}em` }"
+      <div ref="noteSection" class="relative grid-section note overflow-hidden">
+        <div
+          v-if="isNotesResizable && !isNotesOnRight && presenterLayout !== 3"
+          class="notes-resizer right-[-6px]"
+          role="separator"
+          aria-orientation="vertical"
+          title="Resize notes panel"
+          @pointerdown="onNotesResizeStart"
         />
-        <NoteStatic
-          v-else
-          :key="`static-${currentSlideNo}`"
-          :no="currentSlideNo"
-          class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
-          :style="{ fontSize: `${presenterNotesFontSize}em` }"
-          :clicks-context="clicksContext"
+        <div
+          v-if="isNotesRowResizable && presenterLayout !== 2"
+          class="notes-row-resizer"
+          :class="isNotesOnBottom ? 'top-[-6px]' : 'bottom-[-6px]'"
+          role="separator"
+          aria-orientation="horizontal"
+          title="Resize notes panel height"
+          @pointerdown="onNotesRowResizeStart"
         />
-        <div border-t border-main />
-        <div class="py-1 px-2 text-sm transition" :class="inFocus ? '' : 'op25'">
-          <IconButton title="Increase font size" @click="increasePresenterFontSize">
-            <div class="i-carbon:zoom-in" />
-          </IconButton>
-          <IconButton title="Decrease font size" @click="decreasePresenterFontSize">
-            <div class="i-carbon:zoom-out" />
-          </IconButton>
-          <IconButton
+
+        <SideEditor v-if="SideEditor && showEditor" class="h-full" />
+
+        <div v-else class="h-full grid grid-rows-[1fr_min-content]">
+          <NoteEditable
             v-if="__DEV__"
-            title="Edit Notes"
-            @click="notesEditing = !notesEditing"
-          >
-            <div class="i-carbon:edit" />
-          </IconButton>
+            :key="`edit-${currentSlideNo}`"
+            v-model:editing="notesEditing"
+            :no="currentSlideNo"
+            class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
+            :clicks-context="clicksContext"
+            :style="{ fontSize: `${presenterNotesFontSize}em` }"
+          />
+          <NoteStatic
+            v-else
+            :key="`static-${currentSlideNo}`"
+            :no="currentSlideNo"
+            class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
+            :style="{ fontSize: `${presenterNotesFontSize}em` }"
+            :clicks-context="clicksContext"
+          />
+          <div border-t border-main />
+          <div class="py-1 px-2 text-sm transition" :class="inFocus ? '' : 'op25'">
+            <IconButton title="Increase font size" @click="increasePresenterFontSize">
+              <div class="i-carbon:zoom-in" />
+            </IconButton>
+            <IconButton title="Decrease font size" @click="decreasePresenterFontSize">
+              <div class="i-carbon:zoom-out" />
+            </IconButton>
+            <IconButton
+              v-if="__DEV__"
+              title="Edit Notes"
+              @click="notesEditing = !notesEditing"
+            >
+              <div class="i-carbon:edit" />
+            </IconButton>
+          </div>
         </div>
       </div>
-      <div class="grid-section bottom flex">
+      <div ref="bottomSection" class="grid-section bottom flex">
         <NavControls :persist="true" class="transition" :class="inFocus ? '' : 'op25'" />
         <div flex-auto />
         <TimerInlined />
@@ -229,14 +438,16 @@ onMounted(() => {
 }
 
 .grid-container {
+  --slidev-presenter-notes-width: 360px;
+  --slidev-presenter-notes-row-size: 280px;
   --uno: bg-gray/20 flex-1 of-hidden;
   display: grid;
   gap: 1px 1px;
 }
 
 .grid-container.layout1 {
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 2fr 1fr min-content;
+  grid-template-columns: var(--slidev-presenter-notes-width) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 2fr) minmax(0, var(--slidev-presenter-notes-row-size)) min-content;
   grid-template-areas:
     'main main'
     'note next'
@@ -244,27 +455,18 @@ onMounted(() => {
 }
 
 .grid-container.layout2 {
-  grid-template-columns: 3fr 2fr;
-  grid-template-rows: 2fr 1fr min-content;
+  grid-template-columns: var(--slidev-presenter-notes-width) minmax(0, 1fr);
+  grid-template-rows: minmax(0, var(--slidev-presenter-notes-row-size)) minmax(0, 1fr) min-content;
   grid-template-areas:
     'note main'
     'note next'
     'bottom bottom';
 }
 
-.grid-container.layout3 {
-  grid-template-columns: 2fr 3fr;
-  grid-template-rows: 1fr 1fr min-content;
-  grid-template-areas:
-    'note next'
-    'main next'
-    'bottom bottom';
-}
-
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr 1fr min-content;
+    grid-template-rows: 2fr 1fr 1fr min-content;
     grid-template-areas:
       'main'
       'note'
@@ -275,8 +477,8 @@ onMounted(() => {
 
 @media (min-aspect-ratio: 1/1) {
   .grid-container.layout1 {
-    grid-template-columns: 1fr 1.1fr 0.9fr;
-    grid-template-rows: 1fr 2fr min-content;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) var(--slidev-presenter-notes-width);
+    grid-template-rows: minmax(0, 1fr) minmax(0, var(--slidev-presenter-notes-row-size)) min-content;
     grid-template-areas:
       'main main next'
       'main main note'
@@ -284,6 +486,15 @@ onMounted(() => {
   }
 }
 
+.grid-container.layout3 {
+  grid-template-columns: var(--slidev-presenter-notes-width) minmax(0, 1fr);
+  grid-template-rows: minmax(0, var(--slidev-presenter-notes-row-size)) minmax(0, 1fr) min-content;
+  grid-template-areas:
+    'note next'
+    'main next'
+    'bottom bottom';
+}
+
 .grid-section {
   --uno: bg-main;
 }
@@ -302,4 +513,96 @@ onMounted(() => {
 .grid-section.bottom {
   grid-area: bottom;
 }
+
+.notes-resizer {
+  position: absolute;
+  top: 0;
+  width: 12px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+  touch-action: none;
+}
+
+.notes-resizer::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background-color: currentColor;
+  opacity: 0.2;
+  transform: translateX(-50%);
+}
+
+.notes-row-resizer {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 12px;
+  cursor: row-resize;
+  z-index: 10;
+  touch-action: none;
+}
+
+.notes-row-resizer::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  height: 1px;
+  background-color: currentColor;
+  opacity: 0.2;
+  transform: translateY(-50%);
+}
+
+.notes-vertical-resizer {
+  position: absolute;
+  right: var(--slidev-presenter-notes-width);
+  top: 0;
+  bottom: var(--slidev-presenter-bottom-height, 0px);
+  width: 12px;
+  cursor: col-resize;
+  z-index: 10;
+  touch-action: none;
+  transform: translateX(50%);
+}
+
+.notes-vertical-resizer::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background-color: currentColor;
+  opacity: 0.2;
+  transform: translateX(-50%);
+}
+
+.notes-vertical-resizer-left {
+  position: absolute;
+  left: var(--slidev-presenter-notes-width);
+  top: 0;
+  bottom: var(--slidev-presenter-bottom-height, 0px);
+  width: 12px;
+  cursor: col-resize;
+  z-index: 10;
+  touch-action: none;
+  transform: translateX(-50%);
+}
+
+.notes-vertical-resizer-left::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background-color: currentColor;
+  opacity: 0.2;
+  transform: translateX(-50%);
+}
 </style>

package/setup/shiki.ts

@@ -1,13 +1,13 @@
 import setups from '#slidev/setups/shiki'
 import { createSingletonPromise } from '@antfu/utils'
 import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript'
-import { createdBundledHighlighter, createSingletonShorthands } from 'shiki/core'
+import { createBundledHighlighter, createSingletonShorthands } from 'shiki/core'
 import { resolveShikiOptions, shikiContext } from './shiki-options'
 
 export default createSingletonPromise(async () => {
   const { options, languageNames, languageInput, themeOption, themeNames, themeInput } = resolveShikiOptions(await Promise.all(setups.map(setup => setup(shikiContext))))
 
-  const createHighlighter = createdBundledHighlighter<string, string>({
+  const createHighlighter = createBundledHighlighter<string, string>({
     engine: createJavaScriptRegexEngine,
     langs: languageInput,
     themes: themeInput,