vue-stream-markdown 0.1.5 → 0.2.0

package/dist/{zoom-container-B1qbA-7z.js → zoom-container-CrKx_BbS.js}

@@ -1,6 +1,6 @@
-import { H as useContext, t as useZoom, u as useI18n } from "./composables-yny5gJo3.js";
-import { t as button_default } from "./button-BQhuT7wh.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, unref, withModifiers } from "vue";
+import { t as useZoom, y as useI18n } from "./composables-DuQ72m6O.js";
+import { t as button_default } from "./button-BDO3n0n_.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, unref, withModifiers } from "vue";
 
 //#region src/components/zoom-container.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = { "data-stream-markdown": "zoom-inner" };
@@ -32,7 +32,6 @@ var zoom_container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const props = __props;
 		const containerRef = ref();
 		const { t } = useI18n();
-		const { icons } = useContext();
 		const { zoom, isDragging, transformStyle, zoomIn, zoomOut, resetZoom, startDrag, onDrag, stopDrag, handleWheel, handleTouchStart, handleTouchMove, handleTouchEnd } = useZoom();
 		const zoomPercent = computed(() => `${Math.round(zoom.value * 100)}%`);
 		const controlsPosition = computed(() => {
@@ -74,6 +73,29 @@ var zoom_container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				buttonStyle: { fontSize: "0.875rem" }
 			};
 		});
+		const controls = computed(() => [
+			{
+				...controlButtonProps.value,
+				key: "zoomIn",
+				icon: "zoomIn",
+				name: t("button.zoomIn"),
+				onClick: zoomIn
+			},
+			{
+				...controlButtonProps.value,
+				key: "zoomOut",
+				icon: "zoomOut",
+				name: t("button.zoomOut"),
+				onClick: zoomOut
+			},
+			{
+				...controlButtonProps.value,
+				key: "resetZoom",
+				variant: "text",
+				name: zoomPercent.value,
+				onClick: resetZoom
+			}
+		]);
 		function onWheel(event) {
 			if (containerRef.value) handleWheel(event, containerRef.value);
 		}
@@ -105,34 +127,12 @@ var zoom_container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				"data-stream-markdown": "zoom-controls",
 				style: normalizeStyle(controlsPosition.value),
 				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-			}, [
-				renderSlot(_ctx.$slots, "controls", normalizeProps(guardReactiveProps(controlButtonProps.value))),
-				createVNode(button_default, mergeProps({
-					icon: unref(icons).zoomIn,
-					name: unref(t)("button.zoomIn")
-				}, controlButtonProps.value, { onClick: unref(zoomIn) }), null, 16, [
-					"icon",
-					"name",
-					"onClick"
-				]),
-				createVNode(button_default, mergeProps({
-					icon: unref(icons).zoomOut,
-					name: unref(t)("button.zoomOut")
-				}, controlButtonProps.value, { onClick: unref(zoomOut) }), null, 16, [
-					"icon",
-					"name",
-					"onClick"
-				]),
-				createVNode(button_default, mergeProps({
-					title: unref(t)("button.resetZoom"),
-					name: zoomPercent.value,
-					variant: "text"
-				}, controlButtonProps.value, { onClick: unref(resetZoom) }), null, 16, [
-					"title",
-					"name",
-					"onClick"
-				])
-			], 4)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_1, [createElementVNode("div", {
+			}, [renderSlot(_ctx.$slots, "controls", normalizeProps(guardReactiveProps(controlButtonProps.value))), (openBlock(true), createElementBlock(Fragment, null, renderList(controls.value, (item) => {
+				return openBlock(), createBlock(button_default, mergeProps({ ref_for: true }, item, {
+					key: item.key,
+					onClick: item.onClick
+				}), null, 16, ["onClick"]);
+			}), 128))], 4)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_1, [createElementVNode("div", {
 				"data-stream-markdown": "zoom-transform-container",
 				style: normalizeStyle({
 					...unref(transformStyle),

package/dist/zoom-container-j4kY9qX_.js

@@ -0,0 +1,7 @@
+import "./composables-DuQ72m6O.js";
+import "./tooltip-CnO7OPL1.js";
+import "./button-BDO3n0n_.js";
+import "./icon-PEivHbuv.js";
+import { t as zoom_container_default } from "./zoom-container-CrKx_BbS.js";
+
+export { zoom_container_default as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-stream-markdown",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Streaming markdown output, Useful for text streams like LLM outputs.",
   "author": "jinghaihan",
   "license": "MIT",
@@ -58,16 +58,21 @@
     "remend": "^1.0.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^6.6.1",
+    "@antfu/eslint-config": "^6.7.1",
     "@antfu/utils": "^9.3.0",
     "@iconify-json/catppuccin": "^1.2.17",
-    "@iconify-json/lucide": "^1.2.79",
-    "@types/node": "^24.10.3",
+    "@iconify-json/lucide": "^1.2.81",
+    "@nuxt/devtools": "^3.1.1",
+    "@nuxt/eslint": "^1.12.1",
+    "@nuxtjs/color-mode": "^4.0.0",
+    "@types/node": "^24.10.4",
     "@unocss/eslint-plugin": "66.5.9",
-    "@vitejs/plugin-vue": "^6.0.2",
+    "@unocss/nuxt": "^66.5.10",
+    "@vitejs/plugin-vue": "^6.0.3",
     "@vue/test-utils": "^2.4.6",
+    "@vueuse/nuxt": "^14.1.0",
     "bumpp": "^10.3.2",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-format": "^1.1.0",
     "happy-dom": "^20.0.11",
     "lint-staged": "^16.2.7",
@@ -82,11 +87,12 @@
     "micromark-extension-gfm": "^3.0.0",
     "micromark-extension-math": "^3.1.0",
     "micromark-util-types": "^2.0.2",
+    "nuxt": "^4.2.2",
     "pncat": "^0.7.7",
     "simple-git-hooks": "^2.13.1",
     "taze": "^19.9.2",
     "treechop": "^0.1.2",
-    "tsdown": "^0.17.2",
+    "tsdown": "^0.17.4",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "unocss": "^66.5.10",
@@ -104,14 +110,15 @@
     "*": "eslint --fix"
   },
   "scripts": {
-    "dev": "vite",
-    "dev:docs": "pnpm --filter documentation dev",
+    "dev": "pnpm playground:dev",
     "build": "tsdown",
-    "build:play": "vite build",
-    "build:docs": "pnpm --filter documentation build",
+    "playground:dev": "pnpm -F playground dev",
+    "playground:build": "pnpm -F playground generate",
+    "docs:dev": "pnpm -F docs dev",
+    "docs:build": "pnpm -F docs build",
     "deps": "taze major -I",
     "lint": "eslint",
-    "typecheck": "vue-tsc --noEmit",
+    "typecheck": "vue-tsc --noEmit && pnpm -F playground typecheck",
     "test": "vitest",
     "release": "bumpp",
     "bootstrap": "pnpm install"

package/dist/button-JYC8d-B-.js

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

package/dist/code-block-BhMDz2ZL.js

@@ -1,9 +0,0 @@
-import "./previewers-D0VVcdjL.js";
-import "./composables-yny5gJo3.js";
-import "./tooltip-Bgbzbk4Q.js";
-import "./button-BQhuT7wh.js";
-import "./modal-Rc_RoeYA.js";
-import { t as code_block_default } from "./code-block-Dm2wl0cb.js";
-import "./segmented-CaC54iz_.js";
-
-export { code_block_default as default };

package/dist/dropdown-Y5_Z4a_u.js

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

package/dist/error-component-DEIWb6kB.js

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

package/dist/image-DXBD47sF.js

@@ -1,8 +0,0 @@
-import "./composables-yny5gJo3.js";
-import "./tooltip-Bgbzbk4Q.js";
-import "./button-BQhuT7wh.js";
-import "./modal-Rc_RoeYA.js";
-import { t as image_default } from "./image-DvOGBhi-.js";
-import "./zoom-container-B1qbA-7z.js";
-
-export { image_default as default };

package/dist/image-DvOGBhi-.js

@@ -1,327 +0,0 @@
-import { H as useContext, V as useControls, a as useMediumZoom, k as saveImage, u as useI18n } from "./composables-yny5gJo3.js";
-import { t as button_default } from "./button-BQhuT7wh.js";
-import { t as modal_default } from "./modal-Rc_RoeYA.js";
-import { t as zoom_container_default } from "./zoom-container-B1qbA-7z.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, toRefs, unref, watch, withCtx } from "vue";
-import { useCycleList } from "@vueuse/core";
-
-//#region node_modules/.pnpm/treechop@0.1.2/node_modules/treechop/dist/index.js
-const DEFAULT_CHILDREN_KEY = "children";
-function createTreeUtils(options = {}) {
-	const { childrenKey = DEFAULT_CHILDREN_KEY } = options;
-	return {
-		childrenKey,
-		getChildrenKey(node, meta) {
-			return typeof this.childrenKey === "function" ? this.childrenKey(node, meta) : this.childrenKey;
-		},
-		getChildren(node, meta) {
-			return node[this.getChildrenKey(node, meta)] || [];
-		},
-		hasChildren(node, meta) {
-			const children = this.getChildren(node, meta);
-			return Array.isArray(children) && children.length > 0;
-		}
-	};
-}
-function preOrderTraverse(tree, callback, utils) {
-	const result = [];
-	const traverse = (nodes, parents = [], depth = 0) => {
-		nodes.forEach((node, index) => {
-			const meta = {
-				depth,
-				index,
-				parents
-			};
-			result.push(callback(node, meta));
-			if (utils.hasChildren(node, meta)) traverse(utils.getChildren(node, meta), [...parents, node], depth + 1);
-		});
-	};
-	traverse(tree);
-	return result;
-}
-function postOrderTraverse(tree, callback, utils) {
-	const result = [];
-	const traverse = (nodes, parents = [], depth = 0) => {
-		nodes.forEach((node, index) => {
-			const meta = {
-				depth,
-				index,
-				parents
-			};
-			if (utils.hasChildren(node, meta)) traverse(utils.getChildren(node, meta), [...parents, node], depth + 1);
-			result.push(callback(node, meta));
-		});
-	};
-	traverse(tree);
-	return result;
-}
-function breadthTraverse(tree, callback, utils) {
-	const result = [];
-	const queue = tree.map((node, index) => [
-		node,
-		index,
-		[],
-		0
-	]);
-	while (queue.length) {
-		const [node, index, parents, depth] = queue.shift();
-		const meta = {
-			depth,
-			index,
-			parents
-		};
-		result.push(callback(node, meta));
-		if (utils.hasChildren(node, meta)) utils.getChildren(node, meta).forEach((child, childIndex) => {
-			queue.push([
-				child,
-				childIndex,
-				[...parents, node],
-				depth + 1
-			]);
-		});
-	}
-	return result;
-}
-function treeFlatFilter(tree, predicate, options = {}) {
-	const { strategy = "pre" } = options;
-	const utils = createTreeUtils(options);
-	const callback = (node, meta) => {
-		return predicate(node, meta) ? node : null;
-	};
-	switch (strategy) {
-		case "post": return postOrderTraverse(tree, callback, utils).filter(Boolean);
-		case "breadth": return breadthTraverse(tree, callback, utils).filter(Boolean);
-		case "pre":
-		default: return preOrderTraverse(tree, callback, utils).filter(Boolean);
-	}
-}
-
-//#endregion
-//#region src/components/image.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = [
-	"src",
-	"alt",
-	"title"
-];
-const _hoisted_2 = [
-	"src",
-	"alt",
-	"title"
-];
-var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "image",
-	props: {
-		src: {
-			type: String,
-			required: false
-		},
-		alt: {
-			type: String,
-			required: false
-		},
-		title: {
-			type: String,
-			required: false
-		},
-		preview: {
-			type: Boolean,
-			required: false,
-			default: true
-		},
-		margin: {
-			type: Number,
-			required: false,
-			default: 16
-		},
-		controls: {
-			type: [Boolean, Object],
-			required: false,
-			default: true
-		}
-	},
-	emits: ["load", "error"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emits = __emit;
-		const { margin, controls } = toRefs(props);
-		const { t } = useI18n();
-		const { icons, parsedNodes } = useContext();
-		const { isControlEnabled, getControlValue } = useControls({ controls });
-		const imageNodes = computed(() => treeFlatFilter(parsedNodes.value, (node) => node.type === "image" && !node.loading));
-		const imageList = computed(() => [...new Set(imageNodes.value.map((node) => node.url))]);
-		const { state: imageSrc, prev, next } = useCycleList(imageList, {
-			initialValue: props.src,
-			fallbackIndex: 0
-		});
-		const enableDownload = computed(() => isControlEnabled("image.download"));
-		const enableCarousel = computed(() => isControlEnabled("image.carousel"));
-		const enableFlip = computed(() => isControlEnabled("image.flip"));
-		const enableRotate = computed(() => isControlEnabled("image.rotate"));
-		const controlPosition = computed(() => {
-			const position = getControlValue("image.controlPosition");
-			if (typeof position === "boolean") return "bottom-center";
-			return position || "bottom-center";
-		});
-		const loaded = ref(false);
-		const open = ref(false);
-		const scaleX = ref(1);
-		const scaleY = ref(1);
-		const rotate = ref(0);
-		const { isAnimating, elementRef, zoomElementRef: _zoomElementRef, elementStyle, zoomIn, zoomOut } = useMediumZoom({
-			margin,
-			open: () => open.value = true,
-			close: () => open.value = false
-		});
-		const imageStyle = computed(() => ({
-			transform: `
-    scaleX(${scaleX.value})
-    scaleY(${scaleY.value})
-    rotate(${rotate.value}deg)
-  `,
-			transition: "transform 0.3s ease",
-			...elementStyle.value
-		}));
-		function handleLoad(event) {
-			loaded.value = true;
-			emits("load", event);
-		}
-		function handleError(event) {
-			emits("error", event);
-		}
-		function handleOpen() {
-			if (!props.preview || !elementRef.value || !loaded.value) return;
-			zoomIn();
-		}
-		function handleClose() {
-			if (isAnimating.value) return;
-			zoomOut();
-		}
-		function download() {
-			if (!imageSrc.value) return;
-			saveImage(imageSrc.value, props.alt);
-		}
-		function flipHorizontal() {
-			scaleX.value *= -1;
-		}
-		function flipVertical() {
-			scaleY.value *= -1;
-		}
-		function rotateLeft() {
-			rotate.value -= 90;
-		}
-		function rotateRight() {
-			rotate.value += 90;
-		}
-		watch(open, (data) => {
-			if (!data) {
-				scaleX.value = 1;
-				scaleY.value = 1;
-				rotate.value = 0;
-				if (props.src) imageSrc.value = props.src;
-			}
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("img", {
-				ref_key: "elementRef",
-				ref: elementRef,
-				"data-stream-markdown": "image",
-				src: __props.src,
-				alt: __props.alt,
-				title: __props.title,
-				style: { transition: "transform 300ms cubic-bezier(0.2, 0, 0.2, 1)" },
-				loading: "lazy",
-				decoding: "async",
-				onLoad: handleLoad,
-				onError: handleError,
-				onClick: handleOpen
-			}, null, 40, _hoisted_1), createVNode(modal_default, {
-				open: open.value,
-				"onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event),
-				transition: "",
-				"modal-style": { backgroundColor: "rgba(0, 0, 0, 0.45)" },
-				close: handleClose
-			}, {
-				default: withCtx(() => [createVNode(zoom_container_default, {
-					"control-size": "large",
-					position: controlPosition.value,
-					"container-style": {
-						width: "auto",
-						maxWidth: `calc(100% - ${props.margin * 2}px)`,
-						cursor: "grab"
-					},
-					onClick: handleClose
-				}, {
-					controls: withCtx((buttonProps) => [
-						unref(imageSrc) && enableDownload.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 0 }, buttonProps, {
-							icon: unref(icons).download,
-							name: unref(t)("button.download"),
-							onClick: download
-						}), null, 16, ["icon", "name"])) : createCommentVNode("v-if", true),
-						imageList.value.length > 1 && enableCarousel.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 1 }, buttonProps, {
-							icon: unref(icons).arrowLeft,
-							name: unref(t)("button.previous"),
-							onClick: _cache[0] || (_cache[0] = () => unref(prev)())
-						}), null, 16, ["icon", "name"])) : createCommentVNode("v-if", true),
-						imageList.value.length > 1 && enableCarousel.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 2 }, buttonProps, {
-							icon: unref(icons).arrowRight || unref(icons).arrowLeft,
-							name: unref(t)("button.next"),
-							"button-style": { transform: unref(icons).arrowRight ? void 0 : "scaleX(-1)" },
-							onClick: _cache[1] || (_cache[1] = () => unref(next)())
-						}), null, 16, [
-							"icon",
-							"name",
-							"button-style"
-						])) : createCommentVNode("v-if", true),
-						enableFlip.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 3 }, buttonProps, {
-							icon: unref(icons).flipHorizontal,
-							name: unref(t)("button.flipX"),
-							onClick: flipHorizontal
-						}), null, 16, ["icon", "name"])) : createCommentVNode("v-if", true),
-						enableFlip.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 4 }, buttonProps, {
-							icon: unref(icons).flipVertical || unref(icons).flipHorizontal,
-							name: unref(t)("button.flipY"),
-							"button-style": { rotate: unref(icons).flipVertical ? void 0 : "90deg" },
-							onClick: flipVertical
-						}), null, 16, [
-							"icon",
-							"name",
-							"button-style"
-						])) : createCommentVNode("v-if", true),
-						enableRotate.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 5 }, buttonProps, {
-							icon: unref(icons).rotateLeft,
-							name: unref(t)("button.rotateLeft"),
-							onClick: rotateLeft
-						}), null, 16, ["icon", "name"])) : createCommentVNode("v-if", true),
-						enableRotate.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 6 }, buttonProps, {
-							icon: unref(icons).rotateRight || unref(icons).rotateLeft,
-							name: unref(t)("button.rotateRight"),
-							"button-style": { transform: unref(icons).rotateRight ? void 0 : "scaleX(-1)" },
-							onClick: rotateRight
-						}), null, 16, [
-							"icon",
-							"name",
-							"button-style"
-						])) : createCommentVNode("v-if", true)
-					]),
-					default: withCtx(() => [createElementVNode("img", {
-						ref_key: "_zoomElementRef",
-						ref: _zoomElementRef,
-						src: unref(imageSrc),
-						alt: __props.alt,
-						title: __props.title,
-						style: normalizeStyle(imageStyle.value)
-					}, null, 12, _hoisted_2)]),
-					_: 1
-				}, 8, ["position", "container-style"])]),
-				_: 1
-			}, 8, ["open"])], 64);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/image.vue
-var image_default = image_vue_vue_type_script_setup_true_lang_default;
-
-//#endregion
-export { image_default as t };

package/dist/modal-Duhc-vVa.js

@@ -1,4 +0,0 @@
-import "./composables-yny5gJo3.js";
-import { t as modal_default } from "./modal-Rc_RoeYA.js";
-
-export { modal_default as default };

package/dist/node-list-C1je2nLd.js

@@ -1,3 +0,0 @@
-import { t as node_list_default } from "./node-list-YhpHXdM_.js";
-
-export { node_list_default as default };

package/dist/previewers-D0VVcdjL.js

@@ -1,10 +0,0 @@
-import { defineAsyncComponent } from "vue";
-
-//#region src/components/previewers/index.ts
-const CODE_PREVIEWERS = {
-	html: defineAsyncComponent(() => import("./html-DXNqMvt_.js")),
-	mermaid: defineAsyncComponent(() => import("./mermaid-Ka1jnXrR.js"))
-};
-
-//#endregion
-export { CODE_PREVIEWERS as t };

package/dist/segmented-XdoLnuuq.js

@@ -1,6 +0,0 @@
-import "./composables-yny5gJo3.js";
-import "./tooltip-Bgbzbk4Q.js";
-import "./button-BQhuT7wh.js";
-import { t as segmented_default } from "./segmented-CaC54iz_.js";
-
-export { segmented_default as default };

package/dist/spin-wM2KE8mO.js

@@ -1,3 +0,0 @@
-import { t as spin_default } from "./spin--f5jNjBn.js";
-
-export { spin_default as default };

package/dist/table-R9gmCXm_.js

@@ -1,3 +0,0 @@
-import { t as table_default } from "./table-CaUMjs4M.js";
-
-export { table_default as default };

package/dist/tooltip-BJDs-A8d.js

@@ -1,4 +0,0 @@
-import "./composables-yny5gJo3.js";
-import { t as tooltip_default } from "./tooltip-Bgbzbk4Q.js";
-
-export { tooltip_default as default };

package/dist/vanilla-DA5bwIkr.js

@@ -1,4 +0,0 @@
-import "./composables-yny5gJo3.js";
-import { t as vanilla_default } from "./vanilla-BTOVqKl7.js";
-
-export { vanilla_default as default };

package/dist/zoom-container-KztuE4ri.js

@@ -1,6 +0,0 @@
-import "./composables-yny5gJo3.js";
-import "./tooltip-Bgbzbk4Q.js";
-import "./button-BQhuT7wh.js";
-import { t as zoom_container_default } from "./zoom-container-B1qbA-7z.js";
-
-export { zoom_container_default as default };