@young1lin/dsh-ui-gitworkbench 0.1.15 → 0.1.16

package/src/client/locales.ts

@@ -21,10 +21,10 @@
 export type WorkbenchKey =
   | 'aheadTitle' | 'behindTitle' | 'files'
   | 'filterFiles' | 'filterFilesPlaceholder' | 'filterFilesClear' | 'filesFiltered' | 'filterNoMatch'
-  | 'drawerLabel' | 'totalsDim' | 'refresh' | 'close'
+  | 'drawerLabel' | 'totalsDim' | 'refresh' | 'close' | 'wrapLines' | 'wrapLinesOff'
   | 'tabsLabel' | 'tabChanges' | 'tabHistory' | 'tabCompare' | 'tabFiles'
   // the Files tab: browse the repository, read a file, blame it, edit it
-  | 'fileSearchPlaceholder' | 'filesTruncated' | 'filesEmpty' | 'filesNoMatch' | 'filesPick'
+  | 'fileSearchPlaceholder' | 'filesTruncated' | 'filesEmpty' | 'filesNoMatch' | 'filesPick' | 'filesIgnored' | 'filesIgnoredCut' | 'filesIgnoredFailed'
   | 'filesUnsavedAsk' | 'filesDiscardOpen' | 'filesMore' | 'filesVanished' | 'fileReadOnlyCrlf' | 'fileReadOnlyEncoding'
   | 'blameWhileEditing' | 'blameLine' | 'blamePick' | 'blameInHistory'
   | 'imageBroken' | 'imageFit' | 'imageActual' | 'imageTooLarge' | 'imageSource' | 'imagePreview'
@@ -90,6 +90,11 @@ export const zh: Record<WorkbenchKey, string> = {
   tabFiles: '文件',
   fileSearchPlaceholder: '搜索文件…',
   filesTruncated: '文件太多，列表已截断；用搜索找剩下的。',
+  filesIgnored: '已被 gitignore',
+  wrapLines: '自动换行',
+  wrapLinesOff: '取消自动换行',
+  filesIgnoredCut: '这个目录条目太多，已截断；搜索找不到没列出的部分。',
+  filesIgnoredFailed: '无法列出被忽略的文件。',
   filesEmpty: '这个仓库还没有文件',
   filesNoMatch: '没有匹配的文件',
   filesMore: '还有 {count} 个，用上面的搜索找',
@@ -332,6 +337,11 @@ export const en: Record<WorkbenchKey, string> = {
   tabFiles: 'Files',
   fileSearchPlaceholder: 'Search files…',
   filesTruncated: 'Too many files to list; use the search for the rest.',
+  filesIgnored: 'Ignored (gitignore)',
+  wrapLines: 'Wrap long lines',
+  wrapLinesOff: 'Stop wrapping lines',
+  filesIgnoredCut: 'This directory has too many entries; the list is cut, and the search cannot reach the rest.',
+  filesIgnoredFailed: 'Could not list the ignored files.',
   filesEmpty: 'This repository has no files yet',
   filesNoMatch: 'No matching files',
   filesMore: 'and {count} more — use the search above',

package/src/client/row-heights.ts

@@ -0,0 +1,225 @@
+/**
+ * Row offsets when the rows are NOT all the same height — what soft wrap makes
+ * of a diff pane.
+ *
+ * `row-window.ts` places row `i` at `i * 20px` with no measuring at all, and
+ * says so: the panes guarantee it by writing `white-space: pre`, so nothing
+ * ever wraps. Turn wrapping on and that guarantee is gone — one row can be
+ * five lines tall — and every number the window computes from it (which rows
+ * are visible, how tall the spacers are, where a change sits) is wrong.
+ *
+ * The replacement keeps the same shape and the same rule: work proportional to
+ * the VIEWPORT. Heights are MEASURED, but only for rows that are actually in
+ * the DOM, which is the window plus its overscan; every other row carries an
+ * estimate computed from its text. So a 20,000-row file costs one array and
+ * some arithmetic, not 20,000 measurements.
+ *
+ * The prefix sums are a Fenwick tree rather than a running array, because both
+ * things this is asked for happen on the scroll path and must not be linear:
+ * "where does row i start" is a prefix query, "which row is at y" is a search
+ * for a prefix, and a measurement that lands changes one row's height. All
+ * three are O(log n) here; as a plain array of running totals, the third would
+ * rewrite every entry after the row that moved.
+ *
+ * Pure: no React, no DOM. `tests/row-heights.test.ts` loads it directly.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/client/row-heights
+ */
+
+import { WINDOW_OVERSCAN, WINDOW_WHOLE_BELOW, type RowWindow } from './row-window.ts'
+
+/** A viewport height to assume before the scroller has been measured, matching
+ *  `row-window.ts`: rendering nothing until the height is known flashes an
+ *  empty pane, and a screenful is both safe and close. */
+const ASSUMED_VIEWPORT_PX = 1200
+
+/**
+ * How many display columns a line occupies.
+ *
+ * Only for the ESTIMATE of rows nobody has measured, so it does not have to
+ * agree with the browser to the character — it has to be close enough that
+ * the scrollbar is the right length and a jump to the middle of the file lands
+ * near where it should. Tabs advance to the next stop (`tab-size: 4` in the
+ * panes' grid) and full-width characters take two columns, which are the two
+ * ways a naive `text.length` is badly wrong rather than slightly wrong.
+ *
+ * @param text - one row's text.
+ * @param tabSize - columns a tab advances to the next multiple of.
+ */
+export function displayColumns(text: string, tabSize = 4): number {
+  let columns = 0
+  for (const char of text) {
+    if (char === '\t') {
+      columns += tabSize - (columns % tabSize)
+      continue
+    }
+    columns += isWide(char) ? 2 : 1
+  }
+  return columns
+}
+
+/**
+ * Whether a character takes two columns in a monospace font: CJK, Hangul,
+ * kana, the full-width forms, and the emoji blocks. The ranges rather than a
+ * table because this runs over a file's worth of text and the answer only
+ * feeds an estimate.
+ */
+function isWide(char: string): boolean {
+  const code = char.codePointAt(0) ?? 0
+  return (code >= 0x1100 && code <= 0x115f)
+    || (code >= 0x2e80 && code <= 0xa4cf)
+    || (code >= 0xac00 && code <= 0xd7a3)
+    || (code >= 0xf900 && code <= 0xfaff)
+    || (code >= 0xfe30 && code <= 0xfe6f)
+    || (code >= 0xff00 && code <= 0xff60)
+    || (code >= 0xffe0 && code <= 0xffe6)
+    || (code >= 0x1f300 && code <= 0x1f9ff)
+}
+
+/**
+ * The height a row is guessed to have before it has been measured.
+ *
+ * @param text - the row's text.
+ * @param columns - how many columns fit across the pane; 0 or less means the
+ *                  pane has not been measured yet, and one line is assumed.
+ * @param rowH - one line's height in px.
+ */
+export function estimateRowHeight(text: string, columns: number, rowH: number): number {
+  if (!Number.isFinite(columns) || columns <= 0) return rowH
+  return Math.max(1, Math.ceil(displayColumns(text) / columns)) * rowH
+}
+
+/**
+ * Per-row heights with O(log n) offsets, backed by a Fenwick tree.
+ *
+ * Bounded by construction: two arrays of `rowCount`, which the panes already
+ * cap. {@link measured} reports how much of it is real rather than guessed, so
+ * a test can prove the measuring stays viewport-sized instead of trusting it.
+ */
+export class RowHeights {
+  /** Each row's height. */
+  private readonly heights: Float64Array
+  /** Fenwick sums, 1-based; `tree[i]` covers a block ending at row `i - 1`. */
+  private readonly tree: Float64Array
+  /** Rows whose height came from the DOM rather than from an estimate. */
+  private readonly real: Uint8Array
+  private realCount = 0
+
+  /**
+   * @param initial - each row's starting height, normally an estimate.
+   */
+  constructor(initial: readonly number[]) {
+    const n = initial.length
+    this.heights = new Float64Array(n)
+    this.tree = new Float64Array(n + 1)
+    this.real = new Uint8Array(n)
+    for (let i = 0; i < n; i += 1) this.heights[i] = sane(initial[i]!)
+    // Build in O(n): each node adds its own total into its parent.
+    for (let i = 1; i <= n; i += 1) {
+      this.tree[i]! += this.heights[i - 1]!
+      const parent = i + (i & -i)
+      if (parent <= n) this.tree[parent]! += this.tree[i]!
+    }
+  }
+
+  /** How many rows there are. */
+  get count(): number { return this.heights.length }
+
+  /** How many rows carry a measured height rather than an estimate. */
+  measured(): number { return this.realCount }
+
+  /**
+   * Record one row's real height.
+   * @returns whether anything moved, so a caller can avoid a re-render.
+   */
+  set(index: number, px: number): boolean {
+    if (!Number.isInteger(index) || index < 0 || index >= this.count) return false
+    const next = sane(px)
+    if (this.real[index] === 0) {
+      this.real[index] = 1
+      this.realCount += 1
+    }
+    const delta = next - this.heights[index]!
+    if (delta === 0) return false
+    this.heights[index] = next
+    for (let i = index + 1; i <= this.count; i += i & -i) this.tree[i]! += delta
+    return true
+  }
+
+  /** One row's height. */
+  heightAt(index: number): number {
+    if (index < 0 || index >= this.count) return 0
+    return this.heights[index]!
+  }
+
+  /** Where a row starts, measured from the top of the scrolled content. */
+  topAt(index: number): number {
+    let sum = 0
+    for (let i = Math.max(0, Math.min(index, this.count)); i > 0; i -= i & -i) sum += this.tree[i]!
+    return sum
+  }
+
+  /** Every row's height together. */
+  total(): number { return this.topAt(this.count) }
+
+  /**
+   * The row that contains `y`, by binary lifting over the tree — the same
+   * search a running-totals array would do, without the array.
+   */
+  rowAt(y: number): number {
+    if (this.count === 0) return 0
+    let remaining = Number.isFinite(y) && y > 0 ? y : 0
+    let index = 0
+    let step = 1
+    while (step * 2 <= this.count) step *= 2
+    for (; step > 0; step = Math.floor(step / 2)) {
+      const probe = index + step
+      if (probe <= this.count && this.tree[probe]! <= remaining) {
+        remaining -= this.tree[probe]!
+        index = probe
+      }
+    }
+    return Math.min(index, this.count - 1)
+  }
+}
+
+/** @param value - a number from the DOM, which can be NaN or negative. */
+function sane(value: number): number {
+  return Number.isFinite(value) && value > 0 ? value : 0
+}
+
+/**
+ * The window of rows to render when the rows are not all one height.
+ *
+ * Same answer shape as {@link rowWindow}, and the same short-circuit below
+ * {@link WINDOW_WHOLE_BELOW}: windowing has costs of its own, and a file that
+ * was never slow should render exactly as it did before.
+ *
+ * @param scrollTop - the scroller's current offset in px.
+ * @param viewportH - the scroller's visible height in px; 0 before measuring.
+ * @param heights - the rows' heights.
+ * @param overscan - rows to keep beyond each edge.
+ */
+export function variableRowWindow(
+  scrollTop: number,
+  viewportH: number,
+  heights: RowHeights,
+  overscan: number = WINDOW_OVERSCAN,
+): RowWindow {
+  const rows = heights.count
+  if (rows <= WINDOW_WHOLE_BELOW) return { start: 0, end: rows, padTop: 0, padBottom: 0 }
+
+  const top = Number.isFinite(scrollTop) && scrollTop > 0 ? scrollTop : 0
+  const view = Number.isFinite(viewportH) && viewportH > 0 ? viewportH : ASSUMED_VIEWPORT_PX
+  const pad = Math.max(0, Math.trunc(overscan))
+
+  const start = Math.max(0, heights.rowAt(top) - pad)
+  const end = Math.min(rows, heights.rowAt(top + view) + 1 + pad)
+  const safeEnd = Math.max(start, end)
+  return {
+    start,
+    end: safeEnd,
+    padTop: heights.topAt(start),
+    padBottom: Math.max(0, heights.total() - heights.topAt(safeEnd)),
+  }
+}

package/src/client/styles/changes.css

@@ -261,6 +261,15 @@
   user-select: none;
 }
 .code { flex: 1 0 auto; white-space: pre; padding: 0 16px 0 10px; }
+/* Soft wrap, unified view. Three things have to move together: the stack stops
+   being wider than the pane (`width: max-content` is exactly what makes a
+   200-column line scroll sideways), the code cell wraps instead of overflowing,
+   and the number columns hold the TOP of a row that is now several lines tall
+   rather than centring in it. `anywhere` rather than `break-word` because a
+   minified line or a base64 blob is one "word" and would not break at all. */
+.diffPreWrap { width: 100%; min-width: 0; }
+.diffPreWrap .line { align-items: flex-start; }
+.diffPreWrap .code { flex: 1 1 0; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
 
 .lineAdd { background: var(--gs-add-line); }
 .lineDel { background: var(--gs-del-line); }
@@ -306,8 +315,17 @@
 .sideScroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
 .sideCols { display: flex; align-items: stretch; min-height: 100%; }
 /* `min-width: 0` is what lets a flex column be narrower than its content —
-   without it the column refuses to shrink and the divider stops moving. */
-.sideCol { flex: 0 0 auto; min-width: 0; overflow-x: auto; }
+   without it the column refuses to shrink and the divider stops moving. The
+   column still scrolls sideways — a trackpad swipe or a shift-wheel over the
+   code lands here — but draws no scrollbar of its own: it is as tall as the
+   file, so that scrollbar lands at the bottom of the diff. rails.css puts a
+   real one at the bottom of the PANE and says why. Both spellings, because
+   Firefox reads the property and Chromium the pseudo-element. */
+.sideCol {
+  flex: 0 0 auto; min-width: 0; overflow-x: auto;
+  scrollbar-width: none;
+}
+.sideCol::-webkit-scrollbar { display: none; }
 .sideColRight { flex: 1 1 0; }
 .sideColGrid {
   display: grid;
@@ -379,6 +397,19 @@
 .sideNumAdd { background: var(--gs-add-num, var(--gs-add-line)); }
 .sideNumDel { background: var(--gs-del-num, var(--gs-del-line)); }
 .sideCode { white-space: pre; padding: 0 16px 0 10px; min-height: 20px; }
+/* Soft wrap, side-by-side. The column stops scrolling sideways (there is
+   nothing left to scroll to) and the grid stops sizing itself to the widest
+   line, which is what let a 200-column line push the pane wider than the pane.
+   `anywhere` rather than `break-word`: a minified line is one "word" and would
+   not break at all. The two columns are still two grids, so a row's height is
+   imposed on both cells from whichever side wrapped further — see
+   `use-variable-row-window.ts`; `.sideFlow` is the inner box that is MEASURED,
+   and it must not inherit that imposed height or the row could never shrink
+   back when the pane is widened. */
+.sideColWrap { overflow-x: hidden; }
+.sideColGridWrap { width: 100%; min-width: 0; }
+.sideColGridWrap .sideCode { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
+.sideFlow { display: block; height: auto; }
 /* Stands in for the rows outside the window, so the scrollbar is the length of
    the FILE rather than of whatever is currently rendered. Spans every column,
    including the blame gutter's. */

package/src/client/styles/controls.css

@@ -107,6 +107,11 @@
    come from the vocabulary — only the box changes shape. */
 .btnIcon { width: var(--gs-h-control); padding: 0; }
 .btnIcon svg { display: block; }
+/* An icon button that is a STATE, not an action - wrap is either on or off,
+   and the row has to say which without a second glyph. Qualified like
+   `.layoutButtonOn` and `.treeIconOn`: the shared button vocabulary sets
+   `color` at the same specificity a few rules above. */
+.btnIcon.btnIconOn { color: var(--gs-accent); border-color: var(--gs-accent); }
 /* Close is the one destructive control in the row, and every window on the
    machine says so with red on hover. Quiet until then: a permanently red X in
    a header would read as an error state. */

package/src/client/styles/files.css

@@ -45,6 +45,11 @@
   text-overflow: ellipsis;
 }
 .fbRow:hover { background: var(--gs-raise); }
+/* Ignored territory, dimmed so "why does this never show in Changes" has a
+   visible answer. Qualified like .fbRowActive (which it must not fight: the
+   component never applies both, and the active rule in controls.css is
+   imported before this file anyway). */
+.fbRow.fbRowIgnored { opacity: 0.55; }
 /* .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. */

package/src/client/styles/rails.css

@@ -0,0 +1,72 @@
+/**
+ * Where the side-by-side pane's horizontal scrollbars live.
+ *
+ * The pane scrolls vertically and each column scrolls horizontally on its own,
+ * which is what lets the divider mean something: one grid across both sides is
+ * sized by the widest line in the file, so dragging it moves nothing. The cost
+ * is where the browser then draws a column's scrollbar — at the bottom of the
+ * COLUMN, and a column is as tall as the file. On a two-thousand-line diff the
+ * only way to reach the control that scrolls sideways was to scroll all the
+ * way down first, and then scroll back up to see what it did.
+ *
+ * So the column's scrollbar is hidden and a rail is stuck to the bottom of the
+ * pane in its place. See `h-rail.ts` and `SideRails.tsx`.
+ */
+/* The horizontal scrollbars, one per column, stuck to the bottom of the PANE.
+   `position: sticky` inside the pane's vertical scroller is what floats them:
+   they ride at the bottom edge of the viewport wherever the reader is in the
+   file, the way an editor's scrollbar does.
+
+   The strip is ALWAYS rendered and collapses to `height: 0` instead of being
+   conditionally mounted, so the rails keep their elements and the scroll-sync
+   effects keep stable dependencies (SideRails.tsx).
+
+   The negative margin is why the strip costs no layout height: without it the
+   pane would scroll 12px further than the file is long, forever. What it
+   overlays is the grid's own 16px bottom padding, not a line of code. */
+.sideRails {
+  position: sticky; bottom: 0; z-index: 6;
+  display: flex; align-items: stretch;
+  height: 0; overflow: hidden;
+}
+/* Opaque, because it OVERLAYS the last rows rather than reserving space below
+   them: without a background the code underneath reads straight through the
+   strip. */
+.sideRailsOn {
+  height: 12px; margin-top: -12px; overflow: visible;
+  background: var(--gs-surface);
+}
+/* Each rail is a REAL scroller whose content is exactly as wide as its
+   column's, so the two scroll positions map one to one with no arithmetic and
+   the thumb is the size the reader expects. */
+.sideRail {
+  flex: 0 0 auto; min-width: 0;
+  overflow-x: auto; overflow-y: hidden;
+}
+/* Firefox only. Chromium IGNORES its `::-webkit-scrollbar` rules for any
+   element that also sets `scrollbar-width`, and what it falls back to on
+   Windows is an overlay bar: no layout height, and nothing painted at rest.
+   For a strip whose whole job is to be seen and dragged, that is a control
+   that is not there — so the standard property is scoped to the engine that
+   needs it. */
+@supports (-moz-appearance: none) {
+  .sideRail { scrollbar-width: thin; scrollbar-color: var(--gs-fg-fainter) transparent; }
+}
+/* The thumb, drawn explicitly: styling these pseudo-elements is what opts
+   Chromium out of overlay scrollbars and back into a classic one that occupies
+   its own layout height — which is what the probe measures to prove the bar is
+   painted at all. */
+.sideRail::-webkit-scrollbar { height: 10px; }
+.sideRail::-webkit-scrollbar-track { background: transparent; }
+.sideRail::-webkit-scrollbar-thumb {
+  background: var(--gs-fg-fainter);
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  border-radius: var(--gs-r-pill);
+}
+.sideRail:hover::-webkit-scrollbar-thumb { background: var(--gs-fg-faint); background-clip: padding-box; }
+.sideRailRight { flex: 1 1 0; }
+/* Mirrors `.paneDivider`'s width in shell.css, so each rail sits under the
+   column it scrolls — `tests/css-modules.test.ts` holds the two together. */
+.sideRailGap { flex: none; width: 7px; }
+.sideRailSpan { height: 1px; }

package/src/client/use-row-window.ts

@@ -18,9 +18,13 @@ import { rowWindow, rowWindowForMount, sameRowWindow, type HeldRowWindow, type R
  *
  * @param scrollRef - the element that scrolls the rows.
  * @param rowCount - how many rows the diff has.
+ * @param enabled - false while soft wrap is on, when the rows are no longer a
+ *                  fixed height and `use-variable-row-window.ts` answers
+ *                  instead. Attaching both panes' listeners at once would put
+ *                  two readers on the same scroll.
  * @returns the rows to render and the spacer heights standing in for the rest.
  */
-export function useRowWindow(scrollRef: { current: HTMLElement | null }, rowCount: number, mountKey: string): RowWindow {
+export function useRowWindow(scrollRef: { current: HTMLElement | null }, rowCount: number, mountKey: string, enabled = true): RowWindow {
   const count = Number.isFinite(rowCount) ? Math.max(0, Math.trunc(rowCount)) : 0
   const [held, setHeld] = useState<HeldRowWindow>(() => ({
     mountKey, rowCount: count, win: rowWindow(0, 0, count),
@@ -31,7 +35,7 @@ export function useRowWindow(scrollRef: { current: HTMLElement | null }, rowCoun
   const visible = rowWindowForMount(held, count, mountKey)
   useEffect(() => {
     const el = scrollRef.current
-    if (el === null) return
+    if (el === null || !enabled) return
     const read = (): void => {
       const next = rowWindow(el.scrollTop, el.clientHeight, count)
       setHeld(prev => prev.mountKey === mountKey && prev.rowCount === count && sameRowWindow(prev.win, next)
@@ -50,6 +54,6 @@ export function useRowWindow(scrollRef: { current: HTMLElement | null }, rowCoun
       el.removeEventListener('scroll', read)
       observer.disconnect()
     }
-  }, [scrollRef, count, mountKey])
+  }, [scrollRef, count, mountKey, enabled])
   return visible
 }

package/src/client/use-variable-row-window.ts

@@ -0,0 +1,210 @@
+/**
+ * The windowing hook for panes whose rows are not all one height — a diff
+ * pane with soft wrap on.
+ *
+ * The fixed-height hook beside this one (`use-row-window.ts`) needs nothing
+ * from the DOM but the scroll offset, because `i * 20px` is the answer. Once
+ * lines wrap, only the DOM knows how tall a row came out, so this one measures
+ * — and measures ONLY the rows it just rendered, which is the window plus its
+ * overscan. Every other row carries an estimate computed from its text, so the
+ * scrollbar is close from the first paint instead of growing as the reader
+ * scrolls.
+ *
+ * A measurement that replaces an estimate for a row ABOVE the viewport moves
+ * everything below it, including what the reader is looking at. The scroll
+ * offset is corrected by the same delta in the same layout pass, so the rows
+ * on screen stay under the eye rather than sliding.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/client/use-variable-row-window
+ */
+
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+
+import { RowHeights, estimateRowHeight, variableRowWindow } from './row-heights.ts'
+import { DIFF_ROW_H, sameRowWindow, type RowWindow } from './row-window.ts'
+
+/** Attribute a pane puts on each measurable element, as `scope:index`. */
+export const ROW_INDEX_ATTR = 'data-gw-row'
+
+/**
+ * What a pane writes on an element it wants measured.
+ *
+ * The scope is half the value rather than a second attribute because two
+ * height models can be mounted inside one scroller — the aligned diff and the
+ * dense index column beside the editor — and a bare index would let each read
+ * the other's rows as its own.
+ *
+ * @param scope - which height model the element belongs to.
+ * @param index - the row's index WITHIN that model.
+ */
+export function rowMark(scope: string, index: number): Record<string, string> {
+  return { [ROW_INDEX_ATTR]: `${scope}:${index}` }
+}
+
+/**
+ * Columns that fit across a pane, from its width and one character's advance.
+ *
+ * Measured off a probe rather than assumed: the panes' font size is a theme
+ * variable a reader can change, so a hard-coded character width would put the
+ * estimate out by a third on the smallest setting.
+ *
+ * @param grid - the element the rows are laid out in.
+ * @returns columns across, or 0 when the element is not laid out yet.
+ */
+export function columnsAcross(grid: HTMLElement | null): number {
+  if (grid === null) return 0
+  const width = grid.clientWidth
+  if (!Number.isFinite(width) || width <= 0) return 0
+  const probe = document.createElement('span')
+  probe.textContent = '0'.repeat(100)
+  probe.style.cssText = 'position:absolute;visibility:hidden;white-space:pre;pointer-events:none'
+  grid.appendChild(probe)
+  const advance = probe.getBoundingClientRect().width / 100
+  probe.remove()
+  if (!Number.isFinite(advance) || advance <= 0) return 0
+  return Math.max(1, Math.floor(width / advance))
+}
+
+/** What a pane needs from this hook: the rows to render, where any row starts
+ *  — the change walk jumps to rows that are not in the DOM, so it cannot ask
+ *  the DOM where they are — and how tall each one came out. */
+export interface FlowWindow {
+  readonly win: RowWindow
+  readonly rowTop: (index: number) => number
+  /**
+   * How tall a row came out — what the side-by-side pane imposes as a
+   * `min-height` on BOTH of a row's cells.
+   *
+   * Two aligned columns are two separate grids, because a single grid's tracks
+   * are sized by the widest line in the file and a divider dragged across one
+   * would move nothing. Separate grids align only while every row is the same
+   * height in both, which soft wrap ends: the left cell can wrap to three lines
+   * and the right to one. Giving both the tallest side's height puts the rows
+   * back in step without merging the grids.
+   */
+  readonly rowHeight: (index: number) => number
+}
+
+export function useVariableRowWindow({
+  scrollRef, rowsRef, widthRef, texts, mountKey, scope, enabled, rowH = DIFF_ROW_H,
+}: {
+  /** The element that scrolls the rows. */
+  scrollRef: { current: HTMLElement | null }
+  /** The subtree the measurable rows live in. For an aligned diff this is the
+   *  element holding BOTH columns, since a row's height is the taller side. */
+  rowsRef: { current: HTMLElement | null }
+  /** What the wrap width is measured from; defaults to `rowsRef`. Separate
+   *  because the element holding both columns is twice as wide as the column
+   *  a line actually wraps inside. */
+  widthRef?: { current: HTMLElement | null }
+  /** One string per row, for the estimate. Identity matters: a new array
+   *  rebuilds the heights, so callers must memoize it. */
+  texts: readonly string[]
+  /** Identifies the mounted diff; a new one starts over. */
+  mountKey: string
+  /** Which rows in `rowsRef` are this model's — see {@link rowMark}. */
+  scope: string
+  /** Whether wrapping is on. When it is not, this hook attaches nothing and
+   *  allocates nothing: the pane uses the fixed-height window beside it, and
+   *  paying for a Fenwick tree over 20,000 rows to answer `i * 20` would be a
+   *  regression on the path that was never broken. */
+  enabled: boolean
+  /** One line's height in px. */
+  rowH?: number
+}): FlowWindow {
+  /** Columns across the pane. State, because the estimate depends on it and a
+   *  dragged divider changes it. */
+  const [columns, setColumns] = useState(0)
+  /**
+   * Bumped when a measurement moved a row.
+   *
+   * The heights live in a mutable structure, so changing one changes no
+   * identity React watches — and the side-by-side pane reads them DURING
+   * render, to impose each row's height on both of its cells. Without this
+   * the first pass would measure correctly and then never re-render to apply
+   * what it measured, which is a row that is one line taller on one side than
+   * on the other. Bumped only when something actually moved, and imposing a
+   * height does not change what is measured (the measured box is inside the
+   * cell), so it settles in one extra pass.
+   */
+  const [, bumpHeights] = useState(0)
+  const [win, setWin] = useState<RowWindow>(() => ({ start: 0, end: texts.length, padTop: 0, padBottom: 0 }))
+
+  /** Rebuilt only when the diff or the width really changes — never on scroll. */
+  const heights = useMemo(
+    () => new RowHeights(enabled ? texts.map(text => estimateRowHeight(text, columns, rowH)) : []),
+    // `mountKey` is in the list on purpose: two diffs can have identical text
+    // arrays by identity only if they are the same diff.
+    [texts, columns, rowH, mountKey, enabled],
+  )
+
+  const read = useCallback((): void => {
+    const el = scrollRef.current
+    if (el === null || heights.count === 0) return
+    const next = variableRowWindow(el.scrollTop, el.clientHeight, heights)
+    setWin(prev => sameRowWindow(prev, next) ? prev : next)
+  }, [scrollRef, heights])
+
+  // Scroll and resize. Passive: this listener never calls preventDefault, and
+  // saying so keeps it off the scroll's critical path.
+  useEffect(() => {
+    const el = scrollRef.current
+    if (el === null || !enabled) return
+    read()
+    const observer = new ResizeObserver(() => {
+      read()
+      setColumns(prev => {
+        const measured = columnsAcross((widthRef ?? rowsRef).current)
+        return measured === 0 || measured === prev ? prev : measured
+      })
+    })
+    el.addEventListener('scroll', read, { passive: true })
+    observer.observe(el)
+    return () => {
+      el.removeEventListener('scroll', read)
+      observer.disconnect()
+    }
+  }, [scrollRef, rowsRef, widthRef, read, enabled])
+
+  // What the rows actually came out as. Layout effect because the correction
+  // below must land in the same frame as the paint that needs it — a scroll
+  // offset fixed one frame late is a visible jump.
+  useLayoutEffect(() => {
+    const root = rowsRef.current
+    const scroller = scrollRef.current
+    if (!enabled || root === null || scroller === null) return
+    const before = heights.topAt(win.start)
+    // A row can have several measured elements — the two sides of an aligned
+    // diff — and the row is as tall as the tallest of them. Collected first,
+    // then written: writing each as it is read would leave the row at whichever
+    // side the DOM happened to list last.
+    const tallest = new Map<number, number>()
+    for (const node of root.querySelectorAll<HTMLElement>(`[${ROW_INDEX_ATTR}^="${scope}:"]`)) {
+      const index = Number(node.getAttribute(ROW_INDEX_ATTR)?.slice(scope.length + 1))
+      if (!Number.isInteger(index)) continue
+      tallest.set(index, Math.max(tallest.get(index) ?? 0, node.getBoundingClientRect().height))
+    }
+    let moved = false
+    for (const [index, height] of tallest) {
+      if (heights.set(index, height)) moved = true
+    }
+    if (!moved) return
+    // Rows above the viewport that turned out taller (or shorter) than their
+    // estimate move the whole document under the reader. Give the scroller the
+    // same delta back, so the row they were looking at stays where it was.
+    const after = heights.topAt(win.start)
+    if (after !== before) scroller.scrollTop += after - before
+    bumpHeights(version => version + 1)
+    read()
+  })
+
+  const rowTop = useCallback(
+    (index: number) => enabled ? heights.topAt(index) : Math.max(0, Math.trunc(index)) * rowH,
+    [enabled, heights, rowH],
+  )
+  const rowHeight = useCallback(
+    (index: number) => enabled ? heights.heightAt(index) : rowH,
+    [enabled, heights, rowH],
+  )
+  return { win, rowTop, rowHeight }
+}