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..5ef5d4e29c 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">
@@ -42,24 +45,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
+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<{
 	code: string;
+	diffBase?: string;
 	forceShow?: boolean;
 	copyButton?: boolean;
 	withOuterStyle?: boolean;
 	lang?: string;
+	maxHeight?: number | null;
 }>(), {
 	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 +101,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/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue
index 40c7b0b1b4..afb0385182 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>
+			<MkCode
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				forceShow
+				:code="log.info.after ?? ''"
+				:diffBase="log.info.before ?? ''"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				forceShow
+				:code="log.info.after ?? ''"
+				:diffBase="log.info.before ?? ''"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				lang="js"
+				forceShow
+				:code="JSON5.stringify(log.info.after, null, '\t')"
+				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				forceShow
+				:code="log.info.after ?? ''"
+				:diffBase="log.info.before ?? ''"
+				:maxHeight="300"
+			></MkCode>
 		</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>
+			<MkCode
+				forceShow
+				:code="log.info.after ?? ''"
+				:diffBase="log.info.before ?? ''"
+				:maxHeight="300"
+			></MkCode>
 		</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 MkCode from '@/components/MkCode.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 79931b62b0..359c089441 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -683,6 +683,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
@@ -737,6 +740,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
@@ -810,8 +816,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
@@ -824,9 +830,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)
@@ -3706,21 +3709,42 @@ packages:
   '@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/transformers@3.21.0':
+    resolution: {integrity: sha512-CZwvCWWIiRRiFk9/JKzdEooakAP8mQDtBOQ1TKiCaS2E1bYtyBCOkUzS8akO34/7ufICQ29oeSfkb3tT5KtrhA==}
+
   '@shikijs/types@3.20.0':
     resolution: {integrity: sha512-lhYAATn10nkZcBQ0BlzSbJA3wcmL5MXUUF8d2Zzon6saZDlToKaiRX60n2+ZaHJCmXEcZRWNzn+k9vplr8Jhsw==}
 
+  '@shikijs/types@3.21.0':
+    resolution: {integrity: sha512-zGrWOxZ0/+0ovPY7PvBU2gIS9tmhSUUt30jAcNV0Bq0gb2S98gwfjIs1vxlmH5zM7/4YxLamT6ChlqqAJmPPjA==}
+
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
@@ -6275,9 +6299,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}
@@ -6290,6 +6311,10 @@ packages:
     resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
     engines: {node: '>=0.3.1'}
 
+  diff@8.0.3:
+    resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
+    engines: {node: '>=0.3.1'}
+
   dijkstrajs@1.0.3:
     resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
 
@@ -7176,10 +7201,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==}
 
@@ -9819,6 +9840,9 @@ packages:
   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==}
     engines: {node: '>= 0.4'}
@@ -10777,15 +10801,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'}
@@ -10947,16 +10962,8 @@ packages:
   vue-component-type-helpers@3.2.1:
     resolution: {integrity: sha512-gKV7XOkQl4urSuLHNY1tnVQf7wVgtb/mKbRyxSLWGZUY9RK7aDPhBenTjm+i8ZFe0zC2PZeHMPtOZXZfyaFOzQ==}
 
-  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-component-type-helpers@3.2.2:
+    resolution: {integrity: sha512-x8C2nx5XlUNM0WirgfTkHjJGO/ABBxlANZDtHw2HclHtQnn+RFPTnbjMJn8jHZW4TlUam0asHcA14lf1C6Jb+A==}
 
   vue-docgen-api@4.79.2:
     resolution: {integrity: sha512-n9ENAcs+40awPZMsas7STqjkZiVlIjxIKgiJr5rSohDP0/JCrD9VtlzNojafsA1MChm/hz2h3PDtUedx3lbgfA==}
@@ -14239,30 +14246,66 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
+  '@shikijs/core@3.21.0':
+    dependencies:
+      '@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':
     dependencies:
       '@shikijs/types': 3.20.0
       '@shikijs/vscode-textmate': 10.0.2
       oniguruma-to-es: 4.3.4
 
+  '@shikijs/engine-javascript@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.4
+
   '@shikijs/engine-oniguruma@3.20.0':
     dependencies:
       '@shikijs/types': 3.20.0
       '@shikijs/vscode-textmate': 10.0.2
 
+  '@shikijs/engine-oniguruma@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+      '@shikijs/vscode-textmate': 10.0.2
+
   '@shikijs/langs@3.20.0':
     dependencies:
       '@shikijs/types': 3.20.0
 
+  '@shikijs/langs@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+
   '@shikijs/themes@3.20.0':
     dependencies:
       '@shikijs/types': 3.20.0
 
+  '@shikijs/themes@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+
+  '@shikijs/transformers@3.21.0':
+    dependencies:
+      '@shikijs/core': 3.21.0
+      '@shikijs/types': 3.21.0
+
   '@shikijs/types@3.20.0':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  '@shikijs/types@3.21.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/vscode-textmate@10.0.2': {}
 
   '@sideway/address@4.1.5':
@@ -14941,7 +14984,7 @@ snapshots:
       storybook: 10.1.10(@testing-library/dom@10.4.0)(bufferutil@4.1.0)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(utf-8-validate@6.0.6)
       type-fest: 2.19.0
       vue: 3.5.26(typescript@5.9.3)
-      vue-component-type-helpers: 3.2.1
+      vue-component-type-helpers: 3.2.2
 
   '@stylistic/eslint-plugin@5.5.0(eslint@9.39.2)':
     dependencies:
@@ -17386,14 +17429,14 @@ 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: {}
 
   dir-glob@3.0.1:
@@ -18584,8 +18627,6 @@ snapshots:
 
   headers-polyfill@4.0.3: {}
 
-  highlight.js@11.11.1: {}
-
   hosted-git-info@2.8.9: {}
 
   hosted-git-info@4.1.0:
@@ -21764,6 +21805,17 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  shiki@3.21.0:
+    dependencies:
+      '@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
+
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -22710,14 +22762,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
@@ -22855,9 +22899,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.1: {}
 
-  vue-demi@0.14.10(vue@3.5.26(typescript@5.9.3)):
-    dependencies:
-      vue: 3.5.26(typescript@5.9.3)
+  vue-component-type-helpers@3.2.2: {}
 
   vue-docgen-api@4.79.2(vue@3.5.26(typescript@5.9.3)):
     dependencies: