@kud/gh-ink 0.38.1 → 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,13 +59,13 @@ 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.
@@ -70,9 +76,26 @@ declare const SIDEBAR_COLS = 30;
  * initiative with nothing moving on it was invisible.
  */
 declare const railCapacity: (height: number, rows: number) => number;
-declare const SidePanel: ({ sidebar, height, }: {
+/**
+ * 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. Forty columns is not enough for
+ * both on one line, so they stack.
+ *
+ * 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, 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[];

package/dist/index.js

@@ -584,9 +584,12 @@ 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;
@@ -596,33 +599,56 @@ var railCapacity = (height, rows) => {
 };
 var SidePanel = ({
   sidebar,
-  height
+  height,
+  focused = false,
+  cursor = 0
 }) => {
-  const shown = height === void 0 ? sidebar.rows : sidebar.rows.slice(0, railCapacity(height, sidebar.rows.length));
+  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 /* @__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" }) }) : shown.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
+  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
           ] }),
-          /* @__PURE__ */ jsx(Box, { paddingLeft: GUTTER + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: truncate(row.label, CONTENT - 2) }) })
-        ] }, row.key)),
-        hidden > 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: GUTTER + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: `+${hidden} more` }) }) : 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 = {
@@ -2478,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));
@@ -2582,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;
@@ -2857,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"],
@@ -2872,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"]
   ];
@@ -2996,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 }) })
       ]

package/package.json

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