@8wave/ai-elements 0.104.0 → 0.105.0-beta.1

package/dist/_chunks/{PkToolShowContactForm-BtcNCixq.js.map → PkToolShowContactForm-CXE0485W.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkToolShowContactForm-BtcNCixq.js","names":[],"sources":["../../../../packages/components/src/chat/PkToolShowContactForm.vue","../../../../packages/components/src/chat/PkToolShowContactForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, watch } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { useForm } from '@volverjs/form-vue'\n    import * as z from 'zod'\n    import { useSafeLocalStorage, useLocalizedString } from 'composables'\n    import type { LocalizedString } from 'models'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const props = defineProps<{\n        part: unknown\n        submitted?: boolean\n        loading?: boolean\n        error?: string\n        readonly?: boolean\n        privacyPolicyNotice?: LocalizedString\n    }>()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            type: string\n            toolCallId: string\n            input?: {\n                name: string\n                email: string\n                phone?: string\n                conversationContext?: Record<string, unknown>\n            }\n        }\n        return part\n    })\n\n    const input = computed(() => toolPart.value.input)\n\n    const localSubmitted = useSafeLocalStorage<boolean>(\n        computed(\n            () =>\n                `${toolPart.value.toolCallId}-${toolPart.value.type}-submitted`,\n        ),\n        false,\n    )\n\n    const LeadFormSchema = z.object({\n        name: z.string().min(1).max(255).default(''),\n        email: z.email().max(255).default(''),\n        phone: z\n            .string()\n            .max(50)\n            .regex(/^[+0-9\\s\\-.()]*$/, $t('validation.invalidPhoneNumber'))\n            .optional(),\n    })\n\n    const emit = defineEmits<{\n        submit: [data: Record<string, unknown>]\n    }>()\n\n    const { VvForm, VvFormField, formData } = useForm(LeadFormSchema, {\n        lazyLoad: true,\n    })\n\n    // Pre-populate form with input values\n    watch(\n        input,\n        (newInput) => {\n            formData.value = {\n                name: newInput?.name || '',\n                email: newInput?.email || '',\n                phone: newInput?.phone || '',\n            }\n        },\n        { immediate: true },\n    )\n\n    watch(\n        () => props.submitted,\n        (submitted) => {\n            if (submitted) {\n                localSubmitted.value = true\n            }\n        },\n        { immediate: true },\n    )\n\n    const isSubmitted = computed(() => {\n        return props.submitted || localSubmitted.value\n    })\n\n    const submitLead = async (data: Record<string, unknown>): Promise<void> => {\n        emit('submit', { ...data, metadata: input.value?.conversationContext })\n    }\n\n    const privacyNotice = useLocalizedString(\n        () => props.privacyPolicyNotice,\n        'message.defaultPrivacyPolicyNotice',\n    )\n</script>\n\n<template>\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n            <VvIcon name=\"ri:send-plane-2-line\" class=\"text-16\" />\n            <strong class=\"font-bold\">{{ $t('label.contactUs') }}</strong>\n        </div>\n\n        <Transition mode=\"out-in\">\n            <div v-if=\"!isSubmitted\" class=\"p-sm\">\n                <VvForm v-model=\"formData\" :readonly @submit=\"submitLead\">\n                    <VvFormField\n                        name=\"name\"\n                        type=\"text\"\n                        :label=\"$t('label.name')\"\n                        :placeholder=\"$t('placeholder.name')\"\n                        icon=\"ri:user-line\"\n                        modifiers=\"compact no-label\"\n                        class=\"mb-md\" />\n                    <VvFormField\n                        name=\"email\"\n                        type=\"email\"\n                        :label=\"$t('label.email')\"\n                        :placeholder=\"$t('placeholder.email')\"\n                        icon=\"ri:mail-line\"\n                        modifiers=\"compact no-label\"\n                        class=\"mb-md\" />\n                    <VvFormField\n                        name=\"phone\"\n                        type=\"tel\"\n                        :label=\"$t('label.phone')\"\n                        :placeholder=\"$t('placeholder.phone')\"\n                        icon=\"ri:phone-line\"\n                        class=\"mb-md\"\n                        modifiers=\"compact no-label\" />\n\n                    <div class=\"flex justify-between items-center gap-16 mt-xs\">\n                        <div\n                            class=\"text-smaller text-word-3 flex items-center gap-8\">\n                            <VvIcon\n                                name=\"ri:shield-check-line\"\n                                class=\"text-16 shrink-0\" />\n                            <PkStreamingMarkdown\n                                :markdown=\"privacyNotice\"\n                                class=\"wysiwyg\" />\n                        </div>\n                        <VvButton\n                            type=\"submit\"\n                            modifiers=\"primary\"\n                            :loading\n                            :disabled=\"loading || readonly\"\n                            icon-position=\"right\"\n                            class=\"shrink-0\"\n                            :label=\"$t('action.submit')\" />\n                    </div>\n                </VvForm>\n            </div>\n            <div v-else class=\"p-sm\">\n                <div class=\"flex items-center gap-sm\">\n                    <VvIcon\n                        name=\"ri:mail-check-line\"\n                        class=\"text-24 text-success\" />\n                    <div>\n                        <strong class=\"font-semibold block text-success\">\n                            {{ $t('message.leadSubmittedTitle') }}\n                        </strong>\n                        <p class=\"text-word-3\">\n                            {{ $t('message.leadSubmittedMessage') }}\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, watch } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { useForm } from '@volverjs/form-vue'\n    import * as z from 'zod'\n    import { useSafeLocalStorage, useLocalizedString } from 'composables'\n    import type { LocalizedString } from 'models'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const props = defineProps<{\n        part: unknown\n        submitted?: boolean\n        loading?: boolean\n        error?: string\n        readonly?: boolean\n        privacyPolicyNotice?: LocalizedString\n    }>()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            type: string\n            toolCallId: string\n            input?: {\n                name: string\n                email: string\n                phone?: string\n                conversationContext?: Record<string, unknown>\n            }\n        }\n        return part\n    })\n\n    const input = computed(() => toolPart.value.input)\n\n    const localSubmitted = useSafeLocalStorage<boolean>(\n        computed(\n            () =>\n                `${toolPart.value.toolCallId}-${toolPart.value.type}-submitted`,\n        ),\n        false,\n    )\n\n    const LeadFormSchema = z.object({\n        name: z.string().min(1).max(255).default(''),\n        email: z.email().max(255).default(''),\n        phone: z\n            .string()\n            .max(50)\n            .regex(/^[+0-9\\s\\-.()]*$/, $t('validation.invalidPhoneNumber'))\n            .optional(),\n    })\n\n    const emit = defineEmits<{\n        submit: [data: Record<string, unknown>]\n    }>()\n\n    const { VvForm, VvFormField, formData } = useForm(LeadFormSchema, {\n        lazyLoad: true,\n    })\n\n    // Pre-populate form with input values\n    watch(\n        input,\n        (newInput) => {\n            formData.value = {\n                name: newInput?.name || '',\n                email: newInput?.email || '',\n                phone: newInput?.phone || '',\n            }\n        },\n        { immediate: true },\n    )\n\n    watch(\n        () => props.submitted,\n        (submitted) => {\n            if (submitted) {\n                localSubmitted.value = true\n            }\n        },\n        { immediate: true },\n    )\n\n    const isSubmitted = computed(() => {\n        return props.submitted || localSubmitted.value\n    })\n\n    const submitLead = async (data: Record<string, unknown>): Promise<void> => {\n        emit('submit', { ...data, metadata: input.value?.conversationContext })\n    }\n\n    const privacyNotice = useLocalizedString(\n        () => props.privacyPolicyNotice,\n        'message.defaultPrivacyPolicyNotice',\n    )\n</script>\n\n<template>\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n            <VvIcon name=\"ri:send-plane-2-line\" class=\"text-16\" />\n            <strong class=\"font-bold\">{{ $t('label.contactUs') }}</strong>\n        </div>\n\n        <Transition mode=\"out-in\">\n            <div v-if=\"!isSubmitted\" class=\"p-sm\">\n                <VvForm v-model=\"formData\" :readonly @submit=\"submitLead\">\n                    <VvFormField\n                        name=\"name\"\n                        type=\"text\"\n                        :label=\"$t('label.name')\"\n                        :placeholder=\"$t('placeholder.name')\"\n                        icon=\"ri:user-line\"\n                        modifiers=\"compact no-label\"\n                        class=\"mb-md\" />\n                    <VvFormField\n                        name=\"email\"\n                        type=\"email\"\n                        :label=\"$t('label.email')\"\n                        :placeholder=\"$t('placeholder.email')\"\n                        icon=\"ri:mail-line\"\n                        modifiers=\"compact no-label\"\n                        class=\"mb-md\" />\n                    <VvFormField\n                        name=\"phone\"\n                        type=\"tel\"\n                        :label=\"$t('label.phone')\"\n                        :placeholder=\"$t('placeholder.phone')\"\n                        icon=\"ri:phone-line\"\n                        class=\"mb-md\"\n                        modifiers=\"compact no-label\" />\n\n                    <div class=\"flex justify-between items-center gap-16 mt-xs\">\n                        <div\n                            class=\"text-smaller text-word-3 flex items-center gap-8\">\n                            <VvIcon\n                                name=\"ri:shield-check-line\"\n                                class=\"text-16 shrink-0\" />\n                            <PkStreamingMarkdown\n                                :markdown=\"privacyNotice\"\n                                class=\"wysiwyg\" />\n                        </div>\n                        <VvButton\n                            type=\"submit\"\n                            modifiers=\"primary\"\n                            :loading\n                            :disabled=\"loading || readonly\"\n                            icon-position=\"right\"\n                            class=\"shrink-0\"\n                            :label=\"$t('action.submit')\" />\n                    </div>\n                </VvForm>\n            </div>\n            <div v-else class=\"p-sm\">\n                <div class=\"flex items-center gap-sm\">\n                    <VvIcon\n                        name=\"ri:mail-check-line\"\n                        class=\"text-24 text-success\" />\n                    <div>\n                        <strong class=\"font-semibold block text-success\">\n                            {{ $t('message.leadSubmittedTitle') }}\n                        </strong>\n                        <p class=\"text-word-3\">\n                            {{ $t('message.leadSubmittedMessage') }}\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PkToolShowContactForm-CXE0485W.js","names":[],"sources":["../../../../packages/components/src/chat/PkToolShowContactForm.vue","../../../../packages/components/src/chat/PkToolShowContactForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, watch } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { useForm } from '@volverjs/form-vue'\n    import * as z from 'zod'\n    import { useSafeLocalStorage, useLocalizedString } from 'composables'\n    import type { LocalizedString } from 'models'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const props = defineProps<{\n        part: unknown\n        submitted?: boolean\n        loading?: boolean\n        error?: string\n        readonly?: boolean\n        privacyPolicyNotice?: LocalizedString\n    }>()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            type: string\n            toolCallId: string\n            input?: {\n                name: string\n                email: string\n                phone?: string\n                conversationContext?: Record<string, unknown>\n            }\n        }\n        return part\n    })\n\n    const input = computed(() => toolPart.value.input)\n\n    const localSubmitted = useSafeLocalStorage<boolean>(\n        computed(\n            () =>\n                `${toolPart.value.toolCallId}-${toolPart.value.type}-submitted`,\n        ),\n        false,\n    )\n\n    const LeadFormSchema = z.object({\n        name: z.string().min(1).max(255).default(''),\n        email: z.email().max(255).default(''),\n        phone: z\n            .string()\n            .max(50)\n            .regex(/^[+0-9\\s\\-.()]*$/, $t('validation.invalidPhoneNumber'))\n            .optional(),\n    })\n\n    const emit = defineEmits<{\n        submit: [data: Record<string, unknown>]\n    }>()\n\n    const { VvForm, VvFormField, formData } = useForm(LeadFormSchema, {\n        lazyLoad: true,\n    })\n\n    // Pre-populate form with input values\n    watch(\n        input,\n        (newInput) => {\n            formData.value = {\n                name: newInput?.name || '',\n                email: newInput?.email || '',\n                phone: newInput?.phone || '',\n            }\n        },\n        { immediate: true },\n    )\n\n    watch(\n        () => props.submitted,\n        (submitted) => {\n            if (submitted) {\n                localSubmitted.value = true\n            }\n        },\n        { immediate: true },\n    )\n\n    const isSubmitted = computed(() => {\n        return props.submitted || localSubmitted.value\n    })\n\n    const submitLead = async (data: Record<string, unknown>): Promise<void> => {\n        emit('submit', { ...data, metadata: input.value?.conversationContext })\n    }\n\n    const privacyNotice = useLocalizedString(\n        () => props.privacyPolicyNotice,\n        'message.defaultPrivacyPolicyNotice',\n    )\n</script>\n\n<template>\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n            <VvIcon name=\"ri:send-plane-2-line\" class=\"text-16\" />\n            <strong class=\"font-bold\">{{ $t('label.contactUs') }}</strong>\n        </div>\n\n        <Transition mode=\"out-in\">\n            <div v-if=\"!isSubmitted\" class=\"p-sm\">\n                <VvForm v-model=\"formData\" :readonly @submit=\"submitLead\">\n                    <VvFormField\n                        name=\"name\"\n                        type=\"text\"\n                        :label=\"$t('label.name')\"\n                        :placeholder=\"$t('placeholder.name')\"\n                        icon=\"ri:user-line\"\n                        modifiers=\"compact no-label\"\n                        class=\"mb-md\" />\n                    <VvFormField\n                        name=\"email\"\n                        type=\"email\"\n                        :label=\"$t('label.email')\"\n                        :placeholder=\"$t('placeholder.email')\"\n                        icon=\"ri:mail-line\"\n                        modifiers=\"compact no-label\"\n                        class=\"mb-md\" />\n                    <VvFormField\n                        name=\"phone\"\n                        type=\"tel\"\n                        :label=\"$t('label.phone')\"\n                        :placeholder=\"$t('placeholder.phone')\"\n                        icon=\"ri:phone-line\"\n                        class=\"mb-md\"\n                        modifiers=\"compact no-label\" />\n\n                    <div class=\"flex justify-between items-center gap-16 mt-xs\">\n                        <div\n                            class=\"text-smaller text-word-3 flex items-center gap-8\">\n                            <VvIcon\n                                name=\"ri:shield-check-line\"\n                                class=\"text-16 shrink-0\" />\n                            <PkStreamingMarkdown\n                                :markdown=\"privacyNotice\"\n                                class=\"wysiwyg\" />\n                        </div>\n                        <VvButton\n                            type=\"submit\"\n                            modifiers=\"primary\"\n                            :loading\n                            :disabled=\"loading || readonly\"\n                            icon-position=\"right\"\n                            class=\"shrink-0\"\n                            :label=\"$t('action.submit')\" />\n                    </div>\n                </VvForm>\n            </div>\n            <div v-else class=\"p-sm\">\n                <div class=\"flex items-center gap-sm\">\n                    <VvIcon\n                        name=\"ri:mail-check-line\"\n                        class=\"text-24 text-success\" />\n                    <div>\n                        <strong class=\"font-semibold block text-success\">\n                            {{ $t('message.leadSubmittedTitle') }}\n                        </strong>\n                        <p class=\"text-word-3\">\n                            {{ $t('message.leadSubmittedMessage') }}\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, watch } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { useForm } from '@volverjs/form-vue'\n    import * as z from 'zod'\n    import { useSafeLocalStorage, useLocalizedString } from 'composables'\n    import type { LocalizedString } from 'models'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const props = defineProps<{\n        part: unknown\n        submitted?: boolean\n        loading?: boolean\n        error?: string\n        readonly?: boolean\n        privacyPolicyNotice?: LocalizedString\n    }>()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            type: string\n            toolCallId: string\n            input?: {\n                name: string\n                email: string\n                phone?: string\n                conversationContext?: Record<string, unknown>\n            }\n        }\n        return part\n    })\n\n    const input = computed(() => toolPart.value.input)\n\n    const localSubmitted = useSafeLocalStorage<boolean>(\n        computed(\n            () =>\n                `${toolPart.value.toolCallId}-${toolPart.value.type}-submitted`,\n        ),\n        false,\n    )\n\n    const LeadFormSchema = z.object({\n        name: z.string().min(1).max(255).default(''),\n        email: z.email().max(255).default(''),\n        phone: z\n            .string()\n            .max(50)\n            .regex(/^[+0-9\\s\\-.()]*$/, $t('validation.invalidPhoneNumber'))\n            .optional(),\n    })\n\n    const emit = defineEmits<{\n        submit: [data: Record<string, unknown>]\n    }>()\n\n    const { VvForm, VvFormField, formData } = useForm(LeadFormSchema, {\n        lazyLoad: true,\n    })\n\n    // Pre-populate form with input values\n    watch(\n        input,\n        (newInput) => {\n            formData.value = {\n                name: newInput?.name || '',\n                email: newInput?.email || '',\n                phone: newInput?.phone || '',\n            }\n        },\n        { immediate: true },\n    )\n\n    watch(\n        () => props.submitted,\n        (submitted) => {\n            if (submitted) {\n                localSubmitted.value = true\n            }\n        },\n        { immediate: true },\n    )\n\n    const isSubmitted = computed(() => {\n        return props.submitted || localSubmitted.value\n    })\n\n    const submitLead = async (data: Record<string, unknown>): Promise<void> => {\n        emit('submit', { ...data, metadata: input.value?.conversationContext })\n    }\n\n    const privacyNotice = useLocalizedString(\n        () => props.privacyPolicyNotice,\n        'message.defaultPrivacyPolicyNotice',\n    )\n</script>\n\n<template>\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8 min-h-40\">\n            <VvIcon name=\"ri:send-plane-2-line\" class=\"text-16\" />\n            <strong class=\"font-bold\">{{ $t('label.contactUs') }}</strong>\n        </div>\n\n        <Transition mode=\"out-in\">\n            <div v-if=\"!isSubmitted\" class=\"p-sm\">\n                <VvForm v-model=\"formData\" :readonly @submit=\"submitLead\">\n                    <VvFormField\n                        name=\"name\"\n                        type=\"text\"\n                        :label=\"$t('label.name')\"\n                        :placeholder=\"$t('placeholder.name')\"\n                        icon=\"ri:user-line\"\n                        modifiers=\"compact no-label\"\n                        class=\"mb-md\" />\n                    <VvFormField\n                        name=\"email\"\n                        type=\"email\"\n                        :label=\"$t('label.email')\"\n                        :placeholder=\"$t('placeholder.email')\"\n                        icon=\"ri:mail-line\"\n                        modifiers=\"compact no-label\"\n                        class=\"mb-md\" />\n                    <VvFormField\n                        name=\"phone\"\n                        type=\"tel\"\n                        :label=\"$t('label.phone')\"\n                        :placeholder=\"$t('placeholder.phone')\"\n                        icon=\"ri:phone-line\"\n                        class=\"mb-md\"\n                        modifiers=\"compact no-label\" />\n\n                    <div class=\"flex justify-between items-center gap-16 mt-xs\">\n                        <div\n                            class=\"text-smaller text-word-3 flex items-center gap-8\">\n                            <VvIcon\n                                name=\"ri:shield-check-line\"\n                                class=\"text-16 shrink-0\" />\n                            <PkStreamingMarkdown\n                                :markdown=\"privacyNotice\"\n                                class=\"wysiwyg\" />\n                        </div>\n                        <VvButton\n                            type=\"submit\"\n                            modifiers=\"primary\"\n                            :loading\n                            :disabled=\"loading || readonly\"\n                            icon-position=\"right\"\n                            class=\"shrink-0\"\n                            :label=\"$t('action.submit')\" />\n                    </div>\n                </VvForm>\n            </div>\n            <div v-else class=\"p-sm\">\n                <div class=\"flex items-center gap-sm\">\n                    <VvIcon\n                        name=\"ri:mail-check-line\"\n                        class=\"text-24 text-success\" />\n                    <div>\n                        <strong class=\"font-semibold block text-success\">\n                            {{ $t('message.leadSubmittedTitle') }}\n                        </strong>\n                        <p class=\"text-word-3\">\n                            {{ $t('message.leadSubmittedMessage') }}\n                        </p>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n"],"mappings":"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"}

package/dist/_chunks/{PkToolShowDiagram-cA64c2_N.js → PkToolShowDiagram-D-TyCkCB.js}

@@ -1,5 +1,5 @@
 import { $ as e, C as t, F as n, L as r, O as i, St as a, Tt as o, X as s, _ as c, bt as l, g as u, h as d, it as f, m as p, pt as m, r as h, t as g, v as _, wt as v, x as y, xt as b } from "./vue.runtime.esm-bundler-D6KKITU0.js";
-import { n as x } from "./vue-i18n-_ouwlDGE.js";
+import { r as x } from "./vue-i18n-C3J36GV4.js";
 import "./src-Co0-iQeD.js";
 import { n as S } from "./text-DbSEK8si.js";
 import { i as C } from "./dist-vbhhaYbZ.js";
@@ -237,4 +237,4 @@ var M = {
 //#endregion
 export { B as default };
 
-//# sourceMappingURL=PkToolShowDiagram-cA64c2_N.js.map
+//# sourceMappingURL=PkToolShowDiagram-D-TyCkCB.js.map

package/dist/_chunks/{PkToolShowDiagram-cA64c2_N.js.map → PkToolShowDiagram-D-TyCkCB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkToolShowDiagram-cA64c2_N.js","names":[],"sources":["../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PkToolShowDiagram-D-TyCkCB.js","names":[],"sources":["../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue","../../../../packages/components/src/chat/PkToolShowDiagram.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { ref, onMounted, computed, watch } from 'vue'\n    import { useLightbox } from './composables/useLightbox'\n    import { useI18n } from 'vue-i18n'\n\n    const props = defineProps<{\n        svg?: string\n        title?: string\n    }>()\n\n    const { t: $t } = useI18n()\n\n    const svgRef = ref<HTMLDivElement | null>(null)\n    const galleryRef = ref<HTMLElement>()\n\n    const scale = ref(1)\n    const translateX = ref(0)\n    const translateY = ref(0)\n    const startX = ref(0)\n    const startY = ref(0)\n\n    // PhotoSwipe integration\n    const svgDataUrl = ref('')\n    const svgWidth = ref(0)\n    const svgHeight = ref(0)\n\n    const { lightbox, init } = useLightbox({\n        gallery: galleryRef,\n        downloadable: true,\n        openInNewTab: false,\n    })\n\n    const svgStyle = computed(() => ({\n        transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,\n    }))\n\n    const zoomIn = () => {\n        scale.value = Math.min(scale.value * 1.2, 10)\n    }\n\n    const zoomOut = () => {\n        scale.value = Math.max(scale.value / 1.2, 0.1)\n    }\n\n    const reset = () => {\n        scale.value = 1\n        translateX.value = 0\n        translateY.value = 0\n    }\n\n    const openLightbox = () => {\n        if (svgDataUrl.value) {\n            lightbox.value?.loadAndOpen(0)\n        }\n    }\n\n    const isDragging = ref(false)\n\n    // Pan logic\n    const onMouseDown = (e: MouseEvent) => {\n        e.preventDefault()\n        isDragging.value = true\n        startX.value = e.clientX - translateX.value\n        startY.value = e.clientY - translateY.value\n    }\n\n    const onMouseMove = (e: MouseEvent) => {\n        if (!isDragging.value) return\n        translateX.value = e.clientX - startX.value\n        translateY.value = e.clientY - startY.value\n    }\n\n    const onMouseUp = () => {\n        isDragging.value = false\n    }\n\n    function serializeSvg(): string | null {\n        const svg = svgRef.value?.querySelector('svg')\n        if (!svg) return null\n        return new XMLSerializer().serializeToString(svg)\n    }\n\n    function updateSvgExport() {\n        const svg = svgRef.value?.querySelector('svg')\n        const serialized = serializeSvg()\n        if (!svg || !serialized) return\n\n        const viewBox = svg.viewBox?.baseVal\n        svgWidth.value =\n            viewBox?.width || svg.getBoundingClientRect().width || 1200\n        svgHeight.value =\n            viewBox?.height || svg.getBoundingClientRect().height || 800\n        svgDataUrl.value = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(serialized)}`\n    }\n\n    watch(\n        () => props.svg,\n        () => {\n            if (props.svg && svgRef.value) {\n                svgRef.value.innerHTML = props.svg\n                updateSvgExport()\n            }\n        },\n    )\n\n    onMounted(async () => {\n        if (props.svg && svgRef.value) {\n            svgRef.value.innerHTML = props.svg\n            updateSvgExport()\n        }\n        await init()\n    })\n</script>\n\n<template>\n    <div\n        class=\"pk-svg-viewer\"\n        :class=\"{\n            'pk-svg-viewer--dragging': isDragging,\n        }\">\n        <!-- Hidden Gallery for Lightbox -->\n        <div ref=\"galleryRef\" class=\"hidden\">\n            <a\n                v-if=\"svgDataUrl\"\n                :href=\"svgDataUrl\"\n                :data-pswp-src=\"svgDataUrl\"\n                :data-pswp-width=\"svgWidth\"\n                :data-pswp-height=\"svgHeight\"\n                :title=\"title\" />\n        </div>\n\n        <!-- SVG Stage -->\n        <div\n            class=\"pk-svg-viewer__stage\"\n            @mousedown=\"onMouseDown\"\n            @mousemove=\"onMouseMove\"\n            @mouseup=\"onMouseUp\"\n            @mouseleave=\"onMouseUp\">\n            <div\n                ref=\"svgRef\"\n                :style=\"svgStyle\"\n                class=\"pk-svg-viewer__content\" />\n        </div>\n\n        <!-- Floating Toolbar -->\n        <div class=\"pk-svg-viewer__toolbar\">\n            <VvButtonGroup\n                modifiers=\"compact\"\n                class=\"bg-surface-1 shadow-md overflow-hidden\">\n                <transition name=\"fade\">\n                    <VvButton\n                        key=\"reset\"\n                        modifiers=\"action-small\"\n                        :disabled=\"\n                            scale === 1 && translateX === 0 && translateY === 0\n                        \"\n                        icon=\"ri:aspect-ratio-line\"\n                        :title=\"$t('action.reset')\"\n                        @click=\"reset\" />\n                </transition>\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-out-line\"\n                    :title=\"$t('action.zoomOut')\"\n                    @click=\"zoomOut\" />\n                <VvButton\n                    modifiers=\"action-small\"\n                    icon=\"ri:zoom-in-line\"\n                    :title=\"$t('action.zoomIn')\"\n                    @click=\"zoomIn\" />\n                <VvButton\n                    v-if=\"svgDataUrl\"\n                    modifiers=\"action-small\"\n                    icon=\"ri:fullscreen-line\"\n                    :title=\"$t('action.expand')\"\n                    @click=\"openLightbox\" />\n            </VvButtonGroup>\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-svg-viewer {\n        position: relative;\n        overflow: hidden;\n        background-color: var(--color-surface-2);\n        width: 100%;\n        height: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        &__content {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            transition: transform 0.3s ease-out;\n            transform-origin: center center;\n\n            svg {\n                max-width: 100%;\n                max-height: 100%;\n                height: auto;\n                width: auto;\n            }\n        }\n\n        &__toolbar {\n            position: absolute;\n            top: var(--spacing-8);\n            right: var(--spacing-8);\n            z-index: var(--z-dropdown);\n            opacity: 0;\n            transition: var(--transition-opacity);\n        }\n\n        &__stage {\n            width: 100%;\n            height: auto;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            user-select: none;\n        }\n\n        &:hover {\n            .pk-svg-viewer__toolbar {\n                opacity: 1;\n            }\n        }\n\n        &--dragging {\n            .pk-svg-viewer__toolbar {\n                opacity: 0.5 !important;\n                pointer-events: none;\n\n                & * {\n                    pointer-events: none;\n                }\n            }\n\n            .pk-svg-viewer__content {\n                cursor: grabbing !important;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, ref, watch } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import { useI18n } from 'vue-i18n'\n    import { toSnakeCase } from 'utils'\n    import PkSvgViewer from '../PkSvgViewer.vue'\n\n    const props = defineProps<{\n        part: unknown\n        isDark?: boolean\n    }>()\n\n    const { t: $t, te: $te } = useI18n({\n        useScope: 'global',\n    })\n\n    const { copy, copied } = useClipboard()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                code: string\n                title?: string\n                caption?: string\n            }\n        }\n        return part\n    })\n\n    const svgError = ref(false)\n\n    // Serialized SVG content\n    const svgContent = ref('')\n\n    enum DiagramType {\n        Sequence = 'sequenceDiagram',\n        Class = 'classDiagram',\n        State = 'stateDiagram',\n        ER = 'erDiagram',\n        XYChart = 'xychart',\n        Flowchart = 'flowchart',\n        Graph = 'graph',\n    }\n\n    const diagramType = computed<DiagramType | undefined>(() => {\n        const code = toolPart.value.input?.code?.trimStart()\n        if (!code) {\n            return undefined\n        }\n        const firstWord = code.match(/^[A-Za-z-]+/)?.[0]\n        switch (firstWord) {\n            case 'sequenceDiagram':\n                return DiagramType.Sequence\n            case 'classDiagram':\n                return DiagramType.Class\n            case 'stateDiagram':\n                return DiagramType.State\n            case 'erDiagram':\n                return DiagramType.ER\n            case 'xychart-beta':\n                return DiagramType.XYChart\n            case 'flowchart':\n                return DiagramType.Flowchart\n            case 'graph':\n                return DiagramType.Graph\n            default:\n                return undefined\n        }\n    })\n\n    const diagramTypeLabel = computed(() => {\n        if (!diagramType.value) {\n            return ''\n        }\n        return $te(`diagram.${diagramType.value}`)\n            ? $t(`diagram.${diagramType.value}`)\n            : diagramType.value\n    })\n\n    const diagramTypeIcon = computed(() => {\n        switch (diagramType.value) {\n            case DiagramType.Sequence:\n                return 'ri:timeline-view'\n            case DiagramType.Class:\n                return 'ri:organization-chart'\n            case DiagramType.State:\n                return 'ri:organization-chart'\n            case DiagramType.ER:\n                return 'ri:organization-chart'\n            case DiagramType.XYChart:\n                return 'ri:line-chart-line'\n            case DiagramType.Flowchart:\n                return 'ri:flow-chart'\n            case DiagramType.Graph:\n                return 'ri:flow-chart'\n            default:\n                return 'ri:flow-chart'\n        }\n    })\n\n    async function renderDiagram() {\n        const code = toolPart.value.input?.code\n        if (!code) return\n\n        svgError.value = false\n        try {\n            const { renderMermaidSVG, THEMES } =\n                await import('beautiful-mermaid')\n            const theme = props.isDark\n                ? THEMES['github-dark']\n                : THEMES['github-light']\n            svgContent.value = renderMermaidSVG(code, theme)\n        } catch {\n            svgError.value = true\n        }\n    }\n\n    watch([() => toolPart.value.input?.code, () => props.isDark], renderDiagram)\n    onMounted(async () => {\n        await renderDiagram()\n    })\n\n    const downloadSvg = () => {\n        if (!svgContent.value) {\n            return\n        }\n        const blob = new Blob([svgContent.value], {\n            type: 'image/svg+xml;charset=utf-8',\n        })\n        const url = URL.createObjectURL(blob)\n        const anchor = document.createElement('a')\n        anchor.href = url\n        anchor.download = `${toSnakeCase(toolPart.value.input?.title || 'diagram')}.svg`\n        document.body.appendChild(anchor)\n        anchor.click()\n        document.body.removeChild(anchor)\n        URL.revokeObjectURL(url)\n    }\n\n    const copyCode = () => {\n        const code = toolPart.value.input?.code\n        if (code) {\n            copy(code)\n        }\n    }\n</script>\n\n<template>\n    <div\n        v-if=\"toolPart?.input?.code\"\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-b border-surface-3 text-word-3 flex items-center gap-8\">\n            <VvIcon :name=\"diagramTypeIcon\" class=\"text-16\" />\n            <div class=\"flex flex-col items-start gap-2\">\n                <strong class=\"font-bold\">{{\n                    diagramTypeLabel ?? $t('label.diagram')\n                }}</strong>\n            </div>\n            <VvButtonGroup modifiers=\"compact\" class=\"ml-auto shrink-0\">\n                <VvButton\n                    modifiers=\"action-quiet-small\"\n                    :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                    :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                    @click=\"copyCode\" />\n                <VvButton\n                    v-if=\"svgContent\"\n                    modifiers=\"action-quiet-small\"\n                    icon=\"ri:download-line\"\n                    :label=\"$t('action.download')\"\n                    @click=\"downloadSvg\" />\n            </VvButtonGroup>\n        </div>\n        <div v-if=\"svgError\" class=\"text-12 text-danger py-8 px-sm\">\n            {{ $t('message.diagramRenderError') }}\n        </div>\n        <PkSvgViewer\n            v-else-if=\"svgContent\"\n            class=\"pk-tool-show-diagram__stage\"\n            :svg=\"svgContent\"\n            :title=\"toolPart.input?.title\" />\n        <div\n            v-else\n            class=\"pk-tool-show-diagram__stage flex justify-center items-center\">\n            <VvIcon name=\"line-md:loading-loop\" class=\"w-24 h-24 text-word-5\" />\n        </div>\n        <div\n            v-if=\"toolPart.input.caption\"\n            class=\"px-sm py-6 bg-surface-1 min-h-40 text-12 border-t border-surface-3 text-word-3\">\n            {{ toolPart.input.caption }}\n        </div>\n    </div>\n</template>\n\n<style lang=\"scss\">\n    .pk-tool-show-diagram {\n        // Fixed stage height: the diagram renders lazily (async chunk +\n        // dynamic mermaid import), so the loader and the rendered SVG must\n        // occupy the same space or the chat scroll position jumps around.\n        // The SVG scales to fit; zoom/pan and the lightbox cover the rest.\n        &__stage {\n            height: 384px;\n\n            .pk-svg-viewer__stage,\n            .pk-svg-viewer__content {\n                height: 100%;\n            }\n        }\n    }\n</style>\n"],"mappings":"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"}