@kud/gh-ink 0.38.0 → 0.39.0

package/dist/index.d.ts

@@ -46,6 +46,12 @@ type SidebarRow = {
     live?: number;
     /** Something under it is waiting on you. */
     wantsYou?: boolean;
+    /**
+     * Where ↵ takes you. Absent means the row is a label and nothing more — the
+     * cursor still lands on it, and pressing ↵ does nothing rather than flashing
+     * an error about a host decision the reader cannot change.
+     */
+    url?: string;
 };
 type Sidebar = {
     /** Heading for the rail. The host's vocabulary, never ours. */
@@ -53,27 +59,43 @@ type Sidebar = {
     rows: SidebarRow[];
 };
 /**
- * The rail's width, INCLUDING its one-column gutter. Exported because the list
+ * The rail's width, INCLUDING its rule and padding. Exported because the list
  * beside it has to shrink by exactly this much: every row in that list truncates
  * against a budget, and a budget that does not know the rail is there overflows
  * by the rail's whole width — which in a frame sized to fill the terminal
  * scrolls the panel rather than clipping a row.
  */
-declare const SIDEBAR_COLS = 30;
+declare const SIDEBAR_COLS = 40;
+/**
+ * How many rows fit in `height` — one fewer than would physically fit whenever
+ * that means anything is left over, to buy the line that says so.
+ *
+ * Computed rather than left to the layout, because the layout's answer is to CUT,
+ * silently. A roadmap quietly missing its last three initiatives looks exactly
+ * like a roadmap that has none, and the whole reason the rail exists is that an
+ * initiative with nothing moving on it was invisible.
+ */
+declare const railCapacity: (height: number, rows: number) => number;
 /**
  * A right-hand rail of initiatives, standing beside the list.
  *
  * Two lines per row rather than one, because both halves are load-bearing and
  * neither survives the other being cut: a key with no words cannot be read at a
- * glance, and words with no key cannot be opened. Thirty columns is not enough
- * for both on one line, so they stack.
+ * glance, and words with no key cannot be opened. Forty columns is not enough for
+ * both on one line, so they stack.
  *
- * Presentational, like every other row renderer here — it takes no keyboard and
- * holds no cursor. Whether the rail is shown at all is the host's state.
+ * Presentational, like every other row renderer here: it DRAWS a cursor but does
+ * not own one, and it never calls `useInput`. Where the cursor is, and whether
+ * the arrows are pointed at this rail at all, are the host's state — which is
+ * what lets a screen with two focus regions have exactly one of them lit.
  */
-declare const SidePanel: ({ sidebar, height, }: {
+declare const SidePanel: ({ sidebar, height, focused, cursor, }: {
     sidebar: Sidebar;
     height?: number;
+    /** The arrows are pointed here, so this rail draws the cursor. */
+    focused?: boolean;
+    /** Which row the cursor is on. Only drawn while `focused`. */
+    cursor?: number;
 }) => React.JSX.Element;
 
 declare const renderMarkdown: (raw: string, width: number, fileLink?: (path: string, line?: number) => string) => StyledLine[];
@@ -676,4 +698,4 @@ declare const matchesFilter: (repo: string, filter: RepoFilter) => boolean;
  */
 declare const parsePatterns: (value: string) => string[];
 
-export { type Action, ActionMenu, type AnyItem, App, COLS, type CiStatus, CiStatusLine, type CiStatusState, CommentsPanel, type CommentsPanelProps, type DetailContext, type ExplainSection, type ExtensionTarget, type GHDetail, type GHItem, HealthPanel, type HealthPanelProps, type InboxBudget, type InboxConfig, type InboxExtension, type JiraTransition, type OriginSplit, PIN_MARK, type RepoFilter, type RepoHeader, type RepoProfile, SIDEBAR_COLS, type Section, type ShowLess, type ShowMore, SidePanel, type Sidebar, type SidebarRow, type Standing, type SubgroupHeader, type TaskRow, budgetNotice, buildActions, buildCheckoutCmd, checkoutDirs, clipboard, configureInbox, drillCmd, explainGhAction, explainItem, filterByOrigin, filterByRepos, filterBySearch, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, inboxConfig, insertRepoHeaders, itermRun, jumpToRepo, jumpToRepoPane, layoutGHItems, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, profileOf, readCache, relativeTime, renderMarkdown, repoPriority, reposInSections, resetInboxConfig, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, sortByRecency, sortItems, toCiStatusState, topLevelCount, truncate, useActionMenu, whoseMove, windowCount, withHeaders, withoutItem, writeCache };
+export { type Action, ActionMenu, type AnyItem, App, COLS, type CiStatus, CiStatusLine, type CiStatusState, CommentsPanel, type CommentsPanelProps, type DetailContext, type ExplainSection, type ExtensionTarget, type GHDetail, type GHItem, HealthPanel, type HealthPanelProps, type InboxBudget, type InboxConfig, type InboxExtension, type JiraTransition, type OriginSplit, PIN_MARK, type RepoFilter, type RepoHeader, type RepoProfile, SIDEBAR_COLS, type Section, type ShowLess, type ShowMore, SidePanel, type Sidebar, type SidebarRow, type Standing, type SubgroupHeader, type TaskRow, budgetNotice, buildActions, buildCheckoutCmd, checkoutDirs, clipboard, configureInbox, drillCmd, explainGhAction, explainItem, filterByOrigin, filterByRepos, filterBySearch, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, inboxConfig, insertRepoHeaders, itermRun, jumpToRepo, jumpToRepoPane, layoutGHItems, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, profileOf, railCapacity, readCache, relativeTime, renderMarkdown, repoPriority, reposInSections, resetInboxConfig, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, sortByRecency, sortItems, toCiStatusState, topLevelCount, truncate, useActionMenu, whoseMove, windowCount, withHeaders, withoutItem, writeCache };

package/dist/index.js

@@ -584,36 +584,73 @@ var HealthPanel = ({
   ] });
 };
 var ACCENT = "#FF8700";
-var SIDEBAR_COLS = 30;
-var GUTTER = 1;
-var CONTENT = SIDEBAR_COLS - GUTTER;
+var SIDEBAR_COLS = 40;
+var RULE = 1;
+var PAD = 2;
+var CONTENT = SIDEBAR_COLS - RULE - PAD;
+var LABEL_INDENT = 2;
+var RULE_COLOR = "gray";
 var truncate = (text, max) => [...text].length <= max ? text : [...text].slice(0, Math.max(0, max - 1)).join("") + "\u2026";
+var ROW_LINES = 3;
+var HEADING_LINES = 2;
+var railCapacity = (height, rows) => {
+  const fits = Math.max(0, Math.floor((height - HEADING_LINES) / ROW_LINES));
+  return fits >= rows ? rows : Math.max(0, fits - 1);
+};
 var SidePanel = ({
   sidebar,
-  height
-}) => /* @__PURE__ */ jsxs(
-  Box,
-  {
-    flexDirection: "column",
-    width: SIDEBAR_COLS,
-    flexShrink: 0,
-    height,
-    children: [
-      /* @__PURE__ */ jsxs(Box, { marginBottom: 1, paddingLeft: GUTTER, children: [
-        /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: "\xBB " }),
-        /* @__PURE__ */ jsx(Text, { bold: true, children: sidebar.title })
-      ] }),
-      sidebar.rows.length === 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: GUTTER + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "nothing open" }) }) : sidebar.rows.map((row) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
-        /* @__PURE__ */ jsxs(Box, { paddingLeft: GUTTER, children: [
-          /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: row.wantsYou ? "\u2190 " : "  " }),
-          /* @__PURE__ */ jsx(Text, { color: ACCENT, children: row.key }),
-          row.live !== void 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  ${row.live} live` }) : null
-        ] }),
-        /* @__PURE__ */ jsx(Box, { paddingLeft: GUTTER + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: truncate(row.label, CONTENT - 2) }) })
-      ] }, row.key))
-    ]
-  }
-);
+  height,
+  focused = false,
+  cursor = 0
+}) => {
+  const capacity = height === void 0 ? sidebar.rows.length : railCapacity(height, sidebar.rows.length);
+  const start = focused && cursor >= capacity ? Math.min(cursor - capacity + 1, sidebar.rows.length - capacity) : 0;
+  const shown = sidebar.rows.slice(start, start + capacity);
+  const hidden = sidebar.rows.length - shown.length;
+  return (
+    // A rule down the left rather than a full box: the rail's other three edges
+    // already have the frame's border a column or two away, and a second
+    // rectangle inside the first reads as a nested panel — something you could
+    // focus and act on, which this cannot be. One line is the whole claim: what
+    // is left of it is the list, what is right of it is not.
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        width: SIDEBAR_COLS,
+        flexShrink: 0,
+        height,
+        borderStyle: "single",
+        borderColor: RULE_COLOR,
+        borderDimColor: true,
+        borderTop: false,
+        borderRight: false,
+        borderBottom: false,
+        paddingLeft: PAD,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
+            /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: "\xBB " }),
+            /* @__PURE__ */ jsx(Text, { bold: true, children: sidebar.title }),
+            focused ? /* @__PURE__ */ jsx(Text, { color: ACCENT, children: "  \u25CF focus" }) : null
+          ] }),
+          sidebar.rows.length === 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: LABEL_INDENT, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "nothing open" }) }) : shown.map((row, i) => {
+            const active = focused && start + i === cursor;
+            return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Text, { color: "cyan", children: active ? "\u276F " : "  " }),
+                /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: row.wantsYou ? "\u2190 " : "  " }),
+                /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: active, children: row.key }),
+                row.live !== void 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  ${row.live} live` }) : null
+              ] }),
+              /* @__PURE__ */ jsx(Box, { paddingLeft: LABEL_INDENT + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: !active, children: truncate(row.label, CONTENT - LABEL_INDENT - 2) }) })
+            ] }, row.key);
+          }),
+          hidden > 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: LABEL_INDENT, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: `+${hidden} more` }) }) : null
+        ]
+      }
+    )
+  );
+};
 var healthDisplay = {
   none: { glyph: " ", color: colors.muted },
   draft: { glyph: "~", color: colors.muted },
@@ -2467,8 +2504,13 @@ var BrowseScreen = ({
         out.add(s.id);
     return out;
   }, [localSections, transients]);
-  const [railOpen, setRailOpen] = useState(false);
+  const [railOpen, setRailOpen] = useState(true);
   const showRail = railOpen && !!sidebar;
+  const [railFocus, setRailFocus] = useState(false);
+  const [railCursor, setRailCursor] = useState(0);
+  const railRows = sidebar?.rows ?? [];
+  const railActive = showRail && railFocus && railRows.length > 0;
+  const railAt = Math.min(railCursor, Math.max(0, railRows.length - 1));
   const listCols = showRail ? COLS - SIDEBAR_COLS : COLS;
   const [sparkFrame, setSparkFrame] = useState(0);
   const sparkling = (mergedUrls?.length ?? 0) > 0 || (leavingUrls?.length ?? 0) > 0 || !!transients?.size && section.items.some((item) => transientOf(transients, item, section.id));
@@ -2571,9 +2613,41 @@ var BrowseScreen = ({
       return;
     }
     if (input === "i" && sidebar) {
-      setRailOpen((open) => !open);
+      setRailOpen((open) => {
+        if (open) setRailFocus(false);
+        return !open;
+      });
+      return;
+    }
+    if (key.tab && showRail) {
+      setRailFocus((f) => !f);
       return;
     }
+    if (railActive) {
+      if (key.upArrow || input === "k") {
+        setRailCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        setRailCursor((c) => Math.min(railRows.length - 1, c + 1));
+        return;
+      }
+      if (key.escape) {
+        setRailFocus(false);
+        return;
+      }
+      if (key.return || input === "o") {
+        const row = railRows[railAt];
+        if (row?.url) {
+          quietly`open ${row.url}`.catch(() => {
+          });
+          showFlash(`\u2197 Opened ${row.key}`);
+        }
+        return;
+      }
+      if (input !== "r" && input !== "q" && !key.leftArrow && !key.rightArrow)
+        return;
+    }
     if (key.escape && search != null) {
       setSearch(null);
       return;
@@ -2846,7 +2920,19 @@ var BrowseScreen = ({
       menu.open(actions);
     }
   });
-  const hints = activeItem?.kind === "repo-header" ? [
+  const hints = railActive ? (
+    // The rail's own keymap while it holds focus, not the list's with a line
+    // bolted on. A footer advertising `m actions` beside a cursor that cannot
+    // reach a row is worse than a short footer: it names a key that does
+    // nothing where you are standing.
+    [
+      ["\u2191\u2193", "initiative"],
+      ["\u21B5", "open"],
+      ["\u21E5/esc", "back to list"],
+      ["?", "help"],
+      ["q", "quit"]
+    ]
+  ) : activeItem?.kind === "repo-header" ? [
     ["\u2191\u2193", "nav"],
     ["\u2190\u2192", "tab"],
     ["\u21B5", "open repo"],
@@ -2861,7 +2947,7 @@ var BrowseScreen = ({
     ["m", "actions"],
     // Advertised only where it does something, and named for what it
     // shows rather than for the furniture: nobody wants "a sidebar".
-    ...sidebar ? [["i", railOpen ? "hide" : sidebar.title.toLowerCase()]] : [],
+    ...showRail ? [["\u21E5", sidebar.title.toLowerCase()]] : sidebar ? [["i", sidebar.title.toLowerCase()]] : [],
     ["?", "help"],
     ["q", "quit"]
   ];
@@ -2985,7 +3071,15 @@ var BrowseScreen = ({
               ]
             }
           ),
-          showRail && sidebar ? /* @__PURE__ */ jsx(SidePanel, { sidebar, height: listHeight }) : null
+          showRail && sidebar ? /* @__PURE__ */ jsx(
+            SidePanel,
+            {
+              sidebar,
+              height: listHeight,
+              focused: railActive,
+              cursor: railAt
+            }
+          ) : null
         ] }),
         /* @__PURE__ */ jsx(Box, { marginTop: 1, children: flash ? /* @__PURE__ */ jsx(Text3, { color: "green", children: flash }) : /* @__PURE__ */ jsx(FooterHints, { hints }) })
       ]
@@ -3439,4 +3533,4 @@ var matchesFilter = (repo, filter) => {
 };
 var parsePatterns = (value) => value.split(",").map((p) => p.trim()).filter(Boolean);
 
-export { ActionMenu, App, COLS, CiStatusLine, CommentsPanel, HealthPanel, PIN_MARK, SIDEBAR_COLS, SidePanel, budgetNotice, buildActions, buildCheckoutCmd, checkoutDirs, clipboard, configureInbox, drillCmd, explainGhAction, explainItem, filterByOrigin, filterByRepos, filterBySearch, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, inboxConfig, insertRepoHeaders, itermRun, jumpToRepo, jumpToRepoPane, layoutGHItems, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, profileOf, readCache, relativeTime, renderMarkdown, repoPriority, reposInSections, resetInboxConfig, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, sortByRecency, sortItems, toCiStatusState, topLevelCount, truncate2 as truncate, useActionMenu, whoseMove, windowCount, withHeaders, withoutItem, writeCache };
+export { ActionMenu, App, COLS, CiStatusLine, CommentsPanel, HealthPanel, PIN_MARK, SIDEBAR_COLS, SidePanel, budgetNotice, buildActions, buildCheckoutCmd, checkoutDirs, clipboard, configureInbox, drillCmd, explainGhAction, explainItem, filterByOrigin, filterByRepos, filterBySearch, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, inboxConfig, insertRepoHeaders, itermRun, jumpToRepo, jumpToRepoPane, layoutGHItems, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, profileOf, railCapacity, readCache, relativeTime, renderMarkdown, repoPriority, reposInSections, resetInboxConfig, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, sortByRecency, sortItems, toCiStatusState, topLevelCount, truncate2 as truncate, useActionMenu, whoseMove, windowCount, withHeaders, withoutItem, writeCache };

package/package.json

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