@kud/gh-ink 0.8.0 → 0.8.1

package/dist/index.js

@@ -1065,6 +1065,7 @@ 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 topLevelCount = (s) => s.items.filter(
   (i) => i.kind !== "repo-header" && i.kind !== "subgroup-header" && !i.indent
 ).length;
@@ -1541,12 +1542,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(Text, { bold: true, dimColor: true, children: col.title }),
+        col.rows.map((row) => /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text, { color: row.color, bold: row.bold, children: row.cell.padEnd(cellWidth) }),
+          /* @__PURE__ */ jsx(Text, { 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,6 +1612,49 @@ 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,
     {
@@ -1575,42 +1662,18 @@ var HelpModal = ({
       borderStyle: "round",
       borderColor: "cyan",
       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))
-          ] })
-        ] }),
+        /* @__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(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" })
       ]

package/package.json

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