fix(runtime): don't paint Box backgroundColor onto border glyphs (Ink parity, G04) (#30)

Ink's render-border.ts computes each border edge's background from
border<Edge>BackgroundColor ?? borderBackgroundColor only — it never falls
back to the Box's own backgroundColor. vue-tui's colorizeEdge had an extra
`?? bgColor` fallback, so a Box with backgroundColor but no explicit border
background painted its background onto the border glyphs too.

Drop the fallback. Background still fills the inner content area; border
glyphs are now uncolored unless an explicit border background is set.

Tests rewritten to match Ink (per maintainer's align-to-Ink policy; see
.agents/docs/parity-ledger.md Decisions log):
- add failing-first repro "Box backgroundColor does not bleed onto border
  glyphs (Ink parity)"
- "wrapped text preserves backgroundColor on every content line": assert
  inner rows carry bg, border rows don't (height 4->5 so text fits)
- "Box background with border fills content area": snapshot updated so
  border rows have no bg

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Yunfei He
2026-05-29 23:14:25 +08:00
committed by GitHub
parent 1a38474cbe
commit 0c113a3063
3 changed files with 90 additions and 27 deletions
+3 -3
View File
@@ -343,17 +343,17 @@ function drawBorder(
const right = props["borderRight"] !== false;
const borderColor = props["borderColor"] as string | undefined;
const bgColor = props["backgroundColor"] as string | undefined;
const dimAll = !!props["borderDimColor"];
function colorizeEdge(s: string, edge: "top" | "bottom" | "left" | "right"): string {
const capEdge = edge.charAt(0).toUpperCase() + edge.slice(1);
const edgeColor = (props[`border${capEdge}Color`] as string | undefined) ?? borderColor;
const edgeDim = (props[`border${capEdge}DimColor`] as boolean | undefined) || dimAll;
// Ink parity (render-border.ts:44-52): an edge's background comes only from the
// per-edge or general border background — never from the Box's own backgroundColor.
const edgeBg =
(props[`border${capEdge}BackgroundColor`] as string | undefined) ??
(props["borderBackgroundColor"] as string | undefined) ??
bgColor;
(props["borderBackgroundColor"] as string | undefined);
const p: TextProps = {};
if (edgeColor) p.color = edgeColor;
if (edgeBg) p.backgroundColor = edgeBg;