@twango/twiki 0.0.0-stage → 0.1.0-rc.0

package/site/src/lib/components/doc/enhancements.ts

@@ -0,0 +1,146 @@
+import type { Attachment } from 'svelte/attachments';
+import { mermaidDiagrams } from '$lib/components/embeds/mermaid';
+import { imagePreviews } from './image-preview';
+
+/**
+ * Client-side enhancements applied to rendered markdown content. Each is an
+ * attachment that runs after the article element is in the DOM and re-runs when
+ * its keyed dependency (the current route key) changes.
+ *
+ * Ported from cca minus filePreviews/kotlinPlayground (dropped for wisconsin).
+ * `enhanceArticle` below is the single entry point composing all of them
+ * (copy buttons, callout folding, lazy mermaid hydration). External-link
+ * icons need no JS — they are baked in at build time (build-content.ts
+ * CrawlLinks port) and styled by layout.css `.external-icon`.
+ */
+
+export { mermaidDiagrams };
+
+/** Single entry point: applies every content enhancement to the article. */
+export function enhanceArticle(dep: unknown): Attachment<HTMLElement> {
+	return (node) => {
+		const cleanups = [
+			copyButtons(dep)(node),
+			headingAnchors(dep)(node),
+			calloutFold(dep)(node),
+			mermaidDiagrams(dep)(node),
+			imagePreviews(dep)(node)
+		];
+		return () => {
+			for (const cleanup of cleanups) cleanup?.();
+		};
+	};
+}
+
+const LINK_ICON =
+	'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>';
+
+/** Restore Quartz's visible deep-link affordance without changing heading ids. */
+export function headingAnchors(_dep: unknown): Attachment<HTMLElement> {
+	return (node) => {
+		const anchors = Array.from(
+			node.querySelectorAll<HTMLElement>('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]')
+		).map((heading) => {
+			const anchor = document.createElement('a');
+			anchor.className = 'heading-anchor';
+			anchor.href = `#${encodeURIComponent(heading.id)}`;
+			anchor.setAttribute('aria-label', `Link to ${heading.textContent?.trim() || 'heading'}`);
+			anchor.title = 'Link to this heading';
+			anchor.innerHTML = LINK_ICON;
+			heading.appendChild(anchor);
+			return anchor;
+		});
+		return () => anchors.forEach((anchor) => anchor.remove());
+	};
+}
+
+const COPY_ICON =
+	'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>';
+const CHECK_ICON =
+	'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>';
+
+/**
+ * Adds a copy-to-clipboard button to every Shiki code block. Keyed on `dep` so
+ * it re-runs when navigating between docs.
+ */
+export function copyButtons(_dep: unknown): Attachment<HTMLElement> {
+	return (node) => {
+		const blocks = Array.from(node.querySelectorAll('pre.shiki'));
+		const cleanups = blocks.map((pre) => {
+			const wrapper = document.createElement('div');
+			wrapper.className = 'code-block';
+			pre.replaceWith(wrapper);
+			wrapper.appendChild(pre);
+
+			const button = document.createElement('button');
+			button.type = 'button';
+			button.className = 'copy-button';
+			button.setAttribute('aria-label', 'Copy code');
+			button.innerHTML = COPY_ICON;
+			wrapper.appendChild(button);
+
+			let timer: ReturnType<typeof setTimeout>;
+			const onClick = async () => {
+				try {
+					await navigator.clipboard.writeText(pre.querySelector('code')?.textContent ?? '');
+					button.classList.add('copied');
+					button.innerHTML = CHECK_ICON;
+					clearTimeout(timer);
+					timer = setTimeout(() => {
+						button.classList.remove('copied');
+						button.innerHTML = COPY_ICON;
+					}, 1600);
+				} catch {
+					button.setAttribute('aria-label', 'Copy failed');
+				}
+			};
+			button.addEventListener('click', onClick);
+
+			return () => {
+				clearTimeout(timer);
+				button.removeEventListener('click', onClick);
+			};
+		});
+
+		return () => cleanups.forEach((fn) => fn());
+	};
+}
+
+/**
+ * Collapsible Obsidian callouts ([!type]- / [!type]+). The prebuild emits the
+ * Quartz fork's structure (blockquote.callout.is-collapsible[.is-collapsed] >
+ * .callout-title + .callout-content); collapse/expand is pure CSS
+ * (grid-template-rows keyed on .is-collapsed) so this only toggles the class.
+ * Ported from quartz/components/scripts/callout.inline.ts.
+ */
+export function calloutFold(_dep: unknown): Attachment<HTMLElement> {
+	return (node) => {
+		const titles = Array.from(
+			node.querySelectorAll<HTMLElement>('.callout.is-collapsible > .callout-title')
+		);
+		const cleanups = titles.map((title) => {
+			const callout = title.parentElement!;
+			const onClick = () => {
+				const collapsed = callout.classList.toggle('is-collapsed');
+				title.setAttribute('aria-expanded', String(!collapsed));
+			};
+			title.setAttribute('role', 'button');
+			title.setAttribute('tabindex', '0');
+			title.setAttribute('aria-expanded', String(!callout.classList.contains('is-collapsed')));
+			const onKey = (e: KeyboardEvent) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					onClick();
+				}
+			};
+			title.addEventListener('click', onClick);
+			title.addEventListener('keydown', onKey);
+			return () => {
+				title.removeEventListener('click', onClick);
+				title.removeEventListener('keydown', onKey);
+			};
+		});
+
+		return () => cleanups.forEach((fn) => fn());
+	};
+}

package/site/src/lib/components/doc/heading-tracker.svelte.ts

@@ -0,0 +1,39 @@
+import type { TocEntry } from '$lib/types';
+
+export function createHeadingTracker(getItems: () => TocEntry[]) {
+	let active = $state('');
+
+	$effect(() => {
+		const headings = getItems()
+			.map((item) => document.getElementById(item.id))
+			.filter((element) => element !== null);
+		let frame = 0;
+		function update() {
+			frame = 0;
+			let current = headings[0]?.id ?? '';
+			for (const heading of headings) {
+				if (heading.getBoundingClientRect().top > 120) break;
+				current = heading.id;
+			}
+			active = current;
+		}
+		function schedule() {
+			if (!frame) frame = requestAnimationFrame(update);
+		}
+		update();
+		if (!headings.length) return;
+		window.addEventListener('scroll', schedule, { passive: true });
+		window.addEventListener('resize', schedule);
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener('scroll', schedule);
+			window.removeEventListener('resize', schedule);
+		};
+	});
+
+	return {
+		get active() {
+			return active;
+		}
+	};
+}

package/site/src/lib/components/doc/image-preview.ts

@@ -0,0 +1,114 @@
+import type { Attachment } from 'svelte/attachments';
+import type PhotoSwipe from 'photoswipe';
+import 'photoswipe/style.css';
+
+/** Add previews to note images without taking over existing links or controls. */
+export function imagePreviews(_dep: unknown): Attachment<HTMLElement> {
+	return (node) => {
+		let disposed = false;
+		let opening = false;
+		let viewer: PhotoSwipe | undefined;
+		const cleanups: (() => void)[] = [];
+
+		for (const image of node.querySelectorAll<HTMLImageElement>('img')) {
+			if (image.closest('a, button, [role="button"]')) continue;
+			const content = image.closest('picture') ?? image;
+			const link = document.createElement('a');
+			link.href = image.currentSrc || image.src;
+			link.className = 'image-preview';
+			link.style.cursor = 'zoom-in';
+			link.setAttribute('aria-label', `Enlarge image${image.alt ? `: ${image.alt}` : ''}`);
+			link.setAttribute('aria-haspopup', 'dialog');
+			link.setAttribute('data-sveltekit-reload', '');
+			content.replaceWith(link);
+			link.append(content);
+
+			const open = async (event: MouseEvent) => {
+				if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)
+					return;
+				// Broken or still-loading images retain a normal link to the original.
+				if (!image.naturalWidth || !image.naturalHeight) return;
+				event.preventDefault();
+				if (opening || viewer) return;
+				opening = true;
+				link.focus({ preventScroll: true });
+				try {
+					const { default: PhotoSwipe } = await import('photoswipe');
+					if (disposed) return;
+					const duration = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 250;
+					viewer = new PhotoSwipe({
+						dataSource: [
+							{
+								src: image.currentSrc || image.src,
+								width: image.naturalWidth,
+								height: image.naturalHeight,
+								alt: image.alt,
+								element: link,
+								msrc: image.currentSrc || image.src
+							}
+						],
+						showHideAnimationType: 'zoom',
+						showAnimationDuration: duration,
+						hideAnimationDuration: duration,
+						zoomAnimationDuration: duration,
+						secondaryZoomLevel: 2,
+						maxZoomLevel: 4,
+						bgOpacity: 0.95
+					});
+					// Replay early controls after opening, with close taking priority.
+					const instance = viewer;
+					let ready = false;
+					let pending: 'close' | 'zoom' | undefined;
+					const close = instance.close.bind(instance);
+					const zoom = instance.toggleZoom.bind(instance);
+					instance.close = () => {
+						if (ready) close();
+						else pending = 'close';
+					};
+					instance.toggleZoom = () => {
+						if (ready) zoom();
+						else if (pending !== 'close') pending = pending === 'zoom' ? undefined : 'zoom';
+					};
+					const earlyEscape = (event: KeyboardEvent) => {
+						if (!ready && event.key === 'Escape') {
+							event.preventDefault();
+							event.stopImmediatePropagation();
+							pending = 'close';
+						}
+					};
+					document.addEventListener('keydown', earlyEscape, true);
+					instance.on('openingAnimationEnd', () => {
+						ready = true;
+						document.removeEventListener('keydown', earlyEscape, true);
+						queueMicrotask(() => {
+							if (disposed || viewer !== instance) return;
+							if (pending === 'close') close();
+							else if (pending === 'zoom') zoom();
+							pending = undefined;
+						});
+					});
+					viewer.on('destroy', () => {
+						document.removeEventListener('keydown', earlyEscape, true);
+						viewer = undefined;
+					});
+					viewer.init();
+				} catch {
+					if (!disposed) window.location.assign(link.href);
+				} finally {
+					opening = false;
+				}
+			};
+			link.addEventListener('click', open);
+			cleanups.push(() => {
+				link.removeEventListener('click', open);
+				link.replaceWith(content);
+			});
+		}
+
+		return () => {
+			disposed = true;
+			viewer?.destroy();
+			cleanups.forEach((cleanup) => cleanup());
+		};
+	};
+}

package/site/src/lib/components/doc/reader-mode.svelte.ts

@@ -0,0 +1,40 @@
+import { browser } from '$app/environment';
+
+/**
+ * ReaderMode (fork-custom Quartz feature, rebuilt Svelte-native): a global
+ * runes store backing a header/sidebar toggle. When enabled, DocShell hides
+ * the Explorer sidebar and TOC rails so the article gets a distraction-free
+ * single column. Improves on Quartz (which reset on every full page load) by
+ * persisting to localStorage.
+ */
+
+const STORAGE_KEY = 'readerMode';
+
+function initial(): boolean {
+	if (!browser) return false;
+	try {
+		return localStorage.getItem(STORAGE_KEY) === 'true';
+	} catch {
+		return false;
+	}
+}
+
+class ReaderModeState {
+	enabled = $state(initial());
+
+	toggle(): void {
+		this.set(!this.enabled);
+	}
+
+	set(value: boolean): void {
+		this.enabled = value;
+		if (!browser) return;
+		try {
+			localStorage.setItem(STORAGE_KEY, String(value));
+		} catch {
+			// storage unavailable (private mode) — session-only toggle
+		}
+	}
+}
+
+export const readerMode = new ReaderModeState();

package/site/src/lib/components/embeds/mermaid.ts

@@ -0,0 +1,353 @@
+import type { Attachment } from 'svelte/attachments';
+
+/**
+ * Lazy Mermaid renderer with the interaction contract from Quartz: source
+ * copy, fullscreen expansion, pointer pan, wheel/button zoom and reset.
+ * Markdown in this site is a trusted, private corpus, so `loose` security is
+ * retained for Quartz-compatible HTML labels.
+ */
+
+type Mermaid = typeof import('mermaid').default;
+
+let mermaidPromise: Promise<Mermaid> | null = null;
+function loadMermaid(): Promise<Mermaid> {
+	mermaidPromise ??= import('mermaid').then((module) => module.default);
+	return mermaidPromise;
+}
+
+function isDark(): boolean {
+	return document.documentElement.classList.contains('dark');
+}
+
+function mermaidTheme() {
+	const style = getComputedStyle(document.documentElement);
+	const value = (name: string, fallback: string) => style.getPropertyValue(name).trim() || fallback;
+	return {
+		fontFamily: value('--font-mono', 'monospace'),
+		primaryColor: value('--color-bg', '#ffffff'),
+		primaryTextColor: value('--color-text', '#1a1916'),
+		primaryBorderColor: value('--color-accent', '#c2413b'),
+		lineColor: value('--color-muted', '#78716c'),
+		secondaryColor: value('--color-surface', '#f5f3ef'),
+		tertiaryColor: value('--color-subtle', '#e7e2d9'),
+		clusterBkg: value('--color-bg', '#ffffff'),
+		edgeLabelBackground: value('--color-surface', '#f5f3ef')
+	};
+}
+
+const COPY_ICON =
+	'<svg viewBox="0 0 24 24" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>';
+const CHECK_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+const EXPAND_ICON =
+	'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>';
+
+function makeButton(label: string, content: string, className = ''): HTMLButtonElement {
+	const button = document.createElement('button');
+	button.type = 'button';
+	button.className = `mermaid-control-button ${className}`.trim();
+	button.setAttribute('aria-label', label);
+	button.title = label;
+	button.innerHTML = content;
+	return button;
+}
+
+let idCounter = 0;
+
+const printPreparers = new WeakMap<HTMLElement, () => Promise<void>>();
+
+export async function prepareDiagramsForPrint(article: HTMLElement): Promise<void> {
+	await printPreparers.get(article)?.();
+}
+
+interface Block {
+	pre: HTMLElement;
+	source: string;
+	container: HTMLDivElement;
+	content: HTMLDivElement;
+	copyButton: HTMLButtonElement;
+	expandButton: HTMLButtonElement;
+	rendered: boolean;
+	generation: number;
+	copyTimer?: ReturnType<typeof setTimeout>;
+}
+
+export function mermaidDiagrams(_dep: unknown): Attachment<HTMLElement> {
+	return (node) => {
+		const codes = Array.from(node.querySelectorAll<HTMLElement>('pre > code.mermaid'));
+		if (codes.length === 0) return;
+
+		let destroyed = false;
+		let closeExpanded: (() => void) | undefined;
+
+		const blocks: Block[] = codes.map((code) => {
+			const pre = code.parentElement as HTMLElement;
+			let source = code.textContent ?? '';
+			const clipboardSource = code.getAttribute('data-clipboard');
+			if (clipboardSource) {
+				try {
+					const parsed: unknown = JSON.parse(clipboardSource);
+					if (typeof parsed === 'string') source = parsed;
+				} catch {
+					// Keep textContent as the no-JS/error fallback.
+				}
+			}
+
+			const container = document.createElement('div');
+			container.className = 'mermaid-diagram';
+			container.style.display = 'none';
+			const content = document.createElement('div');
+			content.className = 'mermaid-inline-content';
+			const toolbar = document.createElement('div');
+			toolbar.className = 'mermaid-toolbar';
+			const expandButton = makeButton('Expand diagram', EXPAND_ICON, 'mermaid-expand-button');
+			const copyButton = makeButton('Copy diagram source', COPY_ICON, 'mermaid-copy-button');
+			toolbar.append(expandButton, copyButton);
+			container.append(content, toolbar);
+			pre.insertAdjacentElement('afterend', container);
+
+			return {
+				pre,
+				source,
+				container,
+				content,
+				copyButton,
+				expandButton,
+				rendered: false,
+				generation: 0
+			};
+		});
+
+		function closeModal(): void {
+			closeExpanded?.();
+			closeExpanded = undefined;
+		}
+
+		function openModal(block: Block): void {
+			const sourceSvg = block.content.querySelector('svg');
+			if (!sourceSvg) return;
+			closeModal();
+
+			const modal = document.createElement('div');
+			modal.className = 'mermaid-modal';
+			modal.setAttribute('role', 'dialog');
+			modal.setAttribute('aria-modal', 'true');
+			modal.setAttribute('aria-label', 'Expanded diagram');
+
+			const panel = document.createElement('div');
+			panel.className = 'mermaid-modal-panel';
+			const controls = document.createElement('div');
+			controls.className = 'mermaid-modal-controls';
+			const zoomOut = makeButton('Zoom out', '−');
+			const reset = makeButton('Reset zoom', 'Reset');
+			reset.classList.add('mermaid-reset-button');
+			const zoomIn = makeButton('Zoom in', '+');
+			const close = makeButton('Close expanded diagram', '×');
+			controls.append(zoomOut, reset, zoomIn, close);
+
+			const viewport = document.createElement('div');
+			viewport.className = 'mermaid-modal-viewport';
+			const modalContent = document.createElement('div');
+			modalContent.className = 'mermaid-modal-content';
+			modalContent.append(sourceSvg.cloneNode(true));
+			viewport.appendChild(modalContent);
+			panel.append(controls, viewport);
+			modal.appendChild(panel);
+			document.body.appendChild(modal);
+			document.body.classList.add('mermaid-modal-open');
+
+			let scale = 1;
+			let panX = 0;
+			let panY = 0;
+			let dragging = false;
+			let pointerId = -1;
+			let startX = 0;
+			let startY = 0;
+			const applyTransform = () => {
+				modalContent.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
+			};
+			const changeZoom = (delta: number) => {
+				scale = Math.min(3, Math.max(0.5, scale + delta));
+				applyTransform();
+			};
+			const resetTransform = () => {
+				scale = 1;
+				panX = 0;
+				panY = 0;
+				applyTransform();
+			};
+
+			const onPointerDown = (event: PointerEvent) => {
+				if (event.button !== 0) return;
+				dragging = true;
+				pointerId = event.pointerId;
+				startX = event.clientX - panX;
+				startY = event.clientY - panY;
+				viewport.setPointerCapture(pointerId);
+				viewport.classList.add('is-dragging');
+			};
+			const onPointerMove = (event: PointerEvent) => {
+				if (!dragging || event.pointerId !== pointerId) return;
+				panX = event.clientX - startX;
+				panY = event.clientY - startY;
+				applyTransform();
+			};
+			const onPointerUp = (event: PointerEvent) => {
+				if (event.pointerId !== pointerId) return;
+				dragging = false;
+				viewport.classList.remove('is-dragging');
+				if (viewport.hasPointerCapture(pointerId)) viewport.releasePointerCapture(pointerId);
+				pointerId = -1;
+			};
+			const onWheel = (event: WheelEvent) => {
+				event.preventDefault();
+				changeZoom(event.deltaY < 0 ? 0.1 : -0.1);
+			};
+			const onBackdrop = (event: MouseEvent) => {
+				if (event.target === modal) closeModal();
+			};
+			const onKeydown = (event: KeyboardEvent) => {
+				if (event.key === 'Escape') closeModal();
+			};
+			const onZoomOut = () => changeZoom(-0.1);
+			const onZoomIn = () => changeZoom(0.1);
+
+			viewport.addEventListener('pointerdown', onPointerDown);
+			viewport.addEventListener('pointermove', onPointerMove);
+			viewport.addEventListener('pointerup', onPointerUp);
+			viewport.addEventListener('pointercancel', onPointerUp);
+			viewport.addEventListener('wheel', onWheel, { passive: false });
+			modal.addEventListener('click', onBackdrop);
+			document.addEventListener('keydown', onKeydown);
+			zoomOut.addEventListener('click', onZoomOut);
+			zoomIn.addEventListener('click', onZoomIn);
+			reset.addEventListener('click', resetTransform);
+
+			const finish = () => {
+				viewport.removeEventListener('pointerdown', onPointerDown);
+				viewport.removeEventListener('pointermove', onPointerMove);
+				viewport.removeEventListener('pointerup', onPointerUp);
+				viewport.removeEventListener('pointercancel', onPointerUp);
+				viewport.removeEventListener('wheel', onWheel);
+				modal.removeEventListener('click', onBackdrop);
+				document.removeEventListener('keydown', onKeydown);
+				zoomOut.removeEventListener('click', onZoomOut);
+				zoomIn.removeEventListener('click', onZoomIn);
+				reset.removeEventListener('click', resetTransform);
+				close.removeEventListener('click', closeModal);
+				modal.remove();
+				document.body.classList.remove('mermaid-modal-open');
+				block.expandButton.focus();
+			};
+			closeExpanded = finish;
+			close.addEventListener('click', closeModal);
+			close.focus();
+		}
+
+		const buttonCleanups = blocks.flatMap((block) => {
+			const copy = async () => {
+				try {
+					await navigator.clipboard.writeText(block.source);
+					block.copyButton.classList.add('copied');
+					block.copyButton.setAttribute('aria-label', 'Diagram source copied');
+					block.copyButton.innerHTML = CHECK_ICON;
+					clearTimeout(block.copyTimer);
+					block.copyTimer = setTimeout(() => {
+						block.copyButton.classList.remove('copied');
+						block.copyButton.setAttribute('aria-label', 'Copy diagram source');
+						block.copyButton.innerHTML = COPY_ICON;
+					}, 1600);
+				} catch {
+					block.copyButton.setAttribute('aria-label', 'Copy failed');
+				}
+			};
+			const expand = () => openModal(block);
+			block.copyButton.addEventListener('click', copy);
+			block.expandButton.addEventListener('click', expand);
+			return [
+				() => block.copyButton.removeEventListener('click', copy),
+				() => block.expandButton.removeEventListener('click', expand)
+			];
+		});
+
+		async function render(block: Block): Promise<void> {
+			const generation = ++block.generation;
+			block.pre.dataset.state = 'loading';
+			try {
+				const mermaid = await loadMermaid();
+				if (destroyed || generation !== block.generation) return;
+				mermaid.initialize({
+					startOnLoad: false,
+					securityLevel: 'loose',
+					theme: isDark() ? 'dark' : 'base',
+					themeVariables: mermaidTheme()
+				});
+				const { svg } = await mermaid.render(`mermaid-${++idCounter}`, block.source);
+				if (destroyed || generation !== block.generation) return;
+				closeModal();
+				block.content.innerHTML = svg;
+				block.container.style.display = '';
+				block.pre.style.display = 'none';
+				block.expandButton.disabled = false;
+				delete block.pre.dataset.state;
+				block.rendered = true;
+			} catch (error) {
+				if (destroyed || generation !== block.generation) return;
+				block.content.replaceChildren();
+				block.container.style.display = '';
+				block.pre.style.display = '';
+				block.pre.dataset.state = 'error';
+				block.expandButton.disabled = true;
+				const message = document.createElement('p');
+				message.className = 'mermaid-error';
+				message.textContent = `Failed to render diagram: ${error instanceof Error ? error.message : String(error)}`;
+				block.content.appendChild(message);
+				block.rendered = false;
+			}
+		}
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!entry.isIntersecting) continue;
+					observer.unobserve(entry.target);
+					const block = blocks.find((candidate) => candidate.pre === entry.target);
+					if (block) void render(block);
+				}
+			},
+			{ rootMargin: '200px 0px' }
+		);
+		for (const block of blocks) observer.observe(block.pre);
+
+		printPreparers.set(node, async () => {
+			observer.disconnect();
+			await Promise.all(blocks.filter((block) => !block.rendered).map(render));
+		});
+
+		let wasDark = isDark();
+		const themeObserver = new MutationObserver(() => {
+			const dark = isDark();
+			if (dark === wasDark) return;
+			wasDark = dark;
+			for (const block of blocks) if (block.rendered) void render(block);
+		});
+		themeObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['class']
+		});
+
+		return () => {
+			printPreparers.delete(node);
+			destroyed = true;
+			closeModal();
+			observer.disconnect();
+			themeObserver.disconnect();
+			buttonCleanups.forEach((cleanup) => cleanup());
+			for (const block of blocks) {
+				clearTimeout(block.copyTimer);
+				block.container.remove();
+				block.pre.style.display = '';
+				delete block.pre.dataset.state;
+			}
+		};
+	};
+}