vue-stream-markdown 0.0.0-alpha.0 → 0.1.1

package/README.md

@@ -5,40 +5,38 @@
 
 A markdown renderer specially optimized for streaming scenarios, inspired by [streamdown](https://streamdown.ai/). Designed to achieve smoother streaming rendering through syntax inference and highly customizable rendering elements.
 
+```sh
+pnpm add vue-stream-markdown
+```
+
 <br>
 
 <p align="center">
-<a href="#">📚 Documentation</a> |
-<a href="#">🤹‍♂️ Playground</a>
+<a href="https://docs-vue-stream-markdown.netlify.app/">📚 Documentation</a> |
+<a href="https://play-vue-stream-markdown.netlify.app/">🤹‍♂️ Playground</a>
 </p>
 
 <br>
 
-```sh
-pnpm add vue-stream-markdown
-```
-
 <p align='center'>
 <img src='./assets/screenshot.png' />
 </p>
 
 ## Features
 
-- 🚀 **Streaming-optimized rendering** - Incomplete node completion with loading states for images, tables, and code blocks to prevent visual jitter
-- ⚡ **Incremental rendering** - Leverages [Shiki](https://shiki.style/)'s `codeToTokens` API for token-level updates, reducing DOM recreation overhead
-- 📊 **Progressive Mermaid rendering** - Throttled, streaming-friendly diagram rendering with loading states
-- 📐 **Beautiful LaTeX equations** - Render beautiful LaTeX equations with KaTeX support
-- 🎯 **Interactive controls** - Copy and download buttons for images, tables, and code blocks
-- 🎨 **Fully customizable** - Replace any AST node with your own Vue components
-- ✨ **Beautiful built-in typography** - No atomic CSS required (Tailwind/UnoCSS), self-contained styles
-- 🎨 **Theme-aware scoped styles** - Scoped styles under `.stream-markdown` with semantic `data-stream-markdown` attributes, following [shadcn/ui](https://ui.shadcn.com/) design system
-- 🌏 **CJK language support** - Following `streamdown` design, handles emphasis with ideographic punctuation
-- 🛡️ **Content hardening & security** - Built-in protection against malicious Markdown with URL validation and protocol blocking
-- 🔒 **TypeScript type safety** - Comprehensive type definitions with full IntelliSense support
+- **Streaming-optimized rendering** - Incomplete node completion with loading states for images, tables, and code blocks to prevent visual jitter
+- **Incremental rendering** - Leverages [Shiki](https://shiki.style/)'s `codeToTokens` API for token-level updates, reducing DOM recreation overhead
+- **Progressive Mermaid rendering** - Throttled, streaming-friendly diagram rendering with loading states
+- **Streaming LaTeX rendering** - Progressive math equation rendering with KaTeX support
+- **Interactive controls** - Copy and download buttons for images, tables, and code blocks
+- **Fully customizable** - Replace any AST node with your own Vue components
+- **Theme-aware scoped styles** - Scoped styles under `.stream-markdown` with semantic `data-stream-markdown` attributes, following [shadcn/ui](https://ui.shadcn.com/) design system
+- **Beautiful built-in typography** - No atomic CSS required (Tailwind/UnoCSS), self-contained styles
+- **Content hardening & security** - Built-in protection against malicious Markdown with URL validation and protocol blocking
 
 ## Usage
 
-For detailed usage and API documentation, please refer to the [Documentation](#).
+For detailed usage and API documentation, please refer to the [Documentation](https://docs-vue-stream-markdown.netlify.app/).
 
 ```vue
 <script setup lang="ts">
@@ -57,7 +55,7 @@ const content = ref('# Hello World\n\nThis is a markdown content.')
 
 ## Credit
 
-This project is inspired by [streamdown](https://streamdown.ai/) and even uses substantial source code from it.
+This project is inspired by [streamdown](https://streamdown.ai/) and even uses some source code from it.
 
 This project also uses and benefits from:
 
@@ -65,6 +63,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
 
 ## Troubleshooting
 

package/dist/button-Bz0s_F3s.js

@@ -0,0 +1,5 @@
+import "./composables-BwAY_BDJ.js";
+import "./tooltip-CA6Kp7Ek.js";
+import { t as button_default } from "./button-dU2iYZBS.js";
+
+export { button_default as default };

package/dist/{button-D8xx1WIP.js → button-dU2iYZBS.js}

@@ -1,4 +1,4 @@
-import { t as tooltip_default } from "./tooltip-RiXixMIt.js";
+import { t as tooltip_default } from "./tooltip-CA6Kp7Ek.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, h, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, withCtx } from "vue";
 
 //#region src/components/dropdown.vue?vue&type=script&setup=true&lang.ts

package/dist/{code-CP6mPwkq.js → code-BfJ58lYO.js}

@@ -1,10 +1,10 @@
-import "./previewers-Drlf7IQF.js";
-import { r as useShiki } from "./composables-qhB1h_ed.js";
-import "./tooltip-RiXixMIt.js";
-import "./button-D8xx1WIP.js";
+import "./previewers-CoU4RlpQ.js";
+import { i as useShiki } from "./composables-BwAY_BDJ.js";
+import "./tooltip-CA6Kp7Ek.js";
+import "./button-dU2iYZBS.js";
 import "./modal-CuQR21UD.js";
-import { t as code_block_default } from "./code-block-C4D_QNTq.js";
-import "./segmented-BEtO1eyl.js";
+import { t as code_block_default } from "./code-block-CZHD64ft.js";
+import "./segmented-Baxxk3UJ.js";
 import { computed, createBlock, createCommentVNode, defineAsyncComponent, defineComponent, mergeProps, normalizeProps, openBlock, resolveDynamicComponent, withCtx } from "vue";
 
 //#region src/components/renderers/code/index.vue?vue&type=script&setup=true&lang.ts
@@ -83,7 +83,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const { installed: hasShiki } = useShiki();
 		const components = {
 			vanilla: defineAsyncComponent(() => import("./vanilla-CA9QO96X.js")),
-			shiki: defineAsyncComponent(() => import("./shiki-vToM7Pz1.js"))
+			shiki: defineAsyncComponent(() => import("./shiki-BHOZKGKS.js"))
 		};
 		const component = computed(() => {
 			if (hasShiki.value) return components.shiki;

package/dist/code-block-BFUXyGQH.js

@@ -0,0 +1,9 @@
+import "./previewers-CoU4RlpQ.js";
+import "./composables-BwAY_BDJ.js";
+import "./tooltip-CA6Kp7Ek.js";
+import "./button-dU2iYZBS.js";
+import "./modal-CuQR21UD.js";
+import { t as code_block_default } from "./code-block-CZHD64ft.js";
+import "./segmented-Baxxk3UJ.js";
+
+export { code_block_default as default };

package/dist/{code-block-D2zjJAww.css → code-block-Bv8s2E8I.css}

@@ -38,6 +38,11 @@
   display: flex;
   position: relative;
 }
+@media (max-width: 1024px) {
+.stream-markdown [data-stream-markdown="code-block-header"] {
+    padding-inline: .5rem;
+}
+}
 .stream-markdown [data-stream-markdown="code-block-content"] {
   overflow: auto;
 }

package/dist/{code-block-C4D_QNTq.js → code-block-CZHD64ft.js}

@@ -1,8 +1,8 @@
-import { t as CODE_PREVIEWERS } from "./previewers-Drlf7IQF.js";
-import { F as LANGUAGE_ALIAS, I as LANGUAGE_EXTENSIONS, L as LANGUAGE_ICONS, O as save, R as useControls, i as useMermaid, j as ICONS, l as useI18n, z as useContext } from "./composables-qhB1h_ed.js";
-import { t as button_default } from "./button-D8xx1WIP.js";
+import { t as CODE_PREVIEWERS } from "./previewers-CoU4RlpQ.js";
+import { B as useContext, I as LANGUAGE_ALIAS, L as LANGUAGE_EXTENSIONS, M as ICONS, O as save, R as LANGUAGE_ICONS, a as useMermaid, u as useI18n, z as useControls } from "./composables-BwAY_BDJ.js";
+import { t as button_default } from "./button-dU2iYZBS.js";
 import { t as modal_default } from "./modal-CuQR21UD.js";
-import { t as segmented_default } from "./segmented-BEtO1eyl.js";
+import { t as segmented_default } from "./segmented-Baxxk3UJ.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, unref, useModel, vShow, watch, withCtx, withDirectives } from "vue";
 import { useClipboard } from "@vueuse/core";
 
@@ -208,7 +208,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const { t } = useI18n();
 		const { isControlEnabled } = useControls({ controls });
 		const { installed: hasMermaid } = useMermaid();
-		const CodeNode = defineAsyncComponent(() => import("./code-CP6mPwkq.js"));
+		const CodeNode = defineAsyncComponent(() => import("./code-BfJ58lYO.js"));
 		const { onCopied } = useContext();
 		const { copy, copied } = useClipboard({ legacy: true });
 		const { saveMermaid } = useMermaid();

package/dist/{composables-qhB1h_ed.js → composables-BwAY_BDJ.js}

@@ -1,4 +1,5 @@
-import { computed, defineAsyncComponent, inject, provide, ref, unref, watch, watchEffect } from "vue";
+import { computed, defineAsyncComponent, inject, onBeforeUnmount, provide, ref, toValue, unref, watch, watchEffect } from "vue";
+import { useStyleTag } from "@vueuse/core";
 import { setDefaultProps } from "vue-tippy";
 import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/light.css";
@@ -38,22 +39,31 @@ function useContext() {
 function useControls(options) {
 	const controls = computed(() => unref(options.controls) ?? true);
 	function isControlEnabled(key) {
+		try {
+			return getControlValue(key) !== false;
+		} catch {
+			return false;
+		}
+	}
+	function getControlValue(key) {
 		try {
 			const config = controls.value;
 			if (typeof config === "boolean") return config;
 			const path = key.split(".");
 			let current = config;
 			for (const part of path) {
-				if (current === void 0 || current === null || typeof current !== "object") return true;
+				if (current === void 0 || current === null || typeof current !== "object") return void 0;
 				current = current[part];
-				if (typeof current === "boolean") return current;
 			}
-			return current === true;
+			return current;
 		} catch {
-			return false;
+			return;
 		}
 	}
-	return { isControlEnabled };
+	return {
+		isControlEnabled,
+		getControlValue
+	};
 }
 
 //#endregion
@@ -64,7 +74,6 @@ const LANGUAGE_ALIAS = {};
 const LANGUAGE_EXTENSIONS = {
 	"1c-query": "1cq",
 	"1c": "1c",
-	"文言": "wy",
 	"abap": "abap",
 	"actionscript-3": "as",
 	"ada": "ada",
@@ -367,7 +376,8 @@ const LANGUAGE_EXTENSIONS = {
 	"yml": "yml",
 	"zenscript": "zs",
 	"zig": "zig",
-	"zsh": "zsh"
+	"zsh": "zsh",
+	"文言": "wy"
 };
 const LANGUAGE_ICONS = {
 	"adoc": defineAsyncComponent(() => import("./asciidoc-BabXBDAL.js")),
@@ -576,6 +586,42 @@ const ICONS = {
 	zoomOut: defineAsyncComponent(() => import("./zoomOut-qlzQyQli.js"))
 };
 
+//#endregion
+//#region src/constants/theme.ts
+const SHADCN_SCHEMAS = [
+	"background",
+	"foreground",
+	"card",
+	"card-foreground",
+	"popover",
+	"popover-foreground",
+	"primary",
+	"primary-foreground",
+	"secondary",
+	"secondary-foreground",
+	"muted",
+	"muted-foreground",
+	"accent",
+	"accent-foreground",
+	"destructive",
+	"border",
+	"input",
+	"ring",
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5",
+	"sidebar",
+	"sidebar-foreground",
+	"sidebar-primary",
+	"sidebar-primary-foreground",
+	"sidebar-accent",
+	"sidebar-accent-foreground",
+	"sidebar-border",
+	"sidebar-ring"
+];
+
 //#endregion
 //#region src/utils/harden.ts
 const safeProtocols = new Set([
@@ -916,10 +962,6 @@ function useHardenSanitizers(options) {
 	};
 }
 
-//#endregion
-//#region src/composables/use-hsl-theme.ts
-function useHslTheme() {}
-
 //#endregion
 //#region src/locales/index.ts
 const SUPPORT_LANGUAGES = ["en-US", "zh-CN"];
@@ -999,7 +1041,7 @@ function useKatex() {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.99.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.101.0/helpers/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o$1) {
@@ -1010,7 +1052,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.99.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.101.0/helpers/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -1023,14 +1065,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.99.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.101.0/helpers/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.99.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.101.0/helpers/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -1041,32 +1083,32 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.99.0/helpers/checkPrivateRedeclaration.js
+//#region \0@oxc-project+runtime@0.101.0/helpers/checkPrivateRedeclaration.js
 function _checkPrivateRedeclaration(e, t) {
 	if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.99.0/helpers/classPrivateFieldInitSpec.js
+//#region \0@oxc-project+runtime@0.101.0/helpers/classPrivateFieldInitSpec.js
 function _classPrivateFieldInitSpec(e, t, a) {
 	_checkPrivateRedeclaration(e, t), t.set(e, a);
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.99.0/helpers/assertClassBrand.js
+//#region \0@oxc-project+runtime@0.101.0/helpers/assertClassBrand.js
 function _assertClassBrand(e, t, n) {
 	if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
 	throw new TypeError("Private element is not present on this object");
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.99.0/helpers/classPrivateFieldGet2.js
+//#region \0@oxc-project+runtime@0.101.0/helpers/classPrivateFieldGet2.js
 function _classPrivateFieldGet2(s, a) {
 	return s.get(_assertClassBrand(s, a));
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.99.0/helpers/classPrivateFieldSet2.js
+//#region \0@oxc-project+runtime@0.101.0/helpers/classPrivateFieldSet2.js
 function _classPrivateFieldSet2(s, a, r) {
 	return s.set(_assertClassBrand(s, a), r), r;
 }
@@ -1343,6 +1385,7 @@ function useMermaid(options) {
 //#endregion
 //#region src/composables/use-shiki.ts
 let highlighter = null;
+let createHighlighterPromise = null;
 function useShiki(options) {
 	const installed = ref(false);
 	const lang = computed(() => unref(options === null || options === void 0 ? void 0 : options.lang) ?? "plaintext");
@@ -1382,6 +1425,10 @@ function useShiki(options) {
 		return "plaintext";
 	}
 	async function getHighlighter() {
+		if (createHighlighterPromise) {
+			highlighter = await createHighlighterPromise;
+			createHighlighterPromise = null;
+		}
 		if (highlighter) {
 			const loadedLangs = highlighter.getLoadedLanguages();
 			const loadedThemes = highlighter.getLoadedThemes();
@@ -1391,15 +1438,19 @@ function useShiki(options) {
 			for (const theme of themes) if (!loadedThemes.includes(theme)) await highlighter.loadTheme(theme);
 			return highlighter;
 		}
-		const { createHighlighter } = await import("shiki");
-		highlighter = await createHighlighter({
-			themes: [await getTheme()],
-			langs: [await getLanguage()],
-			langAlias: {
-				...LANGUAGE_ALIAS,
-				...langAlias.value
-			}
-		});
+		createHighlighterPromise = (async () => {
+			const { createHighlighter } = await import("shiki");
+			return createHighlighter({
+				themes: [await getTheme()],
+				langs: [await getLanguage()],
+				langAlias: {
+					...LANGUAGE_ALIAS,
+					...langAlias.value
+				}
+			});
+		})();
+		highlighter = await createHighlighterPromise;
+		createHighlighterPromise = null;
 		return highlighter;
 	}
 	async function codeToTokens(code) {
@@ -1434,6 +1485,48 @@ function useShiki(options) {
 	};
 }
 
+//#endregion
+//#region src/composables/use-tailwind-v3-theme.ts
+const reg = /^(?:hsl|rgb|oklch|lab|lch)\(/;
+function useTailwindV3Theme(options) {
+	const { id, css, load, unload, isLoaded } = useStyleTag("", {
+		id: "stream-markdown-tailwind-v3-theme",
+		immediate: false
+	});
+	const styleScope = computed(() => unref(options.styleScope) || ".stream-markdown");
+	const element = computed(() => {
+		return toValue(options.element) || (typeof window !== "undefined" ? document.body : void 0);
+	});
+	function generateCSS() {
+		if (!element.value || typeof window === "undefined") return;
+		const computedStyle = window.getComputedStyle(element.value);
+		const cssVariables = [];
+		for (const schema of SHADCN_SCHEMAS) {
+			const name = `--${schema}`;
+			const value = computedStyle.getPropertyValue(name).trim();
+			if (value && !reg.test(value)) cssVariables.push(`  ${name}: hsl(${value});`);
+		}
+		if (cssVariables.length > 0) {
+			css.value = `${styleScope.value} {\n${cssVariables.join("\n")}\n}`;
+			load();
+		} else {
+			css.value = "";
+			unload();
+		}
+	}
+	watchEffect(generateCSS);
+	onBeforeUnmount(unload);
+	return {
+		element,
+		id,
+		css,
+		load,
+		unload,
+		isLoaded,
+		generateCSS
+	};
+}
+
 //#endregion
 //#region src/composables/use-tippy.ts
 function useTippy(options) {
@@ -1564,4 +1657,4 @@ function useZoom(options = {}) {
 }
 
 //#endregion
-export { transformUrl as A, findNodeParent as C, flow as D, hasShiki as E, LANGUAGE_ALIAS as F, LANGUAGE_EXTENSIONS as I, LANGUAGE_ICONS as L, DEFAULT_HARDEN_OPTIONS as M, DEFAULT_DARK_THEME as N, save as O, DEFAULT_LIGHT_THEME as P, useControls as R, findLastLeafNode as S, hasMermaid as T, escapeMarkdownTableCell as _, useMathRenderer as a, tableDataToMarkdown as b, useKatex as c, currentLocale as d, loadLocaleMessages as f, useHardenSanitizers as g, useHslTheme as h, useMermaid as i, ICONS as j, svgToPngBlob as k, useI18n as l, localesGlob as m, useTippy as n, throttle as o, localeMessages as p, useShiki as r, _defineProperty as s, useZoom as t, SUPPORT_LANGUAGES as u, extractTableDataFromElement as v, hasKatex as w, tableDataToTSV as x, tableDataToCSV as y, useContext as z };
+export { transformUrl as A, useContext as B, findNodeParent as C, flow as D, hasShiki as E, DEFAULT_LIGHT_THEME as F, LANGUAGE_ALIAS as I, LANGUAGE_EXTENSIONS as L, ICONS as M, DEFAULT_HARDEN_OPTIONS as N, save as O, DEFAULT_DARK_THEME as P, LANGUAGE_ICONS as R, findLastLeafNode as S, hasMermaid as T, escapeMarkdownTableCell as _, useMermaid as a, tableDataToMarkdown as b, _defineProperty as c, SUPPORT_LANGUAGES as d, currentLocale as f, useHardenSanitizers as g, localesGlob as h, useShiki as i, SHADCN_SCHEMAS as j, svgToPngBlob as k, useKatex as l, localeMessages as m, useTippy as n, useMathRenderer as o, loadLocaleMessages as p, useTailwindV3Theme as r, throttle as s, useZoom as t, useI18n as u, extractTableDataFromElement as v, hasKatex as w, tableDataToTSV as x, tableDataToCSV as y, useControls as z };

package/dist/dropdown-RWgcV-8w.js

@@ -0,0 +1,5 @@
+import "./composables-BwAY_BDJ.js";
+import "./tooltip-CA6Kp7Ek.js";
+import { n as dropdown_default } from "./button-dU2iYZBS.js";
+
+export { dropdown_default as default };

package/dist/error-component-CR9t-T1D.js

@@ -0,0 +1,4 @@
+import "./composables-BwAY_BDJ.js";
+import { t as error_component_default } from "./error-component-CiIR_1Cg.js";
+
+export { error_component_default as default };

package/dist/{error-component-CzarUjhh.js → error-component-CiIR_1Cg.js}

@@ -1,4 +1,4 @@
-import { j as ICONS, l as useI18n } from "./composables-qhB1h_ed.js";
+import { M as ICONS, u as useI18n } from "./composables-BwAY_BDJ.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, openBlock, renderSlot, resolveDynamicComponent, toDisplayString } from "vue";
 
 //#region src/components/error-component.vue?vue&type=script&setup=true&lang.ts

package/dist/{image-heJSlrNv.js → image-BporCeem.js}

@@ -1,7 +1,7 @@
-import { O as save, R as useControls, g as useHardenSanitizers, j as ICONS, l as useI18n } from "./composables-qhB1h_ed.js";
-import "./tooltip-RiXixMIt.js";
-import { t as button_default } from "./button-D8xx1WIP.js";
-import { t as error_component_default } from "./error-component-CzarUjhh.js";
+import { M as ICONS, O as save, g as useHardenSanitizers, u as useI18n, z as useControls } from "./composables-BwAY_BDJ.js";
+import "./tooltip-CA6Kp7Ek.js";
+import { t as button_default } from "./button-dU2iYZBS.js";
+import { t as error_component_default } from "./error-component-CiIR_1Cg.js";
 import { t as spin_default } from "./spin-Ds5W7qC_.js";
 import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, resolveDynamicComponent, toDisplayString, toRefs, unref, withCtx } from "vue";
 
@@ -97,7 +97,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			var _props$imageOptions;
 			return ((_props$imageOptions = props.imageOptions) === null || _props$imageOptions === void 0 ? void 0 : _props$imageOptions.fallback) ?? "";
 		});
-		const imageSrc = computed(() => loadError.value && fallback.value ? fallback.value : props.node.url);
+		const imageSrc = computed(() => fallbackAttempted.value && fallback.value ? fallback.value : props.node.url);
 		const { transformedUrl, isHardenUrl } = useHardenSanitizers({
 			url: imageSrc,
 			hardenOptions,
@@ -158,51 +158,55 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				style: normalizeStyle({ width: isLoading.value || !imageLoaded.value ? "100%" : "auto" }),
 				onMouseenter: handleMouseEnter,
 				onMouseleave: handleMouseLeave
-			}, [createElementVNode("div", _hoisted_1, [!unref(isHardenUrl) ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				ref_key: "maskRef",
-				ref: maskRef,
-				"data-stream-markdown": "image-mask"
-			}, [!isLoading.value && showDownload.value ? (openBlock(), createBlock(button_default, {
-				key: 0,
-				"data-stream-markdown": "image-download-button",
-				icon: unref(ICONS).download,
-				name: unref(t)("button.download"),
-				"icon-class": "test",
-				"icon-width": 16,
-				"icon-height": 16,
-				"button-style": { backgroundColor: "color-mix(in oklab, var(--background) 90%, transparent)" },
-				onClick: handleDownload
-			}, null, 8, ["icon", "name"])) : createCommentVNode("v-if", true)], 512)) : createCommentVNode("v-if", true), createVNode(Transition, {
-				name: "img-switch",
-				mode: "out-in"
-			}, {
-				default: withCtx(() => [!isLoading.value && !unref(isHardenUrl) && typeof unref(transformedUrl) === "string" ? (openBlock(), createElementBlock("img", {
-					ref_key: "imgRef",
-					ref: imgRef,
-					key: unref(transformedUrl),
-					"data-stream-markdown": "image",
-					src: unref(transformedUrl),
-					alt: alt.value,
-					title: title.value,
-					style: normalizeStyle({
-						opacity: isLoading.value ? 0 : 1,
-						cursor: isLoading.value ? "default" : "pointer"
-					}),
-					loading: "lazy",
-					decoding: "async",
-					"data-zoomable": "",
-					onLoad: handleLoaded,
-					onError: handleError
-				}, null, 44, _hoisted_2)) : (isLoading.value || !imageLoaded.value) && !unref(isHardenUrl) ? (openBlock(), createBlock(spin_default, { key: 1 })) : (openBlock(), createBlock(resolveDynamicComponent(Error.value), mergeProps({
-					key: 2,
-					variant: unref(isHardenUrl) ? "harden-image" : "image"
-				}, props), {
-					default: withCtx(() => [createTextVNode(toDisplayString(title.value), 1)]),
+			}, [createElementVNode("div", _hoisted_1, [
+				!unref(isHardenUrl) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "maskRef",
+					ref: maskRef,
+					"data-stream-markdown": "image-mask"
+				}, [!isLoading.value && showDownload.value ? (openBlock(), createBlock(button_default, {
+					key: 0,
+					"data-stream-markdown": "image-download-button",
+					icon: unref(ICONS).download,
+					name: unref(t)("button.download"),
+					"icon-class": "test",
+					"icon-width": 16,
+					"icon-height": 16,
+					"button-style": { backgroundColor: "color-mix(in oklab, var(--background) 90%, transparent)" },
+					onClick: handleDownload
+				}, null, 8, ["icon", "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),
+				createVNode(Transition, {
+					name: "img-switch",
+					mode: "out-in"
+				}, {
+					default: withCtx(() => [!isLoading.value && !unref(isHardenUrl) && typeof unref(transformedUrl) === "string" ? (openBlock(), createElementBlock("img", {
+						ref_key: "imgRef",
+						ref: imgRef,
+						key: unref(transformedUrl),
+						"data-stream-markdown": "image",
+						src: unref(transformedUrl),
+						alt: alt.value,
+						title: title.value,
+						style: normalizeStyle({
+							opacity: isLoading.value ? 0 : 1,
+							cursor: isLoading.value ? "default" : "pointer"
+						}),
+						loading: "lazy",
+						decoding: "async",
+						"data-zoomable": "",
+						onLoad: handleLoaded,
+						onError: handleError
+					}, null, 44, _hoisted_2)) : unref(isHardenUrl) || loadError.value ? (openBlock(), createBlock(resolveDynamicComponent(Error.value), mergeProps({
+						key: 1,
+						variant: unref(isHardenUrl) ? "harden-image" : "image"
+					}, props), {
+						default: withCtx(() => [createTextVNode(toDisplayString(title.value), 1)]),
+						_: 1
+					}, 16, ["variant"])) : createCommentVNode("v-if", true)]),
 					_: 1
-				}, 16, ["variant"]))]),
-				_: 1
-			})]), showCaption.value && title.value ? (openBlock(), createElementBlock("figcaption", _hoisted_3, toDisplayString(title.value), 1)) : createCommentVNode("v-if", true)], 36);
+				})
+			]), showCaption.value && title.value ? (openBlock(), createElementBlock("figcaption", _hoisted_3, toDisplayString(title.value), 1)) : createCommentVNode("v-if", true)], 36);
 		};
 	}
 });