pi-studio 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.6.3] — 2026-04-29
+
+### Changed
+- Polished rendered code blocks so ordinary code text uses normal foreground, Python function definitions keep function-name highlighting, and fenced-block borders are softened to better match theme intent.
+- Slightly sharpened footer metadata and shortcut text for better readability across darker custom themes.
+
+## [0.6.2] — 2026-04-29
+
+### Changed
+- Polished refreshed Studio theme surfaces so light-mode header actions, scratchpad panels, response-history badges, and editor surfaces are more consistent.
+- Softened overly sharp derived borders in high-contrast themes while preserving theme hue and tightened secondary info text contrast in comment, outline, and scratchpad panels.
+
 ## [0.6.1] — 2026-04-29
 
 ### Added

package/client/studio.css

@@ -1143,7 +1143,7 @@
     }
 
     .rendered-markdown pre code {
-      color: var(--md-codeblock);
+      color: var(--text);
       white-space: inherit;
     }
 
@@ -1846,7 +1846,7 @@
     footer {
       border-top: 1px solid var(--panel-border);
       padding: 8px 12px;
-      color: var(--muted);
+      color: var(--studio-footer-text, var(--muted));
       font-size: 12px;
       min-height: 32px;
       background: var(--panel);
@@ -1903,7 +1903,7 @@
     .footer-meta {
       grid-area: meta;
       justify-self: start;
-      color: var(--muted);
+      color: var(--studio-footer-text, var(--muted));
       font-size: 11px;
       text-align: left;
       max-width: 100%;
@@ -1954,12 +1954,12 @@
       grid-area: hint;
       justify-self: end;
       align-self: center;
-      color: var(--muted);
+      color: var(--studio-footer-text, var(--muted));
       font-size: 11px;
       white-space: nowrap;
       text-align: right;
       font-style: normal;
-      opacity: 0.9;
+      opacity: 0.86;
       display: inline-flex;
       align-items: center;
       gap: 8px;
@@ -2020,7 +2020,7 @@
       gap: 12px;
       padding: 16px 18px 12px;
       border-bottom: 1px solid var(--panel-border);
-      background: var(--panel-2);
+      background: var(--scratchpad-header-bg, var(--panel-2));
     }
 
     .scratchpad-header > div {
@@ -2038,7 +2038,7 @@
       margin: 6px 0 0;
       font-size: 12px;
       line-height: 1.45;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
       max-width: none;
     }
 
@@ -2057,7 +2057,7 @@
       border-radius: 0;
       margin: 0;
       padding: 16px 18px;
-      background: var(--panel);
+      background: var(--scratchpad-body-bg, var(--panel));
       color: var(--text);
       font-family: var(--font-mono);
       font-size: 13px;
@@ -2073,12 +2073,12 @@
       gap: 12px;
       flex-wrap: wrap;
       padding: 12px 18px 16px;
-      background: var(--panel);
+      background: var(--scratchpad-body-bg, var(--panel));
     }
 
     .scratchpad-meta {
       font-size: 12px;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
     }
 
     .scratchpad-actions {
@@ -2140,7 +2140,7 @@
       padding: 14px;
       font-size: 13px;
       line-height: 1.5;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
       border-bottom: 1px solid var(--panel-border);
       background: var(--panel);
     }
@@ -2229,7 +2229,7 @@
 
     .outline-entry-meta {
       font-size: 11px;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
       white-space: nowrap;
       font-variant-numeric: tabular-nums;
     }
@@ -2553,7 +2553,7 @@
     body.studio-ui-refresh #rightSectionHeader button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-toolbar button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-toolbar select:not(:disabled):hover {
-      background: var(--panel-2);
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
     }
 
     body.studio-ui-refresh #leftSectionHeader #editorViewSelect,
@@ -2653,10 +2653,18 @@
       border-radius: 8px;
     }
 
+    body.studio-ui-refresh #reviewNotesBtn,
+    body.studio-ui-refresh #outlineBtn,
+    body.studio-ui-refresh #scratchpadBtn,
+    body.studio-ui-refresh .studio-refresh-tool-tab {
+      background: var(--studio-header-action-bg, transparent);
+      border-color: var(--studio-header-action-border, transparent);
+    }
+
     body.studio-ui-refresh #exportPdfBtn {
-      background: var(--panel-2);
+      background: var(--studio-header-filled-bg, var(--panel-2));
       color: var(--text);
-      border-color: transparent;
+      border-color: var(--studio-header-action-border, transparent);
     }
 
     body.studio-ui-refresh #reviewNotesBtn.is-active,
@@ -2834,7 +2842,7 @@
 
     body.studio-ui-refresh .studio-refresh-chip.is-open,
     body.studio-ui-refresh .studio-refresh-chip:hover {
-      background: var(--panel-2);
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
       color: var(--text);
     }
 
@@ -2917,7 +2925,7 @@
 
     body.studio-ui-refresh .studio-refresh-menu-item > button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-menu-item > select:not(:disabled):hover {
-      background: var(--panel-2);
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
     }
 
     body.studio-ui-refresh #copyDraftBtn:only-child {

package/index.ts

@@ -864,6 +864,26 @@ function readableTextOn(background: string, darkText = "#0e1616", lightText = "#
 	return contrastRatio(background, darkText) >= contrastRatio(background, lightText) ? darkText : lightText;
 }
 
+function capBorderContrast(color: string, surface: string, maxContrast: number): string {
+	if (!hexToRgb(color) || !hexToRgb(surface)) return color;
+	if (contrastRatio(color, surface) <= maxContrast) return color;
+
+	let low = 0;
+	let high = 1;
+	let result = color;
+	for (let i = 0; i < 12; i += 1) {
+		const mid = (low + high) / 2;
+		const candidate = blendColors(color, surface, mid);
+		if (contrastRatio(candidate, surface) > maxContrast) {
+			low = mid;
+		} else {
+			result = candidate;
+			high = mid;
+		}
+	}
+	return result;
+}
+
 function deriveCanvasColors(
 	baseColor: string,
 	mode: StudioThemeMode,
@@ -4321,6 +4341,13 @@ async function writeStudioSystemClipboard(text: string): Promise<{ ok: true; met
 	return { ok: false, error: errors.join("; ") || "No system clipboard command is available." };
 }
 
+function decorateStudioPandocSyntaxHtml(html: string): string {
+	return html.replace(
+		/(<span class="kw">def<\/span>)(\s*)([A-Za-z_][A-Za-z0-9_]*)(?=\s*\()/g,
+		(_match, keyword: string, spacing: string, name: string) => `${keyword}${spacing}<span class="fu">${name}</span>`,
+	);
+}
+
 async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolean, resourcePath?: string, sourcePath?: string): Promise<string> {
 	const pandocCommand = process.env.PANDOC_PATH?.trim() || "pandoc";
 	const markdownWithoutHtmlComments = isLatex ? markdown : stripStudioMarkdownHtmlComments(markdown);
@@ -4401,6 +4428,7 @@ async function renderStudioMarkdownWithPandoc(markdown: string, isLatex?: boolea
 				} else {
 					html = decorateStudioPreviewPageBreakHtml(html);
 				}
+				html = decorateStudioPandocSyntaxHtml(html);
 				succeed(stripMathMlAnnotationTags(html));
 				return;
 			}
@@ -6165,10 +6193,14 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 		style.mode === "light"
 			? `0 1px 2px ${withAlpha(style.palette.text, 0.035, "rgba(15, 23, 42, 0.03)")}, 0 4px 14px ${withAlpha(style.palette.text, 0.055, "rgba(15, 23, 42, 0.04)")}`
 			: "0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.18)";
-	const borderSubtle = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.58 : 0.48);
-	const panelBorder = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.42 : 0.36);
-	const controlBorder = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.30 : 0.22);
-	const paneActiveBorder = blendColors(style.palette.border, style.palette.panel, style.mode === "light" ? 0.34 : 0.48);
+	const rawBorderSubtle = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.58 : 0.48);
+	const rawPanelBorder = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.42 : 0.36);
+	const rawControlBorder = blendColors(style.palette.borderMuted, style.palette.panel, style.mode === "light" ? 0.30 : 0.22);
+	const rawPaneActiveBorder = blendColors(style.palette.border, style.palette.panel, style.mode === "light" ? 0.34 : 0.48);
+	const borderSubtle = capBorderContrast(rawBorderSubtle, style.palette.panel, style.mode === "light" ? 1.10 : 1.12);
+	const panelBorder = capBorderContrast(rawPanelBorder, style.palette.panel, style.mode === "light" ? 1.15 : 1.18);
+	const controlBorder = capBorderContrast(rawControlBorder, style.palette.panel, style.mode === "light" ? 1.22 : 1.25);
+	const paneActiveBorder = capBorderContrast(rawPaneActiveBorder, style.palette.panel, style.mode === "light" ? 1.38 : 1.45);
 	const accentContrast = style.accentContrast ?? (style.mode === "light" ? "#ffffff" : "#0e1616");
 	const errorContrast = style.errorContrast ?? readableTextOn(style.palette.error);
 	const blockquoteBg = withAlpha(
@@ -6186,6 +6218,8 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 		style.mode === "light" ? 0.13 : 0.18,
 		style.mode === "light" ? "rgba(15, 23, 42, 0.06)" : "rgba(255, 255, 255, 0.07)",
 	);
+	const rawCodeBlockBorder = blendColors(style.palette.mdCodeBlockBorder, style.palette.panel2, style.mode === "light" ? 0.62 : 0.72);
+	const codeBlockBorder = capBorderContrast(rawCodeBlockBorder, style.palette.panel2, style.mode === "light" ? 1.16 : 1.18);
 	const diffAddedBg = withAlpha(style.palette.ok, style.mode === "light" ? 0.10 : 0.14, "rgba(46, 160, 67, 0.12)");
 	const diffRemovedBg = withAlpha(style.palette.error, style.mode === "light" ? 0.10 : 0.14, "rgba(248, 81, 73, 0.12)");
 	const okSoft = withAlpha(style.palette.ok, style.mode === "light" ? 0.10 : 0.12, "rgba(115, 209, 61, 0.08)");
@@ -6201,6 +6235,14 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 	const editorGutterBg = style.mode === "light" ? lightSecondarySurface : style.palette.panel2;
 	const referenceMetaBg = style.mode === "light" ? lightSecondarySurface : style.palette.panel2;
 	const referenceBadgeBg = style.mode === "light" ? lightPrimarySurface : style.palette.panel;
+	const scratchpadHeaderBg = style.mode === "light" ? lightSecondarySurface : style.palette.panel2;
+	const scratchpadBodyBg = style.mode === "light" ? lightPrimarySurface : style.palette.panel;
+	const infoText = blendColors(style.palette.text, style.palette.muted, style.mode === "light" ? 0.36 : 0.30);
+	const footerText = blendColors(style.palette.text, style.palette.muted, style.mode === "light" ? 0.50 : 0.42);
+	const headerActionBg = style.mode === "light" ? lightPrimarySurface : "transparent";
+	const headerActionHoverBg = style.mode === "light" ? lightPrimarySurface : style.palette.panel2;
+	const headerActionBorder = style.mode === "light" ? controlBorder : "transparent";
+	const headerFilledBg = style.mode === "light" ? lightPrimarySurface : style.palette.panel2;
 	const monoFontStack = getStudioMonoFontStack();
 	const uiFontStack = getStudioUiFontStack();
 	const proseFontStack = getStudioProseFontStack();
@@ -6233,7 +6275,7 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 		"--md-link-url": style.palette.mdLinkUrl,
 		"--md-code": style.palette.mdCode,
 		"--md-codeblock": style.palette.mdCodeBlock,
-		"--md-codeblock-border": style.palette.mdCodeBlockBorder,
+		"--md-codeblock-border": codeBlockBorder,
 		"--md-quote": style.palette.mdQuote,
 		"--md-quote-border": style.palette.mdQuoteBorder,
 		"--md-hr": style.palette.mdHr,
@@ -6264,6 +6306,14 @@ function buildThemeCssVars(style: StudioThemeStyle): Record<string, string> {
 		"--editor-gutter-bg": editorGutterBg,
 		"--reference-meta-bg": referenceMetaBg,
 		"--reference-badge-bg": referenceBadgeBg,
+		"--scratchpad-header-bg": scratchpadHeaderBg,
+		"--scratchpad-body-bg": scratchpadBodyBg,
+		"--studio-info-text": infoText,
+		"--studio-footer-text": footerText,
+		"--studio-header-action-bg": headerActionBg,
+		"--studio-header-action-hover-bg": headerActionHoverBg,
+		"--studio-header-action-border": headerActionBorder,
+		"--studio-header-filled-bg": headerFilledBg,
 		"--font-ui": uiFontStack,
 		"--font-prose": proseFontStack,
 		"--font-mono": monoFontStack,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "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",