vue-stream-markdown 0.1.6 → 0.2.0

package/dist/{delete-DQ21z5-F.js → delete-CB-OS2WZ.js}

@@ -1,5 +1,5 @@
-import "./composables-DWipZHuF.js";
-import { t as node_list_default } from "./node-list--v2wbxOo.js";
+import "./composables-DuQ72m6O.js";
+import { t as node_list_default } from "./node-list-D7eKaZGS.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/delete.vue?vue&type=script&setup=true&lang.ts

package/dist/dropdown-BB3nyts8.js

@@ -0,0 +1,6 @@
+import "./composables-DuQ72m6O.js";
+import "./tooltip-CnO7OPL1.js";
+import { n as dropdown_default } from "./button-BDO3n0n_.js";
+import "./icon-PEivHbuv.js";
+
+export { dropdown_default as default };

package/dist/{emphasis-BjLkIDQB.js → emphasis-BmUoyBRK.js}

@@ -1,5 +1,5 @@
-import "./composables-DWipZHuF.js";
-import { t as node_list_default } from "./node-list--v2wbxOo.js";
+import "./composables-DuQ72m6O.js";
+import { t as node_list_default } from "./node-list-D7eKaZGS.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/emphasis.vue?vue&type=script&setup=true&lang.ts

package/dist/{error-component-DSOVrE5J.js → error-component-CtZr0_st.js}

@@ -1,4 +1,5 @@
-import { H as useContext, P as useI18n } from "./composables-DWipZHuF.js";
+import { W as useContext, y as useI18n } from "./composables-DuQ72m6O.js";
+import { t as icon_default } from "./icon-PEivHbuv.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
@@ -36,8 +37,10 @@ var error_component_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		}));
 		const icon = computed(() => {
 			if (props.icon) return props.icon;
-			if (icons.value[props.variant]) return icons.value[props.variant];
-			return icons.value[props.variant.replace("harden-", "")] || icons.value.error;
+			if (icons.value[props.variant]) return props.variant;
+			const name = props.variant.replace("harden-", "");
+			if (icons.value[name]) return name;
+			return "error";
 		});
 		const message = computed(() => props.message ? props.message : messages.value[props.variant] || messages.value.vanilla);
 		const isHarden = computed(() => {
@@ -46,7 +49,10 @@ var error_component_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", _hoisted_1, [
-				createElementVNode("div", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(icon.value)))]),
+				createElementVNode("div", _hoisted_2, [typeof icon.value === "string" ? (openBlock(), createBlock(icon_default, {
+					key: 0,
+					icon: icon.value
+				}, null, 8, ["icon"])) : (openBlock(), createBlock(resolveDynamicComponent(icon.value), { key: 1 }))]),
 				isHarden.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true),
 				createTextVNode(" [" + toDisplayString(message.value) + "] ", 1)
 			]);

package/dist/error-component-biOT0E-h.js

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

package/dist/{footnote-definition-BmS8hchP.js → footnote-definition-55TjXXwa.js}

@@ -1,7 +1,8 @@
-import { H as useContext, P as useI18n } from "./composables-DWipZHuF.js";
-import { t as node_list_default } from "./node-list--v2wbxOo.js";
-import "./tooltip-Bdt9-aQx.js";
-import { t as button_default } from "./button-B2ebQt7R.js";
+import { W as useContext, y as useI18n } from "./composables-DuQ72m6O.js";
+import { t as node_list_default } from "./node-list-D7eKaZGS.js";
+import "./tooltip-CnO7OPL1.js";
+import { t as button_default } from "./button-BDO3n0n_.js";
+import "./icon-PEivHbuv.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
@@ -66,7 +67,7 @@ var footnote_definition_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 	setup(__props) {
 		const props = __props;
 		const { t } = useI18n();
-		const { icons, getContainer } = useContext();
+		const { getContainer } = useContext();
 		const id = computed(() => props.node.identifier);
 		const label = computed(() => props.node.label ?? id.value);
 		const title = computed(() => `${label.value}.`);
@@ -85,11 +86,11 @@ var footnote_definition_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				createVNode(button_default, {
 					"data-stream-markdown": "footnote-definition-button",
 					name: unref(t)("button.back"),
-					icon: unref(icons).cornerDownLeft,
+					icon: "cornerDownLeft",
 					"icon-style": { color: "var(--primary)" },
 					"button-style": { padding: "0.25rem" },
 					onClick: scrollToReference
-				}, null, 8, ["name", "icon"])
+				}, null, 8, ["name"])
 			], 8, _hoisted_1);
 		};
 	}

package/dist/{footnote-reference-Z2tITeCE.js → footnote-reference-lk2rvC4Q.js}

@@ -1,4 +1,4 @@
-import { H as useContext } from "./composables-DWipZHuF.js";
+import { W as useContext } from "./composables-DuQ72m6O.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, openBlock, toDisplayString } from "vue";
 
 //#region src/components/renderers/footnote-reference.vue?vue&type=script&setup=true&lang.ts

package/dist/{heading-BwBFJB_E.js → heading-BlOK3uk2.js}

@@ -1,5 +1,5 @@
-import "./composables-DWipZHuF.js";
-import { t as node_list_default } from "./node-list--v2wbxOo.js";
+import "./composables-DuQ72m6O.js";
+import { t as node_list_default } from "./node-list-D7eKaZGS.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

package/dist/icon-PEivHbuv.js

@@ -0,0 +1,67 @@
+import { W as useContext } from "./composables-DuQ72m6O.js";
+import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref } from "vue";
+
+//#region src/components/icon.vue?vue&type=script&setup=true&lang.ts
+var icon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "icon",
+	props: {
+		icon: {
+			type: null,
+			required: true
+		},
+		width: {
+			type: Number,
+			required: false,
+			default: 14
+		},
+		height: {
+			type: Number,
+			required: false,
+			default: 14
+		},
+		class: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { icons } = useContext();
+		const Icon = computed(() => typeof props.icon === "string" ? icons.value[props.icon] : props.icon);
+		const iconStyle = computed(() => ({
+			width: `${props.width}px`,
+			height: `${props.height}px`
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-stream-markdown": "icon",
+				style: normalizeStyle(iconStyle.value)
+			}, [createVNode(unref(Icon), {
+				width: __props.width,
+				height: __props.height,
+				class: normalizeClass(props.class),
+				style: normalizeStyle(__props.style)
+			}, null, 8, [
+				"width",
+				"height",
+				"class",
+				"style"
+			])], 4);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/icon.vue
+var icon_default = icon_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { icon_default as t };

package/dist/icon-mUoYnA6R.js

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

package/dist/image-B6Pw2YBI.js

@@ -0,0 +1,9 @@
+import "./composables-DuQ72m6O.js";
+import "./tooltip-CnO7OPL1.js";
+import "./button-BDO3n0n_.js";
+import "./icon-PEivHbuv.js";
+import "./modal-DrPdD2g1.js";
+import "./zoom-container-CrKx_BbS.js";
+import { t as image_default } from "./image-VMGQj_VU.js";
+
+export { image_default as default };

package/dist/{image-IKvFWz2r.js → image-Bqn98dDB.js}

@@ -1,11 +1,12 @@
-import { H as useContext, P as useI18n, V as useControls, i as useSanitizers, j as saveImage } from "./composables-DWipZHuF.js";
-import "./tooltip-Bdt9-aQx.js";
-import { t as button_default } from "./button-B2ebQt7R.js";
-import "./modal-CEqU9Ubu.js";
-import { t as error_component_default } from "./error-component-DSOVrE5J.js";
-import "./zoom-container-f44XxzOI.js";
-import { t as image_default$1 } from "./image-BLlap3ce.js";
-import { t as spin_default } from "./spin-D4Oi_m7j.js";
+import { B as saveImage, U as useControls, i as useSanitizers, y as useI18n } from "./composables-DuQ72m6O.js";
+import "./tooltip-CnO7OPL1.js";
+import { t as button_default } from "./button-BDO3n0n_.js";
+import "./icon-PEivHbuv.js";
+import "./modal-DrPdD2g1.js";
+import { t as error_component_default } from "./error-component-CtZr0_st.js";
+import "./zoom-container-CrKx_BbS.js";
+import { t as image_default$1 } from "./image-VMGQj_VU.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";
 
 //#region src/components/renderers/image.vue?vue&type=script&setup=true&lang.ts
@@ -73,7 +74,6 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	setup(__props) {
 		const props = __props;
 		const { t } = useI18n();
-		const { icons } = useContext();
 		const { controls, hardenOptions } = toRefs(props);
 		const { isControlEnabled } = useControls({ controls });
 		const maskRef = ref();
@@ -139,14 +139,14 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				}, [!isLoading.value && enableDownload.value ? (openBlock(), createBlock(button_default, {
 					key: 0,
 					"data-stream-markdown": "image-download-button",
-					icon: unref(icons).download,
+					icon: "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),
+				}, 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, {
 					key: unref(transformedUrl),
@@ -156,6 +156,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					preview: !fallbackAttempted.value && enablePreview.value,
 					controls: unref(controls),
 					"transform-harden-url": unref(transformHardenUrl),
+					"node-props": props,
 					onLoad: handleLoaded,
 					onError: handleError
 				}, null, 8, [

package/dist/{image-BLlap3ce.js → image-VMGQj_VU.js}

@@ -1,9 +1,9 @@
-import { H as useContext, P as useI18n, V as useControls, j as saveImage, m as useMediumZoom } from "./composables-DWipZHuF.js";
+import { B as saveImage, U as useControls, W as useContext, m as useMediumZoom, y as useI18n } from "./composables-DuQ72m6O.js";
 import { n as treeFlatFilter } from "./dist-CYkm26BF.js";
-import { t as button_default } from "./button-B2ebQt7R.js";
-import { t as modal_default } from "./modal-CEqU9Ubu.js";
-import { t as zoom_container_default } from "./zoom-container-f44XxzOI.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, toRefs, unref, watch, withCtx } from "vue";
+import { t as button_default } from "./button-BDO3n0n_.js";
+import { t as modal_default } from "./modal-DrPdD2g1.js";
+import { t as zoom_container_default } from "./zoom-container-CrKx_BbS.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";
 
 //#region src/components/image.vue?vue&type=script&setup=true&lang.ts
@@ -50,6 +50,10 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		transformHardenUrl: {
 			type: Function,
 			required: false
+		},
+		nodeProps: {
+			type: Object,
+			required: true
 		}
 	},
 	emits: ["load", "error"],
@@ -59,7 +63,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const { margin, controls } = toRefs(props);
 		const { t } = useI18n();
 		const { icons, parsedNodes } = useContext();
-		const { isControlEnabled, getControlValue } = useControls({ controls });
+		const { isControlEnabled, getControlValue, resolveControls } = useControls({ controls });
 		const imageNodes = computed(() => treeFlatFilter(parsedNodes.value, (node) => node.type === "image" && !node.loading));
 		const imageList = computed(() => {
 			return [...new Set(imageNodes.value.map((node) => node.url))].filter((url) => props.transformHardenUrl ? props.transformHardenUrl(url) : url).filter(Boolean);
@@ -96,6 +100,61 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			transition: "transform 0.3s ease",
 			...elementStyle.value
 		}));
+		const builtinControls = computed(() => [
+			{
+				key: "download",
+				icon: "download",
+				name: t("button.download"),
+				onClick: download,
+				visible: () => !!imageSrc.value && enableDownload.value
+			},
+			{
+				key: "previous",
+				icon: "arrowLeft",
+				name: t("button.previous"),
+				onClick: () => prev(),
+				visible: () => imageList.value.length > 1 && enableCarousel.value
+			},
+			{
+				key: "next",
+				icon: icons.value.arrowRight ? "arrowRight" : "arrowLeft",
+				name: t("button.next"),
+				onClick: () => next(),
+				buttonStyle: icons.value.arrowRight ? void 0 : { transform: "scaleX(-1)" },
+				visible: () => imageList.value.length > 1 && enableCarousel.value
+			},
+			{
+				key: "flipX",
+				icon: "flipHorizontal",
+				name: t("button.flipX"),
+				onClick: flipHorizontal,
+				visible: () => enableFlip.value
+			},
+			{
+				key: "flipY",
+				icon: icons.value.flipVertical ? "flipVertical" : "flipHorizontal",
+				name: t("button.flipY"),
+				onClick: flipVertical,
+				buttonStyle: icons.value.flipVertical ? void 0 : { rotate: "90deg" },
+				visible: () => enableFlip.value
+			},
+			{
+				key: "rotateLeft",
+				icon: "rotateLeft",
+				name: t("button.rotateLeft"),
+				onClick: rotateLeft,
+				visible: () => enableRotate.value
+			},
+			{
+				key: "rotateRight",
+				icon: icons.value.rotateRight ? "rotateRight" : "rotateLeft",
+				name: t("button.rotateRight"),
+				onClick: rotateRight,
+				buttonStyle: icons.value.rotateRight ? void 0 : { transform: "scaleX(-1)" },
+				visible: () => enableRotate.value
+			}
+		]);
+		const zoomControls = computed(() => resolveControls("image", builtinControls.value, props.nodeProps));
 		function handleLoad(event) {
 			loaded.value = true;
 			emits("load", event);
@@ -151,7 +210,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				onClick: handleOpen
 			}, null, 40, _hoisted_1), createVNode(modal_default, {
 				open: open.value,
-				"onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event),
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
 				transition: "",
 				"modal-style": { backgroundColor: "rgba(0, 0, 0, 0.45)" },
 				close: handleClose
@@ -166,58 +225,15 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					},
 					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)
-					]),
+					controls: withCtx((buttonProps) => [(openBlock(true), createElementBlock(Fragment, null, renderList(zoomControls.value, (item) => {
+						return openBlock(), createBlock(button_default, mergeProps({ ref_for: true }, {
+							...buttonProps,
+							...item
+						}, {
+							key: item.key,
+							onClick: item.onClick
+						}), null, 16, ["onClick"]);
+					}), 128))]),
 					default: withCtx(() => [createElementVNode("img", {
 						ref_key: "_zoomElementRef",
 						ref: _zoomElementRef,

package/dist/{index.css → index.css/index.css}

@@ -48,7 +48,7 @@
   color: var(--popover-foreground);
   border: 1px solid var(--border);
   border-radius: 0.5rem;
-  z-index: 100;
+  z-index: 110;
 }
 
 .stream-markdown [data-stream-markdown='tooltip-overlay'] {
@@ -250,7 +250,7 @@
 
 .stream-markdown [data-stream-markdown='zoom-controls'] {
   position: absolute;
-  z-index: 10;
+  z-index: 1;
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -270,7 +270,7 @@
   margin-block: 1rem;
   border-radius: 0.75rem;
   border: 1px solid var(--border);
-  overflow: hidden;
+  overflow: clip;
 }
 
 .stream-markdown [data-stream-markdown='code-block'][data-collapsed='true'] [data-stream-markdown='code-block-header'] {
@@ -278,7 +278,9 @@
 }
 
 .stream-markdown [data-stream-markdown='code-block-header'] {
-  position: relative;
+  position: sticky;
+  top: 0;
+  z-index: 5;
   display: flex;
   justify-content: space-between;
   align-items: center;