@young1lin/dsh-ui-gitworkbench 0.1.3 → 0.1.5

package/src/client/GitWorkbenchPanel.module.css

@@ -438,6 +438,13 @@
 .drawer > .tabs { z-index: 23; }
 .drawer > .compareBar { z-index: 22; }
 .drawer > .syncBar { z-index: 20; }
+/* The roll-back confirmation, and the one deliberate exception to the
+   strictly-decreasing rule above: it is the LAST child and outranks every
+   other, because it is not a popover dropping through its siblings but a
+   modal that has to cover them. It also has to be declared here — the
+   `> *:not(.resizer)` rule out-specifies a bare `.confirmScrim`, which is
+   what pinned it to the bottom of the drawer as an in-flow flex item. */
+.drawer > .confirmScrim { position: absolute; inset: 0; z-index: 40; }
 /* Maximized drops the inset and the rounding: at full bleed they would only
    waste edge pixels the diff wants. */
 .overlayMax { padding: 0; gap: 0; }
@@ -726,6 +733,402 @@
 }
 .commitPopTop { display: flex; align-items: center; gap: 8px; }
 .commitPopTop .commitWhen { margin-right: auto; }
+/* Author / committer / exact date — the precise answers the row's summary
+   ("3 weeks ago") deliberately defers to the hover card. */
+.commitPopMeta {
+  display: flex; flex-direction: column; gap: 2px;
+  color: var(--gs-fg-muted);
+  font-size: var(--gs-t-dense); line-height: 16px;
+}
+/* The filter box in the history pane head — it flexes to fill the head beside
+   the title (the funnel button is flex:none), so a wide pane gets a wide box
+   and a narrow pane still leaves room to type. */
+.commitFilter {
+  flex: 1 1 auto; min-width: 120px;
+  height: var(--gs-h-control); box-sizing: border-box;
+  padding: 0 10px;
+  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);
+  outline: none;
+}
+.commitFilter:focus { border-color: var(--gs-accent); }
+.commitFilter::placeholder { color: var(--gs-fg-faint); }
+/* Active criteria under the head: one removable chip each, grammar tokens as
+   their own labels — the chip IS the query it would take to retype it. */
+.filterChips {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+  flex: none;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--gs-border-soft);
+}
+.filterChip {
+  display: inline-flex; align-items: center; gap: 2px;
+  max-width: 220px;
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
+  background: var(--gs-surface-2);
+  font-size: var(--gs-t-dense); line-height: 18px;
+}
+.filterChipLabel {
+  padding: 2px 4px 2px 8px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--gs-fg-muted);
+}
+.filterChipRemove {
+  flex: none;
+  padding: 0 6px;
+  border: none; border-left: 1px solid var(--gs-border-soft);
+  background: transparent; color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-dense); line-height: 20px;
+  cursor: pointer;
+}
+.filterChipRemove:hover { color: var(--gs-danger, var(--gs-fg)); }
+.filterClear {
+  border: none; background: transparent;
+  padding: 2px 4px;
+  color: var(--gs-fg-faint);
+  font-family: inherit; font-size: var(--gs-t-dense); line-height: 18px;
+  cursor: pointer;
+}
+.filterClear:hover { color: var(--gs-fg); }
+/* The funnel dropdown — RefPicker's positioning pattern (relative anchor,
+   absolute panel, dismiss-on-outside). Grows leftward: it sits at the pane's
+   right edge. */
+.funnel { position: relative; display: inline-flex; }
+/* The button itself carries no geometry of its own — it joined the shared
+   control vocabulary above (`.btn, .refButton, …`) so it reads as a sibling of
+   every other button in the drawer, not a foreign element. */
+.funnelButton.funnelButtonActive { color: var(--gs-accent); border-color: var(--gs-accent); }
+
+/* The panel is a flex COLUMN with exactly ONE scrolling child. It used to
+   scroll itself AND cap its list at 240px: two nested scroll containers in a
+   331px box that had ~700px of anchor space to spend, so a long roster got a
+   fat inner scrollbar instead of the height already available. The tab strip
+   and the footer are `flex: none`; the list takes what is left. */
+.funnelPop {
+  position: fixed; z-index: 40;
+  display: flex; flex-direction: column;
+  width: 320px; max-width: calc(100vw - 24px);
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--gs-border); border-radius: var(--gs-r-surface);
+  background: var(--gs-panel);
+  box-shadow: 0 16px 40px var(--gs-shadow);
+  font-size: var(--gs-t-dense);
+}
+/* One section at a time — the panel's height is a property of its design,
+   not of how many authors the repository happens to have. The strip is a
+   segmented control (inset track, raised active chip) rather than one
+   outlined pill beside two bare words, which read as a button and two labels
+   instead of one three-way choice. */
+.funnelTabs {
+  flex: none;
+  display: flex; gap: 2px;
+  margin: 8px 8px 0;
+  padding: 2px;
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-pill);
+  background: var(--gs-bg);
+}
+.funnelTab {
+  flex: 1; min-width: 0;
+  height: 22px; padding: 0 8px;
+  border: none; border-radius: var(--gs-r-pill);
+  background: transparent;
+  color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  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);
+}
+.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. */
+.funnelTabCount { margin-left: 4px; color: var(--gs-accent); font-variant-numeric: tabular-nums; }
+
+/* The body of the active section. Everything inside is `flex: none` except
+   the list, which is the one thing allowed to scroll. */
+.funnelPane {
+  flex: 1 1 auto; min-height: 0;
+  display: flex; flex-direction: column; gap: 6px;
+  padding: 8px;
+}
+.funnelCaption {
+  flex: none;
+  color: var(--gs-fg-faint);
+  font-size: 11px; line-height: 14px;
+  letter-spacing: 0.04em; text-transform: uppercase;
+}
+
+/* Which bound a picked day lands in. Deliberately NOT the tab strip's shape:
+   a rect track with an accent-tinted chip under a caption, because two
+   identical pill rows stacked six pixels apart said nothing about meaning two
+   different things. */
+.funnelBounds {
+  flex: none;
+  display: flex; gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--gs-border-soft); border-radius: var(--gs-r-control);
+  background: var(--gs-bg);
+}
+.funnelBoundBtn {
+  flex: 1; min-width: 0;
+  height: 20px; padding: 0 6px;
+  border: none; 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;
+  cursor: pointer;
+  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);
+}
+
+/* The calendar — modern-grid look in the drawer's own tokens. */
+.cal { flex: none; display: flex; flex-direction: column; gap: 4px; }
+.calHead { display: flex; align-items: center; gap: 4px; }
+.calTitle {
+  flex: 1; text-align: center;
+  color: var(--gs-fg);
+  font-size: var(--gs-t-dense); line-height: 20px;
+}
+.calNav {
+  flex: none;
+  width: 22px; height: 20px; padding: 0;
+  border: none; border-radius: var(--gs-r-control);
+  background: transparent;
+  color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-ui);
+  cursor: pointer;
+}
+.calNav:hover { color: var(--gs-fg); background: var(--gs-raise); }
+.calWeek, .calGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.calWeek span {
+  text-align: center;
+  color: var(--gs-fg-faint);
+  font-size: 11px; line-height: 14px;
+}
+.calGrid button {
+  height: 26px;
+  border: none; border-radius: var(--gs-r-control);
+  background: transparent;
+  color: var(--gs-fg-muted);
+  font-family: inherit; font-size: var(--gs-t-dense);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+.calGrid button:hover { background: var(--gs-raise); color: var(--gs-fg); }
+.calGrid button.calOut { color: var(--gs-fg-fainter); }
+.calGrid button.calToday { color: var(--gs-accent); font-weight: 600; }
+/* Days strictly between the two bounds: the span the filter actually means,
+   which two lone marked endpoints never showed. */
+.calGrid button.calIn { background: var(--gs-accent-bg); color: var(--gs-fg); }
+.calGrid button.calMark {
+  background: var(--gs-accent);
+  color: var(--gs-on-accent);
+  font-weight: 600;
+}
+
+/* The two bound readouts, side by side under the grid. */
+.funnelBoundRows { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.funnelBoundRow {
+  display: flex; align-items: center; gap: 4px; min-width: 0;
+  box-sizing: border-box;
+  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;
+}
+.funnelBoundKey { flex: none; color: var(--gs-fg-faint); }
+.funnelBoundVal {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--gs-fg-faint);
+  font-variant-numeric: tabular-nums;
+}
+.funnelBoundValSet { color: var(--gs-fg); }
+.funnelBoundClear {
+  flex: none;
+  padding: 0 2px;
+  border: none; background: transparent;
+  color: var(--gs-fg-dim);
+  font-family: inherit; font-size: var(--gs-t-dense); line-height: 1;
+  cursor: pointer;
+}
+.funnelBoundClear:hover { color: var(--gs-danger, var(--gs-fg)); }
+
+.funnelSearch {
+  flex: none;
+  box-sizing: border-box;
+  height: 26px; 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);
+  outline: none;
+}
+.funnelSearch::placeholder { color: var(--gs-fg-faint); }
+.funnelSearch:focus { border-color: var(--gs-accent); box-shadow: 0 0 0 2px var(--gs-accent-bg); }
+.funnelList {
+  flex: 1 1 auto; min-height: 0;
+  overflow-y: auto; overscroll-behavior: contain;
+  display: flex; flex-direction: column; gap: 1px;
+  margin: 0 -4px; padding: 0 4px;
+  scrollbar-width: thin; scrollbar-color: var(--gs-fg-fainter) transparent;
+}
+.funnelList::-webkit-scrollbar { width: 10px; }
+.funnelList::-webkit-scrollbar-track { background: transparent; }
+.funnelList::-webkit-scrollbar-thumb {
+  background: var(--gs-fg-fainter);
+  border: 3px solid transparent; border-radius: 5px;
+  background-clip: content-box;
+}
+/* Every row is the same four slots — chevron, tick, glyph, name — then the
+   count. Directories used to skip the glyph that files carried, so a folder
+   name and the file names under it started at different x and the list had a
+   ragged left edge. */
+.funnelRow {
+  display: flex; align-items: center; gap: 6px;
+  box-sizing: border-box;
+  min-height: 24px; padding: 0 4px;
+  border-radius: var(--gs-r-control);
+  cursor: pointer;
+}
+.funnelRow:hover { background: var(--gs-raise); }
+.funnelRow:has(input[type='checkbox']:checked) .funnelName,
+.funnelRow:has(input[type='checkbox']:indeterminate) .funnelName { color: var(--gs-fg); }
+/* The tick IS the input — no wrapper span, no visually-hidden twin: the live
+   probes select `[class*="funnelRow"] input[type=checkbox]` and the directory
+   row's DIRECT child, so the markup has to stay flat. `appearance: none`
+   hands us the box; the mark is a rotated border, so nothing ships as an
+   asset and every state recolors with the theme. */
+.funnelRow input[type='checkbox'] {
+  appearance: none; -webkit-appearance: none;
+  flex: none; position: relative;
+  box-sizing: border-box;
+  width: 14px; height: 14px; margin: 0;
+  border: 1px solid var(--gs-fg-fainter); border-radius: 3px;
+  background: transparent;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.funnelRow input[type='checkbox']:hover { border-color: var(--gs-fg-dim); }
+.funnelRow input[type='checkbox']:checked,
+.funnelRow input[type='checkbox']:indeterminate {
+  background: var(--gs-accent); border-color: var(--gs-accent);
+}
+.funnelRow input[type='checkbox']:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 1px; }
+.funnelRow input[type='checkbox']:checked::after {
+  content: ''; position: absolute;
+  left: 4px; top: 1px; width: 3px; height: 7px;
+  border: solid var(--gs-on-accent); border-width: 0 1.5px 1.5px 0;
+  transform: rotate(42deg);
+}
+/* Partial — a folder some of whose subtree is ticked. */
+.funnelRow input[type='checkbox']:indeterminate::after {
+  content: ''; position: absolute;
+  left: 2px; top: 5px; width: 8px; height: 2px;
+  border-radius: 1px;
+  background: var(--gs-on-accent);
+}
+/* Tree chrome in the drawer's own visual language: a directory folds with the
+   chevron the file tree uses, and both glyphs are inline SVG in the shape
+   IntelliJ's New UI icon set uses — a 16px grid, 1px strokes, no fill,
+   rounded joins, outlines rather than the filled silhouettes the old UI
+   shipped. Drawn in `PathDirGlyph` / `PathFileGlyph` rather than imported:
+   the bundle purity gate forbids an icon package, and the picker needs
+   exactly these two. Indentation is the row's own padding ALONE; the nested
+   rail this used to draw was `--gs-border-soft` over `--gs-panel` (the same
+   value as `--gs-raise` in the GitHub palettes, so it vanished under hover)
+   and its margin double-counted every level. */
+.pathNode { display: flex; flex-direction: column; }
+.pathChildren { display: flex; flex-direction: column; }
+/* One shared slot so a folder and a file start their names at the same x —
+   New UI draws both on the same 16px grid, and the column only lines up if
+   the box does too. `--gs-fg-dim` is the neutral the tree icons sit at there:
+   present, but never louder than the filename beside them. */
+.pathFileGlyph, .pathDirGlyph {
+  flex: none;
+  width: 16px; height: 16px;
+  color: var(--gs-fg-dim);
+}
+.funnelRow:hover .pathFileGlyph,
+.funnelRow:hover .pathDirGlyph { color: var(--gs-fg-muted); }
+.funnelName {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--gs-fg-muted);
+}
+.funnelCount {
+  flex: none;
+  color: var(--gs-fg-faint);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.funnelMore { color: var(--gs-fg-faint); padding: 4px 6px; }
+.funnelChevron {
+  flex: none;
+  width: 14px; padding: 0;
+  border: none; background: transparent;
+  color: var(--gs-fg-faint);
+  font-family: inherit; font-size: 9px; line-height: 16px;
+  cursor: pointer;
+}
+.funnelChevron:hover:not(:disabled) { color: var(--gs-fg); }
+.funnelChevron:disabled { cursor: default; }
+.funnelPresets { flex: none; display: flex; gap: 4px; }
+/* `.funnelPreset` shipped with `flex: none` and nothing else, so it never
+   joined the shared button vocabulary and the three date presets rendered as
+   the browser's default grey buttons — the one patch of unthemed chrome in
+   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);
+}
+
+/* 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
+   close the thing to find out whether their ticks took. */
+.funnelFoot {
+  flex: none;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 6px 10px;
+  border-top: 1px solid var(--gs-border-soft);
+  background: var(--gs-bg);
+  font-size: 11px; line-height: 16px;
+}
+.funnelFootCount { color: var(--gs-fg-faint); font-variant-numeric: tabular-nums; }
+.funnelFootCountOn { color: var(--gs-fg-muted); }
+.funnelFootClear {
+  flex: none;
+  padding: 2px 6px;
+  border: none; border-radius: var(--gs-r-control);
+  background: transparent;
+  color: var(--gs-fg-dim);
+  font-family: inherit; font-size: 11px; line-height: 16px;
+  cursor: pointer;
+}
+.funnelFootClear:hover:not(:disabled) { color: var(--gs-fg); background: var(--gs-raise); }
+.funnelFootClear:disabled { color: var(--gs-fg-fainter); cursor: default; }
+
 .commitPopSubject {
   color: var(--gs-fg);
   font-size: var(--gs-t-ui); font-weight: 600; line-height: 18px;
@@ -954,6 +1357,13 @@
   font-size: var(--gs-t-meta); line-height: 15px;
 }
 .commitWhen { flex: none; color: var(--gs-fg-faint); }
+/* Who wrote it — sits between hash and relative time, capped so a long name
+   cannot evict the time from the row. */
+.commitAuthor {
+  flex: none; max-width: 120px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--gs-fg-dim);
+}
 
 .body { display: flex; flex: 1; min-height: 0; z-index: 1; }
 
@@ -997,6 +1407,40 @@
   white-space: nowrap;
   color: var(--gs-fg-dim); font-size: var(--gs-t-dense);
 }
+/* The file filter, revealed under the tools rather than squeezed into them:
+   the pane drags down to 170px, where the tick, the count and two icon buttons
+   already own the row. It costs a row only while it is being used. */
+.treeFilter {
+  position: relative;
+  flex: none;
+  display: flex; align-items: center;
+  padding: 6px var(--gs-gutter-pane);
+  border-bottom: 1px solid var(--gs-border-soft);
+}
+.treeFilterInput {
+  flex: 1 1 auto; min-width: 0;
+  height: var(--gs-h-compact); box-sizing: border-box;
+  padding: 0 24px 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);
+  outline: none;
+}
+.treeFilterInput:focus { border-color: var(--gs-accent); }
+.treeFilterInput::placeholder { color: var(--gs-fg-faint); }
+/* Inside the field's right padding, so clearing does not move the field or
+   change its width as the button comes and goes. */
+.treeFilterClear {
+  position: absolute; right: calc(var(--gs-gutter-pane) + 6px);
+  display: flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px;
+  padding: 0;
+  border: 0; border-radius: var(--gs-r-pill);
+  background: transparent; color: var(--gs-fg-faint);
+  font-size: var(--gs-t-ui); line-height: 1;
+  cursor: pointer;
+}
+.treeFilterClear:hover { color: var(--gs-fg); }
 .tree {
   flex: 1; min-height: 0;
   margin: 0; padding: 6px 0 16px;
@@ -1212,7 +1656,7 @@
 }
 .syncLevel { color: var(--gs-fg-faint); }
 .syncSpacer { flex: 1 1 auto; }
-.btn:disabled, .treeIcon:disabled, .miniBtn:disabled, .refButton:disabled {
+.btn:disabled, .treeIcon:disabled, .miniBtn:disabled, .refButton:disabled, .funnelButton:disabled {
   opacity: 0.45;
   cursor: default;
 }
@@ -1239,6 +1683,30 @@
    toggle trails it rather than displacing the tree's left edge. */
 .fileLi { display: flex; align-items: stretch; }
 .fileLi .file { flex: 1 1 auto; min-width: 0; }
+/* Roll back, in the same 22px slot the tick occupies on the other side — the
+   row already has two gutters, and a third would eat the name.
+   It holds its width at all times and only fades in on hover or keyboard
+   focus: revealing it by `display` would re-flow the name column under the
+   pointer, and a destructive control that shifts the row as it appears is one
+   the pointer arrives at by accident. */
+.fileDiscard {
+  flex: none;
+  display: flex; align-items: center; justify-content: center;
+  width: 22px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--gs-fg-faint);
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity 120ms ease, color 120ms ease;
+}
+.fileLi:hover .fileDiscard, .fileDiscard:focus-visible { opacity: 1; }
+/* Red on hover, and only on hover. Standing red would make every row of a
+   working tree look like a warning; arriving under the pointer is where the
+   colour has something to say. */
+.fileDiscard:hover { color: var(--gs-del); }
+.fileDiscard:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: -2px; border-radius: var(--gs-r-control); }
 /* Directory rows need the same two-slot row as files, but their subtree list
    has to stay a child of the <li> — hence a wrapper around just the row. */
 .treeRow { display: flex; align-items: stretch; }
@@ -1359,7 +1827,7 @@
  * its own padding, radius and font-size, and the same "small secondary button"
  * had drifted to four heights and three radii across one screen.
  */
-.btn, .miniBtn, .treeIcon, .commitCopy, .scopeBtn, .refButton {
+.btn, .miniBtn, .treeIcon, .commitCopy, .scopeBtn, .refButton, .funnelButton, .funnelPreset {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
   box-sizing: border-box;
   flex: none;
@@ -1377,13 +1845,14 @@
   transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
 }
 .btn:hover, .miniBtn:hover, .treeIcon:hover, .commitCopy:hover,
-.scopeBtn:hover, .refButton:hover {
+.scopeBtn:hover, .refButton:hover, .funnelButton:hover, .funnelPreset:hover {
   background: var(--gs-raise);
   color: var(--gs-fg);
   border-color: var(--gs-fg-fainter);
 }
 .btn:focus-visible, .miniBtn:focus-visible, .treeIcon:focus-visible,
-.commitCopy:focus-visible, .scopeBtn:focus-visible, .refButton:focus-visible {
+.commitCopy:focus-visible, .scopeBtn:focus-visible, .refButton:focus-visible,
+.funnelPreset:focus-visible {
   outline: 2px solid var(--gs-accent);
   outline-offset: 1px;
 }
@@ -1394,8 +1863,9 @@
    foreign. Controls that live INSIDE a panel or pane stay 8px rects. */
 .btn, .refButton { border-radius: var(--gs-r-pill); }
 
-/* Pane tools give their vertical space back to the diff. */
-.treeIcon, .commitCopy {
+/* Pane tools give their vertical space back to the diff; the date presets sit
+   inside a 320px popover, so they take the compact height too. */
+.treeIcon, .commitCopy, .funnelPreset {
   height: var(--gs-h-compact);
   padding: var(--gs-pad-compact);
   font-size: var(--gs-t-dense);
@@ -1405,6 +1875,9 @@
    the pane drags down to, two more text buttons cannot share a row with the
    count — and these two are the pair a tree header always carries. */
 .treeIcon { width: var(--gs-h-compact); padding: 0; }
+/* Qualified, like `.funnelButtonActive`: this sits inside the shared button
+   vocabulary, which sets `color` at the same specificity a few lines above. */
+.treeIcon.treeIconOn { color: var(--gs-accent); border-color: var(--gs-accent); }
 .treeIconGlyph { display: block; font-size: var(--gs-t-meta); line-height: 1; }
 .treeIconDown { transform: rotate(90deg); }
 
@@ -1510,3 +1983,47 @@
   font-size: var(--gs-t-meta); line-height: 15px;
   cursor: default;
 }
+
+/* ---- the roll-back confirmation ----
+ *
+ * Scoped to the drawer rather than the viewport: `.drawer` is the positioned
+ * ancestor, so the scrim dims the thing the question is about and leaves the
+ * session behind it alone. It is also the only modal surface in this plugin —
+ * everything else the drawer does can be done again.
+ */
+.confirmScrim {
+  /* `position`, `inset` and the stacking rank live with the drawer's other
+     child ranks — see `.drawer > .confirmScrim`. */
+  display: flex; align-items: center; justify-content: center;
+  padding: 24px;
+  background: var(--gs-backdrop);
+  animation: gsFade 120ms ease-out;
+}
+.confirmBox {
+  display: flex; flex-direction: column; gap: 10px;
+  box-sizing: border-box;
+  width: min(440px, 100%);
+  padding: 18px;
+  border: 1px solid var(--gs-border); border-radius: var(--gs-r-drawer);
+  background: var(--gs-bg);
+  box-shadow: 0 18px 48px var(--gs-shadow);
+}
+.confirmTitle { color: var(--gs-fg); font-size: var(--gs-t-ui); font-weight: 600; }
+/* The body carries a path, which is the one string here that can be long and
+   has no sensible break points of its own. */
+.confirmBody {
+  color: var(--gs-fg-dim);
+  font-size: var(--gs-t-dense); line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+/* Cancel first in the DOM so it takes focus and the Tab order starts on the
+   harmless answer; `row-reverse` puts the destructive one where the eye ends. */
+.confirmActions { display: flex; flex-direction: row-reverse; gap: 8px; margin-top: 2px; }
+/* Qualified rather than a bare modifier: written this way it out-specifies
+   `.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);
+  font-weight: 600;
+}
+.btn.btnDanger:hover:not(:disabled) { border-color: var(--gs-del); background: var(--gs-del); color: var(--gs-on-accent, #fff); }