pi-studio 0.5.29 → 0.5.30

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.30] — 2026-03-24
+
+### Fixed
+- LaTeX preview now preserves structured display-math environments such as `bmatrix` inside `\[ ... \]` instead of flattening their rows during Markdown math normalization, and preview display equations now center more robustly across browser engines.
+- Studio now highlights custom `[an: ...]` markers in LaTeX editor syntax-highlighting mode, and PDF export renders those markers as styled annotation badges for both Markdown and LaTeX documents instead of leaving the raw bracket syntax in the final PDF.
+- Right-pane response PDF export now also respects the current annotation-visibility mode, so hidden annotations do not leak into exported PDFs as raw `[an: ...]` text.
+
 ## [0.5.29] — 2026-03-21
 
 ### Changed

package/client/studio-client.js

@@ -1715,7 +1715,9 @@
           return;
         }
 
-        const markdown = rightView === "editor-preview" ? prepareEditorTextForPdfExport(sourceTextEl.value) : latestResponseMarkdown;
+        const markdown = rightView === "editor-preview"
+          ? prepareEditorTextForPdfExport(sourceTextEl.value)
+          : prepareEditorTextForPreview(latestResponseMarkdown);
         if (!markdown || !markdown.trim()) {
           setStatus("Nothing to export yet.", "warning");
           return;
@@ -2558,17 +2560,49 @@
         }
 
         if (lang === "latex") {
-          const texPattern = /(%.*$)|(\\(?:documentclass|usepackage|newtheorem|begin|end|section|subsection|subsubsection|chapter|part|title|author|date|maketitle|tableofcontents|includegraphics|caption|label|ref|eqref|cite|textbf|textit|texttt|emph|footnote|centering|newcommand|renewcommand|providecommand|bibliography|bibliographystyle|bibitem|item|input|include)\b)|(\\[A-Za-z]+)|(\{|\})|(\$\$?(?:[^$\\]|\\.)+\$\$?)|(\[(?:.*?)\])/g;
-          const highlighted = highlightCodeTokens(source, texPattern, (match) => {
-            if (match[1]) return "hl-code-com";
-            if (match[2]) return "hl-code-kw";
-            if (match[3]) return "hl-code-fn";
-            if (match[4]) return "hl-code-op";
-            if (match[5]) return "hl-code-str";
-            if (match[6]) return "hl-code-num";
-            return "hl-code";
-          });
-          return highlighted;
+          const texPattern = /(%.*$)|(\[an:\s*[^\]]+\])|(\\(?:documentclass|usepackage|newtheorem|begin|end|section|subsection|subsubsection|chapter|part|title|author|date|maketitle|tableofcontents|includegraphics|caption|label|ref|eqref|cite|textbf|textit|texttt|emph|footnote|centering|newcommand|renewcommand|providecommand|bibliography|bibliographystyle|bibitem|item|input|include)\b)|(\\[A-Za-z]+)|(\{|\})|(\$\$?(?:[^$\\]|\\.)+\$\$?)|(\[(?:.*?)\])/gi;
+          let out = "";
+          let lastIndex = 0;
+          texPattern.lastIndex = 0;
+
+          let match;
+          while ((match = texPattern.exec(source)) !== null) {
+            const token = match[0] || "";
+            const start = typeof match.index === "number" ? match.index : 0;
+
+            if (start > lastIndex) {
+              out += escapeHtml(source.slice(lastIndex, start));
+            }
+
+            if (match[1]) {
+              out += wrapHighlight("hl-code-com", token);
+            } else if (match[2]) {
+              out += highlightInlineAnnotations(token, renderMode);
+            } else if (match[3]) {
+              out += wrapHighlight("hl-code-kw", token);
+            } else if (match[4]) {
+              out += wrapHighlight("hl-code-fn", token);
+            } else if (match[5]) {
+              out += wrapHighlight("hl-code-op", token);
+            } else if (match[6]) {
+              out += wrapHighlight("hl-code-str", token);
+            } else if (match[7]) {
+              out += wrapHighlight("hl-code-num", token);
+            } else {
+              out += escapeHtml(token);
+            }
+
+            lastIndex = start + token.length;
+            if (token.length === 0) {
+              texPattern.lastIndex += 1;
+            }
+          }
+
+          if (lastIndex < source.length) {
+            out += escapeHtml(source.slice(lastIndex));
+          }
+
+          return out;
         }
 
         if (lang === "diff") {

package/client/studio.css

@@ -874,7 +874,9 @@
 
     .rendered-markdown mjx-container[display="true"] {
       display: block;
-      margin: 1em 0;
+      width: fit-content;
+      max-width: 100%;
+      margin: 1em auto;
       text-align: center;
       overflow-x: auto;
       overflow-y: hidden;
@@ -893,7 +895,7 @@
 
     .rendered-markdown .studio-display-equation-body math[display="block"],
     .rendered-markdown .studio-display-equation-body mjx-container[display="true"] {
-      margin: 0;
+      margin: 0 auto;
     }
 
     .rendered-markdown .studio-display-equation-number {
@@ -910,7 +912,9 @@
 
     .rendered-markdown math[display="block"] {
       display: block;
-      margin: 1em 0;
+      width: fit-content;
+      max-width: 100%;
+      margin: 1em auto;
       text-align: center;
       overflow-x: auto;
       overflow-y: hidden;

package/index.ts

@@ -205,6 +205,11 @@ const PDF_PREAMBLE = `\\usepackage{titlesec}
 \\titleformat{\\subsubsection}{\\normalsize\\bfseries\\sffamily}{}{0pt}{}
 \\titlespacing*{\\section}{0pt}{1.5ex plus 0.5ex minus 0.2ex}{1ex plus 0.2ex}
 \\titlespacing*{\\subsection}{0pt}{1.2ex plus 0.4ex minus 0.2ex}{0.6ex plus 0.1ex}
+\\usepackage{xcolor}
+\\definecolor{StudioAnnotationBg}{HTML}{EAF3FF}
+\\definecolor{StudioAnnotationBorder}{HTML}{8CB8FF}
+\\definecolor{StudioAnnotationText}{HTML}{1F5FBF}
+\\newcommand{\\studioannotation}[1]{\\begingroup\\setlength{\\fboxsep}{1.5pt}\\fcolorbox{StudioAnnotationBorder}{StudioAnnotationBg}{\\textcolor{StudioAnnotationText}{\\sffamily\\footnotesize\\strut #1}}\\endgroup}
 \\usepackage{caption}
 \\captionsetup[figure]{justification=raggedright,singlelinecheck=false}
 \\usepackage{enumitem}
@@ -2466,6 +2471,9 @@ function isLikelyMathExpression(expr: string): boolean {
 
 function collapseDisplayMathContent(expr: string): string {
 	let content = expr.trim();
+	if (/\\begin\{[^}]+\}|\\end\{[^}]+\}/.test(content)) {
+		return content;
+	}
 	if (content.includes("\\\\") || content.includes("\n")) {
 		content = content.replace(/\\\\\s*/g, " ");
 		content = content.replace(/\s*\n\s*/g, " ");
@@ -2646,6 +2654,85 @@ function inferStudioPdfLanguage(markdown: string, editorLanguage?: string): stri
 	return undefined;
 }
 
+function escapeStudioPdfLatexText(text: string): string {
+	return String(text ?? "")
+		.replace(/\r\n/g, "\n")
+		.replace(/\s*\n\s*/g, " ")
+		.trim()
+		.replace(/\\/g, "\\textbackslash{}")
+		.replace(/([{}%#$&_])/g, "\\$1")
+		.replace(/~/g, "\\textasciitilde{}")
+		.replace(/\^/g, "\\textasciicircum{}")
+		.replace(/\s{2,}/g, " ");
+}
+
+function replaceStudioAnnotationMarkersForPdfInSegment(text: string): string {
+	return String(text ?? "")
+		.replace(/\[an:\s*([^\]]+?)\]/gi, (_match, markerText: string) => {
+			const cleaned = escapeStudioPdfLatexText(markerText);
+			if (!cleaned) return "";
+			return `\\studioannotation{${cleaned}}`;
+		})
+		.replace(/\{\[\}\s*an:\s*([\s\S]*?)\s*\{\]\}/gi, (_match, markerText: string) => {
+			const cleaned = escapeStudioPdfLatexText(markerText);
+			if (!cleaned) return "";
+			return `\\studioannotation{${cleaned}}`;
+		});
+}
+
+function replaceStudioAnnotationMarkersForPdf(markdown: string): string {
+	const lines = String(markdown ?? "").split("\n");
+	const out: string[] = [];
+	let plainBuffer: string[] = [];
+	let inFence = false;
+	let fenceChar: "`" | "~" | undefined;
+	let fenceLength = 0;
+
+	const flushPlain = () => {
+		if (plainBuffer.length === 0) return;
+		out.push(replaceStudioAnnotationMarkersForPdfInSegment(plainBuffer.join("\n")));
+		plainBuffer = [];
+	};
+
+	for (const line of lines) {
+		const trimmed = line.trimStart();
+		const fenceMatch = trimmed.match(/^(`{3,}|~{3,})/);
+
+		if (fenceMatch) {
+			const marker = fenceMatch[1]!;
+			const markerChar = marker[0] as "`" | "~";
+			const markerLength = marker.length;
+
+			if (!inFence) {
+				flushPlain();
+				inFence = true;
+				fenceChar = markerChar;
+				fenceLength = markerLength;
+				out.push(line);
+				continue;
+			}
+
+			if (fenceChar === markerChar && markerLength >= fenceLength) {
+				inFence = false;
+				fenceChar = undefined;
+				fenceLength = 0;
+			}
+
+			out.push(line);
+			continue;
+		}
+
+		if (inFence) {
+			out.push(line);
+		} else {
+			plainBuffer.push(line);
+		}
+	}
+
+	flushPlain();
+	return out.join("\n");
+}
+
 function prepareStudioPdfMarkdown(markdown: string, isLatex?: boolean, editorLanguage?: string): string {
 	if (isLatex) return markdown;
 	const effectiveEditorLanguage = inferStudioPdfLanguage(markdown, editorLanguage);
@@ -2653,7 +2740,10 @@ function prepareStudioPdfMarkdown(markdown: string, isLatex?: boolean, editorLan
 		&& !isStudioSingleFencedCodeBlock(markdown)
 		? wrapStudioCodeAsMarkdown(markdown, effectiveEditorLanguage)
 		: markdown;
-	return normalizeObsidianImages(normalizeMathDelimiters(source));
+	const annotationReadySource = !effectiveEditorLanguage || effectiveEditorLanguage === "markdown" || effectiveEditorLanguage === "latex"
+		? replaceStudioAnnotationMarkersForPdf(source)
+		: source;
+	return normalizeObsidianImages(normalizeMathDelimiters(annotationReadySource));
 }
 
 function stripMathMlAnnotationTags(html: string): string {
@@ -2980,6 +3070,46 @@ async function renderStudioLiteralTextPdf(text: string, title = "Studio export")
 	}
 }
 
+function replaceStudioAnnotationMarkersInGeneratedLatex(latex: string): string {
+	const lines = String(latex ?? "").split("\n");
+	const out: string[] = [];
+	const rawEnvStack: string[] = [];
+	const rawEnvNames = new Set(["verbatim", "Verbatim", "Highlighting", "lstlisting"]);
+
+	const updateRawEnvStack = (line: string) => {
+		const envPattern = /\\(begin|end)\{([^}]+)\}/g;
+		let match: RegExpExecArray | null;
+		while ((match = envPattern.exec(line)) !== null) {
+			const kind = match[1];
+			const envName = match[2];
+			if (!envName || !rawEnvNames.has(envName)) continue;
+			if (kind === "begin") {
+				rawEnvStack.push(envName);
+			} else {
+				for (let i = rawEnvStack.length - 1; i >= 0; i -= 1) {
+					if (rawEnvStack[i] === envName) {
+						rawEnvStack.splice(i, 1);
+						break;
+					}
+				}
+			}
+		}
+	};
+
+	for (const line of lines) {
+		if (rawEnvStack.length > 0) {
+			out.push(line);
+			updateRawEnvStack(line);
+			continue;
+		}
+
+		out.push(replaceStudioAnnotationMarkersForPdfInSegment(line));
+		updateRawEnvStack(line);
+	}
+
+	return out.join("\n");
+}
+
 async function renderStudioPdfFromGeneratedLatex(
 	markdown: string,
 	pandocCommand: string,
@@ -3057,7 +3187,8 @@ async function renderStudioPdfFromGeneratedLatex(
 
 		const generatedLatex = await readFile(latexPath, "utf-8");
 		const injectedLatex = injectStudioLatexPdfSubfigureBlocks(generatedLatex, subfigureGroups, sourcePath, resourcePath);
-		const normalizedLatex = normalizeStudioGeneratedFigureCaptions(injectedLatex);
+		const annotationReadyLatex = replaceStudioAnnotationMarkersInGeneratedLatex(injectedLatex);
+		const normalizedLatex = normalizeStudioGeneratedFigureCaptions(annotationReadyLatex);
 		await writeFile(latexPath, normalizedLatex, "utf-8");
 
 		await new Promise<void>((resolve, reject) => {
@@ -3219,7 +3350,7 @@ async function renderStudioPdfWithPandoc(
 		}
 	};
 
-	if (isLatex && latexSubfigurePdfTransform.groups.length > 0) {
+	if (isLatex && (latexSubfigurePdfTransform.groups.length > 0 || /\[an:\s*[^\]]+\]/i.test(sourceWithResolvedRefs))) {
 		return await renderStudioPdfFromGeneratedLatex(
 			sourceWithResolvedRefs,
 			pandocCommand,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.29",
+  "version": "0.5.30",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",