@kud/gh-ink 0.65.0 → 0.66.0

package/dist/index.d.ts

@@ -209,6 +209,13 @@ type PrRowProps = {
     item: GHItem;
     active: boolean;
     login?: string;
+    /**
+     * The selection wash for this frame, resolved by the list — see
+     * `selectionBackground` in the inbox. A prop rather than an import because
+     * the constant lives next to the inbox's `OVERLAY_BG` and importing the inbox
+     * here would cycle back through this module. Absent the row draws no wash.
+     */
+    selectionBg?: string;
     /**
      * Columns available to this row, which is NOT always the frame width: a rail
      * beside the list takes its share, and a budget that does not know the rail is
@@ -256,6 +263,13 @@ type PrRowProps = {
      * number into the title.
      */
     numberCols?: number;
+    /**
+     * Whether the row draws its own `❯` gutter. A host that marks the selected
+     * stop itself, in a column further left, passes `false` — otherwise the
+     * selected row carries two cursors (`❯ ├─ ❯ …`). Hidden, the two columns go
+     * to the title rather than standing empty.
+     */
+    gutter?: boolean;
 };
 /**
  * The trailing block, in reading order: how contested, how big, how recent.
@@ -292,7 +306,7 @@ declare const trailingColumnsOf: (items: readonly GHItem[]) => TrailingColumns;
  * section of short numbers no longer pays for a long one it does not hold.
  */
 declare const numberColumnsOf: (items: readonly GHItem[]) => number;
-type LayoutInput = Pick<PrRowProps, "item" | "login" | "cols" | "prefix" | "uniformLabels" | "announcements" | "columns" | "shed" | "numberCols">;
+type LayoutInput = Pick<PrRowProps, "item" | "login" | "cols" | "prefix" | "uniformLabels" | "announcements" | "columns" | "shed" | "numberCols" | "gutter">;
 /**
  * Which trailing columns the section has to give up, so that every row gives up
  * the same ones. Each row is laid out alone and the drops are unioned: if any
@@ -318,7 +332,7 @@ declare const sectionShedOf: (rows: readonly Pick<LayoutInput, "item" | "prefix"
  * arrival, merge and departure belongs to whoever owns the list, and reaches
  * the row as `icon`, `motion` and `announcements` after the decisions are made.
  */
-declare const PrRow: ({ item, active, login, cols, icon: iconOverride, prefix, uniformLabels, motion, announcements, columns, shed, numberCols, }: PrRowProps) => React.JSX.Element;
+declare const PrRow: ({ item, active, login, cols, selectionBg, icon: iconOverride, prefix, uniformLabels, motion, announcements, columns, shed, numberCols, gutter, }: PrRowProps) => React.JSX.Element;
 
 /**
  * One state per thing, from a closed set the strip knows how to draw. The host

package/dist/index.js

@@ -867,7 +867,8 @@ var layoutOf = ({
   announcements = [],
   columns,
   shed = {},
-  numberCols
+  numberCols,
+  gutter = true
 }) => {
   const numCols = numberCols ?? numberColumnsOf([item]);
   const numStr = `#${item.number}`.padEnd(numCols);
@@ -914,7 +915,7 @@ var layoutOf = ({
     const author = showAuthor && !givingUp.author ? `  by ${item.author}`.length : 0;
     const pills = announcements.reduce((w, a) => w + 2 + a.label.length, 0);
     const cell = labelCell();
-    return 2 + prefix.length + 2 + 2 + numCols + (cell ? 2 + cell.length + 1 : 0) + (givingUp.repo ? 0 : repoLabel.length) + author + block + pills + pillCaps + 4;
+    return (gutter ? 2 : 0) + prefix.length + 2 + 2 + numCols + (cell ? 2 + cell.length + 1 : 0) + (givingUp.repo ? 0 : repoLabel.length) + author + block + pills + pillCaps + 4;
   };
   const MIN_TITLE = 24;
   for (const give of [
@@ -950,6 +951,7 @@ var PrRow = ({
   active,
   login,
   cols,
+  selectionBg,
   icon: iconOverride,
   prefix = "",
   uniformLabels = [],
@@ -957,7 +959,8 @@ var PrRow = ({
   announcements = [],
   columns,
   shed,
-  numberCols
+  numberCols,
+  gutter = true
 }) => {
   const backdropped = useBackdropped();
   const { glyph: healthIcon, color: healthColor2 } = displayFor(item.health);
@@ -988,70 +991,75 @@ var PrRow = ({
     announcements,
     columns,
     shed,
-    numberCols
+    numberCols,
+    gutter
   });
-  return /* @__PURE__ */ jsxs(Box, { width: cols, children: [
-    /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
-    /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
-    /* @__PURE__ */ jsx(Text3, { color, bold: true, children: icon + " " }),
-    /* @__PURE__ */ jsx(Text3, { color: turnColor, bold: turnIcon === "\u2190", children: turnIcon + " " }),
-    /* @__PURE__ */ jsx(Text3, { color: colors.accent, children: numStr }),
-    /* @__PURE__ */ jsx(
-      Text3,
-      {
-        bold: active || motion === "arriving",
-        dimColor: motion === "departing" || motion === "withdrawn",
-        strikethrough: motion === "withdrawn",
-        children: truncate(
-          item.needsYou?.decision ? item.needsYou.decision : item.title,
-          titleMax
-        ) + "  "
-      }
-    ),
-    labelLabel ? /* @__PURE__ */ jsx(Text3, { color: colors.secondary, children: labelLabel + "  " }) : null,
-    repoLabel && !givingUp.repo ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: repoLabel }) : null,
-    showAuthor && !givingUp.author ? /* @__PURE__ */ jsx(Text3, { dimColor: true, italic: true, children: "  by " + item.author }) : null,
-    /* @__PURE__ */ jsx(Box, { flexGrow: 1 }),
-    block.threads > 0 && !givingUp.threads ? /* @__PURE__ */ jsx(
-      Box,
-      {
-        marginLeft: 2,
-        width: block.threads,
-        justifyContent: "flex-end",
-        flexShrink: 0,
-        children: unresolvedLabel ? /* @__PURE__ */ jsx(
-          Text3,
-          {
-            bold: !spokeLast,
-            color: spokeLast ? colors.secondary : colors.accent,
-            children: unresolvedLabel
-          }
-        ) : null
-      }
-    ) : null,
-    block.size > 0 && !givingUp.size ? /* @__PURE__ */ jsx(
-      Box,
-      {
-        marginLeft: 2,
-        width: block.size,
-        justifyContent: "flex-end",
-        flexShrink: 0,
-        children: sizeParts ? /* @__PURE__ */ jsxs(Text3, { children: [
-          /* @__PURE__ */ jsx(Text3, { color: colors.success, children: sizeParts.added }),
-          " ",
-          /* @__PURE__ */ jsx(Text3, { color: colors.error, children: sizeParts.removed })
-        ] }) : null
-      }
-    ) : null,
-    block.age > 0 && !givingUp.age ? /* @__PURE__ */ jsx(Box, { marginLeft: 2, width: block.age, flexShrink: 0, children: agePair ? /* @__PURE__ */ jsxs(Text3, { children: [
-      /* @__PURE__ */ jsx(Text3, { color: colors.secondary, children: agePair.activity }),
-      /* @__PURE__ */ jsx(Text3, { dimColor: true, children: ` (${agePair.lifetime})` })
-    ] }) : ageLabel2 ? /* @__PURE__ */ jsx(Text3, { color: colors.secondary, children: ageLabel2 }) : null }) : null,
-    backdropped ? null : announcements.map((a) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
-      /* @__PURE__ */ jsx(Text3, { children: "  " }),
-      /* @__PURE__ */ jsx(Pill, { color: a.color, children: a.label })
-    ] }, a.label))
-  ] });
+  return (
+    // The wash paints every cell of the fixed-width row — an Ink Box's
+    // background covers its full measure, not just the inked cells.
+    /* @__PURE__ */ jsxs(Box, { width: cols, backgroundColor: selectionBg, children: [
+      gutter ? /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }) : null,
+      /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
+      /* @__PURE__ */ jsx(Text3, { color, bold: true, children: icon + " " }),
+      /* @__PURE__ */ jsx(Text3, { color: turnColor, bold: turnIcon === "\u2190", children: turnIcon + " " }),
+      /* @__PURE__ */ jsx(Text3, { color: colors.accent, children: numStr }),
+      /* @__PURE__ */ jsx(
+        Text3,
+        {
+          bold: active || motion === "arriving",
+          dimColor: motion === "departing" || motion === "withdrawn",
+          strikethrough: motion === "withdrawn",
+          children: truncate(
+            item.needsYou?.decision ? item.needsYou.decision : item.title,
+            titleMax
+          ) + "  "
+        }
+      ),
+      labelLabel ? /* @__PURE__ */ jsx(Text3, { color: colors.secondary, children: labelLabel + "  " }) : null,
+      repoLabel && !givingUp.repo ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: repoLabel }) : null,
+      showAuthor && !givingUp.author ? /* @__PURE__ */ jsx(Text3, { dimColor: true, italic: true, children: "  by " + item.author }) : null,
+      /* @__PURE__ */ jsx(Box, { flexGrow: 1 }),
+      block.threads > 0 && !givingUp.threads ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          marginLeft: 2,
+          width: block.threads,
+          justifyContent: "flex-end",
+          flexShrink: 0,
+          children: unresolvedLabel ? /* @__PURE__ */ jsx(
+            Text3,
+            {
+              bold: !spokeLast,
+              color: spokeLast ? colors.secondary : colors.accent,
+              children: unresolvedLabel
+            }
+          ) : null
+        }
+      ) : null,
+      block.size > 0 && !givingUp.size ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          marginLeft: 2,
+          width: block.size,
+          justifyContent: "flex-end",
+          flexShrink: 0,
+          children: sizeParts ? /* @__PURE__ */ jsxs(Text3, { children: [
+            /* @__PURE__ */ jsx(Text3, { color: colors.success, children: sizeParts.added }),
+            " ",
+            /* @__PURE__ */ jsx(Text3, { color: colors.error, children: sizeParts.removed })
+          ] }) : null
+        }
+      ) : null,
+      block.age > 0 && !givingUp.age ? /* @__PURE__ */ jsx(Box, { marginLeft: 2, width: block.age, flexShrink: 0, children: agePair ? /* @__PURE__ */ jsxs(Text3, { children: [
+        /* @__PURE__ */ jsx(Text3, { color: colors.secondary, children: agePair.activity }),
+        /* @__PURE__ */ jsx(Text3, { dimColor: true, children: ` (${agePair.lifetime})` })
+      ] }) : ageLabel2 ? /* @__PURE__ */ jsx(Text3, { color: colors.secondary, children: ageLabel2 }) : null }) : null,
+      backdropped ? null : announcements.map((a) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+        /* @__PURE__ */ jsx(Text3, { children: "  " }),
+        /* @__PURE__ */ jsx(Pill, { color: a.color, children: a.label })
+      ] }, a.label))
+    ] })
+  );
 };
 var stripGlyph = (state) => {
   switch (state) {
@@ -1850,6 +1858,11 @@ var COLS = (process.stdout.columns ?? 120) - FRAME_CHROME_COLS;
 var MODAL_CHROME_COLS = 2 + 1 * 2;
 var ROW_MAX_COLS = 140;
 var OVERLAY_BG = "#22222e";
+var SELECTION_BG = "#16161f";
+var selectionBackground = (active, backdropped) => active && !backdropped ? SELECTION_BG : void 0;
+var taskKeyStyle = (active) => ({
+  bold: active
+});
 var workCount = (s) => {
   let n = 0;
   for (let i = 0; i < s.items.length; i++) {
@@ -2316,12 +2329,14 @@ var FENCE_COLS = 46;
 var RepoHeaderRow = ({
   repo,
   gap,
-  active
+  active,
+  cols,
+  selectionBg
 }) => {
   const label = `\u2500\u2500 ${repo} `;
   const fill = Math.max(4, FENCE_COLS - label.length);
   const rule = "\u2500".repeat(fill);
-  return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
+  return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, width: cols, backgroundColor: selectionBg, children: [
     /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
     /* @__PURE__ */ jsx(Text3, { dimColor: !active, children: "\u2500\u2500 " }),
     /* @__PURE__ */ jsx(
@@ -2393,27 +2408,37 @@ var ItemRow = ({
   numberCols
 }) => {
   const backdropped = useBackdropped();
+  const selBg = selectionBackground(active, backdropped);
   const transient = leaving ? "out" : refreshMark;
   const transitFrame = Math.floor(sparkFrame / TRANSIT_FRAME_TICKS);
   const rampAt = (len) => rampFrame(len, transitFrame, transitAt);
   const farewellLabel = leaving ? TRANSIT_LABEL.out : "";
   if (item.kind === "repo-header")
-    return /* @__PURE__ */ jsx(RepoHeaderRow, { repo: item.repo, gap: gap ?? false, active });
+    return /* @__PURE__ */ jsx(
+      RepoHeaderRow,
+      {
+        repo: item.repo,
+        gap: gap ?? false,
+        active,
+        cols,
+        selectionBg: selBg
+      }
+    );
   if (item.kind === "subgroup-header")
-    return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
+    return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, width: cols, backgroundColor: selBg, children: [
       /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
       /* @__PURE__ */ jsx(Text3, { color: colors.accent, bold: true, children: "\xBB " }),
       /* @__PURE__ */ jsx(Text3, { bold: true, children: item.label })
     ] });
   if (item.kind === "show-more")
-    return /* @__PURE__ */ jsxs(Box, { children: [
+    return /* @__PURE__ */ jsxs(Box, { width: cols, backgroundColor: selBg, children: [
       /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: active ? "\u21B5 " : "  " }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: `+${item.hidden.length} more` })
     ] });
   if (item.kind === "show-less")
-    return /* @__PURE__ */ jsxs(Box, { children: [
+    return /* @__PURE__ */ jsxs(Box, { width: cols, backgroundColor: selBg, children: [
       /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: active ? "\u21B5 " : "  " }),
@@ -2426,13 +2451,13 @@ var ItemRow = ({
       1,
       cols - item.key.length - note.length - (item.pill ? pillWidth(item.pill) + 1 : 0) - (farewellLabel ? pillWidth(farewellLabel) + 2 : 0) - prefix.length - (markerCols > 0 ? markerCols + 1 : 0) - 12
     );
-    return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
+    return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, width: cols, backgroundColor: selBg, children: [
       /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: parent ? "\u252C " : "  " }),
       /* @__PURE__ */ jsx(Text3, { bold: true, color: transient ? TRANSIT_COLOUR[transient] : void 0, children: transitIcon + " " }),
       markerCols > 0 ? /* @__PURE__ */ jsx(Text3, { color: item.markerColor, children: (item.marker ?? "").padEnd(markerCols) + " " }) : null,
-      /* @__PURE__ */ jsx(Text3, { color: colors.accent, bold: active, children: item.key + "  " }),
+      /* @__PURE__ */ jsx(Text3, { ...taskKeyStyle(active), children: item.key + "  " }),
       /* @__PURE__ */ jsx(
         Text3,
         {
@@ -2480,6 +2505,7 @@ var ItemRow = ({
       active,
       login,
       cols,
+      selectionBg: selBg,
       prefix,
       uniformLabels,
       columns,
@@ -3728,7 +3754,7 @@ var BrowseScreen = ({
                           prefix: treePrefix(section.items, viewStart + i),
                           parent: item.kind === "task" && depthOf(section.items[viewStart + i + 1]) > depthOf(item),
                           sparkFrame,
-                          cols: item.kind === "pr" || item.kind === "issue" ? rowCols : listCols,
+                          cols: item.kind === "pr" || item.kind === "issue" || item.kind === "repo-header" || item.kind === "subgroup-header" || item.kind === "task" || item.kind === "show-more" || item.kind === "show-less" ? rowCols : listCols,
                           markerCols,
                           uniformLabels,
                           columns: trailingColumns,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/gh-ink",
-  "version": "0.65.0",
+  "version": "0.66.0",
   "description": "Ink components for rendering GitHub PR review comments and health — controlled, presentation-only, built on @kud/ink-ui and fed by @kud/gh.",
   "type": "module",
   "main": "dist/index.js",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@kud/gh": "0.19.0",
     "@kud/gh-workflow": "0.14.0",
-    "@kud/ink-ui": "0.31.0",
+    "@kud/ink-ui": "0.33.0",
     "zx": "8.8.5"
   },
   "devDependencies": {