pi-studio 0.9.37 → 0.9.38

package/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.9.38] — 2026-08-01
+
+### Fixed
+- Preserved corrected Mermaid node colours during Chromium PDF printing and gave external icon-node labels a theme-aware backdrop, preventing washed-out labels beside custom icon fills.
+
 ## [0.9.37] — 2026-08-01
 
 ### Added

package/index.ts

@@ -5843,14 +5843,14 @@ async function renderStudioMermaidDiagramForPdf(source: string, workDir: string,
 	const mermaidTheme = getStudioMermaidPdfTheme();
 	const inputPath = join(workDir, `mermaid-diagram-${blockNumber}.mmd`);
 	const outputPath = join(workDir, `mermaid-diagram-${blockNumber}.pdf`);
-	const iconCssPath = join(workDir, `mermaid-diagram-${blockNumber}.css`);
+	const contrastCssPath = join(workDir, `mermaid-diagram-${blockNumber}.css`);
 
 	const preparedSource = ensureStudioMermaidSourceContrast(source);
-	const iconContrastCss = buildStudioMermaidPdfIconContrastCss(preparedSource);
+	const contrastCss = buildStudioMermaidPdfIconContrastCss(preparedSource, { theme: mermaidTheme });
 	await writeFile(inputPath, preparedSource, "utf-8");
-	if (iconContrastCss) await writeFile(iconCssPath, iconContrastCss, "utf-8");
+	if (contrastCss) await writeFile(contrastCssPath, contrastCss, "utf-8");
 	const args = ["-i", inputPath, "-o", outputPath, "-t", mermaidTheme, "-f"];
-	if (iconContrastCss) args.push("-C", iconCssPath);
+	if (contrastCss) args.push("-C", contrastCssPath);
 	args.push(...buildStudioMermaidCliIconArgs(preparedSource));
 	const result = await runStudioSubprocess(mermaidCommand, args, {
 		timeoutMs: STUDIO_MERMAID_TIMEOUT_MS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.37",
+  "version": "0.9.38",
   "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-mermaid.js

@@ -232,12 +232,44 @@ function buildStudioMermaidIconPaintRule(selector, color) {
   ].join("\n");
 }
 
-export function buildStudioMermaidPdfIconContrastCss(source) {
+function buildStudioMermaidPdfPrintColorRule() {
+  return [
+    ".node, .node *, .icon-shape, .icon-shape * {",
+    "  -webkit-print-color-adjust: exact !important;",
+    "  print-color-adjust: exact !important;",
+    "}",
+  ].join("\n");
+}
+
+function buildStudioMermaidPdfIconLabelRule(selectors, theme) {
+  if (selectors.length === 0) return "";
+  const darkTheme = String(theme || "default").toLowerCase() === "dark";
+  const background = darkTheme ? "#1f2937" : "#ffffff";
+  const foreground = darkTheme ? "#ffffff" : "#000000";
+  const backgroundSelectors = selectors.map((selector) => `${selector} .labelBkg`).join(",\n");
+  const textSelectors = selectors.flatMap((selector) => [
+    `${selector} .nodeLabel`,
+    `${selector} .nodeLabel *`,
+  ]).join(",\n");
+  return [
+    `${backgroundSelectors} { background-color: ${background} !important; }`,
+    `${textSelectors} {`,
+    `  color: ${foreground} !important;`,
+    `  fill: ${foreground} !important;`,
+    `  -webkit-text-fill-color: ${foreground} !important;`,
+    "  opacity: 1 !important;",
+    "}",
+  ].join("\n");
+}
+
+export function buildStudioMermaidPdfIconContrastCss(source, options = {}) {
   const preparedSource = ensureStudioMermaidSourceContrast(source);
   const { iconNodeIds, classNamesByNode } = collectStudioMermaidIconStyleTargets(preparedSource);
-  if (iconNodeIds.size === 0) return "";
+  const printColorRule = buildStudioMermaidPdfPrintColorRule();
+  if (iconNodeIds.size === 0) return printColorRule;
   const classStyles = collectStudioMermaidStylesByTarget(preparedSource, "classDef");
   const directStyles = collectStudioMermaidStylesByTarget(preparedSource, "style");
+  const iconSelectors = Array.from(iconNodeIds, (iconNodeId) => `.icon-shape[id*="flowchart-${iconNodeId}-"]`);
   const rulesBySelector = new Map();
 
   for (const iconNodeId of iconNodeIds) {
@@ -250,5 +282,9 @@ export function buildStudioMermaidPdfIconContrastCss(source) {
     if (paint) rulesBySelector.set(`.icon-shape[id*="flowchart-${iconNodeId}-"]`, paint);
   }
 
-  return Array.from(rulesBySelector, ([selector, color]) => buildStudioMermaidIconPaintRule(selector, color)).join("\n");
+  return [
+    printColorRule,
+    buildStudioMermaidPdfIconLabelRule(iconSelectors, options.theme),
+    ...Array.from(rulesBySelector, ([selector, color]) => buildStudioMermaidIconPaintRule(selector, color)),
+  ].filter(Boolean).join("\n");
 }