@ai-markdown/core 3.4.1 → 3.5.0

package/dist/components/index.js

@@ -1,4 +1,234 @@
-import { StreamingLanguageDetector } from "@ai-markdown/code-language-detector";
+import { StreamingLanguageDetector, normalizeHighlightJsLanguage, normalizeShikiLanguage } from "@ai-markdown/code-language-detector";
+let CodeLanguageFormat = /* @__PURE__ */ function(CodeLanguageFormat) {
+	CodeLanguageFormat["HighlightJs"] = "highlight-js";
+	CodeLanguageFormat["Shiki"] = "shiki";
+	CodeLanguageFormat["Pierre"] = "pierre";
+	return CodeLanguageFormat;
+}({});
+function resolveCodeHighlightLanguage(language, format = "highlight-js") {
+	if (format === "pierre") {
+		const name = normalizeShikiLanguage(language);
+		return name === "common-lisp" ? "lisp" : name;
+	}
+	return typeof format === "function" ? format(language) : format === "shiki" ? normalizeShikiLanguage(language) : normalizeHighlightJsLanguage(language);
+}
+function resolveCodeHighlightInterval(value, fallback = 50) {
+	return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+function createCodeHighlightSession(onChange) {
+	let committed = false;
+	let prepared;
+	let cached;
+	let fault;
+	let epoch = 0;
+	let backend;
+	const release = () => {
+		const previous = backend;
+		backend = void 0;
+		try {
+			previous?.value.dispose();
+		} catch {}
+	};
+	const sameInput = (a, b) => a?.adapter === b.adapter && a?.code === b.code && a?.language === b.language && a?.colorScheme === b.colorScheme && a?.generation === b.generation && a?.streaming === b.streaming;
+	const commitHighlight = (input, request) => {
+		const adapter = input.adapter;
+		if (!adapter.createSession || sameInput(cached?.input, input)) return;
+		let snapshot;
+		try {
+			backend ??= {
+				adapter,
+				language: request.language,
+				colorScheme: request.colorScheme,
+				generation: input.generation,
+				value: adapter.createSession()
+			};
+			const result = backend.value.highlight(request);
+			snapshot = {
+				language: request.language,
+				status: result ? "ready" : "plain",
+				result
+			};
+		} catch (error) {
+			release();
+			snapshot = {
+				language: request.language,
+				status: "error",
+				error
+			};
+		}
+		cached = {
+			input: { ...input },
+			snapshot
+		};
+		onChange();
+	};
+	const matches = (adapter, request) => prepared?.adapter === adapter && prepared.language === request.language && prepared.colorScheme === request.colorScheme;
+	const requestOf = (input) => ({
+		code: input.code,
+		language: input.adapter ? resolveCodeHighlightLanguage(input.language, input.adapter.languageFormat) : input.language,
+		colorScheme: input.colorScheme,
+		streaming: input.streaming
+	});
+	return {
+		read(input) {
+			const adapter = input.adapter;
+			if (!adapter || input.active === false) return {
+				language: input.language,
+				status: "plain"
+			};
+			if (adapter.prepare && !committed) return {
+				language: input.language,
+				status: "loading"
+			};
+			if (fault && sameInput(fault.input, input)) return {
+				language: input.language,
+				status: "error",
+				error: fault.error
+			};
+			let request;
+			try {
+				request = requestOf(input);
+				if (adapter.supports?.(request.language) === false) return {
+					language: request.language,
+					status: "plain"
+				};
+				if (matches(adapter, request) && prepared?.failed) return {
+					language: request.language,
+					status: "error",
+					error: prepared.error
+				};
+				if (adapter.prepare && !adapter.isReady?.(request) && !(matches(adapter, request) && prepared?.ready)) return {
+					language: request.language,
+					status: "loading"
+				};
+				if (sameInput(cached?.input, input)) return cached.snapshot;
+				if (adapter.createSession) return {
+					language: request.language,
+					status: "loading"
+				};
+				const result = adapter.highlight(request);
+				const snapshot = {
+					language: request.language,
+					status: result ? "ready" : "plain",
+					result
+				};
+				cached = {
+					input: { ...input },
+					snapshot
+				};
+				return snapshot;
+			} catch (error) {
+				return {
+					language: input.language,
+					status: "error",
+					error
+				};
+			}
+		},
+		commit(input) {
+			const firstCommit = !committed;
+			committed = true;
+			if (input.adapter && input.active !== false && fault && sameInput(fault.input, input)) return;
+			fault = void 0;
+			const adapter = input.adapter;
+			if (!adapter || input.active === false) {
+				epoch++;
+				prepared = void 0;
+				cached = void 0;
+				release();
+				return;
+			}
+			let request;
+			try {
+				request = requestOf(input);
+				if (backend && (backend.adapter !== adapter || backend.language !== request.language || backend.colorScheme !== request.colorScheme || backend.generation !== input.generation)) {
+					release();
+					cached = void 0;
+				}
+				if (adapter.supports?.(request.language) === false) {
+					if (firstCommit && adapter.prepare) onChange();
+					epoch++;
+					prepared = void 0;
+					cached = void 0;
+					release();
+					return;
+				}
+				if (matches(adapter, request)) {
+					if (!prepared?.failed && (!adapter.prepare || adapter.isReady?.(request) || prepared?.ready)) commitHighlight(input, request);
+					return;
+				}
+				const ticket = ++epoch;
+				prepared = {
+					adapter,
+					language: request.language,
+					colorScheme: request.colorScheme
+				};
+				if (!adapter.prepare || adapter.isReady?.(request)) {
+					if (firstCommit && adapter.prepare && !adapter.createSession) onChange();
+					commitHighlight(input, request);
+					return;
+				}
+				Promise.resolve().then(() => {
+					if (ticket !== epoch) return;
+					return adapter.prepare(request);
+				}).then(() => {
+					if (ticket !== epoch) return;
+					prepared.ready = true;
+					cached = void 0;
+					onChange();
+				}, (error) => {
+					if (ticket !== epoch) return;
+					prepared.failed = true;
+					prepared.error = error;
+					onChange();
+				});
+			} catch (error) {
+				epoch++;
+				release();
+				prepared = void 0;
+				cached = void 0;
+				fault = {
+					input: { ...input },
+					error
+				};
+				onChange();
+			}
+		},
+		retry() {
+			fault = void 0;
+			release();
+			epoch++;
+			prepared = void 0;
+			cached = void 0;
+			onChange();
+		},
+		dispose() {
+			committed = false;
+			fault = void 0;
+			release();
+			epoch++;
+			prepared = void 0;
+			cached = void 0;
+		}
+	};
+}
+const defaultCodeBlockPolicy = Object.freeze({
+	defaultExpanded: true,
+	autoDetectUnknownLanguage: true,
+	formatJson: false,
+	expandNestedJson: false,
+	highlightIntervalMs: 50
+});
+function resolveCodeBlockPolicy(overrides, inherited, defaults = defaultCodeBlockPolicy) {
+	const value = (key) => overrides?.[key] ?? inherited?.[key] ?? defaults[key] ?? defaultCodeBlockPolicy[key];
+	return {
+		defaultExpanded: value("defaultExpanded"),
+		autoDetectUnknownLanguage: value("autoDetectUnknownLanguage"),
+		formatJson: value("formatJson"),
+		expandNestedJson: value("expandNestedJson"),
+		highlightIntervalMs: resolveCodeHighlightInterval(value("highlightIntervalMs"), defaults.highlightIntervalMs ?? 50)
+	};
+}
 function extractCode(node) {
 	if (node?.tagName !== "pre" || node.children.length !== 1 || Object.keys(node.properties).length) return null;
 	const child = node.children[0];
@@ -409,6 +639,25 @@ const ensureMermaidInitialized = (mermaid, isDark) => {
 	}
 	mermaid.initialize(next);
 };
+var UnsupportedDiagramError = class extends Error {
+	diagramType;
+	constructor(diagramType) {
+		super(`Unsupported diagram type: ${diagramType}`);
+		this.diagramType = diagramType;
+		this.name = "UnsupportedDiagramError";
+	}
+};
+const resolveDiagramInterval = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : 300;
+function createCachedDiagramLoader(load) {
+	let pending;
+	return () => pending ??= Promise.resolve().then(load).catch((error) => {
+		pending = void 0;
+		throw error;
+	});
+}
+function preloadDiagramEngine(load) {
+	return Promise.resolve().then(load).then(() => void 0);
+}
 function diagramErrorText(error, labels) {
 	if (error.reason === "tooLarge") return labels.tooLarge(error.length, error.limit);
 	return error.message || labels.renderFailed;
@@ -427,7 +676,7 @@ var DiagramFailure = class {
 	}
 };
 const diagramId = () => `mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
-function createDiagramController(load, publish) {
+function createDiagramController(load, publish, fallback) {
 	const owner = {};
 	let request;
 	let current;
@@ -443,6 +692,7 @@ function createDiagramController(load, publish) {
 	let nonce = 0;
 	let ran;
 	let epoch = 0;
+	let disposed = false;
 	let retryTimer;
 	const sameError = (a, b) => a.reason === "tooLarge" ? b.reason === "tooLarge" && a.length === b.length && a.limit === b.limit : b.reason === a.reason && a.message === b.message;
 	const emit = () => publish({
@@ -463,13 +713,10 @@ function createDiagramController(load, publish) {
 	};
 	const attempt = async (code, dark, streaming, generation) => {
 		const stale = () => generation !== epoch;
-		let engine;
-		try {
-			engine = await load();
-		} catch {
+		const loadFailedAttempt = () => {
 			if (stale()) return;
 			if (loadFailures < LOAD_RETRIES) {
-				loadFailures += 1;
+				loadFailures++;
 				retryTimer = setTimeout(() => {
 					retryTimer = void 0;
 					nonce++;
@@ -479,42 +726,95 @@ function createDiagramController(load, publish) {
 				loadFailed = true;
 				emit();
 			}
+		};
+		let engine;
+		try {
+			engine = await load();
+		} catch {
+			loadFailedAttempt();
 			return;
 		}
-		loadFailures = 0;
 		let reason = "render";
 		try {
 			if (stale()) return;
-			ensureMermaidInitialized(engine, dark);
-			const maxTextSize = getMermaidMaxTextSize(engine);
-			if (code.length > maxTextSize) throw new DiagramFailure({
-				kind: "error",
-				reason: "tooLarge",
-				length: code.length,
-				limit: maxTextSize
-			});
-			reason = "parse";
-			if (!await engine.parse(code)) throw new DiagramFailure({
-				kind: "error",
-				reason: "parse",
-				message: ""
-			});
-			reason = "render";
-			if (stale()) return;
-			const { svg, bindFunctions, diagramType } = await engine.render(diagramId(), code);
+			const render = async (target) => {
+				if (target.kind !== "svg") ensureMermaidInitialized(target, dark);
+				const maxTextSize = target.kind === "svg" ? target.maxTextSize ?? 5e4 : getMermaidMaxTextSize(target);
+				if (code.length > maxTextSize) throw new DiagramFailure({
+					kind: "error",
+					reason: "tooLarge",
+					length: code.length,
+					limit: maxTextSize
+				});
+				reason = "parse";
+				if (target.kind !== "svg" && !await target.parse(code)) throw new DiagramFailure({
+					kind: "error",
+					reason: "parse",
+					message: ""
+				});
+				reason = "render";
+				if (stale()) return void 0;
+				return target.kind === "svg" ? target.render(diagramId(), code, dark) : target.render(diagramId(), code);
+			};
+			let result;
+			try {
+				result = await render(engine);
+			} catch (error) {
+				if (!(error instanceof UnsupportedDiagramError) || !fallback || stale()) throw error;
+				try {
+					engine = await fallback();
+				} catch {
+					loadFailedAttempt();
+					return;
+				}
+				if (stale()) return;
+				result = await render(engine);
+			}
+			if (!result) return;
+			const { svg, bindFunctions, diagramType } = result;
 			if (stale()) return;
+			loadFailures = 0;
+			const previousView = view.kind === "diagram" ? {
+				...view,
+				onBindError: void 0
+			} : view;
+			if (previousView.kind === "diagram") previousView.onBindError = (error) => {
+				if (disposed || view !== previousView) return;
+				lastSuccess = void 0;
+				show({
+					kind: "error",
+					reason: "render",
+					message: engineMessage(error)
+				});
+			};
+			const corrective = needsCorrective;
 			needsCorrective = false;
 			lastSuccess = {
 				code,
 				dark
 			};
 			loadFailed = false;
-			show({
+			const nextView = {
 				kind: "diagram",
 				svg,
 				chartType: diagramType ?? "",
-				bind: bindFunctions
-			});
+				bind: bindFunctions,
+				...engine.kind === "svg" ? {
+					palette: engine.palette,
+					dark
+				} : {},
+				onBindError(error) {
+					if (disposed || view !== nextView) return;
+					lastSuccess = void 0;
+					if (streaming || !corrective && previousView.kind === "diagram") show(previousView);
+					else show({
+						kind: "error",
+						reason: "render",
+						message: engineMessage(error)
+					});
+				}
+			};
+			show(nextView);
 		} catch (error) {
 			if (stale()) return;
 			if (streaming) return;
@@ -556,7 +856,17 @@ function createDiagramController(load, publish) {
 			}
 		} else if (!streaming && previousStreaming) needsCorrective = true;
 		previousStreaming = streaming;
-		if (!code || !active) return;
+		if (!code) {
+			lastSuccess = void 0;
+			needsCorrective = false;
+			if (view.kind !== "source" || loadFailed) {
+				view = { kind: "source" };
+				loadFailed = false;
+				emit();
+			}
+			return;
+		}
+		if (!active) return;
 		if (lastSuccess?.code === code && lastSuccess.dark === dark) {
 			needsCorrective = false;
 			return;
@@ -566,7 +876,11 @@ function createDiagramController(load, publish) {
 	}
 	return {
 		update(next) {
-			request = next;
+			disposed = false;
+			request = {
+				...next,
+				interval: resolveDiagramInterval(next.interval)
+			};
 			updating = true;
 			try {
 				if (!frames || !current) {
@@ -576,22 +890,25 @@ function createDiagramController(load, publish) {
 						if (!updating) run();
 					});
 				} else current = nextCodeFrame(current, next.code, "");
-				frames.update(current, next.streaming, next.interval);
+				frames.update(current, next.streaming, request.interval);
 			} finally {
 				updating = false;
 			}
 			run();
 		},
 		retry() {
+			if (disposed) return;
 			loadFailures = 0;
 			if (loadFailed) {
 				loadFailed = false;
 				emit();
 			}
+			lastSuccess = void 0;
 			nonce++;
 			run();
 		},
 		dispose() {
+			disposed = true;
 			cancel();
 			frames?.dispose();
 			ran = void 0;
@@ -1215,6 +1532,161 @@ const imageActionNames = Object.freeze([
 	"flipX",
 	"flipY"
 ]);
-export { createCodeBlockSession, createCodeFrame, createCodeLanguageTracker, createDiagramController, createImagePreviewController, createJsonCompletenessScanner, defaultCodeBlockLabels, defaultDiagramLabels, defaultImageLabels, defaultTableLabels, diagramErrorText, ensureMermaidInitialized, extendsCode, extractCode, getImageGallery, getMermaidMaxTextSize, imageActionNames, imageIconPaths, imagePinchCenter, imageTransformStyle, imageWheelRatio, initialImageTransform, jsonLooksComplete, lockImagePreviewScroll, mermaidRenderQueue, nextCodeFrame, normalizeRenderers, prettyPrintJson, projectTable, reboundImage, resolveLabels, serializeTable, zoomImage };
+function createSvgLoader(load, palette, options) {
+	const renderOptions = { ...options?.renderOptions };
+	const limit = renderOptions.limit ?? 5e4;
+	if (!Number.isFinite(limit) || limit < 0) throw new RangeError("Diagram limit must be a finite non-negative number");
+	return createCachedDiagramLoader(async () => {
+		const renderer = await load();
+		return {
+			kind: "svg",
+			palette,
+			maxTextSize: limit,
+			async render(id, code) {
+				try {
+					const result = await renderer.render(code, {
+						...renderOptions,
+						idPrefix: id,
+						limit
+					});
+					return {
+						svg: result.svg,
+						diagramType: result.type
+					};
+				} catch (error) {
+					const diagnostic = error;
+					if (diagnostic?.code === "unsupported-diagram" && typeof diagnostic.type === "string" && diagnostic.type) throw new UnsupportedDiagramError(diagnostic.type);
+					throw error;
+				}
+			}
+		};
+	});
+}
+function createPeleLoader(load, options) {
+	return createSvgLoader(load, "pele", options);
+}
+function createOndineLoader(load, options) {
+	return createSvgLoader(load, "ondine", options);
+}
+function convert(token, foreground) {
+	return {
+		text: token.content,
+		color: token.color ?? foreground,
+		backgroundColor: token.bgColor,
+		fontStyle: token.fontStyle
+	};
+}
+function createPierreHighlightAdapter(options) {
+	let runtime;
+	let pending;
+	const adapter = {
+		languageFormat: "pierre",
+		supports: (language) => ![
+			"",
+			"plain",
+			"plaintext",
+			"text",
+			"txt"
+		].includes(language) && (!runtime || runtime.isSupportedLanguage(language)),
+		isReady: () => Boolean(runtime),
+		prepare: () => {
+			if (runtime) return;
+			return pending ??= Promise.resolve().then(options.load).then((loaded) => {
+				runtime = loaded;
+			}).finally(() => {
+				pending = void 0;
+			});
+		},
+		highlight: ({ code, language, colorScheme }) => {
+			if (!runtime?.isSupportedLanguage(language)) return;
+			const result = runtime.codeToTokens(code, {
+				lang: language,
+				theme: runtime.themes[colorScheme]
+			});
+			const tokens = [];
+			let cursor = 0;
+			for (const line of result.tokens) for (const token of line) {
+				if (token.offset > cursor) tokens.push({
+					text: code.slice(cursor, token.offset),
+					color: result.fg
+				});
+				tokens.push(convert(token, result.fg));
+				cursor = token.offset + token.content.length;
+			}
+			if (cursor < code.length) tokens.push({
+				text: code.slice(cursor),
+				color: result.fg
+			});
+			return { tokens };
+		}
+	};
+	if (options.incremental !== false) adapter.createSession = () => {
+		let live;
+		let previous = "", previousLanguage = "", previousScheme = "";
+		let lines = [];
+		const dispose = () => {
+			live?.dispose();
+			live = void 0;
+			lines = [];
+			previous = "";
+		};
+		return {
+			dispose,
+			highlight(request) {
+				const { code, language, colorScheme } = request;
+				if (!runtime?.isSupportedLanguage(language)) return;
+				if (!request.streaming || !runtime.LiveTokenizer) {
+					dispose();
+					return adapter.highlight(request);
+				}
+				const appended = startsWithText(code, previous);
+				const terminatorLength = previous.endsWith("\r\n") ? 2 : previous.endsWith("\n") ? 1 : 0;
+				const suffixStart = previous.length - terminatorLength;
+				const replacesTerminator = !appended && terminatorLength > 0 && startsWithText(code, previous.slice(0, suffixStart));
+				if (!live || language !== previousLanguage || colorScheme !== previousScheme || !appended && !replacesTerminator) {
+					dispose();
+					live = new runtime.LiveTokenizer({
+						code,
+						lang: language,
+						theme: runtime.themes[colorScheme]
+					});
+					lines = Array.from({ length: live.lineCount }, (_, line) => live.getLineTokens(line).tokens.map((token) => convert(token)));
+				} else if (code !== previous) {
+					const line = live.lineCount - 1;
+					const end = {
+						line,
+						character: live.getLineLength(line)
+					};
+					const start = replacesTerminator ? {
+						line: line - 1,
+						character: live.getLineLength(line - 1)
+					} : end;
+					const update = live.applyEdits([{
+						range: {
+							start,
+							end
+						},
+						newText: code.slice(replacesTerminator ? suffixStart : previous.length)
+					}]);
+					for (const change of [...update.lineChanges].reverse()) {
+						const replacement = Array.from({ length: change.newEndLine - change.newStartLine }, (_, index) => live.getLineTokens(change.newStartLine + index).tokens.map((token) => convert(token)));
+						lines = [
+							...lines.slice(0, change.oldStartLine),
+							...replacement,
+							...lines.slice(change.oldEndLine)
+						];
+					}
+				}
+				previous = code;
+				previousLanguage = language;
+				previousScheme = colorScheme;
+				const breaks = code.match(/\r\n|\r|\n/g) ?? [];
+				return { tokens: lines.flatMap((line, index) => index < breaks.length ? [...line, { text: breaks[index] }] : line) };
+			}
+		};
+	};
+	return adapter;
+}
+export { CodeLanguageFormat, UnsupportedDiagramError, createCachedDiagramLoader, createCodeBlockSession, createCodeFrame, createCodeHighlightSession, createCodeLanguageTracker, createDiagramController, createImagePreviewController, createJsonCompletenessScanner, createOndineLoader, createPeleLoader, createPierreHighlightAdapter, defaultCodeBlockLabels, defaultCodeBlockPolicy, defaultDiagramLabels, defaultImageLabels, defaultTableLabels, diagramErrorText, ensureMermaidInitialized, extendsCode, extractCode, getImageGallery, getMermaidMaxTextSize, imageActionNames, imageIconPaths, imagePinchCenter, imageTransformStyle, imageWheelRatio, initialImageTransform, jsonLooksComplete, lockImagePreviewScroll, mermaidRenderQueue, nextCodeFrame, normalizeRenderers, preloadDiagramEngine, prettyPrintJson, projectTable, reboundImage, resolveCodeBlockPolicy, resolveCodeHighlightInterval, resolveCodeHighlightLanguage, resolveDiagramInterval, resolveLabels, serializeTable, zoomImage };
 
 //# sourceMappingURL=index.js.map