vue-stream-markdown 0.1.4 → 0.1.6

package/dist/image-BLlap3ce.js

@@ -0,0 +1,242 @@
+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 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
+		},
+		transformHardenUrl: {
+			type: Function,
+			required: false
+		}
+	},
+	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(() => {
+			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
+		});
+		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/{image-BDtPwitR.js → image-IKvFWz2r.js}

@@ -1,18 +1,16 @@
-import { B as useContext, O as save, g as useHardenSanitizers, u as useI18n, z as useControls } from "./composables-Cx0nvyHl.js";
-import "./tooltip-3UDC9mw-.js";
-import { t as button_default } from "./button-jFTF378X.js";
-import { t as error_component_default } from "./error-component-Bhl770lu.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";
+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
 const _hoisted_1 = { "data-stream-markdown": "image-wrapper" };
-const _hoisted_2 = [
-	"src",
-	"alt",
-	"title"
-];
-const _hoisted_3 = {
+const _hoisted_2 = {
 	key: 0,
 	"data-stream-markdown": "image-caption"
 };
@@ -31,16 +29,8 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Object,
 			required: true
 		},
-		mediumZoom: {
-			type: Object,
-			required: true
-		},
-		indexKey: {
-			type: [Number, String],
-			required: true
-		},
-		getContainer: {
-			type: Function,
+		nodeKey: {
+			type: String,
 			required: true
 		},
 		controls: {
@@ -82,24 +72,23 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 	},
 	setup(__props) {
 		const props = __props;
-		const fileExtensionPattern = /\.[^/.]+$/;
 		const { t } = useI18n();
 		const { icons } = useContext();
 		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 enableDownload = computed(() => isControlEnabled("image.download"));
+		const enablePreview = computed(() => isControlEnabled("image.preview"));
 		const fallback = computed(() => {
 			var _props$imageOptions;
 			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,
@@ -117,8 +106,6 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		});
 		function handleLoaded() {
 			imageLoaded.value = true;
-			if (fallbackAttempted.value) return;
-			if (imgRef.value) props.mediumZoom.attach(imgRef.value);
 		}
 		function handleError() {
 			if (fallback.value && !fallbackAttempted.value) {
@@ -129,29 +116,13 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		}
 		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);
+			saveImage(imageSrc.value, alt.value);
 		}
 		function handleMouseEnter() {
-			if (maskRef.value) maskRef.value.style.display = "block";
+			if (maskRef.value) maskRef.value.style.opacity = 1;
 		}
 		function handleMouseLeave() {
-			if (maskRef.value) maskRef.value.style.display = "none";
+			if (maskRef.value) maskRef.value.style.opacity = 0;
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("figure", {
@@ -165,7 +136,7 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					ref_key: "maskRef",
 					ref: maskRef,
 					"data-stream-markdown": "image-mask"
-				}, [!isLoading.value && showDownload.value ? (openBlock(), createBlock(button_default, {
+				}, [!isLoading.value && enableDownload.value ? (openBlock(), createBlock(button_default, {
 					key: 0,
 					"data-stream-markdown": "image-download-button",
 					icon: unref(icons).download,
@@ -177,37 +148,31 @@ var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					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)]),
+				!isLoading.value && !unref(isHardenUrl) && typeof unref(transformedUrl) === "string" ? (openBlock(), createBlock(image_default$1, {
+					key: unref(transformedUrl),
+					src: unref(transformedUrl),
+					alt: alt.value,
+					title: title.value,
+					preview: !fallbackAttempted.value && enablePreview.value,
+					controls: unref(controls),
+					"transform-harden-url": unref(transformHardenUrl),
+					onLoad: handleLoaded,
+					onError: handleError
+				}, null, 8, [
+					"src",
+					"alt",
+					"title",
+					"preview",
+					"controls",
+					"transform-harden-url"
+				])) : unref(isHardenUrl) || loadError.value ? (openBlock(), createBlock(resolveDynamicComponent(Error.value), mergeProps({
+					key: 3,
+					variant: unref(isHardenUrl) ? "harden-image" : "image"
+				}, props), {
+					default: withCtx(() => [createTextVNode(toDisplayString(title.value), 1)]),
 					_: 1
-				})
-			]), showCaption.value && title.value ? (openBlock(), createElementBlock("figcaption", _hoisted_3, toDisplayString(title.value), 1)) : createCommentVNode("v-if", true)], 36);
+				}, 16, ["variant"])) : createCommentVNode("v-if", true)
+			]), showCaption.value && title.value ? (openBlock(), createElementBlock("figcaption", _hoisted_2, toDisplayString(title.value), 1)) : createCommentVNode("v-if", true)], 36);
 		};
 	}
 });

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

@@ -43,18 +43,23 @@
   opacity: 0.5;
 }
 
-.stream-markdown .tippy-box {
+.stream-markdown [data-stream-markdown='tooltip'] {
   background: var(--popover);
   color: var(--popover-foreground);
   border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  z-index: 100;
 }
 
-.stream-markdown .tippy-arrow {
-  color: var(--popover);
+.stream-markdown [data-stream-markdown='tooltip-overlay'] {
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
-.stream-markdown .tippy-box > .tippy-svg-arrow {
-  border-top-color: var(--popover);
+.stream-markdown [data-stream-markdown='dropdown-overlay'] {
+  padding: 0.25rem;
 }
 
 .stream-markdown [data-stream-markdown='button'] {
@@ -78,10 +83,6 @@
   background-color: var(--accent);
 }
 
-.stream-markdown [data-stream-markdown='dropdown-overlay'] {
-  padding: 0.25rem;
-}
-
 .stream-markdown [data-stream-markdown='error-component'] {
   display: inline-block;
   color: var(--muted-foreground);
@@ -144,15 +145,6 @@
   flex-shrink: 0;
   padding-inline: 1rem;
   padding-block: 0.5rem;
-  background-color: color-mix(in oklab, var(--muted) 80%, transparent);
-  color: var(--muted-foreground);
-  border-bottom: 1px solid var(--border);
-}
-
-.stream-markdown [data-stream-markdown='modal-actions'] {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
 }
 
 .stream-markdown [data-stream-markdown='modal-body'] {
@@ -176,17 +168,6 @@
   transform: translateX(-50%);
 }
 
-.stream-markdown .typewriter-enter-from {
-  opacity: 0;
-}
-.stream-markdown .typewriter-enter-active {
-  transition: opacity var(--typewriter-transition-duration) ease-out;
-  will-change: opacity;
-}
-.stream-markdown .typewriter-enter-to {
-  opacity: 1;
-}
-
 .stream-markdown [data-stream-markdown='segmented'] {
   display: flex;
   align-items: center;
@@ -247,11 +228,6 @@
   line-height: 1.25rem;
 }
 
-.stream-markdown [data-stream-markdown='tooltip-overlay'] {
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
-}
-
 .stream-markdown [data-stream-markdown='zoom-container'] {
   height: 100%;
   position: relative;
@@ -315,12 +291,6 @@
   color: var(--muted-foreground);
 }
 
-@media (max-width: 1024px) {
-  .stream-markdown [data-stream-markdown='code-block-header'] {
-    padding-inline: 0.75rem;
-  }
-}
-
 .stream-markdown [data-stream-markdown='code-block-content'] {
   overflow: auto;
 }
@@ -328,11 +298,13 @@
 .stream-markdown [data-stream-markdown='code-block-header'] > :first-child {
   flex: 1;
 }
+
 .stream-markdown [data-stream-markdown='code-block-header'] > :last-child {
   flex: 1;
   display: flex;
   justify-content: flex-end;
 }
+
 .stream-markdown [data-stream-markdown='code-block-header'] > :nth-child(2) {
   position: absolute;
   left: 50%;
@@ -430,6 +402,15 @@
   line-height: 1.25rem;
 }
 
+.stream-markdown [data-stream-markdown='image'] {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  border-radius: 0.5rem;
+  object-fit: contain;
+  cursor: pointer;
+}
+
 .stream-markdown [data-stream-markdown='image-figure'] {
   display: inline-block;
 }
@@ -439,14 +420,6 @@
   text-align: center;
 }
 
-.stream-markdown [data-stream-markdown='image'] {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  object-fit: contain;
-  border-radius: 0.5rem;
-}
-
 .stream-markdown [data-stream-markdown='image-caption'] {
   text-align: center;
   font-size: 0.875rem;
@@ -455,12 +428,13 @@
 }
 
 .stream-markdown [data-stream-markdown='image-mask'] {
-  display: none;
+  opacity: 0;
   position: absolute;
   inset: 0;
   border-radius: 0.5rem;
   background-color: rgb(0 0 0 / 0.1);
   pointer-events: none;
+  transition: opacity var(--default-transition-duration) ease;
 }
 
 .stream-markdown [data-stream-markdown='image-download-button'] {
@@ -617,31 +591,62 @@
   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;
+  }
+  .stream-markdown [data-stream-markdown='zoom-controls'] {
+    gap: 0;
+  }
+}
+
+.stream-markdown .typewriter-enter-from {
+  opacity: 0;
+}
+.stream-markdown .typewriter-enter-active {
+  transition: opacity var(--typewriter-transition-duration) ease-out;
+  will-change: opacity;
+}
+.stream-markdown .typewriter-enter-to {
+  opacity: 1;
+}
+
 .stream-markdown .modal-enter-from,
 .stream-markdown .modal-leave-to {
   opacity: 0;
+  transform: scale(0.95);
 }
 .stream-markdown .modal-enter-active,
 .stream-markdown .modal-leave-active {
-  transition: opacity var(--default-transition-duration) ease;
-}
-
-.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);
-}
 
 @keyframes spin {
   from {