slidev-theme-kotlin 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 0.12.1
+
+### Fixed
+
+- Preserve visible `DrawnAnnotation` marks and `InlineCompilerError` diagnostics across adjacent cross-slide Magic Move transitions when their targets remain in place. Matching ink now hands off without replaying its entrance animation, while moved or unrelated targets still animate normally.
+
 ## 0.12.0
 
 ### Added

package/components/DrawnAnnotation.vue

@@ -29,6 +29,8 @@ import { injectionClicksContext } from '@slidev/client/constants.ts'
 import rough from 'roughjs'
 import { findTextInSegments } from './code-text-match'
 import type { TextSegment } from './code-text-match'
+import { rememberTransitionInk, takeTransitionInk } from './transition-ink'
+import type { TransitionInkBox } from './transition-ink'
 import { annotationLabelText, renderAnnotationLabel } from './annotation-label-markdown'
 import { localLabelWidthToSlideFraction, localPointToSlideFraction, nudgeConnector, nudgeLabelWidth, slideFractionPointToLocal, translateConnector, validateDrawnAnnotationGeometry } from './drawn-annotation/geometry'
 import type { DrawnAnnotationGeometry, PersistedAnnotationGeometry } from './drawn-annotation/geometry'
@@ -317,6 +319,17 @@ const hasLabel = computed(() => !!props.label)
 const labelHtml = computed(() => renderAnnotationLabel(props.label ?? ''))
 const labelText = computed(() => annotationLabelText(props.label ?? ''))
 const hasTarget = computed(() => !!props.target)
+// Cross-slide Magic Move mounts a separate annotation component on each page.
+// This identity lets a visible mark hand its ink to an equivalent neighbour;
+// the geometry hand-off below still requires their final positions to match.
+const transitionInkIdentity = computed(() => JSON.stringify([
+  sourceMarkType.value, targetMarkType.value, props.selector, props.text,
+  props.occurrence, props.multiline, props.padding, props.target,
+  props.targetX, props.targetY, props.targetRadius, props.label,
+  props.placement, props.gap, props.connect, props.arrow, props.curve,
+  props.iterations, props.color, props.strokeWidth, props.duration,
+  props.geometry, props.options,
+]))
 // A source-only mark exposes no visual-editor operation. It remains valid:
 // only labels and connectors have geometry that an editor can manipulate.
 const editorRelevant = computed(() => hasLabel.value || (props.connect && hasTarget.value))
@@ -392,6 +405,10 @@ const painted = computed(() => geometryPainted.value || showImmediately.value)
 // Drawing is held back until then, so a mark never appears on top of a Magic
 // Move step or a slide transition that is still travelling.
 const settled = ref(!props.wait)
+// A matching annotation was already visible on the preceding Magic Move page.
+// Let the incoming SVG appear complete after the move, rather than replaying
+// its stroke-dash entrance from scratch.
+const skipEntranceAnimation = ref(false)
 // An annotation with `until` is only shown while the thing it points at is on
 // screen: past that click every stage hides again, in one step.
 // `on` is the same thing derived from the resolved clicks, so the shorthand
@@ -754,6 +771,20 @@ let unregisterEditorActions: (() => void) | undefined
 // Fingerprint of the mark's last measured boxes. While the slide animates, a
 // frame in which the mark has not moved recomputes nothing.
 let lastMarkKey = ''
+// The marked bounds are retained in concrete-slide fractions. They are used
+// only to hand already-visible ink to an equivalent annotation on the next
+// cross-slide Magic Move page.
+let lastMarkTransitionBox: TransitionInkBox | undefined
+let lastVisibleMarkTransitionBox: TransitionInkBox | undefined
+watch(active, (isActive) => {
+  if (isActive && lastMarkTransitionBox)
+    lastVisibleMarkTransitionBox = lastMarkTransitionBox
+  // Keep the outgoing page's final visible bounds long enough for the
+  // isCurrentSlide watcher to hand them to its neighbour. A click-range exit,
+  // by contrast, really removes the annotation and must not carry stale ink.
+  else if (isCurrentSlide.value)
+    lastVisibleMarkTransitionBox = undefined
+})
 // Content boxes an automatic label avoids, in local SVG coordinates. The DOM
 // scan is refreshed on discrete re-measures (click settles, resizes, prop or
 // draft changes) and reused by the per-frame tracking passes, which must not
@@ -767,16 +798,25 @@ const watchedImages: HTMLImageElement[] = []
 // animations and Magic Move's generated animations with the same `finished`
 // promise, including their real delay and duration.
 let settleRun = 0
+// A Magic Move renderer replaces individual token animations as it progresses.
+// Its DOM classes, observed below, are the reliable final-settlement signal.
+let magicMoveWasObserved = false
 
 function relevantAnimations() {
-  const root = container.value
+  // A wrapped annotation owns its content, but a self-closing annotation is
+  // `display: contents` and its target is a following sibling. In particular,
+  // that is how an annotation points into a top-level Magic Move code fence.
+  // Query the concrete slide rather than the annotation container, otherwise
+  // its animation is invisible here and we settle at the view transition's
+  // end instead of at the final Shiki layout.
+  const root = slideRoot() ?? searchRoot()
   if (!root?.getAnimations)
     return []
 
   // A view transition is owned by the document, not by the incoming slide's
-  // slot. Its pseudo-elements therefore never appear in the annotation
-  // container's subtree, even though they are exactly the animation we must
-  // wait for before drawing on the new slide.
+  // layout. Its pseudo-elements therefore never appear in this subtree, even
+  // though they are exactly the animation we must wait for before drawing on
+  // the new slide.
   const viewTransitionAnimations = typeof document !== 'undefined'
     ? document.getAnimations().filter((animation) => {
         const pseudo = (animation.effect as KeyframeEffect | null)?.pseudoElement
@@ -806,9 +846,9 @@ function nextFrame() {
 
 /**
  * Release the entrance when the animations that actually started for this
- * click finish. Re-check after each batch because Magic Move can create the
- * next transition while completing the previous one. A final frame lets the
- * browser commit the finished layout before it is measured for drawing.
+ * click finish. Magic Move replaces its individual token animations while it
+ * runs, so its observed DOM classes, rather than a potentially stale
+ * `Animation.finished` promise, release the final measurement.
  */
 const VIEW_TRANSITION_START_GRACE = 100
 
@@ -824,6 +864,13 @@ async function settleAfterAnimations(run: number, grace = 0) {
   await nextFrame()
   while (mounted && run === settleRun) {
     const animations = relevantAnimations()
+    if (isMagicMoveInProgress()) {
+      // The MutationObserver sees the final class removal and settles then.
+      // Do not await these token animations: Shiki may replace one while it is
+      // running, leaving that old promise unresolved.
+      magicMoveWasObserved = true
+      return
+    }
     if (!animations.length) {
       await nextFrame()
       if (mounted && run === settleRun && !relevantAnimations().length) {
@@ -831,6 +878,7 @@ async function settleAfterAnimations(run: number, grace = 0) {
         // recomputation per click that the animation-frame passes lean on.
         settled.value = true
         updateGeometry()
+        inheritTransitionInk()
       }
       return
     }
@@ -839,12 +887,34 @@ async function settleAfterAnimations(run: number, grace = 0) {
   }
 }
 
+function isMagicMoveInProgress() {
+  const root = slideRoot() ?? searchRoot()
+  return !!root?.querySelector([
+    '.shiki-magic-move-enter-active',
+    '.shiki-magic-move-leave-active',
+    '.shiki-magic-move-move',
+    '.shiki-magic-move-container-resize',
+    '.shiki-magic-move-container-restyle',
+  ].join(', '))
+}
+
+function settleAfterMagicMove() {
+  if (!magicMoveWasObserved || isMagicMoveInProgress() || !mounted || !isCurrentSlide.value)
+    return
+  magicMoveWasObserved = false
+  settled.value = true
+  updateGeometry()
+  inheritTransitionInk()
+}
+
 /**
  * Marks the annotation as moving again and keeps measuring until it stops.
  * Called on every click, because that is what starts a Magic Move step.
  */
 function unsettle(grace = 0) {
   const run = ++settleRun
+  magicMoveWasObserved = false
+  skipEntranceAnimation.value = false
   // A click can restyle the slide, so measured label sizes and content
   // obstacles go stale here — once per click, which leaves them shared by
   // every frame of the animation.
@@ -1014,6 +1084,9 @@ function updateGeometry() {
 
   geometry.width = width
   geometry.height = height
+  lastMarkTransitionBox = transitionInkBox(marked)
+  if (active.value)
+    lastVisibleMarkTransitionBox = lastMarkTransitionBox
   assignPaths('mark', shapeBoxes.flatMap(box => markPaths(box, sourceMarkType.value)))
 
   paintDestination(root, toLocal, marked)
@@ -1070,6 +1143,37 @@ function markPaths(box: Box, type: MarkType, padding = props.padding): string[]
 }
 
 /** Draws the leader and positions the label. */
+function transitionInkBox(marked: Box): TransitionInkBox | undefined {
+  const svg = overlay.value
+  const slide = slideRoot()
+  if (!svg || !slide || !geometry.width || !geometry.height)
+    return undefined
+  const overlayBox = svg.getBoundingClientRect()
+  const slideBox = slide.getBoundingClientRect()
+  if (!overlayBox.width || !overlayBox.height || !slideBox.width || !slideBox.height)
+    return undefined
+  const left = overlayBox.left + marked.left / geometry.width * overlayBox.width
+  const top = overlayBox.top + marked.top / geometry.height * overlayBox.height
+  const right = overlayBox.left + marked.right / geometry.width * overlayBox.width
+  const bottom = overlayBox.top + marked.bottom / geometry.height * overlayBox.height
+  return {
+    left: (left - slideBox.left) / slideBox.width,
+    top: (top - slideBox.top) / slideBox.height,
+    right: (right - slideBox.left) / slideBox.width,
+    bottom: (bottom - slideBox.top) / slideBox.height,
+  }
+}
+
+function isCrossSlideMagicMove() {
+  return !!slideRoot()?.querySelector('.magic-move-between')
+}
+
+function inheritTransitionInk() {
+  if (!isCurrentSlide.value || !withinRange.value || !lastMarkTransitionBox || !isCrossSlideMagicMove())
+    return
+  skipEntranceAnimation.value = takeTransitionInk(transitionInkIdentity.value, slideContext.$page.value, lastMarkTransitionBox)
+}
+
 function paintDestination(
   root: HTMLElement,
   toLocal: (rect: DOMRect) => Box,
@@ -1701,21 +1805,31 @@ function connectObservers() {
     resizeObserver.observe(container.value)
   if (overlay.value)
     resizeObserver.observe(overlay.value)
-  const source = container.value?.querySelector(props.selector)
+  const observedRoot = slideRoot() ?? searchRoot()
+  const source = observedRoot?.querySelector<HTMLElement>(props.selector)
   if (source)
     resizeObserver.observe(source)
-  for (const image of Array.from(container.value?.querySelectorAll('img') ?? [])) {
+  for (const image of Array.from(observedRoot?.querySelectorAll('img') ?? [])) {
     image.addEventListener('load', scheduleUpdate)
     watchedImages.push(image)
   }
 
-  // Watch the code blocks only. Observing the whole slot would pick up our own
-  // paths and spin the tracking loop forever.
-  const animated = container.value?.querySelectorAll('.slidev-code, .slidev-code-magic-move, pre.shiki')
+  // Watch code blocks under the concrete slide, not just under this component:
+  // a self-closing annotation points at following sibling fences. Observing
+  // only these blocks avoids picking up our own SVG paths and spinning the
+  // tracking loop forever.
+  const animated = observedRoot?.querySelectorAll('.slidev-code, .slidev-code-magic-move, pre.shiki')
   if (animated?.length) {
-    mutationObserver = new MutationObserver(() => track())
-    for (const element of Array.from(animated))
+    mutationObserver = new MutationObserver(() => {
+      if (isMagicMoveInProgress())
+        magicMoveWasObserved = true
+      track()
+      settleAfterMagicMove()
+    })
+    for (const element of Array.from(animated)) {
+      resizeObserver.observe(element)
       mutationObserver.observe(element, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['style', 'class'] })
+    }
   }
 
   window.addEventListener('resize', scheduleUpdate)
@@ -1769,11 +1883,15 @@ watch($clicks, () => {
 // document-level pseudo-elements before the first animation scan.
 watch(isCurrentSlide, (current) => {
   if (current) {
+    lastVisibleMarkTransitionBox = undefined
     connectObservers()
     unsettle(VIEW_TRANSITION_START_GRACE)
     track()
   }
   else {
+    if (lastVisibleMarkTransitionBox && isCrossSlideMagicMove())
+      rememberTransitionInk(transitionInkIdentity.value, slideContext.$page.value, lastVisibleMarkTransitionBox)
+    lastVisibleMarkTransitionBox = undefined
     disconnectObservers()
     // Cancel in-flight measurement too: a settle pass or tracking loop begun
     // before navigating away would keep calling updateGeometry on a slide
@@ -2273,7 +2391,7 @@ onBeforeUnmount(() => {
   <div
     ref="container"
     class="drawn-annotation"
-    :class="{ 'is-fading-out': fadingOut }"
+    :class="{ 'is-fading-out': fadingOut, 'skip-entrance-animation': skipEntranceAnimation }"
       >
     <!-- The marker takes part in Slidev's click ordering while component state
          drives the drawing. This avoids a mount-time v-click class race. -->
@@ -2482,6 +2600,12 @@ onBeforeUnmount(() => {
     opacity var(--exit-fade, 300ms) ease-out;
 }
 
+.skip-entrance-animation .annotation-stroke,
+.skip-entrance-animation .annotation-label {
+  transition-duration: 0ms !important;
+  transition-delay: 0ms !important;
+}
+
 .is-active .annotation-mark {
   stroke-dashoffset: 0;
   opacity: 1;

package/components/InlineCompilerError.vue

@@ -2,9 +2,11 @@
 import type { ClicksInfo } from '@slidev/types'
 import type { TextSegment } from './code-text-match'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useId, useTemplateRef, watch } from 'vue'
-import { useNav, useSlideContext } from '@slidev/client'
+import { useIsSlideActive, useNav, useSlideContext } from '@slidev/client'
 import { useMutationObserver, useResizeObserver } from '@vueuse/core'
 import { findTextInSegments } from './code-text-match'
+import { rememberTransitionInk, takeTransitionInk } from './transition-ink'
+import type { TransitionInkBox } from './transition-ink'
 
 const props = defineProps<{
   /** One-based source line number inside the single fenced code block this component wraps. Optional when `text` identifies the target. */
@@ -27,8 +29,10 @@ const props = defineProps<{
   on?: number | string
 }>()
 
-const { $clicksContext, $clicks, $scale, $zoom } = useSlideContext()
+const slideContext = useSlideContext()
+const { $clicksContext, $clicks, $scale, $zoom } = slideContext
 const { isPrintMode } = useNav()
+const isCurrentSlide = useIsSlideActive()
 const id = useId()
 const container = useTemplateRef<HTMLElement>('container')
 const position = ref({
@@ -52,6 +56,12 @@ const textMatches = ref(0)
 const hasTarget = computed(() => !!targetRange.value)
 // True while Shiki Magic Move is transitioning between steps.
 const animating = ref(false)
+const skipEntranceAnimation = ref(false)
+const transitionInkIdentity = computed(() => JSON.stringify([
+  props.line, props.text, props.occurrence, props.message,
+]))
+let lastTargetTransitionBox: TransitionInkBox | undefined
+let lastVisibleTargetTransitionBox: TransitionInkBox | undefined
 
 // Slidev reserves click 0 for the pre-click state and warns when anything
 // registers at 0, so `at` values <= 0 mean "visible from the start".
@@ -94,6 +104,8 @@ onMounted(() => {
     $clicksContext.register(id, clickInfo.value)
 })
 const visible = computed(() => {
+  if (!isCurrentSlide.value)
+    return false
   const info = clickInfo.value
   if (!info)
     return true
@@ -132,6 +144,49 @@ let magicMoveFrame: number | undefined
 let codeHost: HTMLElement | null = null
 let isMagicMove = false
 
+function isCrossSlideMagicMove(host: HTMLElement) {
+  return !!(host.closest('.slidev-layout') ?? host).querySelector('.magic-move-between')
+}
+
+function transitionInkBox(left: number, top: number, right: number, bottom: number, slide: DOMRect): TransitionInkBox | undefined {
+  if (!slide.width || !slide.height)
+    return undefined
+  return {
+    left: (left - slide.left) / slide.width,
+    top: (top - slide.top) / slide.height,
+    right: (right - slide.left) / slide.width,
+    bottom: (bottom - slide.top) / slide.height,
+  }
+}
+
+function relevantMagicMoveAnimations(host: HTMLElement) {
+  const root = host.closest<HTMLElement>('.slidev-layout') ?? host
+  const pageAnimations = document.getAnimations().filter((animation) => {
+    const pseudo = (animation.effect as KeyframeEffect | null)?.pseudoElement
+    return typeof pseudo === 'string' && pseudo.startsWith('::view-transition-')
+  })
+  const animations = [...root.getAnimations({ subtree: true }), ...pageAnimations]
+  return [...new Set(animations)].filter((animation) => {
+    if (animation.playState !== 'running' && !animation.pending)
+      return false
+    const effect = animation.effect as KeyframeEffect | null
+    const target = effect?.target
+    const pseudo = effect?.pseudoElement
+    return (typeof pseudo === 'string' && pseudo.startsWith('::view-transition-'))
+      || (target instanceof Element && !!target.closest('.magic-move-between, .slidev-code-magic-move, .shiki-magic-move-container'))
+  }).filter(animation => Number.isFinite(animation.effect?.getComputedTiming().endTime))
+}
+
+function isMagicMoveAnimating(host: HTMLElement) {
+  return !!host.querySelector(MAGIC_MOVE_ANIMATING) || relevantMagicMoveAnimations(host).length > 0
+}
+
+function inheritTransitionInk(host: HTMLElement) {
+  if (!visible.value || !lastTargetTransitionBox || !isCrossSlideMagicMove(host))
+    return
+  skipEntranceAnimation.value = takeTransitionInk(transitionInkIdentity.value, slideContext.$page.value, lastTargetTransitionBox)
+}
+
 function findCodeHost(host: HTMLElement): HTMLElement | null {
   if (!codeHost?.isConnected) {
     // Shiki Magic Move v2 renders tokens directly in a <pre>, separated by
@@ -369,7 +424,20 @@ function sync() {
     targets.value = nextTargets
   }
 
-  animating.value = !!host.querySelector(MAGIC_MOVE_ANIMATING)
+  const wasAnimating = animating.value
+  animating.value = isMagicMoveAnimating(host)
+  if (wasAnimating && !animating.value) {
+    inheritTransitionInk(host)
+    // A preloaded page's visibility watcher can run before Slidev commits the
+    // incoming route, then be invalidated by that commit. This is the actual
+    // settled edge, so open explicitly rather than depending on that earlier
+    // watcher to fire a second time. The hand-off class makes unchanged ink
+    // instantaneous; moved ink still uses the normal Transition entrance.
+    if (visible.value && hasTarget.value) {
+      clearTimeout(revealTimer)
+      revealed.value = true
+    }
+  }
   if (animating.value)
     sawAnimating = true
   if (import.meta.env.DEV && !warnedClassDrift && !isPrintMode.value && stepSwaps >= 2 && !sawAnimating) {
@@ -443,6 +511,9 @@ function sync() {
     top: `${(bottom - hostBox.top) / scale - 1}px`,
     width: `${(right - left) / scale}px`,
   }
+  lastTargetTransitionBox = transitionInkBox(left, top, right, bottom, slideBox)
+  if (revealed.value)
+    lastVisibleTargetTransitionBox = lastTargetTransitionBox
 }
 
 // Coalesce observer bursts into one sync per frame: during a Magic Move
@@ -523,6 +594,27 @@ watch([visible, hasTarget, animating], ([isVisible, targetPresent, isAnimating])
     revealTimer = setTimeout(reveal, 100)
 })
 
+watch(revealed, (isRevealed) => {
+  if (isRevealed && lastTargetTransitionBox)
+    lastVisibleTargetTransitionBox = lastTargetTransitionBox
+  else if (isCurrentSlide.value)
+    lastVisibleTargetTransitionBox = undefined
+})
+
+watch(isCurrentSlide, (current) => {
+  if (current) {
+    lastVisibleTargetTransitionBox = undefined
+    skipEntranceAnimation.value = false
+    scheduleSync()
+    return
+  }
+  const host = container.value
+  if (host && lastVisibleTargetTransitionBox && isCrossSlideMagicMove(host))
+    rememberTransitionInk(transitionInkIdentity.value, slideContext.$page.value, lastVisibleTargetTransitionBox)
+  lastVisibleTargetTransitionBox = undefined
+  revealed.value = false
+}, { flush: 'sync' })
+
 // A target that is absent from the current code step has nothing to anchor to,
 // so the diagnostic stays hidden. Silent in production, but tell the slide
 // author after the longest Magic Move transition has had time to finish.
@@ -557,7 +649,7 @@ watch([visible, hasTarget, () => props.line, () => props.text, () => props.occur
 </script>
 
 <template>
-  <div ref="container" class="inline-compiler-error-host">
+  <div ref="container" class="inline-compiler-error-host" :class="{ 'skip-entrance-animation': skipEntranceAnimation }">
     <slot />
     <!-- Screen readers only announce a live region reliably when its content
          changes while it is already mounted, so this one exists permanently
@@ -593,6 +685,7 @@ watch([visible, hasTarget, () => props.line, () => props.text, () => props.occur
 .compiler-error-leave-active { transition: opacity .18s ease; }
 .compiler-error-enter-from,
 .compiler-error-leave-to { opacity: 0; }
+.inline-compiler-error-host.skip-entrance-animation .compiler-error-enter-active { transition-duration: 0ms; }
 .inline-compiler-error-message i { color: var(--inline-compiler-error-color, #f05b5b); font-size: .55em; font-style: normal; }
 .inline-compiler-error-underline {
   position: absolute;

package/components/transition-ink.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { rememberTransitionInk, takeTransitionInk } from './transition-ink'
+
+const box = { left: .1, top: .2, right: .3, bottom: .25 }
+
+describe('transition ink hand-off', () => {
+  it('carries identical ink between adjacent pages exactly once', () => {
+    rememberTransitionInk('identical', 10, box)
+
+    expect(takeTransitionInk('identical', 11, box)).toBe(true)
+    expect(takeTransitionInk('identical', 11, box)).toBe(false)
+  })
+
+  it('does not carry ink from a non-adjacent page or to a moved target', () => {
+    rememberTransitionInk('non-adjacent', 10, box)
+    expect(takeTransitionInk('non-adjacent', 12, box)).toBe(false)
+
+    rememberTransitionInk('moved', 10, box)
+    expect(takeTransitionInk('moved', 11, { ...box, top: .21, bottom: .26 })).toBe(false)
+  })
+
+  it('accepts sub-pixel layout differences at the standard slide size', () => {
+    rememberTransitionInk('sub-pixel', 10, box)
+    expect(takeTransitionInk('sub-pixel', 11, { ...box, left: .101, right: .301 })).toBe(true)
+  })
+})

package/components/transition-ink.ts

@@ -0,0 +1,76 @@
+/**
+ * Carries annotation ink across one cross-slide Magic Move transition.
+ *
+ * Slidev keeps both pages mounted but each page has its own annotation
+ * component instance. A matching annotation on the next page therefore has no
+ * component state to tell it that the ink was already visible. This tiny,
+ * module-local hand-off bridges that one navigation boundary. It deliberately
+ * matches both a semantic identity and the final normalized bounds: two equal
+ * annotations elsewhere on a slide must still draw independently.
+ */
+export interface TransitionInkBox {
+  left: number
+  top: number
+  right: number
+  bottom: number
+}
+
+interface TransitionInk extends TransitionInkBox {
+  page: number
+}
+
+const inkByIdentity = new Map<string, TransitionInk[]>()
+
+/** Record ink that was visible when its page was left. */
+export function rememberTransitionInk(identity: string, page: number, box: TransitionInkBox) {
+  const records = inkByIdentity.get(identity) ?? []
+  // Repeated active/inactive updates for the same annotation replace its old
+  // hand-off instead of accumulating stale geometry.
+  const existing = records.findIndex(record => record.page === page)
+  const record = { page, ...box }
+  if (existing >= 0)
+    records[existing] = record
+  else
+    records.push(record)
+  inkByIdentity.set(identity, records)
+}
+
+/**
+ * Consume ink from the immediately adjacent page when it occupies the same
+ * final position. Coordinates are fractions of the concrete slide, so this
+ * survives presenter scaling and a differently sized browser window.
+ */
+export function takeTransitionInk(identity: string, page: number, box: TransitionInkBox) {
+  const records = inkByIdentity.get(identity)
+  if (!records?.length)
+    return false
+
+  const adjacent = records
+    .map((record, index) => ({ record, index }))
+    .filter(({ record }) => Math.abs(record.page - page) === 1)
+  if (!adjacent.length)
+    return false
+
+  const distance = (record: TransitionInk) => Math.max(
+    Math.abs(record.left - box.left),
+    Math.abs(record.top - box.top),
+    Math.abs(record.right - box.right),
+    Math.abs(record.bottom - box.bottom),
+  )
+  const closest = adjacent.reduce((best, candidate) =>
+    distance(candidate.record) < distance(best.record) ? candidate : best,
+  )
+
+  // About three to four slide pixels at the standard 1440×810 canvas. This
+  // accepts sub-pixel browser/layout differences without treating a moved code
+  // line as the same annotation.
+  if (distance(closest.record) > 0.003)
+    return false
+
+  records.splice(closest.index, 1)
+  if (records.length)
+    inkByIdentity.set(identity, records)
+  else
+    inkByIdentity.delete(identity)
+  return true
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-kotlin",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "type": "module",
   "exports": {
     "./annotation-editor": {

package/styles/layout.css

@@ -313,6 +313,13 @@ html.dark .slidev-code-wrapper:is(.code-window-icon--postgresql, :has(code.code-
     font-family: var(--drawn-annotation-code-font);
 }
 
+/* Inline Markdown code in a quote is part of its prose, not a separate code
+   chip. This mirrors annotation labels and overrides Slidev's default inline
+   code background only within blockquotes. */
+.slidev-layout blockquote :not(pre) > code {
+    background: transparent;
+}
+
 /* Let a click-ranged annotation finish its exit fade before the content it
    replaces begins its own click transition. */
 .slidev-layout:has(.drawn-annotation.is-fading-out)