@young1lin/dsh-ui-gitworkbench 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@young1lin/dsh-ui-gitworkbench",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Out-of-tree dsh web UI plugin: a session-header git workbench chip opening a drawer with the file tree, per-file diff, history, compare, staging, commit, and sync (fetch/pull/push).",
   "type": "module",
   "main": "lib/index.js",

package/src/client/CodeEditor.tsx

@@ -29,13 +29,15 @@ import { Compartment, EditorState, Facet, StateEffect, StateField, type Extensio
 import { EditorView, ViewPlugin, keymap, lineNumbers, highlightActiveLine, Decoration, type DecorationSet, type PluginValue, type ViewUpdate } from '@codemirror/view'
 import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { indentUnit } from '@codemirror/language'
-import { search, searchKeymap } from '@codemirror/search'
+import { getSearchQuery, search, searchKeymap, searchPanelOpen, type SearchQuery } from '@codemirror/search'
 
 import css from './GitWorkbenchPanel.module.css'
 import { blameCompartment, blameField, blameGutter, setBlame } from './blame-gutter.ts'
 import { bufferDiff } from './cm-diff.ts'
+import { SEARCH_PANEL_THEME } from './cm-search-theme.ts'
 import { lineTokenRanges } from './cm-tokens.ts'
 import type { HighlightRun } from './highlight.ts'
+import { EMPTY_INDEX, formatCount, indexMatches, ordinalAt, type MatchIndex } from './search-count.ts'
 import type { BlameLine } from './GitWorkbenchPanel.tsx'
 
 /**
@@ -140,6 +142,111 @@ abstract class IdleLayer implements PluginValue {
   protected abstract build(view: EditorView): DecorationSet
 }
 
+/**
+ * `3/128` beside the find field.
+ *
+ * `@codemirror/search` ships no count, which leaves the reader unable to tell
+ * a query that found nothing from one whose matches are all below the fold.
+ * The library exports no panel class to subclass either, so the label is put
+ * INTO the panel it already builds — one span, mounted after the search field
+ * and removed with the plugin.
+ *
+ * Counting walks the document, so it never happens on the keystroke path: the
+ * walk is deferred by the same idle the paint layers use, and it stops at
+ * `MATCH_CAP`. Moving between matches touches no document at all — the offsets
+ * are kept, and the ordinal is a binary search over them.
+ *
+ * While a new count is pending the previous number stays up rather than
+ * blanking. A query grows a character at a time, so the number it replaces is
+ * a near neighbour of the one arriving; blanking instead would collapse the
+ * span and shuffle the buttons beside it on every keystroke.
+ */
+class SearchCount implements PluginValue {
+  private index: MatchIndex = EMPTY_INDEX
+  private spec: string | undefined
+  private timer: ReturnType<typeof setTimeout> | undefined
+  private readonly label = document.createElement('span')
+
+  constructor(private readonly view: EditorView) {
+    this.label.className = 'cm-gwSearchCount'
+    // The count changes without the reader moving focus, which is exactly what
+    // a live region is for.
+    this.label.setAttribute('aria-live', 'polite')
+    this.sync(view, true)
+  }
+
+  update(update: ViewUpdate): void {
+    if (!searchPanelOpen(update.state)) {
+      // Closed, or never opened. Forget the query so reopening recounts rather
+      // than showing a number for a document that has since been edited.
+      this.spec = undefined
+      this.index = EMPTY_INDEX
+      this.label.remove()
+      return
+    }
+    this.sync(update.view, update.docChanged)
+  }
+
+  /** A view is destroyed on every file switch; a timer that outlives one is a
+   *  leak that also writes into a panel nobody is looking at. */
+  destroy(): void {
+    if (this.timer !== undefined) clearTimeout(this.timer)
+    this.timer = undefined
+    this.label.remove()
+  }
+
+  private sync(view: EditorView, docChanged: boolean): void {
+    this.mount(view)
+    const spec = specOf(getSearchQuery(view.state))
+    if (docChanged || spec !== this.spec) {
+      this.spec = spec
+      this.defer()
+    }
+    this.paint(view)
+  }
+
+  private mount(view: EditorView): void {
+    const panel = view.dom.querySelector('.cm-panel.cm-search')
+    if (panel === null || this.label.parentElement === panel) return
+    // Beside the field it is about, rather than at the end of a row whose
+    // width the checkboxes decide.
+    const field = panel.querySelector('input[name="search"]')
+    if (field === null) panel.append(this.label)
+    else field.after(this.label)
+  }
+
+  private defer(): void {
+    if (this.timer !== undefined) clearTimeout(this.timer)
+    this.timer = setTimeout(() => {
+      this.timer = undefined
+      const query = getSearchQuery(this.view.state)
+      this.index = query.valid
+        ? indexMatches(query.getCursor(this.view.state.doc))
+        : EMPTY_INDEX
+      this.paint(this.view)
+    }, REPAINT_IDLE_MS)
+  }
+
+  private paint(view: EditorView): void {
+    // An empty or unparseable query has nothing to report, and `0/0` under a
+    // field the reader has not typed in yet is noise.
+    if (!getSearchQuery(view.state).valid) {
+      this.label.textContent = ''
+      return
+    }
+    const at = view.state.selection.main.from
+    this.label.textContent = formatCount(this.index, ordinalAt(this.index, at))
+  }
+}
+
+/** What decides the match set. `replace` is part of the query and changes none
+ *  of it, so a recount on every keystroke in the replace field is waste. */
+function specOf(query: SearchQuery): string {
+  return [query.search, query.caseSensitive, query.regexp, query.wholeWord, query.literal].join('\u0000')
+}
+
+const searchCount = ViewPlugin.fromClass(SearchCount)
+
 /** The lines the view is about to show, 0-based and half-open. */
 function viewportLines(view: EditorView): { from: number; to: number } {
   const doc = view.state.doc
@@ -265,13 +372,28 @@ const paneTheme = EditorView.theme({
     fontVariantLigatures: 'none',
   },
   '.cm-content': { padding: '0', caretColor: 'var(--gs-accent)' },
+  // Opaque, and it has to be. The gutter plugin writes `position: sticky`
+  // as an INLINE style, so the numbers hold the pane's left edge while the
+  // code scrolls sideways underneath them — with a transparent fill that is
+  // not a gutter, it is a smear of code behind the line numbers. The library
+  // ships `#f5f5f5` here for the same reason; this is that fill, restated in
+  // the pane's own ground so every palette clothes it. Both hosts sit on
+  // `--gs-surface` (`.fbMain` in Files, `.diffPane` in Changes), and the cells
+  // painted a colour of their own — the active line, a changed line — paint
+  // over it exactly as they did over the transparency.
   '.cm-gutters': {
-    backgroundColor: 'transparent',
+    backgroundColor: 'var(--gs-surface)',
     color: 'var(--gs-fg-faint)',
     border: 'none',
     paddingRight: '8px',
+    // The fill has to reach further left than the gutter does. `left: 0` sticks
+    // it to the scrollport's CONTENT box, while the pane clips at its PADDING
+    // box — so the code keeps travelling through the pane's own left padding
+    // and surfaces beside the numbers. The bleed covers that strip; it is the
+    // ground colour, and the pane clips it, so over-reaching costs nothing.
+    boxShadow: '-16px 0 0 0 var(--gs-surface)',
   },
-  '.cm-activeLine': { backgroundColor: 'var(--gs-hover)' },
+  '.cm-activeLine': { backgroundColor: 'var(--gs-raise)' },
   // Same tints the diff columns use, so a line the reader just typed reads as
   // the same kind of thing as a line git already knows about.
   '.cm-gwChanged': { backgroundColor: 'var(--gs-add-line)' },
@@ -295,6 +417,9 @@ const paneTheme = EditorView.theme({
     whiteSpace: 'nowrap',
     cursor: 'pointer',
   },
+  // Ctrl/Cmd+F. Spread rather than written here so a test can read the spec
+  // without loading React and a CSS Module; see `cm-search-theme.ts`.
+  ...SEARCH_PANEL_THEME,
 })
 
 export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel, onSave, blame, notCommitted, readOnly, onBlameClick }: {
@@ -358,6 +483,7 @@ export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel
       lineNumbers(),
       history(),
       search({ top: true }),
+      searchCount,
       highlightActiveLine(),
       paintCompartment.of(paintFacet.of(paint)),
       painter,

package/src/client/DiffViews.tsx

@@ -4,6 +4,7 @@ import {
 } from 'react'
 
 import { attachWordRanges, gutterSides, overlayRanges, parseRows, type Row, type RowWithRanges } from './diff-model.ts'
+import { CR, CR_GLYPH, splitOnCr } from './cr-mark.ts'
 import { parsePatch } from '../patch-model.ts'
 import { alignRows, allBlockLines, allBlockTally, blockActionsDisabled, blockCount, blockEdge, blockIsWholeFile, blockLines, blockTally, currentActionBlock, needsFirstBlockClearance, sideBodyState, type SideCell, type SideRow } from './side-rows.ts'
 import { anchorFor, blockNearestTo, blockTopsFromRows, blockTopsFromSideRows, countBlocks, scrollTopFor, stepBlockIndex, unifiedBlocks } from './diff-nav.ts'
@@ -170,14 +171,25 @@ function rowClass(kind: Row['kind']): string {
 function renderCode(row: RowWithRanges, tokens: readonly HighlightRun[]): ReactNode {
   if (row.kind === 'hunk') return row.text
   const painted = overlayRanges(tokens.length > 0 ? tokens : [{ text: row.text }], row.ranges ?? [])
-  if (painted.length === 1 && painted[0]!.color === undefined && !painted[0]!.mark) return row.text
-  return painted.map((tok, i) => (
-    <span
-      key={i}
-      className={tok.mark ? (row.kind === 'add' ? css.wordAdd : css.wordDel) : undefined}
-      style={tok.color === undefined && !tok.italic ? undefined : { color: tok.color, fontStyle: tok.italic ? 'italic' : undefined }}
-    >{tok.text}</span>
-  ))
+  // The trailing-CR marker rides AFTER everything painted: word ranges are
+  // char offsets into the row text, so a mid-line glyph would shift them.
+  // Mid-line CRs (a CR-only file) stay invisible here; the side pane draws those.
+  const crTail = row.text.endsWith(CR)
+    ? <span className={css.crMark} aria-hidden="true">{CR_GLYPH}</span>
+    : null
+  if (painted.length === 1 && painted[0]!.color === undefined && !painted[0]!.mark) {
+    return crTail === null ? row.text : <>{row.text}{crTail}</>
+  }
+  return (<>
+    {painted.map((tok, i) => (
+      <span
+        key={i}
+        className={tok.mark ? (row.kind === 'add' ? css.wordAdd : css.wordDel) : undefined}
+        style={tok.color === undefined && !tok.italic ? undefined : { color: tok.color, fontStyle: tok.italic ? 'italic' : undefined }}
+      >{tok.text}</span>
+    ))}
+    {crTail}
+  </>)
 }
 
 /* ---------- side-by-side diff rendering (working tree only) ---------- */
@@ -1043,16 +1055,33 @@ function sideCodeClass(row: SideRow, side: 'left' | 'right'): string {
   return `${side === 'left' ? css.sideCodeDel : css.sideCodeAdd} ${css.sideCellBlock}`
 }
 
-/** One cell's Shiki runs, or its plain text when no tokens exist. */
+/** One text with every carriage return drawn as the CR glyph. No CR means
+ * the text comes back untouched — the common line, on both sides, costs one
+ * `includes`. The glyph spans are aria-hidden and unselectable, so copying a
+ * line copies code, not markers. */
+function renderWithCrMarks(text: string): ReactNode {
+  const parts = splitOnCr(text)
+  if (parts.length === 1) return text
+  const out: ReactNode[] = [parts[0]!]
+  for (let i = 1; i < parts.length; i += 1) {
+    out.push(<span key={`cr${i}`} className={css.crMark} aria-hidden="true">{CR_GLYPH}</span>)
+    out.push(parts[i]!)
+  }
+  return out
+}
+
+/** One cell's Shiki runs, or its plain text when no tokens exist; either way
+ * each carriage return in the cell is drawn, so a line whose only change is
+ * its ending shows the difference instead of two identical-looking cells. */
 function renderSideCode(cell: SideCell | null, tokens: readonly HighlightRun[] | undefined): ReactNode {
   if (cell === null) return ''
-  if (tokens === undefined || tokens.length === 0) return cell.text
-  if (tokens.length === 1 && tokens[0]!.color === undefined && !tokens[0]!.italic) return cell.text
+  if (tokens === undefined || tokens.length === 0) return renderWithCrMarks(cell.text)
+  if (tokens.length === 1 && tokens[0]!.color === undefined && !tokens[0]!.italic) return renderWithCrMarks(cell.text)
   return tokens.map((tok, i) => (
     <span
       key={i}
       style={tok.color === undefined && !tok.italic ? undefined : { color: tok.color, fontStyle: tok.italic ? 'italic' : undefined }}
-    >{tok.text}</span>
+    >{renderWithCrMarks(tok.text)}</span>
   ))
 }
 

package/src/client/cm-search-theme.ts

@@ -0,0 +1,250 @@
+/**
+ * The Ctrl/Cmd+F panel, restated in the drawer's own controls.
+ *
+ * `@codemirror/search` ships the panel with the library's stock chrome, and
+ * none of it follows a palette: the strip is `#f5f5f5` with black text (or
+ * `#333338` with white), the buttons carry a grey `linear-gradient` and a 1px
+ * radius, the fields are `1px solid silver`, the ticks are whatever the
+ * platform draws, and a match is `#ffff0054`. Worse, form controls do not
+ * inherit a font, and the library asks for `font-size: 70%` without naming a
+ * family — so the panel renders in the browser's default face at a size no
+ * other control in the drawer uses. Over a Nord or a cyberpunk drawer the
+ * strip stays light grey with black text on it.
+ *
+ * So the panel is dressed here, and ONLY through `--gs-*` tokens: every
+ * palette then clothes it for free, exactly as it clothes the pane around it.
+ * None of the shapes are invented for this panel — each is the one already on
+ * screen beside it:
+ *
+ * - the strip follows `.blockBar`, the drawer's other float over code, where
+ *   `--gs-surface-2` plus a soft shadow are what keep it readable.
+ * - the buttons follow the shared compact control (`.treeIcon`,
+ *   `.funnelPreset`, `.layoutButton`): `--gs-h-compact`, `--gs-pad-compact`,
+ *   `--gs-r-control`, `--gs-t-dense`, and the same hover.
+ * - the fields follow the tree's own filter box, `.fbSearch`.
+ * - the ticks follow `.funnelRow input[type=checkbox]`: `appearance: none`
+ *   and a rotated border for the mark, so nothing ships as an asset and every
+ *   state recolors with the theme.
+ *
+ * Layout is the other half, and it stays in INLINE FLOW on purpose. The
+ * obvious answer — make the panel a wrapping flex row with one gap — costs
+ * the find/replace break: the library separates the two halves with a `<br>`,
+ * and Blink gives a `<br>` no box of its own inside a flex container. Neither
+ * `flex-basis: 100%`, `width: 100%` nor `min-width: 100%` on it makes the
+ * replace field start a line (measured on the running app; all four left it
+ * beside `by word`). So the controls stay inline-level atoms instead, and
+ * carry the rhythm the library asked for with `.2em .6em .2em 0` in a single
+ * margin. Wrapping still works when the pane is narrow: an atomic inline is a
+ * line-break opportunity, which is what lets the strip reflow in the 190px
+ * the Changes column drags down to.
+ *
+ * Kept out of `CodeEditor.tsx` so a test can read it: that file pulls React
+ * and a CSS Module, and neither loads under vitest.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/client/cm-search-theme
+ */
+
+/** A CodeMirror theme spec, narrowed to what this module writes: one flat
+ *  declaration block per selector, no nesting and no at-rules. */
+export type ThemeSpec = Readonly<Record<string, Readonly<Record<string, string>>>>
+
+/** Selector prefix for everything inside the panel. Spelled out per rule
+ *  rather than nested, because CodeMirror's style builder only nests under a
+ *  `&`, and a flat key is what a test can read back. */
+const PANEL = '.cm-panel.cm-search'
+
+/** Between two controls on a row, and between the find row and the replace
+ *  row. The row gap is carried as a bottom margin per control, because inline
+ *  flow has no `gap`; the panel's bottom padding is short by exactly this. */
+const GAP = '6px'
+const ROW_GAP = '6px'
+
+export const SEARCH_PANEL_THEME: ThemeSpec = {
+  /* The strip. `.cm-panels` is the element the library paints, so the
+     override belongs there rather than on the panel inside it. The shadow is
+     `.blockBar`'s: this is a sticky bar with code scrolling under it, and a
+     border alone leaves the two planes touching. */
+  '.cm-panels': {
+    backgroundColor: 'var(--gs-surface-2)',
+    color: 'var(--gs-fg)',
+    boxShadow: '0 4px 14px var(--gs-shadow)',
+  },
+  '.cm-panels-top': { borderBottom: '1px solid var(--gs-border)' },
+  '.cm-panels-bottom': { borderTop: '1px solid var(--gs-border)' },
+
+  [PANEL]: {
+    position: 'relative',
+    /* The right gutter is the close button's: it is positioned over it, so
+       nothing may wrap underneath. The bottom is short by ROW_GAP, which every
+       control carries below itself; the two add back up to the top. */
+    padding: '8px 32px 2px 10px',
+    lineHeight: '1',
+  },
+  /* One rhythm for the whole strip, replacing the library's `.2em .6em .2em 0`.
+     `vertical-align: top` with one height is what makes a row of controls a
+     row rather than four boxes on a shared baseline. */
+  [`${PANEL} input, ${PANEL} button, ${PANEL} label`]: {
+    boxSizing: 'border-box',
+    verticalAlign: 'top',
+    margin: `0 ${GAP} ${ROW_GAP} 0`,
+  },
+
+  [`${PANEL} .cm-textfield`]: {
+    /* A column rather than a share of the row: find and replace are read as a
+       pair, and a pair that does not start and end at the same x is noise. */
+    width: '220px',
+    maxWidth: '100%',
+    boxSizing: 'border-box',
+    height: 'var(--gs-h-compact)',
+    padding: '0 8px',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-dense)',
+    color: 'var(--gs-fg)',
+    backgroundColor: 'var(--gs-surface)',
+    border: '1px solid var(--gs-border)',
+    borderRadius: 'var(--gs-r-control)',
+  },
+  [`${PANEL} .cm-textfield::placeholder`]: { color: 'var(--gs-fg-faint)' },
+  [`${PANEL} .cm-textfield:focus`]: { outline: 'none', borderColor: 'var(--gs-accent)' },
+
+  /* `3/128`. A span rather than a control, so it takes none of the shared
+     rule above and states its own box; the meta size and the faint ink keep it
+     a readout beside the field rather than a fourth thing to click. */
+  [`${PANEL} .cm-gwSearchCount`]: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    height: 'var(--gs-h-compact)',
+    margin: `0 ${GAP} ${ROW_GAP} 0`,
+    verticalAlign: 'top',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-meta)',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    fontVariantNumeric: 'tabular-nums',
+    color: 'var(--gs-fg-faint)',
+  },
+
+  [`${PANEL} .cm-button`]: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    height: 'var(--gs-h-compact)',
+    padding: 'var(--gs-pad-compact)',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-dense)',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    color: 'var(--gs-fg-dim)',
+    /* The gradient is the library's, and it is on `background-image`: a
+       background COLOUR alone would leave it painted on top. */
+    backgroundColor: 'transparent',
+    backgroundImage: 'none',
+    border: '1px solid var(--gs-border)',
+    borderRadius: 'var(--gs-r-control)',
+    cursor: 'pointer',
+    transition: 'background 120ms ease, color 120ms ease, border-color 120ms ease',
+  },
+  [`${PANEL} .cm-button:hover`]: {
+    color: 'var(--gs-fg)',
+    backgroundColor: 'var(--gs-raise)',
+    backgroundImage: 'none',
+    borderColor: 'var(--gs-fg-fainter)',
+  },
+  /* The library keeps a second gradient for the pressed state. */
+  [`${PANEL} .cm-button:active`]: {
+    backgroundColor: 'var(--gs-raise)',
+    backgroundImage: 'none',
+  },
+  [`${PANEL} .cm-button:focus-visible`]: { outline: '2px solid var(--gs-accent)', outlineOffset: '1px' },
+
+  [`${PANEL} label`]: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    height: 'var(--gs-h-compact)',
+    gap: '5px',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-meta)',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    color: 'var(--gs-fg-dim)',
+    cursor: 'pointer',
+    WebkitUserSelect: 'none',
+    userSelect: 'none',
+  },
+
+  [`${PANEL} input[type=checkbox]`]: {
+    WebkitAppearance: 'none',
+    appearance: 'none',
+    position: 'relative',
+    boxSizing: 'border-box',
+    width: '14px',
+    height: '14px',
+    margin: '0',
+    backgroundColor: 'transparent',
+    border: '1px solid var(--gs-fg-fainter)',
+    borderRadius: '3px',
+    cursor: 'pointer',
+    transition: 'background 120ms ease, border-color 120ms ease',
+  },
+  [`${PANEL} input[type=checkbox]:hover`]: { borderColor: 'var(--gs-fg-dim)' },
+  [`${PANEL} input[type=checkbox]:checked`]: {
+    backgroundColor: 'var(--gs-accent)',
+    borderColor: 'var(--gs-accent)',
+  },
+  [`${PANEL} input[type=checkbox]:focus-visible`]: { outline: '2px solid var(--gs-accent)', outlineOffset: '1px' },
+  [`${PANEL} input[type=checkbox]:checked::after`]: {
+    content: '""',
+    position: 'absolute',
+    left: '4px',
+    top: '1px',
+    width: '3px',
+    height: '7px',
+    border: 'solid var(--gs-on-accent)',
+    borderWidth: '0 1.5px 1.5px 0',
+    transform: 'rotate(42deg)',
+  },
+
+  /* Close. Square and quiet — it dismisses a panel, so it is not the drawer's
+     red header close. `background-color` is restated because the library sets
+     it to `inherit`, which would take the strip's fill. */
+  [`${PANEL} [name=close]`]: {
+    position: 'absolute',
+    top: '8px',
+    right: '8px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '20px',
+    height: '20px',
+    padding: '0',
+    margin: '0',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-ui)',
+    lineHeight: '1',
+    color: 'var(--gs-fg-faint)',
+    backgroundColor: 'transparent',
+    border: '1px solid transparent',
+    borderRadius: 'var(--gs-r-control)',
+    cursor: 'pointer',
+  },
+  [`${PANEL} [name=close]:hover`]: { color: 'var(--gs-fg)', backgroundColor: 'var(--gs-raise)' },
+  [`${PANEL} [name=close]:focus-visible`]: { outline: '2px solid var(--gs-accent)', outlineOffset: '1px' },
+
+  /* A hit, and the hit the caret is on. Amber is what an editor uses to say
+     "found", and `--gs-warn` is the only warm token every palette defines;
+     the current one takes the drawer's single selected idiom —
+     `--gs-accent-bg` inside `--gs-accent-border` — rather than a second
+     highlighter colour. Declared after the plain match: both classes sit on
+     the same span at the same specificity, so source order decides. */
+  '.cm-searchMatch': {
+    backgroundColor: 'color-mix(in srgb, var(--gs-warn) 30%, transparent)',
+    borderRadius: '2px',
+  },
+  '.cm-searchMatch-selected': {
+    backgroundColor: 'color-mix(in srgb, var(--gs-accent) 34%, transparent)',
+    boxShadow: 'inset 0 0 0 1px var(--gs-accent)',
+  },
+}

package/src/client/cr-mark.ts

@@ -0,0 +1,39 @@
+/**
+ * Making the carriage return visible in diff views.
+ *
+ * A diff line's text carries the CR byte through verbatim (`fileSides` serves
+ * git's own bytes), and a browser draws nothing for it: two cells whose only
+ * difference is a line ending render as byte-identical text, so a whole-file
+ * CRLF rewrite reads as a wall of changed lines with no visible change in
+ * any of them. The fix is not to strip the CR — the byte must survive into
+ * every patch the block actions emit — but to draw a glyph at each CR while
+ * RENDERING, the way `git diff` spells it as `^M`.
+ *
+ * The glyph is U+240D (SYMBOL FOR CARRIAGE RETURN), the standard picture of
+ * the control character, so a marked line reads as "ends in CR" rather than
+ * as a stray character in the code.
+ *
+ * Pure: no React, no CSS, no git. `tests/cr-mark.test.ts` loads it directly.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/cr-mark
+ */
+
+/** Built rather than escaped so this source file survives any tool that
+ * normalises text-mode line endings on its way to disk. */
+export const CR = String.fromCharCode(13)
+
+/** What a carriage return is drawn as. */
+export const CR_GLYPH = '\u240d'
+
+/**
+ * Split text at every carriage return, so a renderer can interleave one
+ * {@link CR_GLYPH} span between consecutive parts.
+ *
+ * @param text - one cell's text, as the diff model carries it.
+ * @returns the parts between CRs; a text with no CR comes back as itself in
+ *          one piece (length 1), which is the caller's cheap early-out.
+ */
+export function splitOnCr(text: string): readonly string[] {
+  if (!text.includes(CR)) return [text]
+  return text.split(CR)
+}

package/src/client/locales.ts

@@ -99,7 +99,7 @@ export const zh: Record<WorkbenchKey, string> = {
   filesDiscardOpen: '丢弃并打开',
   // Read-only rather than withheld: in this view READING the file is the
   // point, and only saving it back would rewrite bytes nobody touched.
-  fileReadOnlyCrlf: '这个文件的行尾是 CRLF，只能查看不能编辑（编辑器会把行尾统一成 LF，保存时整份文件都会被改写）。',
+  fileReadOnlyCrlf: '这个文件的行尾是 CRLF，只能查看不能编辑（编辑器会把行尾统一成 LF，保存时整份文件都会被改写）；建议把行尾统一成 LF。',
   fileReadOnlyEncoding: '这个文件不是 UTF-8 编码，只能查看不能编辑：页面上的文字是一次有损解码，保存回去会改写每一个非 ASCII 字节。',
   blameLine: '第 {line} 行',
   blameInHistory: '他在本文件的提交',
@@ -292,7 +292,7 @@ export const zh: Record<WorkbenchKey, string> = {
   blameUncommitted: '尚未提交',
   blameFailed: '这个文件没有可追溯的历史（可能是未跟踪的新文件）。',
   blameTruncated: '文件过长，追溯信息只显示了前面一部分。',
-  crlfNotice: '这个文件的行尾是 CRLF，暂不支持在线编辑（编辑框会把行尾统一成 LF，保存时整份文件都会被改写）；查看和按块暂存/撤回不受影响。',
+  crlfNotice: '这个文件的行尾是 CRLF，暂不支持在线编辑（编辑框会把行尾统一成 LF，保存时整份文件都会被改写）；建议把行尾统一成 LF。差异里的回车已用 ␍ 标出；查看和按块暂存/撤回不受影响。',
   encodingNotice: '这个文件不是 UTF-8 编码（可能是 GBK、Shift JIS 之类），暂不支持在线编辑：页面上看到的文字是一次有损解码，保存回去会把文件里每一个非 ASCII 字节都改写掉，包括你没动过的行。查看和按块暂存/撤回不受影响。',
   saveFailed: '保存失败',
   saveUnavailable: '当前宿主还不支持保存（需要重启 dsh web 加载新版宿主端）。',
@@ -339,7 +339,7 @@ export const en: Record<WorkbenchKey, string> = {
   filesVanished: '{path} is not in the repository any more — deleted, renamed, or on a branch that no longer has it.',
   filesUnsavedAsk: 'You have unsaved edits; opening another file discards them.',
   filesDiscardOpen: 'Discard and open',
-  fileReadOnlyCrlf: 'This file uses CRLF line endings, so it opens read-only (the editor normalises them to LF, and a save would rewrite every line).',
+  fileReadOnlyCrlf: 'This file uses CRLF line endings, so it opens read-only (the editor normalises them to LF, and a save would rewrite every line); normalising the endings to LF is recommended.',
   fileReadOnlyEncoding: 'This file is not UTF-8, so it opens read-only: the text shown is a lossy decode, and saving it back would rewrite every non-ASCII byte.',
   blameLine: 'Line {line}',
   blameInHistory: 'Their commits on this file',
@@ -517,7 +517,7 @@ export const en: Record<WorkbenchKey, string> = {
   blameUncommitted: 'Not committed yet',
   blameFailed: 'This file has no history to blame (it may be a new, untracked file).',
   blameTruncated: 'The file is long, so blame is shown for the first part only.',
-  crlfNotice: 'This file has CRLF line endings, which the editor does not support yet (the edit box would turn every ending into LF, so a save rewrites the whole file); viewing and block staging/rolling back still work.',
+  crlfNotice: 'This file has CRLF line endings, which the editor does not support yet (the edit box would turn every ending into LF, so a save rewrites the whole file); normalising the endings to LF is recommended. Carriage returns are marked ␍ in the diff; viewing and block staging/rolling back still work.',
   encodingNotice: 'This file is not UTF-8 (GBK, Shift JIS or similar), so the editor is unavailable: the text shown is a lossy decode of it, and saving that back would rewrite every non-ASCII byte in the file, including lines you never touched. Viewing and block staging/rolling back still work.',
   saveFailed: 'Save failed',
   saveUnavailable: 'This host does not support saving yet — restart dsh web to load the new host half.',