diff --git a/packages/frontend-embed/package.json b/packages/frontend-embed/package.json
index 6af553e745..800beb14d5 100644
--- a/packages/frontend-embed/package.json
+++ b/packages/frontend-embed/package.json
@@ -27,7 +27,7 @@
 		"punycode.js": "2.3.1",
 		"rollup": "4.54.0",
 		"sass": "1.97.1",
-		"shiki": "3.20.0",
+		"shiki": "3.21.0",
 		"tinycolor2": "1.6.0",
 		"uuid": "13.0.0",
 		"vite": "7.3.0",
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 38d861a31f..f9dab22cc9 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -25,6 +25,7 @@
 		"@rollup/plugin-replace": "6.0.3",
 		"@rollup/pluginutils": "5.3.0",
 		"@sentry/vue": "10.32.1",
+		"@shikijs/transformers": "3.21.0",
 		"@syuilo/aiscript": "1.2.1",
 		"@syuilo/aiscript-0-19-0": "npm:@syuilo/aiscript@^0.19.0",
 		"@twemoji/parser": "16.0.0",
@@ -43,6 +44,7 @@
 		"compare-versions": "6.1.1",
 		"cropperjs": "2.1.0",
 		"date-fns": "4.1.0",
+		"diff": "8.0.3",
 		"eventemitter3": "5.0.1",
 		"execa": "9.6.1",
 		"exifreader": "4.33.1",
@@ -67,12 +69,11 @@
 		"rollup": "4.54.0",
 		"sanitize-html": "2.17.0",
 		"sass": "1.97.1",
-		"shiki": "3.20.0",
+		"shiki": "3.21.0",
 		"textarea-caret": "3.1.0",
 		"three": "0.182.0",
 		"throttle-debounce": "5.0.2",
 		"tinycolor2": "1.6.0",
-		"v-code-diff": "1.13.1",
 		"vite": "7.3.0",
 		"vue": "3.5.26",
 		"wanakana": "5.3.1"
diff --git a/packages/frontend/src/components/MkCode.core.vue b/packages/frontend/src/components/MkCode.core.vue
index f669e4b87a..eddd25be66 100644
--- a/packages/frontend/src/components/MkCode.core.vue
+++ b/packages/frontend/src/components/MkCode.core.vue
@@ -9,29 +9,40 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="[$style.codeBlockRoot, {
 		[$style.codeEditor]: codeEditor,
 		[$style.outerStyle]: !codeEditor && withOuterStyle,
+		[$style.withMaxHeight]: maxHeight != null,
 		[$style.dark]: darkMode,
 		[$style.light]: !darkMode,
 	}]" v-html="html"></div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, shallowRef, watch } from 'vue';
 import { bundledLanguagesInfo } from 'shiki/langs';
+import type { transformerNotationDiff as transformerNotationDiff_typeReferenceOnly } from '@shikijs/transformers';
+import type { diffLines as diffLines_typeReferenceOnly } from 'diff';
 import type { BundledLanguage } from 'shiki/langs';
 import { getHighlighter, getTheme } from '@/utility/code-highlighter.js';
 import { store } from '@/store.js';
 
 const props = withDefaults(defineProps<{
 	code: string;
+	diffBase?: string;
 	lang?: string;
 	codeEditor?: boolean;
 	withOuterStyle?: boolean;
+	maxHeight?: number | null;
 }>(), {
 	codeEditor: false,
 	withOuterStyle: true,
+	maxHeight: null,
 });
 
+const maxHeight = computed(() => props.maxHeight != null ? `${props.maxHeight}px` : null);
+
 const highlighter = await getHighlighter();
+const transformerNotationDiff = shallowRef<typeof transformerNotationDiff_typeReferenceOnly | null>(null);
+const diffLines = shallowRef<typeof diffLines_typeReferenceOnly | null>(null);
+
 const darkMode = store.r.darkMode;
 const codeLang = ref<BundledLanguage | 'aiscript'>('js');
 
@@ -40,13 +51,34 @@ const [lightThemeName, darkThemeName] = await Promise.all([
 	getTheme('dark', true),
 ]);
 
-const html = computed(() => highlighter.codeToHtml(props.code, {
+const code = computed(() => {
+	if (props.diffBase != null && diffLines.value != null) {
+		const diffedLines = diffLines.value(props.diffBase, props.code);
+		const diffed = diffedLines.map((part) => {
+			if (part.added) {
+				return part.value.split('\n').map(line => line ? `${line} // [!code ++]` : line).join('\n');
+			} else if (part.removed) {
+				return part.value.split('\n').map(line => line ? `${line} // [!code --]` : line).join('\n');
+			} else {
+				return part.value;
+			}
+		}).join('');
+		return diffed;
+	} else {
+		return props.code;
+	}
+});
+
+const html = computed(() => highlighter.codeToHtml(code.value, {
 	lang: codeLang.value,
 	themes: {
 		fallback: 'dark-plus',
 		light: lightThemeName,
 		dark: darkThemeName,
 	},
+	transformers: props.diffBase != null && transformerNotationDiff.value != null
+		? [transformerNotationDiff.value({})]
+		: [],
 	defaultColor: false,
 	cssVariablePrefix: '--shiki-',
 }));
@@ -73,6 +105,19 @@ async function fetchLanguage(to: string): Promise<void> {
 	}
 }
 
+watch(() => props.diffBase, async (to) => {
+	if (to != null) {
+		if (transformerNotationDiff.value == null) {
+			const { transformerNotationDiff: tf } = await import('@shikijs/transformers');
+			transformerNotationDiff.value = tf;
+		}
+		if (diffLines.value == null) {
+			const { diffLines: dl } = await import('diff');
+			diffLines.value = dl;
+		}
+	}
+}, { immediate: true });
+
 watch(() => props.lang, (to) => {
 	if (codeLang.value === to || !to) return;
 	return new Promise((resolve) => {
@@ -96,6 +141,33 @@ watch(() => props.lang, (to) => {
 	& code {
 		font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 	}
+
+	&>code {
+		display: block;
+		min-width: fit-content;
+	}
+
+	& :global(.line) {
+		display: inline-block;
+		width: 100%;
+	}
+}
+
+.codeBlockRoot :global(.shiki.has-diff) {
+	& :global(.line.diff.remove) {
+		background-color: rgba(244, 63, 94, .14);
+		text-decoration: line-through;
+	}
+
+	& :global(.line.diff.add) {
+		background-color: rgba(75, 192, 107, .14);
+	}
+}
+
+.codeBlockRoot.withMaxHeight :global(.shiki) {
+	max-height: v-bind(maxHeight);
+	scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
+	scrollbar-width: thin;
 }
 
 .outerStyle.codeBlockRoot :global(.shiki) {
diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
index f43035f0e8..58eb405de0 100644
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@@ -21,14 +21,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 			v-if="show && lang"
 			class="_selectable"
 			:code="code"
+			:diffBase="diffBase"
 			:lang="lang"
 			:withOuterStyle="withOuterStyle"
+			:maxHeight="props.maxHeight"
 		/>
 		<pre
 			v-else-if="show"
 			class="_selectable"
 			:class="[$style.codeBlockFallbackRoot, {
 				[$style.outerStyle]: withOuterStyle,
+				[$style.withMaxHeight]: maxHeight != null,
 			}]"
 		><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
 		<button v-else :class="$style.codePlaceholderRoot" @click="show = true">
@@ -41,25 +44,33 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 
-<script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import { i18n } from '@/i18n.js';
-import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
-import { prefer } from '@/preferences.js';
-
-const props = withDefaults(defineProps<{
+<script lang="ts">
+export type MkCodeProps = {
 	code: string;
+	diffBase?: string;
 	forceShow?: boolean;
 	copyButton?: boolean;
 	withOuterStyle?: boolean;
 	lang?: string;
-}>(), {
+	maxHeight?: number | null;
+};
+</script>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, ref, computed } from 'vue';
+import { i18n } from '@/i18n.js';
+import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
+import { prefer } from '@/preferences.js';
+
+const props = withDefaults(defineProps<MkCodeProps>(), {
 	copyButton: true,
 	forceShow: false,
 	withOuterStyle: true,
+	maxHeight: null,
 });
 
 const show = ref(props.forceShow === true ? true : !prefer.s.dataSaver.code);
+const maxHeight = computed(() => props.maxHeight != null ? `${props.maxHeight}px` : null);
 
 const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
 
@@ -94,6 +105,12 @@ function copy() {
 	display: block;
 	overflow-wrap: anywhere;
 	overflow: auto;
+
+	&.withMaxHeight {
+		scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
+    scrollbar-width: thin;
+		max-height: v-bind(maxHeight);
+	}
 }
 
 .outerStyle.codeBlockFallbackRoot {
diff --git a/packages/frontend/src/components/MkCodeDiff.stories.impl.ts b/packages/frontend/src/components/MkCodeDiff.stories.impl.ts
new file mode 100644
index 0000000000..7a189e785e
--- /dev/null
+++ b/packages/frontend/src/components/MkCodeDiff.stories.impl.ts
@@ -0,0 +1,50 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-default-export */
+import type { StoryObj } from '@storybook/vue3';
+import MkCodeDiff from './MkCodeDiff.vue';
+const code = `for (let i, 100) {
+	<: if (i % 15 == 0) "FizzBuzz"
+		elif (i % 3 == 0) "Fizz"
+		elif (i % 5 == 0) "Buzz"
+		else i
+}`;
+const diffBase = `for (let i, 100) {
+	<: if (i % 3 == 0) "Fizz"
+		elif (i % 5 == 0) "Buzz"
+		else i
+}`;
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkCodeDiff,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkCodeDiff v-bind="props" />',
+		};
+	},
+	args: {
+		code,
+		diffBase,
+		lang: 'is',
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkCode>;
diff --git a/packages/frontend/src/components/MkCodeDiff.vue b/packages/frontend/src/components/MkCodeDiff.vue
new file mode 100644
index 0000000000..2d781377af
--- /dev/null
+++ b/packages/frontend/src/components/MkCodeDiff.vue
@@ -0,0 +1,14 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkCode v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+import MkCode from '@/components/MkCode.vue';
+import type { MkCodeProps } from '@/components/MkCode.vue';
+const props = defineProps<MkCodeProps & { diffBase: string }>();
+</script>
diff --git a/packages/frontend/src/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue
index 40c7b0b1b4..6a97a4303b 100644
--- a/packages/frontend/src/pages/admin/modlog.ModLog.vue
+++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue
@@ -131,22 +131,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkTime :time="log.createdAt"/>
 	</template>
 
-	<div>
+	<div class="_gaps_s">
 		<div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
 			<div style="flex: 1;">{{ i18n.ts.moderator }}: <MkA :to="`/admin/user/${log.userId}`" class="_link">@{{ log.user?.username }}</MkA></div>
 			<div style="flex: 1;">{{ i18n.ts.dateAndTime }}: <MkTime :time="log.createdAt" mode="detail"/></div>
 		</div>
 
 		<template v-if="log.type === 'updateServerSettings'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateUserNote'">
 			<div>{{ i18n.ts.user }}: {{ log.info.userId }}</div>
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="log.info.before ?? ''" :newString="log.info.after ?? ''" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				forceShow
+				:code="log.info.after ?? ''"
+				:diffBase="log.info.before ?? ''"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'suspend'">
 			<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
@@ -155,9 +162,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
 		</template>
 		<template v-else-if="log.type === 'updateRole'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'assignRole'">
 			<div>{{ i18n.ts.user }}: {{ log.info.userId }}</div>
@@ -169,54 +180,91 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 		<template v-else-if="log.type === 'updateCustomEmoji'">
 			<div>{{ i18n.ts.emoji }}: {{ log.info.emojiId }}</div>
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAd'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateGlobalAnnouncement'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateUserAnnouncement'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAvatarDecoration'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateRemoteInstanceNote'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="log.info.before ?? ''" :newString="log.info.after ?? ''" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				forceShow
+				:code="log.info.after ?? ''"
+				:diffBase="log.info.before ?? ''"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateSystemWebhook'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAbuseReportNotificationRecipient'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="JSON5.stringify(log.info.before, null, '\t')" :newString="JSON5.stringify(log.info.after, null, '\t')" language="javascript" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAbuseReportNote'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="log.info.before ?? ''" :newString="log.info.after ?? ''" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				forceShow
+				:code="log.info.after ?? ''"
+				:diffBase="log.info.before ?? ''"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateProxyAccountDescription'">
-			<div :class="$style.diff">
-				<CodeDiff :context="5" :hideHeader="true" :oldString="log.info.before ?? ''" :newString="log.info.after ?? ''" maxHeight="300px"/>
-			</div>
+			<MkCodeDiff
+				forceShow
+				:code="log.info.after ?? ''"
+				:diffBase="log.info.before ?? ''"
+				:maxHeight="300"
+			></MkCodeDiff>
 		</template>
 
 		<details>
@@ -229,7 +277,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import { CodeDiff } from 'v-code-diff';
+import MkCodeDiff from '@/components/MkCodeDiff.vue';
 import JSON5 from 'json5';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
@@ -240,13 +288,6 @@ const props = defineProps<{
 </script>
 
 <style lang="scss" module>
-.diff {
-	background: #fff;
-	color: #000;
-	border-radius: 6px;
-	overflow: clip;
-}
-
 .logYellow {
 	color: var(--MI_THEME-warn);
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1dc046d43f..e0f9a25233 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -677,6 +677,9 @@ importers:
       '@sentry/vue':
         specifier: 10.32.1
         version: 10.32.1(vue@3.5.26(typescript@5.9.3))
+      '@shikijs/transformers':
+        specifier: 3.21.0
+        version: 3.21.0
       '@syuilo/aiscript':
         specifier: 1.2.1
         version: 1.2.1
@@ -731,6 +734,9 @@ importers:
       date-fns:
         specifier: 4.1.0
         version: 4.1.0
+      diff:
+        specifier: 8.0.3
+        version: 8.0.3
       eventemitter3:
         specifier: 5.0.1
         version: 5.0.1
@@ -804,8 +810,8 @@ importers:
         specifier: 1.97.1
         version: 1.97.1
       shiki:
-        specifier: 3.20.0
-        version: 3.20.0
+        specifier: 3.21.0
+        version: 3.21.0
       textarea-caret:
         specifier: 3.1.0
         version: 3.1.0
@@ -818,9 +824,6 @@ importers:
       tinycolor2:
         specifier: 1.6.0
         version: 1.6.0
-      v-code-diff:
-        specifier: 1.13.1
-        version: 1.13.1(vue@3.5.26(typescript@5.9.3))
       vite:
         specifier: 7.3.0
         version: 7.3.0(@types/node@24.10.4)(sass@1.97.1)(terser@5.44.1)(tsx@4.21.0)
@@ -1115,8 +1118,8 @@ importers:
         specifier: 1.97.1
         version: 1.97.1
       shiki:
-        specifier: 3.20.0
-        version: 3.20.0
+        specifier: 3.21.0
+        version: 3.21.0
       tinycolor2:
         specifier: 1.6.0
         version: 1.6.0
@@ -3697,23 +3700,26 @@ packages:
       pinia:
         optional: true
 
-  '@shikijs/core@3.20.0':
-    resolution: {integrity: sha512-f2ED7HYV4JEk827mtMDwe/yQ25pRiXZmtHjWF8uzZKuKiEsJR7Ce1nuQ+HhV9FzDcbIo4ObBCD9GPTzNuy9S1g==}
+  '@shikijs/core@3.21.0':
+    resolution: {integrity: sha512-AXSQu/2n1UIQekY8euBJlvFYZIw0PHY63jUzGbrOma4wPxzznJXTXkri+QcHeBNaFxiiOljKxxJkVSoB3PjbyA==}
 
-  '@shikijs/engine-javascript@3.20.0':
-    resolution: {integrity: sha512-OFx8fHAZuk7I42Z9YAdZ95To6jDePQ9Rnfbw9uSRTSbBhYBp1kEOKv/3jOimcj3VRUKusDYM6DswLauwfhboLg==}
+  '@shikijs/engine-javascript@3.21.0':
+    resolution: {integrity: sha512-ATwv86xlbmfD9n9gKRiwuPpWgPENAWCLwYCGz9ugTJlsO2kOzhOkvoyV/UD+tJ0uT7YRyD530x6ugNSffmvIiQ==}
 
-  '@shikijs/engine-oniguruma@3.20.0':
-    resolution: {integrity: sha512-Yx3gy7xLzM0ZOjqoxciHjA7dAt5tyzJE3L4uQoM83agahy+PlW244XJSrmJRSBvGYELDhYXPacD4R/cauV5bzQ==}
+  '@shikijs/engine-oniguruma@3.21.0':
+    resolution: {integrity: sha512-OYknTCct6qiwpQDqDdf3iedRdzj6hFlOPv5hMvI+hkWfCKs5mlJ4TXziBG9nyabLwGulrUjHiCq3xCspSzErYQ==}
 
-  '@shikijs/langs@3.20.0':
-    resolution: {integrity: sha512-le+bssCxcSHrygCWuOrYJHvjus6zhQ2K7q/0mgjiffRbkhM4o1EWu2m+29l0yEsHDbWaWPNnDUTRVVBvBBeKaA==}
+  '@shikijs/langs@3.21.0':
+    resolution: {integrity: sha512-g6mn5m+Y6GBJ4wxmBYqalK9Sp0CFkUqfNzUy2pJglUginz6ZpWbaWjDB4fbQ/8SHzFjYbtU6Ddlp1pc+PPNDVA==}
 
-  '@shikijs/themes@3.20.0':
-    resolution: {integrity: sha512-U1NSU7Sl26Q7ErRvJUouArxfM2euWqq1xaSrbqMu2iqa+tSp0D1Yah8216sDYbdDHw4C8b75UpE65eWorm2erQ==}
+  '@shikijs/themes@3.21.0':
+    resolution: {integrity: sha512-BAE4cr9EDiZyYzwIHEk7JTBJ9CzlPuM4PchfcA5ao1dWXb25nv6hYsoDiBq2aZK9E3dlt3WB78uI96UESD+8Mw==}
 
-  '@shikijs/types@3.20.0':
-    resolution: {integrity: sha512-lhYAATn10nkZcBQ0BlzSbJA3wcmL5MXUUF8d2Zzon6saZDlToKaiRX60n2+ZaHJCmXEcZRWNzn+k9vplr8Jhsw==}
+  '@shikijs/transformers@3.21.0':
+    resolution: {integrity: sha512-CZwvCWWIiRRiFk9/JKzdEooakAP8mQDtBOQ1TKiCaS2E1bYtyBCOkUzS8akO34/7ufICQ29oeSfkb3tT5KtrhA==}
+
+  '@shikijs/types@3.21.0':
+    resolution: {integrity: sha512-zGrWOxZ0/+0ovPY7PvBU2gIS9tmhSUUt30jAcNV0Bq0gb2S98gwfjIs1vxlmH5zM7/4YxLamT6ChlqqAJmPPjA==}
 
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
@@ -6266,9 +6272,6 @@ packages:
   dezalgo@1.0.4:
     resolution: {integrity: sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==}
 
-  diff-match-patch@1.0.5:
-    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
-
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -6277,8 +6280,8 @@ packages:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
 
-  diff@8.0.2:
-    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
+  diff@8.0.3:
+    resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
     engines: {node: '>=0.3.1'}
 
   dijkstrajs@1.0.3:
@@ -7167,10 +7170,6 @@ packages:
   headers-polyfill@4.0.3:
     resolution: {integrity: sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==}
 
-  highlight.js@11.11.1:
-    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
-    engines: {node: '>=12.0.0'}
-
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
@@ -9804,8 +9803,8 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shiki@3.20.0:
-    resolution: {integrity: sha512-kgCOlsnyWb+p0WU+01RjkCH+eBVsjL1jOwUYWv0YDWkM2/A46+LDKVs5yZCUXjJG6bj4ndFoAg5iLIIue6dulg==}
+  shiki@3.21.0:
+    resolution: {integrity: sha512-N65B/3bqL/TI2crrXr+4UivctrAGEjmsib5rPMMPpFp1xAx/w03v8WZ9RDDFYteXoEgY7qZ4HGgl5KBIu1153w==}
 
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
@@ -10267,10 +10266,12 @@ packages:
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
 
   tar@7.5.2:
     resolution: {integrity: sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==}
     engines: {node: '>=18'}
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
 
   taskkill@5.0.0:
     resolution: {integrity: sha512-+HRtZ40Vc+6YfCDWCeAsixwxJgMbPY4HHuTgzPYH3JXvqHWUlsCfy+ylXlAKhFNcuLp4xVeWeFBUhDk+7KYUvQ==}
@@ -10765,15 +10766,6 @@ packages:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
     hasBin: true
 
-  v-code-diff@1.13.1:
-    resolution: {integrity: sha512-9LTV1dZhC1oYTntyB94vfumGgsfIX5u0fEDSI2Txx4vCE5sI5LkgeLJRRy2SsTVZmDcV+R73sBr0GpPn0TJxMw==}
-    peerDependencies:
-      '@vue/composition-api': ^1.4.9
-      vue: ^2.6.0 || >=3.0.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-
   v8-to-istanbul@9.3.0:
     resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
@@ -10938,17 +10930,6 @@ packages:
   vue-component-type-helpers@3.2.2:
     resolution: {integrity: sha512-x8C2nx5XlUNM0WirgfTkHjJGO/ABBxlANZDtHw2HclHtQnn+RFPTnbjMJn8jHZW4TlUam0asHcA14lf1C6Jb+A==}
 
-  vue-demi@0.14.10:
-    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
-    engines: {node: '>=12'}
-    hasBin: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-
   vue-docgen-api@4.79.2:
     resolution: {integrity: sha512-n9ENAcs+40awPZMsas7STqjkZiVlIjxIKgiJr5rSohDP0/JCrD9VtlzNojafsA1MChm/hz2h3PDtUedx3lbgfA==}
     peerDependencies:
@@ -13241,7 +13222,7 @@ snapshots:
       '@rushstack/rig-package': 0.6.0
       '@rushstack/terminal': 0.19.5(@types/node@24.10.4)
       '@rushstack/ts-command-line': 5.1.5(@types/node@24.10.4)
-      diff: 8.0.2
+      diff: 8.0.3
       lodash: 4.17.21
       minimatch: 10.0.3
       resolve: 1.22.11
@@ -14223,33 +14204,38 @@ snapshots:
       '@sentry/core': 10.32.1
       vue: 3.5.26(typescript@5.9.3)
 
-  '@shikijs/core@3.20.0':
+  '@shikijs/core@3.21.0':
     dependencies:
-      '@shikijs/types': 3.20.0
+      '@shikijs/types': 3.21.0
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
-  '@shikijs/engine-javascript@3.20.0':
+  '@shikijs/engine-javascript@3.21.0':
     dependencies:
-      '@shikijs/types': 3.20.0
+      '@shikijs/types': 3.21.0
       '@shikijs/vscode-textmate': 10.0.2
       oniguruma-to-es: 4.3.4
 
-  '@shikijs/engine-oniguruma@3.20.0':
+  '@shikijs/engine-oniguruma@3.21.0':
     dependencies:
-      '@shikijs/types': 3.20.0
+      '@shikijs/types': 3.21.0
       '@shikijs/vscode-textmate': 10.0.2
 
-  '@shikijs/langs@3.20.0':
+  '@shikijs/langs@3.21.0':
     dependencies:
-      '@shikijs/types': 3.20.0
+      '@shikijs/types': 3.21.0
 
-  '@shikijs/themes@3.20.0':
+  '@shikijs/themes@3.21.0':
     dependencies:
-      '@shikijs/types': 3.20.0
+      '@shikijs/types': 3.21.0
 
-  '@shikijs/types@3.20.0':
+  '@shikijs/transformers@3.21.0':
+    dependencies:
+      '@shikijs/core': 3.21.0
+      '@shikijs/types': 3.21.0
+
+  '@shikijs/types@3.21.0':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
@@ -17375,13 +17361,11 @@ snapshots:
       asap: 2.0.6
       wrappy: 1.0.2
 
-  diff-match-patch@1.0.5: {}
-
   diff-sequences@29.6.3: {}
 
   diff@5.2.0: {}
 
-  diff@8.0.2: {}
+  diff@8.0.3: {}
 
   dijkstrajs@1.0.3: {}
 
@@ -18573,8 +18557,6 @@ snapshots:
 
   headers-polyfill@4.0.3: {}
 
-  highlight.js@11.11.1: {}
-
   hosted-git-info@2.8.9: {}
 
   hosted-git-info@4.1.0:
@@ -21738,14 +21720,14 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shiki@3.20.0:
+  shiki@3.21.0:
     dependencies:
-      '@shikijs/core': 3.20.0
-      '@shikijs/engine-javascript': 3.20.0
-      '@shikijs/engine-oniguruma': 3.20.0
-      '@shikijs/langs': 3.20.0
-      '@shikijs/themes': 3.20.0
-      '@shikijs/types': 3.20.0
+      '@shikijs/core': 3.21.0
+      '@shikijs/engine-javascript': 3.21.0
+      '@shikijs/engine-oniguruma': 3.21.0
+      '@shikijs/langs': 3.21.0
+      '@shikijs/themes': 3.21.0
+      '@shikijs/types': 3.21.0
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
@@ -22695,14 +22677,6 @@ snapshots:
 
   uuid@9.0.1: {}
 
-  v-code-diff@1.13.1(vue@3.5.26(typescript@5.9.3)):
-    dependencies:
-      diff: 5.2.0
-      diff-match-patch: 1.0.5
-      highlight.js: 11.11.1
-      vue: 3.5.26(typescript@5.9.3)
-      vue-demi: 0.14.10(vue@3.5.26(typescript@5.9.3))
-
   v8-to-istanbul@9.3.0:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
@@ -22842,10 +22816,6 @@ snapshots:
 
   vue-component-type-helpers@3.2.2: {}
 
-  vue-demi@0.14.10(vue@3.5.26(typescript@5.9.3)):
-    dependencies:
-      vue: 3.5.26(typescript@5.9.3)
-
   vue-docgen-api@4.79.2(vue@3.5.26(typescript@5.9.3)):
     dependencies:
       '@babel/parser': 7.28.5
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index a9443da0b3..4f792c1f08 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -29,7 +29,6 @@ onlyBuiltDependencies:
   - re2
   - sharp
   - utf-8-validate
-  - v-code-diff
   - vue-demi
 ignorePatchFailures: false
 minimumReleaseAge: 10080 # delay 7days to mitigate supply-chain attack