fix(preview): draw the slanted tab separators kitty actually uses

The slanted powerline separator was the complement of kitty's glyph. Its
filled half takes the tab's own background and the rest shows the next
tab's, so drawing the opposite triangle put the tab's colour on the far
side of the slant: the tab ended, the bar showed through, and then a
wedge of the tab's colour appeared again against the following tab.

kitty/tab_bar.py picks U+E0BC there, not U+E0B8. The slant tab bar style
had the same pair the wrong way round along the bottom edge, where kitty
uses E0B8 then E0BA.

The soft separator between two tabs of one colour was inset like the
chevron and the arc beside it, which imitate powerline glyphs. That one
imitates U+2571, a box-drawing diagonal that runs corner to corner, so it
was rendering as a stroke that fell short at both ends.

The spec alongside pins each shape to the corner it fills, and drops a
spare copy of the slant that nothing drew.

Author: xcutiboo

src/components/live-preview/preview-metrics.ts

@@ -126,16 +126,18 @@ export const POWERLINE_GLYPHS = {
 } as const;
 
 /**
- * Thin separator stroke definitions. Used when two adjacent tabs share a
- * background color, so the filled glyph would render invisibly. These
- * stand in for the Powerline soft-separator codepoints (U+E0B1, U+E0B3,
- * U+E0B5, U+E0B9, U+E0BD).
+ * Thin separator stroke definitions, used when two adjacent tabs share a
+ * background colour and the filled glyph would render invisibly.
+ *
+ * The chevron and the arc imitate U+E0B1 and U+E0B5, which sit inset within
+ * their cell in every Powerline font. The slant does not: Kitty reaches for
+ * U+2571 there, a box-drawing character that runs corner to corner, so an inset
+ * copy of it reads as a stroke that fell short at both ends.
  */
 export const POWERLINE_SOFT = {
 	angled: "M0.15 0 L0.85 0.5 L0.15 1",
-	slanted: "M0.85 0 L0.15 1",
+	slanted: "M1 0 L0 1",
 	round: "M0.3 0 Q0.85 0 0.85 0.5 Q0.85 1 0.3 1",
-	slantTop: "M0.85 0 L0.15 1",
 } as const;
 
 /** macOS-style traffic light cluster. */

src/components/live-preview/tab-bar-glyphs.spec.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+import { POWERLINE_GLYPHS, POWERLINE_SOFT } from "./preview-metrics";
+
+/**
+ * The preview draws Powerline separators as SVG rather than as glyphs, because
+ * it cannot count on a patched font being installed. That means the shapes are
+ * ours to get right, and getting one wrong is not obvious: the slanted
+ * separator was drawing the complement of the triangle Kitty uses, which put
+ * the tab's own colour on the far side of the slant and stranded a wedge of it
+ * against the following tab.
+ *
+ * Kitty picks its separators in kitty/tab_bar.py:
+ *
+ *   powerline_symbols = {'slanted': ('', '╱'), 'round': ('', '')}
+ *   ...                  default    ('', '')
+ *
+ * and for the slant tab bar style:
+ *
+ *   left_sep, right_sep = ('', '') if tab_bar_edge in ('top', 'left')
+ *                    else ('', '')
+ *
+ * These pin the geometry to those codepoints. A triangle is named by the corner
+ * region it fills, in a box whose origin is the top left.
+ */
+describe("powerline separator geometry", () => {
+	/** The three corners of a filled triangle path, in order. */
+	function corners(path: string): string {
+		const numbers = path.match(/-?\d*\.?\d+/g) ?? [];
+		const points: string[] = [];
+		for (let i = 0; i + 1 < numbers.length; i += 2) {
+			points.push(`${numbers[i]},${numbers[i + 1]}`);
+		}
+		return points.join(" ");
+	}
+
+	it.each([
+		["e0b0", "right-pointing triangle", "0,0 1,0.5 0,1"],
+		["e0b2", "left-pointing triangle", "1,0 0,0.5 1,1"],
+		["e0b8", "lower left", "1,0 0,1 1,1"],
+		["e0ba", "lower right", "0,0 0,1 1,1"],
+		["e0bc", "upper left", "0,0 1,0 0,1"],
+		["e0be", "upper right", "0,0 1,0 1,1"],
+	])("draws %s as the %s shape", (name, _description, expected) => {
+		expect(corners(POWERLINE_GLYPHS[name as keyof typeof POWERLINE_GLYPHS])).toBe(
+			expected,
+		);
+	});
+
+	it("gives the slanted soft separator the full height of its cell", () => {
+		// U+2571 is a box-drawing diagonal, which runs corner to corner. The
+		// chevron and arc it sits beside imitate Powerline glyphs, which do not.
+		expect(POWERLINE_SOFT.slanted).toBe("M1 0 L0 1");
+		expect(POWERLINE_SOFT.angled).toContain("0.15");
+		expect(POWERLINE_SOFT.round).toContain("0.3");
+	});
+
+	it("has no separator shape nothing draws", () => {
+		// A spare copy of the slant sat here unused for long enough to be
+		// mistaken for the one in service.
+		expect(Object.keys(POWERLINE_SOFT).sort()).toEqual([
+			"angled",
+			"round",
+			"slanted",
+		]);
+	});
+});

src/components/live-preview/terminal-tab-bar.component.ts

@@ -182,11 +182,17 @@ export class TerminalTabBarComponent {
 		() => this.store.configState().tab_bar.tab_powerline_style,
 	);
 
+	/**
+	 * The slant style carves the bar's own background out of each end of a tab,
+	 * so a tab reads as a trapezium. Kitty flips which corner is cut when the bar
+	 * sits along the bottom, otherwise the tabs would lean into the terminal
+	 * rather than away from it: E0BC/E0BE along the top, E0B8/E0BA below.
+	 */
 	readonly slantLeftPath = computed(() =>
-		this.edge() === "top" ? POWERLINE_GLYPHS.e0bc : POWERLINE_GLYPHS.e0ba,
+		this.edge() === "top" ? POWERLINE_GLYPHS.e0bc : POWERLINE_GLYPHS.e0b8,
 	);
 	readonly slantRightPath = computed(() =>
-		this.edge() === "top" ? POWERLINE_GLYPHS.e0be : POWERLINE_GLYPHS.e0b8,
+		this.edge() === "top" ? POWERLINE_GLYPHS.e0be : POWERLINE_GLYPHS.e0ba,
 	);
 
 	private readonly tabBar = computed(() => this.store.configState().tab_bar);
@@ -263,12 +269,19 @@ export class TerminalTabBarComponent {
 		return this.edge() === "top" ? inner : outer;
 	});
 
+	/**
+	 * The glyph Kitty draws between two powerline tabs, from the table in
+	 * tab_bar.py. Its filled part takes the tab's own background and the rest
+	 * shows the next tab's, so picking the complementary triangle puts the tab's
+	 * colour on the far side of the slant and leaves a wedge of it stranded
+	 * against the following tab.
+	 */
 	powerlinePath(): string {
 		switch (this.powerlineShape()) {
 			case "round":
 				return POWERLINE_GLYPHS.e0b4;
 			case "slanted":
-				return POWERLINE_GLYPHS.e0b8;
+				return POWERLINE_GLYPHS.e0bc;
 			default:
 				return POWERLINE_GLYPHS.e0b0;
 		}