@dexto/tui 1.15.0-beta.0 → 1.15.0-beta.1

package/dist/components/renderers/SignalDiff.cjs

@@ -0,0 +1,139 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SignalDiff_exports = {};
+__export(SignalDiff_exports, {
+  SignalDiff: () => SignalDiff,
+  diffRows: () => diffRows,
+  numberCells: () => numberCells
+});
+module.exports = __toCommonJS(SignalDiff_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ink = require("ink");
+var import_string_width = __toESM(require("string-width"), 1);
+var import_signal = require("../../signal/index.js");
+var import_diff_shared = require("./diff-shared.js");
+function diffRows(hunk) {
+  let oldLine = hunk.oldStart;
+  let newLine = hunk.newStart;
+  const rows = hunk.lines.map((line) => ({
+    kind: line.type,
+    oldLine: line.type === "addition" ? null : oldLine++,
+    newLine: line.type === "deletion" ? null : newLine++,
+    content: line.content,
+    parts: null
+  }));
+  rows.forEach((row, i) => {
+    const next = rows[i + 1];
+    if (row.kind !== "deletion" || next?.kind !== "addition") return;
+    const { oldParts, newParts } = (0, import_diff_shared.computeWordDiff)(row.content, next.content);
+    row.parts = oldParts;
+    next.parts = newParts;
+  });
+  return rows;
+}
+const MIN_NUMBER_CELLS = 4;
+function numberCells(hunks) {
+  const largest = hunks.flatMap((hunk) => diffRows(hunk)).flatMap((row) => [row.oldLine ?? 0, row.newLine ?? 0]).reduce((a, b) => Math.max(a, b), 0);
+  return Math.max(MIN_NUMBER_CELLS, String(largest).length);
+}
+function gutterCells(cells) {
+  return cells * 2 + 4;
+}
+function cell(line, cells) {
+  return (line === null ? "" : String(line)).padStart(cells, " ");
+}
+const ROW_STYLE = {
+  addition: { bg: "addBg", strong: "addBg2", sign: "+", role: "add" },
+  deletion: { bg: "delBg", strong: "delBg2", sign: "\u2212", role: "del" },
+  context: { bg: null, strong: null, sign: " ", role: "dim" }
+};
+function RowText({ row, width, cells }) {
+  const tone = (0, import_signal.useTone)();
+  const { glyphs } = (0, import_signal.useCaps)();
+  const style = ROW_STYLE[row.kind];
+  const bg = style.bg === null ? {} : { backgroundColor: tone(style.bg) };
+  const parts = (row.parts ?? [{ value: row.content }]).map((part) => ({
+    ...part,
+    value: part.value.replace(/\t/g, "    ")
+  }));
+  const gutter = gutterCells(cells);
+  const room = Math.max(1, width - gutter);
+  const used = (0, import_string_width.default)(parts.map((part) => part.value).join(""));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: gutter, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { ...bg, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ink.Text,
+        {
+          color: tone("faint"),
+          children: `${cell(row.oldLine, cells)} ${cell(row.newLine, cells)} `
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, color: tone(style.role), children: [
+        (0, import_signal.glyphText)(style.sign, glyphs),
+        " "
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: room, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { wrap: "wrap", ...bg, children: [
+      parts.map((part, i) => {
+        const strong = part.added || part.removed ? style.strong : null;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ink.Text,
+          {
+            color: tone(
+              strong !== null ? "hi" : row.kind === "context" ? "dim" : "fg"
+            ),
+            ...strong !== null ? { backgroundColor: tone(strong) } : {},
+            children: part.value
+          },
+          i
+        );
+      }),
+      style.bg !== null && used < room ? " ".repeat(room - used) : ""
+    ] }) })
+  ] });
+}
+function SignalDiff({ data, width }) {
+  const tone = (0, import_signal.useTone)();
+  const { glyphs } = (0, import_signal.useCaps)();
+  const hunks = (0, import_diff_shared.parseUnifiedDiff)(data.unified);
+  const cells = numberCells(hunks);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", children: hunks.map((hunk, h) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { wrap: "truncate-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("ghost"), children: (0, import_signal.glyphText)("\u250A ", glyphs) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("tealDim"), children: (0, import_signal.glyphText)(hunk.header.replace(/ -(\d)/, " \u2212$1"), glyphs) })
+    ] }),
+    diffRows(hunk).map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RowText, { row, width, cells }, i))
+  ] }, h)) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SignalDiff,
+  diffRows,
+  numberCells
+});

package/dist/components/renderers/SignalDiff.d.ts

@@ -0,0 +1,21 @@
+import type { DiffDisplayData } from '@dexto/core';
+import { type ParsedHunk, type WordDiffPart } from './diff-shared.js';
+export interface DiffRow {
+    kind: 'context' | 'addition' | 'deletion';
+    oldLine: number | null;
+    newLine: number | null;
+    content: string;
+    /** Word-level parts, when this line is one side of a change. */
+    parts: WordDiffPart[] | null;
+}
+/** One hunk's rows, each with both line numbers, and word diffs across a -/+ pair. */
+export declare function diffRows(hunk: ParsedHunk): DiffRow[];
+/** Cells for a line number: wide enough for the largest in the diff, the same on every row. */
+export declare function numberCells(hunks: ParsedHunk[]): number;
+export interface SignalDiffProps {
+    data: DiffDisplayData;
+    /** Columns the diff may fill. */
+    width: number;
+}
+export declare function SignalDiff({ data, width }: SignalDiffProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SignalDiff.d.ts.map

package/dist/components/renderers/SignalDiff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignalDiff.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/SignalDiff.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAGH,KAAK,UAAU,EACf,KAAK,YAAY,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,OAAO;IACpB,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1C,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;CAChC;AAED,sFAAsF;AACtF,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,EAAE,CAkBpD;AAID,+FAA+F;AAC/F,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,MAAM,CAMvD;AAkED,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,eAAe,CAAC;IACtB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,eAAe,2CAsB1D"}

package/dist/components/renderers/SignalDiff.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import stringWidth from "string-width";
+import { glyphText, useCaps, useTone } from "../../signal/index.js";
+import {
+  computeWordDiff,
+  parseUnifiedDiff
+} from "./diff-shared.js";
+function diffRows(hunk) {
+  let oldLine = hunk.oldStart;
+  let newLine = hunk.newStart;
+  const rows = hunk.lines.map((line) => ({
+    kind: line.type,
+    oldLine: line.type === "addition" ? null : oldLine++,
+    newLine: line.type === "deletion" ? null : newLine++,
+    content: line.content,
+    parts: null
+  }));
+  rows.forEach((row, i) => {
+    const next = rows[i + 1];
+    if (row.kind !== "deletion" || next?.kind !== "addition") return;
+    const { oldParts, newParts } = computeWordDiff(row.content, next.content);
+    row.parts = oldParts;
+    next.parts = newParts;
+  });
+  return rows;
+}
+const MIN_NUMBER_CELLS = 4;
+function numberCells(hunks) {
+  const largest = hunks.flatMap((hunk) => diffRows(hunk)).flatMap((row) => [row.oldLine ?? 0, row.newLine ?? 0]).reduce((a, b) => Math.max(a, b), 0);
+  return Math.max(MIN_NUMBER_CELLS, String(largest).length);
+}
+function gutterCells(cells) {
+  return cells * 2 + 4;
+}
+function cell(line, cells) {
+  return (line === null ? "" : String(line)).padStart(cells, " ");
+}
+const ROW_STYLE = {
+  addition: { bg: "addBg", strong: "addBg2", sign: "+", role: "add" },
+  deletion: { bg: "delBg", strong: "delBg2", sign: "\u2212", role: "del" },
+  context: { bg: null, strong: null, sign: " ", role: "dim" }
+};
+function RowText({ row, width, cells }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  const style = ROW_STYLE[row.kind];
+  const bg = style.bg === null ? {} : { backgroundColor: tone(style.bg) };
+  const parts = (row.parts ?? [{ value: row.content }]).map((part) => ({
+    ...part,
+    value: part.value.replace(/\t/g, "    ")
+  }));
+  const gutter = gutterCells(cells);
+  const room = Math.max(1, width - gutter);
+  const used = stringWidth(parts.map((part) => part.value).join(""));
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Box, { width: gutter, flexShrink: 0, children: /* @__PURE__ */ jsxs(Text, { ...bg, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          color: tone("faint"),
+          children: `${cell(row.oldLine, cells)} ${cell(row.newLine, cells)} `
+        }
+      ),
+      /* @__PURE__ */ jsxs(Text, { bold: true, color: tone(style.role), children: [
+        glyphText(style.sign, glyphs),
+        " "
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { width: room, flexShrink: 0, children: /* @__PURE__ */ jsxs(Text, { wrap: "wrap", ...bg, children: [
+      parts.map((part, i) => {
+        const strong = part.added || part.removed ? style.strong : null;
+        return /* @__PURE__ */ jsx(
+          Text,
+          {
+            color: tone(
+              strong !== null ? "hi" : row.kind === "context" ? "dim" : "fg"
+            ),
+            ...strong !== null ? { backgroundColor: tone(strong) } : {},
+            children: part.value
+          },
+          i
+        );
+      }),
+      style.bg !== null && used < room ? " ".repeat(room - used) : ""
+    ] }) })
+  ] });
+}
+function SignalDiff({ data, width }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  const hunks = parseUnifiedDiff(data.unified);
+  const cells = numberCells(hunks);
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: hunks.map((hunk, h) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Text, { wrap: "truncate-end", children: [
+      /* @__PURE__ */ jsx(Text, { color: tone("ghost"), children: glyphText("\u250A ", glyphs) }),
+      /* @__PURE__ */ jsx(Text, { color: tone("tealDim"), children: glyphText(hunk.header.replace(/ -(\d)/, " \u2212$1"), glyphs) })
+    ] }),
+    diffRows(hunk).map((row, i) => /* @__PURE__ */ jsx(RowText, { row, width, cells }, i))
+  ] }, h)) });
+}
+export {
+  SignalDiff,
+  diffRows,
+  numberCells
+};

package/dist/components/renderers/SignalDiff.test.cjs

@@ -0,0 +1,78 @@
+"use strict";
+var import_react = require("react");
+var import_vitest = require("vitest");
+var import_harness = require("../../signal/harness.js");
+var import_diff_shared = require("./diff-shared.js");
+var import_SignalDiff = require("./SignalDiff.js");
+const UNIFIED = [
+  "--- a.ts",
+  "+++ a.ts",
+  "@@ -41,3 +41,3 @@ export function parse",
+  " keep",
+  "-const old = 1;",
+  "+const fresh = 1;",
+  " tail"
+].join("\n");
+(0, import_vitest.describe)("diffRows", () => {
+  const rows = (0, import_SignalDiff.diffRows)((0, import_diff_shared.parseUnifiedDiff)(UNIFIED)[0]);
+  (0, import_vitest.it)("numbers each row on the side it exists on", () => {
+    (0, import_vitest.expect)(rows.map((r) => [r.oldLine, r.newLine])).toEqual([
+      [41, 41],
+      [42, null],
+      [null, 42],
+      [43, 43]
+    ]);
+  });
+  (0, import_vitest.it)("word-diffs a removed line against the added line after it", () => {
+    (0, import_vitest.expect)(rows[1]?.parts?.some((p) => p.removed && p.value.includes("old"))).toBe(true);
+    (0, import_vitest.expect)(rows[2]?.parts?.some((p) => p.added && p.value.includes("fresh"))).toBe(true);
+    (0, import_vitest.expect)(rows[0]?.parts).toBeNull();
+  });
+});
+(0, import_vitest.describe)("SignalDiff", () => {
+  const data = {
+    type: "diff",
+    unified: UNIFIED,
+    filename: "a.ts",
+    additions: 1,
+    deletions: 1
+  };
+  (0, import_vitest.it)("draws the hunk header, both line numbers and signs", () => {
+    const frame = (0, import_harness.renderFrame)((0, import_react.createElement)(import_SignalDiff.SignalDiff, { data, width: 60 }), {
+      columns: 60,
+      terminal: "no-color"
+    });
+    const lines = frame.split("\n").map((l) => l.trimEnd());
+    (0, import_vitest.expect)(lines[0]).toBe("\u250A @@ \u221241,3 +41,3 @@ export function parse");
+    (0, import_vitest.expect)(lines[1]).toBe("  41   41   keep");
+    (0, import_vitest.expect)(lines[2]).toBe("  42      \u2212 const old = 1;");
+    (0, import_vitest.expect)(lines[3]).toBe("       42 + const fresh = 1;");
+  });
+  (0, import_vitest.it)("wraps a long line so none of it is hidden", () => {
+    const long = { ...data, unified: `@@ -1 +1 @@
++${"x".repeat(200)}` };
+    const frame = (0, import_harness.renderFrame)((0, import_react.createElement)(import_SignalDiff.SignalDiff, { data: long, width: 40 }), {
+      columns: 40,
+      terminal: "no-color"
+    });
+    (0, import_vitest.expect)(frame.match(/x/g)).toHaveLength(200);
+    for (const line of frame.split("\n")) (0, import_vitest.expect)(line.length).toBeLessThanOrEqual(40);
+  });
+  (0, import_vitest.it)("widens the gutter for large line numbers and keeps rows aligned", () => {
+    const large = { ...data, unified: "@@ -100000,1 +100000,1 @@\n-old\n+new" };
+    const lines = (0, import_harness.renderFrame)((0, import_react.createElement)(import_SignalDiff.SignalDiff, { data: large, width: 60 }), {
+      columns: 60,
+      terminal: "no-color"
+    }).split("\n");
+    (0, import_vitest.expect)(lines[1]?.trimEnd()).toBe("100000        \u2212 old");
+    (0, import_vitest.expect)(lines[2]?.trimEnd()).toBe("       100000 + new");
+  });
+  (0, import_vitest.it)("falls back to plain signs on an ASCII terminal", () => {
+    const frame = (0, import_harness.renderFrame)((0, import_react.createElement)(import_SignalDiff.SignalDiff, { data, width: 60 }), {
+      columns: 60,
+      terminal: "ascii"
+    });
+    (0, import_vitest.expect)(frame).not.toContain("\u250A");
+    (0, import_vitest.expect)(frame).not.toContain("\u2212");
+  });
+});

package/dist/components/renderers/SignalDiff.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SignalDiff.test.d.ts.map

package/dist/components/renderers/SignalDiff.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignalDiff.test.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/SignalDiff.test.ts"],"names":[],"mappings":""}

package/dist/components/renderers/SignalDiff.test.js

@@ -0,0 +1,77 @@
+import { createElement } from "react";
+import { describe, expect, it } from "vitest";
+import { renderFrame } from "../../signal/harness.js";
+import { parseUnifiedDiff } from "./diff-shared.js";
+import { SignalDiff, diffRows } from "./SignalDiff.js";
+const UNIFIED = [
+  "--- a.ts",
+  "+++ a.ts",
+  "@@ -41,3 +41,3 @@ export function parse",
+  " keep",
+  "-const old = 1;",
+  "+const fresh = 1;",
+  " tail"
+].join("\n");
+describe("diffRows", () => {
+  const rows = diffRows(parseUnifiedDiff(UNIFIED)[0]);
+  it("numbers each row on the side it exists on", () => {
+    expect(rows.map((r) => [r.oldLine, r.newLine])).toEqual([
+      [41, 41],
+      [42, null],
+      [null, 42],
+      [43, 43]
+    ]);
+  });
+  it("word-diffs a removed line against the added line after it", () => {
+    expect(rows[1]?.parts?.some((p) => p.removed && p.value.includes("old"))).toBe(true);
+    expect(rows[2]?.parts?.some((p) => p.added && p.value.includes("fresh"))).toBe(true);
+    expect(rows[0]?.parts).toBeNull();
+  });
+});
+describe("SignalDiff", () => {
+  const data = {
+    type: "diff",
+    unified: UNIFIED,
+    filename: "a.ts",
+    additions: 1,
+    deletions: 1
+  };
+  it("draws the hunk header, both line numbers and signs", () => {
+    const frame = renderFrame(createElement(SignalDiff, { data, width: 60 }), {
+      columns: 60,
+      terminal: "no-color"
+    });
+    const lines = frame.split("\n").map((l) => l.trimEnd());
+    expect(lines[0]).toBe("\u250A @@ \u221241,3 +41,3 @@ export function parse");
+    expect(lines[1]).toBe("  41   41   keep");
+    expect(lines[2]).toBe("  42      \u2212 const old = 1;");
+    expect(lines[3]).toBe("       42 + const fresh = 1;");
+  });
+  it("wraps a long line so none of it is hidden", () => {
+    const long = { ...data, unified: `@@ -1 +1 @@
++${"x".repeat(200)}` };
+    const frame = renderFrame(createElement(SignalDiff, { data: long, width: 40 }), {
+      columns: 40,
+      terminal: "no-color"
+    });
+    expect(frame.match(/x/g)).toHaveLength(200);
+    for (const line of frame.split("\n")) expect(line.length).toBeLessThanOrEqual(40);
+  });
+  it("widens the gutter for large line numbers and keeps rows aligned", () => {
+    const large = { ...data, unified: "@@ -100000,1 +100000,1 @@\n-old\n+new" };
+    const lines = renderFrame(createElement(SignalDiff, { data: large, width: 60 }), {
+      columns: 60,
+      terminal: "no-color"
+    }).split("\n");
+    expect(lines[1]?.trimEnd()).toBe("100000        \u2212 old");
+    expect(lines[2]?.trimEnd()).toBe("       100000 + new");
+  });
+  it("falls back to plain signs on an ASCII terminal", () => {
+    const frame = renderFrame(createElement(SignalDiff, { data, width: 60 }), {
+      columns: 60,
+      terminal: "ascii"
+    });
+    expect(frame).not.toContain("\u250A");
+    expect(frame).not.toContain("\u2212");
+  });
+});

package/dist/components/renderers/diff-shared.cjs

@@ -18,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var diff_shared_exports = {};
 __export(diff_shared_exports, {
+  DiffInsetContext: () => DiffInsetContext,
   DiffLine: () => DiffLine,
   HunkSeparator: () => HunkSeparator,
   computeWordDiff: () => computeWordDiff,
@@ -28,8 +29,10 @@ __export(diff_shared_exports, {
 });
 module.exports = __toCommonJS(diff_shared_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ink = require("ink");
 var import_diff = require("diff");
+var import_signal = require("../../signal/index.js");
 function parseUnifiedDiff(unified) {
   const lines = unified.split("\n");
   const hunks = [];
@@ -50,6 +53,7 @@ function parseUnifiedDiff(unified) {
       currentHunk = {
         oldStart: oldLine,
         newStart: newLine,
+        header: line,
         lines: []
       };
       continue;
@@ -115,18 +119,19 @@ function getLineNumWidth(maxLineNum) {
 function formatLineNum(num, width) {
   return String(num).padStart(width, " ");
 }
+const DiffInsetContext = (0, import_react.createContext)(0);
 function DiffLine({ type, lineNum, lineNumWidth, content, wordDiffParts }) {
   const { stdout } = (0, import_ink.useStdout)();
-  const terminalWidth = stdout?.columns ?? 80;
+  const terminalWidth = (stdout?.columns ?? 80) - (0, import_react.useContext)(DiffInsetContext);
   const lineNumStr = formatLineNum(lineNum, lineNumWidth);
   const gutterWidth = lineNumWidth + 3;
   const contentWidth = Math.max(20, terminalWidth - gutterWidth - 4);
   const getColors = () => {
     switch (type) {
       case "deletion":
-        return { bg: "#662222", fg: "white", symbol: "-", symbolColor: "red" };
+        return { bg: (0, import_signal.tone)("delBg"), fg: (0, import_signal.tone)("hi"), symbol: "-", symbolColor: (0, import_signal.tone)("red") };
       case "addition":
-        return { bg: "#224466", fg: "white", symbol: "+", symbolColor: "blue" };
+        return { bg: (0, import_signal.tone)("addBg"), fg: (0, import_signal.tone)("hi"), symbol: "+", symbolColor: (0, import_signal.tone)("fg") };
       default:
         return { bg: void 0, fg: void 0, symbol: " ", symbolColor: void 0 };
     }
@@ -136,9 +141,9 @@ function DiffLine({ type, lineNum, lineNumWidth, content, wordDiffParts }) {
     if (wordDiffParts && wordDiffParts.length > 0) {
       return wordDiffParts.map((part, i) => {
         if (type === "deletion" && part.removed) {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { backgroundColor: "#882222", children: part.value }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { backgroundColor: (0, import_signal.tone)("delBg2"), children: part.value }, i);
         } else if (type === "addition" && part.added) {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { backgroundColor: "#224488", children: part.value }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { backgroundColor: (0, import_signal.tone)("addBg2"), children: part.value }, i);
         }
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: part.value }, i);
       });
@@ -147,7 +152,7 @@ function DiffLine({ type, lineNum, lineNumWidth, content, wordDiffParts }) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { width: gutterWidth, flexShrink: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: lineNumStr }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: lineNumStr }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: colors.symbolColor, children: [
         " ",
         colors.symbol,
@@ -158,10 +163,11 @@ function DiffLine({ type, lineNum, lineNumWidth, content, wordDiffParts }) {
   ] });
 }
 function HunkSeparator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "..." }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "..." }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DiffInsetContext,
   DiffLine,
   HunkSeparator,
   computeWordDiff,

package/dist/components/renderers/diff-shared.d.ts

@@ -4,9 +4,12 @@
  * Common code for DiffRenderer and FilePreviewRenderer.
  * Handles unified diff parsing, word-level diff highlighting, and line rendering.
  */
+import React from 'react';
 export interface ParsedHunk {
     oldStart: number;
     newStart: number;
+    /** The hunk's own "@@ -1,2 +1,3 @@ context" line. */
+    header: string;
     lines: ParsedLine[];
 }
 export interface ParsedLine {
@@ -39,6 +42,8 @@ export declare function computeWordDiff(oldStr: string, newStr: string): {
 };
 export declare function getLineNumWidth(maxLineNum: number): number;
 export declare function formatLineNum(num: number, width: number): string;
+/** Columns a surrounding frame takes from the terminal, so diff rows fit inside it. */
+export declare const DiffInsetContext: React.Context<number>;
 interface DiffLineProps {
     type: 'context' | 'addition' | 'deletion';
     lineNum: number;

package/dist/components/renderers/diff-shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diff-shared.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/diff-shared.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,MAAM,WAAW,UAAU;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAMD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,EAAE,CAyD9D;AAED;;GAEG;AACH,wBAAgB,aAAa,CACzB,KAAK,EAAE,UAAU,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE;IAAE,GAAG,EAAE,UAAU,CAAC;IAAC,GAAG,EAAE,UAAU,CAAA;CAAE,CAAC,CAanD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC3B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACf;IAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAAC,QAAQ,EAAE,YAAY,EAAE,CAAA;CAAE,CAkBxD;AAMD,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAE1D;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE;AAMD,UAAU,aAAa;IACnB,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,aAAa,2CAgE9F;AAED;;GAEG;AACH,wBAAgB,aAAa,4CAM5B"}
+{"version":3,"file":"diff-shared.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/diff-shared.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AASzD,MAAM,WAAW,UAAU;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACvB,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAMD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,EAAE,CA0D9D;AAED;;GAEG;AACH,wBAAgB,aAAa,CACzB,KAAK,EAAE,UAAU,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE;IAAE,GAAG,EAAE,UAAU,CAAC;IAAC,GAAG,EAAE,UAAU,CAAA;CAAE,CAAC,CAanD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC3B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GACf;IAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAAC,QAAQ,EAAE,YAAY,EAAE,CAAA;CAAE,CAkBxD;AAMD,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAE1D;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE;AAMD,uFAAuF;AACvF,eAAO,MAAM,gBAAgB,uBAAmB,CAAC;AAEjD,UAAU,aAAa;IACnB,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,aAAa,2CAgE9F;AAED;;GAEG;AACH,wBAAgB,aAAa,4CAM5B"}

package/dist/components/renderers/diff-shared.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 import { Box, Text, useStdout } from "ink";
 import { diffWords } from "diff";
+import { tone } from "../../signal/index.js";
 function parseUnifiedDiff(unified) {
   const lines = unified.split("\n");
   const hunks = [];
@@ -21,6 +23,7 @@ function parseUnifiedDiff(unified) {
       currentHunk = {
         oldStart: oldLine,
         newStart: newLine,
+        header: line,
         lines: []
       };
       continue;
@@ -86,18 +89,19 @@ function getLineNumWidth(maxLineNum) {
 function formatLineNum(num, width) {
   return String(num).padStart(width, " ");
 }
+const DiffInsetContext = createContext(0);
 function DiffLine({ type, lineNum, lineNumWidth, content, wordDiffParts }) {
   const { stdout } = useStdout();
-  const terminalWidth = stdout?.columns ?? 80;
+  const terminalWidth = (stdout?.columns ?? 80) - useContext(DiffInsetContext);
   const lineNumStr = formatLineNum(lineNum, lineNumWidth);
   const gutterWidth = lineNumWidth + 3;
   const contentWidth = Math.max(20, terminalWidth - gutterWidth - 4);
   const getColors = () => {
     switch (type) {
       case "deletion":
-        return { bg: "#662222", fg: "white", symbol: "-", symbolColor: "red" };
+        return { bg: tone("delBg"), fg: tone("hi"), symbol: "-", symbolColor: tone("red") };
       case "addition":
-        return { bg: "#224466", fg: "white", symbol: "+", symbolColor: "blue" };
+        return { bg: tone("addBg"), fg: tone("hi"), symbol: "+", symbolColor: tone("fg") };
       default:
         return { bg: void 0, fg: void 0, symbol: " ", symbolColor: void 0 };
     }
@@ -107,9 +111,9 @@ function DiffLine({ type, lineNum, lineNumWidth, content, wordDiffParts }) {
     if (wordDiffParts && wordDiffParts.length > 0) {
       return wordDiffParts.map((part, i) => {
         if (type === "deletion" && part.removed) {
-          return /* @__PURE__ */ jsx(Text, { backgroundColor: "#882222", children: part.value }, i);
+          return /* @__PURE__ */ jsx(Text, { backgroundColor: tone("delBg2"), children: part.value }, i);
         } else if (type === "addition" && part.added) {
-          return /* @__PURE__ */ jsx(Text, { backgroundColor: "#224488", children: part.value }, i);
+          return /* @__PURE__ */ jsx(Text, { backgroundColor: tone("addBg2"), children: part.value }, i);
         }
         return /* @__PURE__ */ jsx(Text, { children: part.value }, i);
       });
@@ -118,7 +122,7 @@ function DiffLine({ type, lineNum, lineNumWidth, content, wordDiffParts }) {
   };
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsxs(Box, { width: gutterWidth, flexShrink: 0, children: [
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: lineNumStr }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: lineNumStr }),
       /* @__PURE__ */ jsxs(Text, { color: colors.symbolColor, children: [
         " ",
         colors.symbol,
@@ -129,9 +133,10 @@ function DiffLine({ type, lineNum, lineNumWidth, content, wordDiffParts }) {
   ] });
 }
 function HunkSeparator() {
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "..." }) });
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "..." }) });
 }
 export {
+  DiffInsetContext,
   DiffLine,
   HunkSeparator,
   computeWordDiff,

package/dist/components/shared/FocusOverlayFrame.cjs

@@ -24,13 +24,14 @@ module.exports = __toCommonJS(FocusOverlayFrame_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ink = require("ink");
 var import_useTerminalSize = require("../../hooks/useTerminalSize.js");
+var import_signal = require("../../signal/index.js");
 function FocusOverlayFrame({ children }) {
   const { columns } = (0, import_useTerminalSize.useTerminalSize)();
   const divider = "\u2500".repeat(Math.max(0, columns));
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: columns, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: divider }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: divider }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, flexDirection: "column", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: divider })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: divider })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/shared/FocusOverlayFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FocusOverlayFrame.d.ts","sourceRoot":"","sources":["../../../src/components/shared/FocusOverlayFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,sBAAsB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAarE"}
+{"version":3,"file":"FocusOverlayFrame.d.ts","sourceRoot":"","sources":["../../../src/components/shared/FocusOverlayFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,sBAAsB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAarE"}