pi-studio 0.5.21 → 0.5.22

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.22] — 2026-03-20
+
+### Fixed
+- Citeproc-rendered LaTeX bibliographies now request a visible `References` section heading in Studio preview/PDF output.
+- LaTeX preview now regroups `subfigure`-based figures so adjacent subfigures keep their shared overall figure/caption structure instead of rendering as unrelated standalone figures, including visible `(a)` / `(b)` subfigure markers and `Figure n` main-caption labels when `.aux` labels are available.
+- LaTeX preview now converts common `algorithm` / `algorithmic` / `algpseudocode` blocks into readable algorithm cards with preserved captions, indentation, and optional line numbers instead of showing the raw environment text.
+- The editor language dropdown is now alphabetised for quicker scanning.
+
 ## [0.5.21] — 2026-03-19
 
 ### Fixed

package/client/studio.css

@@ -569,6 +569,14 @@
       text-align: center;
       margin-bottom: 2em;
     }
+
+    .rendered-markdown #bibliography {
+      margin-bottom: 0.75em;
+    }
+
+    .rendered-markdown #refs {
+      margin-top: 0.5em;
+    }
     .rendered-markdown #title-block-header .title {
       margin-bottom: 0.25em;
     }
@@ -758,6 +766,104 @@
       max-width: 100%;
     }
 
+    .rendered-markdown .studio-subfigure-group {
+      margin: 1.25em auto;
+    }
+
+    .rendered-markdown .studio-subfigure-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: center;
+      align-items: flex-start;
+    }
+
+    .rendered-markdown .studio-subfigure-entry {
+      flex: 1 1 220px;
+      margin: 0;
+      max-width: 100%;
+    }
+
+    .rendered-markdown .studio-subfigure-entry img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+
+    .rendered-markdown .studio-subfigure-entry > figcaption,
+    .rendered-markdown .studio-subfigure-group > figcaption {
+      text-align: center;
+    }
+
+    .rendered-markdown .studio-subfigure-group > figcaption {
+      margin-top: 0.8em;
+    }
+
+    .rendered-markdown .studio-subfigure-caption-label,
+    .rendered-markdown .studio-figure-caption-label {
+      font-weight: 600;
+    }
+
+    .rendered-markdown .studio-subfigure-caption-label {
+      margin-right: 0.35em;
+    }
+
+    .rendered-markdown .studio-figure-caption-label {
+      margin-right: 0.45em;
+    }
+
+    .rendered-markdown .studio-algorithm-block {
+      margin: 1.25em 0;
+      border: 1px solid var(--md-codeblock-border);
+      border-radius: 10px;
+      background: var(--panel-2);
+      overflow: hidden;
+    }
+
+    .rendered-markdown .studio-algorithm-block > figcaption {
+      padding: 0.8em 1em 0.65em;
+      border-bottom: 1px solid var(--border-muted);
+      background: rgba(127, 127, 127, 0.06);
+      text-align: left;
+    }
+
+    .rendered-markdown .studio-algorithm-caption-label {
+      font-weight: 600;
+      margin-right: 0.45em;
+    }
+
+    .rendered-markdown .studio-algorithm-body {
+      padding: 0.7em 0.9em 0.85em;
+      font-family: var(--font-mono);
+      font-size: 0.95em;
+    }
+
+    .rendered-markdown .studio-algorithm-line {
+      display: grid;
+      grid-template-columns: 2.6em minmax(0, 1fr);
+      gap: 0.8em;
+      align-items: baseline;
+      padding: 0.08em 0;
+    }
+
+    .rendered-markdown .studio-algorithm-line-number {
+      color: var(--muted);
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+      user-select: none;
+    }
+
+    .rendered-markdown .studio-algorithm-line-content {
+      min-width: 0;
+      padding-left: calc(var(--studio-algorithm-indent, 0) * 1.35em);
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+
+    .rendered-markdown .studio-algorithm-line-content math {
+      font-size: 1em;
+    }
+
     .rendered-markdown math {
       font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", "STIXGeneral", serif;
     }

package/index.ts

@@ -1106,10 +1106,623 @@ function buildStudioPandocBibliographyArgs(markdown: string, isLatex: boolean |
 	if (bibliographyPaths.length === 0) return [];
 	return [
 		"--citeproc",
+		"-M",
+		"reference-section-title=References",
 		...bibliographyPaths.flatMap((path) => ["--bibliography", path]),
 	];
 }
 
+interface StudioLatexSubfigurePreviewGroup {
+	markerId: string;
+	label: string | null;
+	subfigureWidths: Array<string | null>;
+}
+
+interface StudioLatexSubfigurePreviewTransformResult {
+	markdown: string;
+	subfigureGroups: StudioLatexSubfigurePreviewGroup[];
+}
+
+interface StudioLatexAlgorithmPreviewLine {
+	indent: number;
+	content: string;
+	lineNumber: number | null;
+}
+
+interface StudioLatexAlgorithmPreviewBlock {
+	markerId: string;
+	label: string | null;
+	caption: string | null;
+	lines: StudioLatexAlgorithmPreviewLine[];
+}
+
+interface StudioLatexAlgorithmPreviewTransformResult {
+	markdown: string;
+	algorithmBlocks: StudioLatexAlgorithmPreviewBlock[];
+}
+
+function findStudioLatexMatchingBrace(input: string, openBraceIndex: number): number {
+	if (input[openBraceIndex] !== "{") return -1;
+	let depth = 0;
+	for (let i = openBraceIndex; i < input.length; i++) {
+		const ch = input[i]!;
+		if (ch === "%") {
+			while (i + 1 < input.length && input[i + 1] !== "\n") i++;
+			continue;
+		}
+		if (ch === "\\") {
+			i++;
+			continue;
+		}
+		if (ch === "{") depth++;
+		else if (ch === "}") {
+			depth--;
+			if (depth === 0) return i;
+		}
+	}
+	return -1;
+}
+
+function readStudioLatexEnvironmentBlock(
+	input: string,
+	startIndex: number,
+	envName: string,
+): { fullText: string; innerText: string; endIndex: number } | null {
+	const escapedEnvName = envName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const beginPattern = new RegExp(`\\\\begin\\s*\\{${escapedEnvName}\\}`, "g");
+	beginPattern.lastIndex = startIndex;
+	const beginMatch = beginPattern.exec(input);
+	if (!beginMatch || beginMatch.index !== startIndex) return null;
+	const contentStart = beginPattern.lastIndex;
+	const tokenPattern = new RegExp(`\\\\(?:begin|end)\\s*\\{${escapedEnvName}\\}`, "g");
+	tokenPattern.lastIndex = startIndex;
+	let depth = 0;
+	for (;;) {
+		const tokenMatch = tokenPattern.exec(input);
+		if (!tokenMatch) break;
+		if (tokenMatch.index === startIndex) {
+			depth = 1;
+			continue;
+		}
+		if (tokenMatch[0].startsWith("\\begin")) depth++;
+		else depth--;
+		if (depth === 0) {
+			return {
+				fullText: input.slice(startIndex, tokenPattern.lastIndex),
+				innerText: input.slice(contentStart, tokenMatch.index),
+				endIndex: tokenPattern.lastIndex,
+			};
+		}
+	}
+	return null;
+}
+
+function extractStudioLatexLastCommandArgument(input: string, commandName: string, allowStar = false): string | null {
+	const escapedCommand = commandName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const pattern = new RegExp(`\\\\${escapedCommand}${allowStar ? "\\*?" : ""}(?:\\s*\\[[^\\]]*\\])?\\s*\\{`, "g");
+	let lastValue: string | null = null;
+	for (;;) {
+		const match = pattern.exec(input);
+		if (!match) break;
+		const openBraceIndex = pattern.lastIndex - 1;
+		const closeBraceIndex = findStudioLatexMatchingBrace(input, openBraceIndex);
+		if (closeBraceIndex < 0) continue;
+		lastValue = input.slice(openBraceIndex + 1, closeBraceIndex).trim() || null;
+		pattern.lastIndex = closeBraceIndex + 1;
+	}
+	return lastValue;
+}
+
+function convertStudioLatexLengthToCss(length: string): string | null {
+	const normalized = String(length ?? "").replace(/\s+/g, "");
+	if (!normalized) return null;
+	const fractionalMatch = normalized.match(/^([0-9]*\.?[0-9]+)\\(?:textwidth|linewidth|columnwidth|hsize)$/);
+	if (fractionalMatch) {
+		const fraction = Number.parseFloat(fractionalMatch[1] ?? "");
+		if (Number.isFinite(fraction) && fraction > 0) {
+			return `${Math.min(fraction * 100, 100)}%`;
+		}
+	}
+	const percentMatch = normalized.match(/^([0-9]*\.?[0-9]+)%$/);
+	if (percentMatch) {
+		const percent = Number.parseFloat(percentMatch[1] ?? "");
+		if (Number.isFinite(percent) && percent > 0) {
+			return `${Math.min(percent, 100)}%`;
+		}
+	}
+	return null;
+}
+
+function extractStudioLatexSubfigureWidth(blockText: string): string | null {
+	const match = blockText.match(/^\\begin\s*\{subfigure\*?\}(?:\s*\[[^\]]*\])?\s*\{([^}]*)\}/);
+	if (!match) return null;
+	return convertStudioLatexLengthToCss(match[1] ?? "");
+}
+
+function preprocessStudioLatexSubfiguresForPreview(markdown: string): StudioLatexSubfigurePreviewTransformResult {
+	const subfigureGroups: StudioLatexSubfigurePreviewGroup[] = [];
+	const figurePattern = /\\begin\s*\{(figure\*?)\}/g;
+	let transformed = "";
+	let cursor = 0;
+
+	for (;;) {
+		const figureMatch = figurePattern.exec(markdown);
+		if (!figureMatch) break;
+		const envName = figureMatch[1] ?? "figure";
+		const block = readStudioLatexEnvironmentBlock(markdown, figureMatch.index, envName);
+		if (!block) continue;
+		const inner = block.innerText;
+		const subfigurePattern = /\\begin\s*\{(subfigure\*?)\}/g;
+		const subfigureBlocks: Array<{ start: number; end: number; fullText: string; widthCss: string | null }> = [];
+		for (;;) {
+			const subfigureMatch = subfigurePattern.exec(inner);
+			if (!subfigureMatch) break;
+			const subfigureEnvName = subfigureMatch[1] ?? "subfigure";
+			const subfigureBlock = readStudioLatexEnvironmentBlock(inner, subfigureMatch.index, subfigureEnvName);
+			if (!subfigureBlock) continue;
+			subfigureBlocks.push({
+				start: subfigureMatch.index,
+				end: subfigureBlock.endIndex,
+				fullText: subfigureBlock.fullText.trim(),
+				widthCss: extractStudioLatexSubfigureWidth(subfigureBlock.fullText),
+			});
+			subfigurePattern.lastIndex = subfigureBlock.endIndex;
+		}
+
+		if (subfigureBlocks.length === 0) continue;
+
+		let outerResidual = "";
+		let residualCursor = 0;
+		for (const subfigureBlock of subfigureBlocks) {
+			outerResidual += inner.slice(residualCursor, subfigureBlock.start);
+			residualCursor = subfigureBlock.end;
+		}
+		outerResidual += inner.slice(residualCursor);
+
+		const markerId = String(subfigureGroups.length + 1);
+		const overallCaption = extractStudioLatexLastCommandArgument(outerResidual, "caption", true);
+		const overallLabel = extractStudioLatexLastCommandArgument(outerResidual, "label");
+		subfigureGroups.push({
+			markerId,
+			label: overallLabel,
+			subfigureWidths: subfigureBlocks.map((blockEntry) => blockEntry.widthCss),
+		});
+
+		const replacementParts = [
+			`PISTUDIOSUBFIGURESTART${markerId}`,
+			...subfigureBlocks.map((blockEntry) => blockEntry.fullText),
+			overallCaption ? `PISTUDIOSUBFIGURECAPTION${markerId} ${overallCaption}` : "",
+			`PISTUDIOSUBFIGUREEND${markerId}`,
+		].filter(Boolean);
+
+		transformed += markdown.slice(cursor, figureMatch.index);
+		transformed += replacementParts.join("\n\n");
+		cursor = block.endIndex;
+		figurePattern.lastIndex = block.endIndex;
+	}
+
+	transformed += markdown.slice(cursor);
+	return {
+		markdown: transformed,
+		subfigureGroups,
+	};
+}
+
+function parseStudioLatexLeadingCommand(line: string): { name: string; args: string[]; rest: string } | null {
+	const trimmed = String(line ?? "").trim();
+	const commandMatch = trimmed.match(/^\\([A-Za-z]+\*?)/);
+	if (!commandMatch) return null;
+	let cursor = commandMatch[0].length;
+	const args: string[] = [];
+
+	for (;;) {
+		while (cursor < trimmed.length && /\s/.test(trimmed[cursor]!)) cursor++;
+		if (trimmed[cursor] === "[") {
+			const closeBracket = trimmed.indexOf("]", cursor + 1);
+			if (closeBracket < 0) break;
+			cursor = closeBracket + 1;
+			continue;
+		}
+		if (trimmed[cursor] !== "{") break;
+		const closeBraceIndex = findStudioLatexMatchingBrace(trimmed, cursor);
+		if (closeBraceIndex < 0) break;
+		args.push(trimmed.slice(cursor + 1, closeBraceIndex));
+		cursor = closeBraceIndex + 1;
+	}
+
+	return {
+		name: commandMatch[1] ?? "",
+		args,
+		rest: trimmed.slice(cursor).trim(),
+	};
+}
+
+function stripStudioLatexOptionalBracketPrefix(text: string): string {
+	const normalized = String(text ?? "").trimStart();
+	if (!normalized.startsWith("[")) return normalized;
+	const closeBracketIndex = normalized.indexOf("]");
+	if (closeBracketIndex < 0) return normalized;
+	return normalized.slice(closeBracketIndex + 1).trimStart();
+}
+
+function normalizeStudioLatexAlgorithmInlineText(text: string): string {
+	return String(text ?? "")
+		.replace(/\\Comment\s*\{([^}]*)\}/g, " // $1")
+		.replace(/\\\s+/g, " ")
+		.replace(/\s+/g, " ")
+		.trim();
+}
+
+function pushStudioLatexAlgorithmPreviewLine(
+	lines: StudioLatexAlgorithmPreviewLine[],
+	indent: number,
+	content: string,
+	showLineNumbers: boolean,
+	lineCounterRef: { value: number },
+): void {
+	const normalizedContent = normalizeStudioLatexAlgorithmInlineText(content);
+	if (!normalizedContent) return;
+	lines.push({
+		indent: Math.max(0, indent),
+		content: normalizedContent,
+		lineNumber: showLineNumbers ? lineCounterRef.value++ : null,
+	});
+}
+
+function parseStudioLatexAlgorithmicLines(content: string, showLineNumbers: boolean): StudioLatexAlgorithmPreviewLine[] {
+	const lines: StudioLatexAlgorithmPreviewLine[] = [];
+	const lineCounterRef = { value: 1 };
+	let indent = 0;
+	const stripped = stripStudioLatexComments(content);
+
+	for (const rawLine of stripped.split(/\r?\n/)) {
+		const trimmed = rawLine.trim();
+		if (!trimmed) continue;
+		const command = parseStudioLatexLeadingCommand(trimmed);
+		if (!command) {
+			if (lines.length > 0) {
+				const continuation = normalizeStudioLatexAlgorithmInlineText(trimmed);
+				if (continuation) {
+					lines[lines.length - 1]!.content += ` ${continuation}`;
+				}
+			} else {
+				pushStudioLatexAlgorithmPreviewLine(lines, indent, trimmed, showLineNumbers, lineCounterRef);
+			}
+			continue;
+		}
+
+		const name = command.name.replace(/\*$/, "");
+		const arg0 = command.args[0] ?? "";
+		const arg1 = command.args[1] ?? "";
+
+		if (/^(caption|label|begin|end)$/.test(name)) continue;
+		if (/^End(?:For|ForAll|While|If|Procedure|Function)$/i.test(name)) {
+			indent = Math.max(0, indent - 1);
+			const suffix = name.replace(/^End/i, "").replace(/ForAll/i, "for all");
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `end ${suffix.toLowerCase()}`, showLineNumbers, lineCounterRef);
+			continue;
+		}
+		if (/^Else$/i.test(name)) {
+			indent = Math.max(0, indent - 1);
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, "else", showLineNumbers, lineCounterRef);
+			indent++;
+			continue;
+		}
+		if (/^ElsIf$/i.test(name)) {
+			indent = Math.max(0, indent - 1);
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `else if ${arg0}`, showLineNumbers, lineCounterRef);
+			indent++;
+			continue;
+		}
+		if (/^Until$/i.test(name)) {
+			indent = Math.max(0, indent - 1);
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `until ${arg0}`, showLineNumbers, lineCounterRef);
+			continue;
+		}
+		if (/^Statex$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, command.rest, false, lineCounterRef);
+			continue;
+		}
+		if (/^State$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, command.rest || arg0, showLineNumbers, lineCounterRef);
+			continue;
+		}
+		if (/^Return$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `return ${command.rest || arg0}`.trim(), showLineNumbers, lineCounterRef);
+			continue;
+		}
+		if (/^(Require|Input)$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `Input: ${command.rest || arg0}`.trim(), showLineNumbers, lineCounterRef);
+			continue;
+		}
+		if (/^(Ensure|Output)$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `Output: ${command.rest || arg0}`.trim(), showLineNumbers, lineCounterRef);
+			continue;
+		}
+		if (/^Comment$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `// ${arg0 || command.rest}`.trim(), false, lineCounterRef);
+			continue;
+		}
+		if (/^Repeat$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, "repeat", showLineNumbers, lineCounterRef);
+			indent++;
+			continue;
+		}
+		if (/^ForAll$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `for all ${arg0}`, showLineNumbers, lineCounterRef);
+			indent++;
+			continue;
+		}
+		if (/^For$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `for ${arg0}`, showLineNumbers, lineCounterRef);
+			indent++;
+			continue;
+		}
+		if (/^While$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `while ${arg0}`, showLineNumbers, lineCounterRef);
+			indent++;
+			continue;
+		}
+		if (/^If$/i.test(name)) {
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `if ${arg0}`, showLineNumbers, lineCounterRef);
+			indent++;
+			continue;
+		}
+		if (/^Procedure$/i.test(name)) {
+			const signature = arg1 ? `${arg0}(${arg1})` : arg0;
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `procedure ${signature}`.trim(), showLineNumbers, lineCounterRef);
+			indent++;
+			continue;
+		}
+		if (/^Function$/i.test(name)) {
+			const signature = arg1 ? `${arg0}(${arg1})` : arg0;
+			pushStudioLatexAlgorithmPreviewLine(lines, indent, `function ${signature}`.trim(), showLineNumbers, lineCounterRef);
+			indent++;
+			continue;
+		}
+
+		pushStudioLatexAlgorithmPreviewLine(lines, indent, trimmed, showLineNumbers, lineCounterRef);
+	}
+
+	return lines;
+}
+
+function buildStudioLatexAlgorithmPreviewReplacement(block: StudioLatexAlgorithmPreviewBlock): string {
+	const parts = [
+		`PISTUDIOALGORITHMSTART${block.markerId}`,
+		block.caption ? `PISTUDIOALGORITHMCAPTION${block.markerId} ${block.caption}` : "",
+		...block.lines.map((line) => `PISTUDIOALGORITHMLINE${block.markerId}::${line.indent}::${line.lineNumber == null ? "-" : String(line.lineNumber)}:: ${line.content}`),
+		`PISTUDIOALGORITHMEND${block.markerId}`,
+	].filter(Boolean);
+	return `\n\n${parts.join("\n\n")}\n\n`;
+}
+
+function preprocessStudioLatexAlgorithmsForPreview(markdown: string): StudioLatexAlgorithmPreviewTransformResult {
+	const algorithmBlocks: StudioLatexAlgorithmPreviewBlock[] = [];
+	const transformEnvironment = (input: string, envPattern: RegExp, buildBlock: (block: { fullText: string; innerText: string; endIndex: number }, markerId: string) => StudioLatexAlgorithmPreviewBlock | null): string => {
+		let transformed = "";
+		let cursor = 0;
+		envPattern.lastIndex = 0;
+		for (;;) {
+			const envMatch = envPattern.exec(input);
+			if (!envMatch) break;
+			const envName = envMatch[1] ?? "";
+			const block = readStudioLatexEnvironmentBlock(input, envMatch.index, envName);
+			if (!block) continue;
+			const markerId = String(algorithmBlocks.length + 1);
+			const previewBlock = buildBlock(block, markerId);
+			if (!previewBlock || previewBlock.lines.length === 0) continue;
+			algorithmBlocks.push(previewBlock);
+			transformed += input.slice(cursor, envMatch.index);
+			transformed += buildStudioLatexAlgorithmPreviewReplacement(previewBlock);
+			cursor = block.endIndex;
+			envPattern.lastIndex = block.endIndex;
+		}
+		transformed += input.slice(cursor);
+		return transformed;
+	};
+
+	let transformed = transformEnvironment(markdown, /\\begin\s*\{(algorithm\*?)\}/g, (block, markerId) => {
+		const inner = block.innerText;
+		const algorithmicPattern = /\\begin\s*\{(algorithmic\*?)\}(?:\s*\[[^\]]*\])?/g;
+		const algorithmicMatch = algorithmicPattern.exec(inner);
+		let content = inner;
+		let showLineNumbers = false;
+		if (algorithmicMatch) {
+			const algorithmicEnvName = algorithmicMatch[1] ?? "algorithmic";
+			const algorithmicBlock = readStudioLatexEnvironmentBlock(inner, algorithmicMatch.index, algorithmicEnvName);
+			if (algorithmicBlock) {
+				content = stripStudioLatexOptionalBracketPrefix(algorithmicBlock.innerText);
+				showLineNumbers = /^\\begin\s*\{algorithmic\*?\}\s*\[[^\]]+\]/.test(algorithmicBlock.fullText);
+			}
+		}
+		return {
+			markerId,
+			label: extractStudioLatexLastCommandArgument(inner, "label"),
+			caption: extractStudioLatexLastCommandArgument(inner, "caption", true),
+			lines: parseStudioLatexAlgorithmicLines(content, showLineNumbers),
+		};
+	});
+
+	transformed = transformEnvironment(transformed, /\\begin\s*\{(algorithmic\*?)\}(?:\s*\[[^\]]*\])?/g, (block, markerId) => ({
+		markerId,
+		label: extractStudioLatexLastCommandArgument(block.innerText, "label"),
+		caption: null,
+		lines: parseStudioLatexAlgorithmicLines(
+			stripStudioLatexOptionalBracketPrefix(block.innerText),
+			/^\\begin\s*\{algorithmic\*?\}\s*\[[^\]]+\]/.test(block.fullText),
+		),
+	}));
+
+	return {
+		markdown: transformed,
+		algorithmBlocks,
+	};
+}
+
+function appendStudioHtmlClassAttribute(attrs: string, className: string): string {
+	if (/\bclass="([^"]*)"/.test(attrs)) {
+		return attrs.replace(/\bclass="([^"]*)"/, (_match, existing) => {
+			const classNames = String(existing ?? "").split(/\s+/).filter(Boolean);
+			if (!classNames.includes(className)) classNames.push(className);
+			return `class="${classNames.join(" ")}"`;
+		});
+	}
+	return `${attrs} class="${className}"`;
+}
+
+function appendStudioHtmlStyleAttribute(attrs: string, styleText: string): string {
+	if (/\bstyle="([^"]*)"/.test(attrs)) {
+		return attrs.replace(/\bstyle="([^"]*)"/, (_match, existing) => {
+			const prefix = String(existing ?? "").trim();
+			const separator = prefix && !prefix.endsWith(";") ? "; " : (prefix ? " " : "");
+			return `style="${prefix}${separator}${styleText}"`;
+		});
+	}
+	return `${attrs} style="${styleText}"`;
+}
+
+function prependStudioHtmlCaptionLabel(captionHtml: string, labelHtml: string, className: string): string {
+	const normalizedCaption = String(captionHtml ?? "");
+	const normalizedLabel = String(labelHtml ?? "").trim();
+	if (!normalizedCaption || !normalizedLabel) return normalizedCaption;
+	if (normalizedCaption.includes(`class="${className}"`)) return normalizedCaption;
+	return normalizedCaption.replace(/<figcaption\b([^>]*)>([\s\S]*?)<\/figcaption>/i, (_match, attrs, inner) => {
+		const trimmedInner = String(inner ?? "").trim();
+		const spacer = trimmedInner ? " " : "";
+		return `<figcaption${attrs}><span class="${className}">${normalizedLabel}</span>${spacer}${trimmedInner}</figcaption>`;
+	});
+}
+
+function extractStudioHtmlIdAttribute(html: string): string | null {
+	const match = String(html ?? "").match(/\bid="([^"]+)"/i);
+	return match?.[1]?.trim() || null;
+}
+
+function formatStudioLatexSubfigureCaptionLabel(label: string | null, labels: Map<string, { number: string; kind: string }>): string | null {
+	const normalizedLabel = String(label ?? "").trim();
+	if (!normalizedLabel) return null;
+	const subfigureEntry = labels.get(`sub@${normalizedLabel}`);
+	if (subfigureEntry?.number) return `(${subfigureEntry.number})`;
+	const figureEntry = labels.get(normalizedLabel);
+	if (!figureEntry?.number) return null;
+	const suffixMatch = figureEntry.number.match(/([A-Za-z]+)$/);
+	return suffixMatch ? `(${suffixMatch[1]})` : null;
+}
+
+function formatStudioLatexMainFigureCaptionLabel(label: string | null, labels: Map<string, { number: string; kind: string }>): string | null {
+	const normalizedLabel = String(label ?? "").trim();
+	if (!normalizedLabel) return null;
+	const entry = labels.get(normalizedLabel);
+	if (!entry?.number) return null;
+	if (entry.kind === "table") return `Table ${entry.number}`;
+	return `Figure ${entry.number}`;
+}
+
+function formatStudioLatexMainAlgorithmCaptionLabel(label: string | null, labels: Map<string, { number: string; kind: string }>): string | null {
+	const normalizedLabel = String(label ?? "").trim();
+	if (!normalizedLabel) return null;
+	const entry = labels.get(normalizedLabel);
+	if (!entry?.number) return null;
+	return `Algorithm ${entry.number}`;
+}
+
+function decorateStudioLatexSubfigureRenderedHtml(
+	html: string,
+	subfigureGroups: StudioLatexSubfigurePreviewGroup[],
+	labels: Map<string, { number: string; kind: string }>,
+): string {
+	let transformed = String(html ?? "");
+	for (const group of subfigureGroups) {
+		const startMarker = `<p>PISTUDIOSUBFIGURESTART${group.markerId}</p>`;
+		const endMarker = `<p>PISTUDIOSUBFIGUREEND${group.markerId}</p>`;
+		const startIndex = transformed.indexOf(startMarker);
+		if (startIndex < 0) continue;
+		const endIndex = transformed.indexOf(endMarker, startIndex + startMarker.length);
+		if (endIndex < 0) continue;
+
+		let groupBody = transformed.slice(startIndex + startMarker.length, endIndex).trim();
+		let captionHtml = "";
+		const captionPattern = new RegExp(`<p>PISTUDIOSUBFIGURECAPTION${group.markerId}\\s*([\\s\\S]*?)<\\/p>\\s*$`);
+		const captionMatch = groupBody.match(captionPattern);
+		if (captionMatch) {
+			captionHtml = String(captionMatch[1] ?? "").trim();
+			groupBody = groupBody.slice(0, captionMatch.index).trim();
+		}
+		if (!/<figure\b/i.test(groupBody)) continue;
+
+		let figureIndex = 0;
+		const figureBlocks = Array.from(groupBody.matchAll(/<figure\b([^>]*)>([\s\S]*?)<\/figure>/g));
+		const gridHtml = figureBlocks.map((figureMatch) => {
+			let attrs = String(figureMatch[1] ?? "");
+			let innerHtml = String(figureMatch[2] ?? "").trim();
+			attrs = appendStudioHtmlClassAttribute(attrs, "studio-subfigure-entry");
+			const widthCss = group.subfigureWidths[figureIndex++] ?? null;
+			if (widthCss) {
+				attrs = appendStudioHtmlStyleAttribute(attrs, `flex-basis: ${widthCss}; width: min(100%, ${widthCss});`);
+			}
+			const subfigureLabel = formatStudioLatexSubfigureCaptionLabel(extractStudioHtmlIdAttribute(innerHtml), labels);
+			if (subfigureLabel) {
+				innerHtml = prependStudioHtmlCaptionLabel(innerHtml, subfigureLabel, "studio-subfigure-caption-label");
+			}
+			return `<figure${attrs}>${innerHtml}</figure>`;
+		}).join("\n").trim();
+		if (!gridHtml) continue;
+
+		const idAttr = group.label ? ` id="${escapeStudioHtmlText(group.label)}"` : "";
+		const mainFigureLabel = formatStudioLatexMainFigureCaptionLabel(group.label, labels);
+		const figcaptionHtml = captionHtml
+			? prependStudioHtmlCaptionLabel(`<figcaption>${captionHtml}</figcaption>`, mainFigureLabel ?? "", "studio-figure-caption-label")
+			: "";
+		const replacement = `<figure class="studio-subfigure-group"${idAttr}><div class="studio-subfigure-grid">${gridHtml}</div>${figcaptionHtml}</figure>`;
+		transformed = transformed.slice(0, startIndex) + replacement + transformed.slice(endIndex + endMarker.length);
+	}
+	return transformed;
+}
+
+function decorateStudioLatexAlgorithmRenderedHtml(
+	html: string,
+	algorithmBlocks: StudioLatexAlgorithmPreviewBlock[],
+	labels: Map<string, { number: string; kind: string }>,
+): string {
+	let transformed = String(html ?? "");
+	for (const block of algorithmBlocks) {
+		const startMarker = `<p>PISTUDIOALGORITHMSTART${block.markerId}</p>`;
+		const endMarker = `<p>PISTUDIOALGORITHMEND${block.markerId}</p>`;
+		const startIndex = transformed.indexOf(startMarker);
+		if (startIndex < 0) continue;
+		const endIndex = transformed.indexOf(endMarker, startIndex + startMarker.length);
+		if (endIndex < 0) continue;
+
+		let blockBody = transformed.slice(startIndex + startMarker.length, endIndex).trim();
+		let captionHtml = "";
+		const captionPattern = new RegExp(`<p>PISTUDIOALGORITHMCAPTION${block.markerId}\\s*([\\s\\S]*?)<\\/p>`);
+		const captionMatch = blockBody.match(captionPattern);
+		if (captionMatch && captionMatch.index != null) {
+			captionHtml = String(captionMatch[1] ?? "").trim();
+			blockBody = blockBody.slice(0, captionMatch.index) + blockBody.slice(captionMatch.index + captionMatch[0].length);
+		}
+
+		const linePattern = new RegExp(`<p>PISTUDIOALGORITHMLINE${block.markerId}::(\\d+)::([^:]+)::\\s*([\\s\\S]*?)<\\/p>`, "g");
+		const renderedLines = Array.from(blockBody.matchAll(linePattern)).map((lineMatch) => {
+			const indent = Number.parseInt(lineMatch[1] ?? "0", 10);
+			const lineNumber = String(lineMatch[2] ?? "-").trim();
+			const lineHtml = String(lineMatch[3] ?? "").trim();
+			return `<div class="studio-algorithm-line" style="--studio-algorithm-indent:${Number.isFinite(indent) ? Math.max(0, indent) : 0};"><span class="studio-algorithm-line-number">${lineNumber === "-" ? "" : escapeStudioHtmlText(lineNumber)}</span><span class="studio-algorithm-line-content">${lineHtml}</span></div>`;
+		}).join("");
+		if (!renderedLines) continue;
+
+		const idAttr = block.label ? ` id="${escapeStudioHtmlText(block.label)}"` : "";
+		const captionLabel = formatStudioLatexMainAlgorithmCaptionLabel(block.label, labels);
+		const figcaptionHtml = captionHtml
+			? prependStudioHtmlCaptionLabel(`<figcaption>${captionHtml}</figcaption>`, captionLabel ?? "", "studio-algorithm-caption-label")
+			: (captionLabel ? `<figcaption><span class="studio-algorithm-caption-label">${escapeStudioHtmlText(captionLabel)}</span></figcaption>` : "");
+		const replacement = `<figure class="studio-algorithm-block"${idAttr}>${figcaptionHtml}<div class="studio-algorithm-body">${renderedLines}</div></figure>`;
+		transformed = transformed.slice(0, startIndex) + replacement + transformed.slice(endIndex + endMarker.length);
+	}
+	return transformed;
+}
+
 function parseStudioAuxTopLevelGroups(input: string): string[] {
 	const groups: string[] = [];
 	let i = 0;
@@ -1219,37 +1832,51 @@ function escapeStudioHtmlText(text: string): string {
 		.replace(/'/g, "&#39;");
 }
 
-function decorateStudioLatexRenderedHtml(html: string, sourcePath: string | undefined, baseDir: string | undefined): string {
+function decorateStudioLatexRenderedHtml(
+	html: string,
+	sourcePath: string | undefined,
+	baseDir: string | undefined,
+	subfigureGroups: StudioLatexSubfigurePreviewGroup[] = [],
+	algorithmBlocks: StudioLatexAlgorithmPreviewBlock[] = [],
+): string {
 	const labels = readStudioLatexAuxLabels(sourcePath, baseDir);
-	if (labels.size === 0) return html;
 	let transformed = String(html ?? "");
 
-	transformed = transformed.replace(/<a\b([^>]*)>([\s\S]*?)<\/a>/g, (match, attrs) => {
-		const typeMatch = String(attrs ?? "").match(/\bdata-reference-type="([^"]+)"/);
-		const labelMatch = String(attrs ?? "").match(/\bdata-reference="([^"]+)"/);
-		if (!typeMatch || !labelMatch) return match;
-		const referenceTypeRaw = String(typeMatch[1] ?? "").trim();
-		const label = String(labelMatch[1] ?? "").trim();
-		const referenceType =
-			referenceTypeRaw === "eqref" || referenceTypeRaw === "autoref" || referenceTypeRaw === "ref"
-				? referenceTypeRaw
-				: null;
-		if (!referenceType || !label) return match;
-		const formatted = formatStudioLatexReference(label, referenceType, labels);
-		if (!formatted) return match;
-		return `<a${attrs}>${escapeStudioHtmlText(formatted)}</a>`;
-	});
+	if (labels.size > 0) {
+		transformed = transformed.replace(/<a\b([^>]*)>([\s\S]*?)<\/a>/g, (match, attrs) => {
+			const typeMatch = String(attrs ?? "").match(/\bdata-reference-type="([^"]+)"/);
+			const labelMatch = String(attrs ?? "").match(/\bdata-reference="([^"]+)"/);
+			if (!typeMatch || !labelMatch) return match;
+			const referenceTypeRaw = String(typeMatch[1] ?? "").trim();
+			const label = String(labelMatch[1] ?? "").trim();
+			const referenceType =
+				referenceTypeRaw === "eqref" || referenceTypeRaw === "autoref" || referenceTypeRaw === "ref"
+					? referenceTypeRaw
+					: null;
+			if (!referenceType || !label) return match;
+			const formatted = formatStudioLatexReference(label, referenceType, labels);
+			if (!formatted) return match;
+			return `<a${attrs}>${escapeStudioHtmlText(formatted)}</a>`;
+		});
 
-	transformed = transformed.replace(/<math\b[^>]*display="block"[^>]*>[\s\S]*?<\/math>/g, (block) => {
-		if (/studio-display-equation/.test(block)) return block;
-		const labelMatch = block.match(/\\label\s*\{([^}]+)\}/);
-		if (!labelMatch) return block;
-		const label = String(labelMatch[1] ?? "").trim();
-		if (!label) return block;
-		const formatted = formatStudioLatexReference(label, "eqref", labels);
-		if (!formatted) return block;
-		return `<div class="studio-display-equation"><div class="studio-display-equation-body">${block}</div><div class="studio-display-equation-number">${escapeStudioHtmlText(formatted)}</div></div>`;
-	});
+		transformed = transformed.replace(/<math\b[^>]*display="block"[^>]*>[\s\S]*?<\/math>/g, (block) => {
+			if (/studio-display-equation/.test(block)) return block;
+			const labelMatch = block.match(/\\label\s*\{([^}]+)\}/);
+			if (!labelMatch) return block;
+			const label = String(labelMatch[1] ?? "").trim();
+			if (!label) return block;
+			const formatted = formatStudioLatexReference(label, "eqref", labels);
+			if (!formatted) return block;
+			return `<div class="studio-display-equation"><div class="studio-display-equation-body">${block}</div><div class="studio-display-equation-number">${escapeStudioHtmlText(formatted)}</div></div>`;
+		});
+	}
+
+	if (subfigureGroups.length > 0) {
+		transformed = decorateStudioLatexSubfigureRenderedHtml(transformed, subfigureGroups, labels);
+	}
+	if (algorithmBlocks.length > 0) {
+		transformed = decorateStudioLatexAlgorithmRenderedHtml(transformed, algorithmBlocks, labels);
+	}
 
 	return transformed;
 }
@@ -1848,9 +2475,17 @@ async function preprocessStudioMermaidForPdf(markdown: string, workDir: string):
 
 async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolean, resourcePath?: string, sourcePath?: string): Promise<string> {
 	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
-	const sourceWithResolvedRefs = isLatex ? preprocessStudioLatexReferences(markdown, sourcePath, resourcePath) : markdown;
+	const latexSubfigurePreviewTransform = isLatex
+		? preprocessStudioLatexSubfiguresForPreview(markdown)
+		: { markdown, subfigureGroups: [] };
+	const latexAlgorithmPreviewTransform = isLatex
+		? preprocessStudioLatexAlgorithmsForPreview(latexSubfigurePreviewTransform.markdown)
+		: { markdown, algorithmBlocks: [] };
+	const sourceWithResolvedRefs = isLatex
+		? preprocessStudioLatexReferences(latexAlgorithmPreviewTransform.markdown, sourcePath, resourcePath)
+		: markdown;
 	const inputFormat = isLatex ? "latex" : "markdown+lists_without_preceding_blankline+tex_math_dollars+tex_math_single_backslash+tex_math_double_backslash+autolink_bare_uris-raw_html";
-	const bibliographyArgs = buildStudioPandocBibliographyArgs(sourceWithResolvedRefs, isLatex, resourcePath);
+	const bibliographyArgs = buildStudioPandocBibliographyArgs(markdown, isLatex, resourcePath);
 	const args = ["-f", inputFormat, "-t", "html5", "--mathml", "--wrap=none", ...bibliographyArgs];
 	if (resourcePath) {
 		args.push(`--resource-path=${resourcePath}`);
@@ -1904,7 +2539,13 @@ async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolea
 					if (bodyMatch) renderedHtml = bodyMatch[1];
 				}
 				if (isLatex) {
-					renderedHtml = decorateStudioLatexRenderedHtml(renderedHtml, sourcePath, resourcePath);
+					renderedHtml = decorateStudioLatexRenderedHtml(
+						renderedHtml,
+						sourcePath,
+						resourcePath,
+						latexSubfigurePreviewTransform.subfigureGroups,
+						latexAlgorithmPreviewTransform.algorithmBlocks,
+					);
 				}
 				succeed(stripMathMlAnnotationTags(renderedHtml));
 				return;
@@ -3130,32 +3771,31 @@ ${cssVarsBlock}
                 <option value="on" selected>Syntax highlight: On</option>
               </select>
               <select id="langSelect" aria-label="Highlight language">
-                <option value="markdown" selected>Lang: Markdown</option>
-                <option value="javascript">Lang: JavaScript</option>
-                <option value="typescript">Lang: TypeScript</option>
-                <option value="python">Lang: Python</option>
                 <option value="bash">Lang: Bash</option>
-                <option value="json">Lang: JSON</option>
-                <option value="rust">Lang: Rust</option>
                 <option value="c">Lang: C</option>
                 <option value="cpp">Lang: C++</option>
-                <option value="julia">Lang: Julia</option>
-                <option value="fortran">Lang: Fortran</option>
-                <option value="r">Lang: R</option>
-                <option value="matlab">Lang: MATLAB</option>
-                <option value="latex">Lang: LaTeX</option>
+                <option value="css">Lang: CSS</option>
                 <option value="diff">Lang: Diff</option>
-                <option value="java">Lang: Java</option>
+                <option value="fortran">Lang: Fortran</option>
                 <option value="go">Lang: Go</option>
-                <option value="ruby">Lang: Ruby</option>
-                <option value="swift">Lang: Swift</option>
                 <option value="html">Lang: HTML</option>
-                <option value="css">Lang: CSS</option>
-                <option value="xml">Lang: XML</option>
-                <option value="yaml">Lang: YAML</option>
-                <option value="toml">Lang: TOML</option>
+                <option value="java">Lang: Java</option>
+                <option value="javascript">Lang: JavaScript</option>
+                <option value="json">Lang: JSON</option>
+                <option value="julia">Lang: Julia</option>
+                <option value="latex">Lang: LaTeX</option>
                 <option value="lua">Lang: Lua</option>
+                <option value="markdown" selected>Lang: Markdown</option>
+                <option value="matlab">Lang: MATLAB</option>
                 <option value="text">Lang: Plain Text</option>
+                <option value="python">Lang: Python</option>
+                <option value="r">Lang: R</option>
+                <option value="rust">Lang: Rust</option>
+                <option value="swift">Lang: Swift</option>
+                <option value="toml">Lang: TOML</option>
+                <option value="typescript">Lang: TypeScript</option>
+                <option value="xml">Lang: XML</option>
+                <option value="yaml">Lang: YAML</option>
               </select>
             </div>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.21",
+  "version": "0.5.22",
   "description": "Browser GUI for structured critique workflows in pi",
   "type": "module",
   "license": "MIT",