vue-stream-markdown 0.0.0-alpha.0

package/dist/http-B9FFNmUr.js

@@ -0,0 +1,23 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/http
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "#8aadf4",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, [createElementVNode("path", { d: "M14.5 8A6.5 6.5 0 0 1 8 14.5A6.5 6.5 0 0 1 1.5 8A6.5 6.5 0 0 1 8 1.5A6.5 6.5 0 0 1 14.5 8" }), createElementVNode("path", { d: "M8 1.5c1.67 2 2.5 4.17 2.5 6.5s-.83 4.5-2.5 6.5m0-13A9.96 9.96 0 0 0 5.5 8c0 2.33.83 4.5 2.5 6.5m-5.5-4h11m-11-5h11" })], -1)])]);
+}
+var http_default = markRaw({
+	name: "catppuccin-http",
+	render
+});
+
+//#endregion
+export { http_default as default };

package/dist/image-B77jbMUB.css

@@ -0,0 +1,46 @@
+.stream-markdown [data-stream-markdown="image-figure"] {
+  display: inline-block;
+}
+.stream-markdown [data-stream-markdown="image-wrapper"] {
+  text-align: center;
+  position: relative;
+}
+.stream-markdown [data-stream-markdown="image"] {
+  object-fit: contain;
+  border-radius: .5rem;
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+.stream-markdown [data-stream-markdown="image-caption"] {
+  text-align: center;
+  font-size: .875rem;
+  font-style: italic;
+  line-height: 1.25rem;
+}
+.stream-markdown [data-stream-markdown="image-mask"] {
+  pointer-events: none;
+  background-color: #0000001a;
+  border-radius: .5rem;
+  display: none;
+  position: absolute;
+  inset: 0;
+}
+.stream-markdown [data-stream-markdown="image-download-button"] {
+  pointer-events: all;
+  position: absolute;
+  bottom: .5rem;
+  right: .5rem;
+}
+.stream-markdown .img-switch-enter-active, .stream-markdown .img-switch-leave-active {
+  transition: opacity var(--default-transition-duration) ease, transform var(--default-transition-duration) ease;
+}
+.stream-markdown .img-switch-enter-from, .stream-markdown .img-switch-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.stream-markdown .img-switch-enter-to, .stream-markdown .img-switch-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+

package/dist/image-CMZAakWu.js

@@ -0,0 +1,39 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/lucide/image
+const _hoisted_1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [
+		createElementVNode("rect", {
+			width: "18",
+			height: "18",
+			x: "3",
+			y: "3",
+			rx: "2",
+			ry: "2"
+		}),
+		createElementVNode("circle", {
+			cx: "9",
+			cy: "9",
+			r: "2"
+		}),
+		createElementVNode("path", { d: "m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+	], -1)])]);
+}
+var image_default = markRaw({
+	name: "lucide-image",
+	render
+});
+
+//#endregion
+export { image_default as default };

package/dist/image-heJSlrNv.js

@@ -0,0 +1,215 @@
+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 { 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";
+
+//#region src/components/renderers/image.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { "data-stream-markdown": "image-wrapper" };
+const _hoisted_2 = [
+	"src",
+	"alt",
+	"title"
+];
+const _hoisted_3 = {
+	key: 0,
+	"data-stream-markdown": "image-caption"
+};
+var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "image",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		markdownParser: {
+			type: Object,
+			required: true
+		},
+		nodeRenderers: {
+			type: Object,
+			required: true
+		},
+		mediumZoom: {
+			type: Object,
+			required: true
+		},
+		indexKey: {
+			type: [Number, String],
+			required: true
+		},
+		getContainer: {
+			type: Function,
+			required: true
+		},
+		controls: {
+			type: [Boolean, Object],
+			required: false
+		},
+		previewers: {
+			type: [Boolean, Object],
+			required: false
+		},
+		shikiOptions: {
+			type: Object,
+			required: false
+		},
+		mermaidOptions: {
+			type: Object,
+			required: false
+		},
+		katexOptions: {
+			type: Object,
+			required: false
+		},
+		hardenOptions: {
+			type: Object,
+			required: false
+		},
+		codeOptions: {
+			type: Object,
+			required: false
+		},
+		imageOptions: {
+			type: Object,
+			required: false
+		},
+		isDark: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const fileExtensionPattern = /\.[^/.]+$/;
+		const { t } = useI18n();
+		const { controls, hardenOptions } = toRefs(props);
+		const { isControlEnabled } = useControls({ controls });
+		const imgRef = ref();
+		const maskRef = ref();
+		const loadError = ref(false);
+		const imageLoaded = ref(false);
+		const fallbackAttempted = ref(false);
+		const isLoading = computed(() => props.node.loading || !props.node.url);
+		const showDownload = computed(() => isControlEnabled("image.download"));
+		const fallback = computed(() => {
+			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 { transformedUrl, isHardenUrl } = useHardenSanitizers({
+			url: imageSrc,
+			hardenOptions,
+			loading: isLoading,
+			isImage: true
+		});
+		const alt = computed(() => String(props.node.alt ?? props.node.title ?? ""));
+		const title = computed(() => String(props.node.title ?? props.node.alt ?? ""));
+		const showCaption = computed(() => {
+			var _props$imageOptions2;
+			return (typeof ((_props$imageOptions2 = props.imageOptions) === null || _props$imageOptions2 === void 0 ? void 0 : _props$imageOptions2.caption) === "boolean" ? props.imageOptions.caption : true) && !isLoading.value && !!title.value;
+		});
+		const Error = computed(() => {
+			var _hardenOptions$value, _props$imageOptions3;
+			return isHardenUrl.value ? ((_hardenOptions$value = hardenOptions.value) === null || _hardenOptions$value === void 0 ? void 0 : _hardenOptions$value.errorComponent) ?? error_component_default : ((_props$imageOptions3 = props.imageOptions) === null || _props$imageOptions3 === void 0 ? void 0 : _props$imageOptions3.errorComponent) ?? error_component_default;
+		});
+		function handleLoaded() {
+			imageLoaded.value = true;
+			if (fallbackAttempted.value) return;
+			if (imgRef.value) props.mediumZoom.attach(imgRef.value);
+		}
+		function handleError() {
+			if (fallback.value && !fallbackAttempted.value) {
+				fallbackAttempted.value = true;
+				return;
+			}
+			loadError.value = true;
+		}
+		async function handleDownload() {
+			if (!imageSrc.value) return;
+			const blob = await (await fetch(imageSrc.value)).blob();
+			const originalFilename = new URL(imageSrc.value, window.location.origin).pathname.split("/").pop() || "";
+			const extension = originalFilename.split(".").pop();
+			const hasExtension = originalFilename.includes(".") && extension !== void 0 && extension.length <= 4;
+			let filename = "";
+			if (hasExtension) filename = originalFilename;
+			else {
+				const mimeType = blob.type;
+				let fileExtension = "png";
+				if (mimeType.includes("jpeg") || mimeType.includes("jpg")) fileExtension = "jpg";
+				else if (mimeType.includes("png")) fileExtension = "png";
+				else if (mimeType.includes("svg")) fileExtension = "svg";
+				else if (mimeType.includes("gif")) fileExtension = "gif";
+				else if (mimeType.includes("webp")) fileExtension = "webp";
+				filename = `${(alt.value || originalFilename || "image").replace(fileExtensionPattern, "")}.${fileExtension}`;
+			}
+			save(filename, blob, blob.type);
+		}
+		function handleMouseEnter() {
+			if (maskRef.value) maskRef.value.style.display = "block";
+		}
+		function handleMouseLeave() {
+			if (maskRef.value) maskRef.value.style.display = "none";
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("figure", {
+				"data-stream-markdown": "image-figure",
+				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)]),
+					_: 1
+				}, 16, ["variant"]))]),
+				_: 1
+			})]), showCaption.value && title.value ? (openBlock(), createElementBlock("figcaption", _hoisted_3, toDisplayString(title.value), 1)) : createCommentVNode("v-if", true)], 36);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/renderers/image.vue
+var image_default = image_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { image_default as default };

package/dist/index.css

@@ -0,0 +1,43 @@
+.stream-markdown {
+  --default-transition-duration: .15s;
+  --typewriter-transition-duration: .9s;
+  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: "Geist", "Geist Fallback", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: .5rem;
+  font-family: var(--font-sans);
+  color: var(--foreground);
+}
+.stream-markdown * {
+  box-sizing: border-box;
+  border: 0 solid;
+  margin: 0;
+  padding: 0;
+}
+.stream-markdown .tippy-box {
+  background: var(--popover);
+  color: var(--popover-foreground);
+  border: 1px solid var(--border);
+}
+.stream-markdown .tippy-arrow {
+  color: var(--popover);
+}
+.stream-markdown .tippy-box > .tippy-svg-arrow {
+  border-top-color: var(--popover);
+}
+.stream-markdown ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.stream-markdown ::-webkit-scrollbar-track {
+  background: none;
+}
+.stream-markdown ::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+.stream-markdown ::-webkit-scrollbar-thumb:hover {
+  background: var(--border);
+  opacity: .5;
+}
+