Skip to content

#199 — design-2 fold steppers: gutter +/− steppers, expand-step setting, split-view folds, per-diff fold toggle, copy-icon buttons #213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cmbays merged 4 commits into from
Jun 11, 2026
Merged

#199 — design-2 fold steppers: gutter +/− steppers, expand-step setting, split-view folds, per-diff fold toggle, copy-icon buttons #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
66b1c67
feat(render): design-2 fold steppers — gutter +/− steppers, expand-st…
github-actions[bot] Jun 11, 2026
5741b1d
test: supersede the #132/#136 fold guards with the #199 step-expansio…
github-actions[bot] Jun 11, 2026
cb8aeee
fix(render): truthful fold-toggle + copy outcome state (Gemini PR #21…
github-actions[bot] Jun 11, 2026
0865893
chore: regenerate goldens on the merged tree (main @ 3cd2441 + the Ge…
github-actions[bot] Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
533 changes: 390 additions & 143 deletions examples/diff-showcase-report.html
View file
Open in desktop

Large diffs are not rendered by default.

521 changes: 381 additions & 140 deletions examples/jaffle-shop-report.html
View file
Open in desktop

Large diffs are not rendered by default.

521 changes: 381 additions & 140 deletions examples/playground-report.html
View file
Open in desktop

Large diffs are not rendered by default.

445 changes: 322 additions & 123 deletions templates/interaction.js
View file
Open in desktop

Large diffs are not rendered by default.

74 changes: 58 additions & 16 deletions templates/report.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,7 +512,7 @@ html[data-style="soft"] .settings-panel { border-radius: var(--radius-sm); }
html[data-style="soft"] .settings-panel { border-radius: var(--radius-pan); }
html[data-style="soft"] .cte-dag-cyto,
html[data-style="soft"] .sql-block { border-radius: var(--radius-pan); }
html[data-style="soft"] .diff-expand-all,
html[data-style="soft"] .diff-fold-toggle,
html[data-style="soft"] .yaml-view-btn,
html[data-style="soft"] .theme-chip { border-radius: 999px; }
html[data-style="soft"] .report-header h1 { letter-spacing: -0.01em; }
Expand Down Expand Up @@ -950,7 +950,7 @@ th.col-removed { text-decoration: line-through; text-decoration-color: var(--dif
/* framed code-card header: file path (left) + Diff/File toggle (right) */
.code-header {
display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
padding: 0.35rem 0.55rem; padding-right: 4.8rem;
padding: 0.35rem 0.7rem;
background: var(--code-header-bg); border-bottom: var(--rule-w) solid var(--border); font-size: 0.82em;
}
.code-filename {
Expand All @@ -959,6 +959,13 @@ th.col-removed { text-decoration: line-through; text-decoration-color: var(--dif
}
.code-header-spacer { flex: 1 1 auto; min-width: 0.5rem; }
.code-header .yaml-diff-toggle { margin: 0 0 0 auto; flex: 0 0 auto; }
/* copy-to-clipboard icon button (cute-dbt#199) — inline SVG, class flash */
.code-copy-btn { font: inherit; font-size: 0.92em; padding: 0.12rem 0.6rem; border: var(--rule-w) solid var(--control-border); background: var(--control-bg); color: var(--control-fg); cursor: pointer; border-radius: var(--radius-sm); }
.code-copy-btn.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.22rem 0.4rem; }
.code-copy-btn .icon { width: 0.95rem; height: 0.95rem; }
.code-copy-btn:hover { filter: brightness(0.97); }
.code-copy-btn.copied { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover); }
.code-copy-btn.copy-failed { background: var(--error-bg); border-color: var(--error); color: var(--error); }
/* relocated incremental badge — hugs its text with ~15% side padding */
.code-header .incremental-badge {
flex: 0 0 auto; font-size: 0.86em; line-height: 1.35;
Expand Down Expand Up @@ -998,18 +1005,35 @@ th.col-removed { text-decoration: line-through; text-decoration-color: var(--dif
.diff-added .diff-sigil { color: var(--code-add-sigil); }
.diff-removed .diff-sigil { color: var(--code-rem-sigil); }

/* hunk fold (cute-dbt#199) — the line-number gutter carries the +/− steppers
(GitHub-style); the control re-parks adjacent to the remaining hidden run,
or below the run once fully revealed. */
.diff-fold { cursor: pointer; background: var(--code-hunk-bg); color: var(--code-hunk-fg); font-style: normal; }
.diff-fold:hover { filter: brightness(0.98); }
.diff-fold .diff-gutter-hunk { box-shadow: inset 0 0 0 999px var(--code-hunk-bg); border-right-color: transparent; }
.diff-fold .diff-sigil { color: var(--code-hunk-fg); opacity: 0.75; letter-spacing: -1px; }
.diff-fold-label { color: var(--code-hunk-fg); font-style: normal; }

.diff-view-controls { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 0; font-size: 0.85em; flex-wrap: wrap; }
.diff-ctl-label { display: inline-flex; align-items: center; gap: 0.45ch; color: var(--text-muted); }
.diff-context-input { width: 3.5em; font: inherit; padding: 0.1rem 0.3rem; }
.diff-expand-all { font: inherit; font-size: 1em; padding: 0.1rem 0.6rem; border: var(--rule-w) solid var(--control-border); background: var(--control-bg); color: var(--control-fg); cursor: pointer; border-radius: var(--radius-sm); }
.diff-expand-all:hover { filter: brightness(0.97); }
.diff-expand-all[aria-pressed="true"] { background: var(--control-active-bg); color: var(--control-active-fg); border-color: var(--control-active-bg); }
.diff-fold .diff-gutter-hunk {
box-shadow: inset 0 0 0 999px var(--code-hunk-bg); border-right-color: transparent;
display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
/* gutter +/− steppers: + expands by the user's step, − contracts */
.fold-steppers { display: inline-flex; align-items: center; gap: 1px; }
.fold-steppers button {
display: inline-flex; align-items: center; justify-content: center;
width: 1.25em; height: 1.25em; padding: 0; line-height: 1; font-weight: 700; font-size: 0.95em;
border: var(--rule-w) solid color-mix(in oklab, var(--code-hunk-fg) 45%, transparent);
border-radius: 3px; background: transparent; color: var(--code-hunk-fg); cursor: pointer;
}
.fold-steppers button:hover:not(:disabled) { background: color-mix(in oklab, var(--code-hunk-fg) 18%, transparent); }
.fold-steppers button:disabled { opacity: 0.32; cursor: default; }
.diff-fold .diff-sigil { width: 0; padding: 0; }
.diff-fold-label { color: var(--code-hunk-fg); font-style: normal; flex: 0 0 auto; }
.fold-collapse-all { flex: 0 0 auto; margin: 0 auto; font: inherit; font-size: 0.92em; padding: 0 0.55em; border: var(--rule-w) solid var(--code-hunk-fg); border-radius: var(--radius-sm); background: transparent; color: var(--code-hunk-fg); cursor: pointer; }
.fold-collapse-all:hover { background: color-mix(in oklab, var(--code-hunk-fg) 16%, transparent); }

/* per-diff Expand/Collapse-all toggle (cute-dbt#199) — lives in each diff's
code header; the #132 top-of-report .diff-view-controls strip is retired. */
.diff-fold-toggle { font: inherit; font-size: 0.92em; padding: 0.12rem 0.6rem; border: var(--rule-w) solid var(--control-border); background: var(--control-bg); color: var(--control-fg); cursor: pointer; border-radius: var(--radius-sm); }
.diff-fold-toggle:hover { filter: brightness(0.97); }
.diff-fold-toggle[aria-pressed="true"] { background: var(--control-active-bg); color: var(--control-active-fg); border-color: var(--control-active-bg); }
.diff-added strong { font-weight: 700; background: var(--code-add-word); color: inherit; border-radius: 2px; padding: 0 1px; }
.diff-removed strong { font-weight: 700; background: var(--code-rem-word); color: inherit; border-radius: 2px; padding: 0 1px; }

Expand All @@ -1019,12 +1043,19 @@ th.col-removed { text-decoration: line-through; text-decoration-color: var(--dif
split <table> side by side.) */
.diff-unified { display: block; }
.diff-split { display: none; width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
/* explicit column widths so the two code halves are a true 50/50 that grows
and shrinks with the viewport (the fold row's colspan cell must NOT define
widths). */
.diff-split col.ds-c-num { width: 3.8em; }
.diff-split col.ds-c-code { width: auto; }
.diff-split td { vertical-align: top; padding: 0; border: 0; }
.diff-split .ds-num {
width: 3em; text-align: right; padding: 0 0.55em; white-space: nowrap; user-select: none;
text-align: right; padding: 0 0.55em; white-space: nowrap; user-select: none;
color: var(--code-gutter-fg); background: var(--code-gutter-bg); border-right: var(--rule-w) solid var(--border);
}
.diff-split tr > td:nth-child(3) { border-left: var(--rule-w) solid var(--border); }
/* separator between the two equal halves: a clear divider + small gap */
.diff-split tr > td.ds-num:nth-child(3) { border-left: var(--rule-w) solid var(--border); padding-left: 0.7rem; }
.diff-split tr > td.ds-fold-gutter:nth-child(3) { border-left: var(--rule-w) solid var(--border); }
.diff-split .ds-code { overflow: hidden; }
.diff-split .ds-codewrap { display: flex; align-items: flex-start; padding-right: 0.5rem; }
.diff-split .ds-code .diff-sigil { flex: 0 0 auto; width: 1.6ch; padding-left: 0.4ch; }
Expand All @@ -1040,6 +1071,16 @@ th.col-removed { text-decoration: line-through; text-decoration-color: var(--dif
.diff-split .ds-removed .diff-sigil { color: var(--code-rem-sigil); }
.diff-split .ds-empty { background: var(--code-header-bg); }

/* split-view fold row (cute-dbt#199 — mirrors the unified hunk fold; one
solid full-width band with the gutter steppers + a colspan label cell) */
.diff-split tr.diff-fold { cursor: pointer; background: var(--code-hunk-bg); color: var(--code-hunk-fg); }
.diff-split tr.diff-fold:hover { filter: brightness(0.98); }
.diff-split .ds-fold-gutter { box-sizing: border-box; border: 0; padding: 0.1rem 0.2rem; text-align: center; color: var(--code-hunk-fg); }
.diff-split .ds-fold-gutter .fold-steppers { justify-content: center; }
.diff-split .ds-fold-cell { padding: 0.12rem 0.6rem; border: 0; }
.diff-split .ds-fold-inner { display: flex; align-items: center; width: 100%; }
.diff-split .ds-fold-cell .diff-fold-label { color: var(--code-hunk-fg); flex: 0 0 auto; }

/* layout selection: Unified is the default (above). AUTO => split when wide;
explicit Split => split down to a smaller floor, then fall back to unified. */
@media (min-width: 1000px) {
Expand Down Expand Up @@ -1128,8 +1169,9 @@ th.has-col-meta:focus-visible { outline: 2px solid var(--accent); outline-offset
the static settings-panel markup needs.
========================================================================== */

/* cute-dbt#136 — an expanded fold stays visible as a "Hide N" collapse
affordance; mark it among many hunks. */
/* cute-dbt#136 / cute-dbt#199 — a fully-expanded fold control stays visible
(re-parked below its run, "All N lines shown" + collapse-all); mark it
among many hunks. */
.diff-fold[aria-expanded="true"] { filter: brightness(0.96); }

/* The Model SQL section keeps its vertical rhythm (it sits outside the
Expand Down
27 changes: 18 additions & 9 deletions templates/report.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,10 @@ <h1>{{ report_title }}</h1>
(never a scoping failure). The leading `{%-` trims the inter-tag
whitespace so baseline-mode output stays byte-identical (#85 contract). #}
<p class="zero-updated-affirm" data-testid="zero-updated-affirm" hidden>no unit-test definitions changed in this diff</p>
{# cute-dbt#132 — diff-view controls: the global expand/collapse action.
PR-diff mode only (inline diffs exist only here), so baseline output stays
byte-identical (#85). The configurable fold-context input moved into the
#139 settings panel (the cog, top-right); the Expand-all action stays here
as a per-view affordance. Wired in bindDiffViewControls. #}
<div class="diff-view-controls" aria-label="Diff view controls">
<button type="button" class="diff-expand-all" aria-pressed="false">Expand all</button>
</div>
{# The #132 top-of-report diff-view controls strip was retired by design
pass-2 (cute-dbt#199): expand/collapse over a file's hunks now lives
with that file's diff — the per-diff fold toggle in each code header
(buildFoldToggleBtn, interaction.js). #}
{%- endif %}
</section>

Expand Down Expand Up @@ -139,6 +135,17 @@ <h2>Appearance</h2>
min="0" max="20" step="1" value="3"
aria-label="Unchanged context lines shown around each change">
</div>
{# cute-dbt#199 — lines revealed per gutter-fold activation (0 = all).
Read live by expandFold/contractFold; no re-render. Static markup
per the #188 contract; wired + persisted in bindSettingsMenu. #}
<div class="settings-row">
<label for="settings-expand-step">Expand step
<span class="settings-hint">lines revealed per gutter click &mdash; 0 = all</span>
</label>
<input type="number" class="settings-context-input" id="settings-expand-step"
min="0" max="500" step="1" value="20"
aria-label="Lines revealed each time you expand a fold; 0 reveals all">
</div>
<div class="settings-row">
<label for="settings-normalize-input">Hide format-only changes
<span class="settings-hint">treat reformatted-but-equal cells as unchanged</span>
Expand Down Expand Up @@ -199,8 +206,10 @@ <h2>This manifest can't be visualized</h2>
<section class="model-sql" aria-label="Model SQL">
<details class="model-sql-details">
<summary>Model SQL<span class="model-sql-summary-hint">raw, with Jinja</span></summary>
{# The wrap is rebuilt by renderModelSql on every model switch; the copy
affordance is the JS-built code-header copy-icon button (cute-dbt#199)
— no static Copy button (it would be dead, handler-less markup). #}
<div class="sql-block-wrap model-sql-wrap">
<button type="button" class="sql-copy model-sql-copy">Copy</button>
<pre class="sql-block model-sql-block"><code class="model-sql-code"></code></pre>
</div>
</details>
Expand Down
Loading
Loading