vue-stream-markdown 0.1.5 → 0.1.6

package/dist/corner-down-left-jxlwq3ox.js

@@ -0,0 +1,24 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/lucide/corner-down-left
+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("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }), createElementVNode("path", { d: "m9 10l-5 5l5 5" })], -1)])]);
+}
+var corner_down_left_default = markRaw({
+	name: "lucide-corner-down-left",
+	render
+});
+
+//#endregion
+export { corner_down_left_default as default };

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

@@ -1,4 +1,5 @@
-import { t as node_list_default } from "./node-list-YhpHXdM_.js";
+import "./composables-DWipZHuF.js";
+import { t as node_list_default } from "./node-list--v2wbxOo.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/delete.vue?vue&type=script&setup=true&lang.ts
@@ -18,8 +19,8 @@ var delete_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			type: Object,
 			required: true
 		},
-		indexKey: {
-			type: [Number, String],
+		nodeKey: {
+			type: String,
 			required: true
 		},
 		controls: {

package/dist/dist-CYkm26BF.js

@@ -0,0 +1,119 @@
+//#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);
+	}
+}
+function treeFilter(tree, predicate, options = {}) {
+	const utils = createTreeUtils(options);
+	const traverse = (nodes, parents = [], depth = 0) => {
+		const result = [];
+		for (let i = 0; i < nodes.length; i++) {
+			const node = nodes[i];
+			const meta = {
+				depth,
+				index: i,
+				parents
+			};
+			if (predicate(node, meta)) {
+				const newNode = { ...node };
+				if (utils.hasChildren(node, meta)) {
+					const children = traverse(utils.getChildren(node, meta), [...parents, node], depth + 1);
+					const childrenKey = utils.getChildrenKey(node, meta);
+					if (children.length > 0) newNode[childrenKey] = children;
+					else delete newNode[childrenKey];
+				}
+				result.push(newNode);
+			}
+		}
+		return result;
+	};
+	return traverse(tree);
+}
+
+//#endregion
+export { treeFlatFilter as n, treeFilter as t };

package/dist/dropdown-CtWjJiAf.js

@@ -0,0 +1,5 @@
+import "./composables-DWipZHuF.js";
+import "./tooltip-Bdt9-aQx.js";
+import { n as dropdown_default } from "./button-B2ebQt7R.js";
+
+export { dropdown_default as default };

package/dist/{emphasis-B-2R_0Q5.js → emphasis-BjLkIDQB.js}

@@ -1,4 +1,5 @@
-import { t as node_list_default } from "./node-list-YhpHXdM_.js";
+import "./composables-DWipZHuF.js";
+import { t as node_list_default } from "./node-list--v2wbxOo.js";
 import { createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
 
 //#region src/components/renderers/emphasis.vue?vue&type=script&setup=true&lang.ts
@@ -18,8 +19,8 @@ var emphasis_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			type: Object,
 			required: true
 		},
-		indexKey: {
-			type: [Number, String],
+		nodeKey: {
+			type: String,
 			required: true
 		},
 		controls: {

package/dist/{en-US-Kw2LYAMk.js → en-US-K7SXR3gy.js}

@@ -15,7 +15,8 @@ var button = {
 	"rotateLeft": "Rotate Left",
 	"rotateRight": "Rotate Right",
 	"previous": "Previous",
-	"next": "Next"
+	"next": "Next",
+	"back": "Back"
 };
 var error = {
 	"vanilla": "Error",

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

@@ -1,4 +1,4 @@
-import { H as useContext, u as useI18n } from "./composables-yny5gJo3.js";
+import { H as useContext, P as useI18n } from "./composables-DWipZHuF.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/error-component-DtcRn_0A.js

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

package/dist/footnote-definition-BmS8hchP.js

@@ -0,0 +1,103 @@
+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 { 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
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { "data-stream-markdown": "footnote-definition-label" };
+var footnote_definition_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "footnote-definition",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		markdownParser: {
+			type: Object,
+			required: true
+		},
+		nodeRenderers: {
+			type: Object,
+			required: true
+		},
+		nodeKey: {
+			type: String,
+			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 { t } = useI18n();
+		const { icons, getContainer } = useContext();
+		const id = computed(() => props.node.identifier);
+		const label = computed(() => props.node.label ?? id.value);
+		const title = computed(() => `${label.value}.`);
+		function scrollToReference() {
+			const footnoteElement = (getContainer() || document.body).querySelector(`#footnote-reference-${id.value}`);
+			if (!footnoteElement) return;
+			footnoteElement.scrollIntoView({ behavior: "smooth" });
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("a", {
+				id: `footnote-definition-${id.value}`,
+				"data-stream-markdown": "footnote-definition"
+			}, [
+				createElementVNode("span", _hoisted_2, toDisplayString(title.value), 1),
+				createVNode(node_list_default, mergeProps(props, { nodes: __props.node.children }), null, 16, ["nodes"]),
+				createVNode(button_default, {
+					"data-stream-markdown": "footnote-definition-button",
+					name: unref(t)("button.back"),
+					icon: unref(icons).cornerDownLeft,
+					"icon-style": { color: "var(--primary)" },
+					"button-style": { padding: "0.25rem" },
+					onClick: scrollToReference
+				}, null, 8, ["name", "icon"])
+			], 8, _hoisted_1);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/renderers/footnote-definition.vue
+var footnote_definition_default = footnote_definition_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { footnote_definition_default as default };

package/dist/footnote-reference-Z2tITeCE.js

@@ -0,0 +1,86 @@
+import { H as useContext } from "./composables-DWipZHuF.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, openBlock, toDisplayString } from "vue";
+
+//#region src/components/renderers/footnote-reference.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["id"];
+var footnote_reference_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "footnote-reference",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		markdownParser: {
+			type: Object,
+			required: true
+		},
+		nodeRenderers: {
+			type: Object,
+			required: true
+		},
+		nodeKey: {
+			type: String,
+			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 { getContainer } = useContext();
+		const id = computed(() => props.node.identifier);
+		const label = computed(() => props.node.label ?? id.value);
+		function scrollToFootnote() {
+			const footnoteElement = (getContainer() || document.body).querySelector(`#footnote-definition-${id.value}`);
+			if (!footnoteElement) return;
+			footnoteElement.scrollIntoView({ behavior: "smooth" });
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("sup", {
+				"data-stream-markdown": "footnote-reference",
+				onClick: scrollToFootnote
+			}, [createElementVNode("a", { id: `footnote-reference-${id.value}` }, "[" + toDisplayString(label.value) + "]", 9, _hoisted_1)]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/renderers/footnote-reference.vue
+var footnote_reference_default = footnote_reference_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { footnote_reference_default as default };

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

@@ -1,4 +1,5 @@
-import { t as node_list_default } from "./node-list-YhpHXdM_.js";
+import "./composables-DWipZHuF.js";
+import { t as node_list_default } from "./node-list--v2wbxOo.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
@@ -17,8 +18,8 @@ var heading_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			type: Object,
 			required: true
 		},
-		indexKey: {
-			type: [Number, String],
+		nodeKey: {
+			type: String,
 			required: true
 		},
 		controls: {

package/dist/{html-DXNqMvt_.js → html-DFU0myJP.js}

@@ -17,8 +17,8 @@ var html_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			type: Object,
 			required: true
 		},
-		indexKey: {
-			type: [Number, String],
+		nodeKey: {
+			type: String,
 			required: true
 		},
 		controls: {

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

@@ -1,102 +1,11 @@
-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 { H as useContext, P as useI18n, V as useControls, j as saveImage, m as useMediumZoom } from "./composables-DWipZHuF.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 { 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",
@@ -137,6 +46,10 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: [Boolean, Object],
 			required: false,
 			default: true
+		},
+		transformHardenUrl: {
+			type: Function,
+			required: false
 		}
 	},
 	emits: ["load", "error"],
@@ -148,7 +61,9 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		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 imageList = computed(() => {
+			return [...new Set(imageNodes.value.map((node) => node.url))].filter((url) => props.transformHardenUrl ? props.transformHardenUrl(url) : url).filter(Boolean);
+		});
 		const { state: imageSrc, prev, next } = useCycleList(imageList, {
 			initialValue: props.src,
 			fallbackIndex: 0

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

@@ -1,11 +1,11 @@
-import { H as useContext, V as useControls, g as useHardenSanitizers, k as saveImage, u as useI18n } from "./composables-yny5gJo3.js";
-import "./tooltip-Bgbzbk4Q.js";
-import { t as button_default } from "./button-BQhuT7wh.js";
-import "./modal-Rc_RoeYA.js";
-import { t as error_component_default } from "./error-component-Bb0gIZsx.js";
-import { t as image_default$1 } from "./image-DvOGBhi-.js";
-import "./zoom-container-B1qbA-7z.js";
-import { t as spin_default } from "./spin--f5jNjBn.js";
+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 { 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
@@ -29,8 +29,8 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: true
 		},
-		indexKey: {
-			type: [Number, String],
+		nodeKey: {
+			type: String,
 			required: true
 		},
 		controls: {
@@ -88,7 +88,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			return ((_props$imageOptions = props.imageOptions) === null || _props$imageOptions === void 0 ? void 0 : _props$imageOptions.fallback) ?? "";
 		});
 		const imageSrc = computed(() => fallbackAttempted.value && fallback.value ? fallback.value : props.node.url);
-		const { transformedUrl, isHardenUrl } = useHardenSanitizers({
+		const { transformedUrl, isHardenUrl, transformHardenUrl } = useSanitizers({
 			url: imageSrc,
 			hardenOptions,
 			loading: isLoading,
@@ -155,6 +155,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					title: title.value,
 					preview: !fallbackAttempted.value && enablePreview.value,
 					controls: unref(controls),
+					"transform-harden-url": unref(transformHardenUrl),
 					onLoad: handleLoaded,
 					onError: handleError
 				}, null, 8, [
@@ -162,7 +163,8 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					"alt",
 					"title",
 					"preview",
-					"controls"
+					"controls",
+					"transform-harden-url"
 				])) : unref(isHardenUrl) || loadError.value ? (openBlock(), createBlock(resolveDynamicComponent(Error.value), mergeProps({
 					key: 3,
 					variant: unref(isHardenUrl) ? "harden-image" : "image"

package/dist/image-aT9xxnwh.js

@@ -0,0 +1,8 @@
+import "./composables-DWipZHuF.js";
+import "./tooltip-Bdt9-aQx.js";
+import "./button-B2ebQt7R.js";
+import "./modal-CEqU9Ubu.js";
+import "./zoom-container-f44XxzOI.js";
+import { t as image_default } from "./image-BLlap3ce.js";
+
+export { image_default as default };

package/dist/index.css

@@ -591,6 +591,31 @@
   padding: 1rem;
 }
 
+.stream-markdown [data-stream-markdown='footnote-reference'] {
+  color: var(--primary);
+  cursor: pointer;
+}
+
+.stream-markdown [data-stream-markdown='footnote-definition'] {
+  color: var(--muted-foreground);
+}
+
+.stream-markdown [data-stream-markdown='footnote-definition'] [data-stream-markdown='footnote-definition-label'] {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.25rem;
+}
+
+.stream-markdown [data-stream-markdown='footnote-definition'] [data-stream-markdown='footnote-definition-button'] {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.25rem;
+}
+
+.stream-markdown [data-stream-markdown='footnote-definition'] p {
+  display: inline;
+}
+
 @media (max-width: 1024px) {
   .stream-markdown [data-stream-markdown='code-block-header'] {
     padding-inline: 0.75rem;