feat(workspace): frameless console that blends into its card

The tab bar and terminal lose their bordered box: the bar keeps one
divider with an accent underline on the active tab, and the terminal is
painted in the card's colour (--surface-3) instead of the page's.

That made a long-standing overflow visible: xterm re-measures its cell
only on a font option change or a resize, so a webfont landing after
open left the fit on the fallback font's cell and the rows/cols spilled
out of the pane. Re-set the family and refit on document.fonts
loadingdone.
This commit is contained in:
2026-10-03 12:37:35 +07:00
parent e5762a59d6
commit 8f6360f993
6 changed files with 31 additions and 17 deletions
@@ -24,7 +24,9 @@ const vars: Record<string, string> = {
describe("buildTerminalTheme", () => {
it("maps theme tokens onto the xterm palette", () => {
const t = buildTerminalTheme((n) => vars[n] ?? "");
expect(t.background).toBe("#111113");
// The card's colour, so the terminal blends into the card it sits on.
expect(t.background).toBe("#272a2d");
expect(t.cursorAccent).toBe("#272a2d");
expect(t.foreground).toBe("#edeef0");
expect(t.cursor).toBe("#edeef0");
expect(t.selectionBackground).toBe("#43484e");
@@ -58,7 +60,7 @@ describe("buildTerminalTheme", () => {
describe("terminalThemeFor", () => {
it("resolves variables on a dark probe scoped to the theme id, then removes it", () => {
const style = document.createElement("style");
style.textContent = `.dark { --surface-0: 1 2 3; } .dark[data-theme="darcula"] { --surface-0: 30 31 32; }`;
style.textContent = `.dark { --surface-3: 1 2 3; } .dark[data-theme="darcula"] { --surface-3: 30 31 32; }`;
document.head.appendChild(style);
try {
expect(terminalThemeFor("default").background).toBe("#010203");
+3 -2
View File
@@ -54,10 +54,11 @@ export function buildTerminalTheme(read: VarReader): ITheme {
const magenta = "#c678dd";
const cyan = "#56b6c2";
return {
background: v("--surface-0"),
// The `.card` colour: the console sits on a card, with no frame between.
background: v("--surface-3"),
foreground: v("--fg-primary"),
cursor: v("--fg-primary"),
cursorAccent: v("--surface-0"),
cursorAccent: v("--surface-3"),
selectionBackground: v("--border-light"),
black: v("--border-light"),
red,