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

package/dist-vue/_chunks/{PkSvgViewer-DrA4yi8Q.js → PkSvgViewer-D6DJ2jVO.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./VvButtonLocalized-BuzLsXp3.js";
-import { r as t } from "./PkChatbotFilePreview-DIP8KLkS.js";
+import { r as t } from "./PkChatbotFilePreview-D5H-RIk2.js";
 import { VvButtonGroup as n } from "@volverjs/ui-vue/components";
 import { Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, onMounted as p, openBlock as m, ref as h, unref as g, watch as _, withCtx as v } from "vue";
 import { useI18n as y } from "vue-i18n";
@@ -123,4 +123,4 @@ var b = [
 //#endregion
 export { S as t };
 
-//# sourceMappingURL=PkSvgViewer-DrA4yi8Q.js.map
+//# sourceMappingURL=PkSvgViewer-D6DJ2jVO.js.map

package/dist-vue/_chunks/{PkSvgViewer-DrA4yi8Q.js.map → PkSvgViewer-D6DJ2jVO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkSvgViewer-DrA4yi8Q.js","names":["__unplugin_components_0","__unplugin_components_1","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createCommentVNode","_normalizeStyle","_createVNode","_withCtx","_Transition","_unref","_createBlock","_sfc_main","VvButtonLocalized","useLightbox","_hoisted_1","_hoisted_2","PkSvgViewer_default","defineComponent","props","__props","$t","useI18n","svgRef","ref","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","watch","onMounted","init","_component_VvButton","_component_VvButtonGroup","VvButtonGroup","openBlock","createElementBlock","normalizeClass","createElementVNode","createCommentVNode","normalizeStyle","createVNode","withCtx","Transition","unref","createBlock"],"sources":["../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.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"],"mappings":"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"}
+{"version":3,"file":"PkSvgViewer-D6DJ2jVO.js","names":["__unplugin_components_0","__unplugin_components_1","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createCommentVNode","_normalizeStyle","_createVNode","_withCtx","_Transition","_unref","_createBlock","_sfc_main","VvButtonLocalized","useLightbox","_hoisted_1","_hoisted_2","PkSvgViewer_default","defineComponent","props","__props","$t","useI18n","svgRef","ref","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","watch","onMounted","init","_component_VvButton","_component_VvButtonGroup","VvButtonGroup","openBlock","createElementBlock","normalizeClass","createElementVNode","createCommentVNode","normalizeStyle","createVNode","withCtx","Transition","unref","createBlock"],"sources":["../../../../packages/components/src/PkSvgViewer.vue","../../../../packages/components/src/PkSvgViewer.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"],"mappings":"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"}

package/dist-vue/_chunks/{PkToolEditSpreadsheet-BX_h8Hut.js → PkToolEditSpreadsheet-D8Zp9gzW.js}

@@ -1,5 +1,5 @@
 import { S as e } from "./Agent-DU1WWaHR.js";
-import { t } from "./PkChatbotFilePreview-DIP8KLkS.js";
+import { t } from "./PkChatbotFilePreview-D5H-RIk2.js";
 import { computed as n, createCommentVNode as r, createElementBlock as i, createVNode as a, defineComponent as o, openBlock as s, toDisplayString as c, unref as l } from "vue";
 import { useI18n as u } from "vue-i18n";
 //#region ../../packages/components/src/chat/PkToolEditSpreadsheet.vue?vue&type=script&setup=true&lang.ts
@@ -37,4 +37,4 @@ var d = {
 //#endregion
 export { p as default };
 
-//# sourceMappingURL=PkToolEditSpreadsheet-BX_h8Hut.js.map
+//# sourceMappingURL=PkToolEditSpreadsheet-D8Zp9gzW.js.map

package/dist-vue/_chunks/{PkToolEditSpreadsheet-BX_h8Hut.js.map → PkToolEditSpreadsheet-D8Zp9gzW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkToolEditSpreadsheet-BX_h8Hut.js","names":["_openBlock","_createElementBlock","_createVNode","PkChatbotFilePreview","_unref","_toDisplayString","_createCommentVNode","_sfc_main","SPREADSHEET_MIME_TYPE","_hoisted_1","_hoisted_2","PkToolEditSpreadsheet_default","defineComponent","props","__props","$t","useI18n","version","computed","part","openBlock","createElementBlock","createVNode","PkChatbotFilePreview_default","unref","createCommentVNode","toDisplayString"],"sources":["../../../../packages/components/src/chat/PkToolEditSpreadsheet.vue","../../../../packages/components/src/chat/PkToolEditSpreadsheet.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { SPREADSHEET_MIME_TYPE } from 'models'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n\n    /** What `editSpreadsheet` returns that the card shows. */\n    type EditedVersion = {\n        storedFileName: string\n        filename?: string\n        sizeBytes?: number\n        changedCells?: number\n    }\n\n    /**\n     * The version an `editSpreadsheet` call wrote, as a file to download.\n     * Drawn once the call has an output: while it runs, the feed's activity\n     * indicator names it, and a refused edit is explained by the answer.\n     */\n    const props = defineProps<{\n        part: unknown\n        /** The authenticated download URL of a file stored in this chat. */\n        fileUrl: (storedFileName: string) => string\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const version = computed(() => {\n        const part = props.part as {\n            state?: string\n            output?: Partial<EditedVersion>\n        }\n        return part.state === 'output-available' && part.output?.storedFileName\n            ? (part.output as EditedVersion)\n            : undefined\n    })\n</script>\n\n<template>\n    <div v-if=\"version\" class=\"pk-tool-edit-spreadsheet\">\n        <PkChatbotFilePreview\n            :media-type=\"SPREADSHEET_MIME_TYPE\"\n            :url=\"fileUrl(version.storedFileName)\"\n            :filename=\"version.filename\"\n            :size=\"version.sizeBytes\"\n            show-download />\n        <p\n            v-if=\"version.changedCells !== undefined\"\n            class=\"text-12 text-word-3 mt-xs mb-0\">\n            {{ $t('messagePart.editSpreadsheetCells', version.changedCells) }}\n        </p>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { SPREADSHEET_MIME_TYPE } from 'models'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n\n    /** What `editSpreadsheet` returns that the card shows. */\n    type EditedVersion = {\n        storedFileName: string\n        filename?: string\n        sizeBytes?: number\n        changedCells?: number\n    }\n\n    /**\n     * The version an `editSpreadsheet` call wrote, as a file to download.\n     * Drawn once the call has an output: while it runs, the feed's activity\n     * indicator names it, and a refused edit is explained by the answer.\n     */\n    const props = defineProps<{\n        part: unknown\n        /** The authenticated download URL of a file stored in this chat. */\n        fileUrl: (storedFileName: string) => string\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const version = computed(() => {\n        const part = props.part as {\n            state?: string\n            output?: Partial<EditedVersion>\n        }\n        return part.state === 'output-available' && part.output?.storedFileName\n            ? (part.output as EditedVersion)\n            : undefined\n    })\n</script>\n\n<template>\n    <div v-if=\"version\" class=\"pk-tool-edit-spreadsheet\">\n        <PkChatbotFilePreview\n            :media-type=\"SPREADSHEET_MIME_TYPE\"\n            :url=\"fileUrl(version.storedFileName)\"\n            :filename=\"version.filename\"\n            :size=\"version.sizeBytes\"\n            show-download />\n        <p\n            v-if=\"version.changedCells !== undefined\"\n            class=\"text-12 text-word-3 mt-xs mb-0\">\n            {{ $t('messagePart.editSpreadsheetCells', version.changedCells) }}\n        </p>\n    </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAmBI,IAAMa,IAAQC,GAMR,EAAE,GAAGC,MAAOC,EAAQ,EAAE,UAAU,SAAS,CAAC,GAE1CC,IAAUC,QAAe;GAC3B,IAAMC,IAAON,EAAM;GAInB,OAAOM,EAAK,UAAU,sBAAsBA,EAAK,QAAQ,iBAClDA,EAAK,SACN,KAAA;EACV,CAAC;mBAIUF,EAAA,SAAXjB,EAAA,GAAAC,EAYM,OAZNQ,GAYM,CAXFP,EAKoBC,GAAA;GAJf,cAAYC,EAAAI,CAAA;GACZ,KAAKM,EAAA,QAAQG,EAAA,MAAQ,cAAc;GACnC,UAAUA,EAAA,MAAQ;GAClB,MAAMA,EAAA,MAAQ;GACf,iBAAA;;;;;;EAEM,CAAA,GAAAA,EAAA,MAAQ,iBAAiB,KAAA,IAE+BQ,EAAA,IAAA,EAAA,KAHlEzB,EAAA,GAAAC,EAII,KAJJS,GAIIL,EADGD,EAAAW,CAAA,CAAE,CAAA,oCAAqCE,EAAA,MAAQ,YAAY,CAAA,GAAA,CAAA,EAAA,CAAA,KAAAQ,EAAA,IAAA,EAAA"}
+{"version":3,"file":"PkToolEditSpreadsheet-D8Zp9gzW.js","names":["_openBlock","_createElementBlock","_createVNode","PkChatbotFilePreview","_unref","_toDisplayString","_createCommentVNode","_sfc_main","SPREADSHEET_MIME_TYPE","_hoisted_1","_hoisted_2","PkToolEditSpreadsheet_default","defineComponent","props","__props","$t","useI18n","version","computed","part","openBlock","createElementBlock","createVNode","PkChatbotFilePreview_default","unref","createCommentVNode","toDisplayString"],"sources":["../../../../packages/components/src/chat/PkToolEditSpreadsheet.vue","../../../../packages/components/src/chat/PkToolEditSpreadsheet.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { SPREADSHEET_MIME_TYPE } from 'models'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n\n    /** What `editSpreadsheet` returns that the card shows. */\n    type EditedVersion = {\n        storedFileName: string\n        filename?: string\n        sizeBytes?: number\n        changedCells?: number\n    }\n\n    /**\n     * The version an `editSpreadsheet` call wrote, as a file to download.\n     * Drawn once the call has an output: while it runs, the feed's activity\n     * indicator names it, and a refused edit is explained by the answer.\n     */\n    const props = defineProps<{\n        part: unknown\n        /** The authenticated download URL of a file stored in this chat. */\n        fileUrl: (storedFileName: string) => string\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const version = computed(() => {\n        const part = props.part as {\n            state?: string\n            output?: Partial<EditedVersion>\n        }\n        return part.state === 'output-available' && part.output?.storedFileName\n            ? (part.output as EditedVersion)\n            : undefined\n    })\n</script>\n\n<template>\n    <div v-if=\"version\" class=\"pk-tool-edit-spreadsheet\">\n        <PkChatbotFilePreview\n            :media-type=\"SPREADSHEET_MIME_TYPE\"\n            :url=\"fileUrl(version.storedFileName)\"\n            :filename=\"version.filename\"\n            :size=\"version.sizeBytes\"\n            show-download />\n        <p\n            v-if=\"version.changedCells !== undefined\"\n            class=\"text-12 text-word-3 mt-xs mb-0\">\n            {{ $t('messagePart.editSpreadsheetCells', version.changedCells) }}\n        </p>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { SPREADSHEET_MIME_TYPE } from 'models'\n    import PkChatbotFilePreview from './PkChatbotFilePreview.vue'\n\n    /** What `editSpreadsheet` returns that the card shows. */\n    type EditedVersion = {\n        storedFileName: string\n        filename?: string\n        sizeBytes?: number\n        changedCells?: number\n    }\n\n    /**\n     * The version an `editSpreadsheet` call wrote, as a file to download.\n     * Drawn once the call has an output: while it runs, the feed's activity\n     * indicator names it, and a refused edit is explained by the answer.\n     */\n    const props = defineProps<{\n        part: unknown\n        /** The authenticated download URL of a file stored in this chat. */\n        fileUrl: (storedFileName: string) => string\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    const version = computed(() => {\n        const part = props.part as {\n            state?: string\n            output?: Partial<EditedVersion>\n        }\n        return part.state === 'output-available' && part.output?.storedFileName\n            ? (part.output as EditedVersion)\n            : undefined\n    })\n</script>\n\n<template>\n    <div v-if=\"version\" class=\"pk-tool-edit-spreadsheet\">\n        <PkChatbotFilePreview\n            :media-type=\"SPREADSHEET_MIME_TYPE\"\n            :url=\"fileUrl(version.storedFileName)\"\n            :filename=\"version.filename\"\n            :size=\"version.sizeBytes\"\n            show-download />\n        <p\n            v-if=\"version.changedCells !== undefined\"\n            class=\"text-12 text-word-3 mt-xs mb-0\">\n            {{ $t('messagePart.editSpreadsheetCells', version.changedCells) }}\n        </p>\n    </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAmBI,IAAMa,IAAQC,GAMR,EAAE,GAAGC,MAAOC,EAAQ,EAAE,UAAU,SAAS,CAAC,GAE1CC,IAAUC,QAAe;GAC3B,IAAMC,IAAON,EAAM;GAInB,OAAOM,EAAK,UAAU,sBAAsBA,EAAK,QAAQ,iBAClDA,EAAK,SACN,KAAA;EACV,CAAC;mBAIUF,EAAA,SAAXjB,EAAA,GAAAC,EAYM,OAZNQ,GAYM,CAXFP,EAKoBC,GAAA;GAJf,cAAYC,EAAAI,CAAA;GACZ,KAAKM,EAAA,QAAQG,EAAA,MAAQ,cAAc;GACnC,UAAUA,EAAA,MAAQ;GAClB,MAAMA,EAAA,MAAQ;GACf,iBAAA;;;;;;EAEM,CAAA,GAAAA,EAAA,MAAQ,iBAAiB,KAAA,IAE+BQ,EAAA,IAAA,EAAA,KAHlEzB,EAAA,GAAAC,EAII,KAJJS,GAIIL,EADGD,EAAAW,CAAA,CAAE,CAAA,oCAAqCE,EAAA,MAAQ,YAAY,CAAA,GAAA,CAAA,EAAA,CAAA,KAAAQ,EAAA,IAAA,EAAA"}

package/dist-vue/_chunks/{PkToolRequestOAuthConnection-Bwj84qHq.js → PkToolRequestOAuthConnection-DosWR9I4.js}

@@ -1,6 +1,6 @@
 import { P as e } from "./Agent-DU1WWaHR.js";
 import { t } from "./VvButtonLocalized-BuzLsXp3.js";
-import { t as n } from "./mcpOAuthReport-BeZDTl87.js";
+import { t as n } from "./mcpOAuthReport-3A9v_gW_.js";
 import { VvIcon as r } from "@volverjs/ui-vue/components";
 import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, onMounted as f, onUnmounted as p, openBlock as m, ref as h, toDisplayString as g, unref as _ } from "vue";
 import { useI18n as v } from "vue-i18n";
@@ -115,4 +115,4 @@ var y = { class: "border border-surface-3 rounded-xl w-full overflow-hidden bg-s
 //#endregion
 export { A as default };
 
-//# sourceMappingURL=PkToolRequestOAuthConnection-Bwj84qHq.js.map
+//# sourceMappingURL=PkToolRequestOAuthConnection-DosWR9I4.js.map

package/dist-vue/_chunks/{PkToolRequestOAuthConnection-Bwj84qHq.js.map → PkToolRequestOAuthConnection-DosWR9I4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkToolRequestOAuthConnection-Bwj84qHq.js","names":["__unplugin_components_0","__unplugin_components_1","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_unref","_createBlock","_createCommentVNode","_Fragment","_sfc_main","isVoiceRenderAck","isMcpOAuthReport","_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","POLL_INTERVAL_MS","POLL_TIMEOUT_MS","PkToolRequestOAuthConnection_default","defineComponent","__emit","props","__props","emit","$t","useI18n","toolPart","computed","state","serverName","isRenderAck","isConnectedByOutput","isAwaitingConnection","mcpServerId","ref","hasConnected","isSigningIn","oauthError","isDone","canConnect","isConnectedNow","status","pollTimer","signInAttempt","signInWindow","stopWatching","settleConnected","connectedServerId","watchForConnection","attempt","popup","deadline","tick","connected","onMessage","event","reportedServerId","openAuthWindow","connection","err","onMounted","onUnmounted","_component_VvIcon","VvIcon","_component_VvButton","VvButtonLocalized","openBlock","createElementBlock","createElementVNode","createVNode","toDisplayString","unref","createBlock","createCommentVNode","Fragment"],"sources":["../../../../packages/components/src/chat/PkToolRequestOAuthConnection.vue","../../../../packages/components/src/chat/PkToolRequestOAuthConnection.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, onMounted, onUnmounted, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { isVoiceRenderAck } from 'models'\n    import { isMcpOAuthReport } from './mcpOAuthReport'\n\n    const props = defineProps<{\n        part: unknown\n        /**\n         * The backend the chat talks to, where the sign-in's callback page\n         * runs. Without it the card hears no report and relies on its poll.\n         */\n        backendUrl?: string\n        resolveConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; authorizeUrl: string }>\n        checkConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; connected: boolean }>\n    }>()\n\n    const emit = defineEmits<{\n        connected: [mcpServerId: string]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    /** How often the connection is re-read while the sign-in window is out. */\n    const POLL_INTERVAL_MS = 2000\n    /**\n     * How long we keep asking. The only end to a sign-in nobody finishes:\n     * `popup.closed` cannot be that signal, because the browser disowns the\n     * handle when the provider severs the opener (that is what\n     * `Cross-Origin-Opener-Policy` does), so it reads as closed from the first\n     * check of the very flow this watch exists for. Long enough for a password\n     * manager and a second factor.\n     */\n    const POLL_TIMEOUT_MS = 5 * 60 * 1000\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            toolCallId?: string\n            input?: { serverName: string }\n            output?: unknown\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n    const serverName = computed(() => toolPart.value.input?.serverName)\n\n    /**\n     * A card drawn during a CALL arrives already \"answered\": the turn could\n     * not wait for the connection, so the backend closed the tool with a note\n     * saying the card was drawn (see `isVoiceRenderAck`, same rule as the\n     * forms). That note is not a connection, and without this the card\n     * rendered its inert fallback: the caller was told to connect the account\n     * and given nothing to click (measured 2026-08-07).\n     */\n    const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n    /** The output this card wrote itself once the connection went through. */\n    const isConnectedByOutput = computed(\n        () =>\n            (toolPart.value.output as { connected?: unknown } | undefined)\n                ?.connected === true,\n    )\n\n    const isAwaitingConnection = computed(\n        () => state.value === 'input-available' || isRenderAck.value,\n    )\n\n    const mcpServerId = ref<string | null>(null)\n    /**\n     * Set once THIS card's sign-in went through, and never from a plain read of\n     * the connection: a card still asking is the turn saying it could not use\n     * that integration, and a token row can outlive its usefulness (a refresh\n     * that failed transiently keeps the row, so the turn sees no usable token\n     * while a status read still sees one). Trusting the read there would have\n     * left the card claiming success, with no button, on a turn still waiting.\n     * It doubles as the guard that resumes the turn exactly once, whichever\n     * channel got there first.\n     */\n    const hasConnected = ref(false)\n    /** A sign-in window we opened is still out there. */\n    const isSigningIn = ref(false)\n    const oauthError = ref<string | null>(null)\n\n    const isDone = computed(\n        () => hasConnected.value || isConnectedByOutput.value,\n    )\n    const canConnect = computed(\n        () => Boolean(serverName.value) && Boolean(props.resolveConnection),\n    )\n\n    /**\n     * Whether the server says this user has connected, asked without minting\n     * anything: no OAuth `state` is burned by looking.\n     */\n    async function isConnectedNow(): Promise<boolean> {\n        if (!serverName.value || !props.checkConnection) {\n            return false\n        }\n        try {\n            const status = await props.checkConnection(serverName.value)\n            mcpServerId.value = status.mcpServerId\n            return status.connected\n        } catch {\n            // Not knowing is not an error to show: the sign-in window is still\n            // out there and the next read may well answer.\n            return false\n        }\n    }\n\n    let pollTimer: ReturnType<typeof setTimeout> | undefined\n    /**\n     * Which sign-in a running tick belongs to. A tick suspended on its read\n     * outlives the attempt that scheduled it: without this it woke up inside\n     * the NEXT attempt, restarted its own chain over that one's timer and then\n     * stopped it on its own older deadline.\n     */\n    let signInAttempt = 0\n    /** The window this attempt opened, the only sender we accept a report from. */\n    let signInWindow: Window | null = null\n\n    function stopWatching() {\n        if (pollTimer !== undefined) {\n            clearTimeout(pollTimer)\n            pollTimer = undefined\n        }\n        signInAttempt += 1\n        signInWindow = null\n        isSigningIn.value = false\n    }\n\n    function settleConnected(connectedServerId: string) {\n        stopWatching()\n        if (hasConnected.value) {\n            return\n        }\n        hasConnected.value = true\n        mcpServerId.value = connectedServerId\n        oauthError.value = null\n        emit('connected', connectedServerId)\n    }\n\n    /**\n     * Watches the connection from THIS window while the sign-in window is away.\n     *\n     * The callback page reports through `window.opener`, and a provider that\n     * sends `Cross-Origin-Opener-Policy` anywhere in its redirect chain takes\n     * that opener away: the connection then succeeds with nobody listening, the\n     * card stays on its button and the suspended turn is never resumed\n     * (reported 2026-08-27). This channel never goes through that window, so it\n     * survives whatever the provider does to it. Chained rather than periodic:\n     * a read slower than the interval would otherwise overlap the next one.\n     */\n    function watchForConnection(popup: Window) {\n        stopWatching()\n        const attempt = signInAttempt\n        signInWindow = popup\n        isSigningIn.value = true\n        const deadline = Date.now() + POLL_TIMEOUT_MS\n        const tick = async () => {\n            if (attempt !== signInAttempt || Date.now() > deadline) {\n                if (attempt === signInAttempt) {\n                    stopWatching()\n                }\n                return\n            }\n            const connected = await isConnectedNow()\n            if (attempt !== signInAttempt) {\n                return\n            }\n            if (connected && mcpServerId.value) {\n                settleConnected(mcpServerId.value)\n                return\n            }\n            pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n        }\n        pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n    }\n\n    /**\n     * The callback page's own report, when the browser let it through: faster\n     * than the poll, and the only channel carrying the failure reason.\n     *\n     * Accepted only as {@link isMcpOAuthReport} says, and only while that\n     * sign-in is out: the listener stays up for as long as the card is on\n     * screen, and nothing else with a handle on this page may resume a turn by\n     * posting a message at it.\n     */\n    function onMessage(event: MessageEvent) {\n        if (\n            !isSigningIn.value ||\n            !isMcpOAuthReport(event, signInWindow, props.backendUrl)\n        ) {\n            return\n        }\n        const reportedServerId = event.data.mcpServerId as string | undefined\n        if (\n            reportedServerId &&\n            mcpServerId.value &&\n            reportedServerId !== mcpServerId.value\n        ) {\n            return\n        }\n        if (!event.data.success) {\n            // A failure carries no server id: the callback never got that far.\n            stopWatching()\n            oauthError.value = event.data.error ?? 'Unknown error'\n            return\n        }\n        const connectedServerId = reportedServerId ?? mcpServerId.value\n        if (connectedServerId) {\n            settleConnected(connectedServerId)\n        }\n    }\n\n    /**\n     * Opens the provider's sign-in, on an authorize URL minted NOW.\n     *\n     * The URL carries an OAuth `state` that lives ten minutes server-side.\n     * Minted when the card rendered, it was routinely expired by the time\n     * anyone clicked, and the callback then failed on a sign-in the user had\n     * just completed. The window is opened blank first, synchronously, or the\n     * popup blocker kills it while we wait for the URL.\n     */\n    async function openAuthWindow() {\n        if (\n            !serverName.value ||\n            !props.resolveConnection ||\n            isSigningIn.value\n        ) {\n            return\n        }\n        oauthError.value = null\n        const popup = window.open(\n            '',\n            'mcp_oauth',\n            'width=600,height=700,menubar=no,toolbar=no',\n        )\n        if (!popup) {\n            oauthError.value = $t('auth.popupBlocked')\n            return\n        }\n        watchForConnection(popup)\n        try {\n            const connection = await props.resolveConnection(serverName.value)\n            mcpServerId.value = connection.mcpServerId\n            popup.location.href = connection.authorizeUrl\n        } catch (err) {\n            stopWatching()\n            popup.close()\n            oauthError.value =\n                err instanceof Error ? err.message : 'Failed to resolve OAuth'\n        }\n    }\n\n    // For the card's whole life, not just between the click and the answer: a\n    // card that re-renders while the sign-in window is away used to lose the\n    // listener with it, and the completion landed on nobody.\n    onMounted(() => window.addEventListener('message', onMessage))\n    onUnmounted(() => {\n        window.removeEventListener('message', onMessage)\n        stopWatching()\n    })\n</script>\n\n<template>\n    <!-- The same frame and header as the other tool cards: this was the only\n         one drawing itself as a tinted box (DESIGN.md). -->\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface text-12\">\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=\"ri:link\" class=\"text-16 shrink-0\" />\n            <strong class=\"truncate\">{{ serverName }}</strong>\n        </div>\n        <div class=\"p-sm\">\n            <!-- Connected: just now, or by this card on an earlier visit -->\n            <template v-if=\"isDone\">\n                <div class=\"flex items-center gap-8\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n                    <strong class=\"font-medium text-word-1\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionSuccess', {\n                                name: serverName,\n                            })\n                        }}\n                    </strong>\n                </div>\n            </template>\n\n            <!-- Signing in: the window is out and we are watching for it -->\n            <template v-else-if=\"isSigningIn\">\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"loading-loop\" />\n                    <span class=\"text-10\">{{\n                        $t('messagePart.requestOAuthConnection')\n                    }}</span>\n                </div>\n            </template>\n\n            <!-- OAuth error -->\n            <template v-else-if=\"oauthError\">\n                <div class=\"flex flex-col gap-xs\">\n                    <div class=\"flex items-center gap-8 text-word-3\">\n                        <VvIcon name=\"ri:close-line\" class=\"text-danger\" />\n                        <strong class=\"text-10\">\n                            {{ oauthError }}\n                        </strong>\n                    </div>\n                    <VvButton\n                        v-if=\"canConnect\"\n                        modifiers=\"primary-small\"\n                        icon=\"ri:external-link-line\"\n                        :label=\"\n                            $t('messagePart.requestOAuthConnectionButton', {\n                                name: serverName,\n                            })\n                        \"\n                        @click=\"openAuthWindow\" />\n                </div>\n            </template>\n\n            <!-- Waiting on the user: show the connect button -->\n            <template v-else-if=\"isAwaitingConnection && canConnect\">\n                <div class=\"flex items-center gap-6 text-word-3 mb-xs\">\n                    <span>\n                        {{\n                            $t('messagePart.requestOAuthConnectionPrompt', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n                <VvButton\n                    modifiers=\"primary-small\"\n                    icon=\"ri:external-link-line\"\n                    :label=\"\n                        $t('messagePart.requestOAuthConnectionButton', {\n                            name: serverName,\n                        })\n                    \"\n                    @click=\"openAuthWindow\" />\n            </template>\n            <!-- Fallback for unknown state -->\n            <template v-else>\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"ri:link\" />\n                    <span class=\"text-10\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionInfo', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n            </template>\n        </div>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, onUnmounted, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { isVoiceRenderAck } from 'models'\n    import { isMcpOAuthReport } from './mcpOAuthReport'\n\n    const props = defineProps<{\n        part: unknown\n        /**\n         * The backend the chat talks to, where the sign-in's callback page\n         * runs. Without it the card hears no report and relies on its poll.\n         */\n        backendUrl?: string\n        resolveConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; authorizeUrl: string }>\n        checkConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; connected: boolean }>\n    }>()\n\n    const emit = defineEmits<{\n        connected: [mcpServerId: string]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    /** How often the connection is re-read while the sign-in window is out. */\n    const POLL_INTERVAL_MS = 2000\n    /**\n     * How long we keep asking. The only end to a sign-in nobody finishes:\n     * `popup.closed` cannot be that signal, because the browser disowns the\n     * handle when the provider severs the opener (that is what\n     * `Cross-Origin-Opener-Policy` does), so it reads as closed from the first\n     * check of the very flow this watch exists for. Long enough for a password\n     * manager and a second factor.\n     */\n    const POLL_TIMEOUT_MS = 5 * 60 * 1000\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            toolCallId?: string\n            input?: { serverName: string }\n            output?: unknown\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n    const serverName = computed(() => toolPart.value.input?.serverName)\n\n    /**\n     * A card drawn during a CALL arrives already \"answered\": the turn could\n     * not wait for the connection, so the backend closed the tool with a note\n     * saying the card was drawn (see `isVoiceRenderAck`, same rule as the\n     * forms). That note is not a connection, and without this the card\n     * rendered its inert fallback: the caller was told to connect the account\n     * and given nothing to click (measured 2026-08-07).\n     */\n    const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n    /** The output this card wrote itself once the connection went through. */\n    const isConnectedByOutput = computed(\n        () =>\n            (toolPart.value.output as { connected?: unknown } | undefined)\n                ?.connected === true,\n    )\n\n    const isAwaitingConnection = computed(\n        () => state.value === 'input-available' || isRenderAck.value,\n    )\n\n    const mcpServerId = ref<string | null>(null)\n    /**\n     * Set once THIS card's sign-in went through, and never from a plain read of\n     * the connection: a card still asking is the turn saying it could not use\n     * that integration, and a token row can outlive its usefulness (a refresh\n     * that failed transiently keeps the row, so the turn sees no usable token\n     * while a status read still sees one). Trusting the read there would have\n     * left the card claiming success, with no button, on a turn still waiting.\n     * It doubles as the guard that resumes the turn exactly once, whichever\n     * channel got there first.\n     */\n    const hasConnected = ref(false)\n    /** A sign-in window we opened is still out there. */\n    const isSigningIn = ref(false)\n    const oauthError = ref<string | null>(null)\n\n    const isDone = computed(\n        () => hasConnected.value || isConnectedByOutput.value,\n    )\n    const canConnect = computed(\n        () => Boolean(serverName.value) && Boolean(props.resolveConnection),\n    )\n\n    /**\n     * Whether the server says this user has connected, asked without minting\n     * anything: no OAuth `state` is burned by looking.\n     */\n    async function isConnectedNow(): Promise<boolean> {\n        if (!serverName.value || !props.checkConnection) {\n            return false\n        }\n        try {\n            const status = await props.checkConnection(serverName.value)\n            mcpServerId.value = status.mcpServerId\n            return status.connected\n        } catch {\n            // Not knowing is not an error to show: the sign-in window is still\n            // out there and the next read may well answer.\n            return false\n        }\n    }\n\n    let pollTimer: ReturnType<typeof setTimeout> | undefined\n    /**\n     * Which sign-in a running tick belongs to. A tick suspended on its read\n     * outlives the attempt that scheduled it: without this it woke up inside\n     * the NEXT attempt, restarted its own chain over that one's timer and then\n     * stopped it on its own older deadline.\n     */\n    let signInAttempt = 0\n    /** The window this attempt opened, the only sender we accept a report from. */\n    let signInWindow: Window | null = null\n\n    function stopWatching() {\n        if (pollTimer !== undefined) {\n            clearTimeout(pollTimer)\n            pollTimer = undefined\n        }\n        signInAttempt += 1\n        signInWindow = null\n        isSigningIn.value = false\n    }\n\n    function settleConnected(connectedServerId: string) {\n        stopWatching()\n        if (hasConnected.value) {\n            return\n        }\n        hasConnected.value = true\n        mcpServerId.value = connectedServerId\n        oauthError.value = null\n        emit('connected', connectedServerId)\n    }\n\n    /**\n     * Watches the connection from THIS window while the sign-in window is away.\n     *\n     * The callback page reports through `window.opener`, and a provider that\n     * sends `Cross-Origin-Opener-Policy` anywhere in its redirect chain takes\n     * that opener away: the connection then succeeds with nobody listening, the\n     * card stays on its button and the suspended turn is never resumed\n     * (reported 2026-08-27). This channel never goes through that window, so it\n     * survives whatever the provider does to it. Chained rather than periodic:\n     * a read slower than the interval would otherwise overlap the next one.\n     */\n    function watchForConnection(popup: Window) {\n        stopWatching()\n        const attempt = signInAttempt\n        signInWindow = popup\n        isSigningIn.value = true\n        const deadline = Date.now() + POLL_TIMEOUT_MS\n        const tick = async () => {\n            if (attempt !== signInAttempt || Date.now() > deadline) {\n                if (attempt === signInAttempt) {\n                    stopWatching()\n                }\n                return\n            }\n            const connected = await isConnectedNow()\n            if (attempt !== signInAttempt) {\n                return\n            }\n            if (connected && mcpServerId.value) {\n                settleConnected(mcpServerId.value)\n                return\n            }\n            pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n        }\n        pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n    }\n\n    /**\n     * The callback page's own report, when the browser let it through: faster\n     * than the poll, and the only channel carrying the failure reason.\n     *\n     * Accepted only as {@link isMcpOAuthReport} says, and only while that\n     * sign-in is out: the listener stays up for as long as the card is on\n     * screen, and nothing else with a handle on this page may resume a turn by\n     * posting a message at it.\n     */\n    function onMessage(event: MessageEvent) {\n        if (\n            !isSigningIn.value ||\n            !isMcpOAuthReport(event, signInWindow, props.backendUrl)\n        ) {\n            return\n        }\n        const reportedServerId = event.data.mcpServerId as string | undefined\n        if (\n            reportedServerId &&\n            mcpServerId.value &&\n            reportedServerId !== mcpServerId.value\n        ) {\n            return\n        }\n        if (!event.data.success) {\n            // A failure carries no server id: the callback never got that far.\n            stopWatching()\n            oauthError.value = event.data.error ?? 'Unknown error'\n            return\n        }\n        const connectedServerId = reportedServerId ?? mcpServerId.value\n        if (connectedServerId) {\n            settleConnected(connectedServerId)\n        }\n    }\n\n    /**\n     * Opens the provider's sign-in, on an authorize URL minted NOW.\n     *\n     * The URL carries an OAuth `state` that lives ten minutes server-side.\n     * Minted when the card rendered, it was routinely expired by the time\n     * anyone clicked, and the callback then failed on a sign-in the user had\n     * just completed. The window is opened blank first, synchronously, or the\n     * popup blocker kills it while we wait for the URL.\n     */\n    async function openAuthWindow() {\n        if (\n            !serverName.value ||\n            !props.resolveConnection ||\n            isSigningIn.value\n        ) {\n            return\n        }\n        oauthError.value = null\n        const popup = window.open(\n            '',\n            'mcp_oauth',\n            'width=600,height=700,menubar=no,toolbar=no',\n        )\n        if (!popup) {\n            oauthError.value = $t('auth.popupBlocked')\n            return\n        }\n        watchForConnection(popup)\n        try {\n            const connection = await props.resolveConnection(serverName.value)\n            mcpServerId.value = connection.mcpServerId\n            popup.location.href = connection.authorizeUrl\n        } catch (err) {\n            stopWatching()\n            popup.close()\n            oauthError.value =\n                err instanceof Error ? err.message : 'Failed to resolve OAuth'\n        }\n    }\n\n    // For the card's whole life, not just between the click and the answer: a\n    // card that re-renders while the sign-in window is away used to lose the\n    // listener with it, and the completion landed on nobody.\n    onMounted(() => window.addEventListener('message', onMessage))\n    onUnmounted(() => {\n        window.removeEventListener('message', onMessage)\n        stopWatching()\n    })\n</script>\n\n<template>\n    <!-- The same frame and header as the other tool cards: this was the only\n         one drawing itself as a tinted box (DESIGN.md). -->\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface text-12\">\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=\"ri:link\" class=\"text-16 shrink-0\" />\n            <strong class=\"truncate\">{{ serverName }}</strong>\n        </div>\n        <div class=\"p-sm\">\n            <!-- Connected: just now, or by this card on an earlier visit -->\n            <template v-if=\"isDone\">\n                <div class=\"flex items-center gap-8\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n                    <strong class=\"font-medium text-word-1\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionSuccess', {\n                                name: serverName,\n                            })\n                        }}\n                    </strong>\n                </div>\n            </template>\n\n            <!-- Signing in: the window is out and we are watching for it -->\n            <template v-else-if=\"isSigningIn\">\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"loading-loop\" />\n                    <span class=\"text-10\">{{\n                        $t('messagePart.requestOAuthConnection')\n                    }}</span>\n                </div>\n            </template>\n\n            <!-- OAuth error -->\n            <template v-else-if=\"oauthError\">\n                <div class=\"flex flex-col gap-xs\">\n                    <div class=\"flex items-center gap-8 text-word-3\">\n                        <VvIcon name=\"ri:close-line\" class=\"text-danger\" />\n                        <strong class=\"text-10\">\n                            {{ oauthError }}\n                        </strong>\n                    </div>\n                    <VvButton\n                        v-if=\"canConnect\"\n                        modifiers=\"primary-small\"\n                        icon=\"ri:external-link-line\"\n                        :label=\"\n                            $t('messagePart.requestOAuthConnectionButton', {\n                                name: serverName,\n                            })\n                        \"\n                        @click=\"openAuthWindow\" />\n                </div>\n            </template>\n\n            <!-- Waiting on the user: show the connect button -->\n            <template v-else-if=\"isAwaitingConnection && canConnect\">\n                <div class=\"flex items-center gap-6 text-word-3 mb-xs\">\n                    <span>\n                        {{\n                            $t('messagePart.requestOAuthConnectionPrompt', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n                <VvButton\n                    modifiers=\"primary-small\"\n                    icon=\"ri:external-link-line\"\n                    :label=\"\n                        $t('messagePart.requestOAuthConnectionButton', {\n                            name: serverName,\n                        })\n                    \"\n                    @click=\"openAuthWindow\" />\n            </template>\n            <!-- Fallback for unknown state -->\n            <template v-else>\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"ri:link\" />\n                    <span class=\"text-10\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionInfo', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n            </template>\n        </div>\n    </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PkToolRequestOAuthConnection-DosWR9I4.js","names":["__unplugin_components_0","__unplugin_components_1","_openBlock","_createElementBlock","_createElementVNode","_createVNode","_toDisplayString","_unref","_createBlock","_createCommentVNode","_Fragment","_sfc_main","isVoiceRenderAck","isMcpOAuthReport","_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","POLL_INTERVAL_MS","POLL_TIMEOUT_MS","PkToolRequestOAuthConnection_default","defineComponent","__emit","props","__props","emit","$t","useI18n","toolPart","computed","state","serverName","isRenderAck","isConnectedByOutput","isAwaitingConnection","mcpServerId","ref","hasConnected","isSigningIn","oauthError","isDone","canConnect","isConnectedNow","status","pollTimer","signInAttempt","signInWindow","stopWatching","settleConnected","connectedServerId","watchForConnection","attempt","popup","deadline","tick","connected","onMessage","event","reportedServerId","openAuthWindow","connection","err","onMounted","onUnmounted","_component_VvIcon","VvIcon","_component_VvButton","VvButtonLocalized","openBlock","createElementBlock","createElementVNode","createVNode","toDisplayString","unref","createBlock","createCommentVNode","Fragment"],"sources":["../../../../packages/components/src/chat/PkToolRequestOAuthConnection.vue","../../../../packages/components/src/chat/PkToolRequestOAuthConnection.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, onMounted, onUnmounted, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { isVoiceRenderAck } from 'models'\n    import { isMcpOAuthReport } from './mcpOAuthReport'\n\n    const props = defineProps<{\n        part: unknown\n        /**\n         * The backend the chat talks to, where the sign-in's callback page\n         * runs. Without it the card hears no report and relies on its poll.\n         */\n        backendUrl?: string\n        resolveConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; authorizeUrl: string }>\n        checkConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; connected: boolean }>\n    }>()\n\n    const emit = defineEmits<{\n        connected: [mcpServerId: string]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    /** How often the connection is re-read while the sign-in window is out. */\n    const POLL_INTERVAL_MS = 2000\n    /**\n     * How long we keep asking. The only end to a sign-in nobody finishes:\n     * `popup.closed` cannot be that signal, because the browser disowns the\n     * handle when the provider severs the opener (that is what\n     * `Cross-Origin-Opener-Policy` does), so it reads as closed from the first\n     * check of the very flow this watch exists for. Long enough for a password\n     * manager and a second factor.\n     */\n    const POLL_TIMEOUT_MS = 5 * 60 * 1000\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            toolCallId?: string\n            input?: { serverName: string }\n            output?: unknown\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n    const serverName = computed(() => toolPart.value.input?.serverName)\n\n    /**\n     * A card drawn during a CALL arrives already \"answered\": the turn could\n     * not wait for the connection, so the backend closed the tool with a note\n     * saying the card was drawn (see `isVoiceRenderAck`, same rule as the\n     * forms). That note is not a connection, and without this the card\n     * rendered its inert fallback: the caller was told to connect the account\n     * and given nothing to click (measured 2026-08-07).\n     */\n    const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n    /** The output this card wrote itself once the connection went through. */\n    const isConnectedByOutput = computed(\n        () =>\n            (toolPart.value.output as { connected?: unknown } | undefined)\n                ?.connected === true,\n    )\n\n    const isAwaitingConnection = computed(\n        () => state.value === 'input-available' || isRenderAck.value,\n    )\n\n    const mcpServerId = ref<string | null>(null)\n    /**\n     * Set once THIS card's sign-in went through, and never from a plain read of\n     * the connection: a card still asking is the turn saying it could not use\n     * that integration, and a token row can outlive its usefulness (a refresh\n     * that failed transiently keeps the row, so the turn sees no usable token\n     * while a status read still sees one). Trusting the read there would have\n     * left the card claiming success, with no button, on a turn still waiting.\n     * It doubles as the guard that resumes the turn exactly once, whichever\n     * channel got there first.\n     */\n    const hasConnected = ref(false)\n    /** A sign-in window we opened is still out there. */\n    const isSigningIn = ref(false)\n    const oauthError = ref<string | null>(null)\n\n    const isDone = computed(\n        () => hasConnected.value || isConnectedByOutput.value,\n    )\n    const canConnect = computed(\n        () => Boolean(serverName.value) && Boolean(props.resolveConnection),\n    )\n\n    /**\n     * Whether the server says this user has connected, asked without minting\n     * anything: no OAuth `state` is burned by looking.\n     */\n    async function isConnectedNow(): Promise<boolean> {\n        if (!serverName.value || !props.checkConnection) {\n            return false\n        }\n        try {\n            const status = await props.checkConnection(serverName.value)\n            mcpServerId.value = status.mcpServerId\n            return status.connected\n        } catch {\n            // Not knowing is not an error to show: the sign-in window is still\n            // out there and the next read may well answer.\n            return false\n        }\n    }\n\n    let pollTimer: ReturnType<typeof setTimeout> | undefined\n    /**\n     * Which sign-in a running tick belongs to. A tick suspended on its read\n     * outlives the attempt that scheduled it: without this it woke up inside\n     * the NEXT attempt, restarted its own chain over that one's timer and then\n     * stopped it on its own older deadline.\n     */\n    let signInAttempt = 0\n    /** The window this attempt opened, the only sender we accept a report from. */\n    let signInWindow: Window | null = null\n\n    function stopWatching() {\n        if (pollTimer !== undefined) {\n            clearTimeout(pollTimer)\n            pollTimer = undefined\n        }\n        signInAttempt += 1\n        signInWindow = null\n        isSigningIn.value = false\n    }\n\n    function settleConnected(connectedServerId: string) {\n        stopWatching()\n        if (hasConnected.value) {\n            return\n        }\n        hasConnected.value = true\n        mcpServerId.value = connectedServerId\n        oauthError.value = null\n        emit('connected', connectedServerId)\n    }\n\n    /**\n     * Watches the connection from THIS window while the sign-in window is away.\n     *\n     * The callback page reports through `window.opener`, and a provider that\n     * sends `Cross-Origin-Opener-Policy` anywhere in its redirect chain takes\n     * that opener away: the connection then succeeds with nobody listening, the\n     * card stays on its button and the suspended turn is never resumed\n     * (reported 2026-08-27). This channel never goes through that window, so it\n     * survives whatever the provider does to it. Chained rather than periodic:\n     * a read slower than the interval would otherwise overlap the next one.\n     */\n    function watchForConnection(popup: Window) {\n        stopWatching()\n        const attempt = signInAttempt\n        signInWindow = popup\n        isSigningIn.value = true\n        const deadline = Date.now() + POLL_TIMEOUT_MS\n        const tick = async () => {\n            if (attempt !== signInAttempt || Date.now() > deadline) {\n                if (attempt === signInAttempt) {\n                    stopWatching()\n                }\n                return\n            }\n            const connected = await isConnectedNow()\n            if (attempt !== signInAttempt) {\n                return\n            }\n            if (connected && mcpServerId.value) {\n                settleConnected(mcpServerId.value)\n                return\n            }\n            pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n        }\n        pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n    }\n\n    /**\n     * The callback page's own report, when the browser let it through: faster\n     * than the poll, and the only channel carrying the failure reason.\n     *\n     * Accepted only as {@link isMcpOAuthReport} says, and only while that\n     * sign-in is out: the listener stays up for as long as the card is on\n     * screen, and nothing else with a handle on this page may resume a turn by\n     * posting a message at it.\n     */\n    function onMessage(event: MessageEvent) {\n        if (\n            !isSigningIn.value ||\n            !isMcpOAuthReport(event, signInWindow, props.backendUrl)\n        ) {\n            return\n        }\n        const reportedServerId = event.data.mcpServerId as string | undefined\n        if (\n            reportedServerId &&\n            mcpServerId.value &&\n            reportedServerId !== mcpServerId.value\n        ) {\n            return\n        }\n        if (!event.data.success) {\n            // A failure carries no server id: the callback never got that far.\n            stopWatching()\n            oauthError.value = event.data.error ?? 'Unknown error'\n            return\n        }\n        const connectedServerId = reportedServerId ?? mcpServerId.value\n        if (connectedServerId) {\n            settleConnected(connectedServerId)\n        }\n    }\n\n    /**\n     * Opens the provider's sign-in, on an authorize URL minted NOW.\n     *\n     * The URL carries an OAuth `state` that lives ten minutes server-side.\n     * Minted when the card rendered, it was routinely expired by the time\n     * anyone clicked, and the callback then failed on a sign-in the user had\n     * just completed. The window is opened blank first, synchronously, or the\n     * popup blocker kills it while we wait for the URL.\n     */\n    async function openAuthWindow() {\n        if (\n            !serverName.value ||\n            !props.resolveConnection ||\n            isSigningIn.value\n        ) {\n            return\n        }\n        oauthError.value = null\n        const popup = window.open(\n            '',\n            'mcp_oauth',\n            'width=600,height=700,menubar=no,toolbar=no',\n        )\n        if (!popup) {\n            oauthError.value = $t('auth.popupBlocked')\n            return\n        }\n        watchForConnection(popup)\n        try {\n            const connection = await props.resolveConnection(serverName.value)\n            mcpServerId.value = connection.mcpServerId\n            popup.location.href = connection.authorizeUrl\n        } catch (err) {\n            stopWatching()\n            popup.close()\n            oauthError.value =\n                err instanceof Error ? err.message : 'Failed to resolve OAuth'\n        }\n    }\n\n    // For the card's whole life, not just between the click and the answer: a\n    // card that re-renders while the sign-in window is away used to lose the\n    // listener with it, and the completion landed on nobody.\n    onMounted(() => window.addEventListener('message', onMessage))\n    onUnmounted(() => {\n        window.removeEventListener('message', onMessage)\n        stopWatching()\n    })\n</script>\n\n<template>\n    <!-- The same frame and header as the other tool cards: this was the only\n         one drawing itself as a tinted box (DESIGN.md). -->\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface text-12\">\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=\"ri:link\" class=\"text-16 shrink-0\" />\n            <strong class=\"truncate\">{{ serverName }}</strong>\n        </div>\n        <div class=\"p-sm\">\n            <!-- Connected: just now, or by this card on an earlier visit -->\n            <template v-if=\"isDone\">\n                <div class=\"flex items-center gap-8\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n                    <strong class=\"font-medium text-word-1\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionSuccess', {\n                                name: serverName,\n                            })\n                        }}\n                    </strong>\n                </div>\n            </template>\n\n            <!-- Signing in: the window is out and we are watching for it -->\n            <template v-else-if=\"isSigningIn\">\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"loading-loop\" />\n                    <span class=\"text-10\">{{\n                        $t('messagePart.requestOAuthConnection')\n                    }}</span>\n                </div>\n            </template>\n\n            <!-- OAuth error -->\n            <template v-else-if=\"oauthError\">\n                <div class=\"flex flex-col gap-xs\">\n                    <div class=\"flex items-center gap-8 text-word-3\">\n                        <VvIcon name=\"ri:close-line\" class=\"text-danger\" />\n                        <strong class=\"text-10\">\n                            {{ oauthError }}\n                        </strong>\n                    </div>\n                    <VvButton\n                        v-if=\"canConnect\"\n                        modifiers=\"primary-small\"\n                        icon=\"ri:external-link-line\"\n                        :label=\"\n                            $t('messagePart.requestOAuthConnectionButton', {\n                                name: serverName,\n                            })\n                        \"\n                        @click=\"openAuthWindow\" />\n                </div>\n            </template>\n\n            <!-- Waiting on the user: show the connect button -->\n            <template v-else-if=\"isAwaitingConnection && canConnect\">\n                <div class=\"flex items-center gap-6 text-word-3 mb-xs\">\n                    <span>\n                        {{\n                            $t('messagePart.requestOAuthConnectionPrompt', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n                <VvButton\n                    modifiers=\"primary-small\"\n                    icon=\"ri:external-link-line\"\n                    :label=\"\n                        $t('messagePart.requestOAuthConnectionButton', {\n                            name: serverName,\n                        })\n                    \"\n                    @click=\"openAuthWindow\" />\n            </template>\n            <!-- Fallback for unknown state -->\n            <template v-else>\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"ri:link\" />\n                    <span class=\"text-10\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionInfo', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n            </template>\n        </div>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, onMounted, onUnmounted, ref } from 'vue'\n    import { useI18n } from 'vue-i18n'\n    import { isVoiceRenderAck } from 'models'\n    import { isMcpOAuthReport } from './mcpOAuthReport'\n\n    const props = defineProps<{\n        part: unknown\n        /**\n         * The backend the chat talks to, where the sign-in's callback page\n         * runs. Without it the card hears no report and relies on its poll.\n         */\n        backendUrl?: string\n        resolveConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; authorizeUrl: string }>\n        checkConnection?: (\n            serverName: string,\n        ) => Promise<{ mcpServerId: string; connected: boolean }>\n    }>()\n\n    const emit = defineEmits<{\n        connected: [mcpServerId: string]\n    }>()\n\n    const { t: $t } = useI18n({ useScope: 'global' })\n\n    /** How often the connection is re-read while the sign-in window is out. */\n    const POLL_INTERVAL_MS = 2000\n    /**\n     * How long we keep asking. The only end to a sign-in nobody finishes:\n     * `popup.closed` cannot be that signal, because the browser disowns the\n     * handle when the provider severs the opener (that is what\n     * `Cross-Origin-Opener-Policy` does), so it reads as closed from the first\n     * check of the very flow this watch exists for. Long enough for a password\n     * manager and a second factor.\n     */\n    const POLL_TIMEOUT_MS = 5 * 60 * 1000\n\n    const toolPart = computed(() => {\n        return props.part as {\n            state?: string\n            toolCallId?: string\n            input?: { serverName: string }\n            output?: unknown\n        }\n    })\n\n    const state = computed(() => toolPart.value.state ?? 'unknown')\n    const serverName = computed(() => toolPart.value.input?.serverName)\n\n    /**\n     * A card drawn during a CALL arrives already \"answered\": the turn could\n     * not wait for the connection, so the backend closed the tool with a note\n     * saying the card was drawn (see `isVoiceRenderAck`, same rule as the\n     * forms). That note is not a connection, and without this the card\n     * rendered its inert fallback: the caller was told to connect the account\n     * and given nothing to click (measured 2026-08-07).\n     */\n    const isRenderAck = computed(() => isVoiceRenderAck(toolPart.value.output))\n\n    /** The output this card wrote itself once the connection went through. */\n    const isConnectedByOutput = computed(\n        () =>\n            (toolPart.value.output as { connected?: unknown } | undefined)\n                ?.connected === true,\n    )\n\n    const isAwaitingConnection = computed(\n        () => state.value === 'input-available' || isRenderAck.value,\n    )\n\n    const mcpServerId = ref<string | null>(null)\n    /**\n     * Set once THIS card's sign-in went through, and never from a plain read of\n     * the connection: a card still asking is the turn saying it could not use\n     * that integration, and a token row can outlive its usefulness (a refresh\n     * that failed transiently keeps the row, so the turn sees no usable token\n     * while a status read still sees one). Trusting the read there would have\n     * left the card claiming success, with no button, on a turn still waiting.\n     * It doubles as the guard that resumes the turn exactly once, whichever\n     * channel got there first.\n     */\n    const hasConnected = ref(false)\n    /** A sign-in window we opened is still out there. */\n    const isSigningIn = ref(false)\n    const oauthError = ref<string | null>(null)\n\n    const isDone = computed(\n        () => hasConnected.value || isConnectedByOutput.value,\n    )\n    const canConnect = computed(\n        () => Boolean(serverName.value) && Boolean(props.resolveConnection),\n    )\n\n    /**\n     * Whether the server says this user has connected, asked without minting\n     * anything: no OAuth `state` is burned by looking.\n     */\n    async function isConnectedNow(): Promise<boolean> {\n        if (!serverName.value || !props.checkConnection) {\n            return false\n        }\n        try {\n            const status = await props.checkConnection(serverName.value)\n            mcpServerId.value = status.mcpServerId\n            return status.connected\n        } catch {\n            // Not knowing is not an error to show: the sign-in window is still\n            // out there and the next read may well answer.\n            return false\n        }\n    }\n\n    let pollTimer: ReturnType<typeof setTimeout> | undefined\n    /**\n     * Which sign-in a running tick belongs to. A tick suspended on its read\n     * outlives the attempt that scheduled it: without this it woke up inside\n     * the NEXT attempt, restarted its own chain over that one's timer and then\n     * stopped it on its own older deadline.\n     */\n    let signInAttempt = 0\n    /** The window this attempt opened, the only sender we accept a report from. */\n    let signInWindow: Window | null = null\n\n    function stopWatching() {\n        if (pollTimer !== undefined) {\n            clearTimeout(pollTimer)\n            pollTimer = undefined\n        }\n        signInAttempt += 1\n        signInWindow = null\n        isSigningIn.value = false\n    }\n\n    function settleConnected(connectedServerId: string) {\n        stopWatching()\n        if (hasConnected.value) {\n            return\n        }\n        hasConnected.value = true\n        mcpServerId.value = connectedServerId\n        oauthError.value = null\n        emit('connected', connectedServerId)\n    }\n\n    /**\n     * Watches the connection from THIS window while the sign-in window is away.\n     *\n     * The callback page reports through `window.opener`, and a provider that\n     * sends `Cross-Origin-Opener-Policy` anywhere in its redirect chain takes\n     * that opener away: the connection then succeeds with nobody listening, the\n     * card stays on its button and the suspended turn is never resumed\n     * (reported 2026-08-27). This channel never goes through that window, so it\n     * survives whatever the provider does to it. Chained rather than periodic:\n     * a read slower than the interval would otherwise overlap the next one.\n     */\n    function watchForConnection(popup: Window) {\n        stopWatching()\n        const attempt = signInAttempt\n        signInWindow = popup\n        isSigningIn.value = true\n        const deadline = Date.now() + POLL_TIMEOUT_MS\n        const tick = async () => {\n            if (attempt !== signInAttempt || Date.now() > deadline) {\n                if (attempt === signInAttempt) {\n                    stopWatching()\n                }\n                return\n            }\n            const connected = await isConnectedNow()\n            if (attempt !== signInAttempt) {\n                return\n            }\n            if (connected && mcpServerId.value) {\n                settleConnected(mcpServerId.value)\n                return\n            }\n            pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n        }\n        pollTimer = setTimeout(tick, POLL_INTERVAL_MS)\n    }\n\n    /**\n     * The callback page's own report, when the browser let it through: faster\n     * than the poll, and the only channel carrying the failure reason.\n     *\n     * Accepted only as {@link isMcpOAuthReport} says, and only while that\n     * sign-in is out: the listener stays up for as long as the card is on\n     * screen, and nothing else with a handle on this page may resume a turn by\n     * posting a message at it.\n     */\n    function onMessage(event: MessageEvent) {\n        if (\n            !isSigningIn.value ||\n            !isMcpOAuthReport(event, signInWindow, props.backendUrl)\n        ) {\n            return\n        }\n        const reportedServerId = event.data.mcpServerId as string | undefined\n        if (\n            reportedServerId &&\n            mcpServerId.value &&\n            reportedServerId !== mcpServerId.value\n        ) {\n            return\n        }\n        if (!event.data.success) {\n            // A failure carries no server id: the callback never got that far.\n            stopWatching()\n            oauthError.value = event.data.error ?? 'Unknown error'\n            return\n        }\n        const connectedServerId = reportedServerId ?? mcpServerId.value\n        if (connectedServerId) {\n            settleConnected(connectedServerId)\n        }\n    }\n\n    /**\n     * Opens the provider's sign-in, on an authorize URL minted NOW.\n     *\n     * The URL carries an OAuth `state` that lives ten minutes server-side.\n     * Minted when the card rendered, it was routinely expired by the time\n     * anyone clicked, and the callback then failed on a sign-in the user had\n     * just completed. The window is opened blank first, synchronously, or the\n     * popup blocker kills it while we wait for the URL.\n     */\n    async function openAuthWindow() {\n        if (\n            !serverName.value ||\n            !props.resolveConnection ||\n            isSigningIn.value\n        ) {\n            return\n        }\n        oauthError.value = null\n        const popup = window.open(\n            '',\n            'mcp_oauth',\n            'width=600,height=700,menubar=no,toolbar=no',\n        )\n        if (!popup) {\n            oauthError.value = $t('auth.popupBlocked')\n            return\n        }\n        watchForConnection(popup)\n        try {\n            const connection = await props.resolveConnection(serverName.value)\n            mcpServerId.value = connection.mcpServerId\n            popup.location.href = connection.authorizeUrl\n        } catch (err) {\n            stopWatching()\n            popup.close()\n            oauthError.value =\n                err instanceof Error ? err.message : 'Failed to resolve OAuth'\n        }\n    }\n\n    // For the card's whole life, not just between the click and the answer: a\n    // card that re-renders while the sign-in window is away used to lose the\n    // listener with it, and the completion landed on nobody.\n    onMounted(() => window.addEventListener('message', onMessage))\n    onUnmounted(() => {\n        window.removeEventListener('message', onMessage)\n        stopWatching()\n    })\n</script>\n\n<template>\n    <!-- The same frame and header as the other tool cards: this was the only\n         one drawing itself as a tinted box (DESIGN.md). -->\n    <div\n        class=\"border border-surface-3 rounded-xl w-full overflow-hidden bg-surface text-12\">\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=\"ri:link\" class=\"text-16 shrink-0\" />\n            <strong class=\"truncate\">{{ serverName }}</strong>\n        </div>\n        <div class=\"p-sm\">\n            <!-- Connected: just now, or by this card on an earlier visit -->\n            <template v-if=\"isDone\">\n                <div class=\"flex items-center gap-8\">\n                    <VvIcon name=\"ri:check-line\" class=\"text-16 text-success\" />\n                    <strong class=\"font-medium text-word-1\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionSuccess', {\n                                name: serverName,\n                            })\n                        }}\n                    </strong>\n                </div>\n            </template>\n\n            <!-- Signing in: the window is out and we are watching for it -->\n            <template v-else-if=\"isSigningIn\">\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"loading-loop\" />\n                    <span class=\"text-10\">{{\n                        $t('messagePart.requestOAuthConnection')\n                    }}</span>\n                </div>\n            </template>\n\n            <!-- OAuth error -->\n            <template v-else-if=\"oauthError\">\n                <div class=\"flex flex-col gap-xs\">\n                    <div class=\"flex items-center gap-8 text-word-3\">\n                        <VvIcon name=\"ri:close-line\" class=\"text-danger\" />\n                        <strong class=\"text-10\">\n                            {{ oauthError }}\n                        </strong>\n                    </div>\n                    <VvButton\n                        v-if=\"canConnect\"\n                        modifiers=\"primary-small\"\n                        icon=\"ri:external-link-line\"\n                        :label=\"\n                            $t('messagePart.requestOAuthConnectionButton', {\n                                name: serverName,\n                            })\n                        \"\n                        @click=\"openAuthWindow\" />\n                </div>\n            </template>\n\n            <!-- Waiting on the user: show the connect button -->\n            <template v-else-if=\"isAwaitingConnection && canConnect\">\n                <div class=\"flex items-center gap-6 text-word-3 mb-xs\">\n                    <span>\n                        {{\n                            $t('messagePart.requestOAuthConnectionPrompt', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n                <VvButton\n                    modifiers=\"primary-small\"\n                    icon=\"ri:external-link-line\"\n                    :label=\"\n                        $t('messagePart.requestOAuthConnectionButton', {\n                            name: serverName,\n                        })\n                    \"\n                    @click=\"openAuthWindow\" />\n            </template>\n            <!-- Fallback for unknown state -->\n            <template v-else>\n                <div class=\"flex items-center gap-8 text-word-3\">\n                    <VvIcon name=\"ri:link\" />\n                    <span class=\"text-10\">\n                        {{\n                            $t('messagePart.requestOAuthConnectionInfo', {\n                                name: serverName,\n                            })\n                        }}\n                    </span>\n                </div>\n            </template>\n        </div>\n    </div>\n</template>\n"],"mappings":"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"}

package/dist-vue/_chunks/{PkToolShowArtifact-BIvl5I2I.js → PkToolShowArtifact-BVofKJ7b.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 import { t } from "./VvButtonLocalized-BuzLsXp3.js";
-import { t as n } from "./PkStreamingMarkdown-JEkbkY5k.js";
+import { t as n } from "./PkStreamingMarkdown-CsHzdW69.js";
 import { computed as r, createBlock as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, ref as f, toDisplayString as p, unref as m, watch as h } from "vue";
 import { useClipboard as g } from "@vueuse/core";
 //#region ../../packages/components/src/chat/PkCode.vue?vue&type=script&setup=true&lang.ts
@@ -89,4 +89,4 @@ var _ = ["innerHTML"], v = /* @__PURE__ */ l({
 //#endregion
 export { T as n, v as r, E as t };
 
-//# sourceMappingURL=PkToolShowArtifact-BIvl5I2I.js.map
+//# sourceMappingURL=PkToolShowArtifact-BVofKJ7b.js.map

package/dist-vue/_chunks/{PkToolShowArtifact-BIvl5I2I.js.map → PkToolShowArtifact-BVofKJ7b.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PkToolShowArtifact-BIvl5I2I.js","names":["$attrs","_hoisted_1","_openBlock","_createElementBlock","_normalizeClass","_createTextVNode","_createElementVNode","_sfc_main","$t","__unplugin_components_0","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","_unref","_createBlock","PkCode","PkStreamingMarkdown","_normalizeClass","_sfc_main","__exportAll","PkStreamingMarkdown_default","_hoisted_1$1","PkCode_default","defineComponent","props","__props","highlightedHtml","ref","hasCode","computed","highlight","hljs","result","watch","openBlock","createElementBlock","normalizeClass","_ctx","_cache","createTextVNode","createElementVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","PkToolShowArtifact_vue_vue_type_script_setup_true_lang_default","useClipboard","toolPart","artifactTypeLabel","languageLabel","isCodeType","isMarkdownType","codeLanguage","_component_VvButton","VvButtonLocalized","toDisplayString","createVNode","unref","copied","copy","createBlock","PkToolShowArtifact_exports","PkToolShowArtifact_default"],"sources":["../../../../packages/components/src/chat/PkCode.vue","../../../../packages/components/src/chat/PkCode.vue","../../../../packages/components/src/chat/PkToolShowArtifact.vue","../../../../packages/components/src/chat/PkToolShowArtifact.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue'\n\n    defineOptions({\n        inheritAttrs: false,\n    })\n\n    const props = defineProps<{\n        code: unknown\n        language: string\n        line?: boolean\n    }>()\n\n    const highlightedHtml = ref('')\n\n    const hasCode = computed(() => {\n        if (typeof props.code === 'string') {\n            return props.code\n        }\n        return JSON.stringify(props.code, null, 2)\n    })\n\n    async function highlight() {\n        const hljs = (await import('highlight.js/lib/common')).default\n        try {\n            const result = props.language\n                ? hljs.highlight(hasCode.value, { language: props.language })\n                : hljs.highlightAuto(hasCode.value)\n            highlightedHtml.value = result.value\n        } catch {\n            highlightedHtml.value = hasCode.value\n                .replace(/&/g, '&amp;')\n                .replace(/</g, '&lt;')\n                .replace(/>/g, '&gt;')\n        }\n    }\n\n    watch(hasCode, highlight, { immediate: true })\n</script>\n\n<template>\n    <pre\n        :class=\"\n            $attrs.class\n                ? $attrs.class\n                : 'font-mono leading-snug text-smaller bg-surface-1'\n        \">\n        <code :class=\"['hljs', line ? 'whitespace-pre-line' : 'whitespace-pre', language]\" v-html=\"highlightedHtml\"></code>\n    </pre>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue'\n\n    defineOptions({\n        inheritAttrs: false,\n    })\n\n    const props = defineProps<{\n        code: unknown\n        language: string\n        line?: boolean\n    }>()\n\n    const highlightedHtml = ref('')\n\n    const hasCode = computed(() => {\n        if (typeof props.code === 'string') {\n            return props.code\n        }\n        return JSON.stringify(props.code, null, 2)\n    })\n\n    async function highlight() {\n        const hljs = (await import('highlight.js/lib/common')).default\n        try {\n            const result = props.language\n                ? hljs.highlight(hasCode.value, { language: props.language })\n                : hljs.highlightAuto(hasCode.value)\n            highlightedHtml.value = result.value\n        } catch {\n            highlightedHtml.value = hasCode.value\n                .replace(/&/g, '&amp;')\n                .replace(/</g, '&lt;')\n                .replace(/>/g, '&gt;')\n        }\n    }\n\n    watch(hasCode, highlight, { immediate: true })\n</script>\n\n<template>\n    <pre\n        :class=\"\n            $attrs.class\n                ? $attrs.class\n                : 'font-mono leading-snug text-smaller bg-surface-1'\n        \">\n        <code :class=\"['hljs', line ? 'whitespace-pre-line' : 'whitespace-pre', language]\" v-html=\"highlightedHtml\"></code>\n    </pre>\n</template>\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import PkCode from './PkCode.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    const { copy, copied } = useClipboard()\n\n    const props = defineProps<{\n        part: unknown\n    }>()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                title: string\n                content: string\n                artifactType: string\n                language?: string\n            }\n        }\n        return part\n    })\n\n    const artifactTypeLabel = computed(() => {\n        const labels: Record<string, string> = {\n            code: 'Code',\n            document: 'Document',\n            markdown: 'Markdown',\n            json: 'JSON',\n            xml: 'XML',\n            csv: 'CSV',\n            html: 'HTML',\n            yaml: 'YAML',\n            sql: 'SQL',\n            text: 'Text',\n        }\n        if (!toolPart.value.input?.artifactType) {\n            return 'Artifact'\n        }\n        return labels[toolPart.value.input.artifactType] || 'Artifact'\n    })\n\n    const languageLabel = computed(() => {\n        if (!toolPart.value.input?.language) {\n            return ''\n        }\n        return ` (${toolPart.value.input.language})`\n    })\n\n    const isCodeType = computed(() => {\n        return (\n            toolPart.value.input?.artifactType === 'code' ||\n            toolPart.value.input?.artifactType === 'json' ||\n            toolPart.value.input?.artifactType === 'xml' ||\n            toolPart.value.input?.artifactType === 'yaml' ||\n            toolPart.value.input?.artifactType === 'html' ||\n            toolPart.value.input?.artifactType === 'sql'\n        )\n    })\n\n    const isMarkdownType = computed(() => {\n        return toolPart.value.input?.artifactType === 'markdown'\n    })\n\n    const codeLanguage = computed(() => {\n        if (toolPart.value.input?.language) {\n            return toolPart.value.input.language\n        }\n        // Map artifact types to highlight.js languages\n        const languageMap: Record<string, string> = {\n            json: 'json',\n            xml: 'xml',\n            yaml: 'yaml',\n            html: 'html',\n            sql: 'sql',\n        }\n        if (!toolPart.value.input?.artifactType) {\n            return 'plaintext'\n        }\n        return languageMap[toolPart.value.input.artifactType] || 'plaintext'\n    })\n</script>\n\n<template>\n    <div class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 font-bold bg-surface-1 text-12 border-b border-surface-3 text-word-3 flex justify-between items-center\">\n            <div class=\"flex flex-col items-start gap-4\">\n                <span>{{ toolPart?.input?.title }}</span>\n                <span class=\"text-10 opacity-60 font-normal\">\n                    {{ artifactTypeLabel }}{{ languageLabel }}\n                </span>\n            </div>\n            <VvButton\n                :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                modifiers=\"action-quiet-small\"\n                :title=\"$t('action.copy')\"\n                class=\"shrink-0\"\n                @click=\"copy(toolPart?.input?.content || '')\" />\n        </div>\n        <div class=\"px-sm py-10 bg-surface\">\n            <PkCode\n                v-if=\"isCodeType\"\n                :code=\"toolPart?.input?.content\"\n                :language=\"codeLanguage\" />\n            <PkStreamingMarkdown\n                v-else-if=\"isMarkdownType\"\n                :markdown=\"toolPart?.input?.content\"\n                class=\"wysiwyg text-word-2\" />\n            <pre\n                v-else\n                class=\"text-word-2 whitespace-pre-wrap break-words\"\n                :class=\"{\n                    italic:\n                        toolPart?.input?.artifactType === 'document' ||\n                        toolPart?.input?.artifactType === 'text',\n                }\"\n                >{{ toolPart?.input?.content }}</pre>\n        </div>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import PkCode from './PkCode.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    const { copy, copied } = useClipboard()\n\n    const props = defineProps<{\n        part: unknown\n    }>()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                title: string\n                content: string\n                artifactType: string\n                language?: string\n            }\n        }\n        return part\n    })\n\n    const artifactTypeLabel = computed(() => {\n        const labels: Record<string, string> = {\n            code: 'Code',\n            document: 'Document',\n            markdown: 'Markdown',\n            json: 'JSON',\n            xml: 'XML',\n            csv: 'CSV',\n            html: 'HTML',\n            yaml: 'YAML',\n            sql: 'SQL',\n            text: 'Text',\n        }\n        if (!toolPart.value.input?.artifactType) {\n            return 'Artifact'\n        }\n        return labels[toolPart.value.input.artifactType] || 'Artifact'\n    })\n\n    const languageLabel = computed(() => {\n        if (!toolPart.value.input?.language) {\n            return ''\n        }\n        return ` (${toolPart.value.input.language})`\n    })\n\n    const isCodeType = computed(() => {\n        return (\n            toolPart.value.input?.artifactType === 'code' ||\n            toolPart.value.input?.artifactType === 'json' ||\n            toolPart.value.input?.artifactType === 'xml' ||\n            toolPart.value.input?.artifactType === 'yaml' ||\n            toolPart.value.input?.artifactType === 'html' ||\n            toolPart.value.input?.artifactType === 'sql'\n        )\n    })\n\n    const isMarkdownType = computed(() => {\n        return toolPart.value.input?.artifactType === 'markdown'\n    })\n\n    const codeLanguage = computed(() => {\n        if (toolPart.value.input?.language) {\n            return toolPart.value.input.language\n        }\n        // Map artifact types to highlight.js languages\n        const languageMap: Record<string, string> = {\n            json: 'json',\n            xml: 'xml',\n            yaml: 'yaml',\n            html: 'html',\n            sql: 'sql',\n        }\n        if (!toolPart.value.input?.artifactType) {\n            return 'plaintext'\n        }\n        return languageMap[toolPart.value.input.artifactType] || 'plaintext'\n    })\n</script>\n\n<template>\n    <div class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 font-bold bg-surface-1 text-12 border-b border-surface-3 text-word-3 flex justify-between items-center\">\n            <div class=\"flex flex-col items-start gap-4\">\n                <span>{{ toolPart?.input?.title }}</span>\n                <span class=\"text-10 opacity-60 font-normal\">\n                    {{ artifactTypeLabel }}{{ languageLabel }}\n                </span>\n            </div>\n            <VvButton\n                :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                modifiers=\"action-quiet-small\"\n                :title=\"$t('action.copy')\"\n                class=\"shrink-0\"\n                @click=\"copy(toolPart?.input?.content || '')\" />\n        </div>\n        <div class=\"px-sm py-10 bg-surface\">\n            <PkCode\n                v-if=\"isCodeType\"\n                :code=\"toolPart?.input?.content\"\n                :language=\"codeLanguage\" />\n            <PkStreamingMarkdown\n                v-else-if=\"isMarkdownType\"\n                :markdown=\"toolPart?.input?.content\"\n                class=\"wysiwyg text-word-2\" />\n            <pre\n                v-else\n                class=\"text-word-2 whitespace-pre-wrap break-words\"\n                :class=\"{\n                    italic:\n                        toolPart?.input?.artifactType === 'document' ||\n                        toolPart?.input?.artifactType === 'text',\n                }\"\n                >{{ toolPart?.input?.content }}</pre>\n        </div>\n    </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PkToolShowArtifact-BVofKJ7b.js","names":["$attrs","_hoisted_1","_openBlock","_createElementBlock","_normalizeClass","_createTextVNode","_createElementVNode","_sfc_main","$t","__unplugin_components_0","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_createVNode","_unref","_createBlock","PkCode","PkStreamingMarkdown","_normalizeClass","_sfc_main","__exportAll","PkStreamingMarkdown_default","_hoisted_1$1","PkCode_default","defineComponent","props","__props","highlightedHtml","ref","hasCode","computed","highlight","hljs","result","watch","openBlock","createElementBlock","normalizeClass","_ctx","_cache","createTextVNode","createElementVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","PkToolShowArtifact_vue_vue_type_script_setup_true_lang_default","useClipboard","toolPart","artifactTypeLabel","languageLabel","isCodeType","isMarkdownType","codeLanguage","_component_VvButton","VvButtonLocalized","toDisplayString","createVNode","unref","copied","copy","createBlock","PkToolShowArtifact_exports","PkToolShowArtifact_default"],"sources":["../../../../packages/components/src/chat/PkCode.vue","../../../../packages/components/src/chat/PkCode.vue","../../../../packages/components/src/chat/PkToolShowArtifact.vue","../../../../packages/components/src/chat/PkToolShowArtifact.vue"],"sourcesContent":["<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue'\n\n    defineOptions({\n        inheritAttrs: false,\n    })\n\n    const props = defineProps<{\n        code: unknown\n        language: string\n        line?: boolean\n    }>()\n\n    const highlightedHtml = ref('')\n\n    const hasCode = computed(() => {\n        if (typeof props.code === 'string') {\n            return props.code\n        }\n        return JSON.stringify(props.code, null, 2)\n    })\n\n    async function highlight() {\n        const hljs = (await import('highlight.js/lib/common')).default\n        try {\n            const result = props.language\n                ? hljs.highlight(hasCode.value, { language: props.language })\n                : hljs.highlightAuto(hasCode.value)\n            highlightedHtml.value = result.value\n        } catch {\n            highlightedHtml.value = hasCode.value\n                .replace(/&/g, '&amp;')\n                .replace(/</g, '&lt;')\n                .replace(/>/g, '&gt;')\n        }\n    }\n\n    watch(hasCode, highlight, { immediate: true })\n</script>\n\n<template>\n    <pre\n        :class=\"\n            $attrs.class\n                ? $attrs.class\n                : 'font-mono leading-snug text-smaller bg-surface-1'\n        \">\n        <code :class=\"['hljs', line ? 'whitespace-pre-line' : 'whitespace-pre', language]\" v-html=\"highlightedHtml\"></code>\n    </pre>\n</template>\n","<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue'\n\n    defineOptions({\n        inheritAttrs: false,\n    })\n\n    const props = defineProps<{\n        code: unknown\n        language: string\n        line?: boolean\n    }>()\n\n    const highlightedHtml = ref('')\n\n    const hasCode = computed(() => {\n        if (typeof props.code === 'string') {\n            return props.code\n        }\n        return JSON.stringify(props.code, null, 2)\n    })\n\n    async function highlight() {\n        const hljs = (await import('highlight.js/lib/common')).default\n        try {\n            const result = props.language\n                ? hljs.highlight(hasCode.value, { language: props.language })\n                : hljs.highlightAuto(hasCode.value)\n            highlightedHtml.value = result.value\n        } catch {\n            highlightedHtml.value = hasCode.value\n                .replace(/&/g, '&amp;')\n                .replace(/</g, '&lt;')\n                .replace(/>/g, '&gt;')\n        }\n    }\n\n    watch(hasCode, highlight, { immediate: true })\n</script>\n\n<template>\n    <pre\n        :class=\"\n            $attrs.class\n                ? $attrs.class\n                : 'font-mono leading-snug text-smaller bg-surface-1'\n        \">\n        <code :class=\"['hljs', line ? 'whitespace-pre-line' : 'whitespace-pre', language]\" v-html=\"highlightedHtml\"></code>\n    </pre>\n</template>\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import PkCode from './PkCode.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    const { copy, copied } = useClipboard()\n\n    const props = defineProps<{\n        part: unknown\n    }>()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                title: string\n                content: string\n                artifactType: string\n                language?: string\n            }\n        }\n        return part\n    })\n\n    const artifactTypeLabel = computed(() => {\n        const labels: Record<string, string> = {\n            code: 'Code',\n            document: 'Document',\n            markdown: 'Markdown',\n            json: 'JSON',\n            xml: 'XML',\n            csv: 'CSV',\n            html: 'HTML',\n            yaml: 'YAML',\n            sql: 'SQL',\n            text: 'Text',\n        }\n        if (!toolPart.value.input?.artifactType) {\n            return 'Artifact'\n        }\n        return labels[toolPart.value.input.artifactType] || 'Artifact'\n    })\n\n    const languageLabel = computed(() => {\n        if (!toolPart.value.input?.language) {\n            return ''\n        }\n        return ` (${toolPart.value.input.language})`\n    })\n\n    const isCodeType = computed(() => {\n        return (\n            toolPart.value.input?.artifactType === 'code' ||\n            toolPart.value.input?.artifactType === 'json' ||\n            toolPart.value.input?.artifactType === 'xml' ||\n            toolPart.value.input?.artifactType === 'yaml' ||\n            toolPart.value.input?.artifactType === 'html' ||\n            toolPart.value.input?.artifactType === 'sql'\n        )\n    })\n\n    const isMarkdownType = computed(() => {\n        return toolPart.value.input?.artifactType === 'markdown'\n    })\n\n    const codeLanguage = computed(() => {\n        if (toolPart.value.input?.language) {\n            return toolPart.value.input.language\n        }\n        // Map artifact types to highlight.js languages\n        const languageMap: Record<string, string> = {\n            json: 'json',\n            xml: 'xml',\n            yaml: 'yaml',\n            html: 'html',\n            sql: 'sql',\n        }\n        if (!toolPart.value.input?.artifactType) {\n            return 'plaintext'\n        }\n        return languageMap[toolPart.value.input.artifactType] || 'plaintext'\n    })\n</script>\n\n<template>\n    <div class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 font-bold bg-surface-1 text-12 border-b border-surface-3 text-word-3 flex justify-between items-center\">\n            <div class=\"flex flex-col items-start gap-4\">\n                <span>{{ toolPart?.input?.title }}</span>\n                <span class=\"text-10 opacity-60 font-normal\">\n                    {{ artifactTypeLabel }}{{ languageLabel }}\n                </span>\n            </div>\n            <VvButton\n                :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                modifiers=\"action-quiet-small\"\n                :title=\"$t('action.copy')\"\n                class=\"shrink-0\"\n                @click=\"copy(toolPart?.input?.content || '')\" />\n        </div>\n        <div class=\"px-sm py-10 bg-surface\">\n            <PkCode\n                v-if=\"isCodeType\"\n                :code=\"toolPart?.input?.content\"\n                :language=\"codeLanguage\" />\n            <PkStreamingMarkdown\n                v-else-if=\"isMarkdownType\"\n                :markdown=\"toolPart?.input?.content\"\n                class=\"wysiwyg text-word-2\" />\n            <pre\n                v-else\n                class=\"text-word-2 whitespace-pre-wrap break-words\"\n                :class=\"{\n                    italic:\n                        toolPart?.input?.artifactType === 'document' ||\n                        toolPart?.input?.artifactType === 'text',\n                }\"\n                >{{ toolPart?.input?.content }}</pre>\n        </div>\n    </div>\n</template>\n","<script setup lang=\"ts\">\n    import { computed } from 'vue'\n    import { useClipboard } from '@vueuse/core'\n    import PkCode from './PkCode.vue'\n    import PkStreamingMarkdown from './PkStreamingMarkdown.vue'\n\n    const { copy, copied } = useClipboard()\n\n    const props = defineProps<{\n        part: unknown\n    }>()\n\n    const toolPart = computed(() => {\n        const part = props.part as {\n            input?: {\n                title: string\n                content: string\n                artifactType: string\n                language?: string\n            }\n        }\n        return part\n    })\n\n    const artifactTypeLabel = computed(() => {\n        const labels: Record<string, string> = {\n            code: 'Code',\n            document: 'Document',\n            markdown: 'Markdown',\n            json: 'JSON',\n            xml: 'XML',\n            csv: 'CSV',\n            html: 'HTML',\n            yaml: 'YAML',\n            sql: 'SQL',\n            text: 'Text',\n        }\n        if (!toolPart.value.input?.artifactType) {\n            return 'Artifact'\n        }\n        return labels[toolPart.value.input.artifactType] || 'Artifact'\n    })\n\n    const languageLabel = computed(() => {\n        if (!toolPart.value.input?.language) {\n            return ''\n        }\n        return ` (${toolPart.value.input.language})`\n    })\n\n    const isCodeType = computed(() => {\n        return (\n            toolPart.value.input?.artifactType === 'code' ||\n            toolPart.value.input?.artifactType === 'json' ||\n            toolPart.value.input?.artifactType === 'xml' ||\n            toolPart.value.input?.artifactType === 'yaml' ||\n            toolPart.value.input?.artifactType === 'html' ||\n            toolPart.value.input?.artifactType === 'sql'\n        )\n    })\n\n    const isMarkdownType = computed(() => {\n        return toolPart.value.input?.artifactType === 'markdown'\n    })\n\n    const codeLanguage = computed(() => {\n        if (toolPart.value.input?.language) {\n            return toolPart.value.input.language\n        }\n        // Map artifact types to highlight.js languages\n        const languageMap: Record<string, string> = {\n            json: 'json',\n            xml: 'xml',\n            yaml: 'yaml',\n            html: 'html',\n            sql: 'sql',\n        }\n        if (!toolPart.value.input?.artifactType) {\n            return 'plaintext'\n        }\n        return languageMap[toolPart.value.input.artifactType] || 'plaintext'\n    })\n</script>\n\n<template>\n    <div class=\"border border-surface-3 rounded-xl w-full overflow-hidden\">\n        <div\n            class=\"px-sm py-6 font-bold bg-surface-1 text-12 border-b border-surface-3 text-word-3 flex justify-between items-center\">\n            <div class=\"flex flex-col items-start gap-4\">\n                <span>{{ toolPart?.input?.title }}</span>\n                <span class=\"text-10 opacity-60 font-normal\">\n                    {{ artifactTypeLabel }}{{ languageLabel }}\n                </span>\n            </div>\n            <VvButton\n                :icon=\"copied ? 'ri:check-line' : 'ri:file-copy-line'\"\n                :label=\"copied ? $t('action.copied') : $t('action.copy')\"\n                modifiers=\"action-quiet-small\"\n                :title=\"$t('action.copy')\"\n                class=\"shrink-0\"\n                @click=\"copy(toolPart?.input?.content || '')\" />\n        </div>\n        <div class=\"px-sm py-10 bg-surface\">\n            <PkCode\n                v-if=\"isCodeType\"\n                :code=\"toolPart?.input?.content\"\n                :language=\"codeLanguage\" />\n            <PkStreamingMarkdown\n                v-else-if=\"isMarkdownType\"\n                :markdown=\"toolPart?.input?.content\"\n                class=\"wysiwyg text-word-2\" />\n            <pre\n                v-else\n                class=\"text-word-2 whitespace-pre-wrap break-words\"\n                :class=\"{\n                    italic:\n                        toolPart?.input?.artifactType === 'document' ||\n                        toolPart?.input?.artifactType === 'text',\n                }\"\n                >{{ toolPart?.input?.content }}</pre>\n        </div>\n    </div>\n</template>\n"],"mappings":"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"}

package/dist-vue/_chunks/{PkToolShowCalendarEvent-ve1I0xaV.js → PkToolShowCalendarEvent-u9O_Sl3-.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 import { t } from "./VvButtonLocalized-BuzLsXp3.js";
-import "./src-DCfvejyT.js";
+import "./src-DpkuiHam.js";
 import { n } from "./url-validation-9DstIfq2.js";
 import { VvButtonGroup as r, VvDropdown as i, VvDropdownAction as a, VvIcon as o } from "@volverjs/ui-vue/components";
 import { computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, normalizeProps as h, openBlock as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
@@ -146,4 +146,4 @@ var S = {
 //#endregion
 export { R as n, z as t };
 
-//# sourceMappingURL=PkToolShowCalendarEvent-ve1I0xaV.js.map
+//# sourceMappingURL=PkToolShowCalendarEvent-u9O_Sl3-.js.map