@slidev/client 52.19.2 → 52.20.1

package/builtin/ShikiMagicMove.vue

@@ -180,12 +180,13 @@ onMounted(() => {
       :step="stepIndex"
       :animate="!isPrintMode"
       :options="{
+        stagger: 1,
+        ...configs.shiki?.magicMove,
         globalScale: scale * zoom,
         // Use duration 0 to skip animation instead of using the animate prop,
         // because moving from non-animated to animated causes issues with
         // new elements. Unfortunately, this causes a flash.
         duration: isFirstTick ? 0 : $props.duration,
-        stagger: 1,
       }"
     />
     <button

package/constants.ts

@@ -90,5 +90,6 @@ export const HEADMATTER_FIELDS = [
   'seoMeta',
   'notesAutoRuby',
   'magicMoveDuration',
+  'shiki',
   'preloadImages',
 ]

package/layouts/iframe-left.vue

@@ -13,9 +13,9 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
   <div class="grid grid-cols-2 w-full h-full">
     <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
       <iframe
-        id="frame" class="w-full h-full"
+        id="frame" class="slidev-layout-iframe"
         :src="url"
-        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+        :style="scale ? { '--slidev-iframe-scale': scale } : {}"
       />
     </div>
     <div class="slidev-layout default" v-bind="$attrs">

package/layouts/iframe-right.vue

@@ -16,9 +16,9 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
     </div>
     <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
       <iframe
-        id="frame" class="w-full h-full"
+        id="frame" class="slidev-layout-iframe"
         :src="url"
-        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+        :style="scale ? { '--slidev-iframe-scale': scale } : {}"
       />
     </div>
   </div>

package/layouts/iframe.vue

@@ -13,9 +13,9 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
   <div class="h-full w-full">
     <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
       <iframe
-        id="frame" class="w-full h-full"
+        id="frame" class="slidev-layout-iframe"
         :src="url"
-        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+        :style="scale ? { '--slidev-iframe-scale': scale } : {}"
       />
     </div>
   </div>

package/logic/recording.ts

@@ -106,6 +106,11 @@ export function useRecording() {
   async function startCameraStream() {
     await ensureDevicesListPermissions()
     await nextTick()
+
+    // Stopped tracks can never be resumed, the whole stream has to be requested again
+    if (streamCamera.value?.getTracks().some(track => track.readyState === 'ended'))
+      closeStream(streamCamera)
+
     if (!streamCamera.value) {
       if (currentCamera.value === 'none' && currentMic.value === 'none')
         return
@@ -206,7 +211,9 @@ export function useRecording() {
       const blob = recorderSlides.value!.getBlob()
       downloadBlob(blob, duration, getFilename('screen', config.mimeType))
       closeStream(streamCapture)
-      closeStream(streamSlides)
+      // `streamSlides` only borrows its tracks from `streamCapture` and `streamCamera`,
+      // stopping them here would also end the mic still used by the camera stream
+      streamSlides.value = undefined
       recorderSlides.value = undefined
     })
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.19.2",
+  "version": "52.20.1",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -37,14 +37,14 @@
     "@shikijs/magic-move": "^4.4.3",
     "@shikijs/monaco": "^4.4.3",
     "@shikijs/vitepress-twoslash": "^4.4.3",
-    "@slidev/parser": "52.19.2",
+    "@slidev/parser": "52.20.1",
     "@slidev/rough-notation": "^0.1.0",
-    "@slidev/types": "52.19.2",
+    "@slidev/types": "52.20.1",
     "@typescript/ata": "^0.9.8",
     "@unhead/vue": "^3.4.1",
-    "@unocss/extractor-mdc": "^66.10.3",
-    "@unocss/preset-mini": "^66.10.3",
-    "@unocss/reset": "^66.10.3",
+    "@unocss/extractor-mdc": "^66.10.4",
+    "@unocss/preset-mini": "^66.10.4",
+    "@unocss/reset": "^66.10.4",
     "@vueuse/core": "^14.4.0",
     "@vueuse/math": "^14.4.0",
     "@vueuse/motion": "^3.0.3",
@@ -56,6 +56,7 @@
     "fuse.js": "^7.5.0",
     "katex": "^0.18.7",
     "lz-string": "^1.5.0",
+    "markdown-it-github-alerts": "^1.0.1",
     "mermaid": "^11.16.1",
     "monaco-editor": "^0.56.0",
     "nanotar": "^0.3.0",
@@ -63,12 +64,12 @@
     "recordrtc": "^5.6.2",
     "shiki": "^4.4.3",
     "typescript": "^6.0.3",
-    "unocss": "^66.10.3",
+    "unocss": "^66.10.4",
     "vue": "^3.5.42",
     "vue-router": "^5.3.1",
     "yaml": "^2.9.1"
   },
   "devDependencies": {
-    "vite": "~8.2.0"
+    "vite": "^8.3.0"
   }
 }

package/styles/index.css

@@ -122,6 +122,21 @@ html {
   transform: scale(calc(1 / var(--slidev-slide-scale)));
 }
 
+/*
+ * Counter the slide scale so iframes lay out and rasterize at their real
+ * on-screen resolution. Without this, canvas-based content (e.g. Excalidraw)
+ * is rendered at the slide's design size and bitmap-upscaled, which makes it
+ * blurry when the slide is scaled up. Scales below 1 are not countered, so
+ * scaled-down views like the overview keep the original layout.
+ */
+.slidev-layout-iframe {
+  --slidev-iframe-raster: max(var(--slidev-slide-scale, 1), 1);
+  width: calc(100% * var(--slidev-iframe-raster));
+  height: calc(100% * var(--slidev-iframe-raster));
+  transform: scale(calc(var(--slidev-iframe-scale, 1) / var(--slidev-iframe-raster)));
+  transform-origin: top left;
+}
+
 #twoslash-container {
   position: fixed;