From 3f5240a2542513fb56fbdf1db9951445c21d0176 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 21 Jan 2026 21:41:51 +0900
Subject: [PATCH 1/6] enhance(frontend): remove v-code-diff

---
 packages/frontend/package.json                |   5 +-
 .../frontend/src/components/MkCode.core.vue   |  76 +++++++++-
 packages/frontend/src/components/MkCode.vue   |  15 +-
 .../src/pages/admin/modlog.ModLog.vue         | 137 ++++++++++++------
 pnpm-lock.yaml                                | 136 +++++++++++------
 5 files changed, 269 insertions(+), 100 deletions(-)

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:

From 6a151cdd809ae94d7b6a3d8dcde5578dcb3273b5 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 21 Jan 2026 21:42:02 +0900
Subject: [PATCH 2/6] run pnpm dedupe

---
 pnpm-lock.yaml | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 359c089441..15598303e1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6307,10 +6307,6 @@ packages:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
 
-  diff@8.0.2:
-    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'}
@@ -10303,6 +10299,7 @@ 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==}
@@ -13257,7 +13254,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
@@ -17433,8 +17430,6 @@ snapshots:
 
   diff@5.2.0: {}
 
-  diff@8.0.2: {}
-
   diff@8.0.3: {}
 
   dijkstrajs@1.0.3: {}

From 020e75feb52e4b03edd952d87268f09a1a34ea2f Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:06:10 +0900
Subject: [PATCH 3/6] remove v-code-diff

---
 pnpm-workspace.yaml | 1 -
 1 file changed, 1 deletion(-)

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

From 67b88808db0061a179662066bccd7e08909edab1 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:09:23 +0900
Subject: [PATCH 4/6] fix(deps): resolve version mismatch in shiki

---
 packages/frontend-embed/package.json |  2 +-
 pnpm-lock.yaml                       | 68 ++--------------------------
 2 files changed, 4 insertions(+), 66 deletions(-)

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/pnpm-lock.yaml b/pnpm-lock.yaml
index 15598303e1..891602fa26 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1124,8 +1124,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
@@ -3706,42 +3706,24 @@ 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/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==}
 
@@ -9833,9 +9815,6 @@ 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==}
 
@@ -10304,6 +10283,7 @@ packages:
   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==}
@@ -14236,13 +14216,6 @@ snapshots:
       '@sentry/core': 10.32.1
       vue: 3.5.26(typescript@5.9.3)
 
-  '@shikijs/core@3.20.0':
-    dependencies:
-      '@shikijs/types': 3.20.0
-      '@shikijs/vscode-textmate': 10.0.2
-      '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.5
-
   '@shikijs/core@3.21.0':
     dependencies:
       '@shikijs/types': 3.21.0
@@ -14250,40 +14223,21 @@ snapshots:
       '@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
@@ -14293,11 +14247,6 @@ snapshots:
       '@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
@@ -21789,17 +21738,6 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shiki@3.20.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/vscode-textmate': 10.0.2
-      '@types/hast': 3.0.4
-
   shiki@3.21.0:
     dependencies:
       '@shikijs/core': 3.21.0

From 3e4cc32e51c346327081845a794a538d832cc3fc Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:36:57 +0900
Subject: [PATCH 5/6] refactor: split mkcodediff to isolate concerns

---
 packages/frontend/src/components/MkCode.vue   | 20 ++++---
 .../src/components/MkCodeDiff.stories.impl.ts | 44 +++++++++++++++
 .../frontend/src/components/MkCodeDiff.vue    | 14 +++++
 .../src/pages/admin/modlog.ModLog.vue         | 54 +++++++++----------
 4 files changed, 97 insertions(+), 35 deletions(-)
 create mode 100644 packages/frontend/src/components/MkCodeDiff.stories.impl.ts
 create mode 100644 packages/frontend/src/components/MkCodeDiff.vue

diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
index 5ef5d4e29c..58eb405de0 100644
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@@ -44,13 +44,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 
-<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<{
+<script lang="ts">
+export type MkCodeProps = {
 	code: string;
 	diffBase?: string;
 	forceShow?: boolean;
@@ -58,7 +53,16 @@ const props = withDefaults(defineProps<{
 	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,
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..fae9d459fb
--- /dev/null
+++ b/packages/frontend/src/components/MkCodeDiff.stories.impl.ts
@@ -0,0 +1,44 @@
+/*
+ * 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 MkCode from './MkCode.vue';
+const code = `for (let i, 100) {
+	<: if (i % 15 == 0) "FizzBuzz"
+		elif (i % 3 == 0) "Fizz"
+		elif (i % 5 == 0) "Buzz"
+		else i
+}`;
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkCode,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkCode v-bind="props" />',
+		};
+	},
+	args: {
+		code,
+		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 afb0385182..6a97a4303b 100644
--- a/packages/frontend/src/pages/admin/modlog.ModLog.vue
+++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue
@@ -138,22 +138,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 
 		<template v-if="log.type === 'updateServerSettings'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateUserNote'">
 			<div>{{ i18n.ts.user }}: {{ log.info.userId }}</div>
-			<MkCode
+			<MkCodeDiff
 				forceShow
 				:code="log.info.after ?? ''"
 				:diffBase="log.info.before ?? ''"
 				:maxHeight="300"
-			></MkCode>
+			></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>
@@ -162,13 +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'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'assignRole'">
 			<div>{{ i18n.ts.user }}: {{ log.info.userId }}</div>
@@ -180,91 +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>
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAd'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateGlobalAnnouncement'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateUserAnnouncement'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAvatarDecoration'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateRemoteInstanceNote'">
-			<MkCode
+			<MkCodeDiff
 				forceShow
 				:code="log.info.after ?? ''"
 				:diffBase="log.info.before ?? ''"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateSystemWebhook'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAbuseReportNotificationRecipient'">
-			<MkCode
+			<MkCodeDiff
 				lang="js"
 				forceShow
 				:code="JSON5.stringify(log.info.after, null, '\t')"
 				:diffBase="JSON5.stringify(log.info.before, null, '\t')"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateAbuseReportNote'">
-			<MkCode
+			<MkCodeDiff
 				forceShow
 				:code="log.info.after ?? ''"
 				:diffBase="log.info.before ?? ''"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 		<template v-else-if="log.type === 'updateProxyAccountDescription'">
-			<MkCode
+			<MkCodeDiff
 				forceShow
 				:code="log.info.after ?? ''"
 				:diffBase="log.info.before ?? ''"
 				:maxHeight="300"
-			></MkCode>
+			></MkCodeDiff>
 		</template>
 
 		<details>
@@ -277,7 +277,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import MkCode from '@/components/MkCode.vue';
+import MkCodeDiff from '@/components/MkCodeDiff.vue';
 import JSON5 from 'json5';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';

From 54f76a767f1dd9b8ce3dc9867307ac4e2cd6aab5 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:38:09 +0900
Subject: [PATCH 6/6] fix

---
 .../src/components/MkCodeDiff.stories.impl.ts        | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkCodeDiff.stories.impl.ts b/packages/frontend/src/components/MkCodeDiff.stories.impl.ts
index fae9d459fb..7a189e785e 100644
--- a/packages/frontend/src/components/MkCodeDiff.stories.impl.ts
+++ b/packages/frontend/src/components/MkCodeDiff.stories.impl.ts
@@ -6,18 +6,23 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
 import type { StoryObj } from '@storybook/vue3';
-import MkCode from './MkCode.vue';
+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: {
-				MkCode,
+				MkCodeDiff,
 			},
 			setup() {
 				return {
@@ -31,11 +36,12 @@ export const Default = {
 					};
 				},
 			},
-			template: '<MkCode v-bind="props" />',
+			template: '<MkCodeDiff v-bind="props" />',
 		};
 	},
 	args: {
 		code,
+		diffBase,
 		lang: 'is',
 	},
 	parameters: {