@young1lin/dsh-ui-gitworkbench 0.1.12 → 0.1.14

package/src/client/search-count.ts

@@ -0,0 +1,125 @@
+/**
+ * How many matches the find panel found, and which one you are on.
+ *
+ * The panel ships without a count, which leaves the one question a reader
+ * actually has unanswered: a query that highlights nothing on screen might
+ * have no matches at all, or two hundred of them below the fold, and the panel
+ * looks identical either way.
+ *
+ * Counting is proportional to the DOCUMENT, and this drawer does not put work
+ * proportional to the document on the keystroke path. Two things keep that
+ * true, and both live here rather than in the wiring:
+ *
+ * - the walk stops at {@link MATCH_CAP}. A cap that turns a feature off would
+ *   be no fix, so this one bounds the WORK and keeps the feature: past the cap
+ *   the total reads `5000+`, which answers "is my query too broad" as well as
+ *   an exact number would. It bounds memory the same way — a single-letter
+ *   search over 20,000 lines of real TypeScript finds 71,515 matches, and an
+ *   array of those is half a megabyte kept alive for a number nobody reads.
+ * - the offsets are KEPT, so moving between matches is a binary search rather
+ *   than a second walk. Measured on this repo's own client sources: a full
+ *   count costs 3-5ms at 300 lines, 9-11ms at 2,000, 12ms at 4,000, and 60ms
+ *   at 20,000 (`SIDE_LINE_CAP`, the ceiling the pane will load). Recounting on
+ *   every Enter would put that 60ms on the navigation path; recounting when
+ *   the typing stops puts it nowhere the reader can feel it.
+ *
+ * The index belongs to one query over one document, and the caller throws it
+ * away when either changes — see `SearchCount` in `CodeEditor.tsx`.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/client/search-count
+ */
+
+/**
+ * How many match positions are kept.
+ *
+ * 5,000 is past any count a reader distinguishes from "lots" and well inside
+ * what the pane can hold: at 8 bytes an offset it is 40KB, against the half a
+ * megabyte an uncapped single-letter search over the ceiling would take.
+ */
+export const MATCH_CAP = 5000
+
+/** Where every match starts, and whether the walk stopped early. */
+export interface MatchIndex {
+  /** Ascending start offsets, at most {@link MATCH_CAP} of them. */
+  readonly offsets: readonly number[]
+  /** There were more matches than were kept; the total reads `N+`. */
+  readonly capped: boolean
+}
+
+/** No query, or a query with nothing to find. */
+export const EMPTY_INDEX: MatchIndex = { offsets: [], capped: false }
+
+/** One match start, however it is handed over. */
+interface Match { readonly from: number }
+
+/**
+ * Anything that yields matches in order.
+ *
+ * Both halves of the union are here for a reason: `SearchQuery.getCursor` is
+ * DECLARED as an iterator and is also iterable at runtime, while a test wants
+ * to hand over a plain array. Accepting either keeps the rule readable without
+ * a document, a view or a DOM behind it.
+ */
+export type MatchWalk = Iterable<Match> | Iterator<Match>
+
+/**
+ * Walk matches into an index, stopping at `cap`.
+ *
+ * The walk is driven by hand rather than with `for…of`, because the union
+ * above may arrive already unwrapped. A cursor reuses ONE object across
+ * iterations, which is safe here only because nothing but the number is kept.
+ */
+export function indexMatches(matches: MatchWalk, cap: number = MATCH_CAP): MatchIndex {
+  const step: Iterator<Match> = Symbol.iterator in matches
+    ? matches[Symbol.iterator]()
+    : matches
+  const offsets: number[] = []
+  for (;;) {
+    if (offsets.length >= cap) {
+      // Ask once more: `capped` has to mean "there are more", not "there might
+      // have been", or a total that lands exactly on the cap reads as `5000+`.
+      return { offsets, capped: step.next().done !== true }
+    }
+    const next = step.next()
+    if (next.done === true) return { offsets, capped: false }
+    offsets.push(next.value.from)
+  }
+}
+
+/**
+ * Which match the position `from` is on or before, 1-based; 0 when there are
+ * none.
+ *
+ * The first match at or after the caret, because that is the one the panel
+ * will land on — which makes the answer right in both of the states the reader
+ * sees it in. Straight after typing the caret has not moved and the count
+ * should already read `1/128`, not `0/128`; after Enter the selection sits
+ * exactly on a match and the lower bound IS that match. Past the last one the
+ * panel wraps, so the answer wraps with it.
+ */
+export function ordinalAt(index: MatchIndex, from: number): number {
+  const { offsets } = index
+  if (offsets.length === 0) return 0
+  let low = 0
+  let high = offsets.length
+  while (low < high) {
+    const mid = (low + high) >> 1
+    if (offsets[mid]! < from) low = mid + 1
+    else high = mid
+  }
+  return low === offsets.length ? 1 : low + 1
+}
+
+/**
+ * The label: `3/128`, `3/5000+` when the walk stopped early, `0/0` for a query
+ * that finds nothing.
+ *
+ * No words, in a panel whose own labels are the library's English and are not
+ * translated either — a pair of numbers says it in every language the drawer
+ * ships (see `locales.ts` for the strings that do need both).
+ */
+export function formatCount(index: MatchIndex, ordinal: number): string {
+  const total = index.offsets.length
+  if (total === 0) return '0/0'
+  return `${ordinal}/${total}${index.capped ? '+' : ''}`
+}

package/src/client/styles/changes.css

@@ -107,6 +107,7 @@
   box-sizing: border-box; width: 100%;
   padding: 4px 12px 4px 8px;
   border: 0;
+  border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-dim);
   font-family: inherit;
@@ -114,7 +115,7 @@
   text-align: left;
   cursor: pointer;
 }
-.treeDir:hover { background: var(--gs-panel); color: var(--gs-fg-muted); }
+.treeDir:hover { background: var(--gs-raise); color: var(--gs-fg-muted); }
 .treeDirActive { color: var(--gs-fg-muted); }
 .chevron {
   flex: none;
@@ -132,7 +133,7 @@
 .treeDirCount {
   flex: none;
   padding: 0 6px;
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
   background: var(--gs-neutral-bg);
   color: var(--gs-fg-dim);
   font-size: var(--gs-t-meta); font-weight: 600; line-height: 16px;
@@ -144,6 +145,7 @@
   padding: 5px 14px;
   border: 0;
   border-left: 2px solid transparent;
+  border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-muted);
   font-family: inherit;
@@ -151,18 +153,14 @@
   text-align: left;
   cursor: pointer;
 }
-.file:hover { background: var(--gs-panel); }
-.fileActive {
-  background: var(--gs-panel);
-  border-left-color: var(--gs-accent);
-  color: var(--gs-fg);
-}
+.file:hover { background: var(--gs-raise); }
+/* .fileActive: see the shared selected-state rule in controls.css. */
 
 .fileStatus {
   flex: none;
   display: inline-flex; align-items: center; justify-content: center;
   width: 18px; height: 18px;
-  border-radius: 5px;
+  border-radius: var(--gs-r-control);
   font-weight: 700; font-size: var(--gs-t-meta); line-height: 1;
 }
 .stAdded, .stUntracked { color: var(--gs-add); background: var(--gs-add-bg); }
@@ -174,7 +172,7 @@
 .fileBinary {
   flex: none;
   padding: 0 5px;
-  border-radius: 4px;
+  border-radius: var(--gs-r-control);
   background: var(--gs-neutral-bg);
   color: var(--gs-fg-dim);
   font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
@@ -281,6 +279,14 @@
 
 .wordAdd { background: var(--gs-add-word); border-radius: 2px; }
 .wordDel { background: var(--gs-del-word); border-radius: 2px; }
+/* A carriage return, drawn. The diff's text carries the CR byte through
+   verbatim and a browser paints nothing for it, so a line whose only change
+   is its ending rendered as two identical-looking cells; the glyph (U+240D,
+   the picture of the control character — `cr-mark.ts`) makes the ending
+   visible wherever the diff paints one. Dim and slightly small so a whole
+   CRLF file reads as code with quiet markers, not as a wall of symbols, and
+   unselectable so copying a line copies code. */
+.crMark { color: var(--gs-fg-faint); font-size: 0.9em; user-select: none; }
 
 /* Side-by-side diff pane. One grid holds EVERY row's four cells — a per-row
    grid would let the column boundary drift with each row's content, and a
@@ -459,6 +465,9 @@
   opacity: 0.32;
   transition: opacity 140ms ease;
   pointer-events: none;
+  /* Above the gutter, which CodeMirror stacks at 200. The bar overlays its
+     first two pixels, so at the default z-index an opaque gutter buries it. */
+  z-index: 201;
 }
 .cmHost[data-editable]:focus-within::before { opacity: 1; }
 /* The change nav takes the free space, so it and `.sideActions` after it sit

package/src/client/styles/controls.css

@@ -82,9 +82,20 @@
    because it has to win against the grouped rule above by source order. */
 .scopeBtn { flex: 1 1 0; }
 
-/* The single "this one is selected" idiom. Three different ones — accent chip,
-   bordered panel, left accent bar — used to mean the same thing in one drawer. */
-.scopeBtnActive, .miniBtnPrimary, .segmentActive, .refRowActive, .paletteRowActive {
+/* The single "this one is selected" idiom: accent text, in an accent tint,
+   inside an accent border. Everything that can be the chosen one is here — a
+   tree leaf, a commit, a ref, a palette, a segment, a funnel tab, a date
+   bound, a preset — because the drawer had reached three spellings of one
+   meaning (this chip, a filled panel, a left accent bar) and showed two of
+   them at once whenever the Changes tree sat beside the history.
+
+   A modifier applied as `${css.base} ${css.mod}` carries the SAME specificity
+   as its base, so source order decides. Every base named here is declared
+   above this rule; `.fbRow.fbRowActive` is the one exception and is written
+   qualified, because `files.css` is imported after this file. */
+.scopeBtnActive, .miniBtnPrimary, .segmentActive, .refRowActive, .paletteRowActive,
+.fileActive, .commitActive, .funnelTabActive, .funnelBoundBtnActive, .funnelPresetActive,
+.fbRow.fbRowActive {
   border-color: var(--gs-accent-border);
   background: var(--gs-accent-bg);
   color: var(--gs-accent);
@@ -125,10 +136,10 @@
 /* Publishing a branch that exists nowhere else is the one moment this bar has a
    primary action, so it gets the solid fill Commit uses — and only then. */
 .btnPrimary {
-  border-color: var(--gs-accent); background: var(--gs-accent); color: var(--gs-on-accent, #fff);
+  border-color: var(--gs-accent); background: var(--gs-accent); color: var(--gs-on-accent);
   font-weight: 600;
 }
-.btnPrimary:hover:not(:disabled) { background: var(--gs-accent); color: var(--gs-on-accent, #fff); border-color: var(--gs-accent); }
+.btnPrimary:hover:not(:disabled) { background: var(--gs-accent); color: var(--gs-on-accent); border-color: var(--gs-accent); }
 
 /* The count riding inside Pull / Push. Reads as part of the label rather than a
    badge stuck on it: same colour, tabular, just set apart by a hairline. */
@@ -165,7 +176,7 @@
   background: var(--gs-border);
   background-clip: padding-box;
   border: 3px solid transparent;
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
 }
 .drawer ::-webkit-scrollbar-thumb:hover { background: var(--gs-fg-faint); background-clip: padding-box; }
 
@@ -219,7 +230,7 @@
    `.btn` wherever either rule sits, which is the failure the drawer already
    shipped once. */
 .btn.btnDanger {
-  border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent, #fff);
+  border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent);
   font-weight: 600;
 }
-.btn.btnDanger:hover:not(:disabled) { border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent, #fff); }
+.btn.btnDanger:hover:not(:disabled) { border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent); }

package/src/client/styles/files.css

@@ -21,7 +21,7 @@
   color: var(--gs-fg);
   background: var(--gs-surface);
   border: 1px solid var(--gs-border);
-  border-radius: 4px;
+  border-radius: var(--gs-r-control);
 }
 .fbSearch:focus { outline: none; border-color: var(--gs-accent); }
 .fbNote { flex: none; font-size: var(--gs-t-meta); color: var(--gs-fg-dim); padding: 2px 4px; }
@@ -38,14 +38,16 @@
   text-align: left;
   background: none;
   border: 0;
-  border-radius: 3px;
+  border-radius: var(--gs-r-control);
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.fbRow:hover { background: var(--gs-hover); }
-.fbRowActive { background: var(--gs-selected); color: var(--gs-fg); }
+.fbRow:hover { background: var(--gs-raise); }
+/* .fbRowActive: see the shared selected-state rule in controls.css. It is
+   written there qualified, because this file is imported after that one and a
+   bare modifier declared above its base loses the cascade. */
 .fbDirName { overflow: hidden; text-overflow: ellipsis; }
 .fbFileName { overflow: hidden; text-overflow: ellipsis; }
 .fbMain {

package/src/client/styles/history-filters.css

@@ -47,7 +47,7 @@
   font-family: inherit; font-size: var(--gs-t-dense); line-height: 20px;
   cursor: pointer;
 }
-.filterChipRemove:hover { color: var(--gs-danger, var(--gs-fg)); }
+.filterChipRemove:hover { color: var(--gs-del); }
 .filterClear {
   border: none; background: transparent;
   padding: 2px 4px;
@@ -91,13 +91,17 @@
   display: flex; gap: 2px;
   margin: 8px 8px 0;
   padding: 2px;
-  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-pill);
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
   background: var(--gs-bg);
 }
 .funnelTab {
   flex: 1; min-width: 0;
-  height: 22px; padding: 0 8px;
-  border: none; border-radius: var(--gs-r-pill);
+  box-sizing: border-box;
+  height: var(--gs-h-compact); padding: 0 8px;
+  /* Transparent rather than none: the shared selected rule paints its
+     members through `border-color`, and a border that is not there takes
+     no colour. Inside `border-box`, so the strip does not grow by 2px. */
+  border: 1px solid transparent; border-radius: calc(var(--gs-r-control) - 3px);
   background: transparent;
   color: var(--gs-fg-dim);
   font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
@@ -106,11 +110,7 @@
   transition: background 120ms ease, color 120ms ease;
 }
 .funnelTab:hover { color: var(--gs-fg); }
-.funnelTab.funnelTabActive {
-  color: var(--gs-fg);
-  background: var(--gs-raise);
-  box-shadow: inset 0 0 0 1px var(--gs-border);
-}
+/* .funnelTabActive: see the shared selected-state rule in controls.css. */
 .funnelTab:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
 /* A tab's own criteria count, so the two sections nobody is looking at still
    say they hold something. */
@@ -126,7 +126,7 @@
 .funnelCaption {
   flex: none;
   color: var(--gs-fg-faint);
-  font-size: 11px; line-height: 14px;
+  font-size: var(--gs-t-meta); line-height: 14px;
   letter-spacing: 0.04em; text-transform: uppercase;
 }
 
@@ -143,8 +143,9 @@
 }
 .funnelBoundBtn {
   flex: 1; min-width: 0;
-  height: 20px; padding: 0 6px;
-  border: none; border-radius: calc(var(--gs-r-control) - 3px);
+  box-sizing: border-box;
+  height: var(--gs-h-compact); padding: 0 6px;
+  border: 1px solid transparent; border-radius: calc(var(--gs-r-control) - 3px);
   background: transparent;
   color: var(--gs-fg-dim);
   font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
@@ -152,11 +153,7 @@
   transition: background 120ms ease, color 120ms ease;
 }
 .funnelBoundBtn:hover { color: var(--gs-fg); }
-.funnelBoundBtn.funnelBoundBtnActive {
-  color: var(--gs-accent);
-  background: var(--gs-accent-bg);
-  box-shadow: inset 0 0 0 1px var(--gs-accent-border);
-}
+/* .funnelBoundBtnActive: see the shared selected-state rule in controls.css. */
 
 /* The calendar — modern-grid look in the drawer's own tokens. */
 .cal { flex: none; display: flex; flex-direction: column; gap: 4px; }
@@ -168,7 +165,7 @@
 }
 .calNav {
   flex: none;
-  width: 22px; height: 20px; padding: 0;
+  width: var(--gs-h-compact); height: var(--gs-h-compact); padding: 0;
   border: none; border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-dim);
@@ -184,10 +181,10 @@
 .calWeek span {
   text-align: center;
   color: var(--gs-fg-faint);
-  font-size: 11px; line-height: 14px;
+  font-size: var(--gs-t-meta); line-height: 14px;
 }
 .calGrid button {
-  height: 26px;
+  height: var(--gs-h-compact);
   border: none; border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-muted);
@@ -215,7 +212,7 @@
   padding: 3px 6px;
   border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
   background: var(--gs-bg);
-  font-size: 11px; line-height: 16px;
+  font-size: var(--gs-t-meta); line-height: 16px;
 }
 .funnelBoundKey { flex: none; color: var(--gs-fg-faint); }
 .funnelBoundVal {
@@ -233,12 +230,12 @@
   font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
   cursor: pointer;
 }
-.funnelBoundClear:hover { color: var(--gs-danger, var(--gs-fg)); }
+.funnelBoundClear:hover { color: var(--gs-del); }
 
 .funnelSearch {
   flex: none;
   box-sizing: border-box;
-  height: 26px; padding: 0 8px;
+  height: var(--gs-h-compact); padding: 0 8px;
   border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
   background: var(--gs-bg); color: var(--gs-fg);
   font-family: inherit; font-size: var(--gs-t-dense);
@@ -257,7 +254,7 @@
 .funnelList::-webkit-scrollbar-track { background: transparent; }
 .funnelList::-webkit-scrollbar-thumb {
   background: var(--gs-fg-fainter);
-  border: 3px solid transparent; border-radius: 5px;
+  border: 3px solid transparent; border-radius: var(--gs-r-pill);
   background-clip: content-box;
 }
 /* Every row is the same four slots — chevron, tick, glyph, name — then the
@@ -339,7 +336,7 @@
 .funnelCount {
   flex: none;
   color: var(--gs-fg-faint);
-  font-size: 11px;
+  font-size: var(--gs-t-meta);
   font-variant-numeric: tabular-nums;
 }
 .funnelMore { color: var(--gs-fg-faint); padding: 4px 6px; }
@@ -360,14 +357,7 @@
    the drawer. It is in both selector lists now; this only sizes them to share
    one row. */
 .funnelPreset { flex: 1 1 0; min-width: 0; padding: 0 6px; }
-/* Qualified, like `.funnelButtonActive`: the shared vocabulary is declared
-   several hundred lines BELOW this one, so a bare modifier would lose its
-   background to that rule's `background: transparent`. */
-.funnelPreset.funnelPresetActive {
-  color: var(--gs-accent);
-  border-color: var(--gs-accent);
-  background: var(--gs-accent-bg);
-}
+/* .funnelPresetActive: see the shared selected-state rule in controls.css. */
 
 /* The footer says what the panel is currently asking git for. Without it the
    only feedback lived on the chip row BEHIND the panel, so a reader had to
@@ -378,7 +368,7 @@
   padding: 6px 10px;
   border-top: 1px solid var(--gs-border-soft);
   background: var(--gs-bg);
-  font-size: 11px; line-height: 16px;
+  font-size: var(--gs-t-meta); line-height: 16px;
 }
 .funnelFootCount { color: var(--gs-fg-faint); font-variant-numeric: tabular-nums; }
 .funnelFootCountOn { color: var(--gs-fg-muted); }
@@ -388,7 +378,7 @@
   border: none; border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-dim);
-  font-family: inherit; font-size: 11px; line-height: 16px;
+  font-family: inherit; font-size: var(--gs-t-meta); line-height: 16px;
   cursor: pointer;
 }
 .funnelFootClear:hover:not(:disabled) { color: var(--gs-fg); background: var(--gs-raise); }

package/src/client/styles/history.css

@@ -208,7 +208,7 @@
   min-width: 0;
 }
 .commit:hover { background: var(--gs-raise); }
-.commitActive { border-color: var(--gs-accent-border); background: var(--gs-accent-bg); }
+/* .commitActive: see the shared selected-state rule in controls.css. */
 /* Pushed to the right end of the row, and never squeezed: the subject is what
    gives way when the pane narrows, because it is the part with an ellipsis to
    give. */

package/src/client/styles/shell.css

@@ -41,8 +41,9 @@
 
   /* Radii. Four values, each with one job; nothing else may invent a fifth. */
   --gs-r-pill: 999px;    /* drawer chrome: header actions, ref chips, triggers */
-  --gs-r-control: 8px;   /* controls inside a panel or pane; inputs; badges */
-  --gs-r-surface: 12px;  /* rows, popovers, panes */
+  --gs-r-control: 8px;   /* controls inside a panel or pane; inputs; badges;
+                            and the dense list rows a tree or a picker is made of */
+  --gs-r-surface: 12px;  /* the tall card rows, popovers and panes they sit in */
   --gs-r-drawer: 14px;   /* the drawer and its companion card */
 
   /* Type — dsh's --dsw-font-* ladder, which tops out at 11px for meta text. */
@@ -215,7 +216,7 @@
   display: inline-flex; align-items: center; gap: 6px;
   padding: 2px 10px;
   border: 1px solid var(--gs-accent-border);
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
   background: var(--gs-accent-bg);
   color: var(--gs-accent);
   font-weight: 600;
@@ -271,7 +272,7 @@
 .headerView {
   flex: none;
   padding: 1px 8px;
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
   background: var(--gs-neutral-bg);
   color: var(--gs-fg-muted);
   font-size: var(--gs-t-meta);
@@ -279,7 +280,7 @@
 }
 .headerDetached {
   padding: 1px 8px;
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
   background: var(--gs-warn-bg);
   color: var(--gs-warn);
   font-size: var(--gs-t-meta);