@zenodinh/pi-render 0.1.4 → 0.1.5

package/package.json

@@ -67,5 +67,5 @@
 		"typescript": "^7.0.2",
 		"vitest": "^5.0.3"
 	},
-	"version": "0.1.4"
+	"version": "0.1.5"
 }

package/src/core/paint.ts

@@ -48,7 +48,6 @@ function tryStyle(fn: ((text: string) => string) | undefined, text: string): str
 		return undefined;
 	}
 }
-
 /** Region 1 — the tool-row factory. Reads `theme` live, so the next call paints the current theme. */
 // shape: closure returning an object literal — trigger #4, eight stateless row roles over the captured theme.
 export function createRowPaint(theme: HostTheme): RowPaint {
@@ -67,13 +66,45 @@ export function createRowPaint(theme: HostTheme): RowPaint {
 	};
 }
 
-/** Region 2 — the content factory. `rule` degrades hr → quoteBorder → plain; every role ends in plain. */
-// shape: closure returning an object literal — trigger #4, four stateless content roles over the captured markdown theme.
-export function createContentPaint(mdTheme: MarkdownTheme): ContentPaint {
+/**
+ * How the header band fills its cell: `"reverse"` swaps the cell's ink and background (SGR reverse
+ * video), `"none"` leaves the bare header. Picked once at construction, so a side-by-side can sweep it.
+ */
+export type BandStyle = "reverse" | "none";
+
+/**
+ * SGR reverse video, on and off. The band is the ONE escape pair that originates here rather than in a
+ * theme: no background token is reachable on the content seam, so the band is built from reverse video,
+ * which needs none and therefore survives a restore that happens before any theme is known.
+ */
+const REVERSE_ON = "\x1b[7m";
+const REVERSE_OFF = "\x1b[27m";
+
+/**
+ * Region 2 — the content factory. `rule` degrades hr → quoteBorder → plain; every role ends in plain.
+ *
+ * The markdown theme's own closures supply the emphasis ink: `bold`/`italic` for inline spans, and its
+ * `code` closure (the `mdCode` token, identical to `accent` in both stock themes) for the header ink.
+ * `bandStyle` picks the header band — `"reverse"` (the default) composes reverse video over the header,
+ * `"none"` leaves it bare — so the one band reachable on this seam is a construction-time choice.
+ */
+// shape: closure returning an object literal — trigger #4, eight stateless content roles over the
+//   captured markdown theme and the band style.
+export function createContentPaint(mdTheme: MarkdownTheme, bandStyle: BandStyle = "reverse"): ContentPaint {
+	// The header ink: the theme's `code` closure under its `bold` closure. Each link is optional and
+	// degrades on its own, so a theme missing one still stamps whatever the other gives.
+	const header = (text: string): string => {
+		const inked = tryStyle(mdTheme.code, text) ?? text;
+		return tryStyle(mdTheme.bold, inked) ?? inked;
+	};
 	return {
 		rule: (text) => tryStyle(mdTheme.hr, text) ?? tryStyle(mdTheme.quoteBorder, text) ?? text,
 		quote: (text) => tryStyle(mdTheme.quote, text) ?? text,
 		code: (text) => tryStyle(mdTheme.code, text) ?? text,
 		codeBlockBorder: (text) => tryStyle(mdTheme.codeBlockBorder, text) ?? text,
+		strong: (text) => tryStyle(mdTheme.bold, text) ?? text,
+		em: (text) => tryStyle(mdTheme.italic, text) ?? text,
+		header,
+		headerBand: (text) => (bandStyle === "reverse" ? `${REVERSE_ON}${header(text)}${REVERSE_OFF}` : header(text)),
 	};
 }

package/src/core/types/host.ts

@@ -32,6 +32,10 @@ export interface MarkdownTheme {
 	code?(text: string): string;
 	/** Fenced-code-block border wrapper. Optional. */
 	codeBlockBorder?(text: string): string;
+	/** Bold wrapper for `**strong**` spans — the host markdown theme's own `bold` closure. Optional. */
+	bold?(text: string): string;
+	/** Italic wrapper for `*em*` spans — the host markdown theme's own `italic` closure. Optional. */
+	italic?(text: string): string;
 }
 
 /** The pi-tui component slice renderers return and receive. Structural host shape — no host import. */

package/src/core/types/paint.ts

@@ -51,4 +51,18 @@ export interface ContentPaint {
 	code(text: string): string;
 	/** Fenced-code-block border. Required. */
 	codeBlockBorder(text: string): string;
+	/** A `**strong**` inline span, drawn in the theme's bold. Required. */
+	strong(text: string): string;
+	/** An `*em*` inline span, drawn in the theme's italic. Required. */
+	em(text: string): string;
+	/**
+	 * One stamped header cell: the accent ink under bold. The ink is the markdown theme's `code` closure
+	 * (`mdCode`, identical to `accent` in both stock themes) and the weight its `bold` closure. Required.
+	 */
+	header(text: string): string;
+	/**
+	 * One header-band cell: {@link header} carrying the band style — reverse video by default, so the
+	 * cell's own ink becomes its background. Required.
+	 */
+	headerBand(text: string): string;
 }

package/src/renderers/content/table.ts

@@ -7,6 +7,10 @@
 /**
  * table.ts — the table surface: a markdown table becomes a banded box.
  *
+ * The header row is stamped through the header-band role — bold over the accent ink inside a band — or,
+ * when the header row is empty (`| | |`), that stamp moves onto the first column so no blank band is
+ * spent. `**strong**` and `*em*` cells route through their own roles.
+ *
  * Boundary: lane-local. The transformer passes markdown in and splices the returned markdown back
  * out, so every escape in the output originates in the injected ContentPaint (T-08) — the #22 fix.
  *
@@ -60,15 +64,22 @@ function isTableToken(token: Token): token is Token & TableToken {
 	return Array.isArray(token.rows) && token.rows.every((row) => Array.isArray(row) && row.every(isCell));
 }
 
+/** The inline text a token wraps, already styled by its own children; `token.text` is the fallback. */
+function innerText(token: InlineToken, paint: ContentPaint): string {
+	return (token.tokens ?? []).map((child) => inlineText(child, paint)).join("") || (token.text ?? "");
+}
+
 /** Inline styling is a ContentPaint role or nothing — the host tokenizer's own `codespan` is code. */
 function inlineText(token: InlineToken, paint: ContentPaint): string {
 	switch (token.type) {
 		case "codespan":
 			return paint.code(token.text ?? "");
 		case "strong":
+			return paint.strong(innerText(token, paint));
 		case "em":
+			return paint.em(innerText(token, paint));
 		case "link":
-			return (token.tokens ?? []).map((child) => inlineText(child, paint)).join("") || (token.text ?? "");
+			return innerText(token, paint);
 		default:
 			return token.text ?? token.raw ?? "";
 	}
@@ -108,6 +119,10 @@ function renderTable(token: TableToken, width: number, paint: ContentPaint): str
 		widths[widest] = (widths[widest] ?? 0) - 1;
 	}
 
+	// An all-empty header (`| | |`) means the table carries its labels in the first column: the blank
+	// header row and its separator are dropped, and the band moves onto that first column instead.
+	const keyColumn = header.every((cell) => cell === "");
+
 	// A light box around and between everything: the frame is what keeps a wrapped cell visually
 	// inside the table instead of trailing off its right edge.
 	const ruleLine = (left: string, middle: string, right: string): string =>
@@ -115,24 +130,33 @@ function renderTable(token: TableToken, width: number, paint: ContentPaint): str
 	const bar = paint.rule("│");
 	const physical: string[] = [];
 
-	const renderBand = (cells: string[][]): void => {
-		const height = Math.max(1, ...cells.map((wrapped) => wrapped.length));
+	/** One logical row, wrapped into physical lines; `banded` picks the cells drawn through headerBand. */
+	const renderRow = (cells: string[], banded: (index: number) => boolean): void => {
+		const wrapped = cells.map((cell, index) => wrapTextWithAnsi(cell, widths[index] ?? MIN_COLUMN));
+		const height = Math.max(1, ...wrapped.map((lines) => lines.length));
 		for (let line = 0; line < height; line++) {
-			const parts = cells.map((wrapped, index) => ` ${padCell(wrapped[line] ?? "", widths[index] ?? MIN_COLUMN)} `);
+			const parts = wrapped.map((lines, index) => {
+				const padded = padCell(lines[line] ?? "", widths[index] ?? MIN_COLUMN);
+				return banded(index) ? ` ${paint.headerBand(padded)} ` : ` ${padded} `;
+			});
 			physical.push(`${bar}${parts.join(bar)}${bar}`);
 		}
 	};
 
-	const wrapBand = (cells: string[]): string[][] =>
-		cells.map((cell, index) => wrapTextWithAnsi(cell, widths[index] ?? MIN_COLUMN));
-
 	physical.push(ruleLine("┌", "┬", "┐"));
-	renderBand(wrapBand(header));
-	physical.push(ruleLine("├", "┼", "┤"));
-	rows.forEach((row, index) => {
-		if (index > 0) physical.push(ruleLine("├", "┼", "┤"));
-		renderBand(wrapBand(row));
-	});
+	if (keyColumn) {
+		rows.forEach((row, index) => {
+			if (index > 0) physical.push(ruleLine("├", "┼", "┤"));
+			renderRow(row, (index) => index === 0);
+		});
+	} else {
+		renderRow(header, () => true);
+		physical.push(ruleLine("├", "┼", "┤"));
+		rows.forEach((row, index) => {
+			if (index > 0) physical.push(ruleLine("├", "┼", "┤"));
+			renderRow(row, () => false);
+		});
+	}
 	physical.push(ruleLine("└", "┴", "┘"));
 	return physical.map((line) => (visibleWidth(line) > width ? truncateToWidth(line, width) : line));
 }