@kud/gh-ink 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import React2, { useState, useRef, useEffect } from 'react';
+import React2, { createContext, useState, useRef, useEffect, useContext } from 'react';
 import { useWindowSize, useInput, Text, Box } from 'ink';
 import { colors, ScrollView, TextInput, LoadingScreen, Switch, useListCursor, Tabs, FooterHints } from '@kud/ink-ui';
 import { isPassCheck, isFailCheck, resolveThread, unresolveThread, replyToThread, rerunFailedRun, mergePr, reRequestReviewer } from '@kud/gh';
@@ -1065,6 +1065,28 @@ var FRAME_COLOR = "gray";
 var FRAME_PAD_X = 1;
 var FRAME_CHROME_COLS = 2 + FRAME_PAD_X * 2;
 var COLS = (process.stdout.columns ?? 120) - FRAME_CHROME_COLS;
+var MODAL_CHROME_COLS = 2 + 1 * 2;
+var OVERLAY_BG = "#22222e";
+var DimContext = createContext(false);
+var Text2 = ({ children, ...props }) => {
+  const dimmed = useContext(DimContext);
+  return dimmed ? /* @__PURE__ */ jsx(Text, { ...props, bold: false, dimColor: true, children }) : /* @__PURE__ */ jsx(Text, { ...props, children });
+};
+var Backdrop = ({
+  dimmed,
+  absolute,
+  height,
+  children
+}) => /* @__PURE__ */ jsx(DimContext.Provider, { value: dimmed, children: absolute ? /* @__PURE__ */ jsx(
+  Box,
+  {
+    position: "absolute",
+    flexDirection: "column",
+    width: "100%",
+    height,
+    children
+  }
+) : children });
 var topLevelCount = (s) => s.items.filter(
   (i) => i.kind !== "repo-header" && i.kind !== "subgroup-header" && !i.indent
 ).length;
@@ -1356,16 +1378,16 @@ var InboxHeader = ({
     COLS - brand.length - countSeg.length - userSeg.length - workLabel.length - statusSeg.length
   );
   return /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-    /* @__PURE__ */ jsx(Text, { color: "#FF8700", bold: true, children: brand }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: countSeg }),
-    userSeg ? /* @__PURE__ */ jsx(Text, { children: userSeg }) : null,
+    /* @__PURE__ */ jsx(Text2, { color: "#FF8700", bold: true, children: brand }),
+    /* @__PURE__ */ jsx(Text2, { dimColor: true, children: countSeg }),
+    userSeg ? /* @__PURE__ */ jsx(Text2, { children: userSeg }) : null,
     work !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: " w " }),
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: " w " }),
       /* @__PURE__ */ jsx(Switch, { left: "work", right: "home", value: work ? "left" : "right" }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " })
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "  " })
     ] }) : null,
     statusText ? /* @__PURE__ */ jsx(
-      Text,
+      Text2,
       {
         color: statusColor,
         dimColor: !statusColor,
@@ -1373,7 +1395,7 @@ var InboxHeader = ({
         children: statusSeg
       }
     ) : null,
-    /* @__PURE__ */ jsx(Text, { color: "cyan", dimColor: true, children: "\u254C".repeat(fill) })
+    /* @__PURE__ */ jsx(Text2, { color: "cyan", dimColor: true, children: "\u254C".repeat(fill) })
   ] });
 };
 var toCiStatusState = (status) => status ? { kind: "ready", status } : { kind: "error" };
@@ -1396,30 +1418,30 @@ var CiStatusLine = ({
   const name = job ?? "ci";
   if (state.kind === "loading")
     return /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \xB7 " }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: `${name}  loading\u2026` })
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "  \xB7 " }),
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: `${name}  loading\u2026` })
     ] });
   if (state.kind === "error")
     return /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-      /* @__PURE__ */ jsx(Text, { color: "red", bold: true, children: "  \u2717 " }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: `${name}  no build / not configured` })
+      /* @__PURE__ */ jsx(Text2, { color: "red", bold: true, children: "  \u2717 " }),
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: `${name}  no build / not configured` })
     ] });
   const { status } = state;
   const [, color] = jenkinsResultDisplay(status.result, status.building);
   const label = status.building ? "BUILDING" : status.result;
   return /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " }),
-    /* @__PURE__ */ jsx(Text, { color, bold: true, children: "\u25CF " }),
-    /* @__PURE__ */ jsx(Text, { bold: true, children: status.job }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " + label }),
-    /* @__PURE__ */ jsx(Text, { color: "#FF8700", children: "  #" + status.buildNumber }),
-    status.age ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " + status.age }) : null
+    /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "  " }),
+    /* @__PURE__ */ jsx(Text2, { color, bold: true, children: "\u25CF " }),
+    /* @__PURE__ */ jsx(Text2, { bold: true, children: status.job }),
+    /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "  " + label }),
+    /* @__PURE__ */ jsx(Text2, { color: "#FF8700", children: "  #" + status.buildNumber }),
+    status.age ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "  " + status.age }) : null
   ] });
 };
 var RepoHeaderRow = ({ repo, gap }) => {
   const label = `\u2500\u2500 ${repo} `;
   const fill = Math.max(4, 46 - label.length);
-  return /* @__PURE__ */ jsx(Box, { marginTop: gap ? 1 : 0, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " + label + "\u2500".repeat(fill) }) });
+  return /* @__PURE__ */ jsx(Box, { marginTop: gap ? 1 : 0, children: /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "  " + label + "\u2500".repeat(fill) }) });
 };
 var ItemRow = ({
   item,
@@ -1431,29 +1453,29 @@ var ItemRow = ({
     return /* @__PURE__ */ jsx(RepoHeaderRow, { repo: item.repo, gap: gap ?? false });
   if (item.kind === "subgroup-header")
     return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
-      /* @__PURE__ */ jsx(Text, { color: "#FF8700", bold: true, children: "  \xBB " }),
-      /* @__PURE__ */ jsx(Text, { bold: true, children: item.label })
+      /* @__PURE__ */ jsx(Text2, { color: "#FF8700", bold: true, children: "  \xBB " }),
+      /* @__PURE__ */ jsx(Text2, { bold: true, children: item.label })
     ] });
   if (item.kind === "show-more")
     return /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", children: active ? "\u276F " : "  " }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2514\u2500 " }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: active ? "\u21B5 " : "  " }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: `+${item.hidden.length} more` })
+      /* @__PURE__ */ jsx(Text2, { color: "cyan", children: active ? "\u276F " : "  " }),
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "\u2514\u2500 " }),
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: active ? "\u21B5 " : "  " }),
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: `+${item.hidden.length} more` })
     ] });
   if (item.kind === "show-less")
     return /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", children: active ? "\u276F " : "  " }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2514\u2500 " }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: active ? "\u21B5 " : "  " }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "show less" })
+      /* @__PURE__ */ jsx(Text2, { color: "cyan", children: active ? "\u276F " : "  " }),
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "\u2514\u2500 " }),
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: active ? "\u21B5 " : "  " }),
+      /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "show less" })
     ] });
   if (item.kind === "jira") {
     const titleMax2 = Math.max(20, COLS - item.key.length - 10);
     return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", children: active ? "\u276F " : "  " }),
-      /* @__PURE__ */ jsx(Text, { color: "#FF8700", bold: active, children: item.key + "  " }),
-      /* @__PURE__ */ jsx(Text, { bold: active, children: truncate(item.summary, titleMax2) })
+      /* @__PURE__ */ jsx(Text2, { color: "cyan", children: active ? "\u276F " : "  " }),
+      /* @__PURE__ */ jsx(Text2, { color: "#FF8700", bold: active, children: item.key + "  " }),
+      /* @__PURE__ */ jsx(Text2, { bold: active, children: truncate(item.summary, titleMax2) })
     ] });
   }
   const { glyph: icon, color } = healthDisplay[item.health];
@@ -1470,16 +1492,16 @@ var ItemRow = ({
   const fixedWidth = 2 + (item.indent ? 3 : 0) + 2 + 2 + 7 + repoLabel.length + suffix.length + 6;
   const titleMax = Math.max(20, COLS - fixedWidth);
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Text, { color: "cyan", children: active ? "\u276F " : "  " }),
-    item.indent ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2514\u2500 " }) : null,
-    /* @__PURE__ */ jsx(Text, { color, bold: true, children: icon + " " }),
-    /* @__PURE__ */ jsx(Text, { color: turnColor, bold: turnIcon === "\u2190", children: turnIcon + " " }),
-    /* @__PURE__ */ jsx(Text, { color: "#FF8700", children: numStr }),
-    /* @__PURE__ */ jsx(Text, { bold: active, children: truncate(item.title, titleMax) + "  " }),
-    repoLabel ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: repoLabel }) : null,
-    unresolvedLabel ? /* @__PURE__ */ jsx(Text, { bold: true, color: "#FF8700", children: "  " + unresolvedLabel }) : null,
-    showAuthor ? /* @__PURE__ */ jsx(Text, { dimColor: true, italic: true, children: "  by " + item.author }) : null,
-    item.age ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " + item.age }) : null
+    /* @__PURE__ */ jsx(Text2, { color: "cyan", children: active ? "\u276F " : "  " }),
+    item.indent ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "\u2514\u2500 " }) : null,
+    /* @__PURE__ */ jsx(Text2, { color, bold: true, children: icon + " " }),
+    /* @__PURE__ */ jsx(Text2, { color: turnColor, bold: turnIcon === "\u2190", children: turnIcon + " " }),
+    /* @__PURE__ */ jsx(Text2, { color: "#FF8700", children: numStr }),
+    /* @__PURE__ */ jsx(Text2, { bold: active, children: truncate(item.title, titleMax) + "  " }),
+    repoLabel ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: repoLabel }) : null,
+    unresolvedLabel ? /* @__PURE__ */ jsx(Text2, { bold: true, color: "#FF8700", children: "  " + unresolvedLabel }) : null,
+    showAuthor ? /* @__PURE__ */ jsx(Text2, { dimColor: true, italic: true, children: "  by " + item.author }) : null,
+    item.age ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "  " + item.age }) : null
   ] });
 };
 var useActionMenu = () => {
@@ -1521,18 +1543,19 @@ var ActionMenu = ({
       flexDirection: "column",
       borderStyle: "round",
       borderColor: "cyan",
+      backgroundColor: OVERLAY_BG,
       paddingX: 1,
       marginTop: 1,
       children: [
-        /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: title }),
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(32) }),
+        /* @__PURE__ */ jsx(Text2, { color: "cyan", bold: true, children: title }),
+        /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "\u2500".repeat(32) }),
         actions.map((a, i) => /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Text, { color: "cyan", children: i === cursor ? "\u276F " : "  " }),
-          /* @__PURE__ */ jsx(Text, { bold: i === cursor, children: a.label }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  " + a.hint })
+          /* @__PURE__ */ jsx(Text2, { color: "cyan", children: i === cursor ? "\u276F " : "  " }),
+          /* @__PURE__ */ jsx(Text2, { bold: i === cursor, children: a.label }),
+          /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "  " + a.hint })
         ] }, a.label)),
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(32) }),
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u21B5 confirm esc cancel" })
+        /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "\u2500".repeat(32) }),
+        /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "\u2191\u2193 navigate \u21B5 confirm esc cancel" })
       ]
     }
   );
@@ -1541,12 +1564,55 @@ var TURN_LEGEND = [
   ["\u2190", "#FF8700", "They spoke last \xB7 your turn"],
   ["\u2192", "#888888", "You spoke last \xB7 waiting on them"]
 ];
+var CELL_GUTTER = 2;
+var COL_GAP = 3;
+var cellWidthOf = (col) => Math.max(0, ...col.rows.map((r) => r.cell.length)) + CELL_GUTTER;
+var widthOf = (col) => Math.max(
+  col.title.length,
+  ...col.rows.map((r) => cellWidthOf(col) + r.label.length)
+);
+var groupWidth = (group) => Math.max(0, ...group.map(widthOf));
+var layoutWidth = (groups) => groups.reduce((total, g) => total + groupWidth(g), 0) + COL_GAP * Math.max(0, groups.length - 1);
+var legendLayout = (cols, available) => {
+  const across = cols.map((c) => [c]);
+  if (layoutWidth(across) <= available) return across;
+  const stacked = [cols.slice(0, -1), cols.slice(-1)];
+  if (layoutWidth(stacked) <= available) return stacked;
+  return [cols];
+};
+var LegendGroup = ({
+  group,
+  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
+  );
+}) });
 var HelpModal = ({
   workToggle,
   extensions,
   hasJira,
   tabHelp
 }) => {
+  const { columns } = useWindowSize();
+  const available = Math.max(
+    20,
+    columns - FRAME_CHROME_COLS - MODAL_CHROME_COLS
+  );
   const keys = [
     ["\u2191 \u2193", "navigate"],
     ["\u2190 \u2192 \xB7 tab", "switch tab"],
@@ -1568,51 +1634,71 @@ var HelpModal = ({
     ["?", "this help"],
     ["q", "quit"]
   ];
+  const statusColumn = {
+    title: "Status",
+    rows: [
+      ...healthLegend.map(([health, label]) => ({
+        cell: healthDisplay[health].glyph,
+        color: healthDisplay[health].color,
+        bold: true,
+        label
+      })),
+      ...TURN_LEGEND.map(([cell, color, label]) => ({
+        cell,
+        color,
+        bold: true,
+        label
+      })),
+      {
+        cell: "\uF086",
+        color: "#FF8700",
+        bold: true,
+        label: "Open-thread count"
+      }
+    ]
+  };
+  const cols = [
+    statusColumn,
+    ...tabHelp ? [
+      {
+        title: "Tabs",
+        rows: tabHelp.map(([tab, meaning]) => ({
+          cell: tab,
+          color: "#FF8700",
+          label: meaning
+        }))
+      }
+    ] : [],
+    {
+      title: "Keys",
+      rows: keys.map(([key, label]) => ({ cell: key, color: "cyan", label }))
+    }
+  ];
+  const groups = legendLayout(cols, available);
+  const widths = groups.map((g) => Math.min(groupWidth(g), available));
+  const contentWidth = Math.min(available, layoutWidth(groups));
   return /* @__PURE__ */ jsxs(
     Box,
     {
       flexDirection: "column",
       borderStyle: "round",
       borderColor: "cyan",
+      backgroundColor: OVERLAY_BG,
       paddingX: 1,
+      width: contentWidth + MODAL_CHROME_COLS,
       children: [
-        /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Legend" }),
-        /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
-          /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginRight: 3, minWidth: 26, children: [
-            /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: "Status" }),
-            healthLegend.map(([health, label]) => {
-              const { glyph: icon, color } = healthDisplay[health];
-              return /* @__PURE__ */ jsxs(Box, { children: [
-                /* @__PURE__ */ jsx(Text, { color, bold: true, children: icon + " " }),
-                /* @__PURE__ */ jsx(Text, { children: " " + label })
-              ] }, health);
-            }),
-            TURN_LEGEND.map(([icon, color, label]) => /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Text, { color, bold: true, children: icon + " " }),
-              /* @__PURE__ */ jsx(Text, { children: " " + label })
-            ] }, icon)),
-            /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Text, { bold: true, color: "#FF8700", children: "\uF086 " }),
-              /* @__PURE__ */ jsx(Text, { children: " Open-thread count" })
-            ] })
-          ] }),
-          tabHelp ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginRight: 3, minWidth: 30, children: [
-            /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: "Tabs" }),
-            tabHelp.map(([tab, meaning]) => /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Text, { color: "#FF8700", children: tab.padEnd(10) }),
-              /* @__PURE__ */ jsx(Text, { children: meaning })
-            ] }, tab))
-          ] }) : null,
-          /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-            /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: "Keys" }),
-            keys.map(([k, label]) => /* @__PURE__ */ jsxs(Box, { children: [
-              /* @__PURE__ */ jsx(Text, { color: "cyan", children: k.padEnd(11) }),
-              /* @__PURE__ */ jsx(Text, { children: label })
-            ] }, k))
-          ] })
-        ] }),
-        tabHelp ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Each item lands in the FIRST tab that claims it, so counts are residuals rather than totals." }) : null,
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "esc \xB7 ? close" })
+        /* @__PURE__ */ jsx(Text2, { color: "cyan", bold: true, children: "Legend" }),
+        /* @__PURE__ */ jsx(Box, { marginTop: 1, width: contentWidth, children: groups.map((group, index) => /* @__PURE__ */ jsx(
+          LegendGroup,
+          {
+            group,
+            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" })
       ]
     }
   );
@@ -1623,16 +1709,17 @@ var ExplainModal = ({ item, login }) => /* @__PURE__ */ jsxs(
     flexDirection: "column",
     borderStyle: "round",
     borderColor: "cyan",
+    backgroundColor: OVERLAY_BG,
     paddingX: 1,
     width: Math.min(COLS, 78),
     children: [
-      /* @__PURE__ */ jsx(Text, { color: "#FF8700", bold: true, children: `#${item.number} \xB7 ${item.repo}` }),
-      /* @__PURE__ */ jsx(Text, { children: item.title }),
+      /* @__PURE__ */ jsx(Text2, { color: "#FF8700", bold: true, children: `#${item.number} \xB7 ${item.repo}` }),
+      /* @__PURE__ */ jsx(Text2, { children: item.title }),
       explainItem(item, login).map((section) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx(Text, { bold: true, dimColor: true, children: section.heading }),
-        section.lines.map((line, i) => /* @__PURE__ */ jsx(Text, { children: "  " + line }, i))
+        /* @__PURE__ */ jsx(Text2, { bold: true, dimColor: true, children: section.heading }),
+        section.lines.map((line, i) => /* @__PURE__ */ jsx(Text2, { children: "  " + line }, i))
       ] }, section.heading)),
-      /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "esc \xB7 e close" }) })
+      /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "esc \xB7 e close" }) })
     ]
   }
 );
@@ -1654,24 +1741,25 @@ var RepoPicker = ({
       flexDirection: "column",
       borderStyle: "round",
       borderColor: "cyan",
+      backgroundColor: OVERLAY_BG,
       paddingX: 1,
       minWidth: 42,
       children: [
-        /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: `Filter by repo  (${selected.size} on)` }),
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(36) }),
+        /* @__PURE__ */ jsx(Text2, { color: "cyan", bold: true, children: `Filter by repo  (${selected.size} on)` }),
+        /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "\u2500".repeat(36) }),
         visible.map((repo, i) => {
           const idx = start + i;
           const on = selected.has(repo);
           const active = idx === cursor;
           return /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsx(Text, { color: "cyan", children: active ? "\u276F " : "  " }),
-            /* @__PURE__ */ jsx(Text, { color: on ? "green" : void 0, children: on ? "\u25C9 " : "\u25CB " }),
-            /* @__PURE__ */ jsx(Text, { bold: active, children: repo })
+            /* @__PURE__ */ jsx(Text2, { color: "cyan", children: active ? "\u276F " : "  " }),
+            /* @__PURE__ */ jsx(Text2, { color: on ? "green" : void 0, children: on ? "\u25C9 " : "\u25CB " }),
+            /* @__PURE__ */ jsx(Text2, { bold: active, children: repo })
           ] }, repo);
         }),
-        repos.length > budget ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  \u2026 ${repos.length} repos total` }) : null,
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(36) }),
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "space toggle \xB7 a clear all \xB7 \u21B5/esc done" })
+        repos.length > budget ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: `  \u2026 ${repos.length} repos total` }) : null,
+        /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "\u2500".repeat(36) }),
+        /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "space toggle \xB7 a clear all \xB7 \u21B5/esc done" })
       ]
     }
   );
@@ -2083,6 +2171,22 @@ var BrowseScreen = ({
     (i) => i.kind !== "repo-header" && i.kind !== "subgroup-header"
   ).length;
   if (hidden) return null;
+  const overlay = help ? /* @__PURE__ */ jsx(
+    HelpModal,
+    {
+      workToggle,
+      extensions,
+      hasJira: !!jiraBase,
+      tabHelp
+    }
+  ) : explain && activeItem && (activeItem.kind === "pr" || activeItem.kind === "issue") ? /* @__PURE__ */ jsx(ExplainModal, { item: activeItem, login }) : repoPicker ? /* @__PURE__ */ jsx(
+    RepoPicker,
+    {
+      repos: allRepos,
+      selected: repoFilter,
+      cursor: Math.min(repoCursor, Math.max(0, allRepos.length - 1))
+    }
+  ) : menu.actions && activeItem && activeItem.kind !== "repo-header" ? /* @__PURE__ */ jsx(ActionMenu, { item: activeItem, actions: menu.actions, cursor: menu.cursor }) : null;
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -2118,106 +2222,60 @@ var BrowseScreen = ({
           }
         ) }),
         search != null ? /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-          /* @__PURE__ */ jsx(Text, { color: "cyan", children: "  / " }),
-          /* @__PURE__ */ jsx(Text, { children: search }),
-          searchInput ? /* @__PURE__ */ jsx(Text, { color: "cyan", children: "\u258F" }) : null,
+          /* @__PURE__ */ jsx(Text2, { color: "cyan", children: "  / " }),
+          /* @__PURE__ */ jsx(Text2, { children: search }),
+          searchInput ? /* @__PURE__ */ jsx(Text2, { color: "cyan", children: "\u258F" }) : null,
           /* @__PURE__ */ jsx(
-            Text,
+            Text2,
             {
               dimColor: true,
               children: `   ${matchCount} match${matchCount !== 1 ? "es" : ""}${searchInput ? "  \u21B5 accept \xB7 esc clear" : "  esc clear"}`
             }
           )
         ] }) : repoFilter.size > 0 ? /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-          /* @__PURE__ */ jsx(Text, { color: "#FF8700", children: "  \u25C9 " }),
-          /* @__PURE__ */ jsx(Text, { children: `${repoFilter.size} repo${repoFilter.size !== 1 ? "s" : ""}` }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "   f edit \xB7 esc clear" })
+          /* @__PURE__ */ jsx(Text2, { color: "#FF8700", children: "  \u25C9 " }),
+          /* @__PURE__ */ jsx(Text2, { children: `${repoFilter.size} repo${repoFilter.size !== 1 ? "s" : ""}` }),
+          /* @__PURE__ */ jsx(Text2, { dimColor: true, children: "   f edit \xB7 esc clear" })
         ] }) : null,
-        help ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            minHeight: listHeight,
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            children: /* @__PURE__ */ jsx(
-              HelpModal,
-              {
-                workToggle,
-                extensions,
-                hasJira: !!jiraBase,
-                tabHelp
-              }
-            )
-          }
-        ) : explain && activeItem && (activeItem.kind === "pr" || activeItem.kind === "issue") ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            minHeight: listHeight,
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            children: /* @__PURE__ */ jsx(ExplainModal, { item: activeItem, login })
-          }
-        ) : repoPicker ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            minHeight: listHeight,
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            children: /* @__PURE__ */ jsx(
-              RepoPicker,
-              {
-                repos: allRepos,
-                selected: repoFilter,
-                cursor: Math.min(repoCursor, Math.max(0, allRepos.length - 1))
-              }
-            )
-          }
-        ) : menu.actions && activeItem && activeItem.kind !== "repo-header" ? /* @__PURE__ */ jsx(
-          Box,
-          {
-            minHeight: listHeight,
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            children: /* @__PURE__ */ jsx(
-              ActionMenu,
+        /* @__PURE__ */ jsxs(Box, { flexDirection: "column", minHeight: listHeight, children: [
+          /* @__PURE__ */ jsxs(Backdrop, { dimmed: !!overlay, absolute: !!overlay, height: listHeight, children: [
+            /* @__PURE__ */ jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleItems.map((item, i) => /* @__PURE__ */ jsx(
+              ItemRow,
               {
-                item: activeItem,
-                actions: menu.actions,
-                cursor: menu.cursor
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsxs(Box, { flexDirection: "column", minHeight: listHeight, children: [
-          /* @__PURE__ */ jsx(Box, { flexDirection: "column", flexGrow: 1, children: visibleItems.map((item, i) => /* @__PURE__ */ jsx(
-            ItemRow,
+                item,
+                active: viewStart + i === cursor,
+                login,
+                gap: viewStart + i > 0 && (item.kind === "repo-header" || item.kind === "subgroup-header" || // A header is always followed by a blank line before its
+                // first child — in Other PRs that's "free" because the
+                // child is itself a repo-header (gap above). A jira row
+                // has no such stand-in, so it needs this explicitly. Never
+                // applies between two tickets/PRs — only right after a
+                // header.
+                item.kind === "jira" && ["repo-header", "subgroup-header"].includes(
+                  section.items[viewStart + i - 1]?.kind
+                ))
+              },
+              `${viewStart + i}:${item.kind === "jira" ? item.instanceKey ?? item.key : item.kind === "repo-header" ? `header:${item.repo}` : item.kind === "subgroup-header" ? `subgroup:${item.label}` : item.kind === "show-more" ? `show-more:${item.hidden[0]?.repo ?? i}` : item.kind === "show-less" ? `show-less:${item.toHide[0]?.repo ?? i}` : `${item.repo}/${item.number}`}`
+            )) }),
+            hasMore && /* @__PURE__ */ jsxs(Text2, { dimColor: true, children: [
+              "  ",
+              "\u2193 ",
+              section.items.length - viewStart - visibleCount,
+              " more"
+            ] })
+          ] }),
+          overlay ? /* @__PURE__ */ jsx(
+            Box,
             {
-              item,
-              active: viewStart + i === cursor,
-              login,
-              gap: viewStart + i > 0 && (item.kind === "repo-header" || item.kind === "subgroup-header" || // A header is always followed by a blank line before its
-              // first child — in Other PRs that's "free" because the
-              // child is itself a repo-header (gap above). A jira row
-              // has no such stand-in, so it needs this explicitly. Never
-              // applies between two tickets/PRs — only right after a
-              // header.
-              item.kind === "jira" && ["repo-header", "subgroup-header"].includes(
-                section.items[viewStart + i - 1]?.kind
-              ))
-            },
-            `${viewStart + i}:${item.kind === "jira" ? item.instanceKey ?? item.key : item.kind === "repo-header" ? `header:${item.repo}` : item.kind === "subgroup-header" ? `subgroup:${item.label}` : item.kind === "show-more" ? `show-more:${item.hidden[0]?.repo ?? i}` : item.kind === "show-less" ? `show-less:${item.toHide[0]?.repo ?? i}` : `${item.repo}/${item.number}`}`
-          )) }),
-          hasMore && /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-            "  ",
-            "\u2193 ",
-            section.items.length - viewStart - visibleCount,
-            " more"
-          ] })
+              flexGrow: 1,
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              children: overlay
+            }
+          ) : null
         ] }),
-        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: flash ? /* @__PURE__ */ jsx(Text, { color: "green", children: flash }) : /* @__PURE__ */ jsx(FooterHints, { hints }) })
+        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: flash ? /* @__PURE__ */ jsx(Text2, { color: "green", children: flash }) : /* @__PURE__ */ jsx(FooterHints, { hints }) })
       ]
     }
   );

package/package.json

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