@8wave/ai-elements 0.119.0-beta.31 → 0.119.0-beta.45

package/dist/_chunks/PkToolShowContactForm-Dn6CEXF_.js

@@ -0,0 +1,158 @@
+import { _ as e, b as t, d as n } from "./zod-Dd1GFq_6.js";
+import { $ as r, C as i, Ct as a, Dt as o, L as s, O as c, St as l, X as u, _ as d, b as f, ct as p, d as m, g as h, h as g, it as _, m as v, r as y, t as b, v as x, x as S, z as ee } from "./vue.runtime.esm-bundler-DKVd2gci.js";
+import { r as C } from "./vue-i18n-CooVjJjT.js";
+import { t as w } from "./PkStreamingMarkdown-B1t1tBvW.js";
+import { t as T } from "./src-CggZ5M7x.js";
+import { m as E, t as D } from "./index.es-dTcgyeM4.js";
+import { t as O } from "./VvButtonLocalized-DV-zbH9b.js";
+import { n as k, r as A, t as j } from "./index.es-DkFMpDsf.js";
+//#region ../../packages/components/src/chat/PkToolShowContactForm.vue?vue&type=script&setup=true&lang.ts
+c(), _(), a(), y();
+var M = { class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-surface" }, 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" }, P = { class: "font-bold" }, F = {
+	key: 0,
+	class: "p-sm flex flex-col gap-sm text-14"
+}, I = { class: "text-word-2" }, L = {
+	key: 0,
+	class: "flex flex-wrap gap-x-lg gap-y-sm"
+}, R = { class: "text-12 text-word-3" }, te = { class: "text-word-1 break-words" }, z = {
+	key: 1,
+	class: "p-sm"
+}, B = { class: "flex justify-between items-center gap-16 mt-xs" }, V = { class: "text-smaller text-word-3 flex items-center gap-8" }, H = {
+	key: 2,
+	class: "p-sm"
+}, U = { class: "flex items-center gap-sm" }, W = { class: "font-medium block text-word-1" }, G = { class: "text-word-3" }, K = /* @__PURE__ */ i({
+	__name: "PkToolShowContactForm",
+	props: {
+		part: { type: null },
+		submitted: { type: Boolean },
+		loading: { type: Boolean },
+		error: { type: String },
+		readonly: { type: Boolean },
+		privacyPolicyNotice: { type: null },
+		record: { type: Boolean }
+	},
+	emits: ["submit"],
+	setup(i, { emit: a }) {
+		let { t: c } = C({ useScope: "global" }), _ = i, y = v(() => _.part), K = v(() => y.value.input), q = v(() => [
+			{
+				name: "name",
+				label: c("label.name")
+			},
+			{
+				name: "email",
+				label: c("label.email")
+			},
+			{
+				name: "phone",
+				label: c("label.phone")
+			}
+		].map((e) => {
+			let t = K.value?.[e.name]?.trim();
+			return {
+				...e,
+				value: e.name === "phone" && t && T(t) || t
+			};
+		}).filter((e) => e.value)), J = A(v(() => `${y.value.toolCallId}-${y.value.type}-submitted`), !1), Y = e({
+			name: t().min(1).max(255).default(""),
+			email: n().max(255).default(""),
+			phone: t().max(50).regex(/^[+0-9\s\-.()]*$/, c("validation.invalidPhoneNumber")).optional()
+		}), X = a, { VvForm: Z, VvFormField: Q, formData: $ } = j(Y, { lazyLoad: !0 });
+		u(K, (e) => {
+			$.value = {
+				name: e?.name || "",
+				email: e?.email || "",
+				phone: e?.phone || ""
+			};
+		}, { immediate: !0 }), u(() => _.submitted, (e) => {
+			e && (J.value = !0);
+		}, { immediate: !0 });
+		let ne = v(() => _.submitted || J.value), re = async (e) => {
+			X("submit", {
+				...e,
+				metadata: K.value?.conversationContext
+			});
+		}, ie = k(() => _.privacyPolicyNotice, "message.defaultPrivacyPolicyNotice");
+		return (e, t) => {
+			let n = D, a = E, u = O;
+			return s(), x("div", M, [g("div", N, [S(n, {
+				name: "ri:send-plane-2-line",
+				class: "text-16"
+			}), g("strong", P, o(l(c)("label.contactUs")), 1)]), S(b, { mode: "out-in" }, {
+				default: r(() => [i.record ? (s(), x("div", F, [g("p", I, o(q.value.length ? l(c)("message.contactFormRecordPrefilled") : l(c)("message.contactFormRecord")), 1), q.value.length ? (s(), x("dl", L, [(s(!0), x(m, null, ee(q.value, (e) => (s(), x("div", {
+					key: e.name,
+					class: "flex flex-col gap-4 min-w-0"
+				}, [g("dt", R, o(e.label), 1), g("dd", te, o(e.value), 1)]))), 128))])) : d("", !0)])) : ne.value ? (s(), x("div", H, [g("div", U, [S(n, {
+					name: "ri:check-line",
+					class: "text-16 text-success"
+				}), g("div", null, [g("strong", W, o(l(c)("message.leadSubmittedTitle")), 1), g("p", G, o(l(c)("message.leadSubmittedMessage")), 1)])])])) : (s(), x("div", z, [S(l(Z), {
+					modelValue: l($),
+					"onUpdate:modelValue": t[0] ||= (e) => p($) ? $.value = e : null,
+					readonly: i.readonly,
+					onSubmit: re
+				}, {
+					default: r(() => [
+						S(l(Q), {
+							name: "name",
+							type: "text",
+							label: l(c)("label.name"),
+							placeholder: l(c)("placeholder.name"),
+							icon: "ri:user-line",
+							modifiers: "compact",
+							class: "mb-md"
+						}, null, 8, ["label", "placeholder"]),
+						S(l(Q), {
+							name: "email",
+							type: "email",
+							label: l(c)("label.email"),
+							placeholder: l(c)("placeholder.email"),
+							icon: "ri:mail-line",
+							modifiers: "compact",
+							class: "mb-md"
+						}, null, 8, ["label", "placeholder"]),
+						S(l(Q), {
+							name: "phone",
+							type: "tel",
+							label: l(c)("label.phone"),
+							placeholder: l(c)("placeholder.phone"),
+							icon: "ri:phone-line",
+							class: "mb-md",
+							modifiers: "compact"
+						}, null, 8, ["label", "placeholder"]),
+						i.error ? (s(), h(a, {
+							key: 0,
+							modifiers: "danger",
+							class: "mb-md"
+						}, {
+							default: r(() => [f(o(i.error), 1)]),
+							_: 1
+						})) : d("", !0),
+						g("div", B, [g("div", V, [S(n, {
+							name: "ri:shield-check-line",
+							class: "text-16 shrink-0"
+						}), S(w, {
+							markdown: l(ie),
+							class: "wysiwyg"
+						}, null, 8, ["markdown"])]), S(u, {
+							type: "submit",
+							loading: i.loading,
+							disabled: i.loading || i.readonly,
+							"icon-position": "right",
+							class: "shrink-0",
+							label: l(c)("action.submit")
+						}, null, 8, [
+							"loading",
+							"disabled",
+							"label"
+						])])
+					]),
+					_: 1
+				}, 8, ["modelValue", "readonly"])]))]),
+				_: 1
+			})]);
+		};
+	}
+});
+//#endregion
+export { K as default };
+
+//# sourceMappingURL=PkToolShowContactForm-Dn6CEXF_.js.map

package/dist/_chunks/PkToolShowContactForm-Dn6CEXF_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PkToolShowContactForm-Dn6CEXF_.js","names":["z.object","z.string","z.email","useForm","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_unref","_Transition","_withCtx","_Fragment","_renderList","_createCommentVNode","_isRef","_createBlock","_createTextVNode","PkStreamingMarkdown","_sfc_main","object","string","email","withCtx","defineComponent","init_shared_esm_bundler","toDisplayString","openBlock","init_runtime_core_esm_bundler","unref","watch","createCommentVNode","createTextVNode","isRef","Fragment","createBlock","createBaseVNode","init_reactivity_esm_bundler","computed","init_runtime_dom_esm_bundler","Transition","createElementBlock","createVNode","renderList","useI18n","PkStreamingMarkdown_default","formatPhoneNumber","xr","Ae","VvButtonLocalized","useLocalizedString","useSafeLocalStorage","Se","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","PkToolShowContactForm_default","__emit","$t","props","__props","toolPart","input","prefilled","value","field","localSubmitted","LeadFormSchema","emit","newInput","submitted","isSubmitted","submitLead","data","privacyNotice","_component_VvIcon","_component_VvAlert","_component_VvButton","VvForm","formData","_cache","$event","VvFormField"],"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 { formatPhoneNumber } from 'utils'\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         * A conversation read back (the chat logs): the card is the record\n         * of the form the agent showed, its prefilled values as text. Nothing\n         * in the part says whether the visitor sent it, only the contacts do.\n         */\n        record?: boolean\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 prefilled = computed(() =>\n        (\n            [\n                { name: 'name', label: $t('label.name') },\n                { name: 'email', label: $t('label.email') },\n                { name: 'phone', label: $t('label.phone') },\n            ] as const\n        )\n            .map((field) => {\n                const value = input.value?.[field.name]?.trim()\n                return {\n                    ...field,\n                    // Written as the contacts page writes it\n                    value:\n                        field.name === 'phone' && value\n                            ? formatPhoneNumber(value) || value\n                            : value,\n                }\n            })\n            .filter((field) => field.value),\n    )\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=\"record\" class=\"p-sm flex flex-col gap-sm text-14\">\n                <p class=\"text-word-2\">\n                    {{\n                        prefilled.length\n                            ? $t('message.contactFormRecordPrefilled')\n                            : $t('message.contactFormRecord')\n                    }}\n                </p>\n                <dl\n                    v-if=\"prefilled.length\"\n                    class=\"flex flex-wrap gap-x-lg gap-y-sm\">\n                    <div\n                        v-for=\"field in prefilled\"\n                        :key=\"field.name\"\n                        class=\"flex flex-col gap-4 min-w-0\">\n                        <dt class=\"text-12 text-word-3\">{{ field.label }}</dt>\n                        <dd class=\"text-word-1 break-words\">\n                            {{ field.value }}\n                        </dd>\n                    </div>\n                </dl>\n            </div>\n            <div v-else-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\"\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\"\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\" />\n\n                    <!-- A send that failed says so: the reason reached the\n                         card and was never drawn -->\n                    <VvAlert v-if=\"error\" modifiers=\"danger\" class=\"mb-md\">\n                        {{ error }}\n                    </VvAlert>\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                        <!-- The library's default button is the brand, and in\n                             the chat the brand is the agent's color, as on the\n                             rest of the card: `primary` drew it neutral dark -->\n                        <VvButton\n                            type=\"submit\"\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                <!-- One confirmation row across every tool card: a green\n                     check, the title in weight, the body quiet. The check is\n                     the outcome, so it alone carries the colour (DESIGN.md). -->\n                <div class=\"flex items-center gap-sm\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n                    <div>\n                        <strong class=\"font-medium block text-word-1\">\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 { formatPhoneNumber } from 'utils'\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         * A conversation read back (the chat logs): the card is the record\n         * of the form the agent showed, its prefilled values as text. Nothing\n         * in the part says whether the visitor sent it, only the contacts do.\n         */\n        record?: boolean\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 prefilled = computed(() =>\n        (\n            [\n                { name: 'name', label: $t('label.name') },\n                { name: 'email', label: $t('label.email') },\n                { name: 'phone', label: $t('label.phone') },\n            ] as const\n        )\n            .map((field) => {\n                const value = input.value?.[field.name]?.trim()\n                return {\n                    ...field,\n                    // Written as the contacts page writes it\n                    value:\n                        field.name === 'phone' && value\n                            ? formatPhoneNumber(value) || value\n                            : value,\n                }\n            })\n            .filter((field) => field.value),\n    )\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=\"record\" class=\"p-sm flex flex-col gap-sm text-14\">\n                <p class=\"text-word-2\">\n                    {{\n                        prefilled.length\n                            ? $t('message.contactFormRecordPrefilled')\n                            : $t('message.contactFormRecord')\n                    }}\n                </p>\n                <dl\n                    v-if=\"prefilled.length\"\n                    class=\"flex flex-wrap gap-x-lg gap-y-sm\">\n                    <div\n                        v-for=\"field in prefilled\"\n                        :key=\"field.name\"\n                        class=\"flex flex-col gap-4 min-w-0\">\n                        <dt class=\"text-12 text-word-3\">{{ field.label }}</dt>\n                        <dd class=\"text-word-1 break-words\">\n                            {{ field.value }}\n                        </dd>\n                    </div>\n                </dl>\n            </div>\n            <div v-else-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\"\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\"\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\" />\n\n                    <!-- A send that failed says so: the reason reached the\n                         card and was never drawn -->\n                    <VvAlert v-if=\"error\" modifiers=\"danger\" class=\"mb-md\">\n                        {{ error }}\n                    </VvAlert>\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                        <!-- The library's default button is the brand, and in\n                             the chat the brand is the agent's color, as on the\n                             rest of the card: `primary` drew it neutral dark -->\n                        <VvButton\n                            type=\"submit\"\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                <!-- One confirmation row across every tool card: a green\n                     check, the title in weight, the body quiet. The check is\n                     the outcome, so it alone carries the colour (DESIGN.md). -->\n                <div class=\"flex items-center gap-sm\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n                    <div>\n                        <strong class=\"font-medium block text-word-1\">\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-JpRMa4Jj.js → PkToolShowDiagram-WregKAJO.js}

@@ -1,12 +1,12 @@
 import { $ as e, C as t, Ct as n, Dt as r, Et as i, F as a, L as o, O as s, St as c, X as l, _ as u, g as d, h as f, it as p, m, mt as h, r as g, t as _, v, wt as y, x as b } from "./vue.runtime.esm-bundler-DKVd2gci.js";
 import { r as x } from "./vue-i18n-CooVjJjT.js";
-import "./src-DL9TKN-Z.js";
+import "./src-CggZ5M7x.js";
 import { r as S } from "./text-BHCGblDQ.js";
 import { i as C } from "./dist-DxtbpUdI.js";
 import { a as w, t as T } from "./index.es-dTcgyeM4.js";
 import { t as E } from "./VvButtonLocalized-DV-zbH9b.js";
 import { t as D } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as O } from "./useLightbox-1KKLemEE.js";
+import { n as O } from "./useLightbox-3HiaRtzY.js";
 //#region ../../packages/components/src/PkSvgViewer.vue?vue&type=script&setup=true&lang.ts
 s(), n(), p(), g();
 var k = [
@@ -241,4 +241,4 @@ var M = {
 //#endregion
 export { B as default };
 
-//# sourceMappingURL=PkToolShowDiagram-JpRMa4Jj.js.map
+//# sourceMappingURL=PkToolShowDiagram-WregKAJO.js.map

package/dist/_chunks/{PkToolShowDiagram-JpRMa4Jj.js.map → PkToolShowDiagram-WregKAJO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkToolShowDiagram-JpRMa4Jj.js","names":["_hoisted_1","_hoisted_2","__unplugin_components_0","__unplugin_components_1","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createCommentVNode","_normalizeStyle","_createVNode","_withCtx","_Transition","_unref","_createBlock","_sfc_main","_style_0","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_unref","_withCtx","_createBlock","_createCommentVNode","PkSvgViewer","_sfc_main","_style_0","withCtx","defineComponent","init_shared_esm_bundler","toDisplayString","normalizeStyle","onMounted","openBlock","init_runtime_core_esm_bundler","unref","watch","createCommentVNode","createBlock","createBaseVNode","init_reactivity_esm_bundler","ref","init_runtime_dom_esm_bundler","Transition","normalizeClass","createVNode","useI18n","toSnakeCase","useClipboard","Qi","Ae","VvButtonLocalized","_plugin_vue_export_helper_default","useLightbox","_hoisted_1$1","_hoisted_2$1","PkSvgViewer_default","props","__props","$t","svgRef","galleryRef","scale","translateX","translateY","startX","startY","svgDataUrl","svgWidth","svgHeight","svgStyle","computed","zoomIn","zoomOut","reset","openLightbox","lightbox","isDragging","onMouseDown","onMouseMove","onMouseUp","serializeSvg","svg","updateSvgExport","serialized","viewBox","init","_component_VvButton","_component_VvButtonGroup","createElementBlock","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","DiagramType","\"Sequence\"","\"Class\"","\"State\"","\"ER\"","\"XYChart\"","\"Flowchart\"","\"Graph\"","PkToolShowDiagram_default","$te","toolPart","svgError","svgContent","diagramType","code","diagramTypeLabel","diagramTypeIcon","renderDiagram","theme","THEMES","renderMermaidSVG","downloadSvg","blob","url","anchor","copyCode","copy","_component_VvIcon","copied"],"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) {\n            return\n        }\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) {\n            return null\n        }\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) {\n            return\n        }\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) {\n            return\n        }\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) {\n            return null\n        }\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) {\n            return\n        }\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) {\n            return\n        }\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) {\n            return null\n        }\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) {\n            return\n        }\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) {\n            return\n        }\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=\"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) {\n            return\n        }\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=\"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) {\n            return\n        }\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=\"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-WregKAJO.js","names":["_hoisted_1","_hoisted_2","__unplugin_components_0","__unplugin_components_1","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createCommentVNode","_normalizeStyle","_createVNode","_withCtx","_Transition","_unref","_createBlock","_sfc_main","_style_0","__unplugin_components_0","__unplugin_components_1","__unplugin_components_2","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_unref","_withCtx","_createBlock","_createCommentVNode","PkSvgViewer","_sfc_main","_style_0","withCtx","defineComponent","init_shared_esm_bundler","toDisplayString","normalizeStyle","onMounted","openBlock","init_runtime_core_esm_bundler","unref","watch","createCommentVNode","createBlock","createBaseVNode","init_reactivity_esm_bundler","ref","init_runtime_dom_esm_bundler","Transition","normalizeClass","createVNode","useI18n","toSnakeCase","useClipboard","Qi","Ae","VvButtonLocalized","_plugin_vue_export_helper_default","useLightbox","_hoisted_1$1","_hoisted_2$1","PkSvgViewer_default","props","__props","$t","svgRef","galleryRef","scale","translateX","translateY","startX","startY","svgDataUrl","svgWidth","svgHeight","svgStyle","computed","zoomIn","zoomOut","reset","openLightbox","lightbox","isDragging","onMouseDown","onMouseMove","onMouseUp","serializeSvg","svg","updateSvgExport","serialized","viewBox","init","_component_VvButton","_component_VvButtonGroup","createElementBlock","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","DiagramType","\"Sequence\"","\"Class\"","\"State\"","\"ER\"","\"XYChart\"","\"Flowchart\"","\"Graph\"","PkToolShowDiagram_default","$te","toolPart","svgError","svgContent","diagramType","code","diagramTypeLabel","diagramTypeIcon","renderDiagram","theme","THEMES","renderMermaidSVG","downloadSvg","blob","url","anchor","copyCode","copy","_component_VvIcon","copied"],"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) {\n            return\n        }\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) {\n            return null\n        }\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) {\n            return\n        }\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) {\n            return\n        }\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) {\n            return null\n        }\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) {\n            return\n        }\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) {\n            return\n        }\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) {\n            return null\n        }\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) {\n            return\n        }\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) {\n            return\n        }\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=\"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) {\n            return\n        }\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=\"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) {\n            return\n        }\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=\"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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"}

package/dist/_chunks/{PkToolShowForm-DnIwTGl4.js → PkToolShowForm-CbuToc8O.js}

@@ -1,6 +1,6 @@
 import { $ as e, B as t, C as n, Ct as r, Dt as i, Et as a, G as o, K as s, L as c, M as l, O as u, St as d, X as f, _ as p, b as m, d as h, ft as ee, g, h as _, it as v, j as y, l as te, m as b, mt as x, r as S, u as C, v as w, wt as ne, x as T, y as E, z as D } from "./vue.runtime.esm-bundler-DKVd2gci.js";
 import { r as re } from "./vue-i18n-CooVjJjT.js";
-import { l as ie, t as ae, u as oe } from "./PkStreamingMarkdown-DKyHYHUN.js";
+import { l as ie, t as ae, u as oe } from "./PkStreamingMarkdown-B1t1tBvW.js";
 import { g as O } from "./Agent-Gdgpd3LA.js";
 import { c as k, f as se, o as A, p as j, s as M, t as ce } from "./index.es-dTcgyeM4.js";
 import { t as le } from "./VvButtonLocalized-DV-zbH9b.js";
@@ -379,4 +379,4 @@ var fe = {
 //#endregion
 export { z as default };
 
-//# sourceMappingURL=PkToolShowForm-DnIwTGl4.js.map
+//# sourceMappingURL=PkToolShowForm-CbuToc8O.js.map