@kud/gh-ink 0.16.1 → 0.16.3

package/dist/index.js

@@ -1644,7 +1644,8 @@ var ItemRow = ({
   const { glyph: healthIcon, color: healthColor2 } = healthDisplay[item.health];
   const icon = merged ? MERGED_FRAMES[sparkFrame % MERGED_FRAMES.length] : transient === "out" ? TRANSIT_OUT_FRAMES[sparkFrame % TRANSIT_OUT_FRAMES.length] : transient === "in" ? TRANSIT_IN_FRAMES[sparkFrame % TRANSIT_IN_FRAMES.length] : healthIcon;
   const color = merged ? MERGED_COLOUR : transient ? TRANSIT_COLOUR[transient] : healthColor2;
-  const [turnIcon, turnColor] = !login || !item.lastActor ? [" ", "white"] : item.lastActor === login ? ["\u2192", "#888888"] : ["\u2190", "#FF8700"];
+  const spokeLast = !!login && !!item.lastActor && item.lastActor === login;
+  const [turnIcon, turnColor] = !login || !item.lastActor ? [" ", "white"] : spokeLast ? ["\u2192", "#888888"] : ["\u2190", "#FF8700"];
   const numStr = `#${item.number}`.padEnd(7);
   const showAuthor = !!item.author && item.author !== login;
   const unresolvedLabel = item.unresolved > 0 ? `\uF086 ${item.unresolved}` : "";
@@ -1677,7 +1678,7 @@ var ItemRow = ({
       }
     ),
     repoLabel ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: repoLabel }) : null,
-    unresolvedLabel ? /* @__PURE__ */ jsx(Text2, { bold: true, color: "#FF8700", children: "  " + unresolvedLabel }) : null,
+    unresolvedLabel ? /* @__PURE__ */ jsx(Text2, { bold: !spokeLast, color: spokeLast ? "#888888" : "#FF8700", children: "  " + unresolvedLabel }) : null,
     showAuthor ? /* @__PURE__ */ jsx(Text2, { dimColor: true, italic: true, children: "  by " + item.author }) : null,
     ageLabel ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "  " + ageLabel }) : null,
     mergedLabel ? /* @__PURE__ */ jsx(Text2, { bold: true, color: MERGED_COLOUR, children: "  " + mergedLabel }) : null,
@@ -1760,35 +1761,48 @@ var legendLayout = (cols, available) => {
   if (layoutWidth(stacked) <= available) return stacked;
   return [cols];
 };
+var groupLines = (group) => group.flatMap((col, index) => {
+  const cellWidth = cellWidthOf(col);
+  const head = index === 0 ? [] : [{ kind: "gap" }];
+  return [
+    ...head,
+    { kind: "title", text: col.title },
+    ...col.rows.map((row) => ({ kind: "row", row, cellWidth }))
+  ];
+});
+var scrolledPastTitle = (lines, offset) => {
+  let seen = null;
+  for (let i = 0; i <= offset && i < lines.length; i++) {
+    const line = lines[i];
+    if (line.kind === "title") seen = i === offset ? null : line.text;
+  }
+  return seen;
+};
 var LegendGroup = ({
-  group,
+  lines,
+  pinned,
   width,
   marginRight
-}) => /* @__PURE__ */ jsx(Box, { flexDirection: "column", width, marginRight, children: group.map((col, index) => {
-  const cellWidth = cellWidthOf(col);
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      flexDirection: "column",
-      marginTop: index === 0 ? 0 : 1,
-      children: [
-        /* @__PURE__ */ jsx(Text2, { bold: true, dimColor: true, children: col.title }),
-        col.rows.map((row) => /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Text2, { color: row.color, bold: row.bold, children: row.cell.padEnd(cellWidth) }),
-          /* @__PURE__ */ jsx(Text2, { wrap: "truncate-end", children: row.label })
-        ] }, col.title + row.cell + row.label))
-      ]
-    },
-    col.title
-  );
-}) });
+}) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width, marginRight, children: [
+  pinned !== void 0 ? /* @__PURE__ */ jsx(Text2, { bold: true, dimColor: true, children: pinned ?? " " }) : null,
+  lines.map(
+    (line, index) => line.kind === "gap" ? /* @__PURE__ */ jsx(Text2, { children: " " }, index) : line.kind === "title" ? /* @__PURE__ */ jsx(Text2, { bold: true, dimColor: true, children: line.text }, index) : /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Text2, { color: line.row.color, bold: line.row.bold, children: line.row.cell.padEnd(line.cellWidth) }),
+      /* @__PURE__ */ jsx(Text2, { wrap: "truncate-end", children: line.row.label })
+    ] }, index)
+  )
+] });
+var LEGEND_FOOTNOTE = "Each item lands in the FIRST tab that claims it, so counts are residuals rather than totals.";
 var HelpModal = ({
   workToggle,
   extensions,
   hasJira,
-  tabHelp
+  tabHelp,
+  maxRows,
+  scroll = 0,
+  onScrollRange
 }) => {
-  const { columns } = useWindowSize();
+  const { columns, rows } = useWindowSize();
   const available = Math.max(
     20,
     columns - FRAME_CHROME_COLS - MODAL_CHROME_COLS
@@ -1857,6 +1871,28 @@ var HelpModal = ({
   const groups = legendLayout(cols, available);
   const widths = groups.map((g) => Math.min(groupWidth(g), available));
   const contentWidth = Math.min(available, layoutWidth(groups));
+  const lines = groups.map(groupLines);
+  const totalRows = Math.max(0, ...lines.map((l) => l.length));
+  const footnoteRows = tabHelp ? Math.ceil(LEGEND_FOOTNOTE.length / Math.max(1, contentWidth)) : 0;
+  const chromeRows = 2 + 1 + 1 + 1;
+  const fitWithin = (extra) => {
+    const body = Math.max(3, (maxRows ?? rows) - chromeRows - extra);
+    return { body, max: Math.max(0, totalRows - body) };
+  };
+  const loose = fitWithin(footnoteRows);
+  const { body: bodyRows, max: maxScroll } = loose.max > 0 ? fitWithin(1) : loose;
+  const offset = Math.min(scroll, maxScroll);
+  const scrollable = maxScroll > 0;
+  const headAligned = scrollable && lines.every((l) => l[offset]?.kind === "title");
+  const pinnedOf = (l) => {
+    const at = l[offset];
+    return headAligned && at?.kind === "title" ? at.text : scrolledPastTitle(l, offset);
+  };
+  const bodyStart = offset + (headAligned ? 1 : 0);
+  const shown = Math.min(totalRows - offset, bodyRows + (headAligned ? 1 : 0));
+  useEffect(() => {
+    onScrollRange?.(maxScroll, bodyRows);
+  }, [maxScroll, bodyRows]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -1867,18 +1903,22 @@ var HelpModal = ({
       paddingX: 1,
       width: contentWidth + MODAL_CHROME_COLS,
       children: [
-        /* @__PURE__ */ jsx(Text2, { color: "cyan", bold: true, children: "Legend" }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text2, { color: "cyan", bold: true, children: "Legend" }),
+          scrollable ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: `   ${offset + 1}\u2013${offset + shown} of ${totalRows}` }) : null
+        ] }),
         /* @__PURE__ */ jsx(Box, { marginTop: 1, width: contentWidth, children: groups.map((group, index) => /* @__PURE__ */ jsx(
           LegendGroup,
           {
-            group,
+            lines: lines[index].slice(bodyStart, bodyStart + bodyRows),
+            pinned: scrollable ? pinnedOf(lines[index]) : void 0,
             width: widths[index],
             marginRight: index === groups.length - 1 ? 0 : COL_GAP
           },
           group[0]?.title ?? index
         )) }),
-        tabHelp ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "Each item lands in the FIRST tab that claims it, so counts are residuals rather than totals." }) : null,
-        /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "esc \xB7 ? close" })
+        tabHelp && !scrollable ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: LEGEND_FOOTNOTE }) : null,
+        /* @__PURE__ */ jsx(Text2, { dimColor: true, children: scrollable ? "\u2191\u2193 scroll \xB7 esc \xB7 ? close" : "esc \xB7 ? close" })
       ]
     }
   );
@@ -2000,6 +2040,8 @@ var BrowseScreen = ({
   const [repoFilter, setRepoFilter] = useState(/* @__PURE__ */ new Set());
   const [repoPicker, setRepoPicker] = useState(false);
   const [help, setHelp] = useState(false);
+  const [helpScroll, setHelpScroll] = useState(0);
+  const [helpRange, setHelpRange] = useState({ max: 0, page: 1 });
   const [explain, setExplain] = useState(false);
   const filterActive = search != null || repoFilter.size > 0;
   const reserveCiRow = ciStatusState != null;
@@ -2118,10 +2160,18 @@ var BrowseScreen = ({
     if (hidden) return;
     if (key.ctrl || key.meta) return;
     if (help) {
+      if (helpRange.max > 0) {
+        const step = (n) => setHelpScroll((s) => Math.min(helpRange.max, Math.max(0, s + n)));
+        if (key.upArrow) return step(-1);
+        if (key.downArrow) return step(1);
+        if (key.pageUp) return step(-helpRange.page);
+        if (key.pageDown) return step(helpRange.page);
+      }
       setHelp(false);
       return;
     }
     if (input === "?") {
+      setHelpScroll(0);
       setHelp(true);
       return;
     }
@@ -2384,7 +2434,10 @@ var BrowseScreen = ({
       workToggle,
       extensions,
       hasJira: !!jiraBase,
-      tabHelp
+      tabHelp,
+      maxRows: listHeight,
+      scroll: helpScroll,
+      onScrollRange: (max, page) => setHelpRange({ max, page })
     }
   ) : explain && activeItem && (activeItem.kind === "pr" || activeItem.kind === "issue") ? /* @__PURE__ */ jsx(ExplainModal, { item: activeItem, login }) : repoPicker ? /* @__PURE__ */ jsx(
     RepoPicker,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/gh-ink",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "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",