pi-studio 0.9.29 → 0.9.31

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.9.31] — 2026-06-09
+
+### Fixed
+- Render long PDF annotations as full-width display-style boxes at their marker position so exported feedback avoids clipping while preserving the surrounding annotation order.
+- Avoided annotation placeholder collisions in HTML exports with ten or more annotations.
+
+## [0.9.30] — 2026-06-09
+
+### Fixed
+- Rendered inline strikethrough, emphasis, and code inside `[an: ...]` annotation badges consistently across Studio preview and HTML/PDF export paths.
+
 ## [0.9.29] — 2026-06-09
 
 ### Added

package/client/studio-annotation-helpers.js

@@ -443,6 +443,13 @@
     let index = 0;
 
     while (index < source.length) {
+      const strikeMatch = readAnnotationEmphasisSpanAt(source, index, "~~", "s");
+      if (strikeMatch) {
+        out += strikeMatch.html;
+        index = strikeMatch.end;
+        continue;
+      }
+
       const strongMatch = readAnnotationEmphasisSpanAt(source, index, "**", "strong")
         || readAnnotationEmphasisSpanAt(source, index, "__", "strong");
       if (strongMatch) {

package/index.ts

@@ -30,6 +30,7 @@ import {
 import { escapeStudioPdfLatexTextFragment } from "./shared/studio-pdf-escape.js";
 import { resolveStudioPdfResourceFile } from "./shared/studio-pdf-resource.js";
 import { buildStudioForwardingHint, buildStudioSshTunnelHint, isStudioSshSession as isSshSession } from "./shared/studio-ssh-hint.js";
+import { renderStudioAnnotationInlineHtml } from "./shared/studio-annotation-render.js";
 
 type Lens = "writing" | "code";
 type RequestedLens = Lens | "auto";
@@ -1086,6 +1087,7 @@ function buildStudioPdfPreamble(options?: StudioPdfRenderOptions, extraPreamble
 \\titlespacing*{\\subparagraph}{0pt}{0.7ex plus 0.2ex minus 0.1ex}{0.7em}
 \\usepackage{xcolor}
 \\usepackage{varwidth}
+\\usepackage[normalem]{ulem}
 \\definecolor{StudioAnnotationBg}{HTML}{EAF3FF}
 \\definecolor{StudioAnnotationBorder}{HTML}{8CB8FF}
 \\definecolor{StudioAnnotationText}{HTML}{1F5FBF}
@@ -1110,6 +1112,7 @@ function buildStudioPdfPreamble(options?: StudioPdfRenderOptions, extraPreamble
 \\definecolor{StudioCalloutCautionText}{HTML}{A40E26}
 \\definecolor{StudioCalloutCautionLabelBg}{HTML}{FDEBEC}
 \\newcommand{\\studioannotation}[1]{\\begingroup\\setlength{\\fboxsep}{1.5pt}\\fcolorbox{StudioAnnotationBorder}{StudioAnnotationBg}{\\begin{varwidth}{\\dimexpr\\linewidth-2\\fboxsep-2\\fboxrule\\relax}\\raggedright\\textcolor{StudioAnnotationText}{\\sffamily\\footnotesize\\strut #1}\\end{varwidth}}\\endgroup}
+\\newcommand{\\studioblockannotation}[1]{\\par\\smallskip\\noindent\\begingroup\\setlength{\\fboxsep}{1.5pt}\\fcolorbox{StudioAnnotationBorder}{StudioAnnotationBg}{\\begin{minipage}{\\dimexpr\\linewidth-2\\fboxsep-2\\fboxrule\\relax}\\raggedright\\textcolor{StudioAnnotationText}{\\sffamily\\footnotesize\\strut #1}\\end{minipage}}\\endgroup\\par\\smallskip\\noindent\\ignorespaces}
 \\newcommand{\\StudioDiffAddTok}[1]{\\textcolor{StudioDiffAddText}{#1}}
 \\newcommand{\\StudioDiffDelTok}[1]{\\textcolor{StudioDiffDelText}{#1}}
 \\newcommand{\\StudioDiffMetaTok}[1]{\\textcolor{StudioDiffMetaText}{#1}}
@@ -5031,6 +5034,13 @@ function renderStudioAnnotationPlainTextPdfLatex(text: string): string {
 	let index = 0;
 
 	while (index < source.length) {
+		const strikeMatch = readStudioAnnotationPdfEmphasisSpanAt(source, index, "~~", "sout");
+		if (strikeMatch) {
+			out += strikeMatch.latex;
+			index = strikeMatch.end;
+			continue;
+		}
+
 		const strongMatch = readStudioAnnotationPdfEmphasisSpanAt(source, index, "**", "textbf")
 			?? readStudioAnnotationPdfEmphasisSpanAt(source, index, "__", "textbf");
 		if (strongMatch) {
@@ -5060,22 +5070,25 @@ function renderStudioAnnotationPdfLatex(text: string): string {
 	return renderStudioAnnotationPdfLatexContent(normalized).trim();
 }
 
+function renderStudioAnnotationPdfBox(markerText: string, block = false): string {
+	const cleaned = renderStudioAnnotationPdfLatex(markerText);
+	if (!cleaned) return "";
+	return block ? `\\studioblockannotation{${cleaned}}` : `\\studioannotation{${cleaned}}`;
+}
+
 function replaceStudioAnnotationMarkersForPdfInSegment(text: string): string {
+	const renderMarker = (markerText: string): string => {
+		const label = normalizeStudioAnnotationText(markerText);
+		if (!label) return "";
+		return renderStudioAnnotationPdfBox(label, shouldRenderStudioAnnotationAsPdfBlock(label));
+	};
 	const replaced = replaceStudioInlineAnnotationMarkers(
 		String(text ?? ""),
-		(marker: { body: string }) => {
-			const cleaned = renderStudioAnnotationPdfLatex(marker.body);
-			if (!cleaned) return "";
-			return `\\studioannotation{${cleaned}}`;
-		},
+		(marker: { body: string }) => renderMarker(marker.body),
 	);
 
 	return String(replaced ?? "")
-		.replace(/\{\[\}\s*an:\s*([\s\S]*?)\s*\{\]\}/gi, (_match, markerText: string) => {
-			const cleaned = renderStudioAnnotationPdfLatex(markerText);
-			if (!cleaned) return "";
-			return `\\studioannotation{${cleaned}}`;
-		});
+		.replace(/\{\[\}\s*an:\s*([\s\S]*?)\s*\{\]\}/gi, (_match, markerText: string) => renderMarker(markerText));
 }
 
 function replaceStudioAnnotationMarkersForPdf(markdown: string): string {
@@ -5648,13 +5661,14 @@ function prepareStudioPdfMarkdown(markdown: string, isLatex?: boolean, editorLan
 		? wrapStudioCodeAsMarkdown(input, effectiveEditorLanguage)
 		: input;
 	const fenceNormalizedSource = effectiveEditorLanguage === "latex" ? source : normalizeStudioMarkdownSmartFences(source);
-	const annotationReadySource = !effectiveEditorLanguage || effectiveEditorLanguage === "markdown" || effectiveEditorLanguage === "latex"
-		? replaceStudioAnnotationMarkersForPdf(fenceNormalizedSource)
-		: fenceNormalizedSource;
-	const commentStrippedSource = stripStudioMarkdownHtmlCommentsPreservingYamlFrontMatter(annotationReadySource);
-	return prepareStudioMarkdownForPandoc(commentStrippedSource, {
-		preserveLiteralLatexCommands: !hasStudioYamlHeaderIncludes(annotationReadySource),
+	const annotationReadyLanguage = !effectiveEditorLanguage || effectiveEditorLanguage === "markdown" || effectiveEditorLanguage === "latex";
+	const commentStrippedSource = stripStudioMarkdownHtmlCommentsPreservingYamlFrontMatter(fenceNormalizedSource);
+	const pandocReadySource = prepareStudioMarkdownForPandoc(commentStrippedSource, {
+		preserveLiteralLatexCommands: !hasStudioYamlHeaderIncludes(fenceNormalizedSource),
 	});
+	return annotationReadyLanguage
+		? replaceStudioAnnotationMarkersForPdf(pandocReadySource)
+		: pandocReadySource;
 }
 
 function stripMathMlAnnotationTags(html: string): string {
@@ -6086,6 +6100,15 @@ function parseStudioHtmlPdfBlockOptions(body: string): StudioHtmlPdfBlockOptions
 	return options;
 }
 
+// PDF/LaTeX cannot fully mimic the browser's inline-block wrapping for long
+// annotation chips, so long annotations switch to a display box at the marker.
+const STUDIO_PDF_ANNOTATION_DISPLAY_THRESHOLD_CHARS = 115;
+
+function shouldRenderStudioAnnotationAsPdfBlock(text: string): boolean {
+	const normalized = normalizeStudioAnnotationText(text);
+	return normalized.length > STUDIO_PDF_ANNOTATION_DISPLAY_THRESHOLD_CHARS;
+}
+
 function prepareStudioPdfBlocksForHtml(markdown: string): { markdown: string; blocks: StudioHtmlPdfBlock[] } {
 	const blocks: StudioHtmlPdfBlock[] = [];
 	const prefix = `PISTUDIOHTMLPDF${Date.now().toString(36)}${randomUUID().replace(/-/g, "")}TOKEN`;
@@ -6116,9 +6139,9 @@ function prepareStudioAnnotationMarkersForHtml(markdown: string): { markdown: st
 
 function applyStudioAnnotationPlaceholdersToHtml(html: string, placeholders: StudioHtmlAnnotationPlaceholder[]): string {
 	let transformed = String(html ?? "");
-	for (const placeholder of placeholders) {
+	for (const placeholder of [...placeholders].sort((a, b) => b.token.length - a.token.length)) {
 		const tokenPattern = new RegExp(escapeStudioRegExpLiteral(placeholder.token), "g");
-		const markerHtml = `<span class="annotation-preview-marker" title="${escapeStudioHtmlText(placeholder.title)}">${escapeStudioHtmlText(placeholder.text)}</span>`;
+		const markerHtml = `<span class="annotation-preview-marker" title="${escapeStudioHtmlText(placeholder.title)}">${renderStudioAnnotationInlineHtml(placeholder.text)}</span>`;
 		transformed = transformed.replace(tokenPattern, markerHtml);
 	}
 	return transformed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.29",
+  "version": "0.9.31",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, active quiz, prompt/response history, live previews, and tmux-backed REPL/literate REPL workflows",
   "type": "module",
   "license": "MIT",

package/shared/studio-annotation-render.js

@@ -0,0 +1,148 @@
+import {
+  advancePastStudioInlineBacktickSpan,
+  isStudioAnnotationWordChar,
+  normalizeStudioAnnotationText,
+  readStudioAnnotationProtectedTokenAt,
+} from "./studio-annotation-scanner.js";
+
+function escapeHtml(text) {
+  return String(text ?? "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/\"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function canOpenAnnotationInlineDelimiter(source, startIndex, delimiter) {
+  const text = String(source || "");
+  if (text.slice(startIndex, startIndex + delimiter.length) !== delimiter) return false;
+  const prev = startIndex > 0 ? text[startIndex - 1] : "";
+  const next = text[startIndex + delimiter.length] || "";
+  if (!next || /\s/.test(next)) return false;
+  return !isStudioAnnotationWordChar(prev);
+}
+
+function canCloseAnnotationInlineDelimiter(source, startIndex, delimiter) {
+  const text = String(source || "");
+  if (text.slice(startIndex, startIndex + delimiter.length) !== delimiter) return false;
+  const prev = startIndex > 0 ? text[startIndex - 1] : "";
+  const next = text[startIndex + delimiter.length] || "";
+  if (!prev || /\s/.test(prev)) return false;
+  return !isStudioAnnotationWordChar(next);
+}
+
+function readAnnotationInlineSpanAt(source, startIndex, delimiter, tagName) {
+  const text = String(source || "");
+  if (!canOpenAnnotationInlineDelimiter(text, startIndex, delimiter)) return null;
+
+  let index = startIndex + delimiter.length;
+  while (index < text.length) {
+    if (text[index] === "\\") {
+      index = Math.min(text.length, index + 2);
+      continue;
+    }
+
+    const protectedToken = readStudioAnnotationProtectedTokenAt(text, index);
+    if (protectedToken) {
+      index = protectedToken.end;
+      continue;
+    }
+
+    if (canCloseAnnotationInlineDelimiter(text, index, delimiter)) {
+      const inner = text.slice(startIndex + delimiter.length, index);
+      return {
+        end: index + delimiter.length,
+        html: `<${tagName}>${renderAnnotationPlainInlineHtml(inner)}</${tagName}>`,
+      };
+    }
+
+    index += 1;
+  }
+
+  return null;
+}
+
+function renderAnnotationCodeSpanHtml(rawToken) {
+  const raw = String(rawToken || "");
+  if (!raw || raw[0] !== "`") return escapeHtml(raw);
+
+  let fenceLength = 1;
+  while (raw[fenceLength] === "`") fenceLength += 1;
+  const fence = "`".repeat(fenceLength);
+  if (raw.length < fenceLength * 2 || raw.slice(raw.length - fenceLength) !== fence) {
+    return escapeHtml(raw);
+  }
+
+  return `<code>${escapeHtml(raw.slice(fenceLength, raw.length - fenceLength))}</code>`;
+}
+
+function renderAnnotationPlainInlineHtml(text) {
+  const source = String(text || "");
+  let out = "";
+  let index = 0;
+
+  while (index < source.length) {
+    const strikeMatch = readAnnotationInlineSpanAt(source, index, "~~", "s");
+    if (strikeMatch) {
+      out += strikeMatch.html;
+      index = strikeMatch.end;
+      continue;
+    }
+
+    const strongMatch = readAnnotationInlineSpanAt(source, index, "**", "strong")
+      || readAnnotationInlineSpanAt(source, index, "__", "strong");
+    if (strongMatch) {
+      out += strongMatch.html;
+      index = strongMatch.end;
+      continue;
+    }
+
+    const emphasisMatch = readAnnotationInlineSpanAt(source, index, "*", "em")
+      || readAnnotationInlineSpanAt(source, index, "_", "em");
+    if (emphasisMatch) {
+      out += emphasisMatch.html;
+      index = emphasisMatch.end;
+      continue;
+    }
+
+    out += escapeHtml(source[index]);
+    index += 1;
+  }
+
+  return out;
+}
+
+export function renderStudioAnnotationInlineHtml(text) {
+  const source = normalizeStudioAnnotationText(text);
+  let out = "";
+  let plainStart = 0;
+  let index = 0;
+
+  while (index < source.length) {
+    const token = readStudioAnnotationProtectedTokenAt(source, index);
+    if (!token) {
+      index += 1;
+      continue;
+    }
+
+    if (index > plainStart) {
+      out += renderAnnotationPlainInlineHtml(source.slice(plainStart, index));
+    }
+
+    if (token.type === "code") {
+      out += renderAnnotationCodeSpanHtml(token.raw);
+    } else {
+      out += escapeHtml(token.raw);
+    }
+
+    index = token.end;
+    plainStart = index;
+  }
+
+  if (plainStart < source.length) {
+    out += renderAnnotationPlainInlineHtml(source.slice(plainStart));
+  }
+
+  return out;
+}