Changes pane: its diff in Pi Web's diff theme

piweb/hf-design.patch

@@ -4243,7 +4243,7 @@ index 0000000..8d003fe
 +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 +OTHER DEALINGS IN THE FONT SOFTWARE.
 diff --git a/app/globals.css b/app/globals.css
-index 49e70be..75bdab8 100644
+index 49e70be..cf5f144 100644
 --- a/app/globals.css
 +++ b/app/globals.css
 @@ -24,46 +24,109 @@
@@ -5914,7 +5914,7 @@ index 49e70be..75bdab8 100644
    textarea,
    input,
    select {
-@@ -2746,3 +2372,496 @@ span.token.table {
+@@ -2746,3 +2372,507 @@ span.token.table {
      display: none !important;
    }
  }
@@ -6231,9 +6231,12 @@ index 49e70be..75bdab8 100644
 +/* Pi Web's code and diff viewers (components/highlighting.ts: @pierre/diffs, Shiki): their shadow
 +   roots read these. The design system's code type (text-code: 12px on 18px, ligatures off), the
 +   surface they sit on (--code-bg), the state colours for additions and deletions, and a neutral
-+   "modified" (selection), never the library's blue. */
++   "modified" (selection), never the library's blue. Every viewer takes them, the Changes pane's
++   too (components/ChangesPane.tsx renders its own): without them the library's own theme shows,
++   its near-black background in bands above and below the lines and beside the line numbers. */
 +.code-diff,
-+.code-file {
++.code-file,
++.changes-diff-scroll {
 +  --code-bg: var(--bg);
 +  --diffs-font-family: var(--font-mono);
 +  --diffs-header-font-family: var(--font-ui);
@@ -6249,6 +6252,13 @@ index 49e70be..75bdab8 100644
 +  --diffs-bg-deletion-override: color-mix(in srgb, var(--danger) 12%, var(--bg));
 +  --diffs-bg-addition-emphasis-override: color-mix(in srgb, var(--success) 26%, transparent);
 +  --diffs-bg-deletion-emphasis-override: color-mix(in srgb, var(--danger) 26%, transparent);
++  /* Selected lines (a range to comment on) as a highlighted row is: a tint of the ink, not the
++     library's 65% of the "modified" colour, which turned a selection and its comment's row grey. */
++  --diffs-bg-selection-override: color-mix(in srgb, var(--text-strong) 8%, var(--code-bg));
++  --diffs-bg-selection-number-override: color-mix(in srgb, var(--text-strong) 12%, var(--code-bg));
++}
++.code-diff,
++.code-file {
 +  min-width: 0;
 +  padding-block: 6px;
 +  background: var(--code-bg);
@@ -6257,7 +6267,8 @@ index 49e70be..75bdab8 100644
 +/* The background goes on the viewer's host itself: its theme sets these two there (:host), which
 +   beats a value inherited from the wrapper; a document rule on the host beats the :host rule. */
 +.code-diff diffs-container,
-+.code-file diffs-container {
++.code-file diffs-container,
++.changes-diff-scroll diffs-container {
 +  --diffs-light-bg: var(--code-bg);
 +  --diffs-dark-bg: var(--code-bg);
 +}
@@ -8596,10 +8607,10 @@ index f0e2e95..3ecbf91 100644
    font-family: var(--font-mono);
 diff --git a/app/shell.css b/app/shell.css
 new file mode 100644
-index 0000000..150b9c1
+index 0000000..a2e91d5
 --- /dev/null
 +++ b/app/shell.css
-@@ -0,0 +1,765 @@
+@@ -0,0 +1,767 @@
 +/* The app's frame, as Claude Code Desktop's: the conversation's header (the
 +   title and its menu; a button per pane on the right), the tiles (the chat
 +   and the panes it opened: Terminal, Changes, Browser, Files) and the Changes
@@ -9085,7 +9096,6 @@ index 0000000..150b9c1
 +.changes-file {
 +  display: flex;
 +  align-items: baseline;
-+  line-height: var(--size-row);
 +  gap: 6px;
 +  width: 100%;
 +  min-height: var(--size-row);
@@ -9096,6 +9106,7 @@ index 0000000..150b9c1
 +  color: var(--text);
 +  font: inherit;
 +  font-size: 12.5px;
++  line-height: var(--size-row); /* after the font shorthand, which resets it */
 +  text-align: left;
 +  cursor: pointer;
 +}
@@ -9109,7 +9120,9 @@ index 0000000..150b9c1
 +.changes-file-status.is-modified, .changes-file-status.is-renamed { color: var(--warning); }
 +.changes-file-status.is-added, .changes-file-status.is-untracked { color: var(--success); }
 +.changes-file-status.is-deleted, .changes-file-status.is-conflict { color: var(--danger); }
-+.changes-diff { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; }
++/* The selected file's diff: the code's surface edge to edge under the list, its path, lines
++   and tip on it, as the Files pane shows a diff. */
++.changes-diff { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
 +.changes-diff-head {
 +  display: flex;
 +  flex-shrink: 0;
@@ -9119,7 +9132,7 @@ index 0000000..150b9c1
 +  padding: 0 8px 0 12px;
 +}
 +.changes-diff-path { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
-+.changes-diff-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 8px 8px; }
++.changes-diff-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px 0 12px; background: var(--code-bg); }
 +.changes-diff-tip { flex-shrink: 0; padding: 6px 12px; border-top: 1px solid var(--line); color: var(--text-dim); font-size: 12px; }
 +@container (max-width: 720px) {
 +  .changes-body { flex-direction: column; }
@@ -32164,10 +32177,10 @@ index 0000000..a620a61
 +export { CodeFile } from "./CodeFile";
 diff --git a/components/highlighting.test.mjs b/components/highlighting.test.mjs
 new file mode 100644
-index 0000000..3d8fca8
+index 0000000..f69de58
 --- /dev/null
 +++ b/components/highlighting.test.mjs
-@@ -0,0 +1,28 @@
+@@ -0,0 +1,43 @@
 +import assert from "node:assert/strict";
 +import test from "node:test";
 +import { createJiti } from "jiti";
@@ -32196,6 +32209,21 @@ index 0000000..3d8fca8
 +  assert.match(UNSAFE_CSS, /font-weight: calc\(var\(--font-mono-weight, 400\) \+ 200\)/);
 +  assert.doesNotMatch(UNSAFE_CSS, /#[0-9a-f]{3,6}\b/i);
 +});
++
++test("every viewer of the library sits in Pi Web's diff theme: no library background shows", async () => {
++  const { readFileSync } = await import("node:fs");
++  const globals = readFileSync(new URL("../app/globals.css", import.meta.url), "utf8");
++  // The variables' rule and the rule on the viewer's host, each a list of the viewers' wrappers.
++  const variables = globals.match(/((?:\.[\w-]+,\n)*\.[\w-]+) \{\n  --code-bg: var\(--bg\);/)?.[1].split(",\n") ?? [];
++  const hosts = globals.match(/((?:\.[\w-]+ diffs-container,\n)*\.[\w-]+ diffs-container) \{\n  --diffs-light-bg: var\(--code-bg\);/)?.[1].split(",\n").map((s) => s.replace(" diffs-container", "")) ?? [];
++  for (const [file, wrapper] of [["./CodeDiff.tsx", ".code-diff"], ["./CodeFile.tsx", ".code-file"], ["./ChangesPane.tsx", ".changes-diff-scroll"]]) {
++    const source = readFileSync(new URL(file, import.meta.url), "utf8");
++    assert.ok(source.includes(wrapper.slice(1)), `${file} renders its viewer in ${wrapper}`);
++    assert.ok(variables.includes(wrapper), `${wrapper} takes the theme's colours (${variables.join(" ")})`);
++    assert.ok(hosts.includes(wrapper), `${wrapper}'s viewer takes the code surface as its background`);
++  }
++  assert.match(globals, /--diffs-bg-selection-override: color-mix\(in srgb, var\(--text-strong\) 8%, var\(--code-bg\)\);/, "a selection is a light tint");
++});
 diff --git a/components/highlighting.ts b/components/highlighting.ts
 new file mode 100644
 index 0000000..773b858
@@ -32431,10 +32459,10 @@ index f7b4749..0000000
 -}
 diff --git a/components/ui/baselines.test.mjs b/components/ui/baselines.test.mjs
 new file mode 100644
-index 0000000..cda684d
+index 0000000..b01f48b
 --- /dev/null
 +++ b/components/ui/baselines.test.mjs
-@@ -0,0 +1,48 @@
+@@ -0,0 +1,52 @@
 +import assert from "node:assert/strict";
 +import { readFileSync } from "node:fs";
 +import test from "node:test";
@@ -32470,6 +32498,10 @@ index 0000000..cda684d
 +    const body = rule(selector);
 +    assert.match(body, /align-items: baseline/, selector);
 +    assert.ok(body.includes(`line-height: ${line}`), `${selector}: line box of ${line}`);
++    // The font shorthand resets line-height: a later one would undo the row's line box (the
++    // Changes list's names once sat high in their rows, their icons centred).
++    const font = body.lastIndexOf("font: "), height = body.lastIndexOf(`line-height: ${line}`);
++    assert.ok(font < height, `${selector}: its line box comes after its font shorthand`);
 +  }
 +  assert.match(rule(".tool-call-head"), /align-items: baseline/);
 +  assert.match(css, /\.tool-call-head > svg,\n\.tool-call-row > :not\(\.tool-call-head, \.tool-call-meta\) \{ align-self: center; \}/);