vue-stream-markdown 0.2.2 → 0.3.0

package/README.md

@@ -72,7 +72,7 @@ This project also uses and benefits from:
 - [Shiki](https://shiki.style/) - Beautiful syntax highlighting
 - [Mermaid](https://mermaid.js.org/) - Diagramming and charting tool
 - [KaTeX](https://katex.org/) - Fast math typesetting library for the web
-- [Remend](https://github.com/vercel/streamdown/tree/main/packages/remend) - Intelligently parses and styles incomplete Markdown blocks
+- [Remend](https://github.com/vercel/streamdown/tree/main/packages/remend) - This project implements similar functionality inspired by remend for intelligently parsing and completing incomplete Markdown blocks.
 
 ### Code Sources
 - [markstream-vue](https://github.com/Simon-He95/markstream-vue) - The original inspiration for learning AST-based custom markdown rendering, and the source of the animation implementation used in this project
@@ -96,6 +96,10 @@ If you encounter any problems, please:
 
 Please provide the shareable link, markdown content, and AST syntax tree when creating an issue. This will help me reproduce and diagnose the problem more effectively.
 
+## Contributors
+
+[![Contributors](https://contrib.rocks/image?repo=jinghaihan/vue-stream-markdown)](https://github.com/jinghaihan/vue-stream-markdown/graphs/contributors)
+
 ## License
 
 [MIT](./LICENSE) License © [jinghaihan](https://github.com/jinghaihan)

package/dist/{blockquote-CVFraiyL.js → blockquote-DTo6zg12.js}

@@ -1,5 +1,5 @@
-import "./composables-BMXMKLLj.js";
-import { t as node_list_default } from "./node-list-D6zJX92N.js";
+import "./composables-BvaSMf02.js";
+import { t as node_list_default } from "./node-list-CWy--Gin.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/blockquote.vue?vue&type=script&setup=true&lang.ts
@@ -55,6 +55,10 @@ var blockquote_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/{break-CzrM3nW0.js → break-DoDPjOA0.js}

@@ -53,6 +53,10 @@ var break_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/button-1EHxh8s2.js

@@ -0,0 +1,6 @@
+import "./composables-BvaSMf02.js";
+import "./tooltip-CWv9skVu.js";
+import { t as button_default } from "./button-B7H9jKmU.js";
+import "./icon-BJa4ovUe.js";
+
+export { button_default as default };

package/dist/{button-CWSGNZmd.js → button-B7H9jKmU.js}

@@ -1,5 +1,5 @@
-import { t as tooltip_default } from "./tooltip-C4RiUZwy.js";
-import { t as icon_default } from "./icon-CpKYt1dR.js";
+import { t as tooltip_default } from "./tooltip-CWv9skVu.js";
+import { t as icon_default } from "./icon-BJa4ovUe.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
 import { createReusableTemplate } from "@vueuse/core";
 

package/dist/{code-DwwmPoup.js → code-DC7KVCvB.js}

@@ -1,11 +1,11 @@
-import "./previewers-Cpx1Wqu8.js";
-import { r as useShiki } from "./composables-BMXMKLLj.js";
-import "./tooltip-C4RiUZwy.js";
-import "./button-CWSGNZmd.js";
-import "./icon-CpKYt1dR.js";
-import "./modal-DHGxvCt5.js";
-import { t as code_block_default } from "./code-block-XfHjZodV.js";
-import "./segmented-DDQZGL7l.js";
+import "./previewers-DB2HHDGb.js";
+import { r as useShiki } from "./composables-BvaSMf02.js";
+import "./tooltip-CWv9skVu.js";
+import "./button-B7H9jKmU.js";
+import "./icon-BJa4ovUe.js";
+import "./modal-Bhe0iSs6.js";
+import { t as code_block_default } from "./code-block-DPC1FZT3.js";
+import "./segmented-B-kjIOkd.js";
 import { computed, createBlock, createCommentVNode, defineAsyncComponent, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, resolveDynamicComponent, withCtx } from "vue";
 
 //#region src/components/renderers/code/index.vue?vue&type=script&setup=true&lang.ts
@@ -60,6 +60,10 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false
@@ -75,8 +79,8 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const languageClass = computed(() => `language-${props.node.lang}`);
 		const { installed: hasShiki } = useShiki();
 		const components = {
-			vanilla: defineAsyncComponent(() => import("./vanilla-DfHiHWnr.js")),
-			shiki: defineAsyncComponent(() => import("./shiki-DDfRFzy0.js"))
+			vanilla: defineAsyncComponent(() => import("./vanilla-DV7fYrnj.js")),
+			shiki: defineAsyncComponent(() => import("./shiki-DAu2_FTG.js"))
 		};
 		const component = computed(() => {
 			if (hasShiki.value) return components.shiki;

package/dist/{code-block-XfHjZodV.js → code-block-DPC1FZT3.js}

@@ -1,9 +1,9 @@
-import { t as CODE_PREVIEWERS } from "./previewers-Cpx1Wqu8.js";
-import { G as useControls, K as useContext, V as save, b as useI18n, d as LANGUAGE_ALIAS, f as LANGUAGE_EXTENSIONS, m as useMermaid, p as LANGUAGE_ICONS, q as useCodeOptions } from "./composables-BMXMKLLj.js";
-import { t as button_default } from "./button-CWSGNZmd.js";
-import { t as modal_default } from "./modal-DHGxvCt5.js";
-import { t as segmented_default } from "./segmented-DDQZGL7l.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, unref, useModel, vShow, watch, withCtx, withDirectives } from "vue";
+import { t as CODE_PREVIEWERS } from "./previewers-DB2HHDGb.js";
+import { G as useControls, K as useContext, V as save, b as useI18n, d as LANGUAGE_ALIAS, f as LANGUAGE_EXTENSIONS, m as useMermaid, p as LANGUAGE_ICONS, q as useCodeOptions } from "./composables-BvaSMf02.js";
+import { t as button_default } from "./button-B7H9jKmU.js";
+import { t as modal_default } from "./modal-Bhe0iSs6.js";
+import { t as segmented_default } from "./segmented-B-kjIOkd.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, unref, useModel, vShow, watch, withCtx, withDirectives } from "vue";
 import { createReusableTemplate, useClipboard } from "@vueuse/core";
 
 //#region src/components/code-block/actions.vue?vue&type=script&setup=true&lang.ts
@@ -179,6 +179,10 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false
@@ -186,13 +190,13 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	},
 	setup(__props) {
 		const props = __props;
-		const CodeNode = defineAsyncComponent(() => import("./code-DwwmPoup.js"));
+		const CodeNode = defineAsyncComponent(() => import("./code-DC7KVCvB.js"));
 		const { controls, previewers, codeOptions } = toRefs(props);
 		const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
 		const { t } = useI18n();
-		const { isControlEnabled, resolveControls } = useControls({ controls });
+		const { isControlEnabled, getControlValue, resolveControls } = useControls({ controls });
 		const { installed: hasMermaid } = useMermaid();
-		const { onCopied } = useContext();
+		const { beforeDownload, onCopied } = useContext();
 		const { copy, copied } = useClipboard({ legacy: true });
 		const { saveMermaid } = useMermaid();
 		const collapsed = ref(false);
@@ -265,6 +269,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			if (data && typeof data !== "boolean") return data;
 			return previewer;
 		});
+		const inlineInteractive = computed(() => getControlValue("mermaid.inlineInteractive") ?? true);
 		function normalizeHeight(height) {
 			return typeof height === "number" ? `${height}px` : height;
 		}
@@ -322,14 +327,22 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				icon: "download",
 				options: downloadOptions.value.length > 0 ? downloadOptions.value : void 0,
 				visible: () => showDownload.value && !!LANGUAGE_EXTENSIONS[language.value],
-				onClick: (_event, item) => {
+				onClick: async (_event, item) => {
 					if (props.node.loading) return;
 					if (!item || item.value === "code") {
 						const extension = LANGUAGE_EXTENSIONS[language.value];
-						save(`file.${extension}`, props.node.value, "text/plain");
+						if (await beforeDownload({
+							type: "code",
+							content: props.node.value
+						})) save(`file.${extension}`, props.node.value, "text/plain");
 						return;
 					}
-					if ((item === null || item === void 0 ? void 0 : item.value) === "svg" || (item === null || item === void 0 ? void 0 : item.value) === "png") saveMermaid(item === null || item === void 0 ? void 0 : item.value, props.node.value);
+					if ((item === null || item === void 0 ? void 0 : item.value) === "svg" || (item === null || item === void 0 ? void 0 : item.value) === "png") {
+						if (await beforeDownload({
+							type: "mermaid",
+							content: props.node.value
+						})) saveMermaid(item === null || item === void 0 ? void 0 : item.value, props.node.value);
+					}
 				}
 			},
 			{
@@ -394,7 +407,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				withDirectives(createElementVNode("main", {
 					"data-stream-markdown": "code-block-content",
 					style: normalizeStyle({ maxHeight: maxHeight.value })
-				}, [previewable.value ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(PreviewComponent.value), normalizeProps(mergeProps({ key: 0 }, props)), null, 16)), [[vShow, mode.value === "preview"]]) : createCommentVNode("v-if", true), withDirectives(createElementVNode("main", null, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, mode.value === "source"]])], 4), [[vShow, !collapsed.value]]),
+				}, [previewable.value ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(PreviewComponent.value), mergeProps({ key: 0 }, props, { interactive: inlineInteractive.value }), null, 16, ["interactive"])), [[vShow, mode.value === "preview"]]) : createCommentVNode("v-if", true), withDirectives(createElementVNode("main", null, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, mode.value === "source"]])], 4), [[vShow, !collapsed.value]]),
 				createVNode(modal_default, {
 					open: fullscreen.value,
 					"onUpdate:open": _cache[10] || (_cache[10] = ($event) => fullscreen.value = $event),

package/dist/code-block-DYrPMONb.js

@@ -0,0 +1,10 @@
+import "./previewers-DB2HHDGb.js";
+import "./composables-BvaSMf02.js";
+import "./tooltip-CWv9skVu.js";
+import "./button-B7H9jKmU.js";
+import "./icon-BJa4ovUe.js";
+import "./modal-Bhe0iSs6.js";
+import { t as code_block_default } from "./code-block-DPC1FZT3.js";
+import "./segmented-B-kjIOkd.js";
+
+export { code_block_default as default };

package/dist/{composables-BMXMKLLj.js → composables-BvaSMf02.js}

@@ -38,6 +38,8 @@ function useContext() {
 	const context = injectContext();
 	const mode = computed(() => unref(context.mode) ?? "streaming");
 	const icons = computed(() => unref(context.icons) ?? {});
+	const uiOptions = computed(() => unref(context.uiOptions) ?? {});
+	const hideTooltip = computed(() => uiOptions.value.hideTooltip ?? false);
 	const isDark = computed(() => unref(context.isDark) ?? false);
 	const enableAnimate = computed(() => unref(context.enableAnimate));
 	const parsedNodes = computed(() => unref(context.parsedNodes) ?? []);
@@ -55,6 +57,7 @@ function useContext() {
 		provideContext,
 		injectContext,
 		mode,
+		hideTooltip,
 		icons,
 		isDark,
 		enableAnimate,
@@ -62,6 +65,12 @@ function useContext() {
 		get getContainer() {
 			return context.getContainer || (() => void 0);
 		},
+		get getOverlayContainer() {
+			return context.getOverlayContainer || (() => null);
+		},
+		get beforeDownload() {
+			return context.beforeDownload || (() => true);
+		},
 		get onCopied() {
 			return context.onCopied || (() => {});
 		}
@@ -479,6 +488,7 @@ function tableDataToMarkdown(data) {
 //#endregion
 //#region src/composables/use-floating.ts
 function useFloating(options) {
+	const hideTooltip = computed(() => unref(options.hideTooltip) ?? false);
 	const trigger = computed(() => unref(options.trigger) ?? "hover");
 	const placement = computed(() => unref(options.placement) ?? "top");
 	const delay = computed(() => unref(options.delay) ?? [100, 100]);
@@ -555,6 +565,7 @@ function useFloating(options) {
 		updatePosition();
 	}
 	function onMouseEnter() {
+		if (hideTooltip.value) return;
 		if (trigger.value === "hover") show();
 	}
 	function onMouseLeave() {
@@ -1939,7 +1950,11 @@ function useTailwindV3Theme(options) {
 		id: "stream-markdown-tailwind-v3-theme",
 		immediate: false
 	});
-	const styleScope = computed(() => unref(options.styleScope) || ".stream-markdown");
+	const styleScope = computed(() => {
+		const scope = unref(options.styleScope);
+		if (!scope) return [".stream-markdown", ".stream-markdown-overlay"];
+		return Array.isArray(scope) ? scope : [scope];
+	});
 	const element = computed(() => {
 		return toValue(options.element) || (isClient() ? document.body : void 0);
 	});
@@ -1953,7 +1968,7 @@ function useTailwindV3Theme(options) {
 			if (value && !reg.test(value)) cssVariables.push(`  ${name}: hsl(${value});`);
 		}
 		if (cssVariables.length > 0) {
-			css.value = `${styleScope.value} {\n${cssVariables.join("\n")}\n}`;
+			css.value = styleScope.value.map((scope) => `${scope} {\n${cssVariables.join("\n")}\n}`).join("\n");
 			load();
 		} else {
 			css.value = "";

package/dist/{delete-BRwEUU72.js → delete-xkkM7TML.js}

@@ -1,5 +1,5 @@
-import "./composables-BMXMKLLj.js";
-import { t as node_list_default } from "./node-list-D6zJX92N.js";
+import "./composables-BvaSMf02.js";
+import { t as node_list_default } from "./node-list-CWy--Gin.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/delete.vue?vue&type=script&setup=true&lang.ts
@@ -55,6 +55,10 @@ var delete_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/dropdown-Cv_yW4GS.js

@@ -0,0 +1,6 @@
+import "./composables-BvaSMf02.js";
+import "./tooltip-CWv9skVu.js";
+import { n as dropdown_default } from "./button-B7H9jKmU.js";
+import "./icon-BJa4ovUe.js";
+
+export { dropdown_default as default };

package/dist/{emphasis-DblyP-Vp.js → emphasis-BmM30dZi.js}

@@ -1,5 +1,5 @@
-import "./composables-BMXMKLLj.js";
-import { t as node_list_default } from "./node-list-D6zJX92N.js";
+import "./composables-BvaSMf02.js";
+import { t as node_list_default } from "./node-list-CWy--Gin.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/emphasis.vue?vue&type=script&setup=true&lang.ts
@@ -55,6 +55,10 @@ var emphasis_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/error-component-1U-JNS6o.js

@@ -0,0 +1,5 @@
+import "./composables-BvaSMf02.js";
+import "./icon-BJa4ovUe.js";
+import { t as error_component_default } from "./error-component-DFBWdaYB.js";
+
+export { error_component_default as default };

package/dist/{error-component-CckClFee.js → error-component-DFBWdaYB.js}

@@ -1,5 +1,5 @@
-import { K as useContext, b as useI18n } from "./composables-BMXMKLLj.js";
-import { t as icon_default } from "./icon-CpKYt1dR.js";
+import { K as useContext, b as useI18n } from "./composables-BvaSMf02.js";
+import { t as icon_default } from "./icon-BJa4ovUe.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, openBlock, renderSlot, resolveDynamicComponent, toDisplayString } from "vue";
 
 //#region src/components/error-component.vue?vue&type=script&setup=true&lang.ts

package/dist/{footnote-definition-BvZNKSLa.js → footnote-definition-6cTbdg-J.js}

@@ -1,8 +1,8 @@
-import { K as useContext, b as useI18n } from "./composables-BMXMKLLj.js";
-import { t as node_list_default } from "./node-list-D6zJX92N.js";
-import "./tooltip-C4RiUZwy.js";
-import { t as button_default } from "./button-CWSGNZmd.js";
-import "./icon-CpKYt1dR.js";
+import { K as useContext, b as useI18n } from "./composables-BvaSMf02.js";
+import { t as node_list_default } from "./node-list-CWy--Gin.js";
+import "./tooltip-CWv9skVu.js";
+import { t as button_default } from "./button-B7H9jKmU.js";
+import "./icon-BJa4ovUe.js";
 import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, toDisplayString, unref } from "vue";
 
 //#region src/components/renderers/footnote-definition.vue?vue&type=script&setup=true&lang.ts
@@ -59,6 +59,10 @@ var footnote_definition_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/{footnote-reference-DvAxMjRZ.js → footnote-reference-CxJUg8wT.js}

@@ -1,4 +1,4 @@
-import { K as useContext } from "./composables-BMXMKLLj.js";
+import { K as useContext } from "./composables-BvaSMf02.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, openBlock, toDisplayString } from "vue";
 
 //#region src/components/renderers/footnote-reference.vue?vue&type=script&setup=true&lang.ts
@@ -54,6 +54,10 @@ var footnote_reference_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/{heading-g87txbB0.js → heading-DQ4lofbm.js}

@@ -1,5 +1,5 @@
-import "./composables-BMXMKLLj.js";
-import { t as node_list_default } from "./node-list-D6zJX92N.js";
+import "./composables-BvaSMf02.js";
+import { t as node_list_default } from "./node-list-CWy--Gin.js";
 import { computed, createBlock, createVNode, defineComponent, mergeProps, openBlock, resolveDynamicComponent, withCtx } from "vue";
 
 //#region src/components/renderers/heading.vue?vue&type=script&setup=true&lang.ts
@@ -54,6 +54,10 @@ var heading_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/{html-BG83dEZJ.js → html-Be_6ezK6.js}

@@ -52,6 +52,10 @@ var html_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/{html-D7bGx0Cz.js → html-DfTs9nEm.js}

@@ -53,6 +53,10 @@ var html_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false

package/dist/{icon-CpKYt1dR.js → icon-BJa4ovUe.js}

@@ -1,4 +1,4 @@
-import { K as useContext } from "./composables-BMXMKLLj.js";
+import { K as useContext } from "./composables-BvaSMf02.js";
 import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
 
 //#region src/components/icon.vue?vue&type=script&setup=true&lang.ts

package/dist/icon-CvIgAOPh.js

@@ -0,0 +1,4 @@
+import "./composables-BvaSMf02.js";
+import { t as icon_default } from "./icon-BJa4ovUe.js";
+
+export { icon_default as default };

package/dist/{image-Dwe5A7RP.js → image-DXu2WF2r.js}

@@ -1,8 +1,8 @@
-import { G as useControls, H as saveImage, K as useContext, b as useI18n, h as useMediumZoom } from "./composables-BMXMKLLj.js";
+import { G as useControls, K as useContext, b as useI18n, h as useMediumZoom } from "./composables-BvaSMf02.js";
 import { n as treeFlatFilter } from "./dist-CYkm26BF.js";
-import { t as button_default } from "./button-CWSGNZmd.js";
-import { t as modal_default } from "./modal-DHGxvCt5.js";
-import { t as zoom_container_default } from "./zoom-container-CqZQ4X6w.js";
+import { t as button_default } from "./button-B7H9jKmU.js";
+import { t as modal_default } from "./modal-Bhe0iSs6.js";
+import { t as zoom_container_default } from "./zoom-container-DbeN8U39.js";
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, renderList, toRefs, unref, watch, withCtx } from "vue";
 import { useCycleList } from "@vueuse/core";
 
@@ -54,6 +54,10 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		nodeProps: {
 			type: Object,
 			required: true
+		},
+		handleDownload: {
+			type: Function,
+			required: false
 		}
 	},
 	emits: ["load", "error"],
@@ -72,7 +76,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			initialValue: props.src,
 			fallbackIndex: 0
 		});
-		const enableDownload = computed(() => isControlEnabled("image.download"));
+		const enableDownload = computed(() => isControlEnabled("image.download") && !!props.handleDownload);
 		const enableCarousel = computed(() => isControlEnabled("image.carousel"));
 		const enableFlip = computed(() => isControlEnabled("image.flip"));
 		const enableRotate = computed(() => isControlEnabled("image.rotate"));
@@ -105,7 +109,10 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				key: "download",
 				icon: "download",
 				name: t("button.download"),
-				onClick: download,
+				onClick: () => {
+					var _props$handleDownload;
+					return (_props$handleDownload = props.handleDownload) === null || _props$handleDownload === void 0 ? void 0 : _props$handleDownload.call(props, imageSrc.value);
+				},
 				visible: () => !!imageSrc.value && enableDownload.value
 			},
 			{
@@ -170,10 +177,6 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			if (isAnimating.value) return;
 			zoomOut();
 		}
-		function download() {
-			if (!imageSrc.value) return;
-			saveImage(imageSrc.value, props.alt);
-		}
 		function flipHorizontal() {
 			scaleX.value *= -1;
 		}

package/dist/image-Dm5xIWs7.js

@@ -0,0 +1,9 @@
+import "./composables-BvaSMf02.js";
+import "./tooltip-CWv9skVu.js";
+import "./button-B7H9jKmU.js";
+import "./icon-BJa4ovUe.js";
+import "./modal-Bhe0iSs6.js";
+import "./zoom-container-DbeN8U39.js";
+import { t as image_default } from "./image-DXu2WF2r.js";
+
+export { image_default as default };

package/dist/{image-CR28eDok.js → image-e0E51Nc3.js}

@@ -1,11 +1,11 @@
-import { G as useControls, H as saveImage, b as useI18n, i as useSanitizers } from "./composables-BMXMKLLj.js";
-import "./tooltip-C4RiUZwy.js";
-import { t as button_default } from "./button-CWSGNZmd.js";
-import "./icon-CpKYt1dR.js";
-import "./modal-DHGxvCt5.js";
-import { t as error_component_default } from "./error-component-CckClFee.js";
-import "./zoom-container-CqZQ4X6w.js";
-import { t as image_default$1 } from "./image-Dwe5A7RP.js";
+import { G as useControls, H as saveImage, K as useContext, b as useI18n, i as useSanitizers } from "./composables-BvaSMf02.js";
+import "./tooltip-CWv9skVu.js";
+import { t as button_default } from "./button-B7H9jKmU.js";
+import "./icon-BJa4ovUe.js";
+import "./modal-Bhe0iSs6.js";
+import { t as error_component_default } from "./error-component-DFBWdaYB.js";
+import "./zoom-container-DbeN8U39.js";
+import { t as image_default$1 } from "./image-DXu2WF2r.js";
 import { t as spin_default } from "./spin-DzERwGWy.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, resolveDynamicComponent, toDisplayString, toRefs, unref, withCtx } from "vue";
 
@@ -66,6 +66,10 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: false
 		},
+		uiOptions: {
+			type: Object,
+			required: false
+		},
 		isDark: {
 			type: Boolean,
 			required: false
@@ -75,6 +79,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const props = __props;
 		const { t } = useI18n();
 		const { controls, hardenOptions } = toRefs(props);
+		const { beforeDownload } = useContext();
 		const { isControlEnabled } = useControls({ controls });
 		const maskRef = ref();
 		const loadError = ref(false);
@@ -114,9 +119,12 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			}
 			loadError.value = true;
 		}
-		async function handleDownload() {
-			if (!imageSrc.value) return;
-			saveImage(imageSrc.value, alt.value);
+		async function handleDownload(url = imageSrc.value) {
+			if (!url) return;
+			if (await beforeDownload({
+				type: "image",
+				url
+			})) saveImage(url, alt.value);
 		}
 		function handleMouseEnter() {
 			if (maskRef.value) maskRef.value.style.opacity = 1;
@@ -145,7 +153,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					"icon-width": 16,
 					"icon-height": 16,
 					"button-style": { backgroundColor: "color-mix(in oklab, var(--background) 90%, transparent)" },
-					onClick: handleDownload
+					onClick: _cache[0] || (_cache[0] = () => handleDownload(imageSrc.value))
 				}, null, 8, ["name"])) : createCommentVNode("v-if", true)], 512)) : createCommentVNode("v-if", true),
 				(isLoading.value || !imageLoaded.value) && !unref(isHardenUrl) ? (openBlock(), createBlock(spin_default, { key: 1 })) : createCommentVNode("v-if", true),
 				!isLoading.value && !unref(isHardenUrl) && typeof unref(transformedUrl) === "string" ? (openBlock(), createBlock(image_default$1, {
@@ -157,6 +165,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					controls: unref(controls),
 					"transform-harden-url": unref(transformHardenUrl),
 					"node-props": props,
+					"handle-download": handleDownload,
 					onLoad: handleLoaded,
 					onError: handleError
 				}, null, 8, [